/* ==========================================================================
   AdMinds AI — Design system + motion system  (v2, "editorial / pastel grid")
   ==========================================================================

   REQUIRED IN EVERY PAGE <head> (fonts + progressive-enhancement flag):
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..700;1,9..144,400..700&family=Inter:wght@400..700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="styles.css">
     <script>document.documentElement.classList.add('js');setTimeout(function(){if(!window.ADM_READY)document.documentElement.classList.remove('js')},2500)</script>
   Body:  <body data-page="home|services|agents|pricing|partners|audit|contact|privacy">
          <header id="site-header"></header> <main>…</main> <footer id="site-footer"></footer>
          <script src="main.js"></script>
   Hidden "before animation" states only apply under html.js, so content is never lost if JS fails.
   The footer (injected) already contains the final dark CTA — pages do NOT need their own last CTA.

   --------------------------------------------------------------------------
   TOKENS (see :root)
     Surfaces  --bg #f3f2ee · --bg-2 (sunk) · --paper · --white
     Ink       --ink (navy #0d1040) · --ink-2 (body) · --ink-3 (muted) · --line · --line-2
     Brand     --brand #3b5bfd · --brand-600 · --brand-300 (on dark) · --brand-50
     Accent    --coral #ff5a36 (badges/highlights only) · --good · --warn · --bad
     Pastels   --mint --peach --sky --pink --butter --lilac --aqua
               each with  --X-grid (grid-line tint) and --X-deep (readable accent text)
     Type      --f-serif (Fraunces) · --f-sans (Inter) · --f-mono (JetBrains Mono)
               --fs-display --fs-h1 --fs-h2 --fs-h3 --fs-h4 --fs-lede --fs-body --fs-sm --fs-xs --fs-mono
     Space     --s-1..--s-10 (4 → 128px) · --section (vertical section padding)
     Radius    --r-0 0 · --r-1 2px · --r-2 4px · --r-3 10px · --r-pill
     Shadow    --sh-1 · --sh-2 · --sh-3
     Motion    --ease cubic-bezier(.2,.7,.2,1) · --ease-out · --ease-spring · --t-1 200ms · --t-2 400ms · --t-3 700ms

   TONES — any element can take a pastel tone; components read --tone / --tone-grid / --tone-deep:
     class="tone-mint" (or -peach -sky -pink -butter -lilac -aqua -ink)   or  data-tone="mint"

   --------------------------------------------------------------------------
   LAYOUT
     .wrap (1240px) · .wrap--narrow (820) · .wrap--wide (1400)
     <section class="section">  modifiers: .section--tight · .section--sunk (darker bg) · .section--paper · .section--ink (dark navy + grid)
     .sec-head  (section heading block)  .sec-head--center
         <div class="sec-head sec-head--center"><span class="eyebrow">[ The Closed Loop ]</span><h2 class="h2">…</h2><p class="lede">…</p></div>
     .split (2 cols, stacks on mobile) · .split--wide-left · .split--wide-right · .grid-2 / .grid-3 / .grid-4 · .stack (vertical gap)

   TYPE
     .display (hero headline) · .h1 .h2 .h3 .h4 (serif) · .lede (large sans) · .muted · .small · .mono
     <em> inside a serif headline = italic serif; .hl = highlighter underline; .ink-brand = brand-coloured text
     .eyebrow  mono micro-label chip, default butter; tone it: <span class="eyebrow tone-mint">[ Industries ]</span>
     .source   small sources line with links

   COMPONENTS
     Buttons     <a class="btn btn--primary" href="…">Get a free AI audit <svg class="arw">…</svg></a>
                 .btn--primary (indigo) · .btn--outline (navy outline) · .btn--ghost · .btn--light (on dark) · .btn--coral
                 .btn--sm · .btn--lg · .btn--block.  Add class "arw" to an inline arrow svg (or use <i class="arw"></i> — CSS arrow) → nudges on hover.
     Announce    <a class="announce" href="…"><b>NEW</b> Urdu & Arabic WhatsApp agents <i class="arw"></i></a>
     Hero        .hero (centered) > .hero__inner > .announce + h1.display[data-split] + p.lede + .btn-row ; .hero__stage for visuals
                 .hero--split (2-col text + visual)
     Page hero   <section class="page-hero tone-sky"> <div class="wrap page-hero__inner"> eyebrow + h1.h1 + .lede + .btn-row </div>
                   <div class="page-hero__pixels" data-pixels="…" aria-hidden="true"></div> </section>   (.page-hero--split for 2-col)
     Block       pastel graph-paper card:  <a class="block block--mint" data-tilt> <h3 class="block__title">Agents</h3>
                   <div class="block__art"></div> <p class="block__foot">… <i class="arw"></i></p></a>
                 tones: .block--mint --peach --sky --pink --butter --lilac --aqua --ink ; .block--flat (no grid texture) ; .block--pad-lg
     Grid tex    .gridtex (adds graph-paper texture in current tone) · .gridtex--fine (12px) · .gridtex--lg (48px)
     Bento       <div class="bento"> <div class="bento__tile block block--mint span-4">…</div> … </div>
                 spans: .span-3 .span-4 .span-5 .span-6 .span-7 .span-8 .span-12 · .row-2 (double height)
     Stat        <div class="stat"><div class="stat__num" data-count="42" data-suffix="h">42h</div><p class="stat__label">…</p></div>
     Tabs        <div class="tabs" data-tabs>
                   <div class="tabs__list" role="tablist"><button role="tab" class="tabs__tab" data-tone="sky" aria-selected="true">Dental</button>…</div>
                   <div class="tabs__panel" role="tabpanel">…</div> …   (panel order = tab order; JS wires ids/aria/hidden + sliding indicator)
     Accordion+visual
                 <div class="accv" data-accordion>
                   <div class="accv__list">
                     <div class="accv__item"><button class="accv__head"><span class="accv__num">01</span>Title</button>
                       <div class="accv__body"><div class="accv__inner"><p>…</p></div></div></div> …
                   </div>
                   <div class="accv__visual tone-peach"><div class="accv__pane">…visual 1…</div><div class="accv__pane">…</div></div>
                 </div>   (pane order = item order; add data-autoplay="6500" to auto-advance while visible)
     Feature row <div class="frow"> <div class="frow__text">…</div> <div class="frow__media">…</div> </div>   .frow--flip swaps sides
     Mockups     .mock (window frame) > .mock__bar (title bar with dots + .mock__title) + .mock__body ; tone it with .tone-X
                 .chat (static chat) > .bubble.bot / .bubble.me / .bubble.sys ; dir="rtl" on RTL bubbles
                 .dash (dashboard rows) > .dash__row > .bar > i[style="--v:72%"] ; .kpi
                 .scorecard > .ring[style="--p:62"] > span ; .checkrow (.dot.good|warn|bad)
                 .illus  tiny "Illustrative" mono label: <span class="illus">Illustrative</span>
     Live agent  .phone[data-agent="dental"] (exact markup in index.html — contract with main.js)
     Cursor tag  <span class="ctag ctag--mint" data-drift="1" style="--x:-420px;--y:80px">New lead · Instagram</span>
                 (absolutely positioned relative to the nearest positioned parent; --x is offset from horizontal centre, --y from top.
                  Use class .ctag--static to keep it in normal flow.) tones: --mint --peach --sky --pink --butter --lilac --aqua --coral --ink
                 .ctag--hide-sm hides it under 760px.
     Pixels      <div class="pixels" data-pixels="..pp..|.pppp.|mmppss" style="--cell:40px" aria-hidden="true"></div>
                 letters: m mint · p pink · s sky · b butter · l lilac · a aqua · k peach · c coral (solid) · i indigo (solid) · n navy (solid) · . empty
                 Rows separated by | or whitespace. Cells assemble cell-by-cell from the bottom-centre when visible.
     Marquee     <div class="marquee" data-marquee><div class="marquee__track"><span>Meta</span><span>Instagram</span>…</div></div>
     Loop story  pinned scroll story — see the "[ The Closed Loop ]" section in index.html: [data-loop-story] with [data-step] list items and
                 [data-step-pane] visuals; .loop__track > .loop__dot travels with scroll. Pinned only ≥ 960px and without reduced motion.
     Pricing     .price-grid > .price-card (.price-card--featured) > .price-card__tag + h3 + .price + .price-note + ul.ticks + .btn
     Prices      every visible price is <… data-price="agent|agentSetup|growth|scale|voice|channel|reactivation|landing|partnerAgent|
                 partnerBuild|adCap|code" data-tpl="{}<small>/mo</small>">$299<small>/mo</small></…> — main.js fills it from
                 window.ADM_PRICES (top of main.js) for the visitor's market; markup keeps USD. Sample figures: data-ex="1500",
                 data-ex-sum="60+299", data-ex-margin="399". Ad budgets: <option data-budget="0-3">.
     Region      .region[data-region] > .region__label + .region__pick (.region__flag[data-region-flag] .region__name[data-region-name]
                 .region__cur[data-region-cur] .region__chev select.region__select[data-region-select]) + .region__note[data-region-note]
     Compare     <div class="compare-wrap"><table class="compare">… <td class="yes">✓</td> <td class="no">—</td></table></div>
     FAQ         <div class="faq"><details><summary>Question</summary><div class="faq__a"><p>…</p></div></details></div>
     CTA band    <div class="cta-band"><span class="eyebrow">…</span><h2 class="h2">…</h2><p>…</p><div class="btn-row">…</div></div>  (dark navy, grid)
     Forms       <form class="form"> .form__row (2-col) > label > input|select|textarea ; .form-status(.ok|.bad) ; .hp (honeypot)
     Audit       [data-audit] (or data-audit="handoff") > form.audit-form > input + button ; .audit-status ; .audit-result
     Lead forms  main.js leadForm() → form.form.lead-mini (.lead-mini__head / __fields / __done) ; --compact inside the phone
                 (.agent-cta), .audit-capture in the audit report, .audit-fallback, .partner-deck ; .wa-fab (config-driven)
     Consent     .cookie (main.js-built banner: .cookie__card.block.block--lilac > .cookie__title / .cookie__prefs > .cookie__opt (switch) /
                 .cookie__btns: Accept / Reject / Preferences, equal size) ; .footer__link ("Cookie settings" button) ; body.ck-open sets --ck-h on phones
     Calculator  [data-calc] > .calc__in (range inputs leads/value/close + select speed) + .calc__out ([data-out=…])
     Steps       <ol class="steps"><li><span class="steps__n">01</span><h3>…</h3><p>…</p></li></ol>
     Ticks list  <ul class="ticks"><li>…</li></ul>
     Pills       <span class="pill">Roman Urdu</span>  (.pill--good .pill--brand .tone-X)
     Logo row    <div class="wordmarks"><span>Meta</span>…</div>  (plain text wordmarks; no trademark logos)
     FAQ heading <div class="sec-head faq-head"> in a .split FAQ — sticky on desktop only (never inline position:sticky)
     CTA (pastel) .cta-band.cta-band--tone — butter version for pages where the navy footer CTA follows
     Compare fit .compare-wrap--fit when the table fits a phone (header then sticks to the page)
     Cursor tags --x/--y desktop, --xs/--ys phone (<=760), optional --xm for 761–1400 (tags are clamped inside
                 their stage there). .ctag--hide-sm hides <=760, .ctag--hide-md hides 761–1100. Keep phone tags
                 short and right-of-centre tags at --xs <= 0px so their drift never touches the edge.
     Bar label   .dash__row reads --label-w (default 92px) for its label column
     Loops       .ag-art or [data-loop] containers get .is-off while off-screen (their animations pause)

   ANIMATIONS (declarative — no JS needed by page builders)
     data-reveal="up|down|left|right|fade|scale|wipe|wipe-up|pop"  reveal when scrolled into view (once)
     data-delay="150"           ms delay for that element
     data-stagger="80"          on a parent: its direct children animate one after another (default reveal "up";
                                set data-stagger-reveal="scale" etc. to change). Children may set their own data-reveal.
     data-split                 on a headline: words rise in one by one (keeps inner <em>/<span> markup)
     data-count="42"            count up from 0 when visible. Optional data-prefix="~" data-suffix="%" data-decimals="1" data-from="0"
                                Element text must already contain the final value (shown when JS/motion is off).
     data-anim                  on a mockup: replays inner micro-animations (bars fill, rings fill, bubbles pop, ticks) when visible
     data-chat-script           on a .chat: bubbles appear one by one with typing dots before each bot message (replays on tab change)
     data-parallax="0.12"       scroll parallax (desktop only). data-depth="18" mouse parallax in px (desktop only).
                                Don't combine with data-reveal or data-tilt on the same element — wrap instead.
     data-tilt                  subtle 3D tilt + lift on hover (desktop, fine pointer)
     data-drift="1|2|3"         gentle looping float (cursor tags or any decoration)
     data-try="dental"          button: sets the live agent's industry, scrolls to it and focuses the input
     data-scroll-to="#id"       smooth-scrolls to target
     Reduced motion: every animation is disabled and every hidden state is shown (see bottom of file).
   ========================================================================== */

