/* Bento grid — matches reference layout (dark theme) */

html {
  -webkit-tap-highlight-color: transparent;
}

@font-face {
  font-family: 'Roboter';
  src: url('../assets/fonts/FG_RoboterTRIAL-Regular.woff2') format('woff2'),
       url('../assets/fonts/FG_RoboterTRIAL-Regular.woff') format('woff'),
       url('../assets/fonts/FG_RoboterTRIAL-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand palette ── */
  --bg: #000000;
  --white: #ffffff;
  --gray-light: #e0e0e0;
  --gray-dark: #404040;
  --coral: #e4695a;
  --tan: #f9d97a;
  --green: #7fdd84;
  --blue: #64bce8;
  --purple: #9877ba;

  /* ── Surfaces ── */
  --surface-dark:  #111111;
  --surface-card:  #222222;
  --surface-light: #f5f5f5;

  /* ── Ink (dark text/elements on light surfaces) ── */
  --ink:         rgba(0,0,0,0.85);
  --ink-strong:  rgba(0,0,0,0.7);
  --ink-mid:     rgba(0,0,0,0.5);
  --ink-soft:    rgba(0,0,0,0.3);
  --ink-faint:   rgba(0,0,0,0.20);
  --ink-border:  rgba(0,0,0,0.13);
  --ink-rule:    rgba(0,0,0,0.06);

  /* ── Chalk (light text/elements on dark surfaces) ── */
  --chalk:         rgba(255,255,255,0.6);
  --chalk-mid:     rgba(255,255,255,0.4);
  --chalk-soft:    rgba(255,255,255,0.25);
  --chalk-faint:   rgba(255,255,255,0.12);
  --chalk-border:  rgba(255,255,255,0.06);
  --chalk-ghost:   rgba(255,255,255,0.03);

  /* ── Layout tokens (fluid) ── */
  --gap: clamp(3px, 0.35vw, 5px);
  --radius: 10px;

  /* ── Padding tiers (use the spacing scale, not magic numbers) ──
     Badge / pill:  --space-2xs / --space-xs      4→12px
     Cell (compact): --space-md                    16→24px   nav, sidebar, code, tiles
     Card (standard): --space-lg                   24→32px   banner, headline, ICP, timeline, FAQ items
     Section (full):  --pad-block / --pad-inline   32→88px   hero, comparison, features, track
  */

  /* ── Font stacks ── */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, "Cascadia Code", monospace;
  --font-stencil: "Roboter", "Inter", sans-serif;
  --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* ── Fluid type scale (8 steps) ──
     Clear tiers with ~1.3× ratio. No 1px increments.
     min = mobile 375px → max = desktop 1440px.                     */
  --text-xs:      clamp(0.5rem, 0.44rem + 0.15vw, 0.5625rem);     /* 8→9px   micro labels      */
  --text-base:    clamp(0.625rem, 0.53rem + 0.25vw, 0.6875rem);   /* 10→11px labels / buttons   */
  --text-body:    clamp(0.75rem, 0.63rem + 0.32vw, 0.8125rem);    /* 12→13px body copy          */
  --text-lg:      clamp(0.8125rem, 0.7rem + 0.37vw, 0.9375rem);   /* 13→15px emphasis / subs    */
  --text-2xl:     clamp(1rem, 0.85rem + 0.5vw, 1.25rem);          /* 16→20px sub-headings       */
  --text-5xl:     clamp(1.375rem, 0.975rem + 1.05vw, 1.625rem);    /* 22→26px display headings   */
  --text-hero:    clamp(2.5rem, 1.5rem + 2.7vw, 3.75rem);         /* 40→60px hero / stats       */
  --text-display: clamp(3.5rem, 2rem + 4vw, 5rem);                /* 56→80px large display      */

  /* ── Structural heading sizes ── */
  --text-section: clamp(1.25rem, 4.8vw + 0.1rem, 2.75rem);       /* Section / card headings — 44px  */
  --text-cta:     clamp(2rem, 4vw + 0.5rem, 3.5rem);              /* CTA / FAQ titles           */
  --text-cta-mob: clamp(2rem, 7vw, 2.75rem);                      /* Mobile heading override    */

  /* ── Fluid spacing scale ── */
  --space-2xs: clamp(0.25rem, 0.2rem + 0.12vw, 0.375rem);       /* 4px → 6px   */
  --space-xs:  clamp(0.5rem, 0.4rem + 0.25vw, 0.75rem);         /* 8px → 12px  */
  --space-sm:  clamp(0.75rem, 0.6rem + 0.4vw, 1rem);            /* 12px → 16px */
  --space-md:  clamp(1rem, 0.8rem + 0.5vw, 1.5rem);             /* 16px → 24px */
  --space-lg:  clamp(1.5rem, 1.1rem + 1vw, 2rem);               /* 24px → 32px */
  --space-xl:  clamp(2rem, 1.4rem + 1.6vw, 3rem);               /* 32px → 48px */
  --space-2xl: clamp(3rem, 2rem + 2.5vw, 4.5rem);               /* 48px → 72px */
  --space-3xl: clamp(4rem, 2.5rem + 4vw, 6rem);                 /* 64px → 96px */

  /* ── Fluid layout (tablet / small desktop / large desktop; mobile unchanged) ── */
  --nav-height:     clamp(3rem, 4vw + 2.25rem, 4rem);           /* 48px → 64px */
  --content-max:    none;
  --content-narrow: none;
  --pad-inline:     clamp(1.25rem, 3vw + 0.5rem, 3rem);        /* horizontal padding */
  --pad-block:      clamp(2rem, 4vw + 1rem, 5.5rem);           /* vertical section padding */
  --hero-aspect:    1 / 0.8;
  --hero-min-h:     clamp(20rem, 38vmin, 32rem);   /* hero cell min height */
  --hero-ascii-h:   100%;                           /* fills entire hero card */
}


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

.lowercase { text-transform: lowercase; }

[hidden] { display: none !important; }

/* When banner + POV are hidden, collapse empty rows on the 4-col desktop grid */
@media (min-width: 60rem) {
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) {
    grid-template-rows: 64px auto auto auto auto auto auto auto auto auto auto auto auto;
  }
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .icp-heading      { grid-row: 7; }
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .icp-list          { grid-row: 8; }
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .bento-icp-right   { grid-row: 7 / 9; }
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .bento-features    { grid-row: 9; }
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .bento-code        { grid-row: 9; }
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .team-tile-row     { grid-row: 10; }
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .bento-track       { grid-row: 11; }
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .funnel-cta        { grid-row: 12; }
}

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  overflow-x: clip;
}

html, body {
  max-width: 100vw;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--font-stencil);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--white);
  background: var(--bg);
  padding: var(--gap);
  padding-bottom: 0;
  position: relative;
  overflow-x: hidden;
}

/* ——— Outer wrapper: collapsed — bento is the real grid ——— */
.bento-outer {
  display: contents;
}

.side-panel {
  display: none;
}

.side-card {
  border-radius: var(--radius);
  width: 100%;
  min-height: 0;
  background: var(--surface-dark);
}

.side-card--short  { flex: 1; }
.side-card--medium { flex: 2; }
.side-card--tall   { flex: 3; }

/* ——— Grid: 4 equal columns, hero spans 3, col 4 stacks sidebar + circuit ——— */
.bento {
  display: grid;
  gap: var(--gap);
  width: 100%;
  max-width: none;
  min-height: auto;
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr 1fr 1fr minmax(0, calc(25% + 2.2vw));
  grid-template-rows: 64px auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
  /* JS reveals after fonts load; fallback shows after 0.5s */
  animation: bento-reveal 0s 0.5s both;
}

@keyframes bento-reveal {
  to { opacity: 1; }
}

/* Nav: spans columns 1–3, row 1 */
.bento-nav {
  grid-column: 1 / 4;
  grid-row: 1;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  min-height: var(--nav-height);
  padding: 0 var(--space-sm);
  gap: var(--space-sm);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              left 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease,
              border-radius 0.35s ease;
}

.bento-nav.is-sticky {
  box-shadow: 0 4px 32px var(--ink-faint);
  background: var(--white);
  backdrop-filter: blur(32px) saturate(1.8);
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
}

.bento-nav.is-expanded {
  border-radius: var(--radius);
}

/* Solid black strip above full-width sticky nav + subtle fade below */
.bento-nav.is-expanded::before {
  content: '';
  position: absolute;
  left: -16px;
  right: -16px;
  bottom: 100%;
  height: 24px;
  background: var(--bg);
  pointer-events: none;
}
.bento-nav.is-expanded::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 48px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.12), transparent);
  pointer-events: none;
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Spacer holds the nav's grid slot when nav goes fixed */
.bento-nav-spacer {
  border-radius: var(--radius);
}

/* Hero: spans columns 1–3, row 2 — 70% height of width */
.bento-hero {
  grid-column: 1 / 4;
  grid-row: 2;
  aspect-ratio: 1 / 0.7;
}

/* Right column wrapper: col 4, spans nav through headline — splits sidebar & circuit 50/50 */
.bento-right-col {
  grid-column: 4;
  grid-row: 1 / 5;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  min-width: 0;
}

.bento-right-col .bento-sidebar {
  flex: 1;
  min-height: clamp(8rem, 12vw, 14rem);
}

.bento-right-col .bento-circuit {
  flex: 1;
  min-height: clamp(10rem, 14vw, 16rem);
  min-width: 0;
}

/* Strip: columns 1–3, row 3 (tight below hero) */
.bento-strip {
  grid-column: 1 / 4;
  grid-row: 3;
}

/* Headline: columns 1–3, row 4 */
.bento-headline {
  grid-column: 1 / 4;
  grid-row: 4;
}

/* Tile row — grabbable + throwable */
.bento-tile-row {
  grid-column: 1 / -1;
  grid-row: 5;
  overflow: hidden;
  cursor: grab;
  border-radius: var(--radius);
}

.bento-tile-row.is-dragging {
  cursor: grabbing;
}

.bento-tile-track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  will-change: transform;
}

.bento-tile-track .bento-tile {
  flex: 0 0 225px;
  aspect-ratio: 1 / 1;
}

.bento-tile-track .bento-tile-photo {
  flex: 0 0 340px;
  aspect-ratio: auto;
  background-size: cover;
  background-position: center;
  position: relative;
}

.bento-tile-track .bento-tile-photo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at top left, var(--ink-soft) 0%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}

.tile-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  padding: var(--space-2xs) var(--space-xs);
  font-family: var(--font-mono);
  font-size: calc(var(--text-xs) + 1px);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink-mid);
  border: 1px solid var(--chalk-faint);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  line-height: 1;
}

