/* The Callout website.
   Built on the app's own tokens (/app/css/tokens.css): true black ink lifted a hair per layer, hairlines,
   three voices of type (Mona Sans wide for display, Mona Sans normal for reading, Fragment Mono for machine
   strings), colour only for meaning, and the app's own curves and springs. The page chrome is the app's
   chrome: a menu bar with a notch, and the black capsule that opens out of it. */

:root {
  --wrap: 1180px;
  --gut: clamp(16px, 4.4vw, 44px);
  --bar-h: 44px;
  --notch-w: 200px;
  --notch-h: 32px;
  --hud-open-w: 540px;
  --hud-open-h: 106px;

  --fs-hero: clamp(2.05rem, 0.35rem + 7.9vw, 7.4rem);
  --fs-h2: clamp(2rem, 1.05rem + 3.5vw, 4.1rem);
  --fs-h3: clamp(1.2rem, 1.08rem + 0.5vw, 1.5rem);
  --fs-lede: clamp(1.0625rem, 0.99rem + 0.42vw, 1.34rem);
  --fs-read: clamp(1rem, 0.97rem + 0.14vw, 1.075rem);
  --sp-section: clamp(104px, 15vw, 220px);

  --panel: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.008) 62%), var(--ink-1);
  --panel-edge: inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 0 0 1px var(--line-1);
}
@media (max-width: 759px) {
  :root { --notch-w: 148px; --notch-h: 28px; --hud-open-w: min(540px, calc(100vw - 16px)); --hud-open-h: 102px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { position: relative; overflow-x: clip; background: var(--ink-0); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0; min-height: 100svh;
  font-family: var(--font-ui); font-size: var(--fs-read); font-weight: 430; font-stretch: 100%;
  line-height: 1.6; letter-spacing: -0.005em; color: var(--text-1);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" 0, "cv11" 0;
  overflow-x: clip; -webkit-tap-highlight-color: transparent;
}
/* The night behind the top of every page: a hair of deep blue, as on the app's film stage, so the black notch reads as a notch. */
body::before { content: ""; position: absolute; inset: 0 0 auto 0; height: min(980px, 120svh); z-index: -3; pointer-events: none; background: radial-gradient(120% 86% at 50% -8%, #0b1430 0%, #060a18 34%, #020308 62%, #000 84%); }
::selection { background: var(--selection); color: #fff; }
h1, h2, h3, h4, p, ol, ul, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, svg, canvas, video, iframe { display: block; max-width: 100%; }
iframe { border: 0; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm); }
[hidden] { display: none !important; }
* { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.14) transparent; }

.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 9px 14px; border-radius: 10px; background: #f4f4f6; color: #050507; font-weight: 600; font-size: 14px; transition: top var(--d-3) var(--ease-out); }
.skip:focus { top: 54px; }

/* ---------- Type ---------- */
.display {
  font-size: var(--fs-hero); font-weight: 640; font-stretch: 116%;
  letter-spacing: -0.046em; line-height: 0.95; text-wrap: balance;
}
.h2 { font-size: var(--fs-h2); font-weight: 630; font-stretch: 112%; letter-spacing: -0.04em; line-height: 1.0; text-wrap: balance; }
.h3 { font-size: var(--fs-h3); font-weight: 600; font-stretch: 106%; letter-spacing: -0.02em; line-height: 1.22; }
.lede { font-size: var(--fs-lede); font-weight: 440; line-height: 1.46; letter-spacing: -0.014em; color: var(--text-2); text-wrap: pretty; max-width: 35em; }
.read { font-size: var(--fs-read); line-height: 1.62; color: var(--text-2); text-wrap: pretty; max-width: 38em; }
.read b, .lede b, .read strong { color: var(--text-1); font-weight: 560; }
.meta { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--text-3); letter-spacing: 0; }
.mono, code, kbd.m { font-family: var(--font-mono); font-size: 0.9em; letter-spacing: 0; font-weight: 400; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
code { color: var(--text-1); }
.num { font-variant-numeric: tabular-nums; font-stretch: var(--wider); font-weight: 520; }
.c-1 { color: var(--text-1); } .c-2 { color: var(--text-2); } .c-3 { color: var(--text-3); }
.sev-blocker { color: var(--sev-blocker); } .sev-major { color: var(--sev-major); } .sev-minor { color: var(--sev-minor); } .sev-polish { color: var(--sev-polish); }
.t-ok { color: var(--ok); } .t-agent { color: var(--agent); }
.link { color: var(--text-1); font-weight: 540; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; transition: background-size var(--d-4) var(--ease-out), color var(--d-2) var(--ease-standard); }
.link:hover { background-size: 0 1px; background-position: 100% 100%; }
.link .arr { display: inline-block; margin-left: 0.35em; transition: transform var(--d-4) var(--ease-out); }
.link:hover .arr { transform: translateX(4px); }

/* ---------- Layout ---------- */
.wrap { width: min(var(--wrap), calc(100% - 2 * var(--gut))); margin-inline: auto; }
.section { position: relative; padding-block: var(--sp-section); }
.section + .section { padding-top: 0; }
.rule { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent); }
.stack > * + * { margin-top: var(--gap, 20px); }

/* ---------- Keycaps and buttons (from the app) ---------- */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  font-family: var(--font-ui); font-size: 11.5px; font-weight: 560; line-height: 1; color: var(--text-2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
  border-radius: 5px;
}
.kbds { display: inline-flex; gap: 3px; vertical-align: middle; }
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 15px; border-radius: 9px;
  font-size: 14px; font-weight: 550; letter-spacing: -0.004em; white-space: nowrap; color: var(--text-1);
  background: var(--ink-4); box-shadow: var(--edge), 0 0 0 1px var(--line-2);
  transition: background var(--d-2) var(--ease-standard), box-shadow var(--d-2) var(--ease-standard), color var(--d-2) var(--ease-standard), transform var(--d-1) var(--ease-standard);
  user-select: none; -webkit-user-select: none;
}
.btn:hover { background: var(--ink-5); box-shadow: var(--edge), 0 0 0 1px var(--line-3); }
.btn:active { transform: scale(0.97); transition-duration: 40ms; }
.btn.primary { color: var(--text-on-light); background: #f4f4f6; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, 0.6), 0 14px 34px -14px rgba(207, 238, 255, 0.34); }
.btn.primary:hover { background: #fff; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(255, 255, 255, 0.8), 0 16px 40px -12px rgba(207, 238, 255, 0.5); }
/* A band of blue light crosses the Buy button, left to right: on hover (700 ms, ease-out), and once when it arrives. */
.btn.primary { overflow: hidden; }
.btn.primary::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; background: linear-gradient(105deg, transparent 38%, rgba(96, 178, 255, 0.62) 50%, transparent 62%) 120% 0 / 220% 100% no-repeat; }
.btn.primary:hover::after { background-position: -20% 0; transition: background-position 700ms var(--ease-out); }
.btn.xl.primary:hover { transform: translateY(-1px); }
.btn.xl.primary:active { transform: scale(0.97); }
@keyframes sheen { from { background-position: 120% 0; } to { background-position: -20% 0; } }
.btn.ghost { background: transparent; box-shadow: none; color: var(--text-2); }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.06); color: var(--text-1); }
.btn.sm { height: 28px; padding: 0 11px; font-size: 13px; border-radius: 7.5px; }
.btn.xl { height: 50px; padding: 0 22px; font-size: 16px; font-weight: 580; border-radius: 13px; }
.btn .price { font-variant-numeric: tabular-nums; opacity: 0.62; font-weight: 520; }

