/* Hintglass site: the Stone visual system. Tokens are the spec's "Visual system" table
   (docs/superpowers/specs/2026-10-20-hintglass-website-design.md); layout and sizes follow
   docs/superpowers/specs/2026-10-20-hintglass-website/stone.dc.html and hud.dc.html. No inline styles anywhere:
   the Content-Security-Policy is style-src 'self'. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk/latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/schibsted-grotesk/latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fragment Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/fragment-mono/latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fragment Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/fragment-mono/latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* The spec's Visual system table. */
  --ground: #E8E5E0;
  --raised: #F1EFEB;
  --plate: #DDD9D2;
  --bar: #DCD8D1;
  --bar-line: #CFC9C0;
  --line: #D3CEC6;
  --ink: #2B231E;
  --ink-2: #5F544C;
  --label: #6B6058;
  --brown: #7A4A2C;
  --apricot: #F2BE93;
  --apricot-edge: #C98F62;
  --espresso: #2B231E;
  --espresso-ink: #F1EAE2;
  --espresso-muted: #CFC5BB;
  --espresso-faint: #A89D93;
  --hud-top: rgba(36, 31, 28, 0.97);
  --hud-bottom: rgba(20, 17, 15, 0.97);
  /* HUD text, as in the app (hud.dc.html). */
  --hud-text: #FFFFFF;
  --hud-detail: rgba(255, 255, 255, 0.84);
  --hud-status: rgba(255, 255, 255, 0.82);
  --hud-source: rgba(255, 255, 255, 0.8);
  --hud-bar-off: rgba(255, 255, 255, 0.2);
  /* Supporting values from the Stone board (stone.dc.html, hud.dc.html), outside the table. */
  --notch: #0B0908;
  --cap: #F7F5F1;
  --cap-edge: #C4BCB1;
  --glyph: #E0DCD6;
  --quote: #3A302A;
  --on-ink: #F7F2EC;
  --on-apricot: #2B1A0E;
  --hud-button-line: #C9C2B8;
  --field: #352C26;
  --field-line: rgba(207, 197, 187, 0.5);
  /* Type. */
  --font-sans: "Schibsted Grotesk", -apple-system, system-ui, sans-serif;
  --font-mono: "Fragment Mono", ui-monospace, Menlo, monospace;
  --font-hud: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --gutter: 32px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: var(--ink); text-underline-offset: 0.15em; }
a:hover { color: var(--brown); }
:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; border-radius: 4px; }
/* <main> takes focus only when the waitlist card closes with focus inside it and nowhere to hand it back to (join-card.js),
   usually by Esc, which makes it :focus-visible: a ring round the whole page helps no one. */
