/* ============================================================
   EZ WINS — design tokens & components
   Direction: light editorial (CuraClimate-caliber restraint),
   quiet warm canvas, indigo as the one working accent,
   podium metals + money green only inside product visuals.
   ============================================================ */

/* self-hosted fonts (latin subset, exact files Google Fonts serves; OFL — see assets/fonts/README.md).
   Each family is one variable woff2; one face per weight, mirroring Google's CSS. */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/space-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/space-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/space-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/jetbrains-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* canvas & ink */
  --canvas: #FAF8F4;
  --surface: #FFFFFF;
  --paper: #F2EFE8;          /* warm tint for alternate blocks */
  --ink: #14151C;
  --ink-2: #494C59;
  --ink-3: #838794;
  --ink-3-text: #6B6F7C;     /* --ink-3 darkened for small text: 5.0:1 on white, 4.7:1 on canvas (WCAG AA) */
  --line: rgba(20, 21, 28, 0.10);
  --line-soft: rgba(20, 21, 28, 0.055);

  /* brand (sampled from logo.ai) */
  --indigo: #5B53E8;         /* the working accent */
  --indigo-ink: #4038CE;     /* text-sized indigo on light */
  --indigo-soft: rgba(91, 83, 232, 0.09);
  --coral: #FF7A4D;          /* "win" accent — max ~3 places per screen */
  --green: #1B9E6C;          /* money / goal-hit */
  --green-ink: #14764F;
  --red-soft: #E06555;       /* under-goal bars in recreated charts */

  /* podium metals (product visuals only) */
  --gold: #D9A420;
  --silver: #9BA2AF;
  --bronze: #C27B4B;

  /* the brand gradient — logo + ONE hero moment only */
  --grad-bars: linear-gradient(100deg, #FC05FF 0%, #665BFF 100%);

  /* dark band (uplift section, footer) */
  --dark: #12131B;
  --dark-2: #1A1B25;
  --dark-line: rgba(250, 248, 244, 0.12);

  /* type */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;

  --r-card: 18px;
  --r-chip: 12px;
  --r-btn: 8px;

  --shadow-card: 0 1px 2px rgba(20,21,28,.04), 0 12px 32px -12px rgba(20,21,28,.10);
  --shadow-chip: 0 2px 6px rgba(20,21,28,.06), 0 18px 40px -18px rgba(20,21,28,.18);

  --nav-h: 76px;
}

* { box-sizing: border-box; }
/* the hidden attribute always wins over component display rules */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--indigo); color: #fff; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; }

/* visually hidden, still announced by screen readers */
.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;
}

/* ---- faint grid background (per Reference-Code, restyled for light canvas) ---- */
.grid-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(20, 21, 28, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20, 21, 28, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.grid-glow {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 70% -10%, rgba(91, 83, 232, 0.09), transparent 55%),
    radial-gradient(90% 60% at 8% 110%, rgba(255, 122, 77, 0.05), transparent 60%);
}

/* ---- section temperature tints (one hue per section, low saturation) ---- */
.tint-indigo { background: #EAE8F8; }
.tint-green  { background: #E4EFE8; }
.tint-paper  { background: var(--paper); }
.tint-indigo, .tint-green, .tint-paper, .band-dark { position: relative; z-index: 1; }

main, .site-nav, footer { position: relative; z-index: 1; }

/* ---- layout ---- */
.wrap { max-width: 1280px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }
@media (max-width: 640px) { .wrap { padding-left: 20px; padding-right: 20px; } }

.section { padding: 110px 0; }
.section-tight { padding: 72px 0; }
@media (max-width: 760px) { .section { padding: 72px 0; } .section-tight { padding: 52px 0; } }

/* ---- type ---- */
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -0.028em; margin: 0; }
h1 { font-size: clamp(2.9rem, 6.2vw, 5.4rem); }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.5rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.2; letter-spacing: -0.015em; }
.lede { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--ink-2); line-height: 1.7; }
p { margin: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--indigo); flex: none; }
.eyebrow-services::before { background: var(--coral); }
.eyebrow-green::before { background: var(--green); }

