/* ============================================================================
   FindMyFuture.AI — flagship site design system (v3, "printed almanac")
   ----------------------------------------------------------------------------
   Retheme, not a rewrite. Every class name and legacy alias below is unchanged,
   so all 33 generated pages inherit the new look with zero content edits — the
   same technique used for the v2 pass.

   WHY v3: the landing page was rebuilt around the readiness test in a warm
   bone-paper / ink / vermillion system. Leaving the inner pages on the old
   blue→violet-on-white made the site feel like two different products the
   moment anyone clicked "Features" — which is exactly the complaint that
   prompted the v2 unification in the first place. So the tokens move together.

   Type now matches the landing page too: Syne for display, Manrope for body,
   JetBrains Mono for data. All three are self-hosted woff2 already on the
   server (same-origin, so CSP + COEP are satisfied) and load with
   font-display:swap, so nothing blocks first paint.
   ========================================================================== */

@font-face{font-family:Fraunces;src:url(/assets/fonts/fraunces-wonk-700.woff2)format("woff2");
  font-weight:700;font-display:swap}
@font-face{font-family:Syne;src:url(/assets/fonts/syne-800.woff2)format("woff2");
  font-weight:800;font-display:swap}
@font-face{font-family:Syne;src:url(/assets/fonts/syne-700.woff2)format("woff2");
  font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-400.woff2)format("woff2");
  font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-600.woff2)format("woff2");
  font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url(/assets/fonts/manrope-700.woff2)format("woff2");
  font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-500.woff2)format("woff2");
  font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono-700.woff2)format("woff2");
  font-weight:700;font-display:swap}

