/* ============================================================
   OUTLLYR — Colors & Type
   The foundation tokens for everything Outllyr.
   Dark-first. Punchy coral accent. Insight-purple secondary.
   ============================================================ */

/* --- Font imports ---
   Mint Teal / Option 1 type system:
   Fraunces (flowing display serif) for headings, Inter for body/UI,
   IBM Plex Mono for instrument labels. Logo wordmark stays Inter.
*/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&family=Inter:wght@300..800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     COLOR — Base palette
     ============================================================ */

  /* Surface — MONO: warm-gray field, white-lifting surfaces */
  --ink-1000: #FFFFFF;   /* pure white — terminals, inset voids */
  --ink-950:  #E4E4E2;   /* primary surface — page background */
  --ink-900:  #EDEDEB;   /* card surface (lifts toward white) */
  --ink-800:  #F4F4F2;   /* raised card / popover / chips */
  --ink-700:  #DCDCD9;   /* hairlines, tracks, subtle hover fill */
  --ink-600:  #D2D2CF;   /* border subtle */
  --ink-500:  #C2C2BE;   /* border / dashed / dividers */
  --ink-400:  #ABABA7;   /* strongest divider */

  /* Neutral — MONO: near-black ink on gray */
  --paper-0:   #141414;
  --paper-50:  #1E1E1E;
  --paper-100: #2A2A2A;
  --paper-200: #3A3A3A;
  --paper-300: #4E4E4C;
  --paper-400: #5A5A57;
  --paper-500: #7A7A76;
  --paper-600: #9A9A96;

  /* Coral — primary accent. CTAs, hot signals, focus. */
  --coral-50:  #FFEDE8;
  --coral-100: #FFD4CA;
  --coral-200: #FFB09E;
  --coral-300: #FF8A71;
  --coral-400: #FF6B4D;
  --coral-500: #FF5436;   /* primary brand red */
  --coral-600: #E63D1F;
  --coral-700: #C12E14;
  --coral-800: #921F0A;

  /* Secondary — MONO: neutral gray-ink (was indigo) */
  --iris-50:  #ECECEA;
  --iris-100: #DADAD7;
  --iris-200: #BcBcB8;
  --iris-300: #6A6A66;
  --iris-400: #4A4A47;
  --iris-500: #333333;
  --iris-600: #262626;
  --iris-700: #181818;

  /* Mint — positive signal, lift, sentiment up */
  --mint-300: #6BE7B0;
  --mint-500: #2FCB85;
  --mint-700: #1D8F5F;

  /* Amber — caution, neutral signal, warning */
  --amber-300: #FFD37A;
  --amber-500: #FFB02E;
  --amber-700: #B87600;

  /* Magenta — sentiment down, churn signal */
  --magenta-300: #FF8FC8;
  --magenta-500: #F0479C;
  --magenta-700: #B81F6E;

  /* Sky — informational, source links */
  --sky-300: #7CC8FF;
  --sky-500: #2E9CFF;
  --sky-700: #1466B3;

  /* ============================================================
     SEMANTIC COLOR ROLES (use these in components)
     ============================================================ */
  --bg:           var(--ink-950);
  --bg-elevated: var(--ink-900);
  --bg-raised:    var(--ink-800);
  --bg-hover:     var(--ink-700);

  --fg-1:         var(--paper-0);     /* primary text */
  --fg-2:         var(--paper-200);   /* secondary text */
  --fg-3:         var(--paper-400);   /* tertiary / muted */
  --fg-4:         var(--paper-500);   /* placeholder */

  --border-1:     var(--ink-600);
  --border-2:     var(--ink-500);

  /* MONO: accent is ink. Coral is reserved for the logo dot ONLY (--logo). */
  --logo:             #FF5436;   /* the only coral on the site — wordmark dot */
  --accent:           #141414;
  --accent-hover:     #333333;
  --accent-press:     #000000;
  --accent-soft:      rgba(20, 20, 20, 0.06);

  --secondary:        var(--iris-500);
  --secondary-soft:   rgba(20, 20, 20, 0.06);

  --success: #2A2A2A;
  --warning: #2A2A2A;
  --danger:  #2A2A2A;
  --info:    #2A2A2A;

  /* MONO "live" — neutral gray, reserved for live/data/scan states */
  --live:      #5A5A57;
  --live-soft: rgba(20, 20, 20, 0.06);

  /* ============================================================
     TYPE — Family stacks
     ============================================================ */
  --font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-brand:   'Inter', system-ui, -apple-system, sans-serif;

  /* ============================================================
     TYPE — Scale (display first, body second)
     fluid-ish, but spelled out explicitly so the system is legible.
     ============================================================ */
  --t-display-2xl: clamp(48px, 8vw, 96px);   /* hero h1 — billboard */
  --t-display-xl:  clamp(40px, 6vw, 72px);
  --t-display-lg:  clamp(32px, 5vw, 56px);
  --t-display-md:  clamp(28px, 4vw, 44px);
  --t-display-sm:  clamp(24px, 3vw, 34px);

  --t-h1: clamp(28px, 5vw, 40px);
  --t-h2: clamp(24px, 4vw, 30px);
  --t-h3: 22px;
  --t-h4: 18px;

  --t-body-lg:   18px;
  --t-body:      16px;
  --t-body-sm:   14px;
  --t-caption:   12px;
  --t-micro:     11px;

  /* ============================================================
     SPACING
     ============================================================ */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  56px;
  --space-10: 72px;
  --space-11: 96px;
  --space-12: 128px;

  /* ============================================================
     RADII — pills for actions; soft for cards
     ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — soft, used sparingly; glow for accent elements
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(20,40,34,0.06);
  --shadow-2: 0 8px 24px -10px rgba(20,40,34,0.16), 0 2px 6px rgba(20,40,34,0.06);
  --shadow-3: 0 24px 48px -14px rgba(20,40,34,0.20), 0 6px 14px rgba(20,40,34,0.08);
  --glow-coral: 0 0 26px rgba(20, 20, 20, 0.26), 0 0 6px rgba(20, 20, 20, 0.30);
  --glow-iris:  0 0 26px rgba(20, 20, 20, 0.22);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.7, 0, 0.84, 0);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;
}

/* ============================================================
   SEMANTIC TYPE — apply directly to elements
   ============================================================ */
.t-display-2xl,
.t-display-xl,
.t-display-lg,
.t-display-md,
.t-display-sm {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-wrap: balance;
}