.mono-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* ---- live eyebrow pill (per Reference-Code, restyled to tokens) ---- */
.live-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(20, 21, 28, 0.12);
  background: rgba(255, 255, 255, 0.65);
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--green);
  animation: live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(31, 169, 113, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(31, 169, 113, 0); }
  100% { box-shadow: 0 0 0 0   rgba(31, 169, 113, 0); }
}

/* ---- floating hero artifact (per Reference-Code) ---- */
.floating-artifact { animation: float 6s ease-in-out infinite; will-change: transform; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

/* the ONE brand-gradient moment (hero headline word) */
.grad-word {
  background: var(--grad-bars);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---- buttons (corner-bracket signature) ---- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 500; font-size: 0.98rem; letter-spacing: 0.01em;
  padding: 15px 28px; border-radius: var(--r-btn); text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn .arr { transition: transform .18s ease; }
.btn:hover .arr { transform: translateX(4px); }

.btn-primary { background: var(--indigo); color: #fff; box-shadow: 0 10px 24px -10px rgba(91,83,232,.55); }
.btn-primary:hover { background: #4A42D9; }

.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(20,21,28,.28); }
.btn-ghost:hover { border-color: var(--ink); }

.btn-light { background: var(--canvas); color: var(--ink); }
.btn-light:hover { background: #fff; }

/* bracket corners */
.bracket { position: relative; }
.bracket::before, .bracket::after {
  content: ""; position: absolute; width: 9px; height: 9px; opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.bracket::before { top: -5px; left: -5px; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor; transform: translate(3px,3px); }
.bracket::after { bottom: -5px; right: -5px; border-bottom: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translate(-3px,-3px); }
.bracket:hover::before, .bracket:hover::after { opacity: .9; transform: translate(0,0); }

/* ---- nav ---- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h);
  background: rgba(250, 248, 244, 0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s ease;
}
.site-nav.scrolled { box-shadow: 0 8px 30px -18px rgba(20,21,28,.25); }
.nav-inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a {
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 500; text-decoration: none;
  color: var(--ink-2); transition: color .15s ease; padding: 6px 0;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--indigo); }
.nav-links a.nav-cta, .nav-links a.nav-cta:hover { color: #fff; box-shadow: 0 10px 24px -10px rgba(91,83,232,.55); }
.nav-cta { padding: 11px 22px; font-size: 0.9rem; }
.nav-links a.nav-cta { padding: 11px 22px; }   /* beat .nav-links a { padding: 6px 0 } */
@media (min-width: 921px) and (max-width: 1000px) { .nav-links { gap: 24px; } }   /* six items: keep one line just above the burger breakpoint */

.nav-burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .25s ease, opacity .2s ease; }

@media (max-width: 920px) {
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: flex-start;
    gap: 4px; padding: 18px 24px 26px; background: var(--canvas);
    border-bottom: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: transform .25s ease, opacity .25s ease, visibility 0s linear .25s;
  }
  .nav-links a { font-size: 1.2rem; padding: 10px 0; }
  .nav-links a.nav-cta { margin-top: 12px; padding: 11px 22px; }
  body.menu-open .nav-links { transform: translateY(0); opacity: 1; pointer-events: auto; visibility: visible; transition-delay: 0s; }
  body.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
  body.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-burger { display: block; }
}

/* offset for fixed nav */
main { padding-top: var(--nav-h); }

/* ---- scroll reveal ---- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.6,.2,1), transform .7s cubic-bezier(.22,.6,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; }
/* above-the-fold hero: the same fade-up as .rv, but CSS-only so it plays on first paint without
   waiting for script.js (the hero H1 is the LCP). Rests at the .rv.in end state, so the observer
   adding .in later changes nothing (no re-hide, no replay). The rise fills backwards only: a
   forwards fill would leave translateY(0) (not none) applied, i.e. a stacking context .rv.in never had. */
@keyframes rv-hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rv-hero-rise { from { transform: translateY(26px); } to { transform: none; } }
main > section:first-of-type .rv {
  opacity: 1; transform: none;
  animation: rv-hero-fade .7s cubic-bezier(.22,.6,.2,1) backwards, rv-hero-rise .7s cubic-bezier(.22,.6,.2,1) backwards;
}
main > section:first-of-type .rv-d1 { animation-delay: .08s; }
main > section:first-of-type .rv-d2 { animation-delay: .16s; }
main > section:first-of-type .rv-d3 { animation-delay: .24s; }

/* ---- floating chips ---- */
.chip {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-chip); padding: 11px 15px;
  font-family: var(--font-display); font-size: 0.83rem; font-weight: 500;
  box-shadow: var(--shadow-chip); white-space: nowrap;
  will-change: transform;
}
.chip small { font-family: var(--font-mono); font-weight: 400; font-size: 0.68rem; color: var(--ink-3-text); letter-spacing: .04em; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.chip .dot.live { background: var(--coral); animation: pulse 2.2s ease-in-out infinite; }
.chip .money { color: var(--green-ink); font-family: var(--font-mono); font-weight: 600; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,122,77,.45);} 55% { box-shadow: 0 0 0 7px rgba(255,122,77,0);} }

.bob { animation: bob 7s ease-in-out infinite alternate; }
.bob-2 { animation-duration: 8.6s; animation-delay: -2.3s; }
.bob-3 { animation-duration: 9.8s; animation-delay: -4.1s; }
.bob-4 { animation-duration: 7.8s; animation-delay: -1.2s; }
@keyframes bob { from { translate: 0 -5px; } to { translate: 0 6px; } }

/* ---- cards ---- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.card-hover { transition: transform .25s ease, box-shadow .25s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 2px 3px rgba(20,21,28,.04), 0 24px 48px -16px rgba(20,21,28,.16); }

/* ---- recreated product UI (site's own design language) ---- */
.ui-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-card); overflow: hidden;
  font-family: var(--font-display);
}
.ui-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
}
.ui-title { font-size: 0.86rem; font-weight: 600; letter-spacing: -0.01em; }
.ui-tag {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3-text);
}
.ui-tag.live { color: #DB3700; /* coral hue, deepened to 4.6:1 on white; the dot stays --coral */ display: inline-flex; align-items: center; gap: 6px; }
.ui-tag.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); animation: pulse 2.2s ease-in-out infinite; }

