@font-face {
  font-family: "Manrope";
  src: url("assets/Manrope-variable.woff2") format("woff2"),
       url("assets/Manrope-variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --page: #fcfdff;
  --raised: #ffffff;
  --sunken: #edf3fc;
  --ink: #17213c;
  --body: #465572;
  --muted: #53617b;
  --line: #d6ddec;
  --line-strong: #a7b3cd;
  --action: #253fea;
  --action-hover: #1b2fa8;
  --on-action: #ffffff;
  --highlight: #cbdc74;
  --focus-ring: var(--action);
  --radius-sm: 14px;
  --radius: 22px;
  --radius-lg: 30px;
  --shadow-soft: 0 16px 44px rgb(23 33 60 / .08);
  --shadow-card: 0 8px 24px rgb(23 33 60 / .07);

  /* The band sections carry their own dark surface in both themes, so the colours that sit on the
     band are defined once here and are not inverted in the dark block below. */
  --band: #17213c;
  --on-band: #f4f7fd;
  --on-band-muted: #d2dbef;
  --on-band-line: #41506d;
  --on-band-line-hover: #475a77;

  --font: "Manrope", "Avenir Next", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* `rem` resolves against the reader's own browser font size, so a larger default scales the page.
     The heading clamps stay in px so they keep landing at 34px on a phone and 50px at 1440. */
  --public-body-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  --public-heading-1-size: clamp(34px, 4.3vw, 50px);
  --public-heading-2-size: clamp(26px, 3.4vw, 40px);
  --public-heading-3-size: 23px;
  --public-heading-4-size: 19px;
  /* Keep distinct page sections clear without making the reader cross empty screens between them. */
  --section-space: clamp(44px, 4.2vw, 64px);

  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--public-body-size);
  font-weight: 400;
  line-height: 1.58;
  text-rendering: optimizeLegibility;
}

/* Dark values are the Dark column of docs/brand/MORROW-BRAND.md. --band is the one surface with no
   row in that table: it needs its own step away from --page, --raised and --sunken, because the
   assistant reply sits on the band and the sections behind it use all three. */
@media (prefers-color-scheme: dark) {
  :root {
    --page: #11192e;
    --raised: #1a2641;
    --sunken: #203455;
    --ink: #f4f7fd;
    --body: #d2dbef;
    --muted: #adbdd8;
    --line: #41506d;
    --line-strong: #6d7f9e;
    --action: #adc0ff;
    --action-hover: #c3d1ff;
    --on-action: #11192e;
    --band: #27354f;
    --on-band-line: #41506d;
    --on-band-line-hover: #475a77;
    --shadow-soft: 0 16px 44px rgb(0 0 0 / .26);
    --shadow-card: 0 8px 24px rgb(0 0 0 / .2);
  }
}

* { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--page); }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img, video { display: block; max-width: 100%; height: auto; }
p, li, dd { overflow-wrap: break-word; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.04em; line-height: 1.04; }
h1, h2, h3, h4 { max-width: none !important; white-space: normal; text-wrap: wrap; }
p { text-wrap: wrap; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--focus-ring) 20%, transparent); }
/* --action is 2.26:1 on the navy band. #adc0ff clears 3:1 on the band in both themes, per WCAG 2.2
   SC 1.4.11 and 2.4.11. The hex is written out because the ring check in
   scripts/test/website-content.test.mjs recomputes both ratios from this literal value. */
.conversation-response,
.capabilities,
.privacy-story,
.support-start,
.support-contact { --focus-ring: #adc0ff; }

.shell { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.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; }
.skip-link { position: fixed; z-index: 30; top: 12px; left: 12px; padding: 12px 16px; transform: translateY(-160%); background: var(--ink); color: var(--raised); text-decoration: none; transition: transform 160ms var(--ease); }
.skip-link:focus { transform: translateY(0); }

/* Header */
.site-header { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 80px; }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-size: 21px; font-weight: 750; letter-spacing: -.04em; line-height: 1; text-decoration: none; }
.brand-mark { width: 30px; height: 30px; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 20px; color: var(--muted); font-size: 13px; font-weight: 700; }
.site-nav a { text-decoration: none; transition: color 160ms var(--ease); }
.site-nav > a { display: inline-flex; align-items: center; min-height: 44px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--action); }
.header-actions { display: flex; align-items: center; gap: 16px; }
.github-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 12px; font-weight: 760; letter-spacing: -.01em; line-height: 1; text-decoration: none; transition: border-color 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease); }
.github-link svg { width: 16px; height: 16px; fill: currentColor; }
.github-link:hover { border-color: var(--ink); background: var(--sunken); color: var(--action); transform: translateY(-1px); }
.github-link:active { transform: translateY(1px); }
.menu-toggle { display: none; }
.nav-group { position: relative; }
.nav-menu-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; }
.nav-menu-button:hover, .nav-group[data-open="true"] .nav-menu-button { color: var(--action); }
/* Keep the disclosure affordance inside its button's measured width. */
.nav-menu-button i { position: relative; width: 12px; height: 16px; }
.nav-menu-button i::after { position: absolute; top: 4px; left: 1px; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); content: ""; }
.nav-menu { position: absolute; z-index: 20; top: calc(100% + 8px); left: -12px; display: none; width: max-content; min-width: 196px; padding: 8px; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-soft); }
.nav-group[data-open="true"] .nav-menu { display: grid; }
.nav-menu a { display: block; padding: 12px; color: var(--ink); font-size: 13px; font-weight: 700; text-decoration: none; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--sunken); color: var(--action); outline-offset: -3px; }
.nav-download { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; background: var(--action); color: var(--on-action) !important; font-size: 12px; font-weight: 750; text-decoration: none; transition: background 160ms var(--ease), transform 160ms var(--ease); }
.nav-download:hover { background: var(--action-hover); transform: translateY(-1px); }
.nav-download:active { transform: translateY(1px); }