/* Full-width section card */
.bento-section {
  grid-column: 1 / -1;
  grid-row: 6;
  background: var(--white);
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.section-inner {
  width: 100%;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  padding: var(--pad-block) var(--pad-inline);
}

.section-title {
  margin: 0 0 var(--space-xl);
  font-family: var(--font-stencil);
  font-size: var(--text-section);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* Duplicate title inside neural card — hidden on desktop, shown on mobile */
.section-title--mobile {
  display: none;
}

/* Comparison layout */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.compare-col {
  min-width: 0;
}

.compare-heading {
  margin: 0 0 1rem;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: 0;
}

/* Graphic containers */
.compare-graphic {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--surface-light);
  border-radius: 10px;
  border: 1px solid var(--ink-rule);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Legacy card — subtle red strikethrough */
.compare-graphic--legacy {
  position: relative;
}

.compare-graphic--legacy::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(200, 60, 60, 0.3) calc(50% - 0.5px), rgba(200, 60, 60, 0.3) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  pointer-events: none;
  z-index: 0;
}

.legacy-tag {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  opacity: 0.45;
  pointer-events: none;
  z-index: 0;
}

.legacy-folder {
  width: 35%;
  height: auto;
  position: relative;
  z-index: 1;
  /* hue shift moved into SVG filter so stamps stay red */
}

.compare-graphic--neural {
  background: var(--surface-dark);
  border-color: var(--chalk-border);
}

#neuralCube {
  display: block;
  width: 100%;
  height: 100%;
}

.compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.compare-item {
  font-family: var(--font-stencil);
  font-size: calc(var(--text-lg) + 1px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--ink-strong);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--ink-rule);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.compare-item:first-child {
  border-top: none;
}

.compare-item:last-child {
  border-bottom: none;
}

.compare-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.compare-icon svg {
  width: 10px;
  height: 10px;
}

.compare-item--yes .compare-icon {
  color: #5cc462;
}

.compare-item--no .compare-icon {
  color: var(--coral);
}

.compare-item--no {
  color: rgba(0,0,0,0.40);
}

/* VS divider — hidden on desktop */
.compare-vs {
  display: none;
}

@media (max-width: 47.99rem) {
  .compare-heading {
    font-size: var(--text-lg);
  }
  .compare-graphic {
    aspect-ratio: 4 / 3;
    border-radius: 8px;
  }
  .compare-vs {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl) 0;
    order: 0;
  }
  .compare-vs::before,
  .compare-vs::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ink-rule);
  }
  .compare-vs span {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--ink-soft);
    text-transform: uppercase;
  }
  .track-inner {
    padding: var(--space-md);
  }
}

/* Banner section — compact two-column card */
.bento-banner {
  grid-column: 1 / -1;
  grid-row: 7;
  background: var(--coral);
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: stretch;
  position: relative;
  overflow: hidden;
}

.banner-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  height: 100%;
}

.banner-deco {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
  margin-top: auto;
}

.banner-arrow {
  color: var(--ink);
  flex-shrink: 0;
  margin-right: 1rem;
}

.banner-barcode {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
}

.banner-barcode span {
  display: block;
  width: 2px;
  background: var(--ink-faint);
}

.banner-barcode span:nth-child(1)  { height: 22px; background: var(--ink-soft); }
.banner-barcode span:nth-child(2)  { height: 12px; }
.banner-barcode span:nth-child(3)  { height: 22px; background: var(--ink-soft); }
.banner-barcode span:nth-child(4)  { height: 7px; }
.banner-barcode span:nth-child(5)  { height: 16px; background: var(--ink-faint); }
.banner-barcode span:nth-child(6)  { height: 22px; background: var(--ink-soft); }
.banner-barcode span:nth-child(7)  { height: 10px; }
.banner-barcode span:nth-child(8)  { height: 22px; background: var(--ink-soft); }
.banner-barcode span:nth-child(9)  { height: 6px; }
.banner-barcode span:nth-child(10) { height: 15px; background: var(--ink-faint); }
.banner-barcode span:nth-child(11) { height: 22px; background: var(--ink-soft); }
.banner-barcode span:nth-child(12) { height: 9px; }
.banner-barcode span:nth-child(13) { height: 18px; background: var(--ink-faint); }
.banner-barcode span:nth-child(14) { height: 22px; background: var(--ink-soft); }
.banner-barcode span:nth-child(15) { height: 8px; }
.banner-barcode span:nth-child(16) { height: 14px; background: var(--ink-faint); }

.banner-spec {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  line-height: 1;
  align-self: flex-end;
  margin-bottom: -1px;
}

.banner-heading {
  margin: 0;
  font-family: var(--font-stencil);
  font-size: var(--text-5xl);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.banner-heading em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
}

.banner-body {
  margin: 0;
  font-family: var(--font-stencil);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-strong);
  max-width: 30rem;
}

.banner-stats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl) var(--space-xl);
}

.banner-stat {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.banner-stat-value {
  font-family: var(--font-stencil);
  font-size: var(--text-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.9;
  color: var(--ink);
  display: flex;
}

.banner-stat-label {
  font-family: var(--font-stencil);
  font-size: var(--text-body);
  color: var(--ink-mid);
  letter-spacing: 0;
  margin-top: 0.15rem;
  line-height: 1.3;
}

/* ——— Unique POV section — bigger sibling of sidebar card ——— */
.bento-pov {
  grid-column: 1 / -1;
  grid-row: 8;
  background: var(--gray-light);
  border-radius: var(--radius);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  overflow: visible;
  min-height: clamp(30rem, 52vw, 40rem);
}

.pov-content {
  width: 100%;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  padding: var(--pad-block) var(--pad-inline);
  color: var(--ink);
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.pov-content * {
  pointer-events: auto;
}

.pov-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ink);
}

.pov-grid {
  display: grid;
  grid-template-columns: 5fr 2fr;
  gap: var(--space-xl);
  align-items: start;
  margin-top: var(--space-sm);
}

.pov-heading {
  margin: 0;
  font-family: var(--font-stencil);
  font-size: var(--text-section);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 28ch;
}

.mob-br { display: none; }

.pov-heading em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.pov-body {
  margin: 0;
  font-family: var(--font-stencil);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-strong);
  padding-top: 0.15em;
}

.pov-canvas-wrap {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

#povFunnel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  pointer-events: auto;
}

/* Features section — techno-futurism poster */
.bento-features {
  grid-column: 1 / 4;
  grid-row: 11;
  background: var(--white);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Code bento card — sits beside features, matches circuit card */
.bento-code {
  grid-column: 4;
  grid-row: 11;
  background: var(--surface-card);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Subtle grid that fades up from bottom-right */
.bento-code::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(to top left, rgba(0,0,0,0.5) 0%, transparent 60%);
  -webkit-mask-image: linear-gradient(to top left, rgba(0,0,0,0.5) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Directional arrow — pinned top-right */
.vtl-arrow {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  color: var(--chalk-border);
  pointer-events: none;
  z-index: 1;
  transition: color 0.25s ease;
}

.bento-code:has(.tl-btn:hover) .vtl-arrow {
  color: var(--white);
}

/* ── Vertical timeline (replaces code snippet) ── */
.vtl-inner {
  padding: var(--space-md) var(--space-md) var(--space-xl);
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 1;
}

.vtl-heading {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--chalk);
  margin: 0 0 var(--space-xl);
}

.vtl-body {
  display: none;
}

.vtl-track {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
}

.vtl-rail {
  position: absolute;
  top: 8px;
  bottom: 0;
  left: 5px;
  width: 1px;
  background: var(--chalk-border);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

.vtl-stop {
  position: relative;
  padding-left: var(--space-lg);
}

/* Dot — matches .tl-dot exactly */
.vtl-dot {
  position: absolute;
  top: 2px;
  left: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--chalk-faint);
  background: var(--surface-card);
  z-index: 2;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              background 0.35s ease;
}

/* Color-coded dot borders */
.vtl-stop--coral .vtl-dot  { border-color: rgba(225,96,81,0.25); }
.vtl-stop--green .vtl-dot  { border-color: rgba(127,221,132,0.25); }
.vtl-stop--blue .vtl-dot   { border-color: rgba(77,174,225,0.25); }
.vtl-stop--purple .vtl-dot { border-color: rgba(142,107,179,0.25); }

/* Content wrapper */
.vtl-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* Hover states */
.vtl-stop:hover .vtl-dot {
  transform: scale(1.15);
}

.vtl-stop:hover .tl-title {
  color: var(--white);
}

.vtl-stop:hover .tl-desc {
  color: var(--chalk-mid);
}

/* CTA stop */
.vtl-stop--cta .vtl-dot { border-color: var(--chalk-faint); }

/* Progress fill — grows on scroll */
.vtl-fill {
  position: absolute;
  top: 8px;
  left: 5px;
  width: 1px;
  height: 0%;
  background: var(--chalk-soft);
  z-index: 1;
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
}

/* ---- .is-done state (scroll-triggered) ---- */
.vtl-stop.is-done .tl-title {
  color: var(--white);
}

.vtl-stop.is-done .tl-num {
  color: var(--chalk);
}

.vtl-stop.is-done .vtl-dot {
  background: var(--green);
  border-color: transparent;
  transform: scale(1.1);
  box-shadow: 0 0 6px rgba(127,221,132,0.2);
}

/* Checkmark inside done dots — SVG mask for rounded ends matching compare icons */
.vtl-stop.is-done .vtl-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 6px;
  transform: translate(-50%, -50%);
  background: var(--surface-card);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6' fill='none'%3E%3Cpath d='M1 3.5L3 5.5L7 0.5' stroke='white' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6' fill='none'%3E%3Cpath d='M1 3.5L3 5.5L7 0.5' stroke='white' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.vtl-stop.is-done .tl-desc {
  color: var(--chalk-mid);
}

/* Toggle — hidden on desktop, shown on mobile */
.vtl-toggle {
  display: none;
}

.features-inner {
  width: 100%;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  padding: var(--pad-block) var(--pad-inline);
}

/* Features header — heading + stat callout */
.features-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.features-heading {
  margin: 0;
  font-family: var(--font-stencil);
  font-size: var(--text-section);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  max-width: 28ch;
}

.features-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.features-stat-value {
  font-family: var(--font-stencil);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--ink-faint);
}

.features-stat-unit {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-top: 0.25rem;
}

/* Feature blocks — editorial typography */
.features-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl) var(--space-3xl);
}

/* Spec marks — full vertical & horizontal grid lines through center */
.features-list {
  position: relative;
}

/* Vertical center line */
.features-list::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--ink-rule);
  pointer-events: none;
}

/* Horizontal center line */
.features-list::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--ink-rule);
  pointer-events: none;
}


/* Corner crop marks on the section */
.bento-features::before,
.bento-features::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* Top-left & bottom-right corner marks via box-shadow */
.bento-features::before {
  width: 16px;
  height: 16px;
  top: 1.25rem;
  left: 1.25rem;
  border-top: 1px solid var(--ink-faint);
  border-left: 1px solid var(--ink-faint);
}

