/* keepmacawake.com. Paper by day, indigo by night, an editorial serif with italic second clauses and one
   lavender call to action with an ink edge. No web fonts: ui-serif is New York in Safari; Chrome falls back
   to Iowan Old Style. Motion is CSS: one intro on load, then everything follows the scroll, gated on
   scroll-timeline support and on prefers-reduced-motion. Without either, the page is a calm static story. */

:root {
  --paper: #fbf7ee;
  --paper-2: #f3ecdd;
  --card: #fffdf8;
  --ink: #17151f;
  --muted: #5e596a;
  --line: #e4dbca;
  --night: #15122a;
  --night-2: #2b2257;
  --moon: #f5efe2;
  --moon-muted: #b8b1cf;
  --lavender: #e6d9ff;
  --violet: #6d3fc0;
  --accent: #7d4ad9;
  --amber: #ffb547;
  --green: #4cc38a;
  --serif: ui-serif, "New York", "Iowan Old Style", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --wide: 72rem;
  --r-s: 0.75rem;
  --r-m: 1.25rem;
  --r-l: 2rem;
  --track: -0.022em;
  --nav-h: 5.5rem;
  color-scheme: light;
}
@supports (font: -apple-system-body) { :root { --track: -0.035em; } }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; timeline-scope: --film, --n-agents, --n-close; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
code { font: 0.88em var(--mono); background: rgba(109, 63, 192, 0.09); padding: 0.1em 0.35em; border-radius: 0.35em; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: var(--track); margin: 0; text-wrap: balance; }
h1 em, h2 em, h3 em { font-style: italic; }
p, li { text-wrap: pretty; }
section { padding: clamp(4.5rem, 10svh, 7.5rem) 1.25rem; }
section.night { padding-block: clamp(6rem, 14svh, 10rem); }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.75rem); line-height: 1.02; }
h2 em { color: var(--violet); }
.section-lead { max-width: 38rem; margin: 1.4rem 0 0; color: var(--muted); font-size: 1.2rem; line-height: 1.5; }
.chapter { margin: 0 0 1.4rem; font: 500 0.78rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.chapter.light { color: var(--moon-muted); }
.fine { font-size: 0.92rem; color: var(--muted); margin: 1rem 0 0; }
.fine.light { color: var(--moon-muted); }
[hidden] { display: none !important; }
:root .touch-only { display: none; }
@media (hover: none) and (pointer: coarse) { .hero .fine { margin-top: 1rem; } :root .touch-only { display: inline-flex; } :root span.touch-only { display: inline; } :root .desk-only { display: none; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dot { display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--lavender); }
.dot.amber { background: var(--amber); box-shadow: 0 0 0.6em var(--amber); }
.dot.green { background: var(--green); box-shadow: 0 0 0.6em var(--green); }

/* Buttons: lavender with an ink edge that lifts on hover. Used only for things you act on. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; white-space: nowrap;
  padding: 0.95rem 1.5rem; border: 2px solid var(--ink); border-radius: var(--r-s);
  background: var(--lavender); color: var(--ink); font-weight: 650; font-size: 1.05rem; text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--ink); }
.button:active { transform: none; box-shadow: none; }
.button svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.button.small { padding: 0.6rem 1rem; font-size: 0.95rem; }
button.button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.link-arrow { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--line); padding-bottom: 0.1rem; }
.link-arrow::after { content: " \2192"; }
.link-arrow:hover { border-color: var(--ink); }

/* Navigation: a rounded bar over the page that turns to night over the night sections. */
.nav-wrap { position: fixed; left: 0; right: 0; top: 0; z-index: 20; padding: 0.6rem 1.25rem 0; }
.nav {
  max-width: var(--wide); margin: 0 auto; display: flex; align-items: center; gap: 1.5rem; color: var(--ink);
  padding: 0.6rem 0.7rem 0.6rem 1.1rem; border: 1px solid var(--line); border-radius: 1rem;
  background: rgba(251, 247, 238, 0.95); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.nav-links { display: flex; gap: 1.5rem; margin-left: auto; font-size: 0.95rem; }
.nav-links a { text-decoration: none; opacity: 0.72; }
.nav-links a:hover { opacity: 1; }

/* Hero: short copy, so the open MacBook below it fits on the first screen. */
.hero { text-align: center; padding: calc(var(--nav-h) + clamp(0.5rem, 3svh, 2.2rem)) 1.25rem 0; }
.pill {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.4rem; padding: 0.35rem 0.9rem 0.35rem 0.4rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card); text-decoration: none; font-size: 0.92rem; font-weight: 600;
}
.pill:hover { border-color: var(--violet); }
.pill-tag { padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--violet); color: #fff; font-size: 0.8rem; white-space: nowrap; }
.headline { font-size: clamp(2.9rem, min(6.2vw, 10svh), 5.6rem); line-height: 0.95; letter-spacing: calc(var(--track) - 0.01em); }
.headline .line { display: inline-block; }
.headline em { color: var(--violet); padding: 0 0.04em 0.08em; }
.lead { max-width: 46rem; margin: 1.3rem auto 0; font-size: 1.2rem; line-height: 1.5; color: var(--muted); }
.cta-row { display: flex; gap: 1.6rem; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 1.6rem; }
.hero .fine { margin-top: 0.9rem; line-height: 1.5; }
@media (max-height: 880px) {
  .pill { margin-bottom: 1rem; }
  .headline { font-size: clamp(2.9rem, min(6.2vw, 9.4svh), 5.6rem); }
  .lead { margin-top: 1rem; }
  .cta-row { margin-top: 1.2rem; }
  .hero .fine { margin-top: 0.6rem; }
}

/* ===== The MacBook, built once in em: the film, the demo, the what-if console and the closing scale it with font-size. ===== */
.mbp { position: relative; width: 24em; height: 20.4em; perspective: 90em; perspective-origin: 50% -45%; }
.mbp-lid, .mbp-deck { position: absolute; left: 0; width: 24em; height: 15.4em; transform-style: preserve-3d; }
.mbp-lid { top: 0; transform-origin: 50% 100%; }
.mbp-deck {
  top: 15.4em; transform-origin: 50% 0; transform: rotateX(90deg); border-radius: 0.25em 0.25em 1.2em 1.2em;
  background: linear-gradient(180deg, #8e8a9b, #cdcad6 18%, #e4e2ea 60%, #d6d3de);
}
.mbp-keys {
  position: absolute; left: 1.5em; right: 1.5em; top: 1.1em; height: 6.9em; border-radius: 0.45em; background:
    linear-gradient(90deg, transparent 32%, rgba(24, 22, 32, 0.82) 32% 68%, transparent 68%) 0 100% / 100% 1.2em no-repeat,
    repeating-linear-gradient(90deg, transparent 0 0.14em, rgba(24, 22, 32, 0.82) 0.14em 1.5em) 0 0 / 100% 0.8em no-repeat,
    repeating-linear-gradient(90deg, transparent 0 0.14em, rgba(24, 22, 32, 0.82) 0.14em 1.55em) 0 1em / 100% 4.6em no-repeat;
  -webkit-mask: repeating-linear-gradient(180deg, #000 0 1.05em, transparent 1.05em 1.2em); mask: repeating-linear-gradient(180deg, #000 0 1.05em, transparent 1.05em 1.2em);
}
.mbp-pad { position: absolute; left: 50%; width: 8.4em; translate: -50% 0; top: 8.7em; height: 5em; border-radius: 0.55em; background: rgba(255, 255, 255, 0.4); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.07); }
.spill { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(70% 90% at 50% 0, rgba(167, 139, 250, 0.38), transparent 70%); }
.mbp-screen, .mbp-back { position: absolute; inset: 0; border-radius: 0.9em 0.9em 0.3em 0.3em; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* translateZ gives the screen its own 3D layer; without it Safari paints it into the lid and shows it when the lid faces away. */
.mbp-screen {
  transform: translateZ(0); overflow: hidden; border: 0.38em solid #0a0a0d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 1.4em 3em rgba(23, 21, 31, 0.25);
  background: radial-gradient(130% 120% at 78% 0%, #5b3fae, #241b4c 50%, #120f24);
}
.notch { position: absolute; top: 0; left: 50%; translate: -50% 0; width: 13%; height: 0.62em; background: #0a0a0d; border-radius: 0 0 0.4em 0.4em; z-index: 3; }
.menubar { position: relative; display: flex; justify-content: space-between; align-items: center; height: 1.3em; padding: 0 0.7em; font-size: 0.5em; color: #f4f1fb; background: rgba(18, 14, 38, 0.35); }
.mb-left, .mb-right { display: flex; align-items: center; gap: 1em; }
.mb-left i { width: 2.6em; height: 0.42em; border-radius: 1em; background: rgba(255, 255, 255, 0.4); }
.mb-left .mb-apple { width: 0.95em; height: 0.95em; border-radius: 50%; background: rgba(255, 255, 255, 0.85); }
.mb-icon svg { display: block; width: 1.5em; height: 1.5em; fill: transparent; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; }
.mb-icon path { fill: none; }
.mb-icon.on circle { fill: var(--accent); }
.mb-time { display: grid; }
.mb-time > span { grid-area: 1 / 1; }
.mb-time > span + span { opacity: 0; }
.win { position: absolute; left: 1.4em; top: 1.6em; width: 14.4em; padding: 0 0 0.7em; border-radius: 0.55em; background: rgba(10, 8, 20, 0.86); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 0.8em 1.6em rgba(0, 0, 0, 0.35); overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 0.32em; padding: 0.42em 0.6em; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font: 0.42em var(--sans); color: #9b95b5; }
.win-bar i { width: 0.75em; height: 0.75em; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.win-bar span { margin-left: 0.8em; }
.win .t { margin: 0; padding: 0.15em 0.85em 0; font: 0.6em/1.7 var(--mono); color: var(--moon); white-space: nowrap; }
.win .t b { color: var(--lavender); font-weight: 600; margin-right: 0.5em; }
.win .cmd .prompt { color: var(--lavender); margin-right: 0.5em; }
.win-progress { display: block; height: 0.22em; margin: 0.55em 0.55em 0; border-radius: 1em; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.win-progress i { display: block; width: 38%; height: 100%; background: linear-gradient(90deg, var(--green), #9be3bf); }
.win-progress.full i { width: 100%; }
.win.small { top: 2.2em; left: 50%; translate: -50% 0; width: 15em; }
.win-done { opacity: 0; }
.panel-pop { position: absolute; top: 2.4em; right: -2.2em; font-size: 0.62em; opacity: 0; transform: translateZ(1px); transform-origin: 60% 0; }
.cursor { position: absolute; left: 0; top: 0; width: 0.95em; height: auto; opacity: 0; pointer-events: none; transform: translateZ(2px); overflow: visible; }
.cursor path { fill: #111; stroke: #fff; stroke-width: 1.2; stroke-linejoin: round; }
.screen-off { position: absolute; inset: 0; background: #020104; opacity: 0; z-index: 4; }
.glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.09) 0 22%, transparent 42%); }
.mbp-back {
  transform: rotateX(180deg); background: radial-gradient(120% 90% at 30% 0, #f7f6fa, #cfcbd8 55%, #a8a3b5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.mbp-back span { position: absolute; left: 50%; top: 50%; width: 1.8em; height: 1.8em; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #d9d6e2); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05); }
/* The glow fades in with the scroll on .mbp-glow; it breathes on its own layer, so the two never fight. */
.mbp-glow { position: absolute; left: 50%; top: 13.6em; width: 34em; height: 9em; translate: -50% 0; opacity: 0; pointer-events: none; }
.mbp-glow::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(139, 92, 246, 0.62), transparent); }
.mbp.closed .mbp-lid { transform: rotateX(-89deg); }
.mbp.closed .screen-off { opacity: 1; }
.mbp.closed .mbp-glow { opacity: 1; }
.mbp.closed .spill { opacity: 0; }

/* ===== The panel, as the real one looks (Off, Awake, the duration control, battery and the footer). ===== */
.kpanel {
  width: 19.5em; padding: 1em 1.1em 0.95em; border-radius: 1.2em; display: grid; justify-items: center; gap: 0.5em; text-align: center;
  background: #232227; color: #ece9f2; font: 0.95rem/1.35 var(--sans); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 1.6rem 3.2rem rgba(23, 21, 31, 0.3);
}
.kpanel.compact { font-size: 1em; width: 17em; box-shadow: 0 1em 2em rgba(0, 0, 0, 0.5); }
.kp-head { display: flex; justify-content: space-between; width: 100%; margin: 0; font-weight: 700; font-size: 0.82em; color: #a9a4b6; }
.kp-head i { font-style: normal; letter-spacing: 0.1em; }
.kp-power { display: grid; place-items: center; width: 5.4em; height: 5.4em; margin-top: 0.3em; border-radius: 50%; background: #3a3940; transition: background 0.35s ease, box-shadow 0.35s ease; }
.kp-power svg { width: 2.5em; height: 2.5em; fill: none; stroke: #bdb9c6; stroke-width: 1.9; stroke-linecap: round; transition: stroke 0.35s ease; }
.kp-state { margin: 0.15em 0 0; font-weight: 700; font-size: 1.28em; display: grid; }
.kp-sub { margin: 0; font-size: 0.84em; color: #a9a4b6; display: grid; }
.kp-state > span, .kp-sub > span { grid-area: 1 / 1; }
.kp-seg { display: flex; gap: 0.15em; width: 100%; margin: 0.5em 0 0; padding: 0.2em; border: 0; border-radius: 0.6em; background: rgba(255, 255, 255, 0.06); font-size: 0.8em; }
.kp-seg i, .kp-seg label { flex: 1; padding: 0.42em 0; border-radius: 0.45em; font-style: normal; color: #a9a4b6; white-space: nowrap; }
.kp-seg .on { background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 600; }
.kp-battery { width: 100%; margin-top: 0.3em; padding: 0.5em 0.7em; border-radius: 0.7em; background: rgba(255, 255, 255, 0.05); font-size: 0.82em; }
.kp-battery p, .kp-battery label { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 0.25em 0; }
.kp-battery label { cursor: pointer; }
.kp-battery .dim { color: #77727f; border-top: 1px solid rgba(255, 255, 255, 0.07); transition: color 0.25s ease; }
.kp-toggle { width: 2.1em; height: 1.2em; border-radius: 999px; background: #4a4851; position: relative; transition: background 0.25s ease; }
.kp-toggle::after { content: ""; position: absolute; left: 0.15em; top: 0.15em; width: 0.9em; height: 0.9em; border-radius: 50%; background: #d9d6e0; transition: transform 0.25s ease; }
.kp-foot { display: flex; gap: 1.1em; margin: 0.2em 0 0; font-size: 0.74em; color: #a9a4b6; }
.kp-foot .lid-text, .kp-foot .power-text { display: grid; }
.kp-foot .lid-text > span, .kp-foot .power-text > span { grid-area: 1 / 1; }
.pp-on, .s-on, .f-closed, .f-batt { opacity: 0; }

/* ===== The film: the scroll closes the lid, the night passes, and at dawn the lid opens on finished work. =====
   Without scroll timelines, or with reduced motion, it is a static night scene with the lid closed. */
.film { padding: 0; position: relative; }
.film-anchor { position: absolute; top: 0; }
.film-track { position: relative; }
.film-stage { position: relative; overflow: clip; display: grid; justify-items: center; gap: 2.4rem; padding: 6rem 1.25rem 7rem; background: radial-gradient(120% 80% at 50% 110%, var(--night-2), var(--night) 60%); color: var(--moon); }
.fx-night, .fx-dawn, .fx-day, .fx-stars, .fx-orbit { position: absolute; pointer-events: none; }
.fx-night { inset: 0; opacity: 0; background: radial-gradient(120% 80% at 50% 110%, var(--night-2), var(--night) 60%); }
.fx-dawn { inset: 0; opacity: 0; background: linear-gradient(180deg, #2a2456 0%, #6b4a8a 38%, #e59a6b 70%, #f6c58a 84%, var(--paper) 100%); }
.fx-day { inset: 0; opacity: 0; background: var(--paper); }
.fx-stars, .stars {
  inset: 0; opacity: 0.5; background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 42%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 63% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 81% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 92% 48%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 7% 62%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 55% 88%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 75%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 73% 70%, #fff 50%, transparent 51%);
}
.stars { position: absolute; pointer-events: none; }
.fx-orbit { left: 50%; top: 4%; width: 150vmax; height: 150vmax; margin-left: -75vmax; border-radius: 50%; rotate: 20deg; }
.fx-moon { position: absolute; left: 50%; top: 0; width: 3.8rem; height: 3.8rem; margin-left: -1.9rem; border-radius: 50%; box-shadow: inset -0.95rem -0.35rem 0 0 #f1e7cc; }
.beat { position: relative; margin: 0; text-align: center; }
.mbp-pos { position: relative; font-size: clamp(11px, 1.45vw, 21px); }
.film .mbp-lid { transform: rotateX(-89deg); }
.film .screen-off, .film .mbp-glow { opacity: 1; }
.film .spill, .film .panel-pop { opacity: 0; }
.mac-status { display: grid; margin: 0.4rem 0 0; font: 600 0.92rem var(--sans); color: var(--moon); }
.ms { grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; }
.ms:not(.ms1) { opacity: 0; }
.ms8 .dot { background: var(--moon-muted); }
.fx-link { display: none; }
.fx-term { display: none; }
.fx-link svg { width: 100%; overflow: visible; }
.fx-link path { fill: none; stroke: var(--lavender); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 3 6; }
.fx-link span { order: -1; translate: -1rem 0; font: 500 0.7rem/1.2 var(--mono); letter-spacing: 0.04em; color: var(--moon-muted); text-align: center; white-space: nowrap; }
.scroll-cue { margin: 0; color: var(--moon-muted); font-size: 1.1rem; text-align: center; }
.cue-act { display: none; }
.fx-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0; padding: 0; }
.fx-chips li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.95rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; color: var(--moon); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); }
.b1 { font-size: clamp(2.2rem, 4.4vw, 3.75rem); line-height: 1.02; }
.b1 em, .b2 h3 em, .b3 em { color: var(--lavender); }
.b2 { width: min(100%, 34rem); text-align: left; }
.b2 h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; }
.b2-kicker { margin: 0 0 0.7rem; font: 500 0.78rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--lavender); }
.b2-lead { margin: 0.7rem 0 0; color: var(--moon-muted); }
.b2-copy { display: grid; align-items: end; }
.agents h2 em, .b2 h3 em { display: block; }
.b2a, .b2b { grid-area: 1 / 1; }
.b2a { display: none; }
.b2-short { display: none; margin: 0.5rem 0 0; color: var(--moon-muted); font-size: 0.95rem; }
.fx-clock { margin: 0.5rem 0 0.4rem; font: 400 clamp(3.6rem, 7vw, 6.6rem)/1 var(--serif); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--moon); }
.fx-clock::after { content: "07:41"; }
.fx-progress { height: 3px; margin: 0 0 1rem; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.fx-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), #9be3bf); transform-origin: 0 50%; }
.phone { --ph: 34rem; margin: 0; width: 18rem; }
.phone-body {
  position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; height: var(--ph); padding: 0.7rem 0.8rem 1rem; border-radius: 2.6rem; overflow: hidden; color: var(--moon);
  background: #0b0a14; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 0 0 0.45rem #1d1a2c, 0 0 0 calc(0.45rem + 1px) rgba(255, 255, 255, 0.14), 0 2rem 4rem rgba(0, 0, 0, 0.45);
}
.ph-island { justify-self: center; width: 5.6rem; height: 1.55rem; margin-bottom: 0.8rem; border-radius: 1rem; background: #000; }
.ph-island { grid-row: 1; }
.ph-head { grid-row: 2; display: grid; gap: 0.15rem; margin: 0 0.4rem 0.6rem; padding-bottom: 0.6rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.76rem; text-align: left; }
.ph-head b { font: 600 0.84rem var(--mono); color: var(--moon); }
.ph-head span { display: flex; align-items: center; gap: 0.4rem; color: var(--moon-muted); }
.ph-head .ph-state { display: grid; }
.ph-state > span { grid-area: 1 / 1; }
.ph-done { opacity: 0; }
.ph-done .dot { background: var(--moon-muted); }
.chat { grid-row: 3; list-style: none; margin: 0; padding: 0 0.2rem; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.5rem; min-height: 0; overflow: hidden; padding-top: 1rem; -webkit-mask: linear-gradient(transparent, #000 5rem); mask: linear-gradient(transparent, #000 5rem); }
.chat li { flex: none; max-width: 86%; overflow: hidden; padding: 0.5rem 0.75rem; border-radius: 1.1rem; font-size: 0.84rem; line-height: 1.35; text-align: left; }
.chat time { display: block; margin-bottom: 0.1rem; font: 600 0.68rem var(--mono); opacity: 0.7; }
.chat .agent { max-width: 94%; align-self: flex-start; border-bottom-left-radius: 0.35rem; background: rgba(255, 255, 255, 0.09); font: 0.8rem/1.4 var(--mono); }
.chat .you { align-self: flex-end; border-bottom-right-radius: 0.35rem; background: var(--lavender); color: var(--ink); font-weight: 600; }
.chat .sys { align-self: center; max-width: 100%; padding: 0.2rem 0.5rem; background: none; color: var(--moon-muted); font-size: 0.74rem; text-align: center; }
.chat .sys time { display: inline; margin-right: 0.35rem; }
.chat .done { max-width: 100%; background: rgba(76, 195, 138, 0.16); box-shadow: inset 0 0 0 1px rgba(76, 195, 138, 0.5); }
.ph-input { grid-row: 4; margin: 0.7rem 0.2rem 0; padding: 0.55rem 0.9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); color: #77727f; font-size: 0.8rem; text-align: left; }
.b3 { max-width: 40rem; }
.b3-title { margin: 0; font: 400 clamp(1.8rem, 3.4vw, 2.8rem)/1.08 var(--serif); letter-spacing: var(--track); text-wrap: balance; }
.b3-small { margin: 0.8rem 0 0; color: var(--moon-muted); text-wrap: balance; }

/* The ribbon: the kinds of work, flowing along a dark band. */
.ribbon { position: relative; padding: 2.5rem 0 0; overflow: hidden; }
.ribbon-label { margin: 0 auto 0.4rem; padding-inline: 1.25rem; text-align: center; font: 500 0.78rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ribbon svg { display: block; width: 100%; height: clamp(7rem, 12vw, 11rem); }
.ribbon-band { fill: none; stroke: var(--ink); stroke-width: 46; stroke-linecap: round; }
.ribbon-text { font: 600 18px var(--mono); fill: var(--moon); letter-spacing: 0.02em; }

/* ===== Try it: the panel works, the lid switch closes the mini Mac, and the card turns to night when it works. Pure CSS with :has(). ===== */
.try { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; max-width: calc(var(--wide) + 2.5rem); margin: 0 auto; }
.try-steps { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.try-steps li { display: flex; align-items: center; gap: 0.8rem; font-weight: 600; }
.try-steps b { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--lavender); color: var(--violet); font: 700 0.9rem var(--mono); transition: background 0.3s ease, color 0.3s ease; }
.try:has(#p-on:checked) .try-steps li:nth-child(-n+2) b,
.try:has(#p-on:checked):has(#lid:checked) .try-steps li:nth-child(3) b { background: var(--violet); color: #fff; font-size: 0; }
.try:has(#p-on:checked) .try-steps li:nth-child(-n+2) b::after,
.try:has(#p-on:checked):has(#lid:checked) .try-steps li:nth-child(3) b::after { content: "\2713"; font-size: 0.95rem; line-height: 1; translate: 0 -0.06em; }
.demo {
  position: relative; overflow: clip; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "mac panel" "verdict verdict";
  gap: 1.6rem 1.8rem; align-items: center; padding: 2rem; border-radius: var(--r-l); background: var(--paper-2); border: 1px solid var(--line);
  transition: background-color 0.9s ease, border-color 0.9s ease, color 0.9s ease;
}
.demo > .stars { opacity: 0; transition: opacity 0.9s ease; }
.demo-mac, .demo .kpanel, .verdict { position: relative; }
.demo-mac { grid-area: mac; display: grid; justify-items: center; gap: 1.2rem; container-type: inline-size; width: 100%; padding-inline: 1rem; }
.demo-status { display: flex; align-items: center; gap: 0.45rem; margin: -0.6rem 0 0; font-size: 0.85rem; font-weight: 600; color: var(--moon); opacity: 0; transition: opacity 0.6s ease 0.9s; }
.demo:has(#p-on:checked):has(#lid:checked) .demo-status { opacity: 1; }
.demo .kpanel { grid-area: panel; font-size: 0.84rem; }
.mbp.mini { font-size: min(13px, calc(100cqw / 25)); }
.demo .mbp-lid { transition: transform 1.1s cubic-bezier(0.6, 0, 0.15, 1); }
.demo .screen-off { transition: opacity 0.5s ease 0.35s; }
.demo .spill { transition: opacity 0.4s ease 0.3s; }
.demo .mbp-glow { transition: opacity 0.8s ease 0.6s; }
.demo .mbp { transition: filter 1.2s ease 0.6s; }
.demo .mb-icon circle { transition: fill 0.3s ease; }
.lid-switch { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--card); font-weight: 650; cursor: pointer; user-select: none; transition: background 0.6s ease, color 0.6s ease, border-color 0.6s ease; }
.lid-switch .sw { width: 2.3rem; height: 1.3rem; border-radius: 999px; background: #cfc6b4; position: relative; transition: background 0.3s ease; }
.lid-switch .sw::after { content: ""; position: absolute; left: 0.15rem; top: 0.15rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; transition: transform 0.3s ease; }
.lid-closed-text { display: none; }
.demo .kp-power { cursor: pointer; }
.demo .kp-seg label { cursor: pointer; }
.verdict { grid-area: verdict; margin: 0; text-align: center; font: 400 clamp(1.4rem, 2.2vw, 1.9rem)/1.2 var(--serif); }
.verdict > span { display: none; }
.verdict em { color: var(--violet); }

.demo:has(#lid:checked) .mbp-lid { transform: rotateX(-88deg); }
.demo:has(#lid:checked) .screen-off { opacity: 1; }
.demo:has(#lid:checked) .spill { opacity: 0; }
.demo:has(#lid:checked) .lid-switch .sw { background: var(--violet); }
.demo:has(#lid:checked) .lid-switch .sw::after { transform: translateX(1rem); }
.demo:has(#lid:checked) .lid-open-text { display: none; }
.demo:has(#lid:checked) .lid-closed-text { display: inline; }
.demo:has(#lid:checked) .f-open { opacity: 0; }
.demo:has(#lid:checked) .f-closed { opacity: 1; }
.demo:has(#p-on:checked) .kp-power { background: linear-gradient(135deg, #a76de8, var(--accent)); box-shadow: 0 0 0 0.6em rgba(125, 74, 217, 0.18), 0 0 2.5em rgba(125, 74, 217, 0.5); }
.demo:has(#p-on:checked) .kp-power svg { stroke: #fff; }
.demo:has(#p-on:checked) .mb-icon circle { fill: var(--accent); }
.demo:has(#p-on:checked) .kp-state .s-off, .demo:has(#p-on:checked) .kp-sub .s-off { opacity: 0; }
.demo:has(#p-on:checked) .kp-state .s-on { opacity: 1; }
.demo:has(#p-on:checked):has(#d-n:checked) .kp-sub .d-n,
.demo:has(#p-on:checked):has(#d-1:checked) .kp-sub .d-1,
.demo:has(#p-on:checked):has(#d-8:checked) .kp-sub .d-8,
.demo:has(#p-on:checked):has(#d-c:checked) .kp-sub .d-c { opacity: 1; }
.demo:has(#d-n:checked) label[for="d-n"], .demo:has(#d-1:checked) label[for="d-1"],
.demo:has(#d-8:checked) label[for="d-8"], .demo:has(#d-c:checked) label[for="d-c"] { background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 600; }
.demo:has(#p-batt:checked) .kp-toggle { background: var(--accent); }
.demo:has(#p-batt:checked) .kp-toggle::after { transform: translateX(0.9em); background: #fff; }
.demo:has(#p-batt:checked) .kp-battery .dim { color: #ece9f2; }
.demo:has(#p-batt:checked) .f-ac { opacity: 0; }
.demo:has(#p-batt:checked) .f-batt { opacity: 1; }
.demo:has(#p-on:checked):has(#lid:checked) .mbp-glow { opacity: 1; }
.demo:not(:has(#p-on:checked)):has(#lid:checked) .mbp { filter: saturate(0.3) brightness(0.8); }
.demo:has(#p-on:checked):has(#lid:checked) { background-color: var(--night); border-color: var(--night-2); color: var(--moon); }
.demo:has(#p-on:checked):has(#lid:checked) > .stars { opacity: 0.6; }
.demo:has(#p-on:checked):has(#lid:checked) .verdict em { color: var(--lavender); }
.demo:has(#p-on:checked):has(#lid:checked) .lid-switch { background: transparent; color: var(--moon); border-color: var(--moon-muted); }
.demo:not(:has(#p-on:checked)):not(:has(#lid:checked)) .v-off-open,
.demo:has(#p-on:checked):not(:has(#lid:checked)) .v-on-open,
.demo:not(:has(#p-on:checked)):has(#lid:checked) .v-off-closed,
.demo:has(#p-on:checked):has(#lid:checked) .v-on-closed { display: inline; }
.demo:has(#p-on:focus-visible) .kp-power, .demo:has(#lid:focus-visible) .lid-switch, .demo:has(#p-batt:focus-visible) .kp-battery label,
.demo .kp-seg input:focus-visible + label { outline: 3px solid var(--violet); outline-offset: 3px; }

/* ===== For agents: the copy scrolls, the terminal stays. ===== */
.night { position: relative; background: var(--night); color: var(--moon); }
.night h2 em { color: var(--lavender); }
.night .section-lead { color: var(--moon-muted); }
.agents .split { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 3.5rem; align-items: start; max-width: var(--wide); margin: 0 auto; }
.agents code { background: rgba(230, 217, 255, 0.08); color: var(--lavender); }
.ask { position: relative; margin: 2rem 0 0; padding: 1.1rem 1.2rem; border-radius: var(--r-m); background: rgba(230, 217, 255, 0.08); border: 1px solid rgba(230, 217, 255, 0.45); box-shadow: 0 0 0 6px rgba(230, 217, 255, 0.06); }
.ask figcaption { color: var(--moon-muted); font-size: 0.9rem; font-weight: 600; }
.ask-prompt { margin: 0.45rem 6rem 0 0; font: 1.1rem/1.5 var(--mono); color: var(--moon); user-select: all; }
.copy { position: absolute; right: 1rem; top: 1.25rem; padding: 0.5rem 0.9rem; border: 2px solid var(--ink); border-radius: var(--r-s); background: var(--lavender); color: var(--ink); font: 650 0.9rem var(--sans); cursor: pointer; }
.copy[hidden] { display: none; }
.copy-status { margin: 0.5rem 0 0; font-size: 0.88rem; font-weight: 600; color: var(--lavender); }
.copy-status:empty { display: none; }
.ask.install { margin-top: 1rem; }
.ask.install .ask-prompt { margin: 0.9rem 0 0; font-size: 0.95rem; white-space: nowrap; overflow-x: auto; }
.ask.install .copy { top: 0.8rem; }
.install-note { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--moon-muted); }
.door-alt { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--moon-muted); }
.door-alt code { display: block; margin-top: 0.35rem; font-size: 0.78rem; white-space: nowrap; overflow-x: auto; }
.rules-title, .exits-title { margin: 2rem 0 0.7rem; font: 500 0.78rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--moon-muted); }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-weight: 600; color: var(--moon); }
.rules li { display: flex; gap: 0.6rem; }
.rules li::before { content: "\2713"; color: var(--lavender); }
.works { margin: 1.4rem 0 0; color: var(--moon-muted); font-size: 0.95rem; }
.exits dl { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; }
.term-foot { padding: 1rem 1.3rem 1.2rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.term-foot .exits-title { margin: 0 0 0.7rem; }
.term-foot dl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.4rem 0.7rem; align-items: baseline; }
.exits.term-foot dl div { display: contents; padding: 0; border: 0; background: none; }
.term-foot dt { font: 600 0.9rem var(--mono); color: var(--lavender); }
.term-foot dd { margin: 0; font-size: 0.84rem; color: var(--moon-muted); }
.exits dl div { display: inline-flex; align-items: baseline; gap: 0.55rem; padding: 0.42rem 0.85rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); }
.exits dt { font: 600 0.95rem var(--mono); color: var(--lavender); }
.exits dd { margin: 0; font-size: 0.86rem; color: var(--moon-muted); }
.terminal { position: sticky; top: 7rem; margin: 0; background: #0c0a18; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r-m); box-shadow: 0 2rem 3rem rgba(0, 0, 0, 0.4); overflow: hidden; }
.terminal-bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.8rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.terminal-bar i { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.terminal-bar span { margin-left: auto; margin-right: auto; font-size: 0.8rem; color: #7d769a; }
.term-lines { padding: 1.2rem 1.3rem 1.4rem; font: 0.86rem/1.7 var(--mono); }
.term-lines .l { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--moon); }
.term-lines .comment { color: #7d769a; }
.term-lines .out { color: #9be3bf; margin-bottom: 0.4rem; }
.term-lines .prompt { color: var(--lavender); }
.caret { display: inline-block; width: 0.55em; height: 1.05em; margin-left: 0.15em; vertical-align: -0.15em; background: var(--lavender); animation: blink 1s steps(1) infinite; }
.docs { position: relative; list-style: none; max-width: var(--wide); margin: 3.5rem auto 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.docs a { display: grid; align-content: start; gap: 0.3rem; height: 100%; padding: 1rem 1.1rem; border-radius: var(--r-s); border: 1px solid rgba(230, 217, 255, 0.22); background: #1f1a3a; text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; }
.docs a:hover { border-color: var(--lavender); background: #2a2350; }
.docs code { justify-self: start; background: transparent; padding: 0; color: var(--lavender); font-size: 1rem; }
.docs span { color: var(--moon-muted); font-size: 0.9rem; }

/* ===== What if: five questions; on wide screens one night console beside them plays each answer. ===== */
.whatif, .private, .versus, .pricing, .faq { max-width: calc(var(--wide) + 2.5rem); margin: 0 auto; }
.whatif { padding-bottom: clamp(3rem, 6svh, 5rem); }
.wi-body { margin-top: 3rem; }
.wi-list { list-style: none; margin: 0; padding: 0; }
.wi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 3rem; align-items: start; padding: 2.2rem 0; border-top: 1px solid var(--line); }
.wi h3 { grid-column: 1; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.12; }
.wi p { grid-column: 1; margin: 0.7rem 0 0; color: var(--muted); }
.wi > .dia { grid-column: 2; grid-row: 1 / span 2; }
.wi-stage { display: none; }
.dia { position: relative; display: grid; place-items: center; min-height: 11rem; padding: 1.6rem; border-radius: var(--r-m); background: var(--paper-2); }
.tag { display: inline-flex; padding: 0.4rem 0.8rem; border-radius: 999px; background: var(--ink); color: var(--moon); font-size: 0.85rem; font-weight: 600; }
.dia-watch { grid-template-columns: auto minmax(4rem, 10rem) auto; justify-content: center; gap: 0.6rem; }
.dia .n { display: grid; justify-items: center; padding: 0.6rem 0.8rem; border-radius: var(--r-s); background: #fff; border: 1.5px solid var(--ink); font-weight: 700; font-size: 0.9rem; }
.dia .n small { display: grid; font-weight: 500; font-size: 0.72rem; color: var(--muted); }
.dia .n small > span { grid-area: 1 / 1; }
.st-run { opacity: 0; }
.n-dog small { color: var(--violet); }
.dia-watch svg { width: 100%; height: 2.4rem; overflow: visible; }
.dia-watch path { fill: none; stroke: var(--violet); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dia-heat { gap: 1.2rem; }
.heat { position: relative; width: 100%; max-width: 24rem; margin-top: 1.1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.25rem; }
.heat i { font-style: normal; font-size: 0.75rem; font-weight: 600; text-align: center; padding: 0.6rem 0; border-radius: 0.4rem; color: var(--ink); }
.heat i:nth-child(1) { background: #cdeedd; } .heat i:nth-child(2) { background: #f6e3a8; } .heat i:nth-child(3) { background: #f6c08f; } .heat i:nth-child(4) { background: #ef9d8c; }
.heat-mark { position: absolute; left: 62.5%; top: -1.05rem; width: 0; height: 0; translate: -50% 0; border: 0.5rem solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.dia-plug { gap: 1.4rem; }
.plugset { display: flex; align-items: center; }
.socket { display: grid; grid-template-rows: 1fr 1fr; place-items: center; width: 3.4rem; height: 3.4rem; padding: 0.7rem 0; border-radius: 0.8rem; background: #fff; border: 2px solid var(--ink); }
.socket i { width: 0.75rem; height: 0.3rem; border-radius: 0.1rem; background: var(--ink); }
.plug { position: relative; width: 3rem; height: 2.2rem; margin-left: 0.95rem; translate: 1.6rem 0; border-radius: 0.5rem 0.9rem 0.9rem 0.5rem; background: var(--ink); }
.plug::after { content: ""; position: absolute; left: 100%; top: 50%; width: 4.5rem; height: 3px; translate: 0 -50%; border-radius: 2px; background: var(--ink); }
.plug i { position: absolute; left: -0.95rem; width: 0.95rem; height: 0.3rem; border-radius: 0.1rem; background: var(--ink); }
.plug i:first-child { top: 0.45rem; } .plug i:last-child { bottom: 0.45rem; }
.batt { position: relative; width: 100%; max-width: 15rem; height: 3.2rem; margin-top: 1.6rem; border: 2px solid var(--ink); border-radius: 0.7rem; padding: 0.3rem; }
.batt::after { content: ""; position: absolute; right: -0.45rem; top: 1rem; width: 0.3rem; height: 0.9rem; border-radius: 0 0.2rem 0.2rem 0; background: var(--ink); }
.batt .fill { display: block; height: 100%; width: calc(20% - 0.3rem); border-radius: 0.4rem; background: linear-gradient(90deg, var(--green), #9be3bf); }
.batt .floor { position: absolute; left: 20%; top: -0.45rem; bottom: -0.45rem; border-left: 2px dashed var(--violet); }
.batt .floor span { position: absolute; left: 0; bottom: 100%; translate: -50% -0.25rem; white-space: nowrap; font: normal 700 0.8rem var(--sans); color: var(--violet); }
.dia-time { gap: 0.6rem; }
.tl { width: 100%; max-width: 24rem; height: 0.7rem; border-radius: 999px; background: #e3d9c4; overflow: hidden; }
.tl-fill { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, var(--violet), var(--lavender)); transform-origin: 0 50%; }
.tl-labels { display: flex; justify-content: space-between; width: 100%; max-width: 24rem; margin: 0; font: 600 0.8rem var(--mono); color: var(--muted); }

/* The console: night colors for the same pictures. */
.wi-stage .dia { width: 100%; min-height: 0; padding: 0; background: transparent; }
.wi-stage .n { background: rgba(255, 255, 255, 0.06); border-color: rgba(245, 239, 226, 0.4); color: var(--moon); }
.wi-stage .n small { color: var(--moon-muted); }
.wi-stage .n-dog small { color: inherit; opacity: 0.85; }
.wi-stage .dia-watch path { stroke: var(--lavender); }
.wi-stage .heat-mark { border-top-color: var(--moon); }
.wi-stage .socket { background: rgba(255, 255, 255, 0.06); border-color: var(--moon); }
.wi-stage .socket i, .wi-stage .plug, .wi-stage .plug i, .wi-stage .plug::after { background: var(--moon); }
.wi-stage .batt { border-color: var(--moon); }
.wi-stage .batt::after { background: var(--moon); }
.wi-stage .batt .floor { border-color: var(--lavender); }
.wi-stage .batt .floor span { color: var(--lavender); }
.wi-stage .tl { background: rgba(255, 255, 255, 0.14); }
.wi-stage .tl-labels { color: var(--moon-muted); }
.wi-stage .tag, .wi-stage .batt .floor span { display: none; }
.wi-say { margin: 0 0 1.8rem; font: 400 clamp(1.8rem, 2.6vw, 2.4rem)/1.1 var(--serif); letter-spacing: var(--track); color: var(--moon); text-align: center; }

/* ===== Compared: three sentences, then the table for people who scan. ===== */
.versus { text-align: center; }
.v-intro { margin: 0 auto; font-size: 1.15rem; color: var(--muted); }
.v-lines { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.v-lines li { font: 400 clamp(2.2rem, 5vw, 4.4rem)/1.05 var(--serif); letter-spacing: calc(var(--track) - 0.01em); }
.v-lines em { color: var(--violet); }
.v-caffeinate { max-width: 40rem; margin: 2rem auto 0; font-size: 1.15rem; color: var(--muted); }
.v-all { margin: 1.4rem 0 0; font: 400 clamp(1.8rem, 3.4vw, 2.8rem)/1.1 var(--serif); letter-spacing: var(--track); }
.v-all em { color: var(--violet); }
.v-newer { max-width: 34rem; margin: 1.2rem auto 0; color: var(--muted); font-size: 0.95rem; }
.v-newer a { font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--line); }
.v-newer a:hover { border-color: var(--ink); }
.v-table { max-width: 52rem; margin: 2.4rem auto 0; text-align: center; }
.v-table summary { cursor: pointer; display: inline-block; font-weight: 600; border-bottom: 2px solid var(--line); }
.v-table summary::-webkit-details-marker { display: none; }
.v-table table { width: 100%; margin-top: 1.2rem; border-collapse: collapse; text-align: left; font-size: 0.95rem; background: var(--card); border: 1px solid var(--line); }
.v-table th, .v-table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.v-table th:first-child { width: 30%; }
.v-table thead th { font-family: var(--serif); font-weight: 400; font-size: 1.05rem; }
.v-table tbody th { font-weight: 600; }
.v-table td { color: var(--muted); }
.v-table .us { color: var(--violet); font-weight: 600; background: rgba(230, 217, 255, 0.3); }

/* ===== Private ===== */
.private { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 3.5rem; align-items: center; }
.facts { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.facts li { display: flex; gap: 0.7rem; font-weight: 600; }
.facts li::before { content: "\2713"; color: var(--violet); font-weight: 700; }
.label { margin: 0; padding: 0.4rem 1.3rem 0.7rem; border: 2px solid var(--ink); border-radius: var(--r-m); background: #fff; font-size: 0.98rem; box-shadow: 10px 10px 0 var(--lavender); }
.label > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.label dd { margin: 0; color: var(--violet); font-weight: 700; text-align: right; }
.label .label-head { border-top: 0; border-bottom: 6px solid var(--ink); padding: 0.6rem 0 0.7rem; align-items: baseline; }
.label .label-head dt { font-family: var(--serif); font-size: 1.6rem; }
.label .label-head strong { font-family: var(--sans); font-size: 1rem; color: #fff; background: var(--violet); padding: 0.15rem 0.7rem; border-radius: 999px; }

/* ===== Price: one ticket, with the button on its stub. ===== */
.pricing { text-align: center; }
.pricing .section-lead { margin-left: auto; margin-right: auto; }
.ticket { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); max-width: 54rem; margin: 3rem auto 0; text-align: left; border: 2px solid var(--ink); border-radius: var(--r-l); background: var(--card); box-shadow: 10px 10px 0 var(--lavender); }
.ticket-stub { position: relative; display: grid; align-content: start; justify-items: start; gap: 0.5rem; padding: 2.4rem; border-radius: calc(var(--r-l) - 2px) 0 0 calc(var(--r-l) - 2px); background: var(--paper-2); border-right: 2px dashed var(--ink); }
.ticket-stub::before, .ticket-stub::after { content: ""; position: absolute; right: -0.95rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.ticket-stub::before, .ticket-stub::after { z-index: 1; }
.ticket-stub::before { top: -1rem; clip-path: inset(calc(50% - 3px) 0 0 0); }
.ticket-stub::after { bottom: -1rem; clip-path: inset(0 0 calc(50% - 3px) 0); }
.ticket-stub .button { margin-top: 1rem; }
.ticket-stub .fine { margin: 0.3rem 0 0; }
.plan-name { margin: 0; font: 500 0.78rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.plan-big { margin: 0.4rem 0 0; font: 400 6rem/1 var(--serif); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan-terms { margin: 0; color: var(--muted); text-wrap: balance; }
.ticket-path { position: relative; list-style: none; margin: 0; padding: 2.4rem 2.4rem 2.4rem 4.4rem; display: grid; align-content: center; gap: 1.6rem; }
.ticket-path li { position: relative; }
.ticket-path li:not(:last-child)::after { content: ""; position: absolute; left: calc(-2.35rem + 0.55rem - 1px); top: 1.2rem; height: calc(100% + 0.5rem); width: 2px; background: var(--ink); transform-origin: 50% 0; }
.ticket-path li::before { content: ""; position: absolute; left: -2.35rem; top: 0.1rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); }
.ticket-path li:last-child::before { background: var(--lavender); }
.ticket-path b { display: block; margin-bottom: 0.35rem; font: 500 0.78rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.maker { max-width: 40rem; margin: 2.4rem auto 0; font: 400 1.15rem/1.45 var(--serif); color: var(--ink); text-wrap: balance; }
.maker a { color: var(--violet); }
.price-note { max-width: 40rem; margin: 1rem auto 0; }

/* ===== FAQ ===== */
.faq h2 { text-align: center; }
.faq-group { max-width: 48rem; margin: 3rem auto 0.9rem; font: 500 0.78rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.faq-list { max-width: 48rem; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem 0.2rem; font: 1.3rem/1.3 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 1.5rem/1 var(--sans); color: var(--violet); transition: transform 0.2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0.2rem 1.4rem; color: var(--muted); max-width: 42rem; }

/* ===== Closing: the lid closes as you arrive, then two doors. ===== */
.closing { text-align: center; overflow: clip; timeline-scope: --cmac; }
.closing-scene { position: relative; display: flex; justify-content: center; align-items: flex-end; margin: 0 auto 1.5rem; }
.closing .mbp { margin: -9em 0 0; font-size: clamp(8px, 0.85vw, 12px); height: 21.5em; }
.closing h2 { position: relative; font-size: clamp(2.6rem, 6vw, 5rem); margin-bottom: 2.4rem; }
.doors { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.4rem; align-items: stretch; max-width: 58rem; margin: 0 auto; }
.door { display: grid; align-content: start; justify-items: start; gap: 0.9rem; padding: 1.3rem 1.4rem; border-radius: var(--r-m); background: rgba(230, 217, 255, 0.06); border: 1px solid rgba(230, 217, 255, 0.3); text-align: left; }
.door .fine { margin: 0; }
.door-title { margin: 0; color: var(--moon-muted); font-size: 0.9rem; font-weight: 600; }
.doors .or { align-self: center; margin: 0; font: italic 1.4rem var(--serif); color: var(--moon-muted); }
.night-button { position: relative; border-color: #0b0916; box-shadow: 0 0 0 1px rgba(230, 217, 255, 0.5), 0 0.9rem 2.4rem rgba(139, 92, 246, 0.45); }
.night-button:hover { box-shadow: 0 0 0 1px rgba(230, 217, 255, 0.7), 0 1.1rem 2.8rem rgba(139, 92, 246, 0.6); }
.closing-ask { margin: 0; text-align: left; box-shadow: none; border-color: rgba(230, 217, 255, 0.3); background: rgba(230, 217, 255, 0.06); }
.closing-ask .ask-prompt { font-size: 1rem; }

/* ===== Footer ===== */
.footer { padding: 3rem 1.25rem 3.5rem; border-top: 1px solid var(--line); }
.footer-inner { max-width: var(--wide); margin: 0 auto; display: grid; gap: 1.2rem; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: 0.92rem; }
.footer ul a { color: var(--muted); text-decoration: none; }
.footer ul a:hover { color: var(--ink); }
.footer p { margin: 0; font-size: 0.82rem; color: var(--muted); }

/* ===== Blog: one readable column, the homepage's type, and the night card at the end. ===== */
.page-post main, .page-blog main { padding-top: calc(var(--nav-h) + 1.5rem); }
.post { max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }
.toc { display: none; }
@media (min-width: 78rem) {
  .post-wrap { display: grid; grid-template-columns: minmax(0, 46rem) 15rem; justify-content: center; gap: 3.5rem; padding: 0 1.25rem; }
  .post-wrap .post { margin: 0; padding: 0; }
  .toc { display: block; position: sticky; top: 7.5rem; align-self: start; margin-top: 1rem; padding-left: 1.1rem; border-left: 1px solid var(--line); grid-column: 2; grid-row: 1; }
  .post-wrap .post { grid-column: 1; grid-row: 1; }
  .page-post .post-cta { max-width: 64.5rem; }
  .page-post .post-related { max-width: 67rem; }
  .toc-title { margin: 0 0 0.8rem; font: 500 0.74rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
  .toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
  .toc a { display: block; font-size: 0.9rem; line-height: 1.35; color: var(--muted); text-decoration: none; }
  .toc a:hover { color: var(--violet); }
}
.blog-head { max-width: 60rem; margin: 0 auto; padding: 0 1.25rem; }
.blog-head .post-lead { max-width: 44rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 2.2rem; font: 500 0.76rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.post-head h1, .blog-head h1 { font-size: clamp(2.3rem, 5vw, 3.5rem); line-height: 1.04; letter-spacing: calc(var(--track) - 0.005em); }
.blog-head h1 em { color: var(--violet); }
.post-lead { margin: 1.2rem 0 0; font-size: 1.24rem; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.post-meta { margin: 1.1rem 0 0; font-size: 0.9rem; color: var(--muted); }
.post-meta a { color: var(--violet); }
.post-body { margin-top: 2.2rem; font-size: 1.15rem; line-height: 1.72; overflow-wrap: break-word; }
.post-body > :is(p, ul, ol, h2, h3, .careful) { max-width: 40rem; }
.post-body > * { margin: 0; }
.post-body > * + * { margin-top: 1.1rem; }
.post-body h2 { margin-top: 2.9rem; font-size: clamp(1.7rem, 3vw, 2.15rem); line-height: 1.12; scroll-margin-top: 6rem; }
.post-body h3 { margin-top: 2rem; font-size: 1.35rem; line-height: 1.25; scroll-margin-top: 6rem; }
.post-body > h2 + *, .post-body > h3 + * { margin-top: 0.75rem; }
.post-body > h2 + h3 { margin-top: 1.4rem; }
.post-body ul, .post-body ol { padding-left: 1.35rem; }
.post-body li + li { margin-top: 0.45rem; }
.post-body li::marker { color: var(--violet); }
.post-body a { color: var(--violet); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.post-body a:hover { text-decoration-thickness: 2px; }
.post-body strong { font-weight: 650; }
.post-body pre { padding: 1.05rem 1.25rem; border-radius: var(--r-m); background: #0c0a18; color: var(--moon); overflow-x: auto; font: 0.86rem/1.7 var(--mono); box-shadow: 0 1rem 2rem rgba(23, 21, 31, 0.12); }
.post-body pre code { padding: 0; background: none; color: inherit; font: inherit; }
.post-body blockquote { padding: 1.1rem 1.3rem; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--line); }
.post-body blockquote p { margin: 0; }
.post-body .short-answer { margin-top: 0; border: 2px solid var(--ink); background: #fff; box-shadow: 8px 8px 0 var(--lavender); font-size: 1.12rem; line-height: 1.6; }
.post-body .careful { background: #fff6e6; border-color: #f0c98d; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--card); }
.post-body table { width: 100%; border-collapse: collapse; font-size: 0.88rem; line-height: 1.45; }
.post-body th, .post-body td { padding: 0.6rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.post-body thead th { background: var(--paper-2); font-family: var(--serif); font-weight: 400; font-size: 0.95rem; vertical-align: bottom; }
.post-body tbody th { font-weight: 600; background: var(--card); }
.post-body tbody th, .post-body thead th:first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--line); }
/* A shadow at the right edge while a wide table can still scroll. */
.table-wrap { background: linear-gradient(270deg, var(--card) 40%, rgba(255, 253, 248, 0)) right / 2.5rem 100% no-repeat local, radial-gradient(farthest-side at 100% 50%, rgba(23, 21, 31, 0.18), transparent) right / 0.9rem 100% no-repeat scroll, var(--card); }
.post-body tbody tr:last-child > * { border-bottom: 0; }
.post-cta { position: relative; max-width: 60rem; margin: 4.5rem auto 0; padding: clamp(2.5rem, 6vw, 4rem) clamp(1.1rem, 4vw, 3rem); border-radius: var(--r-l); text-align: center; overflow: clip; }
.post-cta > * { position: relative; }
.post-cta h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.post-cta-lead { max-width: 38rem; margin: 1rem auto 2.2rem; color: var(--moon-muted); }
.post-related, .blog-list { max-width: 60rem; margin: 4rem auto 0; padding: 0 1.25rem; }
.page-post main, .page-blog main { padding-bottom: 5rem; }
.post-related h2 { margin-bottom: 1.2rem; font-size: 1.8rem; }
.blog-list { margin-top: 2.6rem; }
.post-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.post-card a { display: grid; align-content: start; gap: 0.55rem; height: 100%; padding: 1.35rem 1.4rem 1.5rem; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--line); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.post-card a:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 6px 6px 0 var(--lavender); }
.post-card-kicker { font: 500 0.74rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); }
.post-card-title { font: 400 1.38rem/1.18 var(--serif); letter-spacing: var(--track); text-wrap: balance; }
.post-card-text { font-size: 0.95rem; line-height: 1.5; color: var(--muted); }
.blog-featured { max-width: 60rem; margin: 2.6rem auto 0; padding: 0 1.25rem; }
.post-featured { position: relative; display: grid; gap: 0.7rem; padding: clamp(1.6rem, 4vw, 2.6rem); border-radius: var(--r-l); text-decoration: none; color: var(--moon); background: radial-gradient(120% 120% at 85% 0%, #3b2a7a, var(--night) 60%); overflow: clip; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.post-featured:hover { transform: translateY(-2px); box-shadow: 8px 8px 0 var(--lavender); }
.post-featured .post-card-kicker { color: var(--lavender); }
.post-featured-title { max-width: 40rem; font: 400 clamp(1.8rem, 3.4vw, 2.6rem)/1.08 var(--serif); letter-spacing: var(--track); text-wrap: balance; }
.post-featured .post-card-text { max-width: 40rem; color: var(--moon-muted); font-size: 1.05rem; }
.post-featured-more { margin-top: 0.4rem; font-weight: 650; color: var(--lavender); }
.post-featured-more::after { content: " \2192"; }
.blog-group { margin: 0 0 1.2rem; padding-top: 1.4rem; border-top: 1px solid var(--line); font: 400 1.75rem/1.1 var(--serif); letter-spacing: var(--track); color: var(--ink); }
.post-card-title, .post-card-text, .post-featured-title { margin: 0; }
.post-featured .post-featured-title { color: var(--moon); }
.post-head .chapter { color: var(--violet); }
@media (min-width: 44rem) {
  .post-cta { width: calc(100% - 2.5rem); max-width: 57.5rem; }
  .post-body :not(pre) > code { white-space: nowrap; }
}
@media (max-width: 60rem) { .post-cta .door { width: 100%; } }
.guides { max-width: calc(var(--wide) + 2.5rem); margin: 0 auto; text-align: center; }
.guides .section-lead { margin-inline: auto; }
.guides .post-list { margin-top: 2.6rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 21rem)); justify-content: center; text-align: left; }
.guides-more { margin: 1.8rem 0 0; text-align: center; }

/* ===== Keyframes ===== */
@keyframes blink { 50% { opacity: 0; } }
@keyframes breathe { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(76, 195, 138, 0.6); } 100% { box-shadow: 0 0 0 0.6em rgba(76, 195, 138, 0); } }
@keyframes ring { from { box-shadow: 0 0 0 0 rgba(125, 74, 217, 0.45); } to { box-shadow: 0 0 0 0.9em rgba(125, 74, 217, 0); } }
@keyframes fade-up { from { opacity: 0; translate: 0 1rem; } }
@keyframes rise { from { opacity: 0; translate: 0 0.35em; filter: blur(6px); } }
@keyframes ink { from { clip-path: inset(-0.2em 100% -0.3em 0); } to { clip-path: inset(-0.2em -0.2em -0.3em 0); } }
@keyframes mac-rise { from { opacity: 0; translate: 0 3rem; scale: 0.96; } }
@keyframes wake { from { filter: brightness(0); } 55% { filter: brightness(1.25); } to { filter: none; } }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes panel-in { from { opacity: 0; scale: 0.94; translate: 0 -0.5em; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes panel-show { to { opacity: 1; scale: 1; translate: 0 0; } }
/* The cursor comes up from the terminal, clicks the menu bar icon, waits for the panel, clicks the power button, and leaves. */
@keyframes cursor-path {
  0% { opacity: 0; translate: 12em 9.5em; scale: 1; }
  8% { opacity: 1; translate: 12em 9.5em; }
  30% { translate: 19.75em 0.35em; scale: 1; }
  32% { scale: 0.8; } 35% { scale: 1; }
  50% { translate: 19.75em 0.35em; }
  66% { translate: 19.95em 4.55em; scale: 1; }
  68% { scale: 0.8; } 71% { scale: 1; }
  85% { opacity: 1; translate: 19.95em 4.55em; }
  100% { opacity: 0; translate: 20.2em 5.2em; }
}
@keyframes gone { to { opacity: 0; } }
@keyframes on-swap { to { opacity: 1; } }
@keyframes off-swap { to { opacity: 0; } }
@keyframes power-on { to { background: linear-gradient(135deg, #a76de8, var(--accent)); box-shadow: 0 0 1.6em rgba(125, 74, 217, 0.6); } }
@keyframes icon-on { to { fill: var(--accent); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes dusk { from { translate: 0 -135%; } to { translate: 0 0; } }
@keyframes hero-out { to { opacity: 0; translate: 0 -3rem; } }
@keyframes lid-close { from { transform: rotateX(0deg); } to { transform: rotateX(-89deg); } }
@keyframes lid-open { from { transform: rotateX(-89deg); } to { transform: rotateX(0deg); } }
@keyframes beat { 0% { opacity: 0; translate: 0 1.5rem; } 15%, 85% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -1.5rem; } }
@keyframes beat-in { from { opacity: 0; translate: 0 1.5rem; } to { opacity: 1; translate: 0 0; } }
@keyframes pop-in { from { opacity: 0; scale: 0.8; translate: 0 0.8rem; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes mac-center { from { transform: translateY(var(--start-y)) scale(var(--start-s)); } to { transform: none; } }
@keyframes mac-aside { from { translate: -50% -50%; scale: 1; } to { translate: var(--aside-x) var(--aside-y); scale: var(--aside-s); } }
@keyframes mac-home { from { translate: var(--mid-x) var(--mid-y); scale: var(--mid-s); } to { translate: -50% var(--home-y, -50%); scale: 1; } }
@keyframes phone-rise { from { opacity: 0; translate: 0 70svh; rotate: 6deg; } }
@keyframes mac-mid { from { translate: var(--aside-x) var(--aside-y); scale: var(--aside-s); } to { translate: var(--mid-x) var(--mid-y); scale: var(--mid-s); } }
@keyframes panel-close { to { opacity: 0; scale: 0.9; translate: 0 -0.8em; } }
@keyframes panel-open { from { opacity: 0; scale: 0.9; translate: 0 -0.8em; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes phone-dock { to { translate: var(--dock-x) var(--dock-y); scale: var(--dock-s); rotate: 2.5deg; } }
@keyframes sunrise { to { translate: 0 0; } }
@keyframes power-off { to { background: #3a3940; box-shadow: none; } }
@keyframes icon-off { to { fill: transparent; } }
@keyframes link-flow { to { stroke-dashoffset: -9; } }
@keyframes orbit { from { rotate: -16deg; } to { rotate: 16deg; } }
@keyframes moon-vis { 0% { opacity: 0; } 8%, 90% { opacity: 1; } 100% { opacity: 0; } }
@keyframes stars { 0% { opacity: 0; } 20%, 78% { opacity: 0.6; } 100% { opacity: 0; } }
@keyframes msg-in { from { opacity: 0; max-height: 0; padding-block: 0; margin-top: -0.5rem; translate: 0 0.6rem; } to { opacity: 1; max-height: 7rem; translate: 0 0; } }
@keyframes entry { from { opacity: 0; translate: 0 1rem; } to { opacity: 1; translate: 0 0; } }
@keyframes entry-swap { 0% { opacity: 0; translate: 0 1rem; } 20%, 80% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -1rem; } }
/* The night runs fast while the Mac works alone, then slows down for the phone: 23:41 to 05:05 in the first half, 05:05 to 07:41 in the second. */
@keyframes clock { 0% { --t: 1421; } 50% { --t: 1745; } 86.2% { --t: 1858; } 88% { --t: 1862; } 90% { --t: 1863; } 96.5% { --t: 1890; } 100% { --t: 1901; } }
@keyframes night-bar { 0% { scale: 0 1; } 50% { scale: 0.675 1; } 100% { scale: 1 1; } }
@keyframes nav-night { 0%, 100% { background: rgba(21, 18, 42, 0.86); border-color: rgba(255, 255, 255, 0.14); color: var(--moon); } }
@keyframes horizon { 0% { clip-path: inset(0 4vw round 2.5rem); } 18%, 82% { clip-path: inset(0 0 round 0); } 86% { clip-path: inset(0 0.6vw round 2.5rem); } 100% { clip-path: inset(0 4vw round 2.5rem); } }
@keyframes reveal { from { opacity: 0; translate: 0 2rem; } to { opacity: 1; translate: 0 0; } }
@keyframes wipe { from { clip-path: inset(-0.2em 100% -0.3em 0); translate: 0 0.15em; } to { clip-path: inset(-0.2em -0.2em -0.3em 0); translate: 0 0; } }
@keyframes wi-focus { 0%, 100% { opacity: 0.42; } 30%, 70% { opacity: 1; } }
@keyframes draw-y { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes stroke { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes app-stop { to { opacity: 0.6; filter: grayscale(1); } }
@keyframes dog-on { to { background: var(--lavender); color: var(--ink); box-shadow: 0 0 0 0.35rem rgba(109, 63, 192, 0.18); } }
@keyframes slide-mark { from { left: 12.5%; } to { left: 62.5%; } }
@keyframes pop { from { opacity: 0; scale: 0.85; } to { opacity: 1; scale: 1; } }
@keyframes unplug { from { translate: 0 0; } to { translate: 1.6rem 0; } }
@keyframes drain-to { from { width: 92%; } to { width: calc(20% - 0.3rem); } }
@keyframes fill-up { from { scale: 0 1; } to { scale: 1 1; } }

@property --t { syntax: "<integer>"; inherits: true; initial-value: 1421; }
@property --hh { syntax: "<integer>"; inherits: false; initial-value: 23; }
@property --mm { syntax: "<integer>"; inherits: false; initial-value: 41; }

/* ===== Motion: the one-time intro, then the scroll. ===== */
@media (prefers-reduced-motion: no-preference) {
  .headline .line:first-child { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both; }
  .headline .ink { animation: ink 0.9s cubic-bezier(0.6, 0, 0.2, 1) 0.45s both; }
  .hero .pill { animation: fade-up 0.7s ease both; }
  .hero .lead { animation: fade-up 0.8s ease 0.4s both; }
  .hero .cta-row { animation: fade-up 0.8s ease 0.5s both; }
  .hero .fine { animation: fade-up 0.8s ease 0.6s both; }
  .mbp-glow::after { animation: breathe 6s ease-in-out infinite; }
  .mac-status .dot.green, .demo-status .dot { animation: pulse 1.8s ease-out infinite; }
  .fx-link path { animation: link-flow 1.1s linear infinite; }
  .demo:not(:has(#p-on:checked)) .kp-power { animation: ring 1.8s ease-out infinite; }
  .demo:has(#p-on:checked):not(:has(#lid:checked)) .lid-switch { animation: ring 1.8s ease-out infinite; }

  @supports (animation-timeline: view()) {
    /* The opening: the hero copy lies over the first frame of the film, so the open Mac and the phone are on the first screen. */
    .opening { display: grid; }
    .opening > .hero, .opening > .film { grid-area: 1 / 1; }
    .opening > .hero { position: relative; z-index: 2; align-self: start; animation: hero-out linear both; animation-timeline: --film; animation-range: contain 0.5% contain 4.5%; }
    .film-anchor { top: 100svh; }
    .phone-anchor { top: calc(239svh + 6rem); }

    /* The film. Each element has one driver: time for the intro, the scroll for everything after. */
    .film-track { height: 480svh; view-timeline: --film block; view-timeline-inset: 0; }
    .b2a { display: block; }
    .film-stage { position: sticky; top: 0; height: 100svh; display: block; padding: 0; background: transparent; color: var(--ink); }
    .film-stage > * { position: absolute; }
    .fx-night, .fx-dawn, .fx-day, .fx-stars { inset: 0; }
    /* Dusk comes down from the top with a lavender edge, and the sunrise comes up from the bottom, so paper never mixes into grey. */
    .film-stage .fx-night { opacity: 1; translate: 0 -135%; background: linear-gradient(180deg, var(--night) 45%, #1d173a 80%, #221b47); }
    .film-stage .fx-night::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 35%; background: linear-gradient(180deg, #221b47, #3a2c79 30%, rgba(124, 92, 214, 0.42) 62%, rgba(251, 247, 238, 0)); }
    .film-stage .fx-dawn { opacity: 1; translate: 0 100%; background: linear-gradient(0deg, var(--paper) 0%, #f7d3a6 16%, #eeb3c4 34%, #9d86de 58%, rgba(43, 34, 87, 0) 100%); }
    .film-stage .fx-orbit { left: 45%; top: 22svh; width: 90vmax; height: 90vmax; margin-left: -45vmax; rotate: -16deg; }
    .mbp-pos {
      left: 50%; top: 42%; translate: -50% -50%; font-size: clamp(10px, min(1.45vw, 2.15svh), 21px);
      --start-s: 0.84; --start-y: calc(58svh - 3.4rem - var(--start-s) * 10.2em);
      --aside-x: calc(-50% + 12vw); --aside-y: 0%; --aside-s: 0.8; --mid-x: calc(-50% - 4vw); --mid-y: -12%; --mid-s: 0.66; --home-y: -50%;
    }
    .mac-status { position: absolute; left: 50%; top: 100%; translate: -50% 0.9em; width: max-content; margin: 0; opacity: 0; }
    .film .mbp-lid { transform: rotateX(0deg); }
    .film .screen-off, .film .mbp-glow { opacity: 0; }
    .film .spill { opacity: 1; }
    .b1, .b3, .fx-chips, .scroll-cue { left: 0; right: 0; margin-inline: auto; }
    .scroll-cue { bottom: 1.4rem; width: max-content; max-width: 92vw; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0.3rem 0.8rem; font-size: 0.98rem; color: var(--muted); }
    .cue-act { display: inline-block; font: 500 0.78rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); }
    .cue-act::after { content: " \2193"; }
    .fx-chips { top: 72svh; width: max-content; max-width: 92vw; }
    .b1 { top: 14svh; width: min(92vw, 52rem); color: var(--moon); }
    .b2 { left: 6vw; top: 24svh; width: min(30vw, 26rem); color: var(--moon); }
    .film-stage .phone {
      --ph: min(34rem, calc(100svh - var(--nav-h) - 2.5rem)); --dock-s: 0.6; --dock-x: 6vw;
      --dock-y: calc(50svh - 3rem - var(--nav-h) / 2 + (0.5 - var(--dock-s)) * var(--ph));
      left: 66vw; top: calc(var(--nav-h) + (100svh - var(--nav-h) - var(--ph)) / 2); transform-origin: 0 0;
    }
    @media (max-height: 760px) { .mbp-pos { --start-s: 0.72; } .film-stage .phone { --dock-s: 0.5; } }
    .fx-term {
      display: block; left: calc(62vw - 11rem); top: calc(var(--nav-h) + 6svh); width: 25rem; padding: 0 0 0.9rem; border-radius: 1.4rem; color: var(--moon);
      background: rgba(10, 8, 20, 0.82); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 1.6rem 3rem rgba(0, 0, 0, 0.35), 0 0 3rem rgba(139, 92, 246, 0.18);
    }
    /* On wide screens the bubble rises from the closed Mac and moves with it; the stage copy is for phones. */
    .film-stage .stage-term { display: none; }
    .film-stage .mac-term { position: absolute; left: calc(50% - 15rem); top: auto; bottom: 8.2em; width: 30rem; }
    .mac-term .term-log { font-size: 1.1rem; }
    .mac-term .win-bar { font-size: 0.92rem; }
    .mac-term .trail-1 { left: calc(50% - 0.6rem); top: calc(100% + 0.8rem); width: 1.2rem; height: 1.2rem; }
    .mac-term .trail-2 { left: calc(50% - 1.1rem); top: calc(100% + 2.5rem); width: 0.75rem; height: 0.75rem; }
    .fx-term .win-bar { font-size: 0.74rem; padding: 0.7rem 1rem; }
    .fx-term .win-bar span { margin-left: 0.6rem; }
    .term-log { list-style: none; margin: 0; padding: 0.7rem 1.1rem 0; display: grid; gap: 0.35rem; font: 0.86rem/1.5 var(--mono); }
    .term-log li { padding-left: calc(5ch + 0.9rem); text-indent: calc(-5ch - 0.9rem); }
    .term-log time { margin-right: 0.9rem; color: var(--moon-muted); font-weight: 600; }
    .term-log b { margin-right: 0.5rem; color: #9be3bf; font-weight: 600; }
    .fx-term .trail { position: absolute; border-radius: 50%; background: rgba(10, 8, 20, 0.82); border: 1px solid rgba(230, 217, 255, 0.35); box-shadow: 0 0 0.8rem rgba(139, 92, 246, 0.35); }
    .fx-term .trail-1 { left: 46%; top: calc(100% + 0.7rem); width: 1.15rem; height: 1.15rem; }
    .fx-term .trail-2 { left: 44%; top: calc(100% + 2.3rem); width: 0.7rem; height: 0.7rem; }
    .fx-link { left: 52vw; top: 57svh; width: 12vw; display: grid; justify-items: center; gap: 0.2rem; opacity: 0; }
    .film-stage .mac-status { font-size: 1.25em; }
    .film-stage .fx-clock { margin-top: 1.4rem; }
    .film-stage .b3 { top: 70svh; width: min(92vw, 52rem); color: var(--ink); }
    .film-stage .b3 em { color: var(--violet); }
    .film-stage .b3-small { color: var(--muted); }
    .fx-clock::after {
      --hh: mod(round(down, var(--t) / 60, 1), 24); --mm: mod(var(--t), 60);
      counter-reset: hh var(--hh) mm var(--mm); content: counter(hh, decimal-leading-zero) ":" counter(mm, decimal-leading-zero);
    }

    /* The intro on load: the headline lands, then the Mac rises, the screen wakes, the agent types, the panel turns it on and the phone arrives. */
    .mbp-intro { animation: mac-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.4s both; }
    .film .mbp-screen { animation: wake 0.6s ease-out 0.8s both; }
    .film .win-night .t { animation: type 0.4s steps(22, end) both; }
    .film .win-night .t1 { animation-delay: 1s; } .film .win-night .t2 { animation-delay: 1.3s; } .film .win-night .t3 { animation-delay: 1.6s; }
    /* On load the cursor turns it on; if the reader scrolls first, the scroll opens the panel and turns it on instead. */
    .film .panel-pop { opacity: 1; animation-name: panel-in, panel-show; animation-duration: 0.45s, auto; animation-delay: 2.3s, 0s; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1), linear; animation-fill-mode: both, forwards; animation-timeline: auto, --film; animation-range: normal, contain 0.2% contain 1.2%; }
    .film .cursor { animation-name: cursor-path, gone; animation-duration: 2.4s, auto; animation-delay: 1.5s, 0s; animation-timing-function: cubic-bezier(0.45, 0, 0.25, 1), linear; animation-fill-mode: both, forwards; animation-timeline: auto, --film; animation-range: normal, contain 0.2% contain 0.8%; }
    /* Power turns on with the intro, and back off when the agent ends the session, so the panel at dawn shows normal sleep again. */
    .film .panel-pop .pp-on { animation-name: on-swap, on-swap, off-swap; animation-duration: 0.2s, auto, auto; animation-delay: 3.15s, 0s, 0s; animation-timing-function: ease, linear, linear; animation-fill-mode: both, forwards, forwards; animation-timeline: auto, --film, --film; animation-range: normal, contain 1% contain 1.4%, contain 80.7% contain 81.2%; }
    .film .panel-pop .pp-off { animation-name: off-swap, off-swap, on-swap; animation-duration: 0.2s, auto, auto; animation-delay: 3.15s, 0s, 0s; animation-timing-function: ease, linear, linear; animation-fill-mode: both, forwards, forwards; animation-timeline: auto, --film, --film; animation-range: normal, contain 1% contain 1.4%, contain 80.7% contain 81.2%; }
    .film .panel-pop .kp-power { animation-name: power-on, power-on, power-off; animation-duration: 0.3s, auto, auto; animation-delay: 3.15s, 0s, 0s; animation-timing-function: ease, linear, linear; animation-fill-mode: both, forwards, forwards; animation-timeline: auto, --film, --film; animation-range: normal, contain 1% contain 1.4%, contain 80.7% contain 81.2%; }
    .film .mb-icon circle { animation-name: icon-on, icon-on, icon-off; animation-duration: 0.3s, auto, auto; animation-delay: 3.2s, 0s, 0s; animation-timing-function: ease, linear, linear; animation-fill-mode: both, forwards, forwards; animation-timeline: auto, --film, --film; animation-range: normal, contain 1% contain 1.4%, contain 80.7% contain 81.2%; }

    /* The scroll. Ranges are shares of the pinned stage. */
    .film-stage :where(.fx-night, .fx-stars, .fx-orbit, .fx-dawn, .fx-day, .mbp-pos, .fx-chips, .fx-chips li, .beat, .fx-clock, .fx-progress i, .phone, .chat li, .scroll-cue, .fx-link),
    .film :where(.mbp-lid, .screen-off, .spill, .mbp-glow, .kpanel, .win-night, .win-done, .mb-time > span, .mac-status, .ms) { animation-timing-function: linear; animation-fill-mode: both; animation-timeline: --film; }
    .scroll-cue { animation-name: fade-up, fade-out; animation-duration: 0.6s, auto; animation-delay: 3.7s, 0s; animation-timing-function: ease, linear; animation-timeline: auto, --film; animation-range: normal, contain 0% contain 4%; }
    .film .kpanel { transform-origin: 90% 0; animation-name: panel-close, panel-open; animation-fill-mode: both, forwards; animation-range: contain 2.6% contain 4.4%, contain 93% contain 95%; }
    .mbp-pos { animation-name: mac-center, mac-aside, mac-mid, mac-home; animation-fill-mode: both, both, forwards, forwards; animation-range: contain 0% contain 8%, contain 38% contain 44%, contain 58% contain 62%, contain 84% contain 90%; }
    .mbp-pos { animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
    .film .mbp-lid { animation-name: lid-close, lid-open; animation-fill-mode: both, forwards; animation-range: contain 5% contain 18%, contain 88% contain 95%; animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1); }
    .film .screen-off { animation-name: fade-in, fade-out; animation-fill-mode: both, forwards; animation-range: contain 11% contain 16%, contain 88.5% contain 90%; }
    .film .spill { animation-name: fade-out, fade-in; animation-fill-mode: both, forwards; animation-range: contain 11% contain 16%, contain 90% contain 94%; }
    /* The glow means the session runs: it fades when the agent ends it at 06:58. */
    .film .mbp-glow { animation-name: fade-in, fade-out; animation-fill-mode: both, forwards; animation-range: contain 16% contain 22%, contain 80.7% contain 82.5%; }
    /* While the display is dark, the screen swaps to the finished work and the clock to the morning. */
    .film .win-night, .film .mb-time > span:first-child { animation-name: fade-out; animation-range: contain 60% contain 61%; }
    .film .win-done, .film .mb-time > span + span { animation-name: fade-in; animation-range: contain 60% contain 61%; }
    .fx-night { animation-name: dusk; animation-range: contain 3% contain 18%; animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
    .b1 { animation-name: beat; animation-range: contain 13% contain 35%; }
    .film-stage .fx-chips { animation-name: fade-out; animation-fill-mode: forwards; animation-range: contain 33% contain 37%; }
    .fx-chips li { animation-name: pop-in; }
    .fx-chips li:nth-child(1) { animation-range: contain 20% contain 23%; }
    .fx-chips li:nth-child(2) { animation-range: contain 23% contain 26%; }
    .fx-chips li:nth-child(3) { animation-range: contain 26% contain 29%; }
    /* The Mac's status follows the agent, then says when the session ended. */
    .film .mac-status { animation-name: fade-in, fade-out; animation-fill-mode: both, forwards; animation-range: contain 24% contain 28%, contain 83% contain 86%; }
    .film .ms { opacity: 0; }
    .film .ms1 { opacity: 1; animation-name: fade-out; animation-fill-mode: forwards; animation-range: contain 43.9% contain 44.25%; }
    .film .ms2 { animation-name: fade-in, fade-out; animation-fill-mode: both, forwards; animation-range: contain 44.25% contain 44.6%, contain 49.8% contain 50.15%; }
    .film .ms3 { animation-name: fade-in, fade-out; animation-fill-mode: both, forwards; animation-range: contain 50.15% contain 50.5%, contain 55.5% contain 55.85%; }
    .film .ms4 { animation-name: fade-in, fade-out; animation-fill-mode: both, forwards; animation-range: contain 55.85% contain 56.2%, contain 62% contain 62.35%; }
    .film .ms5 { animation-name: fade-in, fade-out; animation-fill-mode: both, forwards; animation-range: contain 62.35% contain 62.7%, contain 76.5% contain 76.85%; }
    .film .ms6 { animation-name: fade-in, fade-out; animation-fill-mode: both, forwards; animation-range: contain 76.85% contain 77.2%, contain 78% contain 78.35%; }
    .film .ms7 { animation-name: fade-in, fade-out; animation-fill-mode: both, forwards; animation-range: contain 78.35% contain 78.7%, contain 80.7% contain 81.05%; }
    .film .ms8 { animation-name: fade-in; animation-range: contain 81.05% contain 81.4%; }
    .film-stage .fx-term { animation-name: beat-in, fade-out; animation-timing-function: linear; animation-fill-mode: both, forwards; animation-timeline: --film; animation-range: contain 41% contain 45%, contain 56.4% contain 58.4%; }
    .term-log li { animation: entry linear both; animation-timeline: --film; }
    .term-log li:nth-child(1) { animation-range: contain 42% contain 43%; }
    .term-log li:nth-child(2) { animation-range: contain 43.9% contain 44.9%; }
    .term-log li:nth-child(3) { animation-range: contain 49.8% contain 50.8%; }
    .term-log li:nth-child(4) { animation-range: contain 55.5% contain 56.5%; }
    .film-stage .fx-link { animation-name: fade-in, fade-out; animation-fill-mode: both, forwards; animation-range: contain 59% contain 62%, contain 80.7% contain 82%; }
    /* The copy beside the clock: the Mac alone first, then the phone. */
    .film-stage .b2 { animation-name: beat-in, fade-out; animation-fill-mode: both, forwards; animation-range: contain 40% contain 45%, contain 82% contain 85%; }
    .film .b2a { animation: fade-out linear forwards; animation-timeline: --film; animation-range: contain 57.4% contain 59.4%; }
    .film .b2b { animation: fade-in linear both; animation-timeline: --film; animation-range: contain 59.8% contain 61.8%; }
    .fx-clock { animation-name: clock; animation-range: contain 42% contain 82%; }
    .fx-progress i { animation-name: night-bar; animation-range: contain 42% contain 82%; }
    .film-stage .fx-orbit { animation-name: orbit, moon-vis; animation-range: contain 36% contain 84%; }
    /* The phone rises from beside the open Mac into the night, and docks beside it again at dawn. */
    .film-stage .phone { animation-name: phone-rise, phone-dock; animation-fill-mode: both, forwards; animation-range: contain 58% contain 62%, contain 84% contain 90%; animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
    .phone-body::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 2px rgba(76, 195, 138, 0.75), inset 0 0 2.4rem rgba(76, 195, 138, 0.22); }
    .film .phone-body::after { animation-name: fade-in; animation-timing-function: linear; animation-fill-mode: forwards; animation-timeline: --film; animation-range: contain 80.6% contain 81.4%; }
    .film .ph-live { animation: fade-out linear forwards; animation-timeline: --film; animation-range: contain 80.7% contain 81.2%; }
    .film .ph-done { animation: fade-in linear both; animation-timeline: --film; animation-range: contain 80.7% contain 81.2%; }
    /* The phone opens on the night so far; then each message lands when the clock shows its time. The clock slows around 07:00 so the reply has room. */
    .chat li { animation-name: msg-in; }
    .chat li:nth-child(-n+4) { animation: none; }
    .chat li:nth-child(5) { animation-range: contain 62% contain 63.2%; }
    .chat li:nth-child(6) { animation-range: contain 76.5% contain 77.1%; }
    .chat li:nth-child(7) { animation-range: contain 77.2% contain 77.8%; }
    .chat li:nth-child(8) { animation-range: contain 78% contain 78.6%; }
    .chat li:nth-child(9) { animation-range: contain 80.6% contain 81.4%; }
    .chat li:nth-child(10) { animation-range: contain 81% contain 82%; }
    .fx-stars { animation-name: stars; animation-range: contain 8% contain 88%; }
    .fx-dawn { animation-name: sunrise; animation-range: contain 82% contain 91%; animation-timing-function: cubic-bezier(0.3, 0, 0.3, 1); }
    .fx-day { animation-name: fade-in; animation-range: contain 90% contain 95%; }
    .b3 { animation-name: beat-in; animation-range: contain 92% contain 97%; }

    /* The nav turns to night while a night section is under its middle. */
    .nav { animation-name: nav-night, nav-night, nav-night; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: none; animation-timeline: --film, --n-agents, --n-close; animation-range: contain 6% contain 89%, cover 0% cover 100%, cover 0% cover 100%; }
    .agents { view-timeline: --n-agents block; view-timeline-inset: 2.6rem calc(100% - 2.8rem); }
    .closing { view-timeline: --n-close block; view-timeline-inset: 2.6rem calc(100% - 2.8rem); }

    /* Reveals, eased, once each block enters. */
    .try-copy, .demo, .private-copy, .label, .v-intro, .v-caffeinate, .ticket, .faq-list, .agents-copy, .docs, .ribbon, .wi-stage, .guides .post-list { animation: reveal cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-timeline: view(); animation-range: entry 10% entry 60%; }
    .whatif h2, .private h2, .pricing h2, .faq h2, .agents h2, .v-all, .guides h2 { animation: wipe cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-timeline: view(); animation-range: entry 20% entry 80%; }
    .v-lines li { animation: wipe linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .v-lines li:nth-child(2) { animation-range: entry 15% entry 85%; }
    .v-lines li:nth-child(3) { animation-range: entry 30% entry 100%; }

    /* The terminal stays while the copy scrolls, and types itself on the section's own timeline. */
    .agents .split { view-timeline: --asplit block; }
    .term-lines .l { animation-timeline: --asplit; animation-fill-mode: both; animation-timing-function: linear; }
    .term-lines .cmd { animation-name: type; }
    .term-lines .comment, .term-lines .out { animation-name: fade-in; }
    .term-lines .l:nth-child(1) { animation-range: cover 18% cover 21%; }
    .term-lines .l:nth-child(2) { animation-range: cover 21% cover 29%; animation-timing-function: steps(57, end); }
    .term-lines .l:nth-child(3) { animation-range: cover 29% cover 31%; }
    .term-lines .l:nth-child(4) { animation-range: cover 33% cover 36%; }
    .term-lines .l:nth-child(5) { animation-range: cover 36% cover 44%; animation-timing-function: steps(60, end); }
    .term-lines .l:nth-child(6) { animation-range: cover 44% cover 46%; }
    .term-lines .l:nth-child(7) { animation-range: cover 48% cover 51%; }
    .term-lines .l:nth-child(8) { animation-range: cover 51% cover 57%; animation-timing-function: steps(39, end); }
    .term-lines .l:nth-child(9) { animation-range: cover 57% cover 59%; }

    /* Inline what-if pictures (phones, and as the fallback) play once as they enter. */
    .dia { view-timeline: --dia block; }
    .wi > .dia path { stroke-dasharray: 1; animation: stroke linear both; animation-timeline: --dia; animation-range: entry 40% cover 42%; }
    .wi > .dia .n-app { animation: app-stop linear both; animation-timeline: --dia; animation-range: cover 40% cover 45%; }
    .wi > .dia .n-dog { animation: dog-on linear both; animation-timeline: --dia; animation-range: cover 45% cover 50%; }
    .wi > .dia .n-app .st-run { animation: fade-out linear both; animation-timeline: --dia; animation-range: cover 40% cover 45%; }
    .wi > .dia .n-app .st-stop { animation: fade-in linear both; animation-timeline: --dia; animation-range: cover 40% cover 45%; }
    .wi > .dia .n-dog .st-run { animation: fade-out linear both; animation-timeline: --dia; animation-range: cover 45% cover 50%; }
    .wi > .dia .n-dog .st-stop { animation: fade-in linear both; animation-timeline: --dia; animation-range: cover 45% cover 50%; }
    .wi > .dia .heat-mark { animation: slide-mark cubic-bezier(0.3, 0, 0.2, 1) both; animation-timeline: --dia; animation-range: entry 40% cover 40%; }
    .wi > .dia .tag { animation: pop linear both; animation-timeline: --dia; animation-range: cover 36% cover 44%; }
    .wi > .dia .plug { animation: unplug linear both; animation-timeline: --dia; animation-range: entry 50% cover 34%; }
    .wi > .dia .fill { animation: drain-to linear both; animation-timeline: --dia; animation-range: entry 40% cover 44%; }
    .wi > .dia .tl-fill { animation: fill-up linear both; animation-timeline: --dia; animation-range: entry 40% cover 40%; }

    /* Price: the path draws itself and the price wipes in. Night sections rise like a horizon. */
    .ticket-path li:not(:last-child)::after { animation: draw-y linear both; animation-timeline: view(); animation-range: entry 60% cover 50%; }
    .ticket .price { animation: wipe cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-timeline: view(); animation-range: entry 30% entry 80%; }
    .agents, .closing { animation: horizon linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }

    /* Closing: the open Mac closes its lid as it comes up the screen, then the glow and the headline. */
    .closing .mbp { margin: 0; font-size: clamp(9px, 1.05vw, 15px); view-timeline: --cmac block; }
    .closing .mbp-lid { animation: lid-close cubic-bezier(0.45, 0, 0.2, 1) both; animation-timeline: --cmac; animation-range: cover 42% cover 60%; }
    .closing .screen-off { animation: fade-in linear both; animation-timeline: --cmac; animation-range: cover 44% cover 50%; }
    .closing .spill { animation: fade-out linear both; animation-timeline: --cmac; animation-range: cover 52% cover 58%; }
    .closing .mbp-glow { animation: fade-in linear both; animation-timeline: --cmac; animation-range: cover 58% cover 66%; }
    .closing h2 { animation: wipe cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-timeline: --cmac; animation-range: cover 58% cover 70%; }
  }
}

/* On wide screens with scroll timelines: one night console beside the questions plays each answer in turn. */
@media (min-width: 60rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .whatif { timeline-scope: --w1, --w2, --w3, --w4, --w5; }
    .wi-body { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 4rem; align-items: start; }
    .wi { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; align-content: center; min-height: 56svh; padding: 0; border: 0; animation: wi-focus linear both; animation-timeline: view(); animation-range: cover 20% cover 80%; }
    .wi > .dia { display: none; }
    .wi:nth-child(1) { view-timeline: --w1 block; } .wi:nth-child(2) { view-timeline: --w2 block; } .wi:nth-child(3) { view-timeline: --w3 block; }
    .wi:nth-child(4) { view-timeline: --w4 block; } .wi:nth-child(5) { view-timeline: --w5 block; }
    .wi-stage {
      display: block; position: sticky; top: calc(50svh - 14rem); height: 28rem; border-radius: var(--r-l); overflow: clip; color: var(--moon);
      background: radial-gradient(120% 80% at 50% 110%, var(--night-2), var(--night) 60%); box-shadow: 0 2rem 3rem rgba(23, 21, 31, 0.18);
    }
    .wi-stage::before { content: "Lid closed \00B7  a bad night"; position: absolute; left: 1.6rem; top: 1.3rem; font: 500 0.74rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--moon-muted); }
    .wi-scene { position: absolute; inset: 3rem 2.5rem 2rem; display: grid; place-content: center; justify-items: center; opacity: 0; animation: entry-swap linear both; }
    .wi-scene > .dia { scale: 1.3; }
    .wi h3 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
    .wi p { font-size: 1.1rem; max-width: 30rem; }
    .wi-scene:nth-child(1) { animation-name: fade-out; animation-timeline: --w1; animation-range: cover 64% cover 72%; opacity: 1; }
    .wi-scene:nth-child(2) { animation-timeline: --w2; animation-range: cover 28% cover 72%; }
    .wi-scene:nth-child(3) { animation-timeline: --w3; animation-range: cover 28% cover 72%; }
    .wi-scene:nth-child(4) { animation-timeline: --w4; animation-range: cover 28% cover 72%; }
    .wi-scene:nth-child(5) { animation-name: fade-in; animation-timeline: --w5; animation-range: cover 28% cover 36%; }
    .wi-scene .dia * { animation-fill-mode: both; animation-timing-function: linear; }
    .wi-scene:nth-child(1) .dia * { animation-timeline: --w1; }
    .wi-scene:nth-child(2) .dia * { animation-timeline: --w2; }
    .wi-scene:nth-child(3) .dia * { animation-timeline: --w3; }
    .wi-scene:nth-child(4) .dia * { animation-timeline: --w4; }
    .wi-scene:nth-child(5) .dia * { animation-timeline: --w5; }
    .wi-scene path { stroke-dasharray: 1; animation-name: stroke; animation-range: cover 22% cover 40%; }
    .wi-scene .n-app { animation-name: app-stop; animation-range: cover 40% cover 45%; }
    .wi-scene .n-dog { animation-name: dog-on; animation-range: cover 45% cover 51%; }
    .wi-scene .n-app .st-run { animation-name: fade-out; animation-range: cover 40% cover 45%; }
    .wi-scene .n-app .st-stop { animation-name: fade-in; animation-range: cover 40% cover 45%; }
    .wi-scene .n-dog .st-run { animation-name: fade-out; animation-range: cover 45% cover 51%; }
    .wi-scene .n-dog .st-stop { animation-name: fade-in; animation-range: cover 45% cover 51%; }
    .wi-scene .heat-mark { animation-name: slide-mark; animation-range: cover 28% cover 46%; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
    .wi-scene .tag { animation-name: pop; animation-range: cover 46% cover 52%; }
    .wi-scene:nth-child(1) .wi-say { animation-timeline: --w1; animation-range: cover 46% cover 52%; }
    .wi-scene:nth-child(2) .wi-say { animation-timeline: --w2; animation-range: cover 46% cover 52%; }
    .wi-scene:nth-child(3) .wi-say { animation-timeline: --w3; animation-range: cover 44% cover 50%; }
    .wi-scene:nth-child(4) .wi-say { animation-timeline: --w4; animation-range: cover 48% cover 54%; }
    .wi-scene:nth-child(5) .wi-say { animation-timeline: --w5; animation-range: cover 46% cover 52%; }
    .wi-scene .wi-say { animation-name: pop; animation-fill-mode: both; animation-timing-function: linear; }
    .wi-scene .plug { animation-name: unplug; animation-range: cover 32% cover 44%; }
    .wi-scene .fill { animation-name: drain-to; animation-range: cover 28% cover 50%; }
    .wi-scene .tl-fill { animation-name: fill-up; animation-range: cover 28% cover 48%; }
  }
}

/* With the system's reduced motion, the film shows its last state and nothing moves. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .kp-power, .demo, .demo > .stars, .lid-switch, .demo .mbp-lid, .demo .screen-off, .demo .mbp-glow, .demo .mbp, .kp-toggle, .kp-toggle::after { transition: none; }
  .ribbon svg { display: none; }
  .caret { animation: none; }
}

/* ===== Narrow screens ===== */
@media (max-width: 60rem) {
  .try, .private, .agents .split { grid-template-columns: minmax(0, 1fr); }
  .demo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "panel" "mac" "verdict"; justify-items: center; }
  .terminal { position: relative; top: auto; }
  .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doors { grid-template-columns: minmax(0, 1fr); justify-items: center; max-width: 30rem; }
  .closing-ask { width: 100%; }
}
@media (max-width: 44rem) {
  :root { --nav-h: 4.8rem; }
  .post-cta { border-radius: 0; margin-top: 3.5rem; }
  .post-body { font-size: 1.05rem; }
  .post-body .table-wrap { margin-inline: -1.25rem; border-radius: 0; border-inline: 0; }
  .post-body td, .post-body thead th { min-width: 7rem; }
  .post-body pre { margin-inline: -1.25rem; padding-inline: 1.25rem; border-radius: 0; font-size: 0.8rem; box-shadow: none; }
  section { padding: clamp(4rem, 9svh, 5.5rem) 1.1rem; }
  .hero { padding-top: calc(var(--nav-h) + 1.4rem); }
  .hero .pill { display: none; }
  .headline { font-size: clamp(2.6rem, 11.5vw, 3.4rem); }
  .lead { font-size: 1.1rem; }
  .nav-links { display: none; }
  .nav { gap: 0.8rem; padding-left: 0.85rem; }
  .nav .button { margin-left: auto; padding: 0.5rem 0.8rem; font-size: 0.88rem; }
  .wide-only { display: none; }
  .brand { font-size: 0.98rem; }
  .docs { grid-template-columns: minmax(0, 1fr); }
  .ticket { grid-template-columns: minmax(0, 1fr); }
  .ticket-stub { border-right: 0; border-bottom: 2px dashed var(--ink); border-radius: calc(var(--r-l) - 2px) calc(var(--r-l) - 2px) 0 0; padding: 2rem 1.6rem; }
  .ticket-stub::before, .ticket-stub::after { top: auto; bottom: -0.95rem; right: auto; }
  .ticket-stub::before { left: -1.05rem; clip-path: inset(0 0 0 calc(50% - 3px)); }
  .ticket-stub::after { right: -1.05rem; clip-path: inset(0 calc(50% - 3px) 0 0); }
  .ticket-path { padding: 2rem 1.6rem 2rem 3.6rem; }
  .plan-big { font-size: 5rem; }
  .wi { grid-template-columns: minmax(0, 1fr); padding: 1.8rem 0; }
  .wi > .dia { grid-column: 1; grid-row: auto; margin-top: 1.2rem; min-height: 0; padding: 1.4rem 1.2rem; }
  .demo { padding: 1.2rem; }
  .kpanel { font-size: 0.9rem; }
  .term-lines { overflow-x: auto; font-size: 0.8rem; -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent); }
  .term-lines .l { white-space: pre; overflow-wrap: normal; }
  .ask-prompt { margin-right: 0; font-size: 1rem; }
  .ask.install .ask-prompt, .door-alt code { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
  .copy { position: static; margin-top: 0.8rem; }
  .fx-chips li { font-size: 0.82rem; padding: 0.4rem 0.7rem; }
  .v-table { overflow-x: auto; }
  .v-table table { table-layout: fixed; font-size: 0.8rem; }
  .v-table th, .v-table td { padding: 0.6rem 0.45rem; overflow-wrap: normal; hyphens: auto; }
  .v-table th:nth-child(2), .v-table td:nth-child(2) { display: none; }
    .v-table thead th { font-size: 0.9rem; }
  .hero { padding-top: calc(var(--nav-h) + 0.9rem); }
  .cta-row { gap: 0.8rem 1.2rem; margin-top: 1.2rem; }
  .cta-row .link-arrow.touch-only { display: none; }
  .agents > .stars, .closing > .stars { -webkit-mask: linear-gradient(90deg, #000 0 6%, transparent 12% 88%, #000 94%); mask: linear-gradient(90deg, #000 0 6%, transparent 12% 88%, #000 94%); }
  .ticket, .label { box-shadow: 6px 6px 0 var(--lavender); margin-right: 6px; }
  .demo { gap: 1rem; }
  .demo .kpanel { font-size: 0.8rem; }
  .mbp.mini { font-size: min(10px, calc(100cqw / 25)); }
  .term-foot dl { grid-template-columns: auto minmax(0, 1fr); }
  .term-lines .pipe { display: block; padding-left: 2ch; }
  .term-lines .comment { white-space: pre-wrap; }
  .closing-scene { gap: 1rem; }
  .closing .mbp { font-size: 7px; }
      .doors { max-width: none; }
  .door { justify-items: stretch; }
}
@media (max-width: 44rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mbp-pos { top: 30%; font-size: 2.9vw; --start-s: 0.9; --start-y: calc(70svh - 3.4rem - var(--start-s) * 10.2em); --aside-x: -50%; --aside-y: -105%; --aside-s: 0.55; --mid-x: -50%; --mid-y: -105%; --mid-s: 0.55; }
    .film-stage .fx-orbit { display: none; }
    .scroll-cue { bottom: 1rem; font-size: 0.9rem; }
    .scroll-cue .cue-fact { display: none; }
    .b1 { top: auto; bottom: 27svh; }
    .fx-chips { top: auto; bottom: 10svh; gap: 0.4rem; }
    .fx-chips li { white-space: nowrap; }
    .film-stage .mac-status { font-size: 1.75em; }
    .b2 { left: 5vw; top: 26svh; width: 90vw; }
    .b2-kicker { display: none; }
    .fx-clock { font-size: 3.8rem; }
    .b2-short { font-size: 0.9rem; }
    .b2-lead { display: none; }
    .b2-short { display: block; }
    .fx-link { display: none; }
    .film-stage .mac-term { display: none; }
    .film-stage .stage-term { display: block; left: 5vw; top: 55.5svh; width: 90vw; }
    .fx-term .trail { display: none; }
    .term-log { font-size: 0.8rem; }
    .mbp-pos { --home-y: 2%; }
    .film-stage .phone { --ph: 38svh; left: 5vw; top: 55.5svh; width: 90vw; transform-origin: 50% 50%; animation-name: beat-in, fade-out; animation-fill-mode: both, forwards; animation-range: contain 58% contain 62%, contain 82% contain 85%; }
    .phone-body { padding: 0.6rem 0.6rem 0.8rem; border-radius: 1.4rem; box-shadow: none; }
    .ph-island { display: none; }
    .film-stage .b3 { top: auto; bottom: 15svh; }
    .film-stage .mac-status .dot.green { animation: none; }
    .closing h2 { animation-timeline: view(); animation-range: entry 30% entry 90%; }
    @media (max-height: 720px) { .film-stage .phone { --ph: 33svh; } .mbp-pos { --start-s: 0.76; --home-y: -12%; } .film-stage .b3 { bottom: 8svh; } }
  }
}

/* ===== Widths between phone and desktop, and short phones such as an iPhone with Safari's bars (714 px). ===== */
.facts a { white-space: nowrap; }
.faq details[open] summary::after { content: "\2212"; transform: none; }
.fx-link span { translate: -2rem 0; }
@media (max-width: 75rem) { .fx-link span { width: 7.5rem; white-space: normal; text-wrap: balance; } }
@media (min-width: 44.0625rem) { .film-stage .fx-progress { margin-right: 5vw; } }
/* The docked phone stays clear of the payoff line. */
@media (min-width: 44.0625rem) and (max-width: 79.9375rem) { .film-stage .phone { --dock-s: 0.46; --dock-x: 15vw; } }
/* iPad portrait and half-screen windows: no wrapping nav, the phone on screen, and it fades before dawn as on phones. */
@media (min-width: 44.0625rem) and (max-width: 56rem) {
  .nav-links { display: none; }
  .nav .button { margin-left: auto; }
  .film-stage .fx-link { display: none; }
  .film-stage .phone { left: calc(100vw - 18rem - 4vw); animation-name: phone-rise, fade-out; animation-range: contain 58% contain 62%, contain 82% contain 85%; }
  .mbp-pos { --mid-x: calc(-50% - 9vw); }
}
@media (max-width: 44rem) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* The night log and the phone start below the clock at every phone height. */
    .film-stage .stage-term, .film-stage .phone { top: calc(26svh + 15.25rem); }
    .fx-term .win-bar span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  }
}
@media (max-width: 44rem) and (max-height: 700px) { .mbp-pos { --start-s: 0.62; } }
/* iPad portrait: the opening Mac fills the space between the hero and the scroll cue. */
@media (min-width: 44.0625rem) and (max-width: 56rem) and (orientation: portrait) { .mbp-pos { --start-s: 1.4; --start-y: 27svh; } }
/* The install command keeps to one visible line where the column is narrowest. */
@media (min-width: 60.0625rem) and (max-width: 74rem) { .ask.install .ask-prompt { font-size: 1.28vw; } }
.post-body code .nb { white-space: nowrap; }