/* Actions. One arrow treatment for every "→" the site prints. */
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 48px; padding: 12px 16px 12px 20px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease); }
.button-primary { background: var(--action); color: var(--on-action); }
.button-primary:hover { background: var(--action-hover); transform: translateY(-2px); }
.button-primary:active { transform: translateY(1px); }
.button-secondary { border-color: var(--line-strong); background: var(--raised); color: var(--ink); }
.button-secondary span { color: var(--action); }
.button-secondary:hover { border-color: var(--action); background: var(--sunken); transform: translateY(-2px); }
.button-secondary:active { transform: translateY(1px); }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--action); font-size: 14px; font-weight: 700; text-decoration: none; }
.text-link:hover { color: var(--action-hover); text-decoration: underline; text-underline-offset: 5px; }
/* flex-shrink: 0 keeps the arrow glyph whole when a row runs out of room; the label beside it
   wraps instead of squeezing the glyph below its own width and spilling it past the box. */
.button span, .text-link span, .link-rows b { flex-shrink: 0; font-size: 18px; font-weight: 650; line-height: 1; }

/* Footer */
.site-footer { display: grid; grid-template-columns: minmax(160px, .5fr) minmax(0, 1.5fr); gap: clamp(32px, 6vw, 72px); align-items: start; margin-block: 24px 20px; padding: clamp(26px, 3vw, 40px); border-radius: var(--radius-lg); background: var(--sunken); color: var(--muted); font-size: 13px; }
.site-footer > .brand { width: fit-content; min-height: 44px; }
.site-footer > .footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(20px, 4vw, 48px); }
.footer-group { display: flex; flex-direction: column; align-items: flex-start; }
.footer-group p { margin: 0 0 12px; color: var(--ink); font-size: 12px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.site-footer > .footer-links a:hover { color: var(--action); }

/* Homepage hero. The title uses the whole canvas, then the product example fills the second column. */
.hero { min-width: 0; padding-block: clamp(40px, 4.2vw, 60px) clamp(32px, 3.4vw, 48px); }
.hero h1 { width: 100%; max-width: 1120px !important; line-height: .98; white-space: normal; text-wrap: wrap; }
.hero-verb { display: inline-grid; min-width: 7.1ch; color: var(--action); white-space: nowrap; }
.hero-verb-word { grid-area: 1 / 1; opacity: 0; transform: translateY(.18em); animation: hero-verb-cycle 9s cubic-bezier(.65, 0, .35, 1) infinite both; }
.hero-verb-word::after { color: var(--ink); content: "."; }
.hero-verb-word:nth-child(1) { animation-delay: -.18s; }
.hero-verb-word:nth-child(2) { animation-delay: -7.68s; }
.hero-verb-word:nth-child(3) { animation-delay: -6.18s; }
.hero-verb-word:nth-child(4) { animation-delay: -4.68s; }
.hero-verb-word:nth-child(5) { animation-delay: -3.18s; }
.hero-verb-word:nth-child(6) { animation-delay: -1.68s; }
@keyframes hero-verb-cycle {
  0% { opacity: 0; transform: translateY(.18em); }
  1.5%, 15.2% { opacity: 1; transform: translateY(0); }
  16.667%, 100% { opacity: 0; transform: translateY(-.14em); }
}
.hero-note { max-width: 760px; margin: 18px 0 0; color: var(--ink); font-size: clamp(1rem, 1.4vw, 1.125rem); font-weight: 650; line-height: 1.5; }
.hero-layout { display: grid; grid-template-columns: minmax(340px, .78fr) minmax(0, 1.22fr); gap: clamp(36px, 5vw, 64px); align-items: start; margin-top: clamp(28px, 3vw, 44px); }
.hero-copy > p:not(.hero-note) { max-width: 540px; margin: 0; color: var(--body); line-height: 1.55; }
.hero-copy > .hero-summary { margin-top: 14px !important; }
.hero-proof { display: grid; gap: 14px; max-width: 680px; margin: 22px 0 0; padding: 20px; border-radius: var(--radius); background: var(--sunken); list-style: none; }
.hero-proof li { position: relative; margin: 0; padding-left: 24px; color: var(--body); line-height: 1.55; }
.hero-proof li::before { position: absolute; top: .62em; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--action); content: ""; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.hero-copy .hero-actions { margin-top: 26px; }
.hero-stage { min-width: 0; align-self: start; }
.hero-conversation { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; align-self: start; }

/* The conversation stage. Every story sits in the same grid cell, so the tallest one reserves the
   height before playback and no message moves the page as it appears. */
.scenario-stage { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-card); }
.scenario-tabs { display: flex; min-width: 0; gap: 6px; align-items: stretch; overflow-x: auto; padding: 4px 8px; background: var(--sunken); scrollbar-width: thin; }
.scenario-tabs button { position: relative; flex: 1 0 max-content; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; text-align: left; white-space: nowrap; }
.scenario-tabs button::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; border-radius: 0 0 10px 10px; background: transparent; content: ""; }
.scenario-tabs button:hover { color: var(--ink); background: color-mix(in srgb, var(--raised) 72%, transparent); }
.scenario-tabs button[aria-selected="true"] { background: var(--raised); color: var(--ink); box-shadow: 0 3px 10px rgb(0 0 0 / .08); }
.scenario-tabs button[aria-selected="true"]::after { background: var(--action); }
.scenario-panel { padding: 24px 28px 32px; }
.hero-conversation .scenario-tabs,
.hero-conversation .scenario-picker { grid-area: 1 / 1; }
.hero-conversation .scenario-panel { grid-area: 2 / 1; padding: 24px; }
.hero-conversation .scenario-panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.hero-conversation .conversation-bubble[hidden] { display: block; visibility: hidden; }
.hero-conversation .scenario-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; }
.hero-conversation .scenario-tabs button { min-width: 0; padding-inline: 12px; line-height: 1.22; white-space: normal; }
.scenario-picker { display: none; }