.bento-features::after {
  width: 16px;
  height: 16px;
  bottom: 1.25rem;
  right: 1.25rem;
  border-bottom: 1px solid var(--ink-faint);
  border-right: 1px solid var(--ink-faint);
}

/* Spec text labels — scattered at corners */
.spec-mark {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  pointer-events: none;
  z-index: 1;
}

.spec-mark--tl { top: 1.25rem; left: 2.75rem; }
.spec-mark--tr { top: 1.25rem; right: 2.75rem; }
.spec-mark--bl { bottom: 1.25rem; left: 2.75rem; }
.spec-mark--br { bottom: 1.25rem; right: 2.75rem; }

/* Small crosshair marks at all 4 corners */
.spec-cross {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  z-index: 1;
}

.spec-cross::before,
.spec-cross::after {
  content: '';
  position: absolute;
  background: var(--ink-border);
}

.spec-cross::before {
  width: 1px;
  height: 100%;
  left: 50%;
  top: 0;
}

.spec-cross::after {
  height: 1px;
  width: 100%;
  top: 50%;
  left: 0;
}

.spec-cross--tl { top: 1rem; right: 1rem; }
.spec-cross--tr { top: 1rem; left: 50%; transform: translateX(-50%); }
.spec-cross--bl { bottom: 1rem; left: 50%; transform: translateX(-50%); }
.spec-cross--br { bottom: 1rem; left: 1rem; }

.feature-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.feature-block-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: 0.75rem;
}

.feature-block-marker {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.feature-block-marker--coral  { background: var(--coral); }
.feature-block-marker--tan    { background: var(--tan); }
.feature-block-marker--green  { background: var(--green); }
.feature-block-marker--blue   { background: var(--blue); }
.feature-block-marker--purple { background: var(--purple); }

.feature-block-label {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.4);
  line-height: 1;
}

.feature-block-title {
  margin: 0;
  font-family: var(--font-stencil);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.feature-block-body {
  margin: 0.75rem 0 0;
  font-family: var(--font-stencil);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink-strong);
  max-width: 85%;
}

/* ─── ICP SCROLLER ─── */

/* Heading — column 1, row 9, bare on black bg */
.icp-heading {
  grid-column: 1 / 3;
  grid-row: 9;
  margin: 0;
  padding: var(--space-lg) 0 var(--space-md) var(--space-lg);
  font-family: var(--font-stencil);
  font-size: var(--text-5xl);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--white);
  align-self: start;
}

.icp-heading em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1em;
}

/* List — column 1, row 10, bare on black bg */
.icp-list {
  grid-column: 1 / 3;
  grid-row: 10;
  display: flex;
  flex-direction: column;
  padding: 0 0 var(--space-lg) var(--space-lg);
  align-self: end;
}

/* Image card — columns 2–4, spans rows 9–10 */
.bento-cell.bento-icp-right {
  grid-column: 3 / -1;
  grid-row: 9 / 11;
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: var(--space-lg) 0 var(--space-lg) var(--space-md);
  gap: var(--space-xs);
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

/* Gradient overlay so text is readable over photos */
.bento-icp-right .icp-card-label {
  max-width: 80%;
}

.bento-icp-right .icp-card-tagline {
  white-space: normal;
  overflow-wrap: break-word;
}

.bento-icp-right .icp-card-body {
  max-width: 66%;
}

/* ── Sliding image layers ── */
.icp-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  will-change: transform, opacity;
  transition: transform 0.65s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.65s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 0;
}

/* Gradient scrim — dark at bottom where text sits */
.bento-icp-right .icp-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.85) 0%,
    rgba(0,0,0,0.6) 35%,
    rgba(0,0,0,0) 65%
  );
  z-index: 1;
  pointer-events: none;
}

/* Text wrapper */
.icp-card-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-2xs) + 2px);
  width: 100%;
  max-width: calc(100% - var(--space-lg));
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
.icp-card-text.is-exiting {
  opacity: 0;
  transform: translateY(8px);
}
.icp-card-text.is-entering {
  opacity: 0;
  transform: translateY(-8px);
  transition: none;
}



.icp-item {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0 var(--space-md) var(--space-md);
  border-bottom: 1px solid var(--chalk-border);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(255,255,255,0.1);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  flex: 1;
}

.icp-item:first-child {
  border-top: 1px solid var(--chalk-border);
}

/* Hover accent bar */
.icp-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--white);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.icp-item:hover::before,
.icp-item.is-active::before {
  transform: scaleY(1);
}

/* Inactive */
.icp-item:not(.is-active) {
  opacity: 0.25;
}

.icp-item:not(.is-active):hover {
  opacity: 0.6;
  background: var(--chalk-ghost);
}

/* Active (locked) */
.icp-item.is-active {
  opacity: 1;
  background: var(--chalk-border);
  padding-left: var(--space-md);
}

/* Hover preview (not locked) */
.icp-item.is-hover {
  background: var(--chalk-ghost);
}

/* Index number — colored per palette */
.icp-idx {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: 0.08em;
  flex-shrink: 0;
  width: 1.25rem;
  transition: opacity 0.35s ease;
}

.icp-item:nth-child(1) .icp-idx { color: var(--blue); }
.icp-item:nth-child(2) .icp-idx { color: var(--coral); }
.icp-item:nth-child(3) .icp-idx { color: var(--tan); }
.icp-item:nth-child(4) .icp-idx { color: var(--purple); }
.icp-item:nth-child(5) .icp-idx { color: var(--green); }

.icp-name {
  font-family: var(--font-stencil);
  font-size: var(--text-5xl);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--white);
  flex: 1;
}

/* Arrow indicator */
.icp-arrow {
  display: none;
}

/* Right card text — over photo */
.icp-card-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  padding: var(--space-2xs) var(--space-xs);
  background: var(--ink-mid);
  border: 1px solid var(--chalk-faint);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-radius: 2px;
  align-self: flex-start;
  transition: opacity 0.3s ease;
}

.icp-card-tagline {
  margin: 0;
  font-family: var(--font-serif);
  font-style: normal;
  font-size: var(--text-5xl);
  font-weight: 400;
  line-height: 1.3;
  color: var(--white);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  transition: opacity 0.3s ease;
}

.icp-card-body {
  margin: 0;
  font-family: var(--font-stencil);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
  max-width: 32ch;
  color: rgba(255,255,255,0.8);
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transition: opacity 0.3s ease;
}

/* Glitch hides text during switch — handled by clip-path on parent */

/* ——— Timeline — horizontal route map (removed, kept styles for vertical reuse) ——— */
/* Grid pattern removed — flat background */

/* Spec marks — mono labels */
.tl-spec {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chalk-faint);
  pointer-events: none;
  z-index: 0;
}
.tl-spec--tl { top: 1rem; left: 1.5rem; }
.tl-spec--tr { top: 1rem; right: 1.5rem; }

/* Crosshairs */
.tl-cross {
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 0;
}
.tl-cross::before,
.tl-cross::after {
  content: '';
  position: absolute;
  background: var(--chalk-border);
}
.tl-cross::before { width: 1px; height: 100%; left: 50%; top: 0; }
.tl-cross::after  { height: 1px; width: 100%; top: 50%; left: 0; }
.tl-cross--tl { top: 0.75rem; right: 0.75rem; }
.tl-cross--tr { top: 0.75rem; left: 50%; transform: translateX(-50%); }
.tl-cross--bl { bottom: 0.75rem; left: 50%; transform: translateX(-50%); }
.tl-cross--br { bottom: 0.75rem; left: 0.75rem; }

/* Directional arrow — pinned top-right */
.tl-arrow {
  position: absolute;
  top: 1.75rem;
  right: 2.5rem;
  color: var(--chalk-border);
  pointer-events: none;
  z-index: 0;
  transition: color 0.25s ease;
}

.bento-timeline:has(.tl-btn:hover) .tl-arrow {
  color: var(--white);
}

/* Section heading */
.tl-heading {
  position: relative;
  z-index: 1;
  font-family: var(--font-stencil);
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--white);
  margin: 0 0 0.4rem;
}

.tl-body {
  position: relative;
  z-index: 1;
  font-family: var(--font-stencil);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--chalk);
  margin: 0 0 1.75rem;
}

/* Track — holds rail + fill + stops */
.tl-track {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}

/* Background rail */
.tl-rail {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--chalk-border);
  grid-column: 1 / -1;
  pointer-events: none;
  z-index: 0;
}

/* Progress fill — grows on scroll */
.tl-fill {
  position: absolute;
  top: 6px;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--chalk-soft);
  grid-column: 1 / -1;
  pointer-events: none;
  z-index: 1;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Each stop — always fully visible, no opacity tricks */
.tl-stop {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: var(--space-lg);
  padding-right: var(--space-lg);
}

/* Dot on the rail */
.tl-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--chalk-faint);
  background: var(--surface-card);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease,
              box-shadow 0.35s ease,
              background 0.35s ease;
}

/* Default dot — subtle ring using stop color */
.tl-stop--cta .tl-dot    { border-color: var(--chalk-faint); }
.tl-stop--coral .tl-dot  { border-color: rgba(225,96,81,0.25); }
.tl-stop--tan .tl-dot    { border-color: rgba(249,217,122,0.25); }
.tl-stop--green .tl-dot  { border-color: rgba(127,221,132,0.25); }
.tl-stop--blue .tl-dot   { border-color: rgba(77,174,225,0.25); }
.tl-stop--purple .tl-dot { border-color: rgba(142,107,179,0.25); }

/* Content below dot */
.tl-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.tl-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chalk-mid);
}

.tl-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--chalk-soft);
}

.tl-title {
  font-family: var(--font-stencil);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--chalk);
  transition: color 0.35s ease;
}

.tl-desc {
  font-family: var(--font-stencil);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--chalk-mid);
  max-width: 28ch;
}

/* CTA button — matches site primary (dark text on blue) */
.tl-btn {
  display: inline-block;
  align-self: flex-start;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--blue);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: 9999px;
  border: 1.5px solid var(--blue);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.tl-btn:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

/* ---- Hover state ---- */
.tl-stop:hover .tl-title {
  color: var(--white);
}

.tl-stop:hover .tl-dot {
  transform: scale(1.15);
}

.tl-stop:hover .tl-desc {
  color: var(--chalk-mid);
}

/* ---- .is-done state (scroll-triggered) ---- */
.tl-stop.is-done .tl-title {
  color: var(--white);
}

.tl-stop.is-done .tl-num {
  color: var(--chalk);
}

.tl-stop.is-done .tl-dot {
  background: currentColor;
  border-color: transparent;
  transform: scale(1.1);
}

