/* ============ landing-v2.css — shared landing, token-themed ============ */

/* ---- Fonts ----
   Display serif = Fraunces (Google Fonts, OFL). The local Agatho/Soul-of-Vodka OTFs
   are personal-use demos — Agatho substitutes a "PERSONAL USE ONLY" notice glyph for
   missing punctuation (em dash etc.); never ship them on a public page. */
@font-face { font-family: 'Creato Display'; src: url('/static/fonts/CreatoDisplay-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Creato Display'; src: url('/static/fonts/CreatoDisplay-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Creato Display'; src: url('/static/fonts/CreatoDisplay-Bold.otf') format('opentype'); font-weight: 700; font-display: swap; }

/* ---- Brand tokens ---- */
body[data-brand="bq"] {
  --deep: #0a2a1a; --deep2: #071f13; --pale: #e3f1e8; --pale2: #d5e9dd;
  --ink-deep: #eaf6ef; --ink-pale: #143524; --brand: #3a8a5c;
  --accent-deep: #6fc492; --cta-pale: #2e7a4f; --sand: #cfc0a0;
  --spark: #3a8a5c; --spark-deep: #6fc492;
}
body[data-brand="closio"] {
  --deep: #0c2236; --deep2: #081a2b; --pale: #e8f1f8; --pale2: #d9e8f4;
  --ink-deep: #eaf3fb; --ink-pale: #16314a; --brand: #5b9bd5;
  --accent-deep: #8ec3ee; --cta-pale: #3f7fb8; --sand: #c9c3b4;
  --spark: #5b9bd5; --spark-deep: #8ec3ee;
}
body[data-brand="tpi"] {
  --deep: #101d3f; --deep2: #0a1530; --pale: #e9eefb; --pale2: #dbe4f7;
  --ink-deep: #ecf0fc; --ink-pale: #16234a; --brand: #1e40af;
  --accent-deep: #8da6f2; --cta-pale: #1e40af; --sand: #c9c0ab;
  --spark: #dc2626; --spark-deep: #f26b6b;
}

/* ---- Motion tokens (the lavadental contract) ---- */
:root {
  --ease: cubic-bezier(0.33, 0, 0.11, 1);
  --dur: 0.8s; --dur-fast: 0.5s;
  --stagger: 0.3s; --stagger-sm: 0.12s;
  --nav-h: 84px;
}

/* ---- Base ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  font-family: 'Creato Display', 'Inter', -apple-system, sans-serif;
  background: var(--deep); color: var(--ink-deep);
  font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.mono { font-family: 'JetBrains Mono', monospace; }
.hand { font-family: 'Caveat', cursive; }
.display { font-family: 'Fraunces', 'Creato Display', serif; font-optical-sizing: auto;
  font-weight: 480; line-height: 1.08; letter-spacing: -0.005em; }
.container { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.container-wide { width: min(1360px, calc(100% - 32px)); margin-inline: auto; }
.label { font-size: 12px; letter-spacing: 2.2px; text-transform: uppercase; opacity: 0.65; font-weight: 500; }

/* ---- Acts: surfaces + the wipe-over mechanic ---- */
.act { position: relative; }
.act--deep  { background: var(--deep);  color: var(--ink-deep); }
.act--deep2 { background: var(--deep2); color: var(--ink-deep); }
.act--pale  { background: var(--pale);  color: var(--ink-pale); }
.act--pale2 { background: var(--pale2); color: var(--ink-pale); }
/* pinned section: stays while the next slides over it */
.act--pin { position: sticky; top: 0; min-height: 100vh; }
/* the slide-over card edge (lava overlay-section feel) */
.act--over { position: relative; z-index: 2; border-radius: 28px 28px 0 0;
             box-shadow: 0 -28px 56px rgba(0,0,0,0.22); }

/* ---- Buttons ---- */
.btn--pill {
  display: inline-block; padding: 14px 30px; border-radius: 999px;
  background: var(--pale); color: var(--ink-pale); font-weight: 500; font-size: 15px;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn--pill:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.25); }
.act--pale .btn--pill, .act--pale2 .btn--pill { background: var(--cta-pale); color: var(--pale); }
.btn--lg { padding: 17px 38px; font-size: 16px; }
.btn--ghost { display: inline-block; padding: 14px 8px; opacity: 0.8; font-size: 15px;
  border-bottom: 1px solid currentColor; transition: opacity var(--dur-fast) var(--ease); }
.btn--ghost:hover { opacity: 1; }

/* ---- Reveal primitives (enter-once; JS adds .is-in) ---- */
html.js [data-reveal] { opacity: 0; transform: translateY(28px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), clip-path var(--dur) var(--ease);
  transition-delay: calc(var(--ri, 0) * var(--stagger-sm)); }
html.js [data-reveal="card"] { transition-delay: calc(var(--ri, 0) * var(--stagger)); }
/* "pop" waiting state must NOT use a collapsed clip-path: Chrome's IO applies the
   target's own clip → zero visible area → observer never fires. Clip lives in the
   keyframe instead, played only after .is-in arrives. */
html.js [data-reveal="pop"] { transform: scale(0.92); }
html.js [data-reveal].is-in { opacity: 1; transform: none; }
html.js [data-reveal="pop"].is-in { animation: summary-pop var(--dur) var(--ease) both; }
@keyframes summary-pop {
  from { clip-path: inset(50% 50% round 24px); opacity: 0; transform: scale(0.92); }
  to   { clip-path: inset(0 0 round 0); opacity: 1; transform: none; }
}

/* ---- Scrub-driven image pop (lava: band-unclip + scale 0.725→1) ----
   NOTE: never declare --p on .img-pop itself — it must inherit from the data-scrub ancestor. */
.img-pop {
  clip-path: inset(calc(10% * (1 - var(--p, 0))) calc(4% * (1 - var(--p, 0))) round calc(28px * (1 - var(--p, 0)) + 4px));
  transform: scale(calc(0.725 + 0.275 * var(--p, 0)));
  will-change: transform, clip-path; }

/* ---- Reduced motion + no-JS: everything visible, nothing moves ---- */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .img-pop { clip-path: none !important; transform: none !important; }
  .marquee__track { animation: none !important; }
  .prt .prt__paper, .prt .prt__chassis, .prt .prt__insheet, .prt .prt__stamp,
  .prt .prt__spark, .prt .prt__spark *,
  .prt .prt__led--ok, .prt .prt__led--bad, .prt .prt__lcd--bad { animation: none !important; }
  .prt__paper { transform: none !important; }
  .prt__stamp { opacity: 1 !important; }
  .vig__card--win, .vig__stamp, .vig__ink, .vig__splat {
    animation: none !important; } /* card stays */
  .vig__stamp { opacity: 0.92 !important; transform: none !important; }
  .vig__ink, .vig__card--win .vig__splat { opacity: 0.3 !important; transform: none !important; }
  .vig__ink *, .vig__splat * { animation: none !important; transform: none !important;
    fill-opacity: 1 !important; }
  .faq__a, .faq__a > p, .faq__q span { transition: none !important; }
  .vig__wave i, .vig__calldot, .vig__steps i.cur, .vig__scan, .vig__sendbtn {
    animation: none !important; }
  .mvb { transform: none !important; opacity: 0.4 !important; } /* static aurora wash */
  .orb { animation: none !important; } /* rests spread out at each item's --od */
}