.conversation { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.conversation-bubble { width: min(78%, 760px); padding: 20px 24px; }
.conversation-bubble span { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 750; }
.conversation-bubble p { max-width: 490px; margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; }
.conversation-request { align-self: flex-end; border: 1px solid var(--line); border-radius: 18px; background: var(--sunken); }
.conversation-request span { color: var(--action); }
.conversation-response { align-self: flex-start; width: min(63%, 630px); border: 1px solid color-mix(in srgb, var(--highlight) 58%, transparent); border-radius: 18px; background: var(--band); color: var(--on-band); }
.conversation-response span { color: var(--highlight); }
.conversation-response p { color: var(--on-band); }
.hero-conversation .conversation { gap: 12px; }
.hero-conversation .conversation-bubble { width: min(88%, 690px); padding: 20px; }
.hero-conversation .conversation-response { width: min(72%, 570px); }
.hero-conversation .conversation-bubble p { max-width: 100%; }

/* Numbered process list, used by the homepage workflow and the setup steps. */
.workflow { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); gap: clamp(40px, 7vw, 96px); padding-block: var(--section-space); }
.section-intro p { max-width: 420px; margin: 20px 0 0; color: var(--body); line-height: 1.62; }
.workflow-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.workflow-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-card); }
.workflow-word { color: var(--action); font-size: 14px; font-weight: 750; letter-spacing: -.025em; }
.workflow-list h2, .workflow-list h3 { font-size: var(--public-heading-4-size); }
.workflow-list p { max-width: 545px; margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* Linked destination cards */
.section-heading { display: block; margin-bottom: 32px; }
.section-heading h2 { max-width: 700px; }
.section-heading p { max-width: 720px; margin: 16px 0 0; color: var(--body); line-height: 1.62; }
.audience { padding-block: var(--section-space); }
.link-rows { display: grid; gap: 12px; }
/* The minimum track sizes have to fit the narrowest column a row set lives in, which is the
   capabilities band's right column just above the 920px collapse. */
.link-rows a { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(200px, 1.3fr) auto; gap: 16px 20px; align-items: baseline; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); color: inherit; text-decoration: none; transition: color 160ms var(--ease), background 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease); }
.link-rows a:hover { background: var(--sunken); color: var(--action); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.link-rows strong { font-size: 18px; font-weight: 750; letter-spacing: -.035em; line-height: 1.25; }
.link-rows span { max-width: 590px; color: var(--muted); font-size: 15px; line-height: 1.58; }
.link-rows b { color: var(--action); }
.link-rows-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.link-rows-grid a { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
.link-rows-grid span { grid-column: 1; }
.link-rows-grid b { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
/* An odd number of rows would leave an empty half-row beside the last one. */
.link-rows-grid a:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* The band sections. */
.capabilities { padding-block: var(--section-space); background: var(--band); color: var(--on-band); }
.capabilities-layout { display: block; }
.capabilities-layout > div:first-child { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); grid-template-rows: auto auto; gap: 16px clamp(32px, 5vw, 64px); max-width: none; margin-bottom: 32px; }
.capabilities h2 { max-width: 540px; }
.capabilities-layout > div > p { max-width: none; margin: 0; color: var(--on-band-muted); line-height: 1.62; }
.capabilities-layout > div > p:not(.capabilities-note) { grid-column: 1; grid-row: 2; }
.capabilities .capabilities-note { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin: 0; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--on-band-line); font-size: 15px; line-height: 1.58; }
.capabilities .link-rows a { border-color: transparent; background: var(--on-band-line); }
.capabilities .link-rows a:hover { background: var(--on-band-line-hover); color: var(--on-band); }
.capabilities .link-rows strong { color: var(--on-band); }
.capabilities .link-rows span { color: var(--on-band-muted); }
.capabilities .link-rows b { color: var(--highlight); }

/* One callout component: a heading, a paragraph, and one action. */
.page-callout, .remote-teaser, .feature-limits, .build-download { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-block: var(--section-space); padding: clamp(24px, 3.5vw, 36px); border-radius: var(--radius-lg); background: var(--sunken); }
.page-callout > div, .remote-teaser > div, .feature-limits > div, .build-download > div { width: 100%; }
.page-callout h2, .remote-teaser h2, .feature-limits h2, .build-download h2 { max-width: 640px; }
.page-callout p, .remote-teaser p, .feature-limits p, .build-download p { max-width: 590px; margin: 20px 0 0; color: var(--body); line-height: 1.62; }
.home .remote-teaser p { max-width: none; }
.home .remote-teaser .text-link { flex: 0 0 auto; white-space: nowrap; }
.build-download a { color: var(--action); font-weight: 700; text-underline-offset: 4px; }

/* Sections that carry a heading and a set of example cards. */
.difference, .work-examples, .support-guide { padding-block: var(--section-space); }
.example-rows { display: grid; gap: 14px; }
.example-rows article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .82fr); gap: clamp(28px, 5vw, 72px); padding: clamp(22px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-card); }
.example-rows h3 { font-size: var(--public-heading-3-size); letter-spacing: -.04em; line-height: 1.16; }
.example-rows p { max-width: 560px; margin: 8px 0 0; color: var(--body); line-height: 1.62; }
.example-rows > article > p { align-self: start; margin: 0; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--sunken); color: var(--ink); font-size: 15px; font-weight: 650; }
.example-rows strong { display: block; margin-bottom: 4px; color: var(--action); font-size: 13px; font-weight: 750; letter-spacing: -.015em; }
.example-rows a { color: var(--action); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.example-rows p > a:only-child { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }

/* Homepage product media and the course capture. */
.bridge-controls { margin: 32px 0 0; }
.bridge-controls-frame { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-card); }
.bridge-controls img { width: 100%; aspect-ratio: 1080 / 760; object-fit: cover; object-position: 50% 80.7%; }
.bridge-controls figcaption { max-inline-size: 65ch; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.course-proof { background: var(--sunken); }
.course-proof-layout { display: block; padding-block: var(--section-space) clamp(32px, 3vw, 44px); }
.proof-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .64fr); gap: clamp(36px, 7vw, 96px); align-items: end; margin-bottom: 28px; }
.proof-copy h2 { max-width: 680px; }
.proof-copy p { max-width: 430px; margin: 0; color: var(--muted); line-height: 1.62; }
.course-capture { margin: 0; }
.course-capture img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-card); }
.course-capture figcaption { max-width: none; margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* The download path: the homepage summary and the Download page itself. */
.download { display: grid; grid-template-columns: minmax(300px, .88fr) minmax(0, 1.12fr); gap: 32px clamp(40px, 7vw, 96px); padding-block: var(--section-space); }
.download-intro h2 { max-width: 570px; }
.download-intro p { max-width: 470px; margin: 20px 0 0; color: var(--body); font-size: 17px; line-height: 1.62; }
.download-status-group { display: grid; align-content: start; gap: 20px; }
.download-status { display: grid; gap: 10px; }
.download-status div { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); }
.download-status strong { font-size: 20px; font-weight: 750; letter-spacing: -.035em; }
.download-status span { color: var(--muted); font-size: 14px; font-weight: 700; }
.download-help { max-width: 620px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.58; }
.download-help a, .download-notes a { color: var(--action); font-weight: 700; text-underline-offset: 4px; }
.page-hero.download-hero { padding-bottom: 40px; }
.download-builds { padding-bottom: var(--section-space); }
.download-builds .section-heading { margin-bottom: 28px; }
.download-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.download-option { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(22px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-card); }
.download-option h3 { font-size: var(--public-heading-3-size); }
.download-format { margin: 12px 0 24px; color: var(--muted); font-size: 16px; line-height: 1.6; }
.download-option .button { margin-top: auto; }
.download-install-steps { display: grid; gap: 12px; margin: 24px 0 0; padding-left: 24px; color: var(--body); font-size: 1rem; line-height: 1.62; }
.download-install-steps { flex: 1; font-size: 17px; }
.download-install-steps li { padding-left: 4px; }
.download-security-note { margin-top: 16px; padding: 20px; border-radius: var(--radius); background: var(--sunken); }
.download-security-note h3 { font-size: var(--public-heading-3-size); }
.download-security-note p { max-width: 780px; margin: 12px 0 0; color: var(--body); font-size: 16px; line-height: 1.62; }
.download-security-note a { color: var(--action); font-weight: 700; text-underline-offset: 4px; }
.download-computer-help { margin-top: 16px; padding: 0 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); }
.download-computer-help summary { display: list-item; min-height: 48px; padding-block: 12px; color: var(--ink); font-size: 16px; font-weight: 700; cursor: pointer; }
.download-computer-help summary:hover { color: var(--action); }
.download-computer-help > div { display: grid; gap: 12px; max-width: 760px; padding-bottom: 24px; }
.download-computer-help p { margin: 0; color: var(--body); font-size: 17px; line-height: 1.62; }
.download-notes .text-link { margin-top: 12px; }
.download-page { display: grid; grid-template-columns: minmax(0, .9fr) minmax(300px, .7fr); gap: clamp(40px, 7vw, 96px); padding-block: 0 var(--section-space); }
.download-notes { align-self: start; }
.download-notes h2 { font-size: var(--public-heading-2-size); }
.download-notes p { max-width: 430px; margin: 12px 0 0; color: var(--muted); line-height: 1.62; }

