/* Homepage (V2 editorial cover) — promoted from homepage-with-copy-2.html */

:root {
    --bg: #050607;
    --bg-2: #0b0d0f;
    --bg-3: #101214;
    --accent: #B6F500;
    --accent-dim: #8bc000;
    --text: #f4f5f6;
    --dim: rgba(255,255,255,.64);
    --dim-2: rgba(255,255,255,.46);
    --hair: rgba(255,255,255,.10);
    --hair-strong: rgba(255,255,255,.20);
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --ease: cubic-bezier(.22,.61,.36,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
    --max: 1440px;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  body { overflow-x: hidden; }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

  /* Utility tokens ------------------------------------------------------ */
  .mono {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
  }
  .label-lime { color: var(--accent); }
  .label-dim  { color: var(--dim); }
  .display {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: .98;
  }
  .wrap { max-width: var(--max); margin: 0 auto; padding: 0 min(5vw, 72px); }

  /* Fixed nav ----------------------------------------------------------- */
  /* Adaptive theme: nav inverts to dark glyphs when a .section-light is
     currently crossing the top of the viewport (toggled by an
     IntersectionObserver below). Coexists with .is-scrolled. */
  /* Logo recolor on light bg: the lime wordmark would render poorly
     (and `filter: invert(1)` shifts lime → purple), so we hide the
     original `<img>` and paint a field-green wordmark on the parent
     anchor via background-image. */

  /* Solutions dropdown — minimal list */

  /* =====================================================================
     SECTION 1 — HERO  (Exploding image hero · continuous loop + scroll)
     ---------------------------------------------------------------------
     Structure:
       .hero            — full-viewport stage (normal flow, 100vh)
         .explode-stage — image cards (cycle outward from center, looped)
         .hero-inner    — centered headline / sub / CTAs
     Each card cycles on its own time loop (different durations + phase
     offsets so cards emerge continuously). Page scrolling is normal —
     no sticky lock — but scroll velocity is added to the virtual time
     clock, so scrolling speeds up the warp.
     ===================================================================== */
  .hero {
    position: relative;
    min-height: 100vh;
    padding: 14vh 5vw 10vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--hair);
    background: #000;
    isolation: isolate;
  }

  /* Subtle grid overlay — center-anchored mask */
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 0%, transparent 70%);
    pointer-events: none;
    z-index: 3;
  }

  /* Explosion stage — fills the hero. No z-index on the stage itself so
     each card's individual z (declared via class) stacks correctly
     relative to the headline (.hero-inner is z 5):
       .is-back  → z 1   (flies past BEHIND the type)
       .is-front → z 12  (flies past IN FRONT of the type) */
  .explode-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
  }
  .expl-card {
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.06);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,.10);
    will-change: transform, opacity;
    pointer-events: none;
    /* JS writes per frame: translate3d(rx, ry, 0) scale(s) + opacity */
  }
  .expl-card.is-back {
    z-index: 1;
    box-shadow: 0 14px 38px rgba(0,0,0,.55);
  }
  .expl-card.is-front {
    z-index: 12;            /* above .hero-inner (z 5) */
    box-shadow: 0 24px 60px rgba(0,0,0,.72);
  }
  .expl-card--placeholder {
    background:
      repeating-linear-gradient(
        45deg,
        rgba(255,255,255,.06) 0 8px,
        rgba(255,255,255,.02) 8px 16px
      );
    border-color: rgba(255,255,255,.08);
  }

  .hero-inner {
    position: relative;
    z-index: 5;
    max-width: var(--max);
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    pointer-events: none; /* let cursor reach the stage */
  }
  .hero-inner > * { pointer-events: auto; } /* re-enable for actual content */

  /* Soft blurred black halo behind the centered text — boosts legibility
     against the swirling cards without a hard edge. Sits inside hero-inner
     so it auto-tracks the text block size, but absolute-positioned and
     behind the children via z-index. */
  .hero-halo {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(520px, 60vw, 920px);
    aspect-ratio: 1.4 / 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      ellipse at center,
      rgba(0,0,0,.85) 0%,
      rgba(0,0,0,.7)  35%,
      rgba(0,0,0,.35) 60%,
      rgba(0,0,0,0)   80%
    );
    filter: blur(36px);
    -webkit-filter: blur(36px);
    pointer-events: none;
    z-index: -1;
  }

  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 36px;
  }
  .hero-eyebrow .dot {
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
    animation: pulse 2.6s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(182,245,0,.6); }
    50%      { opacity: .7; box-shadow: 0 0 0 6px rgba(182,245,0,0); }
  }

  .hero h1 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    font-size: clamp(40px, 5.5vw, 88px);
    line-height: .96;
    max-width: 26ch;
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25em;
    /* faint glow makes type read against busy cards */
    text-shadow: 0 2px 30px rgba(0,0,0,.65);
  }
  .hero h1 .line-2 { color: var(--text); flex-basis: 100%; }
  /* Electric-green disc + line-art fly mark, composed in CSS so the fly keeps
     a comfortable margin inside the circle. (The baked favicon packs the fly
     edge-to-edge — fine at favicon size, but cramped/clipped-looking at hero
     scale.) The disc matches Oswald's cap-height; the mark sits at ~56%. */
  .hero h1 .title-fly {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: .82em;
    width: .82em;
    margin-left: .22em;
    /* .82em matches Oswald's cap height (measured: 0.819em), so the circle is
       exactly as tall as the capitals beside it.

       The offset raises it onto the cap band. An inline-flex box takes its
       baseline from its first flex item, not from its own bottom edge — here
       that is the <img>, whose baseline is its bottom edge. The img is 56% of
       .82em and centred, so .18em of circle hangs below the text baseline and
       the circle's centre lands ~.18em under the centre of the capitals.
       Measured from rendered pixels: 19.8px at a 112.3px font = .176em.
       In em so it holds across clamp(38px, 7.4vw, 132px). */
    vertical-align: .176em;
    border-radius: 50%;
    background: var(--accent);
  }
  .hero h1 .title-fly img {
    width: 56%;
    height: 56%;
    object-fit: contain;
  }

  .hero-sub {
    margin-top: 28px;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(18px, 2vw, 28px);
    letter-spacing: .005em;
    color: var(--dim);
    text-shadow: 0 2px 18px rgba(0,0,0,.6);
  }
  .fixed-pre,
  .fixed-post { color: var(--text); }
  .subject-wrap {
    position: relative;
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
  }
  .subject {
    display: inline-block;
    color: var(--accent);
    transition: transform .55s var(--ease-out), opacity .35s var(--ease);
  }
  .subject.out {
    transform: translateY(-100%);
    opacity: 0;
  }
  .subject.in {
    transform: translateY(100%);
    opacity: 0;
  }

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

  /* =====================================================================
     SECTION 2 + 3 — STATS + TRUSTED-BY  (one cohesive zone)
     ---------------------------------------------------------------------
     Layout & interactions inspired by the Option-B kinetic-marquee
     reference. All branding/type/palette resolves through the
     .section-light cream theme variables already in place.
     ===================================================================== */
  .stats {
    padding: 110px 0 64px;
  }
  .stats-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 min(5vw, 72px);
  }
  .stats-headline {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 3.2vw, 42px);
    line-height: 1.12;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    color: var(--dim);
    max-width: 26ch;
    margin-bottom: 56px;
  }
  .stats-headline em {
    font-style: normal;
    color: var(--accent);
    font-weight: 600;
  }
  /* Word-stagger reveal — words wrapped in .word spans, played on scroll-in */
  .stats-headline .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity   .55s var(--ease-out) calc(var(--i, 0) * 55ms),
      transform .55s var(--ease-out) calc(var(--i, 0) * 55ms);
  }
  .stats-headline.is-in .word { opacity: 1; transform: translateY(0); }

  /* Stat block — matches solution-page .stat-cell: flush hairline grid,
     no per-cell background, hover only colors the text in accent and
     reveals the detail line below. */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--hair);
    border-left: 1px solid var(--hair);
  }
  .stat {
    border-right: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    padding: 36px 32px 32px;
    min-height: 220px;
    position: relative;
    overflow: hidden;
    container-type: inline-size;  /* lets .stat-num size itself off the card width (cqw) */
  }
  .stat-num {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: clamp(48px, 5vw, 76px);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    margin-bottom: 18px;
    transition: color .25s var(--ease);
  }
  .stat-num .unit {
    font-size: .42em;
    color: var(--dim);
    margin-left: 4px;
    font-weight: 400;
    transition: color .25s var(--ease);
  }
  .stat-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 14px;
    transition: color .25s var(--ease);
  }
  .stat-detail {
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--dim);
    text-transform: none;
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .stat:hover .stat-detail { opacity: 1; transform: translateY(0); }
  .stat:hover .stat-num,
  .stat:hover .stat-num .unit,
  .stat:hover .stat-label { color: var(--accent); }

  /* ---- Trusted-by marquee --------------------------------------------- */
  .logos {
    padding: 24px 0 100px;
    overflow: hidden;
    position: relative;
  }
  .logos-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
  }
  .logos-rows::before,
  .logos-rows::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 14vw;
    z-index: 2;
    pointer-events: none;
  }
  .logos-rows::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
  .logos-rows::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }

  .logo-row {
    display: flex;
    gap: 0;
    width: max-content;
  }
  .logo-row.row-1 { animation: marquee-left  50s linear infinite; }
  .logo-row.row-2 { animation: marquee-right 60s linear infinite; }
  /* Pause only the lane the cursor is on — the other lane keeps moving */
  .logo-row:hover { animation-play-state: paused; }
  /* A continuously moving row is exactly what 2.3.3 / reduced-motion is for.
     Stopping it leaves a static, readable wall of logos: the duplicate half
     simply sits off to the right, out of view. */
  @media (prefers-reduced-motion: reduce) {
    .logo-row.row-1, .logo-row.row-2 { animation: none; }
  }
  @keyframes marquee-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
  @keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

  /* Real customer marks, not text. The box is fixed and the image is
     object-fit: contain, which is what lets marks with wildly different
     proportions share one optical scale — NASCAR's wordmark is 5.9:1 and the
     NFL shield is 0.72:1, so matching on height alone would make one dominate
     and the other vanish. Marks keep their own colours: they are used here
     exactly as greenfly.com already publishes them, and recolouring or
     desaturating a third-party mark is the kind of thing brand guidelines
     tend to prohibit. The slight rest-opacity keeps the row calm without
     touching hue. */
  .logo {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 40px;
  }
  .logo img {
    width: 120px;
    height: 52px;
    object-fit: contain;
    opacity: .62;
    transition: opacity .22s var(--ease);
  }
  .logo:hover img { opacity: 1; }

  /* =====================================================================
     SECTION 4 — VALUE PILLARS (reuses the pipeline animation)
     ===================================================================== */
  .pillars-intro {
    padding: 14vh 5vw 4vh;
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
    gap: 4vw;
    align-items: end;
  }
  .pillars-intro h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: clamp(36px, 5vw, 72px);
    line-height: .98;
    max-width: 14ch;
  }
  .pillars-intro h2 .accent { color: var(--accent); }
  .pillars-intro p {
    color: var(--dim);
    font-size: 16px;
    line-height: 1.55;
    max-width: 48ch;
  }

  /* Pipeline section ---------------------------------------------------- */
  .pipeline {
    position: relative;
    height: calc(4 * 100vh + 100vh);
  }
  .sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
  }
  .sticky-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(480px, 1.7fr);
    height: 100%;
    padding: 6vh 5vw;
    gap: 4vw;
    max-width: var(--max);
    margin: 0 auto;
  }

  /* Beat counter (top-left of sticky stage) */
  .beat-counter {
    position: absolute;
    top: 6vh;
    right: 5vw;
    display: flex;
    gap: 6px;
    z-index: 4;
  }
  .beat-tick {
    width: 28px;
    height: 2px;
    background: var(--hair);
    transition: background .4s var(--ease);
  }
  [data-seg="0"] ~ * .beat-tick:nth-child(1),
  [data-seg="1"] ~ * .beat-tick:nth-child(-n+2),
  [data-seg="2"] ~ * .beat-tick:nth-child(-n+3),
  [data-seg="3"] ~ * .beat-tick:nth-child(-n+4) { background: var(--accent); }

  /* Text column --------------------------------------------------------- */
  .text-col { position: relative; height: 100%; }
  .beat {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 420ms var(--ease), transform 420ms var(--ease);
    pointer-events: none;
  }
  [data-seg="0"] .beat[data-beat="0"],
  [data-seg="1"] .beat[data-beat="1"],
  [data-seg="2"] .beat[data-beat="2"],
  [data-seg="3"] .beat[data-beat="3"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .beat-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .24em;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 22px;
  }
  .beat h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: clamp(32px, 3.6vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin-bottom: 20px;
    max-width: 14ch;
  }
  .beat p {
    font-size: 15px;
    line-height: 1.55;
    color: var(--dim);
    max-width: 38ch;
  }
  .beat-meta {
    margin-top: 32px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
  }
  .beat-meta .meta-item {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
    padding: 6px 10px;
    border: 1px solid var(--hair);
  }
  .beat-meta .meta-item b { color: var(--accent); font-weight: 500; }

  /* Stage --------------------------------------------------------------- */
  .viz-col { position: relative; height: 100%; }
  .stage { position: absolute; inset: 0; overflow: hidden; }

  .photo {
    position: absolute;
    overflow: hidden;
    outline: 1px solid rgba(255,255,255,.06);
    z-index: 5;
    will-change: transform, width, height, left, top;
  }
  .photo img {
    position: absolute;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
    will-change: width, height, left, top;
  }
  .stage { --op-0: 1; --op-1: 0; --op-2: 0; --op-3: 0; }

  .hud-rec {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 8px 4px 7px;
    background: var(--accent); color: #000;
    font-family: var(--mono); font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    display: inline-flex; align-items: center; gap: 7px;
    opacity: var(--op-0); z-index: 3;
  }
  .hud-rec::before { content: ""; display: block; width: 5px; height: 5px; background: #000; }

  .bboxes { position: absolute; inset: 0; pointer-events: none; opacity: var(--op-1); }
  .bbox { position: absolute; border: 2px solid var(--accent); box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
  .bbox::before {
    content: attr(data-label); position: absolute; left: -2px; bottom: 100%;
    background: var(--accent); color: #000;
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    letter-spacing: .16em; padding: 4px 8px 4px; text-transform: uppercase;
    white-space: nowrap; line-height: 1;
  }
  .bbox::after {
    content: attr(data-conf) "%"; position: absolute; top: 5px; right: 5px;
    background: rgba(0,0,0,.75); color: var(--accent);
    font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
    padding: 2px 5px; line-height: 1;
  }
  .bbox-ball { left: 32%; top: 48%; width: 44%; height: 48%; }
  .bbox-net  { left: 52%; top:  3%; width: 44%; height: 46%; }
  .bbox-play { left: 26%; top:  2%; width: 70%; height: 96%; border-width: 1px; opacity: .45; }
  .bbox-play::before { background: transparent; color: var(--accent); padding-left: 0; }
  .bbox-play::after  { display: none; }

  .stamp {
    position: absolute; top: 10px; left: 10px;
    padding: 4px 8px; background: #000; color: var(--accent);
    font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
    text-transform: uppercase; font-weight: 600;
    opacity: var(--op-2); z-index: 3;
  }

  .source-chips { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: var(--op-0); }
  .source-chip {
    position: absolute; padding: 7px 10px;
    border: 1px solid var(--hair); background: rgba(10,11,12,.85);
    font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text); white-space: nowrap;
  }
  .source-chip:nth-child(1) { top: 8%;  left: 4%;    }
  .source-chip:nth-child(2) { bottom: 14%; left: 6%; }
  .source-chip:nth-child(3) { bottom: 8%; right: 8%; }

  .tag-chips {
    position: absolute; top: 32%; left: 66%;
    display: flex; flex-direction: column; gap: 8px;
    pointer-events: none; z-index: 3; opacity: var(--op-1);
  }
  .tag-chip {
    padding: 7px 12px; border: 1px solid var(--hair);
    background: rgba(10,11,12,.85);
    font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text); white-space: nowrap;
    width: fit-content; border-left: 2px solid var(--accent);
  }

  .rails {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 2; pointer-events: none; opacity: var(--op-2);
  }
  .rail { stroke: var(--accent); stroke-width: 1; stroke-opacity: .55; vector-effect: non-scaling-stroke; fill: none; }

  .dests { position: absolute; inset: 0; pointer-events: none; z-index: 3; opacity: var(--op-2); }
  .dest {
    position: absolute; width: 24%; padding: 14px 16px;
    border: 1px solid var(--hair); background: rgba(10,11,12,.9);
  }
  .dest-label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
  .dest-sub   { font-family: var(--mono); font-size: 9px;  letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-top: 6px; }
  .dest-num {
    font-family: 'Oswald', sans-serif; font-weight: 500;
    font-size: clamp(20px, 2vw, 26px); color: var(--text);
    letter-spacing: -0.01em; line-height: 1; text-transform: uppercase;
  }
  .dest:nth-child(1) { top: 10%; left: 56%; }
  .dest:nth-child(2) { top: 34%; left: 64%; }
  .dest:nth-child(3) { top: 58%; left: 64%; }
  .dest:nth-child(4) { top: 82%; left: 56%; }

  .dashboard {
    position: absolute; inset: 4% 4% 6% 4%;
    padding: 20px; background: rgba(11,13,15,.94);
    border: 1px solid var(--hair); box-shadow: 0 30px 60px rgba(0,0,0,.55);
    display: grid; grid-template-columns: 17% 1fr;
    grid-template-rows: auto auto auto; gap: 16px;
    z-index: 2; pointer-events: none; opacity: var(--op-3);
  }
  .dash-thumb { border: 1px solid var(--hair); min-height: 100%; position: relative; }
  .kpis { grid-column: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .kpi { border: 1px solid var(--hair); padding: 12px 14px; }
  .kpi-label { font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--dim); text-transform: uppercase; margin-bottom: 6px; }
  .kpi-value { font-family: 'Oswald', sans-serif; font-weight: 500; font-size: clamp(20px, 1.9vw, 26px); color: var(--text); letter-spacing: -0.01em; }
  .chart {
    grid-column: 1 / -1;
    display: flex; align-items: flex-end; gap: 5px;
    padding: 14px 2px 10px;
    border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
    height: 92px;
  }
  .bar { flex: 1; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform 520ms var(--ease); }
  .stage[data-bars-on="1"] .bar { transform: scaleY(1); }
  .bar:nth-child(1)  { height: 35%;  transition-delay: 80ms; }
  .bar:nth-child(2)  { height: 55%;  transition-delay: 140ms; }
  .bar:nth-child(3)  { height: 42%;  transition-delay: 200ms; }
  .bar:nth-child(4)  { height: 68%;  transition-delay: 260ms; }
  .bar:nth-child(5)  { height: 78%;  transition-delay: 320ms; }
  .bar:nth-child(6)  { height: 64%;  transition-delay: 380ms; }
  .bar:nth-child(7)  { height: 85%;  transition-delay: 440ms; }
  .bar:nth-child(8)  { height: 92%;  transition-delay: 500ms; }
  .bar:nth-child(9)  { height: 76%;  transition-delay: 560ms; }
  .bar:nth-child(10) { height: 100%; transition-delay: 620ms; }
  .asset-id {
    grid-column: 1 / -1; font-family: var(--mono);
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--dim); display: flex; justify-content: space-between; gap: 12px;
  }
  .asset-id span.acc { color: var(--accent); }

  /* =====================================================================
     SECTION 4 v2 — PILLARS (editorial grid + live ops log)
     ===================================================================== */
  /* ===================================================================
     SECTION SCROLL-REVEAL — ported from Solutions · Sports (.reveal/.is-in)
     A data-reveal hook is used instead of a .reveal class because the
     closing stack already uses .reveal with the opposite meaning (adding
     it SHOWS a line). Sections fade + lift in once on scroll; the grid
     items inside fade up in a short cascade layered on top. js/index.js
     adds .is-in via an IntersectionObserver. Disabled under reduced motion.
     =================================================================== */
  [data-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .8s var(--ease-out), transform .9s cubic-bezier(.16,1,.3,1);
  }
  [data-reveal].is-in { opacity: 1; transform: none; }

  /* Inner cascade — fade only (no transform) so it layers on the section
     lift without compounding motion, and never fights the cards' own hover
     transforms. */
  [data-reveal] .verb-card,
  [data-reveal] .sol-panel,
  [data-reveal] .press-card {
    opacity: 0;
    transition: opacity .6s var(--ease-out);
  }
  /* The accordion panels own a `transition: flex-grow` for their hover expand.
     A `transition` declaration replaces the whole property, so the reveal fade
     above would wipe out that hover transition (making the expand snap). Restate
     both here so the panel keeps its smooth hover AND fades in on reveal. */
  [data-reveal] .sol-panel {
    transition: opacity .6s var(--ease-out), flex-grow 620ms var(--ease);
  }
  [data-reveal].is-in .verb-card,
  [data-reveal].is-in .sol-panel,
  [data-reveal].is-in .press-card { opacity: 1; }
  [data-reveal].is-in .verb-card:nth-child(1),
  [data-reveal].is-in .sol-panel:nth-child(1),
  [data-reveal].is-in .press-card:nth-child(1) { transition-delay: .10s; }
  [data-reveal].is-in .verb-card:nth-child(2),
  [data-reveal].is-in .sol-panel:nth-child(2),
  [data-reveal].is-in .press-card:nth-child(2) { transition-delay: .18s; }
  [data-reveal].is-in .verb-card:nth-child(3),
  [data-reveal].is-in .sol-panel:nth-child(3),
  [data-reveal].is-in .press-card:nth-child(3) { transition-delay: .26s; }
  [data-reveal].is-in .verb-card:nth-child(4),
  [data-reveal].is-in .sol-panel:nth-child(4),
  [data-reveal].is-in .press-card:nth-child(4) { transition-delay: .34s; }
  [data-reveal].is-in .verb-card:nth-child(5),
  [data-reveal].is-in .press-card:nth-child(5) { transition-delay: .42s; }
  [data-reveal].is-in .verb-card:nth-child(6),
  [data-reveal].is-in .press-card:nth-child(6) { transition-delay: .50s; }

  @media (prefers-reduced-motion: reduce) {
    [data-reveal],
    [data-reveal] .verb-card,
    [data-reveal] .sol-panel,
    [data-reveal] .press-card {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

  .pillars-v2 { border-bottom: 1px solid var(--hair); }

  .pillar-head {
    padding: 18vh 5vw 8vh;
    max-width: var(--max);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr);
    gap: 4vw;
    align-items: end;
  }
  .pillar-head h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: clamp(36px, 5vw, 72px);
    line-height: .98;
    max-width: 14ch;
  }
  .pillar-head h2 .accent { color: var(--accent); }
  .pillar-head p {
    color: var(--dim);
    font-size: 16px;
    line-height: 1.55;
    max-width: 48ch;
  }

  .pillar-panel {
    max-width: var(--max);
    margin: 0 auto;
    padding: 10vh 5vw;
    border-top: 1px solid var(--hair);
    position: relative;
  }
  .pillar-grid {
    display: grid;
    gap: 5vw;
    align-items: center;
  }
  .pillar-grid.v-lr { grid-template-columns: minmax(320px, .95fr) 1.05fr; }
  .pillar-grid.v-rl { grid-template-columns: 1.05fr minmax(320px, .95fr); }

  .pillar-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
  }
  .pillar-num {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 48px;
    color: var(--accent);
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .pillar-tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--dim);
  }
  .pillar-copy h3 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    font-size: clamp(34px, 4.4vw, 60px);
    line-height: .98;
    margin-bottom: 22px;
    max-width: 16ch;
  }
  .pillar-copy p {
    color: var(--dim);
    font-size: 16px;
    line-height: 1.55;
    max-width: 46ch;
  }
  .pillar-chips {
    margin-top: 32px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  .pillar-chip {
    padding: 10px 14px;
    border: 1px solid var(--hair);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dim);
  }
  .pillar-chip b { color: var(--accent); font-weight: 500; }
  .pillar-copy h3 .accent { color: var(--accent); }

  .viz {
    position: relative;
    background: var(--bg-2);
    border: 1px solid var(--hair);
    overflow: hidden;
  }
  .viz::before {
    content: attr(data-viz-id);
    position: absolute;
    top: 18px; left: 20px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dim);
    z-index: 3;
  }

  /* ---------- Viz 1: Speed — stopwatch + batch bars ---------- */
  .viz-speed {
    aspect-ratio: 1 / 1;
    padding: 56px 40px 32px;
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 24px;
  }
  .stopwatch {
    position: relative;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 1;
    margin: 0 auto;
  }
  .stopwatch svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .stopwatch-track {
    stroke: var(--hair);
    stroke-width: 1;
    fill: none;
  }
  .stopwatch-arc {
    stroke: var(--accent);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 289;
    stroke-dashoffset: 289;
    transition: stroke-dashoffset 2s var(--ease);
  }
  .stopwatch.drawn .stopwatch-arc { stroke-dashoffset: 0; }
  .stopwatch-old {
    position: absolute;
    top: 26%; left: 0; right: 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dim-2);
  }
  .stopwatch-old span {
    text-decoration: line-through;
    text-decoration-color: rgba(255,255,255,.35);
  }
  .stopwatch-new {
    position: absolute;
    top: 38%; left: 0; right: 0;
    text-align: center;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: clamp(64px, 6vw, 96px);
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .stopwatch-new small {
    display: block;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--dim);
    font-weight: 400;
    margin-top: 12px;
  }

  .batch-bars {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .batch-bar {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr 48px;
    gap: 14px;
    align-items: center;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dim);
  }
  .batch-bar .bar-track {
    height: 2px;
    background: var(--hair);
    position: relative;
    overflow: hidden;
  }
  .batch-bar .bar-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: var(--accent);
    transition: width 1.4s var(--ease);
  }
  .batch-bar .bar-count { text-align: right; color: var(--dim); }
  .batch-bar.done .bar-fill { width: 100%; }
  .batch-bar.done .bar-count { color: var(--accent); }

  /* ---------- Viz 2: Scale — mosaic + populating tags ---------- */
  .viz-scale {
    aspect-ratio: 1.05 / 1;
    padding: 52px 22px 22px;
  }
  .mosaic {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    height: 100%;
  }
  .mosaic-cell {
    position: relative;
    aspect-ratio: 1;
    background: linear-gradient(135deg, #1a1e22, #0a0c0e);
    overflow: hidden;
  }
  .mosaic-cell::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at var(--x, 40%) var(--y, 40%), rgba(182,245,0,.18), transparent 60%),
      linear-gradient(135deg, rgba(255,255,255,.05), transparent 55%);
  }
  .mini-tag {
    position: absolute;
    bottom: 3px; left: 3px; right: 3px;
    padding: 3px 5px;
    background: var(--accent);
    color: #000;
    font-family: var(--mono);
    font-size: 7px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mosaic-cell.tagged .mini-tag {
    opacity: 1;
    transform: translateY(0);
  }
  .mosaic-counter {
    position: absolute;
    top: 16px; right: 20px;
    padding: 8px 12px;
    background: rgba(10,11,12,.88);
    border: 1px solid var(--hair);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dim);
    z-index: 3;
  }
  .mosaic-counter b { color: var(--accent); font-weight: 500; }

  /* ---------- Viz 3: Reach — constellation map ---------- */
  .viz-reach {
    aspect-ratio: 1.2 / 1;
    padding: 48px 30px 30px;
  }
  .reach-stage {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .reach-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .reach-line {
    stroke: var(--accent);
    stroke-width: 1;
    stroke-opacity: .5;
    fill: none;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.2s var(--ease);
    vector-effect: non-scaling-stroke;
  }
  .reach-line.drawn { stroke-dashoffset: 0; }
  .reach-center {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 96px; height: 96px;
    border: 2px solid var(--accent);
    background: var(--bg-2);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 600;
    z-index: 3;
  }
  .reach-center::after {
    content: "";
    position: absolute;
    inset: -10px;
    border: 1px solid rgba(182,245,0,.25);
    animation: pulse-ring 2.4s ease-out infinite;
  }
  @keyframes pulse-ring {
    0%, 100% { transform: scale(1);    opacity: .25; }
    50%      { transform: scale(1.12); opacity: .05; }
  }
  .reach-node {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 9px 12px;
    background: rgba(10,11,12,.92);
    border: 1px solid var(--hair);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .4s var(--ease);
    z-index: 2;
  }
  .reach-node.on { opacity: 1; }
  .reach-node b { color: var(--accent); font-weight: 500; }

  /* ---------- Viz 4: Impact — chart + tally + attribution ---------- */
  .viz-impact {
    aspect-ratio: 1.1 / 1;
    padding: 48px 32px 32px;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 28px;
  }
  .impact-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
  }
  .impact-tally {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: clamp(48px, 5.2vw, 80px);
    line-height: 1;
    color: var(--accent);
    letter-spacing: -0.02em;
  }
  .impact-tally small {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dim);
    font-weight: 400;
    margin-top: 12px;
  }
  .impact-chart {
    position: relative;
    height: 140px;
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
  }
  .impact-chart svg { width: 100%; height: 100%; display: block; }
  .impact-chart path.line {
    stroke: var(--accent);
    stroke-width: 1.5;
    fill: none;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 2s var(--ease);
  }
  .impact-chart.drawn path.line { stroke-dashoffset: 0; }
  .impact-chart path.area {
    fill: url(#impactGradient);
    opacity: 0;
    transition: opacity .9s var(--ease) 1s;
  }
  .impact-chart.drawn path.area { opacity: 1; }

  .attribution { display: flex; flex-direction: column; }
  .attribution-head {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    padding-bottom: 12px;
    border-bottom: 1px solid var(--hair);
  }
  .attr-row {
    display: grid;
    grid-template-columns: 1.4fr .6fr .6fr;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--hair);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dim);
  }
  .attr-row:last-child { border-bottom: 0; }
  .attr-id { color: var(--text); }
  .attr-reach { text-align: right; }
  .attr-emv { color: var(--accent); text-align: right; }

  /* ---------- Live Ops Log Strip ---------- */
  .live-ops {
    border-top: 1px solid var(--hair);
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
    padding: 90px 0 110px;
  }
  .live-ops-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 min(5vw, 72px);
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 4vw;
    align-items: start;
  }
  .live-ops-head .mono { display: block; margin-bottom: 14px; }
  .live-ops-head h4 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(28px, 2.6vw, 36px);
    line-height: 1.05;
    margin-bottom: 18px;
    letter-spacing: -0.01em;
  }
  .live-ops-head p {
    color: var(--dim);
    font-size: 13px;
    line-height: 1.6;
    max-width: 30ch;
  }
  .live-ops-pills {
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ops-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border: 1px solid var(--hair);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dim);
    transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
  }
  .ops-pill.hot {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(182,245,0,.06);
  }
  .pill-dot {
    width: 6px; height: 6px;
    background: var(--hair-strong);
    border-radius: 50%;
    transition: background .3s var(--ease);
  }
  .ops-pill.hot .pill-dot { background: var(--accent); }

  .log-wrap {
    border: 1px solid var(--hair);
    background: rgba(0,0,0,.45);
    height: 420px;
    overflow: hidden;
    position: relative;
  }
  .log-head {
    padding: 14px 20px;
    border-bottom: 1px solid var(--hair);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dim);
  }
  .log-head .live-dot {
    width: 5px; height: 5px;
    background: var(--accent);
    border-radius: 50%;
    display: inline-block;
    margin-right: 8px;
    vertical-align: middle;
    animation: pulse 1.6s ease-in-out infinite;
  }
  .log-stream {
    padding: 8px 20px;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 2;
    color: var(--text);
    height: calc(100% - 45px);
    overflow: hidden;
    position: relative;
  }
  .log-stream::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.85));
    pointer-events: none;
  }
  .log-line {
    display: grid;
    grid-template-columns: 74px 76px 1fr;
    gap: 16px;
    white-space: nowrap;
    animation: log-in .4s var(--ease);
  }
  @keyframes log-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .log-time { color: var(--dim-2); }
  .log-verb { color: var(--accent); font-weight: 500; letter-spacing: .14em; }
  .log-detail { color: var(--dim); overflow: hidden; text-overflow: ellipsis; }
  .log-detail b { color: var(--text); font-weight: 500; }

  /* ---------- Flash-card stack: slot-driven with peeking head spines ---------- */
  .pillars-stack {
    position: relative;
    height: calc(5 * 100vh);
  }
  .pillars-stack-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: var(--bg);
  }
  /* Each card is smaller than the sticky viewport so a margin around it reveals
     the back cards' head strips. Top offset clears the fixed nav AND leaves
     breathing room above the fanned deck — the back cards step up to -132px
     (slot 3), so the offset has to absorb that before the topmost spine still
     reads as having air above it; bottom offset leaves a comfortable footer gap. */
  .pillar-card {
    position: absolute;
    top: 18vh;
    left: 6vw;
    right: 6vw;
    bottom: 6vh;
    /* Card chrome stops growing past the content cap — keeps the bordered
       paper hugging its 1440px interior on large displays. */
    max-width: var(--max);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    border: 1px solid var(--hair-strong);
    transition:
      transform .95s cubic-bezier(.25, 0, .15, 1),
      opacity   .55s var(--ease),
      box-shadow .55s var(--ease);
    pointer-events: none;
    will-change: transform, opacity;
    overflow: hidden;
  }
  /* Slot 0 = current card (fully visible). Slot N>0 = behind, stepped up
     and to the left by an equal increment per slot so each card's top-right
     corner peeks out and the deck reads as a neatly fanned pile. Advancing
     one slot is a clean diagonal toward center — no direction changes.
     Each slot has a staggered transition-delay so cards cascade into place
     rather than moving in lockstep. */
  .pillar-card[data-slot="0"]  {
    transform: translate(0, 0) scale(1);
    z-index: 100; pointer-events: auto; transition-delay: 120ms;
    box-shadow:
      0 -10px 30px -8px rgba(0,0,0,.55),
      0 24px 48px -16px rgba(0,0,0,.55);
  }
  .pillar-card[data-slot="1"]  {
    transform: translate(-32px, -44px) scale(.985);
    z-index: 99;  transition-delay: 180ms;
    box-shadow: 0 -8px 24px -10px rgba(0,0,0,.5);
  }
  .pillar-card[data-slot="2"]  {
    transform: translate(-64px, -88px) scale(.97);
    z-index: 98;  transition-delay: 240ms;
    box-shadow: 0 -6px 20px -10px rgba(0,0,0,.45);
  }
  .pillar-card[data-slot="3"]  {
    transform: translate(-96px, -132px) scale(.955);
    z-index: 97;  transition-delay: 300ms;
    box-shadow: 0 -4px 16px -10px rgba(0,0,0,.4);
  }
  /* Exited card leaves first (no delay), staying on top as it slides down
     off the bottom of the viewport. */
  .pillar-card[data-slot="-1"],
  .pillar-card[data-slot="-2"],
  .pillar-card[data-slot="-3"] {
    transform: translate(0, 105vh);
    opacity: 0;
    z-index: 101;
    transition-delay: 0ms;
  }

  .pillar-card-inner {
    flex: 1;
    min-height: 0;
    max-width: var(--max);
    width: 100%;
    margin: 0 auto;
    padding: 4vh min(4vw, 58px) 4vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Compact head strip — lives at the very top of each card so it peeks out
     above the next one when the card is stacked behind. */
  .pillar-card-head {
    flex: 0 0 auto;
    height: 52px;
    padding: 0 min(3vw, 43px);
    background: var(--bg-2);
    border-bottom: 1px solid var(--hair);
    display: flex;
    align-items: center;
    gap: 22px;
  }
  .pillar-card-head .pillar-num {
    font-size: 24px;
    line-height: 1;
  }
  .pillar-card-head .pillar-spacer { flex: 1; }
  .pillar-card-head .pillar-progress {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dim);
  }
  .pillar-card-head .pillar-progress b { color: var(--accent); font-weight: 500; }

  .pillar-card-body {
    flex: 1;
    display: grid;
    gap: min(5vw, 72px);
    align-items: center;
    min-height: 0;
  }
  .pillar-card-body.v-lr { grid-template-columns: minmax(320px, .95fr) 1.05fr; }
  .pillar-card-body.v-rl { grid-template-columns: 1.05fr minmax(320px, .95fr); }

  /* In card mode, override per-viz aspect ratios so each fits in the smaller
     card body (card ≈ 70vh - head - padding ≈ 56vh content area). */
  .pillar-card .viz-speed,
  .pillar-card .viz-scale,
  .pillar-card .viz-reach,
  .pillar-card .viz-impact {
    aspect-ratio: auto;
    height: 72vh;
    max-height: 72vh;
    align-self: center;
    padding: 0;
    display: block;
  }
  /* SVG illustrations fill the viz frame, mono label is rendered inside the SVG */
  .pillar-card .viz::before { display: none; }
  .pillar-card .viz svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* Static PNG illustrations: drop the card chrome and let the artwork breathe */
  img.pillar-illustration {
    background: transparent;
    border: 0;
    width: 100%;
    object-fit: contain;
  }

  /* Segmented progress rail — one tick per card, lights as you pass each */
  .pillar-progress-rail {
    position: absolute;
    bottom: 28px; left: 5vw; right: 5vw;
    display: flex;
    gap: 8px;
    z-index: 10;
    pointer-events: none;
  }
  .pillar-progress-seg {
    flex: 1;
    height: 2px;
    background: var(--hair);
    transition: background .45s var(--ease);
  }
  .pillar-progress-seg.active {
    background: var(--accent);
  }

  @media (max-width: 900px) {
    .pillar-head { grid-template-columns: 1fr; gap: 24px; padding-top: 12vh; }
    .pillar-grid.v-lr, .pillar-grid.v-rl { grid-template-columns: 1fr; gap: 40px; }
    .pillar-grid.v-rl > .pillar-copy { order: -1; }
    .viz-impact { grid-template-columns: 1fr; aspect-ratio: auto; gap: 36px; }
    .live-ops-inner { grid-template-columns: 1fr; gap: 40px; }
    .log-wrap { height: 340px; }

    /* Flash-card stack: collapse to flat stacked panels */
    .pillars-stack { height: auto; }
    .pillars-stack-sticky { position: static; height: auto; overflow: visible; }
    .pillar-card {
      position: static;
      top: auto; left: auto; right: auto; bottom: auto;
      transform: none !important;
      opacity: 1 !important;
      box-shadow: none;
      border: none;
      border-top: 1px solid var(--hair);
      background: transparent;
    }
    .pillar-card[data-card="0"] { border-top: 0; }
    .pillar-card-head { height: auto; padding: 4vh 5vw 3vh; background: transparent; border-bottom: 1px solid var(--hair); }
    .pillar-card-head .pillar-num { font-size: 44px; }
    .pillar-card-inner { padding: 6vh 5vw 8vh; }
    .pillar-card-body.v-lr, .pillar-card-body.v-rl { grid-template-columns: 1fr; gap: 40px; }
    .pillar-card-body.v-rl > .pillar-copy { order: -1; }
    .pillar-card .viz-speed,
    .pillar-card .viz-scale,
    .pillar-card .viz-reach,
    .pillar-card .viz-impact {
      height: auto;
      max-height: none;
      aspect-ratio: 1 / 1;
    }
    .pillar-progress-rail { display: none; }
  }

  /* =====================================================================
     SECTION 5 — CONTENT IS A MUSCLE
     ===================================================================== */
  .muscle {
    border-top: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
    padding: 18vh 0;
    background:
      radial-gradient(ellipse at 70% 20%, rgba(182,245,0,.05), transparent 60%),
      var(--bg);
    position: relative;
  }
  .muscle-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 min(5vw, 72px);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 6vw;
    align-items: center;
  }
  .muscle-headline {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    font-size: clamp(48px, 7vw, 104px);
    line-height: .95;
  }
  .muscle-headline .verb {
    display: inline-block;
    color: var(--accent);
    position: relative;
    min-width: 5ch;
    transition: opacity .3s var(--ease);
  }
  .muscle-headline .verb::after {
    content: "";
    position: absolute;
    bottom: 6px; left: 0; right: 0;
    height: 2px;
    background: var(--accent);
    opacity: .35;
  }

  .muscle-right { display: flex; flex-direction: column; gap: 40px; }
  .muscle-tabs {
    display: flex;
    gap: 0;
    position: relative;
    border-bottom: 1px solid var(--hair);
  }
  .muscle-tab {
    padding: 18px 22px 18px 0;
    margin-right: 28px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dim);
    position: relative;
    transition: color .2s var(--ease);
  }
  .muscle-tab:last-child { margin-right: 0; }
  .muscle-tab:hover { color: var(--text); }
  .muscle-tab.active { color: var(--accent); }
  .muscle-tab-indicator {
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    transition: left .45s var(--ease-out), width .45s var(--ease-out);
  }

  .muscle-body {
    position: relative;
    min-height: 180px;
  }
  .muscle-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
    pointer-events: none;
  }
  .muscle-panel.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .muscle-panel h4 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: clamp(20px, 1.8vw, 26px);
    letter-spacing: -.005em;
    line-height: 1.15;
    margin-bottom: 18px;
    max-width: 28ch;
  }
  .muscle-panel p {
    color: var(--dim);
    font-size: 15px;
    line-height: 1.6;
    max-width: 50ch;
  }
  .muscle-panel .reps {
    margin-top: 24px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
  }
  .muscle-panel .rep {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dim);
  }
  .muscle-panel .rep b { color: var(--text); font-weight: 500; }

  /* =====================================================================
     SECTION 6 — PROOF
     ===================================================================== */
  .proof {
    padding: 16vh 0;
    border-bottom: 1px solid var(--hair);
  }
  .proof-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 min(5vw, 72px);
  }
  .proof-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 4vw;
    margin-bottom: 64px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--hair);
  }
  .proof-head h2 {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    font-size: clamp(36px, 5vw, 68px);
    line-height: 1;
    max-width: 16ch;
  }
  .proof-head h2 .accent { color: var(--accent); }
  .proof-head p {
    color: var(--dim);
    font-size: 15px;
    max-width: 40ch;
    line-height: 1.55;
  }

  .proof-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 24px;
  }
  .video-frame {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--bg-2);
    border: 1px solid var(--hair);
    overflow: hidden;
  }
  .video-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 50% 50%, rgba(182,245,0,.12), transparent 60%),
      linear-gradient(180deg, #0d1015, #07080a);
  }
  .video-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  }
  .video-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .play-btn {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform .25s var(--ease);
  }
  .play-btn:hover { transform: scale(1.05); }
  .play-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
  }
  .play-btn::before {
    content: "";
    width: 0; height: 0;
    border-left: 22px solid #000;
    border-top: 13px solid transparent;
    border-bottom: 13px solid transparent;
    margin-left: 5px;
  }
  .play-btn::after {
    content: "";
    position: absolute;
    inset: -14px;
    border: 1px solid rgba(182,245,0,.4);
    border-radius: 50%;
    animation: play-ring 2.4s ease-out infinite;
  }
  @keyframes play-ring {
    0%   { transform: scale(1);   opacity: .7; }
    100% { transform: scale(1.6); opacity: 0;  }
  }

  .video-meta {
    position: absolute;
    bottom: 18px; left: 18px; right: 18px;
    display: flex;
    justify-content: space-between;
    z-index: 3;
  }
  .video-meta .chip {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 6px 10px;
    background: rgba(0,0,0,.6);
    border: 1px solid var(--hair);
  }
  .video-meta .chip b { color: var(--accent); font-weight: 500; }

  .proof-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  .editorial {
    position: relative;
    border: 1px solid var(--hair);
    background: var(--bg-2);
    min-height: 280px;
    overflow: hidden;
  }
  .editorial-panel {
    position: absolute;
    inset: 0;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
    pointer-events: none;
  }
  .editorial-panel.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .editorial-kind {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 18px;
  }
  .editorial-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -.005em;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.1;
    margin-bottom: 16px;
  }
  .editorial-desc {
    color: var(--dim);
    font-size: 14px;
    line-height: 1.55;
  }
  .editorial-foot {
    margin-top: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dim);
  }
  .editorial-foot .go { color: var(--accent); }
  .editorial-dots {
    position: absolute;
    top: 18px; right: 18px;
    display: flex; gap: 6px;
    z-index: 3;
  }
  .editorial-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--hair-strong);
    transition: background .3s var(--ease);
  }
  .editorial-dot.active { background: var(--accent); }

  .benchmarks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--hair);
    border-left: 1px solid var(--hair);
  }
  .bench {
    padding: 22px 24px;
    border-right: 1px solid var(--hair);
    border-bottom: 1px solid var(--hair);
  }
  .bench-num {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: clamp(26px, 2.6vw, 36px);
    line-height: 1;
    letter-spacing: -0.01em;
    margin-bottom: 10px;
  }
  .bench-num .unit { color: var(--accent); }
  .bench-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dim);
  }

  /* =====================================================================
     SECTION 7 — CLOSING STACK
     ===================================================================== */
  .close {
    padding: 22vh 5vw 20vh;
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .close::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(182,245,0,.06), transparent 60%);
    pointer-events: none;
  }
  .close-inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
  }
  .close-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
  }
  .close-line {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    font-size: clamp(40px, 6.6vw, 104px);
    line-height: 1;
    color: var(--dim);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), color .5s var(--ease);
  }
  .close-line.reveal { opacity: 1; transform: translateY(0); }
  .close-line.final {
    color: var(--text);
    margin-top: 28px;
  }
  .close-line.final .accent { color: var(--accent); }

  /* Typewriter — single rotating word inside the close line. */
  .close-typing-line { color: var(--text); }
  /* Mobile: the 40px floor wraps the full phrase to 2 lines, but the word
     types in/out through 1-line states — that oscillation shoved the CTAs.
     Reserve 2 lines (line-height:1 → 2em) so "Get Greenfly" + the buttons
     stay fixed; the line wraps into the reserved space as the word grows.
     (Block flow only — a flex container would stack "The" / word / "that get
     it." vertically and break the sentence.) */
  @media (max-width: 600px) {
    .close-typing-line { min-height: 2em; }
  }
  .typewriter {
    display: inline-block;
    white-space: nowrap;
  }
  .typewriter-word {
    color: var(--text);
    font-variant-ligatures: none;
  }
  .typewriter-caret {
    display: inline-block;
    width: .055em;
    height: .82em;
    margin-left: .06em;
    vertical-align: -0.06em;
    background: var(--accent);
    animation: typewriter-blink 1.05s steps(2, end) infinite;
  }
  @keyframes typewriter-blink {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .typewriter-caret { animation: none; opacity: .6; }
  }
  .close-ctas {
    margin-top: 68px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* =====================================================================
     FOOTER — editorial dispatch
     Layout: masthead strip · wordmark + manifesto · 4-col nav · legal+status
     ===================================================================== */
  /* Interactive hex grid — generated via JS, faded smoothly to pure black */
  .hex-cell-shape {
    fill: transparent;
    stroke: var(--accent);
    stroke-opacity: .13;
    stroke-width: 1;
    transition: stroke-opacity .25s var(--ease), fill .25s var(--ease);
    cursor: pointer;
    pointer-events: all; /* hover the whole hex, not only its 1px stroke */
  }
  .hex-fly {
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease-out), transform .35s var(--ease-out);
    transform-origin: center;
    transform: scale(.75);
  }
  .hex-cell:hover .hex-cell-shape {
    fill: var(--accent);
    stroke-opacity: 1;
  }
  .hex-cell:hover .hex-fly {
    opacity: 1;
    transform: scale(1);
  }

  /* Hover reach-through: content containers ignore pointer events so empty
     space passes clicks to the hex grid behind. Only the visible/interactive
     leaf elements (wordmark image, nav links, legal links) re-enable events,
     which keeps the bands on either side of the wordmark hoverable. */

  /* ---------- Stage: wordmark only ---------- */

  /* ---------- 3-col nav grid, centered ---------- */

  /* ---------- Legal strip with live system status ---------- */
  @keyframes footer-status-pulse {
    0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(182,245,0,.5); }
    50%      { opacity: .55; box-shadow: 0 0 0 6px rgba(182,245,0,0); }
  }

  /* =====================================================================
     MOBILE
     ===================================================================== */
  @media (max-width: 900px) {
    .stats { padding: 80px 5vw 48px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .stat { min-height: 200px; padding: 28px 22px 22px; }
    .stat-num { font-size: clamp(44px, 8vw, 60px); }
    .logo { padding: 22px 26px; }
    .logo img { width: 92px; height: 40px; }
    .muscle-inner { grid-template-columns: 1fr; gap: 48px; }
    .pillars-intro { grid-template-columns: 1fr; gap: 28px; }
    .proof-grid { grid-template-columns: 1fr; }
    .proof-head { flex-direction: column; align-items: flex-start; }
    .hero-halo { width: 92vw; }
  }
  /* Keep every stat number on ONE line at all viewports. "2–5min" is the
     widest (~2.6em incl. the en-dash break opportunity + unit) and the 48px
     floor above overflows a 4-up card below ~1250px, wrapping at the dash.
     cqw sizing scales the number to its card; all four cards share equal
     grid tracks, so the numbers shrink in lockstep and stay uniform.
     Placed after the ≤900px block so it also outranks that clamp. Guarded
     by @supports: legacy browsers keep the old behavior. */
  @supports (container-type: inline-size) {
    .stat-num {
      font-size: clamp(24px, 36cqw, 76px);
      white-space: nowrap;
    }
  }
  @media (max-width: 720px) {
    .pillars-intro h2, .proof-head h2, .muscle-headline { font-size: clamp(36px, 9vw, 56px); }
    .pipeline { height: auto; }
    .sticky { position: static; height: auto; overflow: visible; background: transparent; }
    .sticky-grid { grid-template-columns: 1fr; padding: 4vh 6vw; gap: 0; height: auto; }
    .text-col { height: auto; }
    .beat {
      position: static;
      opacity: 1;
      transform: none;
      pointer-events: auto;
      padding: 40px 0;
      border-bottom: 1px solid var(--hair);
    }
    .beat:last-of-type { border-bottom: none; }
    .viz-col, .beat-counter { display: none; }
    .muscle-tabs { flex-wrap: wrap; }
    .muscle-tab { margin-right: 16px; padding: 14px 0; }
  }

  /* =====================================================================
     EDITORIAL LIGHT SECTIONS (.section-light)
     ---------------------------------------------------------------------
     Warm cream background with an olive accent. Applied to Muscle and
     Proof so the page gets a magazine-like editorial interlude between
     the dark data-heavy zones. Works by re-declaring the theme CSS
     custom properties; most existing rules resolve their var()s against
     the new values automatically. Targeted overrides handle the few
     places where dark-specific colors were hardcoded (video frame,
     grid pattern, chip bg).
     ===================================================================== */

  /* Muscle — swap the lime radial glow for an olive one */
  .section-light.muscle {
    background:
      radial-gradient(ellipse at 70% 20%, rgba(121,152,45,.07), transparent 60%),
      var(--bg);
  }

  /* Proof — invert the dark video frame, flip chip bg, re-tone the grid */
  .section-light .video-frame {
    background: var(--bg-2);
  }
  .section-light .video-frame::before {
    background:
      radial-gradient(circle at 50% 50%, rgba(121,152,45,.14), transparent 60%),
      linear-gradient(180deg, var(--bg-2), var(--bg-3));
  }
  .section-light .video-frame::after {
    background-image:
      linear-gradient(to right,  rgba(15,15,15,.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,15,15,.05) 1px, transparent 1px);
  }
  .section-light .play-btn::after {
    border-color: rgba(121,152,45,.4);
  }
  .section-light .video-meta .chip {
    background: rgba(255,255,255,.72);
    color: var(--text);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .section-light .editorial {
    background: var(--bg-2);
  }

  /* Stats — editorial light band (forms opening editorial spread with logos) */
  .section-light.stats {
    border-bottom-color: var(--hair);
  }

  /* Logos — hair rules re-tone on cream; edge fade inherits var(--bg) = cream */
  .section-light.logos {
    border-bottom-color: var(--hair);
  }

  /* Live Ops — editorial light band nested inside the dark pillars section.
     Drops the top border (bg color change is the separator) and adds a soft
     olive wash to echo the Muscle section below. */
  .section-light.live-ops {
    border-top: 0;
    background:
      radial-gradient(ellipse at 20% 30%, rgba(121,152,45,.07), transparent 55%),
      linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
  }
  .section-light .log-wrap {
    background: rgba(255,255,255,.62);
    border-color: var(--hair-strong);
  }
  .section-light .log-stream { color: var(--text); }
  .section-light .log-stream::after {
    background: linear-gradient(to bottom, transparent, rgba(238,238,232,.95));
  }
  .section-light .log-time     { color: var(--dim-2); }
  .section-light .log-verb     { color: var(--accent); }
  .section-light .log-detail   { color: var(--dim); }
  .section-light .log-detail b { color: var(--text); }
  .section-light .ops-pill.hot {
    background: rgba(121,152,45,.10);
    border-color: var(--accent);
    color: var(--accent);
  }

  /* Pulse ring re-tones to olive (the base @keyframes pulse is hardcoded lime) */
  @keyframes pulse-olive {
    0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(121,152,45,.55); }
    50%      { opacity: .7; box-shadow: 0 0 0 6px rgba(121,152,45,0); }
  }
  .section-light .live-dot {
    animation: pulse-olive 1.6s ease-in-out infinite;
  }

  /* ========== PLATFORM & SOLUTIONS SNEAK-PEEK (placeholder) ==========
     Minimal section layout. Full content pending copy/design approval
     (issues #29 and #30). Reuses: .section-light, .display, .mono,
     .label-lime, .btn, .btn-ghost. */
  .peek {
    padding: 10vh 0;
  }
  .peek-inner {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 min(5vw, 72px);
  }
  .peek-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px 80px;
    align-items: end;
    margin-bottom: 60px;
  }
  .peek-head .mono { color: var(--accent); margin-bottom: 18px; display: inline-block; }
  .peek-head h2 { font-size: clamp(40px, 5.4vw, 80px); margin-bottom: 20px; }
  .peek-head p { max-width: 52ch; color: var(--dim); font-size: 18px; line-height: 1.55; }
  .peek-head .btn { align-self: end; white-space: nowrap; }
  .peek-body {
    border: 1px dashed var(--hair-strong);
    border-radius: 8px;
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dim-2);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  .peek-body::after { content: "[ Content placeholder — to be added ]"; }

  /* ========== PLATFORM TEASER — the Greenfly Arc (issue #29) ==========
     Light-mode editorial card row mirroring the six verb sections on
     platform.html. Verbs + decks match that page verbatim. One neutral
     arrow CTA to the platform page — cards themselves don't link out. */
  .verbs-head {
    margin-bottom: 56px;
  }
  .verbs-head-text { max-width: 720px; }
  /* --accent-ink, not --accent: this eyebrow is 11px, and on a .section-light
     --accent is #75932C = 3.02:1 against the cream, short of the 4.5:1 small
     text needs. --accent-ink is the same electric green on dark sections, so
     this is only a change where it was failing. */
  .verbs-head .mono { color: var(--accent-ink); display: inline-block; margin-bottom: 18px; }
  .verbs-head h2 { font-size: clamp(36px, 4.6vw, 64px); margin-bottom: 18px; line-height: 1.02; }
  .verbs-head p { color: var(--dim); font-size: 18px; line-height: 1.6; max-width: 56ch; }
  .verbs-head-cta { margin-top: 32px; }

  .verbs-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* Full frame — the left/right outer borders were missing (only top/bottom
       were set). Cards supply the internal dividers via border-left; the
       :first-child border-left reset below keeps the left edge from doubling. */
    border: 1px solid var(--hair-strong);
  }
  .verb-card {
    display: flex;
    flex-direction: column;
    padding: 36px 28px 40px;
    border-left: 1px solid var(--hair);
    text-decoration: none;
    color: inherit;
    transition: background 220ms var(--ease);
    min-width: 0;  /* let grid tracks shrink below the title's intrinsic width */
    container-type: inline-size;  /* lets .verb-title size itself off the card width (cqw) */
  }
  .verb-card:first-child { border-left: none; }
  .verb-card:hover { background: var(--bg-2); }
  .verb-num {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(46px, 4.6vw, 76px);
    line-height: 1;
    letter-spacing: 0;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--accent);
    text-stroke: 1.5px var(--accent);
    margin-bottom: 22px;
  }
  .verb-title {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-size: clamp(26px, 2vw, 34px);
    line-height: 1;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
  }
  /* Never let a verb break mid-word ("DISTRIBUT/E") at any viewport.
     base.css sets a global overflow-wrap: break-word (for URLs), which is
     what allowed the split; the 26px floor above is wider than a 6-up card
     in the ~1100–1250px band, so the title must instead SCALE to its card.
     cqw = 1% of the card's content width (container-type on .verb-card).
     "Distribute" ≈ 5.5em in Oswald 600 → 16cqw keeps it ≤ 88% of the card
     at every column count (6/3/2/1-up). Guarded by @supports so browsers
     without container queries keep today's wrapping instead of overflowing. */
  @supports (container-type: inline-size) {
    .verb-title {
      font-size: clamp(15px, 16cqw, 34px);
      white-space: nowrap;
      overflow-wrap: normal;
    }
  }
  /* Arrow — appears only on hover/focus to cue clickability. Uses opacity
     (not display) so the card layout never shifts. */
  .verb-arrow {
    font-family: var(--mono);
    font-size: 18px;
    line-height: 1;
    color: var(--accent);
    margin-top: 18px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  }
  .verb-card:hover .verb-arrow,
  .verb-card:focus-visible .verb-arrow { opacity: 1; transform: translateX(0); }
  .verb-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }

  /* 6-up is tight below ~1100px → reflow to 3-up, then 2-up. The left-border
     dividers reset per row so the leading card of each row stays clean. */
  @media (max-width: 1100px) {
    .verbs-grid { grid-template-columns: repeat(3, 1fr); }
    .verb-card { border-top: 1px solid var(--hair); }
    .verb-card:nth-child(3n+1) { border-left: none; }
    .verb-card:nth-child(1),
    .verb-card:nth-child(2),
    .verb-card:nth-child(3) { border-top: none; }
  }
  @media (max-width: 640px) {
    .verbs-grid { grid-template-columns: repeat(2, 1fr); }
    .verb-card { padding: 28px 20px 32px; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
    .verb-card:nth-child(odd) { border-left: none; }
    .verb-card:nth-child(1),
    .verb-card:nth-child(2) { border-top: none; }
    .verb-num { margin-bottom: 18px; }
  }
  /* Narrow phones (375/320): 2-up cramps the long titles (Distribute, Organize)
     and forces horizontal overflow → single full-width column. Drop internal
     verticals and put a top divider on every row except the first. The 3-up/
     2-up breakpoints above zero border-top on :nth-child(1..3) at 0,2,0
     specificity, so scope through .verbs-grid here to outrank them. */
  @media (max-width: 480px) {
    .verbs-grid { grid-template-columns: 1fr; }
    .verbs-grid .verb-card { border-left: none; border-top: 1px solid var(--hair); }
    .verbs-grid .verb-card:first-child { border-top: none; }
  }

  /* ========== SOLUTIONS TEASER — expanding image accordion ==========
     Four panels (one per vertical) in a flex row. Hover/focus grows the
     active panel, de-saturates→colorizes its photo, reveals the blurb, and
     turns the label electric green. Each panel links to its solutions
     section. Stacks to fixed-height rows on small screens. */
  .sol-accordion {
    display: flex;
    gap: 6px;
    height: clamp(440px, 62vh, 660px);
  }
  .sol-panel {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 36px 30px;
    text-decoration: none;
    color: #fff;
    transition: flex-grow 620ms var(--ease);
  }
  .sol-panel:hover,
  .sol-panel:focus-visible { flex-grow: 2.6; outline: none; }
  .sol-panel:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
  /* Two stacked layers: grayscale (always on) + color (fades in). Only
     opacity + transform animate — both GPU-composited, so no per-frame
     filter recompute. Static filters rasterize once. */
  .sol-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    transform: scale(1);
    backface-visibility: hidden;
    transition: transform 620ms var(--ease), opacity 480ms var(--ease);
  }
  .sol-img--gray  { filter: grayscale(1) brightness(.74); }
  .sol-img--color { opacity: 0; filter: brightness(.9); }
  .sol-panel:hover .sol-img--color,
  .sol-panel:focus-visible .sol-img--color { opacity: 1; }
  .sol-panel:hover .sol-img,
  .sol-panel:focus-visible .sol-img { transform: scale(1.05); }
  .sol-panel::after {
    content: "";
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.2) 52%, rgba(0,0,0,.45) 100%);
  }
  .sol-num {
    position: absolute; top: 28px; left: 30px; z-index: 2;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    font-size: clamp(28px, 3vw, 46px);
    line-height: 1;
    color: #fff;
  }
  .sol-foot { position: relative; z-index: 2; }
  .sol-label {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: clamp(22px, 2.2vw, 36px);
    line-height: 1.02;
    margin-bottom: 14px;
    transition: color 300ms var(--ease);
  }
  .sol-panel:hover .sol-label,
  .sol-panel:focus-visible .sol-label { color: var(--accent); }
  .sol-arrow {
    display: inline-block;
    font-family: var(--mono);
    font-size: 22px;
    line-height: 1;
    color: var(--accent);
    transition: transform 300ms var(--ease);
  }
  .sol-panel:hover .sol-arrow,
  .sol-panel:focus-visible .sol-arrow { transform: translateX(6px); }

  /* Stack on small screens — fixed-height rows, blurb always visible. */
  @media (max-width: 760px) {
    .sol-accordion { flex-direction: column; height: auto; gap: 8px; }
    .sol-panel { flex: none; min-height: 170px; padding: 26px 24px; }
    .sol-panel:hover, .sol-panel:focus-visible { flex-grow: 0; }
    .sol-img--color { opacity: 1; filter: brightness(.7); }
    .sol-num { font-size: 26px; top: 22px; left: 24px; }
  }

  /* V2 — split layout */
  .peek--split .peek-body { display: none; } /* body is inside .peek-split instead */
  .peek-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  .peek-split--reversed { direction: rtl; }
  .peek-split--reversed > * { direction: ltr; }
  .peek-split-text {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .peek-split-text .mono { margin-bottom: 18px; color: var(--accent); display: inline-block; }
  .peek-split-text h2 { font-size: clamp(40px, 5.4vw, 80px); margin-bottom: 24px; }
  .peek-split-visual {
    border: 1px dashed var(--hair-strong);
    border-radius: 8px;
    min-height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dim-2);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
  }
  .peek-split-visual::after { content: "[ Visual placeholder ]"; }

  /* V2 — feature list */
  .peek-feature-list {
    list-style: none;
    margin: 0 0 32px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .peek-feature-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
    border-bottom: 1px solid var(--hair);
  }
  .peek-feature-list li:first-child { border-top: 1px solid var(--hair); }
  .peek-feature-list strong {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--text);
  }
  .peek-feature-list span { font-size: 14px; color: var(--dim); line-height: 1.45; }

  /* V2 — links variant of feature list */
  .peek-feature-list--links li {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .peek-feature-list--links a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-decoration: none;
    color: var(--text);
    transition: color .2s var(--ease);
  }
  .peek-feature-list--links a:hover { color: var(--accent); }
  .peek-feature-list--links strong {
    font-size: 18px;
  }
  @media (max-width: 900px) {
    .peek-split { grid-template-columns: 1fr; gap: 40px; }
    .peek-split--reversed { direction: ltr; }
  }
  @media (max-width: 768px) {
    .peek-head { grid-template-columns: 1fr; }
  }


  /* ===== CASE STUDIES bento =====
     The component lives in css/press-card.css, shared with stories.html.
     Only the homepage delta stays here: this section closes with a hairline
     divider before the next block, which /stories doesn't want. */
  .press { border-bottom: 1px solid var(--hair); }


  /* Centered peek heading — platform teaser placeholder */
  .peek-head--centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    grid-template-columns: none;
    margin-bottom: 60px;
  }
  .peek-head--centered h2 { max-width: 20ch; }
  .peek-head--centered .btn { align-self: center; }


  /* Solutions teaser — vertical chip buttons (ported from V3) */
  .peek-body--chips { min-height: auto; border: none; flex-direction: column; gap: 40px; padding: 0; }
  .peek-body--chips::after { display: none; }
  .peek-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    width: 100%;
  }
  .peek-chip {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 10px 20px;
    border: 1px solid var(--hair-strong);
    border-radius: 4px;
    color: var(--dim);
    background: var(--bg-2);
  }
  .peek-chip--link {
    text-decoration: none;
    color: var(--text);
    transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
  }
  .peek-chip--link:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-3);
  }