main:focus-visible { outline: none; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.skip {
  position: absolute;
  left: 12px;
  top: -200px;
  z-index: 10;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 650;
  text-decoration: none;
}
/* Focused, it sits below the 39 px top bar, clear of its links' hit areas; before launch, below the 30 px countdown strip
   above the bar as well, until the strip hides at launch_at. */
.skip:focus { top: 46px; color: var(--on-ink); }
body:has(> .countdown-strip:not([hidden])) .skip:focus { top: 76px; }

/* Hidden from sight, kept for screen readers and the DOM (hud.js uses it on the hook during example scenes). */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Keys: every shortcut is real <kbd> text. A combination is <kbd class="keys"> holding one <kbd> per key. */
kbd {
  display: inline-block;
  min-width: 1.55em;
  padding: 0 0.32em;
  border: 1px solid var(--bar-line);
  border-radius: 6px;
  background: var(--cap);
  box-shadow: 0 1px 0 var(--cap-edge);
  color: var(--ink);
  font: 600 0.8em/1.45 var(--font-hud);
  text-align: center;
  vertical-align: 0.1em;
}
kbd.keys {
  display: inline-flex;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  vertical-align: baseline;
}
kbd.keys > kbd { font-size: 0.8em; }
/* In headings and mono labels the keys are glyphs, as in the board. */
h3 kbd, .label kbd, h3 kbd.keys > kbd, .label kbd.keys > kbd {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  vertical-align: baseline;
}
.label kbd.keys { gap: 0; }
.label kbd { font-family: var(--font-hud); }

/* 0. Countdown strip above the top bar (pre-launch only). countdown.js fills [data-countdown-short] and the band's
   cells, and hides every [data-countdown] at zero. Without it the strip is the launch date alone. */
[data-countdown][hidden], [data-countdown] [hidden] { display: none; }
.countdown-strip {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 14px;
  min-height: 30px;
  padding: 6px 16px;
  background: var(--espresso);
  color: var(--espresso-muted);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}
.countdown-strip time { color: var(--espresso-ink); font-weight: 600; }
.strip-timer {
  color: var(--apricot);
  font: 400 13px/18px var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 1. Top bar (38 px, like a menu bar) with the drawn notch. */
.topbar {
  position: relative;
  z-index: 2;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  background: var(--bar);
  border-bottom: 1px solid var(--bar-line);
  font-size: 13px;
}
.brand, .nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 38px;
  text-decoration: none;
}
/* The bar is 38 px; each link's hit area reaches 44 px below it and into half of each gap. */
.brand::after, .nav a::after {
  content: "";
  position: absolute;
  inset: 0 -11px -6px;
}
.brand { gap: 8px; font-weight: 700; letter-spacing: -0.01em; }
.brand img { width: 18px; height: 18px; }
.notch {
  position: absolute;
  left: 50%;
  top: 0;
  width: 214px;
  height: 38px;
  transform: translateX(-50%);
  border-radius: 0 0 16px 16px;
  background: var(--notch);
}
.nav { display: flex; align-items: center; gap: 22px; }
.nav .nav-cta { font-weight: 700; color: var(--brown); }
.nav .nav-cta:hover { color: var(--ink); }

/* 2. Hero: the HUD hangs below the notch. */
.hero {
  position: relative;
  padding: 8px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: clip;
}
.hero-glyph {
  position: absolute;
  right: -60px;
  top: -120px;
  color: var(--glyph);
  font: 400 820px/1 var(--font-hud);
  pointer-events: none;
  user-select: none;
}
.hud { position: relative; width: 100%; max-width: 720px; color: var(--quote); }
/* The slot reserves the tallest scene in hud.dc.html at this width, so the streaming moves nothing below it. The
   dark panel inside sizes to its text and grows downward from under the notch, as in the app; the unused part
   of the slot is stone ground. */
.hud-slot { min-height: 252px; }
.hud-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 28px 22px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--hud-top) 0%, var(--hud-bottom) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 70px -30px rgba(58, 36, 22, 0.55), 0 2px 8px rgba(43, 35, 30, 0.18);
  color: var(--hud-text);
  font-family: var(--font-hud);
}
.hud-row {
  height: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--hud-status);
  font-size: 12px;
  font-weight: 500;
}
.hud-meter { display: flex; align-items: center; gap: 4px; }
.hud-bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.hud-bars > span { display: block; width: 3px; border-radius: 1px; background: var(--hud-bar-off); }
.hud-bars > span:nth-child(1) { height: 4px; }
.hud-bars > span:nth-child(2) { height: 6px; }
.hud-bars > span:nth-child(3) { height: 8px; }
.hud-bars > span:nth-child(4) { height: 10px; }
.hud-bars > span:nth-child(5) { height: 12px; }
.hud-bars > span.is-lit { background: var(--hud-text); }
.hud-clock { font-variant-numeric: tabular-nums; }
.hud-word { margin-left: auto; }
.hud-word.is-answering { color: var(--apricot); }
/* The hook (h1, its answer p) and the example scene's lines (aria-hidden p siblings) are styled identically. */
.hud-cue {
  margin: 0;
  font-size: 34px;
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.hud-detail { margin: 0; color: var(--hud-detail); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.hud-source { margin: 0; color: var(--hud-source); font-size: 13px; font-weight: 500; }
.hud-under {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 6px 0;
}
.hud-caption { flex: 1 1 260px; min-width: 0; margin: 0; font-size: 15px; line-height: 1.45; }
.hud-label, .label {
  color: var(--label);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hud-label { margin-right: 10px; color: var(--ink-2); }
/* Holds the button's 44 px while the button is still hidden, so unhiding it moves nothing. */
.hud-controls { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.hud-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 12px;
}
.hud-keylabel { min-width: 9ch; }
.key-glyph { font-family: var(--font-hud); }
kbd.hud-cap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: var(--cap);
  box-shadow: 0 2px 0 var(--cap-edge), 0 4px 10px rgba(60, 40, 25, 0.14);
  color: var(--ink);
  font: 600 16px/1 var(--font-hud);
  transition: transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}
kbd.hud-cap.is-held {
  background: var(--apricot);
  box-shadow: none;
  color: var(--on-apricot);
  transform: translateY(2px);
}
.hud-next {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--hud-button-line);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: 500 14px var(--font-sans);
  cursor: pointer;
}
.hud-next:hover { border-color: var(--brown); color: var(--brown); }

.hero-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 24px;
  margin-top: 44px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 26px;
  border: 0;
  border-radius: 13px;
  background: var(--ink);
  color: var(--on-ink);
  font: 650 17px/1.2 var(--font-sans);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.button:hover { background: var(--brown); color: var(--on-ink); }
.hero-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 44px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}
.hero-meta, .hero-free { position: relative; margin: 18px 0 0; text-align: center; }
.hero-meta {
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-free { color: var(--ink-2); font-size: 15px; }
.hero-free + .hero-meta { margin-top: 8px; }

/* Sections */
.section {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 150px var(--gutter) 0;
}
.keys-section { padding-top: 140px; }
main > .section:last-child { padding-bottom: 150px; }
.display {
  max-width: 820px;
  margin: 0;
  font-size: 60px;
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.title {
  margin: 0;
  font-size: 44px;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.lede { margin: 14px 0 0; color: var(--ink-2); }
.more { margin: 28px 0 0; }
.more a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}

/* 3. Three keys */
.key-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px;
  margin-top: 48px;
}
.plate {
  position: relative;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: var(--plate);
}
.plate kbd.keys { gap: 10px; }
.plate kbd.keys > kbd {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  padding: 0;
  border: 0;
  border-radius: 13px;
  background: var(--cap);
  box-shadow: 0 4px 0 var(--cap-edge), 0 10px 24px rgba(60, 40, 25, 0.16);
  color: var(--ink);
  font: 600 26px/1 var(--font-hud);
}
.plate kbd.keys > kbd.is-accent {
  background: var(--apricot);
  box-shadow: 0 4px 0 var(--apricot-edge), 0 10px 24px rgba(60, 40, 25, 0.16);
  font-weight: 650;
}
/* Right Option drawn as the wide Mac key: "option" top right, the glyph bottom left. */
.plate kbd.keys > kbd.is-option {
  position: relative;
  align-items: flex-end;
  justify-content: flex-start;
  width: 132px;
  height: 84px;
  padding: 0 0 12px 16px;
  border-radius: 14px;
  font-size: 30px;
}
.plate kbd.keys > kbd.is-option::before {
  content: "option";
  content: "option" / "";
  position: absolute;
  top: 10px;
  right: 14px;
  color: var(--label);
  font: 500 12px/1 var(--font-hud);
}
.plate-name {
  position: absolute;
  left: 18px;
  bottom: 14px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.key-card h3 { margin: 22px 0 6px; font-size: 22px; line-height: 1.3; letter-spacing: -0.015em; }
.key-card p { margin: 0; color: var(--ink-2); }

/* 4. They ask. You answer. */
.qa-list { margin-top: 40px; border-top: 1px solid var(--line); }
.qa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 24px 48px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}
.qa .label { margin: 0 0 8px; }
.qa-question {
  margin: 0;
  color: var(--quote);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.qa-card {
  padding: 18px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--hud-top) 0%, var(--hud-bottom) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 24px 40px -24px rgba(58, 36, 22, 0.55);
  color: var(--hud-text);
  font-family: var(--font-hud);
}
.qa-cue { margin: 0; font-size: 20px; font-weight: 650; line-height: 1.25; }
.qa-detail { margin: 6px 0 0; color: var(--hud-detail); font-size: 15px; line-height: 1.5; }
.qa-source { margin: 8px 0 0; color: var(--hud-source); font-size: 12px; font-weight: 500; }

/* 5. Invisible on screen share, and 8. Questions: heading left, body right. */
.split { display: flex; flex-wrap: wrap; gap: 32px 64px; }
.split > .display { flex: 1 1 380px; }
.split-body { flex: 2 1 520px; min-width: 0; }
.statement {
  margin: 0;
  color: var(--quote);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.statement + p { margin: 18px 0 0; color: var(--ink-2); }

/* 6. Your resume / your Mac */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
  gap: 64px;
}
.duo .title + p { margin: 18px 0 0; color: var(--ink-2); }
.files {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.file { padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); }
.file.is-out { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.files-arrow { color: var(--brown); }
.providers {
  margin: 22px 0 0;
  color: var(--label);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* 7. Pricing */
.pricing { display: flex; justify-content: center; }
.price-card {
  width: 100%;
  max-width: 600px;
  padding: 44px 44px 40px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: var(--raised);
}
.price-card .label { margin: 0; font-size: 12px; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 10px 0 0; }
.price-amount { font-size: 92px; font-weight: 800; line-height: 1; letter-spacing: -0.05em; }
.price-period { color: var(--ink-2); font-size: 20px; }
.price-tax { margin: 6px 0 0; color: var(--ink-2); }
.price-list { margin: 28px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.price-list li { padding: 13px 0; border-bottom: 1px solid var(--line); }
.button-block { display: flex; width: 100%; margin-top: 28px; }

/* 8. Questions */
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  position: relative;
  padding: 22px 40px 22px 0;
  font-size: 22px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  content: "+" / "";
  position: absolute;
  top: 22px;
  right: 4px;
  color: var(--label);
  font-weight: 400;
}
.faq-list details[open] > summary { padding-bottom: 10px; }
.faq-list details[open] > summary::after { content: "\2212"; content: "\2212" / ""; }
.faq-list details p { margin: 0; padding-bottom: 22px; color: var(--ink-2); }
.faq-list .more { margin-top: 22px; }

/* 9. Waitlist band (pre-launch only) */
.band { margin-top: 150px; background: var(--espresso); color: var(--espresso-ink); }
.band :focus-visible { outline-color: var(--apricot); }
.band-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 40px;
  align-items: end;
  max-width: 1200px;
  margin: 0 auto;
  padding: 96px var(--gutter);
}
.band-title {
  margin: 0;
  color: var(--apricot);
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.band-lede { max-width: 460px; margin: 18px 0 0; color: var(--espresso-muted); }
.waitlist { display: flex; flex-wrap: wrap; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field-email { flex: 1 1 220px; }
.field-name { flex: 1 1 180px; }
.field label { color: var(--espresso-muted); font-size: 13px; font-weight: 600; }
.field input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--field-line);
  border-radius: 12px;
  background: var(--field);
  color: var(--on-ink);
  font: 400 16px var(--font-sans);
}
.field input:focus-visible { outline-offset: 2px; border-color: var(--apricot); }
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* Either form's Turnstile container (the band's renders implicitly as .cf-turnstile, the card's explicitly). */
[data-turnstile] { flex: 1 1 100%; }
[data-turnstile]:empty { display: none; }
.waitlist .button { flex: 1 1 100%; border-radius: 12px; }
.button-apricot { background: var(--apricot); color: var(--on-apricot); font-weight: 700; }
.button-apricot:hover { background: var(--espresso-ink); color: var(--on-apricot); }
.button:disabled { cursor: progress; opacity: 0.7; }
.form-status { margin: 12px 0 0; color: var(--espresso-ink); font-size: 15px; }
.form-status:empty { margin: 0; }
.band-fine { margin: 14px 0 0; color: var(--espresso-faint); font-size: 13px; }
.band-fine a { color: var(--apricot); }
.band-fine a:hover { color: var(--espresso-ink); }

/* Countdown cells: keycap plates on the espresso ground. A generic pattern, any [data-countdown] with cells in it. */
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 420px; margin: 0 0 24px; }
.countdown-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 4px 12px;
  border-radius: 13px;
  background: var(--field);
  box-shadow: 0 4px 0 var(--notch), 0 10px 24px rgba(60, 40, 25, 0.16);
}
.countdown-value {
  color: var(--apricot);
  font: 400 32px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.countdown-unit {
  color: var(--espresso-muted);
  font: 400 11px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The waitlist card (home page, pre-launch): join-card.js opens it half-way down and adds .is-open, which slides it up.
   Non-modal, so nothing behind it is dimmed. Bottom right; up to 539 px a bottom sheet. It scrolls inside when the
   window is shorter than it. The espresso of the band, with the HUD panel's shadow. */
.join-card {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 5;
  width: 380px;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
  border-radius: 22px;
  background: var(--espresso);
  color: var(--espresso-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 70px -30px rgba(58, 36, 22, 0.55), 0 2px 8px rgba(43, 35, 30, 0.18);
  opacity: 0;
  transform: translateY(32px);
  transition: transform 0.32s ease, opacity 0.32s ease;
}
.join-card.is-open { opacity: 1; transform: none; }
/* While it is open, what keyboard focus brings into view stops above it (WCAG 2.2, 2.4.11): join-card.js measures
   --join-card-cover, its height plus its bottom offset and a margin. */
html:has(.join-card.is-open) { scroll-padding-bottom: var(--join-card-cover); }
.join-card :focus-visible { outline-color: var(--apricot); }
.join-card-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--field-line);
  border-radius: 12px;
  background: transparent;
  color: var(--espresso-ink);
  font: 400 24px/1 var(--font-sans);
  cursor: pointer;
}
.join-card-close:hover { border-color: var(--apricot); color: var(--apricot); }
.join-card-title {
  margin: 4px 56px 20px 0;
  color: var(--apricot);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
}
.join-card .countdown { gap: 8px; margin-bottom: 20px; }
.join-card .countdown-cell { padding: 12px 4px 10px; }
.join-card .countdown-value { font-size: 24px; }

/* 10. Footer */
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 26px var(--gutter) 38px;
  color: var(--ink-2);
  font-size: 13px;
}
.footer p { margin: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* Plain pages until their own designs land (Tasks 7 and 8). */
.page { max-width: 760px; margin: 0 auto; padding: 96px var(--gutter) 150px; }
.page h1 { margin: 0; font-size: 60px; font-weight: 750; line-height: 1.02; letter-spacing: -0.035em; }
.page p { margin: 18px 0 0; color: var(--ink-2); }

/* Guides and the "How do I…?" index. Element rules sit in :where() so the shared components (.key-card, .plate,
   the HUD figure) keep their own type inside a guide. */
.guide { max-width: 760px; margin: 0 auto; padding: 72px var(--gutter) 150px; overflow-wrap: break-word; }
.guide .kicker { margin: 0 0 14px; }
.guide .kicker a { display: inline-flex; align-items: center; min-height: 44px; color: var(--label); }
.guide .kicker a:hover { color: var(--brown); }
.guide :where(h1) { margin: 0; font-size: 60px; font-weight: 750; line-height: 1.02; letter-spacing: -0.035em; }
.guide .answer { margin: 22px 0 0; color: var(--ink); font-size: 20px; line-height: 1.5; }
.guide :where(h2) { margin: 72px 0 0; font-size: 34px; font-weight: 750; line-height: 1.08; letter-spacing: -0.028em; }
.guide :where(h3) { margin: 40px 0 0; font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -0.012em; }
.guide :where(p, ul, ol, dl) { margin: 14px 0 0; color: var(--ink-2); }
.guide :where(ul, ol) { padding-left: 1.3em; }
.guide :where(li + li) { margin-top: 8px; }
.guide :where(b) { color: var(--ink); font-weight: 650; }
.guide :where(code) { font-family: var(--font-mono); font-size: 0.82em; }
.guide .more { margin-top: 10px; }
/* A list of links, one per line (the index's "Every guide"): each link is a full-height target. */
.guide-list a { display: inline-flex; align-items: center; min-height: 44px; }
.guide :where(.guide-list li + li) { margin-top: 0; }
/* Ordered steps: one action per row, the number in the HUD's rounded face. */
.steps { margin-top: 22px; padding-left: 2.2em; border-top: 1px solid var(--line); }
.steps > li { margin: 0; padding: 13px 0 13px 6px; border-bottom: 1px solid var(--line); color: var(--ink); }
.steps > li::marker { color: var(--brown); font-family: var(--font-hud); font-weight: 650; }
.steps .note { display: block; margin-top: 4px; color: var(--ink-2); font-size: 16px; }
/* The shortcut plates: the home page's "Three keys" cards, in the guide's column. */
.guide .key-grid { margin-top: 28px; }
/* An in-session state, drawn with the home page's HUD markup (static, no script). */
.guide-figure { margin: 28px 0 0; }
.guide-figure .hud-panel { max-width: 620px; }
.guide-figure :is(.hud-cue, .hud-detail, .hud-source) { margin: 0; }
.guide-figure .hud-cue { color: var(--hud-text); font-size: 22px; line-height: 1.25; }
.guide-figure .hud-detail { color: var(--hud-detail); font-size: 15px; }
.guide-figure .hud-source { color: var(--hud-source); }
.guide-figure figcaption { margin: 12px 0 0; color: var(--ink-2); font-size: 15px; }
/* The state words: the notch row's word in the HUD's face, what it means beside it. */
.states { border-top: 1px solid var(--line); }
.states > div {
  display: grid;
  grid-template-columns: minmax(0, 13.5em) minmax(0, 1fr);
  gap: 6px 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.states dt { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; }
.states dd { margin: 0; }
.state-word {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 7px;
  background: var(--ink);
  color: var(--on-ink);
  font: 500 14px/1.6 var(--font-hud);
}
/* The hosts table (ai-provider): each Host choice and what Settings says of it. The wrapper scrolls, never the page. */
.table-wrap { margin-top: 22px; overflow-x: auto; }
.hosts { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); }
.hosts :is(th, td) { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.hosts thead th { color: var(--label); font: 500 12px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.hosts tbody th { color: var(--ink); font-weight: 650; }
.hosts td { color: var(--ink-2); }

/* The FAQ: the home page's question list, grouped under the guide headings. */
.faq-page .faq-list { margin-top: 18px; }

/* Privacy and Terms: the guide column, with the Terms' summary in a raised box. */
.legal .brief { margin-top: 22px; padding: 4px 24px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); }

/* The 404: three ways back, each a full-height target. */
.not-found-links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 18px 0 0; padding: 0; list-style: none; }
.not-found-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }

/* Narrow screens: one column everywhere (the grids already collapse), smaller display type, tighter gutters. */
/* The nav collapses to its call to action, which stays in the bar on the notch's right; the other links are in the
   footer or one tap from the home page. The full nav is 411 px at 13 px with "Join the waitlist" and 427 px with
   "Download for Mac", so it clears the 214 px notch by the 12 px its hit area needs (11 px each side) only from
   2 × 427 + 278 = 1132 px. It collapses below 1200 px, leaving room for a classic scrollbar or a wider fallback font;
   from 821 to 1199 px it ran under the notch. tools/check_render.mjs measures every top-bar link against the notch. */
@media (max-width: 1199px) {
  .nav a:not(.nav-cta) { display: none; }
}
/* The notch narrows with the bar so the call to action, and its hit area, stay at least 12 px clear of it down to
   320 px: "Download for Mac" is 116 px at 13 px. */
@media (max-width: 820px) {
  .notch { width: 120px; }
}
@media (max-width: 539px) {
  .notch { width: 72px; }
  /* The card becomes a bottom sheet across the whole width. */
  .join-card {
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
    border-radius: 22px 22px 0 0;
  }
  .join-card-title { font-size: 34px; }
  /* With the script running the strip is the counter alone, so it fits at 320 px. */
  .countdown-strip.is-live .strip-date { display: none; }
}
@media (max-width: 760px) {
  .hud-slot { min-height: 260px; }
}
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .section { padding-top: 104px; }
  .keys-section { padding-top: 96px; }
  main > .section:last-child { padding-bottom: 104px; }
  .display, .page h1, .guide :where(h1) { font-size: 40px; }
  .guide { padding-top: 48px; padding-bottom: 104px; }
  .guide .answer { font-size: 18px; }
  .guide :where(h2) { margin-top: 56px; font-size: 28px; }
  .states > div { grid-template-columns: minmax(0, 1fr); }
  .title { font-size: 34px; }
  .qa-question, .statement { font-size: 24px; }
  .hero-glyph { right: -40px; top: -60px; font-size: 520px; }
  .hud-slot { min-height: 236px; }
  .hud-panel { padding: 14px 20px 20px; }
  .hud-cue { font-size: 27px; }
  .hud-detail { font-size: 16px; }
  .hud-caption { min-height: 2.9em; }
  .price-card { padding: 30px 24px 28px; }
  .price-amount { font-size: 64px; }
  .band { margin-top: 104px; }
  .band-inner { padding: 72px var(--gutter); }
  .band-title { font-size: 52px; }
  .countdown { gap: 8px; }
  .countdown-value { font-size: 26px; }
  .faq-list summary { font-size: 19px; }
}
/* The slot's reserved height per width band: the tallest scene in hud.dc.html measured at each band's narrowest
   width, plus one answer line (24 px) for wider fonts. hud.js re-measures in the visitor's browser. */
@media (max-width: 539px) { .hud-slot { min-height: 252px; } }
@media (max-width: 429px) { .hud-slot { min-height: 276px; } }
@media (max-width: 374px) {
  .topbar { padding: 0 16px; }
  .notch { width: 48px; }
  .nav .nav-cta { font-size: 12px; }
  .hud-slot { min-height: 330px; }
  .plate kbd.keys > kbd { width: 62px; height: 62px; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
  }
}