/* Layout: a launcher window. The hero is keeplaunch's tile grid of real app icons; everything else is a quiet
   two-column document in the app's own palette (app/style.css), serif display over a system sans. */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --fg: #16181d;
  --muted: #646a76;
  --line: #e2e5ea;
  --accent: #2f6fdf;
  --accent-fg: #ffffff;
  --accent-soft: #e8effc;
  --shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 1px 3px rgb(16 24 40 / 0.08);
  --shadow-lg: 0 12px 32px rgb(16 24 40 / 0.14);
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", Georgia, serif;
  --body: system-ui, "Segoe UI", Roboto, "Noto Sans", "DejaVu Sans", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "DejaVu Sans Mono", monospace;
  --radius: 12px;
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115;
    --surface: #181b21;
    --fg: #e8eaee;
    --muted: #a3aab6;
    --line: #2a2f38;
    --accent: #6f9cf0;
    --accent-fg: #0f1115;
    --accent-soft: #1f2a3f;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0f1115;
  --surface: #181b21;
  --fg: #e8eaee;
  --muted: #a3aab6;
  --line: #2a2f38;
  --accent: #6f9cf0;
  --accent-fg: #0f1115;
  --accent-soft: #1f2a3f;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p { margin: 0; }
code { font-family: var(--mono); font-size: 0.92em; background: var(--accent-soft); padding: 0.08em 0.4em; border-radius: 6px; }
.eyebrow { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); font-weight: 600; }
.muted { color: var(--muted); }
.lede { font-size: 1.15rem; max-width: 36rem; color: var(--muted); }

