/* =====================================================================
   Yemmi — web2app design system
   Warm paper world · brand green · neon-lime "scanner" signature · coral tension
   Matches the shipped V7 "paper-and-ink" app tokens. System font, no external deps.
   ===================================================================== */

:root {
  /* paper / surfaces */
  --paper:#FAF7F2; --paper2:#F3EFE6; --paper3:#E8E2D3;
  --surface:#FFFFFF; --surface-warm:#FBF8F3; --sunk:#F1ECE1;

  /* ink / text */
  --ink:#12130E; --ink2:#33342C; --ink3:#6B6B66; --ink4:#9E9E97;

  /* lines */
  --line:#E5DECE; --line2:#D2C8AF;

  /* brand green */
  --brand:#1B6E5A; --brand-deep:#114A3D; --brand-ink:#0A2F26;
  --brand-soft:#D4E7DD; --brand-tint:#E6F0EA;

  /* signature scan accent (neon lime — used sparingly) */
  --scan:#7ED957; --scan-hi:#B6EE7E; --scan-glow:rgba(126,217,87,.55);

  /* tension / warning */
  --amber:#C99B36; --amber-soft:#F7E8C2;
  --coral:#D6664A; --coral-soft:#F8E0D6; --alert:#B53D27;

  /* grade seals (A–F + S) — WCAG-safe with white text */
  --g-s:#0B8159; --g-a:#1B7A43; --g-b:#4F7A26; --g-c:#946615; --g-d:#9E541C; --g-f:#B53D27;
  --g-a-soft:#D4E9D9;

  /* radii */
  --r-chip:10px; --r-row:14px; --r-card:18px; --r-hero:24px; --r-sheet:28px; --r-pill:999px;

  /* shadows — dark-green grounded (clay) */
  --sh-soft:0 1px 2px rgba(10,47,38,.06), 0 8px 24px rgba(10,47,38,.07);
  --sh-card:0 1px 2px rgba(10,47,38,.06), 0 14px 34px rgba(10,47,38,.09);
  --sh-lift:0 2px 4px rgba(10,47,38,.08), 0 22px 50px rgba(10,47,38,.14);
  --sh-clay:inset 0 2px 0 rgba(255,255,255,.55), 0 2px 3px rgba(10,47,38,.10), 0 16px 30px rgba(10,47,38,.16);

  /* layout */
  --maxw:1120px; --gutter:22px; --nav-h:64px;

  --font:-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;

  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--scan-glow); color:var(--brand-ink); }

/* ---- layout helpers ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-narrow{ max-width:760px; }
.section{ padding-block:clamp(56px,9vw,110px); }
.section-tight{ padding-block:clamp(40px,6vw,72px); }
.center{ text-align:center; }
.stack-sm>*+*{ margin-top:.6rem; }
.stack>*+*{ margin-top:1.1rem; }
.grid{ display:grid; gap:22px; }
@media (min-width:720px){ .grid-2{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:859px){ .hide-sm{ display:none !important; } }
@media (min-width:860px){ .hide-lg{ display:none !important; } }
.split{ display:grid; gap:40px; grid-template-columns:1fr; align-items:center; }
@media (min-width:920px){ .split{ grid-template-columns:1.05fr .95fr; gap:56px; } .split.media-first>*:first-child{ order:2; } }

/* ---- type ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brand);
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--brand); border-radius:2px; opacity:.7; }
.eyebrow.plain::before{ display:none; }

h1,.h1{ font-size:clamp(2.35rem,6.6vw,4.3rem); font-weight:800; line-height:1.03; letter-spacing:-.032em; color:var(--ink); }
h2,.h2{ font-size:clamp(1.75rem,4vw,2.7rem); font-weight:800; line-height:1.08; letter-spacing:-.024em; color:var(--ink); }
h3,.h3{ font-size:clamp(1.15rem,2.2vw,1.4rem); font-weight:750; line-height:1.2; letter-spacing:-.015em; color:var(--ink); }
.lead{ font-size:clamp(1.08rem,1.7vw,1.28rem); color:var(--ink2); line-height:1.55; }
.body{ font-size:1.03rem; color:var(--ink2); }
.muted{ color:var(--ink3); }
.meta{ font-size:.82rem; color:var(--ink3); letter-spacing:.01em; }
.balance{ text-wrap:balance; }
strong,b{ font-weight:750; color:var(--ink); }

/* highlighter marker on a keyword — the "reveal" of a hidden truth */
.mark{
  background-image:linear-gradient(180deg,transparent 58%, var(--scan-glow) 58%);
  background-repeat:no-repeat; background-size:100% 100%;
  padding:0 .06em; border-radius:2px;
}
.mark.coral{ background-image:linear-gradient(180deg,transparent 58%, rgba(214,102,74,.34) 58%); }
.mark.reveal-mark{ background-size:0% 100%; transition:background-size .7s cubic-bezier(.2,.7,.2,1) .15s; }
.mark.reveal-mark.in{ background-size:100% 100%; }

