@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;
}

/* ─── Tokens ─────────────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: light dark;

  --page: #fcfdff;
  --raised: #ffffff;
  --sunken: #edf3fc;
  --tint: #f4f7fd;
  --ink: #17213c;
  --body: #465572;
  --muted: #53617b;
  --line: #d6ddec;
  --line-strong: #a7b3cd;
  --action: #253fea;
  --action-hover: #1b2fa8;
  --action-soft: #e6ebfd;
  --on-action: #ffffff;
  --highlight: #cbdc74;
  --knot-blue: #6884ff;
  --focus-ring: var(--action);

  /* 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;
  --band-raised: #212e52;
  --on-band: #f4f7fd;
  --on-band-muted: #d2dbef;
  --on-band-line: #36466b;
  --on-band-action: #adc0ff;

  /* The assistant reply bubble and its speaker label, shared by the homepage and the role pages. */
  --reply-surface: var(--band);
  --reply-label: var(--highlight);

  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow-card: 0 1px 2px rgb(23 33 60 / .05), 0 14px 34px -14px rgb(23 33 60 / .18);
  --shadow-lift: 0 2px 6px rgb(23 33 60 / .06), 0 32px 64px -28px rgb(23 33 60 / .32);

  --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);

  --shell: 1240px;
  --col-gap: clamp(40px, 6vw, 96px);
  --gutter: 40px;
  --header-h: 72px;
  /* Sections breathe on a wide screen and tighten on a phone, so a reader never crosses an empty screen. */
  --sec: clamp(64px, 8vw, 120px);

  /* `rem` follows the reader's own browser font size, so a larger default scales the whole page. */
  --t-hero: clamp(2rem, 4.2vw, 3.5rem);
  --t-h1: clamp(2.25rem, 3.9vw, 3.5rem);
  --t-h2: clamp(1.75rem, 2.9vw, 2.625rem);
  --t-h3: clamp(1.25rem, 1.55vw, 1.4375rem);
  --t-lead: clamp(1.125rem, 1.35vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-small: .9375rem;
  --t-label: .8125rem;

  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 100%;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Dark values are the Dark column of docs/brand/MORROW-BRAND.md. --band needs its own step away from
   --page, --raised and --sunken, because the assistant reply sits on the band. */
@media (prefers-color-scheme: dark) {
  :root {
    --page: #11192e;
    --raised: #1a2641;
    --sunken: #16213a;
    --tint: #141e35;
    --ink: #f4f7fd;
    --body: #d2dbef;
    --muted: #adbdd8;
    --line: #2f3d5c;
    --line-strong: #56688a;
    --action: #adc0ff;
    --action-hover: #c3d1ff;
    --action-soft: #22315a;
    --on-action: #11192e;
    --band: #0b1223;
    --band-raised: #18233d;
    --on-band-line: #2c3a59;
    --shadow-card: 0 1px 2px rgb(0 0 0 / .2), 0 14px 34px -14px rgb(0 0 0 / .5);
    --shadow-lift: 0 2px 6px rgb(0 0 0 / .25), 0 32px 64px -28px rgb(0 0 0 / .6);
    --reply-surface: #2f4474;
    --reply-label: #eef5bd;
  }
}

/* Dark surfaces redefine the tokens, so every component placed on one reads correctly without its
   own override. */
.band, .cta-band, .privacy-panel, .prompt-card, .support-contact, .privacy-spotlight, .role-related {
  --ink: #f4f7fd; --body: #d2dbef; --muted: #adbdd8; --line: var(--on-band-line); --line-strong: #56688a;
  --raised: var(--band-raised); --sunken: var(--band-raised); --tint: var(--band);
  --action: #adc0ff; --action-hover: #c3d1ff; --action-soft: #2a3a66; --on-action: #11192e; --focus-ring: #adc0ff;
}

/* ─── Base ───────────────────────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body { min-width: 320px; margin: 0; background: var(--page); font-size: var(--t-body); }
button, a, input { 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, h4 { margin: 0; color: var(--ink); font-weight: 700; text-wrap: balance; }
h1 { font-size: var(--t-h1); font-weight: 760; letter-spacing: -.04em; line-height: 1.08; }
h2 { font-size: var(--t-h2); font-weight: 740; letter-spacing: -.035em; line-height: 1.12; }
h3 { font-size: var(--t-h3); letter-spacing: -.028em; line-height: 1.22; }
h4 { font-size: 1.0625rem; letter-spacing: -.02em; line-height: 1.3; }
p { margin: 0; }
::selection { background: var(--highlight); color: #17213c; }
: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. */
.band, .conversation-response, .role-message-response, .cta-band, .privacy-panel, .role-related { --focus-ring: #adc0ff; }
strong { font-weight: 700; }
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; }

.shell { width: min(var(--shell), calc(100% - var(--gutter) * 2)); 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: 40; top: 12px; left: 12px; padding: 12px 16px; border-radius: 10px; transform: translateY(-180%); background: var(--ink); color: var(--page); text-decoration: none; transition: transform 160ms var(--ease); }
.skip-link:focus { transform: translateY(0); }
main { position: relative; isolation: isolate; }
main:focus { outline: none; }

/* One quiet wash of the two knot colors behind the top of every page. */
main::before { position: absolute; z-index: -1; inset: calc(var(--header-h) * -1) 0 auto; height: min(820px, 90vh); background: radial-gradient(60% 70% at 88% 8%, color-mix(in srgb, var(--knot-blue) 13%, transparent), transparent 70%), radial-gradient(40% 55% at 4% 38%, color-mix(in srgb, var(--highlight) 16%, transparent), transparent 72%); content: ""; pointer-events: none; }
.philosophy-page main::before { display: none; }

/* Links inside running text. */
.prose a, .lead a, .note a, .page-hero p a, .doc-section a, .faq-list a, .issue a, .cta-band p a, .install a {
  color: var(--action); font-weight: 650; text-decoration-thickness: from-font; text-underline-offset: 3px;
}
.prose a:hover, .lead a:hover, .note a:hover, .page-hero p a:hover, .doc-section a:hover, .faq-list a:hover, .issue a:hover, .install a:hover { color: var(--action-hover); }

/* ─── Type roles ─────────────────────────────────────────────────────────────────────────────── */

.kicker, .eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--action); font-size: var(--t-label); font-weight: 700; letter-spacing: -.005em; line-height: 1.3; }
.kicker::before, .eyebrow::before { width: 18px; height: 2px; border-radius: 2px; background: currentColor; content: ""; }
.kicker span { color: var(--muted); font-variant-numeric: tabular-nums; }
.band .kicker, .cta-band .kicker, .privacy-panel .kicker, .role-related .kicker { color: var(--highlight); }
.lead { color: var(--body); font-size: var(--t-lead); font-weight: 450; letter-spacing: -.012em; line-height: 1.55; }
.lead + .lead { margin-top: 16px; }
.prose { color: var(--body); font-size: var(--t-body); line-height: 1.7; }
.prose > * + * { margin-top: 18px; }
.prose strong { color: var(--ink); }
.prose > .statement { margin-block: 36px 0; padding-top: 22px; background: linear-gradient(var(--highlight), var(--highlight)) 0 0 / 56px 4px no-repeat; color: var(--ink); font-size: clamp(1.375rem, 2.2vw, 1.875rem); font-weight: 650; letter-spacing: -.03em; line-height: 1.3; text-wrap: balance; }

/* ─── Header ─────────────────────────────────────────────────────────────────────────────────── */