@property --ringv { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  /* surfaces + ink */
  --bg: #f3f2ee;
  --bg-2: #ebe9e2;
  --paper: #fbfaf7;
  --white: #ffffff;
  --ink: #0d1040;
  --ink-2: #262a5c;
  --ink-3: #565a80;
  --line: #dad8d0;
  --line-2: #c4c1b6;
  --ink-a10: rgba(13, 16, 64, .1);
  --ink-a06: rgba(13, 16, 64, .06);

  /* brand */
  --brand: #3b5bfd;
  --brand-600: #2b46e3;
  --brand-300: #8197ff;
  --brand-50: #e8ecff;
  --coral: #ff5a36;
  --coral-50: #ffe4dc;
  --good: #1d8f4e;  --good-text: #17703d; /* AA-safe for small status text; --good stays for dots/fills */
  --warn: #c98200;
  --bad: #e2412b;  --bad-text: #b02e14; /* AA-safe for small status text */

  /* pastels: base / grid line / deep text */
  --mint: #e3fbd6;   --mint-grid: #c2eaab;   --mint-deep: #2f7a1b;
  --peach: #ffe1d9;  --peach-grid: #ffc3b2;  --peach-deep: #b02e14;
  --sky: #d6ecff;    --sky-grid: #a9d1f8;    --sky-deep: #1a60c4;
  --pink: #ffd6ef;   --pink-grid: #ffaedb;   --pink-deep: #b02a79;
  --butter: #fff6b8; --butter-grid: #ece07f; --butter-deep: #7c6300;
  --lilac: #e6e3ff;  --lilac-grid: #c6c0ff;  --lilac-deep: #5143d6;
  --aqua: #d3f4ee;   --aqua-grid: #a0e0d3;   --aqua-deep: #0f7363;

  /* default tone */
  --tone: var(--white);
  --tone-grid: var(--line);
  --tone-deep: var(--ink);

  /* type */
  --f-serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-arabic: "Geeza Pro", "Noto Naskh Arabic", "Segoe UI", Tahoma, sans-serif;
  --fs-display: clamp(3.05rem, 1.45rem + 6.4vw, 7.25rem);
  --fs-h1: clamp(2.6rem, 1.5rem + 4.4vw, 5.25rem);
  --fs-h2: clamp(2.15rem, 1.35rem + 3.1vw, 4rem);
  --fs-h3: clamp(1.4rem, 1.15rem + .8vw, 1.85rem);
  --fs-h4: 1.2rem;
  --fs-lede: clamp(1.07rem, .98rem + .38vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-sm: .9375rem;
  --fs-xs: .8125rem;
  --fs-mono: .76rem;

  /* space */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: clamp(76px, 9vw, 136px);
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;

  /* radius / shadow */
  --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 10px; --r-pill: 999px;
  --sh-1: 0 1px 0 rgba(13,16,64,.05), 0 2px 8px -2px rgba(13,16,64,.08);
  --sh-2: 0 14px 34px -14px rgba(13,16,64,.28);
  --sh-3: 0 40px 90px -36px rgba(13,16,64,.42), 0 8px 20px -10px rgba(13,16,64,.18);

  /* motion */
  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --t-1: 200ms; --t-2: 400ms; --t-3: 700ms;
}

/* ---------- tones ---------- */
.tone-mint,  [data-tone="mint"]   { --tone: var(--mint);   --tone-grid: var(--mint-grid);   --tone-deep: var(--mint-deep); }
.tone-peach, [data-tone="peach"]  { --tone: var(--peach);  --tone-grid: var(--peach-grid);  --tone-deep: var(--peach-deep); }
.tone-sky,   [data-tone="sky"]    { --tone: var(--sky);    --tone-grid: var(--sky-grid);    --tone-deep: var(--sky-deep); }
.tone-pink,  [data-tone="pink"]   { --tone: var(--pink);   --tone-grid: var(--pink-grid);   --tone-deep: var(--pink-deep); }
.tone-butter,[data-tone="butter"] { --tone: var(--butter); --tone-grid: var(--butter-grid); --tone-deep: var(--butter-deep); }
.tone-lilac, [data-tone="lilac"]  { --tone: var(--lilac);  --tone-grid: var(--lilac-grid);  --tone-deep: var(--lilac-deep); }
.tone-aqua,  [data-tone="aqua"]   { --tone: var(--aqua);   --tone-grid: var(--aqua-grid);   --tone-deep: var(--aqua-deep); }
.tone-ink,   [data-tone="ink"]    { --tone: var(--ink);    --tone-grid: rgba(255,255,255,.08); --tone-deep: #fff; }
.tone-white, [data-tone="white"]  { --tone: var(--white);  --tone-grid: var(--line);        --tone-deep: var(--ink); }

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink-2);
  font: 400 var(--fs-body)/1.6 var(--f-sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-600); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; }
