/* ─────────────────────────────────────────────────────────────────────────────
   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)}
/* The demo reel: the owner's own 30-second film, sound off until asked
   (video.js). The controls sit on a near-opaque fill rather than a
   backdrop blur -- a blur over moving video is re-computed every frame,
   which is exactly the cost section 3ae removed from this page. */
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--navy-deep)}
.js .reel.is-ready video{cursor:pointer}
.reel-play[hidden],.reel-pause[hidden],.reel-sound[hidden]{display:none}
.reel-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:92px;height:92px;border-radius:50%;border:0;cursor:pointer;z-index:3;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)}
.reel-play svg{width:32px;height:32px;fill:#fff;margin-left:5px}
.reel-play:hover,.reel-play:focus-visible{transform:translate(-50%,-50%) scale(1.08)}
.reel-play:focus-visible{outline:3px solid #fff;outline-offset:5px}
.reel-pause,.reel-sound{position:absolute;bottom:.85rem;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:42px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.26);background:rgba(8,17,31,.74);color:#fff;font:600 13px/1 var(--sans);letter-spacing:.01em;
  box-shadow:0 6px 22px rgba(8,17,31,.35);transition:background-color .2s,border-color .2s,transform .2s var(--ease)}
.reel-pause{left:.85rem;width:42px;padding:0}
.reel-sound{right:.85rem;padding:0 1rem 0 .8rem}
.reel-pause:hover,.reel-sound:hover{background:rgba(8,17,31,.9);border-color:rgba(255,255,255,.45)}
.reel-pause:focus-visible,.reel-sound:focus-visible{outline:3px solid #fff;outline-offset:3px}
.reel-pause svg,.reel-sound svg{width:19px;height:19px;flex:none;display:block}
.reel-pause .i-play,.reel-pause.is-paused .i-pause{display:none}
.reel-pause.is-paused .i-play{display:block}
.reel-sound .i-on,.reel-sound .t-on,.reel-sound.is-on .i-off,.reel-sound.is-on .t-off{display:none}
.reel-sound.is-on .i-on{display:block}
.reel-sound.is-on .t-on{display:inline}
/* A soft ring while the film is muted says "there is sound here". */
.reel-sound:not(.is-on)::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid rgba(127,212,255,.75);pointer-events:none;opacity:0}
@media (prefers-reduced-motion:no-preference){.reel-sound:not(.is-on)::after{animation:reelping 2.6s cubic-bezier(.2,.6,.3,1) infinite}}
@keyframes reelping{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.22,1.5);opacity:0}}
@media (max-width:560px){.reel-play{width:70px;height:70px}.reel-play svg{width:24px;height:24px}
  .reel-pause,.reel-sound{bottom:.6rem;height:38px;font-size:12px}.reel-pause{left:.6rem;width:38px}.reel-sound{right:.6rem;padding:0 .85rem 0 .7rem}}
.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)}

/* ── motion graphics + Director's Cut (#studio, home.py studio()) ───────────
   Two contained dark screens on the white page, like the ROI panel and the
   closing card — the page itself stays white. CSS only. Every moving part is
   transform or opacity, except the timeline's collapsing gaps (flex-grow on
   four small boxes), a few label colours, and the look tint, which steps
   twelve times a cycle rather than repainting every frame. No blur filters,
   no backdrop-filter, no blend modes: this page is judged on a 2011 GPU.

   The resting state of every illustration is a finished frame — that is what
   prefers-reduced-motion shows. All motion is added under no-preference, and
   .anim-off pauses it off screen like every other section. Animations whose
   first keyframe is a highlight use negative delays, so nothing starts lit. */
