/* detego.net. Tokens, grain, the shelf recreation and a terminal first; then the home page; then the text pages. */
@property --p { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --glow { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --grow { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root {
  color-scheme: dark;
  /* heyiam.dk's dark background and surface, per its own tokens */
  --bg: #202020;
  --bg-2: #1d1d1d;
  --bg-3: #262626;
  --ink: #fafafa;
  --ink-2: rgba(250, 250, 250, .66);
  --ink-3: rgba(250, 250, 250, .46);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .14);
  /* ShelfStyle.accent: Claude's orange */
  --accent: #d97757;
  --accent-hi: #eb9a7d;
  --accent-lo: #b35a3c;
  --accent-soft: rgba(217, 119, 87, .14);
  --notch: #000;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --gutter: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left), env(safe-area-inset-right));
  --maxw: 1200px;
  /* The one gap between sections: each section pads its top by it and nothing else. */
  --space: clamp(72px, 9vw, 128px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-reveal: cubic-bezier(.23, 1, .32, 1); /* screen.studio's, for reveals and the tab crossfade */
  --spring-open: cubic-bezier(.22, 1, .36, 1); /* replaced at load by kit.js with the real spring as linear() */
  --spring-close: cubic-bezier(.3, 0, .2, 1);
  --spring-count: cubic-bezier(.3, 1.3, .5, 1); --t-count: .64s; /* Motion.countWiden, set as linear() at load */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Grain is baked into the canvas itself (scripts/grain.py): the page colour with film-like noise around it, so it
   averages to #202020, looks the same in every browser, and costs nothing to scroll. Nothing is blended over the
   page: Safari ignores blend modes on fixed layers and Firefox stutters with them. */
body {
  margin: 0; background: var(--bg) url(/assets/grain.png) 0 0 / 128px 128px; color: var(--ink);
  font: 17px/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
  /* A page shorter than the window still ends at its bottom edge: the footer never floats up with space below. */
  display: flex; flex-direction: column; min-height: 100svh;
}
body > main { flex: 1 0 auto; width: 100%; box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; -webkit-tap-highlight-color: transparent; }
button, summary { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--accent); color: #140a06; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
/* Sections take focus after an in-page link scrolls to them (for screen readers); a ring round a whole section is noise. */
[tabindex="-1"]:focus { outline: none; }

/* ---------- Buttons ---------- */
.btn {
  --h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--h); padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer;
  font: 600 15px/1 var(--sans); letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--ease-out), background-color .2s, box-shadow .2s, color .2s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--ink); color: #111; }
.btn-primary:hover { background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.08); }
.btn-accent { background: var(--accent); color: #1a0c06; }
.btn-accent:hover { background: var(--accent-hi); box-shadow: 0 0 0 4px var(--accent-soft); }
.btn-quiet { background: rgba(255,255,255,.08); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn-quiet:hover { background: rgba(255,255,255,.13); }
.btn svg { width: 16px; height: 16px; flex: none; }
.fine { font-size: 13px; color: var(--ink-3); letter-spacing: 0; }
/* Phones and tablets can't run Detego: they get Buy first and a link to send to the Mac instead of a download. */
@media not all and (hover: none) and (pointer: coarse) { .for-touch { display: none !important; } }
@media (hover: none) and (pointer: coarse) { .for-mac { display: none !important; } }
@media (max-width: 480px) { .ctas { flex-direction: column; align-items: stretch; } .ctas .btn { --h: 50px; font-size: 16px; } }
.kbd {
  display: inline-grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 .45em;
  border-radius: 6px; font: 600 .78em/1 var(--sans); color: var(--ink);
  background: linear-gradient(#2a2a2a, #1f1f1f); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 1px 0 #000, 0 0 0 1px #0b0b0b;
}

/* ---------- The notch drawer ----------
   One element, sized by --p (0 closed, 1 open). Measurements in px = pt, from plan.md §3 and ShelfMetrics. */
.notch {
  --cw: 200px; --ch: 32px; --cr: 10px;      /* closed: the hardware notch */
  --ow: 720px; --oh: 316px; --or: 24px;     /* open: session rail */
  --grow: 0px;                              /* arrival: widen per side */
  --ear: 8px;
  position: relative; margin: 0 auto; isolation: isolate;
  width: calc(var(--cw) + 2 * var(--grow) + (var(--ow) - var(--cw) - 2 * var(--grow)) * var(--p));
  height: calc(var(--ch) + (var(--oh) - var(--ch)) * var(--p));
  color: rgba(255,255,255,.92); font: 12px/1.3 var(--sans); letter-spacing: 0;
  --t-p: .72s var(--spring-open); --t-glow: .3s var(--ease-out);
  transition: --p var(--t-p), --grow .26s var(--ease-out), --glow var(--t-glow);
}
/* Motion.swift: close without bounce; a glow settles on over 0.72 s and goes out over 0.3 s once seen. */
.notch.is-closing { --t-p: .5s var(--spring-close); }
.notch.is-open { --p: 1; }
.notch.is-arrived { --grow: 18px; }
/* The black shape; it clips the drawer content so nothing spills while it grows. */
.notch-shape {
  position: absolute; inset: 0; z-index: 1; background: var(--notch); overflow: hidden;
  border-radius: 0 0 calc(var(--cr) + (var(--or) - var(--cr)) * var(--p)) calc(var(--cr) + (var(--or) - var(--cr)) * var(--p));
}
/* The concave "ears" where the notch meets the top edge, as on the hardware. */
.notch::before, .notch::after {
  content: ""; position: absolute; top: 0; width: var(--ear); height: var(--ear); z-index: 1;
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--ear) - .5px), var(--notch) var(--ear));
}
.notch::before { right: 100%; transform: scaleX(-1); }
.notch::after { left: 100%; }
/* The app's glow (GlowImage.swift): a tight blur of the notch outline plus a deeper oval at 56 %, which fades
   out in a curve instead of a box. --glow is the level: 0.75 at rest while something is new, 1 at a pulse's top,
   where it also spreads up to 35 % (Motion.flare) by per-axis factors kit.js sets (GlowGeometry.spreadScale).
   Blurs matched to the app's own render of a 220×38 notch at Balanced (RMS 0.65/255). */
.notch-glow {
  --gr: 16px; --spread: calc(1 + .35 * clamp(0, (var(--glow) - .75) * 4, 1));
  position: absolute; left: 50%; top: 0; z-index: 0; pointer-events: none;
  width: var(--cw); height: var(--ch);
  transform: translateX(-50%) scale(calc(1 + (var(--spread) - 1) * var(--gsx, 1)), calc(1 + (var(--spread) - 1) * var(--gsy, 1)));
  opacity: calc(var(--glow) * (1 - var(--p) * 1.6));
}
.notch-glow i { position: absolute; background: var(--accent); }
.notch-glow .g-core { inset: 0; border-radius: 0 0 var(--cr) var(--cr); filter: blur(var(--g-core, calc(var(--gr) * .375))); }
.notch-glow .g-bloom { inset: calc(var(--gr) * -1.5) calc(var(--gr) * -.5); border-radius: 50%; opacity: .56; filter: blur(var(--g-bloom, calc(var(--gr) * .875))); }
/* Grain over the light, outside .notch-glow so a pulse neither scales nor brightens it: it covers the glow's
   widest spread and only fades in and out with the glow itself. */
.notch-grain {
  --gr: 16px; position: absolute; left: 50%; top: calc(var(--ch) / 2); z-index: 0; pointer-events: none;
  width: calc((var(--cw) + var(--gr) * 3) * (1 + .35 * var(--gsx, 1)));
  height: calc((var(--ch) + var(--gr) * 5) * (1 + .35 * var(--gsy, 1)));
  transform: translate(-50%, -50%);
  background: url(/assets/grain-glow.png) 0 0 / 128px 128px;
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent);
  opacity: calc(clamp(0, var(--glow) / .75, 1) * (1 - var(--p) * 1.6));
}
.notch.is-glowing { --glow: .75; --t-glow: .72s cubic-bezier(.42, 0, .58, 1); }
.notch-inner {
  position: absolute; left: 50%; top: 0; width: var(--ow); height: var(--oh); transform: translateX(-50%);
  pointer-events: none;
}
.notch-content {
  position: absolute; inset: 0;
  opacity: calc((var(--p) - .6) * 2.6); transform: translateY(calc((1 - min(1, var(--p) * 1.4)) * -6px));
}
.notch.is-open .notch-inner { pointer-events: auto; }
/* Arrival: warm dot left, swatch right, while closed. */
.notch-status {
  position: absolute; inset: 0 0 auto 0; height: var(--ch); display: flex; align-items: center; justify-content: space-between;
  padding: 0 11px; opacity: calc(1 - var(--p) * 4);
}
.notch-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); opacity: 0; transition: opacity .3s; }
.notch-status .count { font: 600 11px/1 var(--sans); color: var(--accent); opacity: 0; transition: opacity .3s; font-variant-numeric: tabular-nums; }
.notch.is-arrived .notch-status .dot, .notch.is-arrived .notch-status .count { opacity: 1; }