.wrap { width: min(1120px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
section.block { padding-block: clamp(48px, 7vw, 96px); border-top: 1px solid var(--line); }
.block-head { display: grid; gap: 10px; max-width: 40rem; margin-bottom: clamp(28px, 4vw, 48px); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0.6em 1.15em; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--fg); font: inherit; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer; line-height: 1.2;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.large { padding: 0.8em 1.4em; font-size: 1.05rem; }

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 16px; min-height: 60px; }
/* Wordmark: "keep" + the second half of a public app's name, cycling, with that app's icon in step. Every name and
   icon is stacked in one grid cell, so the mark is as wide as its longest name and nothing beside it moves; the
   nth-child delays below stagger a shared keyframe. The first child is the page's lead app, which is also the one
   that stays when motion is reduced. The whole thing is aria-hidden; the link carries one stable label. */
.wordmark { display: inline-flex; align-items: center; font-family: var(--body); font-weight: 700; font-size: 1.125rem; color: var(--fg); text-decoration: none; letter-spacing: -0.02em; white-space: nowrap; }
.wm-icons, .wm-names { display: inline-grid; align-items: center; }
.wm-icons { margin-right: 10px; }
.wm-icons > img, .wm-names > span { grid-area: 1 / 1; opacity: 0; animation: wm-cycle 18s ease-in-out infinite; }
.wm-icons > img, .wordmark > img { width: 28px; height: 28px; }
.wordmark > img { margin-right: 10px; }
.wm-names { font-weight: 500; color: var(--muted); justify-items: start; }
.wm-icons > :nth-child(1), .wm-names > :nth-child(1) { animation-delay: 0s; }
.wm-icons > :nth-child(2), .wm-names > :nth-child(2) { animation-delay: 3s; }
.wm-icons > :nth-child(3), .wm-names > :nth-child(3) { animation-delay: 6s; }
.wm-icons > :nth-child(4), .wm-names > :nth-child(4) { animation-delay: 9s; }
.wm-icons > :nth-child(5), .wm-names > :nth-child(5) { animation-delay: 12s; }
.wm-icons > :nth-child(6), .wm-names > :nth-child(6) { animation-delay: 15s; }
@keyframes wm-cycle {
  0% { opacity: 0; transform: translateY(0.35em); }
  3.5% { opacity: 1; transform: none; }
  14% { opacity: 1; transform: none; }
  17.5% { opacity: 0; transform: translateY(-0.35em); }
  100% { opacity: 0; transform: translateY(-0.35em); }
}
@media (prefers-reduced-motion: reduce) {
  .wm-icons > img, .wm-names > span { animation: none; }
  .wm-icons > :first-child, .wm-names > :first-child { opacity: 1; transform: none; }
  .wm-icons > :not(:first-child), .wm-names > :not(:first-child) { display: none; }
}
.top nav { display: flex; gap: 22px; margin-inline: auto; }
.top nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.top nav a:hover { color: var(--fg); }
.top .actions { display: flex; gap: 10px; margin-left: auto; }

/* Hero */
.hero { padding-block: clamp(40px, 7vw, 96px); border-top: 1px solid var(--line); background: var(--surface); }
.hero .launcher { background: var(--bg); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero-copy .cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { font-size: 0.92rem; color: var(--muted); }
.hero-note code { background: transparent; padding: 0; color: var(--fg); }

.launcher {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg);
  padding: 14px; display: grid; gap: 12px; min-width: 0;
}
.launcher-bar { display: flex; align-items: center; gap: 8px; padding-inline: 4px; font-size: 0.82rem; color: var(--muted); font-family: var(--mono); }
.launcher-bar .dots { display: inline-flex; gap: 5px; }
.launcher-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.tiles li { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 8px 0; border-radius: 10px; min-width: 0; transition: transform 0.15s, background 0.15s; }
.tiles li:hover { background: var(--accent-soft); transform: translateY(-2px); }
.tiles img { width: 100%; max-width: 64px; aspect-ratio: 1; }
.tiles span { font-size: 0.66rem; letter-spacing: -0.01em; color: var(--muted); line-height: 1.2; max-width: 100%; }

/* Who are you: the whole front page is four doors */
.who { padding-block: clamp(40px, 8vw, 110px); min-height: calc(100vh - 60px); display: grid; align-content: center; }
.who .block-head { max-width: 44rem; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.5vw, 24px); }
.choice {
  display: grid; gap: 10px; align-content: start; min-width: 0; padding: 24px; color: var(--fg); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.choice:hover, .choice:focus-visible { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.choice svg { width: 36px; height: 36px; color: var(--accent); }
.choice h2 { font-size: 1.5rem; }
.choice p { color: var(--muted); }
.choice .go { color: var(--accent); font-weight: 600; margin-top: 6px; }
.choice .go::after { content: " \2192"; }

/* Subpages */
.switch { font-size: 0.92rem; color: var(--muted); }
.points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.point { display: grid; gap: 8px; align-content: start; min-width: 0; padding-top: 16px; border-top: 2px solid var(--accent); }
.point p { color: var(--muted); }
.unit { font-family: var(--display); font-style: italic; }
.rules { display: grid; gap: 14px; margin: 0; max-width: 46rem; }
.rules div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.rules dt { font-weight: 600; }
.rules dd { margin: 0; color: var(--muted); }

/* Apps: a sliding bar. Three copies of the strip and a slide of one strip width make the loop seamless; the bar
   never pauses, a hovered or focused tile just reveals its card in the space reserved below the strip. */
.marquee { --tile: 168px; --card: 270px; position: relative; overflow: hidden; padding-block: 8px 180px; }
.hint { position: absolute; left: 0; right: 0; bottom: 64px; text-align: center; font-size: 0.9rem; color: var(--muted); padding-inline: var(--gutter); transition: opacity 0.15s; }
.marquee:hover .hint, .marquee:focus-within .hint { opacity: 0; }
.track { display: flex; width: max-content; animation: slide 45s linear infinite; }
.strip { display: flex; gap: 14px; padding: 0 7px; margin: 0; list-style: none; }
@keyframes slide { to { transform: translateX(calc(-100% / 3)); } }
.tile { position: relative; width: var(--tile); display: grid; gap: 10px; justify-items: center; text-align: center; padding: 14px 8px; border-radius: 16px; border: 1px solid transparent; cursor: default; transition: background 0.15s, border-color 0.15s; }
.tile img { width: 104px; height: 104px; }
.tile > span { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); line-height: 1.2; overflow-wrap: anywhere; }
.tile:hover, .tile:focus { background: var(--surface); border-color: var(--accent); z-index: 2; outline: none; }
.tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.info {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px);
  width: var(--card); text-align: left; padding: 14px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}