/* Safari and Firefox render the same choreography as Chromium. These hints keep
   the expensive layers isolated without removing or freezing visible motion. */
html.is-nonchromium .hero__visual,
html.is-nonchromium .hero__orbit,
html.is-nonchromium .vig--compare,
html.is-nonchromium .move__media,
html.is-nonchromium .wheel__stage,
html.is-nonchromium .uwx__stage,
html.is-nonchromium .prt__rig,
html.is-nonchromium .marquee {
  transform: translateZ(0);
  backface-visibility: hidden;
}
html.is-nonchromium .hero__orbit {
  contain: layout paint;
}
html.is-nonchromium .vig__ink,
html.is-nonchromium .vig__splat,
html.is-nonchromium .prt__spark,
html.is-nonchromium .wheel__px,
html.is-nonchromium .uwx__canvas {
  contain: paint;
}
html.is-nonchromium .img-pop,
html.is-nonchromium .knockout__panel {
  will-change: transform, clip-path;
}
html.is-nonchromium .nav--solid {
  background: color-mix(in srgb, var(--deep) 94%, #000);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
html.is-nonchromium .orb {
  animation: none;
  offset-path: none;
  will-change: transform, opacity;
}
html.is-nonchromium .orb img {
  filter: none;
  opacity: 0.9;
}
html.is-nonchromium .marquee__logo {
  filter: none;
  opacity: 0.62;
}

/* ============ NAV ============ */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--nav-h);
  transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 24px; }
.nav--solid { background: color-mix(in srgb, var(--deep) 86%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.08); }
.nav__logo img { height: 34px; width: auto; }
.nav__links { position: relative; display: flex; gap: 36px; font-size: 15px; }
.nav__links a { opacity: 0.75; padding: 6px 2px; transition: opacity var(--dur-fast) var(--ease); color: var(--ink-deep); }
.nav__links a:hover, .nav__links a.is-active { opacity: 1; }
.nav__underline { position: absolute; bottom: -4px; left: 0; height: 2px; width: 0; opacity: 0;
  background: var(--accent-deep); transition: transform var(--dur-fast) var(--ease), width var(--dur-fast) var(--ease); }
.nav__cta { display: flex; align-items: center; gap: 22px; }
.nav__login { font-size: 15px; opacity: 0.85; color: var(--ink-deep); }
.nav__login:hover { opacity: 1; }
.nav__burger { display: none; }

/* mobile overlay menu */
.nav-overlay { position: fixed; inset: 0; z-index: 49; background: var(--deep2); color: var(--ink-deep);
  display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 0 10vw;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease); }