/* ---- Tokens (light default) ---- */
:root{
  --bg:#FBF8F1; --bg-2:#F3EDE0;                    /* warm bone, never pure white */
  --surface:rgba(255,255,255,0.78); --surface-solid:#FFFFFF;
  --ink:#17140F; --ink-soft:#2B251D;               /* warm near-black */
  --muted:#6B6155; --muted-2:#9B9083;
  --line:#E4DACA; --line-2:#EFE7D8;
  --blue:#2F6F6A; --violet:#8C5A3C; --green:#15794A; --amber:#BF7C0A;
  --grad:linear-gradient(120deg,#D0402A 0%,#BF7C0A 100%);
  --grad-soft:linear-gradient(120deg,rgba(208,64,42,.10),rgba(191,124,10,.10));
  --grad-mint:linear-gradient(120deg,#15794A,#2F6F6A);
  --shadow-sm:0 1px 2px rgba(60,45,25,.05),0 1px 3px rgba(60,45,25,.06);
  --shadow:0 6px 22px -10px rgba(60,45,25,.20),0 2px 8px -4px rgba(60,45,25,.10);
  --shadow-lg:0 34px 70px -34px rgba(60,45,25,.30),0 10px 28px -14px rgba(60,45,25,.16);
  --font:Manrope,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"Cascadia Code","Roboto Mono",monospace;
  --maxw:1180px; --r-sm:12px; --r:16px; --r-lg:20px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* legacy aliases — old class inline styles & components still reference these.
     The former neon set (iris/cyan/mint/violet-neon) is remapped onto warm
     earth tones so per-card accents stay distinguishable without dropping
     saturated purple and cyan onto bone paper, which looks like a mistake. */
  --ink-dim:var(--muted); --ink-faint:var(--muted-2);
  --font-body:var(--font); --font-display:Fraunces,Georgia,serif; --font-mono:var(--mono);
  --iris:#8C5A3C; --iris-2:#D0402A; --violet-neon:#A2542E; --orchid:#8C5A3C;
  --cyan:#2F6F6A; --mint:#15794A; --gold:#BF7C0A; --coral:#D0402A;
  --panel:var(--surface-solid); --panel-2:var(--bg-2);
  --radius:var(--r-lg); --radius-sm:var(--r-sm);
  --grad-aurora:var(--grad);
  color-scheme:light;
}
/* Dark is a warm espresso, not a blue-black — otherwise toggling the theme
   swaps not just the brightness but the whole personality of the site. */
@media (prefers-color-scheme:dark){
  :root{
    --bg:#14110D; --bg-2:#1B1712;
    --surface:rgba(38,32,25,0.62); --surface-solid:#1E1A15;
    --ink:#F5F0E6; --ink-soft:#E8E1D4;
    --muted:#A79C8C; --muted-2:#7A7062;
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.06);
    --green:#3FBF7F; --amber:#E8A93A;
    --grad:linear-gradient(120deg,#F0705A 0%,#E8A93A 100%);
    --grad-soft:linear-gradient(120deg,rgba(240,112,90,.14),rgba(232,169,58,.14));
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 10px 30px -10px rgba(0,0,0,.6);
    --shadow-lg:0 50px 100px -40px rgba(0,0,0,.75),0 16px 40px -20px rgba(0,0,0,.6);
    --iris:#C98A63; --iris-2:#F0705A; --cyan:#5FA9A2; --mint:#3FBF7F; --gold:#E8A93A; --coral:#F0705A;
    color-scheme:dark;
  }
}
:root[data-theme="light"]{ --bg:#FBF8F1;--bg-2:#F3EDE0;--surface:rgba(255,255,255,0.78);--surface-solid:#FFFFFF;--ink:#17140F;--ink-soft:#2B251D;--muted:#6B6155;--muted-2:#9B9083;--line:#E4DACA;--line-2:#EFE7D8;--green:#15794A;--amber:#BF7C0A;--grad:linear-gradient(120deg,#D0402A 0%,#BF7C0A 100%);--grad-soft:linear-gradient(120deg,rgba(208,64,42,.10),rgba(191,124,10,.10));--iris:#8C5A3C;--iris-2:#D0402A;--cyan:#2F6F6A;--mint:#15794A;--gold:#BF7C0A;--coral:#D0402A;color-scheme:light; }
:root[data-theme="dark"]{ --bg:#14110D;--bg-2:#1B1712;--surface:rgba(38,32,25,0.62);--surface-solid:#1E1A15;--ink:#F5F0E6;--ink-soft:#E8E1D4;--muted:#A79C8C;--muted-2:#7A7062;--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.06);--green:#3FBF7F;--amber:#E8A93A;--grad:linear-gradient(120deg,#F0705A 0%,#E8A93A 100%);--grad-soft:linear-gradient(120deg,rgba(240,112,90,.14),rgba(232,169,58,.14));--iris:#C98A63;--iris-2:#F0705A;--cyan:#5FA9A2;--mint:#3FBF7F;--gold:#E8A93A;--coral:#F0705A;--shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 10px 30px -10px rgba(0,0,0,.6);--shadow-lg:0 50px 100px -40px rgba(0,0,0,.75),0 16px 40px -20px rgba(0,0,0,.6);color-scheme:dark; }

/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.6;font-weight:400;letter-spacing:-.011em;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:rgba(124,58,237,.18)}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---- Ambient background (subtle, light) ---- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  background:
    radial-gradient(40% 46% at 16% 6%,rgba(37,99,235,.10),transparent 60%),
    radial-gradient(38% 44% at 88% 2%,rgba(124,58,237,.10),transparent 60%)}
.aurora i{display:none}
.grain{display:none}
.gridlines{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line-2) 1px,transparent 1px),linear-gradient(90deg,var(--line-2) 1px,transparent 1px);
  background-size:60px 60px;mask-image:radial-gradient(120% 70% at 50% 0,#000 22%,transparent 70%);
  -webkit-mask-image:radial-gradient(120% 70% at 50% 0,#000 22%,transparent 70%)}

/* ---- Layout primitives ---- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:92px 0;position:relative}
.section.tight{padding:60px 0}
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:9px}
.eyebrow::before{content:'';width:20px;height:2px;border-radius:2px;background:var(--grad)}
/* Syne for display, matching the landing page. Its only weights here are 700
   and 800, so headings snap to those rather than the 680s the system stack
   used to interpolate. */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin:0;overflow-wrap:break-word;text-wrap:balance}
h1{font-size:clamp(2.3rem,5.7vw,4.1rem);letter-spacing:-.04em}
h2{font-size:clamp(1.8rem,4.2vw,2.9rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.7rem);font-weight:700}
h4{font-size:1.08rem;font-weight:700;letter-spacing:-.02em}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.06rem,1.7vw,1.3rem);color:var(--muted);line-height:1.6;font-weight:400}
.muted{color:var(--muted)}.faint{color:var(--muted-2)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mint-text{background:var(--grad-mint);-webkit-background-clip:text;background-clip:text;color:transparent}
.center{text-align:center}
.section-head{max-width:700px;margin:0 auto 52px;text-align:center}
.section-head.left{margin-left:0;text-align:left}
.section-head h2{margin:16px 0 0}
.section-head p{color:var(--muted);font-size:18px;margin-top:16px;line-height:1.55}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-weight:600;
  font-size:15.5px;letter-spacing:-.01em;padding:13px 22px;border-radius:999px;cursor:pointer;
  border:1px solid transparent;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s;white-space:nowrap;will-change:transform}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 24px -10px rgba(91,69,224,.7),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(91,69,224,.85),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line);backdrop-filter:blur(12px)}
