/**
 * OneClickUpsell product page — `/oneclickupsell/`.
 *
 * Ported from the Claude Design artboard `OCU v2.dc.html`, which loads three
 * stylesheets: the design system's `colors_and_type.css` and `components.css`,
 * then its own `page.css`. Only the third has any page-specific content; the
 * first two are the shared kit, and the theme's `assets/css/tokens.css` is
 * already a verbatim copy of every token in `colors_and_type.css` — the two
 * files were checked variable by variable and the only names `page.css` uses
 * that `tokens.css` lacks are `--font-caption` and `--font-mono`, both added
 * below.
 *
 * WHY THIS PAGE USES `.t-*`/`.btn`/`.section` AND NOT HOME'S `.zp-*`.
 * `home.css` defines the `.zp-section`/`.zp-wrap`/`.zp-h2`/`.zp-cta` vocabulary
 * the Home and Pages ports share, and `pages.css` depends on `zp-home` to reuse
 * it. This page does not, because the artboard is not written in that
 * vocabulary: it is written in the design system's own semantic classes, and
 * roughly nine hundred lines of `page.css` are keyed to them. Translating every
 * selector into `.zp-*` would be a rewrite of the artboard rather than a port
 * of it, and would put this page's layout at the mercy of edits to Home's. So
 * `zp-ocu` depends on `zipify2026-theme` directly, exactly as `zp-home` does,
 * and carries the slice of the design system it needs in the first section
 * below. Nothing here is scoped to a wrapper because the handle is registered
 * unenqueued and only `page-oneclickupsell.php` enqueues it — no other page
 * ever loads these rules.
 *
 * The two deliberate omissions from `page.css`:
 *
 * - Its global reset (`*{box-sizing}`, `html`, `body`, `img`, `a`). The theme
 *   ships `assets/css/reset.css` sitewide and a second, differently-opinionated
 *   copy on one page is how grounds and margins drift apart between templates.
 * - Its `.nav__*` block. The artboard drew its own fixed masthead because it
 *   had no site chrome around it; here `header.php` renders `.zp-header`, which
 *   is already sticky and already overlays the hero by `-72px`. The hero's
 *   `padding-top:calc(var(--nav-h) + 72px)` clears it, and `--nav-h` is kept
 *   below at the artboard's 72px precisely because `--zp-header-h` is also 72px
 *   — the two agree, so the hero's top edge lands where the artboard put it.
 *
 * The classic calculator's rules are kept even though only the hero variant is
 * rendered: `.calc-variant{display:none}` already gates the markup, several
 * selectors (`.calc-flag`, `.pp-switch`) are shared with the hero variant, and
 * pruning them by hand would risk the live variant for no user-visible gain.
 */

/* ==========================================================================
   DESIGN-SYSTEM SLICE
   The parts of colors_and_type.css / components.css this page's markup uses.
   Tokens are not repeated — tokens.css already carries all of them.
   ========================================================================== */

:root {
  --font-caption:"Open Sans",Georgia,serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --nav-h:72px;
  --container:1180px;
}

/* --- semantic type (colors_and_type.css) --- */
.t-hero { font-family:var(--font-display); font-size:var(--fs-hero); font-weight:900; letter-spacing:var(--ls-tight); line-height:1.02; color:var(--fg); }
.t-h1   { font-family:var(--font-display); font-size:var(--fs-h1);   font-weight:800; letter-spacing:var(--ls-tight); line-height:1.02; color:var(--fg); }
.t-h2   { font-family:var(--font-display); font-size:var(--fs-h2);   font-weight:800; letter-spacing:var(--ls-tight); line-height:1.1;  color:var(--fg); }
.t-h3   { font-family:var(--font-display); font-size:var(--fs-h3);   font-weight:700; letter-spacing:var(--ls-display); line-height:1.2; color:var(--fg); }
.t-h4   { font-family:var(--font-display); font-size:var(--fs-h4);   font-weight:700; letter-spacing:var(--ls-display); color:var(--fg); }
.t-body-1 { font-family:var(--font-body); font-size:var(--fs-body-1); font-weight:400; color:var(--fg-2); line-height:1.65; }
.t-body-2 { font-family:var(--font-body); font-size:var(--fs-body-2); font-weight:400; color:var(--fg-2); line-height:1.6; }
.t-eyebrow { font-family:var(--font-display); font-size:var(--fs-eyebrow); font-weight:700; text-transform:uppercase; letter-spacing:var(--ls-eyebrow); color:var(--accent); }
.t-caption { font-family:var(--font-caption); font-weight:700; font-size:var(--fs-caption); color:var(--fg-3); }

.on-dark .t-hero, .on-dark .t-h1, .on-dark .t-h2, .on-dark .t-h3, .on-dark .t-h4 { color:var(--fg-on-dark); }
.on-dark .t-body-1, .on-dark .t-body-2 { color:var(--fg-on-dark-2); }
.on-dark .t-eyebrow { color:var(--accent-dark); }

/* --- buttons (components.css) --- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 28px; border:none; border-radius:10px;
  font-family:var(--font-display); font-weight:800; font-size:15px;
  letter-spacing:var(--ls-button); text-transform:uppercase;
  cursor:pointer; text-decoration:none; white-space:nowrap; position:relative;
  transition:transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out), opacity var(--dur-fast);
}
.btn:hover  { filter:brightness(1.08); transform:translateY(-1px); }
.btn:active { transform:translateY(0) scale(.98); filter:brightness(.93); }
.btn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.btn--sm { padding:10px 18px; font-size:13px; }
.btn--lg { padding:18px 36px; font-size:16px; }
.btn--xl { padding:22px 42px; font-size:17px; }
.btn--primary { background:var(--grad-ocu); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.08); }
.btn--primary:hover { filter:brightness(1.07); color:#fff; }
.btn--secondary { background:rgba(255,255,255,.04); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22); }
.btn--secondary:hover { background:rgba(255,255,255,.09); filter:none; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42); color:#fff; }
.btn--secondary-light { background:transparent; color:var(--ink-900); box-shadow:inset 0 0 0 1.5px var(--ink-300); }
.btn--secondary-light:hover { box-shadow:inset 0 0 0 1.5px var(--ink-700); filter:none; color:var(--ink-900); }

/* --- dark surface (components.css) --- */
.surface-dark { background:var(--grad-zipify); border-radius:var(--r-xl); position:relative; overflow:hidden; color:#fff; }
.surface-dark::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(800px 400px at 90% -10%, rgba(45,107,228,.2), transparent 70%),
             repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 2px, transparent 2px 80px); }
.surface-dark > * { position:relative; z-index:1; }

/* --- trust marquee ---------------------------------------------------------
   The artboard's `.trust` band carries inline styles that override almost
   every `.trust__*` rule further down in page.css — that older treatment was
   the JS-built one (160px squares on a `marquee` keyframe) and the artboard
   replaced it in place with 220x180 cards on `zipRail` without deleting the
   rules it superseded. The rendered artboard is the authority, so its values
   are the ones reproduced here; they are named rather than left inline
   because 02-trust.php emits the card twenty times and inline styles would
   put twenty copies of the same declaration block in the document. The
   superseded `.trust__*` rules are left in page.css untouched, as dead as
   they were in the artboard. */
@keyframes zipRail { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }

.ocu-rail { overflow:hidden; width:100%; }
.ocu-rail__track { display:flex; align-items:stretch; gap:16px; width:max-content; padding-bottom:32px; animation:zipRail 34s linear infinite; }
.ocu-rail:hover .ocu-rail__track { animation-play-state:paused; }
.ocu-rail__card { flex-shrink:0; width:220px; background:#fff; border:1px solid #e3e5ea; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 8px 24px rgba(13,31,78,.1); }
.ocu-rail__card img { width:100%; height:180px; object-fit:cover; display:block; }
.ocu-rail__name { padding:12px 16px; font-size:16px; font-weight:700; color:#202122; letter-spacing:.03em; text-align:center; background:#fff; }
.ocu-rail__lede { text-align:center; font-weight:700; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--zip-yellow); margin:0 0 24px; opacity:.9; }

/* ==========================================================================
   PAGE  (artboard page.css, verbatim but for the two omissions noted above)
   ========================================================================== */

/* ============================================================================
   OCU SALES PAGE — page.css
   Built on the Zipify design system (colors_and_type.css + components.css).
   Only page-specific layout/component styles live here.
   ============================================================================ */


.container{max-width:var(--container);margin:0 auto;padding:0 32px}
.section{padding:96px 0}
.section--tight{padding:72px 0}
/* The band's own rhythm: tighter at the top than a plain `.section`, roomier
   under the stat grid before the pinned wheel takes over the viewport. It was
   an inline style, which the mobile `.section` rule could not reach, so a phone
   got the desktop figures and a strip of dead white under the ruled list. */
.section--whatis{padding:64px 0 88px}
.section--alt{background:var(--ink-100)}
.section__head{max-width:720px;margin:0 auto 56px;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.section__head .t-body-1{margin:0}
.eyebrow-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;
  font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--blue-700)}
