/* ═══════════════════════════════════════════════════════════════════════════
   CHECKOUT CHAMP LANDER — the web layer on top of system.css

   system.css is the document system. This turns it into a landing page:
   a sticky nav, luminance bands, a full-viewport hero, feature blocks with
   chip rows, a stat band and a closing CTA.

   Rules held from the brand system:
     · one blue ladder, no second accent hue
     · warm neutrals at hue 65.6 in both themes
     · every border through rgba(var(--rule-c), a), never a hardcoded gray
     · two radii only: 14px containers, 8px controls
     · figures in Instrument Serif, tabular
   Rules held from trevor-preferences:
     · hero is the ENTIRE viewport: min-height calc(100dvh - nav)
     · hover weight on every box-like surface
     · alive at rest in every band
     · neon fill takes an INK label, never white
     · pointer sheen at 0.035
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --nav-h:68px;
  --sheen-a:.035;
  --maxw:1180px;
  --ink-on-neon:#061019;      /* 7.54:1 on #33A9FF — measured, not picked */
}

/* The rig's node labels are centered on nodes at 88% and run past the edge.
   Clip rather than scroll: `clip` (not `hidden`) leaves position:sticky
   working on the nav, which `overflow:hidden` would silently break. */
html,body{overflow-x:clip}

/* ── Luminance bands ──────────────────────────────────────────────────────
   A band carries its own tonal region rather than following the theme, so
   the hero and the close read dark in light mode too. Values are the v2
   dark-theme tokens, held at 12-30% luminance: never void black. */
.band--dark{
  --paper:#141110; --paper-2:#1c1917; --wash:#292522;
  --rule-c:233,230,225;
  --graphite:#9c968f; --ink-soft:#e9e5e0; --ink:#faf8f6;
  --mark:var(--blue-30); --mark-deep:var(--blue-20);
  --mark-tint:var(--blue-95);
  --fig:var(--blue-40); --fig-inline:var(--blue-30);
  --card:rgba(233,230,225,.05); --card-hover:rgba(233,230,225,.085);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 30px 60px -22px rgba(0,0,0,.9);
  background:var(--paper); color:var(--ink-soft);
  position:relative;
}

/* Gradient bridge, not a hard seam. The 2026-07 ruling: with a small tonal
   delta he prefers a long cross-dissolve to a wipe. */
.bridge{height:120px;margin:0;border:0;
  background:linear-gradient(to bottom,#141110,transparent)}
.bridge--up{background:linear-gradient(to top,#141110,transparent)}

/* ── Sticky nav ───────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;gap:var(--s5);
  padding:0 var(--s5);
  background:color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid rgba(var(--rule-c),.12)}
.nav-brand{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto}
.nav-brand .logo{height:20px;width:auto;display:block}
.nav-x{font-family:var(--face-display);font-size:1.05rem;color:var(--graphite);
  line-height:1}
.nav-cc{display:flex;align-items:center;gap:7px}
.nav-cc img{width:22px;height:22px;display:block}
.nav-cc span{font-size:var(--t-sm);font-weight:600;color:var(--ink);
  white-space:nowrap}
.nav-links{display:none;align-items:center;gap:var(--s5);margin-left:auto}
.nav-links a{font-size:var(--t-sm);font-weight:500;color:var(--ink-soft);
  text-decoration:none;white-space:nowrap;transition:color .2s var(--ease);
  /* A nav link is a standalone control, so it owes the full tap target
     even though it only appears at pointer widths. */
  display:inline-flex;align-items:center;min-height:44px}
.nav-links a:hover{color:var(--mark)}
.nav-right{display:flex;align-items:center;gap:var(--s3);margin-left:auto}
.nav .toggle{color:var(--ink-soft);border-color:rgba(var(--rule-c),.24)}
.nav-links + .nav-right{margin-left:var(--s5)}
/* Measured: brand 340 + links 280 + toggle 72 + CTA 119 + gaps + 60
   padding = ~943px, so 960 was a wrap waiting to happen. */
@media (min-width:1060px){ .nav-links{display:flex} }

/* ── Marquee strip. Alive at rest, calm. ──────────────────────────────── */
.strip{overflow:hidden;background:var(--wash);
  border-bottom:1px solid rgba(var(--rule-c),.12);
  padding:9px 0;white-space:nowrap}
.strip-track{display:inline-flex;gap:var(--s7);will-change:transform;
  animation:strip 42s linear infinite}
.strip span{font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--graphite);flex:0 0 auto}
.strip b{color:var(--mark);font-weight:600}
@keyframes strip{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.strip-track{animation:none}}

/* ── Shell ────────────────────────────────────────────────────────────── */
.shell{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s5);
  width:100%}
.band{padding-block:var(--s8)}
.band--open{padding-block:var(--s9)}

/* ── Hero: the entire viewport, never capped in px ────────────────────── */
.hero{min-height:calc(100dvh - var(--nav-h));display:flex;align-items:center;
  overflow:hidden}
.hero-grid{display:grid;gap:var(--s7);align-items:center;
  padding-block:var(--s7)}
@media (min-width:980px){
  .hero-grid{grid-template-columns:1.05fr .95fr;gap:var(--s8)}
}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px;border-radius:999px;
  border:1px solid rgba(var(--rule-c),.18);background:rgba(var(--rule-c),.04);
  font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase;
  color:var(--graphite);margin-bottom:var(--s4)}