.tile:hover .info, .tile:focus .info { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.tile:first-child .info { left: 0; transform: translateX(0) translateY(-4px); }
.tile:first-child:hover .info, .tile:first-child:focus .info { transform: translateX(0) translateY(0); }
.info b { font-family: var(--mono); font-size: 0.95rem; }
.info em { font-style: normal; font-size: 0.72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; vertical-align: 2px; }
.info p { color: var(--muted); font-size: 0.9rem; margin-top: 4px; }
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; width: auto; }
  .marquee { overflow-x: auto; }
  .strip[aria-hidden="true"] { display: none; }
}

/* Trust */
.trust { background: var(--surface); }
.guarantees { display: grid; gap: clamp(20px, 3vw, 36px); }
.guarantees summary {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--accent); width: fit-content; max-width: 100%;
}
.guarantees summary::-webkit-details-marker { display: none; }
.guarantees summary::after { content: ""; width: 0.5em; height: 0.5em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.15em) rotate(45deg); transition: transform 0.15s; }
.guarantees[open] summary::after { transform: translateY(0.1em) rotate(-135deg); }
.guarantees summary:hover { text-decoration: underline; }
.guarantees summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.fact { display: grid; gap: 8px; align-content: start; min-width: 0; padding-top: 16px; border-top: 2px solid var(--accent); }
.fact p { color: var(--muted); }
.fact code { background: var(--accent-soft); }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; max-width: 720px; }
.plan { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.amount { font-family: var(--display); font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.amount span { font-family: var(--body); font-size: 1rem; font-weight: 500; color: var(--muted); }
.then { font-weight: 500; }
math { font-family: "Cambria Math", "Latin Modern Math", "STIX Two Math", "Noto Sans Math", math; font-size: 1.05em; }
math[display="block"] { display: block math; max-width: 100%; overflow-x: auto; padding-block: 4px; color: var(--fg); }
.plan .btn { align-self: flex-start; margin-top: auto; padding-top: 0.6em; }
.plan .muted { margin-bottom: 10px; }
.batch { display: grid; gap: 12px; max-width: 720px; margin-top: clamp(28px, 4vw, 44px); padding-top: 24px; border-top: 1px solid var(--line); }
.batch .keys div { grid-template-columns: 12rem minmax(0, 1fr); }

/* Get started */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: step; }
.steps > li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.steps > li::before {
  counter-increment: step; content: counter(step);
  font-family: var(--display); font-size: 2rem; font-weight: 700; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.step-body { display: grid; gap: 10px; min-width: 0; }
.step-body p { color: var(--muted); }
.keys { display: grid; gap: 8px; margin: 0; }
.keys div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 12px; }
.keys dt { font-weight: 600; }
.keys dd { margin: 0; color: var(--muted); }
.step-body .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* Ways to install: a choice grid inside step 2, then the custom box. Tiles sit on --bg so they read as choices inside
   the surface-coloured step card rather than as more cards; the first tile is tagged, not coloured, so the rest stay equal. */
h4 { font-family: var(--body); font-size: 1.05rem; font-weight: 600; line-height: 1.25; margin: 0; }
.ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 6px 0 0; padding: 0; }
.way { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; color: var(--fg); }
.way > p { color: var(--muted); font-size: 0.95rem; }
.way-tag { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; }
.way > .way-tag { color: var(--accent); }
.way .next { color: var(--fg); font-weight: 500; font-size: 0.92rem; margin-top: auto; padding-top: 4px; }
.way .next code { background: transparent; padding: 0; color: var(--accent); overflow-wrap: anywhere; }
.cmd { margin: 0; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: 0.86rem; line-height: 1.5; overflow-x: auto; user-select: all; -webkit-user-select: all; }
.cmd code { background: transparent; padding: 0; font-size: inherit; color: var(--fg); }
.check { font-size: 0.9rem; }
.check code { overflow-wrap: anywhere; }
.custom { display: grid; gap: 12px; padding: 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
.custom-head { display: grid; gap: 6px; }
.custom label { font-weight: 600; font-size: 0.92rem; }
.custom textarea {
  display: block; width: 100%; min-height: 6.5em; padding: 10px 12px; resize: vertical;
  font: inherit; line-height: 1.5; color: var(--fg); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px;
}
.custom textarea::placeholder { color: var(--muted); opacity: 1; }
.custom textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.custom-steps { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; color: var(--muted); font-size: 0.95rem; }
.custom-steps li::marker { color: var(--accent); font-weight: 600; }
.custom-steps code { overflow-wrap: anywhere; }
.custom-note { font-size: 0.88rem; }
kbd { font-family: var(--mono); font-size: 0.85em; padding: 0.05em 0.4em; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); color: var(--fg); }