.eyebrow-pill .dot{width:6px;height:6px;border-radius:999px;background:currentColor;flex-shrink:0}
.eyebrow-pill--yellow{color:#856013}
.eyebrow-pill--muted{color:var(--ink-500)}
.on-dark .eyebrow-pill{color:var(--zip-yellow)}
.hero__eyebrow.eyebrow-pill{color:#ffb38a}
.num-accent{background:var(--grad-blue-text-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.num-accent-y{color:var(--zip-yellow)}
.btn--plus{background:var(--zip-yellow);color:var(--ink-900);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.btn--plus:hover{filter:brightness(1.04)}
.btn--ghost-light{background:transparent;color:var(--ink-900);box-shadow:inset 0 0 0 1.5px var(--ink-300)}
.btn--ghost-light:hover{box-shadow:inset 0 0 0 1.5px var(--ink-700);filter:none}
.btn--block{width:100%}
.btn--white{background:#fff;color:var(--pink-500);box-shadow:var(--sh-2)}

/* ---------- SR-only ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ======================================================================
   WHAT IS OCU (2c)
   ====================================================================== */
.whatocu{display:grid;grid-template-columns:1fr 1.02fr;gap:64px;align-items:center}
.whatocu__media{position:relative}
.whatocu__slot{display:block;width:100%;height:auto;aspect-ratio:4/3;border:1px solid var(--ink-200);box-shadow:var(--sh-3)}
/* The journey illustration bleeds 15% past its column on the left, as the
   artboard sizes it; in the single column it would run off the page. */
.whatocu__journey{display:block;width:115%;max-width:none;margin-left:-15%;height:auto}
.whatocu__badge{position:absolute;left:-14px;bottom:-14px;display:flex;align-items:center;gap:7px;
  background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-pill);box-shadow:var(--sh-2);
  padding:9px 16px;font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--ink-900)}
.whatocu__badge svg{width:17px;height:17px;color:var(--yellow-500);fill:var(--yellow-500)}
.whatocu__body{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.whatocu__body .t-h2{margin:0}
.whatocu__lead{margin:0;color:var(--ink-600)}
.whatocu__points{list-style:none;margin:4px 0 6px;padding:0;display:flex;flex-direction:column;gap:18px;width:100%}
.whatocu__points li{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--ink-700)}
.whatocu__points li b{color:var(--ink-900);font-weight:700}
.whatocu__ic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:var(--yellow-400);color:var(--ink-900)}
.whatocu__ic svg{width:21px;height:21px}
@media(max-width:860px){
  .whatocu{grid-template-columns:1fr;gap:40px}
  .whatocu__badge{left:auto;right:14px}
  .whatocu__journey{width:100%;margin-left:0}
}
.whatocu__stats{margin-top:48px;padding-top:48px;border-top:1px solid var(--ink-200)}


/* ======================================================================
   HERO  (dark masthead)
   ====================================================================== */
.hero{position:relative;padding:calc(var(--nav-h) + 72px) 0 96px;color:var(--fg-on-dark);overflow:hidden;border-radius:0}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.hero__eyebrow{margin-bottom:22px}
.pill-dark.pill-dark--ocu{border:1px solid rgba(240,112,48,.4);color:#ffb38a}
.pill-dark.pill-dark--ocu .dot{background:var(--orange-500)}
.hero__title{font-family:var(--font-display);font-weight:900;font-size:clamp(40px,5.2vw,68px);
  letter-spacing:var(--ls-tight);line-height:1.02;margin:0;color:#fff}
.hero__cycle-line{display:flex;align-items:baseline;min-height:1.05em}
.cycle-slot{position:relative;display:inline-block;min-width:clamp(220px,30vw,360px);height:1.05em;vertical-align:bottom}
.cycle-word{position:absolute;left:0;top:0;white-space:nowrap;
  background:var(--grad-ocu);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:0;transform:translateY(14px);transition:opacity .28s var(--ease-out),transform .28s var(--ease-out)}
.cycle-word.is-active{opacity:1;transform:translateY(0)}
.cycle-word.is-active::after{content:"";display:inline-block;width:3px;height:.74em;margin-left:8px;
  background:var(--orange-500);border-radius:2px;vertical-align:baseline;
  animation:caret-blink 1s steps(1) infinite;opacity:.6}
.cycle-caret{display:none}
@keyframes caret-blink{50%{opacity:0}}
.hero__sub{font-size:19px;line-height:1.6;color:rgba(255,255,255,.72);max-width:520px;margin:26px 0 0}
.hero__sub strong{color:#fff;font-weight:600}
.hero__cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap;align-items:center}
.hero__trust{margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.5);font-weight:500;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* hero storefront mockup */
.shopmock{position:relative;background:#fff;border-radius:var(--r-xl);box-shadow:0 40px 90px rgba(0,0,0,.5);
  padding:0;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.shopmock__bar{height:38px;background:var(--ink-100);display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--ink-200)}
.shopmock__dot{width:10px;height:10px;border-radius:50%;background:var(--ink-300)}
.shopmock__url{margin-left:12px;font-family:var(--font-mono);font-size:11px;color:var(--ink-400);background:#fff;
  border:1px solid var(--ink-200);border-radius:var(--r-pill);padding:3px 12px;flex:1;max-width:230px}
.shopmock__stage{position:relative;height:380px;background:var(--ink-050);overflow:hidden}
.shopmock__store{position:absolute;inset:0;padding:24px;display:flex;flex-direction:column;gap:14px}
.shopmock__hero-img{height:150px;border-radius:var(--r-md);background:
  linear-gradient(135deg,#e9edf6,#dde3f1);border:1px solid var(--ink-200);position:relative;overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center}
.shopmock__hero-img svg{width:54px;height:54px;color:var(--ink-300)}
.shopmock__line{height:11px;border-radius:4px;background:var(--ink-200)}
.shopmock__line.w-70{width:70%}.shopmock__line.w-90{width:90%}.shopmock__line.w-45{width:45%}
.shopmock__price{height:18px;width:90px;border-radius:5px;background:var(--ink-300);margin-top:2px}
/* the live overlay that swaps with the cycling word */
.shopmock__stage--shots{height:440px;background:#fff}
.shopmock__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;padding:16px}
.shopmock__overlay{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .28s var(--ease-out)}
.shopmock__overlay.is-active{opacity:1}
.ov-card{position:absolute;background:#fff;border-radius:var(--r-lg);box-shadow:0 20px 50px rgba(13,31,78,.28);
  border:1px solid var(--ink-200);padding:14px;width:230px}
.ov-card--br{right:18px;bottom:18px}
.ov-card--center{left:50%;top:50%;transform:translate(-50%,-50%);width:250px}
.ov-tag{display:inline-block;background:#fff0e8;color:var(--orange-500);font-family:var(--font-display);font-weight:800;
  font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);margin-bottom:9px}
.ov-title{font-family:var(--font-display);font-weight:800;font-size:14px;letter-spacing:var(--ls-tight);color:var(--ink-900);line-height:1.25;margin-bottom:11px}
.ov-row{display:flex;align-items:center;gap:10px;background:var(--ink-050);border-radius:var(--r-sm);padding:9px;margin-bottom:11px}
.ov-thumb{width:40px;height:40px;border-radius:var(--r-xs);background:#fff;border:1px solid var(--ink-200);display:flex;align-items:center;justify-content:center;color:var(--ink-300);flex-shrink:0}
.ov-thumb svg{width:20px;height:20px}
.ov-name{font-family:var(--font-display);font-weight:700;font-size:11.5px;color:var(--ink-900);line-height:1.2}
.ov-price{font-size:12px;margin-top:3px;color:var(--ink-500)}
.ov-price b{font-family:var(--font-display);font-weight:900;color:var(--ink-900)}
.ov-price s{margin-left:5px;color:var(--ink-400)}
.ov-cta{background:var(--grad-ocu);color:#fff;font-family:var(--font-display);font-weight:800;font-size:12px;
  letter-spacing:var(--ls-button);text-transform:uppercase;padding:11px;border-radius:8px;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.ov-pill{display:inline-flex;align-items:center;gap:7px;background:var(--ink-900);color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:11px;letter-spacing:.04em;padding:8px 13px;border-radius:var(--r-pill)}
.ov-pill .dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.2)}
/* The hero's order-confirmed pill carries this class but nothing sized it,
   so its check rendered at the SVG default of 300x150. */
.ov-pill__ic{width:13px;height:13px;flex:0 0 auto}
/* funnel mini viz (for "funnel" word) */
.ov-funnel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px}
.ov-funnel__node{width:64px;height:78px;background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-md);
  box-shadow:0 12px 30px rgba(13,31,78,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px}
.ov-funnel__node .chip{width:30px;height:30px;border-radius:8px;background:var(--blue-050);display:flex;align-items:center;justify-content:center;color:var(--blue-500)}
.ov-funnel__node .chip svg{width:16px;height:16px}
.ov-funnel__node b{font-family:var(--font-display);font-size:10px;font-weight:800;color:var(--ink-700)}
.ov-funnel__arrow{color:var(--pink-500);font-weight:900}

/* ======================================================================
   TRUST STRIP
   ====================================================================== */
.trust{background:#0E0F1C;padding:30px 0;overflow:hidden;position:relative}
.trust__inner{display:flex;align-items:center;gap:32px;max-width:var(--container);margin:0 auto;padding:0 32px}
.trust__label{flex-shrink:0;font-family:var(--font-display);font-size:13px;font-weight:600;color:rgba(255,255,255,.5);max-width:180px;line-height:1.4}
.trust__label b{color:rgba(255,255,255,.85);font-weight:800}
.trust__marquee{flex:1;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.trust__track{display:flex;align-items:flex-start;gap:30px;width:max-content;animation:marquee 52s linear infinite}
.trust__marquee:hover .trust__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.trust__brand{font-family:var(--font-display);font-weight:800;font-size:19px;letter-spacing:-.01em;
  color:rgba(255,255,255,.42);white-space:nowrap;transition:color var(--dur-base)}
.trust__marquee:hover .trust__brand:hover{color:rgba(255,255,255,.9)}
.trust__brandcard{flex:0 0 auto;width:160px;height:160px;margin:0;position:relative;border-radius:18px;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.34);transition:transform var(--dur-base) var(--ease-out)}
.trust__brandcard:hover{transform:translateY(-3px)}
.trust__brandcard img{width:100%;height:100%;object-fit:cover;display:block;background:#fff}
.trust__brandcard figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 12px 12px;
  font-family:var(--font-display);font-weight:800;font-size:13.5px;line-height:1.2;letter-spacing:-.01em;
  color:#fff;text-align:center;text-wrap:balance;text-shadow:0 1px 6px rgba(0,0,0,.6);
  background:linear-gradient(to top,rgba(0,0,0,.82) 0%,rgba(0,0,0,.45) 55%,transparent 100%)}

/* ======================================================================
   STATS CARD (AEO density block)
   ====================================================================== */
.statsgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.statblock{position:relative;background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);
  padding:22px 22px;min-height:120px;display:flex;flex-direction:column;justify-content:center;gap:6px;
  box-shadow:var(--sh-1);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.statblock:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.statblock--feature{background:linear-gradient(135deg,rgba(240,112,48,.035),rgba(240,48,90,.035));border-color:rgba(240,48,90,.18)}
.statblock__icon{position:absolute;top:16px;right:16px;width:20px;height:20px;color:var(--ink-300)}
.statblock--feature .statblock__icon{color:var(--pink-500)}
.statblock__num{font-family:var(--font-display);font-weight:900;font-size:26px;letter-spacing:var(--ls-tight);line-height:1.05;color:var(--ink-900)}
.statblock__num.stars{color:var(--yellow-500);font-size:19px;letter-spacing:.08em}
.statblock__label{font-size:13px;color:var(--ink-600);line-height:1.4;font-weight:500;max-width:90%}
.statblock--feature .statblock__num{color:var(--ink-900)}

/* ======================================================================
   GAUGE
   ====================================================================== */
.gauge-wrap{max-width:520px;margin:0 auto;position:relative}
.gauge-wrap svg{width:100%;height:auto;display:block;overflow:visible}
.gauge-readout{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);text-align:center;width:100%}
.gauge-score{font-family:var(--font-display);font-weight:900;font-size:64px;letter-spacing:var(--ls-tight);line-height:1;color:var(--ink-900);font-variant-numeric:tabular-nums}
.gauge-label{font-family:var(--font-display);font-weight:800;font-size:15px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);margin-top:8px;transition:color var(--dur-base)}
.gauge-toggles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:880px;margin:26px auto 0}
.gtoggle{position:relative;background:#fff;border:1.5px solid var(--ink-200);border-radius:var(--r-md);
  padding:16px 14px 14px;text-align:left;cursor:pointer;font-family:var(--font-display);transition:all var(--dur-fast) var(--ease-out);
  display:flex;flex-direction:column;gap:8px;min-height:84px}
.gtoggle:hover{border-color:var(--ink-400);transform:translateY(-1px)}
.gtoggle__name{font-weight:700;font-size:14px;color:var(--ink-900);line-height:1.2;letter-spacing:-.01em}
.gtoggle__state{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-400);display:flex;align-items:center;gap:6px}
.gtoggle__sw{width:30px;height:18px;border-radius:var(--r-pill);background:var(--ink-200);position:relative;transition:background var(--dur-fast);flex-shrink:0}
.gtoggle__sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:transform var(--dur-fast) var(--ease-out)}
.gtoggle__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.gtoggle.is-on{background:var(--yellow-200);border-color:var(--zip-yellow)}
.gtoggle.is-on .gtoggle__state{color:#856013}
.gtoggle.is-on .gtoggle__sw{background:var(--zip-yellow)}
.gtoggle.is-on .gtoggle__sw::after{transform:translateX(12px)}
.gauge-source{margin:22px auto 0;font-family:var(--font-caption);font-style:italic;font-weight:500;
  font-size:15px;color:var(--ink-500);text-align:center;text-wrap:balance}

/* ======================================================================
   CALCULATOR
   ====================================================================== */
.calc-card{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-xl);box-shadow:var(--sh-3);
  display:grid;grid-template-columns:340px 1fr;overflow:hidden}
.calc-inputs{padding:40px;background:var(--ink-050);border-right:1px solid var(--ink-200)}
.calc-outputs{padding:40px}
.calc-colhead{font-family:var(--font-display);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-500);margin:0 0 22px}
.field{margin-bottom:22px}
.field__label{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink-800);display:block;margin-bottom:8px}
.field__control{position:relative;display:flex;align-items:center}
.field__prefix,.field__suffix{position:absolute;font-family:var(--font-display);font-weight:800;color:var(--ink-500);font-size:17px;pointer-events:none}
.field__prefix{left:16px}.field__suffix{right:46px}
.field input{width:100%;padding:14px 16px;border:1.5px solid var(--ink-200);border-radius:var(--r-md);background:#fff;
  font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--ink-900);outline:none;
  transition:border-color var(--dur-base),box-shadow var(--dur-base)}
.field input.has-prefix{padding-left:32px}
.field input:focus{border-color:var(--blue-700);box-shadow:var(--focus-ring)}
.field__help{font-size:11.5px;color:var(--ink-400);margin-top:6px;line-height:1.4}
/* stepper */
.field__steppers{position:absolute;right:8px;display:flex;flex-direction:column;gap:2px}
.field__steppers button{width:26px;height:16px;border:1px solid var(--ink-200);background:#fff;border-radius:5px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-500);padding:0}
.field__steppers button:hover{background:var(--ink-050);color:var(--ink-800)}
.field__steppers svg{width:12px;height:12px}

.calc-outrow{display:flex;justify-content:space-between;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--ink-100)}
.calc-outrow__label{font-size:14.5px;color:var(--ink-600)}
.calc-outrow__val{font-family:var(--font-display);font-weight:800;font-size:20px;color:var(--ink-900);font-variant-numeric:tabular-nums}
.calc-total{display:flex;justify-content:space-between;align-items:center;background:var(--ink-900);color:#fff;
  border-radius:var(--r-md);padding:18px 22px;margin-top:18px}