.t-display-2xl { font-size: var(--t-display-2xl); }
.t-display-xl  { font-size: var(--t-display-xl);  }
.t-display-lg  { font-size: var(--t-display-lg);  }
.t-display-md  { font-size: var(--t-display-md);  line-height: 1.0; }
.t-display-sm  { font-size: var(--t-display-sm);  line-height: 1.05; }

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 1.05;
  letter-spacing: -0.025em;
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
h4, .t-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.t-body-lg {
  font-family: var(--font-body);
  font-size: var(--t-body-lg);
  line-height: 1.5;
}
p, .t-body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
}
.t-body-sm {
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  line-height: 1.5;
}
.t-caption {
  font-family: var(--font-body);
  font-size: var(--t-caption);
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.t-micro {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
code, .t-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: -0.01em;
}

/* Accent runs — apply on inline <span> for the signature
   coral "punchline" treatment seen in headlines. */
.t-accent  { color: var(--accent); }
.t-iris    { color: var(--secondary); }
.t-muted   { color: var(--fg-3); }
.t-balance { text-wrap: balance; }

/* The signature ending "." in coral, like the logo. */
.t-stamp::after {
  content: ".";
  color: var(--accent);
}


  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg-1); }
  body {
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* clip, NOT hidden — overflow-x:hidden creates a scroll container and breaks position:sticky */
    overflow-x: clip;
  }
  /* html must clip too: body clip alone still lets wide content grow the
     initial containing block, so mobile pans/zooms out and fixed-position
     elements (nav) size to the inflated width */
  html { overflow-x: clip; }
  /* Film grain — kills the flat "template" look. Fixed overlay, never blocks input. */
  body::after {
    content: ""; position: fixed; inset: -50%; z-index: 9; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: .02; animation: grain 9s steps(6) infinite;
  }
  @keyframes grain {
    0%,100% { transform: translate(0,0); } 20% { transform: translate(-2%,3%); }
    40% { transform: translate(3%,-2%); } 60% { transform: translate(-3%,-3%); } 80% { transform: translate(2%,2%); }
  }
  ::selection { background: var(--accent); color: #fff; }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }

  /* ============ Layout ============ */
  .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

  /* ============ Top sys.log ticker ============ */
  .syslog {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 60;
    height: 32px;
    background: rgba(233, 241, 237, 0.82);
    border-bottom: 1px solid var(--border-1);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    display: flex; align-items: center; padding: 0 24px; gap: 14px;
    overflow: hidden;
    font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
  }
  .pulse-dot {
    width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes pulse {
    0%, 100% { transform: scale(0.92); box-shadow: 0 0 0 0 rgba(20, 20, 20, 0.6); }
    50% { transform: scale(1); box-shadow: 0 0 0 7px rgba(20, 20, 20, 0); }
  }
  .syslog-tag { color: #2A2A2A; flex-shrink: 0; }
  .ticker-wrap { flex: 1; overflow: hidden; white-space: nowrap; }
  /* syslog shows one discrete log line at a time (PageMotion swaps it) */
  .ticker-line {
    display: inline-block;
    transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out);
  }
  .ticker-line.out { opacity: 0; transform: translateY(-7px); }
  /* .ticker-move marquee retained for the integrations strip only */
  .ticker-move { display: inline-block; animation: ticker 38s linear infinite; }
  @keyframes ticker { 0% { transform: translate3d(0,0,0); } 100% { transform: translate3d(-50%,0,0); } }
  /* continuous sys.log stream — two identical spans scroll seamlessly */
  .syslog-stream { display: inline-flex; white-space: nowrap; will-change: transform; animation: ticker 60s linear infinite; }
  .syslog-stream span { display: inline-block; }
  .syslog:hover .syslog-stream { animation-play-state: paused; }

  /* ============ Sticky nav ============ */
  .nav {
    position: fixed; top: 32px; left: 0; width: 100%; z-index: 50;
    background: rgba(244, 249, 247, 0.72);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-1);
  }
  .nav-inner {
    max-width: 1200px; margin: 0 auto; padding: 16px 24px;
    display: flex; align-items: center; justify-content: space-between;
  }
  .nav-left { display: flex; align-items: center; gap: 40px; }
  .nav-links { display: flex; gap: 24px; font-size: 14px; color: var(--fg-2); font-weight: 500; }
  .nav-links .active { color: var(--fg-1); }
  .nav-links a { cursor: pointer; transition: color var(--dur-2) var(--ease-out); }
  .nav-links a:hover { color: var(--fg-1); }
  /* keep nav links reachable on phones: compact instead of hiding */
  @media (max-width: 768px) {
    .nav-inner { padding: 12px 16px; }
    .nav-left { gap: 14px; }
    .nav-links { gap: 12px; font-size: 12px; }
    .wordmark { font-size: 19px; }
    .nav-right .btn-sm { padding: 7px 12px; font-size: 12px; }
  }
  .nav-right { display: flex; align-items: center; gap: 12px; }
  .wordmark {
    font-family: var(--font-brand); font-weight: 800; font-size: 22px;
    letter-spacing: -0.045em; line-height: 1; color: var(--fg-1);
  }
  .wordmark .dot { color: var(--logo); }

  /* ============ Button ============ */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
    padding: 12px 22px; font-size: 15px;
    border: 0; border-radius: var(--radius-sm);
    cursor: pointer; white-space: nowrap;
    transition: background var(--dur-2) var(--ease-out), transform 80ms ease, box-shadow var(--dur-2);
  }
  .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset; }
  .btn-primary:hover { background: var(--accent-hover); }
  .btn-primary:active { background: var(--accent-press); transform: scale(0.97); }
  .btn-primary.glow { box-shadow: 0 0 36px rgba(20, 20, 20, 0.45), 0 1px 0 rgba(255, 255, 255, 0.18) inset; }
  .btn-secondary { background: transparent; color: var(--fg-1); border: 1px solid var(--ink-500); }
  .btn-secondary:hover { background: var(--ink-700); }
  .btn-ghost { background: transparent; color: var(--fg-2); padding: 12px 16px; }
  .btn-ghost:hover { color: var(--fg-1); }
  .btn-sm { padding: 8px 16px; font-size: 13px; }
  .btn-lg { padding: 16px 28px; font-size: 17px; font-weight: 700; }

  /* ============ Badge ============ */
  .badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--radius-pill);
    font-size: 12px; font-weight: 600; line-height: 1.4;
  }
  .badge.neutral { background: var(--ink-800); color: var(--fg-2); border: 1px solid var(--ink-600); }
  .badge.coral { background: rgba(20, 20, 20, 0.14); color: #2A2A2A; }
  .badge.iris { background: rgba(20, 20, 20, 0.12); color: var(--iris-700); }
  .badge.mint { background: rgba(47, 203, 133, 0.14); color: #444444; }
  .badge.amber { background: rgba(255, 176, 46, 0.14); color: #444444; }
  .badge.magenta { background: rgba(240, 71, 156, 0.14); color: #555555; }
  .badge.square { border-radius: 6px; }
  .badge .dot {
    width: 6px; height: 6px; border-radius: 3px; background: currentColor;
    box-shadow: 0 0 8px currentColor;
  }

  /* ============ Card ============ */
  .card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-1);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-2);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2);
  }
  .card.hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); border-color: var(--ink-500); }
  .card.iris-glow { box-shadow: 0 0 50px rgba(20, 20, 20, 0.16), var(--shadow-2); border-color: var(--iris-500); }
  .card.coral-glow { box-shadow: 0 0 50px rgba(20, 20, 20, 0.18), var(--shadow-2); border-color: var(--accent); }

  /* ============ Mono label / section index ============ */
  .mono { font-family: var(--font-mono); }
  .mono-label {
    font-family: var(--font-mono); font-size: 12px; color: var(--fg-3);
    letter-spacing: 0.06em; text-transform: lowercase;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .mono-label .ix { color: #333333; }

  /* ============ Coral redact (preserve dossier emphasis pattern) ============ */
  .redact { position: relative; display: inline-block; }
  .redact::after {
    content: ""; position: absolute; left: 0; right: 0; top: 52%; height: 3px;
    background: var(--accent); transform: translateY(-50%);
  }

  /* ============ Body offset ============ */
  body { padding-top: 96px; }

  /* ============ Small screens: reclaim fixed chrome ============ */
  @media (max-width: 640px) {
    .syslog { display: none; }
    .nav { top: 0; }
    body { padding-top: 72px; }
  }

  /* ============ Sections ============ */
  section { padding: 96px 0; position: relative; }
  @media (max-width: 768px) { section { padding: 64px 0; } }
  section.tight { padding: 56px 0; }

  /* ============ HERO ============ */
  .hero { padding: 80px 0 80px; position: relative; overflow: hidden; }
  .hero-glow {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(620px 420px at 18% 26%, rgba(20, 20, 20, 0.10), transparent 60%),
      radial-gradient(720px 500px at 84% 76%, rgba(20, 20, 20, 0.10), transparent 60%);
  }
  .hero-inner { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; text-align: center; }
  .hero h1 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(40px, 10vw, 104px); line-height: 0.95; letter-spacing: -0.035em;
    margin: 24px 0 24px; text-wrap: balance;
  }
  .hero h1 .ac { color: var(--accent); }

  /* 'Intelligence' decodes once on load (PageMotion), then rests */
  .hero h1 .intel {
    position: relative;
    display: inline-block;
    color: var(--accent);
  }
  .hero h1 .intel-text { color: var(--accent); }
  .hero h1 .intel-line { display: none; }

  /* Hero entrance cascade */
  .hero-inner > .fade-up:nth-child(2) { transition-delay: 0.09s; }
  .hero-inner > .fade-up:nth-child(3) { transition-delay: 0.17s; }
  .hero-inner > .fade-up:nth-child(4) { transition-delay: 0.25s; }
  .hero .stats.in > *:nth-child(1) { transition-delay: 0.34s; }
  .hero .stats.in > *:nth-child(2) { transition-delay: 0.40s; }
  .hero .stats.in > *:nth-child(3) { transition-delay: 0.46s; }
  .hero .stats.in > *:nth-child(4) { transition-delay: 0.52s; }
  .hero p.lede {
    font-size: 19px; line-height: 1.55; color: var(--fg-2);
    max-width: 640px; margin: 0 auto 32px;
  }
  .subnav {
    display: inline-flex; flex-wrap: wrap; justify-content: center;
    gap: 10px 16px; font-family: var(--font-mono); font-size: 13px; color: var(--fg-3);
    margin: 0 auto 32px;
  }
  .subnav a { transition: color var(--dur-2); }
  .subnav a:hover { color: var(--fg-1); }
  .subnav .sep { color: var(--ink-500); }
  .hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 64px; }

  /* ============ Hero stats strip ============ */
  .stats {
    display: grid; grid-template-columns: 1fr; gap: 1px;
    background: var(--border-1);
    border: 1px solid var(--border-1); border-radius: var(--radius-xl);
    overflow: hidden;
  }
  @media (min-width: 600px) { .stats { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
  .stat { background: var(--ink-900); padding: 28px 24px; }
  .stat .label {
    font-family: var(--font-body); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
    color: var(--fg-3); margin-bottom: 12px;
  }
  .stat .value { font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
  .stat .value .unit { color: var(--fg-3); font-size: 24px; margin-left: 2px; }

  /* ============ Section heading ============ */
  .sec-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 48px; }
  .sec-head.center { align-items: center; text-align: center; }
  .sec-head .eyebrow { font-family: var(--font-mono); font-size: 12px; color: #333333; letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 8px; }
  .sec-head h2 {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(40px, 5.6vw, 64px); line-height: 1.0; letter-spacing: -0.03em;
    margin: 0; text-wrap: balance;
  }
  .sec-head h2 .ac { color: var(--accent); }
  .sec-head p { font-size: 17px; color: var(--fg-2); max-width: 640px; margin: 4px 0 0; line-height: 1.55; }
  .sec-head .meta {
    font-family: var(--font-mono); font-size: 12px; color: var(--fg-3);
    display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px;
  }
  .sec-head .meta .sep { color: var(--ink-500); }
  .sec-head .row {
    display: flex; flex-direction: column; gap: 16px;
    margin-top: 4px;
  }
  @media (max-width: 879px) {
    .sec-head, .sec-head .row { align-items: center; text-align: center; }
    .sec-head .meta { justify-content: center; }
  }
  @media (min-width: 880px) {
    .sec-head .row { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; }
  }
  .sec-head .row p { margin: 0; max-width: 480px; }

  /* ============ Section: 01 INTAKE ============ */
  .intake-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }
  @media (min-width: 880px) { .intake-grid { grid-template-columns: 4fr 8fr; gap: 56px; } }

  .terminal { padding: 24px; position: relative; }
  .terminal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--ink-700); }
  .term-tag { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); display: flex; align-items: center; gap: 8px; }
  .term-tag .live { width: 6px; height: 6px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: pulse 2s infinite; }
  .msg { display: flex; gap: 12px; margin-bottom: 14px; }
  .msg .av { width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
  .msg.user .av { background: var(--ink-700); color: var(--fg-2); border: 1px solid var(--ink-500); }
  .msg.ai .av { background: rgba(20, 20, 20, 0.14); color: #2A2A2A; border: 1px solid rgba(20, 20, 20, 0.3); }
  .msg .bubble {
    padding: 12px 14px; border-radius: 14px;
    font-size: 14px; line-height: 1.55; max-width: 80%;
  }
  .msg.user .bubble { background: var(--ink-800); border: 1px solid var(--ink-600); color: var(--fg-1); }
  .msg.ai { flex-direction: row-reverse; }
  .msg.ai .bubble { background: rgba(20, 20, 20, 0.06); border: 1px solid rgba(20, 20, 20, 0.25); max-width: none; flex: 1; }
  .msg.ai .bubble.full { width: 100%; }
  .ai-tag { font-family: var(--font-mono); font-size: 11px; color: #2A2A2A; margin-bottom: 6px; display: block; }

  .readiness {
    margin-top: 14px; padding: 14px;
    background: var(--ink-1000); border: 1px solid var(--ink-600); border-radius: var(--radius-md);
  }
  .readiness-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-bottom: 8px; }
  .readiness-bar { width: 100%; height: 4px; background: var(--ink-700); border-radius: 999px; overflow: hidden; }
  .readiness-bar > div { height: 100%; background: var(--accent); border-radius: 999px; transition: width 1.4s var(--ease-out); width: 0; }
  .readiness-foot { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); }
  .readiness-foot .above { color: #2A2A2A; }

  .intake-bullets {
    font-family: var(--font-mono); font-size: 12px; color: var(--fg-2);
    display: flex; flex-direction: column; gap: 6px; margin-top: 12px;
  }
  .intake-bullets > div::before { content: "● "; color: #333333; }

  /* ============ Section: 02 HYPOTHESIS ============ */
  .hyp-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  @media (min-width: 720px) { .hyp-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1080px) { .hyp-grid { grid-template-columns: repeat(3, 1fr); } }
  .hyp-card { padding: 24px; position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 200px; }
  .hyp-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
  .hyp-card .id { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
  .hyp-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.015em; margin: 0; line-height: 1.25; }
  .hyp-card p { margin: 0; font-size: 14px; color: var(--fg-2); line-height: 1.5; }
  .hyp-card .foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--ink-700); margin-top: auto; }
  .hyp-card .conf { font-family: var(--font-mono); font-size: 12px; color: var(--fg-3); }
  .hyp-card .delta { font-family: var(--font-mono); font-size: 12px; }
  .hyp-card.discarded { opacity: 0.55; }

  /* ============ Section: 03 DISCOVERY (3-column flow) ============ */
  .flow-frame {
    background: var(--ink-900); border: 1px solid var(--border-1);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-2);
    overflow: hidden; position: relative; height: auto;
    display: flex; flex-direction: column;
  }
  @media (min-width: 880px) { .flow-frame { flex-direction: row; height: 540px; } }
  .flow-col { flex: 1 0 auto; min-width: 0; padding: 20px; position: relative; display: flex; flex-direction: column; min-height: 0; }
  @media (max-width: 879px) { 
    .flow-col:first-child { height: 300px; flex: none; } 
    .flow-col + .flow-col { border-top: 1px solid var(--ink-700); }
  }
  @media (min-width: 880px) {
    .flow-col { flex: 1; }
    .flow-col + .flow-col { border-left: 1px solid var(--ink-700); }
  }
  .flow-col-head {
    font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
    display: flex; align-items: center; gap: 8px; margin-bottom: 16px;
  }
  .flow-col-head .ac { color: #333333; }

  /* open web stream */
  .stream-wrap { flex: 1; overflow: hidden; position: relative; }
  .stream-wrap::before, .stream-wrap::after {
    content: ""; position: absolute; left: 0; right: 0; height: 32px; z-index: 1; pointer-events: none;
  }
  .stream-wrap::before { top: 0; background: linear-gradient(180deg, var(--ink-900), transparent); }
  .stream-wrap::after { bottom: 0; background: linear-gradient(0deg, var(--ink-900), transparent); }
  .stream { display: flex; flex-direction: column; gap: 10px; }
  .stream-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; }
  .stream-row .name { color: var(--fg-2); display: flex; align-items: center; gap: 8px; }
  .stream-row .name.dim { color: var(--fg-4); }
  .stream-row .name .live { width: 5px; height: 5px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 6px var(--accent); }
  .stream-row .name .dim-dot { width: 5px; height: 5px; border-radius: 3px; background: var(--ink-500); }
  .stream-row .count { color: var(--fg-4); }

  /* router rules */
  .router-rules { display: flex; flex-direction: column; gap: 10px; justify-content: center; flex: 1; }
  .rule {
    background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: var(--radius-md);
    padding: 12px;
  }
  .rule .rname { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.04em; }
  .rule .rfn { font-family: var(--font-mono); font-size: 13px; color: #2A2A2A; margin-top: 4px; }
  .rule .rcode { font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); margin-top: 4px; }
  .rule.danger { border-color: rgba(20, 20, 20, 0.45); }
  .rule.danger .rname { color: #555555; }
  .rule.danger .rfn { color: #555555; }
  .rule.danger .rcode { color: #555555; }

  /* tagged signals */
  .tags-list { display: flex; flex-direction: column; gap: 14px; flex: 1; justify-content: center; }
  .tag-row { display: flex; flex-direction: column; gap: 6px; }
  .tag-row-top { display: flex; justify-content: space-between; align-items: center; }
  .tag-chip {
    font-family: var(--font-mono); font-size: 11px; font-weight: 600;
    padding: 3px 8px; border-radius: var(--radius-pill);
  }
  .tag-chip.hot { background: rgba(20, 20, 20, 0.14); color: #2A2A2A; border: 1px solid rgba(20, 20, 20, 0.3); }
  .tag-chip.cool { background: var(--ink-800); color: var(--fg-3); border: 1px solid var(--ink-600); }
  .tag-bar { width: 100%; height: 2px; background: var(--ink-700); border-radius: 999px; overflow: hidden; }
  .tag-bar > div { height: 100%; transition: width 1.4s var(--ease-out); width: 0; }

  /* connectors between flow columns */
  .flow-connect {
    position: absolute; top: 0; bottom: 0; width: 1px; pointer-events: none; z-index: 1;
    background: linear-gradient(180deg, transparent, rgba(20, 20, 20, 0.25) 20%, rgba(20, 20, 20, 0.25) 80%, transparent);
  }
  @keyframes flow-h { 0% { stroke-dashoffset: 18; } 100% { stroke-dashoffset: 0; } }
  .flow-line { stroke-dasharray: 3 6; animation: flow-h 1.2s linear infinite; }

  /* ============ Section: 04 LIVING REPORT ============ */
  .report-frame {
    background: var(--ink-900); border: 1px solid var(--border-1);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-2);
    overflow: hidden; position: relative; height: 640px;
    display: flex; flex-direction: column;
  }
  .report-top {
    height: 44px; border-bottom: 1px solid var(--ink-700);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 18px; background: var(--ink-1000);
    font-family: var(--font-mono); font-size: 11px;
  }
  .report-top .live-pill { color: #2A2A2A; display: flex; align-items: center; gap: 8px; }
  .report-top .scope {
    color: var(--fg-3); padding: 4px 10px; border: 1px solid var(--ink-600); border-radius: 6px;
    background: var(--ink-900);
  }
  .report-top .meter { color: var(--fg-1); display: flex; align-items: center; gap: 6px; }
  .report-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  @media (min-width: 880px) { .report-body { flex-direction: row; } }
  .report-map { flex: 0 0 100%; height: 320px; position: relative; padding: 24px; }
  @media (min-width: 880px) { .report-map { flex: 0 0 70%; height: auto; border-right: 1px solid var(--ink-700); } }
  .report-map::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(20, 20, 20, 0.08), transparent 50%);
  }
  .report-feed { flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .feed-panel { padding: 16px; flex: 1; border-bottom: 1px solid var(--ink-700); display: flex; flex-direction: column; min-height: 0; }
  .feed-panel:last-child { border-bottom: 0; flex: 0.8; }
  .feed-head {
    font-family: var(--font-mono); font-size: 11px; color: var(--fg-3);
    margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.06em;
    display: flex; align-items: center; gap: 8px;
  }
  .feed-head .live { width: 6px; height: 6px; background: var(--accent); border-radius: 3px; box-shadow: 0 0 6px var(--accent); animation: pulse 2s infinite; }

  .map-node {
    position: absolute; transform: translate(-50%, -50%);
    background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: var(--radius-md);
    padding: 10px 12px; min-width: 130px; z-index: 2;
    box-shadow: var(--shadow-2);
  }
  .map-node .nid { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); margin-bottom: 4px; }
  .map-node .nt { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--fg-1); letter-spacing: -0.01em; }
  .map-node.hot { border-color: var(--accent); background: rgba(20, 20, 20, 0.06); box-shadow: var(--glow-coral), var(--shadow-2); }
  .map-node.hot .nid { color: #2A2A2A; }
  .map-node.lit { border-color: var(--accent); background: rgba(20, 20, 20, 0.04); }
  .map-node.lit .nid { color: #2A2A2A; }
  .map-node.cold { opacity: 0.85; }
  .map-node.dropped { opacity: 0.5; border-color: rgba(20, 20, 20, 0.35); }
  .map-node.dropped .nid { color: #555555; }
  .map-node.dropped .nt { font-size: 12px; text-decoration: line-through; color: var(--fg-3); }
  .map-node .delta {
    position: absolute; top: -10px; right: -8px;
    background: var(--accent); color: #fff;
    font-family: var(--font-mono); font-size: 9px; padding: 2px 6px; border-radius: 999px;
    box-shadow: var(--shadow-1);
    animation: pulse 2.5s infinite;
  }
  .map-hub {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 96px; height: 96px; border-radius: 50%;
    border: 1px solid rgba(20, 20, 20, 0.45); background: var(--ink-950);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 24px rgba(20, 20, 20, 0.14);
    z-index: 1;
  }
  .map-hub-inner {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--ink-800); border: 1px solid var(--ink-600);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 11px; color: var(--fg-1);
  }

  .verdict-item {
    background: var(--ink-800); border: 1px solid var(--ink-600); border-radius: var(--radius-md);
    padding: 10px 12px; margin-bottom: 10px;
  }
  .verdict-item:last-child { margin-bottom: 0; }
  .verdict-item .time { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); margin-bottom: 4px; }
  .verdict-item .body { font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); }
  .verdict-item .body .up { color: #2A2A2A; }
  .verdict-item .body .down { color: #555555; }
  .verdict-item.dropped { opacity: 0.55; }

  .signal-stream-wrap { flex: 1; overflow: hidden; position: relative; }
  .signal-stream-wrap::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28px; pointer-events: none;
    background: linear-gradient(0deg, var(--ink-900), transparent);
  }
  .signal-stream { display: flex; flex-direction: column; gap: 6px; }
  .signal-line { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); display: flex; justify-content: space-between; gap: 8px; }
  .signal-line .route.hot { color: #2A2A2A; }
  .signal-line .route.cold { color: var(--fg-4); }

  .stability { display: flex; flex-direction: column; }
  .stability-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ink-700); }
  .stability-row:last-child { border-bottom: 0; }
  .stability-row .h { font-family: var(--font-mono); font-size: 11px; color: var(--fg-1); }
  .stability-pill {
    font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.04em;
  }
  .stability-pill.robust { background: rgba(20, 20, 20, 0.14); color: #2A2A2A; }
  .stability-pill.pending { background: var(--ink-800); color: var(--fg-3); border: 1px solid var(--ink-600); }
  .stability-pill.fragile { background: rgba(240, 71, 156, 0.14); color: #555555; }

  /* ============ Section: 05 DELIVERY ============ */
  .delivery-grid { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: stretch; }
  @media (min-width: 880px) { .delivery-grid { grid-template-columns: 3fr 1fr 4fr 1fr 3fr; gap: 12px; align-items: center; } }

  .small-card { padding: 16px 18px; }
  .small-card .lbl { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--fg-1); }
  .small-card .sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top: 4px; }

  .pillar {
    padding: 32px 28px; text-align: center;
  }
  .pillar-mark { font-family: var(--font-brand); font-weight: 800; font-size: 34px; letter-spacing: -0.045em; color: var(--fg-1); }
  .pillar-mark .dot { color: var(--logo); }
  .pillar-tag { font-family: var(--font-mono); font-size: 11px; color: #2A2A2A; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }
  .pillar hr { border: 0; border-top: 1px solid rgba(20, 20, 20, 0.2); margin: 20px auto; max-width: 80%; }
  .pillar-features { display: flex; flex-direction: column; gap: 10px; text-align: left; }
  .pillar-features .feat { font-family: var(--font-mono); font-size: 13px; color: var(--fg-2); display: flex; align-items: center; gap: 10px; }
  .pillar-features .feat::before { content: "▸"; color: var(--accent); }

  .connector-svg { width: 100%; height: 240px; display: none; }
  @media (min-width: 880px) { .connector-svg { display: block; } }

  .col-label { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; }
  .col-label.right { text-align: right; }

  .what-grid {
    margin-top: 56px; padding: 32px;
    border: 1px dashed var(--ink-500); border-radius: var(--radius-xl);
  }
  .what-head { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); text-align: center; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 28px; }
  .what-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
  @media (min-width: 720px) { .what-cards { grid-template-columns: repeat(3, 1fr); } }
  .what-card {
    background: var(--ink-900); border: 1px solid var(--border-1); border-radius: var(--radius-lg);
    padding: 22px;
  }
  .what-card .ttl { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--accent); margin-bottom: 6px; }
  .what-card .sub { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }

  /* Integrations ticker */
  .integrations { padding-top: 56px; margin-top: 56px; border-top: 1px solid var(--border-1); }
  .integrations-label { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
  .integrations .ticker-move {
    display: inline-flex; gap: 32px; align-items: center; padding: 6px 0;
    font-family: var(--font-mono); font-size: 13px; color: var(--fg-3);
  }
  .integrations .ticker-move .sep { color: var(--accent); }

  /* Footer */
  footer { border-top: 1px solid var(--border-1); padding: 64px 0 40px; margin-top: 96px; }
  .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; }
  @media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 600px) { .foot-grid { grid-template-columns: 1fr; } }
  .foot-col-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); margin-bottom: 16px; }
  .foot-col a { display: block; font-size: 14px; color: var(--fg-2); margin-bottom: 10px; }
  .foot-col a:hover { color: var(--fg-1); }
  /* the get_access CTA is a filled dark button — keep its label white, not the footer-link gray */
  .foot-col a.btn-primary { color: #fff; }
  .foot-bottom {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 32px; border-top: 1px solid var(--border-1);
    font-size: 13px; color: var(--fg-4);
  }
  @media (max-width: 600px) {
    .foot-bottom { flex-direction: column; gap: 16px; text-align: center; }
  }
  .foot-wordmark {
    font-family: var(--font-brand); font-size: clamp(48px, 10vw, 96px); font-weight: 800;
    letter-spacing: -0.05em; line-height: 0.85; color: var(--paper-200);
  }
  .foot-wordmark .dot { color: var(--logo); }
  .foot-live { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fg-3); font-family: var(--font-mono); }

  /* ============ PageMotion (pm-) — discrete event motion ============ */
  /* intake replay */
  .msg.pm-hidden { opacity: 0; transform: translateY(8px); }
  .msg { transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
  .pm-typing .bubble { display: inline-flex; gap: 5px; align-items: center; padding: 14px; }
  .pm-dot {
    width: 5px; height: 5px; border-radius: 999px; background: #2A2A2A;
    animation: pm-dot-blink 1s ease-in-out infinite;
  }
  .pm-dot:nth-child(2) { animation-delay: 0.18s; }
  .pm-dot:nth-child(3) { animation-delay: 0.36s; }
  @keyframes pm-dot-blink { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

  /* discarded hypotheses get struck live after reveal */
  .hyp-card.discarded.pm-pre:not(.pm-struck) { opacity: 1; }
  .hyp-card.discarded.pm-pre .redact::after {
    transform-origin: left center;
    transition: transform 0.45s var(--ease-out);
  }
  .hyp-card.discarded.pm-pre:not(.pm-struck) .redact::after { transform: translateY(-50%) scaleX(0); }
  .hyp-card.discarded.pm-pre.pm-struck { opacity: 0.55; }
  .hyp-card.discarded.pm-pre.pm-struck .redact::after { transform: translateY(-50%) scaleX(1); }

  /* cross-highlight between hypothesis cards and report map nodes */
  .map-node.pm-xhl { border-color: #333333; box-shadow: 0 0 24px rgba(20, 20, 20, 0.35), var(--shadow-2); z-index: 3; }
  .hyp-card.pm-xhl { border-color: #333333; }

  /* discrete feed events */
  .pm-new { animation: pm-slide-in 0.45s var(--ease-out); }
  @keyframes pm-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }
  .rule { transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
  .rule.pm-flash { border-color: var(--accent); box-shadow: 0 0 18px rgba(20, 20, 20, 0.22); }
  .tag-row.pm-blip { animation: pm-blip 0.65s var(--ease-out); }
  @keyframes pm-blip { 0%, 100% { filter: brightness(1); } 35% { filter: brightness(1.7); } }
  .map-node { transition: border-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out); }
  .map-node.pm-ping { border-color: #333333; box-shadow: 0 0 28px rgba(20, 20, 20, 0.45), var(--shadow-2); }
  .stability-pill { display: inline-block; }
  .stability-pill.pm-flip { animation: pm-flip 0.32s ease-in-out; }
  @keyframes pm-flip { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0); } }

  /* pipeline progress rail */
  .pm-rail {
    display: none;
    position: fixed; left: 28px; top: 50%; transform: translateY(-50%); z-index: 40;
  }
  @media (min-width: 1280px) {
    .pm-rail { display: flex; flex-direction: column; gap: 18px; }
  }
  .pm-rail-track {
    position: absolute; left: -12px; top: 4px; bottom: 4px; width: 1px;
    background: var(--ink-700);
  }
  .pm-rail-fill { width: 1px; height: 0%; background: var(--accent); transition: height 0.2s linear; }
  .pm-rail-item {
    display: flex; align-items: baseline; gap: 8px;
    background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
    font-family: var(--font-mono); font-size: 10px; color: var(--fg-4);
    letter-spacing: 0.06em; transition: color var(--dur-2) var(--ease-out);
  }
  .pm-rail-item:hover { color: var(--fg-2); }
  .pm-rail-item .ix { color: inherit; }
  .pm-rail-item.on { color: #2A2A2A; }
  .pm-rail-item.on .ix { color: #333333; }

  /* ============ Reduced motion: show final states, no loops ============ */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001s !important;
      transition-delay: 0s !important;
    }
    .fade-up, .stagger > * { opacity: 1 !important; transform: none !important; }
  }

  /* Reveal animations */
  .fade-up { opacity: 0; transform: translateY(14px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
  .fade-up.in { opacity: 1; transform: none; }
  .stagger > * { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  .stagger.in > * { opacity: 1; transform: none; }
  .stagger.in > *:nth-child(1) { transition-delay: 0.05s; }
  .stagger.in > *:nth-child(2) { transition-delay: 0.10s; }
  .stagger.in > *:nth-child(3) { transition-delay: 0.15s; }
  .stagger.in > *:nth-child(4) { transition-delay: 0.20s; }
  .stagger.in > *:nth-child(5) { transition-delay: 0.25s; }
  .stagger.in > *:nth-child(6) { transition-delay: 0.30s; }
  .stagger.in > *:nth-child(7) { transition-delay: 0.35s; }
  .stagger.in > *:nth-child(8) { transition-delay: 0.40s; }

input, select, textarea { font-family: var(--font-body) !important; font-size: 15px !important; }
::placeholder { font-family: var(--font-body) !important; font-size: 15px !important; color: var(--fg-4); opacity: 1; }
::-webkit-input-placeholder { font-family: var(--font-body) !important; font-size: 15px !important; color: var(--fg-4); }
:-ms-input-placeholder { font-family: var(--font-body) !important; font-size: 15px !important; color: var(--fg-4); }
::-ms-input-placeholder { font-family: var(--font-body) !important; font-size: 15px !important; color: var(--fg-4); }

/* ============================================================
   "THE RUN" — scroll-narrative scaffolding
   Scenes pin; the scrollEngine sets --p (0→1) per scene; scene
   visuals read off --p (pure CSS) or are driven in JS.
   ============================================================ */

/* visually hidden but available to screen readers (real headings live here
   while the big chapter numeral/title is decorative + aria-hidden) */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* A scene reserves vertical runway; .run-pin sticks while you scroll it */
.run-scene { position: relative; }
.run-pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: grid; align-items: center;
}
/* content-section scene: JS sets the section height (runway); the inner
   pin centers the existing .wrap and is allowed to overflow (no clip) so
   tall content isn't cut off */
.run-scene.run-pinned { padding: 0 !important; }
.run-scene-pin {
  position: sticky; top: 0; height: 100vh; overflow: visible;
  display: grid; align-items: center; align-content: center;
  /* minmax(0,1fr): stop nowrap content (integrations ticker) from setting
     the track's min-content width and stretching the whole page on mobile */
  grid-template-columns: minmax(0, 1fr);
}
.run-scene-pin > .wrap { min-width: 0; }
/* entering/leaving the pin: gentle scale+fade keyed off --p so the scene
   "arrives" and "departs" instead of just sitting there */
.run-scene-pin > .wrap {
  opacity: clamp(0, var(--p) * 6, 1);
  transform: scale(calc(0.97 + clamp(0, var(--p) * 6, 1) * 0.03));
  transition: none;
}
/* a card/element awaiting its turn under the scrub */
.pm-dim { opacity: .2 !important; transform: scale(.985); filter: saturate(.55);
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), filter .35s; }
/* the currently spotlighted card (team scrub) */
.pm-spot { transform: scale(1.04); border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 24px 60px rgba(20,40,34,.18);
  transition: transform .35s var(--ease-out), border-color .35s, box-shadow .35s; }

/* ---- Chapter interstitial: full-bleed numeral + wipe-in title ---- */
.run-chapter { position: relative; height: 200vh; --p: 0; overflow-x: clip; }
.run-chapter .run-pin {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.run-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(300px, 56vw, 860px); line-height: 1; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(22,51,43,.10);
  transform: scale(calc(1.3 - var(--p) * .3)) translateY(calc((1 - var(--p)) * 6vh));
  opacity: calc(var(--p) * 1.4); pointer-events: none; user-select: none;
}
.run-ch-kicker {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 22px; position: relative; z-index: 2;
  opacity: calc((var(--p) - .25) * 4);
}
.run-ch-title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 5vw, 60px); letter-spacing: -0.02em; line-height: 1.18;
  margin: 0 auto; text-align: center; position: relative; z-index: 2;
  max-width: min(94vw, 1040px); padding: 0 24px; text-wrap: balance;
}
.run-ch-title .run-wipe {
  display: inline-block; padding-bottom: 0.06em;
  /* negative bottom inset so serif descenders (g, p, y) aren't clipped by the reveal */
  clip-path: inset(-0.05em calc((1 - clamp(0, (var(--p) - .2) * 2.2, 1)) * 100%) -0.18em 0);
}
.run-ch-title .ac { color: var(--accent); }
.run-ch-sub {
  max-width: 540px; text-align: center; color: var(--fg-2); font-size: 16px; line-height: 1.6;
  margin: 24px auto 0; position: relative; z-index: 2;
  opacity: calc((var(--p) - .5) * 3.2);
  transform: translateY(calc((1 - clamp(0, (var(--p) - .5) * 3.2, 1)) * 18px));
}
/* thread that draws down into the next scene */
.run-thread {
  position: absolute; left: 50%; bottom: 0; width: 1px; height: 16vh;
  background: var(--border-2); transform-origin: top;
  transform: scaleY(clamp(0, (var(--p) - .65) * 3, 1));
}
.run-thread::after {
  content: ""; position: absolute; bottom: -3px; left: -3px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  opacity: clamp(0, (var(--p) - .9) * 10, 1);
}

/* one-shot cyan scanline sweep when a chapter pins */
.run-scanline {
  position: absolute; left: 0; right: 0; height: 2px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--live), transparent);
  opacity: clamp(0, var(--p) * 6, 1) * clamp(0, (1 - var(--p)) * 3, 1);
  top: calc(var(--p) * 100%);
  box-shadow: 0 0 24px var(--live);
}

/* ---- Mobile / no-pin fallback: scenes become normal flow ---- */
@media (max-width: 900px) {
  .run-chapter { height: auto; min-height: 60vh; }
  .run-scene .run-pin, .run-chapter .run-pin {
    position: static; height: auto; min-height: auto; padding: 14vh 0;
  }
  .run-num { font-size: clamp(180px, 50vw, 320px); opacity: .5; transform: none; }
  .run-ch-kicker, .run-ch-sub { opacity: 1; transform: none; }
  .run-ch-title .run-wipe { clip-path: none; }
  .run-thread { display: none; }
  .run-scanline { display: none; }
  /* origami art has fixed px widths; cap it so it never juts past a phone screen */
  .ori { max-width: 68vw; }
}

/* ---- Reduced motion: freeze to final state ---- */
@media (prefers-reduced-motion: reduce) {
  .run-num { opacity: .5; transform: none; }
  .run-ch-kicker, .run-ch-sub { opacity: 1; transform: none; }
  .run-ch-title .run-wipe { clip-path: none; }
  .run-thread { transform: scaleY(1); }
  .run-scanline { display: none; }
}

/* ============================================================
   Crosshair reticle cursor + comet tail (set up by app/motion/cursor.js)
   ============================================================ */
.run-has-cursor, .run-has-cursor * { cursor: none !important; }
.run-cursor-layer {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
.run-cursor-layer.on { opacity: 1; }

/* soft coral scan glow */
.run-cursor-glow {
  position: fixed; top: 0; left: 0; width: 460px; height: 460px;
  margin: -230px 0 0 -230px; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle, rgba(20,20,20,.06), rgba(20,20,20,0) 62%);
  mix-blend-mode: multiply;
}

/* coral reticle: center dot + 4 cardinal ticks */
.run-cursor-reticle { position: fixed; top: 0; left: 0; width: 0; height: 0; will-change: transform; }
.run-cursor-reticle .rc-dot {
  position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 3px rgba(20,20,20,.35);
}
.run-cursor-reticle .rc-t { position: absolute; background: var(--accent); transition: margin .18s var(--ease-out), background .18s; }
.run-cursor-reticle .rc-tl { width: 1px; height: 6px; margin: -16px 0 0 -0.5px; }   /* top */
.run-cursor-reticle .rc-tr { width: 6px; height: 1px; margin: -0.5px 0 0 10px; }     /* right */
.run-cursor-reticle .rc-bl { width: 6px; height: 1px; margin: -0.5px 0 0 -16px; }    /* left */
.run-cursor-reticle .rc-br { width: 1px; height: 6px; margin: 10px 0 0 -0.5px; }     /* bottom */
/* magnetic lock: ticks spread out + go cyan */
.run-cursor-reticle.locked .rc-dot { background: var(--live); box-shadow: 0 0 5px rgba(90,90,87,.5); }
.run-cursor-reticle.locked .rc-t { background: var(--live); }
.run-cursor-reticle.locked .rc-tl { margin-top: -24px; }
.run-cursor-reticle.locked .rc-tr { margin-left: 18px; }
.run-cursor-reticle.locked .rc-bl { margin-left: -24px; }
.run-cursor-reticle.locked .rc-br { margin-top: 18px; }
/* press: pull in */
.run-cursor-reticle.press .rc-tl { margin-top: -11px; }
.run-cursor-reticle.press .rc-tr { margin-left: 5px; }
.run-cursor-reticle.press .rc-bl { margin-left: -11px; }
.run-cursor-reticle.press .rc-br { margin-top: 5px; }

/* ============================================================
   ORIGAMI SYSTEM + REBUILT HERO  (2026 redesign)
   Paper-folded forms, one per section; asymmetric hero with an
   unfolding headline, an assembling crane, and a data ledger.
   ============================================================ */

/* ---- rebuilt hero ---- */
.hero { position: relative; min-height: calc(100vh - 96px); overflow: hidden;
  display: flex; flex-direction: column; padding: 0; }
.hero .hero-glow { display: none; }
.hero-zone { flex: 1; display: grid; align-items: center; padding: 30px 0 44px; }
/* .wrap has margin:0 auto — as a grid item that would shrink it to content, so force full width */
.hero-zone > .wrap { width: 100%; }
.hero-grid { display: grid; grid-template-columns: minmax(0,56%) minmax(0,44%); align-items: center; width: 100%; }

h1.fold { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.04em;
  font-size: clamp(40px, 5.2vw, 78px); line-height: 0.98; margin: 0 0 22px; color: var(--fg-1); perspective: 900px; }
h1.fold .ln { display: block; transform-origin: 50% 0%; will-change: transform, opacity;
  animation: heroUnfold 1s cubic-bezier(.2,.75,.25,1) both; }
h1.fold .ln:nth-child(1) { animation-delay: .15s; }
h1.fold .ln:nth-child(2) { animation-delay: .32s; }
h1.fold .ln:nth-child(3) { animation-delay: .49s; }
h1.fold .ln:nth-child(4) { animation-delay: .66s; }
h1.fold .it { font-style: italic; font-weight: 600; }
@keyframes heroUnfold {
  0%   { transform: rotateX(-85deg) translateY(10px); opacity: 0; }
  55%  { opacity: 1; }
  78%  { transform: rotateX(14deg); }
  100% { transform: rotateX(0deg) translateY(0); opacity: 1; }
}
.crease-rule { width: 0; height: 1px; background: var(--fg-1); opacity: .4; margin: 0 0 20px;
  animation: heroRule 1s cubic-bezier(.2,.8,.2,1) 1.15s forwards; }
@keyframes heroRule { to { width: 210px; } }

.hero .lede2 { font-size: 16.5px; line-height: 1.55; color: var(--fg-2); max-width: 470px; margin: 0 0 26px;
  opacity: 0; animation: heroRise .9s cubic-bezier(.2,.8,.2,1) 1.3s forwards; }
.hero-ctas2 { display: flex; align-items: center; gap: 20px;
  opacity: 0; animation: heroRise .9s cubic-bezier(.2,.8,.2,1) 1.5s forwards; }
.hero-ctas2 .btn-primary { padding: 11px 20px; font-size: 13.5px; }
.brief-link { font-family: var(--font-mono); font-size: 13px; color: var(--fg-2);
  text-decoration: none; border-bottom: 1px solid var(--ink-500); padding-bottom: 2px; transition: color .25s, border-color .25s; }
.brief-link:hover { color: var(--fg-1); border-color: var(--fg-1); }
@keyframes heroRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* crane */
.crane-zone { position: relative; height: 440px; }
.crane-float { position: absolute; inset: 0; animation: oriFloat 7s ease-in-out 2.6s infinite; }
.crane-svg { width: 116%; margin-left: -8%; }
.crane-svg polygon, .crane-svg line { transform-box: fill-box; transform-origin: 50% 100%;
  animation: oriFacet .8s cubic-bezier(.2,.75,.25,1) both; }
.crane-svg polygon:nth-of-type(1) { animation-delay: .55s; }
.crane-svg polygon:nth-of-type(2) { animation-delay: .70s; }
.crane-svg polygon:nth-of-type(3) { animation-delay: .85s; }
.crane-svg polygon:nth-of-type(4) { animation-delay: 1.00s; }
.crane-svg polygon:nth-of-type(5) { animation-delay: 1.12s; }
.crane-svg polygon:nth-of-type(6) { animation-delay: 1.24s; }
.crane-svg polygon:nth-of-type(7) { animation-delay: 1.36s; }
.crane-svg polygon:nth-of-type(8) { animation-delay: 1.48s; }
.crane-svg polygon:nth-of-type(9) { animation-delay: 1.60s; }
.crane-svg line { animation-delay: 1.85s; animation-duration: .5s; }
@keyframes oriFacet { from { opacity: 0; transform: rotateX(-60deg) translateY(12px); } to { opacity: 1; transform: none; } }
.crane-shadow { position: absolute; left: 16%; bottom: 18px; width: 56%; height: 24px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(20,20,20,.10), rgba(20,20,20,0) 70%);
  animation: oriShadow 7s ease-in-out 2.6s infinite; }
@keyframes oriFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes oriShadow { 0%,100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.92); opacity: .55; } }
.hero-creases { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.crease-label { position: absolute; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  color: var(--fg-4); opacity: 0; animation: heroRise 1s ease forwards; }
.crease-label.cl1 { top: 24%; right: 29%; transform: rotate(33deg); animation-delay: 2.6s; }
.crease-label.cl2 { top: 58%; right: 5%; transform: rotate(-24deg); animation-delay: 2.8s; }

/* data ledger */
.hero-ledger { border-top: 1px solid var(--border-1); }
.hero-ledger-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.hled-cell { padding: 18px 0 22px 32px; border-left: 1px solid var(--border-1);
  opacity: 0; animation: heroRise .8s cubic-bezier(.2,.8,.2,1) forwards; }
.hled-cell:first-child { border-left: 0; padding-left: 0; }
.hled-cell:nth-child(1) { animation-delay: 1.7s; }
.hled-cell:nth-child(2) { animation-delay: 1.85s; }
.hled-cell:nth-child(3) { animation-delay: 2.0s; }
.hled-cell:nth-child(4) { animation-delay: 2.15s; }
.hled-cell .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 9px; }
.hled-cell .v { font-family: var(--font-display); font-weight: 600; font-size: 32px; letter-spacing: -0.02em; color: var(--fg-1); line-height: 1; }
.hled-cell .v .unit { font-size: 22px; }
.hled-cell .s { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); margin-top: 7px; }

/* single access button: nav CTA sleeps until the hero CTA scrolls away */
.nav-cta { opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out); }
.nav-cta.show { opacity: 1; transform: none; pointer-events: auto; }

/* ---- contrast beat band ---- */
.contrast-beat { border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); background: var(--ink-900); }
.contrast-beat .wrap { padding-top: 30px; padding-bottom: 30px; }
.contrast-beat p { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(17px, 2vw, 23px);
  line-height: 1.45; letter-spacing: -0.01em; color: var(--fg-2); max-width: 1000px; }
.contrast-beat b { color: var(--fg-1); font-weight: 600; }

/* ---- origami in chapter interstitials (driven by --p via onScrub) ---- */
.ori { position: absolute; z-index: 1; pointer-events: none;
  opacity: clamp(0, (var(--p) - .06) * 2.4, 1);
  transform: translateY(calc((1 - clamp(0, (var(--p) - .06) * 2.4, 1)) * 26px)); }
.ori-inner { animation: oriFloat 7s ease-in-out infinite; }
.ori-shadow { position: absolute; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(20,20,20,.09), rgba(20,20,20,0) 70%); }

.ori-hyp     { left: 3%;   top: 9%;  width: 560px; }
.ori-hyp .ori-inner { animation-delay: .8s; }
.ori-report  { right: 2%;  top: 11%; width: 580px; }
.ori-report .ori-inner { animation-delay: 1.4s; }

/* 01 intake: the letter flies in, the flap folds open, the brief rises out.
   Stages keyed to --p: arrive .05–.38 · open .45–.65 · rise .62–.87 */
.ori.ori-intake { right: 3%; top: 10%; width: 560px;
  --in: clamp(0, (var(--p) - .05) * 3, 1);
  opacity: var(--in);
  transform: translate(calc((1 - var(--in)) * 30vw), calc((1 - var(--in)) * -18vh))
             rotate(calc((1 - var(--in)) * 10deg)); }
.ori-intake .ori-inner { animation-delay: .2s; }
.ori-intake .env-flap, .ori-intake .env-sheet { transform-box: fill-box; }
/* flap drawn OPEN (pointing up); scaleY -1→1 around the fold line reads as unfolding */
.ori-intake .env-flap { transform-origin: 50% 100%;
  transform: scaleY(calc(-1 + clamp(0, (var(--p) - .45) * 5, 1) * 2)); }
/* the brief sheet rises out of the envelope once the flap is open
   (starts fully below the fold-line clip, +130px) */
.ori-intake .env-sheet {
  transform: translateY(calc((1 - clamp(0, (var(--p) - .62) * 4, 1)) * 130px)); }

/* 02 hypothesis: a folded cube opens into the fortune teller.
   Cube faces spread + fade .28–.55 · teller scales in .42–.72 */
.ori-hyp .cube-f { transform-box: fill-box; transform-origin: 50% 50%;
  opacity: calc(1 - clamp(0, (var(--p) - .28) * 3.7, 1)); }
.ori-hyp .cube-top { transform: translateY(calc(clamp(0, (var(--p) - .28) * 3.7, 1) * -70px)); }
.ori-hyp .cube-left { transform: translate(calc(clamp(0, (var(--p) - .28) * 3.7, 1) * -64px), calc(clamp(0, (var(--p) - .28) * 3.7, 1) * 44px)) rotate(calc(clamp(0, (var(--p) - .28) * 3.7, 1) * -9deg)); }
.ori-hyp .cube-right { transform: translate(calc(clamp(0, (var(--p) - .28) * 3.7, 1) * 64px), calc(clamp(0, (var(--p) - .28) * 3.7, 1) * 44px)) rotate(calc(clamp(0, (var(--p) - .28) * 3.7, 1) * 9deg)); }
.ori-hyp .ft { transform-box: fill-box; transform-origin: 50% 50%;
  opacity: clamp(0, (var(--p) - .42) * 3.4, 1);
  transform: scale(calc(.3 + clamp(0, (var(--p) - .42) * 3.4, 1) * .7)); }

/* 04 report: the folded map opens out to the right as you scroll (unfold .28–.70) */
.ori-report .map-open { transform-box: fill-box; transform-origin: left center;
  transform: scaleX(calc(.26 + clamp(0, (var(--p) - .28) * 2.4, 1) * .74)); }
.ori-report .map-panel { transform-box: fill-box;
  opacity: clamp(.25, (var(--p) - .2) * 2.2, 1); }

/* 03 discovery: paper boat sails left→right across the sea of signals as you scroll */
.ori-boat { left: 2%; bottom: 9%; width: 420px;
  transform: translateX(calc(var(--p) * 60vw)); }
.ori-boat .boat-rock { animation: boatRock 6.5s ease-in-out infinite; transform-origin: 50% 78%; }
@keyframes boatRock { 0%,100% { transform: rotate(-1.6deg) translateY(0); } 50% { transform: rotate(1.6deg) translateY(-6px); } }
.ori-boat .wave { stroke-dasharray: 7 9; animation: waveDrift 9s linear infinite; }
.ori-boat .wave.w2 { animation-duration: 13s; animation-direction: reverse; }
@keyframes waveDrift { to { stroke-dashoffset: -160; } }

/* delivery: the plane rides its trail as you scrub the chapter */
.ori-trail { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: clamp(0, (var(--p) - .04) * 3, 1); }
.ori-plane { position: absolute; top: 0; left: 0; width: 220px; z-index: 1; pointer-events: none;
  offset-path: path('M -40 640 C 240 700, 420 560, 560 420 S 760 220, 980 180');
  offset-rotate: auto 4deg; offset-distance: calc(clamp(0, (var(--p) - .05) * 1.25, 1) * 100%); }

/* ---- responsive / reduced-motion ---- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .crane-zone { height: 300px; order: -1; }
  .crane-svg { width: 78%; margin: 0 auto; display: block; }
  .crane-fig, .crease-label { display: none; }
  .hero-ledger-in { grid-template-columns: 1fr 1fr; }
  .hled-cell:nth-child(3), .hled-cell:nth-child(4) { border-top: 1px solid var(--border-1); }
  .hled-cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .ori-intake, .ori-hyp, .ori-report, .ori-boat { width: 200px; opacity: .5; }
  .ori-plane { width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  h1.fold .ln, .hero .lede2, .hero-ctas2, .crease-rule, .crease-label,
  .hled-cell, .crane-svg polygon, .crane-svg line { animation: none !important; opacity: 1 !important; transform: none !important; }
  .crease-rule { width: 210px; }
  .crane-float, .ori-inner, .crane-shadow, .boat-rock, .ori-boat .wave { animation: none !important; }
}

/* ---- section-body capability bullets (from the copy deck) ---- */
.cap-bullets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; margin: 4px 0 0; }
.cap-list { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.cap-bullets .cb b, .cap-list .cb b {
  display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .03em;
  font-weight: 500; color: var(--fg-1); margin-bottom: 5px;
}
.cap-bullets .cb p, .cap-list .cb p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--fg-3); }
@media (max-width: 900px) { .cap-bullets { grid-template-columns: 1fr 1fr; row-gap: 18px; } }
@media (max-width: 560px) { .cap-bullets { grid-template-columns: 1fr; } }