:root {
  color-scheme: dark;
  --paper: #121210;
  --surface: #1a1a17;
  --ink: #f5f1e9;
  --muted: #bbb5aa;
  --gold: #edc98d;
  --border: #3b3830;
  --shell: 1192px;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
h1, h2, h3, p, figure { margin: 0; }
.shell { width: min(var(--shell), calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: absolute; z-index: 4; top: 10px; left: 10px; padding: 12px; transform: translateY(-200%); color: #20170c; background: var(--gold); }
.skip-link:focus { transform: none; }

.site-header {
  border-bottom: 1px solid #332f27;
  background: #151511;
}
.header-inner { min-height: 75px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 1.14rem; font-weight: 780; letter-spacing: -.04em; text-decoration: none; white-space: nowrap; }
.brand img { object-fit: contain; }
.registered { margin-left: 2px; color: var(--gold); vertical-align: super; font-size: .58em; }
.brand-app { margin-left: 9px; color: var(--muted); font-size: .86rem; font-weight: 550; letter-spacing: 0; }
.nav { display: flex; align-items: center; gap: clamp(22px, 4vw, 56px); }
.nav a, .site-footer a { color: var(--muted); font-size: .9rem; font-weight: 620; text-decoration: none; }
.nav a:hover, .site-footer a:hover { color: var(--gold); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 47px; padding: 10px 17px;
  border: 1px solid transparent; border-radius: 9px;
  font-size: .9rem; font-weight: 740; text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.button-primary { color: #221706; background: var(--gold); box-shadow: inset 0 1px #fff6; }
.button-primary:hover { background: #f9dca9; }
.button-outline { border-color: #4b4538; background: #26221945; }
.button-outline:hover { border-color: #a1875b; background: #393024; }
.header-login { min-height: 42px; }

main { overflow: clip; }
.hero {
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 75px); align-items: center;
  padding-block: clamp(68px, 10vw, 148px) clamp(61px, 8vw, 112px);
}
.hero::before {
  content: ""; position: absolute; z-index: -1; inset: -130px -140px -130px -140px; pointer-events: none;
  background: radial-gradient(ellipse at 77% 42%, #6a50273d 0%, #34271a25 33%, transparent 68%);
}
.hero-copy { position: relative; z-index: 1; animation: enter .65s ease-out both; }
.hero h1 {
  font-size: clamp(3rem, 5.8vw, 5.6rem);
  font-weight: 785; letter-spacing: -.083em; line-height: .99;
}
.hero h1 span { color: var(--gold); }
.hero-copy > p { max-width: 33ch; margin: 27px 0 28px; color: var(--muted); font-size: clamp(1rem, 1.55vw, 1.22rem); line-height: 1.6; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.hero-copy > .hero-trial-note { max-width: none; margin: 11px 0 0; color: #c3bba9; font-size: .82rem; }

.hero-stage {
  --pointer-x: 0;
  --pointer-y: 0;
  position: relative; display: grid; min-width: 0; padding: 17px 0 0;
  isolation: isolate; perspective: 1050px; animation: enter .8s .1s ease-out both;
}
.hero-glow {
  position: absolute; z-index: -1; inset: -32px -38px 2px; pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse, #d7a75159, #8a5c2626 44%, transparent 72%);
  transform: translate3d(calc(var(--pointer-x) * -22px), calc(var(--pointer-y) * -16px), 0);
  transition: transform .27s ease-out;
}
.hero-preview {
  position: relative; overflow: hidden;
  border: 1px solid #6f5b42; border-radius: 17px;
  background: #171918; box-shadow: 0 35px 70px #0009, 0 0 0 6px #c9a66f10;
  transform: translate3d(calc(var(--pointer-x) * 11px), calc(var(--pointer-y) * 8px), 0)
    rotateX(calc(var(--pointer-y) * -7deg)) rotateY(calc(var(--pointer-x) * 8deg));
  transition: transform .25s ease-out;
}
.hero-preview img { width: 100%; height: auto; }
.hero-stage figcaption { margin-top: 16px; color: var(--muted); font-size: .78rem; text-align: center; }

.section { padding-block: clamp(52px, 7vw, 96px); scroll-margin-block-start: 12px; }
.section-heading { display: grid; gap: 13px; max-width: 690px; margin-bottom: clamp(25px, 4vw, 42px); }
.section-heading h2 { font-size: clamp(2.1rem, 4.35vw, 4rem); font-weight: 770; letter-spacing: -.065em; line-height: 1.04; }
.section-heading p { color: var(--muted); font-size: clamp(.98rem, 1.35vw, 1.13rem); line-height: 1.6; }

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.feature {
  display: grid; grid-template-rows: minmax(220px, 1fr) auto;
  min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 15px;
  background: var(--surface);
}
.feature-copy { grid-row: 2; padding: 23px 22px 25px; }
.feature h3 { margin-bottom: 9px; font-size: clamp(1.17rem, 1.9vw, 1.45rem); font-weight: 730; letter-spacing: -.037em; }
.feature p { color: var(--muted); font-size: .92rem; line-height: 1.55; }
.feature-visual {
  position: relative; grid-row: 1; display: grid; place-items: center; overflow: hidden;
  padding: 16px 20px; border-bottom: 1px solid #3a362d;
  background: radial-gradient(ellipse at 50% 80%, #493920, #22211c 68%);
}
.feature-visual img { border-radius: 8px; }
.scanner-frame {
  position: relative; overflow: hidden; width: min(71%, 198px); aspect-ratio: 390 / 406;
  border: 1px solid #585044; border-radius: 12px; box-shadow: 0 15px 32px #0008;
  transform: rotate(-5deg) translateY(7px);
}
.scanner-frame img { position: absolute; inset: 0 auto auto 0; width: 100%; height: auto; transform: translateY(-10.8%); }
.binder-visual img { width: 108%; max-width: none; height: auto; border: 1px solid #5b5141; box-shadow: 0 15px 28px #0008; transform: translateY(12px) rotate(-3deg); }
.market-visual img { width: min(69%, 192px); height: auto; border: 1px solid #5b5141; box-shadow: 0 14px 29px #0009; transform: translateY(11px) rotate(5deg); }

.plans-section { margin-top: clamp(14px, 3vw, 38px); border-block: 1px solid #3a3328; background: radial-gradient(ellipse at 90% 18%, #4a38272e, transparent 55%), #171612; }
.trial-offer {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 16px 24px; margin-bottom: 22px; padding: clamp(16px, 3vw, 28px);
  border: 1px solid #795e37; border-radius: 13px;
  background: linear-gradient(115deg, #382c1c, #272219);
}
.trial-offer div { max-width: 61ch; }
.trial-offer h3 { color: var(--gold); font-size: clamp(1.17rem, 2.4vw, 1.65rem); line-height: 1.2; letter-spacing: -.03em; }
.trial-offer p { margin-top: 7px; color: #ddd3c0; font-size: .91rem; line-height: 1.55; }
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.plan { display: grid; align-content: start; min-width: 0; padding: clamp(15px, 2.45vw, 28px); border: 1px solid #484034; border-radius: 13px; background: #201e18; }
.plan-premium { border-color: #8b6c41; background: radial-gradient(ellipse at 0% 0%, #523a20, #282117 73%); }
.plan h3 { font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 730; letter-spacing: -.03em; }
.plan-price { margin-top: 5px; color: var(--muted); font-size: .88rem; }
.scan-limit { margin-top: clamp(16px, 2.6vw, 28px); color: #e1d9ca; font-size: .86rem; }
.scan-limit strong { color: var(--gold); font-size: clamp(2rem, 3.35vw, 3rem); line-height: 1.05; font-weight: 770; letter-spacing: -.062em; }
.binder-limit { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f1d6a523; font-size: .92rem; font-weight: 650; }
.market-limit { margin-top: 10px; color: #e1d9ca; font-size: .82rem; line-height: 1.4; }
.market-limit strong { display: block; margin-top: 3px; color: var(--gold); font-size: .78rem; }
.market-limit.is-locked, .market-limit.is-locked strong { color: var(--muted); }
.plan-share-wishes { display: block; margin-top: 4px; font-size: .78rem; }
.plan-share-wishes.is-locked { color: var(--muted); }
.plan-feature-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; }
.plan-help {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; color: var(--gold); background: transparent; font: inherit; cursor: pointer;
}
.plan-help span {
  display: grid; place-items: center; width: 19px; height: 19px;
  border: 1px solid #a1875b; border-radius: 50%; line-height: 1; font-weight: 750;
}
.plan-help:hover span, .plan-help:focus-visible span { color: #221706; background: var(--gold); }
.plan-help-dialog {
  width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: clamp(20px, 5vw, 30px);
  border: 1px solid #65553e; border-radius: 14px; color: var(--ink); background: #211e18;
  box-shadow: 0 24px 64px #0009;
}
.plan-help-dialog::backdrop { background: #0a0907b8; }
.plan-help-dialog h2 { color: var(--gold); font-size: 1.3rem; line-height: 1.25; }
.plan-help-dialog p { margin-top: 12px; color: #e1d9ca; font-size: .94rem; line-height: 1.55; }
.plan-help-dialog form { display: flex; justify-content: end; margin-top: 20px; }
.plan-help-dialog button { cursor: pointer; }
.plan-note { margin-top: 15px; color: var(--muted); font-size: .85rem; }
.plan-note a { margin-inline-start: 4px; color: var(--gold); }

.faq-section { display: grid; grid-template-columns: minmax(200px, .75fr) minmax(0, 1.25fr); gap: clamp(24px, 5vw, 60px); }
.faq-section .section-heading { margin: 0; }
.faq-list { border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 2px; cursor: pointer; font-weight: 670; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--gold); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list p { max-width: 56ch; padding: 0 18px 18px 2px; color: var(--muted); font-size: .92rem; line-height: 1.6; }
.faq-list a { color: var(--gold); }

.site-footer { border-top: 1px solid var(--border); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; min-height: 76px; color: var(--muted); font-size: .86rem; }
.footer-inner nav { display: flex; flex-wrap: wrap; gap: 10px 18px; }

@keyframes enter { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
.reveal-ready [data-reveal] { opacity: 0; translate: 0 14px; transition: opacity .48s ease-out, translate .48s ease-out; }
.reveal-ready [data-reveal].is-visible { opacity: 1; translate: none; }

@media (max-width: 1030px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 29px; }
  .feature-grid { gap: 12px; }
  .feature { grid-template-rows: 198px auto; }
  .feature-copy { padding: 19px 17px; }
  .feature-visual { padding-inline: 14px; }
}

@media (max-width: 760px) {
  .shell { width: min(var(--shell), calc(100% - 40px)); }
  .header-inner { min-height: 65px; gap: 12px; }
  .nav { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 63px 33px; }
  .hero h1 { font-size: clamp(3rem, 10.7vw, 5.2rem); }
  .hero-copy > p { margin-block: 19px 24px; }
  .hero-stage { padding-top: 0; }
  .hero-preview { border-radius: 12px; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .feature { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: minmax(175px, 1fr); align-items: stretch; }
  .feature-visual { grid-column: 1; border-right: 1px solid #3a362d; border-bottom: 0; padding: 11px; }
  .feature-copy { grid-column: 2; grid-row: 1; align-self: center; }
  .binder-visual img { width: 122%; }
  .market-visual img { width: min(88%, 172px); }
  .scanner-frame { width: min(88%, 160px); }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-section { grid-template-columns: minmax(0, 1fr); }
  .footer-inner { padding-block: 16px; }
}

@media (max-width: 420px) {
  .shell { width: calc(100% - 32px); }
  .brand { gap: 4px; }
  .brand img { width: 34px; height: auto; }
  .header-login { padding-inline: 11px; }
  .hero-actions { align-items: stretch; }
  .hero-actions .button { gap: 7px; padding-inline: 11px; }
  .feature { grid-template-columns: minmax(0, 1fr); grid-template-rows: 180px auto; }
  .feature-copy { grid-column: 1; grid-row: 2; }
  .feature-visual { border-right: 0; border-bottom: 1px solid #3a362d; }
  .binder-visual img { width: min(94%, 280px); }
  .plan-grid { gap: 9px; }
  .plan { padding-inline: 13px; }
}

@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .hero-preview, .hero-glow { transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-copy, .hero-stage { animation: none; }
  .reveal-ready [data-reveal] { opacity: 1; translate: none; transition: none; }
}