.hero-eyebrow img{width:15px;height:15px}
.hero h1{font-family:var(--face-display);font-weight:400;
  font-size:clamp(2.6rem,6.2vw,4.6rem);line-height:1.03;letter-spacing:-.015em;
  color:var(--ink);margin:0;text-wrap:balance}
/* The reference underlines its key phrase. Ours is a token-blue swoosh,
   drawn as a background so it wraps with the text. */
.uline{background-image:linear-gradient(var(--mark-solid),var(--mark-solid));
  background-repeat:no-repeat;background-position:0 92%;
  background-size:100% .12em;padding-bottom:.04em}
.hero-sub{margin-top:var(--s5);font-size:clamp(1.02rem,1.6vw,1.2rem);
  line-height:1.6;color:var(--ink-soft);max-width:56ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.hero-note{margin-top:var(--s4);font-size:var(--t-xs);color:var(--graphite)}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 var(--s5);border-radius:var(--r-ctl);
  font-family:var(--face-text);font-size:var(--t-base);font-weight:600;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),
             transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.btn--sm{min-height:44px;padding:0 var(--s4);font-size:var(--t-sm)}
.btn--primary{background:var(--mark-solid);color:var(--ink-on-neon)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.btn--ghost{color:var(--ink);border-color:rgba(var(--rule-c),.24)}
.btn--ghost:hover{border-color:rgba(var(--rule-c),.45);
  background:rgba(var(--rule-c),.05)}
.btn .arrow{transition:transform .3s var(--ease-out)}
.btn:hover .arrow{transform:translateX(4px)}
body.no-motion .btn,body.no-motion .btn .arrow{transition:none}

/* ── The hero widget: routing graph, drawn in the DOM ─────────────────── */
.rig{position:relative;aspect-ratio:520/530;width:100%;
  max-width:520px;margin-inline:auto}
.rig svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rig-node{position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center}
.rig-chip{display:flex;align-items:center;justify-content:center;
  width:60px;height:60px;border-radius:var(--r-lg);
  border:1px solid rgba(var(--rule-c),.16);
  background:color-mix(in srgb, var(--paper-2) 88%, transparent);
  backdrop-filter:blur(8px);
  font-family:var(--face-display);font-size:1.15rem;color:var(--fig-inline);
  transition:border-color .3s var(--ease),transform .3s var(--ease-out)}
.rig-node[data-live="1"] .rig-chip{border-color:color-mix(in srgb,
  var(--mark-solid) 55%, transparent);transform:scale(1.05)}
/* Token, not a hardcoded rem: this is the one label that was still sitting
   at 10.6px on a phone, under the readable floor the media query raises. */
.rig-l{font-size:var(--t-xs);letter-spacing:.05em;text-transform:uppercase;
  color:var(--graphite);white-space:nowrap}
/* The hub is Checkout Champ, so it carries their real mark rather than
   their name set in our type. Everything routes out of this node. */
.rig-hub .rig-chip{width:88px;height:88px;padding:0;
  border-color:rgba(var(--rule-c),.3)}
.rig-hub .rig-chip img{width:46px;height:46px;display:block}
.rig-hub .rig-l{color:var(--ink);font-weight:600;letter-spacing:.06em}
.rig path{fill:none;stroke:rgba(var(--rule-c),.16);stroke-width:1.5}
.rig .rig-flow{stroke:var(--mark-solid);stroke-width:2;
  stroke-linecap:round;filter:drop-shadow(0 0 5px color-mix(in srgb,
  var(--mark-solid) 45%, transparent));
  stroke-dasharray:26 300;stroke-dashoffset:326;
  animation:flow 2.8s linear infinite}
.rig .rig-flow:nth-of-type(2){animation-delay:-.7s}
.rig .rig-flow:nth-of-type(3){animation-delay:-1.4s}
.rig .rig-flow:nth-of-type(4){animation-delay:-2.1s}
@keyframes flow{to{stroke-dashoffset:0}}
/* Continuous, starts visible, so reduced motion is the only gate it needs. */
@media (prefers-reduced-motion:reduce){
  .rig .rig-flow{animation:none;stroke-dasharray:none;stroke-dashoffset:0;
    opacity:.5}
}

/* ── Chip row: the reference's feature-label widget ───────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:var(--s4)}
.chip{display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;
  border:1px solid rgba(var(--rule-c),.16);background:rgba(var(--rule-c),.035);
  font-size:var(--t-xs);font-weight:500;color:var(--ink-soft)}
.chip::before{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--mark-solid);flex:0 0 auto}

/* ── Feature blocks: alternating, never the same layout twice running ─── */
.feat{display:grid;gap:var(--s6);align-items:center;
  padding-block:var(--s7);
  border-top:1px solid rgba(var(--rule-c),.12)}
.feat:first-of-type{border-top:0}
@media (min-width:900px){
  .feat{grid-template-columns:1fr 1fr;gap:var(--s8)}
  .feat--flip .feat-media{order:-1}
}
.feat-n{font-family:var(--face-display);font-size:1.5rem;color:var(--fig);
  line-height:1}
.feat h3{font-family:var(--face-display);font-weight:400;
  font-size:clamp(1.55rem,3vw,2.1rem);line-height:1.15;color:var(--ink);
  margin:var(--s2) 0 0}
.feat p{margin-top:var(--s3);font-size:var(--t-sm);line-height:1.62;
  color:var(--ink-soft)}

/* Feature media = a small code-drawn panel, one per block. No stock art. */
.panel{border:1px solid rgba(var(--rule-c),.14);border-radius:var(--r-lg);
  background:var(--card);padding:var(--s4);min-height:210px;
  display:flex;flex-direction:column;justify-content:center;gap:var(--s2);
  position:relative;overflow:hidden;
  transition:border-color .3s var(--ease),background .3s var(--ease),
             transform .45s var(--ease-out),box-shadow .45s var(--ease-out)}
.panel::after{content:'';position:absolute;inset:0;pointer-events:none;
  opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
    rgba(var(--sheen),var(--sheen-a)),transparent 62%)}
