/* The header name's font, self-hosted (SIL Open Font License, fonts/orbitron-OFL.txt beside it). Used only for .house-name. */
@font-face {
  font-family: "Orbitron"; font-weight: 700; font-style: normal; font-display: swap;
  src: url(fonts/orbitron-latin-700-normal.woff2) format("woff2");
}
:root {
  --bg: #e9eef0;
  --surface: #ffffff;
  --ink: #14212a;
  --muted: #4d5f69;
  --line: #c6d1d6;
  --wire: #8fa2ab;
  --warn: #8a5a00;
  --warn-soft: #f6ead0;
  --done: #239a3f;
  --done-ink: #11181c;
  --display: "Bahnschrift", "DIN Alternate", "Avenir Next Condensed", "Segoe UI", system-ui, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", "Avenir Next", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-mode="light"]) {
    --bg: #11181c;
    --surface: #182126;
    --ink: #e4edf0;
    --muted: #9badb4;
    --line: #2b3940;
    --wire: #4f626b;
    --warn: #f0bf5a;
    --warn-soft: #3a2e14;
    --done: #5be36f;
    --done-ink: #11181c;
    color-scheme: dark;
  }
}
:root[data-colour-mode="dark"] {
  --bg: #11181c;
  --surface: #182126;
  --ink: #e4edf0;
  --muted: #9badb4;
  --line: #2b3940;
  --wire: #4f626b;
  --warn: #f0bf5a;
  --warn-soft: #3a2e14;
  --done: #5be36f;
  --done-ink: #11181c;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
}
@media (min-width: 1600px) { body { font-size: 19px; } }

/* House frame */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px, 4vw, 56px);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.bar-left { display: flex; align-items: center; gap: 12px 28px; min-width: 0; }
.house { display: flex; align-items: center; gap: 12px; color: var(--ink); flex: none; }
/* Clear space around the tower is at least a quarter of its height (9px of 36): the bar's padding and this gap keep it. */
.house .logo { display: block; height: 36px; width: auto; }
.house-name { font-family: "Orbitron", var(--display); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; }
.chip { display: flex; flex: none; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 1rem; white-space: nowrap; }
.chip img { width: 28px; height: 28px; border-radius: 7px; }
.chip span { color: var(--muted); font-family: var(--body); font-weight: 400; font-size: .85rem; }

.frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1500px; margin: 0 auto;
  padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 56px) 80px;
  gap: clamp(24px, 4vw, 72px);
}
/* In one column the page comes first and the pinned picture follows it. */
.scope { order: 2; }
@media (min-width: 1080px) {
  .frame { grid-template-columns: minmax(380px, 5fr) minmax(0, 6fr); align-items: start; }
  .scope { position: sticky; top: 32px; order: 0; }
}