.nav-overlay a { font-family: 'Fraunces', serif; font-size: clamp(34px, 9vw, 56px); padding: 6px 0;
  opacity: 0; transform: translateY(22px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
html.menu-open { overflow: hidden; }
html.menu-open .nav-overlay { opacity: 1; pointer-events: auto; }
html.menu-open .nav-overlay a { opacity: 1; transform: none; transition-delay: calc(var(--ri, 0) * 0.06s + 0.1s); }

/* ============ ACT 1 · HERO ============ */
.hero { overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 100vh;
  align-items: center; gap: 32px; padding-top: var(--nav-h); }
.hero__copy { position: relative; z-index: 4; }
.hero__h1 { font-size: clamp(44px, 6.2vw, 92px); }
.hero__line { display: block; }
.hero__line--accent { color: var(--accent-deep); }
.hero__sub { max-width: 46ch; margin-top: 26px; opacity: 0.85; font-size: 18px; }
.hero__cta { display: flex; align-items: center; gap: 26px; margin-top: 34px; }
.hero__stats { display: flex; gap: 44px; margin-top: 7vh; }
.hero__stats label { display: block; font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; opacity: 0.55; margin-top: 2px; }
.hero__num { font-size: 28px; color: var(--accent-deep); }

.hero__visual { position: relative; height: min(78vh, 720px); }
.hero__visual::before { content: ''; position: absolute; inset: -10% -20%;
  background: radial-gradient(60% 50% at 60% 40%, color-mix(in srgb, var(--brand) 28%, transparent), transparent 70%); }

/* canonical vignette: quote comparison — white cards mirroring the portal's
   carrier-card anatomy (logo / name / product / class tag / stat / verdict) */
.vig--compare { position: absolute; inset: 8% 0 auto 6%; display: flex; gap: 18px; align-items: stretch; z-index: 2; }
.vig__card { position: relative; background: #fff; border: 1px solid #e5e7eb;
  border-radius: 14px; padding: 22px 20px 20px; width: 224px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  color: #111827;
  box-shadow: 0 24px 48px rgba(0,0,0,0.35); }
.vig__logo { height: 48px; width: auto; max-width: 100%; object-fit: contain;
  object-position: left center; margin-bottom: 14px; }
.vig__card strong { font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.vig__prod { font-size: 13px; font-weight: 600; color: var(--cta-pale); }
.vig__tag { margin-top: 9px; font-size: 10px; font-weight: 600; letter-spacing: 0.7px;
  text-transform: uppercase; color: #6b7280; border: 1px solid #e5e7eb;
  border-radius: 6px; padding: 3px 7px; }
.vig__stat { margin-top: 14px; }
.vig__stat small { display: block; font-size: 9.5px; letter-spacing: 1.2px;
  text-transform: uppercase; color: #9ca3af; font-weight: 500; margin-bottom: 2px; }
.vig__stat em { font-style: normal; font-size: 28px; font-weight: 700; color: #111827;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; }
.vig__verdict { margin-top: 13px; font-size: 12px; font-weight: 600; color: #047857;
  background: rgba(5, 150, 105, 0.10);
  border-radius: 8px; padding: 5px 9px; align-self: flex-start; }
.vig__vs { align-self: center; font-size: 13px; opacity: 0.55; }
.is-in ~ .hero__chips { } /* no-op guard */

/* ---- winner-card story: wax seal slams → ink splashes onto the bg → the
   stamped card stays put. Plays once, gated on .is-in. ---- */
.vig__defs { position: absolute; width: 0; height: 0; }
.vig__stamp { position: absolute; left: 50%; top: 37%; translate: -50% -50%; rotate: -12deg;
  width: 118px; height: 116px; opacity: 0; pointer-events: none; }
.vig__seal { display: block; width: 100%; height: 100%; }
/* one splash, two physical layers: droplets that hit the winner card live INSIDE the
   card markup (.vig__splat) so they fold and launch WITH it — its footprint stays clean;
   droplets that missed it live here, ABOVE both cards and the bg (z 1), and persist.
   Canvas is 720x560 centered on the seal (card x-center 112px, 37% of card height). */
.vig__ink { position: absolute; left: -248px; top: calc(37% - 280px); width: 720px; height: 560px;
  opacity: 0; transform-origin: 50% 50%; pointer-events: none; z-index: 1; }
.vig__splat { position: absolute; inset: 0; opacity: 0; transform-origin: 50% 37%;
  pointer-events: none; }
.vig--compare.is-in .vig__card--win { animation: vigcard 14s ease 1 forwards; }
.vig--compare.is-in .vig__card--win .vig__stamp { animation: vigstamp 14s ease 1 forwards; }
.vig--compare.is-in .vig__card--win .vig__splat { animation: vigsplat 14s ease 1 forwards; }
.vig--compare.is-in .vig__ink { animation: vigink 14s linear 1 forwards; }
.vig--compare.is-in .vig__ink .ink__d,
.vig--compare.is-in .vig__card--win .vig__splat .ink__d {
  animation: inkdrop 14s cubic-bezier(0.2, 0.7, 0.3, 1) var(--dd, 0s) 1 both; }
.vig--compare.is-in .vig__ink .ink__drip,
.vig--compare.is-in .vig__card--win .vig__splat .ink__drip {
  animation: inkdrip 14s ease-in var(--dd, 0s) 1 both; }
@keyframes vigcard { /* thud at the seal slam; the card stays */
  0%, 7.4% { transform: none; }
  8.2% { transform: translateY(3px) scale(0.985); }
  9.6%, 100% { transform: none; }
}
@keyframes vigstamp { /* abrupt wax slam, brief settle */
  0%, 7.2% { opacity: 0; transform: scale(2.6); animation-timing-function: cubic-bezier(0.6, 0, 0.9, 0.6); }
  8% { opacity: 1; transform: scale(1.05); }
  8.8% { transform: scale(0.965); }
  9.8%, 100% { opacity: 1; transform: scale(1); }
}
/* ink splash physics — every droplet pops individually: --dd (per-droplet
   delay, computed from flight distance + jitter) staggers arrivals, --dy adds
   a gravity sag to the far spatter. All scale out FROM the impact point.
   fill-opacity is animated so each droplet keeps its authored opacity. */
.vig__ink .ink__d { transform-box: view-box; transform-origin: 358px 280px; }
.vig__splat .ink__d { transform-box: view-box; transform-origin: 112px 105px; }
.vig__ink .ink__drip, .vig__splat .ink__drip { transform-box: fill-box; transform-origin: top center; }
@keyframes inkdrop {
  0%, 7.5% { fill-opacity: 0; transform: scale(0.4) translateY(calc(var(--dy, 0px) * -0.6)); }
  8.05% { fill-opacity: 1; transform: scale(1.09) translateY(calc(var(--dy, 0px) * 0.4)); }
  8.85%, 100% { fill-opacity: 1; transform: scale(1) translateY(var(--dy, 0px)); }
}
@keyframes inkdrip {
  0%, 9.6% { transform: scaleY(0.12); fill-opacity: 0; }
  10.3% { fill-opacity: 1; transform: scaleY(0.35); }
  12.8%, 100% { transform: scaleY(1); fill-opacity: 1; }
}
@keyframes vigink { /* visibility window — droplets arrive individually via
  inkdrop; the background splash persists after the card leaves */
  0%, 7.49% { opacity: 0; }
  7.5%, 100% { opacity: 1; }
}
@keyframes vigsplat { /* visibility window only — the droplets inside arrive
  individually via inkdrop; the splash stays with the card */
  0%, 7.49% { opacity: 0; }
  7.5%, 100% { opacity: 1; }
}

/* orbiting quoter ring — a uniform circle centered EXACTLY on the compare-card
   pair. Center is calc-pinned to the card geometry (cards: inset 8% 0 auto 6%,
   union ~500px wide / ~298px tall) so it stays centered at any viewport width;
   only a small top arc clips at the viewport edge. */
.hero__orbit { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.orb { position: absolute; left: 0; top: 0;
  offset-path: circle(370px at calc(6% + 250px) calc(8% + 149px)); offset-rotate: 0deg;
  offset-distance: var(--od, 0%);
  animation: orbspin 56s linear infinite reverse; /* travel: in at top-left → down the left → under the cards → out the right edge */
  animation-delay: calc(var(--i) * (56s / -14));
  will-change: offset-distance, transform, opacity; }
.orb img { height: 32px; width: auto; max-width: 132px; object-fit: contain;
  filter: brightness(1.25) saturate(1.3); }
.orb--tok { font-family: 'JetBrains Mono', monospace; font-size: 13.5px;
  color: rgba(255,255,255,0.85); white-space: nowrap; }
.orb--accent { color: var(--accent-deep); }
/* phases keyed to ellipse position: 25% = the visible bottom of the arc (nearest,
   biggest); 75% = the cut-off top (off-screen anyway) */
@keyframes orbspin {
  0%   { offset-distance: 0%;   transform: scale(0.96); opacity: 0.75; }
  25%  { offset-distance: 25%;  transform: scale(1.1);  opacity: 1; }
  50%  { offset-distance: 50%;  transform: scale(0.9);  opacity: 0.65; }
  75%  { offset-distance: 75%;  transform: scale(0.78); opacity: 0.4; }
  100% { offset-distance: 100%; transform: scale(0.96); opacity: 0.75; }
}
@supports not (offset-path: circle(10px at 50% 50%)) { .hero__orbit { display: none; } }

/* ============ ACT 2 · MANIFESTO KNOCKOUT ============ */
.knockout { min-height: 220vh; }
.knockout__stage { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden; }
.knockout__layer { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 6vw; text-align: center; }
.knockout__title { font-size: clamp(38px, 6vw, 92px); max-width: 16ch; }
.knockout__title--bg { color: var(--ink-deep); }
.knockout__panel { --pp: var(--p, 0); position: absolute; left: 50%; top: 50%;
  width: min(760px, 72vw); aspect-ratio: 16 / 10;
  translate: -50% -50%;
  background: var(--deep2); border-radius: 24px; overflow: hidden;
  clip-path: inset(calc(50% * (1 - var(--pp))) calc(50% * (1 - var(--pp))) round 24px);
  will-change: clip-path; }
.knockout__panel .knockout__layer--bg { position: absolute; inset: 50% auto auto 50%;
  width: 100vw; height: 100vh; transform: translate(-50%, -50%); }
/* quote-build vignette rows: type in with scroll */
.vig--build { position: absolute; left: 7%; bottom: 9%; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.vig--build .vig__row { font-size: clamp(12px, 1.5vw, 16px); color: var(--ink-deep);
  opacity: min(1, max(0, calc(var(--pp, 0) * 6 - var(--ri) - 1.4)));
  transform: translateY(calc((1 - min(1, max(0, calc(var(--pp, 0) * 6 - var(--ri) - 1.4)))) * 10px)); }
.vig--build .vig__row b { color: var(--accent-deep); }
.vig--build .vig__row--win { color: var(--accent-deep); font-size: clamp(14px, 1.8vw, 19px); }

/* ============ ACT 3 · THREE MOVES ============ */
.moves { position: relative; background: linear-gradient(var(--pale2) 82%, var(--deep) 100%); }
/* scroll-reactive aurora: a sticky viewport panel whose blobs drift, hand off
   (brand hue -> accent -> spark) and sink toward --deep as --p (data-scrub="span"
   progress through the act) runs 0->1. All colors come from brand tokens, so each
   site gets its own story: bq greens, closio blues, tpi navy + red spark. */
.moves__bg { position: sticky; top: 0; height: 100vh; margin-bottom: -100vh; display: block;
  overflow: hidden; pointer-events: none; }
.moves__head, .moves__list { position: relative; z-index: 1; }
.mvb { position: absolute; width: 64vmax; height: 64vmax; border-radius: 50%;
  will-change: transform, opacity; }
.mvb--a { left: -24vmax; top: -20vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 36%, transparent) 0%, transparent 62%);
  transform: translate(calc(var(--p, 0) * 26vw), calc(var(--p, 0) * 28vh)) scale(calc(1 + var(--p, 0) * 0.35));
  opacity: calc(0.9 - var(--p, 0) * 0.55); }
.mvb--b { right: -28vmax; top: 2vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-deep) 40%, transparent) 0%, transparent 62%);
  transform: translate(calc(var(--p, 0) * -22vw), calc(var(--p, 0) * 10vh)) rotate(calc(var(--p, 0) * 40deg));
  opacity: clamp(0.15, calc((1 - abs(var(--p, 0) - 0.5) * 2) * 0.85), 0.85); }
.mvb--c { left: 26vw; bottom: -46vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--spark) 34%, transparent) 0%, transparent 60%);
  transform: translateY(calc(var(--p, 0) * -36vh)) scale(calc(0.8 + var(--p, 0) * 0.5));
  opacity: clamp(0, calc((var(--p, 0) - 0.35) * 1.7), 0.85); }