.panel:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);
  border-color:rgba(var(--rule-c),.24);background:var(--card-hover)}
.panel:hover::after{opacity:1}
body.no-motion .panel,body.no-motion .panel::after{transition:none}

/* ── Comparison bars ────────────────────────────────────────────────────
   These were 9px hairlines that read as decoration, and the point of the
   panel is to make one row obviously beat the other. Now: a real track, a
   filled bar, the winning row marked in the accent and carrying a dot, and
   a direction hint so "shorter" is never ambiguous. */
.panel-h{display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s3);
  font-size:var(--t-xs);font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink)}
.panel-hint{font-weight:500;letter-spacing:.02em;text-transform:none;
  color:var(--graphite)}
.bar{display:grid;grid-template-columns:minmax(88px,auto) 1fr auto;
  gap:var(--s3);align-items:center;padding:7px 0;
  font-size:var(--t-xs);color:var(--graphite)}
.bar-l{line-height:1.3}
.bar--win .bar-l{color:var(--ink);font-weight:600}
/* The winning row gets a dot in the accent, so the comparison survives
   grayscale, colour-blindness and a squint from across the room. */
.bar--win .bar-l::before{content:'';display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--mark-solid);margin-right:7px;
  vertical-align:middle}
.bar-t{display:block;height:18px;border-radius:var(--r-ctl);
  background:rgba(var(--rule-c),.09);
  border:1px solid rgba(var(--rule-c),.08);overflow:hidden}