.btn-ghost:hover{border-color:var(--muted-2);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.btn-mint{background:var(--ink);color:var(--bg);box-shadow:var(--shadow)}
.btn-mint:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.btn-lg{padding:15px 30px;font-size:16px}
.btn-sm{padding:10px 17px;font-size:14px;gap:7px}
.btn-sm svg{width:15px;height:15px}

/* ---- Chips / pills ---- */
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted);box-shadow:var(--shadow-sm)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--grad)}
.pill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.pill-iris{background:rgba(124,58,237,.10);color:var(--iris-2);border:1px solid rgba(124,58,237,.24)}
.pill-mint{background:rgba(22,163,74,.10);color:var(--green);border:1px solid rgba(22,163,74,.24)}
.pill-gold{background:rgba(217,119,6,.10);color:var(--amber);border:1px solid rgba(217,119,6,.24)}

/* ---- Glass card ---- */
.card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:var(--shadow-sm);
  transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.card:hover{transform:translateY(-5px);border-color:var(--muted-2);box-shadow:var(--shadow-lg)}
.card.glow::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s}
.card.glow:hover::before{opacity:.8}

/* ---- Header / nav ---- */
.nav{position:sticky;top:0;z-index:80;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(16px) saturate(1.4);border-color:var(--line)}
.nav .row{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:10px;flex:none;font-weight:700;letter-spacing:-.03em}
.brand .mark,.brand-lockup{flex:none;transition:transform .35s var(--ease)}
.brand:hover .brand-lockup{transform:translateY(-1px) scale(1.02)}
.brand:hover .mark{transform:scale(1.06)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:9px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--muted);transition:color .2s,background .2s}
.nav-links a:hover{color:var(--ink);background:var(--bg-2)}
.nav-cta{display:flex;align-items:center;gap:10px}
.theme-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--ink);flex:none}
.theme-btn svg{width:17px;height:17px}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun,.theme-btn .sun{display:block}
:root[data-theme="dark"] .theme-btn .moon{display:none}
@media (prefers-color-scheme:dark){.theme-btn .sun{display:none}.theme-btn .moon{display:block}}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
:root[data-theme="light"] .theme-btn .sun{display:block}
:root[data-theme="light"] .theme-btn .moon{display:none}
.nav-toggle{display:none;background:var(--surface);border:1px solid var(--line);border-radius:11px;width:42px;height:42px;cursor:pointer;color:var(--ink);align-items:center;justify-content:center}
.nav-toggle svg{width:22px;height:22px}
.mobile-menu{display:none}
@media(max-width:940px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .nav-toggle{display:flex}
  .mobile-menu{display:block;position:fixed;inset:70px 0 0;z-index:70;background:color-mix(in srgb,var(--bg) 97%,transparent);
    backdrop-filter:blur(20px);padding:28px 24px;transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity .3s,transform .3s;overflow-y:auto}
  .mobile-menu.open{opacity:1;transform:none;pointer-events:auto}
  .mobile-menu a{display:block;padding:16px 6px;font-size:19px;font-weight:680;border-bottom:1px solid var(--line)}
  .mobile-menu .btn{width:100%;justify-content:center;margin-top:22px}
}

