:root{
  /* clean white ground, crisp cool-neutral greys */
  --bg:#FAF9F5;
  --bg-soft:#F6F7F9;      /* very light cool raised fill */
  --surface:#ffffff;
  --ink:#14161A;          /* crisp near-black */
  --ink-2:#39404B;
  --muted:#5E5C60;        /* cool grey */
  --line:#E8E5DD;         /* hairline */
  --line-strong:#D7D2C7;
  /* one accent — mint (the gem mark) */
  --brand:#5661F5;
  --brand-strong:#3A44DE;--on-brand:#ffffff;--emerald-ink:#0A7A54;--on-night:#9AA3FF;
  /* muted sage — badge / status only, never a second accent */
  --emerald:#0EA97A;
  --emerald-soft:#E7F7F1;
  --gold:#B98A3C;         /* muted, code-syntax only */
  /* bright secondary hues — used for gradients/glows only, kept off text/UI chrome */
  --pink:#FF6F5E;
  --violet:#7C8AF7;
  --sky:#43B0FF;
  --mint:#1FCF9F;
  --grad:linear-gradient(100deg,#5661F5 0%,#3A44DE 100%);
  --night:#0C0E14;        /* committed dark band — deep clean near-black */
  --night-2:#141722;
  --radius:14px;
  --radius-lg:22px;
  --shadow:0 1px 2px rgba(20,22,26,.04),0 18px 48px -22px rgba(20,22,26,.18);
  --shadow-sm:0 1px 2px rgba(20,22,26,.05);
  /* ── Vertical section rhythm ─────────────────────────────────────────
     ONE scale for every section's top/bottom spacing. Rules:
       .block                 standard gap (fluid ~110px desktop → 56px mobile)
       .block.flush-top|-bottom   0   — section visually joins its neighbour
       .block.snug-top|-bottom    8px — closely-related sections
       .block.tight-top|-bottom   24px — a small deliberate gap
     Never hand-write section padding inline; add a modifier class instead. */
  --space-section:clamp(56px, 38px + 5vw, 110px);
  --space-snug:8px;
  --space-tight:24px;
}
/* dark — warm near-black, same single-coral discipline */
@media(prefers-color-scheme:dark){
  :root{
    --bg:#0B0B0C;--bg-soft:#151517;--surface:#141416;
    --ink:#F4F4F3;--ink-2:#C7C9C6;--muted:#969C97;
    --line:#26262A;--line-strong:#33333A;
    --brand:#8A93FF;--brand-strong:#A7AEFF;--on-brand:#0B0B0C;--emerald-ink:#3ED6AC;--on-night:#9AA3FF;
    --emerald:#3ED6AC;--emerald-soft:#16241F;--gold:#D3A863;
    --night:#0A0B10;--night-2:#12141C;
    --shadow:0 18px 46px -22px rgba(0,0,0,.7);--shadow-sm:0 1px 0 rgba(0,0,0,.25);
  }
}
/* explicit toggle overrides (must beat the media query in both directions) */
:root[data-theme="light"]{
  --bg:#FAF9F5;--bg-soft:#F6F7F9;--surface:#ffffff;
  --ink:#14161A;--ink-2:#39404B;--muted:#5E5C60;
  --line:#E8E5DD;--line-strong:#D7D2C7;
  --brand:#5661F5;--brand-strong:#3A44DE;--on-brand:#ffffff;--emerald-ink:#0A7A54;--on-night:#9AA3FF;
  --emerald:#0EA97A;--emerald-soft:#E7F7F1;--gold:#B98A3C;
  --night:#0C0E14;--night-2:#141722;
  --shadow:0 1px 2px rgba(20,22,26,.04),0 18px 48px -22px rgba(20,22,26,.18);--shadow-sm:0 1px 2px rgba(20,22,26,.05);
}
:root[data-theme="dark"]{
  --bg:#0B0B0C;--bg-soft:#151517;--surface:#141416;
  --ink:#F4F4F3;--ink-2:#C7C9C6;--muted:#969C97;
  --line:#26262A;--line-strong:#33333A;
  --brand:#8A93FF;--brand-strong:#A7AEFF;--on-brand:#0B0B0C;--emerald-ink:#3ED6AC;--on-night:#9AA3FF;
  --emerald:#3ED6AC;--emerald-soft:#16241F;--gold:#D3A863;
  --night:#0A0B10;--night-2:#12141C;
  --shadow:0 18px 46px -22px rgba(0,0,0,.7);--shadow-sm:0 1px 0 rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id],[id]{scroll-margin-top:84px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.08;text-wrap:balance}
.wrap{width:min(100% - 44px,1120px);margin-inline:auto}
.wrap-narrow{width:min(100% - 44px,780px);margin-inline:auto}
.eyebrow{font-family:Inter;font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-strong)}
.muted{color:var(--muted)}
.center{text-align:center}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brand);color:var(--on-brand);padding:11px 20px;border-radius:0 0 12px 0;font-weight:600;font-size:14px;box-shadow:var(--shadow)}
.skip-link:focus{left:0}
/* scroll reveal (shared) — JS adds .in; a failsafe in site.js guarantees reveal */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;font-family:Inter;font-size:15px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:transform .18s ease,background .18s ease,border-color .18s ease;white-space:nowrap}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px -10px rgba(20,16,50,.45)}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-dark{background:var(--ink);color:var(--bg)}
.btn-ghost.on-dark{border-color:rgba(255,255,255,.28);color:#fff}
.pt-0{padding-top:0}.pt-tight{padding-top:8px}
.btn-dark:hover{transform:translateY(-1px)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.arrow{transition:transform .18s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:transparent;padding:14px 0 6px;transition:padding .28s ease}
header.nav.scrolled{padding-top:8px}
.nav-inner{display:flex;align-items:center;gap:36px;height:62px;padding:0 14px 0 22px;background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);border:1px solid var(--line);border-radius:14px;box-shadow:0 1px 2px rgba(20,16,50,.04),0 10px 30px -22px rgba(20,16,50,.28);transition:box-shadow .28s ease,border-color .28s ease}
header.nav.scrolled .nav-inner{box-shadow:0 1px 2px rgba(20,16,50,.05),0 14px 36px -20px rgba(20,16,50,.34);border-color:var(--line-strong)}
.brand{display:flex;align-items:center;gap:10px;font-family:Inter;font-weight:700;font-size:18px;letter-spacing:-.01em}
.brand svg{border-radius:7px;flex:0 0 auto}
.nav-links{display:flex;gap:8px;margin-left:6px}
.nav-links a{font-size:15px;font-weight:500;letter-spacing:-.005em;color:var(--ink-2);padding:9px 13px;border-radius:9px;transition:.15s}
.nav-links a:hover{background:var(--bg-soft)}
.nav-links a:hover,.nav-links a.active{color:var(--brand-strong)}
.nav-links a.active{background:transparent}
.nav-cta{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-cta .signin{font-size:15px;font-weight:500;white-space:nowrap}
.menu-btn{display:none;border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;width:42px;height:42px;cursor:pointer;align-items:center;justify-content:center;color:var(--ink)}
/* ===== mega menu ===== */
.nav-links{align-items:center}
.nav-item{display:flex}
.nav-top,.nav-flat{display:inline-flex;align-items:center;gap:5px;font-size:15px;font-weight:500;letter-spacing:-.005em;color:var(--ink-2);padding:9px 13px;border-radius:9px;transition:.15s;cursor:pointer}
.nav-top .chev{transition:transform .18s;opacity:.55}
.nav-flat.active,.nav-top.active{color:var(--brand-strong)}
.nav-top:hover,.nav-flat:hover,.nav-item:hover .nav-top,.nav-item:focus-within .nav-top{background:var(--bg-soft);color:var(--brand-strong)}
.nav-item:hover .nav-top .chev,.nav-item:focus-within .nav-top .chev{transform:rotate(180deg)}
.mega{position:absolute;top:70px;left:50%;transform:translateX(-50%) translateY(8px);width:min(960px,calc(100vw - 40px));background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 28px 64px -34px rgba(20,16,50,.32),0 2px 8px -6px rgba(20,16,50,.08);padding:30px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s,transform .16s,visibility .16s;z-index:90;display:grid;grid-template-columns:1fr 272px;gap:32px}
.mega::before{content:"";position:absolute;top:-30px;left:0;right:0;height:30px}
.nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 8px}
.mega-grid.cols2{grid-template-columns:repeat(2,1fr)}
.mega-col{display:flex;flex-direction:column}
.mega-h{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);padding:10px 12px 8px}
.mega-link{display:flex;gap:12px;align-items:flex-start;padding:11px 13px;border-radius:11px;transition:.14s}
.mega-link:hover{background:var(--bg-soft)}
.mega-link .mi{flex:0 0 auto;width:37px;height:37px;border-radius:9px;background:var(--bg-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;transition:.14s}
.mega-link:hover .mi{color:var(--brand-strong)}
.mega-link b{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3}
.mega-link i{display:block;font-size:12.5px;color:var(--muted);font-style:normal;line-height:1.38;margin-top:1px}
.mega-feat{position:relative;border-radius:16px;padding:24px;overflow:hidden;color:#F4F6F9;display:flex;flex-direction:column;justify-content:flex-end;min-height:216px;background:#0C0E14;background-image:radial-gradient(420px 300px at 8% 108%,color-mix(in srgb,#5661F5 62%,transparent),transparent 66%),radial-gradient(340px 240px at 96% -12%,color-mix(in srgb,#5661F5 30%,transparent),transparent 70%)}.mega-feat .ey{color:#9AA3FF;opacity:1}.mega-feat a,.mega-feat .go{color:#fff}
.mega-feat .ey{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.mega-feat b{font-size:16.5px;font-weight:700;margin:8px 0 5px;line-height:1.25}
.mega-feat i{font-size:12.5px;font-style:normal;opacity:.92;line-height:1.5}
.mega-feat .go{margin-top:14px;font-size:12.5px;font-weight:700}
.nav-links a.mega-feat,.mega-feat .ey,.mega-feat b,.mega-feat i,.mega-feat .go{color:#fff}
.nav-links a.mega-feat:hover{background:linear-gradient(150deg,#4A54EC,#2E37C9);transform:translateY(-2px)}
@media(max-width:1080px){
  /* The sub-links used to be display:none here, so every page behind the mega menu was reachable on a
     phone only through the footer. Accordion instead: the row still navigates to the parent page, the
     chevron expands the panel in flow. */
  .nav-links .mega{position:static;transform:none;width:auto;max-width:none;opacity:1;visibility:visible;
    pointer-events:auto;display:none;grid-template-columns:minmax(0,1fr);gap:0;padding:2px 0 12px;
    background:transparent;border:0;box-shadow:none;z-index:auto}
  .nav-links .nav-item.open .mega{display:grid}
  /* the desktop reveal is :hover/:focus-within, and a tap leaves both matching — which re-applied
     translateX(-50%) and threw the panel off the left edge. Out-specify it rather than rely on order. */
  .nav-links .nav-item:hover .mega,.nav-links .nav-item:focus-within .mega{transform:none}
  .nav-links .mega::before{display:none}
  .mega-grid,.mega-grid.cols2{grid-template-columns:minmax(0,1fr);gap:0}
  .mega-h{padding:14px 2px 4px}
  .mega-link{padding:10px 2px;gap:10px}
  .mega-link .mi{width:30px;height:30px}
  .mega-link b{font-size:15px}
  .mega-link i{font-size:12.5px}
  .mega-feat{min-height:0;padding:18px;margin-top:10px;border-radius:14px}
  /* a 44px tap target for the chevron, so the row and the disclosure do not fight over one hit box */
  .nav-links .nav-item .nav-top{position:relative;padding-right:50px}
  .nav-links .nav-top .chev{display:block;position:absolute;right:-3px;top:50%;
    width:44px;height:44px;padding:15px;box-sizing:border-box;transform:translateY(-50%);opacity:.55}
  .nav-links .nav-item.open .nav-top .chev{transform:translateY(-50%) rotate(180deg);opacity:.9}
  /* On touch the desktop hover/focus rotate (base rule) drops translateY(-50%) and makes the
     chevron jump off-centre. On mobile, only an actually-open item rotates it; hover/focus on a
     collapsed item keeps it centred and unrotated. */
  .nav-links .nav-item:not(.open):hover .nav-top .chev,
  .nav-links .nav-item:not(.open):focus-within .nav-top .chev{transform:translateY(-50%)}
  .nav-links .nav-item{display:block;width:100%}
  .nav-links .nav-item .nav-top,.nav-links .nav-flat{display:block;width:100%;box-sizing:border-box;text-align:left;font-size:17px;padding:13px 0;border-bottom:1px solid var(--line);border-radius:0;color:var(--ink)}
}
.theme-btn{border:1px solid var(--line-strong);background:var(--surface);border-radius:10px;width:42px;height:42px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);flex:0 0 auto;transition:border-color .15s,color .15s}
.theme-btn:hover{border-color:var(--ink);color:var(--brand)}

/* hero */
.hero{position:relative;overflow:hidden;margin-top:-80px;padding:128px 0 76px;
  background:
    radial-gradient(620px 460px at 88% -10%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 60%),
    radial-gradient(560px 520px at 6% 108%,color-mix(in srgb,var(--violet) 8%,transparent),transparent 60%)}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:60px;align-items:center}
.hero h1{font-size:clamp(46px,6.2vw,80px);line-height:1.0}
.hero h1 em,.page-hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.hero p.lead{font-size:20px;line-height:1.5;color:var(--muted);margin:24px 0 0;max-width:34ch}
.hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero-note{margin-top:22px;font-size:13.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.dot{width:7px;height:7px;border-radius:999px;background:var(--emerald);display:inline-block;flex:0 0 auto}

/* page hero (subpages) */
.page-hero{position:relative;overflow:hidden;margin-top:-80px;padding:160px 0 8px;text-align:center;
  background:radial-gradient(820px 360px at 50% -14%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 60%)}
.page-hero h1{font-size:clamp(38px,5vw,64px);line-height:1.04;max-width:16ch;margin:14px auto 0}
.page-hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.page-hero p{font-size:19px;color:var(--muted);max-width:60ch;margin:20px auto 0}
.page-hero .hero-actions{justify-content:center}

/* hero product mock — flatter, calmer */
.mock{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
.mock-bar .tl{display:flex;gap:6px}
.mock-bar .tl i{width:10px;height:10px;border-radius:999px;background:var(--line-strong);display:block}
.mock-url{margin-left:8px;font-size:12px;color:var(--muted);font-family:"SF Mono",ui-monospace,Menlo,monospace}
.mock-body{display:grid;grid-template-columns:132px 1fr;min-height:326px}
.mock-rail{background:var(--night);padding:16px 12px;display:flex;flex-direction:column;gap:7px}
.mock-rail .r{height:26px;border-radius:7px;background:rgba(255,255,255,.06)}
.mock-rail .r.on{background:color-mix(in srgb,var(--brand) 42%,transparent)}
.mock-canvas{padding:22px;background:var(--surface)}
.mock-kicker{font-size:10.5px;font-weight:700;color:var(--emerald-ink);text-transform:uppercase;letter-spacing:.12em}
.mock-h{height:16px;width:62%;border-radius:5px;background:var(--bg-soft);margin:12px 0}
.mock-h.s{width:42%}
.mock-chips{display:flex;gap:8px;margin:14px 0}
.mock-chips span{height:22px;border-radius:999px;background:var(--emerald-soft);border:1px solid color-mix(in srgb,var(--emerald) 24%,transparent);width:76px}
.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.mock-cards i{display:block;height:92px;border-radius:10px;border:1px solid var(--line);background:var(--bg-soft)}
.mock-score{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--emerald-ink);background:var(--emerald-soft);border:1px solid color-mix(in srgb,var(--emerald) 30%,transparent);padding:6px 12px;border-radius:999px}

/* ===== premium 3D hero (WebGL gem + floating glass) ===== */
.hero-3d{position:relative;width:100%;max-width:540px;margin-inline:auto}
/* Holds the A/B storefront pair now (the WebGL gem is retired). No aspect-ratio/translate:
   the wrapper hugs the pair so the grid's align-items:center lines it up with the headline.
   The old min-width:921px translateY(-60px) was a gem-centring fallback and shoved it high. */
.gem-glow{position:absolute;inset:6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--brand) 30%,transparent),transparent 62%);
  filter:blur(60px);opacity:.55}
.gem-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.gem-fallback{position:absolute;inset:0;margin:auto;width:58%;height:58%;filter:drop-shadow(0 24px 40px rgba(194,65,12,.28))}
.gem-canvas + .gem-fallback{display:none}          /* hidden once WebGL canvas is live */
.no-webgl .gem-canvas{display:none}
.no-webgl .gem-fallback{display:block}
.gem-shadow{position:absolute;left:50%;bottom:11%;width:42%;height:26px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(20,22,26,.20),transparent 72%);filter:blur(9px);pointer-events:none}
.float-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--surface) 82%,transparent);
  backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:13px;padding:10px 14px;font-size:13px;font-weight:600;
  color:var(--ink);box-shadow:var(--shadow);white-space:nowrap;animation:chipfloat 6.5s ease-in-out infinite}
