@layer reset, tokens, base, layout, components, sections, responsive;

@layer tokens {
  :root {
    color-scheme: light;

    /* Governance:
       1. Layout, spacing, radii, and line-height values resolve to a 4px baseline.
       2. Hairlines are the only allowed 1px layout values.
       3. Components expose local contracts through --component-* tokens.
       4. Page sections consume semantic tokens, never raw primitive color values. */

    --ds-baseline: 4px;
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;
    --space-14: 56px;
    --space-15: 60px;
    --space-16: 64px;
    --space-17: 68px;
    --space-18: 72px;
    --space-20: 80px;
    --space-24: 96px;
    --space-30: 120px;
    --space-33: 132px;
    --space-40: 160px;
    --space-58: 232px;
    --space-64: 256px;
    --space-70: 280px;
    --space-90: 360px;

    --size-content-max: 1200px;
    --size-copy-hero: 1184px;
    --size-form-max: 596px;
    --size-product-window: 864px;
    --size-secondary-product: 760px;

    --radius-none: 0;
    --radius-xs: var(--space-1);
    --radius-sm: var(--space-2);
    --radius-md: var(--space-3);
    --radius-lg: var(--space-4);
    --radius-pill: calc(var(--space-1) * 250);

    --primitive-black: #111111;
    --primitive-gray-700: #656b63;
    --primitive-gray-500: #9a9d96;
    --primitive-gray-300: #d4d1c6;
    --primitive-gray-200: #e7e5de;
    --primitive-gray-100: #f7f7f3;
    --primitive-white: #ffffff;
    --primitive-lime-500: #d6ff38;
    --primitive-lime-600: #c8f22c;
    --primitive-green-900: #173f2a;
    --primitive-media-sage: #63796e;
    --primitive-media-mist: #d8e2dc;

    --color-page: var(--primitive-white);
    --color-canvas: var(--primitive-white);
    --color-surface: var(--primitive-white);
    --color-surface-recessed: var(--primitive-gray-100);
    --color-text-primary: var(--primitive-black);
    --color-text-secondary: var(--primitive-gray-700);
    --color-text-muted: var(--primitive-gray-500);
    --color-border: var(--primitive-gray-200);
    --color-border-strong: var(--primitive-gray-300);
    --color-action: var(--primitive-lime-500);
    --color-action-hover: var(--primitive-lime-600);
    --color-focus: var(--primitive-green-900);
    --color-overlay: rgba(17, 17, 17, 0.18);
    --color-nav-backdrop: rgba(255, 255, 255, 0.92);
    --color-chip-bg: rgba(17, 17, 17, 0.06);
    --color-grid-dot: rgba(17, 17, 17, 0.16);
    --color-schematic-line: rgba(17, 17, 17, 0.08);
    --color-skeleton-soft: rgba(17, 17, 17, 0.035);
    --color-skeleton-strong: var(--primitive-black);
    --color-media-text: rgba(255, 255, 255, 0.78);

    --font-sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --text-11: 11px;
    --text-13: 13px;
    --text-14: 14px;
    --text-15: 15px;
    --text-16: 16px;
    --text-22: 22px;
    --text-36: 36px;
    --text-44: 44px;
    --text-56: 56px;
    --text-64: 64px;

    --line-compact: var(--space-4);
    --line-note: var(--space-5);
    --line-body: var(--space-6);
    --line-card-title: var(--space-7);
    --line-display-sm: var(--space-10);
    --line-display-md: var(--space-12);
    --line-display-lg: var(--space-15);
    --line-display-xl: var(--space-17);

    --type-body-size: var(--text-15);
    --type-body-line: var(--line-body);
    --type-note-size: var(--text-13);
    --type-note-line: var(--line-note);
    --type-eyebrow-size: var(--text-11);
    --type-eyebrow-line: var(--line-compact);
    --type-nav-size: var(--text-14);
    --type-control-size: var(--text-15);
    --type-brand-size: var(--text-22);
    --type-brand-line: var(--line-body);
    --type-lede-size: var(--text-16);
    --type-lede-line: var(--line-body);
    --type-hero-size: var(--text-44);
    --type-hero-line: var(--line-display-md);
    --type-section-size: var(--text-36);
    --type-section-line: var(--line-display-sm);

    --elevation-soft: rgba(17, 17, 17, 0.08) 0 var(--space-6) var(--space-20) calc(var(--space-8) * -1);
    --elevation-control: rgba(17, 17, 17, 0.08) 0 var(--space-4) var(--space-12) calc(var(--space-8) * -1);
    --elevation-pressed: inset 0 var(--space-1) var(--space-2) rgba(17, 17, 17, 0.12);

    --layout-gutter: var(--space-4);
    --layout-section-block: var(--space-18);
    --layout-nav-height: var(--space-16);

    --component-button-height: var(--space-11);
    --component-button-padding-inline: var(--space-5);
    --component-button-radius: var(--radius-md);
    --component-button-bg: var(--color-action);
    --component-button-bg-hover: var(--color-action-hover);
    --component-button-fg: var(--color-text-primary);

    --component-card-padding: var(--space-6);
    --component-card-radius: var(--radius-lg);
    --component-card-bg: var(--color-surface);
    --component-card-border: var(--color-border);

    --component-form-height: var(--space-12);
    --component-form-gap: var(--space-2);
    --component-form-inset: var(--space-1);
    --component-form-radius: var(--radius-md);

    --component-product-stage-height: var(--space-90);
    --component-product-window-height: var(--space-58);
    --component-product-bar-height: var(--space-10);
    --component-product-side-height: var(--space-33);
    --component-product-row: var(--space-5);

    --section-hero-top: var(--space-18);
    --section-hero-gap-eyebrow-title: var(--space-6);
    --section-hero-gap-title-lede: var(--space-3);
    --section-hero-gap-lede-form: var(--space-6);
    --section-hero-gap-form-note: var(--space-2);
    --section-hero-gap-product: var(--space-10);
  }
}

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

  html,
  body {
    min-height: 100%;
    margin: 0;
  }

  body,
  h1,
  h2,
  h3,
  p {
    margin: 0;
  }

  button,
  input {
    font: inherit;
  }
}