/* Shelf content: header */
.shelf-head { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 8px 16px 0 24px; }
.shelf-head .scope { font: 500 13px/1 var(--sans); display: inline-flex; align-items: center; gap: 5px; color: rgba(255,255,255,.92); }
.shelf-head .tools { display: flex; gap: 14px; color: rgba(255,255,255,.7); }
.shelf-head svg { width: 17px; height: 17px; }

/* Rail layout */
.rail { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 8px 14px 12px; height: calc(100% - 38px); }
.rail-sessions { display: flex; flex-direction: column; gap: 2px; border-right: 1px solid rgba(255,255,255,.08); padding-right: 8px; }
.rail-session { padding: 7px 8px; border-radius: 8px; transition: background-color .12s; cursor: default; }
.rail-session:hover { background: rgba(255,255,255,.06); }
.rail-session.is-selected { background: rgba(255,255,255,.11); }
.rail-session b { display: block; font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-session span { display: block; font-size: 11px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
/* Room for the selection ring (2px outside the card) inside the clip, without moving the cards. */
.rail-items { overflow: hidden; padding: 3px; margin: -3px; }
.prompt { margin-bottom: 10px; }
.prompt-cap { display: flex; align-items: center; gap: 4px; font: 500 11px/13px var(--sans); color: rgba(255,255,255,.55); margin: 2px 0 6px; }
.prompt-cap::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.08); margin-left: 8px; }
.prompt-cap svg { width: 9px; height: 9px; }
.thumbs { display: flex; gap: 8px; }
.thumb {
  position: relative; width: 160px; height: 120px; border-radius: 10px; overflow: hidden; flex: none;
  background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: transform .25s var(--ease-out), box-shadow .2s;
}
.thumb svg { width: 100%; height: 100%; }
.thumb:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.thumb.is-selected { box-shadow: 0 0 0 2px var(--accent); }
.thumb-name {
  position: absolute; left: 5px; bottom: 5px; max-width: calc(100% - 10px); padding: 3px 6px; border-radius: 999px;
  background: rgba(0,0,0,.7); font: 500 11px/1.2 var(--sans); color: rgba(255,255,255,.85);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.thumb-dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1.5px rgba(0,0,0,.6); }

/* Stacks layout */
.stacks { display: flex; align-items: flex-start; gap: 14px; padding: 6px 16px 10px; overflow: hidden; }
.stack-session { flex: none; width: 150px; padding-top: 4px; }
.stack-session b { display: block; font: 600 12px/1.35 var(--sans); }
.stack-session span { display: block; font-size: 11px; color: rgba(255,255,255,.55); }
.deck { flex: none; width: 112px; }
.deck .cards { position: relative; width: 112px; height: 84px; }
.deck .card { position: absolute; inset: 0; border-radius: 9px; overflow: hidden; background: #111; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: transform .3s var(--ease-out); }
.deck .card svg { width: 100%; height: 100%; }
.deck .card:nth-child(2) { transform: translate(4px, -3px) rotate(2.5deg); z-index: -1; }
.deck .card:nth-child(3) { transform: translate(8px, -6px) rotate(5deg); z-index: -2; }
.deck .badge { position: absolute; right: 5px; bottom: 5px; min-width: 20px; height: 20px; border-radius: 10px; background: rgba(40,40,40,.92); display: grid; place-items: center; font: 600 11px/1 var(--sans); }
.deck .cap { margin-top: 7px; font: 500 11px/13px var(--sans); color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 4px; align-items: center; }
.deck .cap i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.stack-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,.08); flex: none; }