/* ---- Brand mark + Google Play button (match landing header) ---- */
.logo-img{width:34px;height:34px;border-radius:8px;display:block;flex:0 0 auto}
.brand{font-size:18px}
.gplay{display:inline-flex;align-items:center;gap:11px;padding:10px 18px 10px 15px;border-radius:13px;
  background:var(--ink);color:var(--bg);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  box-shadow:var(--shadow);will-change:transform;border:1px solid transparent}
.gplay:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.gplay .pg{width:23px;height:23px;flex:0 0 auto}
.gplay .tx{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.gplay .tx small{font-size:10px;letter-spacing:.06em;opacity:.72;text-transform:uppercase;font-weight:600}

/* On a phone the header carries brand + Play + theme + menu, which together
   overflow 390px and let the Play button sit on top of the wordmark. Syne is
   wider than the system stack this header was built against, so the collision
   got worse with the v3 retheme. Collapse Play to icon-only rather than
   dropping it — it is the conversion button and must survive. */
@media(max-width:560px){
  .nav .row{height:62px}
  .brand{font-size:16px}
  .logo-img{width:29px;height:29px}
  .gplay{padding:9px 11px;gap:0;border-radius:11px}
  .gplay .tx{display:none}
  .gplay .pg{width:21px;height:21px}
  .nav-cta{gap:7px}
  .theme-btn{width:35px;height:35px}
  .nav-toggle{width:38px;height:38px}
  .mobile-menu{inset:62px 0 0}
}
@media(max-width:360px){
  /* Very small handsets: the wordmark goes, the mark stays. */
  .brand span,.brand b{display:none}
}
.gplay .tx b{font-size:15.5px;font-weight:680;letter-spacing:-.02em}
@media(max-width:520px){.gplay{padding:9px 13px}.gplay .tx small{display:none}.gplay .tx b{font-size:14px}}

/* ---- Hero (feature/inner heroes) ---- */
.hero{position:relative;padding:120px 0 80px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.hero h1{margin:20px 0 22px}
.hero .lead{max-width:540px;margin-bottom:34px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-proof{display:flex;gap:26px;margin-top:34px;flex-wrap:wrap}
.hero-proof .n{font-family:var(--font);font-weight:720;font-size:1.7rem;line-height:1}
.hero-proof .l{font-size:12.5px;color:var(--muted-2);margin-top:5px;font-weight:500}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}.hero{padding:60px 0 40px}}

/* ---- Grids ---- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---- Feature card ---- */
.feat{padding:26px}
.ficon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:var(--grad-soft);border:1px solid var(--line);color:var(--violet)}
.ficon svg{width:24px;height:24px}
.feat .ficon{margin-bottom:18px}
.feat h3{font-size:1.24rem;margin-bottom:9px}
.feat p{color:var(--muted);font-size:15px;margin-bottom:15px}
.learn{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--blue);text-transform:uppercase;letter-spacing:.06em;display:inline-flex;gap:8px;align-items:center;transition:gap .3s;white-space:nowrap}
.feat:hover .learn{gap:12px}
.learn svg{width:15px;height:15px;flex:none}
.toc svg{width:15px;height:15px;flex:none}
.crumb svg,.pill svg,.chip svg{width:14px;height:14px;flex:none}

