/* ─────────────────────────────────────────────────────────────────────────────
   ARAMO — marketing site design system (rebuild, September 2026)

   White ground, at the owner's instruction ("keep white bg"). Navy structure
   and the aura blues from the logo are the only accents; mint is the single
   state colour ("local / done / verified"). Depth comes from soft shadows,
   hairlines and light, not from dark bands. The only dark surfaces are
   *contained* ones — the navy offer strip the owner asked for, the ROI result
   panel and the closing call-to-action card — so the page itself stays white.

   Motion is purposeful: it shows the product flow, the timeline, the local
   processing boundary. Every animation stops for prefers-reduced-motion.

   Contrast: text tokens clear WCAG AA (4.5:1) on the ground they sit on.

   Fixes carried over from the previous site, each of which shipped broken once
   (CLAUDE.md §5, §3v–§3y):
   * [hidden] loses to any author `display`, so every toggled component states
     `[hidden]{display:none}` explicitly.
   * media queries add no specificity — overrides sit AFTER the rules they
     override.
   * the TrustedSite badge is only ever styled by id, inside #ts-slot.
   ───────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:"Geist";src:url("/assets/fonts/Geist-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/assets/fonts/GeistMono-Variable.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --white:#FFFFFF;
  --paper:#F7F9FC;
  --surface:#FFFFFF;
  --surface-2:#F0F4F9;
  --line:#DDE4EE;
  --line-soft:#EAEFF6;
  --text:#0A1324;
  --text-2:#27344A;
  --muted:#4F5E76;            /* 6.2:1 on white */
  --faint:#66748B;            /* 4.8:1 on white — small print only */

  --aura:#2563EB;             /* 5.2:1 on white — safe for link text */
  --aura-2:#3B82F6;
  --aura-pale:#60A5FA;        /* decorative on white */
  --aura-wash:#EEF4FF;
  --cyan:#7FD4FF;
  --indigo:#4F46E5;
  --mint:#10B981;
  --mint-deep:#047857;        /* 5.5:1 on white */
  --mint-wash:#ECFDF5;
  --amber:#F59E0B;
  --peak:#B45309;
  --navy:#1E3A5F;
  --navy-deep:#0F2342;
  --ink:#08111F;

  /* dark tokens, used only inside contained dark panels */
  --txt-d:#EDF3FF;
  --muted-d:#A7B6CF;
  --faint-d:#8595B1;
  --line-d:rgba(148,178,255,.14);
  --line-d2:rgba(148,178,255,.24);

  --grad-aura:linear-gradient(100deg,#38BDF8 0%,#2563EB 45%,#4F46E5 100%);
  --grad-soft:linear-gradient(100deg,#8BDCFF 0%,#3FA9FF 38%,#5267FF 100%);
  --grad-btn:linear-gradient(135deg,#3B82F6 0%,#2563EB 48%,#4338CA 100%);

  --sans:"Geist","Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,"Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono","Cascadia Mono",Consolas,"SF Mono",ui-monospace,monospace;

  --gutter:clamp(16px,4vw,32px);
  --col:min(1200px,calc(100% - 2 * var(--gutter)));
  --radius:14px;
  --radius-lg:22px;
  --header-h:68px;

  --shadow-xs:0 1px 2px rgba(15,35,66,.06);
  --shadow-sm:0 1px 3px rgba(15,35,66,.06),0 1px 2px rgba(15,35,66,.04);
  --shadow:0 10px 30px -12px rgba(15,35,66,.16),0 2px 6px rgba(15,35,66,.05);
  --shadow-lg:0 30px 70px -28px rgba(15,35,66,.28),0 4px 12px rgba(15,35,66,.06);
  --shadow-glow:0 30px 80px -30px rgba(37,99,235,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* Every line icon from components.icon() starts at text size. Zero
   specificity, so any rule that sizes an icon on purpose still wins; without
   it an icon placed somewhere nobody styled fills its whole container (the
   pricing notes shipped to staging that way). */
:where(svg[viewBox="0 0 24 24"][stroke-width="1.8"]){width:1.15em;height:1.15em}
body{
  margin:0;background:var(--white);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img,svg,video,canvas{max-width:100%}
img,video,canvas{display:block}
a{color:var(--aura);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--aura);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--aura-pale)}
[id]{scroll-margin-top:calc(var(--header-h) + 18px)}
::selection{background:rgba(37,99,235,.18)}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}

.wrap{width:var(--col);margin-inline:auto}

h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.025em;text-wrap:balance;color:var(--text)}
h1{font-size:clamp(2.35rem,5.1vw,4.5rem);line-height:1.03;letter-spacing:-.042em}
h2{font-size:clamp(1.9rem,3.5vw,3.05rem);line-height:1.07;letter-spacing:-.036em}
h3{font-size:1.16rem;line-height:1.3;letter-spacing:-.015em}
p{margin:0 0 1rem}
.lead{font-size:clamp(1.05rem,1.35vw,1.2rem);line-height:1.62;color:var(--muted);max-width:62ch;text-wrap:pretty}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.grad{background:var(--grad-aura);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
@media (forced-colors:active){.grad{-webkit-text-fill-color:currentColor;background:none}}

.eyebrow{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.1rem;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--aura);font-weight:500}
.eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--grad-aura)}