.moves__bggrid { position: absolute; inset: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--ink-pale) 36%, transparent) 1.2px, transparent 1.6px);
  background-size: 30px 30px;
  background-position: 0 calc(var(--p, 0) * -140px);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 42%, #000 28%, transparent 76%);
  mask-image: radial-gradient(120% 90% at 50% 42%, #000 28%, transparent 76%);
  opacity: 0.5; }
.moves__bgveil { position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 26%, color-mix(in srgb, var(--deep) 88%, transparent));
  opacity: var(--p, 0); }
.moves__head { padding: 14vh 0 6vh; text-align: center; }
.moves__head h2 { font-size: clamp(32px, 4.4vw, 64px); max-width: 24ch; margin-inline: auto; margin-top: 14px; }
/* per-move stage accent (number + summary chips), echoing the bg handoff */
.move--1 { --mv: var(--cta-pale); }
.move--2 { --mv: var(--brand); }
.move--3 { --mv: var(--spark); }
.move { display: grid; align-items: center; padding: 7vh 0; }
.move__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.move:nth-child(even) .move__inner { direction: rtl; }
.move:nth-child(even) .move__inner > * { direction: ltr; }
.move__media { background: var(--deep2); color: var(--ink-deep); border-radius: 28px;
  min-height: 56vh; display: grid; place-items: center; padding: 40px;
  box-shadow: 0 32px 64px rgba(0,0,0,0.18); }
.move__summary { position: relative; background: var(--pale); border-radius: 20px; padding: 36px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.10); }
.move__n { display: block; font-size: 15px; letter-spacing: 2px; color: var(--mv, var(--cta-pale)); margin-bottom: 10px; }
.move__summary h3 { font-size: 44px; margin-bottom: 10px; }
.move__summary p { opacity: 0.8; }

/* vignette internals (rows fade in with the move's enter progress; every direct
   child carries an --ri stagger index) */
.vig--ask, .vig--rates, .vig--email { width: min(560px, 100%); display: flex; flex-direction: column; gap: 0; }
.move .vig--ask > *, .move .vig--rates > *, .move .vig--email > * {
  opacity: calc(var(--vo, 1) * min(1, max(0, var(--p, 0) * 9 - var(--ri, 0) - 1))); }
.vig__field, .vig__rate { display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
  padding: 15px 4px; border-bottom: 1px solid rgba(255,255,255,0.09); }
.vig__field label { opacity: 0.55; font-size: 14px; }
.vig__field b { font-weight: 500; }
/* move 1 — live intake: call bar, wizard stepper, answer chips, hand note */
.vig__callbar { display: flex; align-items: center; gap: 10px; padding: 10px 15px; margin-bottom: 4px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09);
  border-radius: 999px; font-size: 13px; }
.vig__calldot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; flex-shrink: 0;
  animation: vigcallpulse 2.2s ease infinite; }
.vig__callwho { opacity: 0.85; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vig__callbar em { font-style: normal; opacity: 0.55; font-size: 12px; }
.vig__wave { display: flex; gap: 2.5px; align-items: flex-end; height: 15px; flex-shrink: 0; }
.vig__wave i { width: 2.5px; background: var(--accent-deep); border-radius: 2px; height: 30%;
  animation: vigwave 1.1s ease-in-out infinite; }
.vig__wave i:nth-child(2) { animation-delay: 0.14s; } .vig__wave i:nth-child(3) { animation-delay: 0.32s; }
.vig__wave i:nth-child(4) { animation-delay: 0.51s; } .vig__wave i:nth-child(5) { animation-delay: 0.65s; }
.vig__steps { display: flex; gap: 7px; align-items: center; padding: 14px 4px 6px; }
.vig__steps i { width: 24px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.14); }
.vig__steps i.done { background: var(--accent-deep); }
.vig__steps i.cur { background: var(--accent-deep); animation: vigstepcur 1.6s ease infinite; }
.vig__steps .mono { margin-left: auto; font-size: 11px; opacity: 0.55; }
.vig__field--active { align-items: center; padding-block: 12px;
  border-bottom-color: color-mix(in srgb, var(--accent-deep) 45%, transparent); }
.vig__chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vig__chips i { font-style: normal; font-size: 12px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16); opacity: 0.55; }
.vig__chips i.sel { background: color-mix(in srgb, var(--accent-deep) 22%, transparent);
  border-color: var(--accent-deep); color: var(--accent-deep); opacity: 1; font-weight: 600; }
.vig__handnote { font-family: 'Caveat', cursive; font-size: 20px; color: var(--accent-deep);
  align-self: flex-end; margin-top: 14px; rotate: -2deg; }
/* move 2 — engine ranking: scan beam, logo rows, wax-seal badge on the winner */
.vig--rates { position: relative; }
.vig__scan { position: absolute; left: -10px; right: -10px; top: 0; height: 46px; border-radius: 12px;
  background: linear-gradient(to bottom, transparent,
    color-mix(in srgb, var(--accent-deep) 10%, transparent), transparent);
  animation: vigscan 3.4s cubic-bezier(0.45, 0, 0.45, 1) infinite; }
.vig__scanhead { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 4px 12px; }
.vig__scanhead span { font-size: 12px; color: var(--accent-deep); letter-spacing: 0.6px; }
.vig__scanhead em { font-style: normal; font-size: 12.5px; opacity: 0.55; }
.vig__rate { align-items: center; gap: 14px; }
.vig__rate img { height: 26px; width: 92px; object-fit: contain; object-position: left center; flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.65)) drop-shadow(0 0 10px rgba(255,255,255,0.35)); }
.vig__rateprod { flex: 1; font-size: 13.5px; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vig__rateprice { font-size: 19px; color: var(--accent-deep); }
.vig__rate i { font-style: normal; font-size: 12px; flex-basis: 104px; text-align: right; flex-shrink: 0; }
.vig__rate i.ok { color: var(--accent-deep); }
.vig__rate i.warn { color: var(--sand); }
.vig__rate--win { background: color-mix(in srgb, var(--accent-deep) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-deep) 38%, transparent);
  border-radius: 12px; padding: 13px 12px; margin-inline: -12px; }