/* Footer */
footer { border-top: 1px solid var(--line); padding-block: 32px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 0.92rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
footer nav a { color: var(--muted); text-decoration: none; }
footer nav a:hover { color: var(--fg); }

/* Narrow */
@media (max-width: 980px) {
  .points { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .top nav { display: none; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); }
  .facts, .plans { grid-template-columns: minmax(0, 1fr); }
  .marquee { --tile: 128px; --card: 240px; padding-bottom: 200px; }
  .hint { bottom: 72px; }
  .tile img { width: 80px; height: 80px; }
  .steps > li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 18px; }
  .steps > li::before { font-size: 1.6rem; }
  .keys div, .batch .keys div, .rules div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ways { grid-template-columns: minmax(0, 1fr); }
  .way, .custom { padding: 14px; }
  .choices { grid-template-columns: minmax(0, 1fr); }
  .who { min-height: 0; }
  .btn.large { width: 100%; }
}
@media (max-width: 420px) {
  .top .wrap { gap: 10px; }
  .wordmark { font-size: 1rem; }
  .wm-icons { margin-right: 6px; }
  .tiles { gap: 6px; }
  .tiles span { font-size: 0.58rem; letter-spacing: -0.02em; }
  .btn { padding-inline: 0.9em; }
}

/* Three plan cards; the pay note sits under them in the muted voice of the rest of the pricing copy. */
.plans.three { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; }
.pay-note { max-width: 720px; margin-top: 14px; font-size: 0.92rem; color: var(--muted); }
.btn.closed { background: var(--bg); color: var(--muted); border-style: dashed; cursor: not-allowed; font-weight: 500; }
.btn.closed:hover { border-color: var(--line); filter: none; }

/* The plan builder (quote.html) and the installer menu share one control language: a fieldset is a bordered row of
   chips, a chip is a label wrapping its own input, and the result is one surface card with the amount set in the display face. */
.builder-form { display: grid; gap: 14px; min-width: 0; }
.builder-form fieldset, .menu fieldset { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 12px 14px 14px; border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.builder-form legend, .menu legend { padding: 0 6px; font-weight: 600; font-size: 0.95rem; }
.opt { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.95rem; line-height: 1.3; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.opt input { margin: 0; accent-color: var(--accent); }
.opt:hover { border-color: var(--accent); }
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.opt:has(input:disabled) { color: var(--muted); cursor: not-allowed; border-style: dashed; background: transparent; }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt-sub { color: var(--muted); font-size: 0.88em; font-variant-numeric: tabular-nums; }
.opt-sub:empty { display: none; }
.opt-sub::before { content: "·"; margin-right: 6px; }
.menu select, .menu input[type="text"], .login-form input[type="text"] { font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--fg); min-width: 0; }
.login-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(20px, 3vw, 36px); align-items: start; max-width: 1000px; margin-bottom: 40px; }
.login-form { display: grid; gap: 10px; min-width: 0; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.login-form label { font-weight: 600; }
.login-form input[type="text"] { padding: 10px 12px; font-family: var(--mono); font-size: 0.95rem; }
.login-form .btn { justify-self: start; margin-top: 6px; }
.login-source { font-size: 0.88rem; color: var(--muted); }
.login-source:empty { display: none; }
#login .points, #course-login .points { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
#course-server-row { display: grid; gap: 10px; }
.builder-out ul { margin: 0; padding-left: 1.2em; color: var(--muted); display: grid; gap: 4px; }
.builder-out .btn { align-self: flex-start; margin-top: 8px; }
@media (max-width: 820px) {
  .plans.three { grid-template-columns: minmax(0, 1fr); }
}

/* Plan builder: the picker on the left, the running total on the right; stacks at phone width. */
.quote-page .block-head { max-width: 46rem; }
.quote-title { font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: 0; }
.builder { display: grid; gap: 16px; max-width: 1000px; }
.builder-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 18px; align-items: start; }
.builder-form fieldset.ignored { opacity: 0.55; }
.builder-out { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; position: sticky; top: calc(env(safe-area-inset-top, 0px) + 76px); }
.builder-out .amount:empty { display: none; }
.builder-out .amount span { display: block; margin-top: 4px; }
.builder-note { color: var(--muted); font-size: 0.95rem; }
.builder-note:empty { display: none; }
.checkout { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--muted); overflow-wrap: anywhere; }
.b-bundles { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.92rem; color: var(--muted); }
.b-bundles li { display: flex; gap: 8px; align-items: baseline; }
.b-bundles li::before { content: ""; flex: none; width: 0.6em; height: 0.6em; border-radius: 50%; border: 1.5px solid var(--line); transform: translateY(-0.05em); }
.b-bundles li.on { color: var(--fg); }
.b-bundles li.on::before { background: var(--accent); border-color: var(--accent); }
.b-bundles b { font-weight: 600; }