ul, ol { padding: 0; margin: 0; list-style: none; }
::selection { background: var(--butter); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; }
.skip:focus { top: 12px; color: #fff; }

/* ---------- layout ---------- */
.wrap { width: min(1240px, 100% - var(--gutter) * 2); margin-inline: auto; }
.wrap--narrow { width: min(820px, 100% - var(--gutter) * 2); }
.wrap--wide { width: min(1400px, 100% - var(--gutter) * 2); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(40px, 5vw, 72px); }
.section--sunk { background: var(--bg-2); }
.section--paper { background: var(--paper); }
.section--ink { background: var(--ink); color: rgba(255,255,255,.78); }
.section--ink h2, .section--ink h3, .section--ink .h2, .section--ink .h3 { color: #fff; }
.section--ink::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); }
.section--ink > * { position: relative; }
.sec-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .lede { margin-inline: auto; }
.sec-head .eyebrow { margin-bottom: 20px; }
.sec-head .lede { margin-top: 20px; max-width: 620px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.stack > * + * { margin-top: var(--stack, 16px); }
.center { text-align: center; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 32px; } .mt-4 { margin-top: 48px; }
@media (max-width: 960px) {
  .split, .split--wide-left, .split--wide-right { grid-template-columns: minmax(0, 1fr); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- type ---------- */
.display, .h1, .h2, .h3, .h4, .serif {
  font-family: var(--f-serif); font-optical-sizing: auto; color: var(--ink);
  font-weight: 560; letter-spacing: -.035em; line-height: .98; text-wrap: balance;
}
.display { font-size: var(--fs-display); line-height: .93; letter-spacing: -.045em; font-weight: 570; }
.h1 { font-size: var(--fs-h1); line-height: .96; letter-spacing: -.04em; }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1.08; letter-spacing: -.025em; font-weight: 540; }
.h4 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -.015em; font-weight: 560; }
.display em, .h1 em, .h2 em, .h3 em { font-style: italic; font-weight: 480; letter-spacing: -.03em; }
.hl { background: linear-gradient(transparent 62%, var(--butter) 62%, var(--butter) 92%, transparent 92%); padding-inline: .06em; }
.ink-brand { color: var(--brand); }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-2); max-width: 640px; text-wrap: pretty; }
.muted { color: var(--ink-3); }
.small { font-size: var(--fs-sm); }
.mono { font-family: var(--f-mono); font-size: var(--fs-mono); letter-spacing: .02em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font: 500 var(--fs-mono)/1 var(--f-mono); letter-spacing: .04em; color: var(--tone-deep, var(--ink));
  background: var(--tone, var(--butter)); padding: 6px 9px 6px; border-radius: var(--r-1);
  white-space: nowrap;
}
.eyebrow:not([class*="tone-"]):not([data-tone]) { --tone: var(--butter); --tone-deep: var(--ink); }
.section--ink .eyebrow:not([class*="tone-"]) { --tone: rgba(255,255,255,.1); --tone-deep: #fff; }
.source { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 20px; }
.source a { color: inherit; }

/* ---------- buttons ---------- */
.btn {
  --b-bg: var(--ink); --b-fg: #fff; --b-bd: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 22px; border-radius: var(--r-1);
  background: var(--b-bg); color: var(--b-fg); border: 1.5px solid var(--b-bd);
  font: 550 1rem/1 var(--f-sans); letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  overflow: hidden; isolation: isolate; cursor: pointer;
  transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease), border-color var(--t-1) var(--ease), translate var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease);
}
.btn::after { /* shine */
  content: ""; position: absolute; inset: -2px auto -2px 0; width: 60%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-130%) skewX(-18deg);
}
.btn:hover { color: var(--b-fg); translate: 0 -1px; box-shadow: 0 10px 22px -12px var(--b-bd); }
.btn:hover::after { transform: translateX(260%) skewX(-18deg); transition: transform .75s var(--ease); }
.btn:active { translate: 0 1px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn--primary { --b-bg: var(--brand); --b-bd: var(--brand); }
.btn--primary:hover { --b-bg: var(--brand-600); --b-bd: var(--brand-600); }
.btn--outline { --b-bg: transparent; --b-fg: var(--ink); --b-bd: var(--ink); }
.btn--outline:hover { --b-bg: var(--ink); --b-fg: #fff; }
.btn--outline::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); }
.btn--ghost { --b-bg: transparent; --b-fg: var(--ink); --b-bd: transparent; padding-inline: 8px; }
.btn--ghost:hover { --b-fg: var(--brand); box-shadow: none; }
.btn--light { --b-bg: #fff; --b-fg: var(--ink); --b-bd: #fff; }
.btn--light::after { background: linear-gradient(100deg, transparent, rgba(59,91,253,.15), transparent); }
.btn--light-outline { --b-bg: transparent; --b-fg: #fff; --b-bd: rgba(255,255,255,.5); }
.btn--light-outline:hover { --b-bg: #fff; --b-fg: var(--ink); --b-bd: #fff; }
.btn--coral { --b-bg: var(--coral); --b-bd: var(--coral); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.btn--lg { min-height: 58px; padding: 0 28px; font-size: 1.0625rem; }
.btn--block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center .btn-row, .btn-row--center { justify-content: center; }
/* arrow: inline svg.arw or <i class="arw"></i> */
.arw { flex: none; width: 16px; height: 16px; transition: transform var(--t-2) var(--ease-spring); }
i.arw { display: inline-block; position: relative; width: 15px; height: 12px; }
i.arw::before { content: ""; position: absolute; left: 0; right: 1px; top: 50%; height: 1.6px; margin-top: -.8px; background: currentColor; }
i.arw::after { content: ""; position: absolute; right: 1px; top: 50%; width: 7px; height: 7px; border: solid currentColor; border-width: 1.6px 1.6px 0 0; transform: translateY(-50%) rotate(45deg); transform-origin: center; }
a:hover > .arw, button:hover > .arw, .btn:hover .arw, .block:hover .arw, a:hover .arw { transform: translateX(4px); }
.link { font-weight: 550; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; color: var(--tone-deep, var(--brand)); }
.link:hover { text-decoration: underline; }

/* ---------- header / nav (injected by main.js) ---------- */
.nav { position: sticky; top: 0; z-index: 50; height: var(--header-h); background: color-mix(in srgb, var(--bg) 0%, transparent);
  transition: background var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease); }
.nav.scrolled { background: color-mix(in srgb, var(--bg) 97%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav__inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.nav__logo { display: flex; align-items: center; flex: none; }
.nav__logo img { height: 26px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.nav__links a { position: relative; color: var(--ink); text-decoration: none; font-size: .9688rem; font-weight: 500; padding: 8px 12px; border-radius: var(--r-1); }
.nav__links a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--t-2) var(--ease); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav__links a[aria-current="page"] { color: var(--brand); }
.nav__cta { display: flex; align-items: center; gap: 8px; flex: none; }
.nav__cta .btn--ghost { font-size: .9688rem; font-weight: 500; }
.nav__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand); transform-origin: left; transform: scaleX(var(--progress, 0)); pointer-events: none; }
.burger { display: none; width: 44px; height: 44px; margin-left: auto; border: 0; background: transparent; position: relative; border-radius: var(--r-1); }
.burger span { position: absolute; left: 11px; right: 11px; height: 1.8px; background: var(--ink); transition: transform var(--t-2) var(--ease), top var(--t-2) var(--ease); }
.burger span:nth-child(1) { top: 17px; } .burger span:nth-child(2) { top: 25px; }
.nav.open .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav.open .burger span:nth-child(2) { top: 21px; transform: rotate(-45deg); }
.mnav { display: none; }
@media (max-width: 1000px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: block; }
  .mnav { display: flex; flex-direction: column; position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; background: var(--bg);
    padding: 24px var(--gutter) 32px; overflow-y: auto; visibility: hidden; opacity: 0;
    transition: opacity var(--t-2) var(--ease), visibility 0s linear var(--t-2); }
  .mnav::before { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; pointer-events: none; opacity: .7;
    background-image: linear-gradient(var(--pink-grid) 1px, transparent 1px), linear-gradient(90deg, var(--pink-grid) 1px, transparent 1px); background-size: 32px 32px;
    mask-image: linear-gradient(to top, #000, transparent); }
  .nav.open .mnav { visibility: visible; opacity: 1; transition: opacity var(--t-2) var(--ease); }
  .nav.open { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mnav a.mnav__link { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line);
    font: 560 2rem/1.1 var(--f-serif); letter-spacing: -.03em; color: var(--ink); text-decoration: none;
    opacity: 0; translate: 0 14px; transition: opacity var(--t-2) var(--ease), translate var(--t-3) var(--ease-out); transition-delay: calc(var(--i) * 45ms); }
  .mnav a.mnav__link[aria-current="page"] { color: var(--brand); }
  .nav.open .mnav a.mnav__link { opacity: 1; translate: 0 0; }
  .mnav .btn-row { margin-top: 28px; position: relative; }
  .mnav .btn { flex: 1; }
  body.menu-open { overflow: hidden; }
}

/* ---------- announcement chip ---------- */
.announce {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  background: var(--white); color: var(--ink); text-decoration: none; padding: 5px 12px 5px 5px;
  border: 1px solid var(--line); border-radius: var(--r-1); font-size: .875rem; font-weight: 550; line-height: 1.25;
  box-shadow: var(--sh-1); transition: border-color var(--t-1) var(--ease), translate var(--t-2) var(--ease);
}
.announce b { font: 500 .72rem/1 var(--f-mono); letter-spacing: .06em; background: var(--mint); color: var(--mint-deep); padding: 6px 7px; border-radius: var(--r-1); }
.announce .arw { color: var(--brand); }
.announce:hover { color: var(--ink); border-color: var(--ink); translate: 0 -1px; }

/* ---------- hero ---------- */
.hero { position: relative; padding-top: clamp(24px, 4vw, 52px); overflow-x: clip; }
.hero__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero__inner .announce { margin-bottom: clamp(24px, 3.4vw, 40px); }
.hero__inner .display { max-width: 15ch; font-size: clamp(3.05rem, 1.2rem + 5.4vw, 6.25rem); }
.hero__inner .lede { margin: clamp(20px, 2.4vw, 30px) auto 0; max-width: 600px; }
.hero__inner .btn-row { justify-content: center; margin-top: 32px; }
.hero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-top: 22px; font-size: var(--fs-xs); color: var(--ink-3); }
.hero__meta span::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--good); margin-right: 8px; vertical-align: 2px; }
.hero--split .hero__inner { text-align: left; align-items: flex-start; }
.hero--split { padding-bottom: var(--section); }
.hero--split .hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero--split .btn-row { justify-content: flex-start; }
@media (max-width: 960px) { .hero--split .hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* hero stage (home) */
.hero__stage { position: relative; height: 660px; margin-top: -24px; }
@media (min-width: 761px) { .hero { padding-top: 16px; } .hero__inner .announce { margin-bottom: clamp(20px, 2.4vw, 30px); } .hero__inner .btn-row { margin-top: 28px; } }
.hero__px { position: absolute; left: 50%; bottom: 0; width: 1440px; margin-left: -720px; display: flex; justify-content: center; }
.hero__px .pixels { --cell: 48px; }
.hero__phone { position: absolute; left: 0; right: 0; bottom: 34px; margin-inline: auto; width: min(392px, 100%); z-index: 4; }
.hero__note {
  position: absolute; z-index: 3; left: calc(50% - 600px); top: 230px; width: 300px;
  background: var(--white); padding: 18px 20px 20px; border: 1px solid var(--line); box-shadow: var(--sh-2);
}
.hero__note p { margin: 0; font: 540 1.5rem/1.05 var(--f-serif); letter-spacing: -.03em; color: var(--ink); }
.hero__note .i { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--coral); color: #fff; font: 700 .72rem/1 var(--f-sans); margin-right: 8px; vertical-align: 3px; }
.hero__card { position: absolute; z-index: 3; right: calc(50% - 610px); top: 200px; width: 290px; }
@media (max-width: 1240px) { .hero__note { left: 2%; } .hero__card { right: 2%; } }
@media (max-width: 1080px) { .hero__note, .hero__card { display: none; } }
@media (max-width: 760px) {
  .hero__stage { height: 700px; margin-top: 28px; }
  .hero__px .pixels { --cell: 30px; }
  .hero__px { width: 900px; margin-left: -450px; }
  .hero__phone { bottom: 26px; width: min(350px, 100% - 28px); }
}

/* ---------- pixel grid illustrations ---------- */
.pixels { --cell: 40px; display: grid; grid-auto-rows: var(--cell); grid-auto-columns: var(--cell); }
.px { width: var(--cell); height: var(--cell); background: var(--pc, var(--pink)); box-shadow: inset 0 0 0 .5px var(--pl, var(--pink-grid)); position: relative; }
.px::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--pl) 1px, transparent 1px), linear-gradient(90deg, var(--pl) 1px, transparent 1px); background-size: 50% 50%; opacity: .9; }
.px--m { --pc: var(--mint); --pl: var(--mint-grid); }
.px--p { --pc: var(--pink); --pl: #fff2a6; }
.px--s { --pc: var(--sky); --pl: var(--sky-grid); }
.px--b { --pc: var(--butter); --pl: var(--butter-grid); }
.px--l { --pc: var(--lilac); --pl: var(--lilac-grid); }
.px--a { --pc: var(--aqua); --pl: var(--aqua-grid); }
.px--k { --pc: var(--peach); --pl: var(--peach-grid); }
.px--c, .px--i, .px--n { box-shadow: none; }
.px--c { --pc: #ff7a5c; } .px--i { --pc: var(--brand); } .px--n { --pc: var(--ink); }
.px--c::after, .px--i::after, .px--n::after { display: none; }
.js .pixels:not(.in) .px { opacity: 0; }
.pixels.in .px { animation: px-pop .5s var(--ease-spring) calc(var(--pd, 0) * 1ms) backwards; }
@keyframes px-pop { from { opacity: 0; scale: .2; } 60% { opacity: 1; } }
.page-hero__pixels { display: flex; justify-content: center; margin-top: clamp(40px, 6vw, 72px); overflow: hidden; }

/* ---------- block (pastel graph-paper card) ---------- */
.block {
  position: relative; display: flex; flex-direction: column; isolation: isolate; overflow: hidden;
  background: var(--tone); color: var(--ink-2); border: 1px solid var(--tone-grid);
  border-radius: var(--r-1); padding: clamp(18px, 2vw, 26px); text-decoration: none;
  transition: translate var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease), border-color var(--t-2) var(--ease);
}
.block::before { /* graph paper, shifts on hover */
  content: ""; position: absolute; inset: -32px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--tone-grid) 1px, transparent 1px), linear-gradient(90deg, var(--tone-grid) 1px, transparent 1px);
  background-size: var(--cell, 24px) var(--cell, 24px); opacity: .85;
  transition: transform .9s var(--ease);
}
.block:hover::before { transform: translate(6px, 6px); }
a.block:hover, .block[data-tilt]:hover { color: var(--ink-2); box-shadow: var(--sh-2); }
.block--flat::before { display: none; }
.block--mint { --tone: var(--mint); --tone-grid: var(--mint-grid); --tone-deep: var(--mint-deep); }
.block--peach { --tone: var(--peach); --tone-grid: var(--peach-grid); --tone-deep: var(--peach-deep); }
.block--sky { --tone: var(--sky); --tone-grid: var(--sky-grid); --tone-deep: var(--sky-deep); }
.block--pink { --tone: var(--pink); --tone-grid: var(--pink-grid); --tone-deep: var(--pink-deep); }
.block--butter { --tone: var(--butter); --tone-grid: var(--butter-grid); --tone-deep: var(--butter-deep); }
.block--lilac { --tone: var(--lilac); --tone-grid: var(--lilac-grid); --tone-deep: var(--lilac-deep); }
.block--aqua { --tone: var(--aqua); --tone-grid: var(--aqua-grid); --tone-deep: var(--aqua-deep); }
.block--white { --tone: var(--white); --tone-grid: var(--line); --tone-deep: var(--ink); }
.block--ink { --tone: var(--ink); --tone-grid: rgba(255,255,255,.07); --tone-deep: #fff; color: rgba(255,255,255,.78); }
.block--ink h3, .block--ink .h3, .block--ink .block__title { color: #fff; }
.block--pad-lg { padding: clamp(24px, 3.4vw, 44px); }
.block__title { font: 560 var(--fs-h3)/1.04 var(--f-serif); letter-spacing: -.03em; color: var(--ink); margin: 0 0 12px; }
.block__art { flex: 1; min-height: 140px; margin: 8px calc(clamp(18px, 2vw, 26px) * -1); border-block: 1px solid var(--tone-grid); position: relative; }
.block__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 16px 0 0; font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); font-weight: 500; }
.block__foot .arw { color: var(--ink); margin-bottom: 3px; }
.block p:last-child { margin-bottom: 0; }
.gridtex { background-color: var(--tone); background-image: linear-gradient(var(--tone-grid) 1px, transparent 1px), linear-gradient(90deg, var(--tone-grid) 1px, transparent 1px); background-size: var(--cell, 24px) var(--cell, 24px); }
.gridtex--fine { --cell: 12px; } .gridtex--lg { --cell: 48px; }
[data-parallax], [data-depth] { transform: translate3d(var(--mx, 0px), calc(var(--py, 0px) + var(--my, 0px)), 0); will-change: transform; }
[data-tilt] { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--t-2) var(--ease), translate var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease); will-change: transform; }
[data-tilt]:hover { translate: 0 -4px; }

/* ---------- three-up product cards (home) ---------- */
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.trio .block { min-height: 380px; }
@media (max-width: 960px) { .trio { grid-template-columns: 1fr; } .trio .block { min-height: 320px; } }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; grid-auto-flow: dense; }
.bento > * { grid-column: span 4; }
.span-3 { grid-column: span 3 !important; } .span-4 { grid-column: span 4 !important; } .span-5 { grid-column: span 5 !important; }
.span-6 { grid-column: span 6 !important; } .span-7 { grid-column: span 7 !important; } .span-8 { grid-column: span 8 !important; }
.span-12 { grid-column: 1 / -1 !important; }
.row-2 { grid-row: span 2; }
@media (max-width: 960px) {
  .bento > *, .bento > .span-3, .bento > .span-4, .bento > .span-5 { grid-column: span 6 !important; }
  .bento > .span-6, .bento > .span-7, .bento > .span-8 { grid-column: 1 / -1 !important; }
}
@media (max-width: 600px) { .bento > *, .bento > [class*="span-"] { grid-column: 1 / -1 !important; } .row-2 { grid-row: auto; } }