/* The pinned picture */
.scope { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: clamp(16px, 2vw, 28px); }
.scope img { display: block; width: 100%; height: auto; }
.scope figcaption { margin-top: 12px; color: var(--muted); font-size: .9rem; }
.badge-pill { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--accent); border: 1.5px solid var(--accent); border-radius: 999px; padding: 4px 12px 4px 10px; white-space: nowrap; }
.bar-right { display: flex; align-items: center; gap: 18px; }
@media (max-width: 560px) { .badge-pill { display: none; } }
.not { margin: 2.2em 0 0; max-width: 40em; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.not h2 { margin: 0 0 .4em; }
.not p { margin: 0 0 .9em; }
.not ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.not li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 8px; background: var(--bg); font-size: .95rem; }
.not li::before { content: ""; width: 12px; height: 2.5px; background: var(--muted); border-radius: 2px; }
.not .yes { margin: 1em 0 0; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Pages */
.page:focus { outline: none; }
.page h1 {
  font-family: var(--display); font-weight: 600; font-stretch: 87.5%;
  font-size: clamp(2.1rem, 3.3vw, 3.5rem); line-height: 1.06; letter-spacing: -.01em;
  margin: 0 0 .5em; max-width: 18ch; text-wrap: balance;
}
.page h2 { font-family: var(--display); font-weight: 600; font-size: 1.45rem; line-height: 1.2; margin: 2.2em 0 .6em; }
.page h2:first-child { margin-top: 0; }
.lead { font-size: 1.22rem; line-height: 1.5; max-width: 34em; margin: 0 0 1em; }
.page p { max-width: 36em; }
.quiet { color: var(--muted); }

.apps { display: grid; grid-template-columns: 1fr; gap: 0; margin: 1.6em 0 0; border-top: 1px solid var(--line); max-width: 40em; }
@media (min-width: 640px) { .apps { grid-template-columns: 1fr 1fr; } }
.apps div { padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) { .apps div + div { padding-left: 24px; border-left: 1px solid var(--line); } .apps div:first-child { padding-right: 24px; } }
.apps strong { display: block; font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.apps span { color: var(--muted); font-size: .95rem; }

/* Checklist */
.checks { list-style: none; margin: 0; padding: 0; max-width: 40em; }
.checks li { border-bottom: 1px solid var(--line); }
.checks label { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 16px 0; cursor: pointer; }
.checks input { appearance: none; -webkit-appearance: none; margin: 3px 0 0; width: 26px; height: 26px; border: 2px solid var(--wire); border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--surface); }
.checks input::after { content: ""; width: 10px; height: 6px; border-left: 3px solid var(--accent-ink); border-bottom: 3px solid var(--accent-ink); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.checks input:checked { background: var(--accent); border-color: var(--accent); }
.checks input:checked::after { opacity: 1; }
.checks input:focus-visible { outline: 3px solid var(--second); outline-offset: 3px; }
.checks .title { font-weight: 600; display: block; }
.checks .detail { color: var(--muted); font-size: .95rem; display: block; margin-top: 2px; }
.tally { margin: 14px 0 0; color: var(--muted); font-size: .95rem; }
.tally.all { color: var(--accent); font-weight: 600; }

.proof { margin: 2em 0 0; padding: 18px 20px; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 10px 10px 0; max-width: 40em; }
.proof p { margin: .2em 0 0; }

.count { color: var(--muted); font-size: .9rem; margin: -18px 0 22px; }

.where { display: inline-block; font-size: .9rem; font-weight: 600; color: var(--accent); margin-bottom: 8px; }
.where.second { color: var(--second); }

.expect { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; max-width: 38em; }
.expect h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--muted); }
.expect ul { list-style: none; margin: 0; padding: 0; }
.expect li { padding: 6px 0; }
.status { font-family: var(--display); font-weight: 700; letter-spacing: .06em; font-size: 1.15rem; color: var(--accent); }
.status.second { color: var(--second); }
.said { font-weight: 600; }
.said::before { content: "\201C"; } .said::after { content: "\201D"; }
.tag { color: var(--muted); font-size: .9rem; margin-left: 6px; }
.note { margin: 16px 0 0; color: var(--muted); max-width: 36em; }

.actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin: 32px 0 0; }
button { font: inherit; cursor: pointer; }
.primary { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px; padding: 14px 26px; font-family: var(--display); font-weight: 600; font-size: 1.08rem; letter-spacing: .01em; }
.primary:hover { filter: brightness(1.08); }
.secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--wire); border-radius: 10px; padding: 12.5px 22px; font-size: 1rem; }
.secondary:hover { border-color: var(--ink); }
.link { background: none; border: 0; padding: 6px 2px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size: .95rem; }
.link:hover { color: var(--ink); }
button:focus-visible { outline: 3px solid var(--second); outline-offset: 3px; }

/* Help page */
.issues { list-style: none; margin: 0; padding: 0; max-width: 40em; }
.issue { border-top: 1px solid var(--line); padding: 20px 0; }
.issue:last-child { border-bottom: 1px solid var(--line); }
.issue .seen { font-size: 1.12rem; font-weight: 600; margin: 0 0 10px; }
.issue dl { margin: 0; display: grid; grid-template-columns: 64px 1fr; gap: 6px 14px; }
.issue dt { color: var(--muted); font-size: .9rem; padding-top: 2px; }
.issue dd { margin: 0; }
.issue dd.fix { color: var(--ink); font-weight: 600; }
.issue .slot { color: var(--muted); font-style: italic; font-weight: 400; }