/* ---- buttons (clay) ---- */
.btn{
  --bg:var(--brand); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font:inherit; font-weight:750; font-size:1rem; letter-spacing:-.01em;
  color:var(--fg); background:var(--bg);
  padding:.85em 1.35em; border:0; border-radius:var(--r-pill); cursor:pointer;
  box-shadow:var(--sh-clay); text-align:center;
  transition:transform .12s ease, box-shadow .2s ease, filter .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ filter:brightness(1.05); }
.btn:active{ transform:scale(.97); box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 2px 3px rgba(10,47,38,.12); }
.btn:focus-visible{ outline:3px solid var(--scan); outline-offset:3px; }
.btn-lg{ font-size:1.08rem; padding:1.02em 1.7em; }
.btn-block{ display:flex; width:100%; }
.btn-ghost{ --bg:transparent; --fg:var(--brand); box-shadow:inset 0 0 0 1.5px var(--brand-soft); }
.btn-ghost:hover{ --bg:var(--brand-tint); filter:none; }
.btn-dark{ --bg:var(--brand-ink); --fg:#fff; }
.btn .arr{ transition:transform .2s ease; }
.btn:hover .arr{ transform:translateX(3px); }

/* App Store badge (black pill, Apple mark) */
.btn-app{
  display:inline-flex; align-items:center; gap:.7em;
  background:#000; color:#fff; border-radius:14px; padding:.62em 1.15em .68em;
  box-shadow:var(--sh-soft); transition:transform .12s ease, box-shadow .2s ease;
}
.btn-app:hover{ transform:translateY(-2px); box-shadow:var(--sh-card); }
.btn-app:active{ transform:scale(.98); }
.btn-app:focus-visible{ outline:3px solid var(--scan); outline-offset:3px; }
.btn-app svg{ width:26px; height:26px; fill:#fff; flex:none; }
.btn-app .l1{ display:block; font-size:.66rem; font-weight:500; letter-spacing:.02em; opacity:.86; line-height:1.1; }
.btn-app .l2{ display:block; font-size:1.14rem; font-weight:600; letter-spacing:-.01em; line-height:1.15; }

/* ---- pills / chips ---- */
.pill{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; font-weight:700; letter-spacing:.01em;
  padding:.4em .8em; border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink2); box-shadow:var(--sh-soft);
}
.pill.brand{ background:var(--brand-tint); color:var(--brand-deep); box-shadow:none; }
.pill.scan{ background:rgba(126,217,87,.16); color:var(--brand-deep); box-shadow:none; }
.chip{
  display:inline-flex; align-items:center; gap:.4em;
  font-size:.86rem; font-weight:650; padding:.5em .85em; border-radius:var(--r-chip);
  background:var(--surface); color:var(--ink2); border:1px solid var(--line);
}
.chip.flag{ background:var(--coral-soft); color:#8a2f1c; border-color:transparent; }
.chip.ok{ background:var(--brand-tint); color:var(--brand-deep); border-color:transparent; }

/* ---- cards ---- */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:26px; box-shadow:var(--sh-card);
}
.card-warm{ background:var(--surface-warm); }
.card-flat{ box-shadow:var(--sh-soft); }
.card-pad-lg{ padding:clamp(26px,4vw,42px); }

/* ---- grade seal (the Consumer-Reports stamp) ---- */
.seal{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:12px; flex:none;
  color:#fff; font-weight:800; font-size:1.5rem; letter-spacing:-.02em;
  box-shadow:0 6px 14px rgba(10,47,38,.22), inset 0 1px 0 rgba(255,255,255,.28);
}
.seal.sm{ width:30px; height:30px; border-radius:8px; font-size:1rem; }
.seal.lg{ width:72px; height:72px; border-radius:18px; font-size:2.5rem; }
.seal.xl{ width:104px; height:104px; border-radius:24px; font-size:3.6rem; }
.seal--s{ background:var(--g-s); } .seal--a{ background:var(--g-a); } .seal--b{ background:var(--g-b); }
.seal--c{ background:var(--g-c); } .seal--d{ background:var(--g-d); } .seal--f{ background:var(--g-f); }

/* ---- the SCANNER signature ---- */
.scanframe{ position:relative; border-radius:var(--r-hero); overflow:hidden; }
.scanframe .corner{
  position:absolute; width:34px; height:34px; z-index:3; pointer-events:none;
  border:3px solid var(--scan); filter:drop-shadow(0 0 5px var(--scan-glow));
}
.scanframe .corner.tl{ top:16px; left:16px; border-right:0; border-bottom:0; border-radius:8px 0 0 0; }
.scanframe .corner.tr{ top:16px; right:16px; border-left:0; border-bottom:0; border-radius:0 8px 0 0; }
.scanframe .corner.bl{ bottom:16px; left:16px; border-right:0; border-top:0; border-radius:0 0 0 8px; }
.scanframe .corner.br{ bottom:16px; right:16px; border-left:0; border-top:0; border-radius:0 0 8px 0; }
.scanframe .scanline{
  position:absolute; left:0; right:0; top:0; height:16px; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--scan-glow),transparent);
  box-shadow:0 0 22px 5px var(--scan-glow);
  animation:scan-sweep 3s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes scan-sweep{ 0%{top:4%;opacity:0} 12%{opacity:1} 88%{opacity:1} 100%{top:92%;opacity:0} }