.site-header { position: sticky; z-index: 30; top: 0; background: color-mix(in srgb, var(--page) 100%, transparent); border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.site-header[data-scrolled="true"] { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgb(23 33 60 / .35); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--ink); font-size: 22px; font-weight: 760; letter-spacing: -.045em; line-height: 1; text-decoration: none; }
.brand-mark { width: 32px; height: 32px; object-fit: contain; transition: transform 600ms var(--ease); }
.brand:hover .brand-mark { transform: rotate(-12deg); }
.site-nav { display: flex; align-items: center; gap: 6px; color: var(--body); font-size: 14px; font-weight: 650; }
.site-nav a { text-decoration: none; }
.site-nav > a:not(.nav-download) { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; transition: color 160ms var(--ease), background 160ms var(--ease); }
.site-nav > a:not(.nav-download):hover, .site-nav a[aria-current="page"] { color: var(--action); }
.site-nav > a:not(.nav-download):hover { background: var(--sunken); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions .nav-download { order: 1; min-height: 44px; margin: 0; font-size: 14px; }
.header-actions .menu-toggle { order: 2; }
.github-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: 999px; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: -.01em; line-height: 1; text-decoration: none; transition: color 160ms var(--ease), background 160ms var(--ease); }
.github-link svg { width: 18px; height: 18px; fill: currentColor; }
.github-link:hover { background: var(--sunken); color: var(--action); }
.menu-toggle { display: none; }
.nav-group { position: relative; }
.nav-menu-button { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--body); font-size: 14px; font-weight: 650; transition: color 160ms var(--ease), background 160ms var(--ease); }
.nav-menu-button:hover, .nav-group[data-open="true"] .nav-menu-button { background: var(--sunken); 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: 2px; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 200ms var(--ease); content: ""; }
.nav-group[data-open="true"] .nav-menu-button i::after { top: 7px; transform: rotate(225deg); }
.nav-menu { position: absolute; z-index: 35; top: calc(100% + 10px); left: 0; display: none; width: max-content; min-width: 250px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-lift); }
.nav-group[data-open="true"] .nav-menu { display: grid; animation: menu-in 180ms var(--ease) both; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.nav-menu a { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 44px; padding: 10px 14px; border-radius: 10px; color: var(--ink); font-size: 14px; font-weight: 650; text-decoration: none; }
.nav-menu a::after { color: var(--action); opacity: 0; transform: translateX(-4px); transition: opacity 160ms var(--ease), transform 160ms var(--ease); content: "→"; }
.nav-menu a:hover, .nav-menu a:focus-visible { background: var(--sunken); color: var(--action); outline-offset: -3px; }
.nav-menu a:hover::after, .nav-menu a:focus-visible::after { opacity: 1; transform: none; }
.nav-download { display: inline-flex; align-items: center; min-height: 44px; margin-left: 8px; padding: 8px 18px; border-radius: 999px; background: var(--action); color: var(--on-action) !important; font-size: 14px; font-weight: 700; 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: scale(.98); }

/* ─── Actions ────────────────────────────────────────────────────────────────────────────────── */

.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 52px; padding: 12px 22px; border: 1px solid transparent; border-radius: 999px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; text-decoration: none; transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease); }
.button-primary { background: var(--action); color: var(--on-action); box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--action) 80%, transparent); }
.button-primary:hover { background: var(--action-hover); transform: translateY(-2px); box-shadow: 0 16px 30px -14px color-mix(in srgb, var(--action) 85%, transparent); }
.button-secondary { border-color: var(--line-strong); background: var(--raised); color: var(--ink); }
.button-secondary:hover { border-color: var(--ink); transform: translateY(-2px); }
.button:active { transform: scale(.98); }
.button-bright { background: var(--highlight); color: #17213c; }
.button-bright:hover { background: #d9e78e; transform: translateY(-2px); }
.button .mobile-action-label { display: none; }
.text-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--action); font-size: 15px; font-weight: 700; letter-spacing: -.01em; text-decoration: none; }
.text-link:hover { color: var(--action-hover); }
/* One arrow treatment for every "→" the site prints. flex-shrink: 0 keeps the glyph whole when a row
   runs out of room; the label beside it wraps instead. */