.tl-stop.is-done .tl-dot { color: var(--green); box-shadow: 0 0 6px rgba(127,221,132,0.2); }

/* Checkmark inside done dots */
.tl-stop.is-done .tl-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 3px;
  border-left: 1.5px solid var(--surface-card);
  border-bottom: 1.5px solid var(--surface-card);
  transform: translate(-50%, -60%) rotate(-45deg);
}

/* Brighten descriptions on done */
.tl-stop.is-done .tl-desc {
  color: var(--chalk-mid);
}

/* ——— Team carousel ——— */
.team-tile-row {
  grid-column: 1 / -1;
  grid-row: 12;
  overflow: hidden;
  cursor: grab;
  border-radius: var(--radius);
}

.team-tile-row.is-dragging {
  cursor: grabbing;
}

.team-tile-track {
  display: flex;
  gap: var(--gap);
  width: max-content;
  will-change: transform;
}

.team-tile-track .bento-tile {
  flex: 0 0 225px;
  aspect-ratio: 1 / 1;
}

.team-tile-track .team-tile-photo {
  flex: 0 0 340px;
  aspect-ratio: auto;
  background-size: cover;
  background-position: center;
  position: relative;
  background-color: #fff;
  filter: grayscale(1) contrast(1.8);
}

.team-tile-track .team-tile-photo::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at top left, var(--ink-soft) 0%, transparent 55%);
  pointer-events: none;
  z-index: 1;
}

/* Jobs tile — link-out */
.tile-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

/* ——— Track record — backers grid ——— */
.bento-track {
  grid-column: 1 / -1;
  grid-row: 13;
  background: var(--white);
  border-radius: var(--radius);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.track-inner {
  width: 100%;
  max-width: 64rem;
  margin-left: auto;
  margin-right: auto;
  padding: var(--pad-block) var(--pad-inline);
}

.track-heading {
  margin: 0 0 var(--space-xl);
  font-family: var(--font-stencil);
  font-size: var(--text-section);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--bg);
}

/* Two-column layout: Team | Backed by */
.track-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}

.track-col {
  display: flex;
  flex-direction: column;
}

.track-col--team {
  padding-right: var(--space-xl);
  border-right: 1px solid var(--ink-rule);
}

.track-col--backers {
  padding-left: var(--space-xl);
}

/* Founder cards — sci-fi metadata */
.track-founders {
  display: flex;
  flex-direction: column;
  margin-left: calc(-1 * var(--space-sm));
  margin-right: calc(-1 * var(--space-sm));
}

.founder-card {
  padding: var(--space-lg) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  text-decoration: none;
  color: inherit;
  position: relative;
  border-radius: 6px;
  transition: background 0.25s ease;
}

.founder-card:hover {
  background: rgba(0,0,0,0.04);
}

.founder-card + .founder-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-lg);
  right: var(--space-lg);
  height: 1px;
  background: var(--ink-rule);
  transition: opacity 0.15s ease;
}

.founder-card:hover::before,
.founder-card:hover + .founder-card::before {
  opacity: 0;
}

.founder-card::after {
  content: '';
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 24px;
  height: 20px;
  background: var(--ink-soft);
  -webkit-mask-image: url('../assets/arrow-stencil.svg');
  mask-image: url('../assets/arrow-stencil.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.founder-card:hover::after {
  opacity: 1;
  transform: translate(0, 0);
}

.founder-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mid);
  line-height: 1;
}

.founder-bracket {
  color: var(--purple);
  font-weight: 400;
}

.founder-card:first-child .founder-bracket {
  color: var(--coral);
}

.founder-card:last-child .founder-bracket {
  color: var(--blue);
}

.founder-headshot {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: var(--ink-rule) center / cover no-repeat;
  order: -2;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.founder-name {
  font-family: var(--font-stencil);
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.2;
  order: -1;
}

.founder-detail {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-strong);
  line-height: 1.6;
  margin-top: 0.5rem;
  max-width: 80%;
}

.track-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.track-grid {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: calc(-1 * var(--space-sm));
  margin-right: calc(-1 * var(--space-sm));
}

.track-item {
  padding: 0 var(--space-md);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: inherit;
  flex: 1;
  border-radius: 6px;
  position: relative;
  transition: background 0.25s ease;
}

.track-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--space-md);
  right: var(--space-md);
  height: 1px;
  background: var(--ink-rule);
  transition: opacity 0.15s ease;
}

.track-item:first-child::before {
  display: none;
}

.track-item::after {
  content: '';
  position: absolute;
  right: var(--space-md);
  width: 20px;
  height: 16px;
  background: var(--ink-soft);
  -webkit-mask-image: url('../assets/arrow-stencil.svg');
  mask-image: url('../assets/arrow-stencil.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.track-item:hover {
  background: rgba(0,0,0,0.04);
}

.track-item:hover::after {
  opacity: 1;
  transform: translate(0, 0);
}

.track-item:hover::before,
.track-item:hover + .track-item::before {
  opacity: 0;
}

.track-logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  filter: grayscale(1) brightness(0.9);
  opacity: 0.7;
  flex-shrink: 0;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.track-item:hover .track-logo {
  filter: grayscale(0);
  opacity: 1;
}

.track-name {
  font-family: var(--font-stencil);
  font-size: var(--text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  transition: color 0.25s ease;
}

.track-item:hover .track-name {
  color: var(--bg);
}

.track-tag {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-left: auto;
  margin-right: 16px;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.track-item:hover .track-tag {
  transform: translateX(-24px);
}

/* Redact blocks on dark bg — ICP heading */
.icp-heading .redact-word::after {
  height: 20px;
  margin-top: -10px;
  background: var(--white);
}

/* Redacted text reveal — word level, 3 stages: empty → blocks → text */
.redact-word {
  position: relative;
  display: inline-block;
  color: transparent;
  transition: color 0.25s ease;
}

/* Block overlay — fixed 14px height for consistency */
.redact-word::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  height: 14px;
  top: 50%;
  margin-top: -7px;
  background: var(--bg);
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

/* Stage 1: blocks appear */
.redact-word.is-blocked::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Stage 2: blocks shrink away, text appears */
.redact-word.is-revealed {
  color: inherit;
}

.redact-word.is-revealed::after {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: right;
}

/* Reverse direction — blocks grow from right, shrink to left */
.redact-word.is-reverse::after {
  transform-origin: right;
}

.redact-word.is-reverse.is-revealed::after {
  transform-origin: left;
}

/* Larger blocks for headings */
.hero-heading .redact-word::after {
  height: 28px;
  margin-top: -14px;
}

.headline-line .redact-word::after {
  height: 20px;
  margin-top: -10px;
}

/* White blocks on dark backgrounds */
[data-redact="scroll"] .redact-word::after {
  background: var(--white);
}

/* Match coral background for banner redact blocks */
.bento-banner [data-redact="scroll"] .redact-word::after {
  background: var(--ink-strong);
}

.banner-heading .redact-word::after {
  height: 20px;
  margin-top: -10px;
}

.tl-heading .redact-word::after {
  height: 18px;
  margin-top: -9px;
  background: var(--white);
}

/* FAQ heading redact blocks */
.faq-title .redact-word::after {
  height: 22px;
  margin-top: -11px;
  background: var(--white);
}

/* Dark redact blocks on white card backgrounds */
.bento-track .redact-word::after {
  background: var(--bg);
  height: 20px;
  margin-top: -10px;
}

/* ——— Cells ——— */
.bento-cell {
  border-radius: var(--radius);
  overflow: hidden;
  border: none;
}


.bento-cell:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* Hero: solid white — overflow visible lets contour glow extend beyond card */
.bento-hero {
  background: var(--white);
  box-shadow: 0 0 0 1px var(--ink-rule);
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: var(--hero-min-h);
  overflow: visible;
}

/* Clips cloud image at card edges with rounded corners */
.hero-cloud-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius);
  pointer-events: none;
}

/* Floating nav — separate element, hidden by default */
.floating-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  padding: var(--space-md) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
  background: var(--white);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -1px 0 var(--ink-rule), 0 -4px 24px var(--ink-border);
  z-index: 1000;
  pointer-events: none;
  visibility: hidden;
}

/* Visible state — slides up */
.floating-nav.is-visible {
  visibility: visible;
  pointer-events: auto;
  animation: nav-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Leaving state — slides down */
.floating-nav.is-leaving {
  animation: nav-down 0.3s cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes nav-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes nav-down {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}



.hero-nav-left {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: inherit;
}

.hero-nav-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  color: var(--ink);
  flex-shrink: 0;
  margin-left: 4px;
}

.hero-nav-name {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--nav-text, var(--ink));
  letter-spacing: 0;
  white-space: nowrap;
  transition: color 0s;
  margin-left: 2px;
}

.hero-nav-right {
  display: flex;
  align-items: center;
  gap: calc(0.25rem + 2px);
  flex-shrink: 1;
  min-width: 0;
}

.hero-nav-btn {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 var(--space-md);
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.hero-nav-btn:hover {
  background: var(--bg);
  color: var(--white);
  border-color: var(--bg);
}

.hero-nav-btn:active {
  opacity: 0.85;
}

.hero-nav-btn--outline {
  background: transparent;
  color: var(--nav-text, var(--ink));
  border: 1.5px solid var(--nav-border, #d0d0d0);
}

.hero-nav-btn--filled {
  background: var(--nav-accent, var(--blue));
  color: var(--ink);
  border: 1.5px solid var(--nav-accent, var(--blue));
}

/* Hero content — fills available width, padding from section tier */
.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
  padding: var(--space-xl) var(--pad-inline);
  position: relative;
  z-index: 2;
  min-width: 0;
}

.hero-heading {
  margin: 0;
  font-family: var(--font-stencil);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.hero-heading em {
  font-style: italic;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.21em;
}

.hero-subtitle {
  margin: var(--space-md) 0 0;
  font-family: var(--font-stencil);
  font-size: var(--text-lg);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-strong);
  max-width: 38ch;
}

/* Hero ASCII art — 100% width, natural height, anchored to bottom */
.hero-ascii {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  min-width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
  transform-origin: bottom center;
  transform: translateX(-50%) translateY(2px);
}

/* Hero contour — absolutely positioned inside hero, same bounds as cloud.
   SVG preserveAspectRatio="xMidYMax meet" anchors content to the bottom.
   overflow: visible lets the glow filter extend beyond the card edges. */
.hero-contour {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
  transform-origin: bottom center;
  transform: translateY(2px);
  opacity: 0.5;
  will-change: opacity;
}

/* Sidebar: light gray */
.bento-cell.bento-sidebar {
  background: var(--gray-light);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
  clip-path: inset(-100px 0 0 0 round var(--radius));
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-md);
  color: var(--ink);
  min-width: 0;
}

.sidebar-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ink);
}

