/* ============================================================
   Control - hero
   Hybrid of hero-4-stat-restraint (type/copy/buttons)
   + hero-5-spectrum-beam (inline stat strip)
   + hero-ping-8-flip-ticker (call-card ticker).
   ============================================================ */

:root{
  --bg:#FDFCFC;
  --ink:#14110F;
  --ink-soft:#4A453F;
  --muted:#8C857C;
  --faint:#97979C;
  --hair:#E9E5E0;
  --hair-strong:#DED9D3;
  --line-soft:#EAE8E6;
  --card:#FFFFFF;
  --radius:6px;

  /* the single accent - used sparingly */
  --spectrum:linear-gradient(90deg,#E8552F 0%,#F2953C 19%,#EBC64A 37%,#4FA971 56%,#3E8FD0 75%,#7B62E8 100%);
  --red:#E8552F; --orange:#F2953C; --yellow:#EBC64A;
  --green:#4FA971; --blue:#3E8FD0; --violet:#7B62E8;

  --pad-x:clamp(20px,5vw,64px);
  --u:4px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-feature-settings:"cv02","cv03","cv04","ss01";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
  overflow-x:hidden;
}

.page{min-height:100svh;display:flex;flex-direction:column;position:relative}

/* ---------- nav ---------- */
nav{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:80px;padding:0 var(--pad-x);
  position:relative;z-index:5;
}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo-icon{display:block;height:30px;width:auto}
.nav-right{display:flex;align-items:center;gap:10px}

/* ---------- buttons (hero-4) ---------- */
.btn{
  font-family:inherit;font-size:14px;font-weight:500;letter-spacing:-.005em;
  border-radius:var(--radius);border:1px solid transparent;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  white-space:nowrap;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.nav-ghost{background:transparent;color:var(--ink);padding:9px 14px}
.nav-ghost:hover{background:rgba(20,17,15,.05)}
.nav-solid{background:var(--ink);color:#FBFAF9;padding:9px 18px}
.nav-solid:hover{background:#2B2723}

.cta-primary{background:var(--ink);color:#FBFAF9;padding:13px 24px;font-size:15px}
.cta-primary:hover{background:#2B2723}
.cta-secondary{background:transparent;color:var(--ink);border-color:var(--hair-strong);padding:13px 22px;font-size:15px}
.cta-secondary:hover{border-color:var(--ink);background:rgba(20,17,15,.02)}
.cta-secondary .arrow{display:inline-block;margin-left:7px;transition:transform .2s ease}
.cta-secondary:hover .arrow{transform:translateX(3px)}

/* ---------- hero shell ---------- */
.hero{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.stage{
  flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:32px var(--pad-x) 44px;
}
.hero-inner{max-width:860px;width:100%;display:flex;flex-direction:column;align-items:center}

/* full C logo mark above the headline */
.logo-mark{display:block;height:clamp(56px,7vw,76px);width:auto;margin-bottom:22px}

h1{
  font-weight:300;
  font-size:clamp(2.7rem,7.4vw,5.75rem);
  line-height:1.02;letter-spacing:-.032em;color:var(--ink);
}
h1 .num7{font-variant-numeric:tabular-nums;font-weight:400}

.sub{
  margin:24px auto 0;
  font-size:clamp(1rem,1.4vw,1.125rem);font-weight:400;
  color:var(--muted);letter-spacing:-.005em;white-space:nowrap;
}

.ctas{margin-top:36px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}

/* ---------- stat strip (hero-5 inline treatment) ---------- */
.stats{
  margin-top:clamp(40px,5.5vw,60px);
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:16px;
}
.stat{
  font-size:12.5px;font-weight:400;letter-spacing:.02em;color:var(--faint);
  display:inline-flex;align-items:baseline;gap:6px;
}
.stat b{
  font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.dot{width:3px;height:3px;border-radius:50%;background:var(--line-soft);display:inline-block}

/* ---------- rainbow strip bleeding into the board borders ---------- */
.beam{
  position:relative;flex:0 0 auto;
  height:1px;width:100%;background:var(--hair);   /* the hairline "border" it bleeds into */
}
.beam::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:2px;
  background:var(--spectrum);opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
}

/* ---------- ticker board (hero-ping-8) - uniform right→left, no flips ---------- */
.board{position:relative;flex:0 0 auto;background:var(--bg)}
/* The hero's terminal edge (founder, 2026-07-25).
   A 1px hairline here "looks like a pencil drawn on the page" - it marks the
   boundary without giving the hero any presence, so section 1 still read as a
   continuation of it. Replaced with a surface edge plus light falling off it:
   the board keeps a hairline as its own bottom edge, and a soft gradient
   spills below it onto the page, so the hero reads as a plane the body starts
   underneath rather than a line someone drew.
   This is a sanctioned exception to the flat/no-shadow rule in
   design-rules.md §2 - the founder asked for it explicitly. It is a falloff,
   not a box-shadow: no spread, no blur halo, nothing to bleed sideways. */
.board{border-bottom:1px solid var(--hair-strong)}
.board::after{
  content:"";position:absolute;z-index:2;
  top:100%;left:0;right:0;height:22px;
  background:linear-gradient(180deg,rgba(20,17,15,.055),rgba(20,17,15,0));
  pointer-events:none;
}

.lane{
  position:relative;overflow:hidden;border-bottom:1px solid var(--hair);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.lane:last-child{border-bottom:none}
/* NO `gap` here - deliberately. The lane holds N cards followed by a clone of the same
   N, and the loop animates 0 → -50%. With `gap:10px` the two halves are separated by a
   gap that belongs to NEITHER half, so 50% of the track is one set-width MINUS half a
   gap (5px) and every cycle ended with a 5px snap - the "cards teleport a few px" glitch.
   Giving each chip its own trailing margin makes the track exactly two identical halves,
   so -50% is exactly one set and the seam is invisible. */
.track{display:flex;width:max-content;padding:11px 0;will-change:transform}
.track > .chip{margin-right:10px}
/* every lane scrolls the same direction (right → left); staggered speeds for organic parallax */
.track.s1{animation:scrollL 54s linear infinite}
.track.s2{animation:scrollL 67s linear infinite}
.track.s3{animation:scrollL 60s linear infinite}
@keyframes scrollL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- call card (logo + company + status + title + tool) ---------- */
.chip{
  flex:0 0 348px;position:relative;display:flex;align-items:center;gap:11px;
  background:var(--card);border:1px solid var(--hair);border-radius:9px;
  padding:9px 13px;overflow:hidden;
}
/* Fixed-width, height-capped box: wordmark-only brands (Deloitte, Koch, Blackstone,
   Goldman Sachs) get the full 54px of width instead of being squashed into a square and
   reading as noise. The box width is fixed so every card's text still starts at the
   same x - and marks are LEFT-aligned inside it (founder, 2026-07-24: centering made
   square icons like Figma/Zapier look indented next to full-width wordmarks). */
.chip .glyph{
  /* SHRINK-TO-FIT, capped at 54px (founder, 2026-07-25: "majority of company +
     title text is too far right of the logo... have that text hug the right
     border of the logo"). This box used to be a fixed 54px so every card's text
     started at the same x. That made sense when marks were mixed wordmarks and
     squares - but the roster pass cropped all 174 viewBoxes to their actual ink,
     so most marks are now ~26px squares sitting in a 54px box, leaving ~28px of
     dead air before the text on the majority of cards. Now the box is only as
     wide as its mark, and .chip's gap:11px does the spacing, so text hugs the
     logo. Wide wordmarks still cap at 54px via the svg's max-width below. */
  flex:0 0 auto;width:auto;max-width:54px;height:34px;
  display:flex;align-items:center;justify-content:flex-start;overflow:visible;
  color:var(--bc);   /* currentColor logos render in the brand color; no background tile */
}
/* Rounded because a lot of these marks ARE app icons - a square tile with the brand's
   own background. Wordmarks are transparent, so the radius is invisible on them.
   max-height 26 (was 22): square icons read a touch small against 54px-wide wordmarks.
   Wide wordmarks are width-limited by max-width, so this only grows the square marks.

   --gs is the PER-COMPANY optical scale (`scale` in companies.js, applied by makeChip).
   The geometric cap is the same for everyone; --gs corrects for the fact that equal
   boxes are not equal *ink*: a solid full-bleed app-icon tile reads heavier than an
   open mark, and a tall narrow mark (MongoDB, Netflix) reads smaller than a square one
   at the same height. Default 1 - most entries carry no override. Range is kept inside
   0.9-1.15 so a scaled mark still fits the 54×34 box. */
.chip .glyph svg{
  /* DEFINITE height, auto width: with both auto, an inline svg inside a
     shrink-to-fit parent is circular and computes to 0. A definite height lets
     the browser derive width from the viewBox aspect, which is what makes the
     glyph box hug the mark. max-width still caps the few wide wordmarks. */
  height:calc(26px * var(--gs,1));width:auto;
  max-width:calc(54px * var(--gs,1));
  display:block;border-radius:5px;overflow:hidden;
}
.chip .col{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.chip .row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.chip .co{font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chip .status{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;font-size:10px;letter-spacing:.01em;color:var(--st,var(--muted));white-space:nowrap;font-weight:500}
.chip .status .d{width:5px;height:5px;border-radius:50%;background:var(--st,var(--muted))}
.chip .ttl{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.chip .tool{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.chip .tool svg{width:17px;height:17px;display:block}

/* ---------- reveal choreography (hero-4) ---------- */
.reveal{opacity:0;transform:translateY(10px)}
.revealed .reveal{opacity:1;transform:none;transition:opacity .7s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.revealed .reveal.d1{transition-delay:.05s}
.revealed .reveal.d2{transition-delay:.14s}
.revealed .reveal.d3{transition-delay:.23s}
.revealed .reveal.d4{transition-delay:.34s}
.revealed .reveal.d5{transition-delay:.46s}
.revealed .reveal.d6{transition-delay:.58s}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hide-mid{display:none}
}
@media (max-width:640px){
  .sub{white-space:normal;max-width:34ch}
  .stats{gap:10px}
  .stats .dot{display:none}
  .stat{font-size:12px}
}
@media (max-width:400px){
  nav{height:68px}
}

/* ============================================================
   MOBILE - the contrast floor.   (mobile-playbook G1, blocker)
   ============================================================
   --faint #97979C is 2.84:1 against --bg #FDFCFC. That is below the
   4.5:1 AA floor for small text and below the 3:1 large-text floor
   as well. It is carried at 11-12.5px by every quiet label on the
   site: the hero stat strip, the ROAS assumptions block, the chart
   caption that is the only thing stopping three zero-value months
   reading as a rendering bug, the footer disclaimer, the postal
   address, and the legal pages' metadata and contents heading. On a
   27-inch monitor it reads as "quiet"; at 11px on a handheld in
   daylight it reads as nothing.

   NO NEW TOKEN AND NO NEW COLOUR. --faint is REASSIGNED to the
   existing --muted (3.56:1). Every consumer in hero.css, body.css,
   legal.css and demo.css picks it up from this one declaration -
   --faint is only ever used as a text `color` anywhere in this
   codebase, never as a background, border or fill, so a blanket
   reassignment is safe.

   Gated on touch as well as width so an iPad in portrait (768px,
   outside the 760 phone breakpoint) is covered too. A fine pointer
   at desktop width is untouched.

   --muted itself is 3.56:1 and also under AA. Raising it would make
   the whole page markedly louder, which is the opposite of the
   brand contract's "proof gets quieter" - it is a founder call
   (mobile-playbook 5.1) and is deliberately left alone here. */
@media (max-width:760px),(pointer:coarse){
  :root{--faint:var(--muted)}
}

/* ============================================================
   MOBILE - tap targets.   (mobile-playbook H2)
   ============================================================
   .nav-ghost is 66.7x41 and .nav-solid 113.4x41: three pixels short
   of the 44px floor, on the only two persistent controls the page
   has. Padding only, so the type scale and the optical weight of
   the bar are unchanged. Nav is 68px tall at <=400 and 80px above;
   45px fits inside both. */
@media (pointer:coarse){
  .nav-ghost,
  .nav-solid{padding-top:11px;padding-bottom:11px}
}

/* ============================================================
   MOBILE - the ticker reads as a stream, not a card.  (H3)
   ============================================================
   .chip{flex:0 0 348px} is 89% of a 390px viewport and 97% of a
   360px one, so the board shows one card at a time and the "many
   calls, constantly" argument collapses into a single testimonial.

   Safe to change: the lane holds N chips followed by a clone of the
   same N and the loop animates 0 -> -50%, and each chip carries its
   own trailing margin rather than the track carrying a `gap` (see
   the note on .lane), so the two halves stay exactly equal at any
   chip width and the seam does not move. */
@media (max-width:430px){
  /* 82vw rather than a flat 80: at 360 that is 295px against 288, and the
     extra 7px is what keeps the longest person titles ("Head of Strategy
     & Operations") and company names off the ellipsis. The 268px floor
     only binds below a 327px viewport, where it is what stops a 348px
     card being wider than the screen it is on. */
  .chip{flex:0 0 clamp(268px,82vw,348px);gap:9px;padding:9px 11px}
}

/* ============================================================
   MOBILE - the status label.   (not in the playbook; found in
   the post-fix contrast sweep)
   ============================================================
   .chip .status is set at 10px in one of the six spectrum hues.
   Two floors are broken at once. It is the only type on the site
   under 11px, and as text the accent palette measures 1.61:1
   (yellow) to 4.31:1 (violet) against --bg - orange is 2.24:1 and
   green, the most frequent label colour, is 2.83:1. That is worse
   than --faint was, at a smaller size.

   The label goes to 11px in --muted; the 5px dot keeps --st, so
   the per-status colour signal survives as a graphic rather than
   as 10px of coloured text. No new token, and the spectrum stays
   the single accent. Desktop is untouched, where the label sits at
   a comfortable reading distance in a 348px card. */
@media (max-width:760px),(pointer:coarse){
  .chip .status{font-size:11px;color:var(--muted)}
}

/* ============================================================
   MOBILE - phone on its side.   (mobile-playbook H1)
   ============================================================
   Nothing targeted landscape before this. At 844x390 the hero is
   649px in a 390px viewport, so the fold showed a logo, a headline
   and a subhead: the CTA (top edge y=404), the stat strip and the
   entire ticker board were all below it. The vertical rhythm here is
   tuned for a tall viewport, so on a short one it is spent entirely
   on air. Every value below is a reduction in spacing - no content
   is dropped and no type goes under the 11px floor. */
@media (orientation:landscape) and (max-height:500px){
  nav{height:60px}
  .stage{padding:16px var(--pad-x) 24px}
  .logo-mark{height:40px;margin-bottom:12px}
  h1{font-size:clamp(2rem,4.6vw,3rem)}
  .sub{margin-top:14px}
  .ctas{margin-top:20px}
  .stats{margin-top:22px}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .track{animation:none}
  .cta-secondary .arrow{transition:none}
}