@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 colors 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;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --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);
  /* The assistant reply bubble and its speaker label, shared by the homepage and the role pages. */
  --reply-surface: var(--band);
  --reply-label: var(--highlight);

  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);
    --reply-surface: #4d6696;
    --reply-label: #eef5bd;
  }
}

* { 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. */
.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); }
.button .mobile-action-label { display: none; }
.button .desktop-action-label, .button .mobile-action-label { flex-shrink: 1; font-size: inherit; font-weight: inherit; line-height: inherit; }
.button-secondary .desktop-action-label, .button-secondary .mobile-action-label { color: inherit; }
.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%; line-height: .98; white-space: normal; text-wrap: wrap; }
.hero-verb { display: inline-grid; min-width: 7.1ch; color: var(--action); white-space: nowrap; }
/* The words change once, one every 1.5 seconds, and stop on "teach", so the heading never keeps
   moving beside the text people are reading. */
.hero-verb-word { grid-area: 1 / 1; opacity: 0; transform: translateY(.18em); animation: hero-verb-pass 1.5s cubic-bezier(.65, 0, .35, 1) both; }
.hero-verb-word::after { color: var(--ink); content: "."; }
.hero-verb-word:nth-child(1) { animation: hero-verb-first 9.3s cubic-bezier(.65, 0, .35, 1) both; }
.hero-verb-word:nth-child(2) { animation-delay: 1.5s; }
.hero-verb-word:nth-child(3) { animation-delay: 3s; }
.hero-verb-word:nth-child(4) { animation-delay: 4.5s; }
.hero-verb-word:nth-child(5) { animation-delay: 6s; }
.hero-verb-word:nth-child(6) { animation-delay: 7.5s; }
@keyframes hero-verb-pass {
  0% { opacity: 0; transform: translateY(.18em); }
  18%, 82% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-.14em); }
}
@keyframes hero-verb-first {
  0%, 13% { opacity: 1; transform: translateY(0); }
  16% { opacity: 0; transform: translateY(-.14em); }
  16.1%, 97% { opacity: 0; transform: translateY(.18em); }
  100% { opacity: 1; transform: translateY(0); }
}
.hero-note { 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) { margin: 0; color: var(--body); line-height: 1.55; }
.hero-copy > .hero-summary { margin-top: 14px !important; }
.hero-proof { display: grid; gap: 14px; 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, auto); 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 { 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(--reply-surface); color: var(--on-band); }
.conversation-response span { color: var(--reply-label); }
.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); }
.mobile-example-more { display: contents; }
.mobile-example-more[hidden] { display: none; }
.mobile-example-toggle { display: none; }