.sidebar-stat {
  margin: var(--space-2xs) 0 0;
  font-family: var(--font-stencil);
  font-size: clamp(4.5rem, 3rem + 5.8vw, 6.85rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: 0;
  color: var(--ink);
  display: flex;
}

.stat-digit {
  display: inline-block;
  position: relative;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

/* Invisible sizer for width — auto-size to content */
.stat-digit::after {
  content: none;
}

.stat-roll {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.stat-roll span {
  display: block;
  height: 1em;
  line-height: 1;
}

/* Remove mask once settled so digits are fully crisp */
.stat-digit.is-settled {
  -webkit-mask-image: none;
  mask-image: none;
}

.sidebar-unit {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-mid);
  margin-top: -0.15rem;
  display: block;
}

.sidebar-circle {
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: visible;
  margin: 0 calc(-1 * var(--space-md)); /* bleed past sidebar-content padding */
}

#funnel3d {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: grab;
  aspect-ratio: 1 / 1;
}

#funnel3d:active {
  cursor: grabbing;
}

.sidebar-footer {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  margin: 0 calc(-1 * var(--space-md));
  border-top: 1px solid var(--ink-faint);
  background: var(--gray-light);
  position: relative;
  z-index: 2;
}

.sidebar-footer-dot {
  width: 10px;
  height: 10px;
  background: var(--ink);
  border-radius: 50%;
  flex-shrink: 0;
}

.sidebar-footer-text {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-strong);
}

.sidebar-note {
  margin: auto calc(-1 * var(--space-md)) calc(-1 * var(--space-md));
  padding: var(--space-md);
  font-family: var(--font-stencil);
  font-size: calc(var(--text-body) + 2px);
  line-height: 1.4;
  color: var(--ink-strong);
  background: var(--gray-light);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 20px);
  mask-image: linear-gradient(to bottom, transparent, black 20px);
  position: relative;
  z-index: 2;
}

/* Strip: ticker scroller */
.bento-strip {
  background: transparent;
  color: var(--white);
  font-family: var(--font-mono);
  font-size: calc(var(--text-base) + 3px);
  letter-spacing: 0.04em;
  overflow: hidden;
  min-height: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  padding: 0;
  margin-top: clamp(0.5rem, 0.8vw, 0.75rem);
  margin-bottom: calc(-1 * var(--gap));
  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.strip-track {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: max-content;
  cursor: grab;
  user-select: none;
  will-change: transform;
}

.strip-track:active,
.strip-track.is-dragging {
  cursor: grabbing;
}

.strip-item {
  white-space: nowrap;
  color: var(--white);
}

.strip-item .bracket {
  color: var(--purple);
}

.strip-dot {
  color: var(--ink-mid);
  font-size: var(--text-xs);
  user-select: none;
}

/* Block all selection while funnel is being held */
.is-pouring,
.is-pouring * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
}
.is-pouring *::selection,
.is-pouring *::-moz-selection {
  background: transparent !important;
  color: inherit !important;
}

/* ——— Pixel Funnel CTA — bottom hero section ——— */
.funnel-cta {
  grid-column: 1 / -1;
  grid-row: 14;
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  content-visibility: auto;
  contain-intrinsic-size: auto 50rem;
  height: 50rem;
  background: transparent;
  overflow: hidden;
}
.funnel-cta::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 12%;
  background: linear-gradient(to bottom, transparent, #000 90%);
  pointer-events: none;
  z-index: 2;
}

.funnel-cta canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.funnel-cta-overlay {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 6%;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.funnel-cta-overlay *,
.funnel-telemetry *,
.funnel-meta-right *,
.funnel-cta-content * {
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* Telemetry readouts — top-left */
.funnel-telemetry {
  position: absolute;
  top: 2.5rem;
  left: 3rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.ft-line {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk-mid);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.ft-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  flex-shrink: 0;
  border-radius: 2px;
}

.ft-dot--coral  { background: var(--coral); }
.ft-dot--tan    { background: var(--tan); }
.ft-dot--green  { background: var(--green); }
.ft-dot--blue   { background: var(--blue); }
.ft-dot--purple { background: var(--purple); }

/* Right-side decorative telemetry */
.funnel-meta-right {
  position: absolute;
  top: 2.5rem;
  right: 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2xs);
}

.fmr-line {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chalk-soft);
  line-height: 1.4;
}

.fmr-time {
  color: var(--chalk-mid);
  font-size: var(--text-base);
}

.fmr-dim {
  color: var(--chalk-faint);
  font-size: var(--text-xs);
}

.fmr-sep {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--chalk-border);
  margin: 0.15rem 0;
}

.fmr-barcode {
  width: 5rem;
  height: 1.25rem;
  opacity: 0.9;
}

.fmr-crosshair {
  width: 1.5rem;
  height: 1.5rem;
  opacity: 0.8;
  align-self: flex-end;
}

/* Centered content */
.funnel-cta-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.funnel-heading {
  font-family: var(--font-stencil);
  font-size: var(--text-cta);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 0;
}

.funnel-heading-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
}

.funnel-subtitle {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.6;
  color: var(--chalk);
  margin: 0;
  max-width: 32.3rem;
}

.funnel-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--blue);
  border: 1.5px solid var(--blue);
  padding: var(--space-xs) var(--space-md);
  border-radius: 100px;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
}
.funnel-btn:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}

.funnel-btn-plus {
  font-size: var(--text-lg);
  line-height: 1;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .strip-track,
  .bento-tile-track {
    will-change: auto;
  }
}

/* Headline: on black */
.bento-headline {
  background: transparent;
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-lg) 0 var(--space-sm) var(--space-md);
  margin-top: 48px;
  position: relative;
}

.headline-line {
  margin: 0;
  font-family: var(--font-stencil);
  font-size: var(--text-5xl);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.headline-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1em;
}

/* Circuit: code snippet card */
.bento-circuit {
  position: relative;
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.circuit-code {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.code-header {
  padding: var(--space-md);
}

.code-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--chalk);
}

.code-block {
  margin: 0;
  padding: var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--chalk);
  flex: 1;
  min-height: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
}

.code-block code {
  display: block;
}

/* Expand/collapse toggle for code card */
.code-toggle {
  display: none;
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-md);
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-mono);
  font-size: calc(var(--text-xs) + 1.5px);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 0.2s ease;
  z-index: 2;
}
.code-toggle:hover,
.code-toggle:active {
  color: var(--white);
}
.code-toggle-icon {
  display: inline-block;
  transition: transform 0.3s ease;
  font-size: 0.7em;
  margin-left: 0.25em;
}
.is-code-expanded .code-toggle-icon {
  transform: rotate(180deg);
}
.is-code-expanded .code-block {
  overflow: hidden;
}
@media (max-width: 47.99rem) {
  .code-toggle { display: inline-flex; align-items: center; }
}

.code-kw  { color: var(--coral); }
.code-fn  { color: var(--blue); }
.code-str { color: var(--tan); }
.code-num { color: var(--purple); }
.code-mod { color: var(--green); }
.code-var { color: var(--chalk); }
.code-cm  { color: var(--chalk-soft); font-style: italic; }

/* ── Dataset leaderboard (card stack) ── */
.dataset-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-md);
  position: relative;
  z-index: 1;
}

.dataset-label {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--chalk);
}

/* ── Featured Benchmark card ── */
.benchmark-inner {
  display: flex;
  flex-direction: column;
  position: absolute;
  inset: 0;
  padding: var(--space-md);
  z-index: 1;
}

.benchmark-sensor {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--chalk-mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.benchmark-image-wrap {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  max-height: 45%;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-dark);
}

.benchmark-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.benchmark-slider-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) 0;
  flex-shrink: 0;
}

.benchmark-slider-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--chalk-soft);
  white-space: nowrap;
  flex-shrink: 0;
}

.benchmark-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 3px;
  background: var(--chalk-border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.benchmark-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--surface-card);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.benchmark-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.benchmark-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--blue);
  border: 2px solid var(--surface-card);
  cursor: pointer;
}

.benchmark-stats {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-2xs) 0 var(--space-sm);
  flex-shrink: 0;
}

.benchmark-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2xs) var(--space-xs);
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
}

.benchmark-stat-value {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--white);
  line-height: 1.2;
}

.benchmark-stat-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--chalk-mid);
  letter-spacing: 0.02em;
}

.benchmark-stat--size { flex: 1.5; }

.benchmark-stat-sep {
  color: var(--chalk-soft);
  font-weight: 400;
  margin: 0 1px;
}

.dataset-explore {
  display: block;
  padding: var(--space-2xs) 0 0;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
  color: var(--chalk);
  text-decoration: none;
  text-align: right;
}


.dataset-explore:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Tiles */
.bento-tile-texture {
  background: var(--gray-dark);
  background-image:
    radial-gradient(circle at 20% 30%, var(--chalk-faint) 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, var(--chalk-border) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, var(--chalk-border) 1px, transparent 1px);
  background-size: 4px 4px;
}

.bento-tile-coral,
.bento-tile-tan,
.bento-tile-green,
.bento-tile-blue,
.bento-tile-purple {
  position: relative;
}

/* ── Link tiles only: cursor, arrow, hover effects ── */
a.tile-link {
  cursor: pointer;
  transition: filter 0.35s ease, box-shadow 0.35s ease;
}