/* ---------- stats / counters ---------- */
.stat { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.stat__num { font: 560 clamp(3rem, 2rem + 3.6vw, 5.5rem)/.9 var(--f-serif); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.stat__label { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; max-width: 30ch; }
.stat__src { margin-top: auto; padding-top: 14px; font: 500 var(--fs-mono)/1.3 var(--f-mono); color: var(--tone-deep); }
.stat__src a { color: inherit; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); }
.stats-row > * { padding: 22px 22px 0 0; }
@media (max-width: 800px) { .stats-row { grid-template-columns: 1fr 1fr; gap: 0 16px; } }

/* ---------- cursor tags ---------- */
.ctag {
  --c: var(--mint); --cd: var(--ink);
  position: absolute; left: calc(50% + var(--x, 0px)); top: var(--y, 0px); z-index: 6;
  display: inline-flex; align-items: center; padding: 7px 11px 7px 10px; margin: 14px 0 0 14px;
  background: var(--c); color: var(--cd); border: 1px solid rgba(13,16,64,.12);
  font: 600 .8125rem/1.1 var(--f-sans); letter-spacing: -.005em; white-space: nowrap; border-radius: var(--r-1);
  box-shadow: 0 6px 16px -8px rgba(13,16,64,.35); pointer-events: none;
}
.ctag::before { /* the arrow cursor */
  content: ""; position: absolute; left: -15px; top: -15px; width: 17px; height: 17px; background: var(--ink);
  clip-path: polygon(0 0, 100% 42%, 52% 54%, 40% 100%); transform-origin: 0 0;
  transition: transform .18s var(--ease);
}
.ctag::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--ink); border-radius: inherit; opacity: 0; }
.ctag.click::before { transform: scale(.78); }
.ctag.click::after { animation: ctag-ring .6s var(--ease) both; }
@keyframes ctag-ring { from { opacity: .7; scale: 1; } to { opacity: 0; scale: 1.25; } }
.ctag--static { position: relative; left: auto; top: auto; }
.ctag--mint { --c: var(--mint); } .ctag--peach { --c: var(--peach); } .ctag--sky { --c: var(--sky); } .ctag--pink { --c: var(--pink); }
.ctag--butter { --c: var(--butter); } .ctag--lilac { --c: var(--lilac); } .ctag--aqua { --c: var(--aqua); }
.ctag--coral { --c: var(--coral); --cd: var(--ink); } .ctag--ink { --c: var(--ink); --cd: #fff; }
.ctag--ink::before { background: var(--coral); } .ctag--coral::before { background: var(--ink); }
.ctag b { font-weight: 700; }
.ctag .dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--good); margin-right: 7px; box-shadow: 0 0 0 3px rgba(29,143,78,.18); }
[data-drift] { animation: drift-1 9s ease-in-out infinite; }
[data-drift="2"] { animation-name: drift-2; animation-duration: 11s; }
[data-drift="3"] { animation-name: drift-3; animation-duration: 13s; }
@keyframes drift-1 { 0%,100% { transform: translate(0,0); } 30% { transform: translate(10px,-12px); } 65% { transform: translate(-8px,6px); } }
@keyframes drift-2 { 0%,100% { transform: translate(0,0); } 40% { transform: translate(-14px,-8px); } 75% { transform: translate(6px,10px); } }
@keyframes drift-3 { 0%,100% { transform: translate(0,0); } 25% { transform: translate(8px,10px); } 60% { transform: translate(14px,-10px); } }
@media (max-width: 760px) { .ctag { left: calc(50% + var(--xs, var(--x, 0px))); top: var(--ys, var(--y, 0px)); } .ctag--static { left: auto; top: auto; } .ctag--hide-sm { display: none; } .ctag { font-size: .75rem; padding: 6px 9px; } }

/* ---------- marquee ---------- */
.marquee { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee__track { display: flex; width: max-content; gap: 0; }
.marquee__track > * { flex: none; padding: 0 clamp(22px, 3vw, 44px); font: 560 clamp(1.4rem, 1rem + 1.3vw, 2.1rem)/1 var(--f-serif); letter-spacing: -.03em; color: var(--ink); opacity: .8; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.marquee__track > *::after { content: ""; width: 8px; height: 8px; background: var(--brand); margin-left: clamp(44px, 6vw, 88px); opacity: .7; }
.marquee__track .sans { font-family: var(--f-sans); font-weight: 650; letter-spacing: -.04em; }
.marquee__track .mono { font-family: var(--f-mono); font-weight: 500; font-size: .8em; letter-spacing: 0; }
.js .marquee.is-ready .marquee__track { animation: marquee var(--marquee-dur, 42s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-head { text-align: center; font: 500 var(--fs-mono)/1 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); margin-bottom: 26px; }

/* ---------- mockups ---------- */
.mock { background: var(--white); border: 1px solid var(--tone-grid, var(--line)); border-radius: var(--r-2); box-shadow: var(--sh-2); overflow: hidden; color: var(--ink); font-size: .875rem; }
.mock__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--tone, var(--paper)); border-bottom: 1px solid var(--tone-grid, var(--line)); font: 500 var(--fs-mono)/1 var(--f-mono); color: var(--ink); }
.mock__bar .dots { display: flex; gap: 5px; } .mock__bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: .18; }
.mock__title { font-weight: 500; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock__bar .illus, .mock__bar .right { margin-left: auto; }
.mock__body { padding: 16px; }
.illus { font: 500 .66rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); opacity: 1; flex: none; }
.kpi { display: flex; flex-direction: column; gap: 4px; }
.kpi b { font: 560 1.9rem/1 var(--f-serif); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi span { font: 500 .66rem/1.2 var(--f-mono); color: var(--ink-3); letter-spacing: .03em; text-transform: uppercase; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpis > * { background: var(--paper); border: 1px solid var(--line); padding: 10px 12px; }
.dash__row { display: grid; grid-template-columns: var(--label-w, 92px) 1fr 44px; gap: 10px; align-items: center; padding: 7px 0; font-size: .8rem; color: var(--ink-2); }
.dash__row + .dash__row { border-top: 1px dashed var(--line); }
.dash__row b { font: 600 .78rem/1 var(--f-mono); text-align: right; color: var(--ink); }
.bar { height: 8px; background: var(--ink-a06); position: relative; overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; width: var(--v, 50%); background: var(--bc, var(--brand)); transform-origin: left; }
.bar--coral > i { --bc: var(--coral); } .bar--good > i { --bc: var(--good); } .bar--ink > i { --bc: var(--ink); }
.vbars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.vbars > i { flex: 1; height: var(--v); background: var(--bc, var(--brand)); transform-origin: bottom; opacity: .9; }
.vbars > i:nth-child(odd) { --bc: var(--brand-300); }
.ring { --size: 92px; --ring-c: var(--coral); width: var(--size); height: var(--size); border-radius: 50%; flex: none; display: grid; place-items: center; position: relative;
  --ringv: var(--p); background: conic-gradient(var(--ring-c) calc(var(--ringv) * 1%), var(--ink-a10) 0); }
.ring::before { content: ""; position: absolute; inset: 9px; background: var(--white); border-radius: 50%; }
.ring > span { position: relative; font: 560 calc(var(--size) * .33)/1 var(--f-serif); letter-spacing: -.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
.scorecard__head { display: flex; gap: 16px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.scorecard__head h4 { font: 560 1.35rem/1.1 var(--f-serif); letter-spacing: -.03em; margin: 0 0 4px; }
.scorecard__head p { margin: 0; font-size: .8rem; color: var(--ink-3); line-height: 1.4; }
.checkrow { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; font-size: .82rem; }
.checkrow + .checkrow { border-top: 1px dashed var(--line); }
.checkrow b { font: 600 .74rem/1 var(--f-mono); color: var(--ink-3); }
.dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem/1 var(--f-sans); color: #fff; flex: none; }
.dot.good { background: var(--good); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); }
/* micro-animations replayed by [data-anim] when it gets .in */
.js [data-anim]:not(.in) .bar > i, .js [data-anim]:not(.in) .vbars > i { opacity: 0; }
[data-anim].in .bar > i { animation: bar-x 1.1s var(--ease-out) calc(var(--i, 0) * 90ms + 200ms) backwards; }
[data-anim].in .vbars > i { animation: bar-y .9s var(--ease-out) calc(var(--i, 0) * 60ms + 200ms) backwards; }
[data-anim].in .ring { animation: ring-fill 1.6s var(--ease-out) .25s backwards; }
[data-anim].in .pop { animation: rv-pop .55s var(--ease-spring) calc(var(--i, 0) * 120ms + 250ms) backwards; }
[data-anim].in .rise { animation: rv-up .6s var(--ease-out) calc(var(--i, 0) * 110ms + 150ms) backwards; }
.js [data-anim]:not(.in) .pop, .js [data-anim]:not(.in) .rise { opacity: 0; }
@keyframes bar-x { from { transform: scaleX(0); } }
@keyframes bar-y { from { transform: scaleY(0); } }
@keyframes ring-fill { from { --ringv: 0; } to { --ringv: var(--p); } }

/* ---------- chat bubbles (live widget + static .chat) ---------- */
.chat { display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; position: relative; }
.bubble.bot { align-self: flex-start; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-top-left-radius: 3px; }
.bubble.me { align-self: flex-end; background: var(--brand); color: #fff; border-top-right-radius: 3px; }
.bubble.sys { align-self: center; max-width: 92%; background: var(--butter); color: var(--ink); border-radius: var(--r-1); font: 500 .72rem/1.45 var(--f-mono); padding: 6px 10px; text-align: center; }
.bubble.ok { align-self: center; background: var(--mint); color: var(--mint-deep); border: 1px solid var(--mint-grid); font: 500 .74rem/1.5 var(--f-mono); border-radius: var(--r-1); text-align: center; }
.bubble.err { align-self: flex-start; background: var(--coral-50); color: var(--peach-deep); border: 1px solid var(--peach-grid); }
.bubble .meta { display: block; margin-top: 4px; font: 500 .66rem/1 var(--f-mono); color: var(--ink-3); }
.bubble.me .meta { color: rgba(255,255,255,.75); }
.bubble[dir="rtl"] { font-family: var(--f-arabic); font-size: .98rem; line-height: 1.6; unicode-bidi: isolate; text-align: right; }
.bubble.typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.bubble.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); animation: typing 1s infinite ease-in-out; }
.bubble.typing i:nth-child(2) { animation-delay: .15s; } .bubble.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.bubble-in { animation: bubble-in .38s var(--ease-spring) backwards; }
@keyframes bubble-in { from { opacity: 0; scale: .9; translate: 0 8px; } }
.bubble.me.bubble-in { transform-origin: right bottom; } .bubble.bot.bubble-in { transform-origin: left bottom; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 .7rem/1 var(--f-mono); color: var(--ink-3); letter-spacing: .03em; padding: 4px 0; }
.chat-head .pill { font-family: var(--f-mono); }
.js [data-chat-script]:not(.is-played) > .bubble { visibility: hidden; }

/* ---------- live agent phone (contract: [data-agent]) ---------- */
.phone {
  position: relative; background: var(--white); border: 1px solid rgba(13,16,64,.14); border-radius: 22px; overflow: hidden;
  box-shadow: var(--sh-3); display: flex; flex-direction: column; text-align: left;
}
.phone-top { padding: 12px 14px 10px; background: var(--ink); color: #fff; }
.phone-id { display: flex; align-items: center; gap: 10px; }
.phone-id strong { display: block; font-size: .95rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; }
.phone-id small { display: flex; align-items: center; gap: 6px; font-size: .74rem; color: rgba(255,255,255,.7); }
.phone-id small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #5ee38f; box-shadow: 0 0 0 3px rgba(94,227,143,.2); }
.avatar { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px 10px 10px 2px; background: var(--brand); color: #fff; font: 700 .8rem/1 var(--f-sans); letter-spacing: .02em; }
.phone-live { margin-left: auto; font: 500 .62rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: #b9f59a; padding: 5px 7px; border-radius: var(--r-1); }
.phone-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.phone-controls select {
  appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; height: 32px; padding: 0 26px 0 10px;
  background: rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid rgba(255,255,255,.18); border-radius: 6px; color: #fff; font-size: .8rem; cursor: pointer;
}
.phone-controls select option { color: var(--ink); }
.phone-controls select:hover { border-color: rgba(255,255,255,.4); }
.chat-log { display: flex; flex-direction: column; gap: 8px; height: 330px; overflow-y: auto; padding: 14px; background: var(--bg) linear-gradient(var(--ink-a06) 1px, transparent 1px) 0 0 / 100% 28px; scroll-behavior: smooth; overscroll-behavior: contain; }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px 0; background: var(--bg); scrollbar-width: none; min-height: 8px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid var(--brand); color: var(--brand); background: var(--white); padding: 7px 11px; border-radius: var(--r-pill); font-size: .8rem; font-weight: 550; transition: background var(--t-1), color var(--t-1); }
.chip:hover { background: var(--brand); color: #fff; }
.chat-form { display: flex; gap: 8px; padding: 10px 12px 12px; background: var(--bg); }
.chat-form input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 22px; background: var(--white); font-size: 16px; }
.chat-form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.chat-form button { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--brand); color: #fff; transition: background var(--t-1), scale var(--t-1) var(--ease-spring); }
.chat-form button:hover { background: var(--brand-600); scale: 1.06; }
.chat-form button:disabled { opacity: .5; }
.phone-foot { margin: 0; padding: 9px 14px 11px; font: 500 .66rem/1.3 var(--f-mono); color: var(--ink-3); text-align: center; border-top: 1px solid var(--line); background: var(--white); }
.phone.is-flash { animation: phone-flash 1.1s var(--ease); }
@keyframes phone-flash { 0% { box-shadow: var(--sh-3), 0 0 0 0 rgba(59,91,253,.6); } 100% { box-shadow: var(--sh-3), 0 0 0 22px rgba(59,91,253,0); } }

/* ---------- closed-loop pinned story ---------- */
.loop { position: relative; }
.loop__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.loop__steps { counter-reset: s; margin-top: 32px; border-top: 1px solid var(--line-2); }
.loop__step { position: relative; display: grid; grid-template-columns: 52px 1fr auto; gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--line-2); cursor: default; transition: opacity var(--t-2) var(--ease); }
.loop__step .n { font: 500 var(--fs-mono)/1.9 var(--f-mono); color: var(--ink-3); }
.loop__step h3 { font: 560 1.45rem/1.15 var(--f-serif); letter-spacing: -.025em; }
.loop__step .t { font: 500 var(--fs-mono)/1.9 var(--f-mono); color: var(--ink-3); background: var(--white); padding: 0 7px; border: 1px solid var(--line); align-self: start; }
.loop__step p { grid-column: 2 / -1; margin: 0; color: var(--ink-3); font-size: var(--fs-sm); line-height: 1.5; }
.loop__step::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform var(--t-3) var(--ease); }
.loop__count { font: 500 var(--fs-mono)/1 var(--f-mono); color: var(--ink-3); margin-top: 18px; }
.loop__count b { color: var(--ink); }
.loop__stage { position: relative; border: 1px solid var(--lilac-grid); --tone: var(--lilac); --tone-grid: var(--lilac-grid); --tone-deep: var(--lilac-deep); --cell: 32px; padding: 28px; min-height: 520px; display: flex; flex-direction: column; }
.loop__track { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 28px; }
.loop__track::before, .loop__track::after { content: ""; position: absolute; left: 10%; right: 10%; top: 23px; height: 2px; background: var(--lilac-grid); }
.loop__track::after { background: var(--brand); right: auto; width: calc(80% * var(--p, 0)); }
.loop__node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font: 500 .64rem/1.2 var(--f-mono); text-align: center; color: var(--ink-3); letter-spacing: .02em; }
.loop__node i { width: 48px; height: 48px; display: grid; place-items: center; background: var(--white); border: 1px solid var(--lilac-grid); color: var(--ink); transition: background var(--t-2) var(--ease), color var(--t-2) var(--ease), scale var(--t-2) var(--ease-spring), border-color var(--t-2); }
.loop__node svg { width: 22px; height: 22px; }
.loop__node.is-done i { background: var(--ink); color: #fff; border-color: var(--ink); }
.loop__node.is-active i { background: var(--brand); color: #fff; border-color: var(--brand); scale: 1.12; }
.loop__node.is-active { color: var(--ink); }
.loop__dot { position: absolute; top: 18px; left: calc(10% + 80% * var(--p, 0)); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255,90,54,.22); z-index: 0; }
.loop__panes { position: relative; flex: 1; display: grid; }
html:not(.js) .loop__pane + .loop__pane { display: none; }
.loop__pane { grid-area: 1 / 1; align-self: center; justify-self: center; width: min(420px, 100%); }
.js .loop__pane { opacity: 0; translate: 0 18px; scale: .98; visibility: hidden; transition: opacity var(--t-2) var(--ease), translate var(--t-3) var(--ease-out), scale var(--t-3) var(--ease-out), visibility 0s linear var(--t-2); }
.js .loop__pane.is-active { opacity: 1; translate: 0 0; scale: 1; visibility: visible; transition-delay: 0s; }
.loop:not(.is-pinned) .loop__step.is-active::before, .loop.is-pinned .loop__step.is-active::before, .loop__step.is-done::before { transform: scaleX(1); }
.js .loop.is-pinned .loop__step:not(.is-active) { opacity: .5; }
.loop:not(.is-pinned) .loop__step p { color: var(--ink-2); }
.js .loop__step.is-active { opacity: 1; }
.loop__step.is-active .n { color: var(--brand); }
.loop__step.is-active .t { background: var(--brand); color: #fff; border-color: var(--brand); }
/* pinned mode (JS adds .is-pinned on desktop) */
.loop.is-pinned { height: calc(var(--steps, 5) * 62vh + 100vh); }
.loop.is-pinned .loop__sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: var(--header-h) 0 0; }
.loop.is-pinned .loop__step p { display: grid; max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--t-3) var(--ease), opacity var(--t-2) var(--ease); }
.loop.is-pinned .loop__step.is-active p { max-height: 90px; opacity: 1; margin-top: 4px; }
.loop.is-pinned .loop__step { padding: 13px 0; }
.loop__sticky { width: 100%; }
/* small pane cards */
.adcard { background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.adcard__top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; font-size: .82rem; }
.adcard__top .avatar { width: 30px; height: 30px; font-size: .65rem; }
.adcard__top small { display: block; color: var(--ink-3); font-size: .7rem; }
.adcard__img { height: 170px; position: relative; overflow: hidden; display: grid; place-items: center; --tone: var(--sky); --tone-grid: var(--sky-grid); --cell: 22px; border-block: 1px solid var(--sky-grid); }
.adcard__img strong { font: 560 1.9rem/1 var(--f-serif); letter-spacing: -.04em; color: var(--ink); text-align: center; position: relative; }
.adcard__img strong em { font-weight: 450; }
.adcard__cta { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; font-size: .82rem; color: var(--ink-2); }
.adcard__cta span:last-child { background: var(--brand); color: #fff; padding: 7px 11px; font-weight: 600; font-size: .78rem; border-radius: var(--r-1); }
.paneflow { display: flex; flex-direction: column; gap: 10px; }
.minicard { background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-1); padding: 14px 16px; }
.minicard h4 { font: 560 1.25rem/1.15 var(--f-serif); letter-spacing: -.025em; margin: 0 0 6px; display: flex; gap: 8px; align-items: center; }
.minicard p { margin: 0; font-size: .82rem; color: var(--ink-3); }
.minicard .row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .82rem; border-top: 1px dashed var(--line); }
.minicard .row:first-of-type { border-top: 0; }
.minicard .row b { font-weight: 600; color: var(--ink); }
.pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pipeline > div { background: rgba(255,255,255,.65); border: 1px solid var(--lilac-grid); padding: 8px; min-height: 120px; }
.pipeline h5 { margin: 0 0 8px; font: 500 .62rem/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.pipeline .lead { background: var(--white); border: 1px solid var(--line); padding: 7px 8px; font-size: .74rem; line-height: 1.3; margin-bottom: 6px; color: var(--ink); }
.pipeline .lead.hot { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-50); }
.pipeline .lead small { display: block; color: var(--ink-3); font-size: .66rem; }
@media (max-width: 960px) {
  .loop__grid { grid-template-columns: 1fr; }
  .loop__stage { min-height: 470px; padding: 18px; }
  .loop__node { font-size: .56rem; }
  .loop__node i { width: 40px; height: 40px; }
  .loop__track::before, .loop__track::after { top: 19px; } .loop__dot { top: 14px; }
}