/* Inner-page heroes and chapters. */
.page-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: end; padding-block: var(--section-space); }
.page-hero h1 { max-width: 75rem; }
.page-hero > p { max-width: 72ch; margin: 0; color: var(--body); line-height: 1.56; }
.feature-chapters { padding-block: var(--section-space); background: var(--sunken); }
.feature-chapters > .shell { display: grid; gap: 16px; }
.feature-chapter { display: block; padding: clamp(24px, 3.5vw, 36px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-card); }
.feature-chapter h2 { max-width: 720px; }
.feature-chapter p { max-width: 720px; margin: 16px 0 0; color: var(--body); line-height: 1.62; }
.feature-chapter > p { max-width: 720px; margin: 20px 0 0; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--sunken); color: var(--ink); font-size: 15px; font-weight: 650; }
.team-routes, .how-steps { padding-block: 0 var(--section-space); }
.how-steps .workflow-list { max-width: none; }
.setup-path { counter-reset: none; }
.setup-path > li { align-items: start; padding: clamp(22px, 3vw, 30px); }
.setup-path > li:nth-child(2) { border-color: color-mix(in srgb, var(--action) 24%, var(--line)); background: color-mix(in srgb, var(--raised) 94%, var(--action)); }
.setup-substeps { max-width: 680px; margin-top: 20px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--sunken); }
.setup-substeps > p { margin: 0; color: var(--ink); }
.setup-substeps ol { display: grid; gap: 10px; margin: 12px 0 0; padding-left: 22px; color: var(--muted); }
.setup-substeps li { display: list-item; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 14px; line-height: 1.55; }
.setup-option { max-width: 680px !important; padding: 12px 14px; border-radius: 10px; background: var(--sunken); }
.page-hero > .button { margin-top: 24px; }
.platform-path { padding-block: var(--section-space); background: var(--sunken); }
.platform-path-layout { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 96px); }
.platform-path h2 { max-width: 610px; }
.platform-path-layout > div > p { max-width: 480px; margin: 20px 0 0; color: var(--body); line-height: 1.62; }
.platform-path ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 12px; margin: 0; padding: 0; list-style: none; }
.platform-path li { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); }
.platform-path li strong { display: block; color: var(--ink); font-size: 17px; font-weight: 750; letter-spacing: -.035em; line-height: 1.28; }
.platform-path li span { display: block; margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 1.58; }