/* leaderboard rows — timing-tower layout: [rank delta][medal][name][score] */
.lb-row {
  display: grid; grid-template-columns: 40px 34px 1fr auto; align-items: center; gap: 12px;
  padding: 11px 18px; border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  transition: transform .8s cubic-bezier(.3,.7,.2,1);
  position: relative;
}
.lb-row.lb-simple { grid-template-columns: 34px 1fr auto; }
.lb-row:last-child { border-bottom: 0; }
.medal {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; color: #fff;
}
.medal.gold { background: var(--gold); }
.medal.silver { background: var(--silver); }
.medal.bronze { background: var(--bronze); }
.medal.plain { background: transparent; color: var(--ink-3-text); border: 1px solid var(--line); }
.lb-name { font-size: 0.88rem; font-weight: 500; display: flex; flex-direction: column; gap: 5px; }
.lb-bar { height: 4px; border-radius: 2px; background: var(--paper); overflow: hidden; width: min(100%, 220px); }
.lb-bar i { display: block; height: 100%; border-radius: 2px; background: var(--indigo); transition: width 1s cubic-bezier(.3,.7,.2,1); }
.lb-score { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-delta {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: left; min-width: 34px;
  color: var(--ink-3-text);
  transition: color .4s ease;
}
.lb-delta.up { color: var(--green-ink); } .lb-delta.down { color: #D73B27; /* --red-soft hue, deepened to 4.6:1 on white */ }

/* ---- standalone leaderboard section (lifted off the page) ---- */
.lb-stage { max-width: 880px; margin: 0 auto; }
.lb-stage .ui-panel {
  border: 1px solid var(--line);
  box-shadow:
    0 1px 2px rgba(20,21,28,.04),
    0 24px 60px -20px rgba(20,21,28,.18),
    0 0 90px -30px rgba(91,83,232,.35);
}
.lb-stage .lb-row { padding: 13px 22px; }
.lb-caption {
  text-align: center; margin-top: 18px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3-text);
}

/* ---- feature explorer (tab rail + swapping preview) ---- */
.xp { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.xp-rail { display: flex; flex-direction: column; gap: 4px; position: sticky; top: calc(var(--nav-h) + 32px); }
.xp-tab {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-left: 2px solid var(--line);
  padding: 13px 18px; border-radius: 0 10px 10px 0;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 500; color: var(--ink-3);
  transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.xp-tab:hover { color: var(--ink); background: rgba(20,21,28,.03); }
.xp-tab[aria-selected="true"] {
  color: var(--ink); border-left-color: var(--indigo);
  background: var(--indigo-soft); transform: translateX(2px);
}
.xp-panel[hidden] { display: none; }
.xp-panel { animation: xp-in .45s cubic-bezier(.22,.6,.2,1); }
@keyframes xp-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.xp-panel h3 { margin-bottom: 10px; }
.xp-panel .xp-copy { color: var(--ink-2); max-width: 56ch; }
.xp-media { margin-top: 24px; }
.xp-note {
  margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  font-size: .95rem; color: var(--ink-2);
}
@media (max-width: 880px) {
  .xp { grid-template-columns: 1fr; }
  .xp-rail { display: none; }
  /* no-JS fallback: stacked list (script.js adds .xp-acc and turns it into an accordion) */
  .xp:not(.xp-acc) .xp-panel[hidden] { display: block !important; }
  .xp-panel { animation: none; }
  .xp-panel + .xp-panel { margin-top: 44px; }

  /* accordion: script.js moves each .xp-tab directly above its panel */
  .xp-acc .xp-stage > .xp-tab {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    font-size: 1.08rem; padding: 16px 18px; color: var(--ink-2);
  }
  .xp-acc .xp-stage > .xp-tab:hover { color: var(--ink); }
  .xp-acc .xp-stage > .xp-tab + .xp-tab,
  .xp-acc .xp-stage > .xp-panel + .xp-tab { margin-top: 6px; }
  .xp-acc .xp-tab::after {
    content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-3px) rotate(45deg); transition: transform .2s ease;
  }
  .xp-acc .xp-tab[aria-expanded="true"] { color: var(--ink); border-left-color: var(--indigo); background: var(--indigo-soft); }
  .xp-acc .xp-tab[aria-expanded="true"]::after { color: var(--indigo-ink); transform: translateY(2px) rotate(-135deg); }
  .xp-acc .xp-panel { padding: 22px 0 30px; animation: xp-in .4s cubic-bezier(.22,.6,.2,1); }
  .xp-acc .xp-panel h3.xp-dup { display: none; }   /* heading that just repeats its header */
}

/* ---- problem → answer scroll morph (one pinned section, two scenes) ---- */
.morph { position: relative; }
.morph.morph-on { height: 300vh; }
.morph.morph-on .morph-pin {
  position: sticky; top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  display: grid; align-items: center; overflow: hidden;
}
.morph.morph-on .morph-scene { grid-area: 1 / 1; will-change: opacity, transform; }
.morph.morph-on .morph-scene[data-scene="1"] { opacity: 0; pointer-events: none; }
/* static fallback (mobile, reduced motion, no JS): both scenes in normal flow */
.morph:not(.morph-on) { padding-bottom: 90px; }
.morph:not(.morph-on) .morph-scene { padding-top: 90px; }

/* ---- Built for Every Level (dark band, sticky left rail) ---- */
.bfl { display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: clamp(36px, 5vw, 90px); align-items: start; }
.bfl-side { position: sticky; top: calc(var(--nav-h) + 44px); }
.bfl-nav { display: grid; gap: 2px; margin-top: 34px; }
.bfl-nav a {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: rgba(245,243,238,.42); padding: 9px 0 9px 18px;
  border-left: 2px solid var(--dark-line);
  transition: color .25s ease, border-color .25s ease;
}
.bfl-nav a.active { color: #fff; border-left-color: var(--coral); }
.aud-card { padding: 34px; }
.aud-card + .aud-card { margin-top: 22px; }
.aud-card .aud-kicker {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--coral); display: block;
}
.aud-card h3 { color: #fff; margin-top: 14px; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.25; }
.aud-card ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.aud-card li { font-size: 0.95rem; color: rgba(245,243,238,.72); padding-left: 20px; position: relative; }
.aud-card li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; background: var(--indigo); }
.aud-card li b { color: #fff; font-family: var(--font-display); font-weight: 600; }
@media (max-width: 880px) {
  .bfl { grid-template-columns: 1fr; }
  .bfl-side { position: relative; top: 0; }
  .bfl-nav { display: none; }
}

/* ---- two-lane process map (Warranty Uplift) ---- */
.pm-lane { margin-top: 38px; }
.pm-title {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
}
.pm-title::after { content: ""; flex: 1; height: 1px; background: var(--dark-line); }
.pm-you .pm-title { color: #A7A2F5; }
.pm-ez .pm-title { color: var(--coral); }
.pm-steps { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin-top: 18px; }
.pm-step {
  flex: 1 1 150px; max-width: 210px;
  background: var(--dark-2); border: 1px solid var(--dark-line); border-radius: 14px;
  padding: 18px 16px; display: grid; gap: 9px; align-content: start;
}
.pm-you .pm-step { border-top: 2px solid rgba(122, 115, 240, .55); }
.pm-ez .pm-step { border-top: 2px solid rgba(255, 122, 77, .5); }
.pm-step .pm-num { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; color: rgba(245,243,238,.42); }
.pm-step b { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: #fff; line-height: 1.3; }
.pm-step p { font-size: .8rem; color: rgba(245,243,238,.62); line-height: 1.5; }
.pm-arrow { align-self: center; color: rgba(245,243,238,.32); flex: none; font-family: var(--font-mono); }
@media (max-width: 720px) {
  .pm-steps { flex-direction: column; }
  .pm-step { max-width: none; }
  .pm-arrow { transform: rotate(90deg); margin: -2px 0; justify-self: center; }
}

/* ---- giant watermark wordmark in footer ---- */
.foot-watermark { margin-top: 56px; opacity: .07; pointer-events: none; }
.foot-watermark img { width: 100%; height: auto; display: block; }

/* daily goal chart */
.goal-chart { display: flex; align-items: flex-end; gap: 5px; height: 120px; padding: 18px; position: relative; }
.goal-chart .bar { flex: 1; border-radius: 3px 3px 0 0; background: var(--red-soft); min-height: 6px; transform-origin: bottom; }
.goal-chart .bar.over { background: var(--green); }
.goal-chart .goal-line { position: absolute; left: 12px; right: 12px; border-top: 1.5px dashed rgba(20,21,28,.3); }
.goal-chart .goal-line small { position: absolute; right: 0; top: -18px; font-family: var(--font-mono); font-size: .6rem; color: var(--ink-3-text); letter-spacing: .06em; }

/* KPI tiles */
.kpi { padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface); }
.kpi b { display: block; font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.kpi span { font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3-text); }

/* ---- marquee proof bar ---- */
.marquee-bar {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  padding: 26px 0;
  position: relative;
  background: var(--canvas);
  z-index: 1;
}
.marquee-bar::before,
.marquee-bar::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.marquee-bar::before { left: 0;  background: linear-gradient(90deg, var(--canvas), transparent); }
.marquee-bar::after  { right: 0; background: linear-gradient(270deg, var(--canvas), transparent); }
.marquee-track {
  display: flex;
  width: max-content;
  animation: scroll 28s linear infinite;
}
.marquee-bar:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.m-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 44px;
  white-space: nowrap;
}
.m-num {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.m-label {
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.m-sep {
  align-self: center;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--line);
  flex-shrink: 0;
}

/* ---- feature split blocks ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.split > .split-copy { max-width: 520px; }
.split.flip > .split-copy { order: 2; justify-self: end; }
.split.flip > .split-media { order: 1; }
@media (max-width: 880px) {
  .split, .split.flip { grid-template-columns: 1fr; }
  .split.flip > .split-copy { order: 1; justify-self: start; }
  .split.flip > .split-media { order: 2; }
}

/* ---- dark services band (Warranty Uplift) ---- */
.band-dark { background: var(--dark); color: #F5F3EE; }
.band-dark .eyebrow { color: rgba(245,243,238,.62); }
.band-dark .lede, .band-dark p { color: rgba(245,243,238,.72); }
.band-dark .card { background: var(--dark-2); border-color: var(--dark-line); box-shadow: none; }

/* ---- how-it-works steps ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { position: relative; padding: 26px 24px 28px; counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: .12em; color: var(--indigo-ink);
  display: block; margin-bottom: 14px;
}
.step h3 { font-size: 1.06rem; margin-bottom: 8px; }
.step p { font-size: 0.92rem; color: var(--ink-2); }
@media (max-width: 980px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---- integrations orbit ---- */
.orbit { position: relative; min-height: 620px; display: grid; place-items: center; }
.orbit-center { max-width: 560px; text-align: center; position: relative; z-index: 2; padding: 24px; }
.tile {
  position: absolute; z-index: 1;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 20px; box-shadow: var(--shadow-chip);
  font-family: var(--font-display); text-align: left;
  will-change: transform;
}
.tile b { display: block; font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; }
.tile span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3-text); display: block; margin-top: 4px; }
@media (max-width: 880px) {
  .orbit { min-height: 0; display: block; }
  .orbit-center { margin: 0 auto 36px; }
  .tile { position: static; display: inline-block; margin: 6px 6px 0 0; }
  .orbit .bob, .orbit .bob-2, .orbit .bob-3, .orbit .bob-4 { animation: none; }
}

/* faint grid behind orbit */
.grid-fade {
  position: absolute; inset: 6% 4%;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 62% 55% at 50% 50%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 55% at 50% 50%, #000 45%, transparent 100%);
  pointer-events: none;
}

/* ---- forms ---- */
.form-fields { display: grid; gap: 20px; }
.form-fields .btn[disabled] { opacity: .65; cursor: progress; }

/* request-type toggle (segmented radio group) */
.seg-set { border: 0; margin: 0; padding: 0; min-width: 0; }
.seg {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas);
}
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.seg label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 11px 12px; border-radius: 9px; cursor: pointer; line-height: 1.3;
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 500; color: var(--ink-2);
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.seg label:hover { color: var(--ink); }
.seg input:checked + label {
  color: var(--indigo-ink); background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(91,83,232,.45), 0 1px 2px rgba(20,21,28,.06);
}
.seg input:focus-visible + label { outline: 2px solid var(--indigo); outline-offset: 2px; }

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-family: var(--font-display); font-size: 0.88rem; font-weight: 500; }
.field input, .field textarea, .field select {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft);
}
.field small { color: var(--ink-3); font-size: 0.78rem; }

/* ---- footer ---- */
footer { background: var(--dark); color: rgba(245,243,238,.7); }
footer a { text-decoration: none; transition: color .15s ease; }
footer a:hover { color: #fff; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: var(--font-display); font-size: 0.92rem; }
.foot-meta { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: .06em; color: rgba(245,243,238,.6); }   /* 6.5:1 on --dark */
.foot-meta a { color: rgba(245,243,238,.7); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }   /* 8.5:1; underlined so it isn't colour-only */
.foot-meta a:hover { color: #fff; }

/* ---- misc ---- */
.hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.tag-pill {
  display: inline-block; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: .12em;
  text-transform: uppercase; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; color: var(--ink-2);
}
.band-dark .tag-pill { border-color: var(--dark-line); color: rgba(245,243,238,.6); }

/* focus visibility */
a:focus-visible, button:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { border-radius: var(--r-btn); }
.xp-tab:focus-visible { border-radius: 0 10px 10px 0; outline-offset: 2px; }

/* reduced motion: everything settles */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .rv { opacity: 1; transform: none; }
  .bob, .bob-2, .bob-3, .bob-4 { animation: none !important; }
}