/* ============================================================
   ZeroSettle — "Control Room" redesign (2026)
   Scoped to body.zs26. Loaded standalone (no style.css/ethereal).
   Direction B: bento/product-forward, layered surfaces, editorial
   type confidence, green as a disciplined accent, glass on chrome.
   ============================================================ */

/* ---- Söhne ---- */
@font-face { font-family:'Söhne'; src:url('/fonts/sohne-buch.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Söhne'; src:url('/fonts/sohne-kraftig.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Söhne'; src:url('/fonts/sohne-halbfett.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Söhne'; src:url('/fonts/sohne-dreiviertelfett.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }

/* ---- Tokens (light) ---- */
body.zs26 {
  --canvas:#FAFAF9;
  --surface:#FFFFFF;
  --surface-2:#F4F4F1;
  --surface-3:#EFEEEA;
  --tray:#F1F0EC;   /* recessed bento tray (Airbnb/bentogrids nesting) */
  --tile:#FFFFFF;   /* elevated tile sitting on a tray */
  --ink:#0B0B0C;
  --ink-2:#45454B;
  --ink-3:#8A8A91;
  --hairline:rgba(11,11,12,.08);
  --hairline-2:rgba(11,11,12,.12);
  --green:#157A52;
  --green-deep:#0F5C3E;
  --green-tint:#EAF5EF;
  --green-lume:#2FB37C;
  --amber:#C2780B;
  --danger:#D2483C;

  --e1:0 1px 2px rgba(11,11,12,.04), 0 1px 1px rgba(11,11,12,.03);
  --e2:0 2px 4px rgba(11,11,12,.04), 0 4px 12px rgba(11,11,12,.05);
  --e3:0 8px 16px rgba(11,11,12,.05), 0 18px 40px rgba(11,11,12,.08);
  --e4:0 24px 48px rgba(11,11,12,.10), 0 48px 96px rgba(11,11,12,.10);

  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;

  --font:'Söhne',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono','JetBrains Mono','Roboto Mono',monospace;

  --maxw:1200px;
  --maxw-wide:1320px;
  --pad:clamp(20px,5vw,40px);

  --glass-bg:rgba(255,255,255,.86);
  --glass-bd:rgba(11,11,12,.10);

  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  margin:0;
  overflow-x:hidden;
}

/* ---- Tokens (dark) ---- */
[data-theme="dark"] body.zs26 {
  --canvas:#08080A;
  --surface:#141417;
  --surface-2:#1B1B1F;
  --surface-3:#222227;
  --tray:#131317;
  --tile:#1F1F24;
  --ink:#F4F4F2;
  --ink-2:#B5B5BC;
  --ink-3:#76767E;
  --hairline:rgba(255,255,255,.10);
  --hairline-2:rgba(255,255,255,.16);
  --green:#2FB37C;
  --green-deep:#26966A;
  --green-tint:rgba(47,179,124,.12);
  --green-lume:#3ED694;

  --e1:0 1px 2px rgba(0,0,0,.4);
  --e2:0 2px 8px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.4);
  --e3:0 10px 30px rgba(0,0,0,.45);
  --e4:0 30px 70px rgba(0,0,0,.55);

  --glass-bg:rgba(20,20,23,.65);
  --glass-bd:rgba(255,255,255,.10);
}

/* Disable iOS Safari's text auto-inflation. Must live on the root — setting it on a
   zoomed descendant (e.g. the scaled hero dashboard) is ignored, which is why the
   laptop fonts rendered oversized on iOS but fine on Android. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body.zs26 *, body.zs26 *::before, body.zs26 *::after { box-sizing:border-box; }
body.zs26 img { max-width:100%; display:block; }
body.zs26 a { color:inherit; text-decoration:none; }
body.zs26 ::selection { background:var(--green-tint); color:var(--green-deep); }
body.zs26 main { display:block; }

/* ---- Layout primitives ---- */
.zs26 .container { width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); }
.zs26 .section { padding-block:clamp(64px,9vw,128px); position:relative; }
.zs26 .section-center { max-width:var(--maxw); margin:0 auto; }
.zs26 .section-no-card { background:transparent; }
/* Subpage header: clears the fixed nav. Used as the first section on inner
   pages, which open straight into a section header (no 100vh hero). */
.zs26 .section-lead { padding-top:clamp(132px,14vw,168px); }
.zs26 .section-lead .hero-cta { justify-content:center; margin-top:36px; }

/* ---- Subpage hero variants (to break the all-centered sameness) ---- */
/* Soft aura glow behind a hero — painted as a background so it never affects layout.
   (Named hero-glow, NOT hero-aura, to avoid the legacy absolute .hero-aura rule.) */
.zs26 .hero-glow {
  background-image:
    radial-gradient(46% 52% at 50% 0%, rgba(21,122,82,.10), transparent 70%),
    radial-gradient(40% 48% at 12% 8%, rgba(149,130,255,.10), transparent 72%),
    radial-gradient(44% 50% at 88% 4%, rgba(244,170,116,.12), transparent 72%);
  background-repeat:no-repeat; background-position:top center;
  background-size:100% clamp(440px,58vh,680px);
}
/* Split: text left, visual right */
.zs26 .hero-split { display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(32px,5vw,60px); align-items:center; }
.zs26 .hero-split .hero-copy { text-align:left; }
.zs26 .hero-split .eyebrow { text-align:left; margin:0 0 16px; }
.zs26 .hero-split .section-title { text-align:left; margin:0; max-width:17ch; }
.zs26 .hero-split .section-subtitle { text-align:left; margin:18px 0 0; max-width:50ch; }
.zs26 .hero-split .hero-cta { justify-content:flex-start; margin-top:30px; }
.zs26 .hero-visual { min-width:0; }
@media (max-width:880px){
  .zs26 .hero-split { grid-template-columns:1fr; gap:36px; text-align:center; }
  .zs26 .hero-split .hero-copy { text-align:center; }
  .zs26 .hero-split .eyebrow, .zs26 .hero-split .section-title, .zs26 .hero-split .section-subtitle { text-align:center; margin-left:auto; margin-right:auto; }
  .zs26 .hero-split .hero-cta { justify-content:center; }
  .zs26 .hero-visual { max-width:460px; margin:0 auto; width:100%; }
}
/* Big figure accent for a stat-forward hero */
.zs26 .hero-figure { font-family:var(--font); font-variant-numeric:tabular-nums; font-weight:700; line-height:.92; letter-spacing:-.035em; color:var(--green); font-size:clamp(3.4rem,9vw,7rem); }
.zs26 .hero-figure small { display:block; font-size:.22em; font-weight:600; letter-spacing:0; color:var(--ink-3); margin-top:14px; }

/* One canvas background across the whole page — no per-section tints.
   Cards float directly on the canvas (no recessed tray behind them). */

/* Section headers */
.zs26 .section-title {
  font-size:clamp(1.7rem,3vw,2.6rem);
  font-weight:500;
  letter-spacing:-.022em;
  line-height:1.06;
  color:var(--ink);
  max-width:18ch;
  margin:0 auto;
  text-align:center;
}
.zs26 .section-subtitle {
  margin:22px auto 0;
  max-width:60ch;
  text-align:center;
  font-size:clamp(1rem,1.4vw,1.18rem);
  line-height:1.6;
  color:var(--ink-2);
}
.zs26 .section-center > .section-title + .section-subtitle { margin-top:20px; }
.zs26 .section-center > .section-subtitle { margin-bottom:clamp(48px,6vw,72px); }

/* Generic eyebrow */
.zs26 .eyebrow {
  display:block; text-align:center; margin:0 auto 18px;
  font-size:13px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green);
}

/* ---- Buttons ---- */
.zs26 .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-size:14.5px; font-weight:500; line-height:1;
  padding:13px 24px; border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space:nowrap; text-align:center;
}
.zs26 .btn-primary {
  background:var(--green); color:#fff; box-shadow:var(--e1), inset 0 1px 0 rgba(255,255,255,.18);
}
.zs26 .btn-primary:hover { background:var(--green-deep); transform:translateY(-1px); box-shadow:var(--e3); }
[data-theme="dark"] .zs26 .btn-primary { color:#06140D; }
.zs26 .btn-secondary {
  background:var(--surface); color:var(--ink); border-color:var(--hairline-2); box-shadow:var(--e1);
}
.zs26 .btn-secondary:hover { transform:translateY(-1px); box-shadow:var(--e2); border-color:var(--ink-3); }
.zs26 .btn-glow { background:var(--green); color:#fff; box-shadow:var(--e2); }
.zs26 .btn-glow:hover { background:var(--green-deep); transform:translateY(-1px); box-shadow:var(--e3); }

/* ============================================================
   NAVIGATION (markup injected by nav.js)
   ============================================================ */
.zs26 .nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:14px var(--pad) 0;
  transition:padding .3s ease, transform .38s cubic-bezier(.3,.8,.3,1);
}
/* Auto-hide on scroll-down; revealed on scroll-up or cursor-near-top (dock-style) */
.zs26 .nav.nav-hidden { transform:translateY(-135%); }
.zs26 .nav-inner {
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; gap:24px;
  padding:10px 12px 10px 22px;
  border-radius:var(--r-pill);
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border:1px solid var(--glass-bd);
  box-shadow:var(--e2);
  transition:box-shadow .3s ease, background .3s ease;
}
.zs26 .nav.nav-solid .nav-inner { box-shadow:var(--e3); background:var(--glass-bg); }
.zs26 .nav-logo { display:flex; align-items:center; margin-right:auto; }
.zs26 .nav-logo-icon { height:24px; width:auto; }
.zs26 .nav-links { display:flex; align-items:center; gap:28px; }
.zs26 .nav-links > a, .zs26 .nav-dropdown-trigger {
  font-size:14.5px; font-weight:500; color:var(--ink-2);
  display:inline-flex; align-items:center; gap:5px; transition:color .15s;
}
.zs26 .nav-links > a:hover, .zs26 .nav-dropdown-trigger:hover { color:var(--ink); }
.zs26 .nav-dropdown { position:relative; }
.zs26 .nav-dropdown-menu {
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md);
  box-shadow:var(--e3); padding:8px; min-width:210px;
  opacity:0; visibility:hidden; transition:.18s ease; display:flex; flex-direction:column;
}
.zs26 .nav-dropdown:hover .nav-dropdown-menu,
.zs26 .nav-dropdown:focus-within .nav-dropdown-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.zs26 .nav-dropdown-menu a { font-size:14px; color:var(--ink-2); padding:9px 12px; border-radius:10px; }
.zs26 .nav-dropdown-menu a:hover { background:var(--surface-2); color:var(--ink); }
.zs26 .nav-actions { display:flex; align-items:center; gap:10px; }
.zs26 .theme-toggle {
  width:38px; height:38px; border-radius:var(--r-pill); border:1px solid var(--hairline);
  background:var(--surface); color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:.15s;
}
.zs26 .theme-toggle:hover { color:var(--ink); border-color:var(--ink-3); }
.zs26 .theme-toggle .icon-moon { display:none; }
[data-theme="dark"] .zs26 .theme-toggle .icon-sun { display:none; }
[data-theme="dark"] .zs26 .theme-toggle .icon-moon { display:block; }
.zs26 .nav-actions .btn-primary { padding:11px 20px; font-size:14.5px; }
.zs26 .nav-login-link { font-size:14.5px; font-weight:500; color:var(--ink-2); padding:9px 6px; transition:color .15s; white-space:nowrap; }
.zs26 .nav-login-link:hover { color:var(--ink); }
/* Signed-in state reuses the primary nav pill — just relabelled "Dashboard →" */
.zs26 .nav-mobile-toggle { display:none; width:40px; height:40px; border:1px solid var(--hairline); background:var(--surface); border-radius:var(--r-pill); cursor:pointer; flex-direction:column; gap:4px; align-items:center; justify-content:center; }
.zs26 .nav-mobile-toggle span { width:16px; height:1.5px; background:var(--ink); display:block; transition:transform .25s cubic-bezier(.3,.8,.3,1), opacity .2s ease; }
.zs26 .nav-mobile-toggle.active span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.zs26 .nav-mobile-toggle.active span:nth-child(2){ opacity:0; }
.zs26 .nav-mobile-toggle.active span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }
/* Mobile dropdown menu — drops down from under the nav pill. Animated with
   opacity + transform + visibility (display can't be transitioned), so it
   fades and slides in. Lives inside .nav, so position:absolute anchors it to
   the nav and it rides the nav's auto-hide transform. */