.float-chip b{color:var(--brand-strong)}
.float-chip .ck{width:8px;height:8px;border-radius:999px;background:var(--emerald);flex:0 0 auto}
.float-chip .ck.spd{background:var(--brand)}
.float-chip.chip-a{top:12%;right:-2%;animation-delay:-1s}
.float-chip.chip-b{bottom:16%;left:-4%}
@keyframes chipfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){.float-chip{animation-duration:9s}}
@media(max-width:920px){.hero-3d{max-width:400px}.float-chip.chip-a{right:2%}.float-chip.chip-b{left:2%}}

/* logos / proof strip */
.logos{padding:56px 0;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}
.logos p{text-align:center;font-size:13px;color:var(--muted);margin:0}
.logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:42px}
.logo-row span{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:22px;color:var(--line-strong);font-weight:500}

/* section base — vertical rhythm from the --space-section scale (see :root) */
section.block{padding:var(--space-section) 0}
.block.flush-top{padding-top:0}.block.flush-bottom{padding-bottom:0}
.block.snug-top{padding-top:var(--space-snug)}.block.snug-bottom{padding-bottom:var(--space-snug)}
.block.tight-top{padding-top:var(--space-tight)}.block.tight-bottom{padding-bottom:var(--space-tight)}
.sec-head{max-width:660px}
.sec-head.center{margin-inline:auto}
/* Section head beside a figure. `.sec-head` caps itself at 660px inside a 1120px wrap, so a block
   with nothing on the right reads as if the page is falling to one side. This pairs the copy with a
   drawing of what the copy claims, rather than widening the measure (which would hurt reading). */
.sec-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px;align-items:center}
.sec-split .sec-head{max-width:none}
.sec-fig{margin:0;color:inherit}
.sec-fig>svg{width:100%;height:auto;display:block}
/* Attribution under a figure: which specialist owns what you are looking at. */
.fig-by{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13px;color:var(--muted)}
.fig-by svg{width:20px;height:27px;flex:0 0 auto;color:var(--ink)}
.fig-by b{color:var(--ink);font-weight:700}
/* A full-width figure under a centred section head. */
.gx-fig{margin:34px 0 0;color:inherit}
.gx-fig>svg{width:100%;height:auto;display:block}
.gx-fig .fig-by{justify-content:center}
/* The named agent team. One card per specialist, each figure cut from the logo mark. */
.agent-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:38px}
.agent{display:flex;gap:12px;align-items:flex-start;padding:18px 16px;border:1px solid var(--line);
  border-radius:14px;background:var(--surface);color:var(--ink)}
.agent .agent-fig{flex:0 0 auto;width:46px;height:62px;margin-top:-4px}
.agent b{display:block;font-size:16px;font-weight:700;line-height:1.2}
.agent .agent-role{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-strong);margin-top:3px}
.agent i{display:block;font-style:normal;font-size:13px;line-height:1.5;color:var(--muted);margin-top:8px}
@media(max-width:1080px){.agent-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.agent-row{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){.sec-split{grid-template-columns:minmax(0,1fr);gap:28px}.sec-fig{max-width:440px}}
@media(min-width:901px){
  .sec-split .sec-fig{position:relative}
  .sec-split .sec-fig .fig-by{position:absolute;top:calc(100% + 14px);left:0;right:0;margin-top:0}
}
.sec-head h2{font-size:clamp(30px,3.8vw,46px);line-height:1.08;margin-top:14px}
.sec-head p{font-size:18px;color:var(--muted);margin:16px 0 0}

/* three pillars / feature cards */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.pillars.g2{grid-template-columns:repeat(2,1fr);max-width:880px;margin-left:auto;margin-right:auto}
.pillar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:.18s}
.pillar:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.pi{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);color:var(--brand);margin-bottom:18px}
.pillar h3{font-size:22px;margin-bottom:8px}
.pillar p{color:var(--muted);font-size:15px;margin:0 0 16px}
.link{font-family:Inter;font-weight:600;font-size:14.5px;color:var(--brand-strong);display:inline-flex;gap:6px;align-items:center}
.link:hover{gap:9px}

/* showcase — committed dark band */
.showcase{background:var(--night);color:#F3EEE7;border-radius:var(--radius-lg);padding:60px;display:grid;grid-template-columns:1fr 1.08fr;gap:52px;align-items:center;overflow:hidden;
  background-image:radial-gradient(560px 320px at 94% -6%,color-mix(in srgb,var(--brand) 28%,transparent),transparent 60%),radial-gradient(520px 340px at 6% 108%,color-mix(in srgb,var(--violet) 24%,transparent),transparent 60%)}