/* One disclosure treatment. The role pages share these rules through roles.css. */
.faq { display: grid; gap: 12px; padding-block: var(--section-space); }
.faq .section-heading { margin-bottom: 24px; }
.faq details { padding-inline: 22px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); }
.faq summary,
.role-page .role-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; color: var(--ink); cursor: pointer; font-size: var(--public-heading-4-size); font-weight: 700; letter-spacing: -.035em; line-height: 1.35; list-style: none; }
.faq summary::-webkit-details-marker,
.role-page .role-faq summary::-webkit-details-marker { display: none; }
.faq summary::after,
.role-page .role-faq summary::after { flex: 0 0 auto; color: var(--action); font-size: 24px; font-weight: 500; content: "+"; }
.faq details[open] summary::after,
.role-page .role-faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 760px; margin: -2px 0 24px; color: var(--body); line-height: 1.62; }
.faq a { color: var(--action); font-weight: 700; text-underline-offset: 4px; }

/* The open-source page. */
.build-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .6fr); gap: clamp(40px, 7vw, 96px); align-items: center; padding-block: var(--section-space); }
.build-hero h1 { max-width: 760px; }
.build-hero > div > p { max-width: 620px; margin: 20px 0 0; color: var(--body); line-height: 1.52; }
.build-facts { display: grid; gap: 10px; margin: 0; }
.build-facts div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); }
.build-facts dt { color: var(--action); font-size: 13px; font-weight: 750; }
.build-facts dd { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.build-thesis { display: block; padding-block: var(--section-space); }
.build-thesis h2 { max-width: 680px; margin-bottom: 20px; }
.build-thesis > div p { max-width: 460px; margin: 0; color: var(--body); line-height: 1.62; }
.build-thesis > div p + p { margin-top: 16px; }
.build-choices { padding-block: var(--section-space); background: var(--sunken); }
.choice-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 36px 0 0; padding: 0; list-style: none; }
.choice-list li { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-card); }
.choice-list h3 { font-size: var(--public-heading-4-size); }
.choice-list p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

/* The error route and the policy pages. */
.not-found { display: grid; align-content: center; min-height: calc(100vh - 80px); padding-block: clamp(96px, 18vh, 220px); }
.not-found h1 { max-width: 680px; }
.not-found > p { max-width: 590px; margin: 20px 0 32px; color: var(--body); font-size: 19px; line-height: 1.56; }
.not-found .hero-actions { margin-top: 32px; }
.site-notice { padding-block: var(--section-space) 28px; }
.site-notice h1 { max-width: 720px; }
.notice-intro { max-width: 62ch; margin: 24px 0 0; color: var(--body); font-size: 19px; line-height: 1.58; }
.notice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: none; margin-top: 20px; }
.notice-list .policy-meta { grid-column: 1 / -1; }
.notice-list section { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised); }
.notice-list h2 { font-size: var(--public-heading-3-size); }
.notice-list p { max-width: none; margin: 8px 0 0; color: var(--body); font-size: 16px; line-height: 1.58; }
.notice-list a { color: var(--action); font-weight: 700; text-underline-offset: 4px; }
.policy-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; max-width: none; margin: 0 0 12px; padding: 18px 20px; border-radius: var(--radius-sm); background: var(--sunken); color: var(--muted); font-size: 13px; line-height: 1.5; }
.policy-meta span { display: inline-flex; gap: 8px; }
.policy-meta strong { color: var(--ink); font-weight: 750; }
.policy-meta a { color: inherit; text-underline-offset: 3px; }

/* Privacy value */
.eyebrow { margin: 0 0 14px !important; color: var(--action) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .08em; line-height: 1.2 !important; text-transform: uppercase; }
.privacy-story { background: var(--band); color: var(--on-band); }
.privacy-story-layout { display: grid; grid-template-columns: minmax(300px, .86fr) minmax(0, 1.14fr); gap: clamp(44px, 8vw, 110px); padding-block: var(--section-space); }
.privacy-story-lead { align-self: center; }
.privacy-story h2 { max-width: 650px; color: var(--on-band); font-size: var(--public-heading-2-size); }
.privacy-story-lead > p:not(.eyebrow) { max-width: 620px; margin: 22px 0 0; color: var(--on-band-muted); line-height: 1.62; }
.privacy-story .eyebrow, .privacy-story .text-link { color: var(--highlight) !important; }
.privacy-story .text-link { margin-top: 24px; }
.privacy-principles { display: grid; gap: 12px; }
.privacy-principles article { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px 12px; padding: 22px 24px; border-radius: var(--radius); background: var(--on-band-line); }
.privacy-principles article > span { color: var(--highlight); font-size: 12px; font-weight: 800; }
.privacy-principles h3 { color: var(--on-band); font-size: var(--public-heading-4-size); letter-spacing: -.035em; line-height: 1.25; }
.privacy-principles p { grid-column: 1 / -1; max-width: 58ch; margin: 0; color: var(--on-band-muted); font-size: 15px; line-height: 1.58; }
.privacy-value { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: var(--section-space); padding: clamp(26px, 4vw, 42px); border-radius: var(--radius-lg); background: var(--sunken); }
.privacy-value > div { max-width: 780px; }
.privacy-value h2 { font-size: var(--public-heading-2-size); }
.privacy-value > div > p:not(.eyebrow) { max-width: 72ch; margin: 18px 0 0; color: var(--body); line-height: 1.62; }
.privacy-value .text-link { flex: none; }
.privacy-spotlight { margin-top: 28px; padding: clamp(24px, 3vw, 32px); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--sunken), color-mix(in srgb, var(--highlight) 22%, var(--sunken))); }
.privacy-spotlight h2 { max-width: 760px; font-size: var(--public-heading-2-size); }
.privacy-spotlight > p:not(.eyebrow) { max-width: 76ch; margin: 18px 0 0; color: var(--body); line-height: 1.62; }