.zs26 .nav-mobile-menu {
  display:flex; flex-direction:column; gap:2px;
  position:absolute; top:calc(100% + 8px); left:var(--pad); right:var(--pad);
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  box-shadow:var(--e4); padding:14px;
  max-height:calc(100svh - 120px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; transform-origin:top right;
  opacity:0; visibility:hidden; transform:translateY(-10px) scale(.98); pointer-events:none;
  transition:opacity .22s ease, transform .24s cubic-bezier(.3,.8,.3,1), visibility .24s;
}
.zs26 .nav-mobile-menu.active {
  opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto;
}
.zs26 .nav-mobile-menu a { font-size:15px; color:var(--ink-2); padding:11px 12px; border-radius:10px; }
.zs26 .nav-mobile-menu a:hover { background:var(--surface-2); color:var(--ink); }
.zs26 .nav-mobile-menu .btn-primary { margin-top:6px; }
.zs26 .mobile-menu-divider { height:1px; background:var(--hairline); margin:8px 4px; }
@media (prefers-reduced-motion:reduce){
  .zs26 .nav-mobile-menu { transition:none; transform:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.zs26 .hero { position:relative; padding-top:148px; padding-bottom:clamp(60px,9vw,110px); overflow:hidden; }
/* Fill the viewport and vertically center the content so the scroll arrow
   lands at the true fold rather than floating mid-screen. */
@media (min-width:961px){
  .zs26 .hero { min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding-top:120px; padding-bottom:104px; }
  .zs26 .hero .container { width:100%; }
}
.zs26 .hero-aura {
  position:absolute; inset:-10% -10% auto -10%; height:140%; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 42% at 76% 20%, rgba(21,122,82,.10) 0%, transparent 70%),
    radial-gradient(50% 45% at 18% 8%, rgba(212,160,80,.06) 0%, transparent 72%),
    radial-gradient(60% 50% at 60% 60%, rgba(120,140,160,.05) 0%, transparent 75%);
  filter:saturate(112%);
}
[data-theme="dark"] .zs26 .hero-aura {
  background:
    radial-gradient(46% 42% at 76% 18%, rgba(47,179,124,.16) 0%, transparent 70%),
    radial-gradient(52% 46% at 14% 6%, rgba(120,90,40,.12) 0%, transparent 74%),
    radial-gradient(60% 50% at 58% 62%, rgba(60,80,120,.12) 0%, transparent 78%);
}
.zs26 .hero .container { position:relative; z-index:1; max-width:var(--maxw-wide); }
.zs26 .hero-grid {
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px,5vw,80px); align-items:center;
}
.zs26 .hero-content { max-width:560px; }

/* staggered reveal */
@media (prefers-reduced-motion:no-preference){
  .zs26 .hero-content > * { opacity:0; transform:translateY(14px); animation:zsUp .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .zs26 .hero-title{ animation-delay:.04s }
  .zs26 .hero-lede{ animation-delay:.1s } .zs26 .hero-calc{ animation-delay:.16s }
  .zs26 .hero-cta{ animation-delay:.24s } .zs26 .hero-yc{ animation-delay:.3s }
  .zs26 .hero-dev-link{ animation-delay:.36s }
  .zs26 .hero-stage{ opacity:0; transform:translateY(20px) scale(.985); animation:zsUp .9s cubic-bezier(.2,.7,.2,1) .3s forwards; }
}
@keyframes zsUp { to { opacity:1; transform:none; } }

.zs26 .hero-badge {
  display:inline-flex; align-items:center; gap:9px; padding:7px 14px 7px 16px;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-pill);
  box-shadow:var(--e1); margin-bottom:28px;
}
.zs26 .hero-badge span { font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.zs26 .hero-badge img { height:18px; width:auto; }
[data-theme="dark"] .zs26 .hero-badge img { filter:brightness(1.1); }

/* Quiet YC trust mark below the CTA (replaces the prominent top badge) */
.zs26 .hero-yc { display:inline-flex; align-items:center; gap:8px; margin-top:22px; opacity:.8; transition:opacity .15s; }
.zs26 .hero-yc:hover { opacity:1; }
.zs26 .hero-yc span { font-size:11.5px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.zs26 .hero-yc img { height:16px; width:auto; }
[data-theme="dark"] .zs26 .hero-yc img { filter:brightness(1.1); }

.zs26 .hero-title {
  font-size:clamp(2.4rem,4.4vw,3.9rem); font-weight:500; letter-spacing:-.028em;
  line-height:1.04; color:var(--ink); margin:0;
}
.zs26 .hero-lede {
  margin:18px 0 0; font-size:clamp(1.1rem,1.7vw,1.4rem); font-weight:500;
  color:var(--ink-2); letter-spacing:-.01em;
}

/* live savings calculator (hero) */
.zs26 .hero-calc { margin-top:28px; max-width:440px; }
.zs26 .hero-calc-label {
  display:block; font-size:12px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:10px;
}
.zs26 .hero-calc-field {
  display:flex; align-items:baseline; gap:6px;
  border-bottom:2px solid var(--hairline-2); padding-bottom:8px; transition:border-color .2s;
}
.zs26 .hero-calc-field:focus-within { border-bottom-color:var(--green); }
.zs26 .hero-calc-dollar { font-family:var(--font); font-size:clamp(1.5rem,2.4vw,2rem); font-weight:600; color:var(--ink-3); }
.zs26 .hero-input {
  font-family:var(--font); font-variant-numeric:tabular-nums; font-weight:600;
  font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--ink); background:transparent; border:none;
  padding:0; margin:0; flex:1; width:100%; min-width:0;
  outline:none; letter-spacing:-.01em; cursor:text;
}
.zs26 .hero-calc-result { margin-top:14px; font-size:1.05rem; color:var(--ink-2); }
.zs26 .eq-profit {
  font-family:var(--font); font-variant-numeric:tabular-nums; font-weight:700;
  font-size:1.25em; color:var(--green); letter-spacing:-.01em;
}

.zs26 .hero-cta { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }

.zs26 .hero-dev-link {
  margin-top:24px; background:none; border:none; cursor:pointer; padding:0;
  font-family:var(--mono); font-size:13.5px; color:var(--ink-3); transition:color .15s;
}
.zs26 .hero-dev-link:hover { color:var(--green); }
.zs26 .btn-text-wrap { position:relative; display:inline-block; }
.zs26 .btn-text-new { position:absolute; left:0; top:0; }

/* ---- Hero product stage ---- */
.zs26 .hero-right { position:relative; }
.zs26 .hero-stage { position:relative; min-height:clamp(360px,40vw,520px); }

.zs26 .stage-phone {
  position:absolute; right:2%; top:-4%; width:34%; max-width:210px; z-index:2;
  transform:rotate(4deg); border-radius:30px; overflow:hidden; box-shadow:var(--e4);
  border:5px solid var(--surface);
}
.zs26 .stage-phone-img { width:100%; height:auto; display:block; }

.zs26 .stage-dash {
  position:relative; z-index:1; width:92%; margin-left:0; transform:rotate(-1.4deg);
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-xl);
  box-shadow:var(--e4); overflow:hidden;
}
.zs26 .dash-bar {
  display:flex; align-items:center; gap:7px; padding:13px 16px; border-bottom:1px solid var(--hairline);
  background:var(--surface-2);
}
.zs26 .dash-dot { width:9px; height:9px; border-radius:50%; background:var(--hairline-2); }
.zs26 .dash-url {
  margin-left:8px; font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-pill); padding:4px 12px;
}
.zs26 .dash-live {
  margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  color:var(--green); background:var(--green-tint); border-radius:var(--r-pill); padding:4px 11px;
}
.zs26 .live-dot { width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(21,122,82,.5); animation:pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(21,122,82,.45)} 70%{box-shadow:0 0 0 7px rgba(21,122,82,0)} 100%{box-shadow:0 0 0 0 rgba(21,122,82,0)} }
.zs26 .dash-body { display:grid; grid-template-columns:54px 1fr; min-height:240px; }
.zs26 .dash-side { border-right:1px solid var(--hairline); padding:18px 0; display:flex; flex-direction:column; align-items:center; gap:14px; }
.zs26 .side-item { width:22px; height:8px; border-radius:4px; background:var(--surface-3); }
.zs26 .side-item-on { background:var(--green); width:26px; }
.zs26 .dash-main { padding:24px 26px 26px; }
.zs26 .dash-label { font-size:12.5px; font-weight:500; color:var(--ink-3); }
.zs26 .dash-figure {
  font-family:var(--font); font-variant-numeric:tabular-nums; font-size:clamp(1.7rem,3vw,2.4rem);
  font-weight:600; color:var(--ink); letter-spacing:-.02em; margin-top:6px; display:flex; align-items:baseline; gap:12px;
}
.zs26 .dash-delta { font-size:.5em; font-weight:600; color:var(--green); }
.zs26 .dash-chart { display:flex; align-items:flex-end; gap:6px; height:120px; margin-top:24px; }
.zs26 .dash-chart span { flex:1; background:var(--surface-3); border-radius:5px 5px 2px 2px; min-height:6px; }
.zs26 .dash-chart .bar-now { background:var(--green); }