.button span[aria-hidden], .text-link span[aria-hidden], .cell b, .roster b, .role-links a span { flex-shrink: 0; display: inline-block; font-size: 1.15em; font-weight: 600; line-height: 1; transition: transform 200ms var(--ease); }
.button:hover span[aria-hidden], .text-link:hover span[aria-hidden], .cell:hover b, .roster a:hover b, .role-links a:hover span { transform: translateX(4px); }
.button:hover span[data-dir="down"] { transform: translateY(3px); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* ─── Sections ───────────────────────────────────────────────────────────────────────────────── */

.sec { padding-block: var(--sec); }
.sec-tight { padding-block: calc(var(--sec) * .6); }
.sec-tint { background: var(--tint); border-block: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.band { background: var(--band); color: var(--on-band); }
.band h2, .band h3, .band h4 { color: var(--on-band); }
.band .lead, .band .prose, .band p { color: var(--on-band-muted); }
.band .text-link { color: var(--highlight); }
.band .text-link:hover { color: #e3ee9f; }

/* A section head: heading on the left, its short explanation on the right. */
.sec-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(40px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); column-gap: var(--col-gap); }
.sec-head .kicker { grid-column: 1 / -1; margin-bottom: -4px; }
.sec-head > p { color: var(--body); font-size: var(--t-lead); line-height: 1.55; }
.sec-head-stack { display: block; max-width: 860px; }
.sec-head-stack > p { margin-top: 20px; }

/* A split section: a heading that stays in view on the left, the material on the right. */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(48px, 7vw, 120px); align-items: start; column-gap: var(--col-gap); }
.split-head { position: sticky; top: calc(var(--header-h) + 32px); }
.split-head h2 + p, .split-head h2 + .lead { margin-top: 22px; }
.split-head .text-link { margin-top: 20px; }
.split-head > p:not(.kicker) { color: var(--body); font-size: var(--t-lead); line-height: 1.55; }
.split-head > p + p { margin-top: 16px; }

/* ─── Home: hero ─────────────────────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(48px, 6vw, 96px) 0; }
.hero h1 { max-width: 15.5em; font-size: var(--t-hero); font-weight: 770; letter-spacing: -.04em; line-height: 1.04; text-wrap: balance; }
.hero-verb { margin-inline-start: .08em; display: inline-grid; min-width: 6.4ch; color: var(--action); white-space: nowrap; }
/* The words cycle endlessly, one every 1.5 seconds. */
.hero-verb-word { grid-area: 1 / 1; opacity: 0; transform: translateY(.18em); animation: hero-verb-loop 9s cubic-bezier(.65, 0, .35, 1) both infinite; }
.hero-verb-word::after { color: var(--ink); content: "."; }
.hero-verb-word:nth-child(1) { animation-delay: 0s; }
.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-loop {
  0% { opacity: 0; transform: translateY(.18em); }
  3%, 13.67% { opacity: 1; transform: translateY(0); }
  16.67%, 100% { opacity: 0; transform: translateY(-.14em); }
}
.hero-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 5.5vw, 88px); align-items: start; margin-top: clamp(36px, 4vw, 56px); column-gap: var(--col-gap); }
.hero-copy { position: sticky; top: calc(var(--header-h) + 32px); }
.hero-copy .lead:first-child { color: var(--ink); font-weight: 600; }
.hero-note { justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 8px 14px 8px 10px; border-radius: 999px; background: color-mix(in srgb, var(--highlight) 32%, var(--raised)); color: #17213c; font-size: 14px; font-weight: 700; line-height: 1.35; }
.hero-note::before { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--highlight) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.5 2.4L12 5.2' fill='none' stroke='%2317213c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; content: ""; }
@media (prefers-color-scheme: dark) { .hero-note { background: color-mix(in srgb, var(--highlight) 22%, var(--raised)); color: var(--ink); } }
.hero-copy .hero-actions { margin-top: 32px; }
.hero-stage { min-width: 0; }
.hero-motion-toggle { min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: var(--muted); font-size: var(--t-label); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.hero-motion-toggle:hover { color: var(--action); }
.hero-motion-toggle[hidden] { display: none; }
.hero-verb[data-paused="true"] .hero-verb-word { animation: none; opacity: 0; transform: none; }
.hero-verb[data-paused="true"] .hero-verb-word[data-current="true"] { opacity: 1; }
.hero-conversation .scenario-panel:focus-visible, .doc-toc a:focus-visible { outline-offset: -3px; box-shadow: none; }


/* ─── 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 { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--raised); box-shadow: var(--shadow-lift); }
.hero-conversation { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.scenario-tabs { display: grid; grid-template-columns: repeat(5, auto); gap: 4px; margin: 10px; padding: 5px; border-radius: 14px; background: var(--sunken); }
.scenario-tabs button { position: relative; min-width: 0; min-height: 44px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.22; text-align: center; white-space: normal; transition: color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease); }
.scenario-tabs button:hover { color: var(--ink); }
.scenario-tabs button[aria-selected="true"] { background: var(--raised); color: var(--ink); box-shadow: 0 1px 2px rgb(23 33 60 / .08), 0 6px 14px -6px rgb(23 33 60 / .2); }
.hero-conversation .scenario-tabs, .hero-conversation .scenario-picker { grid-area: 1 / 1; }
.hero-conversation .scenario-panel { grid-area: 2 / 1; padding: 14px 26px 28px; }
.hero-conversation .scenario-panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.hero-conversation .conversation-bubble[hidden] { display: block; visibility: hidden; }
.scenario-picker { display: none; }

.conversation { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.conversation-bubble { width: min(86%, 690px); padding: 16px 20px 18px; }
.conversation-bubble span { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 750; letter-spacing: -.005em; }
.conversation-bubble p { margin: 0; font-size: 15.5px; font-weight: 500; line-height: 1.55; }
.conversation-request { align-self: flex-end; border: 1px solid var(--line); border-radius: 20px 20px 6px 20px; background: var(--sunken); color: var(--ink); }
.conversation-request span { color: var(--action); }
.conversation-response { align-self: flex-start; width: min(80%, 600px); border-radius: 20px 20px 20px 6px; background: var(--reply-surface); color: var(--on-band); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--highlight) 30%, transparent); }
.conversation-response span { color: var(--reply-label); }
.conversation-response p { color: var(--on-band); }
.mobile-example-more { display: contents; }
.mobile-example-more[hidden] { display: none; }
.mobile-example-toggle { display: none; }

/* ─── Index lists: numbered rows on hairlines ────────────────────────────────────────────────── */

.index { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.index > li, .index > div, .index > p, .index > article { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 16px; padding: 26px 0 28px; border-bottom: 1px solid var(--line); }
.index .n { padding-top: 3px; color: var(--action); font-size: var(--t-label); font-weight: 700; font-variant-numeric: tabular-nums; }
.index h3 { font-size: var(--t-h3); }
.index h3 + p { margin-top: 8px; }
.index p, .index span:not(.n) { color: var(--body); line-height: 1.65; }
.index strong { display: block; margin-bottom: 8px; color: var(--ink); font-size: var(--t-h3); font-weight: 700; letter-spacing: -.028em; line-height: 1.25; }
.band .index { border-color: var(--on-band-line); }
.band .index > * { border-color: var(--on-band-line); }
.band .index .n { color: var(--highlight); }

/* ─── Cells: a ruled grid of linked destinations ─────────────────────────────────────────────── */

.cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cell { position: relative; display: flex; flex-direction: column; min-height: 220px; padding: 28px 28px 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: background 200ms var(--ease); }
.cell .n { color: var(--action); font-size: var(--t-label); font-weight: 700; font-variant-numeric: tabular-nums; }
.cell strong { margin-top: 44px; color: var(--ink); font-size: var(--t-h3); font-weight: 720; letter-spacing: -.03em; line-height: 1.2; }
.cell span:not(.n) { margin-top: 12px; color: var(--body); font-size: var(--t-small); line-height: 1.6; }
.cell b { position: absolute; top: 26px; right: 26px; color: var(--action); }
a.cell:hover { background: var(--sunken); }
a.cell:hover strong { color: var(--action); }
.plan-note { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px 32px; margin-top: 24px; padding: 24px 28px; border-radius: var(--radius-sm); background: var(--sunken); }
.plan-note h3 { margin: 0; color: var(--ink); font-size: 1.125rem; font-weight: 720; letter-spacing: -.025em; line-height: 1.35; }
.plan-note p { margin: 0; color: var(--body); font-size: var(--t-small); line-height: 1.55; }

/* ─── Steps: numbered stages joined by one line ──────────────────────────────────────────────── */

.steps { position: relative; display: grid; grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.steps::before { position: absolute; top: 23px; right: calc((100% - (var(--steps, 4) - 1) * 32px) / var(--steps, 4) - 24px); left: 24px; height: 1px; background: linear-gradient(90deg, var(--action), var(--line-strong)); content: ""; }
.steps > li { position: relative; }
.steps .step-n { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 24px; border: 1px solid var(--action); border-radius: 50%; background: var(--page); color: var(--action); font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
.steps > li:first-child .step-n { background: var(--action); color: var(--on-action); }
.steps h3 { font-size: var(--t-h3); }
.steps p { margin-top: 10px; color: var(--body); font-size: var(--t-small); line-height: 1.6; }
.steps-3 { --steps: 3; }
.steps-text p { margin-top: 0; padding-top: 2px; color: var(--ink); font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.5; }
.sec-tint .steps .step-n { background: var(--tint); }
.sec-tint .steps > li:first-child .step-n { background: var(--action); }
.band .steps::before { background: linear-gradient(90deg, var(--highlight), var(--on-band-line)); }
.band .steps .step-n { border-color: var(--highlight); background: var(--band); color: var(--highlight); }
.band .steps > li:first-child .step-n { background: var(--highlight); color: #17213c; }
.band .steps p { color: var(--on-band-muted); }

/* ─── Columns: three editorial columns with a rule on top ────────────────────────────────────── */

.cols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 32px clamp(28px, 3.5vw, 56px); }
.cols > article, .cols > li, .cols > div, .cols > aside { display: flex; flex-direction: column; padding-top: 24px; border-top: 2px solid var(--ink); }
.cols h3 { font-size: var(--t-h3); }
.cols h3 + p { margin-top: 12px; }
.cols p { color: var(--body); line-height: 1.65; }
.cols p + p { margin-top: 12px; }
.cols .yield { margin-top: auto; padding-top: 24px; }
.cols .yield > p { padding: 16px 18px; border-radius: var(--radius-sm); background: var(--sunken); color: var(--ink); font-size: var(--t-small); font-weight: 600; line-height: 1.5; }
.cols .yield strong { display: block; margin-bottom: 6px; color: var(--action); font-size: 12px; font-weight: 750; }
ul.cols, ol.cols { margin: 0; padding: 0; list-style: none; }
.cols-2 { --cols: 2; }
.cols > aside h3 + p { margin-top: 12px; }
.cols a { color: var(--action); font-weight: 650; text-underline-offset: 3px; }
.cols > .faq-list { padding-top: 0; border-top: 2px solid var(--ink); }
.cols > .faq-list details { border-bottom: 0; }
/* Three parts per column share rows, so every heading, paragraph, and result lines up across columns. */
.cols-aligned { grid-template-rows: auto auto auto; }
.cols-aligned > article { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.cols-aligned .yield { margin-top: 0; }

/* ─── Notes ──────────────────────────────────────────────────────────────────────────────────── */

.note { position: relative; padding: 18px 20px 18px 44px; border-radius: var(--radius-sm); background: var(--sunken); color: var(--ink); font-size: var(--t-small); font-weight: 550; line-height: 1.6; }
.note::before { position: absolute; top: 1.55em; left: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--highlight); box-shadow: 0 0 0 3px color-mix(in srgb, var(--highlight) 30%, transparent); content: ""; }
.note strong { font-weight: 750; }
.band .note { background: var(--band-raised); color: var(--on-band); }

/* ─── The student label demonstration ────────────────────────────────────────────────────────── */

.privacy-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px clamp(40px, 6vw, 96px); align-items: center; padding: clamp(32px, 5vw, 64px); overflow: hidden; border-radius: var(--radius-lg); background: var(--band); color: var(--on-band); }
.privacy-panel h2 { color: var(--on-band); font-size: clamp(1.625rem, 2.6vw, 2.375rem); }
.privacy-panel p:not(.kicker) { margin-top: 18px; color: var(--on-band-muted); line-height: 1.65; }
.privacy-panel .text-link { margin-top: 18px; color: var(--highlight); }
.label-demo { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.label-demo li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, .8fr); gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--on-band-line); border-radius: 14px; background: var(--band-raised); font-size: 14px; }
.label-demo s { overflow: hidden; color: var(--on-band-muted); text-decoration-color: color-mix(in srgb, var(--on-band-muted) 70%, transparent); text-overflow: ellipsis; white-space: nowrap; }
.label-demo i { color: var(--on-band-muted); font-style: normal; opacity: .7; }
.label-demo b { justify-self: start; padding: 5px 10px; border-radius: 8px; background: var(--highlight); color: #17213c; font-size: 13px; font-weight: 750; white-space: nowrap; }
.label-demo-caption { margin-top: 12px; color: var(--on-band-muted); font-size: 13px; }

/* ─── Frames for real captures ───────────────────────────────────────────────────────────────── */

.frame { margin: 0; }
.frame-img { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-lift); }
.frame-img img { width: 100%; }
.frame figcaption { margin-top: 14px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.frame figcaption a { color: var(--action); font-weight: 650; text-underline-offset: 3px; }

/* ─── Home sections ──────────────────────────────────────────────────────────────────────────── */

.proof-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px clamp(48px, 7vw, 112px); align-items: center; column-gap: var(--col-gap); }
.proof-layout .frame-img { transform: rotate(.6deg); }

/* The roles, set as an index of large names. */
.roster { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.roster a { display: grid; grid-template-columns: 56px minmax(0, 5fr) minmax(0, 6fr) 40px; gap: 12px 24px; align-items: center; padding: 26px 8px 26px 0; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: background 200ms var(--ease); }
.roster a > span, .roster a > strong { transition: transform 300ms var(--ease), color 200ms var(--ease); }
.roster a:hover > span, .roster a:hover > strong { transform: translateX(10px); }
.roster .n { color: var(--action); font-size: var(--t-label); font-weight: 700; font-variant-numeric: tabular-nums; }
.roster strong { color: var(--ink); font-size: clamp(1.375rem, 2.4vw, 2.125rem); font-weight: 720; letter-spacing: -.04em; line-height: 1.1; transition: color 200ms var(--ease); }
.roster span:not(.n) { color: var(--body); font-size: var(--t-small); line-height: 1.6; }
.roster b { justify-self: end; color: var(--action); font-size: 22px; }
.roster a:hover { background: linear-gradient(90deg, var(--action-soft), transparent 70%); }
.roster a:hover strong { color: var(--action); }

/* The closing band: the knot, the download, and Muse. */
.cta-band { position: relative; overflow: hidden; background: var(--band); color: var(--on-band); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px clamp(48px, 7vw, 112px); align-items: center; padding-block: clamp(72px, 9vw, 136px) clamp(48px, 5vw, 72px); column-gap: var(--col-gap); }
.cta-knot { width: clamp(84px, 9vw, 128px); height: auto; margin-bottom: 36px; }
.cta-band h2 { color: var(--on-band); font-size: clamp(2.25rem, 4.6vw, 4.25rem); }
.cta-band .lead { margin-top: 22px; color: var(--on-band-muted); }
.cta-band .hero-actions { margin-top: 36px; }
.cta-band .button-secondary { border-color: var(--on-band-line); background: transparent; color: var(--on-band); }
.cta-band .button-secondary:hover { border-color: var(--on-band); }
.platform-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--on-band-line); }
.platform-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--on-band-line); }
.platform-list strong { color: var(--on-band); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 720; letter-spacing: -.04em; }
.platform-list span { color: var(--on-band-muted); font-size: var(--t-small); text-align: right; }
.cta-band .download-help { margin-top: 18px; color: var(--on-band-muted); font-size: var(--t-small); line-height: 1.6; }
.cta-band .download-help a { color: var(--on-band); font-weight: 700; text-underline-offset: 3px; }
.cta-muse { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 48px; padding-block: 32px clamp(48px, 5vw, 72px); border-top: 1px solid var(--on-band-line); }
.cta-muse h2 { color: var(--on-band); font-size: var(--t-h3); letter-spacing: -.028em; line-height: 1.2; }
.cta-muse p { max-width: 64ch; margin-top: 6px; color: var(--on-band-muted); font-size: var(--t-small); }
.cta-muse .text-link { color: var(--highlight); }