@media (min-width: 981px) {
  .privacy-spotlight {
    display: grid;
    grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
    grid-template-rows: auto auto auto;
    gap: 12px clamp(36px, 5vw, 64px);
    align-items: start;
  }
  .privacy-spotlight .eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 0 !important; }
  .privacy-spotlight h2 { grid-column: 1; grid-row: 2 / span 2; }
  .privacy-spotlight > p:not(.eyebrow) { grid-column: 2; max-width: none; margin: 0; }
  .privacy-spotlight > p:nth-of-type(2) { grid-row: 1 / span 2; }
  .privacy-spotlight > p:nth-of-type(3) { grid-row: 3; }

  .privacy-spotlight + .notice-list { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .privacy-spotlight + .notice-list section { grid-column: span 6; }
  .privacy-spotlight + .notice-list section:nth-of-type(3),
  .privacy-spotlight + .notice-list section:nth-of-type(6),
  .privacy-spotlight + .notice-list section:nth-of-type(8) { grid-column: span 7; }
  .privacy-spotlight + .notice-list section:nth-of-type(4),
  .privacy-spotlight + .notice-list section:nth-of-type(5),
  .privacy-spotlight + .notice-list section:nth-of-type(7) { grid-column: span 5; }
}

@media (max-width: 1240px) {
  .hero-layout { grid-template-columns: 1fr; gap: 32px; }
  .hero-copy > p:not(.hero-note),
  .hero-note,
  .hero-proof,
  .section-heading p,
  .workflow-list p,
  .setup-substeps,
  .page-hero > p,
  .feature-chapter p,
  .page-callout p,
  .remote-teaser p,
  .feature-limits p,
  .build-download p,
  .bridge-controls figcaption,
  .download-security-note p,
  .download-computer-help > div,
  .faq details p,
  .notice-intro { max-width: none; }
  .setup-option { max-width: none !important; }
  .proof-copy { grid-template-columns: 1fr; gap: 12px; align-items: start; }
  .proof-copy h2,
  .proof-copy p { max-width: none; }
}

/* Support */
.support-hero { padding-bottom: 36px; }
.support-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-bottom: var(--section-space); }
.support-routes a { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 10px 12px; min-height: 210px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); color: inherit; text-decoration: none; box-shadow: var(--shadow-card); transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease); }
.support-routes a:hover { background: var(--sunken); transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.support-routes a > span { color: var(--action); font-size: 12px; font-weight: 800; }
.support-routes strong { font-size: 21px; letter-spacing: -.035em; line-height: 1.25; }
.support-routes small { grid-column: 1 / -1; margin-top: 8px; color: var(--body); font-size: 15px; line-height: 1.55; }
.support-routes b { grid-column: 1 / -1; align-self: end; padding-top: 14px; color: var(--action); font-size: 14px; }
.support-start { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: var(--section-space); padding: clamp(24px, 3.5vw, 36px); border-radius: var(--radius-lg); background: var(--band); color: var(--on-band); }
.support-start h2 { max-width: 650px; color: var(--on-band); font-size: var(--public-heading-2-size); }
.support-start p:not(.eyebrow) { max-width: 680px; margin: 18px 0 0; color: var(--on-band-muted); line-height: 1.62; }
.support-start .eyebrow { color: var(--highlight) !important; }
.support-guide { scroll-margin-top: 24px; }
.support-issues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.support-issues article { display: flex; flex-direction: column; min-height: 100%; padding: clamp(22px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-card); }
.support-issues article > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.support-number { color: var(--action); font-size: 12px; font-weight: 800; }
.support-issues h3 { font-size: var(--public-heading-3-size); letter-spacing: -.04em; line-height: 1.16; }
.support-issues article > p { margin: 20px 0 0; color: var(--body); line-height: 1.62; }
.support-issues aside { display: grid; gap: 6px; margin-top: auto; padding: 18px; border-radius: var(--radius-sm); background: var(--sunken); }
.support-issues aside strong { color: var(--action); font-size: 12px; letter-spacing: .03em; text-transform: uppercase; }
.support-issues aside span { color: var(--body); font-size: 14px; line-height: 1.55; }
.support-dependency { background: color-mix(in srgb, var(--sunken) 62%, var(--raised)) !important; }
.support-attention { border-color: color-mix(in srgb, var(--highlight) 72%, var(--line)) !important; background: color-mix(in srgb, var(--highlight) 8%, var(--raised)) !important; }
.support-issues-compact article { min-height: 0; }
.support-contact { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-block: var(--section-space) 28px; padding: clamp(24px, 3.5vw, 38px); border-radius: var(--radius-lg); background: var(--band); color: var(--on-band); }
.support-contact h2 { color: var(--on-band); font-size: var(--public-heading-2-size); }
.support-contact p { max-width: 720px; margin: 18px 0 0; color: var(--on-band-muted); line-height: 1.62; }
.support-contact a:not(.button) { color: var(--on-band); font-weight: 700; }
.support-contact .eyebrow { color: var(--highlight) !important; }
.support-contact .support-privacy { padding: 16px 18px; border-radius: var(--radius-sm); background: var(--on-band-line); color: var(--on-band); font-size: 15px; }

/* Type scale. */
.build-hero h1,
.page-hero h1,
.not-found h1,
.site-notice h1 {
  font-size: var(--public-heading-1-size);
  font-weight: 750;
  letter-spacing: -.04em;
}
.hero h1 {
  font-size: clamp(3rem, 5vw, 4rem);
  font-weight: 750;
  letter-spacing: -.04em;
}

.section-intro h2,
.section-heading h2,
.proof-copy h2,
.build-thesis h2,
.build-choices h2,
.download-intro h2,
.build-download h2,
.capabilities h2,
.remote-teaser h2,
.feature-chapter h2,
.page-callout h2,
.feature-limits h2,
.platform-path h2 {
  font-size: var(--public-heading-2-size);
}

.hero-copy > p,
.page-hero > p,
.section-intro p,
.section-heading p,
.feature-chapter p,
.page-callout p,
.feature-limits p,
.proof-copy p,
.build-hero > div > p,
.build-thesis > div p,
.capabilities-layout > div > p,
.remote-teaser p,
.platform-path-layout > div > p,
.download-notes p,
.example-rows p,
.faq details p {
  font-size: 1rem;
}

/* Motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  h1, h2, h3, h4 { transition: none !important; }
  .hero-verb-word { opacity: 0; transform: none; animation: none !important; }
  .hero-verb-word:first-child { opacity: 1; }
}
@media (prefers-color-scheme: dark) {
  .conversation-response,
  .role-page .role-message-response { background: #4d6696; }
  .conversation-response span,
  .role-page .role-message-response strong { color: #eef5bd; }
}
/* The one navigation collapse. Eight nav items plus the action stop fitting a little below 1100px,
   so the menu button takes over here and there is no second nav breakpoint. */
@media (max-width: 980px) {
  .site-header { min-height: 72px; }
  .header-actions { gap: 8px; }
  .site-nav { position: absolute; z-index: 15; top: calc(100% - 1px); right: 0; left: 0; display: none; align-items: stretch; gap: 0; padding: 8px; background: var(--raised); border: 1px solid var(--line); box-shadow: 0 12px 24px rgb(0 0 0 / .12); }
  .site-nav[data-open="true"] { display: flex; flex-direction: column; }
  .site-nav > a:not(.nav-download) { padding: 12px; }
  .nav-group { display: block; }
  .nav-menu-button { width: 100%; justify-content: space-between; padding: 12px; }
  .nav-menu { position: static; width: auto; min-width: 0; margin: 0 0 4px; border: 0; box-shadow: none; background: var(--sunken); }
  .nav-menu a { padding-left: 24px; }
  .nav-download { justify-content: center; margin: 8px 4px 4px; }
  /* The 3px right pad holds the chevron's rotated corner: an 11px box turned 45deg reaches ~2.3px
     past its layout edge, which otherwise hangs outside the button and the header at every width. */
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 3px 8px 0; border: 0; background: transparent; color: var(--ink); font-size: 13px; font-weight: 700; }
  .menu-toggle i { display: block; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 160ms var(--ease); }
  .menu-toggle[aria-expanded="true"] i { transform: translateY(2px) rotate(225deg); }
}