.calc-total__label{font-size:13px;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);font-weight:700;font-family:var(--font-display)}
.calc-total__val{font-family:var(--font-display);font-weight:900;font-size:30px;color:var(--zip-yellow);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-tight)}
.calc-roi{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px;
  background:linear-gradient(135deg,var(--yellow-200),#fff6d6);border:1.5px solid var(--zip-yellow);border-radius:var(--r-md);padding:18px 22px}
.calc-roi__text{font-family:var(--font-display);font-weight:700;font-size:14px;color:#7a5a0a;line-height:1.45}
.calc-roi__text b{color:var(--ink-900);font-weight:900}
.calc-roi__num{font-family:var(--font-display);font-weight:900;font-size:44px;color:var(--ink-900);letter-spacing:var(--ls-tight);line-height:1;white-space:nowrap}
.calc-flag{margin-top:14px;background:var(--grad-ocu);border-radius:var(--r-md);padding:18px 22px;color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);overflow:hidden;
  max-height:0;padding-top:0;padding-bottom:0;opacity:0;margin-top:0;
  transition:max-height var(--dur-slow) var(--ease-out),padding var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out),margin var(--dur-slow) var(--ease-out)}
.calc-flag.is-shown{max-height:160px;padding-top:18px;padding-bottom:18px;margin-top:14px;opacity:1}
.calc-flag__text{font-family:var(--font-display);font-weight:700;font-size:14.5px;line-height:1.4}
.calc-flag__text b{text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-decoration-thickness:2px}
.calc-bench{font-size:12px;color:var(--ink-400);font-family:var(--font-caption);font-style:italic;margin:16px 0 0;line-height:1.5}
.calc-actions{display:flex;gap:12px;align-items:center;margin-top:22px;flex-wrap:wrap}
.calc-empty{color:var(--ink-400);font-size:15px;padding:30px 0;text-align:center}
.calc-inputs__note{font-size:12px;color:var(--ink-400);line-height:1.5;margin:26px 0 0;font-family:var(--font-caption);font-style:italic}

/* ======================================================================
   CALCULATOR — HERO PROJECTION VARIANT (calc2)
   ====================================================================== */
.calc-variant{display:none}
#calculator[data-variant="hero"] .calc-variant--hero{display:block}
#calculator[data-variant="classic"] .calc-variant--classic{display:block}

.calc2-card{position:relative;overflow:visible;max-width:900px;margin:0 auto;background:#fff;
  border:1px solid var(--ink-200);border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:34px 40px 0}
.calc2-eyebrow{font-family:var(--font-display);font-weight:700;font-size:11px;text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);color:var(--ink-400);margin-bottom:12px}
.calc2-trust{font-family:var(--font-caption);font-style:italic;font-weight:500;
  font-size:12px;color:var(--ink-400);margin:13px 0 0;line-height:1.45;text-wrap:pretty}
.calc2-trust b{color:var(--ink-700);font-weight:600;font-style:normal}

.calc2-takerate{margin-bottom:30px}
.calc2-pills{display:inline-flex;gap:6px;background:var(--ink-100);border-radius:var(--r-pill);padding:4px}
.calc2-pill{border:none;cursor:pointer;font-family:var(--font-display);font-weight:800;font-size:14px;
  color:var(--ink-600);background:transparent;border-radius:var(--r-pill);padding:7px 22px;
  transition:color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast)}
.calc2-pill.is-active{background:var(--grad-ocu);color:#fff;box-shadow:0 6px 16px rgba(240,80,90,.32)}
.calc2-pill-sub{font-family:var(--font-caption);font-style:italic;font-size:12.5px;color:var(--ink-500);margin-top:8px}

.calc2-hero{margin-bottom:28px}
.calc2-hero__top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.calc2-hero__top .calc2-eyebrow{margin-bottom:0}
.calc2-badge{display:inline-flex;align-items:center;gap:6px;background:var(--zip-yellow);color:var(--ink-900);
  font-family:var(--font-display);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  padding:5px 12px;border-radius:var(--r-pill);box-shadow:var(--sh-1)}
.calc2-badge[hidden]{display:none}
.calc2-badge svg{width:12px;height:12px;stroke-width:3}
.calc2-badge:not([hidden]){animation:calc2BadgePop .34s var(--ease-bounce) both}
@keyframes calc2BadgePop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.calc2-badge:not([hidden]){animation:none}}
.calc2-hero__num{font-family:var(--font-display);font-weight:900;letter-spacing:var(--ls-tight);line-height:1;
  color:var(--ink-900);font-size:clamp(52px,7vw,76px);font-variant-numeric:tabular-nums}
.calc2-hero__sign{color:var(--ink-500)}
.calc2-hero__unit{font-size:.34em;font-weight:800;color:var(--ink-400);margin-left:6px;letter-spacing:0}
.calc2-strip{display:flex;flex-wrap:nowrap;align-items:center;gap:10px;margin-top:16px;font-family:var(--font-display);
  font-weight:600;font-size:13.5px;color:var(--ink-600);white-space:nowrap}
.calc2-strip>span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.calc2-strip b{font-weight:800;color:var(--ink-800)}
.calc2-strip__dot{color:var(--ink-300)}
.calc2-roi b{background:var(--grad-blue-text-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc2-empty{font-size:15px;color:var(--ink-500);font-family:var(--font-display);font-weight:600;padding:14px 0}

.calc2-divider{height:1px;background:var(--ink-200);margin:0 0 22px}

#calc2-flag{margin-bottom:30px}
#calc2-flag.calc-flag.is-shown{max-height:200px}

.calc2-inputs{margin-bottom:30px}
.calc2-fields{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:22px;align-items:end}
.calc2-field label{display:block;font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink-700);margin-bottom:10px}
.calc2-field__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.calc2-field__val{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--ink-900);font-variant-numeric:tabular-nums}
.calc2-field--slider input[type=range]{margin:2px 0 0}
.calc2-slider__bounds{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-400);font-weight:600;margin-top:6px;font-family:var(--font-display)}
.calc2-money{display:flex;align-items:center;border:1.5px solid var(--ink-200);border-radius:var(--r-md);
  padding:0 14px;background:#fff;transition:border-color var(--dur-fast)}
.calc2-money:focus-within{border-color:var(--blue-400);box-shadow:var(--focus-ring)}
.calc2-money__sym{color:var(--ink-400);font-family:var(--font-display);font-weight:800;font-size:16px}
.calc2-money input{border:none;outline:none;width:100%;padding:13px 4px;font-family:var(--font-display);
  font-weight:800;font-size:17px;color:var(--ink-900);background:transparent}

.calc2-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin:0 -40px;padding:22px 40px;background:var(--ink-050);border-top:1px solid var(--ink-200);
  border-radius:0 0 var(--r-xl) var(--r-xl)}
.calc2-cta__copy{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink-700)}
.calc2-cta__copy b{font-weight:900;color:var(--ink-900)}

/* ════ CARD LAYOUT (Tweak) ════
   Stacked = flex column with explicit order, so it looks identical to the
   original single-column flow even though the markup is now grouped into
   controls + results wrappers. Two-column re-activates the wrappers as a grid. */
.calc2-card{display:flex;flex-direction:column}
/* Stacked: dissolve the wrappers and restore the original vertical order */
.calc2-card[data-layout="stacked"] .calc2-mid,
.calc2-card[data-layout="stacked"] .calc2-mid__controls,
.calc2-card[data-layout="stacked"] .calc2-mid__results{display:contents}
.calc2-card[data-layout="stacked"] .calc2-takerate{order:2}
.calc2-card[data-layout="stacked"] .calc2-hero{order:3}
.calc2-card[data-layout="stacked"] .calc2-divider{order:4}
.calc2-card[data-layout="stacked"] #calc2-flag{order:5}
.calc2-card[data-layout="stacked"] .calc2-inputs{order:6}
.calc2-card[data-layout="stacked"] .calc2-cta{order:9}

/* Two-column: controls (left) beside results (right); CTA + trust stay full width */
.calc2-card[data-layout^="split"] .calc2-mid{display:grid;grid-template-columns:0.92fr 1.08fr;
  gap:34px;align-items:start;margin-bottom:30px}
.calc2-card[data-layout^="split"] .calc2-mid__controls,
.calc2-card[data-layout^="split"] .calc2-mid__results{display:flex;flex-direction:column;gap:24px;min-width:0}
.calc2-card[data-layout^="split"] .calc2-takerate,
.calc2-card[data-layout^="split"] .calc2-inputs,
.calc2-card[data-layout^="split"] .calc2-hero{margin-bottom:0}
.calc2-card[data-layout^="split"] .calc2-divider{display:none}
/* PostProfit flag is a full-width box below the grid, above the CTA (same as stacked) */
.calc2-card[data-layout^="split"] .calc2-mid{order:1}
.calc2-card[data-layout^="split"] #calc2-flag{order:2}
.calc2-card[data-layout^="split"] .calc2-cta{order:3}
.calc2-card[data-layout^="split"] .calc2-fields{grid-template-columns:1fr 1fr}
.calc2-card[data-layout^="split"] .calc2-field--slider{grid-column:1/-1}
.calc2-card[data-layout^="split"] .calc2-hero__num{font-size:clamp(48px,5vw,72px)}
/* rate-last variant: push the take-rate control below the store inputs */
.calc2-card[data-layout="split-tr"] .calc2-mid__controls .calc2-takerate{order:2}
.calc2-card[data-layout="split-tr"] .calc2-mid__controls .calc2-inputs{order:1}
.calc2-card[data-layout="split-tr"] .calc2-takerate{border-top:1px solid var(--ink-200);padding-top:24px}
@media(max-width:760px){
  .calc2-card[data-layout^="split"] .calc2-mid{grid-template-columns:1fr;gap:28px}
}

/* Plus unlock — rendered INLINE inside the calculator hero. Hidden until the
   projection crosses the threshold; 3 placement styles via [data-plus-style]. */
.calc2-plus{display:none;position:relative;color:#fff;background:var(--grad-zipify);
  border-radius:var(--r-lg);box-shadow:0 18px 44px rgba(13,31,78,.22);overflow:hidden}
.calc2-plus::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 220px at 100% -10%,rgba(255,209,0,.14),transparent 70%),
             repeating-linear-gradient(135deg,rgba(255,255,255,.014) 0 2px,transparent 2px 80px)}
.calc2-plus.is-shown{display:block;animation:calc2PlusIn .4s var(--ease-out) both}
@keyframes calc2PlusIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.calc2-plus>*{position:relative;z-index:1}
.calc2-plus__inner{display:flex;flex-direction:column;gap:12px;padding:24px 26px}
.calc2-plus__textwrap{display:flex;flex-direction:column;gap:6px;min-width:0}
.calc2-plus__kicker{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  background:rgba(255,209,0,.16);color:var(--zip-yellow);font-family:var(--font-display);font-weight:800;
  font-size:11px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);padding:5px 11px;border-radius:var(--r-pill)}
.calc2-plus__kicker svg{width:12px;height:12px;stroke-width:3}
.calc2-plus__title{font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.12;letter-spacing:var(--ls-tight);color:#fff}
.calc2-plus__desc{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.74)}
.calc2-plus__desc b{color:var(--zip-yellow);font-weight:800}
.calc2-plus__foot{display:flex;align-items:center;gap:13px;margin-top:4px}
.calc2-plus__avatar{width:40px;height:40px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--blue-400),var(--pink-500));display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:14px;color:#fff}
.calc2-plus__close{position:absolute;top:12px;right:14px;z-index:2;background:rgba(255,255,255,.1);border:none;
  color:rgba(255,255,255,.7);width:26px;height:26px;border-radius:50%;font-size:17px;line-height:1;cursor:pointer;
  transition:background var(--dur-fast),color var(--dur-fast)}