/* ---------- tabs ---------- */
.tabs { --tab-c: var(--sky); --tab-grid: var(--sky-grid); --tab-deep: var(--sky-deep); }
.tabs__list { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 28px; }
.tabs__tab { position: relative; z-index: 1; border: 1px solid var(--line-2); background: var(--white); color: var(--ink); padding: 10px 16px; border-radius: var(--r-1);
  font: 550 .9375rem/1 var(--f-sans); transition: color var(--t-1), border-color var(--t-1), background var(--t-2) var(--ease); }
.tabs__tab:hover { border-color: var(--ink); }
.tabs__tab[aria-selected="true"] { background: var(--tone); border-color: var(--tone-deep); color: var(--ink); }
.tabs__tab .mono { font-size: .64rem; color: var(--ink-3); margin-right: 6px; }
.tabs__ind { position: absolute; z-index: 2; left: 0; bottom: -10px; height: 3px; width: var(--w, 0); background: var(--tab-deep); transform: translateX(var(--x, 0)); transition: transform var(--t-3) var(--ease-out), width var(--t-3) var(--ease-out), background var(--t-2); pointer-events: none; }
.tabs__panel { outline: none; }
.tabs__panel:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
html:not(.js) .tabs__list { display: none; }
html:not(.js) .tabs__panel + .tabs__panel { margin-top: 24px; }
.tabs__panel.is-entering { animation: panel-in .55s var(--ease-out) both; }
@keyframes panel-in { from { opacity: 0; translate: 0 14px; } }
.persona { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; }
.persona__chat { min-height: 380px; justify-content: center; }
.persona__chat .chat { justify-content: flex-end; }
.persona__chat .chat > .chat-head { margin-bottom: auto; }
.persona__chat .chat { max-width: 440px; width: 100%; margin-inline: auto; }
.persona__chat .chat-head { margin-bottom: 6px; }
.persona__info { display: flex; flex-direction: column; }
.persona__info h3 { margin-bottom: 14px; }
.persona__info .ticks { margin: 8px 0 24px; }
.persona__info .btn-row { margin-top: auto; }
@media (max-width: 860px) { .persona { grid-template-columns: 1fr; } .persona__chat { min-height: 0; } .tabs__list { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 14px; scrollbar-width: none; } .tabs__list::-webkit-scrollbar { display: none; } .tabs__tab { flex: none; } .tabs__ind { bottom: 4px; } }