.studio{overflow:hidden;isolation:isolate}
.studio-floor{z-index:-1;-webkit-mask-image:radial-gradient(ellipse 70% 40% at 50% 0%,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse 70% 40% at 50% 0%,#000 20%,transparent 72%)}
.studio .sec-head h2{max-width:22ch;margin-inline:auto}
.engines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.5rem);align-items:stretch}
@media (max-width:1000px){.engines{grid-template-columns:minmax(0,1fr);max-width:640px;margin-inline:auto}}
.engine{position:relative;display:flex;flex-direction:column;gap:1.35rem;min-width:0;padding:clamp(.9rem,2vw,1.35rem);border-radius:28px;isolation:isolate;overflow:hidden;color:var(--txt-d);
  border:1px solid rgba(148,178,255,.16);box-shadow:0 50px 100px -50px rgba(15,35,66,.7),0 2px 6px rgba(15,35,66,.08);
  background:radial-gradient(560px 320px at 100% 0%,rgba(79,70,229,.42),transparent 62%),radial-gradient(480px 300px at 0% 100%,rgba(56,189,248,.2),transparent 60%),#0B1830}
.engine.dc{background:radial-gradient(560px 320px at 0% 0%,rgba(16,185,129,.2),transparent 60%),radial-gradient(480px 300px at 100% 100%,rgba(37,99,235,.4),transparent 62%),#0B1830}
.engine::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.engine-copy{padding:0 clamp(.15rem,1vw,.5rem) .35rem}
.engine-kicker{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 .7rem;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#93C5FD}
.engine.dc .engine-kicker{color:#6EE7B7}
.engine-kicker svg{width:16px;height:16px}
.engine h3{margin:0 0 .7rem;color:#fff;font-size:clamp(1.3rem,2.1vw,1.6rem);line-height:1.18;letter-spacing:-.028em}
.engine-copy > p{margin:0;color:var(--muted-d);font-size:15.5px;line-height:1.6}
.engine-copy > p.engine-note{display:grid;grid-template-columns:18px minmax(0,1fr);gap:.55rem;margin-top:1rem;padding-top:.95rem;border-top:1px solid var(--line-d);font-size:13.5px;line-height:1.5}
.engine-note svg{width:16px;height:16px;margin-top:.15rem;color:#93C5FD}
.engine.dc .engine-note svg{color:#6EE7B7}
/* One engine on its own (before 10.6): the card takes the whole row, picture beside the words. */
.studio.mg-only .engines{grid-template-columns:minmax(0,1fr)}
.studio.mg-only .eng-tag{display:none}
@media (min-width:1001px){
  .studio.mg-only .engine{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:center;gap:clamp(1.25rem,2.6vw,2.25rem)}
  .studio.mg-only .engine-copy{padding:0 clamp(.25rem,1.2vw,.9rem) 0 0}
}

.mg-viz,.dc-viz{position:relative;display:grid;gap:.7rem;min-width:0;container-type:inline-size}
.mg-screen,.dc-frame{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;isolation:isolate;container-type:inline-size;
  border:1px solid rgba(148,178,255,.18);box-shadow:0 24px 50px -28px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06)}
.mg-board,.dc-time{display:grid;gap:.55rem;padding:.75rem .8rem .8rem;border-radius:14px;background:rgba(5,11,24,.55);border:1px solid var(--line-d)}

/* Motion Graphics: a lit stage, five scenes, the storyboard and the mix */
.mg-screen{background:radial-gradient(70% 90% at 30% 18%,rgba(59,130,246,.26),transparent 60%),radial-gradient(60% 70% at 86% 28%,rgba(79,70,229,.3),transparent 62%),linear-gradient(180deg,#0A1630,#050B18 72%)}
.mg-screen::before{content:"";position:absolute;left:0;right:0;top:58%;height:2px;background:linear-gradient(90deg,transparent,rgba(147,197,253,.75),transparent);box-shadow:0 0 18px 3px rgba(96,165,250,.32);pointer-events:none}
.mg-key{position:absolute;left:6%;top:-34%;width:72%;height:110%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(147,197,253,.3),rgba(147,197,253,.07) 58%,transparent)}
.mg-floor{position:absolute;left:0;bottom:0;width:100%;height:42%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);mask-image:linear-gradient(180deg,transparent,#000 45%)}
.mg-floor path{fill:none;stroke:#7FB6FF;stroke-width:1;vector-effect:non-scaling-stroke}
.mg-floor .rays path{stroke-opacity:.2}
.mg-dust i{position:absolute;left:var(--x);top:var(--y);width:3px;height:3px;border-radius:50%;background:#CFE3FF;box-shadow:0 0 6px rgba(191,219,254,.9);opacity:.5}
.mg-scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0}
.mg-scene.mg-hook{opacity:1}
.mg-title{margin:0;text-align:center;color:#fff;font-weight:700;letter-spacing:-.045em;line-height:1.02;font-size:24px;font-size:clamp(16px,6.6cqw,38px)}
.mg-m{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .05em .1em;margin-bottom:-.1em}
.mg-w{display:inline-block;transform-origin:0 100%}
.mg-em{background:linear-gradient(100deg,#8BDCFF,#3FA9FF 45%,#A5B4FC);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.mg-sweep{position:absolute;top:22%;bottom:22%;left:0;width:22%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-150%) skewX(-18deg);opacity:0}
.mg-prob{position:relative;margin:0;color:rgba(237,243,255,.8);font-weight:620;letter-spacing:-.035em;font-size:19px;font-size:clamp(14px,5cqw,30px)}
.mg-prob span{display:inline-block}
.mg-prob i{position:absolute;left:-5%;right:-5%;top:52%;height:3px;border-radius:3px;background:linear-gradient(90deg,#F87171,#FB923C);box-shadow:0 0 12px rgba(248,113,113,.65);transform-origin:0 50%}
.mg-ui{position:relative;display:grid;grid-template-columns:22% minmax(0,1fr);grid-template-rows:14% minmax(0,1fr);width:60%;aspect-ratio:16/10;border-radius:10px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.04));border:1px solid rgba(191,219,254,.36);
  box-shadow:0 30px 60px -22px rgba(37,99,235,.7);transform:perspective(700px) translateY(0) rotateX(9deg) scale(1)}
.mg-ui-top{grid-column:1/-1;display:flex;align-items:center;gap:4%;padding:0 4%;border-bottom:1px solid rgba(191,219,254,.18)}
.mg-ui-top i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.42)}
.mg-ui-side{display:grid;align-content:start;gap:6px;padding:16% 14%;border-right:1px solid rgba(191,219,254,.14)}
.mg-ui-side i{height:4px;border-radius:3px;background:rgba(191,219,254,.32)}
.mg-ui-main{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:5px;padding:7% 8%;min-height:0}
.mg-ui-main .r1{height:6px;width:46%;border-radius:4px;background:rgba(255,255,255,.58)}
.mg-ui-main .r2{height:4px;width:70%;border-radius:3px;background:rgba(191,219,254,.32)}
.mg-bars{display:flex;align-items:flex-end;gap:5%;min-height:0;padding-top:4%}
.mg-bars i{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:linear-gradient(180deg,#7DD3FC,#3B82F6);transform-origin:50% 100%}
.mg-ui-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.16) 46%,transparent 60%);transform:translateX(-100%)}
.mg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4%;width:74%}
.mg-card{display:grid;align-content:start;gap:7px;aspect-ratio:4/5;padding:10%;border-radius:10px;transform-origin:50% 100%;
  background:linear-gradient(170deg,rgba(255,255,255,.16),rgba(255,255,255,.04));border:1px solid rgba(191,219,254,.32);box-shadow:0 20px 40px -18px rgba(37,99,235,.65)}
.mg-card i{width:34%;aspect-ratio:1;margin-bottom:10%;border-radius:30%;background:linear-gradient(135deg,#7DD3FC,#6366F1);box-shadow:0 0 16px rgba(99,102,241,.6)}
.mg-card b{display:block;height:4px;border-radius:3px;background:rgba(255,255,255,.5)}
.mg-card b.short{width:62%;background:rgba(191,219,254,.3)}
.mg-scene:last-of-type{align-content:center;row-gap:9%}
.mg-flare{position:absolute;left:12%;right:12%;top:36%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(191,219,254,.95),transparent);box-shadow:0 0 20px 4px rgba(96,165,250,.45);opacity:.55}
.mg-logo{width:13%;aspect-ratio:1;border-radius:30%;background:conic-gradient(from 210deg,#38BDF8,#6366F1,#2563EB,#38BDF8);box-shadow:0 0 30px rgba(99,102,241,.7),inset 0 0 0 3px rgba(255,255,255,.2)}
.mg-btn{position:relative;padding:.5em 1.25em;border-radius:999px;color:#fff;font-weight:650;letter-spacing:-.01em;font-size:12px;font-size:clamp(10px,2.5cqw,15px);
  background:linear-gradient(135deg,#3B82F6,#4338CA);box-shadow:0 10px 30px -8px rgba(59,130,246,.9),inset 0 1px 0 rgba(255,255,255,.3)}
.mg-btn::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid rgba(147,197,253,.8);opacity:0}
.mg-chip{position:absolute;right:3%;top:5%;padding:.22em .6em;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(237,243,255,.85);background:rgba(8,17,31,.55);border:1px solid rgba(148,178,255,.24)}
@container (max-width:330px){.mg-chip{display:none}}
.mg-board{--lab:52px;position:relative}
.mg-strip{list-style:none;margin:0 0 0 var(--lab);padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.mg-strip li{display:grid;justify-items:center;align-content:start;gap:.35rem;min-width:0;padding:.45rem .2rem .4rem;border-radius:10px;text-align:center;
  border:1px solid rgba(148,178,255,.14);background-color:rgba(255,255,255,.03);color:var(--muted-d)}
.mg-strip li:first-child{border-color:rgba(147,197,253,.6);background-color:rgba(59,130,246,.16);color:#fff}
.mg-thumb{display:grid;place-items:center;width:100%;max-width:58px;aspect-ratio:16/9;border-radius:5px;background:linear-gradient(180deg,#0E1D3A,#081226);border:1px solid rgba(148,178,255,.2)}
.mg-thumb b{display:block}
.mg-beat{font-size:11.5px;line-height:1.15;font-weight:560;overflow-wrap:anywhere}
.g-aa{font-size:11px;line-height:1;font-weight:800;letter-spacing:-.02em;color:#BFDBFE}
.g-strike{position:relative;width:52%;height:3px;border-radius:2px;background:rgba(237,243,255,.45)}
.g-strike::after{content:"";position:absolute;left:-10%;right:-10%;top:1px;height:1.5px;background:#F87171}
.g-panel{width:50%;aspect-ratio:16/10;border-radius:2px;border:1px solid #93C5FD;background:rgba(147,197,253,.18)}
.mg-thumb .g-cards{display:flex;gap:2px;width:56%}
.g-cards i{flex:1;aspect-ratio:3/4;border-radius:1.5px;background:rgba(147,197,253,.55)}
.g-pill{width:44%;height:5px;border-radius:9px;background:linear-gradient(90deg,#3B82F6,#6366F1);box-shadow:0 0 6px rgba(99,102,241,.8)}
.mg-lanes{display:grid;gap:5px}
.mg-lane{display:grid;grid-template-columns:var(--lab) minmax(0,1fr);align-items:center}
.mg-lane b{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--faint-d)}
.mg-lane svg{display:block;width:100%;height:12px}
.ln-vo rect{fill:#60A5FA;opacity:.85}
.ln-mu path{fill:none;stroke:#A78BFA;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.9}
.ln-fx path{fill:#FBBF24}
.ln-fx .riser{fill:rgba(251,191,36,.32)}
.mg-run{position:absolute;top:.55rem;bottom:.6rem;left:calc(.8rem + var(--lab));right:.8rem;overflow:hidden;pointer-events:none;border-radius:6px}
.mg-run i{position:absolute;inset:0;transform:translateX(-92%);background:linear-gradient(90deg,transparent 70%,rgba(96,165,250,.12))}
.mg-run i::after{content:"";position:absolute;right:0;top:0;bottom:0;width:2px;border-radius:2px;background:#E0F2FE;box-shadow:0 0 10px 2px rgba(125,211,252,.7)}
@container (max-width:420px){.mg-board{--lab:0px}.mg-lane b{display:none}.mg-strip li{padding-inline:.1rem}.mg-beat{font-size:11px}}

/* Director's Cut: a two-person landscape take, a face-tracking 9:16 crop,
   captions inside it, and the cut closing up on the timeline */
.dc-frame{background:linear-gradient(180deg,#1A2B4A 0%,#13213B 62%,#0E1A30)}
.dc-window{position:absolute;left:38%;top:9%;width:25%;height:44%;border-radius:4px;background:linear-gradient(180deg,rgba(186,230,253,.34),rgba(125,211,252,.1));box-shadow:0 0 40px 10px rgba(125,211,252,.1)}
.dc-window::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(13,26,48,.6)}
.dc-person{position:absolute;bottom:0;width:17%;height:62%;margin-left:-8.5%}
.dc-person.p1{left:25%}
.dc-person.p2{left:72%}
.dc-person .head{position:absolute;left:27%;top:0;width:46%;aspect-ratio:1;border-radius:50%}
.dc-person .body{position:absolute;left:0;right:0;bottom:0;height:56%;border-radius:48% 48% 8% 8% / 60% 60% 8% 8%}
.p1 .head{background:radial-gradient(circle at 38% 32%,#FDE7C7,#E8A87C 60%,#C27C55)}
.p1 .body{background:linear-gradient(180deg,#F59E0B,#B45309)}
.p2 .head{background:radial-gradient(circle at 38% 32%,#F5D0B5,#C98B66 60%,#9A5F41)}
.p2 .body{background:linear-gradient(180deg,#6366F1,#3730A3)}
.talk{position:absolute;left:80%;top:3%;display:flex;align-items:center;gap:2px;height:13%;opacity:0}
.p1 .talk{opacity:1}
.talk i{width:3px;height:100%;border-radius:2px;background:#6EE7B7}
.dc-desk{position:absolute;left:0;right:0;bottom:0;height:13%;background:linear-gradient(180deg,#2B3E63,#1B2A47);box-shadow:0 -1px 0 rgba(255,255,255,.12)}
.dc-grade{position:absolute;inset:0;pointer-events:none;background-color:#F59E0B;opacity:.12}
.dc-src{position:absolute;right:2.2%;top:4%;z-index:3;padding:.18em .5em;border-radius:6px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(237,243,255,.85);background:rgba(8,17,31,.6);border:1px solid rgba(148,178,255,.22)}
.dc-crop{position:absolute;top:0;left:9.18%;z-index:2;height:100%;aspect-ratio:9/16;box-shadow:0 0 0 999px rgba(3,8,18,.58);outline:1px solid rgba(127,212,255,.65);outline-offset:-1px}
.dc-c{position:absolute;width:14%;aspect-ratio:1;border:2px solid #7FD4FF}
.dc-c.tl{left:6%;top:4%;border-right:0;border-bottom:0;border-top-left-radius:4px}
.dc-c.tr{right:6%;top:4%;border-left:0;border-bottom:0;border-top-right-radius:4px}
.dc-c.bl{left:6%;bottom:4%;border-right:0;border-top:0;border-bottom-left-radius:4px}
.dc-c.br{right:6%;bottom:4%;border-left:0;border-top:0;border-bottom-right-radius:4px}
.dc-face{position:absolute;left:33%;top:35.5%;width:34%;aspect-ratio:1;border:1.5px solid #34D399;border-radius:6px;box-shadow:0 0 12px rgba(52,211,153,.45)}
.dc-ratio{position:absolute;left:50%;top:0;transform:translateX(-50%);padding:.12em .5em .18em;border-radius:0 0 6px 6px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:#08111F;background:#7FD4FF}
.dc-cap{position:absolute;left:5%;right:5%;bottom:17%;margin:0;text-align:center;color:#fff;font-weight:800;line-height:1.12;letter-spacing:.01em;
  text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 10px rgba(0,0,0,.45);font-size:12px;font-size:clamp(10.5px,3cqw,16px)}
.dc-cap.c2{opacity:0}
.dc-cap span{display:inline-block;transform-origin:50% 100%}
.dc-status{position:relative;display:flex;align-items:center;min-height:18px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.dc-status b{font-weight:500;color:var(--faint-d)}
.dc-status .st{position:absolute;right:0;top:50%;display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;color:#6EE7B7;transform:translateY(-50%)}
.dc-status .st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.dc-status .st1{opacity:0;color:#FCD34D}
.dc-track{display:flex;gap:3px;height:30px}
.seg{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;border-radius:6px;white-space:nowrap;font-size:11.5px;font-weight:600;color:#fff}
.seg.sp{flex:var(--f) 1 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 5px),linear-gradient(180deg,#3B82F6,#2563EB);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.seg.gap{flex:0 1 0;opacity:0;border:1px dashed rgba(148,178,255,.4);background:repeating-linear-gradient(135deg,rgba(148,178,255,.26) 0 3px,transparent 3px 6px)}
.seg.um{border-color:rgba(251,191,36,.55);background:rgba(251,191,36,.12);color:#FCD34D;font-family:var(--mono);font-size:11px;font-weight:500}
.dc-looks{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.75rem}
.dc-looks b{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;color:var(--faint-d)}
.dc-sw{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));height:16px}
.dc-sw i{margin:0 1.5px;border-radius:4px;background:linear-gradient(135deg,var(--a) 0%,var(--a) 45%,#1E293B 150%)}
.dc-sw i:nth-child(1){--a:#F59E0B}.dc-sw i:nth-child(2){--a:#14B8A6}.dc-sw i:nth-child(3){--a:#F43F5E}.dc-sw i:nth-child(4){--a:#EAB308}
.dc-sw i:nth-child(5){--a:#06B6D4}.dc-sw i:nth-child(6){--a:#8B5CF6}.dc-sw i:nth-child(7){--a:#94A3B8}.dc-sw i:nth-child(8){--a:#22C55E}
.dc-sw i:nth-child(9){--a:#F97316}.dc-sw i:nth-child(10){--a:#3B82F6}.dc-sw i:nth-child(11){--a:#D946EF}.dc-sw i:nth-child(12){--a:#B7791F}
.dc-sw em{position:absolute;left:0;top:-3px;bottom:-3px;width:calc(100% / 12);border-radius:6px;border:2px solid #fff;box-shadow:0 0 10px rgba(255,255,255,.55)}
@container (max-width:420px){.dc-status b{display:none}.dc-status .st{letter-spacing:.03em}}

/* capability tiles under the two screens */
.sbento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem;margin-top:clamp(1.4rem,3vw,2.2rem)}
.sb-tile{grid-column:span 2;display:flex;flex-direction:column;min-width:0;padding:1.35rem 1.4rem 1.4rem}
.sb-tile.w4{grid-column:span 4}
@media (max-width:980px){.sbento{grid-template-columns:repeat(2,minmax(0,1fr))}.sb-tile{grid-column:auto}.sb-tile.w4{grid-column:1/-1}}
@media (max-width:620px){.sbento{grid-template-columns:minmax(0,1fr)}.sb-tile.w4{grid-column:auto}}
.sb-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:1rem}
.sb-head .ico{margin:0}
.eng-tag{padding:.28rem .6rem;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;border:1px solid #BFD3FB;color:var(--aura);background:var(--aura-wash)}
.eng-tag.dc{border-color:#C7C9F8;color:var(--indigo);background:#F0F1FF}
.sb-pills{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.sb-pills li{padding:.36rem .75rem;border-radius:999px;border:1px solid #D6E2F7;background:linear-gradient(180deg,#FFFFFF,#F3F7FE);font-size:13.5px;font-weight:540;color:var(--text-2)}
.sb-pills li.more{border-style:dashed;color:var(--aura);background:#fff}
.card .sb-brief{display:flex;align-items:center;gap:2px;margin:1.1rem 0 0;padding:.6rem .8rem;border-radius:10px;border:1px solid var(--line);background:var(--paper);font-family:var(--mono);font-size:13px;color:var(--text)}
.sb-brief i{width:2px;height:1.15em;margin-left:1px;background:var(--aura)}
.sb-shapes{display:flex;align-items:flex-end;gap:1rem;margin-top:1.1rem}
.ar{display:grid;justify-items:center;gap:.4rem;font-family:var(--mono);font-size:12px;color:var(--muted)}
.ar i{display:block;border-radius:6px;border:1.5px solid var(--aura);background:linear-gradient(160deg,var(--aura-wash),#fff)}
.ar916 i{width:30px;height:53px}
.ar11 i{width:44px;height:44px}
.ar169 i{width:72px;height:41px}
.sb-glass{position:relative;height:64px;margin-top:1.1rem;border-radius:14px;overflow:hidden;
  background:radial-gradient(120px 60px at 25% 30%,rgba(56,189,248,.55),transparent 70%),radial-gradient(140px 70px at 80% 70%,rgba(79,70,229,.5),transparent 70%),#0F2342}
.sb-glass span{position:absolute;inset:12px 18%;overflow:hidden;border-radius:10px;border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(160deg,rgba(255,255,255,.3),rgba(255,255,255,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 24px -10px rgba(0,0,0,.6)}
.sb-glass span::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-140%) skewX(-18deg)}
.sb-caps{display:grid;justify-items:center;gap:.35rem;margin-top:1.1rem;padding:.75rem .8rem;border-radius:14px;background:linear-gradient(135deg,#1B2E52,#0F2342)}
.cs{font-size:13px;line-height:1.25;color:#fff}
.cs1{font-weight:800;letter-spacing:.02em;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.cs1 em{font-style:normal;padding:0 .28em;border-radius:4px;color:#0F2342;background:#FDE68A;text-shadow:none}
.cs2{font-weight:500;letter-spacing:.01em;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.cs3{font-weight:800;letter-spacing:.1em;color:#7FD4FF}

/* four languages; the Arabic-script names fall back to fonts that carry them */
.langs{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:1.4rem 2.2rem;align-items:center;margin-top:clamp(1.4rem,3vw,2.2rem);padding:clamp(1.3rem,2.6vw,2rem);
  border-radius:24px;border:1px solid var(--line);background:linear-gradient(135deg,#FFFFFF,#F3F7FE);box-shadow:var(--shadow)}
@media (max-width:960px){.langs{grid-template-columns:minmax(0,1fr)}}
.langs-copy .eyebrow{margin-bottom:.6rem}
.langs-copy h3{margin:0 0 .55rem;font-size:1.3rem;line-height:1.25}
.langs-copy p{margin:0;color:var(--muted);font-size:15px}
.lang-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
@media (max-width:640px){.lang-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lg{position:relative;display:grid;justify-items:center;align-content:start;gap:.2rem;min-width:0;padding:1rem .8rem 1.05rem;border-radius:16px;overflow:hidden;text-align:center;background:#fff;border:1px solid var(--line-soft);box-shadow:var(--shadow-xs)}
.lg-name{font-size:clamp(1.45rem,2.3vw,1.85rem);line-height:1.3;font-weight:650;letter-spacing:-.02em;color:var(--text)}
.lg.rtl .lg-name{font-family:"Segoe UI","Noto Naskh Arabic","Noto Sans Arabic","Geeza Pro",Tahoma,system-ui,sans-serif;font-weight:600;letter-spacing:0}
.lg-en{font-size:13.5px;font-weight:600;color:var(--text-2)}
.lg-dir{font-size:12px;line-height:1.4;color:var(--faint)}
.lg-line{position:absolute;left:16px;right:16px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--grad-aura);transform-origin:0 50%}
.lg.rtl .lg-line{transform-origin:100% 50%}
.studio-foot{display:grid;justify-items:center;gap:1.1rem;margin-top:1.8rem;text-align:center}
.studio-fine{margin:0;max-width:78ch;font-size:13.5px;color:var(--muted)}
.studio-foot .btn-row{justify-content:center}

@media (prefers-reduced-motion:no-preference){
  .mg-key{animation:mgKey 14s ease-in-out infinite}
  .mg-dust i{animation:mgDust var(--t) linear var(--d) infinite}
  .mg-scene{animation:mgScene 12s linear calc(var(--s) * 2.4s) infinite both}
  .mg-w{animation:mgRise 12s cubic-bezier(.16,1,.3,1) calc(.12s + var(--w) * .12s) infinite both}
  .mg-sweep{animation:mgSweep 12s ease-in-out .55s infinite both}
  .mg-prob span{animation:mgIn 12s cubic-bezier(.16,1,.3,1) 2.45s infinite both}
  .mg-prob i{animation:mgStrike 12s cubic-bezier(.65,0,.35,1) 2.4s infinite both}
  .mg-ui{animation:mgTilt 12s cubic-bezier(.16,1,.3,1) 4.8s infinite both}
  .mg-bars i{animation:mgBar 12s cubic-bezier(.16,1,.3,1) calc(4.95s + var(--b) * .05s) infinite both}
  .mg-ui-shine{animation:mgShine 12s ease-in-out 4.8s infinite both}
  .mg-card{animation:mgFlip 12s cubic-bezier(.16,1,.3,1) calc(7.25s + var(--c) * .14s) infinite both}
  .mg-flare{animation:mgFlare 12s ease-out 9.6s infinite both}
  .mg-logo{animation:mgPop 12s cubic-bezier(.34,1.56,.64,1) 9.7s infinite both}
  .mg-btn{animation:mgIn 12s cubic-bezier(.16,1,.3,1) 9.95s infinite both}
  .mg-btn::after{animation:mgRing 12s ease-out 9.95s infinite both}
  .mg-strip li{animation:mgOn 12s linear calc(var(--s) * 2.4s - 12s) infinite}
  .mg-run i{animation:mgRun 12s linear infinite}
  .dc-crop{animation:dcPan 10s cubic-bezier(.65,0,.35,1) infinite;will-change:transform}
  .p1 .talk{animation:dcTalkA 10s linear infinite both}
  .p2 .talk{animation:dcTalkB 10s linear infinite both}
  .talk i{animation:dcBar .5s ease-in-out infinite alternate}
  .talk i:nth-child(2){animation-delay:-.2s}
  .talk i:nth-child(3){animation-delay:-.35s}
  .dc-cap.c1{animation:dcCapA 10s cubic-bezier(.16,1,.3,1) infinite both}
  .dc-cap.c2{animation:dcCapB 10s cubic-bezier(.16,1,.3,1) infinite both}
  .dc-cap.c1 span{animation:dcWord 10s linear calc(.8s + var(--k) * .9s - 10s) infinite}
  .dc-cap.c2 span{animation:dcWord 10s linear calc(6s + var(--k) * .85s - 10s) infinite}
  .dc-track{animation:dcTrack 10s linear infinite both}
  .seg.gap{animation:dcGap 10s cubic-bezier(.65,0,.35,1) infinite both}
  .seg.sp{animation:dcLabel 10s linear infinite both}
  .dc-status .st1{animation:dcSt1 10s linear infinite both}
  .dc-status .st2{animation:dcSt2 10s linear infinite both}
  .dc-sw em{animation:dcRing 24s steps(12,end) infinite}
  .dc-grade{animation:dcTint 24s steps(1,end) infinite}
  .sb-brief i{animation:sbCaret 1.1s steps(1,end) infinite}
  .sb-glass span::after{animation:sbSweep 4.6s ease-in-out infinite}
  .cs{animation:sbPick 6s ease-in-out infinite}
  .cs2{animation-delay:-4s}
  .cs3{animation-delay:-2s}
  .lg-line{animation:lgDraw 8s cubic-bezier(.65,0,.35,1) infinite both}
  .lg:nth-child(2) .lg-line{animation-delay:-6s}
  .lg:nth-child(3) .lg-line{animation-delay:-4s}
  .lg:nth-child(4) .lg-line{animation-delay:-2s}
}
@media (prefers-reduced-motion:reduce){.dc-cap span:last-child{color:#FDE68A}}
@keyframes mgKey{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(10%,6%) scale(1.12)}}
@keyframes mgDust{0%{transform:translate(0,10px);opacity:0}20%{opacity:.85}100%{transform:translate(12px,-52px);opacity:0}}
@keyframes mgScene{0%{opacity:0;transform:scale(1.035)}2.5%,18.5%{opacity:1;transform:scale(1)}21%,100%{opacity:0;transform:scale(.985)}}
@keyframes mgRise{0%{transform:translateY(108%) rotate(5deg)}5.5%,100%{transform:translateY(0) rotate(0deg)}}
@keyframes mgSweep{0%,7%{transform:translateX(-150%) skewX(-18deg);opacity:0}8%{opacity:1}15%,100%{transform:translateX(560%) skewX(-18deg);opacity:0}}
@keyframes mgIn{0%{opacity:0;transform:translateY(14px)}5%,100%{opacity:1;transform:translateY(0)}}
@keyframes mgStrike{0%,6%{transform:scaleX(0)}11%,100%{transform:scaleX(1)}}
@keyframes mgTilt{0%{opacity:0;transform:perspective(700px) translateY(22%) rotateX(36deg) scale(.9)}7%,100%{opacity:1;transform:perspective(700px) translateY(0) rotateX(9deg) scale(1)}}
@keyframes mgBar{0%,3%{transform:scaleY(.08)}10%,100%{transform:scaleY(1)}}
@keyframes mgShine{0%,8%{transform:translateX(-100%)}16%,100%{transform:translateX(100%)}}
@keyframes mgFlip{0%{opacity:0;transform:perspective(500px) rotateX(78deg) translateY(10%)}6.5%,100%{opacity:1;transform:perspective(500px) rotateX(0deg) translateY(0)}}
@keyframes mgFlare{0%{opacity:0;transform:scaleX(.05)}4%{opacity:1;transform:scaleX(1)}13%,100%{opacity:0;transform:scaleX(1.3)}}
@keyframes mgPop{0%{opacity:0;transform:scale(.3) rotate(-30deg)}5%{opacity:1;transform:scale(1.1) rotate(4deg)}8%,100%{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes mgRing{0%,8%{opacity:0;transform:scale(1)}9%{opacity:.85;transform:scale(1)}16%,100%{opacity:0;transform:scale(1.25,1.8)}}
@keyframes mgOn{0%,19%{border-color:rgba(147,197,253,.6);background-color:rgba(59,130,246,.16);color:#fff}20.5%,100%{border-color:rgba(148,178,255,.14);background-color:rgba(255,255,255,.03);color:var(--muted-d)}}
@keyframes mgRun{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@keyframes dcPan{0%,44%{transform:translateX(0)}54%,92%{transform:translateX(148.55%)}100%{transform:translateX(0)}}
@keyframes dcTalkA{0%,3%{opacity:0}6%,40%{opacity:1}44%,100%{opacity:0}}
@keyframes dcTalkB{0%,52%{opacity:0}56%,88%{opacity:1}92%,100%{opacity:0}}
@keyframes dcBar{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
@keyframes dcCapA{0%,4%{opacity:0;transform:translateY(5px)}7%,40%{opacity:1;transform:translateY(0)}43%,100%{opacity:0;transform:translateY(0)}}
@keyframes dcCapB{0%,56%{opacity:0;transform:translateY(5px)}59%,89%{opacity:1;transform:translateY(0)}92%,100%{opacity:0;transform:translateY(0)}}
@keyframes dcWord{0%,7%{color:#FDE68A;transform:scale(1.1)}9%,100%{color:#fff;transform:scale(1)}}
@keyframes dcTrack{0%{opacity:0}3%,93%{opacity:1}96%,100%{opacity:0}}
@keyframes dcGap{0%,22%{flex-grow:.8;opacity:1}34%,96%{flex-grow:0;opacity:0}98%,100%{flex-grow:.8;opacity:1}}
@keyframes dcLabel{0%,34%{color:rgba(255,255,255,0)}40%,92%{color:#fff}96%,100%{color:rgba(255,255,255,0)}}
@keyframes dcSt1{0%,24%{opacity:0}28%,54%{opacity:1}58%,100%{opacity:0}}
@keyframes dcSt2{0%,58%{opacity:0}62%,92%{opacity:1}95%,100%{opacity:0}}
@keyframes dcRing{from{transform:translateX(0)}to{transform:translateX(1200%)}}
@keyframes dcTint{0%{background-color:#F59E0B}8.333%{background-color:#14B8A6}16.667%{background-color:#F43F5E}25%{background-color:#EAB308}33.333%{background-color:#06B6D4}41.667%{background-color:#8B5CF6}
  50%{background-color:#94A3B8}58.333%{background-color:#22C55E}66.667%{background-color:#F97316}75%{background-color:#3B82F6}83.333%{background-color:#D946EF}91.667%,100%{background-color:#B7791F}}
@keyframes sbCaret{0%{opacity:1}50%,100%{opacity:0}}
@keyframes sbSweep{0%,40%{transform:translateX(-140%) skewX(-18deg)}75%,100%{transform:translateX(420%) skewX(-18deg)}}
@keyframes sbPick{0%,28%{opacity:1;transform:scale(1.05)}36%,100%{opacity:.42;transform:scale(1)}}
@keyframes lgDraw{0%{transform:scaleX(0);opacity:1}30%,82%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* ── 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}
/* discount code box (site.js discountBox) */
.disc{display:grid;gap:.35rem}
.disc .disc-open{justify-self:start;min-height:32px;font-size:13px}
.disc-row{display:grid;grid-template-columns:1fr auto;gap:.5rem}
.disc-row .disc-input{text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono);font-size:14.5px}
.disc-row .disc-apply{min-height:48px;height:auto;align-self:stretch;padding:.6rem 1rem;width:auto;color:var(--text);background:var(--paper);border:1px solid var(--line)}
.disc-row .disc-apply:disabled{opacity:.6}
.disc-note{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.disc-note:empty{display:none}
.disc-note.ok{color:var(--mint-deep)}
.disc-note.err{color:#B91C1C}
.buy .disc .btn{width:auto}