/* ⚠ display:block is load-bearing. `.bar-f` is a <span>, and width and
   height do not apply to an inline box — the fill silently rendered at zero
   for every build until this line existed. `.chart-fill` escaped it only
   because its track is a flex container, which blockifies its children. */
.bar-f{display:block;height:100%;border-radius:var(--r-ctl);width:0;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--mark-solid) 62%, transparent),var(--mark-solid));
  transition:width 1.1s var(--ease-out)}
.bar-f--soft{background:rgba(var(--rule-c),.22)}
/* The middle rung of a stack: on the accent, but not the winner. */
.bar-f--mid{background:color-mix(in srgb, var(--mark-solid) 45%, transparent)}
.bar-v:empty{min-width:0}
.bar-v{font-family:var(--face-display);color:var(--graphite);
  font-variant-numeric:tabular-nums;min-width:4ch;text-align:right;
  font-size:1.05rem}
.bar--win .bar-v{color:var(--fig-inline)}
.panel-n{margin-top:var(--s3);padding-top:var(--s3);
  border-top:1px solid rgba(var(--rule-c),.1);
  font-size:var(--t-xs);line-height:1.5;color:var(--graphite)}
.panel-n b{color:var(--ink);font-weight:600}

.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:11px 0;border-top:1px solid rgba(var(--rule-c),.1);
  font-size:var(--t-xs);color:var(--ink-soft)}
.row:first-child{border-top:0}
.row b{font-family:var(--face-display);font-weight:400;color:var(--fig-inline);
  font-variant-numeric:tabular-nums;font-size:1.05rem}

/* ── Stat band ────────────────────────────────────────────────────────── */
.stats{display:grid;gap:var(--s5);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.stat{padding:var(--s5) 0;border-top:2px solid rgba(var(--rule-c),.2)}
.stat-n{display:block;font-family:var(--face-display);font-weight:400;
  font-size:clamp(2.6rem,5.4vw,3.9rem);line-height:1;color:var(--fig);
  font-variant-numeric:tabular-nums}
.stat-k{display:block;margin-top:var(--s2);font-size:var(--t-sm);
  font-weight:600;color:var(--ink)}
.stat-d{display:block;margin-top:5px;font-size:var(--t-xs);
  color:var(--graphite);line-height:1.5}

/* ── Comparison chart. He asked for charts; this is the one real one. ─── */
.chart{display:flex;flex-direction:column;gap:var(--s4);margin-top:var(--s5)}
/* The value sits in its OWN column, on the page ground. Floating it over the
   fill made its contrast depend on how far the bar had grown, which is a
   different number in each theme and at each width. */
.chart-row{display:grid;
  grid-template-columns:minmax(110px,auto) 1fr minmax(5ch,auto);
  gap:var(--s4);align-items:center}
.chart-l{font-size:var(--t-sm);color:var(--ink-soft)}
.chart-track{position:relative;height:46px;border-radius:var(--r-ctl);
  background:rgba(var(--rule-c),.07);overflow:hidden;
  display:flex;align-items:center}
.chart-fill{height:100%;width:0;border-radius:var(--r-ctl);
  background:rgba(var(--rule-c),.22);
  transition:width 1.3s var(--ease-out)}
.chart-row--hi .chart-fill{background:linear-gradient(90deg,
  color-mix(in srgb, var(--mark-solid) 70%, transparent),var(--mark-solid))}
.chart-v{font-family:var(--face-display);font-size:clamp(1.5rem,2.4vw,1.75rem);color:var(--ink-soft);
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.chart-row--hi .chart-v{color:var(--fig-inline)}
body.no-motion .chart-fill,body.no-motion .bar-f{transition:none}
@media (max-width:640px){
  .chart-row{grid-template-columns:1fr auto;row-gap:var(--s2)}
  .chart-l{grid-area:1 / 1}
  .chart-v{grid-area:1 / 2}
  .chart-track{grid-area:2 / 1 / 3 / -1;height:38px}
}

/* ── Two-column fit lists ─────────────────────────────────────────────── */
.fit{display:grid;gap:var(--s6);margin-top:var(--s6)}
@media (min-width:820px){ .fit{grid-template-columns:1fr 1fr;gap:var(--s7)} }
.fit-h{display:flex;align-items:center;gap:10px;font-size:var(--t-sm);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink)}
.fit-h i{width:8px;height:8px;border-radius:50%;background:var(--mark-solid)}
.fit--no .fit-h i{background:rgba(var(--rule-c),.3)}
.fit ul{list-style:none;margin:var(--s4) 0 0;padding:0;
  display:flex;flex-direction:column}
.fit li{padding:13px 0;border-top:1px solid rgba(var(--rule-c),.12);
  font-size:var(--t-sm);line-height:1.55;color:var(--ink-soft)}

/* ── Quote band ───────────────────────────────────────────────────────── */
.quotes{display:grid;gap:var(--s5);margin-top:var(--s6);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.q{padding:var(--s5);border:1px solid rgba(var(--rule-c),.14);
  border-radius:var(--r-lg);background:var(--card);position:relative;
  overflow:hidden;
  transition:border-color .3s var(--ease),transform .45s var(--ease-out),
             box-shadow .45s var(--ease-out),background .3s var(--ease)}
.q::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .45s var(--ease);
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%),
    rgba(var(--sheen),var(--sheen-a)),transparent 62%)}