/* ── sections ─────────────────────────────────────────────────────────────── */
.sec{position:relative;padding-block:clamp(4.5rem,9vw,7.5rem)}
.sec-tight{padding-block:clamp(2.5rem,5vw,4rem)}
.tint{background:linear-gradient(180deg,var(--paper),#FFFFFF)}
.wash{background:
  radial-gradient(900px 420px at 88% 0%,rgba(37,99,235,.07),transparent 62%),
  radial-gradient(700px 380px at 0% 100%,rgba(56,189,248,.06),transparent 60%),#FFFFFF}
.sec-head{max-width:760px;margin-bottom:clamp(2.2rem,4vw,3.4rem)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head.center .lead{margin-inline:auto}
.sec-head h2+.lead{margin-top:1.1rem}
.hairline{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--line),transparent)}

/* contained dark panels only */
.dark{background:var(--ink);color:var(--txt-d)}
.dark h2,.dark h3{color:#fff}
.dark .lead,.dark .muted{color:var(--muted-d)}

/* ── skip link ───────────────────────────────────────────────────────────── */
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:.7rem 1rem;border-radius:10px;background:var(--text);color:#fff;font-weight:600}
.skip:focus{top:12px;text-decoration:none}

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:48px;padding:.7rem 1.25rem;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;font:inherit;font-size:15px;font-weight:560;letter-spacing:-.005em;
  line-height:1.2;white-space:nowrap;text-decoration:none;box-shadow:var(--shadow-xs);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background-color .2s,border-color .2s,color .2s}
.btn:hover{text-decoration:none;border-color:#BFCBDC;box-shadow:var(--shadow)}
.btn svg{width:17px;height:17px;flex:none}
.btn:disabled{opacity:.6;cursor:default}
.btn-lg{min-height:54px;padding:.85rem 1.45rem;font-size:16px;border-radius:14px}
.btn-primary{color:#fff;border-color:transparent;background:var(--grad-btn);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 12px 28px -10px rgba(37,99,235,.65)}
.btn-primary:hover{color:#fff;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 18px 38px -12px rgba(37,99,235,.8)}
.btn-primary::after{content:"";position:absolute;top:-60%;bottom:-60%;width:36%;left:-60%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);animation:sheen 6.5s var(--ease) infinite 1.2s}
@keyframes sheen{0%{left:-60%}22%,100%{left:130%}}
.btn-navy{color:#fff;border-color:transparent;background:linear-gradient(180deg,#16305A,#0F2342);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px -12px rgba(15,35,66,.7)}
.btn-navy:hover{color:#fff;border-color:transparent}
.btn-glass{color:var(--txt-d);border-color:var(--line-d2);background:rgba(255,255,255,.06);box-shadow:none}
.btn-glass:hover{color:#fff;border-color:rgba(148,178,255,.45);background:rgba(255,255,255,.1)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:.4rem;font-weight:560;font-size:15px}
.link-arrow svg{width:15px;height:15px;transition:transform .25s var(--ease)}
.link-arrow:hover svg{transform:translateX(3px)}
.linklike{background:none;border:0;padding:0;font:inherit;font-size:13.5px;color:var(--aura);cursor:pointer;text-decoration:underline;text-underline-offset:3px;min-height:44px}

/* ── offer bar (navy strip the owner asked for; every line true every day) ─ */
.offer-bar{position:relative;z-index:55;display:flex;align-items:center;gap:.55rem;height:40px;padding-inline:clamp(.6rem,2.2vw,1.25rem);overflow:hidden;color:#fff;
  background:radial-gradient(90% 220% at 50% -60%,rgba(96,165,250,.22),transparent 60%),linear-gradient(180deg,#16304F,#122740 55%,#0E2036);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07);font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase}
.offer-line{position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent 0 42%,rgba(147,197,253,.95) 50%,transparent 58% 100%);background-size:200% 100%;animation:offerline 7s linear infinite}
@keyframes offerline{from{background-position:100% 0}to{background-position:-100% 0}}
.offer-strip{flex:1 1 0;min-width:0;align-self:stretch;overflow:hidden;display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.offer-track{display:flex;width:max-content;animation:offerroll 46s linear infinite}
.offer-set{display:flex;align-items:center;flex:none;list-style:none;margin:0;padding:0}
.offer-item{display:flex;align-items:center;gap:.6rem;white-space:nowrap;color:rgba(255,255,255,.92)}
.offer-item::after{content:"";flex:none;width:5px;height:5px;margin-inline:1.1rem;transform:rotate(45deg);background:var(--aura-pale);box-shadow:0 0 8px rgba(96,165,250,.85)}
@keyframes offerroll{to{transform:translateX(-50%)}}
.offer-spark{width:11px;height:11px;flex:none;color:#93C5FD;filter:drop-shadow(0 0 5px rgba(147,197,253,.9));animation:offertwinkle 3.2s ease-in-out infinite}
@keyframes offertwinkle{0%,100%{transform:scale(.72) rotate(0deg);opacity:.75}50%{transform:scale(1.08) rotate(90deg);opacity:1}}
.offer-hi{font-weight:700;color:#fff}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .offer-hi{background:linear-gradient(90deg,#fff 0 38%,#93C5FD 50%,#fff 62% 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:offershine 4.5s linear infinite}
}
@keyframes offershine{from{background-position:100% 0}to{background-position:0 0}}
@media (forced-colors:active){.offer-hi{background:none;-webkit-text-fill-color:currentColor;color:CanvasText}}
.offer-pause-input{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.offer-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.offer-pause{position:relative;flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;cursor:pointer;border:1px solid rgba(255,255,255,.24);color:rgba(255,255,255,.85);transition:background-color .2s,border-color .2s,color .2s}
.offer-pause:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);color:#fff}
.offer-pause svg{width:10px;height:10px;display:block}
.offer-pause .i-play{display:none}
.offer-pause-input:checked ~ .offer-pause .i-pause{display:none}
.offer-pause-input:checked ~ .offer-pause .i-play{display:block}
.offer-pause-input:checked ~ .offer-strip .offer-track,.offer-pause-input:checked ~ .offer-strip .offer-hi,.offer-pause-input:checked ~ .offer-strip .offer-spark,.offer-pause-input:checked ~ .offer-line{animation-play-state:paused}
.offer-pause-input:focus-visible ~ .offer-pause{outline:2px solid #93C5FD;outline-offset:2px}
@media (hover:hover){.offer-strip:hover .offer-track{animation-play-state:paused}}
.offer-cta{position:relative;flex:none;display:inline-flex;align-items:center;gap:.5rem;height:28px;padding:0 .95rem;border-radius:999px;color:#fff;font-weight:700;font-size:10.5px;letter-spacing:.14em;text-decoration:none;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.34);transition:background-color .2s,color .2s,border-color .2s}
.offer-cta:hover{background:#fff;border-color:#fff;color:var(--navy-deep);text-decoration:none}
.offer-cta:focus-visible{outline:2px solid #93C5FD;outline-offset:2px}
.offer-cta svg{width:12px;height:12px;flex:none;transition:transform .2s ease}
.offer-cta:hover svg{transform:translateX(3px)}
.offer-cta .short{display:none}
@media (max-width:760px){.offer-bar{font-size:10.5px;letter-spacing:.12em;gap:.45rem}.offer-item::after{margin-inline:.9rem}.offer-cta{padding:0 .75rem;letter-spacing:.1em}.offer-cta .long{display:none}.offer-cta .short{display:inline}}
@media (hover:none) and (pointer:coarse){.offer-bar{height:44px}.offer-pause::before,.offer-cta::before{content:"";position:absolute;inset:-9px -3px}}
body:has(.mobile-menu:not([hidden])) .offer-bar{display:none}

/* ── header ──────────────────────────────────────────────────────────────── */
/* No backdrop-filter. A sticky bar that blurs what is behind it re-blurs on
   every scrolled frame, which is the most expensive thing on this page for an
   older GPU. The ground behind it is white, so a near-opaque white bar is the
   same picture at none of the cost. */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:rgba(255,255,255,.96);
  border-bottom:1px solid transparent;transition:background-color .3s,border-color .3s,box-shadow .3s}
.site-header.is-scrolled{background:rgba(255,255,255,.99);border-bottom-color:var(--line-soft);box-shadow:0 12px 30px -24px rgba(15,35,66,.35)}
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--grad-aura);pointer-events:none}
.nav{display:flex;align-items:center;gap:1.4rem;height:100%}
.brand{display:inline-flex;align-items:center;gap:.65rem;color:var(--text);text-decoration:none;flex:none}
.brand:hover{text-decoration:none}
.brand svg{width:32px;height:32px}
.brand b{font-size:1.08rem;letter-spacing:.2em;font-weight:680}
.navlinks{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.navlink{position:relative;padding:.5rem .8rem;border-radius:9px;color:var(--muted);font-size:14.5px;font-weight:520;text-decoration:none;transition:color .2s,background-color .2s}
.navlink:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.navlink[aria-current="page"]{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:.5rem;flex:none}
.nav-cta .btn{min-height:40px;padding:.5rem 1rem;font-size:14px;border-radius:10px}
.menu-btn{display:none;flex:none;width:44px;height:44px;border-radius:11px;border:1px solid var(--line);background:var(--surface);cursor:pointer;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.menu-btn span{display:block;width:18px;height:2px;border-radius:2px;background:var(--text);transition:transform .25s var(--ease),opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu[hidden]{display:none}
.mobile-menu{position:fixed;inset:var(--header-h) 0 0 0;z-index:49;overflow:auto;padding:1.2rem var(--gutter) 2rem;background:rgba(255,255,255,.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mobile-menu nav{display:grid;gap:.1rem}
.mobile-menu nav a{display:flex;align-items:center;min-height:52px;padding:.2rem .4rem;border-bottom:1px solid var(--line-soft);color:var(--text);font-size:1.1rem;font-weight:560;text-decoration:none}
.mobile-menu-buy{display:grid;gap:.6rem;margin-top:1.4rem}
.mobile-menu-buy .btn{width:100%}
@media (max-width:1100px){.navlinks .navlink.opt{display:none}}
@media (max-width:900px){.navlinks{display:none}.menu-btn{display:inline-flex}.nav{gap:.6rem}.nav-cta{margin-left:auto}.nav-cta .hide-sm{display:none}}
@media (max-width:380px){.nav-cta .btn{padding:.5rem .7rem}.brand b{letter-spacing:.12em}}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;isolation:isolate;background:#fff;padding-top:clamp(2rem,4.5vw,3.6rem);padding-bottom:clamp(3.5rem,7vw,6rem)}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.aurora{position:absolute;border-radius:50%;will-change:transform}
.aurora.a1{width:620px;height:620px;left:-180px;top:-260px;background:radial-gradient(circle,rgba(56,189,248,.34) 0%,rgba(56,189,248,.16) 38%,transparent 72%);animation:drift1 22s ease-in-out infinite}
.aurora.a2{width:780px;height:780px;right:-260px;top:-240px;background:radial-gradient(circle,rgba(79,70,229,.22) 0%,rgba(79,70,229,.1) 38%,transparent 72%);animation:drift2 28s ease-in-out infinite}
.aurora.a3{width:560px;height:560px;left:36%;bottom:-360px;background:radial-gradient(circle,rgba(37,99,235,.17) 0%,rgba(37,99,235,.08) 38%,transparent 72%);animation:drift3 26s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,60px) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-110px,70px) scale(.92)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(-80px,-50px)}}
.grid-floor{position:absolute;inset:0;background-image:linear-gradient(rgba(15,35,66,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(15,35,66,.055) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 72% 62% at 50% 28%,#000 25%,transparent 75%);mask-image:radial-gradient(ellipse 72% 62% at 50% 28%,#000 25%,transparent 75%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.pill{display:inline-flex;align-items:center;gap:.55rem;padding:.36rem .85rem .36rem .4rem;margin-bottom:1.2rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.8);
  box-shadow:var(--shadow-xs);color:var(--muted);font-size:13.5px;font-weight:520}
.pill b{display:inline-flex;align-items:center;gap:.35rem;padding:.14rem .5rem;border-radius:999px;background:var(--mint-wash);color:var(--mint-deep);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.pill b::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.hero h1{max-width:20ch;font-size:clamp(2.25rem,4vw,3.85rem);line-height:1.04}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(8px);animation:wordIn .9s var(--ease-out) forwards;animation-delay:calc(var(--i) * 55ms + 120ms)}
@keyframes wordIn{to{opacity:1;transform:none;filter:none}}
.hero .lead{margin-top:1.2rem;font-size:clamp(1.02rem,1.3vw,1.18rem)}
.hero-cta{margin-top:1.6rem}
.hero-sub{margin-top:1rem;font-size:14.5px;color:var(--muted)}
.hero-sub a{font-weight:560}
.proof-strip{display:flex;flex-wrap:wrap;gap:.5rem .55rem;list-style:none;padding:0;margin:2.2rem 0 0}
.proof-strip li{display:inline-flex;align-items:center;gap:.45rem;padding:.42rem .75rem;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.85);font-size:13px;color:var(--text-2);font-weight:520;box-shadow:var(--shadow-xs)}
.proof-strip svg{width:14px;height:14px;color:var(--mint);flex:none}
.fade-up{opacity:0;transform:translateY(18px);animation:fadeUp .9s var(--ease-out) forwards}
.fade-up.d1{animation-delay:.45s}.fade-up.d2{animation-delay:.6s}.fade-up.d3{animation-delay:.75s}.fade-up.d4{animation-delay:.9s}
@keyframes fadeUp{to{opacity:1;transform:none}}

.hero-visual{position:relative;perspective:1400px}
.frame-wrap{position:relative}
.app-frame{position:relative;border-radius:18px;padding:1px;background:linear-gradient(160deg,rgba(96,165,250,.7),rgba(221,228,238,.9) 38%,rgba(79,70,229,.45));
  box-shadow:0 50px 100px -40px rgba(37,99,235,.45),0 30px 60px -30px rgba(15,35,66,.35);transform:rotateY(-7deg) rotateX(4deg);transform-style:preserve-3d;transition:transform .6s var(--ease-out)}
.app-inner{border-radius:17px;overflow:hidden;background:#fff}
.app-bar{display:flex;align-items:center;gap:.4rem;padding:.6rem .8rem;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,#FBFCFE,#F1F5FA)}
.app-bar i{width:9px;height:9px;border-radius:50%}
.app-bar i:nth-child(1){background:#F87171}.app-bar i:nth-child(2){background:#FBBF24}.app-bar i:nth-child(3){background:#34D399}
.app-bar b{margin-left:.5rem;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500}
.app-bar .tc{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--aura);letter-spacing:.08em}
.app-frame video{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#F6F9FD}
.float-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:.55rem;padding:.5rem .8rem .5rem .5rem;border-radius:14px;background:rgba(255,255,255,.97);border:1px solid var(--line);color:var(--text);
  font-size:12.5px;font-weight:580;white-space:nowrap;box-shadow:0 20px 40px -18px rgba(15,35,66,.4);opacity:0;animation:chipIn .8s var(--ease-out) forwards,bob 6s ease-in-out infinite}
.float-chip small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:500}
.float-chip .dot{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none}
.float-chip .dot svg{width:15px;height:15px}
.float-chip.c1{left:-7%;top:20%;animation-delay:1.1s,1.9s}
.float-chip.c2{right:-4%;top:4%;animation-delay:1.35s,2.4s}
.float-chip.c3{right:-6%;bottom:31%;animation-delay:1.6s,1.6s}
.float-chip.c1 .dot{background:var(--mint-wash);color:var(--mint-deep)}
.float-chip.c2 .dot{background:var(--aura-wash);color:var(--aura)}
.float-chip.c3 .dot{background:#FFF7E6;color:var(--peak)}
@keyframes chipIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
.hero-aside{margin:1.2rem 0 0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg)}
.hero-aside img{display:block;width:100%;height:auto}
@media (max-width:1000px){.hero-grid{grid-template-columns:1fr}.hero h1{max-width:18ch;font-size:clamp(2.2rem,7.4vw,3.6rem)}.app-frame{transform:none}.float-chip.c1{left:2%}.float-chip.c2{right:2%}.float-chip.c3{right:2%}}
@media (max-width:560px){.float-chip{font-size:11.5px;padding:.4rem .6rem .4rem .4rem}.float-chip.c3{display:none}.proof-strip li{font-size:12.5px}}

/* ── facts band ──────────────────────────────────────────────────────────── */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.fact{position:relative;padding:1.5rem 1.4rem;border-radius:var(--radius-lg);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);overflow:hidden}
.fact::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad-aura);opacity:.85}
.fact b{display:block;font-size:clamp(2.1rem,3.6vw,2.9rem);line-height:1;letter-spacing:-.045em;font-weight:650;background:var(--grad-aura);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.fact span{display:block;margin-top:.55rem;color:var(--text);font-weight:600;font-size:15px}
.fact small{display:block;margin-top:.3rem;color:var(--muted);font-size:13.5px;line-height:1.5}
.facts-note{margin:1rem 0 0;color:var(--faint);font-size:13px;max-width:86ch}
@media (max-width:860px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.facts{grid-template-columns:1fr}}

/* ── demo ────────────────────────────────────────────────────────────────── */
.demo-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(1.4rem,3vw,2.4rem);align-items:start}
@media (max-width:960px){.demo-grid{grid-template-columns:1fr}}
.vid-frame{position:relative;border-radius:22px;padding:6px;background:linear-gradient(140deg,rgba(96,165,250,.55),rgba(255,255,255,.9) 40%,rgba(79,70,229,.4));box-shadow:var(--shadow-glow),var(--shadow-lg)}
.vid{position:relative;aspect-ratio:16/9;border-radius:17px;overflow:hidden;background:var(--navy-deep);cursor:pointer}
.vid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease-out)}
.vid:hover img{transform:scale(1.025)}
.vid::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(8,17,31,.04),rgba(8,17,31,.45));transition:opacity .35s ease}
.vid:hover::after{opacity:.8}
.vid.is-playing::after,.vid.is-playing .yt-play,.vid.is-playing img,.vid.is-playing .vid-label{display:none}
.yt-frame{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;border:0;cursor:pointer;z-index:2;background:var(--grad-btn);
  box-shadow:0 14px 44px rgba(37,99,235,.55),inset 0 1px 0 rgba(255,255,255,.3);display:grid;place-items:center;transition:transform .3s cubic-bezier(.2,.9,.3,1.4)}
.yt-play svg{width:32px;height:32px;fill:#fff;margin-left:5px}
.vid:hover .yt-play,.yt-play:focus-visible{transform:translate(-50%,-50%) scale(1.08)}
.yt-play:focus-visible{outline:3px solid #fff;outline-offset:5px}
.yt-play::before,.yt-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(127,212,255,.7);animation:ytpulse 2.8s cubic-bezier(.2,.6,.3,1) infinite}
.yt-play::after{animation-delay:1.4s}
@keyframes ytpulse{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(1.85);opacity:0}}
.vid-label{position:absolute;left:1rem;bottom:1rem;z-index:2;display:flex;gap:.4rem;flex-wrap:wrap}
.vid-label span{padding:.32rem .6rem;border-radius:8px;background:rgba(255,255,255,.92);color:var(--text);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;box-shadow:var(--shadow-sm)}
@media (max-width:560px){.yt-play{width:70px;height:70px}.yt-play svg{width:24px;height:24px}.vid-label{display:none}}
.vid-note{margin-top:1rem;font-size:.84rem;color:var(--faint)}
.chapters{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.chapter{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;padding:1rem 1.1rem;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-xs);transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.chapter:hover{border-color:#C5D3E8;transform:translateX(3px);box-shadow:var(--shadow)}
.chapter .num{font-family:var(--mono);font-size:11px;color:var(--aura);letter-spacing:.1em;padding-top:.2rem}
.chapter b{display:block;color:var(--text);font-weight:600;font-size:15.5px}
.chapter p{margin:.2rem 0 0;color:var(--muted);font-size:14px;line-height:1.55}
.demo-side .btn-row{margin-top:1.2rem}
.demo-meta{margin:1rem 0 0;padding:.9rem 1rem;border-radius:14px;background:var(--paper);border:1px solid var(--line-soft);font-size:13.5px;color:var(--muted)}
.demo-meta b{color:var(--text)}

/* ── cards (shared) ──────────────────────────────────────────────────────── */
.card{position:relative;border:1px solid var(--line);background:#fff;border-radius:var(--radius-lg);padding:1.6rem;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:#C9D5E6}
.card h3{margin:0 0 .5rem}
.card p{color:var(--muted);font-size:15px;margin:0}
.ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:1.1rem;background:linear-gradient(135deg,#EEF4FF,#E8ECFF);color:var(--aura);border:1px solid #DCE6FB}
.ico svg{width:22px;height:22px}
.ico.mint{background:var(--mint-wash);color:var(--mint-deep);border-color:#C9F2DF}
.spot{--mx:50%;--my:50%}
.spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(37,99,235,.07),transparent 45%)}
.spot:hover::before{opacity:1}

/* ── use cases ───────────────────────────────────────────────────────────── */
.uses{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.uses .card{grid-column:span 2;display:flex;flex-direction:column}
.uses .card.wide{grid-column:span 3}
.uses .card .link-arrow{margin-top:auto;padding-top:1.2rem}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--aura);margin-bottom:.45rem}
@media (max-width:980px){.uses .card,.uses .card.wide{grid-column:span 3}}
@media (max-width:620px){.uses{grid-template-columns:1fr}.uses .card,.uses .card.wide{grid-column:auto}}

/* ── how it works ────────────────────────────────────────────────────────── */
.flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:960px){.flow{grid-template-columns:1fr}}
.steps{position:relative;list-style:none;margin:0;padding:0 0 0 2.6rem}
.steps::before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:2px;background:var(--line);border-radius:2px}
.steps .rail-fill{position:absolute;left:11px;top:10px;width:2px;height:calc(100% - 20px);background:var(--grad-aura);border-radius:2px;transform-origin:0 0;transform:scaleY(var(--p,0))}
.step{position:relative;padding:0 0 1.9rem}
.step:last-child{padding-bottom:0}
.step::before{content:"";position:absolute;left:-2.6rem;top:.2rem;width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--line);transition:border-color .4s,box-shadow .4s,background-color .4s}
.step.on::before{border-color:var(--aura);background:var(--aura-wash);box-shadow:0 0 0 6px rgba(37,99,235,.1)}
.step .stage{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--aura)}
.step h3{margin:.2rem 0 .35rem}
.step p{margin:0;color:var(--muted);font-size:15.5px;max-width:52ch}
.flow-visual{position:sticky;top:calc(var(--header-h) + 2rem)}
.flow-card{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-lg)}
.flow-card img{width:100%;height:auto;display:block}
.flow-card figcaption{padding:1rem 1.2rem;font-size:14px;color:var(--muted);border-top:1px solid var(--line-soft)}
.stage-count{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem;margin-top:1rem}
.stage-count div{padding:1rem 1.1rem;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-xs)}
.stage-count b{display:block;font-size:1.6rem;letter-spacing:-.035em;line-height:1.1}
.stage-count span{font-size:13px;color:var(--muted)}
@media (max-width:520px){.stage-count{grid-template-columns:1fr}}

/* ── the real app ────────────────────────────────────────────────────────── */
.shots{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.2rem,3vw,2rem);align-items:start}
@media (max-width:960px){.shots{grid-template-columns:1fr}}
.shot{margin:0}
.win{border-radius:16px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-lg);transition:transform .5s var(--ease-out),box-shadow .5s}
.shot:hover .win{transform:translateY(-4px);box-shadow:0 40px 80px -30px rgba(15,35,66,.35)}
.win-bar{display:flex;align-items:center;gap:.42rem;padding:.6rem .85rem;background:linear-gradient(180deg,#FBFCFE,#F0F4F9);border-bottom:1px solid var(--line-soft)}
.win-bar i{width:9px;height:9px;border-radius:50%;flex:none;font-style:normal}
.win-bar i:nth-of-type(1){background:#F87171}.win-bar i:nth-of-type(2){background:#FBBF24}.win-bar i:nth-of-type(3){background:#34D399}
.win-bar b{margin-left:.55rem;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:500}
.win img{display:block;width:100%;height:auto}
.shot figcaption{margin-top:1.1rem;font-size:15px;color:var(--muted);max-width:62ch}
.shot figcaption b{color:var(--text);font-weight:600}
.wipe{position:relative;line-height:0}
.wipe img{display:block;width:100%;height:auto}
.wipe-over{position:absolute;inset:0;animation:wipe 12s cubic-bezier(.65,0,.35,1) infinite}
.wipe-seam{position:absolute;top:0;bottom:0;width:2px;pointer-events:none;left:100%;opacity:0;background:linear-gradient(180deg,transparent,var(--aura-pale),var(--aura),transparent);box-shadow:0 0 16px 2px rgba(37,99,235,.45);animation:seam 12s cubic-bezier(.65,0,.35,1) infinite}
@keyframes wipe{0%,10%{clip-path:inset(0 0 0 0)}45%,55%{clip-path:inset(0 100% 0 0)}90%,100%{clip-path:inset(0 0 0 0)}}
@keyframes seam{0%{left:100%;opacity:0}12%{left:100%;opacity:.9}45%,55%{left:0%;opacity:.9}88%{left:100%;opacity:.9}100%{left:100%;opacity:0}}
.theme-tags{display:flex;gap:.5rem;margin-top:.9rem;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.theme-tags span{border:1px solid var(--line);border-radius:999px;padding:.32rem .68rem;color:var(--muted);background:#fff}
.shot-wide{grid-column:1/-1}
.shot-wide figcaption{max-width:80ch}
.win-dark{border-color:#1C2638;background:#0B1220}
.win-dark .win-bar{background:linear-gradient(180deg,#172238,#0F1A2E);border-bottom-color:rgba(148,178,255,.12)}
.win-dark .win-bar b{color:#8595B1}
.shot-tags{display:flex;gap:.5rem;margin-top:.9rem;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.shot-tags span{border:1px solid var(--line);border-radius:999px;padding:.32rem .68rem;color:var(--muted);background:#fff}
.shot-tags span:first-child{border-color:#BFD3FB;color:var(--aura);background:var(--aura-wash)}

/* ── local-first diagram ─────────────────────────────────────────────────── */
.local{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:960px){.local{grid-template-columns:1fr}}
.diagram{position:relative;border-radius:var(--radius-lg);border:1px solid var(--line);padding:clamp(1rem,2.4vw,1.6rem);background:
  radial-gradient(520px 260px at 32% 40%,rgba(16,185,129,.07),transparent 62%),linear-gradient(180deg,#FFFFFF,#F7FAFD);box-shadow:var(--shadow-lg)}
.diagram svg{width:100%;height:auto;display:block;overflow:visible}
.diagram .flowline{stroke-dasharray:6 8;animation:dash 1.6s linear infinite}
.diagram .flowline.slow{animation-duration:3.2s}
@keyframes dash{to{stroke-dashoffset:-28}}
.diagram .pulse-node{animation:nodePulse 2.8s ease-in-out infinite}
@keyframes nodePulse{0%,100%{opacity:.55}50%{opacity:1}}
.local-list{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.85rem}
.local-list li{display:grid;grid-template-columns:30px 1fr;gap:.8rem;align-items:start;font-size:15.5px;color:var(--muted)}
.local-list b{color:var(--text);font-weight:600}
.local-list .tick{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--mint-wash);color:var(--mint-deep)}
.local-list .tick.out{background:var(--aura-wash);color:var(--aura)}
.local-list .tick svg{width:15px;height:15px}

/* ── capabilities bento ──────────────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
.bento .card{grid-column:span 2;overflow:hidden;min-height:260px;display:flex;flex-direction:column}
.bento .card.span3{grid-column:span 3}
.bento .card.span4{grid-column:span 4}
@media (max-width:980px){.bento .card,.bento .card.span3,.bento .card.span4{grid-column:span 3}}
@media (max-width:640px){.bento{grid-template-columns:1fr}.bento .card,.bento .card.span3,.bento .card.span4{grid-column:auto}}
.viz{margin-top:auto;padding-top:1.4rem}
.scores{display:grid;gap:.55rem}
.score{display:grid;grid-template-columns:78px 1fr 34px;gap:.6rem;align-items:center;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.score i{display:block;height:8px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.score i::after{content:"";display:block;height:100%;width:var(--v);border-radius:6px;background:var(--grad-aura);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.2s var(--ease-out)}
.in .score i::after,.no-js .score i::after{transform:scaleX(1)}
.score:nth-child(2) i::after{transition-delay:.1s}.score:nth-child(3) i::after{transition-delay:.2s}.score:nth-child(4) i::after{transition-delay:.3s}
.score em{font-style:normal;text-align:right;color:var(--text)}
.viz-note{margin:.8rem 0 0;font-size:12.5px;color:var(--faint)}
.reframe{position:relative;height:124px;border-radius:14px;background:linear-gradient(135deg,#1B2E52,#0F2342);overflow:hidden}
.reframe .subject{position:absolute;top:26%;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#FDE68A,#F59E0B);box-shadow:0 30px 0 6px rgba(245,158,11,.55);animation:subj 5s ease-in-out infinite}
.reframe .crop{position:absolute;top:8px;bottom:8px;width:56px;border-radius:8px;border:2px solid #7FD4FF;box-shadow:0 0 0 999px rgba(8,17,31,.45),0 0 20px rgba(127,212,255,.6);animation:crop 5s ease-in-out infinite}
@keyframes subj{0%,100%{left:18%}50%{left:66%}}
@keyframes crop{0%,100%{left:calc(18% - 11px)}50%{left:calc(66% - 11px)}}
.karaoke{display:flex;flex-wrap:wrap;gap:.35rem;padding:1.1rem;border-radius:14px;background:linear-gradient(135deg,#1B2E52,#0F2342);justify-content:center}
.karaoke span{font-weight:800;font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,.55);text-shadow:0 2px 0 rgba(0,0,0,.4);animation:kara 4s steps(1) infinite;animation-delay:calc(var(--i) * .5s)}
@keyframes kara{0%{color:#FDE68A;transform:scale(1.08)}12.5%,100%{color:rgba(255,255,255,.55);transform:none}}
.beats{position:relative;display:flex;align-items:end;gap:3px;height:84px;padding:0 .2rem}
.beats i{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#60A5FA,#2563EB);height:var(--h);opacity:.85;transform-origin:bottom;animation:beat 1.1s ease-in-out infinite;animation-delay:calc(var(--i) * -70ms)}
@keyframes beat{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.beats .cut{position:absolute;top:-6px;bottom:0;width:2px;background:var(--peak)}
.posts{display:grid;gap:.5rem}
.post{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:11px;border:1px solid var(--line);background:var(--paper);font-size:13.5px;font-weight:560}
.post svg{width:16px;height:16px;flex:none}
.post .ok{margin-left:auto;display:inline-flex;align-items:center;gap:.3rem;color:var(--mint-deep);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase}
.post .ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mint)}

/* ── editing styles (brain.js drives this; class names are its contract) ─── */
.brain-grid{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:2.6rem;align-items:center}
@media (max-width:900px){.brain-grid{grid-template-columns:1fr;gap:1.6rem}}
.orb-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.orb{width:100%;max-width:300px;height:auto;overflow:visible}
.orb-cap{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;min-height:1.2em}
.orb-state{transition:opacity .35s}
.ring,.orb-core,.orb-dot{transform-origin:130px 130px}
@media (prefers-reduced-motion:no-preference){
  .ring-a{animation:orbSpin 18s linear infinite}.ring-b{animation:orbSpin 26s linear infinite reverse}.ring-c{animation:orbTilt 22s ease-in-out infinite}
  .orb-core{animation:orbPulse 4.2s ease-in-out infinite}.orb-dot{animation:orbPulse 4.2s ease-in-out infinite .3s}
  .particles circle{animation:orbSpin var(--spin,14s) linear infinite;transform-origin:130px 130px}
  #brain.is-thinking .ring-a{animation-duration:7s}#brain.is-thinking .ring-b{animation-duration:10s}#brain.is-thinking .particles circle{animation-duration:calc(var(--spin,14s) * .42)}
}
@keyframes orbSpin{to{transform:rotate(360deg)}}
@keyframes orbTilt{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes orbPulse{0%,100%{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.045)}}
.preset-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.2rem}
.preset-tab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:.6rem .95rem;border-radius:999px;cursor:pointer;min-height:44px;border:1px solid var(--line);background:#fff;color:var(--muted);transition:background .18s,color .18s,border-color .18s}
.preset-tab:hover{border-color:var(--aura-pale);color:var(--text)}
.preset-tab[aria-selected="true"]{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.preset-body{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow);padding:1.5rem 1.6rem 1.4rem}
.preset-name{margin:0 0 .35rem;font-size:1.35rem;letter-spacing:-.02em}
.preset-line{margin:0 0 1.2rem;color:var(--muted);font-size:.95rem;max-width:60ch}
.tl-label{margin:0 0 .5rem;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.tl-note{text-transform:none;letter-spacing:.02em}
.timeline{position:relative;height:62px;border-radius:10px;overflow:hidden;background:linear-gradient(180deg,var(--surface-2),#E6ECF5);border:1px solid var(--line-soft)}
.tl-track{position:absolute;inset:0}
.tl-shot{position:absolute;top:12px;bottom:12px;border-radius:4px;background:linear-gradient(180deg,rgba(37,99,235,.22),rgba(79,70,229,.14));border-left:2px solid var(--aura);opacity:0;transform:scaleY(.55);transform-origin:center}
.tl-shot.micro{background:linear-gradient(180deg,rgba(180,83,9,.28),rgba(180,83,9,.14));border-left-color:var(--peak)}
.tl-mark{position:absolute;top:4px;width:7px;height:7px;border-radius:50%;background:var(--peak);opacity:0;transform:translateX(-50%) scale(.4)}
.tl-playhead{position:absolute;top:0;bottom:0;width:1.5px;background:var(--navy-deep);opacity:0}
@media (prefers-reduced-motion:no-preference){.tl-shot{transition:opacity .3s ease,transform .3s var(--ease)}.tl-mark{transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1)}.tl-playhead{transition:opacity .2s}}
.tl-shot.in{opacity:1;transform:scaleY(1)}
.tl-mark.in{opacity:1;transform:translateX(-50%) scale(1)}
@media (prefers-reduced-motion:reduce){.tl-shot{opacity:1;transform:none}.tl-mark{opacity:1;transform:translateX(-50%)}.tl-playhead{display:none}}
.preset-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem 1.4rem;margin:1.4rem 0 0}
.preset-stats div{margin:0}
.preset-stats dt{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.25rem}
.preset-stats dd{margin:0;font-size:.95rem;color:var(--text);line-height:1.4}
.preset-stats .num{font-size:1.5rem;line-height:1;color:var(--text);font-weight:650;letter-spacing:-.03em}
.brain-fine{margin-top:1.4rem;font-size:.84rem;color:var(--faint);max-width:80ch}

/* ── ROI calculator ──────────────────────────────────────────────────────── */
.roi{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);border-radius:26px;overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-lg)}
@media (max-width:920px){.roi{grid-template-columns:1fr}}
.roi-in{padding:clamp(1.3rem,3vw,2.2rem);display:grid;gap:1.2rem}
.roi-field label{display:flex;justify-content:space-between;gap:1rem;font-size:14.5px;font-weight:580;margin-bottom:.35rem}
.roi-field .hint{display:block;margin-top:.25rem;font-size:12.5px;color:var(--faint)}
.roi-row{display:grid;grid-template-columns:1fr 104px;gap:.8rem;align-items:center}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--aura) var(--fill,50%),var(--surface-2) var(--fill,50%))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:var(--surface-2)}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--aura)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:#fff;border:2px solid var(--aura);box-shadow:0 4px 12px rgba(37,99,235,.35)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--aura);box-shadow:0 4px 12px rgba(37,99,235,.35)}
.roi-num{width:100%;min-height:44px;padding:.5rem .6rem;font:inherit;font-size:15px;font-family:var(--mono);border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--text);text-align:right}
.roi-num:focus{outline:2px solid var(--aura);outline-offset:1px;border-color:var(--aura)}
.roi-out{position:relative;padding:clamp(1.3rem,3vw,2.2rem);color:var(--txt-d);background:radial-gradient(500px 300px at 90% 0%,rgba(79,70,229,.45),transparent 60%),radial-gradient(420px 260px at 0% 100%,rgba(56,189,248,.28),transparent 60%),#0B1830}
.roi-out h3{color:#fff;font-size:12px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;font-weight:500}
.roi-big{margin:.9rem 0 1.4rem}
.roi-big b{display:block;font-size:clamp(2.4rem,5vw,3.5rem);line-height:1;letter-spacing:-.05em;font-weight:650;background:var(--grad-soft);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.roi-big span{display:block;margin-top:.45rem;color:var(--muted-d);font-size:14.5px}
.roi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.roi-grid div{padding:.9rem 1rem;border-radius:13px;border:1px solid var(--line-d);background:rgba(255,255,255,.04)}
.roi-grid b{display:block;font-size:1.35rem;letter-spacing:-.03em;color:#fff;font-weight:620}
.roi-grid span{font-size:12.5px;color:var(--muted-d);line-height:1.4;display:block;margin-top:.2rem}
.roi-grid b span{display:inline;font-size:inherit;color:inherit;margin:0;line-height:inherit}
.roi-verdict{margin:1.2rem 0 0;padding:.9rem 1rem;border-radius:13px;border:1px solid rgba(52,211,153,.35);background:rgba(52,211,153,.09);color:#D1FAE5;font-size:14.5px}
.roi-verdict.warn{border-color:rgba(251,191,36,.4);background:rgba(251,191,36,.08);color:#FEF3C7}
.roi-fine{margin:1rem 0 0;font-size:12px;color:var(--faint-d);line-height:1.55}

/* ── reliability ─────────────────────────────────────────────────────────── */
.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
@media (max-width:900px){.checks{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.checks{grid-template-columns:1fr}}

/* ── comparison table ────────────────────────────────────────────────────── */
.cmp-wrap{border-radius:var(--radius-lg);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.cmp{width:100%;border-collapse:collapse;font-size:15px;table-layout:fixed}
.cmp th,.cmp td{padding:1rem 1.1rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.cmp thead th{font-size:13px;font-weight:600;color:var(--muted);background:var(--paper)}
.cmp thead th.own b{display:block;font-size:1.05rem;color:var(--text);letter-spacing:.14em}
.cmp tbody th{font-weight:580;color:var(--text);width:24%}
.cmp td{color:var(--muted)}
.cmp .own{background:linear-gradient(180deg,rgba(37,99,235,.06),rgba(37,99,235,.025));color:var(--text)}
.cmp .yes{display:inline-flex;gap:.45rem;align-items:flex-start}
.cmp .yes::before{content:"";flex:none;width:16px;height:16px;margin-top:.25rem;border-radius:50%;
  background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E") center/10px no-repeat}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}
.cmp-note{margin:1rem 0 0;font-size:13.5px;color:var(--muted);max-width:86ch}
@media (max-width:760px){
  .cmp{font-size:10.5px;line-height:1.4}
  .cmp th,.cmp td{padding:.55rem .4rem;overflow-wrap:anywhere;hyphens:auto}
  .cmp thead th{font-size:10px}
  .cmp thead th.own b{font-size:11px;letter-spacing:.06em}
  .cmp tbody th{width:25%}
  .cmp .yes::before{display:none}
}

/* ── pricing ─────────────────────────────────────────────────────────────── */
/* Yearly and Monthly sit side by side, always visible — the owner asked that
   neither be hidden behind a switch. Yearly comes first in the document, so on
   a phone it is the first card, with Monthly directly under it. */
.plan-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:0 auto 2.2rem}
.plan-jump a{display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:.55rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);color:var(--text);font-size:14.5px;font-weight:560;text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.plan-jump a:hover{border-color:var(--aura-2);transform:translateY(-1px)}
.plan-jump a b{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--aura);letter-spacing:.02em}
.plan-jump a .pj-save{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:.2rem .45rem;border-radius:999px;background:var(--mint-wash);color:var(--mint-deep)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1180px;margin:0 auto;gap:1.2rem;align-items:stretch}
.plans > .plan[hidden]{display:none!important}
@media (max-width:1120px){.plans{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px}.plans > .plan.enterprise{grid-column:1/-1}}
@media (max-width:760px){.plans{grid-template-columns:minmax(0,1fr);max-width:540px}}
.plan{scroll-margin-top:96px}
.plan{position:relative;display:flex;flex-direction:column;border-radius:24px;padding:2rem 1.8rem;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.plan.featured{border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,conic-gradient(from var(--ang,0deg),#38BDF8,#4F46E5,#2563EB,#10B981,#38BDF8) border-box;box-shadow:0 40px 90px -40px rgba(37,99,235,.5),var(--shadow)}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@media (prefers-reduced-motion:no-preference){.plan.featured{animation:spinBorder 9s linear infinite}}
@keyframes spinBorder{to{--ang:360deg}}
.plan.enterprise{background:linear-gradient(180deg,#FFFFFF,#F6F8FC)}
.ribbon{position:absolute;top:-13px;right:1.4rem;padding:.3rem .7rem;border-radius:999px;background:var(--grad-btn);color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 8px 20px rgba(37,99,235,.35)}
.ribbon.ribbon-soft{background:#fff;color:var(--aura);border:1px solid #BFD3FB;box-shadow:0 8px 20px -8px rgba(37,99,235,.35)}
.plan .tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--aura);margin-bottom:.9rem}
.price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.price b{font-size:clamp(2.6rem,5vw,3.3rem);line-height:1;letter-spacing:-.055em;font-weight:650;background:linear-gradient(105deg,var(--aura),var(--navy-deep) 70%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.price small{font-size:.95rem;color:var(--muted)}
.iqd{margin:.45rem 0 0;font-family:var(--mono);font-size:13px;color:var(--text-2);letter-spacing:.03em}
.local-price[hidden]{display:none}
.local-price{margin:.35rem 0 0;font-family:var(--mono);font-size:12px;color:var(--faint)}
.save{margin-top:1rem;padding:.75rem .9rem;border-radius:13px;background:var(--mint-wash);border:1px solid #C8F0DD;font-size:14px;color:#065F46}
.save b{color:#064E3B}
.best{margin:1rem 0 0;font-size:14.5px;color:var(--text-2)}
.terms-lines{list-style:none;margin:1.1rem 0 0;padding:1rem 0 0;border-top:1px solid var(--line-soft);display:grid;gap:.55rem}
.terms-lines li{display:grid;grid-template-columns:78px 1fr;gap:.6rem;font-size:13.5px;line-height:1.5;color:var(--muted)}
.terms-lines li b{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:500;padding-top:.18rem}
.ticks{list-style:none;padding:0;margin:1.2rem 0 1.4rem;display:grid;gap:.6rem}
.ticks li{display:grid;grid-template-columns:18px 1fr;gap:.65rem;font-size:15px;color:var(--text-2)}
.ticks svg{width:15px;height:15px;color:var(--mint);margin-top:.3rem}
.talk{font-size:clamp(2.2rem,4.6vw,3rem);line-height:1;letter-spacing:-.05em;font-weight:650;color:var(--text)}
.buy{margin-top:auto;display:grid;gap:.6rem}
.buy label{display:grid;gap:.4rem;font-size:13.5px;color:var(--muted);font-weight:520}
.buy input,.field input,.field select,.field textarea{width:100%;min-height:48px;padding:.7rem .85rem;font:inherit;font-size:15.5px;border-radius:11px;border:1px solid var(--line);background:var(--paper);color:var(--text)}
.buy input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--aura);outline-offset:1px;border-color:var(--aura);background:#fff}
.buy .btn{width:100%}
.plan > .btn{margin-top:auto;width:100%}
.formnote{margin:.2rem 0 0;font-size:13px;color:var(--muted)}
.formnote.ok{color:var(--mint-deep)}
.formnote.err{color:#B91C1C}
.dark .formnote{color:var(--muted-d)}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#EF4444!important}
.legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;margin:1.8rem 0 0;padding:0;list-style:none;font-size:13.5px}
.legal-links a{color:var(--muted);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(79,94,118,.35)}
.legal-links a:hover{color:var(--text)}
.pricing-foot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2.2rem}
@media (max-width:880px){.pricing-foot{grid-template-columns:1fr}}
.pricing-foot div{padding:1.1rem 1.2rem;border-radius:16px;border:1px solid var(--line);background:#fff;font-size:14px;color:var(--muted);box-shadow:var(--shadow-xs)}
.pricing-foot b{display:flex;align-items:center;gap:.5rem;color:var(--text);font-size:15px;margin-bottom:.35rem;font-weight:600}
.pricing-foot b svg{width:17px;height:17px;flex:none;color:var(--aura)}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq{display:grid;gap:.7rem;max-width:860px;margin-inline:auto}
.faq details{border:1px solid var(--line);border-radius:16px;background:#fff;transition:border-color .25s,box-shadow .25s}
.faq details[open]{border-color:#C3D3EC;box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.25rem;font-weight:600;font-size:16.5px;min-height:56px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:var(--aura-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/13px no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:focus-visible{outline-offset:-3px;border-radius:14px}
.faq .a{margin:0;padding:0 1.25rem 1.2rem;color:var(--muted);font-size:15.5px;max-width:75ch}
@media (prefers-reduced-motion:no-preference){.faq details[open] .a{animation:faqIn .35s var(--ease-out)}}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── final CTA (a contained navy card on the white page) ─────────────────── */
.final{position:relative;overflow:hidden;isolation:isolate;border-radius:30px;padding:clamp(2.4rem,6vw,4.5rem);text-align:center;color:var(--txt-d);
  background:radial-gradient(640px 320px at 50% 0%,rgba(79,70,229,.5),transparent 70%),radial-gradient(520px 300px at 50% 120%,rgba(56,189,248,.35),transparent 70%),#0B1830;box-shadow:0 50px 100px -50px rgba(15,35,66,.7)}
.final h2{color:#fff;max-width:20ch;margin-inline:auto}
.final .lead{margin:1rem auto 0;color:var(--muted-d)}
.final .btn-row{justify-content:center;margin-top:2rem}
.final .grid-floor{background-image:linear-gradient(rgba(148,178,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(148,178,255,.08) 1px,transparent 1px);z-index:-1}

/* ── contact + proof session ─────────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.mailbox{display:flex;align-items:center;gap:.6rem;margin:1.2rem 0 .8rem;padding:.55rem .55rem .55rem 1rem;border-radius:14px;border:1px solid var(--line);background:#fff;width:max-content;max-width:100%;box-shadow:var(--shadow-xs)}
.mailbox code{font-family:var(--mono);font-size:15px}
.copy{min-height:40px;padding:.4rem .9rem;border-radius:10px;border:1px solid var(--line);background:var(--paper);cursor:pointer;font:inherit;font-size:14px;font-weight:560}
.copy:hover{border-color:var(--aura)}
.tabs{display:inline-flex;gap:.25rem;padding:.3rem;border-radius:13px;background:var(--surface-2);border:1px solid var(--line);margin-bottom:1rem;flex-wrap:wrap}
.tab{min-height:42px;padding:.45rem 1rem;border-radius:10px;border:0;background:transparent;cursor:pointer;font:inherit;font-size:14.5px;font-weight:560;color:var(--muted)}
.tab[aria-selected="true"]{background:#fff;color:var(--text);box-shadow:var(--shadow-sm)}
.form-card{position:relative;padding:clamp(1.2rem,3vw,2rem);border-radius:var(--radius-lg);border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-lg)}
.form-card[hidden]{display:none}
.field{display:grid;gap:.4rem;margin-bottom:.9rem}
.field label,.field .lbl{font-size:14px;font-weight:580}
.field textarea{min-height:120px;resize:vertical}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.checkgrid{display:flex;flex-wrap:wrap;gap:.45rem}
.checkgrid label{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.3rem .75rem;border-radius:10px;border:1px solid var(--line);background:var(--paper);font-size:14px;font-weight:520;cursor:pointer}
.checkgrid input{width:16px;height:16px;min-height:0;accent-color:var(--aura)}
.fallback[hidden]{display:none}
.fallback{margin-top:1rem;padding:1rem;border-radius:12px;border:1px dashed var(--line);background:var(--paper)}
.fallback-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}

/* ── sub-page hero + documents ───────────────────────────────────────────── */
.page-hero{position:relative;overflow:hidden;isolation:isolate;background:#fff;padding-top:clamp(2.8rem,6vw,4.6rem);padding-bottom:clamp(2.4rem,5vw,3.6rem);border-bottom:1px solid var(--line-soft)}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.5rem);max-width:22ch}
.page-hero .lead{margin-top:1rem}
.crumbs{display:flex;gap:.45rem;align-items:center;margin-bottom:1.2rem;font-size:13.5px;color:var(--faint)}
.crumbs a{color:var(--muted)}
.meta-line{margin-top:1.2rem;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--faint)}
.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
@media (max-width:900px){.doc{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
.toc{position:sticky;top:calc(var(--header-h) + 1.5rem);font-size:14px}
.toc b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:.6rem;font-weight:500}
.toc a{display:block;padding:.35rem 0 .35rem .8rem;border-left:2px solid var(--line);color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--text);border-left-color:var(--aura)}
.prose{max-width:74ch;font-size:16.5px;min-width:0}
.prose h2{font-size:clamp(1.45rem,2.4vw,1.9rem);margin:2.6rem 0 .9rem;letter-spacing:-.025em}
.prose h2:first-child{margin-top:0}
.prose h3{margin:1.8rem 0 .5rem;font-size:1.12rem}
.prose p,.prose li{color:var(--text-2)}
.prose ul,.prose ol{padding-left:1.2rem;margin:0 0 1rem}
.prose li{margin:.35rem 0}
.prose strong{color:var(--text)}
.callout{margin:1.2rem 0;padding:1rem 1.15rem;border-radius:14px;border:1px solid #D2E1FA;background:#F3F7FF;font-size:15.5px;color:var(--text-2)}
.callout.mint{border-color:#C0EFD9;background:var(--mint-wash)}
.callout.amber{border-color:#F6DFAE;background:#FFF9EC}
.callout b{color:var(--text)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0 1.4rem;border:1px solid var(--line);border-radius:14px}
.policy-table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.policy-table th,.policy-table td{padding:.8rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.policy-table tr:last-child th,.policy-table tr:last-child td{border-bottom:0}
.policy-table thead th{background:var(--surface-2);font-size:13px;color:var(--muted);font-weight:600}
.policy-table tbody th{width:24%;font-weight:600;color:var(--text);background:#fff}
.policy-table td{background:#fff;color:var(--text-2)}
@media (max-width:640px){.policy-table{font-size:13.5px}.policy-table th,.policy-table td{padding:.6rem .55rem}}
.release{position:relative;padding:0 0 2.2rem 1.7rem;border-left:2px solid var(--line)}
.release::before{content:"";position:absolute;left:-7px;top:.4rem;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--aura)}
.release:first-child::before{background:var(--aura);box-shadow:0 0 0 5px rgba(37,99,235,.15)}
.release:last-child{padding-bottom:0}
.release h2{margin:0;font-size:1.35rem}
.release .when{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--faint)}
.release ul{margin:.7rem 0 0}
.badge{display:inline-flex;align-items:center;padding:.18rem .5rem;border-radius:999px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;background:var(--aura-wash);color:var(--aura);margin-left:.5rem;vertical-align:middle}
.support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.4rem 0}
@media (max-width:700px){.support-grid{grid-template-columns:1fr}}
.kbd{font-family:var(--mono);font-size:.9em;padding:.12rem .4rem;border-radius:6px;background:var(--surface-2);border:1px solid var(--line)}

/* ── footer (white, like the rest of the page) ───────────────────────────── */
.site-footer{position:relative;background:linear-gradient(180deg,#FFFFFF,var(--paper));color:var(--muted);padding-top:clamp(3rem,6vw,4.2rem);border-top:1px solid var(--line-soft)}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:2rem}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
.foot-brand p{margin:.9rem 0 0;font-size:14.5px;max-width:36ch}
.foot-col b{display:block;margin-bottom:.8rem;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text);font-weight:600}
.foot-col a{display:block;padding:.3rem 0;color:var(--muted);font-size:14.5px;text-decoration:none}
.foot-col a:hover{color:var(--aura)}
.foot-trust{display:flex;flex-direction:column;align-items:center;gap:.9rem;margin:0 0 3rem;padding:0 0 2.6rem;border-bottom:1px solid var(--line);text-align:center}
.foot-trust .trust-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.trust-badges{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 1.4rem}
.ph-badge{display:inline-block;line-height:0;border-radius:10px;transition:transform .25s var(--ease),box-shadow .25s}
.ph-badge:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(218,85,47,.5)}
.ph-badge img{width:250px;height:54px;display:block}
.ph-badge.ph-sm img{width:185px;height:40px}
.lb-badge{display:inline-block;line-height:0;border-radius:10px;transition:transform .25s var(--ease),box-shadow .25s}
.lb-badge:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(15,35,66,.5)}
.lb-badge img{display:block;width:173px;height:54px;max-width:100%}
.lb-badge.lb-sm img{width:128px;height:40px}

/* ── independent seals: hero row + trust panel beside the plans ──────────── */
.ts-seal{display:inline-block;line-height:0;border-radius:6px;transition:transform .25s var(--ease),box-shadow .25s}
.ts-seal:hover{transform:translateY(-2px);box-shadow:0 12px 30px -14px rgba(15,35,66,.45)}
.ts-seal img{display:block;height:auto}
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1rem;margin-top:1.15rem}
.hero-trust > span{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.trust-panel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.9fr);gap:1.4rem 2.2rem;align-items:center;max-width:1180px;margin:2.2rem auto 0;padding:1.6rem 1.8rem;border-radius:22px;border:1px solid var(--line);background:linear-gradient(135deg,#FFFFFF 0%,#F3F7FE 100%);box-shadow:var(--shadow)}
.tp-copy .eyebrow{margin-bottom:.55rem}
.tp-copy h3{margin:0;font-size:1.3rem;line-height:1.22;letter-spacing:-.025em;font-weight:650;color:var(--text)}
.tp-copy p{margin:.55rem 0 0;font-size:14.5px;color:var(--muted)}
.tp-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.tp-items li{display:flex;flex-direction:column;align-items:flex-start;gap:.8rem;padding:1rem 1.05rem;border-radius:16px;background:#fff;border:1px solid var(--line-soft);box-shadow:var(--shadow-xs)}
.tp-items li > span:last-child{font-size:13.5px;line-height:1.5;color:var(--muted)}
.tp-items li b{display:block;margin-bottom:.15rem;font-size:14.5px;font-weight:600;color:var(--text)}
.tp-items .ph-badge,.tp-items .ph-badge img{max-width:100%;height:auto}
.tp-icon{display:grid;place-items:center;width:57px;height:57px;border-radius:14px;background:var(--aura-wash);color:var(--aura)}
.tp-icon svg{width:26px;height:26px}
@media (max-width:1120px){.trust-panel{grid-template-columns:1fr;max-width:920px}}
@media (max-width:760px){.trust-panel{padding:1.3rem 1.1rem;max-width:540px}.tp-items{grid-template-columns:1fr}}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 1.4rem;margin-top:1.6rem;font-size:13px;color:var(--faint)}
.foot-legal a{color:var(--faint)}
.foot-legal a:hover{color:var(--aura)}
.site-footer{padding-bottom:6.5rem}

/* TrustedSite trustmark — by id only, and only inside our slot (CLAUDE.md §5) */
#ts-slot{display:flex;justify-content:flex-start;align-items:center;margin:0;min-height:0}
#ts-slot.ts-ready{min-height:38px}
#ts-slot #trustedsite-tm-image{position:static!important;inset:auto!important;transform:none!important;z-index:auto!important;display:block!important;visibility:visible!important;float:none!important;margin:0!important}

/* ── checkout modal ──────────────────────────────────────────────────────── */
.pay-modal[hidden]{display:none}
.pay-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:1.2rem;background:rgba(10,19,36,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:payFade .2s ease-out}
@keyframes payFade{from{opacity:0}to{opacity:1}}
.pay-card{position:relative;width:min(460px,100%);max-height:calc(100vh - 2.4rem);overflow:auto;border-radius:24px;padding:1.7rem 1.6rem 1.3rem;background:#fff;border:1px solid var(--line);box-shadow:0 40px 100px -20px rgba(10,19,36,.45);animation:payRise .28s var(--ease-out)}
.pay-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--grad-aura)}
@keyframes payRise{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.pay-card h3{margin:.3rem 0 .6rem;font-size:1.45rem}
.pay-price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin:.1rem 0 .4rem}
.pay-price b{font-size:2rem;line-height:1;letter-spacing:-.045em;background:linear-gradient(105deg,var(--aura),var(--navy-deep));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.pay-price span{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pay-price > .pay-plan{display:contents}
.pay-cadence{margin:.3rem 0 .9rem;padding:.75rem .9rem;border-radius:12px;border:1px solid var(--line-soft);background:var(--paper);font-size:13.5px;color:var(--text-2)}
.pay-switch{margin:-.3rem 0 .6rem}
.pay-card label{display:block;font-size:13.5px;color:var(--muted);margin-bottom:.4rem;font-weight:520}
.pay-card input{width:100%;min-height:48px;padding:.7rem .85rem;font:inherit;font-size:16px;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--text)}
.pay-card input:focus{outline:2px solid var(--aura);outline-offset:1px;border-color:var(--aura);background:#fff}
.pay-card .btn{width:100%;margin-top:.8rem}
.pay-close{position:absolute;top:.9rem;right:.9rem;width:36px;height:36px;cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:10px;color:var(--muted);font-size:18px;line-height:1}
.pay-close:hover{color:var(--text);border-color:var(--aura)}
.pay-trust{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:1rem 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--faint)}
.pay-trust a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

/* ── update-list card + site assistant (subscribe.js / chat.js contracts) ── */
.sub-card[hidden]{display:none}
.sub-card{position:fixed;left:22px;bottom:22px;z-index:70;width:min(340px,calc(100vw - 44px));background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(10,19,36,.22);padding:1.15rem 1.2rem 1rem;opacity:0;transform:translateY(14px);transition:opacity .26s ease-out,transform .26s var(--ease)}
.sub-card.in{opacity:1;transform:none}
.sub-card h3{margin:0 0 .35rem;font-size:1.08rem}
.sub-card p.lede{margin:0 0 .85rem;font-size:.88rem;line-height:1.55;color:var(--muted)}
.sub-row{display:flex;gap:.45rem}
.sub-row input{flex:1;min-width:0;min-height:44px;padding:.55rem .7rem;font:inherit;font-size:.92rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--text)}
.sub-row input:focus{outline:2px solid var(--aura);outline-offset:1px;border-color:var(--aura)}
.sub-row button{border:none;border-radius:10px;padding:0 .9rem;min-height:44px;cursor:pointer;background:var(--grad-btn);color:#fff;font:inherit;font-size:13px;font-weight:600}
.sub-row button:disabled{opacity:.6;cursor:default}
.sub-card .formnote{margin:.6rem 0 0;font-size:.8rem}
.sub-close{position:absolute;top:.55rem;right:.55rem;width:30px;height:30px;cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:8px;color:var(--muted);font-size:15px;line-height:1}
.sub-close:hover{color:var(--text);border-color:var(--aura)}
.sub-fine{margin:.6rem 0 0;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
@media (max-width:560px){.sub-card{left:14px;right:14px;width:auto;bottom:84px}}

.chat-launcher[hidden],.chat-panel[hidden]{display:none}
.chat-launcher{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.2rem;min-height:52px;border:0;border-radius:999px;background:var(--grad-btn);color:#fff;cursor:pointer;font:inherit;font-size:14px;font-weight:600;box-shadow:0 14px 34px rgba(37,99,235,.4);transition:transform .2s var(--ease),box-shadow .2s}
.chat-launcher:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(37,99,235,.5)}
.chat-launcher svg{width:18px;height:18px;flex:none}
.chat-launcher .pulse{position:absolute;inset:0;border-radius:999px;pointer-events:none;animation:chatPulse 3.6s ease-out infinite}
@keyframes chatPulse{0%{box-shadow:0 0 0 0 rgba(37,99,235,.4)}70%{box-shadow:0 0 0 16px rgba(37,99,235,0)}100%{box-shadow:0 0 0 0 rgba(37,99,235,0)}}
.chat-panel{position:fixed;right:22px;bottom:86px;z-index:61;width:min(380px,calc(100vw - 44px));max-height:min(580px,calc(100vh - 130px));display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 70px rgba(10,19,36,.28);overflow:hidden}
.chat-head{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,#FFFFFF,#F5F8FC)}
.chat-head b{font-size:1rem;letter-spacing:.04em}
.chat-head .who{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);display:block}
.chat-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);flex:none;box-shadow:0 0 0 3px rgba(16,185,129,.2)}
.chat-close{margin-left:auto;border:1px solid var(--line);background:#fff;border-radius:9px;width:32px;height:32px;cursor:pointer;color:var(--muted);font-size:16px;line-height:1}
.chat-close:hover{color:var(--text);border-color:var(--aura)}
.chat-log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--paper)}
.chat-row{display:flex}
.chat-row.mine{justify-content:flex-end}
.chat-bubble{max-width:84%;padding:.62rem .85rem;border-radius:13px;font-size:.9rem;line-height:1.55;background:#fff;border:1px solid var(--line-soft);color:var(--text);box-shadow:var(--shadow-xs);white-space:pre-wrap;overflow-wrap:anywhere}
.chat-row.mine .chat-bubble{background:var(--grad-btn);border-color:transparent;color:#fff}
.chat-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.1rem 0 .3rem}
.chat-chip{border:1px solid var(--line);background:#fff;color:var(--aura);border-radius:999px;padding:.4rem .72rem;cursor:pointer;font:inherit;font-size:12.5px;font-weight:560}
.chat-chip:hover{border-color:var(--aura);background:var(--aura-wash)}
.chat-form{display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--line-soft);background:#fff}
.chat-form input{flex:1;min-width:0;min-height:44px;padding:.55rem .75rem;font:inherit;font-size:.92rem;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--text)}
.chat-form input:focus{outline:2px solid var(--aura);outline-offset:1px;border-color:var(--aura)}
.chat-send{border:none;border-radius:10px;padding:0 .95rem;min-width:44px;cursor:pointer;background:var(--grad-btn);color:#fff;font:inherit;font-size:13px;font-weight:600}
.chat-note{padding:.45rem .75rem .7rem;text-align:center;background:#fff;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
@media (max-width:520px){.chat-launcher{right:14px;bottom:14px;padding:.75rem 1rem}.chat-panel{right:14px;left:14px;bottom:78px;width:auto;max-height:min(70vh,calc(100vh - 120px))}}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.nf{min-height:62vh;display:grid;place-items:center;text-align:center}
.nf .code{font-family:var(--mono);font-size:13px;letter-spacing:.2em;color:var(--aura)}
.nf h1{margin:.6rem auto 1rem;max-width:18ch}
.nf .lead{margin-inline:auto}
.nf .btn-row{justify-content:center;margin-top:1.8rem}

/* ── scroll reveal ───────────────────────────────────────────────────────── */
.js .reveal{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out),filter .9s var(--ease-out);transition-delay:calc(var(--d,0) * 70ms)}
.js .reveal.in{opacity:1;transform:none;filter:none}

/* ── reduced motion: the information stays, the movement goes ────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .hero h1 .w,.fade-up,.float-chip{opacity:1!important;transform:none!important;filter:none!important;translate:none!important}
  .js .reveal{opacity:1;transform:none;filter:none}
  .offer-track{width:100%;justify-content:center}
  .offer-set{flex:0 1 auto;min-width:0}
  .offer-set[aria-hidden="true"],.offer-item:not(:first-child),.offer-item::after,.offer-pause-input,.offer-pause,.offer-line{display:none}
  .offer-hi{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .offer-strip{-webkit-mask-image:none;mask-image:none}
  .app-frame{transform:none}
  .aurora{display:none}
  .wipe-over{clip-path:none}
  .wipe-seam{display:none}
  .score i::after{transform:scaleX(1)}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px){.offer-hi-x{display:none}}

/* ── performance: the same page, without the work nobody can see ──────
   Measured on the live site before this: 152 CSS animations running at once
   near the foot of the home page — almost all of them for sections that were
   nowhere near the screen, every one repainting on every frame.

   Nothing here changes how the site looks or what it animates. An animation
   only stops while it is off screen, and `animation-play-state` freezes the
   frame it is on, so it carries on exactly where it was the moment the section
   scrolls back into view. site.js toggles `.anim-off`. */
.js .anim-off,.js .anim-off *,.js .anim-off *::before,.js .anim-off *::after{animation-play-state:paused!important}

/* ── newsroom ───────────────────────────────────────────────────────────── */
.founder{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(1.4rem,3vw,3rem);align-items:start}
@media (max-width:900px){.founder{grid-template-columns:1fr}}
.founder-shot{margin:0;border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);background:var(--ink)}
.founder-shot img{display:block;width:100%;height:auto}
.founder-copy h2{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.1;letter-spacing:-.03em;margin:.2rem 0 .8rem}
.founder-copy p{font-size:16px;line-height:1.65;color:var(--text-2);margin:0 0 .9rem}
.founder-copy .lead{font-size:clamp(1.02rem,1.7vw,1.2rem);color:var(--muted)}
.founder-facts{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
@media (max-width:560px){.founder-facts{grid-template-columns:1fr}}
.founder-facts li{padding:.85rem 1rem;border-radius:14px;border:1px solid var(--line-soft);background:#fff;box-shadow:var(--shadow-xs)}
.founder-facts b{display:block;font-size:15px;color:var(--text);font-weight:640}
.founder-facts span{font-size:13.5px;color:var(--muted)}
.founder-sig{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .8rem;margin-top:1.4rem!important;padding-top:1.1rem;border-top:1px solid var(--line-soft)}
.founder-sig b{font-size:16px;color:var(--text)}
.founder-sig span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.founder-sig em{font-style:italic;color:var(--aura)}
.founder-banner{margin:clamp(1.6rem,3vw,2.6rem) 0 0;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg);line-height:0}
.founder-banner img{display:block;width:100%;height:auto}
.news-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
@media (max-width:900px){.news-list{grid-template-columns:1fr}}
.news-item{scroll-margin-top:96px;padding:1.5rem 1.6rem;border-radius:22px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);transition:transform .4s var(--ease-out),box-shadow .4s}
.news-item:hover{transform:translateY(-3px);box-shadow:0 36px 70px -34px rgba(15,35,66,.4)}
.news-item:first-child{grid-column:1/-1}
.news-head{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .9rem;margin-bottom:.7rem}
.news-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--aura);background:var(--aura-wash);border:1px solid #BFD3FB;border-radius:999px;padding:.3rem .65rem}
.news-head time{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--faint)}
.news-item h2{font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.2;letter-spacing:-.025em;margin:0 0 .6rem}
.news-item:first-child h2{font-size:clamp(1.5rem,2.8vw,2.1rem)}
.news-lead{font-size:16.5px;line-height:1.55;color:var(--text-2);margin:0 0 .8rem}
.news-item p{font-size:15px;line-height:1.65;color:var(--muted);margin:0 0 .8rem}
.news-item .ticks{margin:1rem 0 0}
.news-item .ticks li{font-size:14.5px}