@layer base {
  body {
    background: var(--color-page);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-feature-settings: "kern", "liga", "tnum";
    font-kerning: normal;
    font-optical-sizing: auto;
    font-size: var(--type-body-size);
    font-synthesis-weight: none;
    font-variant-numeric: tabular-nums;
    line-height: var(--type-body-line);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  :focus-visible {
    outline: 1px solid var(--color-focus);
    outline-offset: var(--space-1);
  }

  ::selection {
    background: var(--color-action);
    color: var(--color-text-primary);
  }
}

@layer layout {
  .site-shell {
    overflow: hidden;
  }

  .section {
    max-width: var(--size-content-max);
    margin: var(--space-0) auto;
    padding: var(--layout-section-block) var(--layout-gutter);
  }

  .u-stack {
    display: grid;
    gap: var(--space-4);
  }

  .u-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
  }
}

@layer components {
  .nav {
    position: sticky;
    top: var(--space-0);
    z-index: 20;
    background: var(--color-nav-backdrop);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(var(--space-4));
  }

  .nav-inner {
    max-width: var(--size-content-max);
    min-height: var(--layout-nav-height);
    margin: var(--space-0) auto;
    padding: var(--space-0) var(--layout-gutter);
    display: flex;
    align-items: center;
    gap: var(--space-6);
  }

  .brand {
    font-size: var(--type-brand-size);
    line-height: var(--type-brand-line);
    font-weight: var(--font-weight-bold);
  }

  .nav-links,
  .nav-actions {
    display: none;
    align-items: center;
    gap: var(--space-6);
    color: var(--color-text-primary);
    font-size: var(--type-nav-size);
    line-height: var(--line-body);
  }

  .nav-actions {
    margin-left: auto;
  }

  .button {
    min-height: var(--component-button-height);
    padding: var(--space-0) var(--component-button-padding-inline);
    border: 0;
    border-radius: var(--component-button-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--component-button-bg);
    color: var(--component-button-fg);
    font-size: var(--type-control-size);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-body);
    cursor: pointer;
  }

  .button:hover {
    background: var(--component-button-bg-hover);
  }

  .button:active {
    box-shadow: var(--elevation-pressed);
  }

  .button.secondary {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
  }

  .button:disabled,
  .button[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.56;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--type-eyebrow-size);
    line-height: var(--type-eyebrow-line);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
  }

  .eyebrow strong {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-xs);
    background: var(--color-chip-bg);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
  }

  .hero-pillars {
    margin: var(--space-5) var(--space-0) var(--space-0);
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--type-nav-size);
    color: var(--color-text-secondary);
  }

  .hero-pillars li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }

  .hero-pillars li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--primitive-lime-500);
    box-shadow: 0 0 0 3px rgba(214, 255, 56, 0.22);
  }

  .audit-form {
    width: min(100%, var(--size-form-max));
    margin: var(--section-hero-gap-lede-form) var(--space-0) var(--space-0);
    padding: var(--component-form-inset);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--component-form-radius);
    background: var(--color-surface);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--component-form-gap);
    box-shadow: var(--elevation-control);
  }

  .audit-field {
    min-height: var(--component-form-height);
    width: 100%;
    padding: var(--space-0) var(--space-4);
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    font-size: var(--type-control-size);
    line-height: var(--line-body);
  }

  .audit-field::placeholder {
    color: var(--color-text-secondary);
    opacity: 1;
  }

  .audit-field:focus {
    outline: 0;
  }

  .audit-form:focus-within {
    border-color: var(--color-focus);
    box-shadow:
      var(--elevation-control),
      0 0 0 var(--space-1) var(--color-action);
  }

  .form-note {
    max-width: 58ch;
    margin: var(--section-hero-gap-form-note) var(--space-0) var(--space-0);
    color: var(--color-text-secondary);
    font-size: var(--type-note-size);
    line-height: var(--type-note-line);
  }

  .product-stage {
    margin: var(--section-hero-gap-product) auto var(--space-0);
    min-height: var(--component-product-stage-height);
    width: min(100%, var(--size-content-max));
    border: 1px solid var(--color-border);
    border-radius: var(--component-card-radius);
    background: transparent;
    overflow: hidden;
    padding: var(--space-0);
  }

  .product-window {
    min-height: var(--component-product-window-height);
    margin: var(--space-0) auto;
    width: min(86%, var(--size-product-window));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--elevation-soft);
    overflow: hidden;
  }

  .product-bar {
    min-height: var(--component-product-bar-height);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-0) var(--space-4);
  }

  .dot {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
    background: var(--color-border-strong);
  }

  .product-body {
    display: grid;
    grid-template-columns: 0.78fr 1.22fr;
    gap: 1px;
    background: var(--color-border);
  }

  .product-side,
  .product-main {
    min-height: var(--component-product-side-height);
    background: var(--color-surface);
    padding: var(--space-4);
  }

  .product-side,
  .product-main {
    display: grid;
    gap: var(--space-2);
    align-content: start;
  }

  .side-row,
  .main-row {
    min-height: var(--component-product-row);
    border-radius: var(--radius-xs);
    background: var(--color-surface-recessed);
  }

  .side-row:nth-child(1) {
    width: 78%;
    background: var(--color-skeleton-strong);
  }

  .side-row:nth-child(2) { width: 62%; }
  .side-row:nth-child(3) { width: 86%; }
  .side-row:nth-child(4) { width: 54%; }

  .main-row {
    min-height: var(--space-8);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .demo-window {
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    width: min(96%, 1120px);
  }

  .demo-cursor {
    position: absolute;
    top: 8%;
    left: 50%;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(0 2px 4px rgba(17, 17, 17, 0.22));
    animation: demo-cursor-move 20s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  }

  .demo-cursor::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-action);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    animation: demo-cursor-tap 20s ease-out infinite;
  }

  /* Cursor stops (4 sidebar clicks across the loop):
       0-6    inbox-detail content
      12-14   → click Inbox sidebar (drops EA back to the list)
      22-30   drifts in Inbox list (hovers fresh row)
      31-32   → click Solutions sidebar
      40-48   drifts across Solutions cards
      49-50   → click Primitives sidebar
      57-65   drifts in Modules canvas
      66-67   → click Runs sidebar
      75-92   parks in live Detail (progress + output land here)
       100    back to start of inbox-detail */
  @keyframes demo-cursor-move {
    0%, 6%    { top: 55%; left: 40%; }
    12%, 14%  { top: 17%; left: 10%; }
    22%, 30%  { top: 38%; left: 40%; }
    31%, 32%  { top: 25%; left: 10%; }
    40%, 48%  { top: 50%; left: 40%; }
    49%, 50%  { top: 60%; left: 10%; }
    57%, 65%  { top: 50%; left: 35%; }
    66%, 67%  { top: 40%; left: 10%; }
    75%, 92%  { top: 60%; left: 30%; }
    100%      { top: 55%; left: 40%; }
  }

  @keyframes demo-cursor-tap {
    0%, 13%, 18%, 31%, 36%, 49%, 54%, 66%, 71%, 100% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 0;
    }
    14%, 32%, 50%, 67% {
      transform: translate(-50%, -50%) scale(0.2);
      opacity: 0.7;
    }
    17%, 35%, 53%, 70% {
      transform: translate(-50%, -50%) scale(2.6);
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .demo-cursor,
    .demo-cursor::after,
    .demo-scene,
    .demo-progress-bar,
    .demo-output,
    .demo-output-line,
    .demo-fresh-pip,
    .demo-side-count[data-ping],
    .demo-side-item[data-active-track],
    .demo-stream span {
      animation: none;
    }

    .demo-cursor { display: none; }

    .demo-scene[data-scene="inbox-detail"] { opacity: 1; }
    .demo-scene[data-scene="solutions"],
    .demo-scene[data-scene="inbox"],
    .demo-scene[data-scene="modules"],
    .demo-scene[data-scene="detail"] { opacity: 0; }

    .demo-side-item[data-active-track="inbox"] {
      background: var(--color-surface-recessed);
      color: var(--color-text-primary);
      font-weight: var(--font-weight-medium);
    }

    .demo-progress-bar[data-track="claude"] { width: 100%; }
    .demo-progress-bar[data-track="gpt"]    { width: 100%; }
    .demo-progress-bar[data-track="manus"]  { width: 100%; }

    .demo-output { opacity: 1; transform: none; }
    .demo-output-line { opacity: 1; }
  }

  .demo-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-0) var(--space-4);
    min-height: var(--component-product-bar-height);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-recessed);
  }

  .demo-bar-dots {
    display: flex;
    gap: var(--space-2);
  }

  .demo-bar-crumb {
    margin-left: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-11);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .demo-bar-crumb strong {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
  }

  .demo-bar-spacer { flex: 1; }

  .demo-bar-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-11);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    background: var(--color-chip-bg);
    border-radius: var(--radius-pill);
    padding: var(--space-1) var(--space-3);
    white-space: nowrap;
  }

  .demo-body {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 1px;
    background: var(--color-border);
  }

  .demo-side {
    background: var(--color-surface);
    padding: var(--space-4) var(--space-3);
    display: grid;
    gap: var(--space-3);
    align-content: start;
  }

  .demo-side-brand {
    font-size: var(--text-13);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
  }

  .demo-side-label {
    margin-bottom: var(--space-2);
    font-size: var(--text-11);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .demo-side-list {
    display: grid;
    gap: var(--space-1);
  }

  .demo-side-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-13);
    color: var(--color-text-secondary);
    border-radius: var(--radius-xs);
  }

  .demo-side-item[data-active="true"] {
    background: var(--color-surface-recessed);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
  }

  .demo-side-count {
    font-size: var(--text-11);
    color: var(--color-text-muted);
    background: var(--color-surface-recessed);
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
  }

  .demo-side-item[data-active="true"] .demo-side-count {
    background: var(--color-action);
    color: var(--color-text-primary);
  }

  .demo-side-foot {
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-11);
    color: var(--color-text-secondary);
  }

  .demo-pulse {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
    background: var(--primitive-green-900);
    box-shadow: 0 0 0 3px rgba(23, 63, 42, 0.16);
  }

  .demo-main {
    position: relative;
    background: var(--color-surface);
    padding: var(--space-0);
    min-height: 420px;
    overflow: hidden;
  }

  .demo-scene {
    position: absolute;
    inset: 0;
    padding: var(--space-4);
    display: grid;
    gap: var(--space-3);
    align-content: start;
    opacity: 0;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  .demo-scene[data-scene="solutions"]     { animation-name: demo-scene-solutions; }
  .demo-scene[data-scene="inbox"]         { animation-name: demo-scene-inbox; }
  .demo-scene[data-scene="inbox-detail"]  { animation-name: demo-scene-inbox-detail; }
  .demo-scene[data-scene="modules"]       { animation-name: demo-scene-modules; }
  .demo-scene[data-scene="detail"]        { animation-name: demo-scene-detail; }

  /* Loop layout (20s):
       0-13   Inbox detail (entry)
      17-30   Inbox list (after click Inbox)
      34-48   Solutions (app cards)
      52-65   Modules (Primitives)
      69-94   Live detail (Runs) — output produced at climax
      96-100  → back to Inbox detail */

  @keyframes demo-scene-inbox-detail {
    0%, 13%  { opacity: 1; }
    15%      { opacity: 0; }
    94%      { opacity: 0; }
    96%      { opacity: 1; }
    100%     { opacity: 1; }
  }

  @keyframes demo-scene-inbox {
    0%, 15%  { opacity: 0; }
    17%      { opacity: 1; }
    30%      { opacity: 1; }
    32%      { opacity: 0; }
    100%     { opacity: 0; }
  }

  @keyframes demo-scene-solutions {
    0%, 32%  { opacity: 0; }
    34%      { opacity: 1; }
    48%      { opacity: 1; }
    50%      { opacity: 0; }
    100%     { opacity: 0; }
  }

  @keyframes demo-scene-modules {
    0%, 50%  { opacity: 0; }
    52%      { opacity: 1; }
    65%      { opacity: 1; }
    67%      { opacity: 0; }
    100%     { opacity: 0; }
  }

  @keyframes demo-scene-detail {
    0%, 67%  { opacity: 0; }
    69%      { opacity: 1; }
    94%      { opacity: 1; }
    96%      { opacity: 0; }
    100%     { opacity: 0; }
  }

  .demo-row-modules {
    grid-template-columns: 1.6fr 1.2fr 1fr 0.8fr;
  }

  .demo-row-fresh {
    background: rgba(214, 255, 56, 0.08);
  }

  .demo-fresh-pip {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: var(--space-2);
    border-radius: 50%;
    background: var(--primitive-lime-500);
    box-shadow: 0 0 0 3px rgba(214, 255, 56, 0.32);
    animation: demo-fresh-pulse 1.6s ease-in-out infinite;
    vertical-align: middle;
  }

  @keyframes demo-fresh-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(214, 255, 56, 0.32); }
    50%      { box-shadow: 0 0 0 6px rgba(214, 255, 56, 0.08); }
  }

  .demo-badges {
    display: inline-flex;
    gap: var(--space-1);
  }

  .demo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-xs);
    color: var(--primitive-white);
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: 0;
  }

  .demo-badge-claude { background: #DA7756; }
  .demo-badge-gpt    { background: #10A37F; }
  .demo-badge-manus  { background: #1F2937; }

  .demo-detail-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
  }

  .demo-detail-stack {
    display: grid;
    gap: var(--space-2);
  }

  .demo-detail-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    background: var(--color-surface);
    display: grid;
    gap: var(--space-2);
  }

  .demo-detail-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-13);
  }

  .demo-detail-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
  }

  .demo-detail-state {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-11);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
  }

  .demo-detail-task {
    font-size: var(--text-11);
    color: var(--color-text-secondary);
  }

  .demo-stream {
    display: inline-flex;
    gap: 3px;
  }

  .demo-stream span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primitive-lime-500);
    animation: demo-stream-pulse 1.4s ease-in-out infinite;
  }

  .demo-stream span:nth-child(2) { animation-delay: 0.18s; }
  .demo-stream span:nth-child(3) { animation-delay: 0.36s; }

  @keyframes demo-stream-pulse {
    0%, 60%, 100% { opacity: 0.25; transform: scale(0.7); }
    30%           { opacity: 1;    transform: scale(1); }
  }

  .demo-progress {
    height: 4px;
    background: var(--color-surface-recessed);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }

  .demo-progress-bar {
    display: block;
    width: 0%;
    height: 100%;
    background: var(--primitive-lime-500);
    border-radius: var(--radius-pill);
    animation-duration: 20s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
  }

  .demo-progress-bar[data-track="claude"] { animation-name: demo-progress-claude; }
  .demo-progress-bar[data-track="gpt"]    { animation-name: demo-progress-gpt; }
  .demo-progress-bar[data-track="manus"]  { animation-name: demo-progress-manus; }

  @keyframes demo-progress-claude {
    0%, 69% { width: 0%; }
    76%     { width: 30%; }
    82%     { width: 62%; }
    88%     { width: 90%; }
    92%     { width: 100%; }
    94%     { width: 100%; }
    96%     { width: 0%; }
    100%    { width: 0%; }
  }

  @keyframes demo-progress-gpt {
    0%, 71% { width: 0%; }
    78%     { width: 22%; }
    84%     { width: 58%; }
    90%     { width: 88%; }
    94%     { width: 100%; }
    96%     { width: 0%; }
    100%    { width: 0%; }
  }

  @keyframes demo-progress-manus {
    0%, 70% { width: 0%; }
    77%     { width: 18%; }
    83%     { width: 50%; }
    89%     { width: 78%; }
    93%     { width: 94%; }
    94%     { width: 100%; }
    96%     { width: 0%; }
    100%    { width: 0%; }
  }

  .demo-output {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    background: var(--color-surface-recessed);
    display: grid;
    gap: var(--space-2);
    opacity: 0;
    transform: translateX(8px);
    animation: demo-output-in 20s ease-out infinite;
  }

  @keyframes demo-output-in {
    0%, 82% { opacity: 0; transform: translateX(8px); }
    86%     { opacity: 1; transform: translateX(0); }
    94%     { opacity: 1; transform: translateX(0); }
    96%     { opacity: 0; transform: translateX(8px); }
    100%    { opacity: 0; transform: translateX(8px); }
  }

  .demo-output-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .demo-output-title {
    font-size: var(--text-13);
    font-weight: var(--font-weight-semibold);
  }

  .demo-output-tag {
    font-size: var(--text-11);
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .demo-output-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-1);
  }

  .demo-output-line {
    font-size: var(--text-11);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    opacity: 0;
    animation-duration: 20s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
  }

  .demo-output-line::before {
    content: "✓";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--primitive-green-900);
    color: var(--primitive-white);
    font-size: 9px;
    font-weight: var(--font-weight-bold);
  }

  .demo-output-line[data-step="1"] { animation-name: demo-output-line-1; }
  .demo-output-line[data-step="2"] { animation-name: demo-output-line-2; }
  .demo-output-line[data-step="3"] { animation-name: demo-output-line-3; }

  @keyframes demo-output-line-1 {
    0%, 87% { opacity: 0; }
    88%     { opacity: 1; }
    94%     { opacity: 1; }
    96%     { opacity: 0; }
    100%    { opacity: 0; }
  }
  @keyframes demo-output-line-2 {
    0%, 89% { opacity: 0; }
    90%     { opacity: 1; }
    94%     { opacity: 1; }
    96%     { opacity: 0; }
    100%    { opacity: 0; }
  }
  @keyframes demo-output-line-3 {
    0%, 91% { opacity: 0; }
    92%     { opacity: 1; }
    94%     { opacity: 1; }
    96%     { opacity: 0; }
    100%    { opacity: 0; }
  }

  .demo-request {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-4);
    background: var(--color-surface);
    display: grid;
    gap: var(--space-3);
  }

  .demo-request-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-11);
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .demo-request-meta strong {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    text-transform: none;
    letter-spacing: 0;
  }

  .demo-request-quote {
    margin: 0;
    font-size: var(--text-13);
    line-height: var(--line-body);
    color: var(--color-text-primary);
    padding: var(--space-3);
    border-left: 3px solid var(--color-action);
    background: var(--color-surface-recessed);
    border-radius: var(--radius-xs);
  }

  .demo-request-routing {
    display: grid;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
  }

  .demo-request-routing-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-13);
  }

  .demo-request-routing-label {
    width: 84px;
    flex-shrink: 0;
    font-size: var(--text-11);
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .demo-request-routing-value {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
  }

  .demo-request-routing-value strong {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
  }

  .demo-apps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .demo-app-card {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    align-content: start;
  }

  .demo-app-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: var(--primitive-white);
  }

  .demo-app-icon[data-tone="lime"]  { background: var(--primitive-lime-500); color: var(--color-text-primary); }
  .demo-app-icon[data-tone="green"] { background: var(--primitive-green-900); }
  .demo-app-icon[data-tone="sage"]  { background: var(--primitive-media-sage); }
  .demo-app-icon[data-tone="dark"]  { background: var(--color-text-primary); }
  .demo-app-icon[data-tone="peach"] { background: #DA7756; }

  .demo-app-name {
    font-size: var(--text-13);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
  }

  .demo-app-tenant {
    font-size: var(--text-11);
    color: var(--color-text-secondary);
    margin-top: 2px;
  }

  .demo-app-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--text-11);
    color: var(--color-text-muted);
  }

  .demo-app-card-new {
    border-style: dashed;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
  }

  .demo-app-icon-new {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--color-border-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1;
  }

  .demo-app-card-new > span {
    font-size: var(--text-11);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
  }

  .demo-side-count[data-ping] {
    animation: demo-side-count-ping 20s ease-out infinite;
  }

  /* Ping fires at the start of the loop — the EA is opening a freshly arrived request. */
  @keyframes demo-side-count-ping {
    0%       { background: var(--primitive-lime-500);     color: var(--color-text-primary); transform: scale(1.18); }
    6%       { background: var(--primitive-lime-500);     color: var(--color-text-primary); transform: scale(1); }
    12%      { background: var(--color-surface-recessed); color: var(--color-text-muted); transform: scale(1); }
    100%     { background: var(--color-surface-recessed); color: var(--color-text-muted); transform: scale(1); }
  }

  .demo-side-item[data-active-track] {
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  .demo-side-item[data-active-track="inbox"]      { animation-name: demo-active-inbox; }
  .demo-side-item[data-active-track="solutions"]  { animation-name: demo-active-solutions; }
  .demo-side-item[data-active-track="primitives"] { animation-name: demo-active-primitives; }
  .demo-side-item[data-active-track="runs"]       { animation-name: demo-active-runs; }

  @keyframes demo-active-inbox {
    /* Active for both inbox-detail (0-15) and inbox-list (15-32) since both live under the Inbox nav. */
    0%, 30%  { background: var(--color-surface-recessed); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
    32%      { background: transparent; color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
    94%      { background: transparent; color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
    96%      { background: var(--color-surface-recessed); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
    100%     { background: var(--color-surface-recessed); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
  }

  @keyframes demo-active-solutions {
    0%, 32%  { background: transparent; color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
    34%      { background: var(--color-surface-recessed); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
    48%      { background: var(--color-surface-recessed); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
    50%      { background: transparent; color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
    100%     { background: transparent; color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
  }

  @keyframes demo-active-primitives {
    0%, 50%  { background: transparent; color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
    52%      { background: var(--color-surface-recessed); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
    65%      { background: var(--color-surface-recessed); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
    67%      { background: transparent; color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
    100%     { background: transparent; color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
  }

  @keyframes demo-active-runs {
    0%, 67%  { background: transparent; color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
    69%      { background: var(--color-surface-recessed); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
    94%      { background: var(--color-surface-recessed); color: var(--color-text-primary); font-weight: var(--font-weight-medium); }
    96%      { background: transparent; color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
    100%     { background: transparent; color: var(--color-text-secondary); font-weight: var(--font-weight-regular); }
  }

  .demo-main-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
  }

  .demo-main-title {
    font-size: var(--text-15);
    font-weight: var(--font-weight-semibold);
  }

  .demo-main-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .demo-main-button {
    font-size: var(--text-11);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--color-action);
    color: var(--color-text-primary);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
  }

  .demo-table {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--color-surface);
  }

  .demo-row {
    display: grid;
    grid-template-columns: 1.6fr 1.2fr 1fr 0.8fr;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-13);
    color: var(--color-text-primary);
  }

  .demo-row:last-child { border-bottom: 0; }

  .demo-row-head {
    font-size: var(--text-11);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    background: var(--color-surface-recessed);
  }

  .demo-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-secondary);
  }

  .demo-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-border-strong);
  }

  .demo-status[data-state="running"]::before { background: var(--primitive-lime-500); box-shadow: 0 0 0 3px rgba(214, 255, 56, 0.28); }
  .demo-status[data-state="review"]::before { background: var(--primitive-media-sage); }
  .demo-status[data-state="ready"]::before { background: var(--primitive-green-900); }
  .demo-status[data-state="drafted"]::before { background: var(--primitive-gray-500); }

  .demo-row-time { color: var(--color-text-muted); }
  .demo-row-owner { color: var(--color-text-secondary); }

  .metric-strip {
    max-width: var(--size-content-max);
    margin: var(--space-0) auto;
    padding: var(--space-0) var(--layout-gutter) var(--space-8);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-6);
    color: var(--color-text-secondary);
    font-size: var(--type-eyebrow-size);
    line-height: var(--line-compact);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
  }

  .metric-strip strong {
    color: var(--color-text-primary);
    margin-left: var(--space-2);
  }

  .proof-wall {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--color-border);
    border-radius: var(--component-card-radius);
    overflow: hidden;
    background: var(--color-border);
    gap: 1px;
  }

  .proof-intro {
    grid-column: 1 / -1;
    min-height: var(--space-40);
    padding: var(--component-card-padding);
    background: var(--color-surface-recessed);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-6);
  }

  .proof-intro-link {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-primary);
    font-size: var(--type-body-size);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
  }

  .proof-intro-link:hover {
    text-decoration: underline;
  }

  .logo-tile {
    position: relative;
    min-height: var(--space-30);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: var(--type-nav-size);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-body);
    letter-spacing: -0.01em;
    transition: color 160ms ease, background-color 160ms ease;
  }

  .logo-tile:hover {
    color: var(--color-text-primary);
    background: var(--color-surface-recessed);
  }

  .logo-tile[data-mark="serif"] {
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
  }

  .logo-tile[data-mark="upper"] {
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: var(--font-weight-regular);
  }

  .logo-tile[data-mark="bold"] {
    font-weight: 800;
  }

  .logo-tile[data-mark="light"] {
    font-weight: var(--font-weight-regular);
    letter-spacing: -0.01em;
  }

  .logo-tile[data-add="true"]::after {
    content: "+";
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: var(--space-6);
    height: var(--space-6);
    border-radius: 999px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: var(--font-weight-regular);
    line-height: 1;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
  }

  .path-card,
  .quote-card {
    border: 1px solid var(--component-card-border);
    border-radius: var(--component-card-radius);
    background: var(--component-card-bg);
    padding: var(--component-card-padding);
  }

  .path-card h3 {
    font-size: var(--type-brand-size);
    line-height: var(--line-card-title);
    font-weight: var(--font-weight-medium);
  }

  .path-card .price {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--type-note-size);
    line-height: var(--line-note);
  }

  .quote-card.media {
    min-height: var(--space-70);
    background:
      radial-gradient(120% 80% at 0% 0%, rgba(214, 255, 56, 0.06), transparent 55%),
      linear-gradient(165deg, var(--primitive-gray-700) 0%, var(--primitive-black) 100%);
    color: var(--color-page);
    display: grid;
    grid-template-rows: 1fr auto;
    gap: var(--space-6);
  }

  .quote-card.media .quote-copy {
    color: var(--color-page);
  }

  .quote-card.media p {
    color: var(--color-media-text);
  }

  .timeline {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
    padding: var(--space-2) 0;
  }

  .timeline-rail {
    position: relative;
    width: 2px;
    margin: 8px 0;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    overflow: hidden;
  }

  .timeline-rail-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(to bottom, var(--primitive-lime-500), rgba(214, 255, 56, 0.4));
    animation: timeline-fill 9s ease-in-out infinite;
  }

  .timeline-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .timeline-step {
    position: relative;
    display: grid;
    align-items: start;
  }

  .timeline-dot {
    position: absolute;
    left: calc(-1 * var(--space-4) - 7px);
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: background 200ms ease;
  }

  .timeline-step-label {
    font-size: var(--type-body-size);
    line-height: var(--line-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-page);
    transition: color 200ms ease;
  }

  .timeline-step-sub {
    margin-top: 2px;
    font-size: var(--type-nav-size);
    line-height: var(--line-body);
    color: rgba(255, 255, 255, 0.5);
    transition: color 200ms ease;
  }

  .timeline-step[data-step="1"] .timeline-dot { animation: timeline-dot-1 9s ease-in-out infinite; }
  .timeline-step[data-step="2"] .timeline-dot { animation: timeline-dot-2 9s ease-in-out infinite; }
  .timeline-step[data-step="3"] .timeline-dot { animation: timeline-dot-3 9s ease-in-out infinite; }

  .timeline-step[data-step="1"] .timeline-step-sub { animation: timeline-sub-1 9s ease-in-out infinite; }
  .timeline-step[data-step="2"] .timeline-step-sub { animation: timeline-sub-2 9s ease-in-out infinite; }
  .timeline-step[data-step="3"] .timeline-step-sub { animation: timeline-sub-3 9s ease-in-out infinite; }

  @keyframes timeline-fill {
    0%   { height: 0%; }
    30%  { height: 36%; }
    60%  { height: 70%; }
    90%, 100% { height: 100%; }
  }

  @keyframes timeline-dot-1 {
    0%, 5% { background: rgba(255, 255, 255, 0.16); box-shadow: none; }
    10%, 25% { background: var(--primitive-lime-500); box-shadow: 0 0 0 4px rgba(214, 255, 56, 0.24); }
    30%, 100% { background: var(--primitive-green-900); box-shadow: 0 0 0 2px rgba(214, 255, 56, 0.32); }
  }

  @keyframes timeline-dot-2 {
    0%, 35% { background: rgba(255, 255, 255, 0.16); box-shadow: none; }
    40%, 55% { background: var(--primitive-lime-500); box-shadow: 0 0 0 4px rgba(214, 255, 56, 0.24); }
    60%, 100% { background: var(--primitive-green-900); box-shadow: 0 0 0 2px rgba(214, 255, 56, 0.32); }
  }

  @keyframes timeline-dot-3 {
    0%, 65% { background: rgba(255, 255, 255, 0.16); box-shadow: none; }
    70%, 88% { background: var(--primitive-lime-500); box-shadow: 0 0 0 4px rgba(214, 255, 56, 0.24); }
    92%, 100% { background: var(--primitive-green-900); box-shadow: 0 0 0 2px rgba(214, 255, 56, 0.32); }
  }

  @keyframes timeline-sub-1 {
    0%, 5% { color: rgba(255, 255, 255, 0.45); }
    10%, 25% { color: rgba(255, 255, 255, 0.92); }
    30%, 100% { color: rgba(255, 255, 255, 0.6); }
  }

  @keyframes timeline-sub-2 {
    0%, 35% { color: rgba(255, 255, 255, 0.45); }
    40%, 55% { color: rgba(255, 255, 255, 0.92); }
    60%, 100% { color: rgba(255, 255, 255, 0.6); }
  }

  @keyframes timeline-sub-3 {
    0%, 65% { color: rgba(255, 255, 255, 0.45); }
    70%, 88% { color: rgba(255, 255, 255, 0.92); }
    92%, 100% { color: rgba(255, 255, 255, 0.6); }
  }

  @media (prefers-reduced-motion: reduce) {
    .timeline-rail-fill { animation: none; height: 100%; }
    .timeline-step .timeline-dot { animation: none; }
  }
}

@layer sections {
  .hero {
    max-width: none;
    min-height: calc(100svh - var(--layout-nav-height));
    margin: var(--space-0);
    padding-top: var(--section-hero-top);
    padding-bottom: var(--space-0);
    text-align: left;
    background:
      radial-gradient(circle, var(--color-grid-dot) 1px, transparent 1px) 0 0 / var(--space-4) var(--space-4),
      var(--color-canvas);
  }

  .hero-copy {
    max-width: var(--size-copy-hero);
  }

  .hero-title {
    max-width: 100%;
    margin: var(--section-hero-gap-eyebrow-title) var(--space-0) var(--space-0);
    font-size: var(--type-hero-size);
    line-height: var(--type-hero-line);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    text-wrap: balance;
  }

  .hero-title span {
    display: inline;
  }

  .lede {
    max-width: 55ch;
    margin: var(--section-hero-gap-title-lede) var(--space-0) var(--space-0);
    color: var(--color-text-secondary);
    font-size: var(--type-lede-size);
    line-height: var(--type-lede-line);
  }

  .thesis h2,
  .path-head h2,
  .quote-copy,
  .final-cta h2 {
    font-size: var(--type-section-size);
    line-height: var(--type-section-line);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    text-wrap: balance;
  }

  .proof-intro h2 {
    margin: var(--space-0);
    font-size: var(--type-brand-size);
    line-height: var(--line-card-title);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0;
    text-wrap: balance;
    color: var(--color-text-primary);
  }

  .proof-intro p,
  .thesis p,
  .path-head p,
  .path-card p,
  .quote-card p,
  .final-cta p {
    margin: var(--space-4) var(--space-0) var(--space-0);
    color: var(--color-text-secondary);
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
  }

  .thesis {
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 70vh;
    min-height: 520px;
  }

  .thesis h2 {
    max-width: none;
    margin: var(--space-0) auto;
    white-space: nowrap;
    font-size: clamp(var(--text-22), 4.2vw, var(--text-44));
    line-height: 1.1;
  }

  .thesis p {
    max-width: 48ch;
    margin-left: auto;
    margin-right: auto;
  }

  .thesis-canvas {
    width: min(100%, var(--size-content-max));
    margin: var(--space-10) auto var(--space-0);
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    text-align: left;
    border: 1px solid var(--color-border);
    border-radius: var(--component-card-radius);
    overflow: hidden;
    background: var(--color-surface);
  }

  .thesis-assistant,
  .thesis-modules {
    background: var(--color-surface);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .thesis-assistant {
    background: var(--color-surface-recessed);
    border-bottom: 1px solid var(--color-border);
  }

  .thesis-assistant-head,
  .thesis-modules-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--type-nav-size);
    color: var(--color-text-secondary);
  }

  .thesis-assistant-name,
  .thesis-modules-title {
    flex: 1;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
  }

  .thesis-msg-window,
  .thesis-modules-window {
    position: relative;
    flex: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  }

  .thesis-msg-track,
  .thesis-modules-track {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    will-change: transform;
    animation: thesis-scroll 16s linear infinite;
  }

  .thesis-modules-track {
    animation-duration: 24s;
  }

  @keyframes thesis-scroll {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
  }

  @media (prefers-reduced-motion: reduce) {
    .thesis-msg-track,
    .thesis-modules-track {
      animation: none;
    }
  }

  .thesis-msg {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    font-size: var(--type-body-size);
    color: var(--color-text-secondary);
    line-height: var(--line-body);
    animation: thesis-msg-pop 24s linear infinite;
  }

  .thesis-msg strong {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
  }

  .thesis-msg-tag {
    flex-shrink: 0;
    padding: 2px var(--space-2);
    border-radius: 999px;
    background: var(--color-surface-recessed);
    border: 1px solid var(--color-border);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
  }

  @keyframes thesis-msg-pop {
    0%, 88% { opacity: 1; transform: translateY(0); }
    93% { opacity: 0.55; transform: translateY(-2px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  .thesis-msg:nth-child(2n+1) { animation-delay: 0s; }
  .thesis-msg:nth-child(2n)   { animation-delay: -8s; }

  .thesis-module {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    animation: thesis-module-pop 38s linear infinite;
    transform-origin: center bottom;
  }

  .thesis-module-icon {
    width: var(--space-9);
    height: var(--space-9);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-page);
    font-weight: var(--font-weight-bold);
    font-size: var(--type-body-size);
  }

  .thesis-module[data-tone="lime"]  .thesis-module-icon { background: var(--primitive-lime-500); color: var(--color-text-primary); }
  .thesis-module[data-tone="green"] .thesis-module-icon { background: var(--primitive-green-900); }
  .thesis-module[data-tone="sage"]  .thesis-module-icon { background: var(--primitive-media-sage); }
  .thesis-module[data-tone="dark"]  .thesis-module-icon { background: var(--color-text-primary); }
  .thesis-module[data-tone="peach"] .thesis-module-icon { background: #DA7756; }

  .thesis-module-name {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    font-size: var(--type-body-size);
    line-height: var(--line-body);
  }

  .thesis-module-sub {
    color: var(--color-text-muted);
    font-size: var(--type-nav-size);
  }

  .thesis-module-state {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--primitive-gray-500);
  }

  .thesis-module-state[data-state="running"] {
    background: var(--primitive-lime-500);
    box-shadow: 0 0 0 4px rgba(214, 255, 56, 0.28);
  }

  .thesis-module-state[data-state="ready"]   { background: var(--primitive-green-900); }
  .thesis-module-state[data-state="drafted"] { background: var(--primitive-gray-500); }
  .thesis-module-state[data-state="review"]  { background: var(--primitive-media-sage); }

  @keyframes thesis-module-pop {
    0%, 88% { opacity: 1; transform: translateY(0) scale(1); }
    93% { opacity: 0.55; transform: translateY(-6px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }

  .thesis-module:nth-child(2n+1) { animation-delay: 0s; }
  .thesis-module:nth-child(2n)   { animation-delay: -12s; }

  .paths {
    display: grid;
    gap: var(--space-4);
  }

  .path-grid,
  .quote-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .final-cta {
    text-align: center;
    padding-bottom: var(--space-24);
  }

  .final-cta h2 {
    max-width: 12ch;
    margin: var(--space-0) auto;
  }

  .final-cta p {
    max-width: 44ch;
    margin-left: auto;
    margin-right: auto;
  }

  .final-actions {
    margin-top: var(--space-8);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-8) var(--layout-gutter);
    color: var(--color-text-secondary);
    font-size: var(--type-note-size);
    line-height: var(--line-note);
  }

  .footer-inner {
    max-width: var(--size-content-max);
    margin: var(--space-0) auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
}

@layer responsive {
  @media (prefers-reduced-motion: no-preference) {
    .button {
      transition:
        background-color 160ms ease,
        box-shadow 160ms ease;
    }
  }

  /* Breakpoint: workflow demo collapses to two columns on narrow screens. */
  @media (max-width: 699px) {
    .demo-body {
      grid-template-columns: 1fr;
    }

    .demo-side {
      display: none;
    }

    .demo-row {
      grid-template-columns: 1.6fr 1fr;
    }

    .demo-row > :nth-child(2),
    .demo-row > :nth-child(4) {
      display: none;
    }

    .demo-bar-crumb { display: none; }
  }

  /* Breakpoint: nav expands, form becomes split, cards leave single-column flow. */
  @media (min-width: 700px) {
    :root {
      --layout-gutter: var(--space-8);
      --type-hero-size: var(--text-56);
      --type-hero-line: var(--line-display-lg);
      --type-section-size: var(--text-44);
      --type-section-line: var(--line-display-md);
      --type-lede-size: var(--text-22);
      --type-lede-line: var(--space-7);
      --type-body-size: var(--text-16);
      --type-body-line: var(--line-body);
    }

    .hero-title {
      white-space: normal;
    }

    .nav-links,
    .nav-actions {
      display: flex;
    }

    .audit-form {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-1);
    }

    .proof-wall {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .thesis-canvas {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr);
      gap: 0;
    }

    .thesis-assistant {
      border-right: 1px solid var(--color-border);
      border-bottom: 0;
    }

    .path-grid,
    .quote-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .quote-card.media {
      grid-column: span 2;
    }

    .final-actions {
      flex-direction: row;
      justify-content: center;
    }
  }

  /* Breakpoint: wide rail activates; hero, nav, and section rhythm use the desktop contract. */
  @media (min-width: 1040px) {
    :root {
      --layout-gutter: var(--space-16);
      --layout-nav-height: var(--space-20);
      --layout-section-block: var(--space-24);
      --section-hero-top: var(--space-24);
      --section-hero-gap-eyebrow-title: var(--space-8);
      --section-hero-gap-title-lede: var(--space-4);
      --section-hero-gap-lede-form: var(--space-8);
      --section-hero-gap-form-note: var(--space-3);
      --section-hero-gap-product: var(--space-10);
      --type-hero-size: var(--text-56);
      --type-hero-line: var(--line-display-lg);
      --type-section-size: var(--text-56);
      --type-section-line: var(--line-display-lg);
    }

    .hero {
      padding: var(--space-24) max(var(--layout-gutter), calc((100vw - var(--size-content-max)) / 2)) var(--space-0);
    }

    .nav-inner {
      max-width: none;
      padding: var(--space-0) max(var(--layout-gutter), calc((100vw - var(--size-content-max)) / 2));
    }

    .proof-wall {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .proof-intro {
      grid-column: 1 / span 2;
      grid-row: 1 / span 2;
      padding: var(--space-8);
    }
  }

  /* Breakpoint: full desktop display type can expand without forcing headline wrapping. */
  @media (min-width: 1280px) {
    :root {
      --type-hero-size: var(--text-64);
      --type-hero-line: var(--line-display-xl);
    }
  }
}