/* ---- Step / roadmap ---- */
.steps{display:flex;flex-direction:column;gap:2px;counter-reset:s}
.step{position:relative;padding:22px 24px 22px 74px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-solid);margin-bottom:14px;box-shadow:var(--shadow-sm);transition:border-color .3s,box-shadow .3s,transform .3s}
.step:hover{border-color:var(--muted-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:22px;top:22px;
  font-family:var(--mono);font-weight:700;font-size:14px;color:#fff;background:var(--grad);
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;box-shadow:0 6px 16px -8px rgba(91,69,224,.6)}
.step h4{margin-bottom:6px;font-size:1.05rem}
.step p{margin:0;color:var(--muted);font-size:14.5px}
.step .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.step .tags span{font-family:var(--mono);font-size:11px;padding:4px 10px;border-radius:7px;background:var(--bg-2);color:var(--muted);border:1px solid var(--line)}

/* ---- Stat / metric strip ---- */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.metric{text-align:center;padding:26px 16px}
.metric .n{font-family:var(--font);font-weight:720;font-size:2.4rem;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.metric .l{font-size:13.5px;color:var(--muted);margin-top:8px}
@media(max-width:700px){.metrics{grid-template-columns:repeat(2,1fr)}}

/* ---- FAQ ---- */
.faq{max-width:820px;margin:0 auto}
.qa{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:12px;overflow:hidden;background:var(--surface-solid);box-shadow:var(--shadow-sm)}
.qa summary{padding:22px 24px;cursor:pointer;font-weight:680;font-size:17px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.qa summary::-webkit-details-marker{display:none}
.qa summary .plus{flex:none;width:24px;height:24px;position:relative;transition:transform .3s}
.qa summary .plus::before,.qa summary .plus::after{content:'';position:absolute;background:var(--violet);border-radius:2px}
.qa summary .plus::before{width:13px;height:2px;top:11px;left:5px}
.qa summary .plus::after{width:2px;height:13px;top:5px;left:11px;transition:transform .3s}
.qa[open] summary .plus::after{transform:rotate(90deg)}
.qa[open] summary{color:var(--violet)}
.qa .a{padding:0 24px 24px;color:var(--muted);font-size:15.5px}

/* ---- CTA band ---- */
.cta-band{position:relative;border-radius:var(--r-lg);padding:60px 48px;text-align:center;overflow:hidden;
  background:var(--grad-soft);border:1px solid var(--line)}
.cta-band h2{margin-bottom:14px}
.cta-band p{color:var(--muted)}
.cta-band .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ---- Footer ---- */
footer{border-top:1px solid var(--line);padding:66px 0 34px;margin-top:40px;background:var(--bg-2)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px}
.foot-col h5{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin:0 0 16px;font-weight:600}
.foot-col a{display:block;padding:7px 0;color:var(--muted);font-size:14.5px;transition:color .2s}
.foot-col a:hover{color:var(--violet)}
.foot-brand p{color:var(--muted);font-size:14.5px;max-width:300px;margin-top:14px}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:26px;border-top:1px solid var(--line);flex-wrap:wrap;font-size:13.5px;color:var(--muted-2)}
@media(max-width:800px){.foot-grid{grid-template-columns:1fr 1fr;gap:32px}}

/* ---- Breadcrumb ---- */
.crumb{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--muted-2);margin-bottom:22px;flex-wrap:wrap;font-family:var(--mono)}
.crumb a:hover{color:var(--blue)}.crumb span{opacity:.5}

/* ---- Prose (content pages) ---- */
.prose{max-width:760px}
.prose h2{font-size:clamp(1.55rem,3vw,2.2rem);margin:52px 0 18px}
.prose h3{font-size:1.32rem;margin:36px 0 12px}
.prose p{color:var(--ink-soft);margin-bottom:18px;font-size:16.5px;line-height:1.7}
.prose ul,.prose ol{color:var(--ink-soft);padding-left:22px;margin-bottom:20px}
.prose li{margin-bottom:9px;line-height:1.65}
.prose strong{color:var(--ink);font-weight:680}
.prose a.ln{color:var(--blue);border-bottom:1px solid rgba(37,99,235,.35)}
.prose a.ln:hover{border-bottom-color:var(--blue)}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--grad-soft);padding:2px 7px;border-radius:6px;color:var(--violet)}
.callout{border-left:3px solid var(--violet);background:var(--grad-soft);padding:18px 22px;border-radius:0 12px 12px 0;margin:26px 0;color:var(--ink-soft)}
.callout strong{color:var(--violet)}