.zs26 .stage-tile {
  position:absolute; z-index:3; background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--r-lg); box-shadow:var(--e4); padding:16px 18px; display:flex; flex-direction:column; gap:4px;
}
.zs26 .stage-tile-mrr { left:-5%; bottom:16%; width:min(200px,50%); }
.zs26 .stage-tile-ent { right:-4%; top:18%; width:min(212px,54%); gap:6px; box-shadow:var(--e3); }
.zs26 .tile-label { font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.zs26 .tile-figure { font-family:var(--font); font-variant-numeric:tabular-nums; font-size:1.7rem; font-weight:700; color:var(--green); letter-spacing:-.02em; }
.zs26 .tile-delta { font-size:12px; color:var(--ink-3); }
.zs26 .tile-ent-id { font-family:var(--mono); font-size:14px; font-weight:500; color:var(--ink); display:flex; align-items:center; gap:7px; }
.zs26 .tile-check { display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:var(--green); color:#fff; font-size:10px; }
.zs26 .tile-ent-meta { font-size:12px; color:var(--ink-3); }
.zs26 .tile-pills { display:flex; gap:5px; margin-top:4px; }
.zs26 .tile-pills span { font-size:10.5px; font-weight:500; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-pill); padding:3px 9px; }

/* Hover the cluster (or the primary CTA) → ALL the layered pieces drift apart
   and grow slightly, so you can see a bit more of each at once. */
@media (min-width:961px) and (prefers-reduced-motion:no-preference){
  .zs26 .stage-phone, .zs26 .stage-dash, .zs26 .stage-tile-mrr, .zs26 .stage-tile-ent {
    transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
  }
  .zs26 .hero-stage:hover .stage-phone,
  .zs26 .hero-grid:has(.hero-cta .btn-primary:hover) .stage-phone { transform:rotate(5deg) translate(62px,-58px) scale(1.1); box-shadow:var(--e4); }
  .zs26 .hero-stage:hover .stage-dash,
  .zs26 .hero-grid:has(.hero-cta .btn-primary:hover) .stage-dash { transform:rotate(-1.4deg) translateY(6px) scale(1.05); box-shadow:var(--e4); }
  .zs26 .hero-stage:hover .stage-tile-mrr,
  .zs26 .hero-grid:has(.hero-cta .btn-primary:hover) .stage-tile-mrr { transform:translate(-58px,56px) scale(1.12); box-shadow:var(--e4); }
  .zs26 .hero-stage:hover .stage-tile-ent,
  .zs26 .hero-grid:has(.hero-cta .btn-primary:hover) .stage-tile-ent { transform:translate(58px,-46px) scale(1.12); box-shadow:var(--e4); }
}

/* dev reveal (code card) */
.zs26 .dev-reveal-card {
  background:#0B0B0E; border:1px solid rgba(255,255,255,.08); border-radius:var(--r-lg);
  box-shadow:var(--e4); overflow:hidden;
}
.zs26 .dev-code-tabs { display:flex; gap:2px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.07); }
.zs26 .dev-tab { background:none; border:none; color:#8A8A91; font-family:var(--font); font-size:13px; font-weight:500; padding:7px 14px; border-radius:var(--r-pill); cursor:pointer; transition:.15s; }
.zs26 .dev-tab.active { background:rgba(255,255,255,.08); color:#fff; }
.zs26 .dev-code-panels { position:relative; transition:height .35s ease; overflow:hidden; }
.zs26 .dev-code-panel { display:none; padding:20px 22px; font-family:var(--mono); font-size:13px; line-height:1.7; color:#D6D6DC; }
.zs26 .dev-code-panel.active { display:block; }
.zs26 .dev-code-panel .code-line { white-space:pre; }
@media (prefers-reduced-motion:no-preference){
  .zs26 .dev-code-panel.active .code-line { opacity:0; transform:translateY(8px); animation:zsUp .4s ease forwards; }
  .zs26 .dev-code-panel.active .code-line:nth-child(n){ animation-delay:calc(var(--i,0) * .03s); }
}
.zs26 .code-keyword { color:#7FD8A8; }
.zs26 .code-string { color:#E0B584; }
.zs26 .code-comment { color:#6B6B73; font-style:italic; }

/* code-active toggle */
@media (min-width:1024px){
  .zs26 .dev-reveal { position:absolute; inset:0; display:flex; align-items:center; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(12px) scale(.985); transition:opacity .4s ease, transform .4s ease; }
  .zs26 .dev-reveal-card { width:100%; }
  .zs26 .hero.code-active .dev-reveal { opacity:1; visibility:visible; pointer-events:auto; transform:none; }
  .zs26 .hero.code-active .hero-stage { opacity:0; visibility:hidden; transform:scale(.98); transition:opacity .35s ease, transform .35s ease; }
}
@media (max-width:1023px){
  .zs26 .dev-reveal { height:0; overflow:hidden; transition:height .4s ease; margin-top:20px; }
  .zs26 .dev-reveal-card { width:100%; }
}

/* scroll arrow */
.zs26 .hero-scroll-arrow {
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
  width:42px; height:42px; border-radius:var(--r-pill); display:grid; place-items:center;
  color:var(--ink-3); background:var(--surface); border:1px solid var(--hairline); box-shadow:var(--e1);
  transition:opacity .3s, transform .3s; z-index:2; animation:bob 2.4s ease-in-out infinite;
}
.zs26 .hero-scroll-arrow.hidden { opacity:0; pointer-events:none; }
@keyframes bob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(5px)} }

/* ============================================================
   PILLARS STRIP
   ============================================================ */
.zs26 .pillars-strip { padding-block:clamp(60px,8vw,116px); }
.zs26 .pillars-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:8px; }
.zs26 .pillar-card {
  display:flex; flex-direction:column; padding:24px 22px 20px; background:var(--tile);
  border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--e1);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; min-height:300px;
}
.zs26 .pillar-card:hover { transform:translateY(-4px); box-shadow:var(--e3); border-color:var(--hairline-2); }
.zs26 .pillar-icon {
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--surface-2); color:var(--ink); border:1px solid var(--hairline); margin-bottom:18px;
}
.zs26 .pillar-card:hover .pillar-icon { background:var(--green-tint); color:var(--green); border-color:transparent; }
.zs26 .pillar-name { font-size:1.18rem; font-weight:600; letter-spacing:-.01em; color:var(--ink); margin:0 0 8px; }
.zs26 .pillar-desc { font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:0; }
.zs26 .pillar-thumb {
  margin-top:auto; margin-bottom:16px; background:var(--surface-2); border:1px solid var(--hairline);
  border-radius:var(--r-md); padding:14px; height:96px; display:flex; flex-direction:column; gap:6px; justify-content:center; overflow:hidden;
}
.zs26 .pillar-thumb-checkout { gap:7px; }
.zs26 .t-row { height:9px; border-radius:4px; background:var(--surface-3); }
.zs26 .t-row-lg { height:13px; width:70%; }
.zs26 .t-row-short { width:45%; }
.zs26 .t-row-cta { background:var(--green); width:55%; height:13px; margin-top:2px; }
.zs26 .pillar-thumb-chart { flex-direction:row; align-items:flex-end; gap:5px; }
.zs26 .t-bar { flex:1; background:var(--surface-3); border-radius:3px 3px 1px 1px; }
.zs26 .pillar-thumb-chart .t-bar:last-child { background:var(--green); }
.zs26 .pillar-thumb-entitle { gap:5px; }
.zs26 .t-line { font-family:var(--mono); font-size:11px; color:var(--ink-2); display:flex; justify-content:space-between; }
.zs26 .t-check { color:var(--green); }
.zs26 .pillar-thumb-ab { flex-direction:row; gap:8px; align-items:stretch; }
.zs26 .t-variant { flex:1; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--font); font-size:13px; font-weight:600; }
.zs26 .t-variant-win { background:var(--green-tint); color:var(--green); }
.zs26 .t-variant-win small { font-size:9px; }
.zs26 .t-variant-lose { background:var(--surface-3); color:var(--ink-3); }
.zs26 .pillar-link { font-size:13.5px; font-weight:500; color:var(--ink-3); transition:color .15s, gap .15s; }
.zs26 .pillar-card:hover .pillar-link { color:var(--green); }