/* ─── Inner-page hero ────────────────────────────────────────────────────────────────────────── */

.page-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(48px, 6vw, 96px); align-items: center; padding-block: clamp(56px, 7vw, 112px) clamp(56px, 6vw, 96px); column-gap: var(--col-gap); }
.page-hero-main > p:not(.kicker), .page-hero-side > p { max-width: 65ch; color: var(--body); font-size: var(--t-lead); line-height: 1.55; }
.page-hero-main h1 + p { margin-top: 28px; }
.page-hero-main .hero-actions, .page-hero-side .hero-actions { margin-top: 36px; }
.page-hero-side { padding-bottom: 6px; }
.page-hero-side p + p { margin-top: 16px; }
.page-hero-side .hero-actions:first-child { margin-top: 0; }
.page-hero-aside { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.hero-panel { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--raised); box-shadow: var(--shadow-lift); }

/* A jump index: the chapters of a page. */
.jump { margin: 0; padding: 0; list-style: none; counter-reset: jump; }
.jump a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 8px 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: var(--t-small); font-weight: 650; text-decoration: none; counter-increment: jump; transition: color 160ms var(--ease); }
.jump li:last-child a { border-bottom: 0; }
.jump a::before { color: var(--action); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; content: counter(jump, decimal-leading-zero); }
.jump a::after { color: var(--action); opacity: 0; transition: opacity 160ms var(--ease), transform 160ms var(--ease); content: "↓"; }
.jump a:hover { color: var(--action); }
.jump a:hover::after { opacity: 1; }
.jump a[aria-current="true"] { color: var(--action); }