/* two-column content shell */
.doc{display:grid;grid-template-columns:1fr 260px;gap:56px;align-items:start}
.toc{position:sticky;top:96px;border:1px solid var(--line);border-radius:var(--r-sm);padding:22px;background:var(--surface-solid);box-shadow:var(--shadow-sm)}
.toc h5{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin:0 0 14px}
.toc a{display:block;padding:6px 0;font-size:13.5px;color:var(--muted);border-left:2px solid transparent;padding-left:12px;margin-left:-2px;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--violet);border-color:var(--violet)}
.factbox h5{font-family:var(--font);font-size:1.02rem;font-weight:680;color:var(--ink);letter-spacing:-.02em;text-transform:none;margin-bottom:12px}
@media(max-width:900px){.doc{grid-template-columns:1fr}.toc{display:none}
  .factbox{display:block;position:static;top:auto;margin-top:8px}}

/* Q&A sample block */
.qblock{border:1px solid var(--line);border-radius:var(--r-sm);padding:22px 24px;margin-bottom:16px;background:var(--surface-solid);box-shadow:var(--shadow-sm)}
.qblock .q{font-weight:680;margin-bottom:12px;font-size:15.5px}
.qblock .opts{display:grid;gap:8px;margin-bottom:12px}
.qblock .opt{padding:9px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px;color:var(--muted)}
.qblock .opt.correct{border-color:var(--green);background:rgba(22,163,74,.08);color:var(--green)}
.qblock .ex{font-size:13.5px;color:var(--muted-2);border-top:1px dashed var(--line);padding-top:12px}
.qblock .ex b{color:var(--blue)}

/* pricing (legacy — unused) */
.price-card{text-align:center;padding:40px 32px}
.price .amt{font-family:var(--font);font-weight:720;font-size:3.2rem;line-height:1;margin:14px 0 4px}

/* logo grid */
.logos{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.logos .lg{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--muted-2);padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--surface-solid)}

/* reveal animation */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal].d1{transition-delay:.08s}[data-reveal].d2{transition-delay:.16s}
[data-reveal].d3{transition-delay:.24s}[data-reveal].d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}[data-reveal]{opacity:1;transform:none}}

/* scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--muted-2);border-radius:100px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--violet)}

/* mobile refinements */
@media(max-width:600px){
  .wrap{padding:0 18px}
  .section{padding:58px 0}
  .section.tight{padding:40px 0}
  .card,.feat{padding:22px}
  .feat h3{font-size:1.14rem}
  .feat p,.card p{font-size:14.5px}
  .section-head{margin-bottom:36px}
  .qblock{padding:18px}
  .step{padding:18px 16px 18px 62px}
  .step::before{left:16px;top:18px;width:34px;height:34px}
  .cta-band{padding:42px 22px}
  .metric .n{font-size:2rem}
  .prose p{font-size:16px}
  .foot-grid{gap:26px}
}

/* util */
.mt0{margin-top:0}.mb0{margin-bottom:0}.mt24{margin-top:24px}.mt40{margin-top:40px}
.divider{height:1px;background:var(--line);margin:0}
.tag-row{display:flex;flex-wrap:wrap;gap:10px}
.rel{position:relative}