/*
 * Webmakkers — Component Styles
 * Cyberpunk rebrand v1 (2026-06-07)
 *
 * Requires tokens.css to be loaded first.
 * All colours reference CSS custom properties from tokens.css — no hardcoded hex.
 * Dev-only floating .panel is NOT included (stripped per spec Addendum A).
 */

/* ─── Screen-reader-only utility ─────────────────────────────────────────── */
/* Visually hidden but available to assistive tech. Defined here because the
   legacy main.css (which used to provide it) is no longer loaded. Without it,
   sr-only content (the static hero H1 text, form legends) renders visibly. */
.sr-only {
  position:    absolute;
  width:       1px;
  height:      1px;
  padding:     0;
  margin:      -1px;
  overflow:    hidden;
  clip:        rect(0, 0, 0, 0);
  white-space: nowrap;
  border:      0;
}

/* ─── Skip-to-Content ───────────────────────────────────────────────────── */
.skip-link {
  position:       absolute;
  top:            -60px;
  left:           0;
  padding:        12px 20px;
  background:     var(--aqua);
  color:          #04181e;
  font-family:    var(--f-mono);
  font-weight:    700;
  font-size:      14px;
  z-index:        99999;
  transition:     top .2s;
}

.skip-link:focus {
  top: 0;
}

/* ─── Custom Cursor (pointer:fine / desktop only) ────────────────────────── */
.cur {
  position:       fixed;
  top:            0;
  left:           0;
  width:          34px;
  height:         34px;
  border:         1.5px solid var(--aqua);
  border-radius:  50%;
  margin:         -17px 0 0 -17px;
  z-index:        9999;
  pointer-events: none;
  mix-blend-mode: difference;
  transition:     width .2s, height .2s, margin .2s, opacity .2s;
  opacity:        0;
}

@media (pointer: fine) {
  .cur {
    opacity: 0.85;
  }
}

.cur.big {
  width:      64px;
  height:     64px;
  margin:     -32px 0 0 -32px;
  background: var(--aqua-glow);
}

/* ─── Header / Nav ───────────────────────────────────────────────────────── */
header.site {
  position:        sticky;
  top:             0;
  z-index:         100;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
  padding:         15px 24px;
  /* transform = the headroom slide (see .hdr-hidden + guards near the hero) */
  transition:      background .3s, border-color .3s, box-shadow .3s,
                   transform .32s cubic-bezier(.33, .85, .4, 1);
  border-bottom:   1px solid transparent;
}

header.site.scrolled {
  background:      var(--glass-strong);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom:   1px solid var(--bg-border);
  box-shadow:      0 1px 0 var(--aqua-glow);
}

.logo {
  font-family: var(--f-display);
  font-weight: 700;
  font-size:   22px;
  display:     flex;
  align-items: center;
  gap:         9px;
}

.logo img {
  height:  38px;
  width:   auto; /* preserve the wordmark's ~8:1 aspect ratio */
  display: block;
  filter:  drop-shadow(0 0 12px var(--aqua-glow));
}

/* Phones (≤640px) show the compact Wm monogram — a touch smaller than the desktop wordmark */
@media (max-width: 640px) {
  header.site .logo img {
    height: 30px;
  }
}

nav.main {
  display:     flex;
  gap:         26px;
  align-items: center;
}

nav.main a {
  color:       var(--text-muted);
  font-size:   15px;
  font-weight: 500;
  transition:  color .2s, text-shadow .2s;
}

nav.main a:hover {
  color:       #fff;
  text-shadow: 0 0 12px var(--aqua-glow);
}

.nav-right {
  display:     flex;
  gap:         14px;
  align-items: center;
}

/* Mobile-only CTAs inside the nav — hidden on desktop */
nav.main .nav-mobile-ghost,
nav.main .nav-mobile-primary {
  display: none;
}

/* ─── Hamburger Toggle ───────────────────────────────────────────────────── */
.nav-toggle {
  display:         none; /* hidden on desktop */
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  padding:         0;
  border:          1px solid var(--bg-border);
  border-radius:   var(--radius-sm);
  background:      transparent;
  cursor:          pointer;
  color:           var(--text-primary);
  flex-shrink:     0;
  transition:      border-color .2s, box-shadow .2s;
}

.nav-toggle:hover {
  border-color: var(--aqua);
  box-shadow:   0 0 16px -6px var(--aqua-glow);
}

.nav-toggle:focus-visible {
  outline:        2px solid var(--aqua);
  outline-offset: 3px;
}

/* Three-bar icon */
.nav-toggle .bar {
  display:          block;
  width:            20px;
  height:           2px;
  background:       currentColor;
  border-radius:    1px;
  transition:       transform .3s ease, opacity .3s ease;
  transform-origin: center;
}

.nav-toggle .bars {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  pointer-events: none;
}

/* Animate bars → X when open */
header.site.nav-open .nav-toggle .bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
header.site.nav-open .nav-toggle .bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
header.site.nav-open .nav-toggle .bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  font-weight:    600;
  font-size:      15px;
  padding:        11px 20px;
  border-radius:  var(--radius-md);
  border:         1px solid transparent;
  cursor:         pointer;
  transition:     box-shadow .2s, transform .2s, border-color .2s;
  white-space:    nowrap;
  font-family:    var(--f-body);
  text-decoration: none;
}

/* Narrow phones: long (NL) labels wrap instead of clipping past the viewport
   or their card — "Plan een gratis kennismakingsgesprek →" is 339px on one
   line, wider than a 375px screen minus the hero card's padding. */
@media (max-width: 480px) {
  .btn {
    white-space: normal;
    text-align:  center;
  }
}

/* Primary — aqua fill, dark text (WCAG AA: #04181e on #45cdec ✓) */
.btn-primary {
  background:  var(--aqua);
  color:       #04181e;
  box-shadow:  0 0 24px var(--aqua-glow);
}

.btn-primary:hover {
  box-shadow: 0 0 44px var(--aqua-glow);
  transform:  translateY(-1px);
  color:      #04181e;
}

.btn-primary:focus-visible {
  outline:        2px solid #fff;
  outline-offset: 3px;
}

/* Ghost — subtle border, no fill */
.btn-ghost {
  background:   rgba(255,255,255,.03);
  color:        var(--text-primary);
  border-color: var(--bg-border);
}

.btn-ghost:hover {
  border-color: var(--magenta);
  color:        #fff;
  box-shadow:   0 0 28px var(--magenta-glow);
}

.btn-ghost:focus-visible {
  outline:        2px solid var(--magenta);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  /* Show the hamburger button on tablet + mobile */
  .nav-toggle {
    display: flex;
  }

  /* Header bar: hamburger (left) + logo only — hide both CTAs */
  .nav-right {
    display: none;
  }

  /* Align hamburger + logo to the left with comfortable gap */
  header.site {
    justify-content: flex-start;
    gap:             14px;
    padding:         12px 16px;
  }

  /* Logo fills remaining space so nothing crowds */
  header.site .logo {
    margin-right: auto;
  }

  /* Header logo stays the full 38px wordmark on tablet too (≥641px); only ≤640px swaps to the monogram (sized below). */

  /* Mobile/tablet nav — collapsed by default */
  nav.main {
    display:         flex;
    flex-direction:  column;
    position:        fixed;
    top:             var(--hdr-h, 56px);
    left:            0;
    right:           0;
    background:      rgba(8, 11, 30, 0.97); /* near-opaque so menu text stays readable over the hero */
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border-bottom:   1px solid var(--bg-border);
    box-shadow:      0 8px 40px -8px #000;
    padding:         12px 0 20px;
    gap:             0;
    z-index:         99;
    /* Hidden state — slide up + fade */
    opacity:         0;
    transform:       translateY(-8px);
    pointer-events:  none;
    visibility:      hidden;
    transition:      opacity .25s ease, transform .25s ease, visibility 0s .25s;
  }

  /* Open state — slide into view */
  header.site.nav-open nav.main {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
    visibility:     visible;
    transition:     opacity .25s ease, transform .25s ease, visibility 0s 0s;
  }

  nav.main a {
    display:      block;
    padding:      14px 24px;
    font-size:    17px;
    min-height:   44px;
    border-bottom: 1px solid var(--bg-border);
    color:        var(--text-muted);
  }

  nav.main a:last-child {
    border-bottom: none;
  }

  nav.main a:hover,
  nav.main a:focus-visible {
    color:       #fff;
    text-shadow: 0 0 12px var(--aqua-glow);
    background:  rgba(69,205,236,.05);
  }

  /* Ghost CTA inside the mobile menu */
  nav.main .nav-mobile-ghost {
    display:       block;
    margin:        16px 24px 0;
    text-align:    center;
    min-height:    44px;
    padding:       11px 20px;
    border:        1px solid var(--bg-border);
    border-radius: var(--radius-md);
    color:         var(--text-primary);
    font-size:     15px;
    font-weight:   600;
    font-family:   var(--f-body);
    transition:    border-color .2s, box-shadow .2s;
  }

  nav.main .nav-mobile-ghost:hover {
    border-color: var(--magenta);
    box-shadow:   0 0 28px var(--magenta-glow);
  }

  /* Primary CTA inside the mobile menu — filled aqua */
  nav.main .nav-mobile-primary {
    display:       block;
    margin:        10px 24px 0;
    text-align:    center;
    min-height:    44px;
    padding:       11px 20px;
    border:        1px solid var(--aqua);
    border-radius: var(--radius-md);
    background:    var(--aqua);
    color:         #04181e;
    font-size:     15px;
    font-weight:   600;
    font-family:   var(--f-body);
    box-shadow:    0 0 24px var(--aqua-glow);
    transition:    box-shadow .2s, transform .2s;
  }

  nav.main .nav-mobile-primary:hover {
    box-shadow: 0 0 44px var(--aqua-glow);
    transform:  translateY(-1px);
    color:      #04181e;
  }

  nav.main .nav-mobile-primary:focus-visible {
    outline:        2px solid #fff;
    outline-offset: 3px;
  }
}

/* Suppress open/close animation only (menu still works) under reduced-motion */
@media (prefers-reduced-motion: reduce) {
  nav.main {
    transition: none !important;
  }
}

/* ─── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  /* Sized so the brands band peeks above the fold — a scroll cue + first
     proof in the landing viewport (NN/g "illusion of completeness"). The
     sticky header (~80px) sits in flow above the hero, so subtract it:
     header + hero ≈ 90% of the viewport, leaving ~10vh for the band. On
     short viewports the glass-box content sets the height floor instead. */
  min-height: calc(90vh - 80px);
  display:    flex;
  align-items: center;
  padding:    40px 0;
  overflow:   clip;
  isolation:  isolate;
}

/* Matrix canvas — never the LCP element; deferred, fades in */
#matrix {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  z-index:    0;
  opacity:    var(--matrix-opacity);
  mask-image: linear-gradient(to bottom, #000 50%, transparent);
  transition: opacity .4s;
}

/* Neon perspective grid floor */
.grid-floor {
  position:   absolute;
  left:       0;
  right:      0;
  bottom:     0;
  height:     44vh;
  z-index:    0;
  overflow:   hidden;
  opacity:    var(--grid-opacity);
  perspective: 320px;
  mask-image: linear-gradient(transparent, #000 80%);
}

.grid-floor::before {
  content:          "";
  position:         absolute;
  left:             -50%;
  right:            -50%;
  bottom:           0;
  height:           160%;
  transform:        rotateX(74deg);
  transform-origin: bottom;
  background-image:
    linear-gradient(var(--aqua-glow)   1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--magenta-glow) 1.5px, transparent 1.5px);
  background-size: 46px 46px;
  animation:       gridmove 14s linear infinite;
}

@keyframes gridmove {
  to {
    background-position: 0 46px;
  }
}