/* ---------- ticks list / pills ---------- */
.ticks li { position: relative; padding: 8px 0 8px 30px; line-height: 1.45; border-top: 1px dashed var(--tone-grid, var(--line)); }
.ticks li:first-child { border-top: 0; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 13px; width: 16px; height: 16px; background: var(--ink); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 8%, 38% 72%); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--r-1); background: var(--tone, var(--white)); color: var(--tone-deep, var(--ink)); border: 1px solid var(--tone-grid, var(--line)); font-size: .78rem; font-weight: 600; line-height: 1; white-space: nowrap; }
.pill--good { background: var(--mint); color: var(--mint-deep); border-color: var(--mint-grid); }
.pill--brand { background: var(--brand); color: #fff; border-color: var(--brand); }
.pill--coral { background: var(--coral); color: var(--ink); border-color: var(--coral); }

/* ---------- accordion + visual ---------- */
.accv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.accv__list { border-top: 1px solid var(--ink); }
.accv__item { border-bottom: 1px solid var(--line-2); position: relative; }
.accv__head { width: 100%; display: flex; align-items: baseline; gap: 16px; text-align: left; background: none; border: 0; padding: 22px 36px 22px 0; position: relative;
  font: 540 clamp(1.3rem, 1.1rem + .7vw, 1.7rem)/1.15 var(--f-serif); letter-spacing: -.025em; color: var(--ink); transition: color var(--t-1); }
.accv__head:hover { color: var(--brand); }
.accv__num { font: 500 var(--fs-mono)/1 var(--f-mono); color: var(--ink-3); letter-spacing: .02em; flex: none; width: 24px; }
.accv__head::after { content: ""; position: absolute; right: 4px; top: 50%; width: 12px; height: 12px; margin-top: -8px; border: solid var(--ink); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); transition: transform var(--t-2) var(--ease); }
.accv__item.is-open .accv__head::after { transform: rotate(225deg); margin-top: -2px; }
.accv__item.is-open .accv__num { color: var(--brand); }
.accv__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-3) var(--ease); }
.accv__item.is-open .accv__body { grid-template-rows: 1fr; }
.accv__inner { overflow: hidden; padding-left: 40px; }
.accv__inner > :first-child { margin-top: -6px; }
.accv__inner > :last-child { margin-bottom: 24px; }
.accv__inner p { color: var(--ink-2); max-width: 46ch; opacity: 0; translate: 0 6px; transition: opacity var(--t-2) var(--ease), translate var(--t-2) var(--ease); }
.accv__item.is-open .accv__inner p, .accv__item.is-open .accv__inner .link { opacity: 1; translate: 0 0; transition-delay: .15s; }
.accv__inner .link { opacity: 0; transition: opacity var(--t-2) var(--ease); }
.accv__prog { position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; }
.accv__item.is-open .accv__prog.run { animation: acc-prog var(--acc-dur, 6500ms) linear forwards; }
@keyframes acc-prog { to { transform: scaleX(1); } }
.no-js .accv__body, html:not(.js) .accv__body { grid-template-rows: 1fr; }
html:not(.js) .accv__inner p, html:not(.js) .accv__inner .link { opacity: 1; translate: 0 0; }
.accv__visual { position: sticky; top: calc(var(--header-h) + 24px); aspect-ratio: 1 / .92; border: 1px solid var(--tone-grid); --cell: 40px; display: grid; overflow: hidden; }
.accv__visual::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--tone-grid) 1px, transparent 1px), linear-gradient(90deg, var(--tone-grid) 1px, transparent 1px); background-size: var(--cell) var(--cell); background-color: var(--tone); }
.accv__pane { position: relative; grid-area: 1 / 1; display: grid; place-items: center; padding: clamp(18px, 3vw, 40px); }
.js .accv__pane { opacity: 0; visibility: hidden; scale: .97; transition: opacity var(--t-2) var(--ease), scale var(--t-3) var(--ease-out), visibility 0s linear var(--t-2); }
.js .accv__pane.is-active { opacity: 1; visibility: visible; scale: 1; transition-delay: .05s, .05s, 0s; }
html:not(.js) .accv__pane + .accv__pane { display: none; }
.accv__pane > * { width: min(400px, 100%); }
@media (max-width: 960px) {
  .accv { grid-template-columns: 1fr; }
  .accv__visual { position: relative; top: 0; order: -1; aspect-ratio: auto; min-height: 300px; scroll-margin-top: calc(var(--header-h) + 12px); }
  .accv__prog { display: none; }
}

/* ---------- feature row ---------- */
.frow { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.frow + .frow { margin-top: clamp(64px, 9vw, 128px); }
.frow--flip .frow__text { order: 2; }
.frow__text .eyebrow { margin-bottom: 18px; }
.frow__text .h2, .frow__text .h3 { margin-bottom: 18px; }
.frow__media { position: relative; }
@media (max-width: 900px) { .frow { grid-template-columns: 1fr; } .frow--flip .frow__text { order: 0; } }

/* ---------- multilingual ---------- */
.langs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.langs .pill { font-size: .875rem; padding: 8px 12px; background: var(--white); border-color: var(--line-2); color: var(--ink); }
.langs .pill span[dir="rtl"] { font-family: var(--f-arabic); }
.ml-board { position: relative; display: grid; gap: 14px; padding: clamp(18px, 3vw, 32px); border: 1px solid var(--pink-grid); --tone: var(--pink); --tone-grid: var(--pink-grid); --cell: 30px; }
.ml-thread { background: rgba(255,255,255,.72); border: 1px solid var(--pink-grid); padding: 12px 14px 14px; backdrop-filter: blur(2px); }
.ml-thread .chat-head { margin-bottom: 8px; }
.ml-thread .bubble.bot { background: var(--white); }

/* ---------- audit ---------- */
.audit-form { display: flex; gap: 8px; background: var(--white); padding: 6px; border: 1.5px solid var(--ink); border-radius: var(--r-1); box-shadow: 6px 6px 0 var(--ink); max-width: 560px; }
.audit-form input { flex: 1; min-width: 0; width: 100%; height: 52px; border: 0; padding: 0 14px; background: transparent; font-size: 1.05rem; }
.audit-form input:focus { outline: none; }
.audit-form:focus-within { box-shadow: 6px 6px 0 var(--brand); border-color: var(--brand); }
.audit-form .btn { min-height: 52px; }
@media (max-width: 480px) {
  .audit-form { flex-direction: column; }
  .audit-form input { flex: 0 0 auto; height: 52px; }
  .audit-form .btn { width: 100%; justify-content: center; }
}
.audit-status { min-height: 1.6em; margin: 14px 0 0; font: 500 var(--fs-xs)/1.5 var(--f-mono); color: var(--ink-3); }
.audit-status.is-error { color: var(--bad-text); }
.audit-status.is-error::before { display: none !important; }
.audit-status:not(:empty)::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--brand); margin-right: 8px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.audit-result { display: none; margin-top: 28px; }
.audit-result.show { display: block; animation: rv-up .6s var(--ease-out) both; }
.audit-report { background: var(--white); border: 1px solid var(--line); box-shadow: var(--sh-2); }
.audit-report__head { display: flex; gap: 22px; align-items: center; padding: 24px; background: var(--tone, var(--paper)); border-bottom: 1px solid var(--tone-grid, var(--line)); }
.audit-report__head h3 { font: 560 1.6rem/1.1 var(--f-serif); letter-spacing: -.03em; margin: 0 0 6px; }
.audit-report__head p { margin: 0; color: var(--ink-2); }
.audit-report .checkrow { grid-template-columns: 26px 1fr auto; padding: 18px 24px; align-items: start; font-size: var(--fs-sm); }
.audit-report .checkrow h4 { font-size: 1rem; margin: 0 0 4px; font-weight: 650; }
.audit-report .checkrow p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.audit-report .checkrow .fix { margin-top: 6px; color: var(--ink); }
.audit-report .dot { width: 26px; height: 26px; }
.audit-report__cta { margin: 0; padding: 28px 24px; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: center; }
.audit-report__cta h3 { color: #fff; font: 560 1.6rem/1.1 var(--f-serif); letter-spacing: -.03em; margin: 0 0 6px; }
.audit-report__cta p { margin: 0; }

/* ---------- calculator ---------- */
.calc { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: var(--white); border: 1px solid var(--line-2); }
.calc__in { padding: clamp(20px, 3vw, 36px); display: grid; gap: 22px; align-content: start; }
.calc__out { padding: clamp(20px, 3vw, 36px); background: var(--ink); color: rgba(255,255,255,.75); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; isolation: isolate; }
.calc__out::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 28px 28px; }
.calc__out small { font: 500 var(--fs-mono)/1.4 var(--f-mono); letter-spacing: .03em; }
.calc__big { font: 560 clamp(2.6rem, 1.8rem + 2.6vw, 4rem)/1 var(--f-serif); letter-spacing: -.045em; color: #ff8a6e; margin: 10px 0 6px; font-variant-numeric: tabular-nums; }
.calc__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.15); }
.calc__row2 strong { display: block; color: #fff; font: 560 1.6rem/1.1 var(--f-serif); letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.field-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; font-size: var(--fs-sm); color: var(--ink); font-weight: 550; }
.field-row output { font: 600 .9rem/1 var(--f-mono); color: var(--brand); background: var(--brand-50); padding: 5px 8px; border-radius: var(--r-1); font-variant-numeric: tabular-nums; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(var(--brand), var(--brand)) 0 / var(--fill, 50%) 100% no-repeat, var(--line); }
input[type=range]::-moz-range-track { height: 4px; background: var(--line); }
input[type=range]::-moz-range-progress { height: 4px; background: var(--brand); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; background: var(--white); border: 2px solid var(--ink); border-radius: 2px; transition: scale var(--t-1) var(--ease-spring); }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; background: var(--white); border: 2px solid var(--ink); border-radius: 2px; }
input[type=range]:active::-webkit-slider-thumb { scale: 1.15; background: var(--butter); }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