/* a small inline scan pulse dot */
.scan-dot{ width:9px; height:9px; border-radius:50%; background:var(--scan); box-shadow:0 0 0 0 var(--scan-glow); animation:scan-pulse 1.8s ease-out infinite; }
@keyframes scan-pulse{ 0%{box-shadow:0 0 0 0 var(--scan-glow)} 70%{box-shadow:0 0 0 10px transparent} 100%{box-shadow:0 0 0 0 transparent} }

/* ---- mascot + speech bubble ---- */
.mascot{ width:64px; height:64px; flex:none; }
.mascot.sm{ width:44px; height:44px; }
.mascot.lg{ width:120px; height:120px; }
.speech{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:.7em 1em; box-shadow:var(--sh-soft);
  font-size:.95rem; color:var(--ink2); font-weight:550;
}
.speech::after{
  content:""; position:absolute; left:24px; bottom:-9px; width:16px; height:16px;
  background:var(--surface); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transform:rotate(45deg);
}
.speech.left::after{ left:24px; } .speech.tail-top::after{ top:-9px; bottom:auto; transform:rotate(225deg); }
.mascot-row{ display:flex; align-items:flex-end; gap:14px; }

/* app-tile hero object */
.app-tile{ border-radius:26px; box-shadow:var(--sh-lift); }
.app-tile.float{ animation:bob 6s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* ---- nav ---- */
.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(250,247,242,.82); backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .25s ease, box-shadow .25s ease;
}
.nav.scrolled{ border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(10,47,38,.03); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.nav-brand{ display:flex; align-items:center; gap:.55em; font-weight:800; font-size:1.16rem; letter-spacing:-.02em; color:var(--ink); }
.nav-brand img{ width:34px; height:34px; }
.nav-links{ display:none; align-items:center; gap:26px; list-style:none; }
.nav-links a{ font-size:.95rem; font-weight:600; color:var(--ink2); transition:color .18s; }
.nav-links a:hover{ color:var(--brand); }
.nav-cta{ display:flex; align-items:center; gap:12px; }
@media (min-width:900px){ .nav-links{ display:flex; } }

/* ---- footer ---- */
.footer{ background:var(--brand-ink); color:#cfe0d6; padding-block:56px 30px; }
.footer a{ color:#cfe0d6; transition:color .18s; }
.footer a:hover{ color:#fff; }
.footer-top{ display:grid; gap:34px; grid-template-columns:1fr; }
@media (min-width:760px){ .footer-top{ grid-template-columns:1.4fr 1fr 1fr 1fr; } }
.footer-brand{ display:flex; align-items:center; gap:.55em; font-weight:800; font-size:1.2rem; color:#fff; }
.footer-brand img{ width:36px; height:36px; }
.footer h4{ font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; color:#8fb3a2; margin-bottom:14px; font-weight:800; }
.footer ul{ list-style:none; display:flex; flex-direction:column; gap:10px; font-size:.95rem; }
.footer-bottom{ margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:space-between; align-items:center; font-size:.82rem; color:#8fb3a2; }
.footer-disc{ max-width:640px; font-size:.8rem; color:#7ba491; line-height:1.55; }

/* ---- reveal on scroll ---- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s } .reveal.d4{ transition-delay:.32s }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .app-tile.float{ animation:none; }
  .scanframe .scanline{ animation:none; opacity:.5; top:46%; }
  .scan-dot{ animation:none; }
  .mark.reveal-mark{ background-size:100% 100%; transition:none; }
}

/* ---- misc sections ---- */
.eyebrow-center{ display:flex; justify-content:center; }
.divider{ height:1px; background:var(--line); border:0; }
.kicker-num{ font-variant-numeric:tabular-nums; font-weight:800; color:var(--brand); letter-spacing:-.02em; }

/* stat block */
.stat{ }
.stat .n{ font-size:clamp(2rem,4vw,3rem); font-weight:800; letter-spacing:-.03em; color:var(--brand-deep); line-height:1; font-variant-numeric:tabular-nums; }
.stat .l{ margin-top:.5em; font-size:.92rem; color:var(--ink3); }

/* before/after row */
.ba{ display:grid; gap:14px; }
@media (min-width:640px){ .ba{ grid-template-columns:1fr auto 1fr; align-items:center; } }
.ba-before,.ba-after{ border-radius:var(--r-row); padding:16px 18px; font-weight:600; }
.ba-before{ background:var(--coral-soft); color:#8a2f1c; }
.ba-after{ background:var(--brand-tint); color:var(--brand-deep); }
.ba-arrow{ display:flex; align-items:center; justify-content:center; color:var(--brand); font-weight:800; }

/* feature row w/ icon glyph */
.feat{ display:flex; gap:16px; align-items:flex-start; }
.feat .glyph{ width:46px; height:46px; flex:none; border-radius:13px; display:flex; align-items:center; justify-content:center; background:var(--brand-tint); color:var(--brand-deep); font-size:1.4rem; }

/* comparison table */
.cmp{ width:100%; border-collapse:separate; border-spacing:0; font-size:.96rem; }
.cmp th,.cmp td{ padding:15px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
.cmp thead th{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink3); }
.cmp .col-us{ background:var(--brand-tint); }
.cmp thead .col-us{ color:var(--brand-deep); border-radius:12px 12px 0 0; }
.cmp tbody tr:last-child td{ border-bottom:0; }
.cmp .yes{ color:var(--g-a); font-weight:800; } .cmp .no{ color:var(--ink4); font-weight:700; }
.cmp-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-card); border:1px solid var(--line); background:var(--surface); box-shadow:var(--sh-soft); }

/* faq */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{ list-style:none; cursor:pointer; padding:20px 4px; display:flex; justify-content:space-between; gap:18px; align-items:center; font-weight:700; font-size:1.06rem; color:var(--ink); }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; font-weight:400; font-size:1.6rem; color:var(--brand); flex:none; transition:transform .2s; }
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item p{ padding:0 4px 20px; color:var(--ink2); font-size:1rem; max-width:66ch; }

/* section backgrounds */
.bg-paper2{ background:var(--paper2); }
.bg-brand{ background:linear-gradient(165deg,var(--brand-deep),var(--brand-ink)); color:#eaf3ee; }
.bg-brand h1,.bg-brand h2,.bg-brand h3{ color:#fff; }
.bg-brand .lead{ color:#c7ddd2; }
.bg-tint{ background:var(--brand-tint); }

/* skip link */
.skip{ position:absolute; left:-999px; top:0; background:var(--brand); color:#fff; padding:10px 16px; border-radius:0 0 10px 0; z-index:100; }
.skip:focus{ left:0; }

/* =====================================================================
   QUIZ FUNNEL
   ===================================================================== */
.quiz-shell{ min-height:100dvh; display:flex; flex-direction:column; background:var(--paper); }
.quiz-top{ position:sticky; top:0; z-index:10; background:rgba(250,247,242,.9); backdrop-filter:blur(10px); padding:14px var(--gutter) 12px; }
.quiz-top-row{ max-width:560px; margin-inline:auto; display:flex; align-items:center; gap:12px; }
.q-back{ width:38px; height:38px; flex:none; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink2); font-size:1.2rem; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s; }
.q-back:hover{ background:var(--sunk); }
.q-back[hidden]{ display:none; }
.q-progress{ flex:1; height:8px; border-radius:999px; background:var(--paper3); overflow:hidden; }
.q-progress-fill{ height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,var(--brand),var(--brand-deep)); transition:width .45s cubic-bezier(.4,0,.2,1); }
.q-count{ flex:none; font-size:.78rem; font-weight:700; color:var(--ink3); font-variant-numeric:tabular-nums; min-width:34px; text-align:right; }

.quiz-main{ flex:1; display:flex; flex-direction:column; padding:8px var(--gutter) 28px; }
.q-screen{ max-width:560px; margin-inline:auto; width:100%; flex:1; display:flex; flex-direction:column; }
.q-screen.leaving{ opacity:0; transform:translateX(-16px); }
.q-screen.entering{ opacity:0; transform:translateX(16px); }
.q-screen{ transition:opacity .32s ease, transform .32s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion:reduce){ .q-screen{ transition:none; transform:none !important; } }

.q-head{ padding:18px 2px 6px; }
.q-eyebrow{ font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); margin-bottom:12px; display:inline-flex; align-items:center; gap:.5em; }
.q-title{ font-size:clamp(1.5rem,5.2vw,2rem); font-weight:800; line-height:1.12; letter-spacing:-.022em; color:var(--ink); }
.q-sub{ margin-top:.7em; color:var(--ink2); font-size:1.02rem; }

.q-coach{ display:flex; align-items:center; gap:11px; margin:18px 2px 4px; }
.q-coach img{ width:40px; height:40px; flex:none; }
.q-coach .speech{ font-size:.9rem; padding:.55em .85em; }

.q-options{ display:flex; flex-direction:column; gap:12px; margin-top:20px; }
.q-options.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.q-option{
  position:relative; text-align:left; width:100%; cursor:pointer;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--r-card);
  padding:16px 46px 16px 18px; font:inherit; color:var(--ink);
  box-shadow:var(--sh-soft); transition:border-color .15s, box-shadow .18s, transform .1s, background .15s;
}
.q-option:hover{ border-color:var(--brand-soft); }
.q-option:active{ transform:scale(.99); }
.q-option:focus-visible{ outline:3px solid var(--scan); outline-offset:2px; }
.q-option .opt-t{ display:block; font-weight:700; font-size:1.02rem; letter-spacing:-.01em; }
.q-option .opt-d{ display:block; margin-top:3px; font-size:.88rem; color:var(--ink3); font-weight:500; }
.q-option .opt-check{ position:absolute; right:15px; top:50%; transform:translateY(-50%); width:24px; height:24px; border-radius:50%; border:2px solid var(--line2); transition:all .15s; }
.q-option.selected{ border-color:var(--brand); background:var(--brand-tint); box-shadow:0 0 0 3px var(--brand-tint), var(--sh-soft); }
.q-option.selected .opt-check{ border-color:var(--brand); background:var(--brand); }
.q-option.selected .opt-check::after{ content:""; position:absolute; left:6px; top:2px; width:7px; height:12px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.two-col .q-option{ padding:16px; text-align:center; }
.two-col .q-option .opt-check{ display:none; }

.q-actions{ margin-top:auto; padding-top:26px; }
.q-actions .btn:disabled{ opacity:.4; box-shadow:var(--sh-soft); cursor:not-allowed; }
.q-hint{ text-align:center; margin-top:12px; font-size:.82rem; color:var(--ink4); }

/* education / pattern-interrupt beat */
.q-edu{ margin-top:20px; }
.q-edu .card{ padding:26px; }
.q-edu .big{ font-size:clamp(2.4rem,9vw,3.6rem); font-weight:800; letter-spacing:-.03em; color:var(--coral); line-height:1; font-variant-numeric:tabular-nums; }
.q-edu .big.brand{ color:var(--brand); }

/* analyzing */
.q-analyzing{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:26px; padding:40px 0; }
.q-scan{ position:relative; width:190px; height:190px; border-radius:30px; background:linear-gradient(160deg,var(--brand-deep),var(--brand-ink)); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-lift); }
.q-scan img{ width:130px; height:130px; }
.q-status{ font-size:1.05rem; font-weight:650; color:var(--ink2); min-height:1.5em; transition:opacity .3s; }
.q-status .tick{ color:var(--g-a); font-weight:800; }

/* result */
.q-result{ padding-top:10px; }
.q-profile{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 22px; }
.q-reveal-card{ position:relative; }
.q-reveal-seal{ transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.q-reveal-seal.hidden-seal{ opacity:0; transform:scale(.6); }
.q-insight{ display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-top:1px solid var(--line); }
.q-insight .seal{ width:34px; height:34px; border-radius:9px; font-size:1.05rem; }
.q-insight .ic{ width:34px; height:34px; flex:none; border-radius:9px; background:var(--brand-tint); color:var(--brand-deep); display:flex; align-items:center; justify-content:center; font-weight:800; }
.q-insight p{ font-size:.98rem; color:var(--ink2); }
.q-insight p b{ color:var(--ink); }
.q-cta-wrap{ margin-top:26px; padding-top:6px; }

/* =====================================================================
   PAYWALL
   ===================================================================== */
.pay-shell{ min-height:100dvh; display:flex; flex-direction:column; background:var(--paper); }
.pay-main{ flex:1; }
.pay-card{ max-width:520px; margin-inline:auto; width:100%; }
.plan-list{ display:flex; flex-direction:column; gap:12px; margin:22px 0; }
.plan{
  position:relative; text-align:left; width:100%; cursor:pointer; display:flex; align-items:center; gap:14px;
  background:var(--surface); border:2px solid var(--line); border-radius:var(--r-card);
  padding:16px 18px; font:inherit; color:var(--ink); box-shadow:var(--sh-soft);
  transition:border-color .15s, box-shadow .18s, background .15s, transform .1s;
}
.plan:hover{ border-color:var(--brand-soft); }
.plan:active{ transform:scale(.995); }
.plan:focus-visible{ outline:3px solid var(--scan); outline-offset:2px; }
.plan .radio{ width:24px; height:24px; flex:none; border-radius:50%; border:2px solid var(--line2); position:relative; transition:all .15s; }
.plan .plan-main{ flex:1; min-width:0; }
.plan .plan-name{ display:block; font-weight:750; letter-spacing:-.01em; }
.plan .plan-sub{ display:block; font-size:.86rem; color:var(--ink3); margin-top:2px; }
.plan .plan-price{ text-align:right; flex:none; }
.plan .plan-amt{ display:block; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.plan .plan-per{ display:block; font-size:.78rem; color:var(--ink3); }
.plan.selected{ border-color:var(--brand); background:var(--brand-tint); box-shadow:0 0 0 3px var(--brand-tint), var(--sh-soft); }
.plan.selected .radio{ border-color:var(--brand); background:var(--brand); }
.plan.selected .radio::after{ content:""; position:absolute; left:6px; top:6px; width:8px; height:8px; border-radius:50%; background:#fff; }
.plan-badge{ position:absolute; top:-10px; right:16px; background:var(--brand); color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:999px; box-shadow:var(--sh-soft); }
.pay-incl{ list-style:none; display:flex; flex-direction:column; gap:11px; margin:8px 0; }
.pay-incl li{ display:flex; gap:11px; align-items:flex-start; font-size:.98rem; color:var(--ink2); }
.pay-incl .tick{ color:var(--g-a); font-weight:800; flex:none; margin-top:1px; }
.pay-timeline{ list-style:none; display:flex; flex-direction:column; gap:0; margin:6px 0; }
.pay-timeline li{ display:flex; gap:14px; padding:2px 0; }
.pay-timeline .dot{ position:relative; flex:none; width:14px; display:flex; justify-content:center; }
.pay-timeline .dot::before{ content:""; width:11px; height:11px; border-radius:50%; background:var(--brand); margin-top:5px; z-index:1; }
.pay-timeline li:not(:last-child) .dot::after{ content:""; position:absolute; top:10px; bottom:-14px; width:2px; background:var(--line2); }
.pay-timeline .t{ padding-bottom:16px; }
.pay-timeline .t b{ display:block; color:var(--ink); }
.pay-timeline .t span{ font-size:.9rem; color:var(--ink3); }
.pay-note{ text-align:center; font-size:.82rem; color:var(--ink4); }
.pay-alert{ background:var(--amber-soft); color:#7a5b12; border-radius:12px; padding:12px 14px; font-size:.9rem; font-weight:600; }
.code-box{ display:flex; align-items:center; justify-content:center; gap:12px; background:var(--brand-ink); color:#fff; border-radius:16px; padding:20px; margin:18px 0; }
.code-box .code{ font-size:clamp(1.6rem,6vw,2.2rem); font-weight:800; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.code-copy{ background:rgba(255,255,255,.16); color:#fff; border:0; border-radius:10px; padding:8px 12px; font:inherit; font-weight:700; font-size:.85rem; cursor:pointer; }
.code-copy:hover{ background:rgba(255,255,255,.26); }