.showcase.flip{grid-template-columns:1.08fr 1fr}
.showcase .eyebrow{color:var(--on-night)}
.showcase h2{font-size:clamp(28px,3.4vw,40px);color:#fff;margin-top:14px}
.showcase p{color:#B4A996;font-size:17px;margin:16px 0 26px}
.showcase ul{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:12px}
.showcase li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:#E7E0D6}
.showcase li svg{flex:0 0 auto;margin-top:3px;color:var(--brand)}
/* dark-showcase CTAs: light primary + on-dark ghost (was only in index.html inline; other pages using .showcase inherited dark-on-dark) */
.showcase .btn-primary{background:#fff;color:var(--night)}
.showcase .btn-primary:hover{background:#f0e9ff}
.showcase .btn-ghost{border-color:rgba(255,255,255,.28);color:#fff}
.showcase .btn-ghost:hover{border-color:#fff}
.shot{background:var(--surface);border-radius:16px;box-shadow:0 30px 60px -22px rgba(0,0,0,.5);overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.shot .bar{height:38px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 14px}
.shot .bar i{width:9px;height:9px;border-radius:999px;background:var(--line-strong)}
.shot-inner{padding:20px;display:grid;gap:12px}
.shot-inner .big{height:118px;border-radius:12px;border:1px solid var(--line);position:relative;overflow:hidden;
  background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 30%,#fff),color-mix(in srgb,var(--pink) 24%,#fff) 52%,color-mix(in srgb,var(--violet) 22%,#fff))}
.shot-inner .big::after{content:"";position:absolute;left:16px;bottom:14px;width:38%;height:9px;border-radius:6px;background:rgba(255,255,255,.75)}
.shot-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.shot-row i{height:58px;border-radius:10px;border:1px solid var(--line);display:block;background:var(--bg-soft)}
.shot-row i:nth-child(1){background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 22%,#fff),#fff)}
.shot-row i:nth-child(2){background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 15%,#fff),#fff)}
.shot-row i:nth-child(3){background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 9%,#fff),#fff)}

/* industries */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px}
.ind{position:relative;border-radius:var(--radius);overflow:hidden;min-height:150px;border:1px solid rgba(0,0,0,.05);
  display:flex;align-items:flex-end;padding:18px;color:#fff;font-family:Inter;font-weight:600;font-size:15.5px;transition:.2s}
.ind:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.ind::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 34%,rgba(20,16,12,.6));z-index:0}
.ind span{position:relative;z-index:1}
.ind.c1{background:linear-gradient(145deg,#FF8FA8,#E24E86)}  /* rose */
.ind.c2{background:linear-gradient(145deg,#34C79A,#109E7A)}  /* teal */
.ind.c3{background:linear-gradient(145deg,#FBBB53,#E0872C)}  /* amber */
.ind.c4{background:linear-gradient(145deg,#FF8A5C,#E0552F)}  /* coral */
.ind.c5{background:linear-gradient(145deg,#5AD1C0,#2AA0B8)}  /* mint-sky */
.ind.c6{background:linear-gradient(145deg,#B07CF0,#7B3FE4)}  /* violet */
.ind.c7{background:linear-gradient(145deg,#7E8CF7,#5A4FE0)}  /* indigo */
.ind.c8{background:linear-gradient(145deg,#63B8F6,#2E7FE0)}  /* sky */

/* engines tabs */
.engines{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:36px}
.tab{font-family:Inter;font-weight:600;font-size:14.5px;padding:10px 18px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);cursor:pointer;transition:.15s;color:var(--ink)}
.tab.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tab .tdot{display:inline-block;width:6px;height:6px;border-radius:999px;background:var(--line-strong);margin-left:7px;vertical-align:middle}
.tab.active .tdot{background:currentColor;opacity:.5}
.pbadge{font-family:Inter;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:999px;vertical-align:middle;margin-left:10px}
.pbadge.live{background:var(--emerald-soft);color:var(--emerald-ink);border:1px solid color-mix(in srgb,var(--emerald) 30%,transparent)}
.pbadge.soon{background:var(--bg-soft);color:var(--muted);border:1px solid var(--line-strong)}
.tab-copy h3 .pbadge{position:relative;top:-2px}
.tab-panel{display:none;margin-top:30px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.tab-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:0}
.tab-copy{padding:44px}
.tab-copy h3{font-size:28px;margin-bottom:14px}
.tab-copy p{color:var(--muted);margin:0 0 22px}
.tab-copy ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.tab-copy li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.tab-copy li svg{flex:0 0 auto;margin-top:3px;color:var(--brand)}
.tab-visual{background:var(--bg-soft);border-left:1px solid var(--line);padding:36px;display:flex;align-items:center;justify-content:center}
.tab-visual .glass{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:18px;display:grid;gap:11px}
.tab-visual .glass .l{height:12px;border-radius:5px;background:var(--bg-soft)}
.tab-visual .glass .l.w{width:88%}.tab-visual .glass .l.m{width:62%}.tab-visual .glass .l.s{width:40%}
.tab-visual .glass .blk{height:80px;border-radius:10px;border:1px solid var(--line);
  background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 26%,#fff),color-mix(in srgb,var(--violet) 20%,#fff))}
.tv{width:100%;max-width:346px;border-radius:12px;border:1px solid var(--line);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-sm);position:relative}
.tv .tvtop{display:flex;height:24px;align-items:center;gap:5px;padding:0 11px;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.tv .tvtop i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--line) 55%,var(--muted))}
.tv .tvpic{display:block;height:186px;background-size:cover;background-position:center}
.tv .tvbadge{position:absolute;left:13px;bottom:13px;font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--brand-strong);box-shadow:0 5px 14px -6px rgba(20,16,50,.45)}
.tv.wide{max-width:none}
.tv.wide .tvpic{height:300px}
.ec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
.ec-card{display:block;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:24px;transition:.16s}
.ec-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.ec-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ec-i{width:34px;height:34px;border-radius:10px;background:var(--bg-soft);color:var(--brand);display:flex;align-items:center;justify-content:center}
.ec-badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--emerald-ink);background:var(--emerald-soft);border:1px solid color-mix(in srgb,var(--emerald) 30%,transparent);padding:3px 9px;border-radius:999px}
.ec-badge.soon{color:var(--muted);background:var(--bg-soft);border-color:var(--line-strong)}
.ec-card h3{font-size:17px;margin:0 0 6px}
.ec-card p{color:var(--muted);font-size:13.5px;line-height:1.5;margin:0 0 14px}
.ec-go{font-size:13px;font-weight:600;color:var(--brand-strong)}
@media(max-width:820px){.ec-grid{grid-template-columns:1fr}}

/* resources / dev */
.res{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.res .code{background:var(--night);border-radius:16px;padding:24px;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:13px;line-height:1.75;color:#E7E0D6;box-shadow:var(--shadow);overflow:auto}
.res .code .c1{color:#B4A996}.res .code .c2{color:var(--gold)}.res .code .c3{color:#3ED6AC}.res .code .c4{color:#8A93FF}

/* testimonial */
.quote{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:60px;text-align:center;box-shadow:var(--shadow-sm)}
.quote .mark{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:60px;color:var(--brand);line-height:0;height:30px;display:block}
.quote blockquote{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:500;font-size:clamp(24px,3vw,34px);line-height:1.3;margin:18px auto 26px;max-width:780px}
.quote .who{font-size:15px;color:var(--muted)}
.quote .who b{color:var(--ink)}

/* news / cards */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.18s;display:block}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--line-strong)}
.card .thumb{height:150px;background:var(--bg-soft)}
.card.t1 .thumb{background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 22%,var(--bg-soft)),var(--bg-soft))}
.card.t2 .thumb{background:linear-gradient(145deg,color-mix(in srgb,var(--emerald) 22%,var(--bg-soft)),var(--bg-soft))}
.card.t3 .thumb{background:linear-gradient(145deg,var(--night),color-mix(in srgb,var(--brand) 30%,var(--night)))}
.card.t4 .thumb{background:linear-gradient(145deg,color-mix(in srgb,var(--gold) 26%,var(--bg-soft)),var(--bg-soft))}
.card.t5 .thumb{background:linear-gradient(145deg,color-mix(in srgb,var(--emerald) 28%,var(--bg-soft)),var(--bg-soft))}
.card.t6 .thumb{background:linear-gradient(145deg,var(--night-2),color-mix(in srgb,var(--gold) 26%,var(--night-2)))}
.card .body{padding:22px}
.card .tag{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-strong)}
.card h3{font-size:19px;margin:10px 0 8px;line-height:1.25}
.card p{font-size:14px;color:var(--muted);margin:0}

/* final cta */
.final{background:var(--night);color:#fff;border-radius:var(--radius-lg);padding:70px 56px;text-align:center;position:relative;overflow:hidden;
  background-image:radial-gradient(620px 340px at 30% -14%,color-mix(in srgb,var(--brand) 30%,transparent),transparent 60%),radial-gradient(620px 360px at 82% 120%,color-mix(in srgb,var(--violet) 26%,transparent),transparent 60%)}
.final h2{font-size:clamp(32px,4.2vw,52px);color:#fff;text-wrap:balance}
.final p{color:#B4A996;font-size:18px;margin:16px auto 30px;max-width:46ch;text-wrap:balance}
.final .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.signup{margin-top:36px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.signup input{height:48px;width:min(360px,80vw);border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;padding:0 20px;font:inherit;font-size:15px}
.signup input::placeholder{color:#B4A996}
.form-note{margin-top:14px;font-size:14px;font-weight:600;color:var(--emerald-ink);width:100%}
.signup .form-note{color:#fff;flex-basis:100%;text-align:center}

/* ===== pricing ===== */
.bill-toggle{display:inline-flex;align-items:center;gap:6px;margin:28px auto 0;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:5px}
.bill-toggle button{border:0;background:transparent;font:inherit;font-weight:600;font-size:14px;padding:8px 18px;border-radius:999px;cursor:pointer;color:var(--muted)}
.bill-toggle button.active{background:var(--ink);color:var(--bg)}
.bill-toggle .save{color:var(--emerald-ink);font-size:12.5px;font-weight:700;padding-right:6px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px;align-items:start}
.price-partner{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:20px;padding:20px 26px;border:1px solid var(--line-strong);border-radius:var(--radius-lg);background:var(--bg-soft);flex-wrap:wrap;transition:border-color .18s ease}
.price-partner:hover{border-color:var(--ink)}
.price-partner span:first-child{font-size:14.5px;color:var(--ink-2);max-width:66ch;line-height:1.5}
.price-partner .pp-cta{font-size:14px;font-weight:600;color:var(--brand-strong);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.price-partner:hover .pp-cta .arrow{transform:translateX(3px)}
@media(max-width:720px){.price-partner{flex-direction:column;align-items:flex-start;gap:12px}}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:30px;display:flex;flex-direction:column;gap:18px}
.price-card.featured{border-color:var(--brand);box-shadow:0 20px 50px -24px color-mix(in srgb,var(--brand) 60%,transparent);position:relative}
.price-badge{position:absolute;top:-12px;left:30px;background:var(--brand);color:var(--on-brand);font-size:11.5px;font-weight:700;padding:4px 12px;border-radius:999px}
.price-card h3{font-size:21px}
.price-card .desc{color:var(--muted);font-size:14px;margin:0;min-height:40px}
.price-amt{display:flex;align-items:baseline;gap:6px}
.price-amt .num{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:42px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.price-amt .per{color:var(--muted);font-size:13.5px}
.price-card ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.price-card li{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.price-card li svg{flex:0 0 auto;margin-top:3px;color:var(--brand)}
.price-card li.off{color:var(--muted)}
.price-card li.off svg{color:var(--line-strong)}

/* compare table */
.compare{margin-top:52px;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.compare table{width:100%;border-collapse:collapse}
.compare th,.compare td{text-align:left;padding:15px 22px;border-bottom:1px solid var(--line);font-size:14.5px}
.compare thead th{background:var(--bg-soft);font-family:Inter;font-weight:700;font-size:12.5px}
.compare tbody th{font-weight:500;color:var(--ink)}
.compare td{text-align:center;color:var(--muted)}
.compare td.yes{color:var(--emerald-ink);font-weight:700}
.compare tr:last-child th,.compare tr:last-child td{border-bottom:0}
.compare .grp td{background:var(--bg-soft);font-family:Inter;font-weight:700;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-align:left}

/* faq */
.faq{display:grid;gap:10px;margin-top:38px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2px 22px}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{cursor:pointer;list-style:none;font-family:Inter;font-weight:600;font-size:16.5px;padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:24px;color:var(--brand);font-weight:400;transition:.2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin:0 0 20px;color:var(--muted);font-size:15px;max-width:68ch}

/* stat row */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);margin-top:44px;border-top:1px solid var(--line)}
.stat{padding:30px 30px 8px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat-row.cols3{grid-template-columns:repeat(3,1fr)}
@media(max-width:600px){.stat-row.cols3{grid-template-columns:1fr}.stat-row.cols3 .stat{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:22px}.stat-row.cols3 .stat:first-child{border-top:0}}
.stat .n{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:42px;font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .n .su{font-size:19px;color:var(--muted);font-weight:600}
.stat .l{color:var(--muted);font-size:13.5px;margin-top:14px;line-height:1.55}
/* The fact strip's divider is a border-LEFT, which only reads as a divider while the facts sit in
   one horizontal row. Narrower layouts kept it and reset it for some children but not others, so
   the left edge went ragged. One column instead: figure in a fixed column so all of them line up,
   sentence beside it, hairline between rows. Never ragged, and about half as tall.
   Split by variant because the 3-up strip stays 3-up further down than the 4-up one. */
@media(max-width:1080px){
  .stat-row:not(.cols3){  grid-template-columns:minmax(0,1fr);margin-top:30px}
  .stat-row:not(.cols3) .stat{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:baseline;
    column-gap:16px;padding:15px 0;border-left:0;border-top:1px solid var(--line);margin-top:-1px}
  .stat-row:not(.cols3) .stat:first-child{border-top:0;margin-top:0}
  .stat-row:not(.cols3) .stat .n{font-size:27px}
  .stat-row:not(.cols3) .stat .n .su{font-size:14px}
  .stat-row:not(.cols3) .stat .l{margin-top:0;font-size:13px;line-height:1.5}
}
@media(max-width:600px){
  .stat-row.cols3{  grid-template-columns:minmax(0,1fr);margin-top:30px}
  .stat-row.cols3 .stat{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:baseline;
    column-gap:16px;padding:15px 0;border-left:0;border-top:1px solid var(--line);margin-top:-1px}
  .stat-row.cols3 .stat:first-child{border-top:0;margin-top:0}
  .stat-row.cols3 .stat .n{font-size:27px}
  .stat-row.cols3 .stat .n .su{font-size:14px}
  .stat-row.cols3 .stat .l{margin-top:0;font-size:13px;line-height:1.5}
}


/* values / steps */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.value{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.value .vn{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:30px;color:var(--brand);line-height:1}
.value h3{font-size:20px;margin:14px 0 8px}
.value p{color:var(--muted);font-size:15px;margin:0}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.member{text-align:center}
.member .ava{aspect-ratio:1;border-radius:16px;border:1px solid var(--line);margin-bottom:14px}
.member .ava.a1{background:linear-gradient(145deg,#E0906E,#B4552F)}
.member .ava.a2{background:linear-gradient(145deg,#6E8A7C,#3C5347)}
.member .ava.a3{background:linear-gradient(145deg,#D7B26A,#A6813A)}
.member .ava.a4{background:linear-gradient(145deg,#4A4238,#211B15)}
.member b{font-family:Inter;font-weight:600;font-size:16px;display:block}
.member span{color:var(--muted);font-size:14px}

/* steps (how it works) */
.steps{display:grid;gap:14px;margin-top:44px}
.step{display:grid;grid-template-columns:56px 1fr;gap:20px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.step .sn{width:46px;height:46px;border-radius:12px;background:var(--bg-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:22px;font-weight:600}
.step h3{font-size:20px;margin:0 0 6px}
.step p{color:var(--muted);font-size:15px;margin:0}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:start}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-family:Inter;font-weight:600;font-size:14px}
.field input,.field select,.field textarea{font:inherit;font-size:15px;border:1px solid var(--line-strong);border-radius:10px;padding:12px 14px;background:var(--surface);color:var(--ink)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--brand)}
.field textarea{min-height:118px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-side{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-lg);padding:32px}
.contact-side ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:18px}
.contact-side li{display:flex;gap:12px;align-items:flex-start}
.contact-side li svg{flex:0 0 auto;margin-top:3px;color:var(--brand)}
.contact-side li b{display:block;font-family:Inter;font-weight:600}
.contact-side li span{color:var(--muted);font-size:14.5px}

/* blog featured */
.feature-post{display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;margin-top:44px}
.feature-post .fimg{min-height:320px;background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 50%,var(--night)),var(--night))}
.feature-post .fbody{padding:48px;display:flex;flex-direction:column;justify-content:center}
.feature-post .tag{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-strong)}
.feature-post h2{font-size:clamp(26px,3vw,38px);margin:12px 0 14px;line-height:1.12}
.feature-post p{color:var(--muted);margin:0 0 22px}

/* footer */
footer{padding:68px 0 40px;border-top:1px solid var(--line)}
.app-dl{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.app-btn{display:inline-flex;align-items:center;gap:11px;padding:9px 16px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink);transition:.16s}
.app-btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.app-btn svg{flex:0 0 auto;opacity:.9}
.app-btn span{display:flex;flex-direction:column;line-height:1.15;font-size:14px;font-weight:600}
.app-btn small{font-size:9.5px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:34px}
.foot-brand p{color:var(--muted);font-size:14px;margin:14px 0 0;max-width:30ch}
.foot-col h4{font-family:Inter;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0 0 12px}
.foot-col a{display:block;font-size:14px;color:var(--muted);padding:5px 0}
.foot-col a:hover{color:var(--brand-strong)}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);flex-wrap:wrap}
.foot-social{display:flex;gap:14px}

/* built-by-GemPages stat trio (inside dark showcase) */
.gp-stats{display:flex;gap:36px;margin:24px 0 28px;flex-wrap:wrap}
.gp-stats>div{display:flex;flex-direction:column;gap:5px}
.gp-n{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:30px;font-weight:500;color:#fff;line-height:1}
.gp-l{font-size:12.5px;color:#B4A996;max-width:17ch;line-height:1.35}

/* platform-layer badge — "on top of Shopify" */
.plat{display:inline-flex;align-items:center;gap:8px;font-family:Inter;font-size:12.5px;font-weight:600;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:6px 14px 6px 8px;margin-bottom:22px}
.plat .pill{display:inline-flex;align-items:center;gap:6px;background:var(--bg-soft);border-radius:999px;padding:3px 10px;font-size:11.5px;color:var(--muted)}
.plat b{color:var(--ink);font-weight:700}
.layer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.layer{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.layer .lh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.layer .lh .pi{margin:0}
.layer h3{font-size:19px}
.layer p{color:var(--muted);font-size:15px;margin:0}
.layer .foot-note{margin-top:14px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px}
.layer .foot-note .dot{background:var(--emerald)}

@media(max-width:1080px){
  .nav-links,.nav-cta .signin{display:none}
  .menu-btn{display:inline-flex}
  .hero-grid,.showcase,.showcase.flip,.res,.tab-panel.active,.contact-grid,.feature-post,.layer-grid{grid-template-columns:1fr}
  .hero{padding:152px 0 60px}
  .page-hero{padding:152px 0 26px}
  .showcase,.final{padding:40px 28px;border-radius:20px}
  .pillars,.pillars.g2,.news-grid,.price-grid,.value-grid,.stat-row{grid-template-columns:1fr}
  .ind-grid,.team-grid{grid-template-columns:repeat(2,1fr)}
  .tab-visual{border-left:0;border-top:1px solid var(--line)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .quote{padding:36px 24px}
  .feature-post .fimg{min-height:200px}
  .feature-post .fbody{padding:32px}
  .compare{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .compare table{min-width:600px}
  .gp-stats{gap:20px}
  .gp-stats>div{min-width:44%}
}
@media(max-width:560px){
  .ind-grid,.foot-grid,.team-grid,.field-row{grid-template-columns:1fr}
  .nav-cta .btn-primary{display:none}
  .hero-actions,.final .row{flex-direction:column;align-items:stretch}
  .hero-actions .btn,.final .row .btn{width:100%;justify-content:center}
  .sec-head h2,.hero p.lead{max-width:none}
  .faq summary{padding-block:4px}
}

/* why-comparison: stack the table into per-row cards on mobile (scoped to #why) */
@media(max-width:640px){
  #why .compare table,#why .compare tbody,#why .compare tr,#why .compare th,#why .compare td{display:block;width:auto;min-width:0}
  #why .compare thead{display:none}
  #why .compare tr{padding:18px 20px;border-bottom:1px solid var(--line)}
  #why .compare tr:last-child{border-bottom:0}
  #why .compare tbody th{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:600;font-size:19px;color:var(--ink);padding:0 0 12px}
  #why .compare td{text-align:left;border:0;padding:5px 0;font-size:14.5px}
  #why .compare td::before{display:block;font-family:Inter;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
  #why .compare td:nth-of-type(1){color:var(--muted)}
  #why .compare td:nth-of-type(1)::before{content:"Typical builders";color:var(--muted)}
  #why .compare td:nth-of-type(2){color:var(--emerald-ink);font-weight:600}
  #why .compare td:nth-of-type(2)::before{content:"GemBoss";color:var(--emerald)}
}

/* mobile nav dropdown */
@media(max-width:1080px){
  .nav-inner{position:relative}
  .nav-links{position:absolute;top:70px;left:0;right:0;flex-direction:column;background:var(--bg);
    border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 42px -14px rgba(20,16,50,.30);padding:12px;gap:2px;margin:0;display:none;z-index:60}
  header.nav.open .nav-links{display:flex}
  /* the dropdown is absolutely positioned inside a sticky header, so anything past the viewport is
     unreachable by page scroll. An expanded panel is ~670px, which does not fit a small phone. */
  .nav-links{max-height:calc(100dvh - 96px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  header.nav.open .menu-btn{border-color:var(--ink)}
  .nav-links a{padding:13px 0;font-size:17px;border-bottom:1px solid var(--line);border-radius:0}
  .nav-links a:last-child{border-bottom:0}
  .nav-links .menu-cta{display:block;width:100%;box-sizing:border-box;margin-top:10px;background:var(--ink);color:var(--on-brand);text-align:center;
    border-radius:999px;padding:14px 20px;line-height:1.2;border-bottom:0;font-weight:600;font-size:16px}
  .nav-links .menu-cta:hover{background:var(--brand-strong)}
}
.menu-cta{display:none}

/* ===== embedded photography + storefront gallery (added) ===== */
.ind.c1{background-image:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.05)),url(/assets/img/beauty2.jpg);background-size:cover;background-position:center}
.ind.c2{background-image:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.05)),url(/assets/img/wellness1.jpg);background-size:cover;background-position:center}
.ind.c5{background-image:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.05)),url(/assets/img/jewel1.jpg);background-size:cover;background-position:center}
.ind.c3{background-image:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.05)),url(/assets/img/supp1.jpg);background-size:cover;background-position:center}
.ind.c6{background-image:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.05)),url(/assets/img/food1.jpg);background-size:cover;background-position:center}
.ind.c4{background-image:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.05)),url(/assets/img/supp1.jpg);background-size:cover;background-position:center}
.ind.c8{background-image:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.05)),url(/assets/img/jewel1.jpg);background-size:cover;background-position:center}
.ind.c7{background-image:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.05)),url(/assets/img/home1.jpg);background-size:cover;background-position:center}
.shot-inner .big{background-image:url(/assets/img/store-mock.svg);background-size:cover;background-position:top center}
.shot-inner .big::after{display:none}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:48px}
.gcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:.2s}
.gcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.gcard .gbar{height:34px;display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.gcard .gbar i{width:8px;height:8px;border-radius:999px;background:var(--line-strong)}
.gcard .gbar .gurl{margin-left:8px;font-size:11px;color:var(--muted);font-family:"SF Mono",ui-monospace,Menlo,monospace}
.gphoto{height:190px;background-size:cover;background-position:center;position:relative}
.gphoto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(8,10,18,.42))}
.gphoto .gtitle{position:absolute;left:16px;bottom:14px;z-index:1;color:#fff;font-weight:700;font-size:16px;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.gphoto .gcta{position:absolute;right:16px;bottom:14px;z-index:1;font-size:11px;font-weight:700;color:#fff;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35);padding:5px 12px;border-radius:999px}
.gbody{padding:16px 18px 20px;display:grid;gap:9px}
.gbody .gh{height:12px;width:58%;border-radius:5px;background:var(--grad)}
.gbody .gl{height:8px;border-radius:4px;background:var(--bg-soft)}.gbody .gl.s{width:42%}
.grow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:2px}
.grow i{height:46px;border-radius:8px;background:var(--bg-soft);border:1px solid var(--line);display:block}
.gmeta{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.gscore{font-size:11.5px;font-weight:700;color:var(--emerald-ink);background:var(--emerald-soft);border:1px solid color-mix(in srgb,var(--emerald) 30%,transparent);padding:3px 10px;border-radius:999px}
.gcat{font-size:12px;font-weight:600;color:var(--muted)}
.gphoto.g1{background-image:url(/assets/img/store-mock.svg);background-size:cover;background-position:top center}
.gphoto.g2{background-image:url(/assets/img/fitness2.jpg)}
.gphoto.g3{background-image:url(/assets/img/store-mock.svg);background-size:cover;background-position:top center}
@media(max-width:920px){.gallery{grid-template-columns:1fr}}

/* ==== (d) fill remaining slots ==== */
#heroStack .wf .row.imgs i:nth-child(1){background:url(/assets/img/beauty2.jpg);background-size:cover;background-position:center}
#heroStack .wf .row.imgs i:nth-child(2){background:url(/assets/img/store-mock.svg);background-size:cover;background-position:center}
#heroStack .wf .row.imgs i:nth-child(3){background:url(/assets/img/jewel1.jpg);background-size:cover;background-position:center}
.flow-mock.cap .tilt .b.hero{background:url(/assets/img/store-mock.svg);background-size:cover;background-position:center}


/* ===== blog article ===== */
.article{max-width:720px;margin:0 auto;padding:40px 0}
.a-cat{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-strong)}
.article h1{font-size:clamp(32px,3.3vw,44px);line-height:1.08;margin:16px 0 0;letter-spacing:-.02em}
.a-dek{font-size:20px;line-height:1.5;color:var(--muted);margin:18px 0 0}
.a-meta{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:26px 0 0;font-size:14px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:30px}
.a-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-strong)}
.a-body{margin-top:36px;font-size:17.5px;line-height:1.72;color:var(--ink-2)}
.a-body h2{font-size:26px;line-height:1.25;color:var(--ink);margin:46px 0 0;letter-spacing:-.01em}
.a-body h3{font-size:19px;color:var(--ink);margin:32px 0 0}
.a-body p{margin:18px 0 0}
.a-body ul,.a-body ol{margin:18px 0 0;padding-left:22px}
.a-body li{margin:9px 0 0}
.a-body strong{color:var(--ink);font-weight:600}
.a-body blockquote{margin:30px 0 0;padding:6px 0 6px 22px;border-left:3px solid var(--brand);color:var(--ink);font-size:20px;line-height:1.5;font-weight:500}
.a-body code{background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-size:14.5px;font-family:ui-monospace,"SF Mono",Menlo,monospace}
.a-back{display:inline-flex;align-items:center;gap:7px;margin-bottom:36px;font-weight:600;color:var(--brand-strong);font-size:14.5px}
.a-cta{margin-top:56px;padding:34px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-soft);text-align:center}
.a-cta h3{font-size:22px;color:var(--ink);margin:0}
.a-cta p{color:var(--muted);margin:10px auto 20px;max-width:44ch}


/* compact, content-first hero for decision pages (pricing, contact) — no gem, fills to top */
.hero.compact-hero{margin-top:-80px;padding:120px 0 34px;text-align:center}
.compact-hero .ph-head{max-width:680px;margin-inline:auto}
.compact-hero h1{font-size:clamp(34px,4.4vw,52px);line-height:1.06}
.compact-hero p.lead{margin:16px auto 0;max-width:56ch}
.compact-hero .bill-toggle{margin-top:24px;display:inline-flex}
/* compact-hero is a centred hero, so its actions row and note must centre too —
   the base .hero-actions/.hero-note default to flex-start for the left-aligned home hero,
   which left the buttons and note hanging off-centre under the centred headline. */
.compact-hero .hero-actions{justify-content:center}
.compact-hero .hero-note{justify-content:center}


/* engine-page hero: a product mockup instead of the gem (varies the format, more relevant) */
.hero-tv{display:flex;align-items:center;justify-content:center;padding:6px}
.hero-tv .tv{max-width:470px;width:100%;box-shadow:0 34px 74px -32px rgba(20,16,50,.4),0 4px 12px -6px rgba(20,16,50,.1)}
.hero-tv .tvpic{height:286px}


/* /data hero: compact data-guarantee fact strip */
.data-facts{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:34px;justify-content:center}
.data-facts span{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.4;color:var(--muted);padding-left:15px;border-left:2px solid var(--brand)}
.data-facts b{color:var(--ink);font-weight:650;font-size:15px}
/* animated line-art hero gem (matches logo) — premium, replaces the 3D canvas */
.hero-3d .gem-canvas,.hero-3d .gem-fallback{display:none!important}
.hero-3d{display:flex;align-items:center;justify-content:center}
.gemwrap{width:76%;animation:gemfloat 5s ease-in-out infinite;will-change:transform}
.gem-line{width:100%;height:auto;overflow:visible}
.gem-line path{stroke:var(--ink);fill:none;stroke-linejoin:round;stroke-linecap:round}
.gl-outline{stroke-width:2.4;stroke-dasharray:520;stroke-dashoffset:520;animation:gemdraw 1.15s .1s cubic-bezier(.6,0,.2,1) forwards}
.gl-facet{stroke-width:1.5;stroke-dasharray:340;stroke-dashoffset:340;animation:gemdraw 1s cubic-bezier(.6,0,.2,1) forwards}
.gl-f1{animation-delay:.55s}.gl-f2,.gl-f3{animation-delay:.68s}.gl-f4,.gl-f5{animation-delay:.82s}
.gl-table{fill:var(--brand);opacity:0;animation:gemtin .6s 1.2s ease forwards}
.gl-sheen{fill:#fff;opacity:0;animation:gemshn 3.6s 1.8s ease-in-out infinite}
@keyframes gemdraw{to{stroke-dashoffset:0}}
@keyframes gemtin{to{opacity:.13}}
@keyframes gemshn{0%,100%{opacity:0}50%{opacity:.26}}
@keyframes gemfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media(prefers-reduced-motion:reduce){.gl-outline,.gl-facet{stroke-dashoffset:0;animation:none}.gl-table{opacity:.13;animation:none}}
/* mega menu — airier, modern: fewer words, more breathing room */
.mega-link{align-items:center;padding:12px 14px;gap:13px}
.mega-link b{font-size:14.5px;letter-spacing:-.005em}
.mega-link i{font-size:12.5px;margin-top:2px;line-height:1.35}
.mega-h{font-size:10.5px;letter-spacing:.15em;padding:12px 14px 8px}
.mega-grid{gap:4px 12px}
.mega-link .mi{width:34px;height:34px;border-radius:10px}
/* freemium + traffic-scaled pricing */
.price-grid{grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1080px){.price-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.price-grid{grid-template-columns:1fr}}
.price-traffic{margin:-6px 0 16px;font-size:13px;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line)}
.price-traffic b{color:var(--ink);font-weight:600}
.price-promise{display:flex;gap:12px;align-items:flex-start;margin-top:20px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-soft);font-size:14px;color:var(--ink-2);line-height:1.5}
.price-promise svg{flex:0 0 auto;margin-top:2px;color:var(--brand-strong)}
.price-promise b{color:var(--ink)}
/* contact: what happens next */
.next-steps{counter-reset:nx;list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.next-steps li{counter-increment:nx;position:relative;padding:16px 20px 16px 56px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);font-size:15px;color:var(--ink-2);line-height:1.55}
.next-steps li::before{content:counter(nx);position:absolute;left:18px;top:16px;width:24px;height:24px;border-radius:50%;
  background:var(--ink);color:var(--bg);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.next-steps li b{color:var(--ink)}
.nx-alt{margin-top:18px;font-size:14.5px;color:var(--muted)}
.nx-alt a{color:var(--brand-strong);font-weight:600}
/* changelog entries */
.cl-release{margin-top:34px}
.cl-date{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.cl-items{display:grid;gap:2px;margin-top:6px}
.cl-item{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.cl-item:last-child{border-bottom:0}
.cl-item div{font-size:15px;color:var(--ink-2);line-height:1.6}
.cl-item b{color:var(--ink);font-weight:600}
.cl-tag{flex:0 0 auto;min-width:74px;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 9px;border-radius:999px;margin-top:2px}
.cl-tag.new{background:var(--brand-strong);color:#fff}
.cl-tag.improved{background:var(--bg-soft);color:var(--ink);border:1px solid var(--line-strong)}
.cl-tag.fixed{background:var(--emerald-soft);color:var(--emerald-ink)}
.cl-note{margin-top:30px;font-size:13.5px;color:var(--muted)}
@media(max-width:560px){.cl-item{flex-direction:column;gap:8px}}
/* ===== hero: 3 storefront layers in 3D ===== */
.hero-3d{perspective:1500px}
.stack3d{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;
  animation:stackFloat 7s ease-in-out infinite}
@keyframes stackFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.s3{position:absolute;width:74%;border-radius:13px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 34px 70px -34px rgba(20,22,26,.42);
  transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .7s}
.s3-front{transform:rotateX(9deg) rotateY(-21deg) translate3d(-30px,-46px,80px)}
.s3-mid  {transform:rotateX(9deg) rotateY(-21deg) translate3d(6px,6px,0);opacity:.8}
.s3-back {transform:rotateX(9deg) rotateY(-21deg) translate3d(42px,58px,-80px);opacity:.5}
.hero-3d:hover .s3-front{transform:rotateX(7deg) rotateY(-16deg) translate3d(-42px,-58px,110px)}
.hero-3d:hover .s3-back{transform:rotateX(7deg) rotateY(-16deg) translate3d(56px,72px,-110px)}
.s3-bar{height:19px;background:var(--bg-soft);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:4px;padding:0 8px}
.s3-bar i{width:5px;height:5px;border-radius:50%;background:var(--line-strong)}
.s3-in{padding:11px}
/* front = a storefront */
.sf-nav{display:flex;align-items:center;gap:6px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.sf-logo{width:14px;height:14px;border-radius:4px;background:var(--ink)}
.sf-l{width:20px;height:4px;border-radius:2px;background:var(--line-strong)}
.sf-cart{margin-left:auto;width:12px;height:12px;border-radius:3px;border:1.5px solid var(--line-strong)}
.sf-hero{margin-top:11px;padding:14px;border-radius:9px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 22%,var(--bg-soft)),var(--bg-soft))}
.sf-t{display:block;height:8px;border-radius:4px;background:var(--ink);opacity:.82;margin-bottom:6px}
.sf-t.w70{width:62%;opacity:.5}
.sf-btn{display:block;width:64px;height:15px;border-radius:999px;background:var(--ink);margin-top:11px}
.sf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px}
.sf-c{border:1px solid var(--line);border-radius:7px;padding:6px}
.sf-img{display:block;height:30px;border-radius:5px;margin-bottom:5px}
.sf-c:nth-child(1) .sf-img{background:linear-gradient(140deg,#c8cffb,#eef0fe)}
.sf-c:nth-child(2) .sf-img{background:linear-gradient(140deg,#cfeee2,#eefaf5)}
.sf-c:nth-child(3) .sf-img{background:linear-gradient(140deg,#e6e2d6,#f7f5ef)}
.sf-c i{display:block;height:3.5px;border-radius:2px;background:var(--line-strong);margin-bottom:3px}
.sf-c i:last-child{width:52%}
/* mid = section blocks */
.s3-blk{display:block;border-radius:7px;border:1px dashed var(--line-strong);background:var(--bg-soft);margin-bottom:7px;height:34px}
.s3-blk.h2{height:52px}.s3-blk.h3{height:26px}
/* back = data */
.s3-row{display:block;height:6px;border-radius:3px;background:var(--line-strong);margin-bottom:6px}
.s3-row.w60{width:58%}
.s3-chart{display:flex;align-items:flex-end;gap:5px;height:52px;margin-top:10px}
.s3-chart i{flex:1;border-radius:3px 3px 0 0;background:var(--brand);opacity:.55}
.s3-chart i:nth-child(1){height:38%}.s3-chart i:nth-child(2){height:62%}
.s3-chart i:nth-child(3){height:48%}.s3-chart i:nth-child(4){height:82%}
.s3-chart i:nth-child(5){height:66%;opacity:.9}
.s3-tag{position:absolute;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 10px;white-space:nowrap}
.s3-tag.t1{top:11%;left:-2%}.s3-tag.t2{top:50%;right:-4%}.s3-tag.t3{bottom:9%;left:8%}
@media(prefers-reduced-motion:reduce){.stack3d{animation-duration:10s}}
@media(max-width:920px){.s3-tag{display:none}.stack3d{max-width:420px}}
/* ===== footer brand mark ===== */
.foot-mark{display:flex;align-items:center;justify-content:center;gap:22px;padding:8px 0 42px;
  border-bottom:1px solid var(--line);margin-bottom:38px}
.foot-mark svg{flex:0 0 auto}
.fm-word{font-family:Inter;font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(40px,9vw,104px);color:var(--ink)}
@media(max-width:640px){.foot-mark{gap:14px;padding-bottom:30px;margin-bottom:26px}}
/* real storefront art in the 3D stack + reversed fan + no labels */
.s3 img{display:block;width:100%;height:auto}
.s3-tag{display:none!important}
.s3-front{transform:rotateX(9deg) rotateY(19deg) translate3d(34px,-46px,80px)}
.s3-mid  {transform:rotateX(9deg) rotateY(19deg) translate3d(-4px,6px,0);opacity:.85}
.s3-back {transform:rotateX(9deg) rotateY(19deg) translate3d(-44px,58px,-80px);opacity:.55}
.hero-3d:hover .s3-front{transform:rotateX(7deg) rotateY(15deg) translate3d(46px,-58px,110px)}
.hero-3d:hover .s3-back {transform:rotateX(7deg) rotateY(15deg) translate3d(-58px,72px,-110px)}
/* Hero 3D stack: largest layer on the right, each next layer smaller toward the left. */
.hero-3d .stack3d .s3{transform-origin:50% 50%}
.hero-3d .stack3d .s3-front{transform:rotateX(7deg) rotateY(15deg) translate3d(78px,-26px,110px) scale(1);opacity:1}
.hero-3d .stack3d .s3-mid{transform:rotateX(7deg) rotateY(15deg) translate3d(-8px,10px,0) scale(.87);opacity:.9}
.hero-3d .stack3d .s3-back{transform:rotateX(7deg) rotateY(15deg) translate3d(-88px,46px,-110px) scale(.74);opacity:.62}
@media(max-width:920px){
  .hero-3d .stack3d .s3-front{transform:rotateX(7deg) rotateY(15deg) translate3d(52px,-20px,110px) scale(1)}
  .hero-3d .stack3d .s3-mid{transform:rotateX(7deg) rotateY(15deg) translate3d(-6px,8px,0) scale(.88)}
  .hero-3d .stack3d .s3-back{transform:rotateX(7deg) rotateY(15deg) translate3d(-60px,36px,-110px) scale(.76)}
}
@media(max-width:560px){
  .hero-3d .stack3d .s3-front{transform:rotateX(7deg) rotateY(15deg) translate3d(22px,-12px,90px) scale(1)}
  .hero-3d .stack3d .s3-mid{transform:rotateX(7deg) rotateY(15deg) translate3d(-4px,6px,0) scale(.88)}
  .hero-3d .stack3d .s3-back{transform:rotateX(7deg) rotateY(15deg) translate3d(-30px,24px,-90px) scale(.76)}
}
/* Long CTA labels must wrap on small phones instead of forcing a sideways scroll. */
@media(max-width:480px){
  main .btn{max-width:100%;white-space:normal;text-align:center;line-height:1.35}
}
h1,h2{font-weight:800;letter-spacing:-.032em}h3,h4{font-weight:700}.hero h1{line-height:.98}.btn{text-transform:uppercase;letter-spacing:.07em;font-size:13px;font-weight:700}.btn .arrow{letter-spacing:0}.band-night{position:relative;overflow:hidden}.band-night>.wrap{position:relative;z-index:1}.band-night::before{content:'';position:absolute;left:-14%;bottom:-55%;width:86%;height:150%;pointer-events:none;z-index:0;background:radial-gradient(circle at 0% 100%,color-mix(in srgb,var(--on-night) 42%,transparent),transparent 66%)}
/* Softer perspective: heavy rotation makes the screenshots inside unreadable. */
.hero-3d .stack3d .s3-front{transform:rotateX(5deg) rotateY(10deg) translate3d(78px,-26px,110px) scale(1)}
.hero-3d .stack3d .s3-mid{transform:rotateX(5deg) rotateY(10deg) translate3d(-8px,10px,0) scale(.87)}
.hero-3d .stack3d .s3-back{transform:rotateX(5deg) rotateY(10deg) translate3d(-88px,46px,-110px) scale(.74)}
@media(max-width:920px){
  .hero-3d .stack3d .s3-front{transform:rotateX(5deg) rotateY(10deg) translate3d(52px,-20px,110px) scale(1)}
  .hero-3d .stack3d .s3-mid{transform:rotateX(5deg) rotateY(10deg) translate3d(-6px,8px,0) scale(.88)}
  .hero-3d .stack3d .s3-back{transform:rotateX(5deg) rotateY(10deg) translate3d(-60px,36px,-110px) scale(.76)}
}
@media(max-width:560px){
  .hero-3d .stack3d .s3-front{transform:rotateX(5deg) rotateY(10deg) translate3d(22px,-12px,90px) scale(1)}
  .hero-3d .stack3d .s3-mid{transform:rotateX(5deg) rotateY(10deg) translate3d(-4px,6px,0) scale(.88)}
  .hero-3d .stack3d .s3-back{transform:rotateX(5deg) rotateY(10deg) translate3d(-30px,24px,-90px) scale(.76)}
}
/* ── Mega menu: hover-preview + entrance motion ─────────────────────── */
.mega-feat .shot{position:absolute;inset:0 0 44% 0;background-size:cover;background-position:center top;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent);
  opacity:0;transform:scale(1.04);transition:opacity .32s ease,transform .5s ease;z-index:0}
.mega-feat.shown .shot{opacity:.62;transform:scale(1)}
.mega-feat .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,14,20,.10) 0%,rgba(12,14,20,.35) 34%,rgba(12,14,20,.95) 56%,#0C0E14 66%)}
.mega-feat>.ey,.mega-feat>b,.mega-feat>i,.mega-feat>.go,.mega-feat>span{position:relative;z-index:2}
.mega-feat b,.mega-feat i{transition:opacity .18s ease}
.mega-feat.swapping b,.mega-feat.swapping i{opacity:0}
/* items rise in, staggered, when the panel opens */
.nav-item:hover .mega .mega-link,.nav-item:focus-within .mega .mega-link{animation:megaIn .34s cubic-bezier(.22,.7,.3,1) both}
.mega-col .mega-link:nth-child(2){animation-delay:.02s}
.mega-col .mega-link:nth-child(3){animation-delay:.06s}
.mega-col .mega-link:nth-child(4){animation-delay:.10s}
.mega-col .mega-link:nth-child(5){animation-delay:.14s}
@keyframes megaIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.mega-link{border-radius:12px;transition:background .16s ease,transform .16s ease}
.mega-link:hover{background:var(--bg-soft);transform:translateX(2px)}
@media(prefers-reduced-motion:reduce){
  .nav-item:hover .mega .mega-link,.nav-item:focus-within .mega .mega-link{animation:none}
  .mega-feat .shot{transition:opacity .01s}
}
/* Optical alignment: the nav is a rounded pill sitting above square-edged sections. At equal
   width its rounded corners read as inset, so the header looks narrower than the content below.
   Extend it 6px per side (.wrap is min(100% - 44px, 1120px)) so the edges line up to the eye. */
.nav-inner{width:min(100% - 32px,1132px)}
/* Hero: one large, readable product shot. Three stacked thumbnails worked for
   storefront screenshots (big type, dark blocks) but not for the admin UI, which is
   deliberately light and airy and turns to grey mush below ~400px. Measured: full
   admin screenshots score 11-37 contrast at that size vs 81-107 for the storefronts. */
.hero-shot{border-radius:16px;overflow:hidden;position:relative;
  box-shadow:0 40px 90px -46px rgba(20,16,50,.5),0 2px 8px -4px rgba(20,16,50,.10);
  transform:perspective(1800px) rotateY(-4deg) rotateX(1.5deg);transform-origin:50% 50%}
.hero-shot img{display:block;width:100%;height:auto}
@media(max-width:920px){.hero-shot{transform:none}}
/* The three layers now carry their own dark browser frame in the image, so the old
   light card + dot bar would double it up. Strip the chrome, keep the size ramp. */
.hero-3d .stack3d .s3{background:none;border:0;box-shadow:0 34px 70px -38px rgba(20,16,50,.5);border-radius:14px;overflow:hidden}
.hero-3d .stack3d .s3 .s3-bar{display:none}
.hero-3d .stack3d .s3 img{display:block;width:100%;height:auto}
.aut-fig{display:flex;align-items:center;justify-content:center;padding:26px;border:1px solid var(--line);
  border-radius:var(--radius-lg);background:var(--surface)}
.aut-fig img{width:100%;max-width:340px;height:auto}
/* Largest layer sits at the BOTTOM of the stack: the big screen is the base the
   smaller ones rest on, which is how a physical stack reads. */
.hero-3d .stack3d .s3-front{transform:rotateX(5deg) rotateY(10deg) translate3d(78px,34px,110px) scale(1)}
.hero-3d .stack3d .s3-mid{transform:rotateX(5deg) rotateY(10deg) translate3d(-8px,-6px,0) scale(.87)}
.hero-3d .stack3d .s3-back{transform:rotateX(5deg) rotateY(10deg) translate3d(-88px,-48px,-110px) scale(.74)}
@media(max-width:920px){
  .hero-3d .stack3d .s3-front{transform:rotateX(5deg) rotateY(10deg) translate3d(52px,26px,110px) scale(1)}
  .hero-3d .stack3d .s3-mid{transform:rotateX(5deg) rotateY(10deg) translate3d(-6px,-5px,0) scale(.88)}
  .hero-3d .stack3d .s3-back{transform:rotateX(5deg) rotateY(10deg) translate3d(-60px,-38px,-110px) scale(.76)}
}
@media(max-width:560px){
  .hero-3d .stack3d .s3-front{transform:rotateX(5deg) rotateY(10deg) translate3d(22px,16px,90px) scale(1)}
  .hero-3d .stack3d .s3-mid{transform:rotateX(5deg) rotateY(10deg) translate3d(-4px,-4px,0) scale(.88)}
  .hero-3d .stack3d .s3-back{transform:rotateX(5deg) rotateY(10deg) translate3d(-30px,-26px,-90px) scale(.76)}
}
.pill-list{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pill-list li{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);padding:20px 22px;font-size:15px;line-height:1.6;color:var(--muted)}
.pill-list li svg{flex:0 0 auto;margin-top:3px;color:var(--brand)}
.pill-list b{color:var(--ink);font-weight:700}
@media(max-width:760px){.pill-list{grid-template-columns:minmax(0,1fr)}}
/* ── Hero: the A/B moment ───────────────────────────────────────────────────
   Three stacked screenshots of one store said "here are some websites". This says
   the thing the headline promises: two variants of the same page, and the one that
   converted better is the one that shipped. Readable in a second, no label needed. */
.hero-ab{position:relative;display:block;padding:34px 0 22px}
.hero-ab__v{margin:0;position:relative;border-radius:16px;overflow:visible}
.hero-ab__v img{display:block;width:100%;height:auto;border-radius:14px}
.hero-ab__tag{position:absolute;top:-26px;left:2px;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hero-ab__tag--win{left:auto;right:2px;color:var(--brand-strong)}
/* A sits back and dimmed; B is lifted, ringed and carries the verdict. */
.hero-ab__v--a{width:78%;filter:saturate(.55);opacity:.72;
  box-shadow:0 18px 44px -30px rgba(20,16,50,.45)}
.hero-ab__v--b{width:88%;margin-left:auto;margin-top:-16%;
  box-shadow:0 40px 90px -44px rgba(20,16,50,.55);
  outline:3px solid var(--brand);outline-offset:5px;border-radius:16px}
.hero-ab__pill{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;
  gap:6px;background:var(--brand);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  padding:8px 14px;border-radius:999px;box-shadow:0 10px 24px -12px rgba(86,97,245,.8)}
@media(max-width:920px){
  .hero-ab__v--a{width:74%}
  .hero-ab__v--b{width:86%;margin-top:-14%}
}
/* On a phone the two panels would be thumbnails. Keep the story, drop the overlap:
   A shrinks to a hint behind, B stays big enough to actually read. */
@media(max-width:620px){
  .hero-ab{padding-top:28px}
  .hero-ab__v--a{width:62%;opacity:.6}
  .hero-ab__v--b{width:94%;margin-top:-18%;outline-width:2px;outline-offset:4px}
  .hero-ab__tag{top:-22px;font-size:10.5px}
  .hero-ab__pill{right:8px;bottom:8px;font-size:11px;padding:6px 11px}
}
@media(prefers-reduced-motion:no-preference){
  .hero-ab__v--b{transition:transform .4s cubic-bezier(.22,.7,.3,1)}
}
/* ── Mobile pass ────────────────────────────────────────────────────────────
   Measured on a 390px viewport: 42 tap targets under 40px, 34 text nodes under
   12px, and a 1,598px footer. Fixes below are mobile-only. */
@media(max-width:620px){
  /* 1. The footer opened with a big decorative wordmark and then repeated the
     same logo in the brand block directly underneath. Drop the decorative one. */
  .foot-mark{display:none}
  /* 2. Four link groups stacked one per row made a wall. Two columns halves it. */
  .foot-grid{grid-template-columns:1fr 1fr;gap:26px 20px}
  .foot-brand{grid-column:1/-1}
  /* 3. Touch targets: inline links were 22px tall. Apple asks 44, Google 48.
     Pad the hit area without moving the text. */
  footer .foot-grid a,.mega-link,.flow-link,.smnode,.nav-links a{
    min-height:44px;display:flex;align-items:center}
  .foot-social a{min-width:44px;min-height:44px;display:inline-flex;align-items:center}
  /* 4. Nothing below 11px on a phone. */
  .eyebrow,.mega-h,.qtag,.s3-tag,.cl-tag,.pchip,.pbadge,.tvbadge,.tag,.hero-ab__tag,.mega-feat .ey,.ey,footer small,small{font-size:12px}
}
@media(max-width:620px){.tvbadge,.pbadge,.dl-sub,.foot-note,.price-badge,.team-role{font-size:12px}.final a[href^='mailto'],.foot-bottom a{min-height:44px;display:inline-flex;align-items:center}}
.pages-scale{margin:0;display:flex;align-items:center;justify-content:center}
.pages-scale__svg{width:100%;max-width:560px;height:auto;color:var(--ink)}
/* Above the fold: one restrained moment, not a light show. The verdict lands —
   B rises, its ring draws on, the pill arrives last. Once, on load. */
@media(prefers-reduced-motion:no-preference){
  .hero-ab__v--a{animation:abSettle .9s cubic-bezier(.22,.7,.3,1) both}
  .hero-ab__v--b{animation:abWin 1s cubic-bezier(.22,.7,.3,1) .12s both}
  .hero-ab__pill{animation:abPill .5s cubic-bezier(.34,1.4,.5,1) .78s both}
  .hero-ab__tag--win{animation:abFade .5s ease .6s both}
  @keyframes abSettle{from{opacity:.9;transform:translateY(-8px)}to{opacity:.72;transform:none}}
  @keyframes abWin{
    from{opacity:0;transform:translateY(22px) scale(.985);outline-color:transparent}
    60%{outline-color:transparent}
    to{opacity:1;transform:none;outline-color:var(--brand)}}
  @keyframes abPill{from{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:none}}
  @keyframes abFade{from{opacity:0}to{opacity:1}}
}

/* ===== Blog illustrations (UI-vignette system) — theme-aware SVG thumbnails ===== */
:root{--il-bg:#E6E9F2;--il-card:#fff;--il-line:#CDD1DE;--il-mut:#D5D8E3;--il-brand:#5661F5;--il-soft:#D6DBFB;--il-ok:#0EA97A;--il-warn:#B98A3C;--il-chip:#14161A;--il-chipink:#fff;--il-faint:#969AAB}
@media(prefers-color-scheme:dark){:root{--il-bg:#12141C;--il-card:#1B1E28;--il-line:#2B2F3A;--il-mut:#262A34;--il-brand:#8A93FF;--il-soft:#2B3157;--il-ok:#3ED6AC;--il-warn:#D3A863;--il-chip:#0A0B10;--il-chipink:#F4F4F3;--il-faint:#7E8593}}
:root[data-theme="light"]{--il-bg:#E6E9F2;--il-card:#fff;--il-line:#CDD1DE;--il-mut:#D5D8E3;--il-brand:#5661F5;--il-soft:#D6DBFB;--il-ok:#0EA97A;--il-warn:#B98A3C;--il-chip:#14161A;--il-chipink:#fff;--il-faint:#969AAB}
:root[data-theme="dark"]{--il-bg:#12141C;--il-card:#1B1E28;--il-line:#2B2F3A;--il-mut:#262A34;--il-brand:#8A93FF;--il-soft:#2B3157;--il-ok:#3ED6AC;--il-warn:#D3A863;--il-chip:#0A0B10;--il-chipink:#F4F4F3;--il-faint:#7E8593}
.card .thumb svg,.feature-post .fimg svg{display:block;width:100%;height:100%}
.card .thumb{overflow:hidden}
.feature-post .fimg{overflow:hidden}
.il-bg{fill:var(--il-bg)}.il-card{fill:var(--il-card)}.il-mut{fill:var(--il-mut)}.il-brand{fill:var(--il-brand)}
.il-soft{fill:var(--il-soft)}.il-ok{fill:var(--il-ok)}.il-warn{fill:var(--il-warn)}.il-chip{fill:var(--il-chip)}
.il-chipink{fill:var(--il-chipink)}.il-faint{fill:var(--il-faint)}
.il-s{stroke:var(--il-line);fill:none}.il-sb{stroke:var(--il-brand);fill:none}.il-sok{stroke:var(--il-ok);fill:none}

/* Blog post hero illustration (reuses the index UI-vignette) */
.a-illo{margin:30px 0 10px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--il-bg)}
.a-illo svg{display:block;width:100%;height:auto}

/* ===== Company: GemPages story + 4E values ===== */
.story-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px;text-align:left}
.story-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px}
.story-col .ck{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-strong);margin:0 0 18px}
.story-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.story-col li{position:relative;padding-left:24px;color:var(--ink-2);line-height:1.5;font-size:15px}
.story-col li::before{content:"";position:absolute;left:2px;top:8px;width:8px;height:8px;border-radius:2px;background:var(--brand);transform:rotate(45deg)}
.story-col li b{color:var(--ink);font-weight:650}
.story-close{max-width:56ch;margin:30px auto 0;text-align:center;font-size:18px;line-height:1.55;color:var(--ink-2)}
.evals{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.eval{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px}
.eval .ee{font-family:Inter,-apple-system,sans-serif;font-size:34px;font-weight:800;color:var(--brand);line-height:1;letter-spacing:-.02em}
.eval h3{font-size:18px;margin:12px 0 8px}
.eval p{color:var(--muted);font-size:14px;line-height:1.55;margin:0}
@media(max-width:980px){.evals{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.story-cols{grid-template-columns:1fr}}
@media(max-width:560px){.evals{grid-template-columns:1fr}}

/* ===== Store showcase marquee ===== */
.mq-band .sec-head{margin-bottom:8px}
.mq{position:relative;margin-top:40px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.mq-row{display:flex;gap:22px;width:max-content;will-change:transform;animation:mqscroll 64s linear infinite}
.mq-row.rev{animation-direction:reverse}
.mq-row + .mq-row{margin-top:22px}
.mq:hover .mq-row{animation-play-state:paused}
@keyframes mqscroll{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 11px))}}
.mq-card{flex:0 0 auto;width:320px;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:0 1px 2px rgba(20,22,26,.05),0 24px 44px -30px rgba(20,22,26,.28)}
.mq-bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 13px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.mq-bar i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--muted) 45%,transparent);flex:0 0 auto}
.mq-card img{display:block;width:100%;height:auto;aspect-ratio:640/338;object-fit:cover;background:var(--bg-soft)}
@media(max-width:760px){.mq-card{width:248px}.mq-row{gap:16px}@keyframes mqscroll{to{transform:translateX(calc(-50% - 8px))}}}
@media(prefers-reduced-motion:reduce){.mq{overflow:hidden}}

/* ===== Announcement bar (top strip) — restrained near-black, coral accent ===== */
.announce{position:relative;z-index:60;background:#171A38;color:#B9BEDA;text-align:center;font-size:13px;line-height:1.5;font-weight:500;letter-spacing:.005em;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.announce .tag{display:inline-block;background:rgba(122,132,255,.2);color:#A7AEFF;border-radius:999px;padding:2.5px 9px;font-size:10.5px;font-weight:700;letter-spacing:.09em;margin-right:10px;vertical-align:1px}
.announce a{color:#fff;text-decoration:none;font-weight:600;margin-left:8px;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.32);padding-bottom:1px;transition:border-color .18s}
.announce a:hover{border-bottom-color:#fff}
@media(max-width:520px){.announce{font-size:12px;padding:9px 12px}.announce .tag{margin-right:6px}}

/* ===== Real-world speed / Core Web Vitals card (#layer section) ===== */
.wv-card{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:26px 28px;box-shadow:0 30px 60px -40px rgba(20,16,50,.45);max-width:460px;width:100%}
.wv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.wv-title{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.wv-dot{width:9px;height:9px;border-radius:50%;background:var(--emerald-ink,#0A7A54);box-shadow:0 0 0 4px var(--emerald-soft,#E7F7F1);animation:wvPulse 2.4s ease-in-out infinite}
.wv-pass{font-size:11.5px;font-weight:700;color:var(--emerald-ink,#0A7A54);background:var(--emerald-soft,#E7F7F1);padding:4px 11px;border-radius:999px;white-space:nowrap}
.wv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wv-m{display:flex;flex-direction:column;gap:8px}
.wv-k{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.wv-v{font-size:32px;font-weight:750;letter-spacing:-.03em;line-height:.9;font-variant-numeric:tabular-nums;color:var(--ink)}
.wv-v small{font-size:15px;font-weight:600;color:var(--muted);margin-left:1px;letter-spacing:0}
.wv-rate{align-self:flex-start;font-size:10.5px;font-weight:700;color:var(--emerald-ink,#0A7A54);background:var(--emerald-soft,#E7F7F1);padding:2px 9px;border-radius:999px}
.wv-bar{height:5px;border-radius:3px;background:var(--bg-soft);overflow:hidden}
.wv-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 55%,var(--mint,#48d1a0)));transform-origin:left;animation:wvFill 1.1s cubic-bezier(.22,.7,.3,1) both}
.wv-foot{display:flex;align-items:center;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);text-decoration:none}
.wv-foot:hover{color:var(--ink)}
.wv-foot svg{flex:0 0 auto;color:var(--emerald-ink,#0A7A54)}
@keyframes wvPulse{0%,100%{box-shadow:0 0 0 3px var(--emerald-soft,#E7F7F1)}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--emerald-soft,#E7F7F1) 60%,transparent)}}
@keyframes wvFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:560px){.wv-card{padding:22px 20px}.wv-v{font-size:27px}.wv-grid{gap:14px}}
@media(prefers-reduced-motion:reduce){.wv-dot,.wv-bar i{animation:none}}

/* ===== Problem/Solution cards (.psol) — e.g. /electronics "generic theme fumbles it" ===== */
.psol-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.psol{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 24px;display:flex;flex-direction:column;gap:15px;box-shadow:0 20px 44px -34px rgba(20,16,50,.32)}
.psol-p{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:14.5px;line-height:1.5;font-style:italic}
.psol-p svg{flex:0 0 auto;margin-top:2px;color:#C0392B}
.psol-rule{height:1px;background:var(--line)}
.psol-s{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.55}
.psol-s svg{flex:0 0 auto;margin-top:2px;color:var(--emerald-ink,#0A7A54)}
.psol-s b{font-weight:700}
.psol-tag{align-self:flex-start;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-strong,var(--brand));background:color-mix(in srgb,var(--brand) 9%,transparent);padding:3px 11px;border-radius:999px;margin-top:auto}
@media(max-width:820px){.psol-grid{grid-template-columns:1fr;gap:16px}}

/* ===== Canonical heading scale — ONE consistent system on every page ===== */
h1,h2,h3,h4,h5{font-weight:700;letter-spacing:-.02em}
.hero h1,.page-hero h1,.compact-hero h1{font-size:clamp(32px,3.3vw,44px);line-height:1.1}
.sec-head h2,.final h2,.showcase h2,.feature-post h2,h2{font-size:clamp(26px,2.8vw,36px);line-height:1.14}


/* ===== Every content H3 = ONE size site-wide (article body + footer excepted) ===== */
h3{font-size:20px!important}
.a-body h3{font-size:20px!important}

/* ===== Hero A/B — living 3D depth + parallax (clean, premium) ===== */
.hero-3d{perspective:1250px;perspective-origin:60% 40%}
.hero-ab,.hero-ab__v{transform-style:preserve-3d}
.hero-ab{will-change:transform}
.hero-ab__v--a .abframe{transform:translateZ(-52px) rotateY(8deg) rotateX(1.5deg);box-shadow:0 26px 50px -28px rgba(20,16,50,.38);transition:box-shadow .4s}
.hero-ab__v--b .abframe{transform:translateZ(30px) rotateY(-5deg);box-shadow:0 46px 84px -34px rgba(86,97,245,.5);transition:box-shadow .4s}
.hero-ab__v--b .abframe.abframe--win{box-shadow:0 52px 92px -34px rgba(86,97,245,.55),0 0 0 1px color-mix(in srgb,var(--brand) 26%,transparent)}
.hero-3d:hover .hero-ab__v--b .abframe{box-shadow:0 60px 100px -32px rgba(86,97,245,.62),0 0 0 1px color-mix(in srgb,var(--brand) 40%,transparent)}
@media(prefers-reduced-motion:reduce){.hero-ab{animation:heroFloat 9s ease-in-out infinite}}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ===== Pricing staircase — even, enforced step heights (4-col desktop) ===== */
@media(min-width:1081px){
  .price-grid .price-card{justify-content:flex-start}
  .price-grid .price-card:nth-child(1){min-height:640px}
  .price-grid .price-card:nth-child(2){min-height:720px}
  .price-grid .price-card:nth-child(3){min-height:800px}
  .price-grid .price-card:nth-child(4){min-height:880px}
}

/* ===== Hero A/B labels — visible CVR baseline chip + high-contrast winner pill ===== */
.hero-ab__stat{position:absolute;left:12px;top:12px;transform:translateZ(56px);z-index:4;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;
  font-size:11.5px;font-weight:700;letter-spacing:.01em;color:var(--ink);white-space:nowrap;
  box-shadow:0 8px 20px -10px rgba(20,16,50,.3)}
.hero-ab__stat::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--muted);margin-right:7px;vertical-align:1px}
.hero-ab__tag--win{color:#fff;background:var(--brand);padding:3px 11px;border-radius:999px;
  top:-32px;box-shadow:0 8px 20px -10px rgba(86,97,245,.55)}

/* ===== Compare table — align plan-column headers with the centered cells below ===== */
.compare thead th{text-align:center}
.compare thead th:first-child{text-align:left}

/* ===== Hero — clean A/B result card on a contour field ===== */
.hero-3d{position:relative;perspective:1400px;display:flex;align-items:center;justify-content:center;overflow:visible}
.hero-glow{position:absolute;z-index:0;width:70%;aspect-ratio:1/1;left:50%;top:50%;transform:translate(-50%,-50%);
  pointer-events:none;opacity:.55;filter:blur(22px);
  background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--brand) 40%,transparent),transparent 62%)}
.hero-shot{position:relative;z-index:1;width:100%;max-width:600px;margin:0 auto;overflow:visible;aspect-ratio:1/.94;
  background:none;border:0;border-radius:0;box-shadow:none;
  transform:none;transform-style:preserve-3d;will-change:transform;display:flex;align-items:center;justify-content:center}

/* contour rings — behind the orb */
.hero-abx__topo{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.9}
.hero-abx__topo path{fill:none;stroke:color-mix(in srgb,var(--brand) 34%,transparent);stroke-width:1.4}

/* glossy 3D iris orb — real depth (gloss top-left, dark rim bottom-right, soft shadow) */
.hero-orb{position:absolute;z-index:2;width:min(478px,86%);left:50%;top:50%;transform:translate(-50%,-50%);
  pointer-events:none;filter:drop-shadow(0 54px 74px rgba(40,30,120,.42))}
.hero-orb__hl{mix-blend-mode:screen}

/* cycling capability card stack — centered over the orb */
.hero-cards{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,94%);min-height:240px}
.ab-card.hero-cap{position:absolute;left:0;right:0;top:50%;opacity:0;pointer-events:none;
  transform:translateY(calc(-50% + 20px)) scale(.93) rotate(-2.2deg);transform-origin:60% 55%;
  transition:opacity .6s ease,transform .72s cubic-bezier(.34,1.32,.44,1)}
.ab-card.hero-cap.is-on{opacity:1;pointer-events:auto;transform:translateY(-50%) scale(1) rotate(-2.2deg)}

/* the clean white result card */
.ab-card{position:relative;z-index:3;width:min(424px,96%);background:var(--surface);border:1px solid var(--line);
  border-radius:20px;padding:20px 20px 18px;
  box-shadow:0 52px 96px -42px rgba(20,16,50,.46),0 12px 30px -16px rgba(20,16,50,.18);transform-origin:60% 50%}
.ab-card__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ab-card__tag{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.ab-card__ic{color:var(--brand);font-size:15px}
.ab-card__live{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--emerald-ink)}
.ab-card__live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--emerald)}

.ab-card__pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ab-tile{position:relative;display:block;border:1px solid var(--line);border-radius:13px;background:var(--bg-soft);padding:13px 13px 15px;overflow:hidden}
.ab-tile__k{position:absolute;top:9px;right:9px;z-index:2;font-size:11px;font-weight:800;color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:1px 6px;line-height:1.5}
.ab-tile__hero{display:block;height:40px;border-radius:7px;background:var(--line-strong);margin:0 0 9px}
.ab-tile__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.ab-tile__grid i{display:block;aspect-ratio:1/1;border-radius:6px;background:var(--line)}
.ab-tile--win .ab-tile__hero{background:linear-gradient(150deg,#6E78FF,#4A54E8)}
.ab-tile--win .ab-tile__grid i{background:color-mix(in srgb,var(--brand) 15%,var(--bg-soft))}
.ab-tile--win .ab-tile__grid i:nth-child(2){background:color-mix(in srgb,var(--brand) 32%,transparent)}
.ab-tile__ln{display:block;height:6px;border-radius:3px;background:var(--line);width:82%;margin-bottom:6px}
.ab-tile__ln.s{width:54%}
.ab-tile__btn{display:block;height:13px;width:48%;border-radius:7px;background:var(--line-strong);margin-top:11px}
/* winning variant B — brand-tinted + ring + flag */
.ab-tile--win{overflow:visible;background:var(--surface);border-color:color-mix(in srgb,var(--brand) 42%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent),0 16px 32px -18px rgba(86,97,245,.45)}
.ab-tile--win .ab-tile__hero{background:linear-gradient(150deg,#6E78FF,#4A54E8)}
.ab-tile--win .ab-tile__btn{background:var(--brand)}
.ab-tile--win .ab-tile__k{color:var(--brand-strong)}
.ab-tile__flag{position:absolute;top:-10px;left:-10px;width:27px;height:27px;border-radius:50%;background:var(--brand);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800;box-shadow:0 7px 16px -6px rgba(86,97,245,.7)}

.ab-card__res{margin-top:16px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.ab-card__res b{font-size:16px;font-weight:700;color:var(--ink)}
.ab-card__res i{font-style:normal;font-size:16px;font-weight:800;color:var(--emerald-ink)}

/* Conversion card body */
.hero-cv__chart{background:var(--bg-soft);border:1px solid var(--line);border-radius:13px;padding:12px}
.hero-cv__chart svg{width:100%;height:66px;display:block}
.hero-cv__chart polyline{fill:none;stroke:var(--emerald);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.hero-cv__big{margin-top:12px;line-height:1;font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--brand)}
.hero-cv__big i{font-style:normal;font-size:14px;font-weight:800;color:var(--emerald-ink);margin-left:7px}
.hero-cv__big small{display:block;margin-top:7px;font-size:12px;font-weight:600;color:var(--muted)}

/* Brand-match card body */
.hero-bm__row{display:flex;align-items:center;gap:18px}
.hero-bm__ring{position:relative;width:92px;height:92px;flex:none}
.hero-bm__ring svg{transform:rotate(-90deg)}
.hero-bm__ring circle{fill:none;stroke-width:9}
.hero-bm__ring .bg{stroke:var(--line)}
.hero-bm__ring .fg{stroke:var(--brand);stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:11}
.hero-bm__ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:25px;font-weight:800;color:var(--ink)}
.hero-bm__meta b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.hero-bm__meta p{margin:4px 0 10px;font-size:12.5px;font-weight:500;color:var(--muted)}
.hero-bm__sw{display:flex;gap:6px}
.hero-bm__sw i{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.06)}

/* capability tabs (replace dots) — labeled so every message stays readable even with animation off; clickable to switch */
.hero-tabs{position:absolute;z-index:5;left:50%;bottom:0;transform:translateX(-50%);display:flex;flex-wrap:nowrap;justify-content:center;gap:2px;
  background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:0 12px 30px -18px rgba(20,16,50,.4)}
.hero-tab{font:600 11.5px Inter;color:var(--muted);background:transparent;border:0;border-radius:999px;padding:5px 10px;cursor:pointer;white-space:nowrap;transition:color .2s,background .2s}
.hero-tab:hover{color:var(--ink)}
.hero-tab.is-on{color:#fff;background:var(--brand)}
@media(max-width:920px){.hero-3d{flex-direction:column}.hero-tabs{position:static;transform:none;margin:18px auto 0;flex-wrap:wrap;max-width:94%;padding:4px 6px}}

/* card 0 — brand-true store mock */
.hero-store__mock{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-soft)}
.hero-store__mock .hs-bar{display:flex;gap:4px;align-items:center;padding:8px 10px;background:var(--surface);border-bottom:1px solid var(--line)}
.hero-store__mock .hs-bar i{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
.hero-store__mock .hs-hero{display:block;height:62px;background:linear-gradient(150deg,#6E78FF,#4A54E8)}
.hero-store__mock .hs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:10px}
.hero-store__mock .hs-grid i{display:block;aspect-ratio:1/.82;border-radius:6px;background:color-mix(in srgb,var(--brand) 12%,var(--bg-soft));border:1px solid var(--line)}

/* card 1 — autopilot task list */
.hero-auto__list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:10px}
.hero-auto__list li{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink);font-weight:500}
.hero-auto__list .ck{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--emerald-soft);color:var(--emerald-ink);display:grid;place-items:center;font-size:11px;font-weight:800}

/* card 3 — landing page buy box */
.hero-lp__buy{border:1px solid var(--line);border-radius:12px;background:var(--bg-soft);padding:13px 15px}
.hero-lp__price{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.hero-lp__price s{font-size:14px;font-weight:600;color:var(--muted);margin-left:6px}
.hero-lp__opts{display:grid;gap:7px;margin:11px 0 12px}
.hero-lp__opts span{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink)}
.hero-lp__opts span i{width:14px;height:14px;border-radius:50%;border:2px solid var(--line-strong);flex:0 0 auto}
.hero-lp__opts span.on i{border-color:var(--brand);background:radial-gradient(circle,var(--brand) 42%,transparent 46%)}
.hero-lp__cta{height:36px;border-radius:9px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:13.5px;font-weight:700}
.hero-lp__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.hero-lp__chips span{font-size:11px;font-weight:700;color:var(--brand-strong);background:color-mix(in srgb,var(--brand) 10%,var(--bg-soft));border:1px solid color-mix(in srgb,var(--brand) 22%,var(--line));border-radius:999px;padding:3px 9px}

/* orb gentle idle float (composes over JS pointer-parallax on .hero-shot) */
@keyframes heroOrbFloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-55%)}}
.hero-orb{animation:heroOrbFloat 8s ease-in-out infinite}
@media(max-width:920px){ .hero-glow{opacity:.44} }
@media(prefers-reduced-motion:reduce){.hero-orb{animation:none}.ab-card.hero-cap{transition:none}}

/* ===== Motion — Phase 1: ambient LIVE-dot pulse (reveal stagger + stat count-up live in site.js) ===== */
@keyframes livePulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--emerald) 55%,transparent)}70%,100%{box-shadow:0 0 0 6px transparent}}
.ab-card__live::before{animation:livePulse 2.4s ease-out infinite}
@media(prefers-reduced-motion:reduce){.ab-card__live::before{animation:none}}

/* ===== Motion — Phase 2: hover-lift consistency + icon nudge + mockup float ===== */
@media(hover:hover){
  .price-card,.layer,.feature-post{transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s,border-color .26s}
  .price-card:hover,.layer:hover,.feature-post:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--line-strong)}
  .pillar .pi{transition:transform .32s cubic-bezier(.22,1,.36,1)}
  .pillar:hover .pi{transform:translateY(-3px) scale(1.06)}
}
@keyframes floatSoft{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.tab-visual .tv{animation:floatSoft 7s ease-in-out infinite;will-change:transform}
@media(prefers-reduced-motion:reduce){.tab-visual .tv{animation:none}}

/* ===== Motion — Phase 3: winner-tile shimmer + product tab transition ===== */
/* occasional sheen sweeping across the winning A/B store tile's hero band */
.ab-tile--win .ab-tile__hero{position:relative;overflow:hidden}
.ab-tile--win .ab-tile__hero::after{content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:skewX(-18deg);
  animation:shimmer 5s ease-in-out infinite}
@keyframes shimmer{0%,58%{left:-60%}100%{left:135%}}
/* product tabs fade+slide in when selected */
@keyframes tabIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.tab-panel.active{animation:tabIn .4s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){.ab-tile--win .ab-tile__hero::after{animation:none;display:none}.tab-panel.active{animation:none}}

/* ===== Motion — flow mockups gentle idle float (staggered) ===== */
.flow-mock{animation:floatSoft 7.5s ease-in-out infinite;will-change:transform}
.flow-mock.com{animation-duration:8.2s;animation-delay:-2.4s}
.flow-mock.op{animation-duration:7s;animation-delay:-4.6s}
@media(prefers-reduced-motion:reduce){.flow-mock{animation:none}}

/* ===== Motion polish: flow STEP cards lift + FAQ answer reveal ===== */
@media(hover:hover){
  .flow-card{transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s,border-color .26s}
  .flow-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--line-strong)}
}
@keyframes faqIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.faq details[open] p{animation:faqIn .28s ease}
@media(prefers-reduced-motion:reduce){.faq details[open] p{animation:none}}

/* mobile-only affordance: the compare table scrolls horizontally */
.compare-hint{display:none}
@media(max-width:1080px){.compare-hint{display:block;font-size:13px;font-weight:600;color:var(--muted);text-align:right;margin:0 6px 8px}}