/* ─── Features: chapters ─────────────────────────────────────────────────────────────────────── */

.chapters { display: grid; grid-template-columns: minmax(0, 3.4fr) minmax(0, 8.6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.chapter-nav { position: sticky; top: calc(var(--header-h) + 32px); }
.page-index > summary { display: flex; align-items: center; min-height: 44px; margin-bottom: 12px; color: var(--ink); font-size: var(--t-small); font-weight: 700; cursor: pointer; }
.page-index > summary::after { margin-left: auto; color: var(--action); content: "+"; }
.page-index[open] > summary::after { content: "−"; }
.chapter-nav > p { margin-bottom: 12px; color: var(--muted); font-size: var(--t-label); font-weight: 700; }
.chapter { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px 24px; padding-block: 44px 48px; border-top: 1px solid var(--line); }
.chapter:first-child { padding-top: 8px; border-top: 0; }
.chapter > .n { padding-top: 10px; color: var(--action); font-size: 14px; font-weight: 750; font-variant-numeric: tabular-nums; }
.chapter h2 { font-size: clamp(1.625rem, 2.6vw, 2.375rem); }
.chapter .prose { margin-top: 20px; }
.chapter .note { grid-column: 2; margin-top: 24px; }

/* A comparison of the three platforms. */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--raised); overflow: hidden; }
.compare > article { display: flex; flex-direction: column; padding: 32px; }
.compare > article + article { border-left: 1px solid var(--line); }
.compare h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -.04em; }
.compare h3 + p { margin-top: 12px; color: var(--body); line-height: 1.65; }
.compare .yield { margin-top: auto; padding-top: 28px; }
.compare .yield p { padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink); font-size: var(--t-small); font-weight: 600; line-height: 1.55; }
.compare .yield strong { display: block; margin-bottom: 6px; color: var(--action); font-size: 12px; font-weight: 750; }

/* A call to action at the end of a page. */
.callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 64px; align-items: end; padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); }
.callout h2 { max-width: 20ch; }
.callout[data-tested-support] { padding-block: clamp(28px, 3vw, 40px); align-items: center; }
.callout[data-tested-support] h2 { max-width: none; font-size: var(--t-h3); letter-spacing: -.028em; line-height: 1.22; }
.callout[data-tested-support] p { margin-top: 8px; font-size: var(--t-body); }
.callout p { max-width: 68ch; margin-top: 18px; color: var(--body); font-size: var(--t-lead); line-height: 1.55; }
.callout .text-link, .callout .button { white-space: nowrap; }
.callout-panel { padding: clamp(32px, 5vw, 64px); border: 0; border-radius: var(--radius-lg); background: var(--sunken); }

/* ─── How it works ───────────────────────────────────────────────────────────────────────────── */

.timeline { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline::before { position: absolute; top: 24px; bottom: 40px; left: 23px; width: 1px; background: linear-gradient(180deg, var(--action), var(--line-strong)); content: ""; }
.timeline > li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 32px; padding-bottom: 56px; }
.timeline > li:last-child { padding-bottom: 0; }
.timeline .step-n { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--action); border-radius: 50%; background: var(--page); color: var(--action); font-size: 15px; font-weight: 750; font-variant-numeric: tabular-nums; }
.timeline > li:first-child .step-n { background: var(--action); color: var(--on-action); }
.timeline h3 { padding-top: 8px; font-size: clamp(1.375rem, 2.1vw, 1.875rem); letter-spacing: -.035em; }
.timeline .prose { margin-top: 14px; }
.substeps { margin-top: 24px; padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-card); }
.substeps > p { color: var(--ink); font-size: var(--t-small); }
.substeps ol { display: grid; gap: 14px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: sub; }
.substeps li { position: relative; padding-left: 38px; color: var(--body); font-size: var(--t-small); line-height: 1.6; counter-increment: sub; }
.substeps li::before { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--action-soft); color: var(--action); font-size: 12px; font-weight: 750; content: counter(sub); }
.substeps strong { color: var(--ink); }
.timeline .note { margin-top: 20px; }

/* Who does what: five parts, left to right. */
.flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.flow li { position: relative; padding: 0 24px 0 0; }
.flow li + li { padding-left: 24px; }
.flow li + li::before { position: absolute; top: 25px; left: -12px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--tint); color: var(--action); font-size: 14px; font-weight: 700; content: "→"; }
.flow .node { display: grid; place-items: center; height: 74px; margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); color: var(--ink); font-size: 16px; font-weight: 750; letter-spacing: -.02em; text-align: center; box-shadow: var(--shadow-card); }
.flow li:nth-child(3) .node { border-color: var(--action); background: var(--action); color: var(--on-action); }
.flow span:not(.node) { display: block; color: var(--body); font-size: var(--t-small); line-height: 1.6; }

/* ─── Questions ──────────────────────────────────────────────────────────────────────────────── */

.faq-list { border-top: 1px solid var(--line-strong); }
.faq-list details { border-bottom: 1px solid var(--line-strong); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding: 20px 0; color: var(--ink); cursor: pointer; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.35; list-style: none; transition: color 160ms var(--ease); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--sunken) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%23253fea' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform 200ms var(--ease), background-color 200ms var(--ease); content: ""; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list summary:hover { color: var(--action); }
.faq-list details > p, .faq-list details > div { max-width: 70ch; margin: -4px 56px 26px 0; color: var(--body); line-height: 1.7; }
@media (prefers-color-scheme: dark) { .faq-list summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%23adc0ff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } }

/* ─── Download ───────────────────────────────────────────────────────────────────────────────── */

.download-options { display: grid; gap: 14px; }
.download-option { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; align-items: center; padding: 24px 24px 24px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); box-shadow: var(--shadow-card); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.download-option:has(.button:hover, .button:focus-visible) { border-color: var(--line-strong); }
.download-option h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -.04em; }
.download-format { grid-column: 1 / -1; grid-row: 2; color: var(--muted); font-size: 14px; line-height: 1.5; }
.download-option > .button { grid-column: 2; grid-row: 1; }
.download-option > div, .download-option > details { grid-column: 1 / -1; }
.install-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(32px, 5vw, 80px); }
.install h3 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(1.5rem, 2.2vw, 2rem); letter-spacing: -.04em; }
.download-install-steps { display: grid; gap: 0; margin: 20px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; counter-reset: inst; }
.download-install-steps li { position: relative; padding: 16px 0 16px 44px; border-bottom: 1px solid var(--line); color: var(--body); line-height: 1.6; counter-increment: inst; }
.download-install-steps li::before { position: absolute; top: 16px; left: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--action-soft); color: var(--action); font-size: 12px; font-weight: 750; content: counter(inst); }
.download-install-steps strong { color: var(--ink); }
.download-computer-help summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; }
.download-first-open { margin-top: 12px; }
.download-first-open summary { min-height: 44px; padding: 10px 0; color: var(--action); font-size: var(--t-small); font-weight: 700; cursor: pointer; }
.download-first-open p { margin-top: 6px; color: var(--body); font-size: var(--t-small); line-height: 1.6; }
.aside-title { margin-bottom: 14px; color: var(--muted); font-size: var(--t-label); font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.first-open { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px clamp(24px, 4vw, 56px); margin-top: clamp(48px, 5vw, 72px); padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--raised); }
.first-open h3 { grid-column: 1 / -1; }
.first-open p { color: var(--body); font-size: var(--t-small); line-height: 1.65; }
.first-open p strong { color: var(--ink); }
.first-open a { color: var(--action); font-weight: 650; text-underline-offset: 3px; }
.download-notes h2 { font-size: clamp(1.5rem, 2.4vw, 2.125rem); }
.download-notes > p:not(.eyebrow) { margin-top: 14px; color: var(--body); line-height: 1.7; }
.download-notes a:not(.text-link) { color: var(--action); font-weight: 650; text-underline-offset: 3px; }
.download-notes .eyebrow { margin-bottom: 14px; }
.download-notes .prose { margin-top: 18px; }
.download-notes .text-link { margin-top: 14px; }