/* A place the Architect still has to fill: the price, the checkout link, a date, an address. */
.slot, mark.slot {
  display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: 6px; vertical-align: baseline;
  font-family: var(--font-mono); font-size: 0.78em; font-weight: 400; letter-spacing: 0; line-height: 1.7; white-space: nowrap;
  color: #ffd29a; background: rgba(255, 159, 46, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 159, 46, 0.42);
  background-image: repeating-linear-gradient(135deg, rgba(255, 159, 46, 0.09) 0 6px, transparent 6px 12px);
}

/* ---------- The menu bar ---------- */
.menubar {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--bar-h);
  display: grid; grid-template-columns: 1fr var(--notch-w) 1fr; align-items: center; gap: 12px;
  padding: 0 clamp(12px, 2vw, 22px);
  transition: background var(--d-4) var(--ease-standard), box-shadow var(--d-4) var(--ease-standard), -webkit-backdrop-filter var(--d-4), backdrop-filter var(--d-4);
}
.menubar::before { /* glass, only once the page has moved under it */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  background: rgba(6, 6, 9, 0.62); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 -1px 0 var(--line-1);
  transition: opacity var(--d-4) var(--ease-standard);
}
.menubar.scrolled::before { opacity: 1; }
/* A hairline of voice-blue under the bar grows with the page: it is full at the foot of the page. */
@supports (animation-timeline: scroll()) {
  .menubar::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; transform-origin: 0 50%; pointer-events: none; background: linear-gradient(90deg, rgba(74, 168, 255, 0), rgba(74, 168, 255, 0.5) 70%, var(--agent)); animation: pagefar linear both; animation-timeline: scroll(root block); }
}
@keyframes pagefar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mark {
  display: inline-flex; align-items: center; gap: 9px; justify-self: start;
  font-size: 15px; font-weight: 680; font-stretch: var(--widest); letter-spacing: 0.012em; color: var(--text-1);
}
.speck {
  width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06), 0 0 12px 1px rgba(207, 238, 255, 0.55);
  transition: box-shadow var(--d-4) var(--ease-standard), transform var(--d-4) var(--ease-out);
}
.mark:hover .speck { transform: scale(1.14); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08), 0 0 18px 3px rgba(207, 238, 255, 0.8); }
.mb-left { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: clamp(10px, 1.6vw, 22px); min-width: 0; }
.mb-links { display: flex; align-items: center; gap: 2px; }
.mb-links a, .mb-film {
  padding: 5px 10px; border-radius: 7px; font-size: 13.5px; font-weight: 510; color: var(--text-2); letter-spacing: -0.006em;
  transition: color var(--d-2) var(--ease-standard), background var(--d-2) var(--ease-standard);
}
.mb-links a:hover, .mb-film:hover, .mb-links a[aria-current="page"] { color: var(--text-1); }
.mb-links a:hover, .mb-film:hover { background: rgba(255, 255, 255, 0.06); }
.mb-right { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; }
.mb-film { display: inline-flex; align-items: center; gap: 7px; }
.mb-film::before { content: ""; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; opacity: 0.8; }
.mb-menu { display: none; position: relative; width: 36px; height: 36px; border-radius: 9px; }
.mb-menu i { position: absolute; left: 10px; right: 10px; height: 1.5px; border-radius: 2px; background: var(--text-1); transition: transform var(--spring-snappy-ms) var(--spring-snappy), top var(--d-3) var(--ease-standard); }
.mb-menu i:nth-child(1) { top: 14px; } .mb-menu i:nth-child(2) { top: 21px; }
.mb-menu[aria-expanded="true"] i:nth-child(1) { top: 17.5px; transform: rotate(45deg); }
.mb-menu[aria-expanded="true"] i:nth-child(2) { top: 17.5px; transform: rotate(-45deg); }