/* Stencil arrow — only on linked tiles */
a.tile-link::after {
  content: '';
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 30px;
  height: 25px;
  background: var(--bg);
  -webkit-mask-image: url('../assets/arrow-stencil.svg');
  mask-image: url('../assets/arrow-stencil.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

a.tile-link:hover {
  filter: brightness(1.06);
  box-shadow: 0 4px 20px var(--ink-faint);
}

a.tile-link:hover::after {
  opacity: 1;
  transform: translate(0, 0);
}

a.tile-link:hover .tile-svg {
  transform: translateY(-3px);
}

.bento-tile-coral {
  background: var(--coral);
}

.bento-tile-tan {
  background: var(--tan);
}

.bento-tile-green {
  background: var(--green);
}

.bento-tile-blue {
  background: var(--blue);
}

.bento-tile-purple {
  background: var(--purple);
}

/* SVG pinned to bottom-left of tile */
.tile-svg {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  height: 50%;
  max-width: calc(100% - 2rem);
  pointer-events: none;
  overflow: visible;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Tile label layout */
.tile-label {
  padding: var(--space-md);
}

.tile-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.tile-label-title {
  font-family: var(--font-stencil);
  font-size: clamp(1.375rem, 1rem + 0.95vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  line-height: 1.05;
}

.tile-label-fig {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--ink-mid);
  line-height: 1;
}

.tile-label-rule {
  border: none;
  border-top: 1px solid var(--ink);
  margin: 0.625rem 0 0;
}

/* ═══════════════════════════════════════
   FAQ Section
   ═══════════════════════════════════════ */

.faq-section {
  background: var(--bg);
  padding: var(--pad-block) 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

.faq-inner {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 var(--pad-inline);
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--pad-block);
  align-items: start;
}

.faq-header {
  position: sticky;
  top: var(--space-3xl);
}

.faq-barcode {
  display: block;
  width: clamp(80px, 12vw, 120px);
  height: auto;
  margin-bottom: 1.25rem;
  opacity: 0.7;
}

.faq-title {
  font-family: var(--font-stencil);
  font-size: var(--text-cta);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--white);
  margin: 0;
}

.faq-list {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-top: 1px solid var(--chalk-faint);
  transition: border-color 0.35s ease;
}

.faq-item:last-child {
  border-bottom: 1px solid var(--chalk-faint);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg) 0;
  cursor: pointer;
  font-family: var(--font-stencil);
  font-size: calc(var(--text-lg) + 2px);
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  letter-spacing: -0.01em;
  list-style: none;
  transition: color 0.3s ease;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  color: var(--white);
}

.faq-question:hover .faq-icon {
  color: var(--chalk-mid);
  transform: scale(1.15);
}

.faq-icon {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: rgba(255,255,255,0.22);
  flex-shrink: 0;
  margin-left: 2rem;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease;
}

.faq-item[open] .faq-icon {
  transform: rotate(45deg) scale(1.1);
  color: var(--chalk);
}

.faq-item[open] .faq-question:hover .faq-icon {
  color: var(--white);
  transform: rotate(45deg) scale(1.25);
}

.faq-item[open] .faq-question {
  color: var(--white);
}

.faq-answer {
  overflow: hidden;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease;
}

.faq-answer-inner {
  padding: 0 0 var(--space-lg);
}

.faq-answer p {
  font-family: var(--font-stencil);
  font-size: clamp(0.875rem, 0.76rem + 0.37vw, 1rem);
  font-weight: 400;
  line-height: 1.65;
  color: var(--chalk);
  margin: 0;
  max-width: 36rem;
}

/* ═══════════════════════════════════════
   Footer
   ═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   Immersive Footer
   ═══════════════════════════════════════ */

.site-footer {
  position: relative;
  background: var(--bg);
  min-height: 28rem;
  content-visibility: auto;
  contain-intrinsic-size: auto 28rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

/* Draggable blocks layer */
.footer-blocks {
  position: absolute;
  inset: 0;
  inset-block-end: 5.5rem; /* leave room for footer row */
  z-index: 0;
  cursor: grab;
  contain: layout style;
}

.footer-blocks:active {
  cursor: grabbing;
}

.fb {
  position: absolute;
  border-radius: 3px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  will-change: transform, opacity;
  contain: layout style;
  backface-visibility: hidden;
  transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.fb:active,
.fb.is-dragging {
  cursor: grabbing;
  filter: brightness(1.15);
  box-shadow: 0 4px 24px var(--ink-soft);
  z-index: 100;
}

.fb.fb-match {
  filter: brightness(1.4);
  box-shadow: 0 0 0 2px var(--chalk-soft);
}



/* Merge shrink */
.fb.is-merging {
  pointer-events: none;
  transition: transform 0.2s ease-in, opacity 0.2s ease-in;
  opacity: 0 !important;
}

/* Spawn pop */
.fb.is-spawning {
  animation: fb-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fb-pop {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 1; }
}

/* Merge flash */
.fb-flash {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
  animation: fb-flash-out 0.4s ease-out forwards;
}

@keyframes fb-flash-out {
  0% { transform: translate(-50%,-50%) scale(0); opacity: 0.7; }
  100% { transform: translate(-50%,-50%) scale(3); opacity: 0; }
}

/* Footer bottom row — premium */
.footer-bottom-row {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-lg) var(--pad-inline);
  margin-top: auto;
}
.footer-left {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  flex-wrap: wrap;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.footer-logo {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.footer-brand-name {
  font-family: var(--font-stencil);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--chalk);
  letter-spacing: -0.01em;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.footer-link {
  font-family: var(--font-stencil);
  font-size: var(--text-body);
  font-weight: 400;
  color: var(--chalk-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.footer-link:hover {
  color: var(--white);
  border-bottom-color: var(--chalk-soft);
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--chalk-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
}
.footer-copy-symbol {
  font-size: 1.15em;
}


/* Mobile: single column stack */
@media (max-width: 47.99rem) {
  .desktop-only { display: none; }
  html {
    overscroll-behavior-y: auto;   /* native rubber-band bounce at scroll edges */
  }

  body {
    padding: var(--gap);
    padding-bottom: 0;
  }

  .bento {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: 0;
    max-width: 100%;
  }

  /* ── Mobile type scale overrides ──
     Bump heading tiers so hierarchy feels as premium as desktop.
     Body/label tiers (xs, base, body, lg) stay untouched.        */
  :root {
    --text-2xl:     1.125rem;    /* 18 px  (desk 20) — sub-headings      */
    --text-5xl:     1.5rem;      /* 24 px  (desk 26) — display headings  */
    --text-section: 2.25rem;     /* 36 px  (desk 36) — section headings  */
  }

  .bento-right-col { display: contents; }

  .bento-nav      { grid-column: 1; grid-row: 1; --nav-height: 3.75rem; padding: 0 var(--space-md); }
  .bento-hero {
    grid-column: 1; grid-row: 2;
    height: 70svh;
    min-height: 0;
    aspect-ratio: auto;
    overflow: visible;
  }
  .hero-content {
    padding: var(--space-lg) var(--space-md);
  }
  .hero-subtitle {
    font-size: calc(var(--text-lg) + 1px);
  }
  .hero-heading {
    font-size: clamp(3rem, 2rem + 3vw, 3.5rem);
  }
  .hero-heading em {
    font-size: 1.15em;
  }
  .hero-ascii {
    transform: translateX(-50%) translateY(2px) scale(1.1);
  }
  .hero-contour {
    transform: translateY(2px) scale(1.1);
  }
  .bento-sidebar {
    grid-column: 1; grid-row: 3;
    height: 70svh;
    min-height: 0;
  }
  .sidebar-content {
    padding: var(--space-md);
  }
  /* Type hierarchy — match desktop proportions at ~80 %+ */
  .sidebar-stat {
    font-size: clamp(6rem, 4.5rem + 7vw, 7.5rem);
  }
  .features-stat-value {
    font-size: clamp(2.75rem, 2rem + 3.5vw, 3.75rem);   /* 44–60 px  (desktop 60 px) */
  }
  /* Tap blocker — mobile only: raise stat text above canvas */
  .sidebar-label,
  .sidebar-stat,
  .sidebar-unit {
    position: relative;
    z-index: 3;
  }
  .sidebar-unit {
    padding-bottom: var(--space-lg);
    margin-bottom: calc(-1 * var(--space-lg));
  }
  .sidebar-circle {
    mask-image: none;
    -webkit-mask-image: none;
    overflow: visible;
    clip-path: none;
    transform: scale(0.93);
    transform-origin: center center;
  }
  .sidebar-footer {
    padding: calc(var(--space-xs) + 4px) var(--space-md);
  }
  .bento-circuit {
    grid-column: 1; grid-row: 4;
    height: 70svh;
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .bento-circuit.is-code-expanded {
    height: 70svh;
  }
  .code-header {
    padding: var(--space-md);
  }
  .code-block {
    padding: var(--space-md);
  }
  .code-toggle-icon {
    margin-left: 0.5em;
    margin-right: 2px;
  }
  .bento-strip    { grid-column: 1; grid-row: 5; font-size: 0.8125rem; letter-spacing: 0.05em; }
  .bento-headline { grid-column: 1; grid-row: 6; padding: var(--space-lg); }
  .bento-tile-row { grid-column: 1; grid-row: 7; }
  .bento-tile-track .bento-tile-photo {
    flex: 0 0 225px;
    aspect-ratio: 1 / 1;
  }
  .tile-badge {
    font-size: 0.625rem;
    padding: 4px var(--space-xs);
  }
  .bento-section  { grid-column: 1; grid-row: 8; }
  .section-inner {
    padding: var(--space-md);
  }
  .section-title:not(.section-title--mobile) {
    display: none;
  }
  .section-title--mobile {
    display: block;
    margin: 0 0 calc(var(--space-md) + 8px);
    color: var(--ink);
  }
  .compare {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .compare-col--legacy { order: -1; }
  .compare-col--neural { order: 1; }
  .compare-graphic {
    margin-bottom: 1rem;
  }
  .compare-icon {
    width: 17px;
    height: 17px;
  }
  .compare-item--yes .compare-icon svg path {
    stroke-width: 1.05;
  }
  .compare-item--no .compare-icon svg path {
    stroke-width: 0.7;
  }

  .bento-banner:not([hidden]) {
    grid-column: 1; grid-row: 9;
    display: flex;
    flex-direction: column;
    padding: var(--space-lg);
    gap: var(--space-lg);
  }
  .banner-left {
    display: contents;
  }
  .banner-heading {
    order: 1;
  }
  .banner-stats {
    order: 2;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md) var(--space-sm);
  }
  .banner-stat-value {
    font-size: clamp(4.5rem, 3rem + 6vw, 6rem);
  }
  .banner-stat-label {
    font-size: 0.8125rem; /* 13px — was 12px (--text-body) */
  }
  .banner-deco {
    order: 3;
    margin-top: var(--space-lg);
  }
  .banner-arrow {
    width: clamp(36px, 10vw, 60px);
    height: auto;
    color: var(--ink-mid);                             /* 0.85→0.5 opacity */
  }
  .banner-barcode {
    transform: scale(0.8);
    transform-origin: bottom left;
  }
  .banner-spec {
    font-size: var(--text-xs);
  }
  .bento-pov       { grid-column: 1; grid-row: 10; min-height: 33rem; }
  .pov-grid        { grid-template-columns: 1fr; gap: var(--space-xs); }
  .pov-heading     { font-size: 2.125rem; }               /* 34px — matches other section headings */
  .desk-br { display: none; }                             /* hide desktop breaks on mobile */
  .mob-br  { display: inline; }                           /* show mobile breaks */
  .pov-body        { font-size: var(--text-lg); padding-top: 0; } /* 15px, tight to heading */
  .pov-canvas-wrap { min-height: auto; }
  .icp-heading     { grid-column: 1; grid-row: 11; margin-bottom: 0; padding: var(--space-lg); }
  .icp-list        { grid-column: 1; grid-row: 12; }
  .bento-cell.bento-icp-right { grid-column: 1; grid-row: 13; }
  .bento-features  { grid-column: 1; grid-row: 14; }
  .bento-code {
    grid-column: 1;
    grid-row: 15;
    height: 34svh;
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .bento-code.is-vtl-expanded {
    height: auto;
  }

  /* ── Fade-off mask (matches .code-block pattern) ── */
  .bento-code .vtl-inner {
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
  }
  .bento-code.is-vtl-expanded .vtl-inner {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .bento-code .vtl-arrow {
    top: var(--space-lg);
    right: var(--space-lg);
    width: clamp(36px, 10vw, 60px);
    height: auto;
  }

  /* ── Mobile type sizes (matches rest of mobile UI) ── */
  .bento-code .vtl-heading {
    font-size: 0.8125rem;                                /* 13px — matches .code-label */
    color: var(--chalk);
    margin-bottom: var(--space-lg);
  }
  .bento-code .tl-eyebrow {
    font-size: 0.625rem;                                 /* 10px — matches label tier */
  }
  .bento-code .tl-num {
    font-size: 0.625rem;                                 /* 10px */
  }
  .bento-code .tl-title {
    font-size: 1rem;                                     /* 16px — matches .faq-question */
  }
  .bento-code .tl-desc {
    font-size: 0.75rem;                                  /* 12px */
    line-height: 1.45;
  }
  .bento-code .tl-btn {
    font-size: 0.625rem;                                 /* 10px */
  }
  .bento-code .vtl-stop {
    padding-bottom: var(--space-lg);
  }

  /* ── Toggle button — bottom-right, matches .code-toggle ── */
  .vtl-toggle {
    display: inline-flex;
    align-items: center;
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-md);
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.45);
    font-family: var(--font-mono);
    font-size: calc(var(--text-xs) + 1.5px);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 2;
  }
  .vtl-toggle:hover,
  .vtl-toggle:active {
    color: var(--white);
  }
  .vtl-toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 0.7em;
    margin-left: 0.5em;
    margin-right: 2px;
  }
  .is-vtl-expanded .vtl-toggle-icon {
    transform: rotate(180deg);
  }

  .team-tile-row {
    grid-column: 1;
    grid-row: 16;
  }
  .team-tile-track .team-tile-photo {
    flex: 0 0 225px;
    aspect-ratio: 1 / 1;
  }
  .bento-track {
    grid-column: 1;
    grid-row: 17;
  }
  .track-inner {
    padding: var(--space-lg) var(--space-md);
  }
  .track-heading {
    margin-bottom: var(--space-lg);
  }
  .track-cols {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .track-col {
    padding: 0;
  }
  .track-col--team {
    padding-right: 0;
    padding-bottom: var(--space-lg);
    border-right: none;
    border-bottom: 1px solid var(--ink-rule);
  }
  .track-col--backers {
    padding-left: 0;
  }
  .track-label {
    margin-bottom: var(--space-sm);
  }
  .track-founders {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
  }
  .founder-card {
    margin: 0;
    padding: var(--space-md);
    gap: var(--space-xs);
  }
  .founder-card:last-child {
    margin: 0;
    padding: var(--space-md);
  }
  .founder-headshot {
    width: 44px;
    height: 44px;
  }
  .founder-name {
    font-size: var(--text-base);
  }
  .track-grid {
    margin-left: 0;
    margin-right: 0;
    gap: 0;
  }
  .track-item {
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
    padding: var(--space-md);
  }
  .track-item::after {
    right: var(--space-md);
  }
  .track-logo {
    width: 24px;
    height: 24px;
  }
  .track-name {
    font-size: var(--text-base);
  }
  .tl-track {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
    gap: 0;
  }
  .tl-rail, .tl-fill {
    width: 2px;
    height: 100%;
    top: 0;
    left: 6px;
    right: auto;
  }
  .tl-fill { width: 2px !important; transition: height 0.4s ease; }
  .tl-stop { padding-top: 0; padding-left: var(--space-lg); padding-bottom: var(--space-lg); }
  .tl-dot { top: 4px; left: -2rem; }
  .tl-heading { font-size: var(--text-2xl); margin-bottom: var(--space-md); }

  .features-list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .features-list::before,
  .features-list::after {
    display: none;
  }
  .feature-block {
    border-top: 1px solid var(--ink-rule);
    padding: var(--space-lg) 0;
  }
  .feature-block:first-child {
    border-top: none;
    padding-top: 0;
  }
  .spec-mark,
  .spec-cross,
  .bento-features::before {
    display: none;
  }

  .features-inner {
    padding: var(--space-md);
  }

  .bento-cell.bento-icp-right {
    aspect-ratio: 1 / 1;
    min-height: 0;
    padding: var(--space-lg);
    justify-content: flex-start;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-mask-image: -webkit-radial-gradient(white, black);
  }
  .icp-card-tagline {
    font-size: calc(1.375rem + 3px);  /* ~25px */
    line-height: 1.15;
  }
  .icp-card-body,
  .bento-icp-right .icp-card-body {
    font-size: calc(var(--text-body) + 1px);
    max-width: 76%;
  }
  .bento-icp-right .icp-card-bg {
    background-position: center bottom;
  }
  .bento-icp-right .icp-card-scrim {
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0.9) 0%,
      rgba(0,0,0,0.55) 45%,
      transparent 75%
    );
  }

  .icp-slide {
    transition-duration: 0.35s;
    inset: -1px;
  }

  .funnel-cta {
    grid-column: 1;
    grid-row: 18;
    height: 42rem;
  }
  .funnel-cta-overlay {
    align-items: center;
    justify-content: flex-start;
    padding-top: 1.5rem;
    padding-left: 0;
  }
  .funnel-cta-content {
    text-align: center;
    align-items: center;
    gap: var(--space-sm);
  }
  .funnel-telemetry {
    display: none;
  }
  .funnel-meta-right {
    display: none;
  }
  .funnel-heading {
    font-size: 2.125rem;
  }
  .funnel-subtitle {
    font-size: var(--text-body);
    padding: 0;
    max-width: 18rem;
  }
  .funnel-subtitle br {
    display: none;
  }

  /* FAQ mobile */
  .faq-inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    padding: 0 var(--space-lg);
  }
  .faq-header {
    position: static;
  }
  .faq-title {
    font-size: 2.125rem;                              /* 32→34px */
  }
  .faq-section {
    padding: 0 0 1.5rem;                               /* top 0, bottom 24px */
  }

  /* Footer mobile */
  .site-footer {
    min-height: auto;
  }
  .footer-blocks {
    position: relative;
    inset: auto;
    height: 14.375rem;                                 /* 224→230px */
    padding: 0.5rem 0;                                 /* 0→8px top & bottom */
  }
  .fb {
    border-radius: 4px;
  }
  /* Expand touch target without changing visual size */
  .fb::after {
    content: '';
    position: absolute;
    inset: -10px;
  }
  .fb.is-dragging {
    filter: brightness(1.2);
    box-shadow: 0 6px 28px var(--ink-soft);
  }
  .footer-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-md);
  }
  .footer-left {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }
  .footer-links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
  }

  /* ── Mobile type tweaks (browser preview) ── */
  .sidebar-footer-text { font-size: 0.75rem; }        /* 10→12px */
  .sidebar-label { font-size: 0.8125rem; }             /* 12→13px */
  .section-title--mobile { font-size: 2.125rem; }     /* 36→34px */
  .features-heading { font-size: 2.125rem; }           /* 36→34px */
  .code-block code { font-size: 0.6875rem; }           /* 10→11px */
  .code-label { font-size: 0.8125rem; }                /* 12→13px */
  .compare-item { font-size: 0.875rem; }               /* 13→14px */
  .compare-vs span { font-size: 0.8125rem; }             /* 10→13px */
  .strip-item { font-size: 0.8125rem; }                /* 12→13px */
  .banner-heading { font-size: 1.3125rem; }            /* 24→21px */
  .headline-line { font-size: 1.375rem; }               /* 24→22px */
  .icp-heading { font-size: 1.375rem; }                 /* 24→22px */
  .icp-name { font-size: 1.375rem; }                    /* 24→22px */
  .icp-card-label { font-size: 0.625rem; }             /* 8→10px  */
  .feature-block-label { font-size: 0.6875rem; }       /* 10→11px */
  .feature-block-title { font-size: 1.25rem; }         /* 18→20px */
  .vtl-heading { font-size: 0.8125rem; }                  /* 13px — matches .code-label */
  .track-heading { font-size: 2.125rem; }              /* 36→34px */
  .founder-name { font-size: 1.25rem; }                /* 18→20px */
  .founder-meta { font-size: 0.625rem; }               /* 8→10px  */
  .founder-detail { font-size: 0.6875rem; }            /* 10→11px */
  .track-label { font-size: 0.625rem; }                /* 8→10px  */
  .track-name { font-size: 0.9375rem; }                /* 13→15px */
  .faq-question { font-size: 1.0625rem; }                /* 17px */
  .footer-copy { font-size: 0.625rem; }                /* 8→10px  */
}

/* Mobile — shorten contact button (homepage only) */
@media (max-width: 47.99rem) {
  .bento .hero-nav-btn--filled { font-size: 0; line-height: 0; color: transparent; }
  .bento .hero-nav-btn--filled::after { content: '+ CONTACT'; font-size: var(--text-base); color: var(--ink); line-height: normal; }
  .bento .hero-nav-btn--filled:hover::after { color: var(--white); }
}

/* Narrow phones — abbreviate company name, boost cloud scale */
@media (max-width: 30rem) {
  .hero-nav-name { font-size: 0; line-height: 0; color: transparent; }
  .hero-nav-name::after { content: 'The Compression Co.'; font-size: var(--text-body); color: var(--nav-text, var(--ink)); line-height: normal; }
  .hero-nav-btn { padding: 0 var(--space-sm); }
  .hero-ascii {
    transform: translateX(-50%) translateY(2px) scale(1.65);
  }
  .hero-contour {
    transform: translateY(2px) scale(1.65);
  }
}

/* Very narrow phones — abbreviate to TCC, shorten buttons (homepage only) */
@media (max-width: 23rem) {
  .hero-nav-name::after { content: 'TCC'; }
  .bento .hero-nav-btn--outline { font-size: 0; line-height: 0; color: transparent; }
  .bento .hero-nav-btn--outline::after { content: 'DEMO'; font-size: var(--text-base); color: var(--ink); line-height: normal; }
  .bento .hero-nav-btn--outline:hover::after { color: var(--white); }
}

/* Tablet: 2 columns (768px – 960px)
   Desktop 4-col holds down to 960px → tablet 2-col → mobile 1-col */
@media (min-width: 48rem) and (max-width: 59.99rem) {
  .bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    min-height: 0;
  }

  .bento-right-col { display: contents; }

  /* Row 1: Nav — full width */
  .bento-nav                   { grid-column: 1 / -1; grid-row: 1; }

  /* Row 2: Hero — full width */
  .bento-hero                  { grid-column: 1 / -1; grid-row: 2; min-height: 16rem; }

  /* Row 3: Sidebar + Circuit side by side */
  .bento-sidebar               { grid-column: 1; grid-row: 3; }
  .bento-circuit               { grid-column: 2; grid-row: 3; overflow: hidden; }

  /* Row 4: Ticker — full width */
  .bento-strip                 { grid-column: 1 / -1; grid-row: 4; margin-top: 8px; }

  /* Row 5: Headline — full width */
  .bento-headline              { grid-column: 1 / -1; grid-row: 5; }

  /* Row 6: Tile carousel — full width */
  .bento-tile-row              { grid-column: 1 / -1; grid-row: 6; }

  /* Row 7: Comparison section — full width */
  .bento-section               { grid-column: 1 / -1; grid-row: 7; }

  /* Row 8: Banner — full width */
  .bento-banner                { grid-column: 1 / -1; grid-row: 8; }

  /* Row 9: Unique POV — full width */
  .bento-pov                   { grid-column: 1 / -1; grid-row: 9; min-height: 42rem; }

  /* Row 10: ICP heading — full width */
  .icp-heading                 { grid-column: 1 / -1; grid-row: 10; padding-bottom: var(--space-lg); }

  /* Row 11: ICP list + ICP image side by side (image spans heading row too) */
  .icp-list                    { grid-column: 1; grid-row: 11; }
  .bento-cell.bento-icp-right  { grid-column: 2; grid-row: 10 / 12; aspect-ratio: auto; min-height: 0; }

  /* Row 12: Features — full width */
  .bento-features              { grid-column: 1 / -1; grid-row: 12; }

  /* Collapse rows when banner + POV are hidden */
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .icp-heading      { grid-row: 8; }
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .icp-list          { grid-row: 9; }
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .bento-icp-right   { grid-row: 8 / 10; }
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .bento-features    { grid-row: 10; }
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .bento-code        { grid-row: 11; }
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .team-tile-row     { grid-row: 12; }
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .bento-track       { grid-row: 13; }
  .bento:has(.bento-banner[hidden]):has(.bento-pov[hidden]) .funnel-cta        { grid-row: 14; }

  /* Row 13: Timeline — collapsed like mobile */
  .bento-code {
    grid-column: 1 / -1;
    grid-row: 13;
    height: 38svh;
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .bento-code.is-vtl-expanded {
    height: auto;
  }
  .bento-code .vtl-inner {
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
  }
  .bento-code.is-vtl-expanded .vtl-inner {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .vtl-toggle {
    display: inline-flex;
    align-items: center;
    position: absolute;
    bottom: var(--space-sm);
    right: var(--space-md);
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.45);
    font-family: var(--font-mono);
    font-size: calc(var(--text-xs) + 1.5px);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 2;
  }
  .vtl-toggle:hover,
  .vtl-toggle:active {
    color: var(--white);
  }
  .vtl-toggle-icon {
    display: inline-block;
    transition: transform 0.3s ease;
    font-size: 0.7em;
    margin-left: 0.5em;
    margin-right: 2px;
  }
  .is-vtl-expanded .vtl-toggle-icon {
    transform: rotate(180deg);
  }

  /* Row 14: Team carousel — full width */
  .team-tile-row               { grid-column: 1 / -1; grid-row: 14; }

  /* Row 15: Track record — full width */
  .bento-track                 { grid-column: 1 / -1; grid-row: 15; }

  /* Row 16: Funnel CTA — full width */
  .funnel-cta                  { grid-column: 1 / -1; grid-row: 16; height: 58rem; }

  /* Internal grids use 2-col at tablet width */
  .features-list   { grid-template-columns: 1fr 1fr; }
  .compare         { grid-template-columns: 1fr 1fr; }

  .faq-inner {
    grid-template-columns: 1fr 2fr;
    padding: 0 var(--space-lg);
  }
  .funnel-telemetry { top: auto; bottom: 2.5rem; }
  .funnel-meta-right { top: auto; bottom: 2.5rem; }
  .funnel-subtitle { max-width: 24rem; }
}

/* Desktop+ — restore touch-action:none for mouse-driven interaction */
@media (min-width: 60rem) {
  .funnel-cta { touch-action: none; }
}

/* Small desktop (960–1200px) — hero needs more height so right-col
   doesn't inflate grid rows and create a gap above the ticker */
@media (min-width: 60rem) and (max-width: 74.99rem) {
  .bento {
    grid-template-rows: min-content auto min-content min-content;
  }
  .bento-hero {
    aspect-ratio: unset;
  }
  .bento-headline {
    margin-top: var(--space-lg);
  }
  .funnel-cta {
    height: 62rem;
  }
}

/* Desktop wider (1200px+) — bump type +1px */
@media (min-width: 75rem) {
  :root {
    --text-xs:      0.625rem;    /* 10px  (was 9)   */
    --text-base:    0.75rem;     /* 12px  (was 11)  */
    --text-body:    0.875rem;    /* 14px  (was 13)  */
    --text-lg:      1rem;        /* 16px  (was 15)  */
    --text-2xl:     1.3125rem;   /* 21px  (was 20)  */
    --text-5xl:     1.6875rem;   /* 27px  (was 29)  */
  }
  .bento-hero {
    aspect-ratio: 1 / 0.67;
  }
  .funnel-cta {
    height: 68rem;
  }
}

/* Large screens (1600px+) — bump type +2px from base */
@media (min-width: 100rem) {
  :root {
    --text-xs:      0.6875rem;   /* 11px  (was 9)   */
    --text-base:    0.8125rem;   /* 13px  (was 11)  */
    --text-body:    0.9375rem;   /* 15px  (was 13)  */
    --text-lg:      1.0625rem;   /* 17px  (was 15)  */
    --text-2xl:     1.375rem;    /* 22px  (was 20)  */
    --text-5xl:     1.75rem;     /* 28px  (was 30)  */
  }
  .hero-heading {
    font-size: 5rem;             /* 80px */
  }
  .hero-subtitle {
    font-size: 1.1875rem;        /* 19px */
  }
  .bento-hero {
    aspect-ratio: 1 / 0.64;
  }
  .funnel-cta {
    height: 68rem;
  }
}

/* ═══════════════════════════════════════════════
   Subpages — Press, Careers
   -----------------------------------------------
   Identical tokens, grid gap, card radius, type
   scale, spacing scale, and color palette as the
   main bento layout. No custom max-width — body
   padding (var(--gap)) is the only inset, same
   as the homepage.
   ═══════════════════════════════════════════════ */

/* Grid — same gap, full-width behaviour as .bento */
.sub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  width: 100%;
  max-width: none;
}