/* Finish */
.pass { list-style: none; padding: 0; margin: 0; max-width: 38em; }
.pass li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pass li::before { content: ""; width: 22px; height: 22px; margin-top: 3px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.5l3.2 3L16 8' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.extra { max-width: 38em; }
.extra p { margin: .5em 0; }
.thanks { margin: 2.4em 0 0; max-width: 34em; font-size: 1.15rem; }
.sign { font-family: var(--display); font-weight: 600; margin-top: .6em; }

.foot { margin-top: 48px; color: var(--muted); font-size: .85rem; }

/* v2: labelled steps, Got stuck?, screenshots */
.stages { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin: 0 0 26px; }
.stage { display: flex; flex: none; align-items: center; gap: 10px; }
.stage-name { font-family: var(--display); font-weight: 600; font-size: .9rem; color: var(--muted); }
.stage-name.now { color: var(--ink); }
.stage-name.done { color: var(--accent); }
.pills { display: flex; flex-wrap: nowrap; gap: 4px; }
@media (max-width: 560px) {
  .stages { gap: 8px 10px; }
  .stage:not(.current) .pills { display: none; }
  .stage:not(.current) .stage-name { border: 1.5px solid var(--line); border-radius: 6px; padding: 3px 8px; }
  .stage.current { flex: 1 0 100%; flex-wrap: wrap; }
  .stage.current .pills { flex-wrap: wrap; }
}
.pill { font-family: var(--display); font-weight: 600; font-size: .78rem; min-width: 34px; text-align: center; padding: 3px 6px; border-radius: 6px; border: 1.5px solid var(--line); color: var(--muted); }
.pill.done { border-color: var(--accent); color: var(--accent); }
.pill.now { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.step-head { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }
.step-label { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 108px; padding: 10px 14px 12px; border-radius: 14px; background: var(--accent); color: var(--accent-ink); line-height: 1; }
.step-label.second { background: var(--second); color: var(--second-ink); }
.step-label.help { background: var(--warn-soft); color: var(--ink); border: 2px solid var(--warn); }
.step-label .word { font-family: var(--body); font-size: .8rem; font-weight: 600; opacity: .9; }
.step-label .code { font-family: var(--display); font-weight: 700; font-size: 3.2rem; letter-spacing: -.01em; margin-top: 4px; }
.step-head h1 { font-size: clamp(1.8rem, 2.5vw, 2.6rem); margin: 0 0 .2em; max-width: 22ch; }
.step-head .where { margin-top: 6px; }
@media (max-width: 560px) {
  .step-head { gap: 14px; }
  .step-label { min-width: 76px; padding: 8px 10px; }
  .step-label .code { font-size: 2.2rem; }
}
.count { margin: 10px 0 18px; }
.do-this { font-size: 1.28rem; line-height: 1.45; font-weight: 600; max-width: 32em; margin: 0 0 20px; }
.expect .slot, .slot { color: var(--muted); font-style: italic; }
.cite { color: var(--muted); font-size: .9rem; margin: 18px 0 0; max-width: 40em; }

/* One picture per row at the full column width, so the app's own words can be read. */
.shots { display: grid; grid-template-columns: 1fr; gap: 26px; margin: 24px 0 0; max-width: none; }
.shot { margin: 0; aspect-ratio: auto; border: 0; border-radius: 0; display: block; padding: 0; max-width: none; text-align: left; place-items: initial; }
.shot-frame { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); cursor: zoom-in; position: relative; }
.shot-frame img { display: block; width: 100%; height: auto; }
.shot figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: 8px; font-size: .9rem; color: var(--muted); }
.shot-label { font-family: var(--display); font-weight: 600; color: var(--ink); }