/* 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 { 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 { 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 p { 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 { 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-layout > div > p { 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 > .button, .remote-teaser > .button, .feature-limits > .button, .build-download > .button, .support-start > .button, .support-contact > .button { flex: 0 0 auto; white-space: nowrap; }
.page-callout p, .remote-teaser p, .feature-limits p, .build-download p { margin: 20px 0 0; color: var(--body); line-height: 1.62; }
.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); }
.course-guidance { padding-block: var(--section-space); }
.course-guidance-home, .course-guidance-muse { background: var(--sunken); }
.course-guidance-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.course-guidance-intro h2 { max-width: 18ch; margin-top: 10px; text-wrap: balance; }
.course-guidance-intro > p:not(.eyebrow) { max-width: 49ch; margin: 18px 0 0; color: var(--body); line-height: 1.6; }
.course-guidance-intro .text-link { display: inline-flex; margin-top: 20px; }
.course-guidance-points { border-top: 1px solid var(--line-strong); }
.course-guidance-points p { margin: 0; padding: 18px 0 20px; border-bottom: 1px solid var(--line-strong); color: var(--body); line-height: 1.56; }
.course-guidance-points strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 17px; line-height: 1.35; }
.course-guidance-feature { scroll-margin-top: 72px; }
.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 { 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%; }
.bridge-controls figcaption { 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 p { 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 p { margin: 20px 0 0; color: var(--body); font-size: 1rem; line-height: 1.62; }
.download-intro .button { margin-top: 24px; }
.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 { 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 { align-content: start; font-size: 17px; }
.download-install-steps li { padding-left: 4px; }
.download-install-guides { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }
.download-install-guides h2 { font-size: var(--public-heading-2-size); }
.download-install-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 20px; }
.download-install-grid h3 { font-size: var(--public-heading-4-size); }
.download-install-grid .download-install-steps { margin-top: 12px; }
.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 { 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; 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 { 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 > p { 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 p { margin: 16px 0 0; color: var(--body); line-height: 1.62; }
.feature-chapter > p { 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 { 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 { 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-layout > div > p { 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 { 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 > div > p { 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 { margin-bottom: 20px; }
.build-thesis > div p { 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 > p { 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; }
.notice-intro { 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 { 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; align-items: baseline; gap: 8px 24px; max-width: none; margin: 24px 0 12px; padding: 16px 20px; border-radius: var(--radius-sm); background: var(--sunken); color: var(--muted); font-size: 14px; line-height: 1.4; }
.policy-meta span { display: inline-flex; align-items: baseline; gap: 8px; }
.policy-meta strong { color: var(--ink); font-weight: 750; line-height: inherit; }
.policy-meta a { display: inline; color: inherit; line-height: inherit; text-underline-offset: 3px; }
.notice-jump { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 24px; }
.notice-jump a { display: inline-flex; align-items: center; min-height: 44px; color: var(--action); font-size: 15px; font-weight: 700; text-underline-offset: 4px; }
.notice-list h2[id], .privacy-spotlight h2[id] { scroll-margin-top: 72px; }

/* 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 { color: var(--on-band); font-size: var(--public-heading-2-size); }
.privacy-story-lead > p:not(.eyebrow) { 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: minmax(0, 1fr); gap: 10px; padding: 22px 24px; border-radius: var(--radius); background: var(--on-band-line); }
.privacy-principles h3 { color: var(--on-band); font-size: var(--public-heading-4-size); letter-spacing: -.035em; line-height: 1.25; }
.privacy-principles p { margin: 0; color: var(--on-band-muted); font-size: 15px; line-height: 1.58; }
.muse-trust-note { align-self: center; max-width: 48ch; padding-top: 20px; border-top: 1px solid var(--on-band-line); }
.muse-trust-note h3 { color: var(--on-band); font-size: var(--public-heading-4-size); line-height: 1.3; }
.muse-trust-note p { margin: 10px 0 0; color: var(--on-band-muted); font-size: 15px; line-height: 1.58; }
.muse-trust-note a { color: var(--highlight); font-weight: 700; text-underline-offset: 3px; }
.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 h2 { font-size: var(--public-heading-2-size); }
.privacy-value > div > p:not(.eyebrow) { margin: 18px 0 0; color: var(--body); line-height: 1.62; }
.privacy-value .text-link { flex: none; }
.privacy-spotlight { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: start; margin-top: 28px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-lg); background: var(--sunken); }
.privacy-spotlight h2 { max-width: 20ch !important; font-size: var(--public-heading-2-size); }
.privacy-spotlight-lead > p:not(.eyebrow) { max-width: 42ch; margin: 18px 0 0; color: var(--body); line-height: 1.62; }
.privacy-spotlight-details { border-top: 1px solid var(--line-strong); }
.privacy-spotlight-details details { border-bottom: 1px solid var(--line-strong); }
.privacy-spotlight-details summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 62px; padding: 14px 0; color: var(--ink); font-size: 18px; font-weight: 750; line-height: 1.35; cursor: pointer; list-style: none; }
.privacy-spotlight-details summary::-webkit-details-marker { display: none; }
.privacy-spotlight-details summary::after { flex: 0 0 auto; color: var(--action); font-size: 24px; font-weight: 500; content: "+"; }
.privacy-spotlight-details details[open] summary::after { content: "−"; }
.privacy-spotlight-details details p { max-width: 70ch; margin: 0 0 22px; color: var(--body); font-size: 16px; line-height: 1.62; }

@media (min-width: 981px) {
  .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: 980px) {
  .privacy-spotlight { grid-template-columns: 1fr; }
  .privacy-spotlight h2 { max-width: none !important; }
}

@media (max-width: 1240px) {
  .hero-layout { grid-template-columns: 1fr; gap: 32px; }
  .proof-copy { grid-template-columns: 1fr; gap: 12px; align-items: start; }
  .proof-copy h2 { max-width: none; }
}

/* Support */
.support-hero { padding-bottom: 36px; }
.support-routes { display: grid; grid-template-columns: repeat(4, 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; }
@media (max-width: 1240px) { .support-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.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 { color: var(--on-band); font-size: var(--public-heading-2-size); }
.support-start p:not(.eyebrow) { 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; gap: 20px; 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: 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-issues aside[hidden] { display: none; }
.support-why-toggle { display: none; }
.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 { 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; }

/* Morrow for Muse. */
.muse-disclosure { grid-column: 1 / -1; max-width: 86ch; padding: 16px 20px; border-radius: var(--radius-sm); background: var(--sunken); }
.muse-disclosure p { margin: 0; color: var(--body); font-size: 14px; line-height: 1.58; }
.muse-disclosure strong { color: var(--ink); }
.muse-disclosure a { color: var(--action); font-weight: 700; text-underline-offset: 3px; }
.muse-connect { display: grid; grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr); column-gap: clamp(28px, 5vw, 72px); row-gap: 28px; padding-block: var(--section-space); }
.muse-connect-heading h2 { font-size: var(--public-heading-2-size); }
.muse-connect-heading > p:not(.eyebrow) { margin-top: 16px; color: var(--muted); line-height: 1.6; }
.muse-connect-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.muse-connect-steps li { display: flex; gap: 12px; align-items: flex-start; padding-top: 8px; border-top: 2px solid var(--line); }
.muse-connect-steps li > span { flex: 0 0 auto; color: var(--action); font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.muse-connect-steps h3 { font-size: 17px; line-height: 1.35; }
.muse-connect-steps p { margin: 7px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.muse-can-do .section-heading { margin-bottom: 30px; }
.muse-capability-grid { border-top: 1px solid var(--line); }
.muse-capability { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr); gap: clamp(28px, 6vw, 88px); align-items: start; padding: 26px 0; border-bottom: 1px solid var(--line); }
.muse-capability h3 { max-width: 18ch; font-size: clamp(20px, 2.1vw, 25px); line-height: 1.24; letter-spacing: -.03em; }
.muse-capability > p { max-width: 68ch; margin: 0; color: var(--body); font-size: 16px; line-height: 1.65; }
.muse-flow { padding-block: var(--section-space); background: var(--band); color: var(--on-band); }
.muse-flow-intro { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 40px; align-items: end; margin-bottom: 36px; }
.muse-flow h2 { max-width: 18ch; color: var(--on-band); font-size: var(--public-heading-2-size); line-height: 1.12; }
.muse-flow-intro p { max-width: 50ch; margin: 0; color: var(--on-band-muted); line-height: 1.58; }
.muse-flow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.muse-flow-steps li { padding-top: 16px; border-top: 2px solid var(--on-band-line); }
.muse-flow-steps li > span { color: var(--highlight); font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.muse-flow-steps h3 { margin-top: 10px; color: var(--on-band); font-size: 18px; line-height: 1.28; }
.muse-flow-steps p { margin: 8px 0 0; color: var(--on-band-muted); font-size: 14px; line-height: 1.55; }
.muse-flow-edit { max-width: 92ch; margin: 30px 0 0; padding-top: 18px; border-top: 1px solid var(--on-band-line); color: var(--on-band-muted); font-size: 15px; line-height: 1.6; }
.muse-flow-edit strong { color: var(--on-band); }
.muse-change-note { max-width: 68ch; margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.muse-can-do .choice-list { margin-top: 0; }
.muse-footnote { margin-block: 0 var(--section-space); color: var(--muted); font-size: 13px; line-height: 1.5; }
.page-hero > p a { color: var(--action); font-weight: 700; text-underline-offset: 4px; }
.page-hero .hero-actions { margin-top: 4px; }
.muse-faq { display: block; padding-block: var(--section-space); background: var(--sunken); }
.muse-faq-layout { display: grid; grid-template-columns: minmax(220px, .74fr) minmax(0, 1.26fr); gap: clamp(36px, 7vw, 96px); }
.muse-faq-heading h2 { max-width: 12ch !important; font-size: var(--public-heading-2-size); }
.muse-faq-heading > p:not(.eyebrow) { max-width: 32ch; margin: 16px 0 0; color: var(--muted); line-height: 1.6; }
.muse-faq-list { border-top: 1px solid var(--line-strong); }
.muse-faq details { padding: 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; }
.muse-faq summary { gap: 20px; padding: 18px 0; font-size: 18px; }
.muse-faq summary::after { width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat; content: ""; }
.muse-faq details[open] summary::after { background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat; content: ""; }
.muse-faq details p { max-width: 68ch; margin: 0 36px 18px 0; color: var(--body); font-size: 16px; line-height: 1.65; }
code { padding: .1em .35em; border-radius: 6px; background: var(--sunken); color: var(--ink); font-family: var(--mono); font-size: .88em; overflow-wrap: anywhere; }
pre { margin: 16px 0 0; padding: 16px 18px; overflow-x: auto; border-radius: var(--radius-sm); background: var(--band); color: var(--on-band); font-size: 14px; line-height: 1.6; }
pre code { padding: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: normal; white-space: pre; }

/* 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; }
}
/* 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) {
  .course-guidance-layout { grid-template-columns: 1fr; gap: 24px; }
  .course-guidance-intro h2 { max-width: 28ch; }
  .hero-layout,
  .workflow,
  .build-hero,
  .build-thesis,
  .section-heading,
  .download,
  .proof-copy { grid-template-columns: 1fr; }
  .hero-layout { gap: 40px; }
  .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; }
  .muse-connect { grid-template-columns: 1fr; gap: 24px; }
  .muse-connect-steps { gap: 14px; }
  .muse-flow-intro { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
  .muse-flow-steps { grid-template-columns: 1fr; gap: 0; }
  .muse-flow-steps li { display: grid; grid-template-columns: 32px minmax(130px, .45fr) minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; border-top-width: 1px; }
  .muse-flow-steps h3, .muse-flow-steps p { margin: 0; }
  .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)); }
  /* script.js swaps the tab row for a compact picker at this width. The tab row stays hidden and the
     picker's height is held open until then, so the swap does not move the page. */
  .hero-conversation .scenario-tabs { display: none; }
  .hero-conversation:not([data-compact-selector="true"]) { padding-top: 119px; }
  .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; }
  .privacy-spotlight h2 { max-width: none; }
  .example-rows h3 { font-size: 21px; }
  .download-status div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .download-options, .download-install-grid { grid-template-columns: 1fr; gap: 12px; }
  .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) {
  .muse-connect { padding-block: 48px; }
  .muse-connect-steps { grid-template-columns: 1fr; gap: 0; }
  .muse-connect-steps li { padding: 12px 0; }
  .muse-capability { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .muse-capability h3 { max-width: 24ch; font-size: 20px; }
  .muse-capability > p { font-size: 15px; line-height: 1.6; }
  .muse-flow-steps li { grid-template-columns: 28px minmax(0, 1fr); gap: 2px 12px; }
  .muse-flow-steps li > span { grid-column: 1; grid-row: 1 / span 2; }
  .muse-flow-steps h3, .muse-flow-steps p { grid-column: 2; }
  .muse-flow-edit { margin-top: 20px; font-size: 14px; }
  .muse-change-note { font-size: 14px; }
  .muse-faq-layout { grid-template-columns: 1fr; gap: 28px; }
  .muse-faq-heading h2 { max-width: 16ch !important; }
  .muse-faq summary { padding: 16px 0; font-size: 17px; }
  .muse-faq details p { margin-right: 24px; font-size: 15px; }
}

@media (max-width: 600px) {
  .hero-actions { width: 100%; }
  .home .hero-actions, .muse-page .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
  .home .hero-actions .button, .muse-page .hero-actions .button { width: 100%; min-height: 50px; justify-content: center; padding: 10px 8px; gap: 6px; font-size: 13px; line-height: 1.2; text-align: center; white-space: nowrap; }
  .hero-actions .button .desktop-action-label { display: none; }
  .hero-actions .button .mobile-action-label { display: inline; }
  .button, .page-callout .button, .remote-teaser .button, .feature-limits .button, .build-download .button { width: 100%; }
  .download-option { padding: 20px; }
  .download-format { margin: 8px 0 16px; font-size: 15px; }
  .download-install-grid { gap: 24px; }
  .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: 12px; 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; }
}

@media (max-width: 920px) {
  .support-routes { gap: 0; border-top: 1px solid var(--line); }
  .support-routes a {
    grid-template-columns: 28px minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 4px 12px;
    min-height: 0;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .support-routes a:hover { background: transparent; box-shadow: none; transform: none; }
  .support-routes a > span { grid-row: 1 / -1; padding-top: 4px; }
  .support-routes strong { grid-column: 2; font-size: 18px; }
  .support-routes small { grid-column: 2; margin: 0; font-size: 14px; line-height: 1.45; }
  .support-routes b { grid-column: 3; grid-row: 1 / -1; align-self: center; padding: 0; font-size: 13px; }
}

@media (max-width: 600px) {
  .support-routes a { grid-template-columns: 26px minmax(0, 1fr); }
  .support-routes b { grid-column: 2; grid-row: 3; padding-top: 4px; }
}

@media (max-width: 600px) {
  .mobile-example-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; padding: 8px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--action); font-size: 15px; font-weight: 750; line-height: 1.35; }
  .mobile-example-toggle[aria-expanded="true"] { margin-top: 12px; }
  .hero-conversation .mobile-example-toggle { justify-self: start; }
  .hero-proof { gap: 10px; margin-top: 18px; padding: 16px 0 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
  .hero-proof li { padding-left: 20px; font-size: 15px; line-height: 1.45; }
  .home .hero-proof li:nth-child(n + 3) { display: none; }
  .hero-conversation .scenario-panel { padding: 14px; }
  .hero-conversation .conversation-bubble { width: 100%; padding: 13px 14px; }
  .hero-conversation .conversation-bubble p { font-size: 16px; line-height: 1.5; }
  .hero-conversation .conversation-response { width: 100%; }

  .privacy-principles { gap: 0; border-top: 1px solid var(--on-band-line); }
  .privacy-principles article { gap: 5px; padding: 16px 0; border-bottom: 1px solid var(--on-band-line); border-radius: 0; background: transparent; }
  .privacy-principles p { font-size: 16px; }
  .link-rows-grid { gap: 0; border-top: 1px solid var(--line); }
  .link-rows-grid a { padding: 16px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  .link-rows-grid a:hover { background: transparent; box-shadow: none; transform: none; }
  .capabilities .link-rows { gap: 0; border-top: 1px solid var(--on-band-line); }
  .capabilities .link-rows a { padding: 15px 0; border: 0; border-bottom: 1px solid var(--on-band-line); border-radius: 0; background: transparent; }
  .capabilities .link-rows a:hover { background: transparent; box-shadow: none; transform: none; }
  .capabilities .capabilities-note { padding: 14px 0 0; border-top: 1px solid var(--on-band-line); border-radius: 0; background: transparent; font-size: 15px; }

  .feature-chapters > .shell, .example-rows { gap: 0; }
  .feature-chapter { padding: 22px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
  .feature-chapter:first-child { border-top: 1px solid var(--line); }
  .feature-chapter p { margin-top: 10px; font-size: 16px; }
  .feature-chapter > p { margin-top: 14px; padding: 12px 0 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; font-size: 16px; font-weight: 650; }
  .setup-path { gap: 0; border-top: 1px solid var(--line); }
  .setup-path > li, .setup-path > li:nth-child(2) { padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
  .setup-substeps { margin-top: 16px; padding: 14px 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
  .setup-substeps li { font-size: 16px; }
  .setup-option { padding: 12px 0 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
  .example-rows article { gap: 10px; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
  .example-rows article:first-child { border-top: 1px solid var(--line); }
  .example-rows > article > p { padding: 12px 0 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; font-size: 16px; }

  .support-issues { gap: 0; border-top: 1px solid var(--line); }
  .support-issues article { gap: 12px; padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
  .support-issues aside { margin-top: 2px; padding: 10px 0 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
  .support-issues aside span { font-size: 15px; }
  .support-why-toggle { display: inline-flex; align-self: flex-start; min-height: 44px; align-items: center; padding: 8px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--action); font-size: 15px; font-weight: 750; }
  .support-dependency, .support-attention { background: transparent !important; border-color: var(--line) !important; }

  .build-facts { gap: 0; border-top: 1px solid var(--line); }
  .build-hero .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
  .build-hero .hero-actions .button { display: inline-flex; justify-content: center; min-height: 50px; padding: 10px 8px; font-size: 13px; white-space: nowrap; }
  .build-facts div { display: block; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  .build-facts dt { font-size: 13px; }
  .build-facts dd { margin-top: 4px; font-size: 16px; }
  .download-install-guides { display: none; }
  .download-option > .download-install-steps,
  .download-option > div { width: 100%; }
  .download-option > div { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
  .download-option > div h3 { font-size: 17px; }
  .download-option > div .download-install-steps { gap: 8px; margin-top: 10px; padding-left: 22px; font-size: 16px; line-height: 1.5; }
  .download-first-open { width: 100%; margin-top: 18px; padding-top: 8px; border-top: 1px solid var(--line); }
  .download-first-open summary { min-height: 44px; padding: 9px 0; color: var(--action); font-size: 15px; font-weight: 750; cursor: pointer; }
  .download-first-open p { margin: 8px 0 0; color: var(--body); font-size: 15px; line-height: 1.55; }
  .notice-list { gap: 0; border-top: 1px solid var(--line); }
  .notice-list section { padding: 20px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
  .policy-meta { display: grid; gap: 8px; margin-top: 22px; padding: 16px 18px; border-radius: var(--radius-sm); background: var(--sunken); }
  .notice-jump { gap: 2px 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .notice-jump a { min-height: 44px; }
  .privacy-spotlight { gap: 18px; padding: 20px; border-radius: var(--radius); }
  .privacy-spotlight-details summary { min-height: 56px; font-size: 16px; }
  .bridge-controls a { display: block; }
  .bridge-controls figcaption { font-size: 15px; }
}