.calc2-plus__close:hover{background:rgba(255,255,255,.2);color:#fff}
@media(prefers-reduced-motion:reduce){.calc2-plus.is-shown{animation:none}}

/* keep the primary hero content from blowing out the grid track */
.calc2-hero__main{min-width:0}

/* ── style: SIDE PANEL — fills the empty right half of the hero, next to the number ── */
.calc2-card.plus-on[data-plus-style="side"] .calc2-hero{display:grid;
  grid-template-columns:1fr minmax(0,300px);gap:26px;align-items:stretch}
.calc2-card[data-plus-style="side"] .calc2-plus__inner{height:100%;justify-content:center}
.calc2-card.plus-on[data-plus-style="side"] .calc2-hero__num{font-size:clamp(34px,3.6vw,48px)}

/* ── style: BANNER — full-width horizontal bar below the number ── */
.calc2-card[data-plus-style="bar"] .calc2-plus{margin-top:20px}
.calc2-card[data-plus-style="bar"] .calc2-plus__inner{flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap}
.calc2-card[data-plus-style="bar"] .calc2-plus__kicker{align-self:center}
.calc2-card[data-plus-style="bar"] .calc2-plus__textwrap{flex:1 1 220px}
.calc2-card[data-plus-style="bar"] .calc2-plus__foot{margin-top:0;flex-shrink:0}

/* ── style: MINIMAL — light inset panel with body copy ── */
.calc2-card[data-plus-style="minimal"] .calc2-plus{margin-top:16px;background:var(--ink-050);color:var(--ink-900);
  box-shadow:none;border:1px solid var(--ink-200)}
.calc2-card[data-plus-style="minimal"] .calc2-plus::before{display:none}
.calc2-card[data-plus-style="minimal"] .calc2-plus__inner{flex-direction:row;align-items:center;gap:18px;padding:16px 22px;flex-wrap:wrap}
.calc2-card[data-plus-style="minimal"] .calc2-plus__kicker{align-self:flex-start;background:rgba(45,107,228,.12);color:var(--blue-700)}
.calc2-card[data-plus-style="minimal"] .calc2-plus__textwrap{flex:1 1 280px;gap:4px}
.calc2-card[data-plus-style="minimal"] .calc2-plus__title{font-size:17px;color:var(--ink-900)}
.calc2-card[data-plus-style="minimal"] .calc2-plus__title .num-accent-y{background:var(--grad-blue-text-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.calc2-card[data-plus-style="minimal"] .calc2-plus__desc{display:block;color:var(--ink-600);font-size:13px;max-width:54ch}
.calc2-card[data-plus-style="minimal"] .calc2-plus__avatar{display:none}
.calc2-card[data-plus-style="minimal"] .calc2-plus__foot{margin-top:0;flex-shrink:0}
.calc2-card[data-plus-style="minimal"] .calc2-plus__close{color:var(--ink-400);background:var(--ink-100)}
.calc2-card[data-plus-style="minimal"] .calc2-plus__close:hover{background:var(--ink-200);color:var(--ink-700)}

@media(max-width:720px){
  .calc2-card.plus-on[data-plus-style="side"] .calc2-hero{grid-template-columns:1fr}
  .calc2-card.plus-on[data-plus-style="side"] .calc2-plus{margin-top:18px}
}

@media(max-width:1000px){
  .calc2-card{padding:28px 24px 0}
  .calc2-cta{margin:0 -24px;padding:20px 24px}
}
@media(max-width:680px){
  .calc2-fields{grid-template-columns:1fr;gap:18px}
  .calc2-cta{flex-direction:column;align-items:stretch;text-align:center}
  .calc2-cta .btn{width:100%}
}

/* sliders */
.cslider{margin-bottom:26px}
.cslider:last-child{margin-bottom:0}
.cslider__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.cslider__label{font-family:var(--font-display);font-weight:700;font-size:13.5px;color:var(--ink-700);letter-spacing:-.01em}
.cslider__val{font-family:var(--font-display);font-weight:900;font-size:19px;color:var(--ink-900);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-tight);white-space:nowrap}
.cslider__track{position:relative;height:8px}
.cslider__track::before{content:"";position:absolute;inset:0;border-radius:var(--r-pill);background:var(--ink-200);box-shadow:inset 0 1px 2px rgba(13,31,78,.1)}
.cslider__fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:var(--r-pill);background:var(--grad-ocu);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.cslider__track input[type=range]{position:absolute;top:-9px;left:0;width:100%;height:26px;opacity:0;cursor:pointer;margin:0;-webkit-appearance:none;appearance:none;background:transparent}
.cslider__track input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px}
.cslider__thumb{position:absolute;top:50%;left:0;width:20px;height:20px;border-radius:50%;background:#fff;
  border:1px solid var(--ink-200);box-shadow:0 2px 6px rgba(13,31,78,.2),0 0 0 1px rgba(13,31,78,.04);
  transform:translate(-50%,-50%);pointer-events:none;transition:box-shadow var(--dur-fast) var(--ease-out)}
.cslider__track input:focus-visible ~ .cslider__thumb{box-shadow:0 0 0 4px rgba(28,65,156,.18),0 2px 6px rgba(13,31,78,.2)}
.cslider__bounds{font-size:11px;color:var(--ink-400);margin-top:9px;letter-spacing:.02em}

/* output cards */
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ocard{background:var(--ink-050);border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:20px 22px;
  display:flex;flex-direction:column;gap:9px;min-height:130px;justify-content:center}
.ocard__label{font-family:var(--font-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-500)}
.ocard__num{font-family:var(--font-display);font-weight:900;font-size:30px;color:var(--ink-900);letter-spacing:var(--ls-tight);line-height:1;display:flex;align-items:baseline;gap:7px;font-variant-numeric:tabular-nums}
.ocard__unit{font-size:14px;font-weight:700;color:var(--ink-400)}
.ocard__sub{font-size:11.5px;color:var(--ink-500);line-height:1.45}
.ocard__aov{display:flex;align-items:center;gap:11px}
.ocard__aov-before{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--ink-400);letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
.ocard__arrow{width:18px;height:18px;color:var(--ink-300);flex-shrink:0}
.ocard__aov-after{font-family:var(--font-display);font-weight:900;font-size:30px;color:#047857;letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
.ocard--roi{background:linear-gradient(135deg,rgba(240,112,48,.08),rgba(240,48,90,.08));border-color:rgba(240,48,90,.3)}
.ocard__num--roi{font-size:40px}
.ocard--roi #out-roi{background:var(--grad-ocu);-webkit-background-clip:text;background-clip:text;color:transparent}
.ocard--roi .ocard__unit{color:var(--pink-500)}
.ocard__annual{font-size:13px;font-weight:700;color:var(--ink-500);font-family:var(--font-display);font-variant-numeric:tabular-nums}
.ocard__annual span{color:var(--ink-700)}
/* PostProfit revenue card + off state */
.ocard--pp{transition:opacity var(--dur-base) var(--ease-out),filter var(--dur-base) var(--ease-out)}
.ocard--pp.is-off{opacity:.5;filter:grayscale(.85)}
.ocard--pp.is-off .ocard__num{color:var(--ink-400)}

/* PostProfit flag — now with on/off toggle */
.calc-flag__main{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.calc-flag__lead{font-weight:900;letter-spacing:.01em}
.pp-switch{flex-shrink:0;width:44px;height:25px;border-radius:var(--r-pill);background:rgba(255,255,255,.32);
  border:1px solid rgba(255,255,255,.55);position:relative;cursor:pointer;padding:0;transition:background var(--dur-fast) var(--ease-out)}
.pp-switch__dot{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform var(--dur-fast) var(--ease-out),background var(--dur-fast)}
.pp-switch.is-on{background:#fff}
.pp-switch.is-on .pp-switch__dot{transform:translateX(19px);background:var(--pink-500)}
.calc-flag.is-off{filter:saturate(.6) brightness(.97)}

/* Zipify Plus unlock drop-down */
.plus-unlock{max-height:0;opacity:0;overflow:hidden;margin-top:0;
  transition:max-height .52s var(--ease-out),opacity .38s var(--ease-out) 60ms,margin-top .42s var(--ease-out)}
.plus-unlock.is-shown{max-height:1000px;opacity:1;margin-top:24px}
.plus-unlock__hair{height:1px;margin-bottom:24px;background:linear-gradient(90deg,transparent,rgba(45,107,228,.35) 50%,transparent)}
.plus-unlock__panel{border-radius:var(--r-xl);padding:38px;border:1px solid rgba(255,255,255,.16)}
.plus-unlock__head{display:flex;align-items:center;gap:14px;margin-bottom:26px;flex-wrap:wrap}
.plus-unlock__badge{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-pill);
  background:rgba(255,215,72,.12);border:1px solid rgba(255,215,72,.4);color:var(--zip-yellow);
  font-family:var(--font-display);font-weight:800;font-size:10.5px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow)}
.plus-unlock__badge svg{width:12px;height:12px}
.plus-unlock__headnote{font-size:12px;color:rgba(255,255,255,.5)}
.plus-unlock__grid{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:start}
.plus-unlock__logo{height:24px;width:auto;margin-bottom:16px}
.plus-unlock__title{font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.4vw,32px);color:#fff;
  line-height:1.1;letter-spacing:var(--ls-tight);margin:0 0 14px;text-wrap:balance}
.plus-unlock__desc{font-size:14.5px;color:rgba(255,255,255,.7);line-height:1.6;margin:0 0 18px;max-width:480px}
.plus-unlock__hl{padding:14px 16px;background:rgba(255,215,72,.06);border:1px solid rgba(255,215,72,.22);
  border-radius:var(--r-md);font-size:14px;color:#fff;line-height:1.5;font-weight:600;margin-bottom:24px;max-width:480px}
.plus-unlock__cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.plus-unlock__note{font-size:11.5px;color:rgba(255,255,255,.5)}
.plus-unlock__right{display:flex;flex-direction:column;gap:14px}
.plus-unlock__stat{padding:20px;border-radius:var(--r-lg);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16)}
.plus-unlock__stat-k{font-family:var(--font-display);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:rgba(255,255,255,.5)}
.plus-unlock__stat-big{font-family:var(--font-display);font-weight:900;font-size:clamp(34px,3.2vw,44px);letter-spacing:var(--ls-tight);line-height:1;margin:8px 0 7px}
.plus-unlock__stat-sub{font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.45}
.plus-unlock__benefits{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.plus-unlock__benefits li{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);font-size:12.5px;color:rgba(255,255,255,.72);line-height:1.45}
.plus-unlock__benefits b{color:#fff;font-weight:700}
.plus-unlock__bi{width:18px;height:18px;border-radius:5px;flex-shrink:0;margin-top:1px;background:var(--zip-yellow);
  color:var(--ink-900);display:flex;align-items:center;justify-content:center}
.plus-unlock__bi svg{width:12px;height:12px}
@media(max-width:760px){.plus-unlock__grid{grid-template-columns:1fr;gap:28px}}

/* ======================================================================
   WALKTHROUGH — FUNNEL WHEEL (scroll-pinned, bottom→top spin)
   ====================================================================== */
.walk-wheel{position:relative;background:var(--ink-100)}
.ww-stage{position:relative}
.ww-pin{position:sticky;top:0;height:100vh;overflow:hidden}

.ww-head{position:absolute;left:clamp(20px,4.5vw,72px);top:calc(var(--nav-h) + 48px);text-align:left;z-index:7;pointer-events:none;width:clamp(320px,34vw,500px)}
.ww-head .eyebrow-pill,.ww-head h2{pointer-events:auto}
.ww-head .eyebrow-pill{margin-bottom:12px}
.ww-head h2{margin:0;font-size:var(--fs-h2);line-height:1.1}
.ww-head h2 b{background:var(--grad-blue-text-accent);-webkit-background-clip:text;background-clip:text;color:transparent}
.ww-head__sub{margin:14px 0 0;font-size:var(--fs-body-1);line-height:1.55;color:var(--ink-600);max-width:42ch}

/* wheel */
.ww-wheel{position:absolute;inset:0;z-index:3}
.ww-rim{position:absolute;border-radius:50%;border:1.5px dashed var(--ink-300);transform:translate(-50%,-50%);pointer-events:none}
.ww-rim::after{content:"";position:absolute;inset:5.2%;border-radius:50%;border:1px solid var(--ink-200)}
.ww-hub{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--ink-900);
  transform:translate(-50%,-50%);box-shadow:0 0 0 6px rgba(13,31,78,.06);pointer-events:none}

/* app card */
.ww-card{position:absolute;top:0;left:0;width:540px;border-radius:18px;background:#fff;border:1px solid var(--ink-200);
  box-shadow:var(--sh-2);overflow:hidden;will-change:transform,opacity;transform-origin:center center}
.ww-card.is-live{box-shadow:0 30px 70px -22px rgba(13,31,78,.45)}
.ww-card__chrome{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--ink-050);border-bottom:1px solid var(--ink-200)}
.ww-card__chrome .d{width:9px;height:9px;border-radius:50%;background:var(--ink-300)}
.ww-card__url{margin-left:8px;flex:1;height:18px;border-radius:6px;background:#fff;border:1px solid var(--ink-200);
  display:flex;align-items:center;padding:0 9px;font-size:10px;color:var(--ink-400);font-family:var(--font-mono);overflow:hidden;white-space:nowrap}