.viewer { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
.viewer::backdrop { background: rgba(8, 14, 18, .82); }
.viewer img { display: block; max-width: 94vw; max-height: 84vh; border-radius: 10px; margin: 0 auto; }
.viewer p { color: #eef3f5; text-align: center; margin: 12px 0 2px; }
.viewer-hint { display: block; text-align: center; color: #a9b8be; font-size: .85rem; }

.action-bar { position: sticky; bottom: 0; z-index: 5; margin: 30px 0 0; padding: 14px 0 18px; background: linear-gradient(transparent, var(--bg) 22%); }
.action-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 30px -18px rgba(10, 30, 40, .45); }
.bar-label { font-family: var(--display); font-weight: 600; color: var(--muted); margin-right: auto; padding-left: 6px; }
.stuck { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; background: var(--surface); color: var(--ink); border: 2px solid var(--warn); border-radius: 10px; padding: 11px 20px 11px 12px; font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.stuck:hover { background: var(--warn-soft); }
.stuck-mark { width: 26px; height: 26px; border-radius: 50%; background: var(--warn); color: var(--surface); display: grid; place-items: center; font-size: .95rem; }
@media (max-width: 560px) { .bar-label { width: 100%; } .action-inner .primary, .stuck { flex: 1 1 auto; justify-content: center; } .stuck { padding-right: 14px; } }

.issues { counter-reset: none; }
.issue-top { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; }
.help-label { font-family: var(--display); font-weight: 700; font-size: .95rem; padding: 3px 9px; border-radius: 6px; background: var(--warn-soft); color: var(--ink); border: 1.5px solid var(--warn); }
.issue .shots { margin-top: 14px; max-width: 30em; }
.issue .cite { margin-top: 10px; }

.step-head + .lead { margin-top: 18px; }

.app-tag { margin-left: auto; font-size: .8rem; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.app-switch { margin-top: 6px; background: none; border: 0; padding: 4px 0; color: var(--second); text-decoration: underline; text-underline-offset: 3px; font-size: .88rem; }
.issue-note { margin: 0 0 10px; color: var(--muted); font-size: .92rem; }
.text-list { margin: 6px 0 0; padding: 0 0 0 20px; max-width: 34em; }
.text-list li { padding: 3px 0; }
.shot figcaption { flex-wrap: wrap; }

.stages .pill { font: inherit; font-family: var(--display); font-weight: 600; font-size: .8rem; background: transparent; cursor: pointer; line-height: 1.3; }
.stages .pill:hover { border-color: var(--ink); color: var(--ink); }
.stages .pill.now, .stages .pill.now:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.stages .pill.end { padding: 3px 12px; }
.stages .pill:focus-visible { outline: 3px solid var(--second); outline-offset: 2px; }
.quick { list-style: none; margin: 0 0 8px; padding: 0; max-width: 40em; }
.quick-item { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); align-items: start; }
.quick-item:last-child { border-bottom: 1px solid var(--line); }
.quick-item .help-label { margin-top: 2px; }
.quick-question { margin: 0; font-weight: 600; }
.quick-fix { margin: 4px 0 0; color: var(--ink); }
.quick-fix strong { color: var(--muted); font-weight: 600; }
.last-resort { margin: 2.4em 0 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); max-width: 40em; }
.last-resort h2 { margin: 0 0 .4em; font-size: 1.15rem; }
.last-resort p { margin: 0; }

.app-line { margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--second); background: var(--second-soft); border-radius: 0 8px 8px 0; font-size: .92rem; max-width: 40em; }
.app-line strong { color: var(--second); font-weight: 600; }
.lead + .app-line { margin: 0 0 8px; }
.checks-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.checks-head .link { font-size: .9rem; }
.issue dl + .app-line { margin-left: 78px; }
@media (max-width: 560px) { .issue dl + .app-line { margin-left: 0; } }

/* Links that look like v3's buttons */
a.pill, a.primary, a.stuck, a.stage-name, a.house { text-decoration: none; }
a.primary { display: inline-block; }
a.shot-frame { display: block; }
a.app-switch { display: inline-block; }
a:focus-visible { outline: 3px solid var(--second); outline-offset: 3px; border-radius: 6px; }
.issue .seen q { quotes: "\201C" "\201D"; }

/* New rules */
.callout { max-width: 1500px; margin: clamp(16px, 2.4vw, 28px) auto 0; padding: 0 clamp(16px, 4vw, 56px); }
.callout-title, .callout p { display: block; margin: 0; background: var(--accent-soft); border-left: 8px solid var(--accent); border-right: 2px solid var(--accent); }
.callout-title { padding: 16px 22px 4px; border-top: 2px solid var(--accent); border-radius: 12px 12px 0 0; font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1.2; color: var(--accent); }
.callout p { padding: 4px 22px 18px; border-bottom: 2px solid var(--accent); border-radius: 0 0 12px 12px; font-size: 1.05rem; color: var(--ink); }
.yours { background: var(--accent-soft); border-radius: 4px; padding: 0 4px; font-style: italic; }
.yours-note { margin: 10px 0 0; color: var(--muted); font-size: .9rem; }
.check-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.app-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -10px 0 22px; font-size: .88rem; color: var(--muted); }
.app-choice { background: transparent; color: var(--muted); border: 1.5px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: .85rem; }
.app-choice[aria-pressed="true"] { border-color: var(--second); color: var(--second); font-weight: 600; }
.app-notice { margin: 0 0 16px; padding: 12px 16px; border: 2px solid var(--warn); background: var(--warn-soft); border-radius: 10px; max-width: 40em; }
.mode-toggle { background: transparent; color: var(--muted); border: 1.5px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: .82rem; }
.cast-note { margin: 8px 0 0; font-size: .85rem; color: var(--muted); }
.foot p { margin: 0 0 4px; max-width: none; }
.foot-counted { opacity: .85; }
.foot-legal { margin-top: 10px !important; }
.last-resort-contact { margin-top: .6em !important; font-weight: 600; }
/* The house logo, the product list beside it, and the Products menu it folds into on narrow screens */
a.house:hover .house-name { text-decoration: underline; text-underline-offset: 4px; }
.house .logo-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-colour-mode="light"]) .house .logo { filter: drop-shadow(0 0 6px rgba(139, 92, 246, .4)); }
  :root:not([data-colour-mode="light"]) .house .logo-light { display: none; }
  :root:not([data-colour-mode="light"]) .house .logo-dark { display: block; }
}
:root[data-colour-mode="dark"] .house .logo { filter: drop-shadow(0 0 6px rgba(139, 92, 246, .4)); }
:root[data-colour-mode="dark"] .house .logo-light { display: none; }
:root[data-colour-mode="dark"] .house .logo-dark { display: block; }
.products-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; list-style: none; margin: 0; padding: 0; }
.switch-item { display: flex; align-items: baseline; gap: 8px; font-family: var(--display); font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.products-inline .switch-item { padding: 4px 0; }
.products-inline a.switch-item:hover { text-decoration: underline; text-underline-offset: 4px; }
.products-inline a.switch-item[aria-current] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.switch-item.off { color: var(--muted); }
.switch-coming { font-family: var(--body); font-weight: 400; font-size: .8rem; }
.switcher { display: none; position: relative; }
.switcher summary { list-style: none; cursor: pointer; color: var(--muted); border: 1.5px solid var(--line); border-radius: 999px; padding: 3px 12px; font-size: .82rem; white-space: nowrap; }
.switcher summary::-webkit-details-marker { display: none; }
.switcher summary:hover, .switcher[open] summary { color: var(--ink); border-color: var(--ink); }
.switcher summary:focus-visible { outline: 3px solid var(--second); outline-offset: 3px; }
.switch-list { position: absolute; left: 0; top: calc(100% + 8px); z-index: 20; list-style: none; margin: 0; padding: 6px; min-width: min(16em, 80vw); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px -18px rgba(10, 30, 40, .45); }
.switch-list .switch-item { justify-content: space-between; padding: 8px 10px; border-radius: 8px; }
.switch-list a.switch-item:hover { background: var(--bg); }
.switch-list a.switch-item[aria-current] { color: var(--accent); }
/* The name is never shortened, so the inline list folds into the menu until the header has room for both (it needs about 1480px beside the product chip). */
@media (max-width: 1560px) { .products-inline { display: none; } .switcher { display: block; } }
/* The company link: a quiet text link at the left of the right-hand group, on wide screens only. */
.company-link { color: var(--muted); font-size: .88rem; white-space: nowrap; text-decoration: none; }
.company-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1099px) { .company-link { display: none; } }
/* Where the company link first shows (1100px) the header is tight: the gaps and the side padding close up so the name, the menu and the right-hand group stay on one line. */
@media (min-width: 1100px) and (max-width: 1199px) {
  .bar { gap: 10px; padding-left: clamp(16px, 3vw, 56px); padding-right: clamp(16px, 3vw, 56px); }
  .bar-left { column-gap: 14px; }
  .bar-right { gap: 10px; }
}
/* On a phone the whole name stays on one line beside the logo, with the Light/Dark button at the right. The Products menu sits beside the name when there is room and drops under it when there is not. The badge, the chip and the company link are hidden. */
@media (max-width: 560px) {
  .bar { flex-wrap: nowrap; align-items: flex-start; gap: 8px; padding-left: 12px; padding-right: 12px; }
  .bar-left { flex-wrap: wrap; gap: 8px 12px; }
  .house { gap: 8px; }
  .house-name { font-size: .72rem; letter-spacing: .04em; }
  .bar-right { flex: none; margin-left: auto; margin-top: 4px; }
  .badge-pill, .chip { display: none; }
}
@media (max-width: 380px) {
  .house-name { font-size: .66rem; }
  .switcher summary { padding-left: 10px; padding-right: 10px; }
}
/* The finish page: every entry in the top row turns done green (body.finished), and the confetti canvas. */
body.finished .stages .pill, body.finished .stages .pill.now, body.finished .stages .pill:hover { background: var(--done); border-color: var(--done); color: var(--done-ink); }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
[hidden] { display: none !important; }