/* The phone menu: a sheet that drops from under the bar, and goes back up into it. */
.mb-sheet {
  position: fixed; inset: var(--bar-h) 0 auto 0; z-index: 58; padding: 10px var(--gut) 22px;
  background: rgba(6, 6, 9, 0.86); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 -1px 0 var(--line-2), 0 40px 80px -30px #000;
  opacity: 0; transform: translateY(-10px); pointer-events: none;
  transition: opacity var(--d-3) var(--ease-in), transform var(--d-3) var(--ease-in);
}
.mb-sheet.open { opacity: 1; transform: none; pointer-events: auto; transition: opacity var(--d-4) var(--ease-out), transform var(--d-5) var(--ease-out); }
.mb-sheet nav { display: grid; }
.mb-sheet a, .mb-sheet button { display: block; text-align: left; padding: 14px 2px; font-size: 21px; font-weight: 560; font-stretch: 108%; letter-spacing: -0.02em; color: var(--text-1); border-bottom: 1px solid var(--line-1); opacity: 0; transform: translateY(-6px); transition: opacity var(--d-2) var(--ease-in), transform var(--d-2) var(--ease-in); }
.mb-sheet.open a, .mb-sheet.open button { opacity: 1; transform: none; transition: opacity var(--d-4) var(--ease-out) calc(60ms + var(--i, 0) * 45ms), transform var(--d-5) var(--ease-out) calc(60ms + var(--i, 0) * 45ms); }
.mb-sheet nav > :last-child { border-bottom: 0; }

@media (max-width: 979px) {
  .mb-film, .mb-links { display: none; }
  .mb-menu { display: block; }
}
@media (max-width: 759px) { .menubar { gap: 6px; } }
.mb-short { display: none; }
@media (max-width: 759px) { .mb-long { display: none; } .mb-short { display: inline; } .mb-right { gap: 4px; } }