/* Nav — reuses .bento-cell .bento-nav and .hero-nav-* classes.
   Override grid placement that the homepage sets per-breakpoint
   so the nav always spans full width inside .sub-grid. */
.sub-grid > .bento-nav {
  grid-column: 1 / -1;
  grid-row: auto;
}

/* ── Cards ──
   .bento-cell already provides border-radius + overflow: hidden.
   .sub-cell adds background, padding, and flex layout — identical
   values to .icp-card / .bento-headline etc. on the homepage.    */
.sub-cell {
  background: var(--surface-light);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: var(--ink);
}
.sub-cell--wide {
  grid-column: 1 / -1;
}

/* Header card — same vertical rhythm as .bento-headline */
.sub-header {
  padding: var(--space-xl) var(--space-lg);
}

/* Dark variant — same treatment as .bento-sidebar */
.sub-cell--dark {
  background: var(--surface-dark);
  color: var(--chalk);
}
.sub-cell--dark .sub-label {
  color: var(--chalk-soft);
}

/* ── Subpage typography ──
   Every property maps to the exact `:root` type tokens.
   No custom font sizes or hardcoded px values.              */
.sub-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin: 0;
}
.sub-label--accent {
  color: var(--blue);
}
.sub-title {
  font-family: var(--font-stencil);
  font-size: var(--text-5xl);
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.sub-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}
.sub-desc {
  font-family: var(--font-stencil);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-strong);
  margin: 0;
  max-width: 52ch;
}
.sub-desc-light {
  font-family: var(--font-stencil);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--chalk);
  margin: 0;
  max-width: 52ch;
}
.sub-link-title {
  font-family: var(--font-stencil);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
  transition: color 0.2s ease;
}
.sub-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  margin: 0;
}