.ww-card__body{padding:18px 18px 16px}
.ww-card__stage{display:inline-block;font-family:var(--font-display);font-weight:800;font-size:9.5px;letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;color:var(--blue-500);margin-bottom:12px}
.ww-card__top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ww-card__ic{width:44px;height:44px;border-radius:12px;background:var(--zip-yellow);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ww-card__ic svg{width:24px;height:24px;color:var(--ink-900)}
.ww-card__h{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:var(--ls-tight);color:var(--ink-900);line-height:1.12}
.ww-card__sub{font-size:12px;color:var(--ink-500);margin-top:2px}
.ww-card__shot{margin-bottom:16px;border-radius:10px;overflow:hidden}
.ww-card__shot img{display:block;width:90%;height:auto;margin:0 auto}
.ww-card__sk{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.ww-card__row{height:11px;border-radius:5px;background:var(--ink-100)}
.ww-card__grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:16px}
.ww-card__tile{aspect-ratio:1/1;border-radius:9px;background:var(--ink-100);border:1px solid var(--ink-200)}
.ww-card__offer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 14px;border-radius:12px;
  background:linear-gradient(120deg,#fff4ef,#fdeef4);border:1.5px solid rgba(240,80,42,.28)}
.ww-card__ol{font-size:11px;color:var(--ink-500)}
.ww-card__op{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--ink-900);margin-top:2px}
.ww-card__op b{color:var(--orange-700)}
.ww-card__obtn{flex:0 0 auto;border:0;cursor:default;font-family:var(--font-display);font-weight:800;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;background:var(--grad-ocu);padding:10px 14px;border-radius:9px;display:flex;align-items:center;gap:6px}
.ww-card__obtn svg{width:13px;height:13px}

/* optimization meter (left, fills the space below the title — long, capped) */
.ww-meter{position:absolute;left:clamp(20px,4.5vw,72px);top:calc(var(--nav-h) + 312px);z-index:7;
  height:min(calc(100vh - var(--nav-h) - 366px),760px);display:flex;align-items:stretch;gap:18px;pointer-events:none}
.ww-meter__track{position:relative;width:12px;border-radius:var(--r-pill);background:var(--ink-200);overflow:hidden}
.ww-meter__fill{position:absolute;left:0;right:0;top:0;height:0%;border-radius:var(--r-pill);
  background:linear-gradient(180deg,#ef4444 0%,#f59e0b 34%,#84cc16 68%,#10b981 100%);transition:height .25s var(--ease-out)}
.ww-meter__ticks{position:absolute;inset:0}
.ww-meter__tick{position:absolute;left:50%;width:20px;height:20px;border-radius:50%;background:#fff;border:2.5px solid var(--ink-300);
  transform:translate(-50%,-50%);transition:all .25s var(--ease-out)}
.ww-meter__tick.is-passed{border-color:#10b981;background:#10b981}
.ww-meter__side{position:relative;width:0}
.ww-meter__marker{position:absolute;left:0;top:0;transform:translateY(-50%);transition:top .25s var(--ease-out),transform .25s var(--ease-out);white-space:nowrap}
.ww-meter__marker.is-bottom{transform:translateY(-100%)}
.ww-meter__pct{font-family:var(--font-display);font-weight:900;font-size:46px;line-height:.9;letter-spacing:-.03em;color:var(--ink-900)}
.ww-meter__pct sup{font-size:20px;font-weight:800;vertical-align:super}
.ww-meter__status{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;margin-top:6px}
.ww-meter__cap{position:absolute;bottom:-30px;left:0;font-family:var(--font-display);font-weight:700;font-size:10.5px;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ink-400);white-space:nowrap}
.ww-meter__top{position:absolute;top:-26px;left:-2px;font-family:var(--font-display);font-weight:700;font-size:10.5px;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ink-400)}

/* active caption (left side, vertically centered on the meter band) */
.ww-cap{position:absolute;left:clamp(180px,16vw,236px);top:calc(var(--nav-h) + 232px);z-index:6;
  width:clamp(220px,23vw,296px);height:min(calc(100vh - var(--nav-h) - 286px),800px);display:flex;flex-direction:column;justify-content:center;
  pointer-events:none;text-align:left;transition:opacity .3s var(--ease-out)}
.ww-cap__step{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--pink-500)}
.ww-cap__name{font-family:var(--font-display);font-weight:800;font-size:clamp(23px,2.2vw,30px);letter-spacing:var(--ls-tight);color:var(--ink-900);margin:9px 0 10px;line-height:1.08}
.ww-cap__desc{font-size:16.5px;line-height:1.6;color:var(--ink-600);margin:0}
.ww-cap__plus{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:var(--ink-900);color:var(--zip-yellow);
  font-family:var(--font-display);font-weight:800;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill)}

/* scroll hint */
.ww-hint{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:700;font-size:10.5px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--ink-400);
  transition:opacity .3s var(--ease-out)}
.ww-hint svg{width:18px;height:18px;animation:ww-bob 1.5s var(--ease-out) infinite}
@keyframes ww-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

@media(max-width:1120px){
  .ww-cap{display:none}
}
@media(max-width:900px){
  .ww-meter{display:none}
  .ww-card{width:340px}
}
/* Phone. The wheel's desktop chrome — heading in the left gutter, meter beside
   it, caption between the two — has nowhere to sit once the gutter is gone, so
   `render()` in `ocu.js` puts the circle's centre in the middle of the viewport
   below 760px and sizes the card to the width instead of to a 1280px stage.
   These rules move the chrome to match: heading across the top, caption back
   under the card (it is hidden at 1120px for want of a gutter, and there is
   room for it here), rim and hub gone — at this radius the arc reads as a
   stray line through the card rather than as a wheel. */
@media(max-width:760px){
  .ww-head{left:20px;right:20px;width:auto;top:calc(var(--nav-h) + 24px);text-align:center}
  .ww-head h2{font-size:clamp(22px,6.2vw,30px)}
  .ww-rim,.ww-hub{display:none}
  .ww-cap{display:flex;left:20px;right:20px;width:auto;top:auto;bottom:72px;height:auto;text-align:center}
  .ww-cap__step{font-size:11px}
  .ww-cap__name{font-size:21px;margin:7px 0 8px}
  .ww-cap__desc{font-size:14.5px;line-height:1.5}
}

/* ======================================================================
   AI SHOWCASE  (dark surface)
   ====================================================================== */
.ai-demo{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:stretch}
.ai-panel{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.2);
  border-radius:var(--r-xl);padding:34px}
