/* ────────────────────────────────────────────────────────────────────────────
   ONE design system, and it is the dashboard's.

   The marketing site used to keep its own palette: warm cream ground, iris as the
   primary button, warm hairlines, a 48px-blur shadow on every card. The product
   it sells is white, neutral, near-black-buttoned and almost shadowless, so the
   two halves of GemBoss did not look like one company — and the seam was exactly
   where a visitor crosses from the site into the app.

   Every value below is lifted from apps/admin/src/app/gemboss-shell.css. The old
   variable NAMES are kept on purpose: ~90 pages and a large amount of local CSS
   reference --brand / --line / --ink, and renaming them would have been a
   thousand-line diff with no design in it. What changed is what they point at.
   ──────────────────────────────────────────────────────────────────────────── */
:root{
  --bg:#ffffff;           /* --gemboss-canvas — white, not cream */
  --bg-soft:#f2f3f5;      /* --gemboss-primary-soft — the neutral raised fill */
  --surface:#ffffff;
  --ink:#1b1c1e;          /* --gemboss-text-strong */
  --ink-2:#3b3d42;
  --muted:#6a6d73;        /* --gemboss-text-muted */
  --line:#e5e7ea;         /* --gemboss-divider — neutral, was warm #E8E5DD */
  --line-strong:#d5d8dd;
  /* PRIMARY IS NEAR-BLACK. Iris stays, but as the dashboard uses it: links, focus
     rings, active state, a chart line — an accent, not the thing you click. */
  --primary:#1b1c1e;
  --primary-dark:#000000;
  --brand:#5661f5;        /* --gemboss-accent */
  --brand-strong:#3a44de; /* --gemboss-accent-strong */
  --brand-soft:#eef0fe;   /* --gemboss-accent-soft */
  --on-brand:#ffffff;
  --emerald:#007f5f;      /* --gemboss-success */
  --emerald-ink:#0a6a4c;
  --emerald-soft:#e3f1df;
  --on-night:#9AA3FF;
  --gold:#9a6700;         /* --gemboss-warning — on LIGHT surfaces */
  /* The same hue cannot serve both grounds. --gold was darkened to pass contrast on white, which
     is right for a badge and wrong for the one place it is used as code syntax INSIDE a dark
     block — there it went from readable to 3.96:1. Two tokens, each legible where it is used. */
  --gold-on-dark:#d3a863;
  /* Secondary hues survive for one job only: the hero wash. Never on chrome. */
  --pink:#FF6F5E;
  --violet:#7C8AF7;
  --sky:#43B0FF;
  --mint:#1FCF9F;
  --grad:linear-gradient(100deg,#5661f5 0%,#3a44de 100%);
  --night:#0C0E14;
  --night-2:#141722;
  /* Radii on the dashboard's steps (4/6/8/12/16/20/pill). The site's old 14/22
     were off-scale by one step each. */
  --radius:12px;
  --radius-lg:16px;
  /* THE WHOLE SHADOW BUDGET. The old --shadow blurred 48px at 18% — a card that
     hovers. These are --gemboss-shadow-resting / -raised: a card that sits. */
  --shadow:0 1px 2px rgba(31,30,29,.04),0 2px 6px rgba(31,30,29,.06);
  --shadow-sm:0 1px 2px rgba(31,30,29,.04);
  --shadow-raised:0 4px 16px rgba(31,30,29,.10);
  --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:#1f2023;--surface:#141416;
    --ink:#efe7dc;--ink-2:#c7c4bf;--muted:rgba(239,231,220,.55);
    --line:#26262a;--line-strong:#33333a;
    --primary:#f4f4f3;--primary-dark:#ffffff;
    --brand:#8a93ff;--brand-strong:#a7aeff;--brand-soft:#1a1c2e;--on-brand:#0b0b0c;
    --emerald:#3ed6ac;--emerald-ink:#3ed6ac;--emerald-soft:#152420;--on-night:#9AA3FF;--gold:#e8be6a;
    --night:#0A0B10;--night-2:#12141C;
    --shadow:0 1px 0 rgba(0,0,0,.3);--shadow-sm:0 1px 0 rgba(0,0,0,.25);--shadow-raised:0 4px 16px rgba(0,0,0,.5);
  }
}
/* explicit toggle overrides (must beat the media query in both directions) */
:root[data-theme="light"]{
  --bg:#ffffff;--bg-soft:#f2f3f5;--surface:#ffffff;
  --ink:#1b1c1e;--ink-2:#3b3d42;--muted:#6a6d73;
  --line:#e5e7ea;--line-strong:#d5d8dd;
  --primary:#1b1c1e;--primary-dark:#000000;
  --brand:#5661f5;--brand-strong:#3a44de;--brand-soft:#eef0fe;--on-brand:#ffffff;
  --emerald:#007f5f;--emerald-ink:#0a6a4c;--emerald-soft:#e3f1df;--on-night:#9AA3FF;--gold:#9a6700;
  --night:#0C0E14;--night-2:#141722;
  --shadow:0 1px 2px rgba(31,30,29,.04),0 2px 6px rgba(31,30,29,.06);--shadow-sm:0 1px 2px rgba(31,30,29,.04);--shadow-raised:0 4px 16px rgba(31,30,29,.10);
}
:root[data-theme="dark"]{
  --bg:#0b0b0c;--bg-soft:#1f2023;--surface:#141416;
  --ink:#efe7dc;--ink-2:#c7c4bf;--muted:rgba(239,231,220,.55);
  --line:#26262a;--line-strong:#33333a;
  --primary:#f4f4f3;--primary-dark:#ffffff;
  --brand:#8a93ff;--brand-strong:#a7aeff;--brand-soft:#1a1c2e;--on-brand:#0b0b0c;
  --emerald:#3ed6ac;--emerald-ink:#3ed6ac;--emerald-soft:#152420;--on-night:#9AA3FF;--gold:#e8be6a;
  --night:#0A0B10;--night-2:#12141C;
  --shadow:0 1px 0 rgba(0,0,0,.3);--shadow-sm:0 1px 0 rgba(0,0,0,.25);--shadow-raised:0 4px 16px rgba(0,0,0,.5);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
section[id],[id]{scroll-margin-top:80px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:18px;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:12px;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:12px 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 */
/* ACTIONS ARE RECTANGLES. CHIPS ARE PILLS.
   Measured in the dashboard rather than chosen: every action there is 8–12px radius, sentence
   case, weight 600, 14px, 36–40px tall (.gemboss-ec-cta-btn, .gemboss-mem-add button). The pill
   radius --gemboss-radius-full is reserved for CHIPS and toggles (.gemboss-studio-build-chips,
   .gemboss-autonomy-dial) — small selectable tokens, not things that do something.
   The marketing site had it inverted: its buttons were pill-shaped AND uppercase AND tracked at
   700 — shaped like a chip and shouted. That is most of why the site read heavier than the app. */
.btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 20px;border-radius:8px;
  font-family:Inter;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  cursor:pointer;border:1px solid transparent;
  transition:background .15s ease,border-color .15s ease;white-space:nowrap}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.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,0.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 20px;font-size:14px}
.arrow{transition:transform .18s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* nav */
/* A bar, not a pill. The floating header was a rounded, blurred, drop-shadowed capsule
   sitting on the page; the dashboard's chrome is a flat band separated by one hairline, and
   the two now agree. It also stops the header casting a shadow over the hero, which is what
   made the first line of the page feel crowded no matter how much padding it was given. */
header.nav{position:sticky;top:0;z-index:50;background:var(--surface);padding:0;
  border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:40px;height:60px;padding:0 24px}
/* nothing changes on scroll now — a flat bar has nothing to lift. */
.brand{display:flex;align-items:center;gap:12px;font-family:Inter;font-weight:700;font-size:18px;letter-spacing:-.01em}
.brand svg{border-radius:8px;flex:0 0 auto}
.nav-links{display:flex;gap:8px;margin-left:6px}
.nav-links a{font-size:16px;font-weight:500;letter-spacing:-.005em;color:var(--ink-2);padding:8px 12px;border-radius:8px;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:16px}
.nav-cta .signin{font-size:16px;font-weight:500;white-space:nowrap}
.menu-btn{display:none;border:1px solid var(--line-strong);background:var(--surface);border-radius:12px;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:6px;font-size:16px;font-weight:500;letter-spacing:-.005em;color:var(--ink-2);padding:8px 12px;border-radius:8px;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:20px;box-shadow:var(--shadow),0 2px 8px -6px rgba(20,16,50,.08);padding:32px;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.mega--nofeat{grid-template-columns:1fr;width:min(600px,calc(100vw - 40px))}
.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:12px 12px 8px}
.mega-link{display:flex;gap:12px;align-items:flex-start;padding:12px 12px;border-radius:12px;transition:.14s}
.mega-link:hover{background:var(--bg-soft)}
.mega-link .mi{flex:0 0 auto;width:37px;height:37px;border-radius:8px;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:13px;color:var(--muted);font-style:normal;line-height:1.38;margin-top:2px}
.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-feats{display:flex;flex-direction:column;gap:12px}
.mega-feats .mega-feat{min-height:128px;padding:20px}
.mega-feat--klv{background-image:radial-gradient(360px 260px at 12% 112%,color-mix(in srgb,#5661F5 82%,transparent),transparent 62%),radial-gradient(300px 220px at 92% -14%,color-mix(in srgb,#7C8AF7 44%,transparent),transparent 70%)}
.mega-feat .ey{color:#9AA3FF;opacity:1}.mega-feat a,.mega-feat .go{color:#fff}
.mega-feat .ey{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.mega-feat b{font-size:18px;font-weight:700;margin:8px 0 6px;line-height:1.25}
.mega-feat i{font-size:13px;font-style:normal;opacity:.92;line-height:1.5}
.mega-feat .go{margin-top:16px;font-size:13px;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:16px 2px 4px}
  .mega-link{padding:12px 2px;gap:12px}
  .mega-link .mi{width:30px;height:30px}
  .mega-link b{font-size:16px}
  .mega-link i{font-size:13px}
  .mega-feat{min-height:0;padding:20px;margin-top:12px;border-radius:16px}
  /* 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:48px}
  .nav-links .nav-top .chev{display:block;position:absolute;right:-3px;top:50%;
    width:44px;height:44px;padding:16px;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:18px;padding:12px 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:12px;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:0;padding:48px 0 80px;
  background:
    radial-gradient(620px 460px at 88% -10%,color-mix(in srgb,var(--brand) 16%,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:64px;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:24px;font-size:14px;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:0;padding:80px 0 8px;text-align:center;
  background:radial-gradient(820px 360px at 50% -14%,color-mix(in srgb,var(--brand) 8%,transparent),transparent 60%)}
.page-hero h1{font-size:clamp(38px,5vw,64px);line-height:1.04;max-width:16ch;margin:16px 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:20px;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 16px;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:8px}
.mock-rail .r{height:26px;border-radius:8px;background:rgba(255,255,255,0.06)}
.mock-rail .r.on{background:color-mix(in srgb,var(--brand) 48%,transparent)}
.mock-canvas{padding:24px;background:var(--surface)}
.mock-kicker{font-size:11px;font-weight:700;color:var(--emerald-ink);text-transform:uppercase;letter-spacing:.12em}
.mock-h{height:16px;width:62%;border-radius:6px;background:var(--bg-soft);margin:12px 0}
.mock-h.s{width:42%}
.mock-chips{display:flex;gap:8px;margin:16px 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:12px;margin-top:16px}
.mock-cards i{display:block;height:92px;border-radius:12px;border:1px solid var(--line);background:var(--bg-soft)}
.mock-score{margin-top:20px;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) 32%,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) 32%,transparent),transparent 62%);
  filter:blur(60px);opacity:.55}
@media(max-width:920px){.hero-3d{max-width:400px}}

/* logos / proof strip */
.logos{padding:64px 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:40px}
.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:64px;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:12px;margin-top:16px;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:32px 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:16px;margin-top:40px}
.agent{display:flex;gap:12px;align-items:flex-start;padding:20px 16px;border:1px solid var(--line);
  border-radius:16px;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:4px}
.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:32px}.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:16px}
.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:24px;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:32px;transition:.18s}
.pillar:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.pi{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);color:var(--brand);margin-bottom:20px}
.pillar h3{font-size:22px;margin-bottom:8px}
.pillar p{color:var(--muted);font-size:16px;margin:0 0 16px}
.link{font-family:Inter;font-weight:600;font-size:16px;color:var(--brand-strong);display:inline-flex;gap:6px;align-items:center}
.link:hover{gap:8px}

/* showcase — committed dark band */
.showcase{background:var(--night);color:#F3EEE7;border-radius:var(--radius-lg);padding:64px;display:grid;grid-template-columns:1fr 1.08fr;gap:48px;align-items:center;overflow:hidden;
  background-image:radial-gradient(560px 320px at 94% -6%,color-mix(in srgb,var(--brand) 32%,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:16px}
.showcase p{color:#B4A996;font-size:18px;margin:16px 0 24px}
.showcase ul{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:12px}
.showcase li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:#E7E0D6}
.showcase li svg{flex:0 0 auto;margin-top:4px;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,0.28);color:#fff}
.showcase .btn-ghost:hover{border-color:#fff}
.shot{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;border:1px solid rgba(255,255,255,0.06)}
.shot .bar{height:38px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 16px}
.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) 32%,#fff),color-mix(in srgb,var(--pink) 24%,#fff) 52%,color-mix(in srgb,var(--violet) 24%,#fff))}
.shot-inner .big::after{content:"";position:absolute;left:16px;bottom:14px;width:38%;height:9px;border-radius:6px;background:rgba(255,255,255,0.8)}
.shot-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.shot-row i{height:58px;border-radius:12px;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) 24%,#fff),#fff)}
.shot-row i:nth-child(2){background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 16%,#fff),#fff)}
.shot-row i:nth-child(3){background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 8%,#fff),#fff)}

/* industries */
.ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
.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:20px;color:#fff;font-family:Inter;font-weight:600;font-size:16px;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:40px}
.tab{font-family:Inter;font-weight:600;font-size:16px;padding:12px 20px;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:8px;vertical-align:middle}
.tab.active .tdot{background:currentColor;opacity:.5}
.pbadge{font-family:Inter;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:999px;vertical-align:middle;margin-left:12px}
.pbadge.live{background:var(--emerald-soft);color:var(--emerald-ink);border:1px solid color-mix(in srgb,var(--emerald) 32%,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:32px;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:48px}
.tab-copy h3{font-size:30px;margin-bottom:16px}
.tab-copy p{color:var(--muted);margin:0 0 24px}
.tab-copy ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.tab-copy li{display:flex;gap:12px;align-items:flex-start;font-size:16px}
.tab-copy li svg{flex:0 0 auto;margin-top:4px;color:var(--brand)}
.tab-visual{background:var(--bg-soft);border-left:1px solid var(--line);padding:40px;display:flex;align-items:center;justify-content:center}
.tab-visual .glass{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:20px;display:grid;gap:12px}
.tab-visual .glass .l{height:12px;border-radius:6px;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:12px;border:1px solid var(--line);
  background:linear-gradient(120deg,color-mix(in srgb,var(--brand) 24%,#fff),color-mix(in srgb,var(--violet) 24%,#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:6px;padding:0 12px;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) 48%,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:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--brand-strong);box-shadow:var(--shadow)}
.tv.wide{max-width:none}
.tv.wide .tvpic{height:300px}
.ec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.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:16px}
.ec-i{width:34px;height:34px;border-radius:12px;background:var(--bg-soft);color:var(--brand);display:flex;align-items:center;justify-content:center}
.ec-badge{font-size:11px;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:4px 8px;border-radius:999px}
.ec-badge.soon{color:var(--muted);background:var(--bg-soft);border-color:var(--line-strong)}
.ec-card h3{font-size:18px;margin:0 0 6px}
.ec-card p{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 16px}
.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;white-space:normal}/* the shared .code below sets white-space:pre for the docs command blocks; this block predates it and wrapped, so keep it wrapping */
.res .code .c1{color:#B4A996}.res .code .c2{color:var(--gold-on-dark)}.res .code .c3{color:#3ED6AC}.res .code .c4{color:#8A93FF}

/* testimonial */
.quote{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:64px;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:20px auto 24px;max-width:780px}
.quote .who{font-size:16px;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:48px}
.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) 24%,var(--bg-soft)),var(--bg-soft))}
.card.t2 .thumb{background:linear-gradient(145deg,color-mix(in srgb,var(--emerald) 24%,var(--bg-soft)),var(--bg-soft))}
.card.t3 .thumb{background:linear-gradient(145deg,var(--night),color-mix(in srgb,var(--brand) 32%,var(--night)))}
.card.t4 .thumb{background:linear-gradient(145deg,color-mix(in srgb,var(--gold) 24%,var(--bg-soft)),var(--bg-soft))}
.card.t5 .thumb{background:linear-gradient(145deg,color-mix(in srgb,var(--emerald) 32%,var(--bg-soft)),var(--bg-soft))}
.card.t6 .thumb{background:linear-gradient(145deg,var(--night-2),color-mix(in srgb,var(--gold) 24%,var(--night-2)))}
.card .body{padding:24px}
.card .tag{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-strong)}
.card h3{font-size:20px;margin:12px 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:64px 64px;text-align:center;position:relative;overflow:hidden;
  background-image:radial-gradient(620px 340px at 30% -14%,color-mix(in srgb,var(--brand) 32%,transparent),transparent 60%),radial-gradient(620px 360px at 82% 120%,color-mix(in srgb,var(--violet) 24%,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 32px;max-width:46ch;text-wrap:balance}
.final .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.signup{margin-top:40px;display:flex;gap:12px;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:16px}
.signup input::placeholder{color:#B4A996}
.form-note{margin-top:16px;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:32px auto 0;background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:6px}
.bill-toggle button{border:0;background:transparent;font:inherit;font-weight:600;font-size:14px;padding:8px 20px;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:13px;font-weight:700;padding-right:6px}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px;align-items:start}
.price-partner{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:20px;padding:20px 24px;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:16px;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:32px;display:flex;flex-direction:column;gap:20px}
.price-card.featured{border-color:var(--brand);box-shadow:var(--shadow),transparent);position:relative}
.price-badge{position:absolute;top:-12px;left:30px;background:var(--brand);color:var(--on-brand);font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px}
.price-card h3{font-size:22px}
.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:14px}
.price-card ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.price-card li{display:flex;gap:12px;align-items:flex-start;font-size:14px}
.price-card li svg{flex:0 0 auto;margin-top:4px;color:var(--brand)}
.price-card li.off{color:var(--muted)}
.price-card li.off svg{color:var(--line-strong)}

/* compare table */
.compare{margin-top:48px;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:16px 24px;border-bottom:1px solid var(--line);font-size:16px}
.compare thead th{background:var(--bg-soft);font-family:Inter;font-weight:700;font-size:13px}
.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:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-align:left}

/* faq */
.faq{display:grid;gap:12px;margin-top:40px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:2px 24px}
.faq details[open]{border-color:var(--line-strong)}
.faq summary{cursor:pointer;list-style:none;font-family:Inter;font-weight:600;font-size:18px;padding:20px 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:16px;max-width:68ch}

/* stat row */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);margin-top:48px;border-top:1px solid var(--line)}
.stat{padding:32px 32px 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:24px}.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:20px;color:var(--muted);font-weight:600}
.stat .l{color:var(--muted);font-size:14px;margin-top:16px;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:32px}
  .stat-row:not(.cols3) .stat{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:baseline;
    column-gap:16px;padding:16px 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:30px}
  .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:32px}
  .stat-row.cols3 .stat{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:baseline;
    column-gap:16px;padding:16px 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:30px}
  .stat-row.cols3 .stat .n .su{font-size:14px}
  .stat-row.cols3 .stat .l{margin-top:0;font-size:13px;line-height:1.5}
}
/* CỘT SỐ 88px CHỈ ĐÚNG KHI Ô ĐÓ LÀ MỘT CON SỐ. Chín trang đặt CHỮ vào đó — "CRO expert",
   "robots + sitemap", "Cart & post-purchase" — và ở 320px cái nhãn 14px bị ép xuống hai dòng, bẻ
   đôi giữa từ ghép: "Cart &" / "post-" / "purchase" xếp dưới chữ "Cart" cỡ 30px. Đo 12/09/2026
   trên /gemupsells, ảnh trong PR.
   Nới cột cho vừa chữ thì cột câu chỉ còn ~120px ở màn 320, nên dưới 440px xếp DỌC: ô số được cả
   chiều rộng, câu nằm dưới. Từ 440px trở lên cột 88px vẫn thẳng hàng như thiết kế muốn.
   PHẢI đứng SAU hai khối @media ở trên: cùng độ đặc hiệu thì thứ tự nguồn quyết định, và khối
   ≤600px khai lại đúng `grid-template-columns` này. Đặt trước, quy tắc dưới đây không bao giờ
   thắng — đo rồi, ảnh y hệt lúc chưa sửa. */
@media(min-width:441px){
  /* Từ 441px trở lên vẫn hai cột, nhưng cột số được PHÉP rộng hơn 88px khi nó chứa chữ. Đo ở 460px:
     giữ cứng 88px thì "CRO expert" xuống hai dòng; cho `auto` thì nó một dòng và cột câu còn ~270px,
     vẫn thừa chỗ. Ô là con số thì `auto` bằng đúng nội dung, nhỏ hơn 88px, nên sàn 88px giữ nguyên
     hàng thẳng như cũ. */
  .stat-row:not(.cols3) .stat,
  .stat-row.cols3 .stat{grid-template-columns:minmax(88px,auto) minmax(0,1fr)}
}
@media(max-width:440px){
  /* Khai đủ HAI bộ chọn của hai khối trên, không viết gọn `.stat-row .stat`: khối ≤1080px dùng
     `.stat-row:not(.cols3) .stat` (0,3,0) nên bản gọn (0,2,0) THUA dù đứng sau — đo rồi, ảnh
     /index ở 320px không đổi lấy một pixel. */
  .stat-row:not(.cols3) .stat,
  .stat-row.cols3 .stat{grid-template-columns:minmax(0,1fr);row-gap:6px}
}


/* values / steps */
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.value{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.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:16px 0 8px}
.value p{color:var(--muted);font-size:16px;margin:0}

/* team */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.member{text-align:center}
.member .ava{aspect-ratio:1;border-radius:16px;border:1px solid var(--line);margin-bottom:16px}
.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:16px;margin-top:48px}
.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:24px}
.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:16px;margin:0}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.field label{font-family:Inter;font-weight:600;font-size:14px}
.field input,.field select,.field textarea{font:inherit;font-size:16px;border:1px solid var(--line-strong);border-radius:12px;padding:12px 16px;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:16px}
.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:20px 0 0;display:grid;gap:20px}
.contact-side li{display:flex;gap:12px;align-items:flex-start}
.contact-side li svg{flex:0 0 auto;margin-top:4px;color:var(--brand)}
.contact-side li b{display:block;font-family:Inter;font-weight:600}
.contact-side li span{color:var(--muted);font-size:16px}

/* 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:48px}
.feature-post .fimg{min-height:320px;background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 48%,var(--night)),var(--night))}
.feature-post .fbody{padding:48px;display:flex;flex-direction:column;justify-content:center}
.feature-post .tag{font-size:12px;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 16px;line-height:1.12}
.feature-post p{color:var(--muted);margin:0 0 24px}

/* footer */
footer{padding:64px 0 40px;border-top:1px solid var(--line)}
.app-dl{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.app-btn{display:inline-flex;align-items:center;gap:12px;padding:8px 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:11px;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:32px}
.foot-brand p{color:var(--muted);font-size:14px;margin:16px 0 0;max-width:30ch}
.foot-col h4{font-family:Inter;font-size:13px;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:6px 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:24px;border-top:1px solid var(--line);font-size:14px;color:var(--muted);flex-wrap:wrap}
.foot-social{display:flex;gap:16px}

/* built-by-GemPages stat trio (inside dark showcase) */
.gp-stats{display:flex;gap:40px;margin:24px 0 32px;flex-wrap:wrap}
.gp-stats>div{display:flex;flex-direction:column;gap:6px}
.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:13px;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:13px;font-weight:600;color:var(--ink-2);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:999px;padding:6px 16px 6px 8px;margin-bottom:24px}
.plat .pill{display:inline-flex;align-items:center;gap:6px;background:var(--bg-soft);border-radius:999px;padding:4px 12px;font-size:12px;color:var(--muted)}
.plat b{color:var(--ink);font-weight:700}
.layer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.layer{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px}
.layer .lh{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.layer .lh .pi{margin:0}
.layer h3{font-size:20px}
.layer p{color:var(--muted);font-size:16px;margin:0}
.layer .foot-note{margin-top:16px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.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 64px}
  .page-hero{padding:152px 0 24px}
  .showcase,.final{padding:40px 32px;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:40px 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:20px 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:20px;color:var(--ink);padding:0 0 12px}
  #why .compare td{text-align:left;border:0;padding:6px 0;font-size:16px}
  #why .compare td::before{display:block;font-family:Inter;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
  #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:var(--shadow);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:12px 0;font-size:18px;border-bottom:1px solid var(--line);border-radius:0}
  .nav-links a:last-child{border-bottom:0}
  .nav-links .menu-signin{display:flex;align-items:center;min-height:44px;font-weight:600;border-bottom:0}
  .nav-links .menu-cta{display:block;width:100%;box-sizing:border-box;margin-top:12px;background:var(--ink);color:var(--on-brand);text-align:center;
    border-radius:999px;padding:16px 20px;line-height:1.2;border-bottom:0;font-weight:600;font-size:16px}
  .nav-links .menu-cta:hover{background:var(--brand-strong)}
}
/* Sign-in inside the hamburger. `.nav-cta .signin` is hidden below 1080px, so without this the
   only route back to an existing account is desktop-only. A plain menu row, not a second
   filled button: the door is the CTA, this is navigation. */
.menu-signin{display:none}
.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:24px;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 16px;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,0.2);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,0.4);padding:6px 12px;border-radius:999px}
.gbody{padding:16px 20px 20px;display:grid;gap:8px}
.gbody .gh{height:12px;width:58%;border-radius:6px;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:12px;font-weight:700;color:var(--emerald-ink);background:var(--emerald-soft);border:1px solid color-mix(in srgb,var(--emerald) 32%,transparent);padding:4px 12px;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 ==== */
.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:13px;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:20px 0 0}
.a-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:24px 0 0;font-size:14px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:32px}
.a-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-strong)}
.a-body{margin-top:40px;font-size:18px;line-height:1.72;color:var(--ink-2)}
.a-body h2{font-size:24px;line-height:1.25;color:var(--ink);margin:48px 0 0;letter-spacing:-.01em}
.a-body h3{font-size:20px;color:var(--ink);margin:32px 0 0}
.a-body p{margin:20px 0 0}
.a-body ul,.a-body ol{margin:20px 0 0;padding-left:24px}
.a-body li{margin:8px 0 0}
.a-body strong{color:var(--ink);font-weight:600}
.a-body blockquote{margin:32px 0 0;padding:6px 0 6px 24px;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 8px;font-size:16px;font-family:ui-monospace,"SF Mono",Menlo,monospace}
.a-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:40px;font-weight:600;color:var(--brand-strong);font-size:16px}
.a-cta{margin-top:64px;padding:32px;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:12px 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 32px;text-align:center}
/* ===== Family D — editorial backdrop for text-only heroes (compact-hero + page-hero) ===== */
.hero.compact-hero,.page-hero{position:relative;overflow:hidden;isolation:isolate}
.hero.compact-hero::before,.page-hero::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(720px 480px at 86% -14%,color-mix(in srgb,var(--brand) 16%,transparent),transparent 60%),
    radial-gradient(600px 540px at 4% 116%,color-mix(in srgb,var(--violet) 12%,transparent),transparent 62%)}
.hero.compact-hero::after,.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background:repeating-radial-gradient(circle at 86% -6%,transparent 0 46px,color-mix(in srgb,var(--brand) 8%,transparent) 46px 47px);
  -webkit-mask:radial-gradient(560px 460px at 86% -6%,#000,transparent 72%);mask:radial-gradient(560px 460px at 86% -6%,#000,transparent 72%)}
.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:var(--shadow),var(--shadow)}
.hero-tv .tvpic{height:286px}


/* /data hero: compact data-guarantee fact strip */
.data-facts{display:flex;flex-wrap:wrap;gap:16px 24px;margin-top:32px;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:16px;border-left:2px solid var(--brand)}
.data-facts b{color:var(--ink);font-weight:650;font-size:16px}
.hero-3d{display:flex;align-items:center;justify-content:center}
/* mega menu — airier, modern: fewer words, more breathing room */
.mega-link{align-items:center;padding:12px 16px;gap:12px}
.mega-link b{font-size:16px;letter-spacing:-.005em}
.mega-link i{font-size:13px;margin-top:2px;line-height:1.35}
.mega-h{font-size:11px;letter-spacing:.15em;padding:12px 16px 8px}
.mega-grid{gap:4px 12px}
.mega-link .mi{width:34px;height:34px;border-radius:12px}
/* 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:16px;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:24px 0 0;padding:0;display:grid;gap:16px}
.next-steps li{counter-increment:nx;position:relative;padding:16px 20px 16px 64px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);font-size:16px;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:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.next-steps li b{color:var(--ink)}
.nx-alt{margin-top:20px;font-size:16px;color:var(--muted)}
.nx-alt a{color:var(--brand-strong);font-weight:600}
/* changelog entries */
.cl-release{margin-top:32px}
.cl-date{font-size:12px;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:16px;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:16px;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:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 8px;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:32px;font-size:14px;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:12px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow);
  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:12px}
/* front = a storefront */
.sf-nav{display:flex;align-items:center;gap:6px;padding-bottom:8px;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:4px;border:1.5px solid var(--line-strong)}
.sf-hero{margin-top:12px;padding:16px;border-radius:8px;background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 24%,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:12px}
.sf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.sf-c{border:1px solid var(--line);border-radius:8px;padding:6px}
.sf-img{display:block;height:30px;border-radius:6px;margin-bottom:6px}
.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:4px}
.sf-c i:last-child{width:52%}
/* mid = section blocks */
.s3-blk{display:block;border-radius:8px;border:1px dashed var(--line-strong);background:var(--bg-soft);margin-bottom:8px;height:34px}
.s3-blk.h2{height:52px}.s3-blk.h3{height:26px}
/* back = data */
.s3-row{display:block;height:6px;border-radius:4px;background:var(--line-strong);margin-bottom:6px}
.s3-row.w60{width:58%}
.s3-chart{display:flex;align-items:flex-end;gap:6px;height:52px;margin-top:12px}
.s3-chart i{flex:1;border-radius:4px 4px 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:11px;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 12px;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:24px;padding:8px 0 40px;
  border-bottom:1px solid var(--line);margin-bottom:40px}
.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:16px;padding-bottom:32px;margin-bottom:24px}}
/* 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}
}
/* Weight 700, not 800, and tracking eased from -.032em. The dashboard's headings are 700; an 800
   display with tight negative tracking is the other half of why the site read heavier than the
   app it sells. The .btn override that lived here — uppercase, tracked, 700 — is gone: actions
   are rectangles in sentence case now (see .btn above). */
h1,h2{font-weight:650;letter-spacing:-.022em}h3,h4{font-weight:600}.hero h1{line-height:1.06}.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) 48%,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:var(--shadow),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:var(--shadow);border-radius:16px;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:24px;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:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pill-list li{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);padding:20px 24px;font-size:16px;line-height:1.6;color:var(--muted)}
.pill-list li svg{flex:0 0 auto;margin-top:4px;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:32px 0 24px}
.hero-ab__v{margin:0;position:relative;border-radius:16px;overflow:visible}
.hero-ab__v img{display:block;width:100%;height:auto;border-radius:16px}
.hero-ab__tag{position:absolute;top:-26px;left:2px;font-size:12px;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:var(--shadow)}
.hero-ab__v--b{width:88%;margin-left:auto;margin-top:-16%;
  box-shadow:var(--shadow);
  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:13px;font-weight:700;letter-spacing:.02em;
  padding:8px 16px;border-radius:999px;box-shadow:var(--shadow)}
@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:32px}
  .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:11px}
  .hero-ab__pill{right:8px;bottom:8px;font-size:11px;padding:6px 12px}
}
@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. */
  /* KHÔNG khai lại số cột ở đây. `@media(max-width:560px)` phía trên đặt `.foot-grid` về MỘT cột,
     và khối 620px này đứng SAU nó trong file với cùng specificity — nên ở 320/390px nó thắng và
     footer vẫn là HAI cột ~130px. Đo 12/09/2026: `text_squeezed` đỏ trên 74/87 trang, thủ phạm
     dùng chung là `div.foot-col > a` — link hai từ xuống ba dòng, tức chữ gãy giữa từ.
     Khối này chỉ cần cái KHE; số cột đã có 1080px lo cho tablet và 560px lo cho điện thoại. */
  .foot-grid{gap:24px 20px}
  .foot-brand{grid-column:1/-1}
  /* 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}}
.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:32px 0 12px;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:24px;margin-top:40px;text-align:left}
.story-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px 32px}
.story-col .ck{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-strong);margin:0 0 20px}
.story-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.story-col li{position:relative;padding-left:24px;color:var(--ink-2);line-height:1.5;font-size:16px}
.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:32px 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:20px;margin-top:48px}
.eval{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 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:24px;width:max-content;will-change:transform;animation:mqscroll 64s linear infinite}
.mq-row.rev{animation-direction:reverse}
.mq-row + .mq-row{margin-top:24px}
.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:16px;
  overflow:hidden;box-shadow:var(--shadow)}
.mq-bar{display:flex;align-items:center;gap:6px;height:26px;padding:0 12px;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) 48%,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:12px 16px;border-bottom:1px solid rgba(255,255,255,0.06)}
.announce .tag{display:inline-block;background:rgba(122,132,255,.2);color:#A7AEFF;border-radius:999px;padding:2.5px 8px;font-size:11px;font-weight:700;letter-spacing:.09em;margin-right:12px;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,0.28);padding-bottom:2px;transition:border-color .18s}
.announce a:hover{border-bottom-color:#fff}
@media(max-width:520px){.announce{font-size:12px;padding:8px 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:24px 32px;box-shadow:var(--shadow);max-width:460px;width:100%}
.wv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.wv-title{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:16px;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:12px;font-weight:700;color:var(--emerald-ink,#0A7A54);background:var(--emerald-soft,#E7F7F1);padding:4px 12px;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:16px;font-weight:600;color:var(--muted);margin-left:2px;letter-spacing:0}
.wv-rate{align-self:flex-start;font-size:11px;font-weight:700;color:var(--emerald-ink,#0A7A54);background:var(--emerald-soft,#E7F7F1);padding:2px 8px;border-radius:999px}
.wv-bar{height:5px;border-radius:4px;background:var(--bg-soft);overflow:hidden}
.wv-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--brand),color-mix(in srgb,var(--brand) 48%,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:24px 20px}.wv-v{font-size:30px}.wv-grid{gap:16px}}
@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:24px;margin-top:48px}
.psol{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 24px;display:flex;flex-direction:column;gap:16px;box-shadow:var(--shadow)}
.psol-p{display:flex;gap:12px;align-items:flex-start;color:var(--muted);font-size:16px;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:12px;align-items:flex-start;font-size:16px;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:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-strong,var(--brand));background:color-mix(in srgb,var(--brand) 8%,transparent);padding:4px 12px;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 ===== */
/* 650 for the display ranks, 600 for the ones that are really labels — measured against
   gemlabs-rival-lens, which tops out at 640, and landing on a weight Inter is actually loaded
   at (400;450;500;600;650;700) so the browser is not rounding 640 up to 700. */
h1,h2{font-weight:650;letter-spacing:-.022em}h3,h4,h5{font-weight:600;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:var(--shadow);transition:box-shadow .4s}
.hero-ab__v--b .abframe{transform:translateZ(30px) rotateY(-5deg);box-shadow:var(--shadow);transition:box-shadow .4s}
.hero-ab__v--b .abframe.abframe--win{box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--brand) 24%,transparent)}
.hero-3d:hover .hero-ab__v--b .abframe{box-shadow:var(--shadow),0 0 0 1px color-mix(in srgb,var(--brand) 48%,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:6px 12px;
  font-size:12px;font-weight:700;letter-spacing:.01em;color:var(--ink);white-space:nowrap;
  box-shadow:var(--shadow)}
.hero-ab__stat::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--muted);margin-right:8px;vertical-align:1px}
.hero-ab__tag--win{color:#fff;background:var(--brand);padding:4px 12px;border-radius:999px;
  top:-32px;box-shadow:var(--shadow)}

/* ===== 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) 48%,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) 32%,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 20px;
  box-shadow:var(--shadow),var(--shadow);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:16px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.ab-card__ic{color:var(--brand);font-size:16px}
.ab-card__live{display:inline-flex;align-items:center;gap:6px;font-size:12px;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:16px}
.ab-tile{position:relative;display:block;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft);padding:12px 12px 16px;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:2px 6px;line-height:1.5}
.ab-tile__hero{display:block;height:40px;border-radius:8px;background:var(--line-strong);margin:0 0 8px}
.ab-tile__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.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) 16%,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:4px;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:8px;background:var(--line-strong);margin-top:12px}
/* winning variant B — brand-tinted + ring + flag */
.ab-tile--win{overflow:visible;background:var(--surface);border-color:color-mix(in srgb,var(--brand) 48%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--brand) 24%,transparent),var(--shadow)}
.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:var(--shadow)}

.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:12px;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:8px}
.hero-cv__big small{display:block;margin-top:8px;font-size:12px;font-weight:600;color:var(--muted)}

/* Brand-match card body */
.hero-bm__row{display:flex;align-items:center;gap:20px}
.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:24px;font-weight:800;color:var(--ink)}
.hero-bm__meta b{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.hero-bm__meta p{margin:4px 0 12px;font-size:13px;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) 64%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:var(--shadow)}
.hero-tab{font:600 11.5px Inter;color:var(--muted);background:transparent;border:0;border-radius:999px;padding:6px 12px;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:20px 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 12px;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:8px;padding:12px}
.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 0 = a real demo storefront screenshot (case study), not an abstract mock */
.hero-store__shot{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.hero-store__shot .hs-bar{display:flex;gap:4px;align-items:center;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--line)}
.hero-store__shot .hs-bar i{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
.hero-store__shot .hs-img{display:block;height:152px;background-size:cover;background-position:top center}

/* card 1 — autopilot task list */
.hero-auto__list{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:12px}
.hero-auto__list li{display:flex;align-items:center;gap:12px;font-size:14px;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:12px 16px}
.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:8px;margin:12px 0 12px}
.hero-lp__opts span{display:flex;align-items:center;gap:8px;font-size:13px;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:8px;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:14px;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) 12%,var(--bg-soft));border:1px solid color-mix(in srgb,var(--brand) 24%,var(--line));border-radius:999px;padding:4px 8px}

/* 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}
  /* motion off: no movement/scale, but keep a gentle opacity cross-fade so the
     capability cards still read as a sequence on reduced-motion desktops (matches mobile clarity) */
  .ab-card.hero-cap{transform:translateY(-50%) rotate(-2.2deg);transition:opacity .5s ease}
  .ab-card.hero-cap.is-on{transform:translateY(-50%) rotate(-2.2deg)}}

/* ===== 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) 48%,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,0.4),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}}


/* Documentation components ------------------------------------------------------
   Moved out of docs.html's inline <style>. They were page-local, so /help
   used .doc-card, .api-table and .code and got no styling at all: the table
   lost its scroll container and pushed the page sideways on a phone. Shared
   here so a component the site already has is a component any page can use. */
.doc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
.doc-card{display:block;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:24px;transition:.16s}
.doc-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.doc-card .di{width:38px;height:38px;border-radius:12px;background:var(--bg-soft);color:var(--brand);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.doc-card h3{font-size:16px;margin:0 0 6px}
.doc-card p{color:var(--muted);font-size:14px;line-height:1.5;margin:0}
@media(max-width:820px){.doc-grid{grid-template-columns:1fr}}
.code{background:var(--night);border-radius:16px;padding:24px;font-family:var(--mono);font-size:13px;line-height:1.75;color:#E7E1EC;box-shadow:var(--shadow);overflow:auto;white-space:pre}.code .c1{color:#B9B2C2}.code .c3{color:#9FE3C9}.code .c4{color:#b79bf5}.doc-steps{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:16px;max-width:860px}.doc-step{display:flex;gap:20px;align-items:flex-start;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:24px 24px}.ds-n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}.doc-step h3{font-size:18px;margin:2px 0 6px}.doc-step p{color:var(--muted);font-size:16px;line-height:1.6;margin:0}.doc-step code{overflow-wrap:anywhere;font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--bg-soft);padding:2px 6px;border-radius:6px}.api-split{display:grid;grid-template-columns:1.05fr .95fr;gap:24px;margin-top:40px;align-items:start}.api-notes h3{font-size:16px;margin:0 0 12px}.api-facts{list-style:none;margin:0;padding:0;display:grid;gap:12px}.api-facts li{color:var(--muted);font-size:16px;line-height:1.6;border-left:2px solid var(--line-strong);padding-left:16px}.api-facts b{color:var(--ink);font-weight:650}.api-th{font-size:16px;margin:48px 0 16px}.api-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px}.api-table{border-collapse:collapse;width:100%;min-width:620px;font-size:14px;background:var(--surface)}.api-table th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:16px 20px;border-bottom:1px solid var(--line);font-weight:650}.api-table td{padding:12px 20px;border-bottom:1px solid var(--line);color:var(--muted);line-height:1.55;vertical-align:top}.api-table tr:last-child td{border-bottom:0}.api-table td:first-child{white-space:nowrap;width:1%}.api-table code,.api-facts code{font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--bg-soft);padding:2px 8px;border-radius:6px}@media(max-width:900px){.api-split{grid-template-columns:1fr}}

/* --mono lives here now. The .code and .api-table rules moved into this sheet still
   referenced it while it was defined only in index.html's inline :root, so every
   command block and code chip outside the homepage silently fell back to Inter. */
:root{--mono:"SF Mono",ui-monospace,Menlo,"Cascadia Code",monospace}

/* Docs layout ------------------------------------------------------------------
   /docs reads like documentation rather than a marketing page: a persistent sidebar
   so every article is one click from every other, a contents list, and a pager.
   The site header stays exactly as it is on every other page, deliberately: one
   header partial is what keeps the nav from drifting page to page. */
/* Full width, not a 1400px box floating in the middle: on a 1920 screen that left
   288px of empty gutter on each side and read like a page about documentation rather
   than documentation. The sidebar is a rail on the left edge now, with its own border,
   and the reading column is capped so the measure does not follow the window. */
.dx{padding-top:0}
.dx-wrap{max-width:none;margin:0;padding:0;display:grid;
  grid-template-columns:300px minmax(0,1fr) 264px;gap:0;align-items:start}
.dx-side{position:sticky;top:74px;height:calc(100dvh - 74px);overflow-y:auto;
  padding:32px 24px 40px;border-right:1px solid var(--line);background:var(--bg-soft)}
.dx-search{position:relative;margin-bottom:20px}
.dx-search input{width:100%;height:38px;padding:0 12px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);color:var(--ink);font-family:inherit;font-size:14px}
.dx-search input:focus{outline:none;border-color:var(--brand)}
.dx-results{position:absolute;top:44px;left:0;right:0;z-index:40;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;
  max-height:60vh;overflow-y:auto}
.dx-results a{display:block;padding:12px 16px;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);font-size:14px}
.dx-results a:last-child{border-bottom:0}
.dx-results a:hover,.dx-results a:focus{background:var(--bg-soft)}
.dx-results i{display:block;color:var(--muted);font-size:13px;font-style:normal;margin-top:2px}
.dx-results .dx-none{padding:12px 16px;color:var(--muted);font-size:14px}
.dx-group{margin-bottom:24px}
.dx-group-t{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:650;margin-bottom:8px}
.dx-link{display:block;padding:6px 12px;margin-left:-10px;border-radius:8px;color:var(--muted);
  text-decoration:none;font-size:16px;line-height:1.45}
.dx-link:hover{color:var(--ink);background:var(--bg-soft)}
.dx-link.is-current{color:var(--brand-strong);background:var(--bg-soft);font-weight:600}
/* The reading column is capped and sits at the start of its track. Letting it fill
   a 1392px cell would stretch every table and code block across the monitor while the
   prose stayed at its measure, which reads as two different pages side by side. */
/* width:100% is load-bearing next to margin-inline:auto. Auto margins on a grid item
   switch off the default stretch, so the item sizes to its content instead of its track:
   a code block with a 77-character line made this 691px wide inside a 390px column and
   pushed the whole page sideways. Fill the track first, then cap, then centre. */
.dx-main{min-width:0;width:100%;max-width:880px;margin-inline:auto;padding:32px 64px 80px}
.dx-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;
  color:var(--muted);margin-bottom:20px}
.dx-crumb a{color:var(--muted);text-decoration:none}
.dx-crumb a:hover{color:var(--ink)}
.dx-crumb i{font-style:normal;opacity:.5}
.dx-main h1{font-size:clamp(30px,3.4vw,42px);line-height:1.12;margin:0 0 12px}
.dx-dek{color:var(--muted);font-size:18px;line-height:1.6;margin:0 0 20px;max-width:68ch}
.dx-actions{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 12px}
.dx-sec{margin-top:48px}
.dx-sec h2{font-size:24px;margin:0 0 6px}
.dx-sec-b{color:var(--muted);font-size:16px;margin:0 0 20px}
.dx-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.dx-card{display:block;padding:20px 20px;border:1px solid var(--line);border-radius:16px;
  background:var(--surface);text-decoration:none}
.dx-card:hover{border-color:var(--line-strong)}
.dx-card b{display:block;color:var(--ink);font-size:16px;font-weight:650;line-height:1.35;
  margin-bottom:6px}
.dx-card span{color:var(--muted);font-size:14px;line-height:1.55}
.dx-toc{position:sticky;top:98px;padding:32px 24px 0;font-size:14px;max-height:calc(100dvh - 120px);overflow-y:auto}
.dx-toc-t{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:650;margin-bottom:12px}
.dx-toc a{display:block;padding:6px 0 6px 12px;border-left:2px solid var(--line);
  color:var(--muted);text-decoration:none;line-height:1.45}
.dx-toc a:hover{color:var(--ink);border-left-color:var(--line-strong)}
.dx-pager{display:flex;justify-content:space-between;gap:16px;margin-top:48px;
  padding-top:24px;border-top:1px solid var(--line)}
.dx-pager a{display:block;max-width:46%;text-decoration:none}
.dx-pager .dx-next{text-align:right;margin-left:auto}
.dx-pager span{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin-bottom:4px}
.dx-pager b{color:var(--ink);font-size:16px;font-weight:600;line-height:1.35}
.dx-pager a:hover b{color:var(--brand-strong)}
@media(max-width:1280px){
  .dx-wrap{grid-template-columns:272px minmax(0,1fr)}
  .dx-toc{display:none}
  .dx-main{padding:32px 40px 80px}
}
@media(max-width:900px){
  /* The sidebar stops being a sidebar rather than being hidden: on a phone the whole
     point of the docs shell is that the other articles are still reachable. */
  .dx-wrap{grid-template-columns:minmax(0,1fr);gap:0;padding:0}
  .dx-side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);
    margin-bottom:0;padding:24px 20px 20px}
  .dx-main{max-width:none;padding:24px 20px 64px}
  .dx-nav{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
  .dx-group{margin-bottom:4px}
  .dx-pager a{max-width:48%}
}

/* Reading measure -------------------------------------------------------------
   The rule: long-form prose sits between 60 and 75 characters per line.

   Measured before writing this, at 1440 wide: docs ran 99 characters per line and
   blog articles 88. Both are well past the point where the eye reliably finds the
   start of the next line, which is what "wall of text" actually is. The font was
   not the problem: 17.5px at 1.72 is right for long-form, and shrinking it would
   have made the lines *longer* in characters.

   So the cap goes on the measure, not the type size, and it goes on prose only.
   Tables, code blocks and figures are not prose and keep the full column width:
   a 15-row API table squeezed to reading width is worse, not better.

   The unit matters, and it is not `ch`. `ch` is the width of the digit zero, which
   is font-dependent: 52ch measured 70 characters in the article font and 98 in the
   FAQ's, because the ratio of "0" to the average character differs between them.
   `em` does track it, because the average character is about 0.47em in any size of
   this family. 33em therefore lands near 70 characters everywhere.

   check-typography.mjs measures the real number in a browser and enforces 45 to 80,
   because none of this is visible in the stylesheet. */
.a-body > p, .a-body > ul, .a-body > ol, .a-body > blockquote,
.a-body > h2, .a-body > h3, .a-body > h4, .dx-dek{max-width:33em}

/* Air. Spacing between blocks, not inside them: the line-height was already right,
   and adding more of it makes a paragraph look loose rather than a page look open. */
.a-body p{margin-top:24px}
.a-body ul,.a-body ol{margin-top:24px}
.a-body li{margin-top:12px}
.a-body h2{margin-top:64px}
.a-body h3{margin-top:40px}
.a-body > .code,.a-body > .api-wrap,.a-body > figure{margin-top:24px;margin-bottom:24px}

/* The blog shell was 720px, which is the measure problem in container form. Bring it
   to the same reading width so an article reads the same wherever it lives. */
.article{max-width:680px}

/* Same rule, the other place it was broken. FAQ answers sit in `.wrap-narrow`, which is
   narrow for a heading and wide for a paragraph: they measured 87 to 98 characters on the
   homepage, /pricing and /managed. Found by check-typography.mjs, not by eye. */
.faq p{max-width:33em}

/* The same cap on the page-local component families the gate found over 80: the Klaviyo
   landing-page sections (up to 122 characters), the post-click cards (169), the legal
   pages (104) and the funnel steps (100). All left-aligned body copy, so a left-aligned
   cap is correct for them.

   Deliberately NOT a blanket `main p{max-width:33em}`. A cap on a centred paragraph
   shrinks its box without centring it, which is how twelve pages once ended up with the
   text sitting 126px left of its own centre. Constrain the containers you have checked. */
.kv-sec > p, .kv-note p, .kv-ask p, .kv-letter p, .kv-step p,
.pcd-card p, .pcd-caveat p, .legal p, .fnp-step p{max-width:33em}

/* Section intros and page-hero leads, the last two over the line at 81 to 86 characters.
   Both come in a centred and a left-aligned variant, and the centred one is exactly where
   a bare max-width misbehaves: it shrinks the box without moving it, so centred text ends
   up sitting left of its own container. The `.center` modifier already exists in the
   markup, so pair the cap with auto margins there and nowhere else. */
.sec-head p{max-width:33em}
.sec-head.center p{margin-inline:auto}
.page-hero .wrap > p{max-width:33em;margin-inline:auto}

/* Inline code holds things like gemtheme.create_draft_theme_from_generation, which is
   wider than a 390px viewport on its own. Without this the token pushes the whole
   document sideways: measured 411px and 433px of scrollWidth on two docs pages. */
.a-body code,.a-body a{overflow-wrap:anywhere}

/* The 3D storefront illustration on #layer is deliberately allowed to bleed out of the
   centred .wrap into the gutter, and its perspective transform makes the painted box wider
   than the laid-out one. Between roughly 700 and 900 wide that pushed 9px past the right
   edge of the viewport and gave the homepage a horizontal scrollbar. This is on live today.

   Clip at the section, which already spans the viewport, so the bleed still shows in the
   gutter and only the part that was off-screen anyway is cut. `clip` rather than `hidden`
   on purpose: hidden would make this a scroll container and change how anything sticky
   inside it behaves. */
#layer{overflow-x:clip}

/* Was this page useful. Sits between the article and the pager, quiet enough to ignore. */
.dx-fb{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;
  flex-wrap:wrap;align-items:center;gap:16px}
.dx-fb-q{font-size:16px;color:var(--muted)}
.dx-fb-btns{display:flex;gap:8px}
.dx-fb-b{height:32px;padding:0 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);color:var(--ink);font-family:inherit;font-size:14px;font-weight:600;
  cursor:pointer}
.dx-fb-b:hover{border-color:var(--line-strong)}
.dx-fb-b.is-on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dx-fb-more{flex:1 1 100%;display:grid;gap:12px;max-width:33em;margin-top:4px}
.dx-fb-l{font-size:14px;color:var(--muted)}
.dx-fb-more textarea{width:100%;padding:12px 12px;border:1px solid var(--line);border-radius:12px;
  background:var(--surface);color:var(--ink);font-family:inherit;font-size:16px;line-height:1.5;
  resize:vertical}
.dx-fb-more textarea:focus{outline:none;border-color:var(--brand)}
.dx-fb-send{justify-self:start;height:36px;padding:0 20px;font-size:14px}
.dx-fb-thanks{font-size:16px;color:var(--muted);margin:0}

/* Docs shell ------------------------------------------------------------------
   One 56px row instead of an announcement bar plus a floating marketing pill. The
   measured saving is 197px of chrome down to 56, on a page whose whole job is to be
   read. The search moved up here out of the sidebar, which is the other half of it. */
.dxh{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
.dxh-in{display:flex;align-items:center;gap:20px;height:56px;padding:0 24px}
.dxh-brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;flex:0 0 auto}
.dxh-brand b{font-size:18px;font-weight:700;letter-spacing:-.02em}
.dxh-kind{flex:0 0 auto;padding:4px 8px;border:1px solid var(--line);border-radius:8px;
  color:var(--muted);text-decoration:none;font-size:13px;font-weight:650;letter-spacing:.02em}
.dxh-kind:hover{color:var(--ink);border-color:var(--line-strong)}
.dxh .dx-search{flex:1 1 auto;max-width:440px;margin:0}
.dxh-links{display:flex;gap:20px;margin-left:auto;flex:0 0 auto}
.dxh-links a{color:var(--muted);text-decoration:none;font-size:16px;font-weight:500}
.dxh-links a:hover{color:var(--ink)}
.dxh .nav-cta{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.dxh-cta{height:36px;padding:0 16px;font-size:14px}
/* The sidebar and contents sit under a 56px header now, not a floating 124px one. */
.dx-side{top:56px;height:calc(100dvh - 56px)}
.dx-toc{top:80px}

.dxf{border-top:1px solid var(--line);background:var(--bg-soft)}
.dxf-in{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;padding:24px 24px;
  font-size:14px;color:var(--muted)}
.dxf-links{display:flex;flex-wrap:wrap;gap:20px;margin-left:auto}
.dxf-links a{color:var(--muted);text-decoration:none}
.dxf-links a:hover{color:var(--ink)}

@media(max-width:900px){
  /* Keep brand and search; the section links and the demo button are reachable from the
     footer and the sidebar, and a phone header should not wrap onto two rows. */
  .dxh-in{gap:12px;padding:0 16px}
  .dxh-links,.dxh-kind,.dxh-cta{display:none}
  .dxh .dx-search{max-width:none}
  .dx-side{top:0}
}

/* Enterprise carries no number, so the card holds its weight another way.
   These sit at the end because .price-amt .num is defined earlier in this file. */
.price-card.enterprise{border-color:var(--ink)}
.price-card .num-quote{font-size:30px;line-height:1.15;letter-spacing:-.01em;white-space:nowrap}
.price-traffic .tnote{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--muted);font-weight:400}

/* §9.1 cổng chạm được — target ≥44px, cách nhau ≥8px, chỉ ở khổ cảm ứng.
   Chuột không cần 44px nên mật độ desktop giữ nguyên.
   Đo bằng: node scripts/visual-gate/visual-gate.mjs --url <url>  (README ở cạnh nó) */
@media(max-width:768px){
  /* §9.6 khoảng thở: khi nhãn XUỐNG DÒNG thì `min-height:44px` LÀ toàn bộ khí — hai dòng
     18,9px chỉ chừa ~5px trên/dưới, vRatio 0,36 (đo trên "See how Managed works →" ở 320px).
     Padding dọc KHÔNG đổi nút một dòng: 18,9+16 = 34,9 < 44 nên nó vẫn đúng 44px. Chỉ nút
     hai dòng mới cao lên, và đó là nút đang chật. */
  .btn{height:auto;min-height:44px;padding-top:8px;padding-bottom:8px}
  .theme-btn,.menu-btn{width:44px;height:44px}
  .brand{min-height:44px}
  .hero-tabs{gap:8px}
  .hero-tab{display:inline-flex;align-items:center;min-height:44px}
  /* Chuyển lên từ @media(max-width:620px): 620px không với tới iPad dọc (768px),
     nên link footer vẫn cao 22px ở đó. Một chủ sở hữu duy nhất cho tap target (§9.3). */
  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;justify-content:center}
  .final a[href^='mailto'],.foot-bottom a{min-height:44px;display:inline-flex;align-items:center}
  .bill-toggle{gap:8px}
  .bill-toggle button{min-height:44px}
  .dx-search input{height:44px}
  /* .is-current SON NEN => cong tinh no la DIEU KHIEN (44px), khong phai link (24px).
     padding 8px cho 39,2px — thieu 4,8px. Dung dung khuon cua cac anh em ngay tren. */
  .dx-link{min-height:44px;display:flex;align-items:center;padding:8px 12px}
  /* .dx-fb-b la NUT (co vien 4 canh) => 44px, khong phai 24px. Mac dinh height:32px. */
  .dx-fb-b{height:44px}
  /* Link trong danh sach bai viet: WCAG 2.5.8 AA doi 24px. O 18px/1.72 hop bam chi ~21px.
     `padding-block` tren element INLINE lam to hop bam ma KHONG day dong ra — nen chu van
     nguyen nhip, khac han viec doi sang inline-block (se pha wrap giua cau). Chi o kho cham. */
  .a-body li > a{padding-block:3px}
  .dx-crumb a,.dxf-links a{min-height:24px;display:inline-flex;align-items:center}
}