/* ---- Feature card ---- the plain icon/title/text card (the recurring
   inner-page shape). Visual sibling of pillar-card; reuses .pillar-icon /
   .pillar-name / .pillar-desc inside. Only the container + grid are new. */
.zs26 .feature-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:14px; margin-top:8px; text-align:left;
}
/* Force a 3-up grid on desktop (e.g. a 6-card section → clean 3×2 instead of 4+2). */
@media (min-width:721px){ .zs26 .feature-grid.cols-3 { grid-template-columns:repeat(3,1fr); } }
.zs26 .feature-card {
  display:flex; flex-direction:column; padding:24px 22px; background:var(--tile);
  border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--e1);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.zs26 .feature-card:hover { transform:translateY(-4px); box-shadow:var(--e3); border-color:var(--hairline-2); }
.zs26 .feature-card:hover .pillar-icon { background:var(--green-tint); color:var(--green); border-color:transparent; }
.zs26 .feature-card .pillar-desc { margin-top:6px; }

/* ---- Step bento ---- numbered, varied-size tiles for a sequential flow.
   Reuses .feature-card as the tile; one tile spans full width as the centerpiece. */
.zs26 .step-bento { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px; text-align:left; }
.zs26 .step-bento .wide { grid-column:1 / -1; }
.zs26 .step-num { display:inline-block; font-size:12px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; }
.zs26 .step-num b { color:var(--green); }
/* Faint iridescent wash per step (Siri-esque aurora), kept low-alpha so it reads
   as a soft tint in both themes. Content sits above via z-index. */
.zs26 .step-bento .feature-card { position:relative; overflow:hidden; }
.zs26 .step-bento .feature-card > * { position:relative; z-index:1; }
.zs26 .step-bento .feature-card::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
}
.zs26 .step-bento .feature-card:nth-child(1)::before { background:radial-gradient(130% 115% at 100% 0%, rgba(74,124,255,.16), transparent 62%); }
.zs26 .step-bento .feature-card:nth-child(2)::before { background:radial-gradient(130% 115% at 100% 0%, rgba(149,97,255,.16), transparent 62%); }
.zs26 .step-bento .feature-card:nth-child(3)::before { background:linear-gradient(105deg, rgba(255,118,166,.13) 0%, rgba(150,110,255,.13) 38%, rgba(74,150,255,.13) 68%, rgba(60,200,170,.11) 100%); }
.zs26 .step-bento .feature-card:nth-child(4)::before { background:radial-gradient(130% 115% at 100% 0%, rgba(40,190,200,.16), transparent 62%); }
.zs26 .step-bento .feature-card:nth-child(5)::before { background:radial-gradient(130% 115% at 100% 0%, rgba(34,180,120,.16), transparent 62%); }

/* Colorful feature cards — the same faint Siri-esque washes for 6-tile 3×2 sections. */
.zs26 .feature-grid.colorful .feature-card { position:relative; overflow:hidden; }
.zs26 .feature-grid.colorful .feature-card > * { position:relative; z-index:1; }
.zs26 .feature-grid.colorful .feature-card::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; }
.zs26 .feature-grid.colorful .feature-card:nth-child(1)::before { background:radial-gradient(130% 115% at 100% 0%, rgba(74,124,255,.16), transparent 62%); }   /* blue */
.zs26 .feature-grid.colorful .feature-card:nth-child(2)::before { background:radial-gradient(130% 115% at 100% 0%, rgba(149,97,255,.16), transparent 62%); }  /* violet */
.zs26 .feature-grid.colorful .feature-card:nth-child(3)::before { background:radial-gradient(130% 115% at 100% 0%, rgba(236,72,153,.15), transparent 62%); }  /* pink */
.zs26 .feature-grid.colorful .feature-card:nth-child(4)::before { background:radial-gradient(130% 115% at 100% 0%, rgba(245,158,11,.15), transparent 62%); }  /* amber */
.zs26 .feature-grid.colorful .feature-card:nth-child(5)::before { background:radial-gradient(130% 115% at 100% 0%, rgba(40,190,200,.16), transparent 62%); }  /* teal */
.zs26 .feature-grid.colorful .feature-card:nth-child(6)::before { background:radial-gradient(130% 115% at 100% 0%, rgba(34,180,120,.16), transparent 62%); }  /* green */

/* ============================================================
   ANALYTICS BENTO
   ============================================================ */