@media (max-width: 980px) {
  .hero-layout,
  .workflow,
  .build-hero,
  .build-thesis,
  .section-heading,
  .download,
  .proof-copy { grid-template-columns: 1fr; }
  .hero-layout { gap: 40px; }
  .section-intro p,
  .workflow-list p,
  .page-callout p,
  .remote-teaser p,
  .feature-limits p,
  .build-download p,
  .download-intro p,
  .download-help,
  .build-hero > div > p,
  .build-thesis > div p,
  .privacy-story-lead > p:not(.eyebrow),
  .privacy-principles p,
  .privacy-value > div,
  .support-start p:not(.eyebrow),
  .support-contact p { max-width: none; }
  .workflow, .build-thesis { gap: 40px; }
  .section-heading { gap: 20px; }
  .download { gap: 40px; }
  .proof-copy { gap: 20px; }
  .choice-list { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .page-callout, .remote-teaser, .feature-limits, .build-download { align-items: flex-start; flex-direction: column; gap: 24px; }
  .privacy-story-layout { grid-template-columns: 1fr; }
  .notice-list { grid-template-columns: 1fr; }
  .privacy-spotlight + .notice-list section { grid-column: auto; }
  .privacy-value,
  .support-start,
  .support-contact { align-items: flex-start; flex-direction: column; }
  .support-routes,
  .support-issues { grid-template-columns: 1fr; }
  .support-routes a,
  .support-issues-compact article { min-height: 0; }
}

@media (max-width: 920px) {
  .shell { width: min(100% - 32px, 1180px); }
  .hero h1 { font-size: clamp(2.75rem, 8vw, 4rem); }
  .course-capture { display: none; }
  .hero-actions { width: auto; align-items: flex-start; flex-direction: row; gap: 16px; }
  .section-heading { margin-bottom: 32px; }
  .scenario-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .scenario-tabs button { min-width: 0; min-height: 44px; padding: 8px 12px; font-size: 12px; line-height: 1.25; white-space: normal; }
  .scenario-tabs button:last-child { grid-column: 1 / -1; }
  .scenario-tabs button::after { right: 0; left: 0; }
  .scenario-panel { padding: 20px 20px 24px; }
  .hero-conversation .scenario-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-conversation[data-compact-selector="true"] .scenario-tabs { display: none; }
  .scenario-picker { display: grid; gap: 8px; margin: 8px; padding: 12px; border-radius: var(--radius-sm); background: var(--sunken); }
  .scenario-picker-label { color: var(--muted); font-size: 12px; font-weight: 700; }
  .scenario-picker-button { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; line-height: 1.3; text-align: left; white-space: normal; box-shadow: 0 3px 10px rgb(0 0 0 / .06); }
  .scenario-picker-button::after { width: 8px; height: 8px; margin: 0 3px 5px 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); content: ""; transition: transform 160ms var(--ease); }
  .scenario-picker-button[aria-expanded="true"]::after { margin-block: 5px 0; transform: rotate(225deg); }
  .scenario-picker-list { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); box-shadow: var(--shadow-card); }
  .scenario-picker-list[hidden] { display: none; }
  .scenario-picker-option { width: 100%; padding: 11px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--body); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.35; text-align: left; white-space: normal; }
  .scenario-picker-option:hover, .scenario-picker-option:focus-visible { background: var(--sunken); color: var(--ink); }
  .scenario-picker-option[aria-selected="true"] { background: color-mix(in srgb, var(--action) 11%, var(--raised)); color: var(--action); }
  .conversation { gap: 8px; }
  .conversation-bubble { width: 100%; padding: 16px 20px; }
  .conversation-bubble span { margin-bottom: 8px; }
  .conversation-bubble p,
  .hero-conversation .conversation-bubble p { font-size: 17px; }
  .hero-conversation .conversation-request { width: 94%; }
  .hero-conversation .conversation-response { width: 90%; }
  .workflow-list li { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
  .workflow-list h3 { font-size: 18px; }
  .link-rows a { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .link-rows span { grid-column: 1; }
  .link-rows b { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .link-rows-grid { grid-template-columns: 1fr; }
  .capabilities-layout,
  .platform-path-layout { grid-template-columns: 1fr; gap: 40px; }
  .capabilities-layout > div:first-child { grid-template-columns: 1fr; grid-template-rows: auto; gap: 16px; }
  .capabilities-layout > div > p:not(.capabilities-note),
  .capabilities .capabilities-note { grid-column: 1; grid-row: auto; }
  .platform-path ol { grid-template-columns: 1fr; }
  .page-callout .button, .remote-teaser .button, .feature-limits .button, .build-download .button { width: auto; }
  .page-hero { gap: 20px; }
  .page-hero h1, .hero h1 { line-height: .98; }
  .feature-chapter { grid-template-columns: 1fr; gap: 20px; }
  .example-rows article { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .example-rows p,
  .download-notes p,
  .platform-path-layout > div > p,
  .privacy-spotlight h2,
  .privacy-spotlight > p:not(.eyebrow) { max-width: none; }
  .example-rows h3 { font-size: 21px; }
  .download-status div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .download-options { grid-template-columns: 1fr; gap: 40px; }
  .download-page { grid-template-columns: 1fr; gap: 44px; }
  .build-facts div { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; }
  .faq summary, .role-page .role-faq summary { padding: 18px 0; font-size: 17px; }
  .notice-intro { font-size: 17px; }
  .notice-list { margin-top: 20px; }
  .policy-meta { gap: 8px 16px; margin-top: 0; padding-bottom: 16px; }
  .not-found { min-height: calc(100vh - 72px); }
  .not-found > p:not(:first-child) { font-size: 17px; }
  .site-footer { grid-template-columns: 1fr; gap: 28px; min-height: 0; padding: 28px; }
  .site-footer > .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
}

@media (max-width: 600px) {
  .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; align-items: stretch; }
  .hero-actions .button { min-height: 50px; padding: 10px 14px; gap: 8px; font-size: 14px; line-height: 1; white-space: nowrap; }
  .button, .page-callout .button, .remote-teaser .button, .feature-limits .button, .build-download .button { width: 100%; }
  .github-link { width: 44px; padding: 0; }
  .github-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero { padding-bottom: 24px; }
  .hero-layout { gap: 32px; margin-top: 28px; }
  .hero h1 { font-size: clamp(2rem, 8.5vw, 2.25rem); }
  .home .audience { padding-block: 32px 40px; }
  .home .capabilities { padding-block: 40px; }
  .home .home-workflow { padding-block: 40px 0; }
  .home .difference { padding-block: 40px; }
  .home .remote-teaser { padding-block: 40px 44px; }
  .home .course-proof-layout { padding-block: 40px 20px; }
  .home .download { padding-block: 40px 48px; }
  .section-heading { margin-bottom: 28px; }
  .conversation,
  .hero-conversation .conversation { gap: 8px; }
  .conversation-bubble,
  .hero-conversation .conversation-bubble { width: 96%; padding: 12px 16px; }
  .conversation-bubble span { margin-bottom: 8px; font-size: 12px; }
  .conversation-bubble p,
  .hero-conversation .conversation-bubble p { font-size: 15px; line-height: 1.42; }
  .hero-conversation .scenario-panel { padding: 16px; }
  .site-footer { width: min(100% - 16px, 1180px); gap: 18px; padding: 22px 18px 24px; }
  .site-footer > .footer-links { grid-template-columns: .94fr 1.06fr; gap: 18px 16px; width: 100%; }
  .footer-group:last-child { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 8px; }
  .footer-group:last-child p { grid-column: 1 / -1; }
  .footer-group p { margin-bottom: 6px; font-size: 11px; line-height: 1.3; }
  .footer-group a { min-height: 44px; font-size: 13px; line-height: 1.35; }
  .privacy-value,
  .support-start,
  .support-contact { padding: 26px 22px; }
  .workflow-list li,
  .privacy-principles article,
  .support-routes a,
  .support-issues article > div { grid-template-columns: 1fr; gap: 8px; }
  .support-routes a { grid-template-rows: auto; }
  .support-routes small,
  .support-routes b { grid-column: 1; }
  .support-routes a,
  .support-issues article { padding: 22px; }
}

/* Two hero buttons need ~368px of shell; below 400px the track cannot hold the
   nowrap label, so the row stacks into one column like every other list here. */
@media (max-width: 400px) {
  .hero-actions { grid-template-columns: 1fr; }
}