/* ---------- The notch and the capsule (the app's HUD: web/css/hud.css) ---------- */
.hud-wrap { position: fixed; inset: 0 0 auto 0; z-index: 70; height: 0; display: flex; justify-content: center; align-items: flex-start; pointer-events: none; }
.hud-cap { --level: 0; position: relative; }
.hud-body {
  position: relative; width: var(--notch-w); height: var(--notch-h); overflow: hidden; isolation: isolate;
  background: #000; border-radius: 0 0 14px 14px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.075), inset 1px 0 0 rgba(255, 255, 255, 0.04), inset -1px 0 0 rgba(255, 255, 255, 0.04);
  transition: box-shadow var(--d-4) var(--ease-standard);
}
.hud-cap:not([data-state="hidden"]) .hud-body { box-shadow: 0 22px 60px -12px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.09); }
.hud-content {
  position: absolute; left: 0; top: 0; width: var(--hud-open-w); height: var(--hud-open-h);
  padding: calc(var(--notch-h) - 6px) 20px 0; opacity: 0;
  transition: opacity var(--d-2) var(--ease-standard);
}
.hud-cap.content-in .hud-content { opacity: 1; transition-duration: var(--d-4); }
.hud-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 14px; height: 40px; }
.hud-lead { display: grid; place-items: center; height: 28px; }
.bars { display: flex; align-items: center; justify-content: center; gap: 3px; height: 28px; }
.bars i { display: block; width: 3.5px; height: 4px; border-radius: 3px; background: linear-gradient(180deg, #ffffff, var(--atmo-edge)); box-shadow: 0 0 8px rgba(142, 201, 255, 0.55); transition: height 70ms linear; }
.hud-cap[data-state="processing"] .bars i { height: 4px !important; background: var(--atmo-edge); animation: barscan 1.1s var(--ease-inout) infinite; }
.hud-cap[data-state="processing"] .bars i:nth-child(2) { animation-delay: 0.12s; }
.hud-cap[data-state="processing"] .bars i:nth-child(3) { animation-delay: 0.24s; }
.hud-cap[data-state="processing"] .bars i:nth-child(4) { animation-delay: 0.36s; }
.hud-cap[data-state="processing"] .bars i:nth-child(5) { animation-delay: 0.48s; }
@keyframes barscan { 0%, 100% { opacity: 0.25; transform: scaleY(1); } 40% { opacity: 1; transform: scaleY(2.4); } }
.hud-check, .hud-warn, .hud-ask { display: none; width: 26px; height: 26px; border-radius: 50%; place-items: center; }
.hud-check { background: rgba(48, 209, 88, 0.16); color: var(--ok); }
.hud-check svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.hud-warn { background: rgba(255, 159, 46, 0.16); color: var(--sev-major); }
.hud-warn svg, .hud-ask svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hud-ask { background: rgba(74, 168, 255, 0.18); color: #8ec9ff; box-shadow: 0 0 14px rgba(74, 168, 255, 0.35); }
.hud-cap[data-state="result"] .bars, .hud-cap[data-state="fix"] .bars, .hud-cap[data-state="question"] .bars { display: none; }
.hud-cap[data-state="discarded"] .bars i, .hud-cap[data-state="empty"] .bars i { height: 4px !important; opacity: 0.5; }
.hud-cap[data-state="result"] .hud-check, .hud-cap[data-state="fix"] .hud-check { display: grid; }
.hud-cap[data-state="result"] .hud-check svg, .hud-cap[data-state="fix"] .hud-check svg { animation: hud-draw 420ms 120ms var(--ease-out) forwards; }
@keyframes hud-draw { to { stroke-dashoffset: 0; } }
.hud-cap[data-state="fix"] .hud-check { background: rgba(48, 209, 88, 0.2); box-shadow: 0 0 14px rgba(48, 209, 88, 0.38); animation: limitin 900ms var(--ease-out) both; }
.hud-cap[data-state="question"] .hud-ask { display: grid; animation: limitin 900ms var(--ease-out) both; }
@keyframes limitin { 0% { transform: scale(0.6); opacity: 0; } 55% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.hud-cap[data-state="fix"] .hud-body { box-shadow: 0 22px 60px -12px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(48, 209, 88, 0.55); }
.hud-cap[data-state="question"] .hud-body { box-shadow: 0 22px 60px -12px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(74, 168, 255, 0.55); }

.hud-words { position: relative; height: 26px; overflow: hidden; min-width: 0; container-type: inline-size; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%); mask-image: linear-gradient(90deg, transparent 0, #000 18%); }
.hud-words-inner { position: absolute; right: 0; top: 0; white-space: nowrap; font-size: 17px; font-weight: 470; letter-spacing: -0.012em; line-height: 26px; color: #fff; transition: transform 260ms var(--ease-out); }
.hud-words-inner .w.in { animation: wordin 380ms var(--ease-out) both; }
.hud-words-inner .placeholder { color: var(--text-3); }
@keyframes wordin { from { opacity: 0; filter: blur(6px); transform: translateY(0.18em); } to { opacity: 1; filter: blur(0); transform: none; } }
.hud-cap[data-state="processing"] .hud-words-inner {
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), #fff 50%, rgba(255, 255, 255, 0)) no-repeat rgba(235, 235, 245, 0.42);
  background-size: 96px 100%; -webkit-background-clip: text; background-clip: text;
  animation: hudshine 1.5s linear infinite;
}
@keyframes hudshine { from { background-position: right min(100cqw, 100% + 96px) top 0; } to { background-position: right -96px top 0; } }
.hud-cap[data-state="processing"] .hud-words-inner * { color: transparent !important; }
.hud-words.left { -webkit-mask-image: none; mask-image: none; }
.hud-words.left .hud-words-inner { left: 0; right: 0; overflow: hidden; text-overflow: ellipsis; }
.hud-cap[data-state="question"] .hud-words.left .hud-words-inner { right: auto; overflow: visible; text-overflow: clip; }
.hud-cap[data-state="question"] .hud-words { -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.hud-timer { font-size: 14px; font-weight: 520; font-stretch: var(--wider); font-variant-numeric: tabular-nums; color: var(--text-2); min-width: 38px; text-align: right; }
.hud-timer:empty { min-width: 0; }
.hud-cap[data-state="recording"] .hud-timer::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; vertical-align: 2px; background: var(--live); box-shadow: 0 0 8px rgba(255, 69, 58, 0.8); animation: recpulse 1.4s var(--ease-inout) infinite; }
@keyframes recpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.42; } }
.hud-sub { display: block; height: 24px; line-height: 24px; margin-top: 2px; padding-left: 48px; font-size: 11.5px; font-weight: 520; color: var(--text-3); white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.hud-sub b { color: var(--text-1); font-weight: 600; }
.hud-sub .k { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-3); }
.hud-sub .t { color: var(--text-2); }
.hud-sub b.sev-blocker { color: var(--sev-blocker); } .hud-sub b.sev-major { color: var(--sev-major); } .hud-sub b.sev-minor { color: var(--sev-minor); } .hud-sub b.sev-polish { color: var(--sev-polish); }
.hud-cap[data-state="fix"] .hud-sub b { color: #a8f0bb; }
.hud-cap[data-state="question"] .hud-sub b { color: var(--atmo-edge); }
.hud-glow {
  position: absolute; left: 50%; top: 100%; width: 70%; height: 60px; z-index: -1; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -60%) scaleX(calc(0.85 + var(--level) * 0.25));
  background: radial-gradient(50% 50% at 50% 50%, rgba(74, 168, 255, 0.5), rgba(23, 71, 255, 0.18) 55%, transparent 72%);
  filter: blur(18px); opacity: 0;
  transition: opacity 700ms var(--ease-out), transform 100ms linear;
}
.hud-cap[data-state="recording"] .hud-glow { opacity: calc(0.35 + var(--level) * 0.65); }
.hud-cap[data-state="processing"] .hud-glow { opacity: 0.3; }
.hud-cap[data-state="question"] .hud-glow { opacity: 0.45; transform: translate(-50%, -60%) scaleX(0.9); }
.hud-cap[data-state="fix"] .hud-glow { opacity: 0.5; transform: translate(-50%, -60%) scaleX(0.9); background: radial-gradient(50% 50% at 50% 50%, rgba(48, 209, 88, 0.45), rgba(30, 160, 70, 0.14) 55%, transparent 72%); }
@media (max-width: 759px) {
  .hud-content { padding-inline: 16px; }
  .hud-words-inner { font-size: 16px; }
  .hud-sub { padding-left: 0; text-align: center; }
  .hud-sub .only-keys { display: none; }
}

/* ---------- The sky ---------- */
#sky { position: fixed; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1400ms var(--ease-out); }
#sky.on { opacity: 1; }
#sky { translate: calc(var(--px, 0) * -7px) calc(var(--py, 0) * -5px); }
/* A few stars at the sides twinkle, each with its own time (3 to 8 s, ease in-out). Now and then a meteor
   crosses the top of the sky (700 to 900 ms, linear): it comes in and burns out. */
#stars { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1800ms var(--ease-out) 300ms; translate: calc(var(--px, 0) * -11px) calc(var(--py, 0) * -8px); }
#stars.on { opacity: 1; }
#stars i { position: absolute; width: 2px; height: 2px; margin: -1px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(207, 238, 255, 0.7); animation: twinkle var(--t, 5s) var(--ease-inout) var(--d, 0s) infinite alternate; }
@keyframes twinkle { from { opacity: 0.16; transform: scale(0.7); } to { opacity: 1; transform: scale(1.15); } }
#stars b { position: absolute; left: 0; top: 0; width: 150px; height: 1.5px; border-radius: 2px; opacity: 0; transform-origin: 100% 50%; background: linear-gradient(90deg, rgba(207, 238, 255, 0), rgba(207, 238, 255, 0.55) 70%, #fff); box-shadow: 0 0 8px rgba(142, 201, 255, 0.5); }
/* A planet's limb: the app's horizon (web/css/app.css .setup-limb). */
.limb { position: absolute; inset: auto 0 0 0; height: var(--limb-h, 46vh); pointer-events: none; overflow: hidden; z-index: -1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.limb::before {
  content: ""; position: absolute; left: 50%; top: var(--limb-top, 58%); width: 2800px; height: 2800px; margin-left: -1400px; border-radius: 50%;
  background: radial-gradient(closest-side, #000 99.3%, transparent 99.8%);
  box-shadow: 0 -1px 0 rgba(207, 238, 255, 0.62), 0 -8px 26px rgba(74, 168, 255, 0.34), 0 -46px 130px rgba(23, 71, 255, 0.26);
}
.limb::after {
  content: ""; position: absolute; left: 50%; top: calc(var(--limb-top, 58%) - 52px); width: 4px; height: 4px; margin-left: 150px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px 2px rgba(207, 238, 255, 0.75);
  animation: speckdrift 13s var(--ease-inout) infinite alternate;
}
@keyframes speckdrift { from { transform: translate(-20px, 2px); } to { transform: translate(24px, -4px); } }

/* ---------- Arrivals ----------
   Headings arrive the way the capsule shows spoken words: each word rises 0.18em out of a 6px blur (420 ms,
   ease-out, 45 ms apart). Other blocks rise 16px (700 ms, ease-out, 70 ms apart). Each plays once. */
.js [data-said] .sw { display: inline-block; opacity: 0; filter: blur(7px); transform: translateY(0.18em); will-change: opacity, transform, filter; }
.js [data-said].in .sw { animation: wordin 520ms var(--ease-out) both; animation-delay: calc(var(--w) * 46ms + var(--said-delay, 0ms)); }
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms + var(--reveal-delay, 0ms)); }
.js [data-reveal].in { opacity: 1; transform: none; }
/* A pane of the app arrives as the game's window does: 44px up, from an 8° lean and 96% size (1300 ms, ease-out). */
.js [data-reveal="tilt"] { transform: perspective(1500px) translateY(44px) rotateX(8deg) scale(0.96); transform-origin: 50% 0; transition: opacity 900ms var(--ease-out), transform 1300ms var(--ease-out); }

/* ---------- The promise: two sentences, two lights ----------
   The first sentence is in the blue of a voice, and its light grows with the voice. The second is in the green of
   a fix: it lands (820 ms a word, expo-out), its light blooms once (1700 ms), and a band of white crosses it
   (1100 ms). Each word shows its own part of one gradient that runs along the line (site.js: --ox, --lw). */
.promise > span { position: relative; display: inline-block; }
.promise > span::before { content: ""; position: absolute; inset: -38% -6% -32%; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(44px); }
.p-say::before { background: radial-gradient(50% 50% at 50% 50%, rgba(74, 168, 255, 0.55), rgba(23, 71, 255, 0.2) 58%, transparent 76%); opacity: calc(0.16 + var(--voice, 0) * 0.5); transition: opacity 260ms linear; }
.p-done::before { background: radial-gradient(50% 50% at 50% 50%, rgba(48, 209, 88, 0.55), rgba(16, 140, 76, 0.2) 58%, transparent 76%); opacity: 0.16; }
.promise > span, .promise .sw { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.p-say { background-image: linear-gradient(96deg, #ffffff 0%, #e4f4ff 38%, var(--atmo-edge) 62%, #6fb9ff 100%); }
.p-done { --said-delay: 520ms; background-image: linear-gradient(96deg, #f6fff8 0%, #c5f7d2 34%, #6fe592 68%, #30d158 100%); }
.js .promise > span { background-image: none; }
.js .promise .sw { padding: 0.08em 0.04em 0.18em; margin: -0.08em -0.04em -0.18em; background-repeat: no-repeat; background-size: 250% 100%, var(--lw, 100%) 100%; background-position: -10% 0, calc(var(--ox, 0px) * -1) 0; }
.js .p-say .sw { background-image: linear-gradient(105deg, transparent 41%, rgba(255, 255, 255, 0.96) 50%, transparent 59%), linear-gradient(96deg, #ffffff 0%, #e4f4ff 38%, var(--atmo-edge) 62%, #6fb9ff 100%); }
.js .p-done .sw { background-image: linear-gradient(105deg, transparent 41%, rgba(255, 255, 255, 0.96) 50%, transparent 59%), linear-gradient(96deg, #f6fff8 0%, #c5f7d2 34%, #6fe592 68%, #30d158 100%); transform: translateY(-0.05em) scale(1.14); transform-origin: 50% 62%; filter: blur(14px); }
.js .p-done.in .sw { animation: land 820ms cubic-bezier(0.16, 1, 0.3, 1) both, shine 1100ms var(--ease-inout) both; animation-delay: calc(var(--w) * 90ms + var(--said-delay, 0ms)), calc(var(--w) * 130ms + var(--said-delay, 0ms) + 380ms); }
@keyframes land { from { opacity: 0; filter: blur(14px); transform: translateY(-0.05em) scale(1.14); } 55% { opacity: 1; filter: blur(0); } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes shine { from { background-position: 110% 0, calc(var(--ox, 0px) * -1) 0; } to { background-position: -10% 0, calc(var(--ox, 0px) * -1) 0; } }
.js .p-say:not(.in)::before, .js .p-done:not(.in)::before { opacity: 0; }
.js .p-done.in::before { animation: bloom 1700ms var(--ease-out) var(--said-delay, 0ms) backwards; }
@keyframes bloom { 0% { opacity: 0; transform: scale(0.55); } 28% { opacity: 1; transform: scale(1.08); } 100% { opacity: 0.16; transform: none; } }

/* ---------- Panels: one surface of the app, shown at rest on the page ---------- */
.pane {
  position: relative; border-radius: var(--r-xl); overflow: hidden; isolation: isolate;
  background: #07070a; /* the app's own panel ink, so a surface has no seam */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px var(--line-2), 0 60px 140px -40px rgba(0, 0, 0, 0.95), 0 0 120px -50px rgba(74, 168, 255, 0.16);
}
.surface { width: 100%; height: var(--surface-h, 480px); background: transparent; color-scheme: dark; opacity: 0; transition: height var(--d-5) var(--ease-out), opacity var(--d-5) var(--ease-out); }
.surface.ready { opacity: 1; }
.card { border-radius: var(--r-lg); background: var(--panel); box-shadow: var(--panel-edge), 0 30px 80px -40px rgba(0, 0, 0, 0.9); }

/* Code, shown the way the docs show it. */
pre.code { margin: 0; padding: 16px 18px; border-radius: var(--r-md); overflow-x: auto; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-1); font-family: var(--font-mono); font-size: 13px; line-height: 1.7; color: #d7dae0; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; -webkit-overflow-scrolling: touch; tab-size: 2; }
pre.code code { font-size: inherit; color: inherit; }
.tok-c { color: rgba(235, 235, 245, 0.38); } .tok-s { color: #a8f0bb; } .tok-k { color: #8ec9ff; } .tok-n { color: #e6c04a; }
.tok-f { color: #f4f4f6; } .tok-t { color: #ff9f2e; } .tok-a { color: #cfeeff; } .tok-p { color: rgba(235, 235, 245, 0.5); }
.codebox { position: relative; }
.copy {
  position: absolute; top: 8px; right: 8px; height: 26px; padding: 0 10px; border-radius: 7px; font-size: 12px; font-weight: 550; color: var(--text-2);
  background: rgba(18, 18, 22, 0.9); box-shadow: inset 0 0 0 1px var(--line-2); opacity: 0; transform: translateY(-2px);
  transition: opacity var(--d-3) var(--ease-standard), transform var(--d-3) var(--ease-out), color var(--d-2), background var(--d-2);
}
.codebox:hover .copy, .copy:focus-visible, .copy.done { opacity: 1; transform: none; }
.copy:hover { color: var(--text-1); background: var(--ink-5); }
.copy.done { color: var(--ok); }
@media (hover: none) { .copy { opacity: 1; transform: none; } .codebox pre.code { padding-top: 42px; } }

/* ---------- Pieces that more than one page uses ---------- */
.hero-actions { margin-top: clamp(26px, 3.8vh, 42px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.facts { margin-top: 34px; display: grid; gap: 16px; }
.facts li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); max-width: 34em; text-wrap: pretty; }
.facts li::before { content: ""; position: absolute; left: 0; top: 0.74em; width: 8px; height: 1.5px; border-radius: 2px; background: var(--line-4); }
.facts b { color: var(--text-1); font-weight: 570; }
.facts .kbd { vertical-align: 1px; }
.needs-list > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4px 28px; padding: 20px 0; border-top: 1px solid var(--line-1); }
.needs-list > div:last-child { border-bottom: 1px solid var(--line-1); }
.needs-list dt { font-size: 16px; font-weight: 570; letter-spacing: -0.01em; color: var(--text-1); }
.needs-list dd { font-size: 15.5px; line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.closer { position: relative; isolation: isolate; min-height: min(92svh, 900px); padding: var(--sp-section) 0 clamp(260px, 44vh, 420px); display: grid; align-items: start; overflow: hidden; }
.closer .limb { --limb-h: 54vh; --limb-top: 52%; }
.closer-copy { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.closer .display { font-size: clamp(2.6rem, 1rem + 6.4vw, 6.4rem); }
.closer .promise-close { font-size: clamp(2.1rem, 0.7rem + 5.1vw, 5.3rem); line-height: 1.02; }
.promise-close > span { display: block; }
.promise-close .p-done { --said-delay: 640ms; }
.closer [data-reveal].in .btn.primary::after { animation: sheen 950ms var(--ease-out) 900ms backwards; }
.closer .lede { margin-top: 24px; max-width: 31em; }
.closer + .foot::before { display: none; }
.closer-sm { min-height: 0; padding-top: clamp(40px, 8vw, 120px); }
@media (max-width: 759px) {
  .hero-actions { flex-direction: column; gap: 16px; }
  .needs-list > div { grid-template-columns: minmax(0, 1fr); }
  .closer { padding-bottom: clamp(220px, 36vh, 320px); }
}

/* ---------- Footer ---------- */
.foot { position: relative; padding: 40px 0 44px; background: var(--ink-0); }
.foot::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2) 18%, var(--line-2) 82%, transparent); }
.foot-grid { display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; align-items: start; }
.foot-brand p { margin-top: 10px; font-size: 13px; color: var(--text-3); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: flex-end; font-size: 13.5px; font-weight: 510; color: var(--text-2); }
.foot-links a { transition: color var(--d-2) var(--ease-standard); }
.foot-links a:hover { color: var(--text-1); }
.foot-fine { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-4); }
@media (max-width: 759px) { .foot-grid { grid-template-columns: 1fr; } .foot-links { justify-content: flex-start; } }

/* ---------- The film ---------- */
dialog.film { width: min(1120px, calc(100vw - 32px)); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; }
dialog.film::backdrop { background: rgba(0, 0, 0, 0.84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity var(--d-4) var(--ease-out); }
dialog.film.open::backdrop { opacity: 1; }
dialog.film.closing::backdrop { opacity: 0; transition: opacity var(--d-3) var(--ease-in); }
.film-frame { border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px var(--line-2), 0 60px 160px -30px #000; opacity: 0; transform: translateY(14px) scale(0.965); transition: opacity var(--d-3) var(--ease-in), transform var(--d-3) var(--ease-in); }
dialog.film.open .film-frame { opacity: 1; transform: none; transition: opacity var(--d-4) var(--ease-out), transform var(--spring-morph-ms) var(--spring-morph); }
dialog.film.closing .film-frame { opacity: 0; transform: translateY(10px) scale(0.975); transition: opacity var(--d-3) var(--ease-in), transform var(--d-3) var(--ease-in); }
.film-frame video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.film-frame video:focus-visible { outline: none; }
.film-note { padding: 12px 18px 14px; font-size: 13px; color: var(--text-3); }
.film-close { position: absolute; top: -46px; right: 0; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); background: rgba(255, 255, 255, 0.07); opacity: 0; transition: opacity var(--d-3) var(--ease-standard), background var(--d-2), color var(--d-2), transform var(--d-1); }
dialog.film.open .film-close { opacity: 1; }
dialog.film.closing .film-close { opacity: 0; }
.film-close:hover { background: rgba(255, 255, 255, 0.14); color: var(--text-1); }
.film-close:active { transform: scale(0.94); }
.film-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; }

/* ---------- From page to page ----------
   The old page goes up and out (200 ms, ease-in). The new one rises in (480 ms, ease-out). The menu bar and the
   notch stay where they are. */
@view-transition { navigation: auto; }
.menubar { view-transition-name: menubar; }
#hud { view-transition-name: notch; }
.vt #sky, .vt #stars { transition-duration: 0ms; transition-delay: 0ms; } /* the page came from another page of the site: its sky is there at once */
::view-transition-old(root) { animation: pageout 200ms var(--ease-in) both; }
::view-transition-new(root) { animation: pagein 480ms var(--ease-out) both; }
::view-transition-group(menubar), ::view-transition-group(notch) { animation-duration: 0s; }
@keyframes pageout { to { opacity: 0; transform: translateY(-10px); } }
@keyframes pagein { from { opacity: 0; transform: translateY(18px); } }

/* ---------- What moves with the page ----------
   Where the browser can tie an animation to the scroll: the light behind a pane drifts 120px against the page,
   and the planet at the foot of a page rises 110px into its place. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .closer .limb { animation: limbrise linear both; animation-timeline: view(); animation-range: entry 0% cover 62%; }
  }
}
@keyframes limbrise { from { transform: translateY(110px); opacity: 0.25; } to { transform: none; opacity: 1; } }

/* Words about keys go away where there are no keys. */
.only-touch { display: none; }
@media (hover: none) { .only-keys { display: none; } .only-touch { display: inline; } }

/* ---------- Less motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-said] .sw { filter: none; transform: none; }
  .js [data-said].in .sw { animation: fadein 160ms linear both; animation-delay: 0ms; }
  .js [data-reveal] { transform: none; transition: opacity 160ms linear; transition-delay: 0ms; }
  .js .p-done .sw { transform: none; filter: none; }
  .js .p-done.in .sw { animation: fadein 160ms linear both; animation-delay: 0ms; }
  .js .p-done.in::before { animation: none; }
  .btn.primary::after, .menubar::after { display: none; }
  #stars { display: none; }
  #sky { translate: none; }
  @view-transition { navigation: none; }
  .hud-words-inner .w.in { animation: fadein 140ms linear both; }
  .hud-cap[data-state="processing"] .hud-words-inner { animation: none; background: none; }
  .hud-cap[data-state="processing"] .hud-words-inner * { color: var(--text-2) !important; }
  .hud-cap[data-state="processing"] .bars i { animation: none; opacity: 0.6; }
  .hud-cap[data-state="fix"] .hud-check, .hud-cap[data-state="question"] .hud-ask { animation: fadein 140ms linear both; }
  .hud-check svg { animation-duration: 120ms !important; animation-delay: 0ms !important; }
  .hud-cap[data-state="recording"] .hud-timer::before { animation: none; }
  .limb::after { animation: none; }
  .mb-sheet, .mb-sheet a, .mb-sheet button, .film-frame { transform: none !important; }
  #sky { transition-duration: 200ms; }
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }