:root {
    --bg: #050505;
    --bg-soft: #0b0b0b;
    --ink: #f4f4f4;
    --slate: #ababab;
    --slate-light: #8f8f8f;
    --line: rgba(255,255,255,.14);
    --line-soft: rgba(255,255,255,.09);
    --pastel-blue: #a9d7ff;
    --pastel-lilac: #cbb9ff;
    --pastel-peach: #ffc9a3;
    --teal-bright: #8ee8d8;
    --grad-pill: linear-gradient(100deg, #a9d7ff, #cbb9ff 48%, #ffc9a3 96%);
    --radius: 18px;
    --font-display: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  ::selection { background: var(--pastel-lilac); color: #000; }
  .container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
  section { padding: clamp(110px, 15vw, 210px) 0; position: relative; }
  h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: 1.04; letter-spacing: -0.02em; }
  h2 { font-size: clamp(2.2rem, 5vw, 4.3rem); letter-spacing: -0.025em; color: #fff; }

  /* ---------- Kicker: index number + thin rule + label ---------- */
  .kicker {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #c6c6c6;
    margin-bottom: 0;
  }
  .kicker::before {
    content: attr(data-index);
    order: -2;
    letter-spacing: .12em;
    color: #c6c6c6;
    flex: none;
  }
  .kicker::after {
    content: "";
    order: -1;
    width: clamp(36px, 5vw, 64px);
    height: 1px;
    background: rgba(255,255,255,.35);
    flex: none;
  }
  .kicker:not([data-index])::before { content: none; }

  /* ---------- Editorial section head: label left, statement right ---------- */
  .section-head {
    display: grid;
    grid-template-columns: minmax(180px, .85fr) 2.15fr;
    column-gap: clamp(32px, 5vw, 80px);
    row-gap: 28px;
    align-items: start;
    margin-bottom: clamp(56px, 7vw, 104px);
  }
  .section-head .kicker { grid-column: 1; padding-top: 12px; }
  .section-head h2 { grid-column: 2; max-width: 21ch; }
  .section-intro {
    grid-column: 2;
    margin-top: 10px;
    color: #cdcdcd;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    line-height: 1.45;
    font-weight: 400;
    max-width: 46ch;
  }
  .legal-note { grid-column: 2; margin-top: 14px; font-size: .85rem; color: var(--slate); max-width: 64ch; }
  section[id] { scroll-margin-top: 80px; }
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  /* ---------- Focus visibility ---------- */
  .btn:focus-visible,
  .link:focus-visible,
  .brand:focus-visible,
  .nav-links a:focus-visible,
  .footer-links a:focus-visible,
  .cta-final a:focus-visible,
  .hero-note a:focus-visible {
    outline: 2px solid var(--pastel-lilac);
    outline-offset: 3px;
    border-radius: 8px;
  }

  /* ---------- Buttons: pills, uppercase, arrow ---------- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 16px 30px;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    white-space: nowrap;
  }
  .btn::after {
    content: "\2192";
    letter-spacing: 0;
    font-weight: 400;
    transition: transform .18s ease;
  }
  .btn:hover::after { transform: translateX(4px); }
  .btn-primary { background: #fff; color: #000; }
  .btn-primary:hover { background: var(--grad-pill); color: #000; }
  .btn-ghost,
  .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
  .btn-ghost:hover,
  .btn-outline-light:hover { border-color: #fff; }
  .btn-light { background: #fff; color: #000; }
  .btn-light:hover { background: var(--grad-pill); color: #000; }

  /* ---------- Nav ---------- */
  header.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(5,5,5,.78);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em; }
  .brand svg { flex: none; }
  .nav-links { display: flex; align-items: center; gap: 30px; }
  .nav-links a.link { color: #c9c9c9; text-decoration: none; font-size: .85rem; font-weight: 500; transition: color .15s; position: relative; }
  .nav-links a.link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 1px;
    background: var(--grad-pill);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
  }
  .nav-links a.link:hover::after { transform: scaleX(1); }
  .nav-links a.link:hover { color: #fff; }
  .nav-links a.link[aria-current="page"] { color: #fff; }
  .nav-links a.link[aria-current="page"]::after { transform: scaleX(1); }
  .nav .btn { padding: 11px 22px; font-size: .72rem; }
  .nav .btn-primary { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
  .nav .btn-primary:hover { background: #fff; color: #000; border-color: #fff; }

  /* ---------- Decorative geometry ---------- */
  .deco { position: absolute; pointer-events: none; z-index: 0; }
  .deco-star { top: clamp(90px, 11vw, 150px); right: 5vw; width: clamp(70px, 9vw, 128px); height: auto; animation: slow-spin 48s linear infinite; }
  .deco-chevrons { bottom: 150px; right: 7vw; width: clamp(60px, 7vw, 104px); height: auto; }
  .deco-star-2 { top: clamp(60px, 8vw, 110px); left: 6vw; width: clamp(54px, 6vw, 88px); height: auto; animation: slow-spin 60s linear infinite reverse; }
  @keyframes slow-spin { to { transform: rotate(360deg); } }

  /* ---------- Hero ---------- */
  .hero {
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(1000px 600px at 80% -10%, rgba(120,110,255,.13), transparent 60%),
      radial-gradient(820px 520px at 4% 42%, rgba(80,140,255,.09), transparent 60%),
      var(--bg);
    color: var(--ink);
    /* Top gap between the sticky nav and the "Coming Soon" pill. Cut ~31-36% from
       clamp(110px, 13vw, 180px) on 2026-09-21 (founder: too much dead space above the
       hero). Home only — interior pages use .hero-lite below and are unchanged. */
    padding: clamp(76px, 8.5vw, 116px) 0 0;
    overflow: hidden;
  }
  .hero .container { position: relative; z-index: 1; }
  .hero-grid { display: block; }
  .hero .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #c9c9c9;
    background: transparent;
    border: 1px solid rgba(255,255,255,.22);
    padding: 8px 16px;
    border-radius: 999px;
    margin-bottom: clamp(28px, 4vw, 48px);
  }
  .hero h1 {
    font-size: clamp(2.7rem, 8.6vw, 8.6rem);
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: .98;
  }
  .hero h1 .accent {
    display: inline-block;
    background: var(--grad-pill);
    background-size: 200% 100%;
    color: #000;
    border-radius: 999px;
    padding: 0 .34em .05em;
    line-height: 1.06;
    animation: grad-shift 9s ease-in-out infinite;
  }
  @keyframes grad-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  .hero p.lede {
    margin: clamp(40px, 5vw, 72px) 0 0 auto;
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    line-height: 1.5;
    color: #cdcdcd;
    max-width: 620px;
  }
  /* The founder's core story line, directly under the hero headline. */
  .hero p.hero-story {
    margin-top: clamp(20px, 2.6vw, 34px);
    font-size: clamp(1.25rem, 2.3vw, 2rem);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #fff;
    max-width: 36ch;
  }
  .hero-ctas { margin: 36px 0 0 auto; max-width: 620px; display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-note { margin: 20px 0 0 auto; max-width: 620px; font-size: .84rem; color: var(--slate-light); }

  /* Page hero-lite for interior pages */
  .hero-lite {
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(1000px 600px at 80% -10%, rgba(120,110,255,.13), transparent 60%),
      radial-gradient(820px 520px at 4% 42%, rgba(80,140,255,.09), transparent 60%),
      var(--bg);
    color: var(--ink);
    padding: clamp(96px, 12vw, 150px) 0 clamp(40px, 6vw, 72px);
    overflow: hidden;
  }
  .hero-lite .container { position: relative; z-index: 1; }
  .hero-lite .kicker { margin-bottom: clamp(24px, 3vw, 36px); }
  .hero-lite h1 {
    font-size: clamp(2.4rem, 6vw, 5rem);
    font-weight: 500;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1;
    max-width: 20ch;
  }
  .hero-lite p.lede {
    margin-top: clamp(24px, 3vw, 36px);
    font-size: clamp(1.1rem, 1.7vw, 1.4rem);
    line-height: 1.5;
    color: #cdcdcd;
    max-width: 46ch;
  }

  /* Scroll cue */
  .scroll-cue { display: flex; align-items: center; gap: 12px; margin-top: clamp(56px, 8vw, 100px); color: #c9c9c9; }
  .cue-circle {
    width: 46px; height: 46px;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: cue-bob 2.4s ease-in-out infinite;
  }
  .cue-text {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px;
    padding: 7px 15px;
  }
  @keyframes cue-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
  }

  /* Hero visual: evidence card, dark glass, offset right below the statement */
  .hero-visual { position: relative; margin: clamp(72px, 9vw, 130px) 0 0 auto; max-width: 640px; }
  /* The hero illustration's product-area label (founder, 2026-09-21). Same .kicker treatment the
     interior page heroes and every section head use, left-aligned above the card; it stands where the
     old .illustrative-tag institution badge used to, which was removed with the rest of that wording. */
  .hero-visual .kicker { margin-bottom: clamp(18px, 2.2vw, 28px); }
  .evidence-card {
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.14);
    color: var(--ink);
    border-radius: 20px;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,.85);
    padding: 24px 26px;
    font-size: .84rem;
    max-width: 520px;
    margin-left: auto;
  }
  .evidence-card .ec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .ec-source { display: flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
  .ec-source .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal-bright); box-shadow: 0 0 0 4px rgba(142,232,216,.15); animation: dot-ping 2.6s ease-in-out infinite; }
  @keyframes dot-ping {
    0%, 100% { box-shadow: 0 0 0 4px rgba(142,232,216,.15); }
    50% { box-shadow: 0 0 0 7px rgba(142,232,216,.08); }
  }
  .pill { font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
  .pill-change { background: rgba(255,201,163,.14); color: #ffd0ab; border: 1px solid rgba(255,201,163,.4); animation: pill-pulse 2.8s ease-in-out infinite; }
  @keyframes pill-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,201,163,.3); }
    45% { box-shadow: 0 0 0 6px rgba(255,201,163,0); }
    46% { box-shadow: 0 0 0 0 rgba(255,201,163,0); }
  }
  .pill-ok { background: rgba(142,232,216,.12); color: #9ceadb; border: 1px solid rgba(142,232,216,.35); }
  .ec-body { padding: 16px 0 4px; }
  .ec-body .ec-title { font-weight: 600; font-size: .95rem; margin-bottom: 6px; color: #fff; }
  .ec-body p { color: var(--slate); }
  .ec-cite {
    margin-top: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-left: 3px solid var(--pastel-blue);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: .78rem;
    color: #b5b5b5;
  }
  .ec-cite strong { color: #fff; }
  .ec-meta { display: flex; gap: 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); font-size: .74rem; color: #a5a5a5; flex-wrap: wrap; }
  .ec-meta span strong { color: #fff; font-weight: 600; }
  .evidence-card.back {
    position: absolute;
    top: -34px;
    right: 40px;
    transform: rotate(-2.4deg) scale(.96);
    opacity: .45;
    z-index: 0;
  }
  .evidence-card.front {
    position: relative;
    z-index: 1;
    overflow: hidden;
    box-shadow: 0 30px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(203,185,255,.1), 0 0 56px -14px rgba(169,215,255,.18);
  }
  .evidence-card.front::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -45%;
    height: 36%;
    background: linear-gradient(to bottom,
      transparent,
      rgba(169,215,255,.04) 42%,
      rgba(169,215,255,.1) 50%,
      rgba(169,215,255,.04) 58%,
      transparent);
    animation: scanline 6s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes scanline {
    0% { top: -45%; }
    62%, 100% { top: 112%; }
  }
  .review-chip {
    position: absolute;
    bottom: -22px;
    left: 4px;
    z-index: 2;
    background: rgba(20,20,20,.92);
    border: 1px solid rgba(255,255,255,.16);
    color: #e2e2e2;
    border-radius: 999px;
    padding: 12px 20px;
    font-size: .8rem;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 16px 40px -12px rgba(0,0,0,.7);
  }
  .review-chip svg { flex: none; }

  /* ---------- Source ticker ---------- */
  .ticker {
    position: relative;
    z-index: 1;
    margin-top: clamp(64px, 9vw, 120px);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
  .ticker-track {
    display: flex;
    align-items: center;
    width: max-content;
    padding: 16px 0;
    /* 2026-09-22: the word list grew 8 -> 11, so the half-track went 1075px -> 1499px (measured via
       CDP at 1440/1024/390). The duration is per half-track, so leaving it at 42s would have sped the
       scroll up 39% (25.6 -> 35.7 px/s). 59s holds it at 25.4 px/s, i.e. the same reading speed as
       before; only the time to come back round changes. Adjust this if the list changes length again. */
    animation: ticker-scroll 59s linear infinite;
  }
  .tick-item {
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #9d9d9d;
    padding: 0 22px;
    white-space: nowrap;
  }
  .tick-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pastel-lilac);
    flex: none;
  }
  @keyframes ticker-scroll {
    to { transform: translateX(-50%); }
  }

  /* ---------- Differentiator strip: editorial columns ---------- */
  .strip { padding: 0; background: var(--bg); }
  .strip-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .strip-item { padding: clamp(36px, 4.5vw, 60px) clamp(20px, 2.5vw, 44px); display: flex; gap: 18px; align-items: flex-start; }
  .strip-item:first-child { padding-left: 0; }
  .strip-item + .strip-item { border-left: 1px solid var(--line-soft); }
  .strip-item .ic { flex: none; margin-top: 3px; }
  .strip-item .ic svg [stroke] { stroke: var(--teal-bright); }
  .strip-item h3 { font-size: 1.05rem; font-weight: 500; color: #fff; }
  .strip-item p { font-size: .92rem; color: var(--slate); margin-top: 8px; }

  /* ---------- Pain points: numbered editorial rows ---------- */
  .pains { background: var(--bg); }
  .pain-grid { display: block; counter-reset: pain; border-bottom: 1px solid var(--line); }
  .pain-card {
    display: grid;
    grid-template-columns: 90px 1fr 1.5fr;
    column-gap: clamp(24px, 4vw, 64px);
    row-gap: 10px;
    align-items: start;
    padding: clamp(28px, 3.5vw, 44px) 0;
    border-top: 1px solid var(--line);
    transition: background .2s;
  }
  .pain-card::before {
    counter-increment: pain;
    content: counter(pain, decimal-leading-zero);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    color: #9d9d9d;
    padding-top: 8px;
  }
  .pain-card:hover { background: rgba(255,255,255,.02); }
  .pain-ic { display: none; }
  .pain-card h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 500; color: #fff; margin: 0; }
  .pain-card p { font-size: 1rem; color: var(--slate); }

  /* ---------- Lifecycle: numbered chain rows ---------- */
  .lifecycle {
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(900px 520px at 12% 0%, rgba(90,120,255,.1), transparent 60%),
      var(--bg);
    color: var(--ink);
    overflow: hidden;
  }
  .chain { display: block; border-bottom: 1px solid var(--line); }
  .chain-step {
    display: grid;
    grid-template-columns: 90px 1fr 1.5fr;
    column-gap: clamp(24px, 4vw, 64px);
    row-gap: 10px;
    align-items: start;
    padding: clamp(28px, 3.5vw, 44px) 0;
    border-top: 1px solid var(--line);
    transition: background .2s;
  }
  .chain-step:hover { background: rgba(255,255,255,.02); }
  .chain-step .num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--grad-pill);
    color: #000;
    font-weight: 600; font-size: .85rem;
    margin: 0;
  }
  .chain-step h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 500; color: #fff; }
  .chain-step p { font-size: 1rem; color: var(--slate); }
  .chain-footer {
    margin-top: 56px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px 28px;
    font-size: .95rem;
    color: #cdcdcd;
  }
  .chain-footer strong { color: #fff; }
  .chain-footer svg { flex: none; margin-top: 3px; }
  .chain-footer svg [stroke] { stroke: var(--teal-bright); }

  /* ---------- Capabilities: numbered editorial rows ---------- */
  .caps { background: var(--bg); }
  .cap-grid { display: block; counter-reset: cap; border-bottom: 1px solid var(--line); }
  .cap-card {
    display: grid;
    grid-template-columns: 90px 1fr 1.5fr;
    column-gap: clamp(24px, 4vw, 64px);
    row-gap: 10px;
    align-items: start;
    padding: clamp(28px, 3.5vw, 44px) 0;
    border-top: 1px solid var(--line);
    transition: background .2s;
  }
  .cap-card::before {
    counter-increment: cap;
    content: counter(cap, decimal-leading-zero);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    color: #9d9d9d;
    padding-top: 8px;
  }
  .cap-card:hover { background: rgba(255,255,255,.02); }
  .cap-ic { display: none; }
  .cap-card h3 { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-weight: 500; color: #fff; margin: 0; }
  .cap-card p { font-size: 1rem; color: var(--slate); }

  /* ---------- Agents ---------- */
  .agents { background: var(--bg); }
  .agents-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(48px, 6vw, 96px); align-items: start; }
  .agents-sticky { position: sticky; top: 110px; }
  .agents-sticky .kicker { margin-bottom: 28px; }
  .agents-sticky h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); }
  .agents-sticky p { color: #cdcdcd; font-size: 1.12rem; margin-top: 20px; max-width: 44ch; }
  .agent-principles { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; }
  .agent-principle { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--slate); }
  .agent-principle svg { flex: none; margin-top: 3px; }
  .agent-principle svg [stroke] { stroke: var(--teal-bright); }
  .agent-principle strong { color: #fff; font-weight: 600; }
  .agent-list { display: block; border-bottom: 1px solid var(--line); }
  .agent-item {
    padding: 22px 0;
    border-top: 1px solid var(--line);
    background: none;
    transition: background .2s;
  }
  .agent-item:hover { background: rgba(255,255,255,.02); }
  .agent-item .ag-name { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 500; font-size: 1.08rem; color: #fff; }
  .agent-item .ag-name .ag-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--grad-pill); flex: none; }
  .agent-item p { font-size: .9rem; color: var(--slate); margin-top: 6px; padding-left: 21px; }

  /* ---------- Trust: minimal bordered rows ---------- */
  .trust { background: var(--bg); }
  .trust-grid { display: block; border-bottom: 1px solid var(--line); }
  .trust-card {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    grid-auto-flow: row dense;
    column-gap: clamp(24px, 4vw, 64px);
    row-gap: 14px;
    align-items: start;
    padding: clamp(36px, 4.5vw, 60px) 0;
    border-top: 1px solid var(--line);
  }
  .trust-ic { display: none; }
  .trust-card h3 { grid-column: 1; font-size: clamp(1.25rem, 1.9vw, 1.7rem); font-weight: 500; color: #fff; margin: 0; max-width: 18ch; }
  .trust-card p { grid-column: 2; font-size: 1.02rem; color: var(--slate); }
  .trust-card ul { grid-column: 2; margin-top: 4px; list-style: none; display: flex; flex-direction: column; gap: 12px; }
  .trust-card ul li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; color: var(--slate); }
  .trust-card ul li svg { flex: none; margin-top: 5px; }
  .trust-card ul li svg [stroke] { stroke: var(--teal-bright); }
  .trust-card ul li strong { color: #fff; font-weight: 600; }
  .faq .trust-card h3 { font-size: clamp(1.15rem, 1.6vw, 1.45rem); max-width: 26ch; }

  /* ---------- Final CTA ---------- */
  .cta-final {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
      radial-gradient(820px 480px at 50% 115%, rgba(140,110,255,.15), transparent 65%),
      radial-gradient(700px 420px at 82% -10%, rgba(80,140,255,.09), transparent 60%),
      var(--bg);
    color: var(--ink);
    text-align: center;
  }
  .cta-final .container { position: relative; z-index: 1; }
  .cta-final .kicker { justify-content: center; }
  .cta-final h2 { color: #fff; max-width: 20ch; margin: 32px auto 0; font-size: clamp(2.4rem, 5.5vw, 4.6rem); }
  .cta-final p { max-width: 46ch; margin: 28px auto 0; color: #cdcdcd; font-size: clamp(1.1rem, 1.7vw, 1.35rem); }
  .cta-final .hero-ctas { justify-content: center; margin: 44px auto 0; max-width: none; }
  .cta-final .hero-note { margin: 24px auto 0; max-width: none; }
  .cta-final .hero-note a { color: var(--pastel-blue); }

  /* ---------- Footer ---------- */
  footer { background: var(--bg); color: #9d9d9d; border-top: 1px solid var(--line-soft); padding: 56px 0; font-size: .84rem; }
  .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
  .footer-brand { display: flex; align-items: center; gap: 10px; color: #ececec; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; }
  .footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
  .footer-links a { color: #9d9d9d; text-decoration: none; transition: color .15s; }
  .footer-links a:hover { color: #fff; }
  .footer-legal { width: 100%; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-soft); font-size: .78rem; color: #9d9d9d; }

  /* ---------- Scroll reveal (classes applied by JS only when motion is allowed) ---------- */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
  }
  .reveal.in-view {
    opacity: 1;
    transform: none;
  }

  /* ---------- Notify modal ---------- */
  .notify-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0,0,0,.72); backdrop-filter: blur(6px); }
  .notify-overlay[hidden] { display: none; }
  .notify-modal { position: relative; width: 100%; max-width: 460px; background: #0c0c0e; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; padding: 40px 36px 36px; color: #fff; }
  .notify-modal h3 { font-size: 1.8rem; margin: 0 0 8px; }
  .notify-modal > .notify-sub { color: rgba(255,255,255,.72); margin: 0 0 24px; font-size: .95rem; }
  .notify-form label { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); margin: 16px 0 6px; }
  .notify-form input[type="email"], .notify-form input[type="text"] { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; color: #fff; padding: 12px 14px; font-size: 1rem; font-family: inherit; }
  .notify-form input:focus-visible { outline: 2px solid #a9d7ff; outline-offset: 2px; }
  .notify-form button[type="submit"] { margin-top: 22px; width: 100%; cursor: pointer; }
  .notify-status { margin: 14px 0 0; font-size: .9rem; color: #5eead4; min-height: 1.2em; }
  .notify-status.error { color: #ffb4a3; }
  .notify-form input:disabled, .notify-form button:disabled { opacity: .55; cursor: default; }
  .notify-hint { margin: 6px 0 0; font-size: .8rem; line-height: 1.4; color: rgba(255,255,255,.55); }
  .notify-privacy { margin: 18px 0 0; font-size: .78rem; line-height: 1.45; color: rgba(255,255,255,.5); }
  .notify-privacy a { color: rgba(255,255,255,.75); text-decoration: underline; text-underline-offset: 3px; }
  .notify-form label.notify-consent { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-size: .88rem; letter-spacing: normal; text-transform: none; line-height: 1.4; color: rgba(255,255,255,.82); cursor: pointer; }
  .notify-consent input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: #a9d7ff; cursor: pointer; }
  .notify-consent a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .notify-privacy a:hover { color: #fff; }
  .notify-privacy a:focus-visible { outline: 2px solid #a9d7ff; outline-offset: 2px; border-radius: 4px; }
  .legal-page { padding: 120px 0 96px; }
  .legal-page .container { max-width: 720px; }
  .legal-page h1 { margin: 8px 0 24px; }
  .legal-page h2 { font-size: 1.15rem; margin: 36px 0 10px; }
  .legal-page p { line-height: 1.6; }
  .legal-page p a { text-decoration: underline; text-underline-offset: 3px; }
  .legal-page .legal-status { font-size: .85rem; border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 12px 16px; margin-top: 24px; }
  .legal-page .legal-draft { font-size: .9rem; line-height: 1.5; border: 1px solid #ffc9a3; background: rgba(255,201,163,.08); color: #ffe3cf; border-radius: 12px; padding: 12px 16px; margin: 0 0 20px; }
  .legal-page .legal-version, .legal-page .legal-effective { color: var(--slate); font-size: .9rem; margin: 4px 0; }
  .legal-page h3 { font-size: 1rem; margin: 26px 0 8px; }
  .legal-page ul, .legal-page ol { padding-left: 1.3em; line-height: 1.6; }
  .legal-page li { margin: 4px 0; }
  .legal-page li > p { margin: 6px 0 0; }
  .legal-page li a, .legal-page td a { text-decoration: underline; text-underline-offset: 3px; }
  .legal-page code { font-size: .85em; }
  .legal-verify { background: rgba(255,201,163,.16); color: #ffe3cf; border: 1px dashed rgba(255,201,163,.7); border-radius: 6px; padding: 1px 6px; font-size: .88em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .legal-verify strong { color: #ffc9a3; letter-spacing: .02em; }
  .legal-table { overflow-x: auto; margin: 14px 0; }
  .legal-page table { border-collapse: collapse; width: 100%; font-size: .9rem; line-height: 1.5; }
  .legal-page th, .legal-page td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
  .legal-page th { color: var(--ink); background: var(--bg-soft); }
  .notify-consent-error { margin: 10px 0 0; font-size: .85rem; color: #ffb4a3; }
  .notify-close { position: absolute; top: 14px; right: 14px; background: none; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; width: 34px; height: 34px; color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }
  .notify-close:focus-visible { outline: 2px solid #a9d7ff; outline-offset: 2px; }
  @media (prefers-reduced-motion: no-preference) { .notify-modal { animation: notifyIn .22s ease-out; } @keyframes notifyIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } }

  /* ---------- v3 preview: comparison table, capability groups, sign-up CTA ---------- */
  .trust-card .compare-table { grid-column: 2; overflow-x: auto; }
  .compare-table table { width: 100%; border-collapse: collapse; font-size: .98rem; line-height: 1.5; }
  .compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .compare-table th { color: #fff; font-weight: 500; }
  .compare-table td { color: var(--slate); }
  .compare-table td:first-child { width: 38%; }
  .compare-table td + td { color: #fff; }
  .cap-group { display: grid; grid-template-columns: 1fr 1.6fr; column-gap: clamp(24px, 4vw, 64px); align-items: baseline; padding: clamp(40px, 5vw, 64px) 0 18px; border-top: 1px solid var(--line); }
  .cap-group h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 500; color: #fff; margin: 0; }
  .cap-group p { margin: 0; font-size: 1.02rem; color: var(--slate); }
  .signup-cta .hero-ctas { grid-column: 2; margin: 6px 0 0; max-width: none; }

  /* ---------- v6 preview: nav groups, coming-soon label, launch form, screenshots ----------
     Layout only. No new colours or fonts: every value below is an existing token or an
     existing rgba already used above (the dashed border repeats rgba(255,255,255,.35)). */
  .nav-links { margin: 0 auto 0 clamp(24px, 3vw, 44px); gap: 24px; }
  .nav-actions { display: flex; align-items: center; gap: 12px; }
  .pill-soon { color: #c9c9c9; border: 1px dashed rgba(255,255,255,.35); white-space: nowrap; }
  p .pill-soon { margin-left: 6px; vertical-align: 2px; }
  .launch { max-width: 620px; margin: 36px 0 0 auto; text-align: left; }
  .launch h2, .launch h3 { font-size: clamp(1.2rem, 1.8vw, 1.5rem); color: #fff; }
  .launch-done { font-size: 1.05rem; }
  .cta-final .launch { margin: 44px auto 0; }
  .cta-final .launch p { max-width: none; margin: 14px 0 0; font-size: .9rem; }
  .cta-final .launch p.notify-privacy { font-size: .78rem; }
  .cta-final .launch p.launch-done { font-size: 1.05rem; }
  .trust-card .launch { grid-column: 2; margin: 6px 0 0; }
  .agents-sticky p a.link { color: var(--pastel-blue); }
  .hero-lite p.lede a.link { color: var(--pastel-blue); }
  .shot { margin: 0; }
  .shot figcaption { margin-top: 12px; font-size: .84rem; color: var(--slate-light); }
  .shot-narrow { max-width: 480px; }
  .trust-card .shot { grid-column: 2; margin-top: 10px; }
  .chain-step .step-body { grid-column: 3; }
  .chain-step .step-body p + p { margin-top: 10px; }
  .chain-step .shot { grid-column: 2 / -1; margin-top: 8px; }

  /* ---------- Copy beside its illustration (2026-09-22) ----------
     Founder: "put these on the same line ... the text is seprate from the screenshot", for every
     section built this way, not just home section 02. Before this, a card with an illustration put
     its prose in the same column as the figure and stacked the figure underneath, so the words and
     the picture read as two things and the card's first column was empty for its full height.
     .card-copy groups the prose (and, where there is one, the card's h3 and its CTA) into a single
     grid item in the first column; the figure stays in the column it was already in, at the width it
     already had. Alignment only: same grid, same column-gap, same type scale, no copy change and no
     new token -- the flex gaps below repeat each host's own row-gap (14px .trust-card, 10px
     .chain-step) and the sticky offset repeats .agents-sticky's 110px.
     Sticky handles the tall-figure case: home section 02's figure is 914px at 1440 against ~400 for
     its siblings, so the copy would otherwise scroll out of view long before the figure does. It
     rides down with the figure instead. A short card never engages it -- there is nothing to stick
     past -- so the rule is safe to apply to all of them. The figure is NOT capped: these are
     code-rendered UI at the site's real type sizes, so a max-height would either clip the panel or
     shrink the text below the scale. */
  .card-copy { align-self: start; display: flex; flex-direction: column; }
  .trust-card > .card-copy { grid-column: 1; gap: 14px; position: sticky; top: 110px; }
  .chain-step > .card-copy { grid-column: 2; gap: 10px; }
  /* The figure sits beside the copy, tops flush: the 10px/8px lead-in above only made sense when it
     followed the prose down the same column. */
  .trust-card > .card-copy + .shot { grid-column: 2; margin-top: 0; }
  .chain-step > .card-copy + .shot { grid-column: 3; margin-top: 0; }
  .hero-visual.hero-shot { max-width: 860px; }
  .agent-item p + p { margin-top: 8px; }

  /* ---------- Product illustrations (2026-09-17) ----------
     Code-rendered abstractions of the app's screens, in place of the PNG screenshots
     (rally.space "6 tips for engaging feature screenshots": skeleton UI for all but the
     one element the section is about, that element exaggerated, a mock cursor on the
     key action, no device frame; the floating annotation that pattern also called for
     was removed site-wide 2026-09-22). Every colour is an existing token
     or an rgba already used above; the light email card inverts --ink and --bg. */
  .shot-ui { position: relative; }
  /* 2026-09-22: the floating .ui-note annotation is gone from every illustration, so the clearance it
     needed goes with it -- the 30px top margin here (was 18px of overhang above the card plus a gap;
     .trust-card .shot / .chain-step .shot now supply the spacing again) and the 34px bottom margin on
     .shot-ui-nocap (the bottom-left placement's overhang). .shot-ui-nocap is kept as the caption-less
     marker; it no longer carries spacing. */
  .ui { position: relative; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 22px 24px 24px; font-size: .84rem; line-height: 1.45; color: var(--ink); box-shadow: 0 30px 80px -30px rgba(0,0,0,.85); }
  .ui-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .ui-head > div { min-width: 0; }
  .ui-kicker { display: inline-block; font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #9d9d9d; }
  .ui-title { margin-top: 10px; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; line-height: 1.2; color: #fff; letter-spacing: -0.01em; }
  .ui-cite { display: inline-block; margin-top: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.2rem; color: #fff; }
  .ui-cite-sm { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .76rem; color: #fff; white-space: nowrap; }
  .ui-quote { margin-top: 12px; padding: 10px 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-left: 3px solid var(--pastel-blue); border-radius: 8px; font-size: .8rem; color: #b5b5b5; }
  .ui-p { margin-top: 12px; color: var(--slate); }
  .ui-p strong { color: #fff; font-weight: 600; }
  .ui-small { margin-top: 12px; font-size: .74rem; color: var(--slate-light); }
  .ui-bar { display: block; height: 8px; border-radius: 999px; background: rgba(255,255,255,.12); margin-top: 8px; }
  .ui-bar.w1 { width: 100%; } .ui-bar.w2 { width: 82%; } .ui-bar.w3 { width: 64%; } .ui-bar.w4 { width: 48%; } .ui-bar.w5 { width: 32%; } .ui-bar.w6 { width: 20%; }
  .ui-bar.inline { display: inline-block; vertical-align: middle; margin: 0 0 0 6px; height: 6px; }
  .ui-pill { display: inline-block; font-size: .64rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); color: #c9c9c9; white-space: nowrap; }
  .ui-pill-maybe { color: #ffd0ab; border-color: rgba(255,201,163,.4); background: rgba(255,201,163,.14); }
  .ui-pill-yes { color: #9ceadb; border-color: rgba(142,232,216,.35); background: rgba(142,232,216,.12); }
  .ui-pill-lilac { color: var(--pastel-lilac); border-color: rgba(203,185,255,.4); background: rgba(203,185,255,.12); }
  .ui-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
  .ui-meter { display: inline-flex; align-items: center; gap: 8px; }
  .ui-meter i { display: inline-block; width: 52px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); position: relative; overflow: hidden; }
  .ui-meter i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 58%; border-radius: 999px; background: var(--pastel-peach); }
  .ui-meter i.m2::after { width: 40%; } .ui-meter i.m3::after { width: 70%; }
  .ui-status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
  .ui-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); color: #fff; font-size: .76rem; font-weight: 600; white-space: nowrap; }
  .ui-btn-primary { background: #fff; color: #000; border-color: #fff; }
  .ui-btn-big { padding: 13px 26px; font-size: .9rem; }
  .ui-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
  .ui-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
  .ui-foot .ui-bar { flex: 1; margin: 0 0 0 10px; }
  .ui-btnwrap { position: relative; display: inline-flex; }
  .ui-cursor { position: absolute; right: -10px; bottom: -14px; width: 22px; height: 22px; z-index: 3; pointer-events: none; }
  .ui-box { margin-top: 16px; padding: 14px 16px; border: 1px solid rgba(255,201,163,.35); background: rgba(255,201,163,.06); border-radius: 12px; }
  .ui-box > p { margin-top: 8px; color: #fff; font-size: .95rem; }
  .ui-box-blue { border-color: rgba(169,215,255,.35); background: rgba(169,215,255,.06); }
  .ui-box-blue > p { color: var(--ink); font-size: .9rem; }
  .ui-tabs { display: flex; gap: 20px; margin-top: 16px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .78rem; color: #9d9d9d; }
  .ui-tabs span, .ui-tabs b { padding-bottom: 8px; }
  .ui-tabs b { color: #fff; font-weight: 600; border-bottom: 2px solid var(--pastel-lilac); margin-bottom: -1px; }
  .ui-grid2, .ui-grid3 { display: grid; gap: 12px; margin-top: 14px; }
  .ui-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ui-field { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 12px 14px; min-width: 0; }
  .ui-field .ui-kicker { display: block; margin-bottom: 6px; }
  .ui-field strong { display: block; color: #fff; font-weight: 500; }
  .ui-field .ui-pill { margin-top: 10px; }
  .ui-field-basis { margin-top: 12px; }
  .ui-field-basis .ui-cite { margin-top: 0; }
  .ui-table { margin-top: 14px; }
  .ui-row { display: grid; grid-template-columns: 150px 96px minmax(0, 1fr) 160px; column-gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.08); color: var(--slate); }
  .ui-row-head { border-top: 0; padding-top: 0; }
  .ui-row-on { color: #fff; }
  .ui-row .ui-bar { margin-top: 0; }
  .ui-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; margin-top: 12px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
  .ui-card strong { display: block; color: #fff; font-weight: 500; font-size: .95rem; }
  .ui-card .ui-meta { display: block; margin-top: 4px; font-size: .74rem; color: var(--slate-light); }
  .ui-card .ui-p { margin-top: 8px; }
  .ui-card-on { border-color: rgba(203,185,255,.4); border-left: 3px solid var(--pastel-lilac); }
  .ui-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 16px; margin-top: 14px; }
  .ui-split-narrow { grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); }
  .ui-tree, .ui-list { list-style: none; }
  .ui-tree li, .ui-list li { padding: 8px 10px; border-radius: 8px; color: var(--slate); }
  .ui-tree li.lvl2 { margin-left: 16px; border-left: 1px solid rgba(255,255,255,.12); border-radius: 0 8px 8px 0; }
  .ui-tree li.on, .ui-list li.on { color: #fff; background: rgba(203,185,255,.1); }
  .ui-tree .ui-cite-sm { display: block; }
  .ui-tree .ui-sub { display: block; font-size: .74rem; color: var(--slate-light); }
  .ui-tree li.open > .ui-cite-sm { color: #fff; }
  .ui-tree .ui-bar { margin-top: 6px; }
  .ui-pane { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 14px 16px; min-width: 0; }
  .ui-pane .ui-title { font-size: 1rem; margin-top: 6px; }
  .ui-pane .ui-p { color: var(--ink); }
  /* Change inbox + impacted controls (2026-09-22, home section 02). Redline: the app pairs a
     strike-through with a tint, never colour alone, so <del> keeps its line and <ins> does not.
     Peach = the site's "needs a person" colour, teal = its "settled" colour; both rgba values
     are already used by the pills above, so no new colour enters the palette. */
  .ui-redline { margin-top: 12px; }
  .ui-redline .ui-legend { margin-left: 10px; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-light); }
  .ui-del { background: rgba(255,201,163,.14); color: #ffd0ab; border-radius: 3px; padding: 0 3px; text-decoration: line-through; text-decoration-thickness: 1.5px; }
  .ui-ins { background: rgba(142,232,216,.12); color: #9ceadb; border-radius: 3px; padding: 0 3px; text-decoration: none; }
  .ui-card .ui-cite-sm { display: block; margin-bottom: 4px; }
  .ui-impact { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); }
  .ui-impact > .ui-kicker { display: block; }
  .ui-impact > .ui-kicker-on { margin-top: 10px; color: var(--pastel-lilac); }
  .ui-impact .ui-pane { margin-top: 10px; }
  .ui-impact .ui-pane .ui-title, .ui .ui-impact .ui-pane p.ui-title { margin-top: 0; font-size: 1rem; }
  .ui-impact .ui-grid2 { gap: 10px; }
  .ui-pane-skeleton { opacity: .55; }
  .ui-pane-skeleton .ui-chips { margin-top: 10px; }
  .ui-pane-skeleton .ui-bar { flex: 1; margin-top: 0; }
  .ui-light { background: var(--ink); color: var(--bg); border-color: rgba(255,255,255,.14); }
  .ui-light .ui-p, .ui-light .ui-small { color: rgba(5,5,5,.7); }
  .ui-light .ui-p strong { color: var(--bg); }
  .ui-light .ui-quote { background: rgba(203,185,255,.2); border-color: rgba(5,5,5,.06); border-left-color: var(--pastel-lilac); color: var(--bg); font-size: .95rem; font-weight: 500; }
  .ui-light .ui-kicker { color: rgba(5,5,5,.55); }
  .ui-light .ui-field { border-color: rgba(5,5,5,.12); margin-top: 8px; }
  .ui-light .ui-cite-sm { color: var(--bg); }
  .ui-light .ui-bar { background: rgba(5,5,5,.1); }
  .ui-light .ui-btn { background: var(--bg); color: #fff; border-color: var(--bg); }
  .ui-light .ui-pill-maybe { color: var(--bg); background: rgba(255,201,163,.5); border-color: rgba(255,201,163,.9); }
  .hero-shot .ui { box-shadow: 0 30px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(203,185,255,.1), 0 0 56px -14px rgba(169,215,255,.18); }
  /* The host containers (.trust-card, .chain-step) style every descendant p/ul/li: grid-column, 1rem+
     text, flex lists. Neutralise those inside an illustration, then restate the sizes that matter. */
  .ui p, .ui ul, .ui li { grid-column: auto; margin: 0; font-size: .84rem; color: var(--slate); max-width: none; }
  .ui ul { display: block; gap: 0; }
  .ui li { display: block; gap: 0; }
  .ui li.on { color: #fff; }
  .ui p.ui-p { margin-top: 12px; }
  .ui p.ui-title { margin-top: 10px; font-size: 1.15rem; color: #fff; }
  .ui .ui-head p.ui-title { margin-top: 4px; }
  .ui .ui-pane p.ui-title { font-size: 1rem; margin-top: 6px; }
  .ui .ui-pane p.ui-p { color: var(--ink); }
  .ui p.ui-quote { margin-top: 12px; font-size: .8rem; color: #b5b5b5; }
  .ui p.ui-small { margin-top: 12px; font-size: .74rem; color: var(--slate-light); }
  .ui .ui-box > p { margin-top: 8px; font-size: .95rem; color: #fff; }
  .ui .ui-box-blue > p { font-size: .9rem; color: var(--ink); }
  .ui .ui-card p.ui-p { margin-top: 8px; }
  .ui.ui-light p { color: rgba(5,5,5,.7); }
  .ui.ui-light p.ui-quote { color: var(--bg); font-size: .95rem; font-weight: 500; }
  .ui.ui-light p strong { color: var(--bg); }
  .ui-row { grid-template-columns: max-content 96px minmax(0, 1fr) max-content; }
  @media (max-width: 1100px) {
    .nav-links a.link { display: none; }
  }
  @media (max-width: 960px) {
    .hero .launch { margin-left: 0; }
    .trust-card .launch, .trust-card .shot { grid-column: 1; }
    .chain-step .step-body, .chain-step .shot { grid-column: 2; }
    /* Narrow: back to one text column, so the copy stacks above its figure again and nothing sticks.
       These restate the two rules above at the specificity of the side-by-side ones they undo. */
    .trust-card > .card-copy, .trust-card > .card-copy + .shot { grid-column: 1; }
    .trust-card > .card-copy { position: static; }
    .trust-card > .card-copy + .shot { margin-top: 10px; }
    .chain-step > .card-copy, .chain-step > .card-copy + .shot { grid-column: 2; }
    .chain-step > .card-copy + .shot { margin-top: 8px; }
  }
  @media (max-width: 640px) {
    .nav-actions .pill-soon { display: none; }
    .chain-step .step-body, .chain-step .shot { grid-column: 1; }
    .chain-step > .card-copy, .chain-step > .card-copy + .shot { grid-column: 1; }
    .ui { padding: 18px 16px 20px; }
    .ui-grid2, .ui-grid3, .ui-split, .ui-split-narrow { grid-template-columns: 1fr; }
    .ui-row { grid-template-columns: 1fr 1fr; row-gap: 8px; }
    .ui-row-head { display: none; }
    .ui-cursor { display: none; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 960px) {
    .section-head { grid-template-columns: 1fr; row-gap: 20px; }
    .section-head .kicker { padding-top: 0; }
    .section-head h2, .section-intro, .legal-note { grid-column: 1; }
    .nav-links { gap: 18px; }
    .hero p.lede, .hero .hero-ctas, .hero .hero-note { margin-left: 0; }
    .hero-visual { margin-left: 0; max-width: 560px; }
    .evidence-card { margin-left: 0; }
    .pain-card, .cap-card, .chain-step { grid-template-columns: 56px 1fr; }
    .pain-card p, .cap-card p, .chain-step p { grid-column: 2; }
    .trust-card { grid-template-columns: 1fr; }
    .trust-card h3, .trust-card p, .trust-card ul { grid-column: 1; max-width: none; }
    .trust-card .compare-table, .signup-cta .hero-ctas { grid-column: 1; }
    .cap-group { grid-template-columns: 1fr; row-gap: 10px; }
    .agents-layout { grid-template-columns: 1fr; gap: 56px; }
    .agents-sticky { position: static; }
    .strip-inner { grid-template-columns: 1fr; }
    .strip-item { padding-left: 0; padding-right: 0; }
    .strip-item + .strip-item { border-left: none; border-top: 1px solid var(--line-soft); }
    .deco { display: none; }
  }
  @media (max-width: 880px) {
    .nav-links a.link { display: none; }
  }
  @media (max-width: 640px) {
    .pain-card, .cap-card, .chain-step { grid-template-columns: 1fr; row-gap: 8px; }
    .pain-card p, .cap-card p, .chain-step p { grid-column: 1; }
    .pain-card::before, .cap-card::before { padding-top: 0; }
    .evidence-card.back { display: none; }
    .review-chip { position: static; margin-top: 16px; display: inline-flex; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
    .btn, .cap-card, .chain-step, .agent-item, .pain-card, .trust-card, .nav-links a.link, .footer-links a { transition: none; }
    .btn:hover::after { transform: none; }
    .hero h1 .accent { animation: none; }
    .deco-star, .deco-star-2 { animation: none; }
    .cue-circle { animation: none; }
    .ticker-track { animation: none; }
    .evidence-card.front::after { animation: none; display: none; }
    .ec-source .dot, .pill-change { animation: none; }
    .reveal { opacity: 1; transform: none; transition: none; }
  }