/* ── Press link cards ──
   Same border + shadow hover as .icp-card links. */
.sub-cell--link {
  text-decoration: none;
  border: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sub-cell--link:hover {
  border-color: var(--ink-soft);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.sub-cell--link:hover .sub-link-title {
  color: var(--blue);
}
.sub-cell--link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Featured press card — accent border */
.sub-cell--featured {
  text-decoration: none;
  border: 1px solid var(--blue);
  transition: box-shadow 0.2s ease;
}
.sub-cell--featured:hover {
  box-shadow: 0 2px 16px rgba(77,174,225,0.2);
}
.sub-cell--featured:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── Job listing cards (careers) ── */
.sub-cell--job {
  padding: 0;
  overflow: hidden;
}
.sub-cell--job[open] {
  border: 1px solid var(--ink-soft);
}
.sub-job-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  cursor: pointer;
  list-style: none;
}
.sub-job-row::-webkit-details-marker { display: none; }
.sub-job-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.sub-job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.sub-tag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--ink-mid);
}
.sub-job-toggle {
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  color: var(--ink-soft);
  transition: transform 0.25s ease;
}
.sub-cell--job[open] .sub-job-toggle {
  transform: rotate(45deg);
}
.sub-job-detail {
  padding: 0 var(--space-lg) var(--space-lg);
  border-top: 1px solid var(--ink-rule);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.sub-job-section {
  padding: var(--space-sm) 0;
}
.sub-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.sub-list li {
  font-family: var(--font-stencil);
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--ink-strong);
  padding-left: var(--space-md);
  position: relative;
}
.sub-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--ink-soft);
}
.sub-job-comp {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  color: var(--ink-strong);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--ink-rule);
}
.sub-job-comp strong {
  font-weight: 600;
  color: var(--ink);
}

/* ── Footer card ──
   Transparent background so it sits on body's black bg,
   matching the homepage's .site-footer. The .footer-*
   child classes are shared with the homepage and already
   styled above.                                           */
.sub-cell--footer {
  background: transparent;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: var(--space-sm) var(--space-md);
  gap: var(--space-sm);
}

/* ── Responsive: single column below 48rem ──
   Same mobile breakpoint as the homepage's single-column
   fallback (max-width: 47.99rem → 768px).                */
@media (max-width: 47.99rem) {
  .sub-grid {
    grid-template-columns: 1fr;
  }
  .sub-header {
    padding: var(--space-lg) var(--space-md);
  }
  .sub-cell--footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md) var(--space-sm);
  }
  .sub-cell--footer .footer-left {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }
  .sub-cell--footer .footer-links {
    flex-direction: column;
    gap: var(--space-xs);
  }
}