/* ---------- forms ---------- */
.form { background: var(--white); border: 1px solid var(--line-2); padding: clamp(20px, 3vw, 36px); display: grid; gap: 16px; }
.form__row, .form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label, label.field { display: grid; gap: 7px; font-size: var(--fs-sm); font-weight: 550; color: var(--ink); }
.form input:not([type=range]):not([type=checkbox]):not([type=radio]), .form select, .form textarea, .select {
  width: 100%; min-height: 48px; padding: 11px 13px; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-1);
  font-size: 16px; font-weight: 400; color: var(--ink); transition: border-color var(--t-1), box-shadow var(--t-1), background var(--t-1);
}
.form select, select.select { appearance: none; -webkit-appearance: none; padding-right: 36px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230d1040' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus, .select:focus { outline: none; border-color: var(--brand); background-color: var(--white); box-shadow: 0 0 0 3px var(--brand-50); }
.form-status { margin: 0; min-height: 1.4em; font-size: var(--fs-sm); color: var(--ink-3); }
.form .form-status:empty { min-height: 0; margin-top: -16px; }
.form-status.ok { color: var(--good-text); font-weight: 600; }
.form-status.bad { color: var(--bad-text); }
@media (max-width: 640px) { .form__row, .form .row { grid-template-columns: 1fr; } }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--ink); counter-reset: st; }
.steps li { padding: 22px 22px 0 0; position: relative; }
.steps__n { display: inline-block; font: 500 var(--fs-mono)/1 var(--f-mono); background: var(--butter); padding: 5px 7px; border-radius: var(--r-1); color: var(--ink); margin-bottom: 18px; }
.steps h3 { font: 560 1.45rem/1.1 var(--f-serif); letter-spacing: -.025em; margin-bottom: 8px; }
.steps p { color: var(--ink-3); font-size: var(--fs-sm); margin: 0; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; gap: 0 16px; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- founding offer ---------- */
.offer { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.seats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.seat { aspect-ratio: 1; background: rgba(255,255,255,.7); border: 1.5px dashed var(--peach-deep); display: grid; place-items: center; font: 500 .7rem/1 var(--f-mono); color: var(--peach-deep); }
.seats-label { margin-top: 12px; font: 500 var(--fs-mono)/1.4 var(--f-mono); color: var(--ink-2); }
@media (max-width: 860px) { .offer { grid-template-columns: 1fr; } }

/* ---------- pricing ---------- */
/* region picker [data-region]: visible pill + a transparent native <select> on top (keyboard, screen readers, phone pickers) */
.region { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.region__label { font: 500 var(--fs-mono)/1 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); }
.region__pick { position: relative; display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 48px; padding: 8px 14px 8px 12px; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r-1); box-shadow: var(--sh-1); color: var(--ink); transition: border-color var(--t-1) var(--ease), box-shadow var(--t-2) var(--ease), translate var(--t-2) var(--ease); }
.region__pick:hover { border-color: var(--ink); box-shadow: var(--sh-2); translate: 0 -1px; }
.region__pick:focus-within { outline: 2px solid var(--brand); outline-offset: 3px; }
.region__flag { font-size: 1.25rem; line-height: 1; flex: none; }
.region__name { font-weight: 600; font-size: .98rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.region__cur { flex: none; font: 500 var(--fs-mono)/1 var(--f-mono); letter-spacing: .04em; padding: 6px 8px; background: var(--ink); color: #fff; border-radius: var(--r-1); }
.region__chev { flex: none; width: 8px; height: 8px; margin: -3px 2px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; transition: translate var(--t-1) var(--ease); }
.region__pick:hover .region__chev { translate: 0 2px; }
.region__select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; /* 16px: no iOS zoom on focus */ }
html:not(.js) .region__select, html:not(.js) .region__chev { display: none; }
.region__note { margin: 0; font-size: var(--fs-xs, .8rem); color: var(--ink-3); text-align: center; text-wrap: balance; }
@media (prefers-reduced-motion: reduce) { .region__pick, .region__chev { transition: none; } .region__pick:hover { translate: none; } }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line-2); padding: clamp(22px, 2.6vw, 32px); transition: translate var(--t-2) var(--ease), box-shadow var(--t-2) var(--ease); }
.price-card:hover { translate: 0 -4px; box-shadow: var(--sh-2); }
.price-card__tag { align-self: flex-start; margin-bottom: 18px; }
.price-card h3 { font: 560 1.9rem/1.05 var(--f-serif); letter-spacing: -.03em; margin-bottom: 8px; }
.price-card > p { color: var(--ink-3); font-size: var(--fs-sm); }
.price { font: 560 clamp(2.6rem, 2rem + 1.8vw, 3.4rem)/1 var(--f-serif); letter-spacing: -.045em; color: var(--ink); margin: 14px 0 6px; font-variant-numeric: tabular-nums; }
.price--long { font-size: clamp(2.2rem, 1.7rem + 1.4vw, 2.8rem); } /* set by main.js for long local amounts */
.price small { font: 500 1rem/1 var(--f-sans); letter-spacing: 0; color: var(--ink-3); margin-left: 2px; }
.price-note { font: 500 var(--fs-xs)/1.4 var(--f-mono); color: var(--ink-3); margin-bottom: 22px; }
.price-card .ticks { margin-bottom: 26px; font-size: var(--fs-sm); }
.price-card .btn { margin-top: auto; }
.price-card--featured { border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--brand); }
.price-card--featured:hover { box-shadow: 12px 12px 0 var(--brand); }
.price-card--featured .price-card__badge { position: absolute; top: -13px; right: 20px; background: var(--coral); color: var(--ink); font: 500 .7rem/1 var(--f-mono); letter-spacing: .05em; padding: 7px 9px; border-radius: var(--r-1); }
@media (max-width: 960px) { .price-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* ---------- comparison table ---------- */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line-2); background: var(--white); }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: var(--fs-sm); }
.compare th, .compare td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { font: 500 var(--fs-mono)/1.3 var(--f-mono); letter-spacing: .03em; color: var(--ink-3); background: var(--paper); position: sticky; top: 0; }
.compare thead th.is-us { background: var(--ink); color: #fff; }
.compare tbody th { font-weight: 550; color: var(--ink); position: sticky; left: 0; background: var(--white); }
.compare td.is-us { background: var(--brand-50); color: var(--ink); font-weight: 550; }
.compare .yes { color: var(--good); font-weight: 700; }
.compare .no { color: var(--ink-3); }
.compare tbody tr:hover td, .compare tbody tr:hover th { background: var(--paper); }
.compare tbody tr:hover td.is-us { background: #dde3ff; }
@media (max-width: 640px) {
  .compare { min-width: 500px; }
  .compare tbody th, .compare thead th:first-child { width: 112px; min-width: 112px; font-size: .82rem; }
  .compare th, .compare td { padding: 12px 10px; }
  .compare thead th:first-child { left: 0; z-index: 2; }
  /* .compare-wrap--fit: the table fits the phone, so let the header stick to the page instead of the wrapper */
  .compare-wrap--fit { overflow: visible; }
  .compare-wrap--fit .compare thead th { top: var(--header-h); z-index: 3; }
}

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0;
  font: 540 clamp(1.15rem, 1rem + .5vw, 1.45rem)/1.25 var(--f-serif); letter-spacing: -.02em; color: var(--ink); transition: color var(--t-1); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border: 1px solid var(--line-2); background:
  linear-gradient(var(--ink), var(--ink)) center / 11px 1.6px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.6px 11px no-repeat, var(--white);
  border-radius: var(--r-1); transition: transform var(--t-2) var(--ease), background-color var(--t-2); }
.faq details[open] summary::after { transform: rotate(45deg); background-color: var(--butter); }
.faq__a, .faq details > p { padding: 0 48px 22px 0; color: var(--ink-2); }
.faq details[open] .faq__a, .faq details[open] > p { animation: rv-up .45s var(--ease-out) both; }
.faq__a p:last-child { margin-bottom: 0; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--ink); color: rgba(255,255,255,.78); padding: clamp(48px, 7vw, 104px) clamp(22px, 5vw, 72px); text-align: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 85%); }
.cta-band .h2, .cta-band h2 { color: #fff; max-width: 16ch; margin-inline: auto; }
.cta-band .h2 em { color: var(--brand-300); }
.cta-band p { max-width: 560px; margin: 20px auto 0; font-size: var(--fs-lede); }
.cta-band .btn-row { justify-content: center; margin-top: 32px; }
.cta-band .eyebrow { margin-bottom: 22px; }
.cta-band .px-deco { position: absolute; z-index: -1; opacity: .9; }
/* Pastel variant: use when the shared navy footer CTA follows on the same page */
.cta-band--tone { --tone: var(--butter); --tone-grid: var(--butter-grid); background: var(--tone); color: var(--ink-2); border: 1px solid var(--tone-grid); }
.cta-band--tone::before { background-image: linear-gradient(var(--tone-grid) 1px, transparent 1px), linear-gradient(90deg, var(--tone-grid) 1px, transparent 1px); }
.cta-band--tone .h2, .cta-band--tone h2 { color: var(--ink); }
.cta-band--tone .h2 em { color: var(--brand); }

/* ---------- footer (injected) ---------- */
.footer { background: var(--ink); color: rgba(255,255,255,.7); position: relative; overflow: hidden; isolation: isolate; margin-top: 0; }
.footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px); background-size: 48px 48px; }
.footer__cta { padding: clamp(72px, 10vw, 140px) 0 clamp(56px, 7vw, 96px); text-align: center; border-bottom: 1px solid rgba(255,255,255,.12); position: relative; }
.footer__cta .eyebrow { --tone: var(--butter); --tone-deep: var(--ink); margin-bottom: 26px; }
.footer__cta h2 { color: #fff; font-size: var(--fs-h1); max-width: 14ch; margin-inline: auto; }
.footer__cta h2 em { color: var(--brand-300); }
.footer__cta p { max-width: 560px; margin: 22px auto 0; font-size: var(--fs-lede); }
.footer__cta .btn-row { justify-content: center; margin-top: 34px; }
.footer__px { position: absolute; left: 50%; bottom: -1px; translate: -50% 0; display: flex; gap: 0; opacity: .95; pointer-events: none; }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; padding: 64px 0 48px; }
.footer__brand img { height: 28px; width: auto; margin-bottom: 18px; }
.footer__brand p { max-width: 34ch; font-size: var(--fs-sm); line-height: 1.55; }
.footer h4, .footer .footer__h { font: 500 var(--fs-mono)/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); margin: 4px 0 18px; }
.footer li + li { margin-top: 10px; }
.footer a { color: rgba(255,255,255,.86); text-decoration: none; font-size: var(--fs-sm); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--t-2) var(--ease), color var(--t-1); }
.footer a:hover { color: #fff; background-size: 100% 1px; }
.footer a.btn { background: var(--b-bg); font-size: 1rem; }
.footer__strip { display: flex; justify-content: center; overflow: hidden; margin-top: 8px; }
.footer__strip .pixels { --cell: 24px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding: 22px 0 28px; border-top: 1px solid rgba(255,255,255,.12); font: 500 var(--fs-mono)/1.4 var(--f-mono); color: rgba(255,255,255,.5); letter-spacing: .02em; }
.footer__big { font: 570 clamp(4rem, 15vw, 15rem)/.8 var(--f-serif); letter-spacing: -.06em; color: rgba(255,255,255,.07); text-align: center; white-space: nowrap; margin: 0 0 -.12em; user-select: none; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } .footer__grid li a:not(.btn) { display: inline-block; padding: 10px 0; } .footer li + li { margin-top: 0; } }

/* ---------- page hero (inner pages) ---------- */
.page-hero { position: relative; padding: clamp(40px, 6vw, 88px) 0 0; overflow-x: clip; }
.page-hero__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.page-hero__inner .eyebrow { margin-bottom: 24px; }
.page-hero__inner .h1 { max-width: 16ch; }
.page-hero__inner .lede { margin: 24px auto 0; }
.page-hero__inner .btn-row { margin-top: 30px; justify-content: center; }
.page-hero--split .page-hero__inner { text-align: left; align-items: flex-start; }
.page-hero--split .page-hero__inner .lede { margin-left: 0; }
.page-hero--split .page-hero__inner .btn-row { justify-content: flex-start; }
.page-hero--split .page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; padding-bottom: var(--section); }
@media (max-width: 960px) { .page-hero--split .page-hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- wordmarks row ---------- */
.wordmarks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; font: 560 1.4rem/1 var(--f-serif); letter-spacing: -.03em; color: var(--ink); opacity: .75; }

/* ---------- prose (privacy etc.) ---------- */
.prose { max-width: 720px; }
.prose h2 { font: 560 1.8rem/1.15 var(--f-serif); letter-spacing: -.03em; margin: 2em 0 .6em; }
.prose h3 { font-size: 1.15rem; margin: 1.6em 0 .5em; }
.prose ul { list-style: disc; padding-left: 1.3em; margin-bottom: 1em; }
.prose li + li { margin-top: 6px; }

/* ==========================================================================
   MOTION SYSTEM
   ========================================================================== */
@keyframes rv-up { from { opacity: 0; translate: 0 28px; } }
@keyframes rv-down { from { opacity: 0; translate: 0 -24px; } }
@keyframes rv-left { from { opacity: 0; translate: 36px 0; } }
@keyframes rv-right { from { opacity: 0; translate: -36px 0; } }
@keyframes rv-fade { from { opacity: 0; } }
@keyframes rv-scale { from { opacity: 0; scale: .93; translate: 0 16px; } }
@keyframes rv-pop { from { opacity: 0; scale: .6; } }
@keyframes rv-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rv-wipe-up { from { clip-path: inset(100% 0 0 0); translate: 0 20px; } to { clip-path: inset(0 0 0 0); } }
@keyframes word-rise { from { translate: 0 105%; } }

.js [data-reveal]:not(.in) { opacity: 0; }
.js [data-reveal="wipe"]:not(.in), .js [data-reveal="wipe-up"]:not(.in) { opacity: 1; clip-path: inset(0 100% 0 0); }
.js [data-reveal="wipe-up"]:not(.in) { clip-path: inset(100% 0 0 0); }
[data-reveal].in { animation: rv-up var(--t-3) var(--ease-out) var(--d, 0ms) backwards; }
[data-reveal="down"].in { animation-name: rv-down; }
[data-reveal="left"].in { animation-name: rv-left; }
[data-reveal="right"].in { animation-name: rv-right; }
[data-reveal="fade"].in { animation-name: rv-fade; animation-duration: 900ms; }
[data-reveal="scale"].in { animation-name: rv-scale; animation-duration: 800ms; }
[data-reveal="pop"].in { animation-name: rv-pop; animation-timing-function: var(--ease-spring); animation-duration: 600ms; }
[data-reveal="wipe"].in { animation: rv-wipe 1s cubic-bezier(.7,0,.2,1) var(--d, 0ms) both; }
[data-reveal="wipe-up"].in { animation: rv-wipe-up 1s cubic-bezier(.7,0,.2,1) var(--d, 0ms) both; }
/* cursor tags: pop in, then drift (drift lives on transform, reveal on scale/opacity — no conflict) */
.ctag[data-reveal].in { animation: rv-pop .6s var(--ease-spring) var(--d, 0ms) backwards, drift-1 9s ease-in-out calc(var(--d, 0ms) + 600ms) infinite; }
.ctag[data-reveal][data-drift="2"].in { animation: rv-pop .6s var(--ease-spring) var(--d, 0ms) backwards, drift-2 11s ease-in-out calc(var(--d, 0ms) + 600ms) infinite; }
.ctag[data-reveal][data-drift="3"].in { animation: rv-pop .6s var(--ease-spring) var(--d, 0ms) backwards, drift-3 13s ease-in-out calc(var(--d, 0ms) + 600ms) infinite; }
/* split headline */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding: .16em .08em .14em; margin: -.16em -.08em -.14em; }
.w.w--done { overflow: visible; }
.wi { display: inline-block; }
.js [data-split]:not(.in) .wi { translate: 0 105%; }
[data-split].in .wi { animation: word-rise .9s var(--ease-out) calc(var(--d, 0ms) + var(--wi, 0) * 55ms) backwards; }
[data-split] { opacity: 1 !important; }