.vig__ratebadge { width: 27px; height: 27px; rotate: -10deg; flex-shrink: 0; }
.vig__ratefoot { padding-top: 13px; font-size: 11.5px; --vo: 0.55; text-align: center; border: 0; }
/* move 3 — the send: delivered chip, quote card w/ logo, attachment, send button */
.vig--email { gap: 10px; }
.vig__mailbar { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; }
.vig__mailbar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.22); }
.vig__delivchip { margin-left: auto; font-style: normal; font-size: 11px; color: var(--accent-deep);
  border: 1px solid color-mix(in srgb, var(--accent-deep) 45%, transparent);
  background: color-mix(in srgb, var(--accent-deep) 12%, transparent);
  border-radius: 999px; padding: 3px 10px; }
.vig__mailline { font-size: 14px; --vo: 0.75; border-bottom: 1px solid rgba(255,255,255,0.09); padding-bottom: 8px; }
.vig__mailquote { display: flex; align-items: center; gap: 14px; margin: 6px 0;
  background: color-mix(in srgb, var(--accent-deep) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-deep) 38%, transparent);
  border-radius: 12px; padding: 13px 15px; }
.vig__mailquote img { height: 26px; width: 92px; object-fit: contain; object-position: left center; flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(255,255,255,0.65)) drop-shadow(0 0 10px rgba(255,255,255,0.35)); }
.vig__mailquote div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vig__mailquote b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vig__mailquote span { font-size: 12.5px; opacity: 0.65; }
.vig__mailquote em { font-style: normal; color: var(--accent-deep); font-size: 17px; }
.vig__mailattach { font-size: 12px; --vo: 0.85; padding: 10px 13px;
  border: 1px dashed rgba(255,255,255,0.25); border-radius: 10px; }
.vig__mailattach span { opacity: 0.55; }
.vig__mailfoot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 4px; }
.vig__mailsig { font-size: 13px; opacity: 0.6; }
.vig__sendbtn { background: var(--accent-deep); color: var(--deep2); font-weight: 700; font-size: 14px;
  border-radius: 999px; padding: 9px 19px; flex-shrink: 0; animation: vigsendpulse 2.6s ease infinite; }
/* summary chips fill the dead space under each move's copy */
.move__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.move__chips span { font-size: 11.5px; letter-spacing: 0.4px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--mv, var(--cta-pale)) 45%, transparent);
  color: var(--mv, var(--cta-pale));
  background: color-mix(in srgb, var(--mv, var(--cta-pale)) 8%, transparent); }
@keyframes vigwave { 0%, 100% { height: 25%; } 50% { height: 95%; } }
@keyframes vigcallpulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
  70%, 100% { box-shadow: 0 0 0 9px transparent; }
}
@keyframes vigstepcur { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes vigscan {
  0% { top: 4%; opacity: 0; }
  12% { opacity: 1; }
  62% { top: 84%; opacity: 1; }
  74%, 100% { top: 84%; opacity: 0; }
}
@keyframes vigsendpulse {
  0%, 100% { transform: none; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-deep) 40%, transparent); }
  40% { box-shadow: 0 0 0 10px transparent; }
  50% { transform: scale(1.045); }
}

/* ============ LEGAL MODALS (shared partial brand/shared/legal_modals.html) ============ */
.tos-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,0.55);
  display: none; align-items: center; justify-content: center; padding: 4vh 4vw; }
.tos-overlay.active { display: flex; }
.tos-modal { position: relative; background: #fff; color: #1c2a22; max-width: 760px; max-height: 84vh;
  overflow-y: auto; border-radius: 18px; padding: 44px 46px; line-height: 1.6; font-size: 15px; }
.tos-modal h2 { font-size: 26px; margin-bottom: 12px; }
.tos-modal h3 { font-size: 17px; margin: 22px 0 8px; }
.tos-modal ul { padding-left: 22px; }
.modal-close-btn { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px;
  border: 0; border-radius: 50%; background: #eef2ef; cursor: pointer; font-size: 15px; }
.modal-close-btn .fa-times::before { content: '✕'; font-style: normal; }

/* ============ ACT 4 · VALUE WHEEL ============ */
.wheel { min-height: 320vh; }
.wheel__stage { position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 16vh; gap: 24px; }
.wheel__title { font-size: clamp(34px, 4.6vw, 66px); position: relative; z-index: 1; }
/* scrub-driven pixel field (canvas injected by landing-v2.js): tiny buffer
   upscaled with crisp edges = real chunky pixels; arc/stops paint above it */
.wheel__px { position: absolute; inset: 0; width: 100%; height: 100%;
  image-rendering: pixelated; pointer-events: none; opacity: 0.9; }
/* giant arc rising from the bottom, rotated by scrub progress */
.wheel__arc { position: absolute; left: 50%; bottom: -128vmin; width: 160vmin; height: 160vmin;
  margin-left: -80vmin; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink-deep) 22%, transparent);
  transform: rotate(calc(var(--p, 0) * -90deg)); }
/* dot k parks at 12 o'clock at its step's midpoint: base = 22.5k + 11.25, sweep = -90p */
.wheel__dot { position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(calc(var(--i) * 22.5deg + 11.25deg)); }
.wheel__dot b { position: absolute; left: -22px; top: calc(-80vmin - 22px); width: 44px; height: 44px;
  display: grid; place-items: center; border-radius: 50%; font-size: 15px; font-weight: 400;
  background: color-mix(in srgb, var(--ink-deep) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink-deep) 25%, transparent);
  color: var(--ink-deep);
  transform: rotate(calc((var(--i) * 22.5deg + 11.25deg) * -1 + var(--p, 0) * 90deg));
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              scale var(--dur-fast) var(--ease); }
.wheel[data-step="0"] .wheel__dot[style*="--i:0"] b,
.wheel[data-step="1"] .wheel__dot[style*="--i:1"] b,
.wheel[data-step="2"] .wheel__dot[style*="--i:2"] b,
.wheel[data-step="3"] .wheel__dot[style*="--i:3"] b {
  background: var(--sand); color: var(--deep2); border-color: var(--sand); scale: 1.25; }