.q:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);
  border-color:rgba(var(--rule-c),.24);background:var(--card-hover)}
.q:hover::after{opacity:1}
.q p{font-family:var(--face-display);font-size:1.16rem;line-height:1.42;
  color:var(--ink);margin:0}
.q cite{display:block;margin-top:var(--s3);font-style:normal;
  font-size:var(--t-xs);color:var(--graphite)}
body.no-motion .q,body.no-motion .q::after{transition:none}

/* ── Section heads for the web layer ──────────────────────────────────── */
.head{max-width:62ch}
.head .kicker{display:block;font-size:var(--t-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--mark);font-weight:600;
  margin-bottom:var(--s3)}
.head h2{font-family:var(--face-display);font-weight:400;
  font-size:clamp(2rem,4.4vw,3.05rem);line-height:1.09;letter-spacing:-.012em;
  color:var(--ink);margin:0;text-wrap:balance}
.head p{margin-top:var(--s4);font-size:clamp(1rem,1.5vw,1.12rem);
  line-height:1.62;color:var(--ink-soft)}
.src{margin-top:var(--s5);font-size:var(--t-xs);color:var(--graphite)}
.src a{color:inherit}

/* ── Closing CTA ──────────────────────────────────────────────────────── */
.close{text-align:center}
.close .head{margin-inline:auto}
.close .hero-cta{justify-content:center}

/* ── Footer ───────────────────────────────────────────────────────────── */
.pagefoot{border-top:1px solid rgba(var(--rule-c),.12);padding-block:var(--s5);
  display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;
  font-size:var(--t-xs);color:var(--graphite)}

/* ── Reveal. Aave float-in: rise + scale, staggered. ──────────────────── */
.rv{opacity:0;transform:translateY(18px) scale(.995);
  transition:opacity .6s cubic-bezier(.19,1,.22,1),
             transform .6s cubic-bezier(.19,1,.22,1)}
.rv.in{opacity:1;transform:none}
body.no-motion .rv{opacity:1;transform:none;transition:none}

/* Skip link — the accessibility floor, not an afterthought. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;
  background:var(--paper);color:var(--ink);border-radius:var(--r-ctl);
  border:1px solid rgba(var(--rule-c),.3)}
.skip:focus{left:var(--s3);top:var(--s3)}

.nav .btn{white-space:nowrap}
.nav .btn .sm{display:none}
@media (max-width:820px){
  .nav .btn .lg{display:none}
  .nav .btn .sm{display:inline}
}

@media (max-width:768px){
  /* --t-xs is .68rem = 10.9px, under the 12px mobile floor. */
  :root{--t-xs:.78rem}
}

@media (max-width:560px){
  :root{--nav-h:60px}
  .nav{gap:10px;padding:0 16px}
  .nav-x,.nav-cc{display:none}   /* the hero eyebrow carries the lockup */
  /* The wordmark is 1068x96, so an 18px HEIGHT is a 200px WIDTH and it was
     pushing the primary CTA past the right edge. Constrain the long axis. */
  .nav-brand{min-width:0}
  .nav-brand .logo{height:auto;max-height:16px;max-width:124px;
    object-fit:contain;object-position:left center}
  .nav .toggle{padding:0 10px}
  .btn{width:100%}
  .nav .btn{width:auto}
  .rig{max-width:330px}
  .hero-grid{gap:var(--s6)}
}