/* Installer menu: the choices on top, the command below them in the same .cmd block the preset tiles use. */
.menu { display: grid; gap: 12px; padding: 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; min-width: 0; }
.menu-head { display: grid; gap: 6px; }
.menu-head p { color: var(--muted); font-size: 0.95rem; }
.menu fieldset { background: var(--surface); }
.menu .sub { display: none; flex-basis: 100%; gap: 8px 10px; flex-wrap: wrap; align-items: center; padding-top: 4px; }
.menu.src-class .sub.for-class, .menu.scope-apps .sub.for-apps { display: flex; }
.menu .sub label.field { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.menu .sub input[type="text"] { width: 10em; }
.menu .opt { background: var(--bg); }
.menu .opt:has(input:checked) { background: var(--accent-soft); }
.menu-out { display: grid; gap: 10px; }
.menu-out .cmd { user-select: text; -webkit-user-select: text; }
.menu-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.menu-file { display: grid; gap: 8px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 8px; font-size: 0.92rem; color: var(--muted); }
.menu-file .cmd { font-size: 0.82rem; }

/* ADHD wording switch: a strip under the header, and the copy it swaps. Only the words change; the palette stays. */
.adhd-bar { background: var(--surface); border-bottom: 1px solid var(--line); }
.adhd-bar .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-height: 44px; padding-block: 6px; font-size: 0.92rem; color: var(--muted); }
.toggle { position: relative; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--fg); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .knob { position: relative; flex: none; width: 40px; height: 22px; border-radius: 999px; background: var(--line); transition: background 0.15s; }
.toggle .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow); transition: transform 0.15s; }
.toggle input:checked + .knob { background: var(--accent); }
.toggle input:checked + .knob::after { transform: translateX(18px); }
.toggle input:focus-visible + .knob { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.adhd, .adhd-only { display: none; }
:root[data-adhd="on"] .adhd { display: inline; }
:root[data-adhd="on"] .adhd-only { display: block; }
:root[data-adhd="on"] section.adhd-only { display: block; }
:root[data-adhd="on"] .std { display: none; }
.studies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.study { display: grid; gap: 8px; align-content: start; min-width: 0; padding-top: 16px; border-top: 2px solid var(--accent); }
.study p { color: var(--muted); }
.study .feature { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--accent); }
.studies-note { max-width: 40rem; margin-top: clamp(20px, 3vw, 32px); font-size: 0.92rem; color: var(--muted); }

/* Works cited: numbered references in the study copy jump to the list at the foot of the page, and each entry jumps back. */
.ref { font-size: 0.78em; font-weight: 600; text-decoration: none; vertical-align: super; line-height: 1; padding-inline: 1px; }
.ref:hover { text-decoration: underline; }
.cited { margin: 0; padding-left: 1.6em; max-width: 46rem; display: grid; gap: 12px; font-size: 0.95rem; color: var(--muted); }
.cited li { padding-left: 4px; overflow-wrap: anywhere; scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 76px); }
.cited li:target { color: var(--fg); }
.cited li::marker { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; }
.cited a { color: var(--accent); }
.cited .back { text-decoration: none; margin-left: 6px; }

@media (max-width: 720px) {
  .builder-body, .login-body, .studies { grid-template-columns: minmax(0, 1fr); }
  .builder-out { position: static; }
  .menu { padding: 14px; }
}