/* legacy aliases (older markup) */
.btn-accent { --b-bg: var(--brand); --b-bd: var(--brand); }
.btn-ghost { --b-bg: transparent; --b-fg: var(--ink); --b-bd: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.btn.full { display: flex; width: 100%; }
.eyebrow-plain { font: 500 var(--fs-mono)/1 var(--f-mono); color: var(--ink-3); }
.js .reveal:not(.in) { opacity: 0; }
.reveal.in { animation: rv-up var(--t-3) var(--ease-out) var(--d, 0ms) backwards; }
.card { background: var(--white); border: 1px solid var(--line-2); padding: clamp(20px, 2.4vw, 30px); }
.card.dark { background: var(--ink); color: rgba(255,255,255,.78); border-color: var(--ink); }
.card.dark h3 { color: #fff; }
.lead { font-size: var(--fs-lede); line-height: 1.5; }
.narrow { width: min(820px, 100% - var(--gutter) * 2); margin-inline: auto; }

/* ==========================================================================
   REDUCED MOTION — show everything, stop everything
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js [data-reveal]:not(.in), .js .reveal:not(.in), .js [data-split]:not(.in) .wi, .js .pixels:not(.in) .px,
  .js [data-anim]:not(.in) .bar > i, .js [data-anim]:not(.in) .vbars > i, .js [data-anim]:not(.in) .pop, .js [data-anim]:not(.in) .rise { opacity: 1 !important; translate: none !important; clip-path: none !important; scale: none !important; }
  .js [data-chat-script]:not(.is-played) > .bubble { visibility: visible; }
  [data-drift], .ctag[data-reveal].in { animation: none !important; }
  .js .marquee.is-ready .marquee__track { animation: none !important; }
  .marquee__track { flex-wrap: wrap; justify-content: center; width: auto; row-gap: 14px; }
  .marquee__track [aria-hidden="true"] { display: none; }
  .marquee { mask-image: none; -webkit-mask-image: none; }
  [data-parallax], [data-depth] { transform: translate3d(var(--mx, 0px), calc(var(--py, 0px) + var(--my, 0px)), 0); will-change: transform; }
[data-tilt] { transform: none !important; }
  .btn::after { display: none; }
}

/* ==========================================================================
   SHARED FIXES / PROMOTED PAGE PATTERNS (review pass)
   ========================================================================== */
/* Cursor tags: between phone and wide desktop, pull toward the stage centre and keep them inside it.
   Per-tag override: --xm. */
@media (min-width: 761px) and (max-width: 1400px) {
  .ctag:not(.ctag--static) { left: clamp(6px, calc(50% + var(--xm, var(--x, 0px))), calc(100% - 250px)); }
}
@media (min-width: 761px) and (max-width: 1100px) { .ctag--hide-md { display: none; } }
/* Sticky section heading for split FAQ layouts — desktop only (it would cover the list once stacked). */
@media (min-width: 961px) { .faq-head, .sec-head--sticky { position: sticky; top: calc(var(--header-h) + 32px); } }
/* Ticks on dark surfaces */
.section--ink .ticks li::before, .block--ink .ticks li::before, .footer__cta .ticks li::before { background: #fff; }
/* Eyebrows inside flex-column blocks should hug their text */
.block > .eyebrow { align-self: flex-start; }
/* Bigger touch targets in the live agent on touch devices (16px stops iOS zoom). */
@media (pointer: coarse) {
  .phone-controls select { height: 40px; font-size: 16px; }
  .chip { padding: 10px 14px; min-height: 40px; }
}
@media (max-width: 760px) { .chat-log { height: clamp(220px, 34svh, 330px); } }
/* Less dead space after the marquee strip */
.section--tight + .section { padding-top: clamp(40px, 5vw, 72px); }
/* Source links: larger hit area, no visual change */
.stat__src a, a.src { display: inline-block; padding: 12px 0; margin: -12px 0; }
/* Looping micro-animations pause when off-screen (main.js toggles .is-off) */
.is-off, .is-off * { animation-play-state: paused !important; }
.hero__note .i { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .w { overflow: visible; } }
/* Tab panels aren't hidden in markup (no-JS shows them all); hide the extras until main.js wires the tabs. */
.js [data-tabs]:not(.is-ready) .tabs__panel ~ .tabs__panel { display: none; }

/* ==========================================================================
   LEAD CAPTURE (main.js leadForm / submitLead) + config-driven extras
   ========================================================================== */
.lead-mini { gap: 14px; animation: rv-up .55s var(--ease-out) both; }
.lead-mini__head h3 { font: 560 1.4rem/1.1 var(--f-serif); letter-spacing: -.03em; color: var(--ink); margin: 0 0 6px; }
.lead-mini__head p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.lead-mini__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; }
.lead-mini label .opt { font-weight: 400; color: var(--ink-3); }
.lead-mini > .btn { justify-self: start; }
.lead-mini .form-status:empty { display: none; }
.lead-mini.is-done { display: block; }
.lead-mini__done { display: flex; gap: 12px; align-items: flex-start; animation: rv-pop .45s var(--ease-spring) both; }
.lead-mini__done b { display: block; font: 560 1.2rem/1.2 var(--f-serif); letter-spacing: -.02em; color: var(--ink); }
.lead-mini__done p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--ink-2); }
.lead-mini__done .dot { width: 28px; height: 28px; margin-top: 1px; }
.lead-mini__done:focus { outline: none; }
.lead-mini__done a { color: inherit; }
.form ::placeholder { color: var(--ink-3); opacity: 1; }
/* failed audit: the fallback asks for an email, so drop the "No email needed" trust line under it */
.audit-fallback ~ .au-meta { display: none; }
/* audit report: "email me the full report" */
.audit-capture { --cell: 28px; padding: 24px; border-top: 1px solid var(--tone-grid); }
.audit-capture .lead-mini { border: 1.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.audit-fallback { max-width: 560px; margin-top: 18px; box-shadow: var(--sh-2); }
.partner-deck { margin-top: 16px; box-shadow: var(--sh-1); }
/* live agent: slide-in card inside the phone. main.js sets the log's height to (its height − card height)
   so the phone keeps its height; the card's own size is measured, not assumed. */
.phone .chat-log { transition: height var(--t-2) var(--ease); }
.agent-cta { position: relative; padding: 10px 12px 0; background: var(--bg); animation: rv-up .45s var(--ease-out) both; }
.agent-cta .lead-mini { padding: 14px; gap: 10px; border: 1px solid var(--brand-300, var(--line-2)); background: var(--white); box-shadow: var(--sh-1); animation: none; }
.agent-cta .lead-mini__head { padding-right: 26px; }
.agent-cta .lead-mini__head h3 { font-size: 1.08rem; margin-bottom: 3px; }
.agent-cta .lead-mini__head p { font-size: .8rem; line-height: 1.4; }
.agent-cta .lead-mini__fields { grid-template-columns: 1fr 1fr; gap: 8px; }
/* compact: inputs carry placeholders; label text is visually hidden but still read by screen readers */
.agent-cta .lead-mini label { gap: 0; }
.agent-cta .lead-mini label > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.agent-cta .lead-mini.form input:not([type=range]):not([type=checkbox]):not([type=radio]) { min-height: 40px; padding: 8px 10px; }
.agent-cta .lead-mini > .btn { justify-self: stretch; justify-content: center; min-height: 40px; font-size: .9rem; }
.agent-cta .lead-mini__done b { font-size: 1rem; }
.agent-cta .lead-mini__done p { font-size: .8rem; }
.agent-cta__x { position: absolute; top: 14px; right: 16px; z-index: 1; width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-3); font-size: 1.25rem; line-height: 1; border-radius: var(--r-1); }
.agent-cta__x:hover { color: var(--ink); background: var(--bg-2); }
/* floating WhatsApp (only when ADM_CONFIG.whatsappNumber is set) */
.wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px 0 13px;
  background: var(--ink); color: #fff; border: 0; border-radius: var(--r-pill); box-shadow: 0 0 0 2px var(--bg), var(--sh-2); font-weight: 600; font-size: .92rem; text-decoration: none;
  animation: rv-pop .5s var(--ease-spring) 1.2s backwards; transition: translate var(--t-1) var(--ease), background var(--t-1); }
.wa-fab svg { color: #5ee38f; }
.wa-fab:hover { translate: 0 -2px; background: var(--brand); color: #fff; }
body.menu-open .wa-fab, .wa-fab.is-tucked { display: none; }
@media (max-width: 760px) { .wa-fab { width: 52px; height: 52px; padding: 0; justify-content: center; right: 14px; bottom: 14px; } .wa-fab span { display: none; } }

/* ---------- consent banner (main.js builds it; only when a tracking id is set) ---------- */
.cookie { position: fixed; left: 20px; bottom: 20px; z-index: 45; width: min(400px, calc(100vw - 40px)); }
.cookie[hidden] { display: none; }
.cookie__card { --cell: 22px; gap: 12px; padding: 22px 22px 18px; box-shadow: var(--sh-3); }
.cookie__card:hover::before { transform: none; }
.cookie .eyebrow { align-self: flex-start; }
.cookie__title { margin: 0; font: 500 1.5rem/1.1 var(--f-serif); letter-spacing: -.015em; color: var(--ink); outline: none; }
.cookie__title em { font-style: italic; color: var(--tone-deep); }
.cookie p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink-2); }
.cookie p a { color: var(--ink); }
.cookie__prefs { display: grid; gap: 8px; }
.cookie__prefs[hidden] { display: none; }
.cookie__opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; background: var(--white); border: 1px solid var(--tone-grid); border-radius: var(--r-1); cursor: pointer; }
.cookie__opt b { display: block; font-size: var(--fs-sm); color: var(--ink); }
.cookie__opt small { display: block; font-size: var(--fs-xs); line-height: 1.35; color: var(--ink-3); }
.cookie__opt input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 40px; height: 24px; margin: 0; border-radius: var(--r-pill); background: var(--line-2); cursor: pointer; transition: background var(--t-1) var(--ease); }
.cookie__opt input::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform var(--t-1) var(--ease); }
.cookie__opt input:checked { background: var(--brand); }
.cookie__opt input:checked::before { transform: translateX(16px); }
.cookie__opt input:disabled { opacity: .55; cursor: default; }
.cookie__opt input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.cookie p.cookie__note { font-size: var(--fs-xs); line-height: 1.4; color: var(--ink-3); }
/* Accept / Reject / Preferences: same size, side by side (Accept and Reject identical) */
.cookie__btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cookie__btns .btn { min-height: 44px; padding: 0 8px; justify-content: center; white-space: nowrap; }
.cookie.is-in .cookie__card { animation: ck-in .5s var(--ease-out) both; }
@keyframes ck-in { from { opacity: 0; transform: translateY(16px); } }
.footer__link { padding: 0; border: 0; background: none; color: rgba(255,255,255,.86); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.footer__link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .cookie { left: 0; right: 0; bottom: 0; width: auto; }
  .cookie__card { gap: 10px; max-height: 72vh; overflow-y: auto; padding: 16px 16px calc(14px + env(safe-area-inset-bottom)); border-bottom: 0; border-radius: var(--r-3) var(--r-3) 0 0; }
  .cookie .eyebrow { display: none; }
  .cookie__title { font-size: 1.25rem; }
  .cookie__opt { padding: 8px 10px; }
  .cookie.is-prefs #ck-desc { display: none; }
  body.ck-open { padding-bottom: var(--ck-h, 0px); }
  body.ck-open .wa-fab { bottom: calc(var(--ck-h, 0px) + 14px); }
}
@media (prefers-reduced-motion: reduce) { .cookie.is-in .cookie__card { animation: none; } .cookie__opt input, .cookie__opt input::before { transition: none; } }

/* Nav: 7 links fit at laptop widths (contact stays reachable via "Book a call" + mobile menu) */
.nav__links a { white-space: nowrap; }
@media (max-width: 1280px) { .nav__cta .btn--ghost { display: none; } .nav__links a { padding: 8px 9px; } }
@media (max-width: 1100px) and (min-width: 960px) { .nav__links { gap: 0; } .nav__links a { padding: 8px 7px; font-size: .9rem; } .nav__links a::after { left: 7px; right: 7px; } .nav__logo img { width: 140px; height: auto; } }