/* A screen: menu bar + notch at the top, wallpaper, used as the stage in several directions. */
.screen {
  position: relative; overflow: hidden; border-radius: 18px 18px 0 0;
  background: radial-gradient(120% 90% at 50% 0%, #2a2522 0%, #151414 55%, #0f0f0f 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 40px 120px rgba(0,0,0,.55);
}
.menubar {
  position: relative; height: 32px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; font: 500 13px/1 var(--sans); color: rgba(255,255,255,.85);
  background: rgba(10,10,10,.35); backdrop-filter: blur(20px);
}
.menubar .l, .menubar .r { display: flex; gap: 18px; align-items: center; }
.menubar .l b { font-weight: 700; }
.screen .notch-wrap { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; }

/* A terminal window running Claude Code. */
.term {
  border-radius: 12px; overflow: hidden; background: rgba(20,20,20,.94);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.5);
  font: 12.5px/1.6 var(--mono); color: rgba(255,255,255,.82); text-align: left;
}
.term-bar { height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.06); font: 500 12px/1 var(--sans); color: rgba(255,255,255,.5); }
.term-bar i { width: 12px; height: 12px; border-radius: 50%; background: #3a3a3a; }
.term-bar span { margin: 0 auto; transform: translateX(-30px); }
.term-body { padding: 14px 16px 16px; min-height: 180px; }
.term-body .you { color: #fff; }
.term-body .you::before { content: "> "; color: rgba(255,255,255,.4); }
.term-body .tool { color: rgba(255,255,255,.62); }
.term-body .tool::before { content: "⏺ "; color: var(--accent); }
.term-body .out { color: rgba(255,255,255,.42); padding-left: 1.4em; }
.term-body #saved { transition: color .3s; }
.term-body #saved.is-focus { color: rgba(255,255,255,.92); }
.term-body .caret { display: inline-block; width: .55em; height: 1.1em; vertical-align: -.2em; background: rgba(255,255,255,.75); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* Reveal on scroll, as screen.studio does it: each part rises 28px (40 for a big block) and fades in over 1.1 s,
   80 ms after the part before it (--reveal-order), once it passes 90% of the window. Only with scripts on, so a page
   without them, or a browser without the query, shows everything at once. */
@media (scripting: enabled) {
  [data-reveal] { opacity: 0; transform: translateY(var(--reveal-distance, 28px));
    transition: opacity 1.1s var(--ease-reveal), transform 1.1s var(--ease-reveal); transition-delay: calc(var(--reveal-order, 0) * 80ms); }
  [data-reveal].is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ==================== Home ==================== */
/* ---------- Page ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
h1, h2, h3 { font-family: var(--display); margin: 0; }
h2 { font-size: clamp(34px, 5vw, 64px); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; }
.eyebrow { font: 600 13px/1 var(--sans); letter-spacing: .02em; color: var(--accent); margin: 0 0 16px; }
.lede { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 36em; margin: 20px 0 0; letter-spacing: -.01em; }
section { position: relative; }
.sec { padding: var(--space) 0 0; }
/* The story's pinned screen already leaves room under the MacBook, nearly three section gaps on a wide window, so
   the next section also starts 8vh inside it. Phones undo the overlap (their stack leaves no such room). */
#how + .sec { padding-top: calc(var(--space) * .5); margin-top: -8vh; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }
/* Two-tone ledes: the sentence is quieter and its point is full white. .5 is about as quiet as 4.5:1 on --bg allows. */
.lede.duo { color: rgba(250,250,250,.5); }
.lede.duo b { color: var(--ink); font-weight: 500; }

/* ---------- Nav: reads as a menu bar, with room left in the middle for the notch ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; height: 48px; transition: background-color .3s, box-shadow .3s; }
.nav.is-solid { background: rgba(23,23,23,.78); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); box-shadow: 0 1px 0 var(--line); }
/* Back at the top the bar clears at once: fading out while the hero notch fades in left a seam across its glow. */
.nav:not(.is-solid):not(.is-menu) { transition: none; }
.nav .in { height: 100%; display: flex; align-items: center; justify-content: space-between; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 16px/1 var(--sans); text-decoration: none; letter-spacing: -.01em; }
/* 26px, as mxvalidate.net's; logo.png is 128px so it stays sharp at 3x. The mark is inset 12px in the PNG, so the
   margin puts its drawn edge on the gutter, as the button's and the menu's are. */
.brand img { width: 26px; height: 26px; margin-left: calc(-26px * 12 / 128); flex: none; max-width: none; }
/* Phones: the mark alone, for room beside the notch. font-size 0 rather than display:none keeps "Detego" as the link's name. */
/* On a phone the logo is the whole link, so its box grows to a 44pt target around the icon, which stays put. */
@media (max-width: 560px) { .brand { font-size: 0; gap: 0; min-height: 44px; padding: 0 10px; margin-left: -10px; } }
.nav-r { display: flex; align-items: center; gap: 26px; }
.nav-r a:not(.btn) { font-size: 13px; color: var(--ink-2); text-decoration: none; transition: color .15s; }
.nav-r a:not(.btn):hover { color: var(--ink); }
.nav .btn { --h: 30px; padding: 0 14px; font-size: 13px; }
/* The header's Download says "for Mac" with Apple's mark wherever it fits beside the hero notch, and plain "Download"
   where it would come closer than 40px to the 220px hero notch (measured: under 796px, and 961–1100px with the links
   showing). The menu sheet always has room for it. */
.nav .nav-dl { gap: 7px; }
.nav .nav-dl svg { width: 12px; height: 14px; margin-top: -2px; }
@media (min-width: 961px) and (max-width: 1100px), (max-width: 795px) { .nav-r .nav-dl svg, .nav-r .nav-dl-mac { display: none; } }
/* Narrow windows: the links move into a menu (nav.js) before they reach the hero's notch, which they meet at
   about 870px; below 560px Download does too, since the notch would reach it next. The open menu is a frosted
   overlay over the page with the items centred, under the notch (z-index 60) so the notch and its glow stay on
   top as they are on the page. */
.nav-menu { display: none; position: relative; width: 44px; height: 44px; margin-right: -14px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--ink); cursor: pointer; }
.nav-menu span { position: absolute; left: 14px; right: 14px; height: 1.5px; border-radius: 1px; background: currentColor;
  transition: transform .3s var(--ease-out); }
.nav-menu span:first-child { top: 18.5px; }
.nav-menu span:last-child { top: 24px; }
.nav.is-menu .nav-menu span:first-child { transform: translateY(2.75px) rotate(45deg); }
.nav.is-menu .nav-menu span:last-child { transform: translateY(-2.75px) rotate(-45deg); }
/* A backdrop-filter would make the bar the sheet's containing block, so the open bar drops its frosting. */
.nav.is-menu { z-index: 58; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav-sheet { position: fixed; inset: 0; z-index: -1; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; padding: 72px var(--gutter) 48px; text-align: center;
  background: rgba(14,14,14,.72); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease-out), visibility 0s .25s; }
.nav.is-menu .nav-sheet { opacity: 1; visibility: visible; transition: opacity .25s var(--ease-out); }
.nav-sheet a:not(.btn) { padding: 6px 0; color: var(--ink); font: 700 32px/1.2 var(--display); letter-spacing: -.035em; text-decoration: none;
  opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.nav-sheet a:not(.btn):active { color: var(--ink-2); }
.nav .nav-sheet .btn { --h: 44px; padding: 0 22px; font-size: 15px; margin-top: 28px; opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.nav.is-menu .nav-sheet a { opacity: 1; transform: none;
  transition: opacity .35s var(--ease-out) calc(60ms + var(--i, 0) * 45ms), transform .45s var(--ease-out) calc(60ms + var(--i, 0) * 45ms); }
html.menu-open { overflow: hidden; }
@media (max-width: 960px) { .nav-r a:not(.btn) { display: none; } .nav-menu { display: block; } }
@media (max-width: 560px) { .nav-r .btn { display: none; } }
@media (min-width: 561px) { .nav-sheet .btn { display: none; } }
@media (min-width: 961px) { .nav-sheet { display: none; } }

/* ---------- Hero ---------- */
.hero { min-height: 100svh; display: grid; place-items: center; padding: 120px var(--gutter) 96px; text-align: center; overflow-x: clip; }
/* Centred on the page like the rest of the hero, not on the window: with an always-shown scrollbar the two differ by
   half its width, and a notch off the headline's axis reads as a mistake. */
.hero-notch { position: absolute; top: 0; left: 0; right: 0; z-index: 60; display: flex; justify-content: center; pointer-events: none; }
/* The notch stands in for the Mac's own, above a clear bar at the very top. Once the bar turns solid it would sit on
   the bar's background, so it goes with the bar's arrival and comes back when the page returns to the top. No fade:
   after fading back in while the page bounced at the top, iOS Safari left the glow beside the notch unpainted. */
.nav.is-solid ~ main .hero-notch { visibility: hidden; }
.hero-notch .notch { flex: none; text-align: left; pointer-events: auto; cursor: default; transform: scale(calc(1 - (1 - var(--ns, 1)) * var(--p))); transform-origin: 50% 0; }
.hero-notch .notch.is-open { box-shadow: 0 30px 80px rgba(0,0,0,.55); border-radius: 0 0 24px 24px; }
.hero-notch .thumb { cursor: pointer; }
.hero-notch .notch.is-static { pointer-events: none; }
/* A wide black shadow reads as a dark square on this background; a tight contact shadow and a faint warm glow don't. */
.icon { display: block; }
.hero h1 { font-size: clamp(40px, 6.6vw, 96px); line-height: 1; letter-spacing: -.05em; font-weight: 700; margin: 0 auto; text-wrap: balance; }
@media (max-width: 640px) { .hero h1 br { display: none; } }
.hero h1 em { font-style: normal; background: linear-gradient(180deg, #f6b69d 0%, var(--accent) 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* One line of what it is, a size under the other ledes so the title carries the hero. */
.hero .lede { margin: 26px auto 0; max-width: 31em; font-size: clamp(17px, 1.25vw, 18px); }
.ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.hero .fine { margin: 16px 0 0; }
/* A MacBook Pro's notch as NSScreen reports it (220×38 pt, a 14-inch at "More space"). A page can't see the
   display's scaling (Safari reports the window as the screen), so this is one fixed size. */
.hero-notch .notch { --cw: 220px; --ch: 38px; }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); font-size: 12px; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; }
.scroll-cue svg { width: 14px; height: 14px; }
/* On load the copy rises in a short stagger under a notch that is already there, as the screen's hardware is, and
   settles before the terminal's first save pulses it (hero.js). Reduced motion drops the animation and shows it at rest. */
.hero-copy > * { animation: hero-rise .8s var(--ease-out) both; }
.hero-copy > :nth-child(2) { animation-delay: 70ms; }
.hero-copy > :nth-child(3) { animation-delay: 140ms; }
.hero-copy > :nth-child(4) { animation-delay: 210ms; }
.hero-copy > :nth-child(5) { animation-delay: 280ms; }
.scroll-cue { animation: hero-fade .8s .6s var(--ease-out) both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes hero-fade { from { opacity: 0; } }
@media (max-height: 760px) { .scroll-cue { display: none; } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[id] { scroll-margin-top: 56px; }

/* ---------- Scrubbed paragraph: words fill in as you scroll ---------- */
.read { height: 230vh; }
/* Each pinned section centres its content in a full screen, so back to back they leave half a screen blank
   between them; overlapping the boxes by 15vh closes most of that and keeps the paragraph and the MacBook
   about 1.5 section gaps apart (a quarter screen brought them within one). */
.story { margin-top: -15vh; }
/* Centred below the 48px nav, which covers the top of the box. */
.read-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; padding: 48px var(--gutter) 0; }
.read p { margin: 0; max-width: 1080px; font: 700 clamp(30px, 4.4vw, 60px)/1.1 var(--display); letter-spacing: -.035em; text-wrap: pretty; }
.read .w { opacity: .17; transition: opacity .35s var(--ease-out); }
.read .w.on { opacity: 1; }
.read .w.hot { color: var(--accent); }
/* A brush stroke: a plain bar pushed through fractal noise (the #brush filters in index.html), so its edges wander
   like wet ink. The box is .3em larger all round so the wisps stay inside it, and the sweep is a mask with a soft
   front edge rather than a hard cut. It goes on once the phrase's first word lights; home.js varies the tilt. */
.read .hl { position: relative; isolation: isolate; white-space: nowrap; }
.read .hl::before {
  content: ""; position: absolute; z-index: -1; inset: -.2em -.48em -.3em -.44em;
  background: linear-gradient(color-mix(in srgb, var(--accent) 80%, transparent) 0 0) center / calc(100% - .6em) calc(100% - .6em) no-repeat;
  filter: url(#brush); transform: rotate(var(--tilt, -1deg));
  -webkit-mask: linear-gradient(90deg, #000 45.5%, transparent 54.5%) 100% 0 / 220% 100% no-repeat;
  mask: linear-gradient(90deg, #000 45.5%, transparent 54.5%) 100% 0 / 220% 100% no-repeat;
  transition: -webkit-mask-position .6s cubic-bezier(.3, .75, .3, 1), mask-position .6s cubic-bezier(.3, .75, .3, 1);
}
.read .hl.is-on::before { -webkit-mask-position: 0 0; mask-position: 0 0; }
@media (max-width: 640px) { .read .hl::before { filter: url(#brush-s); } }
/* The same stroke drawn once into an image by home.js, so scrolling repaints no filter. */
.read .hl.is-baked::before { filter: none; background: var(--brush) center / 100% 100% no-repeat; }
.read code { font-family: var(--mono); font-size: .6em; font-weight: 500; letter-spacing: 0; }
.read.is-static { height: auto; }
.read.is-static .read-sticky { position: static; height: auto; padding-top: var(--space); padding-bottom: 48px; }

/* ---------- Story: one pinned stage, scrubbed by scroll ---------- */
.story { height: 760vh; }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; max-width: 1440px; margin: 0 auto; padding: 64px var(--gutter) 24px; }
.caps { position: relative; min-height: 300px; }
.segs { display: flex; gap: 4px; margin-bottom: 34px; }
.segs i { position: relative; flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.segs b { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.cap { position: absolute; inset: 64px 0 auto 0; opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); pointer-events: none; }
.cap.is-on { opacity: 1; transform: none; pointer-events: auto; }
.cap .n { font: 600 12px/1 var(--mono); color: var(--accent); letter-spacing: .04em; }
.cap h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.03em; font-weight: 700; margin: 14px 0 14px; }
.cap p { margin: 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.cap p + p { margin-top: 12px; }
.cap code { font: 500 .88em/1 var(--mono); color: var(--ink); background: rgba(255,255,255,.07); padding: 2px 5px; border-radius: 4px; white-space: nowrap; }
.cap .note { font-size: 13px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; }
.cap .note i { width: 6px; height: 6px; border-radius: 50%; background: #28c840; box-shadow: 0 0 8px #28c840; flex: none; }
.slot { position: relative; justify-self: center; }
.frame { position: absolute; inset: 0; }
.story { position: relative; }
/* A 14-inch MacBook Pro (2021 and later), front on: black glass to the edges inside a thin aluminium rim, a display
   rounded only at the top, and a flat base of even thickness with the thumb scoop and two feet. Laid out at
   1120 × 734 and scaled as one piece by home.js, so every point inside the screen keeps its coordinates. */
.mac { position: absolute; left: 0; top: 0; width: 1120px; height: 734px; transform-origin: 0 0; display: flex; flex-direction: column; align-items: center; }
.lid { position: relative; flex: none; width: 1070px; height: 690px; padding: 3px; border-radius: 30px 30px 12px 12px;
  background: linear-gradient(180deg, #6b6b72 0, #3a3a3f 1.2%, #26262a 30%, #1f1f22 80%, #2c2c30 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.06), 0 0 0 1px #09090a, 0 50px 120px rgba(0,0,0,.55); }
.bezel { position: relative; height: 100%; padding: 12px 12px 22px; border-radius: 27px 27px 9px 9px; background: #030304;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.bezel .screen { width: 1040px; height: 650px; border-radius: 13px 13px 0 0; }
/* Chapter 1's camera: everything on the screen scales together, clipped by the screen. */
.screen .zoom { position: absolute; inset: 0; transform-origin: 0 0; }
.bezel .cam { position: absolute; left: 50%; top: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #1d2230; box-shadow: 0 0 0 1px #0c0c0e; opacity: 0; transition: opacity .4s; }
.mac.no-notch .cam { opacity: 1; }
.hinge { flex: none; width: 980px; height: 10px; border-radius: 0 0 2px 2px; background: linear-gradient(#020203, #121214 60%, #222226); }
/* The deck's front edge catches the light; the face below it is flat; the ends darken where the corners turn away. */
.base { position: relative; flex: none; width: 1120px; height: 31px; margin-top: -1px; border-radius: 4px 4px 12px 12px / 4px 4px 10px 10px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.6), transparent 2.5%, transparent 97.5%, rgba(0,0,0,.6)),
    linear-gradient(180deg, #9a9aa1 0, #5d5d63 1px, #46464c 5px, #2b2b2f 6px, #333338 9px, #28282c 20px, #18181a 100%);
  box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.base::before { content: ""; position: absolute; left: 50%; top: 0; width: 128px; height: 8px; transform: translateX(-50%);
  border-radius: 0 0 12px 12px / 0 0 8px 8px; background: linear-gradient(#0d0d0e, #202023 70%, #2c2c30); box-shadow: inset 0 -1px 0 rgba(255,255,255,.07); }
.base::after { content: ""; position: absolute; left: 118px; bottom: -3px; width: 64px; height: 4px; border-radius: 0 0 4px 4px; background: #0b0b0c;
  box-shadow: 820px 0 0 #0b0b0c; }
.screen .wall { position: absolute; inset: 0; background:
    radial-gradient(60% 70% at 18% 100%, rgba(217,119,87,.22), transparent 70%),
    radial-gradient(50% 60% at 90% 10%, rgba(120,110,160,.16), transparent 70%),
    linear-gradient(160deg, #26211f, #141313 60%, #0e0e0e); }
.screen .menubar { z-index: 2; }
.menubar .l span { color: rgba(255,255,255,.85); font-weight: 500; }
.menubar svg { width: 15px; height: 15px; }
/* --p is scrubbed, so only the arrival animates here: the widen on Motion.countWiden, back out on glowOut. */
.stage .notch { pointer-events: none; transition: --grow var(--t-count) var(--spring-count), --glow var(--t-glow); }
.stage .notch:not(.is-arrived) { transition: --grow .3s var(--ease-out), --glow var(--t-glow); }
.stage .notch-status .count { display: inline-block; }
.notch-content .layer { position: absolute; inset: 0; }
.notch-content .stacks-layer { opacity: 0; }
.thumb.is-source { opacity: .35; }
.stage .term { position: absolute; left: 150px; top: 96px; width: 740px; height: 486px; z-index: 1; display: flex; flex-direction: column; }
.stage .term-bar i:nth-child(1) { background: #ff5f57; } .stage .term-bar i:nth-child(2) { background: #febc2e; } .stage .term-bar i:nth-child(3) { background: #28c840; }
.stage .term-body { flex: 1; display: flex; flex-direction: column; }
.term-body .say { color: rgba(255,255,255,.86); }
.term-body .say::before { content: "⏺ "; color: rgba(255,255,255,.9); }
.term-body .late { opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s var(--ease-out); }
.term-body .late.is-on { opacity: 1; transform: none; }
.t-input { margin-top: auto; border: 1px solid rgba(255,255,255,.22); border-radius: 6px; padding: 7px 10px; display: flex; align-items: center; white-space: nowrap; overflow: hidden; transition: border-color .3s, background-color .3s; }
.t-input .pfx { color: rgba(255,255,255,.5); margin-right: 8px; }
.t-input .typed { color: #fff; }
.t-input.is-flash { border-color: var(--accent); background: rgba(217,119,87,.08); }
.t-hint { margin-top: 6px; font-size: 11.5px; color: rgba(255,255,255,.32); }
/* The app's pill line (Motion.peekLineSize, 48 × 4 pt) at this screen's scale, 1040 px for a 1440 pt display. */
/* Chapter 7's pill and its drawer; home.js places both from the app's numbers. The pill is white at rest (PillLine)
   and orange with its halo while something is new. */
.sliver { position: absolute; z-index: 4; border-radius: 99px; background: #fff; box-shadow: 0 0 1px rgba(0,0,0,.3); opacity: 0;
  transition: opacity .3s, background-color .3s, box-shadow .3s; }
.sliver.is-shown { opacity: 1; }
.sliver.is-on { background: var(--accent); box-shadow: 0 0 5px 1px rgba(217,119,87,.6), 0 0 14px 3px rgba(217,119,87,.25); }
.side { position: absolute; z-index: 5; overflow: hidden; visibility: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.5);
  color: rgba(255,255,255,.92); font: 12px/1.3 var(--sans); }
.side-in { position: absolute; right: 0; top: 50%; transform-origin: 100% 50%; }
.side .body { padding: 4px 14px 14px; }
.side .thumbs { flex-wrap: wrap; }
.side .shelf-head { padding-left: 18px; }
.ql { position: absolute; left: 0; top: 0; width: 600px; height: 430px; z-index: 6; border-radius: 12px; overflow: hidden; transform-origin: 0 0; visibility: hidden;
  background: rgba(38,38,38,.96); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 40px 90px rgba(0,0,0,.6); }
.ql-bar { height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 12px; font: 600 13px/1 var(--sans); color: rgba(255,255,255,.85); }
.ql-bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.ql-bar span { flex: 1; text-align: center; }
.ql-bar em { font: 500 12px/1 var(--sans); font-style: normal; padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,.1); }
.ql-img { height: 394px; }
.ql-img svg { width: 100%; height: 100%; }
.ghost { position: absolute; left: 0; top: 0; width: 128px; height: 96px; z-index: 7; border-radius: 10px; overflow: hidden; opacity: 0; box-shadow: 0 18px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.14); }
.ghost svg { width: 100%; height: 100%; }
.kcap { position: absolute; left: 0; top: 0; z-index: 9; opacity: 0; transition: opacity .2s; }
.kcap .kbd { font-size: 13px; padding: 0 12px; height: 28px; }
.cursor { position: absolute; left: 0; top: 0; z-index: 10; width: 22px; height: 30px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.chip { position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%); white-space: nowrap; font: 500 12px/1 var(--sans); color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }

/* Phones upright: screen on top, the caption under it, the pair centred in the pinned screen. The query is
   also in home.js. A phone on its side keeps the desktop's side-by-side layout, squeezed below. */
@media (max-width: 860px) and (orientation: portrait) {
  /* Centred below the 48px nav. Captions differ in height and the shorter ones leave a blank under them, so home.js
     sets --cap-slack (tallest minus average caption) to push the pair down until the average chapter looks centred. */
  .stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; align-items: start; gap: 44px; padding-top: calc(48px + 16px + var(--cap-slack, 0px)); padding-bottom: 16px; }
  .slot { order: -1; }
  /* Every caption in one cell, so the box is as tall as the tallest one at this width. */
  .caps { display: grid; align-items: start; min-height: 0; }
  .caps > * { grid-column: 1; }
  /* No overlap on either side: here the MacBook tops the stack and the caption ends it, so the paragraph above and
     the section below would reach into them while they are still pinned. */
  .story, #how + .sec { margin-top: 0; }
  .segs { margin-bottom: 18px; }
  .cap { position: static; grid-row: 2; margin-top: 9px; }
  .cap h3 { font-size: 24px; margin: 10px 0 8px; }
  .cap p { font-size: 15px; }
  .chip { bottom: -32px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  /* The pinned screens are about as tall as the viewport here, so overlapping them (as on desktop) lays one chapter's text over the other. */
  .story, #how + .sec { margin-top: 0; }
  /* The paragraph is ~8 lines at the desktop size: taller than a landscape phone's visible height once Safari's bars show, so size it to the height. */
  .read p { font-size: clamp(18px, 6.4svh, 34px); }
  /* Pinned screens follow the visible height: with 100svh, once Safari's bars slide away the stage stays short and the demo hangs from the top with a blank band under it. */
  .stage, .read-sticky { height: 100dvh; }
  /* The MacBook and its label are centred together in the space under the nav: the label hangs below the slot, so the slot reserves room for it. */
  .stage { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 28px; padding-top: 48px; padding-bottom: 0; }
  .slot { margin-bottom: 30px; }
  .caps { min-height: 0; align-self: center; }
  .segs { margin: 8px 0 0; }
  .cap { inset: 26px 0 auto 0; }
  .cap h3 { font-size: 20px; margin: 8px 0 6px; }
  .cap p { font-size: 14px; line-height: 1.45; }
  .cap p + p { margin-top: 6px; }
  /* The outgoing caption clears before the next fades in: two long captions crossfading read as one garbled block here. */
  .cap { transition: opacity .15s var(--ease-out), transform .45s var(--ease-out); }
  .cap.is-on { transition: opacity .3s .12s var(--ease-out), transform .45s var(--ease-out); }
  .chip { bottom: -26px; }
}
/* Reduced motion: no pinning, the shelf shown open and every chapter listed */
.story.is-static { height: auto; margin-top: 0; }
.story.is-static .stage { position: relative; height: auto; padding-top: 24px; padding-bottom: 96px; align-items: start; }
.story.is-static .cap { position: static; opacity: 1; transform: none; margin-bottom: 32px; }
.story.is-static .caps { display: block; }
.story.is-static .segs { display: none; }

/* ---------- Sources ---------- */
.sources { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) auto; gap: 14px; margin-top: 56px; }
.src { padding: 14px 14px 20px; border-radius: 18px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.src .pic { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.src .pic svg { width: 100%; height: 100%; }
.src h3 { font-size: 16px; letter-spacing: -.01em; margin: 16px 2px 6px; font-weight: 600; }
.src p { margin: 0 2px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
/* Plain text after the cards: the file types people add in Settings › Extra extensions. */
.src-more { align-self: center; margin: 0; color: var(--ink-3); font-size: 15px; white-space: nowrap; }
@media (max-width: 1000px) { .sources { grid-template-columns: repeat(2, minmax(0, 1fr)); } .src-more { grid-column: 1 / -1; padding-left: 2px; } }
@media (max-width: 520px) { .sources { grid-template-columns: 1fr; } .src { display: grid; grid-template-columns: 112px 1fr; gap: 0 14px; align-items: center; } .src .pic { grid-row: span 2; } .src h3 { margin-top: 0; } }
/* A phone on its side: headings sized to the short screen, and the source cards three across so each shows its picture and text together. */
@media (max-height: 520px) and (orientation: landscape) {
  h2 { font-size: clamp(26px, 8.4svh, 34px); }
  .sec { padding-top: 56px; }
  .sources { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; }
  .src .pic { aspect-ratio: 16 / 9; }
}

/* ---------- And more: the groups stack until home.js turns them into tabs ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.more { margin-top: 48px; text-align: left; }
.more-tabs { display: none; }
.more-pane { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding: clamp(28px, 4vw, 52px); border-radius: 22px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.more-pane + .more-pane { margin-top: 14px; }
.more-label { grid-column: 1 / -1; margin-bottom: -16px; font: 600 13px/1 var(--sans); letter-spacing: .02em; color: var(--ink-3); }
.more.is-tabbed .more-tabs { display: flex; gap: 2px; width: fit-content; margin: 0 0 24px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); }
/* As tabs, the groups share one card and one grid cell, so the card keeps the tallest group's height and a switch
   only crossfades the two groups (screen.studio's 0.42 s fade with a 2px blur), with nothing moving. */
.more.is-tabbed .more-panes { display: grid; padding: clamp(28px, 4vw, 52px); border-radius: 22px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.more.is-tabbed .more-pane { grid-area: 1 / 1; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none;
  opacity: 0; filter: blur(2px); visibility: hidden; transition: opacity .42s var(--ease-reveal), filter .42s var(--ease-reveal), visibility 0s .42s; }
.more.is-tabbed .more-pane.is-on { opacity: 1; filter: none; visibility: visible; transition: opacity .42s var(--ease-reveal), filter .42s var(--ease-reveal); }
.more.is-tabbed .more-label { display: none; }
.more-tabs button { height: 36px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 600 14px/1 var(--sans); cursor: pointer; transition: background-color .2s, color .2s; }
@media (hover: hover) { .more-tabs button:hover { color: var(--ink); } }
@media (pointer: coarse) { .more-tabs button { height: 44px; } }
.more-tabs button[aria-selected="true"] { background: var(--ink); color: #111; }
.more-item .ic { width: 26px; height: 26px; color: var(--accent); }
.more-item h4 { margin: 16px 0 6px; font: 600 17px/1.3 var(--display); letter-spacing: -.01em; }
.more-item p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
@media (max-width: 900px) { .more-pane { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: full-width 44pt tabs, and each item as a row with its icon beside the text, a third shorter than stacked. */
@media (max-width: 560px) {
  .more { margin-top: 36px; }
  .more.is-tabbed .more-tabs { width: 100%; margin-bottom: 18px; }
  .more-tabs button { flex: 1; height: 44px; padding: 0 6px; }
  .more-pane, .more.is-tabbed .more-panes { padding: 22px 20px; border-radius: 20px; }
  .more-pane { grid-template-columns: 1fr; gap: 22px; }
  .more-label { margin-bottom: -6px; }
  .more-item { display: grid; grid-template-columns: 24px 1fr; gap: 0 14px; }
  .more-item .ic { width: 22px; height: 22px; grid-row: span 2; margin-top: 1px; }
  .more-item h4 { margin: 0 0 3px; font-size: 16px; }
  .more-item p { font-size: 14.5px; }
}

/* ---------- Specs ---------- */
.specs { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 56px; }
.spec { padding: 40px 28px 36px; }
.spec + .spec { border-left: 1px solid var(--line); }
.spec b { display: block; font: 700 clamp(40px, 5vw, 64px)/1 var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.spec b small { font-size: .5em; letter-spacing: -.02em; color: var(--ink-2); margin-left: 4px; }
.spec span { display: block; margin-top: 12px; font-size: 15px; color: var(--ink-2); }
.specs-note { margin: 28px 0 0; color: var(--ink-3); font-size: 15px; }
@media (max-width: 820px) { .specs { grid-template-columns: 1fr 1fr; } .spec:nth-child(3) { border-left: 0; } .spec:nth-child(n+3) { border-top: 1px solid var(--line); } .spec { padding: 28px 18px; } }

/* ---------- Privacy ---------- */
/* Two cards: what stays on the Mac, and the licence check that leaves it, with its four fields named. */
.pv { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 52px; }
.pv-card { padding: 32px 32px 24px; border-radius: 22px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.pv-card h3 { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 22px; letter-spacing: -.02em; }
.pv-card h3 .ic { width: 26px; height: 26px; color: var(--ink-3); }
.pv-card .checks { border-top: 0; }
.pv-card .checks li:last-child { border-bottom: 0; }
.checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 16px; color: var(--ink-2); }
.checks li b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 3px; }
.checks svg { width: 18px; height: 18px; color: var(--accent); margin-top: 3px; }
/* One size for both marks, so the footnote's reads as the same asterisk as the one it answers. */
.footnote sup, .spec sup { color: var(--accent); font-size: 15px; line-height: 0; margin-left: 1px; }
.footnote sup { margin: 0 2px 0 0; }
.footnote { margin: 18px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.checks.out svg { color: var(--ink-2); }
.pv-sends { margin-top: 4px; padding: 18px 20px; border-radius: 14px; background: rgba(255,255,255,.035); font-size: 15px; color: var(--ink-2); }
.pv-sends p { margin: 0; }
.pv-sends ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 12px 0 14px; padding: 0; }
.pv-sends li { padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.07); color: var(--ink); font-size: 14px; }
.pv-more { color: var(--ink-3); font-size: 14px; }
.pv-more a { color: var(--accent-hi); text-underline-offset: 3px; }
@media (max-width: 860px) { .pv { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .pv { margin-top: 36px; gap: 14px; }
  .pv-card { padding: 22px 20px 12px; border-radius: 20px; }
  .pv-card h3 { font-size: 20px; margin-bottom: 2px; }
  .pv-card .checks li { padding: 14px 0; font-size: 15px; gap: 12px; }
  .pv-sends { margin: 6px 0 10px; padding: 16px; }
  .pv-sends li { font-size: 13.5px; }
}

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.plan { position: relative; padding: 32px 28px 28px; border-radius: 22px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; }
.plan.is-featured { background: linear-gradient(180deg, rgba(217,119,87,.13), rgba(217,119,87,.03) 60%), var(--bg-2); box-shadow: inset 0 0 0 1px rgba(217,119,87,.45), 0 30px 80px rgba(217,119,87,.08); }
.plan h3 { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.plan .tag { position: absolute; top: 32px; right: 24px; display: inline-flex; align-items: center; height: 24px; font: 600 12px/1 var(--sans); color: var(--accent); background: var(--accent-soft); padding: 0 9px; border-radius: 999px; }
.plans { position: relative; }
.early { position: absolute; z-index: 1; top: 14px; left: -16px; transform: rotate(-12deg); transform-origin: left bottom; padding: 7px 12px 8px; border-radius: 5px; font: 600 13px/1 var(--sans); letter-spacing: -.005em; color: #1a0c06; background: var(--accent); box-shadow: 0 5px 14px rgba(0,0,0,.5), inset 0 0 0 1px rgba(0,0,0,.08); pointer-events: none; }
.plan .amt { font: 700 64px/1 var(--display); letter-spacing: -.05em; margin: 22px 0 6px; font-variant-numeric: tabular-nums; }
.plan .amt sup { font-size: .42em; vertical-align: .95em; margin-right: 2px; letter-spacing: 0; color: var(--ink-2); }
.plan .per { margin: 0 0 28px; color: var(--ink-3); font-size: 15px; }
.plan .btn { margin-top: auto; width: 100%; }
.perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; list-style: none; padding: 0; margin: 32px 0 0; color: var(--ink-2); font-size: 15px; }
.perks li { display: flex; align-items: center; gap: 8px; }
.perks svg { width: 15px; height: 15px; color: var(--accent); }
.trial { margin-top: 48px; padding: 28px 32px; border-radius: 22px; box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.trial h3 { font-size: 22px; letter-spacing: -.02em; }
.trial p { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }
@media (max-width: 480px) { .trial { padding: 24px 22px 22px; } .trial .btn { --h: 50px; width: 100%; font-size: 16px; } }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } }
/* A phone on its side is 800px wide but short: three plans in a row, not a column three screens tall. */
@media (max-height: 520px) and (orientation: landscape) and (min-width: 700px) { .plans { grid-template-columns: repeat(3, 1fr); max-width: none; } .plan { padding: 22px 18px 20px; } }
.plan .btn[aria-busy="true"] { cursor: progress; opacity: .7; }
/* Phones: each plan is one row, the name and saving over the price per seat on the left, price and button right. */
@media (max-width: 560px) {
  .plans { gap: 12px; margin-top: 50px; }
  .early { top: -2px; left: -10px; }
  .plan { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px 10px; padding: 20px 20px 20px 22px; border-radius: 20px; text-align: left; }
  .plan h3 { grid-column: 1; grid-row: 1; }
  .plan .tag { grid-column: 2; grid-row: 1; justify-self: start; position: static; }
  .plan .amt { grid-column: 3; grid-row: 1; margin: 0; font-size: 40px; text-align: right; }
  .plan .per { grid-column: 1 / 3; grid-row: 2; margin: 0; font-size: 14px; }
  .plan .btn { grid-column: 3; grid-row: 2; width: auto; margin: 0; --h: 40px; padding: 0 16px; font-size: 14px; }
}

/* ---------- After paying: the home page's panel and /pay's page ---------- */
dialog.thanks { width: min(30rem, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow: auto; padding: 40px 36px 28px; border: 0; border-radius: 24px;
  background: var(--bg-3); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 80px rgba(0,0,0,.6); text-align: center; }
dialog.thanks::backdrop { background: rgba(0,0,0,.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
dialog.thanks .close { position: absolute; top: 14px; right: 16px; border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 26px; line-height: 1; padding: 4px; }
.thanks img { margin: 0 auto 18px; }
.thanks h1, .thanks h2 { margin: 0; font: 700 28px/1.15 var(--display); letter-spacing: -.03em; }
.thanks .lede { margin: 12px 0 0; color: var(--ink-2); font-size: 16px; overflow-wrap: anywhere; }
.thanks .lede strong { color: var(--ink); font-weight: 600; }
.steps { counter-reset: step; list-style: none; margin: 26px 0 0; padding: 0; text-align: left; font-size: 15px; color: var(--ink-2); }
.steps li { counter-increment: step; position: relative; padding: 12px 0 12px 40px; border-top: 1px solid var(--line); }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 11px; width: 26px; height: 26px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-hi); font: 600 13px/26px var(--sans); text-align: center; }
.steps strong { color: var(--ink); font-weight: 600; }
.thanks .ctas { margin-top: 22px; }
.thanks .ctas form { margin: 0; }
.thanks .fine { margin: 20px 0 0; line-height: 1.5; }
.thanks .fine a { color: var(--ink-2); }
.doc .pay { max-width: 30rem; margin: 0 auto; text-align: center; }
.doc .pay.thanks { padding-top: 8px; }
.doc .pay .steps { margin-bottom: 24px; }
.doc .pay h1 { font-size: clamp(30px, 5vw, 38px); line-height: 1.15; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 48px auto 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; font: 600 18px/1.35 var(--sans); letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3); transform: translateY(-3px) rotate(45deg); transition: transform .3s var(--ease-out); }
.faq details[open]:not(.is-closing) summary::after { transform: translateY(2px) rotate(225deg); }
.faq details p { margin: -6px 0 24px; color: var(--ink-2); max-width: 44em; }

/* ---------- Final CTA + footer ---------- */
.final { text-align: center; padding: calc(var(--space) * 1.25) 0 var(--space); overflow: hidden; }
.final .icon { width: 120px; height: 120px; margin: 0 auto 32px; }
.final h2 { max-width: 14ch; margin: 0 auto; }
/* A text cursor in place of the full stop, blinking like a Mac's insertion point. */
.final h2 .caret { display: inline-block; width: max(2px, .05em); height: .9em; margin-left: .06em; vertical-align: -.1em; border-radius: 1px; background: var(--ink); animation: caret 1.06s steps(1) infinite; }
@media (max-height: 520px) and (orientation: landscape) { .final { padding: 64px 0 56px; } .final .icon { width: 72px; height: 72px; margin-bottom: 18px; } .final h2 { max-width: none; } }
/* screen.studio's order: the link columns, how to reach us, then copyright and legal. No logo row or Download button:
   the header and the closing section above already carry both. */
footer { border-top: 1px solid var(--line); padding: 40px 0 28px; font-size: 13px; color: var(--ink-3); }
footer a { text-decoration: none; color: var(--ink-2); transition: color .15s; }
@media (hover: hover) { footer a:hover { color: var(--ink); } }
.ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 220px)); gap: 24px 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.ft-cols h2 { margin: 0 0 6px; font: 600 13px/1.3 var(--sans); letter-spacing: 0; color: var(--ink); }
.ft-cols a { display: block; padding: 6px 0; }
.ft-note { margin: 22px 0 0; color: var(--ink-2); }
.ft-note a { color: var(--ink); }
.ft-fine { margin: 8px 0 0; }
.ft-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.ft-badge { display: inline-block; line-height: 0; max-width: 100%; }
.ft-badges { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 16px; }
.ft-badge img { display: block; max-width: 100%; height: auto; }
.ft-bottom { display: flex; justify-content: space-between; align-items: center; gap: 4px 24px; flex-wrap: wrap; margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--line); }
.ft-bottom nav { display: flex; gap: 0 22px; }
.ft-bottom a { padding: 10px 0; }
/* Touch: every link at least 44pt tall. */
@media (pointer: coarse) { .ft-cols a { padding: 12px 0; } .ft-bottom a { padding: 13px 0; } }
@media (max-width: 560px) { .ft-cols { grid-template-columns: 1fr 1fr; } }

/* Links inside running text on the home page */
.checks a, .faq p a { color: var(--accent-hi); text-underline-offset: 3px; }
.price-note { margin: 18px 0 0; }

/* ==================== Text pages: privacy, terms, changelog ==================== */
.doc { max-width: 760px; margin: 0 auto; padding: clamp(96px, 14vw, 136px) var(--gutter) 112px; }
.doc h1 { font: 700 clamp(36px, 5.4vw, 60px)/1.04 var(--display); letter-spacing: -.045em; margin: 0; }
.doc .updated { margin: 16px 0 0; color: var(--ink-3); font-size: 14px; }
.doc .intro { margin: 24px 0 0; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.doc h2 { font: 600 22px/1.3 var(--display); letter-spacing: -.02em; margin: 64px 0 14px; scroll-margin-top: 80px; }
.doc h3 { font: 600 16px/1.4 var(--sans); margin: 28px 0 8px; }
.doc p, .doc li { color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 1.2em; }
.doc li { margin: 4px 0; }
.doc li::marker { color: var(--ink-3); }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--accent-hi); text-underline-offset: 3px; }
.doc code { font: .88em var(--mono); color: var(--ink); background: rgba(255,255,255,.06); padding: .1em .35em; border-radius: 5px; }
.doc address { font-style: normal; color: var(--ink-2); line-height: 1.7; }
.doc pre { margin: 0 0 18px; padding: 16px 18px; border-radius: 12px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; font: 14px/1.65 var(--mono); color: var(--ink); }
.doc pre code { background: none; padding: 0; font: inherit; }
.doc :not(pre) > code { overflow-wrap: anywhere; }
.doc .short { margin: 44px 0 0; padding: 26px 30px 12px; border-radius: 20px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.doc .short h2 { margin-top: 0; font-size: 18px; }
.doc .short li { margin: 8px 0; }
.doc .toc { margin: 40px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; border-top: 1px solid var(--line); padding-top: 20px; }
.doc .toc li { margin: 0 0 8px; break-inside: avoid; font-size: 15px; }
.doc .toc a { color: var(--ink-2); text-decoration: none; }
.doc .toc a:hover { color: var(--ink); }
@media (max-width: 560px) { .doc .toc { columns: 1; } .doc .short { padding: 20px 20px 8px; } }
/* Guides: a wider page, centred like the others, so tables and the shelf demo have room. */
.doc.guide { max-width: 900px; }
/* Guide tables: rows are options, a coloured dot says how each one answers the first question. */
.doc .tbl { margin: 0 0 12px; border-radius: 16px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); overflow-x: auto; }
.doc .tbl:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.doc .tbl table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.doc .tbl th, .doc .tbl td { padding: 14px 18px; text-align: left; vertical-align: top; color: var(--ink-2); border-top: 1px solid var(--line); }
.doc .tbl td + td, .doc .tbl tbody th + td { border-left: 1px solid var(--line); }
.doc .tbl thead th { border-top: 0; padding-top: 16px; padding-bottom: 12px; color: var(--ink-3); font: 700 11.5px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.doc .tbl thead th + th { border-left: 1px solid var(--line); }
.doc .tbl tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.doc .tbl.opts tbody th { width: 21%; white-space: normal; }
.doc .tbl td.nw { white-space: nowrap; }
.doc .tbl tbody th a { color: inherit; text-decoration-color: var(--line-2); }
.doc .tbl tbody tr:hover > * { background: rgba(255,255,255,.025); }
.doc .tbl .ic { display: inline-block; vertical-align: -3px; width: 17px; height: 17px; margin-right: 9px; border-radius: 50%; position: relative; }
.doc .tbl td.has-ic { position: relative; padding-left: 44px; }
.doc .tbl td.has-ic > .ic { position: absolute; left: 18px; top: 16px; margin: 0; }
.doc .tbl .ic::after { content: ""; position: absolute; }
.doc .tbl .ic.y { background: #2f9e62; }
.doc .tbl .ic.y::after { left: 6px; top: 3px; width: 4px; height: 8px; border: solid #0c1a12; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.doc .tbl .ic.p { background: #d7952b; }
.doc .tbl .ic.p::after { left: 4.5px; top: 7.5px; width: 8px; height: 2px; border-radius: 1px; background: #1f1405; }
.doc .tbl .ic.n { background: rgba(255,255,255,.16); }
.doc .tbl .ic.n::after { left: 4.5px; top: 7.5px; width: 8px; height: 2px; border-radius: 1px; background: var(--ink-3); }
.doc .tbl .pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 600 12.5px/1.6 var(--sans); color: var(--ink-2); background: rgba(255,255,255,.07); white-space: nowrap; }
.doc .tbl .pill.open { color: #f1c27a; background: rgba(215,149,43,.16); }
.doc .key { margin: 0 0 28px; font-size: 13.5px; color: var(--ink-3); }
.doc .key .ic { display: inline-block; vertical-align: -3px; width: 17px; height: 17px; margin: 0 6px 0 14px; border-radius: 50%; position: relative; }
.doc .key .ic:first-child { margin-left: 0; }
.doc .key .ic::after { content: ""; position: absolute; }
.doc .key .ic.y { background: #2f9e62; } .doc .key .ic.y::after { left: 6px; top: 3px; width: 4px; height: 8px; border: solid #0c1a12; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.doc .key .ic.p { background: #d7952b; } .doc .key .ic.p::after { left: 4.5px; top: 7.5px; width: 8px; height: 2px; border-radius: 1px; background: #1f1405; }
.doc .key .ic.n { background: rgba(255,255,255,.16); } .doc .key .ic.n::after { left: 4.5px; top: 7.5px; width: 8px; height: 2px; border-radius: 1px; background: var(--ink-3); }
@media (max-width: 600px) {
  .doc .tbl { border-radius: 12px; }
  .doc .tbl table { min-width: 0; font-size: 13px; line-height: 1.45; }
  .doc .tbl th, .doc .tbl td { padding: 10px 8px; overflow-wrap: break-word; }
  .doc .tbl thead th { padding: 11px 8px 9px; font-size: 10px; letter-spacing: .04em; white-space: normal; }
  .doc .tbl tbody th, .doc .tbl td.nw, .doc .tbl .pill { white-space: normal; }
  .doc .tbl.opts tbody th { width: 22%; }
  .doc .tbl td.has-ic { padding-left: 28px; }
  .doc .tbl td.has-ic > .ic { left: 8px; top: 11px; width: 14px; height: 14px; }
  .doc .tbl .ic.y::after { left: 4.5px; top: 2px; width: 3.5px; height: 7px; }
  .doc .tbl .ic.p::after, .doc .tbl .ic.n::after { left: 3.5px; top: 6px; width: 7px; }
  .doc .tbl .pill { font-size: 11.5px; padding: 2px 8px; border-radius: 9px; }
}
footer [aria-current] { color: var(--ink); }

/* Changelog: the version and date beside that release's notes */
.doc.wide { max-width: 980px; }
/* The 404 page: the text pages' layout, kept short and centred in the window. */
.doc.lost { min-height: 60vh; }
.lost-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.doc .lost-actions .btn { text-decoration: none; }
.doc .lost-actions .btn-primary { color: #111; }
.doc .lost-actions .btn-quiet { color: var(--ink); }
.release { display: grid; grid-template-columns: 200px 1fr; gap: 12px 40px; padding: 36px 0; border-top: 1px solid var(--line); }
.release:first-of-type { margin-top: 48px; }
.release-meta h2 { margin: 0; font: 700 26px/1.1 var(--display); letter-spacing: -.03em; scroll-margin-top: 80px; }
.release-meta time { display: block; margin-top: 8px; color: var(--ink-3); font-size: 14px; }
.release-notes h3 { margin: 0 0 8px; font: 600 15px/1.3 var(--sans); color: var(--ink); }
.release-notes ul + h3 { margin-top: 18px; }
.release ul { margin: 0; padding-left: 1.1em; }
.release li { margin: 0 0 10px; }
@media (max-width: 720px) { .release { grid-template-columns: 1fr; } }

/* A picture of the app under a release's notes (src/web/changelog.ts, FIGURES). */
.release-figure { margin: 22px 0 0; max-width: 520px; }
.release-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 14px; background: #29292b; }
.release-figure figcaption { margin-top: 10px; color: var(--ink-3); font-size: 13.5px; }

/* ---------- Home hero: copy beside a terminal that drives the notch (hero.js); phones, tablets and landscape phones swap the terminal for a Mac-screen card ---------- */
.hero { padding: 120px var(--gutter) 90px; }
.hero-grid { width: min(1320px, 100%); display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 15fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.hero-grid .hero-copy { text-align: left; }
.hero-grid .hero-copy { container-type: inline-size; }
/* 12.8cqw: "made transparent." is 7.68em wide, so it never outgrows its column or wraps to a third line. */
.hero-grid h1 { font-size: min(clamp(40px, 4.3vw, 60px), 12.8cqw); letter-spacing: -.045em; margin: 0; text-wrap: balance; }
.hero-grid h1 em { white-space: nowrap; }
.hero-grid .lede { margin: 24px 0 0; max-width: 28em; }
.hero-grid .ctas { justify-content: flex-start; }
.hero-grid .fine { margin-top: 16px; }
.hs-term { font-size: 13px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.55); }
.hs-term .term-body { min-height: 230px; }
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) { .hero-grid { grid-template-columns: 1fr; } .hero-grid .hero-copy { text-align: center; } .hero-grid .ctas { justify-content: center; } .hero-grid .lede { margin-inline: auto; } .hero-grid h1 { font-size: clamp(46px, 9.4vw, 76px); } .hero-grid h1 br { display: inline; } }
.thumb.is-new { animation: thumb-in .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes thumb-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.hs-term { font-family: ui-monospace, "SF Mono", Menlo, Monaco, monospace; background: #1d1d1e; border-radius: 12px; font-size: 13px; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.55); }
.hs-term .term-bar { height: 38px; padding: 0 14px; gap: 8px; background: #2a2a2c; border-bottom: 1px solid #000; justify-content: flex-start; }
.hs-term .term-bar i { width: 12px; height: 12px; } .term-bar i.r { background: #ff5f57; } .term-bar i.y { background: #febc2e; } .term-bar i.g { background: #28c840; }
.hs-term .term-bar span { margin: 0 auto; transform: translateX(-24px); display: flex; align-items: center; gap: 7px; font: 600 13px/1 var(--sans); color: rgba(255,255,255,.62); white-space: nowrap; }
.hs-term .term-bar span svg { width: 16px; height: 13px; }
.hs-term .term-body.cc { display: flex; flex-direction: column; height: 390px; min-height: 0; padding: 22px 26px 16px; line-height: 1.5; overflow: hidden; color: #c9c9c9; position: relative; }
.hs-term .term-body.cc::after { content: ""; position: absolute; right: 6px; top: 60px; bottom: 14px; width: 6px; border-radius: 3px; background: rgba(255,255,255,.14); }
.cc-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.cc-mascot { width: 46px; height: auto; flex: none; }
.cc-info { color: #9a9a9a; line-height: 1.55; } .cc-info b { color: #fff; font-weight: 700; }
.cc-head, .cc-rule, .cc-prompt, .cc-hint, .cc-spin { flex: none; }
.cc-hist { display: flex; flex-direction: column; gap: 10px; }
.cc-you { background: rgba(255,255,255,.08); color: #e6e6e6; padding: 3px 10px; border-radius: 3px; }
.cc-you::before { content: "❯ "; color: rgba(255,255,255,.55); }
.cc-line { display: flex; gap: 10px; color: #dcdcdc; } .cc-line b { font-weight: 700; color: #fff; }
.cc-line .dot { flex: none; width: 9px; height: 9px; margin-top: .6em; border-radius: 50%; } .dot.g { background: #4ec27a; } .dot.w { background: #e8e8e8; }
.cc-out { display: flex; gap: 10px; padding-left: 6px; color: #8e8e8e; margin-top: -4px; } .cc-out i { font-style: normal; color: #6b6b6b; }
.cc-spin { margin: auto 0 10px; color: var(--accent); } .cc-spin i { font-style: normal; display: inline-block; width: 1.5em; } .cc-spin em { font-style: normal; color: #777; }
.cc-rule { height: 1px; background: rgba(255,255,255,.28); margin-top: 0; }
.cc-prompt { display: flex; align-items: center; padding: 8px 2px; color: #eee; white-space: nowrap; overflow: hidden; }
.cc-prompt .pfx { color: #eee; margin-right: 10px; font-weight: 700; }
.cc-prompt .caret { display: inline-block; width: .6em; height: 1.2em; background: rgba(255,255,255,.7); animation: caret 1s steps(1) infinite; }
.cc-hint { margin: 8px 0 0 10px; color: #777; }
.ph-card { display: none; position: relative; aspect-ratio: 1040 / 650; height: auto; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.5); }
.ph-stage { position: absolute; left: 0; top: 0; width: 1040px; height: 650px; transform-origin: 0 0; transition: transform 1s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.ph-stage.no-anim { transition: none; }
.ph-card .notch { text-align: left; }
.ph-card .screen { width: 1040px; height: 650px; border-radius: 0; box-shadow: none; }
.ph-card .screen .hs-term { display: block; position: absolute; left: 210px; top: 150px; width: 620px; font-size: 14px; }
.ph-card .screen .hs-term .term-body.cc { height: 360px; padding: 16px 22px 10px; }
.ph-card .screen .hs-term .cc-head { margin-bottom: 10px; }
.ph-card .screen .hs-term .cc-hist { gap: 7px; }
.ph-card .screen .hs-term .term-bar { height: 32px; }
.ph-mouse { position: absolute; z-index: 9; left: 700px; top: 400px; width: 30px; height: 30px; opacity: 0; pointer-events: none; transition: left .9s cubic-bezier(.4,0,.2,1), top .9s cubic-bezier(.4,0,.2,1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
@media (max-width: 900px), (orientation: portrait) and (max-width: 1100px) { .hero-notch { display: none; } .ph-card { display: block; order: -1; width: min(100%, 640px); margin-inline: auto; } .hero-grid { gap: 40px; } .hero { place-items: center; min-height: 100svh; padding-top: 96px; } }
/* A phone on its side is wide but only ~400px tall: copy left, the Mac-screen card right, so both show without scrolling. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1100px) {
  .hero-notch { display: none; } .scroll-cue { display: none; }
  /* One screen, the pair centred in the space under the nav. */
  .hero { padding: 56px 28px 16px; place-items: center; min-height: 100dvh; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
  .hero-grid .hero-copy { text-align: left; }
  .hero-grid h1 { font-size: clamp(26px, min(9svh, 4.6vw), 40px); }
  .hero-grid h1 br { display: inline; } .hero-grid h1 em { white-space: nowrap; }
  .hero-grid .lede { margin: 10px 0 0; font-size: 14px; line-height: 1.45; }
  .hero-grid .ctas { justify-content: flex-start; margin-top: 14px; gap: 8px; }
  .hero-grid .ctas .btn { padding-block: 10px; font-size: 14px; }
  .hero-grid .fine { margin-top: 10px; text-align: left; font-size: 12px; }
  .ph-card { display: block; order: 0; width: 100%; margin: 0; }
}
@media (max-width: 640px) {
  .home .nav-menu { display: none !important; }
  .hero { padding: 88px 20px 56px; place-items: center; min-height: 100svh; }
  .hero-grid { gap: 36px; }
  .hero-grid h1 { font-size: min(10.8vw, 48px); }
  .hero-grid h1 em { white-space: nowrap; }
  .hero-grid h1 br { display: inline; }
  .hero-grid .hero-copy { text-align: left; }
  .hero-grid .lede { margin-top: 18px; font-size: 17px; }
  .hero-grid .ctas { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
  .hero-grid .ctas .btn { width: 100%; justify-content: center; padding-block: 15px; }
  .hero-grid .ctas [data-share] { order: -1; }
  .hero-grid .fine { text-align: center; text-wrap: balance; }
  .ph-card { display: block; order: -1; }
  .hero { padding-top: 72px; }
  /* The header keeps its call to action: the rule that hid it below 560px was there for the hero notch, which phones do not show. */
  .home .brand { font-size: 16px !important; gap: 10px !important; padding: 0 !important; margin-left: 0 !important; }
  .scroll-cue { display: none; }
}
@media (max-width: 640px) and (hover: none) { .home .nav-r .btn.for-touch { display: inline-flex !important; } }
@media (max-width: 640px) and (hover: hover) { .home .nav-r .btn.nav-dl { display: inline-flex !important; } }

/* ---------- Guides: the shelf demo, a Mac screen drawn at 1040x650 and scaled to the column (guide-demo.js) ---------- */
.gd { margin: 28px 0 28px; }
.gd > .gd-stage { position: relative; width: 100%; aspect-ratio: 1040 / 650; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.5); }
.gd .gd-stage .screen { position: absolute; left: 0; top: 0; width: 1040px; height: 650px; border-radius: 0; box-shadow: none; transform-origin: 0 0; }
.gd .notch { text-align: left; }
.gd figcaption { margin-top: 12px; color: var(--ink-3); font-size: 14px; line-height: 1.5; text-align: center; }