.zs26 .ae-bento { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(150px,auto); gap:14px; }
.zs26 .ae-tile {
  background:var(--tile); border:1px solid var(--hairline); border-radius:var(--r-lg);
  box-shadow:var(--e1); padding:24px; display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s;
}
.zs26 .ae-tile:hover { transform:translateY(-3px); box-shadow:var(--e3); }
.zs26 .ae-tile-mrr { grid-column:span 2; grid-row:span 2; }
.zs26 .ae-tile-trials { grid-column:span 2; }
.zs26 .ae-tile-entitle { grid-column:span 2; grid-row:span 2; }
.zs26 .ae-tile-churn, .zs26 .ae-tile-retention { grid-column:span 1; }
.zs26 .ae-tile-label { font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.zs26 .ae-mrr-big { font-family:var(--font); font-variant-numeric:tabular-nums; font-size:clamp(2.2rem,4vw,3.2rem); font-weight:700; color:var(--green); letter-spacing:-.025em; margin-top:10px; line-height:1; }
.zs26 .ae-mrr-delta { font-size:14px; color:var(--ink-2); margin-top:10px; }
.zs26 .ae-chart { display:flex; align-items:flex-end; gap:6px; flex:1; min-height:120px; margin-top:24px; }
.zs26 .ae-bar { flex:1; background:var(--surface-3); border-radius:5px 5px 2px 2px; min-height:8px; }
.zs26 .ae-bar-now { background:var(--green); }
.zs26 .ae-trials-num { font-family:var(--font); font-variant-numeric:tabular-nums; font-size:2.4rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; margin-top:8px; line-height:1; }
.zs26 .ae-tile-desc { font-size:13.5px; color:var(--ink-3); margin-top:8px; }
.zs26 .ae-trials-rows { margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.zs26 .ae-trials-row { display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-2); padding:9px 12px; background:var(--surface-2); border-radius:10px; }
.zs26 .ae-trials-row span:last-child { font-family:var(--font); color:var(--ink); }
.zs26 .ae-tile-headline { font-size:1.35rem; font-weight:600; letter-spacing:-.015em; color:var(--ink); margin:12px 0 6px; }
.zs26 .ae-ent-code {
  margin-top:14px; background:#0B0B0E; border-radius:var(--r-md); padding:16px 18px; overflow:auto;
}
.zs26 .ae-ent-code code { font-family:var(--mono); font-size:12.5px; line-height:1.7; color:#9FE7C2; white-space:pre; }
.zs26 .ae-ent-platforms { display:flex; gap:8px; margin-top:16px; }
.zs26 .ae-platform-pill { font-size:12px; font-weight:500; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-pill); padding:6px 14px; transition:color .15s, border-color .15s, background .15s; }
.zs26 a.ae-platform-pill:hover { color:var(--green); border-color:var(--green); background:var(--green-tint); }
.zs26 .ae-churn-num, .zs26 .ae-retention-num { font-family:var(--font); font-variant-numeric:tabular-nums; font-size:2.6rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; margin-top:10px; line-height:1; }

/* Hover: lift the figure and flash it green (animate up + highlight) */
.zs26 .ae-mrr-big, .zs26 .ae-trials-num, .zs26 .ae-churn-num, .zs26 .ae-retention-num {
  transition:transform .3s cubic-bezier(.2,.7,.2,1), color .2s ease;
  transform-origin:left bottom; will-change:transform;
}
@media (prefers-reduced-motion:no-preference){
  .zs26 .ae-tile:hover .ae-trials-num,
  .zs26 .ae-tile:hover .ae-churn-num,
  .zs26 .ae-tile:hover .ae-retention-num { transform:translateY(-5px); color:var(--green); }
  .zs26 .ae-tile:hover .ae-mrr-big { transform:translateY(-5px) scale(1.015); }
  .zs26 .ae-tile:hover .ae-bar-now { animation:zsBarPulse 1.1s ease-in-out; }
}
@keyframes zsBarPulse { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.06)} }
.zs26 .ae-bar-now { transform-origin:bottom; }

/* ============================================================
   USE CASES CAROUSEL
   ============================================================ */