/* ─── Support ────────────────────────────────────────────────────────────────────────────────── */

.support-routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: clamp(24px, 3vw, 40px); }
.support-routes a { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; min-height: 230px; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); color: inherit; text-decoration: none; box-shadow: var(--shadow-card); transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), border-color 220ms var(--ease); }
.support-routes a:hover { border-color: var(--action); transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.support-routes a > span { color: var(--action); font-size: var(--t-label); font-weight: 700; font-variant-numeric: tabular-nums; }
.support-routes strong { font-size: var(--t-h3); letter-spacing: -.03em; line-height: 1.2; }
.support-routes small { color: var(--body); font-size: var(--t-small); line-height: 1.55; }
.support-routes b { color: var(--action); font-size: 14px; }
.issues { border-top: 1px solid var(--line); }
.issue { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; padding: 30px 0 32px; border-bottom: 1px solid var(--line); }
.issue .n { padding-top: 5px; color: var(--action); font-size: var(--t-label); font-weight: 700; font-variant-numeric: tabular-nums; }
.issue h3 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.issue > div > p { margin-top: 12px; color: var(--body); line-height: 1.7; }
.issue > div > p strong { color: var(--ink); }
.issue aside { display: grid; gap: 4px; margin-top: 18px; padding: 14px 18px; border-radius: var(--radius-sm); background: var(--sunken); }
.issue aside strong { color: var(--action); font-size: 12px; font-weight: 750; }
.issue aside span { color: var(--body); font-size: var(--t-small); line-height: 1.55; }
.issue aside[hidden] { display: none; }
.support-why-toggle { display: none; }
.issue.support-attention { margin-inline: -20px; padding-inline: 20px; border-radius: var(--radius); border-bottom-color: transparent; background: color-mix(in srgb, var(--highlight) 16%, var(--page)); }
.issue.support-attention aside { background: var(--raised); }
.issue.support-attention aside strong { color: var(--ink); }
.issue.support-dependency .n { color: var(--muted); }
.support-contact { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px clamp(40px, 6vw, 96px); align-items: end; padding: clamp(32px, 5vw, 64px); border-radius: var(--radius-lg); background: var(--band); color: var(--on-band); --focus-ring: #adc0ff; }
.support-contact h2 { color: var(--on-band); }
.support-contact p { margin-top: 18px; color: var(--on-band-muted); line-height: 1.65; }
.support-contact a:not(.button) { color: var(--on-band); font-weight: 700; }
.support-contact .support-privacy { margin-top: 0; padding: 18px 20px; border-radius: var(--radius); background: var(--band-raised); color: var(--on-band); font-size: var(--t-small); }
.support-contact .hero-actions { margin-top: 18px; }

/* ─── Policies ───────────────────────────────────────────────────────────────────────────────── */

.policy-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 32px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); 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: 700; }
.policy-meta a { color: inherit; text-underline-offset: 3px; }
.doc { display: grid; grid-template-columns: minmax(0, 3.2fr) minmax(0, 8.8fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.doc-toc { position: sticky; top: calc(var(--header-h) + 32px); max-height: calc(100vh - var(--header-h) - 64px); overflow: auto; padding-right: 8px; scrollbar-width: thin; }
.doc-toc > p { margin-bottom: 10px; color: var(--muted); font-size: var(--t-label); font-weight: 700; }
.doc-toc ol { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.doc-toc a { display: block; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; color: var(--body); font-size: 14px; font-weight: 550; line-height: 1.4; text-decoration: none; transition: color 160ms var(--ease), border-color 160ms var(--ease); }
.doc-toc a:hover { color: var(--action); }
.doc-toc a[aria-current="true"] { border-left-color: var(--action); color: var(--action); font-weight: 700; }
.doc-body { max-width: 780px; }
.doc-section { padding-block: 36px 40px; border-top: 1px solid var(--line); }
.doc-section:first-child { padding-top: 0; border-top: 0; }
.doc-section h2 { font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -.035em; line-height: 1.2; }
.doc-section p { margin-top: 14px; color: var(--body); line-height: 1.75; }
.doc-section p strong { color: var(--ink); }
.doc-section ol, .doc-section ul { margin: 14px 0 0; padding-left: 22px; color: var(--body); line-height: 1.7; }
.doc-section li + li { margin-top: 6px; }
.notice-jump { display: none; }
.policy-hero .policy-meta { margin-top: 0; }
.privacy-spotlight { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px clamp(32px, 5vw, 72px); align-items: start; margin-bottom: clamp(48px, 6vw, 88px); padding: clamp(28px, 4vw, 56px); border-radius: var(--radius-lg); background: var(--band); color: var(--on-band); --focus-ring: #adc0ff; }
.privacy-spotlight h2 { color: var(--on-band); font-size: clamp(1.75rem, 2.8vw, 2.5rem); }
.privacy-spotlight-lead > p:not(.kicker) { margin-top: 18px; color: var(--on-band-muted); line-height: 1.65; }
.privacy-spotlight .kicker { color: var(--highlight); }
.privacy-spotlight .label-demo { margin-top: 28px; }
.privacy-spotlight-details { border-top: 1px solid var(--on-band-line); }
.privacy-spotlight-details details { border-bottom: 1px solid var(--on-band-line); }
.privacy-spotlight-details summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 16px 0; color: var(--on-band); font-size: 18px; font-weight: 700; line-height: 1.35; cursor: pointer; list-style: none; }
.privacy-spotlight-details summary::-webkit-details-marker { display: none; }
.privacy-spotlight-details summary::after { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--band-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%23cbdc74' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform 200ms var(--ease); content: ""; }
.privacy-spotlight-details details[open] summary::after { transform: rotate(45deg); }
.privacy-spotlight-details details p { margin: 0 0 22px; color: var(--on-band-muted); font-size: 16px; line-height: 1.7; }

/* ─── Role pages ─────────────────────────────────────────────────────────────────────────────── */

.prompt-card { position: relative; padding: 28px; border-radius: var(--radius-lg); background: var(--band); color: var(--on-band); box-shadow: var(--shadow-lift); --focus-ring: #adc0ff; }
.prompt-card h2 { color: var(--on-band); font-size: var(--t-h3); letter-spacing: -.028em; line-height: 1.2; }
.prompt-card > p { margin-top: 8px; color: var(--on-band-muted); font-size: var(--t-small); line-height: 1.55; }
.prompt-card .role-conversation { margin-top: 20px; }
.prompt-card .role-message-request { width: 100%; padding: 18px 20px; border: 1px dashed color-mix(in srgb, var(--highlight) 60%, transparent); border-radius: 14px; background: var(--band-raised); color: var(--on-band); font-size: 15px; line-height: 1.6; }

.role-hero { align-items: center; }
.copy-button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 14px; padding: 8px 16px; border: 1px solid var(--on-band-line); border-radius: 999px; background: transparent; color: var(--on-band); font-size: 14px; font-weight: 700; transition: background 160ms var(--ease), border-color 160ms var(--ease); }
.copy-button::before { width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='5' y='5' width='9' height='9' rx='2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M11 3.5V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='5' y='5' width='9' height='9' rx='2' fill='none' stroke='black' stroke-width='1.6'/%3E%3Cpath d='M11 3.5V3a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; content: ""; }
.copy-button:hover { border-color: var(--highlight); background: var(--band-raised); }
.copy-button[data-copied="true"] { border-color: var(--highlight); color: var(--highlight); }

.role-conversation { display: grid; gap: 12px; align-self: start; }
.role-message { width: min(88%, 640px); margin: 0; padding: 16px 20px 18px; font-size: 15.5px; font-weight: 500; line-height: 1.55; }
.role-message strong { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 750; }
.role-message-request { justify-self: end; border: 1px solid var(--line); border-radius: 20px 20px 6px 20px; background: var(--raised); color: var(--ink); }
.role-message-request strong { color: var(--action); }
.role-message-response { justify-self: start; border-radius: 20px 20px 20px 6px; background: var(--reply-surface); color: var(--on-band); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--highlight) 30%, transparent); }
.role-message-response strong { color: var(--reply-label); }
.sec:not(.sec-tint) .role-message-request { background: var(--sunken); }

.checks { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 34px; color: var(--ink); font-size: var(--t-small); font-weight: 600; line-height: 1.5; }
.checks li::before { position: absolute; top: 0; left: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--highlight) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.5 2.4L12 5.2' fill='none' stroke='%2317213c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; content: ""; }

.task-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(40px, 6vw, 96px); }
.task-groups > section > h3 { margin-bottom: 20px; font-size: clamp(1.375rem, 2vw, 1.75rem); letter-spacing: -.035em; }
.task-list { margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.task-list li { padding: 24px 0 26px; border-bottom: 1px solid var(--line); }
.task-list h4 { font-size: 1.125rem; letter-spacing: -.025em; }
.task-list p { margin-top: 8px; color: var(--body); font-size: var(--t-small); line-height: 1.65; }
.task-list small { display: block; margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: var(--sunken); color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.5; }
.task-list small span { display: block; margin-bottom: 2px; color: var(--action); font-size: 12px; font-weight: 750; }
.sec-tint .task-list small { background: var(--raised); }

.role-related { padding-block: clamp(72px, 8vw, 120px); background: var(--band); color: var(--on-band); }
.role-related h2 { color: var(--on-band); }
.role-related .sec-head > p { color: var(--on-band-muted); }
.role-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--on-band-line); border-left: 1px solid var(--on-band-line); }
.role-links a { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; min-height: 150px; padding: 24px; border-right: 1px solid var(--on-band-line); border-bottom: 1px solid var(--on-band-line); color: var(--on-band); font-size: clamp(1.125rem, 1.5vw, 1.375rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; text-decoration: none; transition: background 200ms var(--ease), color 200ms var(--ease); }
.role-links a span { color: var(--highlight); }
.role-links a:hover { background: var(--band-raised); color: var(--highlight); }

/* ─── Muse ───────────────────────────────────────────────────────────────────────────────────── */

.muse-trust { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px clamp(48px, 7vw, 112px); align-items: end; }
.muse-trust .lead { margin-top: 22px; }
.muse-trust-note { padding: 28px; border-radius: var(--radius-lg); background: var(--band-raised); }
.muse-trust-note h3 { color: var(--on-band); }
.muse-trust-note p { margin-top: 10px; color: var(--on-band-muted); font-size: var(--t-small); line-height: 1.6; }
.muse-trust-note a { color: var(--highlight); font-weight: 700; text-underline-offset: 3px; }
.muse-connect .note { margin-top: 24px; }
.muse-flow-edit { margin-top: clamp(40px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--on-band-line); color: var(--on-band-muted); line-height: 1.6; }
.muse-flow-edit strong { color: var(--on-band); }
.muse-footnote { padding-block: 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ─── Build ──────────────────────────────────────────────────────────────────────────────────── */

.build-facts { margin: 0; border-top: 1px solid var(--line); }
.build-facts div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.build-facts dt { color: var(--action); font-size: var(--t-label); font-weight: 700; }
.build-facts dd { margin: 0; color: var(--body); font-size: var(--t-small); line-height: 1.6; }

/* ─── Not found ──────────────────────────────────────────────────────────────────────────────── */

.not-found { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px 80px; align-items: center; min-height: calc(100dvh - var(--header-h) - 120px); padding-block: clamp(72px, 12vh, 160px); }
.not-found h1 { font-size: clamp(2.75rem, 6vw, 5.5rem); letter-spacing: -.05em; }
.not-found > div > p { margin-top: 24px; color: var(--body); font-size: var(--t-lead); line-height: 1.55; }
.not-found .hero-actions { margin-top: 36px; }
.not-found-knot { width: clamp(160px, 22vw, 300px); height: auto; animation: knot-turn 24s linear infinite; }
@keyframes knot-turn { to { transform: rotate(360deg); } }
.not-found .roster { margin-top: 44px; }
.roster-compact a { grid-template-columns: 44px minmax(0, 4fr) minmax(0, 6fr) 32px; padding-block: 20px; }
.roster-compact strong { font-size: clamp(1.25rem, 1.8vw, 1.5rem); }

/* ─── Footer ─────────────────────────────────────────────────────────────────────────────────── */

.site-footer { padding-block: clamp(56px, 7vw, 96px) 32px; border-top: 1px solid var(--line); background: var(--page); color: var(--muted); font-size: 14px; }
main:has(> .cta-band:last-child, > .role-related:last-child) + .site-footer { border-top: 0; }
.site-footer-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px clamp(40px, 6vw, 96px); }
.footer-brand .brand { font-size: 28px; }
.footer-brand .brand-mark { width: 40px; height: 40px; }
.footer-brand p { max-width: 34ch; margin-top: 18px; color: var(--body); font-size: var(--t-small); line-height: 1.6; }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-group { display: flex; flex-direction: column; align-items: flex-start; }
.footer-group p { margin: 0 0 10px; color: var(--ink); font-size: 13px; font-weight: 750; }
.site-footer a { display: inline-flex; align-items: center; min-height: 40px; color: var(--muted); text-decoration: none; transition: color 160ms var(--ease); }
.site-footer .footer-links a:hover, .footer-bottom a:hover { color: var(--action); }
.site-footer a[aria-current="page"] { color: var(--ink); font-weight: 650; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; margin-top: clamp(40px, 5vw, 72px); padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; }

/* ─── Motion ─────────────────────────────────────────────────────────────────────────────────── */

/* script.js marks sections that start below the fold. Without the script, nothing is hidden. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@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; }
  .hero-verb-word { opacity: 0; transform: none; animation: none !important; }
  .hero-verb-word:first-child { opacity: 1; }
  .reveal { opacity: 1; transform: none; }
  .not-found-knot { animation: none; }
}

/* ─── Responsive ─────────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1180px) {
  .hero-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; align-items: start; }
  .hero-copy > .lead, .hero-copy > .hero-note { grid-column: 1; }
  .hero-copy > .hero-actions { grid-column: 2; grid-row: 1; align-self: start; margin-top: 0; }
  .cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-note { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .support-routes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .flow li, .flow li + li { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; padding: 0 0 28px; }
  .flow li + li::before { top: -26px; left: 88px; content: "↓"; }
  .flow .node { margin: 0; }
}

/* The one navigation collapse. */
@media (max-width: 980px) {
  :root { --gutter: 24px; --header-h: 64px; }
  .site-nav { position: absolute; z-index: 35; top: 100%; right: 0; left: 0; display: none; max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; align-items: stretch; gap: 0; padding: 12px var(--gutter) 20px; border-bottom: 1px solid var(--line); background: var(--raised); box-shadow: 0 24px 40px -24px rgb(0 0 0 / .3); }
  .site-nav[data-open="true"] { display: flex; flex-direction: column; }
  .site-nav > a:not(.nav-download) { padding: 12px; border-radius: 10px; font-size: 16px; }
  .nav-group { display: block; }
  .nav-menu-button { width: 100%; justify-content: space-between; padding: 12px; border-radius: 10px; font-size: 16px; }
  .nav-menu { position: static; width: auto; min-width: 0; margin: 0 0 6px; border: 0; box-shadow: none; background: var(--sunken); animation: none !important; }
  .nav-menu a { padding-left: 20px; font-size: 15px; }
  .nav-download { justify-content: center; min-height: 50px; margin: 12px 0 0; font-size: 15px; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--ink); font-size: 14px; 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); }

  .first-open { grid-template-columns: minmax(0, 1fr); }
  .split, .sec-head, .chapters, .doc, .proof-layout, .privacy-panel, .page-hero, .muse-trust, .cta-grid, .support-contact, .privacy-spotlight, .site-footer-inner, .task-groups, .install-grid { grid-template-columns: minmax(0, 1fr); }
  .split-head, .chapter-nav, .doc-toc { position: static; max-height: none; }
  .sec-head { gap: 20px; }
  .chapter-nav { display: block; }
  .doc-toc { display: none; }
  .notice-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
  .notice-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--action); font-size: 14px; font-weight: 650; text-decoration: none; }
  .page-hero { align-items: start; }
  .page-hero-aside { max-width: 640px; }
  .proof-layout .frame-img { transform: none; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .steps::before { display: none; }
  .cols { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .compare > article + article { border-left: 0; border-top: 1px solid var(--line); }
  .callout { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .roster a { grid-template-columns: 40px minmax(0, 1fr) 32px; }
  .roster span:not(.n) { grid-column: 2; }
  .roster b { grid-column: 3; grid-row: 1 / span 2; }
  .not-found { grid-template-columns: minmax(0, 1fr); }
  .not-found-knot { grid-row: 1; width: 120px; }
}

@media (max-width: 920px) {
  /* 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: 10px; padding: 12px; border-radius: 14px; 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%; min-height: 44px; 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: var(--action-soft); color: var(--action); }
  .hero-copy { grid-template-columns: minmax(0, 1fr); }
  .hero-copy > .hero-actions { grid-column: 1; grid-row: auto; margin-top: 28px; }
}

@media (max-width: 760px) {
  .cells, .support-routes, .role-links { grid-template-columns: minmax(0, 1fr); }
  .cell { min-height: 0; }
  .cell strong { margin-top: 20px; }
  .support-routes a { min-height: 0; }
  .role-links a { min-height: 88px; }
  .flow li, .flow li + li { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .flow li + li::before { left: 50%; transform: translateX(-50%); }
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-group:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .footer-group:last-child p { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  :root { --gutter: 16px; --sec: 56px; }
  .site-header-inner { gap: 12px; }
  .header-actions .nav-download { padding-inline: 12px; font-size: 13px; }
  .github-link { display: none; }
  .github-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hero { padding-top: 32px; }
  .hero h1 { font-size: clamp(1.5rem, 6.5vw, 1.875rem); }
  .hero-layout { margin-top: 24px; gap: 32px; }
  .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
  .hero-actions:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .button { width: 100%; min-height: 52px; padding: 10px 12px; gap: 8px; font-size: 14px; white-space: nowrap; }
  .hero-actions .button .desktop-action-label { display: none; }
  .hero-actions .button .mobile-action-label { display: inline; }
  .hero-conversation .scenario-panel { padding: 12px 14px 18px; }
  .conversation { gap: 8px; }
  .conversation-bubble, .hero-conversation .conversation-response { width: 100%; padding: 13px 15px; }
  .conversation-bubble p { font-size: 16px; line-height: 1.5; }
  .mobile-example-toggle { display: inline-flex; align-items: center; justify-content: center; justify-self: start; align-self: flex-start; 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; }
  .role-message { width: 100%; padding: 13px 15px; font-size: 16px; line-height: 1.5; }
  .sec-head { margin-bottom: 32px; }
  .page-hero { padding-block: 40px 48px; }
  .index > li, .index > div, .index > p, .index > article { grid-template-columns: 36px minmax(0, 1fr); padding: 20px 0 22px; }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .steps > li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 18px; }
  .steps .step-n { grid-row: 1 / span 2; margin: 0; }
  .steps h3 { padding-top: 10px; }
  .timeline > li { grid-template-columns: 40px minmax(0, 1fr); gap: 0 16px; }
  .timeline .step-n { width: 40px; height: 40px; }
  .timeline::before { left: 19px; }
  .substeps { padding: 18px; }
  .chapter { grid-template-columns: minmax(0, 1fr); padding-block: 32px; }
  .chapter > .n { padding: 0; }
  .chapter .note { grid-column: 1; }
  .compare > article { padding: 24px; }
  .roster a { grid-template-columns: 30px minmax(0, 1fr) 24px; gap: 6px 12px; padding: 20px 0; }
  .roster a:hover { background: none; }
  .roster a:hover > span, .roster a:hover > strong { transform: none; }
  .label-demo li { grid-template-columns: minmax(0, 1fr) auto; }
  .label-demo i { display: none; }
  .privacy-panel, .privacy-spotlight, .support-contact, .callout-panel { padding: 28px 22px; border-radius: var(--radius); }
  .download-option { grid-template-columns: minmax(0, 1fr); padding: 22px; }
  .download-option > .button { grid-column: 1; grid-row: auto; margin-top: 14px; }
  .download-option > div { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
  .download-option > div h3 { font-size: var(--t-h3); line-height: 1.25; }
  /* script.js moves each install guide into its download card here, so the shared heading has nothing under it. */
  .download-install-guides .sec-head { display: none; }
  .download-install-guides .first-open { margin-top: 0; }
  .faq-list details > p, .faq-list details > div { margin-right: 0; }
  .issue { grid-template-columns: minmax(0, 1fr); padding: 24px 0; }
  .issue .n { padding: 0; }
  .issue.support-attention { margin-inline: -12px; padding-inline: 12px; }
  .support-why-toggle { display: inline-flex; align-self: flex-start; min-height: 44px; align-items: center; margin-top: 8px; padding: 8px 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--action); font-size: 15px; font-weight: 750; }
  .cta-muse { display: grid; }
  .platform-list li { display: grid; gap: 4px; }
  .platform-list span { text-align: left; }
  .build-facts div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .footer-bottom { display: grid; }
}

@media (max-width: 360px) {
  .header-actions .menu-toggle { justify-content: center; width: 44px; padding-inline: 0; }
  .menu-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}