.ai-load{text-align:center}
.ai-load__logo{width:56px;height:56px;border-radius:var(--r-md);margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--blue-500),var(--blue-700));box-shadow:0 10px 26px rgba(45,107,228,.4)}
.ai-load__logo img{width:34px;height:auto}
.ai-load__title{font-family:var(--font-display);font-weight:800;font-size:18px;color:#fff;margin:0 0 18px;letter-spacing:var(--ls-tight)}
.ai-bar{height:7px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);overflow:hidden}
.ai-bar__fill{height:100%;width:0;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--blue-500),var(--blue-400))}
.ai-load__subline{font-family:var(--font-caption);font-style:italic;font-size:12px;color:rgba(255,255,255,.45);margin:10px 0 22px}
.ai-steps{list-style:none;padding:0;margin:0;text-align:left;display:flex;flex-direction:column;gap:12px}
.ai-steps li{display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(255,255,255,.55);transition:color var(--dur-base)}
.ai-steps li.is-done{color:#fff}
.ai-check{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;transition:all var(--dur-base) var(--ease-out)}
.ai-check svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.4);transition:all var(--dur-base) var(--ease-bounce)}
.ai-steps li.is-done .ai-check{background:#10b981;border-color:#10b981}
.ai-steps li.is-done .ai-check svg{opacity:1;transform:scale(1)}
/* right viz */
.ai-viz{display:flex;flex-direction:column}
.ai-viz__label{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:700;
  font-size:11px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:rgba(255,255,255,.5);margin-bottom:18px}
.ai-viz__label .dot{width:7px;height:7px;border-radius:50%;background:#34d399;animation:livepulse 1.4s ease-in-out infinite}
@keyframes livepulse{0%,100%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}50%{box-shadow:0 0 0 6px rgba(52,211,153,0)}}
.ai-skugrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.ai-sku{aspect-ratio:1.25;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;font-size:12px;
  letter-spacing:.04em;color:rgba(255,255,255,.5);transition:all var(--dur-base) var(--ease-out)}
.ai-sku.is-testing{background:var(--yellow-200);border-color:var(--zip-yellow);color:#856013}
.ai-sku.is-winner{background:#10b981;border-color:#34d399;color:#fff;box-shadow:0 0 0 4px rgba(16,185,129,.25)}
.ai-flowarrow{text-align:center;color:var(--pink-500);font-size:22px;margin:2px 0 14px;line-height:1}
.ai-result{background:rgba(16,185,129,.08);border:1.5px solid rgba(16,185,129,.5);border-radius:var(--r-md);padding:16px;
  opacity:0;transform:translateY(12px);transition:all var(--dur-slow) var(--ease-out)}
.ai-result.is-shown{opacity:1;transform:translateY(0)}
.ai-result__label{font-family:var(--font-display);font-weight:800;font-size:10px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:#34d399;margin-bottom:12px}
.ai-result__chain{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ai-result__node{flex:1;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);
  padding:9px 8px;text-align:center;font-family:var(--font-display);font-weight:700;font-size:11.5px;color:#fff;white-space:nowrap}
.ai-result__arrow{color:rgba(255,255,255,.4);font-weight:900;flex-shrink:0}

/* ----- AI right-viz: three switchable animations ----- */
.ai-viz{position:relative;justify-content:stretch}
.aiv{display:none}
.aiv.is-active{display:block}
.aiv-frame{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.18);
  border-radius:var(--r-lg);padding:22px}

/* shared result bar */
.aivx-best{margin-top:8px;background:rgba(16,185,129,.08);border:1.5px solid rgba(16,185,129,.5);border-radius:var(--r-md);
  padding:11px 14px;text-align:center;font-family:var(--font-display);font-weight:700;font-size:12.5px;color:#fff;
  opacity:0;transform:translateY(10px);transition:all .45s var(--ease-out)}
.aivx-best.is-shown{opacity:1;transform:translateY(0)}
.aivx-best b{color:#34d399}

/* AI split-test decision graph (9 offers, branching winner path) */
.aist-frame{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-top-color:rgba(255,255,255,.18);
  border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:16px;flex:1}
.aist-frame .ai-viz__label{margin-bottom:0}
.aist-graph{position:relative;flex:1;min-height:300px}
.aist-net{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.aist-edge{stroke:rgba(255,255,255,.08);stroke-width:1;fill:none;vector-effect:non-scaling-stroke;
  opacity:0;transition:opacity .5s var(--ease-out)}
.aist-edge.is-in{opacity:1}
.aist-chip{position:absolute;width:130px;left:var(--x,0);top:var(--y,0);transform:translate(-50%,-50%) scale(.86);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-top-color:rgba(255,255,255,.2);
  border-radius:var(--r-md);padding:9px 11px;opacity:0;box-shadow:0 8px 20px rgba(5,10,25,.4);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),border-color .4s var(--ease-out),background .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.aist-chip.is-in{opacity:1;transform:translate(-50%,-50%) scale(1)}
.aist-chip__name{font-family:var(--font-display);font-weight:700;font-size:12px;color:#fff;letter-spacing:-.01em;
  margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aist-chip__bar{height:4px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.aist-chip__bar i{display:block;height:100%;width:0;border-radius:99px;background:rgba(255,255,255,.3);transition:width .7s var(--ease-out)}
.aist-chip.is-in .aist-chip__bar i{width:var(--w)}
.aist-chip__pct{font-family:var(--font-display);font-weight:700;font-size:10.5px;color:rgba(255,255,255,.5);margin-top:6px;transition:color .4s}
.aist-chip__tag{position:absolute;top:-9px;right:9px;display:inline-flex;align-items:center;gap:3px;background:var(--zip-yellow);
  color:#1a1a1a;font-family:var(--font-display);font-weight:800;font-size:8.5px;text-transform:uppercase;letter-spacing:.04em;
  padding:3px 7px 3px 5px;border-radius:99px;opacity:0;transform:translateY(5px) scale(.85);transition:all .4s var(--ease-bounce)}
.aist-chip__tag svg{width:10px;height:10px;stroke-width:3.2}
.aist-chip.is-win{border-color:var(--zip-yellow);background:rgba(255,209,0,.1);box-shadow:0 0 0 1px var(--zip-yellow),0 12px 26px rgba(0,0,0,.45);z-index:2}
.aist-chip.is-win .aist-chip__bar i{background:var(--zip-yellow)}
.aist-chip.is-win .aist-chip__pct{color:var(--zip-yellow)}
.aist-chip.is-win .aist-chip__tag{opacity:1;transform:translateY(0) scale(1)}
.aist-chip.is-lose{opacity:.3}
.aist-frame .aivx-best{margin-top:2px}

/* Phone. The graph is a 3x3 lattice of absolutely-positioned chips sized for a
   desktop column: at ~310px of frame the 130px chips sit on top of each other
   and the right-hand column runs past the frame's edge. Below 760px the same
   chips flow in a real grid — `makeSplitTest()` writes their coordinates to
   `--x`/`--y` rather than to `left`/`top` so this can take them back — and the
   edge lines go with the absolute positions they were drawn for. The row gap
   leaves room for the WINNER tag, which overhangs each chip's top edge. */
@media(max-width:760px){
  .aist-graph{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 8px;flex:0 0 auto;min-height:0;padding-top:4px}
  .aist-net{display:none}
  .aist-chip{position:relative;left:auto;top:auto;width:auto;padding:9px 8px;transform:scale(.93)}
  .aist-chip.is-in{transform:scale(1)}
  .aist-chip__name{font-size:10.5px;line-height:1.25;white-space:normal;min-height:2.5em;margin-bottom:6px}
  .aist-chip__pct{font-size:9.5px;margin-top:5px}
  .aist-chip__tag{left:50%;right:auto;top:-9px;font-size:8px;padding:2px 6px 2px 4px;transform:translate(-50%,5px) scale(.85)}
  .aist-chip.is-win .aist-chip__tag{transform:translate(-50%,0) scale(1)}
}

/* A · growing decision tree */
.aivt__graph{position:relative;height:206px}
.aivt__graph svg{width:100%;height:100%;display:block;overflow:visible}
.aivt-edge{stroke:rgba(255,255,255,.16);stroke-width:1.6;fill:none;transition:stroke .25s}
.aivt-edge.is-dim{stroke:rgba(255,255,255,.06)}
.aivt-edge.is-best{stroke:var(--zip-yellow);stroke-width:3}
.aivt-node{opacity:0;transition:opacity .35s var(--ease-out),transform .4s var(--ease-bounce);
  transform-box:fill-box;transform-origin:center;transform:scale(.5)}
.aivt-node.is-in{opacity:1;transform:scale(1)}
.aivt-node.is-dim{opacity:.26}
.aivt-rect{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.18);stroke-width:1.5;transition:all .2s}
.aivt-node.is-eval .aivt-rect{fill:rgba(45,107,228,.24);stroke:var(--blue-400)}
.aivt-node.is-best .aivt-rect{fill:rgba(255,209,0,.16);stroke:var(--zip-yellow)}
.aivt-node.is-root .aivt-rect{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.36)}
.aivt-t{font-family:var(--font-display);font-weight:700;font-size:9.5px;fill:rgba(255,255,255,.88);text-anchor:middle;dominant-baseline:middle;pointer-events:none}

/* B · conditional funnel flowchart */
.aivf__graph{position:relative;height:200px}
.aivf__graph svg{width:100%;height:100%;display:block;overflow:visible}
.aivf-edge{stroke:rgba(255,255,255,.18);stroke-width:1.6;fill:none;transition:stroke .25s,stroke-width .25s}
.aivf-edge.is-on{stroke:var(--zip-yellow);stroke-width:3}
.aivf-shape{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.2);stroke-width:1.5;transition:all .25s}
.aivf-shape.is-dec{fill:rgba(45,107,228,.16);stroke:var(--blue-400)}
.aivf-shape.is-on{fill:rgba(255,209,0,.16);stroke:var(--zip-yellow)}
.aivf-shape.is-win{fill:rgba(16,185,129,.18);stroke:#34d399}
.aivf-t{font-family:var(--font-display);font-weight:700;font-size:8.5px;fill:#fff;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.aivf-lbl{font-family:var(--font-display);font-weight:800;font-size:8px;letter-spacing:.04em;fill:rgba(255,255,255,.45);text-anchor:middle;text-transform:uppercase}
.aivf-lbl.is-on{fill:var(--zip-yellow)}
.aivf-token{fill:#34d399;filter:drop-shadow(0 0 7px rgba(52,211,153,.95))}

/* C · radial offer map */
.aivr__counter{text-align:center;font-family:var(--font-display);margin-bottom:8px;color:rgba(255,255,255,.55);font-size:12px;font-weight:700;letter-spacing:.02em}
.aivr__counter b{color:#fff;font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:var(--ls-tight)}
.aivr__graph{position:relative;height:196px}
.aivr__graph svg{width:100%;height:100%;display:block;overflow:visible}
.aivr-edge{stroke:rgba(255,255,255,.12);stroke-width:1.4;transition:stroke .16s,stroke-width .16s}
.aivr-edge.is-eval{stroke:rgba(45,107,228,.85);stroke-width:2}
.aivr-edge.is-best{stroke:var(--zip-yellow);stroke-width:2.8}
.aivr-dot{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.2);stroke-width:1.4;transition:all .16s}
.aivr-dot.is-eval{fill:rgba(45,107,228,.32);stroke:var(--blue-400)}
.aivr-dot.is-best{fill:var(--zip-yellow);stroke:var(--zip-yellow)}
.aivr-core{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.4);stroke-width:1.6}
.aivr-t{font-family:var(--font-display);font-weight:800;font-size:11px;fill:#fff;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.aivr-lbl{font-family:var(--font-display);font-weight:700;font-size:8.5px;fill:rgba(255,255,255,.82);text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.aivr-lbl.is-best{fill:var(--zip-yellow)}

/* ======================================================================
   POSTPROFIT OFFSET — switchable animated treatments
   ====================================================================== */
.offset-stage{max-width:760px;margin:0 auto;position:relative;border-radius:var(--r-xl);transition:box-shadow var(--dur-slow)}
.offset-stage.is-highlit{box-shadow:0 0 0 4px rgba(240,48,90,.25),var(--sh-3)}
.opp{display:none;background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:40px 42px}
.opp.is-active{display:block}

/* shared: live feed panel (v2) */
.oppf{display:grid;grid-template-columns:1.04fr .96fr;gap:26px;align-items:center}
.oppf__cap{margin:16px 0 0;font-family:var(--font-display);font-weight:700;font-size:16px;line-height:1.4;color:var(--ink-700);letter-spacing:var(--ls-tight);text-wrap:pretty}
.oppf__panel{align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.oppf__top{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-500);margin-bottom:8px}
.oppf__dot{width:8px;height:8px;border-radius:50%;background:#10b981;animation:livepulse 1.4s ease-in-out infinite}
.oppf__total{font-family:var(--font-display);font-weight:900;font-size:44px;line-height:.9;color:#047857;letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums;margin-bottom:14px}
.oppf__feed{display:flex;flex-direction:column;gap:0;height:140px;overflow:hidden;margin-bottom:14px}
.oppf__row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--ink-100);
  opacity:0;transform:translateY(-6px);animation:oppf-in .4s var(--ease-out) forwards}
@keyframes oppf-in{to{opacity:1;transform:none}}
.oppf__src{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-600)}
.oppf__src i{width:7px;height:7px;border-radius:2px;background:var(--blue-400);flex:0 0 auto}
.oppf__amt{font-family:var(--font-display);font-weight:800;font-size:13px;color:#047857;font-variant-numeric:tabular-nums}
.oppf__track{height:10px;border-radius:var(--r-pill);background:var(--ink-100);overflow:hidden;margin-bottom:9px}
.oppf__fill{height:100%;width:0;border-radius:var(--r-pill);background:linear-gradient(90deg,#10b981,#34d399);transition:width .9s var(--ease-out)}
.oppf__cover{font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--ink-400)}
.oppf__cover.is-done{color:#047857}

/* mobile thank-you page (v3) */
.oppp{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;justify-items:center;padding:6px 10px}
.oppp__phone{position:relative;width:196px;height:300px;background:#fff;border:9px solid var(--ink-900);border-radius:30px;
  box-shadow:var(--sh-3);overflow:hidden;flex:0 0 auto}
.oppp__notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:74px;height:18px;background:var(--ink-900);border-radius:0 0 12px 12px;z-index:2}
.oppp__screen{padding:30px 16px 16px}
.oppp__ok{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.oppp__ok .oppk__okic{width:30px;height:30px}
.oppp__okt{font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--ink-900);line-height:1.1}
.oppp__okt span{display:block;font-weight:600;font-size:9.5px;color:var(--ink-500);margin-top:2px}
.oppp__line{height:9px;border-radius:5px;background:var(--ink-100);margin-bottom:7px}
.oppp__line--s{width:62%}
.oppp__pill{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);background:#047857;color:#fff;
  font-family:var(--font-display);font-weight:800;font-size:12px;padding:7px 14px;border-radius:var(--r-pill);
  box-shadow:0 8px 20px rgba(4,120,87,.4);white-space:nowrap;font-variant-numeric:tabular-nums}
.oppp__copy{max-width:300px}
.oppp__big{font-family:var(--font-display);font-weight:900;font-size:58px;line-height:.9;color:#047857;letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
.oppp__big span{font-size:22px;font-weight:800;color:var(--ink-400);margin-left:3px}
.oppp__lbl{font-size:15px;color:var(--ink-600);line-height:1.5;margin-top:12px}
.oppp__cover{margin-top:16px;display:inline-block;background:rgba(16,185,129,.1);border:1px solid rgba(16,185,129,.4);
  border-radius:var(--r-pill);padding:9px 16px;font-family:var(--font-display);font-weight:800;font-size:13px;color:#047857}

/* C · thank-you page mock */
.oppk{display:grid;grid-template-columns:1.08fr .92fr;gap:26px;align-items:center}
.oppk__page{border:1px solid var(--ink-200);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);background:#fff}
.oppk__bar{display:flex;align-items:center;gap:6px;padding:10px 13px;background:var(--ink-050);border-bottom:1px solid var(--ink-200)}
.oppk__bar i{width:8px;height:8px;border-radius:50%;background:var(--ink-300)}
.oppk__url{margin-left:8px;font-family:var(--font-mono);font-size:10px;color:var(--ink-400)}
.oppk__body{padding:18px}
.oppk__ok{display:flex;align-items:center;gap:11px;margin-bottom:16px}
.oppk__okic{width:34px;height:34px;border-radius:50%;background:#10b981;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.oppk__okic svg{width:18px;height:18px;color:#fff}
.oppk__okt{font-family:var(--font-display);font-weight:800;font-size:14px;color:var(--ink-900)}
.oppk__oks{font-size:11px;color:var(--ink-500);margin-top:2px}
.oppk__ad{display:flex;align-items:center;gap:11px;border:1px dashed var(--ink-300);border-radius:var(--r-md);padding:13px;background:var(--ink-050);position:relative}
.oppk__ad::after{content:"";position:absolute;inset:0;border-radius:var(--r-md);box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:oppk-pulse 2.2s var(--ease-out) infinite}
@keyframes oppk-pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}70%{box-shadow:0 0 0 10px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.oppk__ad img{height:15px;width:auto;flex:0 0 auto}
.oppk__adt{font-size:10px;color:var(--ink-500);line-height:1.35}
.oppk__lbl{font-family:var(--font-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-500);margin-bottom:8px}
.oppk__earned{font-family:var(--font-display);font-weight:900;font-size:46px;line-height:.92;color:#047857;letter-spacing:var(--ls-tight);font-variant-numeric:tabular-nums}
.oppk__track{height:10px;border-radius:var(--r-pill);background:var(--ink-100);overflow:hidden;margin:16px 0 9px}
.oppk__fill{height:100%;width:0;border-radius:var(--r-pill);background:linear-gradient(90deg,#10b981,#34d399);transition:width 1s var(--ease-out)}
.oppk__cover{font-family:var(--font-display);font-weight:800;font-size:12px;color:var(--ink-400)}
.oppk__cover.is-done{color:#047857}

/* Phone. All three treatments are two-column, and `offsetViz()` can show any
   of them, so each needs its own stacking rule — `m2` is the default one a
   reader actually lands on, and side by side its browser mock and earnings
   panel both collapse to ~150px, which clips the sponsored slot's copy. */
@media(max-width:760px){
  .oppk{grid-template-columns:1fr}
  .oppf{grid-template-columns:1fr;gap:22px}
  .oppf__panel{align-self:auto}
  .oppp{grid-template-columns:1fr;gap:26px;padding:6px 0}
  .oppp__copy{max-width:none;text-align:center}
  .opp{padding:28px 24px}
  .oppm__num{font-size:52px}
}
@media(max-width:560px){
  .opp{padding:22px 18px}
  .oppf__total{font-size:38px}
  .oppp__big{font-size:48px}
}
.offset-badge--save{background:#10b981}
.offset-badge--qualify{position:absolute;top:18px;left:18px;background:var(--pink-500);color:#fff;font-size:9px}
.offset-strike{font-family:var(--font-display);font-weight:800;font-size:22px;color:var(--ink-400);text-decoration:line-through;text-decoration-thickness:2px}
.offset-zero{font-family:var(--font-display);font-weight:900;font-size:46px;color:#047857;line-height:1;letter-spacing:var(--ls-tight)}
.offset-disclosure{font-family:var(--font-caption);font-style:italic;font-size:12px;color:var(--ink-400);text-align:center;max-width:620px;margin:22px auto 0;line-height:1.5}
.offset-cta{display:flex;justify-content:center;margin-top:26px}

/* ======================================================================
   PRICING
   ====================================================================== */
.price-cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}
.price-card{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-xl);padding:36px;box-shadow:var(--sh-2);display:flex;flex-direction:column}
.price-card--plus{background:var(--grad-zipify);border:1px solid rgba(255,255,255,.12);color:#fff;position:relative;overflow:hidden}
.price-card--plus::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(600px 300px at 100% -10%,rgba(45,107,228,.25),transparent 70%),repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 2px,transparent 2px 80px)}
.price-card>*{position:relative;z-index:1}
.price-card__name{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:var(--ls-tight);margin:0 0 8px}
.price-card__logo{height:24px;margin-bottom:18px;width:auto}
.price-card__desc{font-size:14.5px;color:var(--ink-600);line-height:1.55;margin:0 0 22px}
.price-card--plus .price-card__desc{color:rgba(255,255,255,.7)}
.price-feats{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:12px;flex:1}
.price-feats li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-800);line-height:1.45}
.price-feats li svg{width:18px;height:18px;color:#10b981;flex-shrink:0;margin-top:1px}
.price-card--plus .price-feats li{color:rgba(255,255,255,.92)}
.price-card--plus .price-feats li svg{color:var(--zip-yellow)}
.price-trust{text-align:center;font-size:13px;color:var(--ink-400);margin:0 0 40px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
/* pay as you grow */
.payg{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-xl);padding:36px;box-shadow:var(--sh-2)}
.payg__title{font-family:var(--font-display);font-weight:800;font-size:24px;letter-spacing:var(--ls-tight);margin:0 0 8px}
.payg__sub{font-size:14.5px;color:var(--ink-600);max-width:620px;margin:0 0 26px;line-height:1.55}
.payg__table{width:100%;border-collapse:collapse}
.payg__table th{font-family:var(--font-display);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);
  color:var(--ink-400);text-align:left;padding:0 16px 14px;border-bottom:1px solid var(--ink-200)}
.payg__table th:last-child{text-align:right}
.payg__table td{padding:15px 16px;font-size:15px;color:var(--ink-700);border-bottom:1px solid var(--ink-100)}
.payg__table td:last-child{text-align:right;font-family:var(--font-display);font-weight:800;color:var(--ink-900)}
.payg__table tr.is-highlit td{background:var(--yellow-200)}
.payg__table tr.is-highlit td:first-child{border-left:3px solid var(--zip-yellow);font-weight:700;color:var(--ink-900)}
.payg__yourtier{display:inline-block;font-family:var(--font-display);font-weight:800;font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:#856013;background:#fff;border:1px solid var(--zip-yellow);border-radius:var(--r-pill);padding:2px 9px;margin-left:10px;vertical-align:middle}
.payg__callout{margin-top:22px;background:var(--yellow-200);border:1.5px solid var(--zip-yellow);border-radius:var(--r-md);padding:18px 22px;
  font-size:14.5px;color:#7a5a0a;line-height:1.5}
.payg__callout b{color:var(--ink-900);font-weight:800}

/* ======================================================================
   STAT CAROUSEL
   ====================================================================== */
.carousel-wrap{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.carousel{display:flex;gap:20px;width:max-content;padding:8px 0 16px;animation:carousel-scroll 80s linear infinite}
.carousel-wrap:hover .carousel{animation-play-state:paused}
.carousel.is-paused{animation-play-state:paused}
@keyframes carousel-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* The card was a <button>; its centring and 1px/6px inset were the UA's
   button defaults, restated here so the <div> keeps the same look. */
.scard{width:280px;flex-shrink:0;background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);overflow:hidden;
  text-align:center;padding:1px 6px;box-shadow:var(--sh-1);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base)}
.scard:hover{transform:translateY(-5px);box-shadow:var(--sh-3)}
/* The gradient is the ground the placeholder glyph sits on, and stays as the
   backdrop for a photo that has not decoded yet. */
.scard__img{aspect-ratio:4/5;background:linear-gradient(150deg,#eef1f8,#e2e7f2);position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:14px;border-bottom:1px solid var(--ink-200)}
.scard__photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scard__imgicon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-300)}
.scard__imgicon svg{width:48px;height:48px}
/* z-index, not source order: the photo is absolutely positioned over the whole
   box and would otherwise paint on top of the category pill. */
.scard__cat{position:relative;z-index:1;align-self:flex-start;background:rgba(255,255,255,.95);color:var(--ink-800);font-family:var(--font-display);
  font-weight:800;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:var(--r-pill);box-shadow:var(--sh-1)}
.scard__cat.is-plus{background:var(--ink-900);color:var(--zip-yellow)}
.scard__body{padding:18px;display:flex;flex-direction:column;gap:10px}
.scard__brand{font-family:var(--font-display);font-weight:800;font-size:18px;letter-spacing:var(--ls-tight);color:var(--ink-900);line-height:1.1}
.scard__statlabel{font-family:var(--font-display);font-weight:700;font-size:10.5px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-400);margin-bottom:3px}
.scard__statnum{font-family:var(--font-display);font-weight:900;font-size:27px;color:var(--pink-500);letter-spacing:var(--ls-tight);line-height:1}
.scard__statsub{font-size:11.5px;color:var(--ink-500);margin-top:5px;line-height:1.35}
.carousel-dots{display:flex;justify-content:center;gap:7px;margin-top:24px}
.cdot{width:8px;height:8px;border-radius:50%;background:var(--ink-300);transition:all var(--dur-base)}
.cdot.is-active{background:var(--pink-500);width:26px;border-radius:var(--r-pill)}
.carousel-note{margin:24px 0 0;text-align:center;font-size:14px;line-height:1.5;color:var(--ink-500)}

/* ======================================================================
   PLUS BANNER (dark)
   ====================================================================== */
.plusban{background:var(--grad-zipify);border-radius:var(--r-2xl);padding:52px 56px;color:#fff;position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center}
.plusban::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 360px at 8% -10%,rgba(255,215,72,.12),transparent 70%),repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 2px,transparent 2px 80px)}
.plusban>*{position:relative;z-index:1}
.plusban__logo{height:30px;width:auto;margin-bottom:18px}
.plusban__headline{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,3vw,38px);letter-spacing:var(--ls-tight);line-height:1.12;margin:0 0 16px;color:#fff}
.plusban__sub{font-size:16px;color:rgba(255,255,255,.74);line-height:1.6;margin:0 0 26px;max-width:540px}
.plusban__stats{display:flex;gap:36px;margin-bottom:28px;flex-wrap:wrap}
.plusban__stat-n{font-family:var(--font-display);font-weight:900;font-size:32px;color:var(--zip-yellow);letter-spacing:var(--ls-tight);line-height:1}
.plusban__stat-mark{font-size:.45em;font-weight:700;color:rgba(255,255,255,.8);margin-left:3px;vertical-align:super;line-height:0}
.plusban__stat-l{font-size:11.5px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:var(--ls-eyebrow);margin-top:7px;font-family:var(--font-display);font-weight:700}
.plusban__cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.plusban__note{font-size:13px;color:rgba(255,255,255,.55)}
.plusban__photo{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);border-radius:var(--r-xl);
  min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:30px}
.plusban__avatar{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,var(--zip-yellow),#ff8a4a);
  display:flex;align-items:center;justify-content:center;color:var(--ink-900);font-family:var(--font-display);font-weight:900;font-size:30px;border:3px solid rgba(255,215,72,.4)}
.plusban__photo-name{font-family:var(--font-display);font-weight:800;font-size:17px;color:#fff}
.plusban__photo-role{font-size:12.5px;color:rgba(255,255,255,.55)}
.plusban__photo-tag{font-family:var(--font-caption);font-size:11px;color:rgba(255,255,255,.4);font-style:italic;margin-top:4px}

/* ======================================================================
   PLUS STORIES (video)
   ====================================================================== */
/* Plus section on the dark navy surface */
.plusdark{background:var(--grad-zipify);color:#fff;position:relative;overflow:hidden}
.plusdark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(760px 380px at 8% -6%,rgba(255,215,72,.12),transparent 70%),repeating-linear-gradient(135deg,rgba(255,255,255,.012) 0 2px,transparent 2px 80px)}
.plusdark>*{position:relative;z-index:1}
.plusdark .vlead,.plusdark .vsupport{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);box-shadow:none}
.plusdark .vlead:hover,.plusdark .vsupport:hover{background:rgba(255,255,255,.085);box-shadow:0 18px 40px rgba(0,0,0,.34)}
.plusdark .vlead__headline,.plusdark .vsupport__brand{color:#fff}
.plusdark .vlead__desc{color:rgba(255,255,255,.72)}
.plusdark .vsupport__sub{color:rgba(255,255,255,.6)}
.plusdark .vlead__tag{background:rgba(255,255,255,.1);color:var(--zip-yellow)}
.plusdark .vlead__stat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.plusdark .vlead__stat-n,.plusdark .vsupport__stat{color:var(--zip-yellow)}
.plusdark .vlead__stat-l{color:rgba(255,255,255,.55)}
.plusdark .vsupport__watch,.plusdark .vlead__watch{color:var(--zip-yellow)}

.stories-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:stretch}
.plus-note{margin:28px 0 0;font-size:13px;line-height:1.5;color:rgba(255,255,255,.62)}
.vlead{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);display:flex;flex-direction:column;cursor:pointer;transition:transform var(--dur-base),box-shadow var(--dur-base)}
/* Both story cards are `<a>` when their case study resolves. */
a.vlead,a.vsupport{text-decoration:none;color:inherit}
.vlead:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.vthumb{aspect-ratio:16/9;background:linear-gradient(150deg,#2a2f45,#11142a);position:relative;display:flex;align-items:center;justify-content:center}
/* The poster, when the case study has a featured image. The gradient stays
   as the colour under it, so a poster that fails to load is the thumbnail
   the card had before. The scrim keeps `.vthumb__brandtag` readable over a
   light image. */
.vthumb--img{background-size:cover;background-position:center;background-repeat:no-repeat}
.vthumb--img::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,14,32,.5),rgba(10,14,32,0) 46%)}
.vthumb--img .vthumb__brandtag{z-index:1}
.vthumb--lg{aspect-ratio:16/9}
.vplay{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform var(--dur-base) var(--ease-bounce)}
.vplay svg{width:24px;height:24px;color:var(--pink-500);margin-left:3px}
.vlead:hover .vplay,.vsupport:hover .vplay{transform:scale(1.08)}
.vthumb__brandtag{position:absolute;top:14px;left:14px;font-family:var(--font-display);font-weight:800;font-size:11px;color:rgba(255,255,255,.7);letter-spacing:.04em}
.vlead__body{padding:26px 28px}
.vlead__tag{display:inline-block;background:var(--ink-900);color:var(--zip-yellow);font-family:var(--font-display);font-weight:800;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);margin-bottom:14px}
.vlead__headline{font-family:var(--font-display);font-weight:800;font-size:23px;letter-spacing:var(--ls-tight);line-height:1.2;margin:0 0 12px;color:var(--ink-900)}
.vlead__desc{font-size:14.5px;color:var(--ink-600);line-height:1.55;margin:0 0 20px}
.vlead__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
/* The three tiles stretch to the tallest of them, so a one-line figure next to
   a wrapped one sat on the top edge while its neighbours read as centred.
   `text-align` only ever centred the lines within their own box. */
.vlead__stat{background:var(--ink-050);border:1px solid var(--ink-200);border-radius:var(--r-md);padding:14px;text-align:center;
  display:flex;flex-direction:column;justify-content:center}
.vlead__stat-n{font-family:var(--font-display);font-weight:900;font-size:20px;color:var(--pink-500);line-height:1;letter-spacing:var(--ls-tight)}
.vlead__stat-l{font-size:10px;color:var(--ink-400);text-transform:uppercase;letter-spacing:.06em;margin-top:6px;font-family:var(--font-display);font-weight:700}
.vsupports{display:flex;flex-direction:column;gap:24px}
.vsupport{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-1);flex:1;
  display:grid;grid-template-columns:150px 1fr;cursor:pointer;transition:transform var(--dur-base),box-shadow var(--dur-base)}
.vsupport:hover{transform:translateY(-3px);box-shadow:var(--sh-3)}
.vsupport .vthumb{aspect-ratio:auto;height:100%;min-height:140px}
.vsupport .vplay{width:46px;height:46px}.vsupport .vplay svg{width:18px;height:18px}
.vsupport__body{padding:18px 20px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.vsupport__brand{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--ink-900);letter-spacing:var(--ls-tight)}
.vsupport__stat{font-family:var(--font-display);font-weight:900;font-size:24px;color:var(--pink-500);line-height:1;letter-spacing:var(--ls-tight)}
.vsupport__sub{font-size:12px;color:var(--ink-500);line-height:1.4}
.vsupport__watch,.vlead__watch{font-family:var(--font-display);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-700);margin-top:4px}
.vlead__watch{margin-top:18px}

/* ======================================================================
   INTEGRATIONS
   ====================================================================== */
.intgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.inttile{background:#fff;border:1px solid var(--ink-200);border-radius:var(--r-lg);padding:24px 14px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;box-shadow:var(--sh-1);transition:transform var(--dur-base),box-shadow var(--dur-base)}
.inttile:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
/* The box held a single letter before the partners' real marks arrived; it
   still centres one if an icon ever fails to resolve, hence the type rules. */
.inttile__logo{width:44px;height:44px;border-radius:var(--r-md);background:var(--ink-050);border:1px solid var(--ink-200);
  overflow:hidden;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:var(--ink-400);font-family:var(--font-display);font-weight:900;font-size:18px}
.inttile__img{display:block;width:100%;height:100%;object-fit:cover}
.inttile__name{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink-800)}

/* ======================================================================
   RISK
   ====================================================================== */
.risk{max-width:680px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:16px;align-items:center}
.risk__icon{width:64px;height:64px;border-radius:50%;background:#ecfdf5;border:1px solid #a7f3d0;display:flex;align-items:center;justify-content:center;color:#059669;margin-bottom:6px}
.risk__icon svg{width:30px;height:30px}

/* ======================================================================
   FAQ
   ====================================================================== */
.faq-list{max-width:780px;margin:0 auto;border-top:1px solid var(--ink-200)}
.faq-item{border-bottom:1px solid var(--ink-200)}
.faq-q{width:100%;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 4px;text-align:left;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink-900);letter-spacing:-.01em}
.faq-q:hover{color:var(--blue-700)}
.faq-a{overflow:hidden;max-height:0;transition:max-height var(--dur-slow) var(--ease-out)}
.faq-a__inner{padding:0 4px 26px;font-size:15.5px;color:var(--ink-600);line-height:1.65;max-width:680px}
.faq-a__inner a{color:var(--blue-700);font-weight:600}

/* ======================================================================
   FINAL CTA (dark)
   ====================================================================== */
.finalcta{position:relative;overflow:hidden;color:#fff;text-align:center;padding:104px 0;border-radius:0}
.finalcta__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:20px;max-width:680px;margin:0 auto}
.finalcta__headline{font-family:var(--font-display);font-weight:900;font-size:clamp(38px,4.6vw,56px);letter-spacing:var(--ls-tight);line-height:1.05;margin:0;color:#fff}
.finalcta__headline .num-accent-y{display:inline}
.finalcta__sub{font-size:18px;color:rgba(255,255,255,.72);line-height:1.6;margin:0;max-width:520px}
.finalcta__trust{font-size:13.5px;color:rgba(255,255,255,.5);margin-top:8px}
/* The shield had no size rule, and an `<svg>` with neither attributes nor CSS
   renders at the SVG default of 300x150. Same defect as `.ov-pill__ic`. */
.finalcta__guarantee{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:20px;font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--zip-yellow)}
.finalcta__guarantee svg{width:16px;height:16px;flex:0 0 auto}
.finalcta__shopify{margin-top:18px;opacity:.85}
.finalcta__shopify img{height:30px;width:auto}

/* ======================================================================
   FOOTER (dark)
   ====================================================================== */
.footer{background:#0b1020;color:rgba(255,255,255,.7);padding:64px 0 36px}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer__logo{height:26px;width:auto;margin-bottom:16px}
.footer__tag{font-size:14px;color:rgba(255,255,255,.55);line-height:1.65;max-width:320px;margin:0}
.footer__tag b{color:rgba(255,255,255,.85);font-weight:700}
.footer__col h4{font-family:var(--font-display);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:rgba(255,255,255,.4);margin:0 0 16px}
.footer__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:11px}
.footer__col a{font-size:14px;color:rgba(255,255,255,.65);text-decoration:none;transition:color var(--dur-fast)}
.footer__col a:hover{color:#fff}
.footer__bottom{display:flex;align-items:center;justify-content:space-between;padding-top:26px;font-size:13px;color:rgba(255,255,255,.4);gap:20px;flex-wrap:wrap}

/* ======================================================================
   VIDEO MODAL / CASE MODAL
   ====================================================================== */
.modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:32px}
.modal.is-open{display:flex}
.modal__scrim{position:absolute;inset:0;background:rgba(8,12,28,.78);backdrop-filter:blur(6px);animation:fade .2s var(--ease-out)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal__panel{position:relative;z-index:1;background:#fff;border-radius:var(--r-xl);max-width:760px;width:100%;overflow:hidden;
  box-shadow:var(--sh-4);animation:pop .26s var(--ease-bounce)}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
.modal__close{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center}
.modal__close svg{width:20px;height:20px}
.modal__video{aspect-ratio:16/9;background:linear-gradient(150deg,#2a2f45,#11142a);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:rgba(255,255,255,.6)}
.modal__video .vplay{width:70px;height:70px}
.modal__videonote{font-family:var(--font-display);font-weight:700;font-size:13px}
.modal__body{padding:28px 30px}
.modal__brand{font-family:var(--font-display);font-weight:900;font-size:24px;letter-spacing:var(--ls-tight);color:var(--ink-900);margin:0 0 6px}
.modal__stat{font-family:var(--font-display);font-weight:900;font-size:34px;color:var(--pink-500);letter-spacing:var(--ls-tight);line-height:1;margin:0 0 12px}
.modal__story{font-size:15px;color:var(--ink-600);line-height:1.6;margin:0 0 18px}
.modal__link{font-family:var(--font-display);font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-700);text-decoration:none}

/* ======================================================================
   REVEAL ON SCROLL
   ====================================================================== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media(max-width:1000px){
  .hero__grid{grid-template-columns:1fr;gap:48px}
  .hero__cta{flex-direction:column;align-items:stretch;text-align:center}
  .calc-card{grid-template-columns:1fr}
  .calc-inputs{border-right:0;border-bottom:1px solid var(--ink-200)}
  .ai-demo{grid-template-columns:1fr}
  .plusban{grid-template-columns:1fr;padding:40px 36px}
  .stories-grid{grid-template-columns:1fr}
  .vsupport{grid-template-columns:150px 1fr}
}
@media(max-width:820px){
  .section{padding:72px 0}
  .section--whatis{padding-bottom:72px}
  .statsgrid{grid-template-columns:repeat(2,1fr)}
  .price-cards{grid-template-columns:1fr}
  .intgrid{grid-template-columns:repeat(3,1fr)}
  .gauge-toggles{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}
  /* walkthrough → stacked, no rail */
  .walk-body{grid-template-columns:1fr}
  .walk-rail{display:none}
  .walk-step{grid-template-columns:1fr;opacity:1;transform:none}
  .walk-mobile-ind{display:block;font-family:var(--font-display);font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:var(--ls-eyebrow);color:var(--ink-400);margin-bottom:10px}
}
@media(max-width:560px){
  .container{padding:0 20px}
  /* The band's own separator and its 48/48 of air are drawn for the card grid.
     The ruled list below already opens on a rule, so keeping both leaves a blank
     strip with two lines through it. Keep the 40px the stacked section uses
     between its own parts and let the first row's border be the separator. */
  .whatocu__stats{margin-top:40px;padding-top:0;border-top:0}
  /* ruled list: eight stacked cards were ~1100px of mostly whitespace */
  .statsgrid{display:block}
  .statblock{display:grid;grid-template-columns:20px 1fr;column-gap:14px;row-gap:2px;align-items:center;
    padding:13px 0;min-height:0;background:transparent;border:0;border-bottom:1px solid var(--ink-200);border-radius:0;box-shadow:none}
  .statblock:first-child{border-top:1px solid var(--ink-200)}
  .statblock:hover{transform:none;box-shadow:none}
  .statblock__icon{position:static;grid-row:1/3;width:20px;height:20px}
  .statblock__num{grid-column:2;font-size:17px}
  .statblock__num.stars{font-size:13px;letter-spacing:.02em}
  .statblock__label{grid-column:2;font-size:12px;max-width:none}
  .intgrid{grid-template-columns:repeat(2,1fr)}
  /* settings-style rows; the switch alone carries the on/off state */
  .gauge-toggles{grid-template-columns:1fr;gap:6px}
  .gtoggle{padding:12px 14px;min-height:0}
  .gtoggle__state{display:none}
  .offset-card{grid-template-columns:1fr}
  .offset-arrow{height:48px}
  .calc-grid{grid-template-columns:1fr}
  .trust__label{display:none}
  .calc-roi{flex-direction:column;align-items:flex-start;gap:10px}
  .footer__top{grid-template-columns:1fr}
  .nav__actions .btn{padding:10px 14px;font-size:12px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .cycle-word.is-active{opacity:1;transform:none}
  .reveal{opacity:1;transform:none}
  .walk-step{opacity:1;transform:none}
}

/* ==========================================================================
   FAQ — <details> instead of the artboard's scripted accordion
   `14-faq.php` renders the rows server-side as <details>/<summary>, so the
   open/close state that `buildFAQ()` used to drive through inline max-height
   is now the element's own. These rules are the handler's job, restated
   declaratively: neutralise the default marker, let an open row size to its
   content, and flip the plus into a minus.
   ========================================================================== */
.faq-q { list-style:none; }
.faq-q::-webkit-details-marker { display:none; }
.faq-q::marker { content:""; }
.faq-item[open] > .faq-a { max-height:none; }
.faq-q:focus-visible { outline:none; box-shadow:var(--focus-ring); border-radius:var(--r-sm); }


/* ==========================================================================
   REDUCED MOTION
   `app.js` already honours the media query for everything it drives with
   JavaScript. The two animations declared purely in CSS — the trust rail and
   the hero caret — have no script behind them, so they are stopped here.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-marquee-track] { animation:none !important; }
  .cycle-caret { animation:none !important; }
  .reveal { opacity:1 !important; transform:none !important; }
}