.zs26 .uc-carousel { max-width:1100px; margin:0 auto; }
.zs26 .uc-nav { display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:36px; }
.zs26 .uc-arrow {
  width:44px; height:44px; border-radius:var(--r-pill); border:1px solid var(--hairline); background:var(--surface);
  color:var(--ink-2); display:grid; place-items:center; cursor:pointer; box-shadow:var(--e1); transition:.15s;
}
.zs26 .uc-arrow:hover { color:var(--ink); border-color:var(--ink-3); transform:translateY(-1px); box-shadow:var(--e2); }
.zs26 .uc-dots { display:flex; gap:9px; }
.zs26 .uc-dot { width:9px; height:9px; border-radius:50%; border:none; padding:0; background:var(--hairline-2); cursor:pointer; transition:.2s; }
.zs26 .uc-dot-active { background:var(--green); width:30px; border-radius:var(--r-pill); }
.zs26 .uc-showcase { position:relative; }
.zs26 .uc-slides { position:relative; }
.zs26 .uc-slide { display:none; }
.zs26 .uc-slide-active { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:center; animation:fadeIn .5s ease; }
@keyframes fadeIn { from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none} }
.zs26 .uc-slide-visual { display:flex; justify-content:center; }
.zs26 .uc-screenshot {
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--e4); border:1px solid var(--hairline);
  background:var(--surface); max-width:340px; transform:rotate(-1.5deg); transition:transform .3s;
}
.zs26 .uc-slide-active .uc-screenshot:hover { transform:rotate(0); }
.zs26 .uc-screenshot img { width:100%; height:auto; }
.zs26 .step-title { font-size:clamp(1.5rem,2.4vw,2rem); font-weight:600; letter-spacing:-.02em; color:var(--ink); margin:0 0 16px; }
.zs26 .metric-bubbles { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.zs26 .metric-bubble { font-size:12.5px; font-weight:600; color:var(--green); background:var(--green-tint); border-radius:var(--r-pill); padding:6px 13px; }
.zs26 .step-desc { font-size:1.05rem; line-height:1.62; color:var(--ink-2); margin:0 0 22px; }
.zs26 .use-case-docs-link { font-size:14.5px; font-weight:500; color:var(--green); }
.zs26 .use-case-docs-link:hover { color:var(--green-deep); }

/* Use-cases BENTO (replaces carousel) */
.zs26 .uc-bento { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:1100px; margin:0 auto; }
.zs26 .uc-tile {
  display:grid; grid-template-columns:118px 1fr; gap:24px; align-items:start;
  background:var(--tile); border:1px solid var(--hairline); border-radius:var(--r-lg);
  box-shadow:var(--e1); padding:24px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.zs26 .uc-tile:hover { transform:translateY(-4px); box-shadow:var(--e3); border-color:var(--hairline-2); }
.zs26 .uc-tile-media {
  width:118px; border-radius:20px; overflow:hidden; box-shadow:var(--e3);
  border:1px solid var(--hairline); background:var(--surface-2);
}
.zs26 .uc-tile-media img { width:100%; height:auto; display:block; }
.zs26 .uc-tile-body { min-width:0; display:flex; flex-direction:column; }
.zs26 .uc-tile .step-title { font-size:1.22rem; letter-spacing:-.015em; margin:0 0 12px; }
.zs26 .uc-tile .metric-bubbles { margin-bottom:14px; }
.zs26 .uc-tile .step-desc { font-size:.96rem; line-height:1.55; margin:0 0 16px; }
.zs26 .uc-tile .use-case-docs-link { margin-top:auto; font-size:14px; }
@media (max-width:720px){
  .zs26 .uc-bento { grid-template-columns:1fr; gap:16px; }
  .zs26 .uc-tile { grid-template-columns:96px 1fr; gap:18px; padding:18px; }
  .zs26 .uc-tile-media { width:96px; border-radius:16px; }
  .zs26 .uc-tile .step-title { font-size:1.1rem; }
}

/* ============================================================
   A/B TESTING
   ============================================================ */
.zs26 .ab-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(36px,5vw,72px); align-items:center; max-width:1100px; margin:0 auto; }
.zs26 .ab-bullets { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:22px; }
.zs26 .ab-bullet { display:flex; gap:14px; align-items:flex-start; }
.zs26 .ab-bullet-icon { flex:none; width:26px; height:26px; border-radius:50%; background:var(--green-tint); color:var(--green); display:grid; place-items:center; margin-top:2px; }
.zs26 .ab-bullet span:last-child { font-size:1.02rem; line-height:1.55; color:var(--ink-2); }
.zs26 .ab-bullet strong { color:var(--ink); font-weight:600; }
.zs26 .ab-docs-link { display:inline-block; margin-top:30px; font-size:14.5px; font-weight:500; color:var(--green); }
.zs26 .ab-mock { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--e4); padding:24px; }
.zs26 .ab-mock-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:18px; border-bottom:1px solid var(--hairline); }
.zs26 .ab-mock-title { font-size:14px; font-weight:600; color:var(--ink); }
.zs26 .ab-mock-status { font-size:12px; font-weight:500; color:var(--green); background:var(--green-tint); border-radius:var(--r-pill); padding:5px 12px; }
.zs26 .ab-variants { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0; }
.zs26 .ab-variant { position:relative; padding:18px; border:1px solid var(--hairline); border-radius:var(--r-md); background:var(--surface-2); }
.zs26 .ab-variant-winner { border-color:var(--green); background:var(--green-tint); }
.zs26 .ab-winner-badge { position:absolute; top:-10px; right:12px; font-size:10px; font-weight:700; letter-spacing:.06em; color:#fff; background:var(--green); border-radius:var(--r-pill); padding:4px 10px; }
.zs26 .ab-variant-tag { font-size:11.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.zs26 .ab-variant-price { font-family:var(--font); font-variant-numeric:tabular-nums; font-size:1.9rem; font-weight:700; color:var(--ink); margin:8px 0 16px; letter-spacing:-.02em; }
.zs26 .ab-variant-price small { font-size:.45em; font-weight:500; color:var(--ink-3); }
.zs26 .ab-variant-metrics { display:flex; gap:18px; }
.zs26 .ab-metric-label { font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.zs26 .ab-metric-value { font-family:var(--font); font-size:1.05rem; font-weight:600; color:var(--ink); margin-top:3px; }
.zs26 .ab-metric-up { color:var(--green); }
.zs26 .ab-sig-bar { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:var(--green-tint); border-radius:var(--r-md); font-size:13px; color:var(--green-deep); }
.zs26 .ab-sig-bar strong { font-weight:700; color:var(--green); }
.zs26 .ab-traffic { display:flex; justify-content:space-between; margin-top:14px; font-size:12.5px; color:var(--ink-3); font-family:var(--font); }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.zs26 .cmp-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 auto; max-width:1100px; padding:6px; }
.zs26 .cmp-table { width:100%; border-collapse:separate; border-spacing:0; font-size:14.5px; min-width:760px; }
.zs26 .cmp-table th, .zs26 .cmp-table td { padding:16px 18px; text-align:left; vertical-align:top; }
.zs26 .cmp-group-row th { padding:0 18px 4px; }
.zs26 .cmp-group-zs { text-align:center; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green); }
.zs26 .cmp-table thead th { font-weight:600; color:var(--ink); border-bottom:1px solid var(--hairline-2); font-size:14px; }
.zs26 .cmp-table .col-feature { color:var(--ink-2); font-weight:400; }
.zs26 .cmp-stack { display:block; font-size:11.5px; font-weight:400; color:var(--ink-3); margin-top:3px; line-height:1.4; }
.zs26 .cmp-recommended { display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.05em; color:#fff; background:var(--green); border-radius:var(--r-pill); padding:3px 8px; margin-left:6px; vertical-align:middle; }
.zs26 .cmp-table tbody tr { transition:background .15s; }
.zs26 .cmp-table tbody tr:hover { background:var(--surface-2); }
.zs26 .cmp-table tbody td { border-bottom:1px solid var(--hairline); color:var(--ink-2); }
.zs26 .col-zs-byos, .zs26 .col-zs-managed { background:var(--green-tint); }
.zs26 .cmp-table tbody tr:hover .col-zs-byos, .zs26 .cmp-table tbody tr:hover .col-zs-managed { background:rgba(21,122,82,.14); }
.zs26 thead .col-zs-managed { position:relative; }
.zs26 .cmp-yes { color:var(--green); font-weight:700; }
.zs26 .cmp-no { color:var(--ink-3); }
.zs26 .cmp-partial { color:var(--amber); font-weight:700; }
.zs26 .cmp-note { display:block; font-size:11px; color:var(--ink-3); margin-top:2px; }
.zs26 .cmp-fineprint { text-align:center; font-size:12.5px; color:var(--ink-3); margin-top:24px; }

/* ============================================================
   CALCULATOR (flagship)
   ============================================================ */
.zs26 .calculator-section .section-center { max-width:1080px; }
.zs26 .billing-mode-toggle {
  display:inline-flex; gap:4px; padding:5px; margin:0 auto clamp(36px,5vw,52px);
  background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-pill);
  position:relative; left:50%; transform:translateX(-50%);
}
.zs26 .mode-toggle-btn {
  border:none; background:none; cursor:pointer; font-family:var(--font); font-size:14.5px; font-weight:500;
  color:var(--ink-2); padding:11px 24px; border-radius:var(--r-pill); transition:.18s; white-space:nowrap;
}
.zs26 .mode-toggle-btn.active { background:var(--surface); color:var(--ink); box-shadow:var(--e2); }
.zs26 .calc-layout {
  display:grid; grid-template-columns:1fr 1.08fr; gap:0;
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-xl);
  box-shadow:var(--e4); overflow:hidden;
}
.zs26 .calc-inputs { padding:clamp(28px,4vw,44px); display:flex; flex-direction:column; gap:32px; }
.zs26 .calc-input-label { display:block; font-size:13px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px; }
.zs26 .calc-arr-wrapper { display:flex; align-items:baseline; gap:4px; border-bottom:2px solid var(--hairline-2); padding-bottom:10px; transition:border-color .2s; }
.zs26 .calc-arr-wrapper:focus-within { border-bottom-color:var(--green); }
.zs26 .calc-dollar { font-family:var(--font); font-size:2rem; font-weight:600; color:var(--ink-3); }
.zs26 .calc-arr-input {
  font-family:var(--font); font-variant-numeric:tabular-nums; font-size:clamp(2rem,3.4vw,2.8rem);
  font-weight:700; color:var(--ink); background:none; border:none; outline:none; width:100%; letter-spacing:-.02em; padding:0;
}
.zs26 .calc-presets { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
.zs26 .calc-preset {
  font-family:var(--font); font-size:13px; font-weight:500; color:var(--ink-2);
  background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-pill);
  padding:8px 15px; cursor:pointer; transition:.15s;
}
.zs26 .calc-preset:hover { border-color:var(--ink-3); color:var(--ink); }
.zs26 .calc-preset.active { background:var(--green); color:#fff; border-color:var(--green); }
.zs26 .calc-options { display:flex; flex-direction:column; gap:24px; }
.zs26 .calc-option-label { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; }
.zs26 .calc-option-btns { display:inline-flex; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--hairline); border-radius:var(--r-pill); }
.zs26 .calc-opt-btn { border:none; background:none; cursor:pointer; font-family:var(--font); font-size:13.5px; font-weight:500; color:var(--ink-2); padding:9px 18px; border-radius:var(--r-pill); transition:.15s; }
.zs26 .calc-opt-btn.active { background:var(--surface); color:var(--ink); box-shadow:var(--e1); }
.zs26 .info-tooltip { position:relative; display:inline-flex; }
.zs26 .info-icon-small { width:15px; height:15px; font-size:11px; color:var(--ink-3); cursor:help; display:grid; place-items:center; }
.zs26 .tooltip-text {
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--surface); font-size:12px; font-weight:400; text-transform:none; letter-spacing:0;
  padding:8px 12px; border-radius:10px; width:max-content; max-width:220px; opacity:0; visibility:hidden; transition:.15s; box-shadow:var(--e3); z-index:5; line-height:1.4;
}
.zs26 .info-tooltip:hover .tooltip-text { opacity:1; visibility:visible; }

/* results pane */
.zs26 .calc-visual { background:var(--surface-2); border-left:1px solid var(--hairline); padding:clamp(28px,4vw,44px); display:flex; align-items:center; position:relative; }
.zs26 .calc-visual::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 60% at 70% 25%, rgba(21,122,82,.07) 0%, transparent 70%);
}
[data-theme="dark"] .zs26 .calc-visual::before { background:radial-gradient(60% 60% at 70% 25%, rgba(47,179,124,.12) 0%, transparent 70%); }
.zs26 .calc-results { width:100%; position:relative; }
.zs26 .calc-hero { text-align:center; margin-bottom:28px; }
.zs26 .calc-hero-label { font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.zs26 .calc-hero-value { font-family:var(--font); font-variant-numeric:tabular-nums; font-size:clamp(2.6rem,5vw,3.8rem); font-weight:700; color:var(--green); letter-spacing:-.03em; line-height:1.04; margin:8px 0 4px; }
.zs26 .calc-hero-sub { font-size:14px; color:var(--ink-2); }
.zs26 .calc-margin-increase { display:inline-block; margin-top:12px; font-size:12.5px; font-weight:600; color:var(--green); background:var(--green-tint); border-radius:var(--r-pill); padding:6px 14px; }
.zs26 .pop-in { animation:popIn .4s cubic-bezier(.2,1.4,.4,1); }
@keyframes popIn { from{opacity:0; transform:scale(.85)} to{opacity:1; transform:scale(1)} }
.zs26 .calc-bar { height:12px; background:var(--surface-3); border-radius:var(--r-pill); overflow:hidden; margin-bottom:10px; }
.zs26 .calc-bar-fill { height:100%; background:linear-gradient(90deg,var(--green-deep),var(--green)); border-radius:var(--r-pill); transition:width .6s cubic-bezier(.2,.7,.2,1); }
.zs26 .calc-bar-label { display:flex; justify-content:space-between; font-size:13px; color:var(--ink-2); margin-bottom:28px; }
.zs26 .calc-bar-percent { font-family:var(--font); font-weight:700; color:var(--green); }
.zs26 .calc-compare { display:flex; flex-direction:column; gap:2px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md); padding:8px; }
.zs26 .calc-compare-item { display:flex; justify-content:space-between; align-items:center; padding:13px 14px; border-radius:10px; }
.zs26 .calc-compare-item:not(:last-child) { border-bottom:1px solid var(--hairline); }
.zs26 .calc-compare-label { font-size:13.5px; color:var(--ink-2); display:flex; align-items:center; gap:6px; }
.zs26 .calc-compare-value { font-family:var(--font); font-variant-numeric:tabular-nums; font-size:15px; font-weight:600; }
.zs26 .calc-compare-apple { color:var(--danger); }
.zs26 .calc-compare-neutral { color:var(--ink); }
.zs26 .calc-compare-zs { color:var(--green); }
.zs26 .calc-full-link { display:block; text-align:center; margin-top:30px; font-size:14.5px; font-weight:500; color:var(--green); }