/* Circuit board SVG overlay (faint, screen blend) */
.circuit {
  position:        absolute;
  inset:           0;
  z-index:         0;
  background:      url(/img/circuit.svg) center / cover no-repeat;
  opacity:         0.06;
  mix-blend-mode:  screen;
  pointer-events:  none;
  mask-image:      radial-gradient(ellipse at 50% 40%, #000, transparent 75%);
}

/* Asymmetric two-column hero layout */
.hero .wrap {
  position:              relative;
  z-index:               2;
  width:                 100%;
  display:               grid;
  grid-template-columns: 1.18fr .82fr;
  gap:                   50px;
  align-items:           center;
}

.hero-left {
  min-width: 0;
}

/* ─── Terminal Card (.term) ──────────────────────────────────────────────── */
.term {
  position:              relative;
  border-radius:         var(--radius-lg);
  overflow:              hidden;
  background:            var(--glass);
  backdrop-filter:       blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border:                1px solid var(--bg-border);
  box-shadow:            0 30px 80px -30px #000, 0 0 50px -22px var(--aqua-glow);
}

/* Gradient border overlay — radius inherits so the hairline always hugs the
   host's actual corners (the deck layer squares .term-block .term on home). */
.term::before {
  content:       "";
  position:      absolute;
  inset:         0;
  border-radius: inherit;
  padding:       1px;
  background:    linear-gradient(120deg, var(--aqua), var(--magenta));
  -webkit-mask:  linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:        0.55;
  pointer-events: none;
}

.term-bar {
  display:          flex;
  align-items:      center;
  gap:              7px;
  padding:          12px 14px;
  border-bottom:    1px solid var(--bg-border);
  background:       rgba(7,10,28,.5);
  position:         relative;
  z-index:          1;
}

.term-bar i {
  width:         11px;
  height:        11px;
  border-radius: 50%;
  display:       inline-block;
}

.term-bar .t {
  margin-left:  10px;
  font-family:  var(--f-mono);
  font-size:    12px;
  color:        var(--text-dim);
}

.term-body {
  padding:    18px;
  font-family: var(--f-mono);
  font-size:  13.5px;
  line-height: 1.9;
  position:   relative;
  z-index:    1;
}

.term-body .c { color: var(--text-dim);  }
.term-body .k { color: var(--magenta);   }
.term-body .s { color: var(--aqua);      }
.term-body .g { color: var(--success);   }

/* Hide terminal card on narrow screens.
   Scoped to terminals INSIDE a hero (other pages still embed .term there).
   The relocated standalone .term-block on the home page stays visible. */
@media (max-width: 900px) {
  .hero .wrap {
    grid-template-columns: 1fr;
    gap:                   34px;
  }

  .hero .term {
    display: none;
  }
}

/* ─── Hero Chip / Byline ─────────────────────────────────────────────────── */
.hero-chip {
  display:       inline-flex;
  align-items:   center;
  gap:           9px;
  border-radius: 999px;
  padding:       8px 16px 8px 14px;
  font-family:   var(--f-mono);
  font-size:     12.5px;
  color:         var(--text-muted);
  margin-bottom: 28px;
}

.hero-chip .pulse {
  width:         8px;
  height:        8px;
  border-radius: 50%;
  background:    var(--success);
  box-shadow:    0 0 12px var(--success);
}

.chip-av {
  width:         24px;
  height:        24px;
  border-radius: 50%;
  object-fit:    cover;
  border:        1px solid var(--aqua);
  box-shadow:    0 0 10px var(--aqua-glow);
}

/* ─── Hero H1 & Typewriter ───────────────────────────────────────────────── */
.hero h1 {
  font-size:     clamp(44px, 6.6vw, 92px);
  margin-bottom: 26px;
  letter-spacing: -.04em;
}

/* The rotating word — visual layer only; base text is always present */
.hero h1 .rot {
  color:       var(--aqua);
  text-shadow: 0 0 calc(40px * var(--glow)) var(--aqua-glow);
  display:     inline-block;
}

/* Typewriter caret */
.hero h1 .cursor {
  display:        inline-block;
  width:          5px;
  height:         0.82em;
  background:     var(--magenta);
  vertical-align: -6px;
  margin-left:    6px;
  animation:      blink 1s steps(1) infinite;
  box-shadow:     0 0 20px var(--magenta);
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Hero lede */
.hero .lede {
  font-size:     clamp(17px, 2vw, 21px);
  color:         var(--text-muted);
  max-width:     50ch;
  margin-bottom: 32px;
}

.hero .lede b {
  color:       #fff;
  font-weight: 600;
}

/* CTA row */
.cta-row {
  display:     flex;
  gap:         14px;
  flex-wrap:   wrap;
  align-items: center;
}

/* Doubt-remover microcopy */
.cta-micro {
  margin-top:  18px;
  font-family: var(--f-mono);
  font-size:   12.5px;
  color:       var(--text-muted);
  display:     flex;
  gap:         16px;
  flex-wrap:   wrap;
}

.cta-micro .tick {
  color: var(--success);
}

/* ════════════════════════════════════════════════════════════════════════════
   HERO — FEATHERED WORKSTATION PHOTO + GLASS HUD + MOUSE-DEPTH PARALLAX
   Ported from the owner-approved /v5 hero (home-v5.css / home-v5.js):
     · me-computer.png is masked into the midnight bg (radial + linear fades,
       mask-composite: intersect) so there is NO hard rectangle.
     · A --bg-toned scrim deepens the left so the glass HUD text reads at AA.
     · Three parallax planes (photo / mid neon glow / HUD) read --px/--py
       (px units injected by initHeroParallax in main.ts) inside translate3d.
   The existing #matrix / .circuit layers stay UNDER the photo (the home hero
   no longer renders .grid-floor; interior-page heroes still do).
   All motion is compositor-only and fully reduced-motion / data-motion gated
   (see the guard blocks further down). Colours come from tokens; the rgba()
   scrims are alpha-tuned versions of --bg-deepest / --aqua / --magenta.
   ════════════════════════════════════════════════════════════════════════════ */

/* Plane 1 — feathered workstation photo (sits above matrix/grid, below text).
   Anchored right so the founder + monitors land on the right; the left half
   stays dark for the HUD copy. */
.hero-photo {
  position:       absolute;
  inset:          0;
  z-index:        1;
  pointer-events: none;
  will-change:    transform;
  /* parallax (slow plane) — translate set via --px/--py in px by JS */
  transform:      translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0) scale(1.06);
}

.hero-photo img {
  position:   absolute;
  top:        50%;
  right:      0;
  left:       auto;
  width:      clamp(560px, 60vw, 1080px);
  height:     auto;
  transform:  translateY(-50%);
  /* Lighting tie-in: lift the neon, settle the muddy mids into the page. */
  mix-blend-mode: screen;
  filter:     saturate(1.08) contrast(1.04) brightness(.96);
  opacity:    .9;

  /* ── FEATHER MASK — radial vignette intersected with top/bottom/left fades.
     Result: a soft oval that dissolves into the bg on every side. ── */
  -webkit-mask-image:
    radial-gradient(78% 82% at 64% 46%, #000 38%, rgba(0,0,0,.55) 62%, transparent 86%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 72%, transparent 99%),
    linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    radial-gradient(78% 82% at 64% 46%, #000 38%, rgba(0,0,0,.55) 62%, transparent 86%),
    linear-gradient(180deg, transparent 0%, #000 16%, #000 72%, transparent 99%),
    linear-gradient(90deg, transparent 0%, #000 26%, #000 100%);
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Tone scrim — pulls the photo toward --bg-deepest and guarantees AA contrast
   for the HUD text on the left. No box edge: pure gradients. */
.hero-scrim {
  position:       absolute;
  inset:          0;
  z-index:        1;
  pointer-events: none;
  background:
    /* left→right text scrim (AA over the photo) */
    linear-gradient(90deg, rgba(7,10,28,.54) 0%, rgba(7,10,28,.34) 32%, rgba(7,10,28,.14) 58%, transparent 82%),
    /* bottom fade so the trust bar below blends in */
    linear-gradient(0deg, var(--bg-deepest) 0%, transparent 32%),
    /* top fade under the fixed header */
    linear-gradient(180deg, var(--bg-deepest) 0%, transparent 22%);
}

/* Plane 2 — mid neon bloom (parallaxes with the photo). */
.hero-glow {
  position:       absolute;
  inset:          -10%;
  z-index:        1;
  pointer-events: none;
  will-change:    transform;
  transform:      translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
  background:
    radial-gradient(38% 42% at 70% 40%, var(--aqua-glow) 0%, transparent 70%),
    radial-gradient(30% 36% at 84% 64%, var(--magenta-glow) 0%, transparent 72%);
  mix-blend-mode: screen;
}

/* Plane 3 wrapper — the hero .wrap parallaxes slightly the OTHER way
   (negative depth) for a layered feel. Declared on .hero .wrap below. */

/* ── Glass HUD box wrapping the hero copy ──────────────────────────────────
   Floats over the photo; styled like the /v5 HUD + contact box (glass,
   aqua hairline edge, cyan/magenta corner brackets, depth shadow). */
.hero-glass {
  position:       relative;
  max-width:      740px;
  padding:        clamp(26px, 3.4vw, 44px);
  border-radius:  var(--radius-xl);
  /* glass surface (token-based) */
  background:                 var(--glass-strong);
  backdrop-filter:            blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter:    blur(var(--glass-blur)) saturate(1.25);
  border:                     1px solid transparent;
  /* aqua hairline edge + soft aqua bloom + depth */
  box-shadow:
    0 0 0 1px var(--aqua-glow),
    0 0 60px -8px var(--aqua-glow),
    0 30px 80px -28px #000;
}

/* Neon corner brackets (echo the photo's cyan + magenta). */
.hero-glass::before,
.hero-glass::after {
  content:        "";
  position:       absolute;
  width:          20px;
  height:         20px;
  pointer-events: none;
}
.hero-glass::before {
  top:         14px;
  left:        14px;
  border-top:  2px solid var(--aqua);
  border-left: 2px solid var(--aqua);
  box-shadow:  -2px -2px 14px var(--aqua-glow);
}
.hero-glass::after {
  right:         14px;
  bottom:        14px;
  border-right:  2px solid var(--magenta);
  border-bottom: 2px solid var(--magenta);
  box-shadow:    2px 2px 14px var(--magenta-glow);
}

/* The HUD reads on the left — keep the asymmetric grid but let the box live in
   the left column; the right column is now the photo's "breathing room". */
.hero.hero--photo .wrap {
  position:    relative;
  z-index:     2;
  will-change: transform;
  transform:   translate3d(calc(var(--px, 0) * 1px), calc(var(--py, 0) * 1px), 0);
  grid-template-columns: minmax(0, 660px) 1fr;
}
/* The glass box never needs the second grid track on the live home. */
.hero.hero--photo .hero-left {
  grid-column: 1;
}

/* ════════════════════════════════════════════════════════════════════════════
   STANDALONE TERMINAL BLOCK
   The .term widget relocated OUT of the hero (between the tech marquee and the
   process section). Same .term markup/styling; just centred in its own band.
   ════════════════════════════════════════════════════════════════════════════ */
.term-block {
  padding: clamp(40px, 7vh, 90px) 0;
}
.term-block .wrap {
  display:         flex;
  justify-content: center;
}
.term-block .term {
  width:     100%;
  max-width: 560px;
}

/* ── Hero parallax / photo: reduced-motion + data-motion=off guards ─────────
   Parallax off (planes reset to their resting transform), photo stays static.
   Mirrors the /v5 guard blocks. */
@media (prefers-reduced-motion: reduce) {
  .hero-photo {
    transform: scale(1.04) !important;
  }
  .hero-glow,
  .hero.hero--photo .wrap {
    transform: none !important;
  }
}
html[data-motion="off"] .hero-photo {
  transform: scale(1.04) !important;
}
html[data-motion="off"] .hero-glow,
html[data-motion="off"] .hero.hero--photo .wrap {
  transform: none !important;
}

/* ── Headroom header + hero hologram + CTA glitch + hero docking ────────────
   Graduated 2026-06-10 from the /v12 concept demo (cyberpunk wow research,
   docs/superpowers/specs/2026-06-10-cyberpunk-wow-research.md). All JS-driven
   (main.ts + the lazy holo-hero chunk); these styles are inert without it. */

/* Headroom: main.ts toggles .hdr-hidden on scroll-down / off on scroll-up. */
header.site.hdr-hidden {
  transform: translateY(-105%);
  pointer-events: none;
}

/* Hero hologram canvas — injected over .hero-photo only after the capability
   gate passes AND a first frame rendered; the static img stays the LCP
   element and the permanent fallback. While live, the WebGL plane (aligned
   to the img box) IS the photo, so the img itself fades out fully. */
.holo-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.holo-canvas.on {
  opacity: 1;
  transition: opacity .9s ease;
}

.hero-photo.holo-live img {
  opacity: 0;
  transition: opacity .9s ease;
}

/* CTA glitch: two inert chromatic copies (injected by main.ts), jittered
   compositor-only on hover/focus — trigger-only, never ambient. */
.btn-primary {
  position: relative;
}

.glitch-copy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
}

@keyframes glitch-a {
  0%   { transform: translate(0, 0); opacity: .85; }
  20%  { transform: translate(-2px, 1px); }
  40%  { transform: translate(2px, -1px); opacity: .55; }
  60%  { transform: translate(-1px, -1px); }
  80%  { transform: translate(1px, 1px); opacity: .8; }
  100% { transform: translate(0, 0); opacity: 0; }
}

@keyframes glitch-b {
  0%   { transform: translate(0, 0); opacity: .85; }
  25%  { transform: translate(2px, -1px); }
  50%  { transform: translate(-2px, 1px); opacity: .5; }
  75%  { transform: translate(1px, -1px); }
  100% { transform: translate(0, 0); opacity: 0; }
}

.btn-primary:hover .glitch-copy:first-of-type,
.btn-primary:focus-visible .glitch-copy:first-of-type {
  color: var(--aqua);
  animation: glitch-a .32s steps(4) 1;
}

.btn-primary:hover .glitch-copy:last-of-type,
.btn-primary:focus-visible .glitch-copy:last-of-type {
  color: var(--magenta);
  animation: glitch-b .32s steps(4) 1;
}

/* Hero → deck docking, driven by --scroll (main.ts initHeroDocking).
   Fallbacks equal the resting pose when JS never writes the variable
   (.hero-glass/.hero-scrim fall back to 0 = rest; trust falls back to 1 =
   fully lit), so no-JS pages look identical to before. */
.hero--photo .hero-glass {
  transform: translate3d(0, calc(var(--scroll, 0) * -26px), 0);
}

.hero--photo .hero-scrim {
  opacity: calc(1 - var(--scroll, 0) * 0.5);
}

.trust .wrap.glass {
  opacity: calc(0.72 + var(--scroll, 1) * 0.28);
}

/* Reduced-motion + manual-toggle parity: headroom never engages (JS resets
   the class), the header keeps its non-transform transitions, glitch stays
   dead, docking collapses to rest. The hologram gate blocks init entirely;
   these guards cover live preference flips mid-session. */
@media (prefers-reduced-motion: reduce) {
  header.site {
    transform: none !important;
    transition: background .3s, border-color .3s, box-shadow .3s;
  }
  .holo-canvas.on,
  .hero-photo.holo-live img {
    transition: none;
  }
  .btn-primary .glitch-copy {
    animation: none !important;
  }
  .hero--photo .hero-glass {
    transform: none !important;
  }
  .hero--photo .hero-scrim,
  .trust .wrap.glass {
    opacity: 1 !important;
  }
}
html[data-motion="off"] header.site {
  transform: none !important;
  transition: background .3s, border-color .3s, box-shadow .3s;
}
html[data-motion="off"] .holo-canvas.on,
html[data-motion="off"] .hero-photo.holo-live img {
  transition: none;
}
html[data-motion="off"] .btn-primary .glitch-copy {
  animation: none !important;
}
html[data-motion="off"] .hero--photo .hero-glass {
  transform: none !important;
}
html[data-motion="off"] .hero--photo .hero-scrim,
html[data-motion="off"] .trust .wrap.glass {
  opacity: 1 !important;
}

/* ── Hero photo + glass: responsive ────────────────────────────────────────
   On tablet/phone the photo becomes ambient texture BEHIND the centred box;
   the grid collapses to one column and the box stacks full-width. */
@media (max-width: 900px) {
  .hero.hero--photo .wrap {
    grid-template-columns: 1fr;
  }
  .hero-glass {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  /* Centre the photo above/behind the HUD and dial it down so it never
     fights the text; swap to a softer mask without the left-edge cut. */
  .hero-photo img {
    right:     50%;
    transform: translate(46%, -56%);
    width:     clamp(480px, 140vw, 880px);
    opacity:   .58;
    -webkit-mask-image:
      radial-gradient(72% 70% at 56% 38%, #000 30%, rgba(0,0,0,.5) 58%, transparent 84%),
      linear-gradient(180deg, transparent 0%, #000 14%, #000 66%, transparent 98%);
    -webkit-mask-composite: source-in;
            mask-image:
      radial-gradient(72% 70% at 56% 38%, #000 30%, rgba(0,0,0,.5) 58%, transparent 84%),
      linear-gradient(180deg, transparent 0%, #000 14%, #000 66%, transparent 98%);
    mask-composite: intersect;
  }
  /* Vertical scrim on mobile (text sits over the lower, darker half). */
  .hero-scrim {
    background:
      linear-gradient(180deg, var(--bg-deepest) 0%, rgba(7,10,28,.42) 28%, rgba(7,10,28,.8) 70%, var(--bg-deepest) 100%);
  }
}

/* ─── Trust Bar ──────────────────────────────────────────────────────────── */
/* First child of .manifesto: the tray hangs off the brands band's border
   onto the manifesto slab. This margin IS the slab's top spacing (the
   section's own padding-top is 0), so the gap below the tray stays constant
   however many rows the items wrap into. Lifted to z-index 1 like
   .bokeh > .wrap so the section's bokeh orbs / scanline mesh (later in tree
   order) can't wash over the glass tray. */
.trust {
  position:      relative;
  z-index:       1;
  margin-bottom: 80px;
}

.trust .wrap {
  display:         flex;
  flex-wrap:       wrap;
  gap:             14px 34px;
  align-items:     center;
  justify-content: center;
  padding:         16px 24px;
  margin:          0 auto;
  border-radius:   0 0 var(--radius-lg) var(--radius-lg);
}

.trust .item {
  display:     flex;
  align-items: center;
  gap:         9px;
  font-family: var(--f-mono);
  font-size:   13.5px;
  color:       var(--text-muted);
}

.trust .item b {
  color: #fff;
}

.stars {
  color:          #ffcf3d;
  letter-spacing: 2px;
}

/* ─── Tech Marquee ───────────────────────────────────────────────────────── */
.marquee {
  padding:      26px 0;
  border-top:   1px solid var(--bg-border);
  border-bottom: 1px solid var(--bg-border);
  overflow:     hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:   linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.marquee .track {
  display:   flex;
  gap:       50px;
  width:     max-content;
  animation: marquee-scroll 30s linear infinite;
}

.marquee .track span {
  font-family:  var(--f-mono);
  font-size:    18px;
  color:        var(--text-dim);
  white-space:  nowrap;
}

@keyframes marquee-scroll {
  to {
    transform: translateX(-50%);
  }
}

/* ─── Generic Section Utilities ──────────────────────────────────────────── */
.sec {
  /* padding-block, not the `110px 0` shorthand: many sections are
     `.sec.wrap`, and the shorthand's horizontal 0 was overriding .wrap's
     clamp() gutter (tokens.css loads earlier) — content ran edge-to-edge
     on viewports below maxw + gutters. */
  padding-block: 110px;
}

.block-cyan    { background: var(--block-cyan);    }

.sec-head {
  max-width:     64ch;
  margin-bottom: 52px;
}

.sec-head .label {
  margin-bottom: 16px;
  display:       block;
}

.sec-head h2 {
  font-size:     clamp(32px, 5vw, 58px);
  margin-bottom: 16px;
  letter-spacing: -.03em;
}

.sec-head p {
  color: var(--text-muted);
}

/* ─── Intro prose (SEO copy under page H1, before card grids) ───────────── */
.sec-intro {
  padding-top:    0;
  padding-bottom: 0;
}

.sec-intro-prose {
  max-width: 72ch;
}

.sec-intro-prose p {
  color:         var(--text-muted);
  font-size:     1.0625rem;
  line-height:   1.75;
  margin:        0 0 18px;
}

.sec-intro-prose p:last-child {
  margin-bottom: 0;
}

.sec-intro-local,
.sec-local {
  color:          var(--text-dim);
  font-family:    var(--font-mono);
  font-size:      .9375rem;
  line-height:    1.6;
}

.sec-local {
  margin-top: 18px;
}

/* Internal links inside prose / case up-links / footer location. */
.sec-intro-prose a,
.case-up-link a,
.foot-location a {
  color:           var(--aqua);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sec-intro-prose a:hover,
.case-up-link a:hover {
  text-shadow: 0 0 12px var(--aqua-glow);
}

.case-up-link {
  margin-top:  20px;
  font-family: var(--font-mono);
  font-size:   .9375rem;
  color:       var(--text-dim);
}

.foot-location {
  color:       var(--text-muted);
  font-size:   .875rem;
  line-height: 1.6;
  margin:      10px 0 0;
}

/* ─── Insights / blog ──────────────────────────────────────────────────────
 * Index card meta + article reading layout. Tokens only, no hardcoded colour. */

.insight-date {
  display:     block;
  color:       var(--text-dim);
  font-family: var(--font-mono);
  font-size:   .8125rem;
  margin:      4px 0 12px;
}

.card-link {
  display:         inline-block;
  margin-top:      14px;
  color:           var(--aqua);
  font-family:     var(--font-mono);
  font-size:       .875rem;
  text-decoration: none;
}

.card-link:hover {
  text-shadow: 0 0 12px var(--aqua-glow);
}

/* Article detail: meta row under the H1. */
.article-meta {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         10px;
  color:       var(--text-dim);
  font-family: var(--font-mono);
  font-size:   .875rem;
  margin-top:  18px;
}

.article-meta .label {
  margin: 0;
}

.article-back {
  text-decoration: none;
}

/* Article body — readable measure, on-brand headings + links. */
.article-prose {
  max-width: 72ch;
}

.article-prose h2 {
  margin:      40px 0 14px;
  font-size:   1.5rem;
  line-height: 1.25;
  color:       var(--text-primary);
}

.article-prose h3 {
  margin:    28px 0 10px;
  font-size: 1.1875rem;
  color:     var(--text-primary);
}

.article-prose p {
  color:       var(--text-muted);
  font-size:   1.0625rem;
  line-height: 1.75;
  margin:      0 0 18px;
}

.article-prose ul,
.article-prose ol {
  color:       var(--text-muted);
  font-size:   1.0625rem;
  line-height: 1.7;
  margin:      0 0 18px;
  padding-left: 1.25rem;
}

.article-prose li {
  margin-bottom: 8px;
}

.article-prose a {
  color:                 var(--aqua);
  text-decoration:       underline;
  text-underline-offset: 2px;
}

.article-prose a:hover {
  text-shadow: 0 0 12px var(--aqua-glow);
}

.insight-aside {
  margin:        24px 0;
  padding:       18px 20px;
  border-left:   3px solid var(--magenta);
  border-radius: var(--radius-md);
  color:         var(--text-primary);
  font-size:     1.0625rem;
  line-height:   1.6;
}

/* ─── Glitch Effect (heading hover) ─────────────────────────────────────── */
.glitchy {
  position: relative;
  cursor:   default;
}

.glitchy:hover::before,
.glitchy:hover::after {
  content:  none; /* glitch-on-hover disabled: it duplicated plain data-t text and mismatched styled/multiline headings */
  position: absolute;
  left:     0;
  top:      0;
  width:    100%;
}

.glitchy:hover::before {
  color:      var(--aqua);
  transform:  translate(-3px, -2px);
  clip-path:  inset(0 0 55% 0);
  opacity:    .9;
}

.glitchy:hover::after {
  color:     var(--magenta);
  transform: translate(3px, 2px);
  clip-path: inset(55% 0 0 0);
  opacity:   .9;
}

/* ─── Manifesto Block ────────────────────────────────────────────────────── */
/* No padding-top: the trust tray is the section's first child, seated on the
   slab's top edge (which meets the brands band's border-bottom); the tray's
   own margin-bottom provides the head spacing. */
.manifesto {
  padding:    0 0 130px;
  text-align: center;
}

.manifesto h2 {
  font-size:      clamp(34px, 7vw, 88px);
  letter-spacing: -.04em;
  line-height:    1.0;
}

.manifesto h2 .strike {
  color:              var(--text-dim);
  text-decoration:    line-through;
  text-decoration-color: var(--error);
}

.manifesto p {
  color:      var(--text-muted);
  max-width:  44ch;
  margin:     28px auto 0;
  font-size:  19px;
}

/* ─── Bento Services Grid ────────────────────────────────────────────────── */
.bento {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   18px;
}

.card {
  border-radius:           var(--radius-lg);
  padding:                 30px;
  position:                relative;
  overflow:                hidden;
  transition:              transform .25s, box-shadow .25s;
  background:              var(--glass);
  backdrop-filter:         blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border:                  1px solid var(--bg-border);
}

/* Gradient border on hover */
.card::before {
  content:       "";
  position:      absolute;
  inset:         0;
  border-radius: inherit;
  padding:       1px;
  background:    linear-gradient(130deg, var(--aqua), var(--magenta) 60%, transparent);
  -webkit-mask:  linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:        0;
  transition:     opacity .25s;
}

.card:hover::before {
  opacity: 1;
}

.card:hover {
  transform:  translateY(-5px);
  box-shadow: 0 24px 70px -30px var(--magenta-glow), 0 0 50px -20px var(--aqua-glow);
}

.card .ico {
  width:         48px;
  height:        48px;
  border-radius: var(--radius-sm);
  display:       grid;
  place-items:   center;
  margin-bottom: 20px;
  background:    linear-gradient(135deg, var(--aqua-glow), var(--magenta-glow));
  border:        1px solid var(--bg-border);
  font-size:     23px;
}

.card h3 {
  font-size:     23px;
  margin-bottom: 10px;
}

.card p {
  color:         var(--text-muted);
  font-size:     15.5px;
  margin-bottom: 18px;
}

.tags {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
}

.tags i {
  font-family:   var(--f-mono);
  font-size:     11.5px;
  color:         var(--aqua);
  border:        1px solid var(--bg-border);
  border-radius: 6px;
  padding:       4px 9px;
  font-style:    normal;
}

/* Bento column spans */
.card.feature { grid-column: span 6; }
.card.feature h3 { font-size: 28px; }

.card.lg { grid-column: span 3; }
.card.sm { grid-column: span 3; }

@media (min-width: 881px) {
  .card.lg { grid-column: span 4; }
  .card.sm { grid-column: span 2; }
}

@media (max-width: 880px) {
  .bento { grid-template-columns: 1fr; }
  .card.lg,
  .card.sm,
  .card.feature { grid-column: span 1; }
}

/* ─── Zigzag Services Rows ───────────────────────────────────────────────── */
/*
 * Full-width alternating feature rows replacing the home bento grid.
 * Each row: text column + CSS/SVG motif column; :nth-child(even) flips order.
 * .bento / .card / .card.feature etc are kept — used by ai.ts, shop.ts, etc.
 */

.svc-rows {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.svc-row {
  display:         flex;
  align-items:     center;
  gap:             clamp(28px, 5vw, 72px);
  padding:         clamp(40px, 6vw, 80px) 0;
  border-bottom:   1px solid var(--bg-border);
  /* anchor for the absolute .svc-id plate (was provided by the removed .hud) */
  position:        relative;
}

.svc-row:last-child {
  border-bottom: none;
}

/* Even rows: flip text/motif order */
.svc-row:nth-child(even) {
  flex-direction: row-reverse;
}
/* Text column */
.svc-copy {
  flex:      1 1 45%;
  min-width: 0;
}

.svc-copy h3 {
  font-size:     clamp(22px, 3vw, 32px);
  margin-bottom: 14px;
}

.svc-copy p {
  color:         var(--text-muted);
  font-size:     15.5px;
  margin-bottom: 20px;
  max-width:     52ch;
}

/* Motif column */
.svc-motif {
  flex:        1 1 48%;
  min-width:   0;
  display:     flex;
  align-items: center;
  justify-content: center;
}

/* ── Motif: AI — faux terminal ──────────────────────────────────────────── */
/* Reuses .term / .term-bar / .term-body directly — no extra CSS needed.    */
.svc-motif--ai .term {
  width:     100%;
  max-width: 420px;
}

/* Blinking cursor on last .term-body line */
.svc-motif--ai .term-body::after {
  content:          "█";
  color:            var(--aqua);
  animation:        blink 1s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  .svc-motif--ai .term-body::after {
    animation: none;
    opacity:   0;
  }
}

/* ── Motif: Web — browser window ────────────────────────────────────────── */
.svc-browser {
  width:         100%;
  max-width:     420px;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  background:    var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border:        1px solid var(--bg-border);
  box-shadow:    0 24px 60px -20px #000, 0 0 40px -18px var(--aqua-glow);
}

.svc-browser__bar {
  display:       flex;
  align-items:   center;
  gap:           7px;
  padding:       11px 14px;
  border-bottom: 1px solid var(--bg-border);
  background:    rgba(7,10,28,.5);
}

.svc-dot {
  width:         11px;
  height:        11px;
  border-radius: 50%;
  display:       inline-block;
  flex-shrink:   0;
}

.svc-addr {
  margin-left:   10px;
  font-family:   var(--f-mono);
  font-size:     12px;
  color:         var(--text-dim);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-sm);
  padding:       2px 10px;
}

.svc-browser__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.svc-skel {
  border-radius: var(--radius-sm);
  background:    linear-gradient(90deg, var(--bg-surface), var(--bg-elevated), var(--bg-surface));
  background-size: 200% 100%;
  animation: skel-sweep 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .svc-skel { animation: none; background: var(--bg-surface); }
}

@keyframes skel-sweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.svc-skel--hero   { height: 70px; width: 100%; }
.svc-skel-row     { display: flex; gap: 10px; }
.svc-skel--block  { height: 44px; flex: 1; }
.svc-skel--line   { height: 12px; width: 90%; }
.svc-skel--short  { width: 55%; }

/* ── Motif: Shop — product tiles + cart ─────────────────────────────────── */
.svc-shop {
  width:   100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap:     16px;
}

.svc-shop__tiles {
  display: flex;
  gap:     14px;
}

.svc-product {
  flex:          1;
  display:       flex;
  flex-direction: column;
  gap:           8px;
  padding:       14px;
  border-radius: var(--radius-md);
  background:    var(--glass);
  border:        1px solid var(--bg-border);
}

.svc-product__img {
  height:        72px;
  border-radius: var(--radius-sm);
  background:    linear-gradient(135deg, var(--aqua-glow), var(--bg-elevated));
  border:        1px solid var(--bg-border);
}

.svc-product__img--b {
  background: linear-gradient(135deg, var(--magenta-glow), var(--bg-elevated));
}

.svc-product__name {
  font-family: var(--f-mono);
  font-size:   12px;
  color:       var(--text-muted);
}

.svc-product__price {
  font-family: var(--f-mono);
  font-size:   14px;
  color:       var(--aqua);
  font-weight: 700;
}

/* Honesty rule #9: the mock tiles carry no invented euro amounts — the price
   slot renders as an abstract skeleton bar (same family as .svc-skel). */
.svc-product__price--skel {
  display:       block;
  width:         42px;
  height:        12px;
  margin-top:    2px;
  border-radius: var(--radius-sm);
  background:    linear-gradient(90deg, var(--bg-elevated), var(--aqua-glow));
}

.svc-cart {
  width:         100%;
  padding:       11px 0;
  border-radius: var(--radius-md);
  background:    linear-gradient(100deg, var(--aqua), var(--magenta));
  border:        none;
  color:         #04181e;
  font-family:   var(--f-mono);
  font-size:     13px;
  font-weight:   700;
  cursor:        default;
  pointer-events: none;
}

/* ── Motif: Maintenance — uptime bars + sparkline ───────────────────────── */
.svc-uptime {
  width:   100%;
  max-width: 380px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background:    var(--glass);
  border:        1px solid var(--bg-border);
  display:       flex;
  flex-direction: column;
  gap:           18px;
  box-shadow:    0 20px 50px -18px #000, 0 0 40px -20px var(--success);
}

.svc-uptime__label {
  display:     flex;
  align-items: baseline;
  gap:         10px;
}

.svc-uptime__pct {
  font-family: var(--f-display);
  font-size:   clamp(28px, 4vw, 40px);
  font-weight: 700;
  color:       var(--success);
  text-shadow: 0 0 calc(20px * var(--glow)) var(--success);
}

.svc-uptime__sub {
  font-family: var(--f-mono);
  font-size:   12px;
  color:       var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.svc-uptime__bars {
  display:     flex;
  align-items: flex-end;
  gap:         5px;
  height:      60px;
}

.svc-bar {
  flex:          1;
  height:        var(--h, 50%);
  border-radius: 3px 3px 0 0;
  background:    var(--bg-elevated);
  transition:    height .4s ease;
}

.svc-bar--hi {
  background: var(--success);
  box-shadow: 0 0 calc(10px * var(--glow)) var(--success);
}

.svc-uptime__line {
  width:  100%;
  height: 40px;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 calc(4px * var(--glow)) var(--success));
}

/* ── Motif: Advanced — circuit / Modbus SVG ──────────────────────────────── */
.svc-circuit {
  width:   100%;
  max-width: 340px;
  height:  auto;
  display: block;
  filter:  drop-shadow(0 0 calc(6px * var(--glow)) var(--aqua-glow));
}

/* Signal pulse: travels along the bus line */
.svc-pulse {
  animation: svc-travel 3s linear infinite;
  will-change: transform;
}

@keyframes svc-travel {
  0%   { transform: translateX(0);    opacity: 1; }
  80%  { transform: translateX(220px); opacity: 1; }
  81%  { transform: translateX(220px); opacity: 0; }
  100% { transform: translateX(220px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .svc-pulse { animation: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Tablet: keep side-by-side but compress motif */
@media (max-width: 820px) {
  .svc-row {
    gap: 28px;
  }
  .svc-copy { flex-basis: 50%; }
  .svc-motif { flex-basis: 44%; }
}

/* Mobile: stack to single column, motif below text */
@media (max-width: 640px) {
  .svc-row,
  .svc-row:nth-child(even) {
    flex-direction: column;
    align-items:    stretch;
  }

  .svc-copy,
  .svc-motif {
    flex-basis: auto;
    width:      100%;
  }

  .svc-motif {
    justify-content: flex-start;
  }

  .svc-browser,
  .svc-motif--ai .term,
  .svc-shop,
  .svc-uptime,
  .svc-circuit {
    max-width: 100%;
  }
}

/* ─── Scroll-Scaling Showreel ────────────────────────────────────────────── */
.reel-track {
  height:   230vh;
  position: relative;
}

.reel-sticky {
  position:     sticky;
  top:          0;
  height:       100vh;
  display:      grid;
  place-items:  center;
  overflow:     hidden;
}

.reel-cap {
  position:      absolute;
  z-index:       3; /* above the photo frame — the scroll JS fades it out as the frame grows */
  font-size:     clamp(40px, 9vw, 124px);
  letter-spacing: -.04em;
  text-align:    center;
  pointer-events: none;
  transition:    opacity .2s;
  text-shadow:   0 2px 28px rgba(0,0,0,.7), 0 1px 6px rgba(0,0,0,.55);
}

/* Logo-aqua emphasis here (global i.em is magenta) — ties into the aqua stamp + sweep. */
.reel-cap i.em {
  color:       var(--aqua);
  text-shadow: 0 0 calc(26px * var(--glow)) var(--aqua-glow);
}

.reel-media {
  position:      relative;
  z-index:       2;
  width:         min(92vw, 1100px);
  aspect-ratio:  16 / 9;
  border-radius: var(--radius-xl);
  overflow:      hidden;
  will-change:   transform;
  background:    linear-gradient(130deg, #241048, #0a0e26 70%);
  border:        2px solid transparent;
  box-shadow:    0 0 0 1px var(--bg-border), 0 0 60px -6px var(--aqua-glow);
}

.reel-media::before {
  content:       "";
  position:      absolute;
  inset:         0;
  z-index:       3; /* ring above the photo */
  border-radius: inherit;
  padding:       2px;
  background:    linear-gradient(120deg, var(--aqua), var(--magenta));
  -webkit-mask:  linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  box-shadow:    0 0 40px var(--magenta-glow);
}

/* The atmospheric still (hero already preloads this asset) + slow drift. */
.reel-media .reel-img {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: 50% 40%;
  transform:       scale(1.05);
  animation:       reel-drift 26s ease-in-out infinite alternate;
}

/* Overlay: vignette (label legibility) + scanline texture + travelling sweep. */
.reel-media .reel-scan {
  position:       absolute;
  inset:          0;
  z-index:        2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,10,28,.55), transparent 28% 68%, rgba(7,10,28,.6)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 2px, transparent 2px 4px);
  box-shadow:     inset 0 0 80px -30px var(--magenta-glow);
}

.reel-media .reel-scan::after {
  content:    "";
  position:   absolute;
  inset:      0;
  background: linear-gradient(180deg, transparent 0 42%, var(--aqua-glow) 50%, transparent 58%);
  animation:  reel-scanline 9s linear infinite;
}

@keyframes reel-drift {
  from { transform: scale(1.05) translateY(-1%); }
  to   { transform: scale(1.1)  translateY(1%); }
}

@keyframes reel-scanline {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}

/* Manual motion toggle (PRM handled globally in tokens.css). */
html[data-motion="off"] .reel-media .reel-img,
html[data-motion="off"] .reel-media .reel-scan::after { animation: none; }

.reel-media .rl {
  position:       absolute;
  left:           22px;
  top:            18px;
  z-index:        4;
  font-family:    var(--f-mono);
  font-size:      12px;
  color:          var(--aqua);
  letter-spacing: .2em;
  text-shadow:    0 1px 10px rgba(0,0,0,.75);
}

.reel-media .rr {
  position:    absolute;
  right:       22px;
  bottom:      18px;
  z-index:     4;
  font-family: var(--f-mono);
  font-size:   12px;
  color:       var(--magenta);
  text-shadow: 0 1px 10px rgba(0,0,0,.75);
}

/* ─── Process Steps (sub-pages: ai.ts, web.ts, case-*.ts) ───────────────── */
/*
 * Used by service + case sub-pages — NOT the home page (home uses .timeline).
 * Keep these rules; removing them would break case/service layouts.
 */
.steps {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   18px;
  counter-reset:         step-counter;
}

.step {
  border-radius:           var(--radius-md);
  padding:                 28px;
  position:                relative;
  background:              var(--glass);
  backdrop-filter:         blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border:                  1px solid var(--bg-border);
}

.step::before {
  counter-increment: step-counter;
  content:           "0" counter(step-counter);
  font-family:       var(--f-mono);
  font-size:         13px;
  color:             var(--aqua);
  border:            1px solid var(--aqua-dim);
  border-radius:     var(--radius-sm);
  padding:           3px 8px;
  position:          absolute;
  top:               22px;
  right:             22px;
  box-shadow:        0 0 18px var(--aqua-glow);
}

.step h3 {
  font-size:     20px;
  margin-bottom: 9px;
}

.step p {
  color:         var(--text-muted);
  font-size:     14.5px;
  margin-bottom: 13px;
}

@media (max-width: 880px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* ─── Process Timeline (home page) ──────────────────────────────────────── */
/*
 * Horizontal connected stepper (desktop) / vertical spine (mobile).
 * .timeline: flex row of 4 .tl-item nodes joined by a gradient .tl-connector line.
 * .tl-node: numbered circle; .tl-pulse: optional CSS-only pulse dot (compositor).
 * .tl-cta: small monospace secondary link (step 1 → online quickscan).
 */

.timeline {
  position:        relative;
  display:         flex;
  gap:             0;
  align-items:     flex-start;
  padding:         40px 0 16px;
}

/* Horizontal gradient connector bar behind all nodes */
.tl-connector {
  position:    absolute;
  top:         67px; /* .timeline 40px padding + 28px node centre − 1px (2px line) */
  left:        calc(28px + 4%); /* starts at first node centre */
  right:       calc(28px + 4%);
  height:      2px;
  background:  linear-gradient(90deg, var(--aqua), var(--magenta));
  box-shadow:  0 0 14px var(--aqua-glow), 0 0 28px var(--magenta-glow);
  border-radius: 2px;
  pointer-events: none;
  z-index:     0;
}

/* Each step item */
.tl-item {
  flex:            1 1 0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  padding:         0 12px;
  position:        relative;
  z-index:         1;
}

/* Numbered circle node */
.tl-node {
  width:           56px;
  height:          56px;
  border-radius:   50%;
  background:      var(--block-cyan);
  border:          2px solid var(--aqua);
  box-shadow:      0 0 0 4px var(--block-cyan), 0 0 24px var(--aqua-glow);
  display:         grid;
  place-items:     center;
  font-family:     var(--f-mono);
  font-size:       20px;
  font-weight:     700;
  color:           var(--aqua);
  margin-bottom:   22px;
  flex-shrink:     0;
  position:        relative;
  transition:      box-shadow .3s;
}

/* Magenta border on last node to echo the gradient connector end */
.tl-item:last-child .tl-node {
  border-color: var(--magenta);
  color:        var(--magenta);
  box-shadow:   0 0 0 4px var(--block-cyan), 0 0 24px var(--magenta-glow);
}

/* Pulse dot — small compositor-only ring that pulses outward from node */
.tl-pulse {
  position:      absolute;
  top:           0;
  left:          50%;
  translate:     -50% 0;
  width:         56px;
  height:        56px;
  border-radius: 50%;
  border:        2px solid var(--aqua);
  opacity:       0;
  animation:     tl-pulse 2.4s ease-out infinite;
  pointer-events: none;
  z-index:       0;
}

/* Stagger pulse per step */
.tl-item:nth-child(2) .tl-pulse { animation-delay: .6s;  }
.tl-item:nth-child(3) .tl-pulse { animation-delay: 1.2s; }
.tl-item:nth-child(4) .tl-pulse { animation-delay: 1.8s; border-color: var(--magenta); }

@keyframes tl-pulse {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.9);  opacity: 0;  }
  100% { transform: scale(1.9);  opacity: 0;  }
}

/* Step content block */
.tl-body {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
}

.tl-body h3 {
  font-size:   clamp(15px, 1.8vw, 18px);
  line-height: 1.2;
  margin:      0;
}

.tl-body p {
  color:     var(--text-muted);
  font-size: clamp(13px, 1.3vw, 14.5px);
  margin:    0;
  max-width: 20ch;
}

/* Secondary CTA link (step 1 → online quickscan) */
.tl-cta {
  display:         inline-block;
  font-family:     var(--f-mono);
  font-size:       11.5px;
  color:           var(--aqua);
  text-decoration: none;
  margin-top:      4px;
}

.tl-cta:hover,
.tl-cta:focus-visible {
  text-decoration: underline;
}

/* ── Mobile / Tablet: vertical spine ──────────────────────────────────────── */
@media (max-width: 820px) {
  .timeline {
    flex-direction: column;
    align-items:    flex-start;
    gap:            0;
    padding:        0;
  }

  /* Vertical spine connector — replaces horizontal bar */
  .tl-connector {
    top:         56px; /* below first node */
    left:        27px; /* centred on 56px node */
    right:       auto;
    width:       2px;
    height:      calc(100% - 56px);
    background:  linear-gradient(180deg, var(--aqua), var(--magenta));
  }

  .tl-item {
    flex-direction: row;
    align-items:    flex-start;
    text-align:     left;
    gap:            20px;
    padding:        0 0 36px 0;
    flex:           none;
    width:          100%;
  }

  .tl-item:last-child {
    padding-bottom: 0;
  }

  .tl-node {
    margin-bottom: 0;
    flex-shrink:   0;
  }

  .tl-pulse {
    top:  0;
    left: 0;
    translate: 0 0;
  }

  .tl-body {
    align-items: flex-start;
  }

  .tl-body p {
    max-width: none;
  }
}

/* Reduced-motion: hide pulse, collapse connector glow */
@media (prefers-reduced-motion: reduce) {
  .tl-pulse {
    animation: none;
    display:   none;
  }

  .tl-connector {
    box-shadow: none;
  }
}

html[data-motion="off"] .tl-pulse  { animation: none; display: none; }
html[data-motion="off"] .tl-connector { box-shadow: none; }

@media (max-width: 600px) {
  .tl-node {
    width:     44px;
    height:    44px;
    font-size: 17px;
  }

  .tl-pulse {
    width:  44px;
    height: 44px;
  }

  .tl-connector {
    left: 21px;
  }
}

/* ─── Cases Grid ─────────────────────────────────────────────────────────── */
.cases {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   18px;
}

/* 4-card variant: 2×2 grid that collapses to 1-col on mobile */
.cases-4 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1100px) {
  .cases-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.case {
  border-radius:           var(--radius-lg);
  overflow:                hidden;
  transition:              transform .25s, border-color .25s, box-shadow .25s;
  background:              var(--glass);
  backdrop-filter:         blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border:                  1px solid var(--bg-border);
}

.case:hover {
  transform:    translateY(-5px);
  border-color: var(--magenta-dim);
  box-shadow:   0 24px 60px -34px var(--magenta-glow);
}

.case .thumb {
  height:     160px;
  background: linear-gradient(130deg, #2a1250, #0a0e26);
  display:    grid;
  place-items: center;
  position:   relative;
}

.case .thumb::after {
  content:    "";
  position:   absolute;
  inset:      0;
  background: radial-gradient(circle at 50% 120%, var(--magenta-glow), transparent 60%);
}

.case .thumb .big {
  font-family:  var(--f-mono);
  font-size:    44px;
  font-weight:  700;
  color:        var(--aqua);
  text-shadow:  0 0 30px var(--aqua-glow);
  position:     relative;
  z-index:      1;
}

.case .body {
  padding: 24px;
}

.case .label {
  margin-bottom: 10px;
  display:       block;
}

.case h3 {
  font-size:     20px;
  margin-bottom: 8px;
}

.case p {
  color:         var(--text-muted);
  font-size:     14.5px;
  margin-bottom: 15px;
}

.case .metric {
  font-family: var(--f-mono);
  font-size:   15px;
  color:       var(--success);
  font-weight: 700;
}

@media (max-width: 880px) {
  .cases {
    grid-template-columns: 1fr;
  }

  /* 4-card variant keeps 2 columns until proper mobile breakpoint */
  .cases.cases-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .cases.cases-4 {
    grid-template-columns: 1fr;
  }
}

/* ─── Project Strip ──────────────────────────────────────────────────────── */
.proj-strip {
  display:      flex;
  flex-wrap:    wrap;
  gap:          10px;
  align-items:  center;
  margin-top:   38px;
  padding-top:  30px;
  border-top:   1px solid var(--bg-border);
}

.proj-strip .pl {
  font-family: var(--f-mono);
  font-size:   12px;
  color:       var(--text-dim);
}

.proj-strip a {
  font-family:   var(--f-mono);
  font-size:     13px;
  color:         var(--text-muted);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-sm);
  padding:       6px 12px;
  transition:    border-color .2s, color .2s, box-shadow .2s;
}

.proj-strip a:hover {
  border-color: var(--aqua);
  color:        var(--aqua);
  box-shadow:   0 0 20px -8px var(--aqua-glow);
}

/* Non-link project chips (e.g. URL unknown — rendered as <span> not <a>) */
.proj-strip span:not(.pl) {
  font-family:   var(--f-mono);
  font-size:     13px;
  color:         var(--text-dim);
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-sm);
  padding:       6px 12px;
  cursor:        default;
}

/* ─── Ventures Section ───────────────────────────────────────────────────── */
/*
 * Lab / build-log panel treatment.
 * .vlab-panel: faux terminal panel wrapping all three venture rows.
 * .vlab-bar:   macOS-style traffic-light title bar (aria-hidden).
 * .vlab-rows:  stacked .vrow items separated by a divider line.
 * .vrow:       each venture = blinking status dot + name + badge + desc + chips.
 * .vcard-badge and .vcard-name are reused for the badge pill and the name/link.
 * .toolkit-zone (below) is the open module-grid layer under this panel.
 */

/* Outer panel — glass box with gradient border, terminal aesthetic */
.vlab-panel {
  border-radius:  var(--radius-lg);
  overflow:       hidden;
  border:         1px solid var(--bg-border);
  background:     var(--glass);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  box-shadow:     0 30px 80px -30px #000, 0 0 40px -18px var(--aqua-glow);
  position:       relative;
}

/* Gradient border overlay — radius inherits; the deck layer squares this
   panel on home, and a hardcoded radius left rounded hairline arcs floating
   at the uncut corners. */
.vlab-panel::before {
  content:       "";
  position:      absolute;
  inset:         0;
  border-radius: inherit;
  padding:       1px;
  background:    linear-gradient(130deg, var(--aqua), var(--magenta) 60%, transparent);
  -webkit-mask:  linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:        0.5;
  pointer-events: none;
}

/* Terminal title bar */
.vlab-bar {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       11px 18px;
  border-bottom: 1px solid var(--bg-border);
  background:    rgba(7,10,28,.5);
  position:      relative;
  z-index:       1;
}

.vlab-bar-dot {
  width:         11px;
  height:        11px;
  border-radius: 50%;
  display:       inline-block;
  flex-shrink:   0;
}

.vlab-bar-title {
  margin-left:  10px;
  font-family:  var(--f-mono);
  font-size:    12px;
  color:        var(--text-dim);
  letter-spacing: .1em;
}

/* Rows container */
.vlab-rows {
  position: relative;
  z-index:  1;
}

/* Single venture row */
.vrow {
  display:       flex;
  align-items:   flex-start;
  gap:           16px;
  padding:       24px 22px;
  border-bottom: 1px solid var(--bg-border);
  transition:    background .2s;
}

.vrow:last-child {
  border-bottom: none;
}

.vrow:hover {
  background: rgba(69,205,236,.04);
}

/* Status column: blinking dot */
.vrow-status {
  flex-shrink: 0;
  padding-top: 4px; /* align dot with first text line */
}

.vrow-dot {
  display:       block;
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    var(--success);
  box-shadow:    0 0 8px var(--success);
  animation:     vrow-blink 2s ease-in-out infinite;
}

@keyframes vrow-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
  .vrow-dot { animation: none; }
}

html[data-motion="off"] .vrow-dot { animation: none; }

/* Meta column */
.vrow-meta {
  flex:           1 1 0;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

/* Head row: name + badge */
.vrow-head {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
}

/* Name styles — reuse from old vcard */
.vcard-name {
  font-family:  var(--f-display);
  font-size:    18px;
  font-weight:  700;
  color:        var(--text-primary);
  line-height:  1.1;
}

a.vcard-name {
  color:      var(--text-primary);
  transition: color .2s, text-shadow .2s;
}

a.vcard-name:hover {
  color:        var(--aqua);
  text-shadow:  0 0 16px var(--aqua-glow);
}

a.vcard-name:focus-visible {
  outline:        2px solid var(--aqua);
  outline-offset: 3px;
  border-radius:  3px;
}

.vcard-badge {
  font-family:     var(--f-mono);
  font-size:       10.5px;
  letter-spacing:  .12em;
  text-transform:  uppercase;
  color:           var(--aqua);
  background:      var(--aqua-glow);
  border:          1px solid var(--aqua-dim);
  border-radius:   20px;
  padding:         3px 10px;
  white-space:     nowrap;
  flex-shrink:     0;
  align-self:      center;
}

/* Description */
.vrow-desc {
  color:       var(--text-muted);
  font-size:   14.5px;
  line-height: 1.55;
  margin:      0;
  max-width:   72ch;
}

@media (max-width: 600px) {
  .vrow {
    padding:    18px 16px;
    gap:        12px;
  }

  .vlab-bar {
    padding: 10px 16px;
  }
}

/* Toolkit zone — open layer under the lab panel. The old glass callout box
   was a box-in-box (bordered panel holding 8 more bordered cards); now the
   corner-cut cards are the zone's only chrome and sit straight on the page. */
.toolkit-zone {
  margin-top:     44px;
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

/* Zone headline above the grid — the floor count IS the message; the
   numeral takes the .grad gradient (injected by index.ts accentNums). */
.toolkit-title {
  font-family: var(--f-display);
  font-size:   clamp(26px, 3.2vw, 36px);
  font-weight: 700;
  line-height: 1.12;
  color:       var(--text-primary);
  margin:      0;
}

/* Pipeline claim under the grid — the process asset next to the
   module-library asset, stated big instead of buried in body copy. */
.toolkit-pipeline {
  border-top:     1px solid var(--bg-border);
  margin-top:     12px;
  padding-top:    22px;
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.toolkit-statement {
  font-family: var(--f-display);
  font-size:   clamp(19px, 2.2vw, 25px);
  font-weight: 600;
  line-height: 1.35;
  color:       var(--text-primary);
  max-width:   56ch;
  margin:      0;
}

.toolkit-link {
  color:          var(--aqua);
  font-family:    var(--f-mono);
  font-size:      13px;
  letter-spacing: .04em;
  width:          fit-content;
}

.toolkit-link:hover {
  text-shadow: 0 0 14px var(--aqua-glow);
}

/* Domain subsystem grid in the toolkit zone — corner-cut HUD cards (same
   clip-path family as .tcard), each with a mono label, a floor-count readout
   and a segmented .led-meter whose fill is data-true: index.ts sets
   --fill = floor count / largest domain. Explicit 4 columns (clean 2×4 with
   8 cards — auto-fit landed on an orphaned 5+3 at wrap width) → 2 cols on
   tablet/phone → 1 col only when very narrow. */
.toolkit-grid {
  list-style:            none;
  margin:                0;
  padding:               0;
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   12px;
}

@media (max-width: 860px) {
  .toolkit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 430px) {
  .toolkit-grid {
    grid-template-columns: 1fr;
  }
}

.toolkit-card {
  --cut:      10px;
  background: var(--bg-surface);
  border:     1px solid var(--bg-border);
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
  padding:        12px 14px 13px;
  display:        flex;
  flex-direction: column;
  gap:            9px;
}

/* Hover: aqua edge + faint inset glow (outward shadows would be clipped) */
.toolkit-card:hover {
  border-color: var(--aqua);
  box-shadow:   inset 0 0 28px -16px var(--aqua-glow);
}

.toolkit-card-head {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  gap:             10px;
}

.toolkit-card-label {
  font-family:    var(--f-mono);
  font-size:      11.5px;
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--text-primary);
}

.toolkit-card-count {
  white-space: nowrap; /* .readout supplies mono/size/dim */
}

.toolkit-card .led-meter {
  width:  100%;
  height: 8px;
}

.toolkit-card-list {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            5px;
}

.toolkit-card-list li {
  color:       var(--text-muted);
  font-size:   13px;
  line-height: 1.4;
  display:     flex;
  align-items: flex-start;
  gap:         7px;
}

.toolkit-card-list li::before {
  content:     "✓";
  color:       var(--aqua);
  font-family: var(--f-mono);
  font-size:   12px;
  font-weight: 700;
  line-height: 1.4;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .toolkit-grid {
    gap: 8px;
  }
}

/* ─── Brand Marquee ──────────────────────────────────────────────────────── */
/*
 * Replaces the old static .brand-strip / .brand-chips / .brand-chip layout.
 * The marquee scrolls right-to-left (same direction as the tech marquee) but
 * at a slower speed (50s vs 30s) and with larger, weightier text so the two
 * strips are visually distinct.
 *
 * The edge fade/mask mirrors the tech marquee.
 * Pause-on-hover keeps links clickable.
 * prefers-reduced-motion disables animation; the strip becomes a static,
 * horizontally-scrollable row instead.
 */

/* Outer wrapper — one slim row instead of label/marquee/note stacked
   (~100px vs ~150px tall: actual brand names peek above the fold) */
.brand-marquee-wrap {
  padding: 20px 0;
  border-top:    1px solid var(--bg-border);
  border-bottom: 1px solid var(--bg-border);
}

/* legend | marquee row — left padding equals .wrap's content left edge so
   the legend aligns with the page gutter while the band stays full-bleed */
.brand-band {
  display:               grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items:           center;
  gap:                   clamp(20px, 3vw, 44px);
  padding-left:          24px;
}

/* The legend plate — section label with the via-agencies attribution under it */
.brand-legend {
  display:        flex;
  flex-direction: column;
  gap:            6px;
  max-width:      230px;
}

.brand-legend .label {
  line-height: 1.5;
}

/* The scrolling viewport — full width, with edge fade */
.brand-marquee {
  overflow:            hidden;
  -webkit-mask-image:  linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image:          linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

/* The moving track — two copies of the brand list for a seamless loop */
.brand-track {
  display:   flex;
  gap:       56px;
  width:     max-content;
  animation: brand-scroll 50s linear infinite;
  align-items: center;
}

/* Pause the animation while the user hovers so links are clickable */
.brand-marquee:hover .brand-track {
  animation-play-state: paused;
}

/* Each brand link — larger/weightier than .marquee .track span (tech items) */
.brand-item {
  font-family:     var(--f-display);
  font-size:       17px;
  font-weight:     600;
  color:           var(--text-muted);
  white-space:     nowrap;
  text-decoration: none;
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  transition:      color .2s, text-shadow .2s;
}

.brand-item:hover,
.brand-item:focus-visible {
  color:       #fff;
  text-shadow: 0 0 12px var(--aqua-glow);
}

.brand-item:focus-visible {
  outline:        2px solid var(--aqua);
  outline-offset: 3px;
  border-radius:  3px;
}

/*
 * .brand-item-label wraps the text. When brand logos become available,
 * an <img> can be added before or alongside this span per brand item.
 */
.brand-item-label {
  display: inline-block;
}

/* Attribution — honesty credit, must stay readable:
   --text-muted, not --text-dim (dim is 3.5:1 on this bg, fails AA) */
.brand-note {
  display:     block;
  font-family: var(--f-mono);
  font-size:   11px;
  color:       var(--text-muted);
}

/* Brand marquee keyframes — scrolls right-to-left (same direction as tech marquee) */
@keyframes brand-scroll {
  to {
    /* one copy of four → seamless loop that fills wide screens */
    transform: translateX(-25%);
  }
}

/* prefers-reduced-motion: disable animation, allow horizontal scroll */
@media (prefers-reduced-motion: reduce) {
  .brand-track {
    animation: none;
    flex-wrap: nowrap;
  }

  .brand-marquee {
    overflow-x:          auto;
    -webkit-mask-image:  none;
    mask-image:          none;
    scrollbar-width:     thin;
    scrollbar-color:     var(--bg-border) transparent;
  }
}

/* data-motion="off" runtime mirror of reduced-motion */
html[data-motion="off"] .brand-track {
  animation: none;
  flex-wrap: nowrap;
}

html[data-motion="off"] .brand-marquee {
  overflow-x:         auto;
  -webkit-mask-image: none;
  mask-image:         none;
  scrollbar-width:    thin;
  scrollbar-color:    var(--bg-border) transparent;
}

/* Reduced-motion on the stacked layout: the strip is a manual scroller with
   the edge mask removed — give the first item the page gutter */
@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
  .brand-marquee {
    padding-left: clamp(20px, 3.5vw, 44px);
  }
}

@media (max-width: 768px) {
  html[data-motion="off"] .brand-marquee {
    padding-left: clamp(20px, 3.5vw, 44px);
  }
}

/* Tablet/phone: legend stacks back above the marquee, inside the gutter */
@media (max-width: 768px) {
  .brand-band {
    grid-template-columns: 1fr;
    gap:                   14px;
    padding-left:          0;
  }

  .brand-legend {
    max-width: none;
    padding:   0 clamp(20px, 3.5vw, 44px);
  }
}

@media (max-width: 600px) {
  .brand-marquee-wrap {
    padding: 18px 0 16px;
  }

  .brand-item {
    font-size: 15px;
  }
}

/* ─── Testimonials ───────────────────────────────────────────────────────── */
/*
 * "Transmission log" masonry wall
 * (spec docs/superpowers/specs/2026-06-11-testimonials-transmission-wall-design.md).
 *
 * All 10 cards visible at once in CSS columns; card heights fit their quotes.
 * A card is a corner-cut HUD panel (same clip-path technique as the deck
 * panels) with a mono RX header, assembled from the shared primitives
 * (.eq, .scan-sweep, .sweep-hover). No slider JS — the only behaviour is the
 * mobile show-all toggle (.t-clipped / .t-expand), fully scoped to ≤600px
 * here so the JS stays viewport-agnostic and no-JS renders everything.
 */

.testimonials {
  padding: 110px 0;
}

.testimonials .sec-head {
  margin-bottom: 48px;
}

.testimonials .sec-head .readout {
  margin: 10px 0 0;
}

/* Masonry wall — CSS columns: 3 desktop / 2 tablet / 1 phone. The column
   layout itself needs no media queries; the browser balances heights. */
.testimonials-wall {
  columns:    3 320px;
  column-gap: 24px;
}

/*
 * Transmission-log card — corner-cut HUD panel (same polygon as the deck
 * panels in home-deck.css). Near-opaque surface; height fits the quote.
 * .scan-sweep supplies position:relative + overflow:hidden plus the one-shot
 * reveal sweep; .sweep-hover replays it on hover.
 */
.tcard {
  break-inside:                avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom:               24px;
  background:                  var(--bg-surface);
  border:                      1px solid var(--bg-border);
  --cut:                       12px;
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
  border-radius: 0;
  transition:    border-color .25s, transform .25s, box-shadow .25s;
}

/* Hover: aqua edge + faint inset glow (outward shadows would be clipped) */
.tcard:hover {
  border-color: var(--aqua);
  transform:    translateY(-2px);
  box-shadow:   inset 0 0 34px -18px var(--aqua-glow);
}

/* RX header — decorative transmission chrome (aria-hidden in markup) */
.tcard-rx {
  display:        flex;
  align-items:    center;
  gap:            10px;
  padding:        12px 18px 10px;
  border-bottom:  1px solid var(--bg-border);
  font-family:    var(--f-mono);
  font-size:      10.5px;
  letter-spacing: .16em;
  color:          var(--text-dim);
}

/* Entry index — heat amber, matches the FAQ .faq-idx instrument accents */
.trx-idx {
  color: var(--heat);
}

.tcard-rx .eq {
  margin-left: auto;
}

/*
 * Freeze the signal bars at varied levels in the wall: 10 cards × 4 infinite
 * eq-bob bars would be a standing motion field (the slider only ever showed
 * ~2 cards). The one-shot .scan-sweep carries the liveness instead.
 * Specificity (0,3,1) deliberately beats `.in .eq i` (0,2,1, later in file).
 */
.testimonials-wall .tcard .eq i {
  animation: none;
}

.testimonials-wall .tcard .eq i:nth-child(1) { transform: scaleY(.5);  }
.testimonials-wall .tcard .eq i:nth-child(2) { transform: scaleY(.85); }
.testimonials-wall .tcard .eq i:nth-child(3) { transform: scaleY(.35); }
.testimonials-wall .tcard .eq i:nth-child(4) { transform: scaleY(.65); }

/* Focus target after the mobile show-all expands (JS sets tabindex="-1") */
.tcard:focus-visible {
  outline:        2px solid var(--aqua);
  outline-offset: 3px;
}

/* Quote body */
.tcard blockquote {
  margin:  0;
  padding: 18px 18px 16px;
  border:  none;
}

.tcard blockquote p {
  font-family: var(--f-display);
  font-size:   clamp(16.5px, 1.6vw, 19px);
  line-height: 1.5;
  color:       var(--text-primary);
  font-style:  normal;
  font-weight: 500;
  margin:      0 0 18px;
}

/* Footer: hairline rule + attribution */
.tcard cite {
  display:     block;
  font-style:  normal;
  font-family: var(--f-mono);
  font-size:   12.5px;
  border-top:  1px solid var(--bg-border);
  border-left: none;
  padding-top: 14px;
  color:       var(--text-muted);
}

.tcard cite b {
  display:     block;
  font-weight: 700;
  color:       var(--text-primary);
  font-size:   13.5px;
  letter-spacing: .01em;
}

/* Role line below the name — muted, slightly smaller */
.tcard-role {
  display:     block;
  font-size:   11px;
  color:       var(--text-dim);
  margin-top:  3px;
  font-style:  normal;
  letter-spacing: .04em;
}

/* Attribution row: name+role left, LinkedIn source icon right */
.tcard-attr {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  gap:         8px;
}

.tcard-byline {
  min-width: 0;
}

/* LinkedIn source icon — nominative use, indicates recommendation source */
.tcard-li {
  flex-shrink:    0;
  display:        inline-flex;
  align-items:    center;
  color:          var(--magenta-dim);
  transition:     color .2s, text-shadow .2s;
  border-radius:  3px;
  line-height:    1;
  align-self:     center;
}

.tcard-li:hover,
.tcard-li:focus {
  color:       var(--magenta);
  text-shadow: 0 0 10px var(--magenta-glow);
}

.tcard-li:focus-visible {
  outline:        2px solid var(--aqua);
  outline-offset: 3px;
}

/*
 * Mobile show-all button — a real control, deliberately NOT the aria-hidden
 * .readout chrome class. Hidden everywhere by default; only the JS-applied
 * .t-clipped state on ≤600px reveals it (rules in the media block below).
 */
.t-expand {
  display:        none;
  width:          100%;
  margin-top:     2px;
  padding:        13px 16px;
  font-family:    var(--f-mono);
  font-size:      11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--aqua);
  background:     var(--glass);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border:         1px solid var(--bg-border);
  cursor:         pointer;
  transition:     border-color .2s, color .2s;
}

/* The no-JS hidden attribute must always win over the media-scoped reveal */
.t-expand[hidden] {
  display: none !important;
}

.t-expand:hover {
  border-color: var(--aqua);
}

.t-expand:focus-visible {
  outline:        2px solid var(--aqua);
  outline-offset: 3px;
}

@media (max-width: 600px) {
  .testimonials {
    padding: 72px 0;
  }

  .tcard blockquote p {
    font-size: 16px;
  }

  /* JS-applied collapse: 4 cards + the show-all button */
  .testimonials-wall.t-clipped .tcard:nth-child(n + 5) {
    display: none;
  }

  .t-clipped + .t-expand[aria-expanded="false"] {
    display: block;
  }
}

/* ─── Stats Band ─────────────────────────────────────────────────────────── */
/*
 * "By the numbers" band. Oversized gradient display numerals, monospace
 * uppercase labels, faint scanline/grid backdrop.
 * Keeps existing count-up JS (data-count + + suffix).
 */

/* Section wrapper: adds the scanline grid texture */
.stats-band {
  padding:   80px 0;
  position:  relative;
  overflow:  hidden;
}

/* Faint pixel-grid overlay — purely decorative, pointer-events off */
.stats-scanlines {
  position:        absolute;
  inset:           0;
  pointer-events:  none;
  z-index:         0;
  opacity:         0.045;
  background-image:
    linear-gradient(var(--aqua-glow) 1px, transparent 1px),
    linear-gradient(90deg, var(--aqua-glow) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Under reduced-motion the scanlines stay visible (they're static) */
@media (prefers-reduced-motion: reduce) {
  .stats-scanlines { opacity: 0.03; }
}

/* 4-column grid. --stat-n-size also anchors the gauge ring (HUD pass below). */
.stats {
  --stat-n-size:         clamp(52px, 7.5vw, 88px);
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   18px;
  text-align:            center;
  position:              relative;
  z-index:               1;
}

/* Oversized gradient numeral */
.stat .n {
  font-family:             var(--f-mono);
  font-weight:             700;
  font-size:               var(--stat-n-size);
  line-height:             1;
  background:              linear-gradient(110deg, var(--aqua) 30%, var(--magenta));
  -webkit-background-clip: text;
  background-clip:         text;
  color:                   transparent;
  /* Fallback for browsers that don't support bg-clip:text */
  text-shadow:             none;
  margin-bottom:           10px;
  display:                 block;
}

/* Monospace uppercase label */
.stat .l {
  font-family:    var(--f-mono);
  font-size:      11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-top:     0;
}

@media (max-width: 880px) {
  .stats {
    --stat-n-size:         clamp(46px, 12vw, 76px);
    grid-template-columns: 1fr 1fr;
    gap:                   38px 18px;
  }
}

@media (max-width: 600px) {
  .stats-band {
    padding: 64px 0;
  }

  .stats {
    --stat-n-size: clamp(40px, 14vw, 68px);
    gap:           30px 12px;
  }
}

/* ─── Founder Portrait ───────────────────────────────────────────────────── */
.founder {
  display:               grid;
  grid-template-columns: .65fr 1.35fr;
  gap:                   44px;
  align-items:           center;
}

/* About page: the portrait docks while the long bio column scrolls past
   (96px clears the sticky header; two-column layout only — the stacked
   mobile flow below 880px keeps the portrait in-flow). */
@media (min-width: 881px) {
  .founder--sticky .portrait {
    position:   sticky;
    top:        96px;
    align-self: start;
  }
}

.portrait {
  aspect-ratio:   4 / 5;
  border-radius:  18px;
  overflow:       hidden;
  position:       relative;
  border:         1px solid var(--bg-border);
  background:     linear-gradient(160deg, #2a1250, var(--aqua-dim));
  display:        grid;
  place-items:    center;
  box-shadow:     0 0 60px -20px var(--magenta-glow);
}

.portrait .duo {
  position:        absolute;
  inset:           0;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--magenta) 40%, transparent), transparent 60%),
    linear-gradient(20deg,  color-mix(in srgb, var(--aqua) 34%, transparent),    transparent 60%);
  mix-blend-mode:  screen;
  opacity:         0.6;
}

.portrait img {
  position:    absolute;
  inset:       0;
  width:       100%;
  height:      100%;
  object-fit:  cover;
  z-index:     0;
}

/* Subtle scanline overlay on portrait */
.portrait .scanp {
  position:        absolute;
  inset:           0;
  background:      repeating-linear-gradient(0deg, #0007 0 2px, transparent 2px 4px);
  opacity:         0.2;
  z-index:         1;
  mix-blend-mode:  overlay;
  pointer-events:  none;
}

.portrait .tag {
  position:    absolute;
  bottom:      14px;
  left:        14px;
  z-index:     2;
  font-family: var(--f-mono);
  font-size:   11px;
  color:       #fff;
  background:  rgba(7,10,28,.6);
  border:      1px solid var(--bg-border);
  padding:     5px 9px;
  border-radius: 7px;
}

.founder h2 {
  font-size:     clamp(28px, 4vw, 44px);
  margin-bottom: 18px;
}

.founder p {
  color:         var(--text-muted);
  margin-bottom: 16px;
}

.founder .quote {
  color:       #fff;
  font-size:   20px;
  font-style:  italic;
  border-left: 2px solid var(--magenta);
  padding-left: 20px;
  box-shadow:  -1px 0 20px -6px var(--magenta-glow);
}

@media (max-width: 880px) {
  .founder {
    grid-template-columns: 1fr;
  }

  .portrait {
    max-width: 230px;
  }
}

/* ─── Contact Channel Grid ───────────────────────────────────────────────── */
.contact-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   16px;
}

/* ── Contact: handshake photo + channels in a 2-col layout ──────────────── */
.contact-layout {
  display:               grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap:                   clamp(28px, 4vw, 60px);
  align-items:           center;
  max-width:             1080px;
  margin:                0 auto;
}
/* inside the 2-col layout the channels stack into a 2×2 */
.contact-layout .contact-grid {
  grid-template-columns: 1fr 1fr;
}
.contact-photo {
  margin:   0;
  position: relative;
}
.contact-photo img {
  display:       block;
  width:         100%;
  height:        auto;
  border-radius: var(--radius-lg);
  /* feather the photo into the magenta block — no hard edge */
  -webkit-mask-image: radial-gradient(118% 100% at 62% 44%, #000 52%, transparent 86%);
  mask-image:         radial-gradient(118% 100% at 62% 44%, #000 52%, transparent 86%);
  box-shadow:         0 30px 70px -34px #000;
}
@media (max-width: 860px) {
  .contact-layout {
    grid-template-columns: 1fr;
    max-width:             560px;
  }
  .contact-photo {
    max-width: 440px;
    margin:    0 auto;
  }
}
@media (max-width: 560px) {
  .contact-layout .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Risk-reducer microline under the channel grid (reuses trust.* strings).
   --text-muted, not --text-dim: dim is 3.2:1 on this bg (fails AA 4.5:1). */
.contact-assure {
  margin:      36px auto 0;
  text-align:  center;
  font-family: var(--f-mono);
  font-size:   12.5px;
  color:       var(--text-muted);
}

.chan {
  border-radius:           var(--radius-md);
  padding:                 26px;
  transition:              border-color .2s, transform .2s, box-shadow .2s;
  cursor:                  pointer;
  background:              var(--glass);
  backdrop-filter:         blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border:                  1px solid var(--bg-border);
  text-decoration:         none;
  display:                 block;
  color:                   inherit;
}

.chan:hover {
  border-color: var(--aqua);
  transform:    translateY(-4px);
  box-shadow:   0 0 40px -12px var(--aqua-glow);
}

.chan.wa:hover {
  border-color: #25d366;
  box-shadow:   0 0 40px -12px #25d36655;
}

.chan:focus-visible {
  outline:        2px solid var(--aqua);
  outline-offset: 3px;
}

.chan .ico {
  font-size:     28px;
  margin-bottom: 13px;
}

.chan .ico svg {
  width:  30px;
  height: 30px;
}

.chan h3 {
  font-size:     17px;
  margin-bottom: 5px;
}

.chan p {
  color:     var(--text-muted);
  font-size: 13.5px;
}

@media (max-width: 880px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── Social Icons ───────────────────────────────────────────────────────── */
.socials {
  display:    flex;
  gap:        10px;
  margin-top: 20px;
}

.socials a {
  width:          40px;
  height:         40px;
  border:         1px solid var(--bg-border);
  border-radius:  var(--radius-sm);
  display:        grid;
  place-items:    center;
  color:          var(--text-muted);
  transition:     border-color .2s, color .2s, box-shadow .2s;
}

.socials a:hover {
  border-color: var(--aqua);
  color:        var(--aqua);
  box-shadow:   0 0 22px -8px var(--aqua-glow);
}

.socials a:focus-visible {
  outline:        2px solid var(--aqua);
  outline-offset: 3px;
}

.socials svg {
  width:  18px;
  height: 18px;
}

/* ─── Footer ─────────────────────────────────────────────────────────────── */
footer.site {
  border-top: 1px solid var(--bg-border);
  padding:    80px 0 30px;
  position:   relative;
  overflow:   hidden;
}

/* Watermark logo */
.foot-water-img {
  position:   absolute;
  left:       50%;
  top:        50%;
  transform:  translate(-50%, -50%);
  width:      118%;
  height:     auto; /* preserve the wordmark's ~8:1 aspect ratio */
  max-width:  1500px;
  opacity:    0.05;
  pointer-events: none;
}

.foot-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap:                   40px;
  position:              relative;
  z-index:               2;
}

.foot-grid p {
  color:     var(--text-muted);
  font-size: 14px;
}

.foot-col h4 {
  font-size:      13px;
  font-family:    var(--f-mono);
  text-transform: uppercase;
  letter-spacing: .14em;
  color:          var(--text-dim);
  margin-bottom:  14px;
}

.foot-col a {
  display:       block;
  color:         var(--text-muted);
  font-size:     14px;
  margin-bottom: 8px;
}

.foot-col a:hover {
  color: var(--aqua);
}

.foot-legal {
  margin-top:      54px;
  padding-top:     22px;
  border-top:      1px solid var(--bg-border);
  display:         flex;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             10px;
  font-family:     var(--f-mono);
  font-size:       12.5px;
  color:           var(--text-dim);
  position:        relative;
  z-index:         2;
}

@media (max-width: 880px) {
  .foot-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Startup Callout Band ───────────────────────────────────────────────── */
/*
 * A compact glass accent row placed after the process section on the home page.
 * Keeps the startup angle visible without disrupting the main flow.
 */
.startup-callout {
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   24px;
  align-items:           center;
  background:            var(--glass);
  backdrop-filter:       blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border:                1px solid var(--bg-border);
  border-left:           3px solid var(--aqua);
  border-radius:         var(--radius-md);
  padding:               22px 26px;
  box-shadow:            -2px 0 20px -8px var(--aqua-glow);
  margin-top:            40px;
}

.startup-callout .sc-stat {
  font-family: var(--f-mono);
  font-size:   clamp(28px, 4vw, 40px);
  font-weight: 700;
  color:       var(--aqua);
  text-shadow: 0 0 calc(28px * var(--glow)) var(--aqua-glow);
  white-space: nowrap;
}

.startup-callout .sc-body h3 {
  font-family:   var(--f-display);
  font-size:     18px;
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: 6px;
}

.startup-callout .sc-body p {
  color:     var(--text-muted);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 600px) {
  .startup-callout {
    grid-template-columns: 1fr;
    gap:                   12px;
    padding:               18px 16px;
  }
}

/* ─── FAQ Grid ───────────────────────────────────────────────────────────── */
/*
 * Used by the service sub-pages (ai, web, shop) via renderFaq().
 * Classes: .faq-grid, .faq-item, .faq-q, .faq-a
 * Note: .faq-item also carries .reveal.s — the reveal system handles the
 * entrance animation; no additional animation rules needed here.
 */
.faq-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   20px;
}

@media (max-width: 720px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }
}

.faq-item {
  background:              var(--glass);
  backdrop-filter:         blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border:                  1px solid var(--bg-border);
  border-radius:           var(--radius-md);
  padding:                 28px 26px;
  transition:              border-color .25s, box-shadow .25s, transform .25s;
}

.faq-item:hover {
  border-color: var(--aqua-dim);
  box-shadow:   0 12px 50px -24px var(--aqua-glow);
  transform:    translateY(-3px);
}

.faq-q {
  font-family:   var(--f-display);
  font-size:     18px;
  font-weight:   700;
  color:         var(--text-primary);
  margin-bottom: 12px;
  padding-left:  14px;
  border-left:   2px solid var(--aqua);
  box-shadow:    -1px 0 14px -5px var(--aqua-glow);
  line-height:   1.3;
}

.faq-a {
  color:       var(--text-muted);
  font-size:   15px;
  line-height: 1.65;
}

@media (max-width: 600px) {
  .faq-item {
    padding: 22px 18px;
  }

  .faq-q {
    font-size: 16px;
  }
}

/* ─── Home FAQ Accordion ─────────────────────────────────────────────────── */
/*
 * Used exclusively by renderHomeFaq() on the home page.
 * Native <details>/<summary> — zero JS, keyboard accessible.
 * Chevron rendered via CSS ::after on <summary>; uses CSS rotate so it
 * honours prefers-reduced-motion (transition disabled, not the icon).
 * Token-only colours — no hardcoded hex.
 */
.faq-acc {
  max-width: 780px;
  margin:    0 auto;
}

.faq-acc-item {
  --faq-pad-x:             24px;
  background:              var(--glass);
  backdrop-filter:         blur(var(--glass-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.2);
  border:                  1px solid var(--bg-border);
  border-radius:           var(--radius-md);
  margin-bottom:           12px;
  overflow:                hidden;
  transition:              border-color .25s, box-shadow .25s, background-color .25s;
}

/* Hover/open feedback must survive the home deck layer's corner-cut
   clip-path, which crops anything painted outside the box — so the panel
   lights from within (inset bloom + stronger glass), never outward.
   background-color longhand on purpose: the shorthand would wipe the
   deck layer's cut-edge hairline background-image. */
.faq-acc-item:hover,
.faq-acc-item[open] {
  border-color:     var(--aqua-dim);
  background-color: var(--glass-strong);
  box-shadow:       inset 0 0 32px -14px var(--aqua-glow);
}

.faq-acc-item:hover .faq-acc-q {
  color: var(--aqua);
}

/* Keyboard parity with the hover light-up. Inset offset on purpose: the
   item's overflow:hidden + the deck layer's clip-path would crop an
   outline drawn outside the summary's box. */
.faq-acc-q:focus-visible {
  outline:        2px solid var(--aqua);
  outline-offset: -3px;
  color:          var(--aqua);
}

.faq-acc-q {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             16px;
  padding:         20px var(--faq-pad-x);
  font-family:     var(--f-display);
  font-size:       17px;
  font-weight:     700;
  color:           var(--text-primary);
  cursor:          pointer;
  list-style:      none;       /* Firefox */
  user-select:     none;
  line-height:     1.3;
  border-left:     2px solid var(--aqua);
  box-shadow:      -1px 0 14px -5px var(--aqua-glow);
  transition:      color .25s;
}

/* Remove default disclosure triangle in WebKit/Blink */
.faq-acc-q::-webkit-details-marker { display: none; }

/* Chevron via ::after — rotates when [open] */
.faq-acc-q::after {
  content:    '';
  flex-shrink: 0;
  width:       18px;
  height:      18px;
  background:  var(--aqua);
  clip-path:   polygon(50% 60%, 0 20%, 100% 20%);
  transition:  rotate .25s;
  rotate:      0deg;
}

.faq-acc-item[open] .faq-acc-q::after {
  rotate: 180deg;
}

.faq-acc-a {
  padding:     14px var(--faq-pad-x) 24px;
  color:       var(--text-muted);
  font-size:   15px;
  line-height: 1.65;
}

@media (max-width: 600px) {
  .faq-acc-item {
    --faq-pad-x: 18px;
  }

  .faq-acc-q {
    font-size:      15px;
    padding-top:    16px;
    padding-bottom: 16px;
  }

  .faq-acc-a {
    padding-top:    10px;
    padding-bottom: 18px;
  }
}

/* Reduced-motion: skip the chevron rotation transition */
@media (prefers-reduced-motion: reduce) {
  .faq-acc-q::after {
    transition: none;
  }

  .faq-acc-item,
  .faq-acc-q {
    transition: none;
  }
}

/* ─── Section Transitions & Dividers ────────────────────────────────────── */
/*
 * Three distinct seam-breaking techniques so no two section edges look the same:
 *
 *   1. Diagonal clip-path cuts — .manifesto (block-cyan) and .seam
 *      sections get a slight skew on their bottom edge. The section immediately
 *      after gets a compensating top clip so the slanted edge looks deliberate
 *      rather than a rendering artefact.
 *
 *   2. Glitch-on-reveal — .glitchy.reveal.in triggers a one-shot RGB-split
 *      animation (::before / ::after) the moment the heading scrolls into view.
 *      Uses the existing .glitchy / data-t pattern; the .reveal + .in hook is
 *      already set by initReveals() in JS. No JS added.
 *
 *   3. Scanline / gradient-mesh accents on .stats-band and .manifesto — very
 *      low opacity ("felt not seen") depth layer.
 *
 * ALL compositor-only (transform / opacity / clip-path / background-position).
 * Completely disabled under prefers-reduced-motion / data-motion="off".
 * No layout-triggering properties (width, height, padding) animated.
 * No new HTML; CSS-only via ::before/::after and existing class hooks.
 */

/* ── 1. Diagonal clip-path seams ─────────────────────────────────────────── */

/*
 * .manifesto (block-cyan): slant bottom-right edge 3° downward.
 * The next section (.services) has a plain transparent bg — the cut is visible
 * against the dark body background without a compensating clip.
 */
.manifesto {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 36px), 0 100%);
  /* Extend bottom padding so content isn't clipped by the slant */
  padding-bottom: calc(130px + 36px);
}

/*
 * .seam (.process / .contact): slant top-left edge 2.5° upward.
 * This creates a wedge seam at the boundary with the preceding plain section.
 */
.seam {
  clip-path: polygon(0 32px, 100% 0, 100% 100%, 0 100%);
  /* Compensate top content clear */
  padding-top: calc(110px + 32px);
}

/* The contact hub reuses .seam — give it a slightly different cut angle */
#contact.seam {
  clip-path: polygon(0 0, 100% 28px, 100% 100%, 0 100%);
  padding-top: calc(80px + 28px);
}

/* Reduced-motion / data-motion: flat rectangles (no clip-path slant) */
@media (prefers-reduced-motion: reduce) {
  .manifesto {
    clip-path: none;
    padding-bottom: 130px;
  }
  .seam {
    clip-path: none;
    padding-top: 110px;
  }
  #contact.seam {
    clip-path: none;
    padding-top: 80px;
  }
}

html[data-motion="off"] .manifesto                  { clip-path: none; padding-bottom: 130px; }
html[data-motion="off"] .seam              { clip-path: none; padding-top: 110px; }
html[data-motion="off"] #contact.seam      { clip-path: none; padding-top: 80px; }

/* Mobile: halve the slant depth so it doesn't eat into content at narrow widths */
@media (max-width: 600px) {
  .manifesto {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 0 100%);
    padding-bottom: calc(80px + 18px);
  }
  .seam {
    clip-path: polygon(0 16px, 100% 0, 100% 100%, 0 100%);
    padding-top: calc(72px + 16px);
  }
  #contact.seam {
    clip-path: polygon(0 0, 100% 14px, 100% 100%, 0 100%);
    padding-top: calc(72px + 14px);
  }
}

/* ── 2. Glitch-on-reveal for section H2 headings ─────────────────────────── */
/*
 * Triggered once when IntersectionObserver adds .in to a .reveal parent.
 * The heading itself carries .glitchy; we target .glitchy inside .reveal.in.
 * CSS-only: no JS hook beyond the existing .reveal → .in transition.
 *
 * Uses ::before (aqua, left-shifted) + ::after (magenta, right-shifted),
 * each playing a one-shot clip-path flicker that fades out in 0.7 s.
 * The glitch only fires on the initial .in add (animation-fill-mode: forwards
 * prevents replay; the parent .reveal.in state persists).
 *
 * Does NOT use data-t (which contains plain-text and mismatches styled HTML).
 * Instead the pseudo-elements clone the heading via content:inherit — the text
 * colour diverges (aqua / magenta) and clip-path slices alternate bands.
 */

/* Glitch-on-reveal keyframes */
@keyframes glitch-in-top {
  0%   { clip-path: inset(0 0 65% 0); transform: translate(-4px, -2px); opacity: .9; }
  20%  { clip-path: inset(5% 0 55% 0); transform: translate(3px, -1px);  opacity: .8; }
  40%  { clip-path: inset(0 0 60% 0); transform: translate(-2px, 1px);  opacity: .9; }
  60%  { clip-path: inset(8% 0 50% 0); transform: translate(4px, -2px);  opacity: .7; }
  80%  { clip-path: inset(0 0 65% 0); transform: translate(-1px, 2px);  opacity: .5; }
  100% { clip-path: inset(0 0 100% 0); transform: translate(0,0); opacity: 0; }
}

@keyframes glitch-in-bot {
  0%   { clip-path: inset(50% 0 0 0);  transform: translate(4px, 2px);   opacity: .9; }
  20%  { clip-path: inset(58% 0 0 0);  transform: translate(-3px, 1px);  opacity: .8; }
  40%  { clip-path: inset(48% 0 2% 0); transform: translate(2px, -1px);  opacity: .9; }
  60%  { clip-path: inset(52% 0 0 0);  transform: translate(-4px, 2px);  opacity: .7; }
  80%  { clip-path: inset(55% 0 0 0);  transform: translate(1px, -2px);  opacity: .5; }
  100% { clip-path: inset(100% 0 0 0); transform: translate(0,0); opacity: 0; }
}

/*
 * Target: .glitchy elements that are themselves .reveal.in,
 *         OR .glitchy elements whose nearest .reveal ancestor has .in.
 * Both cases covered by these two selectors.
 */
.reveal.in > .glitchy::before,
.reveal.in > .glitchy::after,
.glitchy.reveal.in::before,
.glitchy.reveal.in::after {
  /* Override the hover-suppressed content:none */
  content:         attr(data-t);
  position:        absolute;
  inset:           0;
  /* Same font/size as the parent heading (inherits) */
  font:            inherit;
  letter-spacing:  inherit;
  line-height:     inherit;
  white-space:     inherit;
  pointer-events:  none;
  animation-duration:        0.7s;
  animation-timing-function: steps(3, end);
  animation-fill-mode:       forwards;
  animation-iteration-count: 1;
}

.reveal.in > .glitchy::before,
.glitchy.reveal.in::before {
  color:                    var(--aqua);
  animation-name:           glitch-in-top;
}

.reveal.in > .glitchy::after,
.glitchy.reveal.in::after {
  color:                    var(--magenta);
  animation-name:           glitch-in-bot;
}

/* Disable glitch-on-reveal under reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal.in > .glitchy::before,
  .reveal.in > .glitchy::after,
  .glitchy.reveal.in::before,
  .glitchy.reveal.in::after {
    animation: none;
    content:   none;
  }
}

html[data-motion="off"] .reveal.in > .glitchy::before,
html[data-motion="off"] .reveal.in > .glitchy::after,
html[data-motion="off"] .glitchy.reveal.in::before,
html[data-motion="off"] .glitchy.reveal.in::after {
  animation: none;
  content:   none;
}

/* ── 3. Scanline / gradient-mesh depth accents ───────────────────────────── */
/*
 * .manifesto: subtle horizontal scanline shimmer at very low opacity.
 * .stats-band already has .stats-scanlines (grid overlay) — leave it unchanged.
 *
 * We add a second ::after mesh on .manifesto + the .seam blocks (horizontal
 * bars, not a grid) — purely decorative, z-index below text.
 * The existing body::after film-grain is global; this is section-local.
 */

.manifesto::after,
.seam::after {
  content:         "";
  position:        absolute;
  inset:           0;
  pointer-events:  none;
  z-index:         0;
  opacity:         0.04;
  background-image:
    linear-gradient(0deg, var(--aqua-glow) 1px, transparent 1px),
    linear-gradient(90deg, var(--magenta-glow) 1px, transparent 1px);
  background-size: 60px 60px;
  /* Mask so scanlines fade at top/bottom and don't fight the clip-path seam */
  mask-image:      linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
}

/* Reduced-motion: hide mesh on manifesto */
@media (prefers-reduced-motion: reduce) {
  .manifesto::after,
  .seam::after { display: none; }
}
html[data-motion="off"] .manifesto::after,
html[data-motion="off"] .seam::after { display: none; }

/* ─── Scroll Reveal ──────────────────────────────────────────────────────── */
.reveal {
  opacity:    0;
  transform:  translateY(30px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}

.reveal.l { transform: translateX(-40px); }
.reveal.r { transform: translateX(40px);  }
.reveal.s { transform: scale(.94);        }

.reveal.in {
  opacity:   1;
  transform: none;
}

/* Reduced-motion / data-motion=off: skip all animations */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity:    1;
    transform:  none;
    transition: none;
  }

  #matrix {
    display: none;
  }

  .marquee .track,
  .grid-floor::before {
    animation: none;
  }

  /* Frozen track stays reachable: manual scroll, themed thin scrollbar
     (matches the .brand-marquee reduced-motion treatment) */
  .marquee {
    overflow-x:         auto;
    -webkit-mask-image: none;
    mask-image:         none;
    scrollbar-width:    thin;
    scrollbar-color:    var(--bg-border) transparent;
  }

  .hero h1 .cursor {
    animation: none;
  }

  .cur {
    display: none;
  }

  .glitchy:hover::before,
  .glitchy:hover::after {
    display: none;
  }
}

/* data-motion="off" runtime toggle (mirrors reduced-motion) */
html[data-motion="off"] .reveal              { opacity: 1; transform: none; transition: none; }
html[data-motion="off"] #matrix             { display: none; }
html[data-motion="off"] .marquee .track     { animation: none; }
html[data-motion="off"] .marquee {
  overflow-x:         auto;
  -webkit-mask-image: none;
  mask-image:         none;
  scrollbar-width:    thin;
  scrollbar-color:    var(--bg-border) transparent;
}
html[data-motion="off"] .grid-floor::before { animation: none; }
html[data-motion="off"] .cur               { display: none; }
html[data-motion="off"] .glitchy:hover::before,
html[data-motion="off"] .glitchy:hover::after { display: none; }

/* ─── Mobile Gutters (≤600px) ────────────────────────────────────────────── */
/*
 * Ensures nothing sits flush against viewport edges on 360–390px phones.
 * .wrap already has padding:0 24px globally; these rules tighten grids/cards
 * that break out of .wrap or need extra breathing room at phone width.
 */
@media (max-width: 600px) {
  /* Tighten hero section vertical padding */
  .hero {
    padding: 24px 0;
  }

  /* Hero column: allow narrower text, add slight side guard */
  .hero .wrap {
    gap: 24px;
  }

  /* Section vertical rhythm on small phones (padding-block — see the base
     .sec rule; the shorthand would zero .wrap's gutter) */
  .sec {
    padding-block: 72px;
  }

  /* Manifesto section (top spacing comes from the seated trust tray) */
  .manifesto {
    padding: 0 0 80px;
  }

  /* Bento cards — reduce internal padding on narrow phones */
  .card {
    padding: 22px 18px;
  }

  /* Process steps (sub-pages only — home uses .tl-item) */
  .step {
    padding: 22px 18px;
  }

  /* Contact channel cards */
  .chan {
    padding: 20px 16px;
  }

  /* Cases body */
  .case .body {
    padding: 18px 16px;
  }

  /* Trust bar — shrink horizontal margins so it doesn't bleed, and tighten
     the gap to the manifesto heading */
  .trust {
    margin-bottom: 56px;
  }

  .trust .wrap {
    margin:  0 8px;
    padding: 14px 16px;
  }

  /* Contact grid: single column on very narrow phones */
  .contact-grid {
    grid-template-columns: 1fr;
  }

  /* Founder portrait: don't let it overflow */
  .portrait {
    max-width: 180px;
  }

  /* Stats: keep 2-col but tighten gap */
  .stats {
    gap: 22px 12px;
  }

  /* Header padding on small phones */
  header.site {
    padding: 12px 16px;
  }

  /* Footer padding */
  footer.site {
    padding: 56px 0 24px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Quickscan funnel + shared form fields
 *
 * Used by src/pages/quickscan.ts (no-JS fallback) and src/client/quickscan.ts
 * (interactive funnel). Mobile-first, token-only (no hardcoded hex), and
 * reduced-motion-safe (the @media block at the end neutralises all motion).
 * Also (re)defines .input / .form-group / .form-privacy / .status-msg here —
 * the legacy main.css that used to provide them is no longer loaded, so the
 * contact + callback + quickscan forms all rely on these.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Shared form primitives (formerly in main.css) ──────────────────────── */
.form-group {
  margin-bottom: 18px;
  display:       flex;
  flex-direction: column;
  gap:           8px;
}

.form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   18px;
}

.form-group label {
  font-family:    var(--f-mono);
  font-size:      12.5px;
  letter-spacing: .05em;
  color:          var(--text-muted);
}

.input {
  width:           100%;
  font-family:     var(--f-body);
  font-size:       16px;
  color:           var(--text-primary);
  background:      rgba(255, 255, 255, .03);
  border:          1px solid var(--bg-border);
  border-radius:   var(--radius-sm);
  padding:         12px 14px;
  transition:      border-color .2s, box-shadow .2s;
}

.input::placeholder {
  color: var(--text-dim);
}

.input:focus-visible {
  outline:      none;
  border-color: var(--aqua);
  box-shadow:   0 0 0 3px var(--aqua-glow);
}

.form-privacy {
  font-size:  13px;
  color:      var(--text-dim);
  margin:     12px 0 18px;
}

/* ─── Status banner (no-JS POST round-trip) ──────────────────────────────── */
.status-msg {
  border-radius: var(--radius-md);
  font-size:     15px;
  margin:        0 0 24px;
  /* Empty by default — no padding/border until populated by JS. */
}

.status-msg:not(:empty) {
  padding: 14px 18px;
  border:  1px solid var(--bg-border);
}

.status-msg.success {
  color:        var(--success);
  border-color: var(--success);
  background:   rgba(31, 217, 154, .08);
}

.status-msg.error {
  color:        var(--error);
  border-color: var(--error);
  background:   rgba(255, 77, 109, .08);
}

/* ─── No-JS fallback form ────────────────────────────────────────────────── */
.quickscan-fallback {
  display:        flex;
  flex-direction: column;
}

.qs-fallback-intro {
  color:         var(--text-muted);
  margin-bottom: 24px;
}

.qs-fallback-fs {
  border:        1px solid var(--bg-border);
  border-radius: var(--radius-md);
  padding:       20px;
  margin-bottom: 22px;
}

.qs-fallback-fs > legend {
  font-family:    var(--f-display);
  font-weight:    700;
  font-size:      18px;
  padding:        0 8px;
  color:          var(--text-primary);
}

.qs-fallback-grouplabel {
  font-family:    var(--f-mono);
  font-size:      12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          var(--aqua);
  margin:         14px 0 6px;
}

.qs-fallback-opt {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       10px 4px;
  cursor:        pointer;
}

.qs-fallback-opt input {
  width:        18px;
  height:       18px;
  accent-color: var(--aqua);
  flex:         0 0 auto;
}

.qs-fallback-actions {
  display:   flex;
  gap:       14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ─── Interactive funnel: header / progress ──────────────────────────────── */
.quickscan-app {
  display:        flex;
  flex-direction: column;
  gap:            22px;
}

.qs-header {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.qs-progress {
  height:        6px;
  border-radius: 999px;
  background:    var(--bg-surface);
  overflow:      hidden;
  border:        1px solid var(--bg-border);
}

.qs-progress-fill {
  display:       block;
  height:        100%;
  width:         0;
  border-radius: 999px;
  background:    linear-gradient(90deg, var(--aqua), var(--magenta));
  box-shadow:    0 0 16px var(--aqua-glow);
  transition:    width .4s ease;
}

.qs-progress-text {
  font-family:    var(--f-mono);
  font-size:      12px;
  letter-spacing: .08em;
  color:          var(--text-muted);
  margin:         0;
}

/* ─── Funnel panel + steps ───────────────────────────────────────────────── */
.qs-panel {
  min-height: 280px;
}

.qs-step {
  display:        flex;
  flex-direction: column;
  gap:            18px;
}

.qs-step:focus-visible,
.qs-panel:focus-visible {
  outline:        2px solid var(--aqua);
  outline-offset: 4px;
  border-radius:  var(--radius-sm);
}

.qs-legend {
  font-family: var(--f-display);
  font-weight: 700;
  font-size:   clamp(22px, 4vw, 30px);
  line-height: 1.1;
  margin:      0;
}

.qs-enter {
  opacity:   0;
  transform: translateY(8px);
}

.qs-step,
.qs-result,
.qs-capture,
.qs-success {
  transition: opacity .3s ease, transform .3s ease;
}

/* ─── Option cards (radiogroup) ──────────────────────────────────────────── */
.qs-options {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   12px;
}

.qs-option {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  text-align:     left;
  padding:        18px 20px;
  border-radius:  var(--radius-md);
  border:         1px solid var(--bg-border);
  background:     rgba(255, 255, 255, .03);
  color:          var(--text-primary);
  cursor:         pointer;
  font-family:    var(--f-body);
  transition:     border-color .2s, box-shadow .2s, transform .2s, background .2s;
}

.qs-option:hover {
  border-color: var(--aqua);
  transform:    translateY(-2px);
  box-shadow:   0 12px 40px -24px var(--aqua-glow);
}

.qs-option:focus-visible {
  outline:        2px solid var(--aqua);
  outline-offset: 3px;
}

.qs-option.selected {
  border-color: var(--aqua);
  background:   var(--aqua-glow);
  box-shadow:   0 0 0 1px var(--aqua);
}

.qs-option-label {
  font-family: var(--f-display);
  font-weight: 600;
  font-size:   17px;
}

.qs-option-desc {
  font-size: 14px;
  color:     var(--text-muted);
}

/* ─── Navigation row (Back) ──────────────────────────────────────────────── */
.qs-nav {
  display:   flex;
  gap:       12px;
  margin-top: 8px;
}

.qs-back {
  align-self: flex-start;
}

/* ─── Result screen ──────────────────────────────────────────────────────── */
.qs-result-intro {
  color:  var(--text-muted);
  margin: 0;
}

.qs-subhead {
  font-family:    var(--f-mono);
  font-size:      12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--aqua);
  margin:         8px 0 0;
}

.qs-opportunities {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        10px;
  margin:     0;
  padding:    0;
}

.qs-opportunities li {
  position:      relative;
  padding-left:  28px;
  color:         var(--text-primary);
  font-size:     16px;
}

.qs-opportunities li::before {
  content:     "→";
  position:    absolute;
  left:        0;
  color:       var(--aqua);
  font-family: var(--f-mono);
}

.qs-tier {
  border-radius: var(--radius-md);
  border:        1px solid var(--bg-border);
  background:    var(--glass);
  padding:       18px 20px;
}

.qs-tier-name {
  display:        inline-block;
  font-family:    var(--f-mono);
  font-size:      13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--magenta);
  border:         1px solid var(--magenta-dim);
  border-radius:  999px;
  padding:        4px 14px;
  margin-bottom:  10px;
}

.qs-tier-body {
  color:  var(--text-muted);
  margin: 0;
  font-size: 15.5px;
}

.qs-disclaimer {
  font-family:    var(--f-mono);
  font-size:      13px;
  color:          var(--text-dim);
  border-left:    2px solid var(--aqua-dim);
  padding-left:   14px;
  margin:         4px 0 0;
}

.qs-result-actions {
  display:    flex;
  gap:        14px;
  flex-wrap:  wrap;
  align-items: center;
}

/* ─── AI-personalised summary (only shown when the AI layer succeeds) ─────── */
.qs-ai-summary {
  border-radius: var(--radius-md);
  border:        1px solid var(--aqua-dim);
  background:    var(--glass);
  padding:       14px 18px;
  margin:        2px 0 0;
  display:       flex;
  flex-direction: column;
  gap:           6px;
}

.qs-ai-summary-text {
  color:  var(--text-primary);
  margin: 0;
  font-size: 15.5px;
}

/* ─── Optional free-text note on the timeline step ────────────────────────── */
.qs-freetext-group {
  margin-top: 18px;
}

.qs-freetext {
  resize:     vertical;
  min-height: 56px;
}

/* ─── Capture step ───────────────────────────────────────────────────────── */
.qs-capture-form {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

.qs-capture-intro {
  color:         var(--text-muted);
  margin:        4px 0 16px;
}

.qs-turnstile {
  margin: 8px 0 4px;
}

.qs-capture-status:empty {
  display: none;
}

.qs-capture-status {
  font-size: 15px;
  padding:   12px 16px;
  border-radius: var(--radius-sm);
  margin:    4px 0;
}

.qs-capture-status.error {
  color:        var(--error);
  border:       1px solid var(--error);
  background:   rgba(255, 77, 109, .08);
}

/* ─── Success state ──────────────────────────────────────────────────────── */
.qs-success {
  align-items: center;
  text-align:  center;
  padding:     30px 0;
  gap:         16px;
}

.qs-success-ico {
  width:         64px;
  height:        64px;
  border-radius: 50%;
  display:       grid;
  place-items:   center;
  font-size:     32px;
  color:         var(--success);
  border:        2px solid var(--success);
  box-shadow:    0 0 40px -8px var(--success);
}

/* ─── Timeline Quickscan link ────────────────────────────────────────────── */
.tl-link {
  color:           inherit;
  text-decoration: none;
  border-bottom:   1px dashed var(--aqua-dim);
  transition:      color .2s, border-color .2s;
}

.tl-link:hover,
.tl-link:focus-visible {
  color:        var(--aqua);
  border-color: var(--aqua);
}

/* ─── Responsive: two-column options on wider screens ────────────────────── */
@media (min-width: 640px) {
  .qs-options {
    grid-template-columns: 1fr 1fr;
  }
}

/* ─── Reduced motion: neutralise all funnel motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .qs-progress-fill,
  .qs-step,
  .qs-result,
  .qs-capture,
  .qs-success,
  .qs-option {
    transition: none !important;
  }

  .qs-enter {
    opacity:   1;
    transform: none;
  }

  .qs-option:hover {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   HUD PASS — "Control Deck" shared primitives (spec 2026-06-10)
   Every class here is decorative chrome: always aria-hidden in markup, never
   the only carrier of information. Animations are transform/opacity only and
   neutralized by the global reduced-motion block + data-motion="off" guards.
   Default (no-JS / pre-reveal) states render COMPLETE; "armed" empty states
   exist only under `.reveal:not(.in)` so a dead script never hides content.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Indexed section label — `[ 01 ] LABEL ┄┄┄` ────────────────────────────── */
.hud-label {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.lbl-idx {
  font-style:  normal;
  color:       var(--heat);
  white-space: nowrap; /* "[ 05 ]" must never wrap at its bracket spaces (375px) */
}

.lbl-idx::before { content: "[ "; color: var(--text-dim); }
.lbl-idx::after  { content: " ]"; color: var(--text-dim); }

.hud-label::after {
  content:    "";
  flex:       0 1 220px;
  height:     7px;
  background: repeating-linear-gradient(90deg, var(--bg-border) 0 1px, transparent 1px 9px);
}

/* Centered section heads (e.g. contact) — keep the label row centered */
.sec-head[style*="text-align:center"] .hud-label { justify-content: center; }
.sec-head[style*="text-align:center"] .hud-label::after { display: none; }

/* ─── Mono readout line ─────────────────────────────────────────────────────── */
.readout {
  font-family:    var(--f-mono);
  font-size:      11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--text-dim);
}

/* ─── Segmented LED meter ───────────────────────────────────────────────────
   Markup: <span class="led-meter" aria-hidden="true" style="--fill:.62">
             <span class="lm-f"><span class="lm-s"></span></span>
           </span>
   .lm-f translates left by (1 - fill), .lm-s counter-translates right by the
   same amount → segments stay aligned to the grid while the overflow crops
   them: a compositor-only "fill". Fills segment-by-segment via steps() when
   an ancestor .reveal gains .in; renders FULL by default (no-JS complete). */
.led-meter {
  display:    block;
  position:   relative;
  width:      140px;
  height:     10px;
  overflow:   hidden;
  background: repeating-linear-gradient(90deg, var(--bg-border) 0 6px, transparent 6px 9px);
}

.led-meter .lm-f,
.led-meter .lm-s {
  display:    block;
  position:   absolute;
  inset:      0;
  transition: transform .9s steps(11) .2s;
}

.led-meter .lm-f { transform: translateX(calc(-100% + var(--fill, .7) * 100%)); }

.led-meter .lm-s {
  transform:  translateX(calc(100% - var(--fill, .7) * 100%));
  background: repeating-linear-gradient(90deg, var(--aqua) 0 6px, transparent 6px 9px);
}

/* Armed (empty) only while JS is alive and the block not yet revealed */
.reveal:not(.in) .led-meter .lm-f { transform: translateX(-100%); }
.reveal:not(.in) .led-meter .lm-s { transform: translateX(100%); }

/* Amber peak-hold tick just past the fill level */
.led-meter::after {
  content:    "";
  position:   absolute;
  top:        0;
  bottom:     0;
  width:      6px;
  left:       calc(var(--fill, .7) * 100% + 3px);
  background: var(--heat);
  box-shadow: 0 0 8px var(--heat-glow);
  opacity:    1;
  transition: opacity .3s 1.2s;
}

.reveal:not(.in) .led-meter::after { opacity: 0; }

/* ─── Trace — line with a traveling comet pulse ─────────────────────────────── */
.trace {
  position:   relative;
  height:     2px;
  overflow:   hidden;
  background: linear-gradient(90deg, transparent, var(--bg-border) 10%, var(--bg-border) 90%, transparent);
}

.trace::after {
  content:    "";
  position:   absolute;
  inset:      -2px 0;
  background: linear-gradient(90deg, transparent 0 calc(100% - 56px), var(--aqua-glow) calc(100% - 18px), var(--aqua) calc(100% - 4px), transparent);
  transform:  translateX(-100%);
  animation:  trace-run 6s linear infinite;
}

@keyframes trace-run {
  to { transform: translateX(100%); }
}

/* ─── One-shot scan sweep on reveal (+ replay on hover via .sweep-hover) ────── */
.scan-sweep { position: relative; overflow: hidden; }

.scan-sweep::after {
  content:        "";
  position:       absolute;
  inset:          0;
  pointer-events: none;
  background:     linear-gradient(105deg, transparent 42%, var(--aqua-glow) 50%, transparent 58%);
  transform:      translateX(-130%);
  opacity:        0;
}

.scan-sweep.in::after,
.in .scan-sweep::after { animation: scan-sweep 1s ease-out .25s 1 both; }

.sweep-hover:hover::after { animation: scan-sweep .8s ease-out 1 both; }

@keyframes scan-sweep {
  0%   { opacity: 1; transform: translateX(-130%); }
  100% { opacity: 1; transform: translateX(130%); }
}

/* ─── Bokeh depth field (static, GPU-rastered once) ─────────────────────────── */
.bokeh > .wrap { position: relative; z-index: 1; }

.bokeh::before {
  content:        "";
  position:       absolute;
  inset:          0;
  pointer-events: none;
  opacity:        var(--orb-opacity);
  filter:         blur(26px);
  background:
    radial-gradient(circle 90px at 12% 30%, var(--aqua-glow),    transparent 70%),
    radial-gradient(circle 60px at 78% 18%, var(--magenta-glow), transparent 70%),
    radial-gradient(circle 70px at 88% 78%, var(--heat-glow),    transparent 70%),
    radial-gradient(circle 50px at 32% 88%, var(--aqua-glow),    transparent 70%);
}

/* ─── Equalizer bars (testimonial RX headers, live ticker) ──────────────────── */
.eq {
  display:     inline-flex;
  gap:         2px;
  align-items: flex-end;
  height:      12px;
}

.eq i {
  width:            3px;
  height:           100%;
  background:       var(--aqua);
  transform:        scaleY(.3);
  transform-origin: bottom;
}

.eq i:nth-child(2) { background: var(--magenta); }
.eq i:nth-child(4) { background: var(--heat); }

.in .eq i { animation: eq-bob 1.15s ease-in-out infinite; }
.in .eq i:nth-child(2) { animation-delay: .15s; }
.in .eq i:nth-child(3) { animation-delay: .3s; }
.in .eq i:nth-child(4) { animation-delay: .45s; }

@keyframes eq-bob {
  0%, 100% { transform: scaleY(.25); }
  50%      { transform: scaleY(1); }
}

/* ─── Manual motion-toggle guards (PRM handled globally in tokens.css) ──────── */
html[data-motion="off"] .trace::after,
html[data-motion="off"] .scan-sweep::after,
html[data-motion="off"] .sweep-hover:hover::after,
html[data-motion="off"] .eq i { animation: none; }

/* ─── HUD PASS · Trust bar — system status strip ────────────────────────────── */
.trust .wrap { position: relative; overflow: hidden; }

.trust .item::before {
  content:      "";
  display:      inline-block;
  width:        6px;
  height:       6px;
  margin-right: 9px;
  background:   var(--aqua);
  box-shadow:   0 0 6px var(--aqua-glow);
}

.trust .item:first-child::before {
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}

.trust .item:last-child::before {
  background: var(--heat);
  box-shadow: 0 0 6px var(--heat-glow);
}

/* Data-stream comet along the bottom edge */
.trust .wrap::after {
  content:    "";
  position:   absolute;
  left:       0;
  right:      0;
  bottom:     0;
  height:     2px;
  background: linear-gradient(90deg, transparent 0 calc(100% - 64px), var(--aqua-glow) calc(100% - 20px), var(--aqua) calc(100% - 4px), transparent);
  transform:  translateX(-100%);
  animation:  trace-run 7s linear infinite;
}

html[data-motion="off"] .trust .wrap::after { animation: none; }

/* ─── HUD PASS · Manifesto — heartbeat scope ────────────────────────────────
   Centred, width-capped EKG strip under the copy (flatline → pulse → flatline
   mirrors the "demos die, working software lives" manifesto). Edge fades via
   mask so the trace never hard-cuts; #000 below is a mask alpha stop, not a
   brand color. */
.mani-scope {
  position:       relative;
  width:          min(520px, 86%);
  height:         64px;
  margin:         34px auto 0;
  overflow:       hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.mani-scope > svg {
  width:   100%;
  height:  100%;
  display: block;
  filter:  drop-shadow(0 0 6px var(--aqua-glow));
}

/* Sweep: a narrow feathered window travels the strip while the bright trace
   copy inside counter-translates, so only the line segment under the window
   lights up — the heartbeat itself glows, no floating box. Window = 12.5% of
   the strip, inner svg = 800% (back to full strip width); both transforms are
   linear over the same 4.5s so they cancel exactly and the bright polyline
   stays registered over the dim one. #000 below is a mask alpha stop. */
.mani-glow {
  position:  absolute;
  top:       0;
  left:      0;
  width:     12.5%;
  height:    100%;
  overflow:  hidden;
  transform: translateX(-100%);
  animation: mani-sweep 4.5s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35% 65%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 35% 65%, transparent);
}

.mani-glow svg {
  width:     800%;
  height:    100%;
  display:   block;
  filter:    drop-shadow(0 0 5px var(--aqua)) drop-shadow(0 0 12px var(--aqua-glow));
  transform: translateX(12.5%);
  animation: mani-sweep-trace 4.5s linear infinite;
}

@keyframes mani-sweep       { to { transform: translateX(800%); } }
@keyframes mani-sweep-trace { to { transform: translateX(-100%); } }

html[data-motion="off"] .mani-glow { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mani-glow { display: none; }
}

/* ─── HUD PASS · Brands marquee — edge fades ────────────────────────────────── */
/* #000 below is a mask alpha stop, not a brand color */
.brand-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

/* ─── HUD PASS · Services — ID plates + motif reveals ───────────────────────── */
.svc-id {
  position: absolute;
  top:      14px;
  right:    18px;
  color:    var(--text-dim);
}

.svc-id::first-letter { color: var(--heat); }

/* Uptime bars grow on reveal (height is static layout; only scaleY animates) */
.svc-row .svc-bar {
  transform-origin: bottom;
  transition:       transform .55s cubic-bezier(.2, .7, .2, 1);
}

.svc-row.reveal:not(.in) .svc-bar { transform: scaleY(0); }

.svc-row.in .svc-bar:nth-child(2) { transition-delay: .06s; }
.svc-row.in .svc-bar:nth-child(3) { transition-delay: .12s; }
.svc-row.in .svc-bar:nth-child(4) { transition-delay: .18s; }
.svc-row.in .svc-bar:nth-child(5) { transition-delay: .24s; }
.svc-row.in .svc-bar:nth-child(6) { transition-delay: .3s; }
.svc-row.in .svc-bar:nth-child(7) { transition-delay: .36s; }
.svc-row.in .svc-bar:nth-child(8) { transition-delay: .42s; }
.svc-row.in .svc-bar:nth-child(9) { transition-delay: .48s; }

/* Browser-skeleton shimmer: two gentle opacity pulses after reveal */
.svc-row.in .svc-skel { animation: skel-shimmer 1.6s ease-in-out .3s 2; }

@keyframes skel-shimmer {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* Shop cart button: one attention pulse after reveal */
.svc-row.in .svc-cart { animation: cart-pulse .5s ease-out .8s 1; }

@keyframes cart-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

html[data-motion="off"] .svc-row.in .svc-skel,
html[data-motion="off"] .svc-row.in .svc-cart { animation: none; }

/* ─── HUD PASS · Process — pipeline runner + sequential node glow ───────────── */
.tl-id { display: block; margin-bottom: 6px; }

.tl-runner {
  position:       absolute;
  top:            66px;                 /* centres a 4px overlay on the 2px connector */
  left:           calc(28px + 4%);      /* same span as .tl-connector */
  right:          calc(28px + 4%);
  height:         4px;
  overflow:       hidden;
  pointer-events: none;
  z-index:        0;
}

.tl-runner::after {
  content:    "";
  position:   absolute;
  inset:      0;
  background: linear-gradient(90deg, transparent 0 calc(100% - 72px), var(--aqua-glow) calc(100% - 24px), var(--aqua) calc(100% - 6px), transparent);
  transform:  translateX(-100%);
  animation:  trace-run 5s linear infinite;
}

/* Vertical spine on mobile — hide the horizontal runner */
@media (max-width: 820px) {
  .tl-runner { display: none; }
}

html[data-motion="off"] .tl-runner::after { animation: none; }

/* Node glow ring lights up per node, staggered, once revealed */
.tl-node { position: relative; }

.tl-node::after {
  content:        "";
  position:       absolute;
  inset:          -6px;
  border-radius:  50%;
  border:         1px solid var(--aqua);
  box-shadow:     0 0 14px var(--aqua-glow);
  opacity:        0;
  transition:     opacity .5s;
  pointer-events: none;
}

.tl-item.in .tl-node::after { opacity: 1; }

/* items are .timeline children 3–6 (after .tl-connector + .tl-runner) */
.tl-item:nth-child(4).in .tl-node::after { transition-delay: .2s; }
.tl-item:nth-child(5).in .tl-node::after { transition-delay: .4s; }
.tl-item:nth-child(6).in .tl-node::after {
  transition-delay: .6s;
  border-color:     var(--heat);
  box-shadow:       0 0 14px var(--heat-glow);
}

/* ─── HUD PASS · Cases — case-dossier cards ─────────────────────────────────── */
.case-id {
  display:         flex;
  justify-content: space-between;
  padding:         8px 14px;
  border-bottom:   1px solid var(--bg-border);
  font-family:     var(--f-mono);
  font-size:       10.5px;
  letter-spacing:  .16em;
  color:           var(--text-dim);
}

.case-id-tag { color: var(--heat); }

.case .led-meter { margin-top: 8px; }

/* Micro-instruments live inside the existing .thumb */
.case-instr {
  display: flex;
  width:   100%;
  height:  100%;
  padding: 14px 18px;
  gap:     7px;
}

/* CASE-01 — chat stream */
.case-instr--chat {
  flex-direction:  column;
  justify-content: center;
  gap:             8px;
}

.cb {
  display:       block;
  height:        12px;
  border-radius: 6px;
  background:    var(--bg-elevated);
  border:        1px solid var(--aqua-dim);
  transition:    opacity .4s, transform .4s;
}

.cb--in    { width: 62%; align-self: flex-start; }
.cb--out   { width: 48%; align-self: flex-end; background: var(--bg-surface); border-color: var(--magenta-dim); }
.cb--short { width: 38%; }

.case.reveal:not(.in) .cb { opacity: 0; transform: translateY(6px); }

.case.in .cb:nth-child(2) { transition-delay: .25s; }
.case.in .cb:nth-child(3) { transition-delay: .5s; }

/* CASE-02 — sales bars (height static via --h; only scaleY animates) */
.case-instr--bars { align-items: flex-end; }

.case-instr--bars i {
  flex:             1;
  height:           calc(var(--h) * 64px);
  background:       linear-gradient(180deg, var(--aqua), var(--aqua-dim));
  opacity:          .85;
  transform-origin: bottom;
  transition:       transform .55s cubic-bezier(.2, .7, .2, 1);
}

.case-instr--bars .hot {
  background: linear-gradient(180deg, var(--heat), var(--heat-dim));
  box-shadow: 0 0 12px var(--heat-glow);
}

.case.reveal:not(.in) .case-instr--bars i { transform: scaleY(0); }

.case.in .case-instr--bars i:nth-child(2) { transition-delay: .08s; }
.case.in .case-instr--bars i:nth-child(3) { transition-delay: .16s; }
.case.in .case-instr--bars i:nth-child(4) { transition-delay: .24s; }
.case.in .case-instr--bars i:nth-child(5) { transition-delay: .32s; }
.case.in .case-instr--bars i:nth-child(6) { transition-delay: .4s; }

/* CASE-03 — square-wave signal + sweeping comet */
.case-instr--wave { position: relative; padding: 12px; overflow: hidden; }

.case-instr--wave svg { width: 100%; height: 100%; }

.wave-scan {
  position:   absolute;
  inset:      0;
  background: linear-gradient(90deg, transparent 0 calc(100% - 48px), var(--aqua-glow) calc(100% - 14px), transparent);
  transform:  translateX(-100%);
}

.case.in .wave-scan { animation: trace-run 4.5s linear infinite; }

/* CASE-04 — live match ticker */
.case-instr--live {
  align-items:     center;
  justify-content: center;
  gap:             12px;
  font-family:     var(--f-mono);
}

.case-live {
  position:       relative;
  padding:        3px 8px 3px 18px;
  border:         1px solid var(--error);
  border-radius:  4px;
  font-size:      11px;
  letter-spacing: .14em;
  color:          var(--error);
}

.case-live::before {
  content:       "";
  position:      absolute;
  left:          7px;
  top:           50%;
  width:         5px;
  height:        5px;
  margin-top:    -2.5px;
  border-radius: 50%;
  background:    var(--error);
  animation:     live-blink 1.4s ease-in-out infinite;
}

@keyframes live-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

.case-clock {
  font-size:      15px;
  color:          var(--text-primary);
  letter-spacing: .1em;
}

html[data-motion="off"] .case-live::before,
html[data-motion="off"] .case.in .wave-scan { animation: none; }

/* ─── HUD PASS · Ventures — lab readout + sequential domain cards ───────────── */
.vlab-bar-sig {
  margin-left: auto;
  white-space: nowrap; /* "SYS:LAB · 3 NODES" stays one line; the title wraps instead */
  flex-shrink: 0;
}

.toolkit-card {
  transition: opacity .4s calc(var(--i, 0) * 70ms), transform .4s calc(var(--i, 0) * 70ms),
              border-color .25s, box-shadow .25s;
}

.toolkit-zone.reveal:not(.in) .toolkit-card {
  opacity:   0;
  transform: translateX(-6px);
}

/* ─── HUD PASS · Stats — gauge rings + ruler ticks ──────────────────────────── */
.stat {
  --stat-ring-size: 150px;
  position:         relative;
}

/* Ring centred on the numeral (first child, so its centre sits at half the
   numeral's font-size). The numeral overlaps the ring by design; the label
   below must stay clear of it. */
.stat-ring {
  position:       absolute;
  top:            calc(var(--stat-n-size) / 2);
  left:           50%;
  width:          var(--stat-ring-size);
  height:         var(--stat-ring-size);
  transform:      translate(-50%, -50%);
  pointer-events: none;
  z-index:        0;
}

.stat .n,
.stat .l {
  position: relative;
  z-index:  1;
}

/* Keep the label readable below the circle: its top clears the circle's
   bottom arc (numeral centre + 0.44 × ring box; r=44 in a 100 viewBox)
   by a 16px gap at every viewport width. The resolved margin is off the 4px
   spacing scale by design — it anchors to the ring geometry, not the layout
   grid — and it collapses with .n's 10px bottom margin (always smaller), so
   the arc-to-label gap stays exactly 16px. */
.stat .l {
  margin-top: calc(0.44 * var(--stat-ring-size) - var(--stat-n-size) / 2 + 16px);
}

.stat-ring-dot { animation: ring-dot 2.2s ease-in-out infinite; }

@keyframes ring-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: .2; }
}

html[data-motion="off"] .stat-ring-dot { animation: none; }

/* Ruler tick strip along the bottom of the band */
.stats-band::after {
  content:    "";
  position:   absolute;
  left:       8%;
  right:      8%;
  bottom:     14px;
  height:     7px;
  background: repeating-linear-gradient(90deg, var(--bg-border) 0 1px, transparent 1px 14px);
  opacity:    .7;
}

@media (max-width: 600px) {
  .stat { --stat-ring-size: 118px; }
}

/* ─── HUD PASS · Founder — ID-card readout ──────────────────────────────────── */
.founder .hud-label { margin-bottom: 14px; }

.portrait-readout {
  display:    block;
  margin-top: 10px;
  text-align: center;
}

/* ─── HUD PASS · FAQ — indexed questions + open trace ───────────────────────── */
.faq-idx {
  font-family:    var(--f-mono);
  font-style:     normal;
  font-size:      11px;
  letter-spacing: .14em;
  color:          var(--heat);
  margin-right:   12px;
  white-space:    nowrap; /* "Q-02" must not break at the hyphen on 375px */
  flex-shrink:    0;
}

/* Open trace continues the summary's accent line; same inset as the
   question (2px border + --faq-pad-x) so Q and A text stay aligned. */
.faq-acc-item[open] .faq-acc-a {
  border-left:  2px solid var(--aqua);
  padding-left: var(--faq-pad-x, 24px);
}

/* ─── HUD PASS · Contact — comm channels ────────────────────────────────────── */
.chan-id {
  display:        flex;
  align-items:    center;
  gap:            8px;
  margin-bottom:  12px;
  font-family:    var(--f-mono);
  font-size:      10.5px;
  letter-spacing: .16em;
  color:          var(--text-dim);
}

.chan-sig {
  display:     inline-flex;
  gap:         2px;
  align-items: flex-end;
  margin-left: auto;
}

.chan-sig b {
  width:      3px;
  background: var(--aqua);
}

.chan-sig b:nth-child(1) { height: 4px; }
.chan-sig b:nth-child(2) { height: 7px; }
.chan-sig b:nth-child(3) { height: 10px; opacity: .3; }

.chan:hover .chan-sig b:nth-child(3) {
  opacity:    1;
  background: var(--heat);
  box-shadow: 0 0 6px var(--heat-glow);
}

/* ─── Cut-edge hairlines ─────────────────────────────────────────────────────
   clip-path corner cuts slice the 1px border off, leaving each 45° edge bare.
   These corner-anchored gradient strips repaint a 1px line exactly along the
   two cut edges (top-right + bottom-left): a band parallel to the cut at
   perpendicular distance --cut × .708 from the corner — the element bounds
   crop it to precisely the cut segment. Colour follows --cut-line (default:
   the panels' --bg-border); hover rules retint it with the straight border.
   The deck-cut home panels get the same treatment in home-deck.css. */
.tcard,
.toolkit-card {
  background-origin: border-box;
  background-image:
    linear-gradient(225deg,
      var(--cut-line-tr, var(--cut-line, var(--bg-border))) calc(var(--cut) * .708 + 1px),
      transparent calc(var(--cut) * .708 + 1px)),
    linear-gradient(45deg,
      var(--cut-line-bl, var(--cut-line, var(--bg-border))) calc(var(--cut) * .708 + 1px),
      transparent calc(var(--cut) * .708 + 1px));
}

.tcard:hover,
.toolkit-card:hover {
  --cut-line: var(--aqua);
}