/* stops crossfade */
.wheel__stops { position: relative; width: min(720px, 88vw); flex: 1; }
.wheel__stop { position: absolute; inset: 18vh 0 auto 0; text-align: center;
  opacity: 0; transform: translateY(16px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.wheel__stop h3 { font-size: clamp(30px, 3.4vw, 46px); color: var(--sand); margin-bottom: 14px; }
.wheel__stop p { opacity: 0.85; max-width: 52ch; margin-inline: auto; }
.wheel[data-step="0"] .wheel__stop[data-i="0"],
.wheel[data-step="1"] .wheel__stop[data-i="1"],
.wheel[data-step="2"] .wheel__stop[data-i="2"],
.wheel[data-step="3"] .wheel__stop[data-i="3"] { opacity: 1; transform: none; }

/* ============ ACT 5a · 300+ FORMATION (pinned; tiny condition/med words
   typeset the digits as you scroll — canvas painted by landing-v2.js) ===== */
.uwx { min-height: 220vh; }
.uwx__stage { position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; padding: 0 4vw; text-align: center; }
/* visually hidden on desktop (canvas carries the visual); restored <=768 + no-js */
.uwx__title { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }
.uwx__canvas { width: min(1300px, 94vw); height: min(58vh, 560px); display: block; }
/* subtitle fades up once the digits have settled (p 0.80 -> 0.93); inherits --p */
.uwx__sub { font-size: clamp(17px, 1.7vw, 23px); max-width: 60ch;
  opacity: calc((var(--p, 0) - 0.8) / 0.13);
  transform: translateY(calc(16px * (1 - min(1, max(0, (var(--p, 0) - 0.8) / 0.13))))); }
.uwx__sub strong { font-weight: 500; color: var(--cta-pale); }

/* ============ ACT 5 · UNDERWRITING SHOWCASE + MARQUEE ============ */
.uw { padding: 9vh 0 12vh;
  background: linear-gradient(180deg, var(--deep) 0%, var(--deep2) 100%); }
.uw__label { display: block; text-align: center; margin-bottom: 7vh; }

/* ---- two printers: clean read prints smoothly, knockout jams a broken,
   sparking machine. Machines = inline SVG; sheets = real DOM (color-coded
   condition / sub-question / outcome lines). All motion is 12s transform
   keyframes gated on .is-in; the two timelines share the duration so the
   pair reads as one scene. ---- */
.uw__printers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px; max-width: 1060px; margin-inline: auto; }
.prt { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; }
.prt__rig { position: relative; width: 340px; height: 556px; }
.prt__chassis { position: absolute; inset: 0; }
/* hood (everything above the output slot, incl. the slot lip) sits OVER the
   sheet; base (chin, feet, fold-out catch tray) sits UNDER it — so the page
   exits beneath the lip and rides the tray, and the rear supply sheet feeds
   down into the intake in sync with the print below. */
.prt__hood { position: absolute; left: 0; top: 0; width: 340px; height: 156px; z-index: 3;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.3)); }
.prt__base { position: absolute; left: 0; top: 152px; width: 340px; height: 80px; z-index: 1; }
.prt__led--ok { fill: #38d27e; }
.prt__led--bad { fill: #ff5c4d; }
.prt__insheet { will-change: transform; }
.prt__out { position: absolute; left: 50%; top: 149px; width: 248px; height: 392px;
  transform: translateX(-50%); overflow: hidden; pointer-events: none; z-index: 2; }
.prt__out::before { content: ''; position: absolute; left: 0; top: 0; right: 0; height: 7px;
  background: linear-gradient(rgba(0, 0, 0, 0.4), transparent); z-index: 2; }
.prt__paper { width: 100%; min-height: 370px; box-sizing: border-box;
  background: #f7f5ec; color: #25313c;
  padding: 16px 30px 18px; transform: translateY(-101%);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.35); will-change: transform;
  /* tractor-feed hole strips */
  background-image:
    radial-gradient(circle 3px at 11px 12px, var(--deep2) 0 2.6px, transparent 3px),
    radial-gradient(circle 3px at calc(100% - 11px) 12px, var(--deep2) 0 2.6px, transparent 3px);
  background-size: 100% 24px; background-repeat: repeat-y; }
.prt__paper--bad { clip-path: polygon(0 0, 100% 0, 100% 96.5%, 90% 99%, 74% 96.5%,
  56% 100%, 36% 97%, 16% 99.5%, 0 97%); }
.prt__head { font-size: 10px; letter-spacing: 1.4px; opacity: 0.55; margin: 0 0 10px;
  border-bottom: 1px dashed rgba(37, 49, 60, 0.3); padding-bottom: 8px; }
.prt__doc { margin: 0; font-size: 11.5px; line-height: 1.5; }
.prt__doc dt { font-weight: 700; margin: 9px 0 2px; }
.prt__doc dd { margin: 0 0 1px 12px; display: flex; justify-content: space-between;
  gap: 10px; opacity: 0.85; }
.prt__doc b { font-weight: 500; }
.prt__doc .ok { color: #1f7a4d; }
.prt__doc .no { color: #c3372b; }
.prt__verdict { margin-top: 14px; padding-top: 11px; text-align: center;
  border-top: 1px dashed rgba(37, 49, 60, 0.3); }
.prt__verdict small { display: block; margin-top: 8px; font-size: 9.5px;
  letter-spacing: 0.6px; opacity: 0.6; }
.prt__stamp { display: inline-block; font-weight: 800; font-size: 19px;
  letter-spacing: 3px; padding: 5px 16px 4px; border-radius: 7px; opacity: 0; }
.prt__stamp--ok { color: #1f7a4d; border: 3px double #1f7a4d; transform: rotate(-5deg); }
.prt__stamp--bad { color: #c3372b; border: 3px double #c3372b; transform: rotate(-9deg); }
.prt__cap { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-deep) 60%, transparent); }
.prt__spark { opacity: 0; }
.prt__spark .spk__core { transform-box: fill-box; transform-origin: center; }

/* healthy machine: steady LED + a calm, even feed */
.prt--ok.is-live .prt__led--ok { animation: prtledok 1.6s ease-in-out infinite; }
.prt--ok.is-live .prt__paper { animation: prtfeed 12s linear 1 forwards; }
.prt--ok.is-live .prt__insheet { animation: prtsink 12s linear 1 forwards; }
.prt--ok.is-live .prt__stamp { animation: prtstampok 12s ease 1 forwards; }
@keyframes prtledok { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes prtfeed {
  0%, 6% { transform: translateY(-101%); }
  64%, 100% { transform: translateY(0); }
}
@keyframes prtsink { /* same beats as prtfeed: supply sheet disappears into the intake */
  0%, 6% { transform: translateY(0); }
  64%, 100% { transform: translateY(42px); }
}
@keyframes prtstampok {
  0%, 66% { opacity: 0; transform: scale(2) rotate(-5deg); }
  70%, 100% { opacity: 1; transform: scale(1) rotate(-5deg); }
}

/* broken machine: rattle, red LED, LCD flicker, sparks popping on each jut */
.prt--bad.is-live .prt__chassis { animation: prtrattle 0.55s linear infinite; }
.prt--bad.is-live .prt__insheet--bad { animation: prtsinkjam 12s ease 1 forwards; }
.prt--bad.is-live .prt__led--bad { animation: prtledbad 0.5s steps(2, jump-none) infinite; }
.prt--bad.is-live .prt__lcd--bad { animation: prtledbad 0.34s steps(2, jump-none) infinite; }
.prt--bad.is-live .prt__paper { animation: prtjam 12s ease 1 forwards; }
.prt--bad.is-live .prt__stamp { animation: prtstampbad 12s ease 1 forwards; }
.prt--bad.is-live .prt__spark { animation: spkflash 12s linear 1 forwards; }
.prt--bad.is-live .prt__spark .spk__rays { animation: spkstrobe 12s linear 1 forwards; }
.prt--bad.is-live .prt__spark .spk__core { animation: spkcore 12s linear 1 forwards; }
.prt--bad.is-live .prt__spark .spk__ember--a { animation: spkembera 12s linear 1 forwards; }
.prt--bad.is-live .prt__spark .spk__ember--b { animation: spkemberb 12s linear 1 forwards; }
.prt--bad.is-live .prt__spark .spk__ember--c { animation: spkemberc 12s linear 1 forwards; }
.prt--bad.is-live .prt__spark--2, .prt--bad.is-live .prt__spark--2 * { animation-delay: 2.04s; }
.prt--bad.is-live .prt__spark--3, .prt--bad.is-live .prt__spark--3 * { animation-delay: 4.2s; }
.prt--bad.is-live .prt__spark--4, .prt--bad.is-live .prt__spark--4 * { animation-delay: 7.02s; }
@keyframes prtrattle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(0.8px, -0.6px) rotate(0.3deg); }
  50% { transform: translate(-0.7px, 0.5px) rotate(-0.25deg); }
  75% { transform: translate(0.5px, 0.5px) rotate(0.2deg); }
}
@keyframes prtledbad { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes prtsinkjam { /* mirrors prtjam: the supply sheet lurches into the intake */
  0%, 5% { transform: translateY(0); }
  9% { transform: translateY(6px); }
  14% { transform: translateY(5px); }
  22% { transform: translateY(5.5px); }
  26% { transform: translateY(16px); }
  31% { transform: translateY(14px); }
  38% { transform: translateY(15px); }
  44% { transform: translateY(27px); }
  49% { transform: translateY(24.5px); }
  58% { transform: translateY(35px); }
  63% { transform: translateY(33.5px); }
  68%, 100% { transform: translateY(42px); }
}
@keyframes prtjam {
  0%, 5% { transform: translateY(-101%) rotate(0deg); }
  9% { transform: translateY(-86%) rotate(1.6deg); }
  14% { transform: translateY(-88%) rotate(1.1deg); }
  22% { transform: translateY(-87%) rotate(1.9deg); }
  26% { transform: translateY(-62%) rotate(-2.3deg); }
  31% { transform: translateY(-66%) rotate(-1.4deg); }
  38% { transform: translateY(-64%) rotate(-2.6deg); }
  44% { transform: translateY(-34%) rotate(2.4deg); }
  49% { transform: translateY(-39%) rotate(1.5deg); }
  58% { transform: translateY(-12%) rotate(-1.9deg); }
  63% { transform: translateY(-16%) rotate(-1.2deg); }
  68%, 100% { transform: translateY(0) rotate(2.2deg); }
}
@keyframes prtstampbad {
  0%, 71% { opacity: 0; transform: scale(2.4) rotate(-9deg); }
  75%, 100% { opacity: 1; transform: scale(1) rotate(-9deg); }
}
/* electrical burst: window-gate on the group, strobing rays, a white-hot core
   that flares twice, three embers on rise-then-fall flight paths */
@keyframes spkflash {
  0%, 8.55% { opacity: 0; } 8.9% { opacity: 1; }
  12.3% { opacity: 1; } 12.6%, 100% { opacity: 0; }
}
@keyframes spkstrobe {
  0%, 8.55% { opacity: 0; } 8.8% { opacity: 1; } 9.2% { opacity: 0.25; }
  9.6% { opacity: 1; } 10.3% { opacity: 0.5; } 10.9% { opacity: 0.9; }
  11.6% { opacity: 0.2; } 12.2%, 100% { opacity: 0; }
}
@keyframes spkcore {
  0%, 8.55% { transform: scale(0.3); opacity: 0; }
  8.85% { transform: scale(1.5); opacity: 1; }
  9.5% { transform: scale(0.8); opacity: 0.9; }
  10.2% { transform: scale(1.25); opacity: 1; }
  11.2% { transform: scale(0.6); opacity: 0.5; }
  12.1%, 100% { transform: scale(0.2); opacity: 0; }
}
@keyframes spkembera {
  0%, 8.7% { transform: translate(0, 0); opacity: 0; } 9% { opacity: 1; }
  10.8% { transform: translate(10px, -14px); opacity: 0.9; }
  12.4%, 100% { transform: translate(15px, -8px); opacity: 0; }
}
@keyframes spkemberb {
  0%, 8.7% { transform: translate(0, 0); opacity: 0; } 9.1% { opacity: 1; }
  10.9% { transform: translate(-11px, -9px); opacity: 0.8; }
  12.4%, 100% { transform: translate(-16px, -2px); opacity: 0; }
}
@keyframes spkemberc {
  0%, 8.8% { transform: translate(0, 0); opacity: 0; } 9.2% { opacity: 1; }
  11% { transform: translate(7px, 9px); opacity: 0.8; }
  12.4%, 100% { transform: translate(10px, 16px); opacity: 0; }
}
.uwm { padding: 10vh 0 11vh; }
.uwm .uw__marquee { margin-top: 0; }
.uw__marquee .label { display: block; text-align: center; margin-bottom: 26px; }
.marquee { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 64px; width: max-content;
  padding-right: 64px; animation: marq 36s linear infinite; }
.marquee__logo { height: 34px; width: auto;
  filter: grayscale(1) opacity(0.55);
  transition: filter var(--dur-fast) var(--ease); }
.marquee__logo:hover { filter: none; }
@keyframes marq { to { transform: translateX(-50%); } }

/* ============ ACT 6 · PRICING ============ */
.pricing__inner { padding: 16vh 0 14vh; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pricing__inner h2 { font-size: clamp(34px, 4.6vw, 66px); }
.pricing__tabs { display: inline-flex; border: 1px solid color-mix(in srgb, var(--ink-deep) 25%, transparent);
  border-radius: 999px; padding: 4px; gap: 4px; margin-top: 8px; }
.pricing__tab { border: 0; background: transparent; color: var(--ink-deep); opacity: 0.7;
  padding: 9px 22px; border-radius: 999px; font-size: 14px; cursor: pointer; font-family: inherit;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.pricing__tab.is-active { background: var(--pale); color: var(--ink-pale); opacity: 1; }
.pricing__price { font-size: clamp(64px, 9vw, 140px); line-height: 1; }
.pricing__price span { font-size: clamp(18px, 2vw, 26px); color: var(--sand); margin-left: 6px; }
.pricing__note { opacity: 0.65; font-size: 14.5px; margin-top: -8px; }
.pricing__list { list-style: none; display: grid; grid-template-columns: repeat(3, auto);
  gap: 12px 48px; margin: 26px 0 10px; text-align: left; }
.pricing__list li { opacity: 0.85; font-size: 15.5px; }

/* ============ ACT 7 · FAQ + CTA BAND ============ */
.faq__inner { padding: 13vh 0 6vh; }
.faq__inner > .label { display: block; text-align: center; }
.faq__inner h2 { text-align: center; font-size: clamp(32px, 4.4vw, 60px); margin: 12px 0 7vh; }
.faq__list { max-width: 760px; margin-inline: auto; border-top: 1px solid color-mix(in srgb, var(--ink-pale) 16%, transparent); }
.faq__item { border-bottom: 1px solid color-mix(in srgb, var(--ink-pale) 16%, transparent); }
.faq__q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 18px;
  background: transparent; border: 0; cursor: pointer; font-family: inherit; color: inherit;
  font-size: 17.5px; font-weight: 500; text-align: left; padding: 22px 4px; }
.faq__q span { font-size: 24px; font-weight: 400; opacity: 0.6;
  transition: transform var(--dur-fast) var(--ease); }
.faq__item.open .faq__q span { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-fast) var(--ease); }
/* padding + opacity ride the SAME curve as the row — an untransitioned
   padding-bottom pops the list 22px at the start of every open/close */
.faq__a > p { overflow: hidden; opacity: 0; padding: 0 4px;
  transition: padding-bottom var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.faq__item.open .faq__a { grid-template-rows: 1fr; }
.faq__item.open .faq__a > p { padding-bottom: 22px; opacity: 0.8; }
.ctaband { text-align: center; padding: 12vh 6vw 14vh; }
.ctaband h2 { font-size: clamp(30px, 4.2vw, 58px); margin-bottom: 30px; }

/* ============ FOOTER ============ */
.footer { overflow: hidden; padding-top: 6vh; }
.footer__wordwrap { display: grid; place-items: center; }
/* giant brand LOGO (alpha-trimmed copies in images/landing/wordmark_*.png),
   same slide-out scrub as the old typed wordmark */
.footer__wordmark { display: block; width: auto; height: auto;
  max-width: min(84vw, 1000px); max-height: 42vh;
  transform: translateY(calc((1 - var(--p, 0)) * 36%));
  opacity: calc(0.25 + 0.75 * var(--p, 0)); }
.footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
  padding: 7vh 0 4vh; border-top: 1px solid rgba(255,255,255,0.10); margin-top: 5vh; }
.footer__cols .label { margin-bottom: 14px; }
.footer__cols a { display: block; padding: 6px 0; opacity: 0.75; font-size: 15px;
  transition: opacity var(--dur-fast) var(--ease); }
.footer__cols a:hover { opacity: 1; }
.footer__copy { text-align: center; font-size: 13px; opacity: 0.45; padding: 3vh 0 4vh; }

/* ============ MOBILE (≤768px): pins → stacks, no scroll-jacking ============ */
@media (max-width: 768px) {
  :root { --nav-h: 68px; }
  .nav__links, .nav__login { display: none; }
  .nav__burger { display: flex; flex-direction: column; gap: 5px; background: transparent;
    border: 0; padding: 10px; cursor: pointer; }
  .nav__burger span { width: 24px; height: 2px; background: var(--ink-deep); }
  .hero__grid { grid-template-columns: 1fr; padding-top: calc(var(--nav-h) + 4vh); min-height: auto; gap: 8px; }
  .hero { position: relative; min-height: auto; padding-bottom: 8vh; } /* unpin */
  .hero__visual { height: auto; min-height: 0; margin-top: 10px; }
  .vig--compare { position: relative; inset: auto; margin-top: 72px; justify-content: center; gap: 12px; }
  .vig__vs { display: none; }
  .vig__card { width: 168px; padding: 16px 14px 14px; }
  .vig__card strong { font-size: 14.5px; }
  .vig__logo { height: 36px; margin-bottom: 11px; }
  .vig__stat em { font-size: 22px; }
  .vig__ink { left: -276px; top: calc(37% - 280px); } /* seal x = 84px on 168px cards */
  .vig__stamp { width: 92px; height: 90px; }
  .hero__orbit { display: none; }
  .hero__stats { gap: 26px; margin-top: 4vh; }
  .knockout { min-height: auto; }
  .knockout__stage { position: relative; height: auto; padding: 12vh 0; }
  .knockout__layer { position: relative; inset: auto; }
  .knockout__panel { position: relative; left: auto; top: auto; translate: none; width: 100%;
    margin-top: 6vh; clip-path: none; }
  .knockout__panel .knockout__layer--bg { display: none; }
  .vig--build { position: relative; left: auto; bottom: auto; padding: 24px; }
  .vig--build .vig__row { opacity: 1; transform: none; }
  .move__inner { grid-template-columns: 1fr; gap: 22px; }
  .move:nth-child(even) .move__inner { direction: ltr; }
  .move__media { min-height: auto; padding: 26px 18px; }
  .img-pop { clip-path: none; transform: none; }
  .move .vig--ask > *, .move .vig--rates > *, .move .vig--email > * { opacity: calc(var(--vo, 1) * 1); }
  .vig__rate img { width: 58px; height: 20px; }
  .vig__rateprod { display: none; }
  .vig__callbar { font-size: 12px; }
  .footer__wordmark { max-width: 88vw; max-height: 30vh; }
  .wheel { min-height: auto; }
  .wheel__stage { position: relative; height: auto; padding: 10vh 0 6vh; }
  .wheel__arc, .wheel__px { display: none; }
  .wheel__stops { position: static; width: 100%; display: grid; gap: 34px; padding: 5vh 6vw 0; }
  .wheel__stop { position: static; opacity: 1; transform: none; }
  .uw__printers { grid-template-columns: 1fr; gap: 10px; }
  .prt__rig { transform: scale(0.86); transform-origin: top center; height: 480px; }
  .uwx { min-height: auto; }
  .uwx__stage { position: relative; height: auto; padding: 12vh 6vw 4vh; }
  .uwx__canvas { display: none; }
  .uwx__title { position: static; width: auto; height: auto; overflow: visible;
    clip-path: none; white-space: normal; font-size: clamp(40px, 12vw, 64px); }
  .uwx__sub { opacity: 1; transform: none; }
  .pricing__list { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

/* ============ NO-JS: every scrub consumer renders fully open & static ============ */
html:not(.js) .img-pop { clip-path: none; transform: none; }
html:not(.js) .knockout { min-height: auto; }
html:not(.js) .knockout__panel { clip-path: none; transform: none; position: relative;
  left: auto; top: auto; translate: none; margin: 6vh auto 0; }
html:not(.js) .knockout__panel .knockout__layer--bg { display: none; }
html:not(.js) .knockout__stage { position: relative; height: auto; padding: 12vh 0; }
html:not(.js) .knockout__layer { position: relative; inset: auto; }
html:not(.js) .vig--build .vig__row,
html:not(.js) .vig--ask > *, html:not(.js) .vig--rates > *, html:not(.js) .vig--email > * { opacity: 1; transform: none; }
html:not(.js) .prt__paper { transform: none; }
html:not(.js) .prt__stamp { opacity: 1; }
html:not(.js) .uwx { min-height: auto; }
html:not(.js) .uwx__stage { position: relative; height: auto; padding: 10vh 6vw 4vh; }
html:not(.js) .uwx__canvas { display: none; }
html:not(.js) .uwx__title { position: static; width: auto; height: auto; overflow: visible;
  clip-path: none; white-space: normal; font-size: clamp(38px, 6vw, 72px); }
html:not(.js) .uwx__sub { opacity: 1; transform: none; }
html:not(.js) .wheel { min-height: auto; }
html:not(.js) .wheel__stage { position: relative; height: auto; padding: 10vh 0; }
html:not(.js) .wheel__arc { display: none; }
html:not(.js) .wheel__stops { display: grid; gap: 34px; padding: 4vh 6vw; }
html:not(.js) .wheel__stop { position: static; opacity: 1; transform: none; }
html:not(.js) .footer__wordmark { transform: none; opacity: 0.9; }
html:not(.js) .moves__head h2, html:not(.js) .hero__h1 { opacity: 1; }

/* ---------- pricing: 6-month + best-value ribbon + savings line (BQ tabs mode) ---------- */
.pricing__tabs { flex-wrap: wrap; }
.pricing__tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 118px; }
.pricing__tab .pt-save { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .5px; font-weight: 500; color: var(--accent-deep); opacity: .95; }
.pricing__tab.is-active .pt-save { color: var(--cta-pale); }
.pricing__tab .pt-save.pt-blank { visibility: hidden; }
.pricing__tab .pt-best { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; color: #0e2a1b; background: var(--accent-deep); padding: 2px 9px; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.pricing__save { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--accent-deep); background: color-mix(in srgb, var(--accent-deep) 13%, transparent); }
.pricing__save svg { width: 14px; height: 14px; }
.pricing__save.is-hidden { display: none; }