/* ============================================================
   PRICING
   ============================================================ */
.zs26 .price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; max-width:1080px; margin:0 auto; }
.zs26 .price-card {
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  box-shadow:var(--e2); padding:32px 30px; display:flex; flex-direction:column; position:relative;
  transition:transform .2s, box-shadow .2s;
}
.zs26 .price-card:hover { transform:translateY(-3px); box-shadow:var(--e3); }
.zs26 .price-card-featured { border-color:var(--green); box-shadow:var(--e4); }
.zs26 .price-badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:700; letter-spacing:.06em; color:#fff; background:var(--green); border-radius:var(--r-pill); padding:6px 16px; box-shadow:var(--e2); }
.zs26 .price-baseline { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.zs26 .price-tier-name { font-size:1.4rem; font-weight:600; letter-spacing:-.015em; color:var(--ink); margin:8px 0 10px; }
.zs26 .price-tagline { font-size:14px; line-height:1.5; color:var(--ink-2); margin:0 0 22px; min-height:42px; }
.zs26 .price-amount { font-family:var(--font); font-variant-numeric:tabular-nums; font-size:2.6rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; line-height:1; }
.zs26 .price-amount small { font-size:.32em; font-weight:500; color:var(--ink-3); letter-spacing:0; }
.zs26 .price-sub { font-size:13px; color:var(--ink-3); margin:10px 0 24px; }
.zs26 .price-features { list-style:none; padding:0; margin:0 0 28px; display:flex; flex-direction:column; gap:13px; }
.zs26 .price-features li { display:flex; align-items:flex-start; gap:11px; font-size:14.5px; line-height:1.45; color:var(--ink-2); }
.zs26 .price-features svg { flex:none; margin-top:3px; color:var(--green); }
.zs26 .price-feature-dim { opacity:.55; }
.zs26 .price-feature-dim svg { color:var(--ink-3); }
.zs26 .price-cta { margin-top:auto; width:100%; }

/* ============================================================
   HOW IT WORKS (stepper)
   ============================================================ */
.zs26 .hiw-stepper { max-width:1000px; margin:0 auto; }
.zs26 .hiw-timeline { position:relative; display:flex; justify-content:space-between; max-width:560px; margin:0 auto 14px; }
.zs26 .hiw-progress { position:absolute; top:50%; left:18px; right:18px; height:2px; background:var(--hairline-2); transform:translateY(-50%); }
.zs26 .hiw-progress-fill { height:100%; background:var(--green); width:0; }
.zs26 .hiw-step-dot { position:relative; z-index:1; width:38px; height:38px; border-radius:50%; border:1px solid var(--hairline-2); background:var(--surface); color:var(--ink-3); font-family:var(--mono); font-weight:600; font-size:14px; cursor:pointer; transition:.2s; box-shadow:var(--e1); }
.zs26 .hiw-step-dot-completed { background:var(--green); border-color:var(--green); color:#fff; }
.zs26 .hiw-step-dot-active { border-color:var(--green); color:var(--green); box-shadow:0 0 0 4px var(--green-tint); }
.zs26 .hiw-labels { display:flex; justify-content:space-between; max-width:600px; margin:0 auto 44px; }
.zs26 .hiw-label { font-size:13px; font-weight:500; color:var(--ink-3); flex:1; text-align:center; transition:color .2s; }
.zs26 .hiw-label-active { color:var(--ink); font-weight:600; }
.zs26 .hiw-panels { position:relative; }
.zs26 .hiw-panel { display:none; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; }
.zs26 .hiw-panel-active { display:grid; animation:fadeIn .4s ease; }
.zs26 .hiw-panel-visual { display:flex; justify-content:center; }
.zs26 .step-mockup { width:100%; max-width:380px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--e4); padding:24px; }
.zs26 .code-mockup { background:#0B0B0E; font-family:var(--mono); font-size:13px; line-height:1.8; color:#D6D6DC; }
.zs26 .code-mockup .code-line { white-space:pre-wrap; }
.zs26 .dashboard-mockup .mock-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--hairline); font-weight:600; color:var(--ink); }
.zs26 .mock-sync-badge { font-size:11px; font-weight:600; color:var(--green); background:var(--green-tint); border-radius:var(--r-pill); padding:4px 11px; }
.zs26 .mock-row { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--hairline); font-size:14px; }
.zs26 .mock-label { color:var(--ink-2); }
.zs26 .mock-value { font-family:var(--font); color:var(--ink); }
.zs26 .mock-value-discount s { color:var(--ink-3); }
.zs26 .mock-value-discount { color:var(--green); }
.zs26 .mock-note { font-size:12px; color:var(--ink-3); margin-top:14px; text-align:right; }
.zs26 .checkout-card { text-align:center; }
.zs26 .checkout-title { font-size:1.1rem; font-weight:600; color:var(--ink); }
.zs26 .checkout-price { font-family:var(--font); font-size:2.4rem; font-weight:700; color:var(--ink); margin:14px 0; letter-spacing:-.02em; }
.zs26 .checkout-price span { font-size:.4em; color:var(--ink-3); }
.zs26 .checkout-btn { background:var(--green); color:#fff; border-radius:var(--r-pill); padding:14px; font-weight:600; }
.zs26 .payout-card { text-align:center; }
.zs26 .payout-header { display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--green); }
.zs26 .payout-icon { width:22px; height:22px; border-radius:50%; background:var(--green); color:#fff; display:grid; place-items:center; font-size:12px; }
.zs26 .payout-amount { font-family:var(--font); font-size:2.4rem; font-weight:700; color:var(--ink); margin:14px 0 6px; letter-spacing:-.02em; }
.zs26 .payout-date { font-size:13px; color:var(--ink-3); }

/* ============================================================
   FAQ
   ============================================================ */
.zs26 .faq-list { max-width:760px; margin:0 auto; border-top:1px solid var(--hairline); }
.zs26 .faq-item { border-bottom:1px solid var(--hairline); }
.zs26 .faq-question {
  display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; list-style:none;
  padding:26px 4px; font-size:1.12rem; font-weight:500; color:var(--ink); transition:color .15s;
}
.zs26 .faq-question::-webkit-details-marker { display:none; }
.zs26 .faq-question:hover { color:var(--green); }
.zs26 .faq-chevron { flex:none; color:var(--ink-3); transition:transform .3s ease; }
.zs26 .faq-item[open] .faq-chevron { transform:rotate(180deg); }
.zs26 .faq-answer { overflow:hidden; max-height:0; opacity:0; transition:max-height .35s ease, opacity .35s ease; }
.zs26 .faq-answer p { padding:0 4px 8px; margin:0 0 14px; font-size:1rem; line-height:1.65; color:var(--ink-2); }
.zs26 .faq-answer p:first-child { padding-top:0; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.zs26 .cta-section { padding-block:clamp(60px,8vw,108px); }
.zs26 .cta-card {
  position:relative; overflow:hidden; max-width:1080px; margin:0 auto; text-align:center;
  padding:clamp(56px,8vw,96px) clamp(28px,5vw,64px);
  background:var(--ink); color:#fff; border-radius:var(--r-xl); box-shadow:var(--e4);
}
.zs26 .cta-card::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(50% 60% at 80% 10%, rgba(47,179,124,.30) 0%, transparent 65%),
    radial-gradient(50% 60% at 12% 100%, rgba(47,179,124,.18) 0%, transparent 60%);
}
.zs26 .cta-card > * { position:relative; z-index:1; }
.zs26 .cta-title { font-size:clamp(1.9rem,3.6vw,2.9rem); font-weight:500; letter-spacing:-.026em; line-height:1.06; margin:0; color:#fff; }
.zs26 .cta-desc { margin:22px auto 0; max-width:54ch; font-size:1.1rem; line-height:1.6; color:rgba(255,255,255,.7); }
.zs26 .cta-buttons { display:flex; gap:12px; justify-content:center; margin-top:36px; flex-wrap:wrap; }
.zs26 .cta-buttons .btn-primary { background:#fff; color:var(--ink); }
.zs26 .cta-buttons .btn-primary:hover { background:var(--green-lume); color:#06140D; }
.zs26 .cta-buttons .btn-secondary { background:transparent; color:#fff; border-color:rgba(255,255,255,.25); }
.zs26 .cta-buttons .btn-secondary:hover { border-color:#fff; background:rgba(255,255,255,.06); }
.zs26 .cta-meta { margin-top:28px; font-size:13px; color:rgba(255,255,255,.55); display:flex; gap:10px; justify-content:center; align-items:center; }
.zs26 .cta-meta-dot { color:rgba(255,255,255,.3); }

/* ============================================================
   FOOTER
   ============================================================ */
.zs26 .footer { padding:clamp(56px,7vw,88px) 0 40px; border-top:1px solid var(--hairline); }
.zs26 .footer-grid { display:grid; grid-template-columns:1.4fr 3fr; gap:48px; }
.zs26 .footer-logo { font-size:1.3rem; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.zs26 .footer-tagline { font-size:14px; color:var(--ink-3); margin-top:10px; max-width:24ch; }
.zs26 .footer-columns { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.zs26 .footer-column h4 { font-size:12px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); margin:0 0 16px; }
.zs26 .footer-column a { display:block; font-size:14.5px; color:var(--ink-2); padding:6px 0; transition:color .15s; }
.zs26 .footer-column a:hover { color:var(--green); }
.zs26 .footer-bottom { margin-top:56px; padding-top:24px; border-top:1px solid var(--hairline); font-size:13px; color:var(--ink-3); }

/* ============================================================
   MODAL + COOKIE
   ============================================================ */
.zs26 .modal-overlay { position:fixed; inset:0; z-index:2000; background:rgba(11,11,12,.5); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center; padding:20px; }
.zs26 .modal-overlay.active { display:flex; }
.zs26 .modal { position:relative; width:100%; max-width:440px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); box-shadow:var(--e4); padding:36px; }
.zs26 .modal-close { position:absolute; top:18px; right:18px; width:34px; height:34px; border-radius:50%; border:1px solid var(--hairline); background:var(--surface-2); color:var(--ink-2); font-size:20px; cursor:pointer; line-height:1; }
.zs26 .modal-title { font-size:1.5rem; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.zs26 .modal-title span { color:var(--green); }
.zs26 .modal-desc { font-size:14.5px; color:var(--ink-2); margin:10px 0 24px; }
.zs26 .modal-form { display:flex; flex-direction:column; gap:12px; }
.zs26 .modal-form input, .zs26 .modal-form textarea { font-family:var(--font); font-size:15px; padding:13px 16px; border:1px solid var(--hairline-2); border-radius:var(--r-md); background:var(--surface-2); color:var(--ink); outline:none; transition:border-color .15s; }
.zs26 .modal-form input:focus, .zs26 .modal-form textarea:focus { border-color:var(--green); }
.zs26 .form-success { text-align:center; color:var(--green); font-weight:500; padding:20px 0; }
.zs26 .cookie-banner { position:fixed; bottom:20px; left:20px; right:20px; max-width:520px; margin:0 auto; z-index:1500; display:flex; align-items:center; gap:16px; padding:16px 20px; background:var(--glass-bg); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--glass-bd); border-radius:var(--r-lg); box-shadow:var(--e4); transform:translateY(140%); transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.zs26 .cookie-banner.visible { transform:translateY(0); }
.zs26 .cookie-banner-text { font-size:13px; color:var(--ink-2); margin:0; }
.zs26 .cookie-banner-text a { color:var(--green); text-decoration:underline; }
.zs26 .cookie-banner-actions { display:flex; gap:8px; flex:none; }
.zs26 .cookie-btn { font-family:var(--font); font-size:13px; font-weight:500; padding:9px 16px; border-radius:var(--r-pill); cursor:pointer; border:1px solid var(--hairline-2); background:var(--surface); color:var(--ink-2); }
.zs26 .cookie-btn-accept { background:var(--green); color:#fff; border-color:var(--green); }

/* ============================================================
   SCROLL SPY — "you are here" rail (desktop)
   ============================================================ */
.zs26 .scroll-spy {
  position:fixed; right:24px; top:50%; transform:translateY(-50%); z-index:900;
  display:flex; flex-direction:column; gap:2px; align-items:flex-end;
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease;
}
.zs26 .scroll-spy.visible { opacity:1; visibility:visible; }
.zs26 .spy-item {
  display:flex; flex-direction:row-reverse; align-items:center; gap:11px;
  padding:6px 2px; text-decoration:none;
}
.zs26 .spy-tick {
  width:20px; height:3px; border-radius:2px; background:var(--hairline-2); flex:none;
  transition:width .28s cubic-bezier(.2,.7,.2,1), background .28s ease;
}
.zs26 .spy-item-active .spy-tick { width:32px; background:var(--green); }
.zs26 .spy-item:hover .spy-tick { background:var(--ink-3); }
.zs26 .spy-item-active:hover .spy-tick { background:var(--green); }
.zs26 .spy-label {
  font-size:12.5px; font-weight:500; color:var(--ink); white-space:nowrap;
  background:var(--glass-bg); -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
  border:1px solid var(--glass-bd); box-shadow:var(--e1);
  padding:5px 12px; border-radius:var(--r-pill);
  opacity:0; transform:translateX(8px); pointer-events:none;
  transition:opacity .26s ease, transform .26s ease;
}
/* Label pops out when the section becomes active (briefly) or on rail hover */
.zs26 .spy-item-revealed .spy-label,
.zs26 .scroll-spy:hover .spy-label { opacity:1; transform:translateX(0); }
@media (max-width:1200px){ .zs26 .scroll-spy { display:none; } }
@media (prefers-reduced-motion:reduce){ .zs26 .spy-label, .zs26 .spy-tick { transition:none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .zs26 .pillars-grid { grid-template-columns:repeat(2,1fr); }
  .zs26 .footer-columns { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:960px){
  .zs26 .nav-links { display:none; }
  .zs26 .nav-mobile-toggle { display:inline-flex; }
  .zs26 .nav-actions .btn-primary { display:none; }
  .zs26 .nav-actions .nav-login-link { display:none; }
  .zs26 .hero { padding-top:120px; }
  .zs26 .hero-grid { grid-template-columns:1fr; gap:48px; }
  .zs26 .hero-content { max-width:none; }
  .zs26 .hero-stage { max-width:520px; margin:0 auto; }
  .zs26 .ab-grid { grid-template-columns:1fr; }
  .zs26 .hiw-panel-active { grid-template-columns:1fr; }
  .zs26 .uc-slide-active { grid-template-columns:1fr; }
  .zs26 .uc-slide-visual { order:-1; }
  .zs26 .calc-layout { grid-template-columns:1fr; }
  .zs26 .calc-visual { border-left:none; border-top:1px solid var(--hairline); }
  .zs26 .ae-tile-mrr, .zs26 .ae-tile-entitle { grid-column:span 2; grid-row:span 1; }
}
@media (max-width:720px){
  .zs26 .section { padding-block:56px; }
  .zs26 .price-grid { grid-template-columns:1fr; max-width:420px; }
  .zs26 .ae-bento { grid-template-columns:1fr; }
  .zs26 .ae-tile-mrr, .zs26 .ae-tile-trials, .zs26 .ae-tile-entitle, .zs26 .ae-tile-churn, .zs26 .ae-tile-retention { grid-column:span 1; }
  /* Phones: 2-up COMPACT cards instead of tall single-column stacks (keeps pages short). */
  .zs26 .feature-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .zs26 .step-bento { gap:10px; }
  .zs26 .feature-card { padding:15px 13px; }
  .zs26 .feature-card .pillar-icon { width:32px; height:32px; border-radius:9px; margin-bottom:11px; }
  .zs26 .pillars-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .zs26 .pillar-card { min-height:0; padding:16px 14px; }
  .zs26 .pillar-card .pillar-thumb { display:none; }      /* decorative — drop on phones to compact */
  .zs26 .pillar-card .pillar-link { display:none; }
  .zs26 .pillar-icon { width:32px; height:32px; border-radius:9px; margin-bottom:11px; }
  .zs26 .pillar-name { font-size:1rem; margin-bottom:5px; }
  .zs26 .pillar-desc { font-size:12.5px; line-height:1.45; }
  .zs26 .footer-grid { grid-template-columns:1fr; gap:32px; }
  .zs26 .hero-equation { padding:16px 18px; }
  .zs26 .billing-mode-toggle { width:100%; }
  .zs26 .mode-toggle-btn { flex:1; padding:11px 12px; }
  .zs26 .cookie-banner { flex-direction:column; align-items:stretch; }
}
/* Very narrow phones: a single dense column reads better than cramped 2-up. */
@media (max-width:380px){
  .zs26 .feature-grid, .zs26 .pillars-grid, .zs26 .step-bento { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  .zs26 *, .zs26 *::before, .zs26 *::after { animation:none !important; transition:none !important; }
}