/* The start page fits one screen at 1920x1080 (Ben, 2026-11-11: "it shouldnt go below the fold"). Type stays its size; space and measure tighten. */
body[data-page="start"] .frame { padding-top: clamp(16px, 2vw, 28px); }
body[data-page="start"] .callout-title { padding-top: 12px; font-size: 1.2rem; }
body[data-page="start"] .callout p { padding-bottom: 14px; }
body[data-page="start"] .stages { margin-bottom: 18px; }
body[data-page="start"] .page h1 { max-width: 24ch; font-size: clamp(2rem, 2.7vw, 3rem); margin-bottom: .4em; }
body[data-page="start"] .lead { margin-bottom: 0; }
body[data-page="start"] .not { margin-top: 1.3em; padding: 16px 20px; }
body[data-page="start"] .not h2 { font-size: 1.3rem; }
body[data-page="start"] .not p { margin-bottom: .6em; }
body[data-page="start"] .not ul { gap: 6px 8px; }
body[data-page="start"] .not li { padding: 4px 10px; }
body[data-page="start"] .not .yes { margin-top: .7em; }
body[data-page="start"] .apps { margin-top: 1em; }
body[data-page="start"] .apps div { padding: 9px 0; }
body[data-page="start"] .actions { margin-top: 20px; }
body[data-page="start"] .frame { gap: clamp(20px, 3vw, 56px); }
body[data-page="start"] .page h1 { max-width: 30ch; }
body[data-page="start"] .not ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(17em, 1fr)); gap: 4px 18px; }
body[data-page="start"] .not li { padding: 2px 0; background: none; font-size: .95rem; align-items: baseline; }
body[data-page="start"] .apps div { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
body[data-page="start"] .apps strong { display: inline; font-size: 1rem; }
@media (min-width: 1080px) {
  body[data-page="start"] .frame { grid-template-columns: minmax(320px, 4fr) minmax(0, 7fr); }
}
body[data-page="start"] .lead, body[data-page="start"] .page p, body[data-page="start"] .not, body[data-page="start"] .apps { max-width: 52em; }
body[data-page="start"] .stages { row-gap: 6px; }
body[data-page="start"] .not { padding: 14px 18px; }
body[data-page="start"] .not h2 { margin-bottom: .25em; }
body[data-page="start"] .not p { margin-bottom: .4em; }
body[data-page="start"] .apps { margin-top: .7em; }
body[data-page="start"] .actions { margin-top: 14px; }