*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; -webkit-tap-highlight-color: transparent; }
/* Friction: the story's moments are the only snap points, so scrolling settles on each one and runs free elsewhere.
   Mouse and trackpad only: on a touch screen root snapping fights momentum and the pinned sections. */
@media (pointer: fine) { html:has(.story) { scroll-snap-type: y proximity; } }
/* Controls are things you press, not text you select; a long press must not start a selection or a callout. */
button, .btn, .chip, .pick, .ex-tab { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 17px/1.5 var(--sans);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* Faint dot grid over the glows: a pattern you notice only up close */
  background: radial-gradient(circle, rgba(255, 255, 255, .045) 1px, transparent 1.5px) 0 0 / 22px 22px, radial-gradient(48% 42% at 12% 18%, rgba(98, 66, 210, .2), transparent 70%), radial-gradient(44% 40% at 88% 62%, rgba(196, 70, 150, .13), transparent 70%),
    radial-gradient(60% 46% at 50% 108%, rgba(52, 86, 210, .16), transparent 70%); }
/* Grain textures the canvas only. Overlay keeps its mid-grey neutral: on top of the page at normal blend it lifted every black into a grey veil. */
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: url(../img/grain.png) 0 0 / 128px 128px; mix-blend-mode: overlay; opacity: .5; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
input { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgba(41, 151, 255, .25); }
[hidden] { display: none !important; }
/* Set by nav.js on sections out of view, and on the hero notch once it has handed over to the nav */
.offscreen *, .offscreen *::before, .offscreen *::after, .hero-notch.gone *, .hero-callout.off * { animation-play-state: paused !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #000; padding: 10px 16px; border-radius: 999px; }
.skip:focus { left: 16px; }

/* Layout */
.wrap { max-width: 980px; margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.section { padding: var(--section) 0; position: relative; }
.tile { background: rgba(255, 255, 255, .03); }
.light { background: var(--parchment); color: var(--ink-light); color-scheme: light; --mark-cut: var(--parchment); }

/* Type */
.eyebrow { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.hero-title { font-weight: 600; font-size: clamp(48px, 7.4vw, 96px); line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.display { font-weight: 600; font-size: clamp(40px, 5.6vw, 72px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.eyebrow + .display { margin-top: 16px; }
.title { font-weight: 600; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
.lead { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.4; color: var(--ink-muted); max-width: 640px; margin: 24px auto 0; text-wrap: pretty; }
.light .lead { color: var(--ink-light-muted); }
.fine { font-size: 14px; color: var(--ink-faint); }
.num { font-variant-numeric: tabular-nums; }
p { text-wrap: pretty; }

/* Mark: a lit screen, its notch, and a doodle. Hover: the notch opens into wings and the doodle redraws. */
.mark { width: 28px; height: 28px; flex: none; overflow: visible; }
.m-screen { fill: currentColor; }
.m-notch { fill: var(--mark-cut, #000); transform-box: fill-box; transform-origin: 50% 0; transition: scale var(--sp-collapse-d) var(--sp-collapse); }
.m-doodle { fill: none; stroke: var(--mark-cut, #000); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.brand:hover .m-notch, .brand:focus-visible .m-notch, .nav[data-state="open"] .nav-wings .m-notch { scale: 1.8 1.15; transition: scale var(--sp-expand-d) var(--sp-expand); }
.brand:hover .m-doodle, .brand:focus-visible .m-doodle { animation: doodle 720ms var(--ease-out); }
.nav .brand .m-doodle { animation: doodle 900ms 400ms var(--ease-out) backwards; }
.nav .brand:hover .m-doodle { animation: doodle 720ms var(--ease-out); }
@keyframes doodle { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* Buttons and links */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 12px 24px; border-radius: 999px; white-space: nowrap;
  background: var(--ink); color: #000; font-size: 17px; letter-spacing: -0.01em;
  transition: transform var(--press) var(--ease), background .2s var(--ease), opacity .2s;
}
.btn:hover { background: #fff; }
.btn:active { transform: scale(.96); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.btn .ic { width: 18px; height: 18px; }
.btn-sm { min-height: 32px; padding: 6px 16px; font-size: 14px; }
.btn-sm::after { content: ""; position: absolute; inset: -6px 0; }
.btn-lg { min-height: 56px; padding: 16px 30px; font-size: 19px; }
.light .btn { background: var(--ink-light); color: #fff; }
.light .btn:hover { background: #000; }
.link { color: var(--link); display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.link::after { content: "\203A"; font-size: 1.2em; line-height: 1; transition: transform .2s var(--ease); }
.link:hover::after { transform: translateX(3px); }
.light .link { color: var(--link-light); }
.cta { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 28px; }

/* Pills, tags, toggles */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px;
  background: var(--tile-2); border: 1px solid var(--line); color: var(--ink-muted); transition: color var(--m-base), border-color var(--m-base), background var(--m-base), transform var(--press) var(--ease); }
.pills a:hover { color: var(--ink); border-color: var(--line-strong); background: var(--tile-3); }
.pills a:active { transform: scale(.96); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 14px; }
.tag { font: 500 11px/1 var(--mono); letter-spacing: .02em; padding: 5px 8px; border-radius: 999px; color: var(--ink-muted); background: var(--tile-3); }
.tag.mc { color: var(--link); background: rgba(41, 151, 255, .12); }
.sw { position: relative; width: 36px; height: 22px; border-radius: 11px; flex: none; background: var(--tile-3); border: 1px solid var(--line-strong); transition: background var(--m-base) var(--ease-out), border-color var(--m-base); }
.sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-muted);
  transition: translate var(--sp-expand-d) var(--sp-expand), background var(--m-base); }
[aria-pressed="true"] > .sw { background: var(--ink); border-color: transparent; }
[aria-pressed="true"] > .sw::after { translate: 14px 0; background: #000; }
.chip-t { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 10px; border-radius: 999px; font-size: 14px; color: var(--ink-muted);
  background: var(--tile-2); border: 1px solid var(--line); transition: color var(--m-base), border-color var(--m-base), transform var(--press) var(--ease); }
.chip-t:hover { color: var(--ink); border-color: var(--line-strong); }
.chip-t:active { transform: scale(.96); }
.chip-t[aria-pressed="true"] { color: var(--ink); }
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Cards (D17 5.5): tile-2, hairline, no shadow, no lift */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.card { min-width: 0; }
.card-a { height: 100%; display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--tile-2); border: 1px solid var(--line);
  transition: background var(--m-base) var(--ease-out), border-color var(--m-base) var(--ease-out), transform var(--press) var(--ease); }
.card-vis { position: relative; display: block; height: 76px; background: url(../img/wall.webp) var(--wp, 50% 30%) / 420% auto; }
.card-vis::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 22, 0) 20%, var(--tile-2) 100%); transition: opacity var(--m-base); }
.card-isl { position: absolute; left: 50%; top: 0; translate: -50% 0; z-index: 1; height: 26px; min-width: 92px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  border-radius: 0 0 11px 11px; background: #000; color: #fff; transition: min-width var(--sp-collapse-d) var(--sp-collapse), height var(--sp-collapse-d) var(--sp-collapse); }
.card-isl .ic { width: 14px; height: 14px; }
.card-isl i { width: 6px; height: 6px; border-radius: 50%; background: var(--notch-green); }
.card-isl i.beta { background: var(--notch-amber); }
.card-nm { max-width: 0; overflow: hidden; white-space: nowrap; font: 600 11.5px/1 -apple-system, BlinkMacSystemFont, system-ui; opacity: 0;
  transition: max-width var(--sp-collapse-d) var(--sp-collapse), opacity 160ms; }
.card-isl i { animation: dotp 2.4s var(--ease-inout) infinite; }
/* Hover opens a card's notch on a mouse. On touch there is no hover, so the notch opens by itself once the card is in view. */
.card-a:focus-visible .card-isl { min-width: 150px; height: 30px; gap: 10px; transition-timing-function: var(--sp-expand); transition-duration: var(--sp-expand-d); }
.card-a:focus-visible .card-nm { max-width: 150px; opacity: 1; transition: max-width var(--sp-expand-d) var(--sp-expand), opacity 200ms 120ms; }
@media (hover: hover) {
  .card-a:hover .card-isl { min-width: 150px; height: 30px; gap: 10px; transition-timing-function: var(--sp-expand); transition-duration: var(--sp-expand-d); }
  .card-a:hover .card-nm { max-width: 150px; opacity: 1; transition: max-width var(--sp-expand-d) var(--sp-expand), opacity 200ms 120ms; }
}
@media (hover: none) {
  .js .card.seen .card-isl { min-width: 150px; height: 30px; gap: 10px;
    transition: translate 620ms var(--sp-expand) var(--dd, 0ms), min-width var(--sp-expand-d) var(--sp-expand) calc(var(--dd, 0ms) + 520ms), height var(--sp-expand-d) var(--sp-expand) calc(var(--dd, 0ms) + 520ms), gap var(--sp-expand-d) var(--sp-expand) calc(var(--dd, 0ms) + 520ms); }
  .js .card.seen .card-nm { max-width: 150px; opacity: 1; transition: max-width var(--sp-expand-d) var(--sp-expand) calc(var(--dd, 0ms) + 520ms), opacity 200ms calc(var(--dd, 0ms) + 640ms); }
}
.js .card .card-isl { translate: -50% -110%; }
.js .card.seen .card-isl { translate: -50% 0; transition: translate 620ms var(--sp-expand), min-width var(--sp-collapse-d) var(--sp-collapse), height var(--sp-collapse-d) var(--sp-collapse); transition-delay: var(--dd, 0ms), 0ms, 0ms; }
@keyframes dotp { 50% { opacity: .35; } }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 6px 22px 22px; }
@media (hover: hover) { .card-a:hover { background: var(--tile-3); border-color: var(--line-strong); } }
.card-a:active { transform: scale(.98); }
.card-a:focus-visible { outline-offset: 2px; border-radius: 16px; }
.card-t { font-size: 19px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }
.card-p { margin-top: 6px; font-size: 14px; line-height: 1.43; color: var(--ink-muted); letter-spacing: 0; }

/* Search pill, home and directory */
.find-in { width: 100%; height: 60px; padding: 0 56px 0 54px; border-radius: 30px; background: var(--tile-2); border: 1px solid var(--line-strong); font-size: 19px; outline: none;
  transition: border-color var(--m-base), background var(--m-base), box-shadow var(--m-base); -webkit-appearance: none; appearance: none; }
.find-in::placeholder { color: var(--ink-faint); }
.find-in:hover { border-color: rgba(255, 255, 255, .22); }
.find-in:focus { border-color: var(--focus); box-shadow: 0 0 0 4px rgba(0, 113, 227, .3); background: var(--tile-3); }
.find-in::-webkit-search-cancel-button { display: none; }
.find-ic { position: absolute; left: 20px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; color: var(--ink-muted); pointer-events: none; }
.find-kbd { position: absolute; right: 18px; top: 50%; translate: 0 -50%; font: 500 13px/1 var(--mono); padding: 5px 9px; border-radius: 8px; color: var(--ink-muted); border: 1px solid var(--line-strong); }

@media (max-width: 734px) { .find-in { height: 56px; font-size: 17px; } .find-kbd { display: none; } }
@media (hover: none) { .find-kbd { display: none; } }

/* Reveal: fade up 24px, lose 6px blur, once at 15% visible. Siblings stagger with --d. */
.js .reveal { opacity: 0; transform: translateY(24px); filter: blur(6px);
  transition: opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease), filter var(--reveal) var(--ease);
  transition-delay: calc(var(--d, 0) * 80ms); }
.js .reveal.in { opacity: 1; transform: none; filter: none; }

/* Notch nav. Bar at the top of the page, a black island flush with the top edge once you scroll (PLAN.md). */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; pointer-events: none; }
.nav-isl { --sh: 0px; pointer-events: auto; position: relative; width: min(1152px, 100% - 32px); height: 56px; color: var(--ink);
  border-radius: 0 0 20px 20px; background: rgba(0, 0, 0, 0);
  transition: width var(--sp-collapse-d) var(--sp-collapse), height var(--sp-collapse-d) var(--sp-collapse),
    border-radius var(--sp-collapse-d) var(--sp-collapse), background-color 240ms var(--ease-out), box-shadow 240ms; }
.nav-isl::before, .nav-isl::after { content: ""; position: absolute; top: 0; width: var(--sh); height: var(--sh); pointer-events: none;
  left: calc(var(--sh) * -1); background: radial-gradient(circle at 0 100%, transparent var(--sh), #000 calc(var(--sh) + .5px)); opacity: 0; transition: opacity 200ms; }
.nav-isl::after { left: auto; right: calc(var(--sh) * -1); background: radial-gradient(circle at 100% 100%, transparent var(--sh), #000 calc(var(--sh) + .5px)); }
.nav[data-state="notch"] .nav-isl, .nav[data-state="peek"] .nav-isl, .nav[data-state="open"] .nav-isl { background-color: #000; --sh: 8px; }
.nav[data-state="notch"] .nav-isl::before, .nav[data-state="notch"] .nav-isl::after,
.nav[data-state="peek"] .nav-isl::before, .nav[data-state="peek"] .nav-isl::after,
.nav[data-state="open"] .nav-isl::before, .nav[data-state="open"] .nav-isl::after { opacity: 1; }
.nav[data-state="notch"] .nav-isl { width: 256px; height: 38px; border-radius: 0 0 16px 16px; }
.nav[data-state="peek"] .nav-isl { width: 380px; height: 84px; border-radius: 0 0 26px 26px; }
/* Open: solid hardware black like the app's notch, no glass, so the wallpaper never bleeds through the menu. */
.nav[data-state="open"] .nav-isl { --sh: 14px; width: 640px; height: 320px; border-radius: 0 0 32px 32px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); }
.nav[data-state="open"] .nav-isl, .nav[data-state="peek"] .nav-isl {
  transition-timing-function: var(--sp-expand); transition-duration: var(--sp-expand-d), var(--sp-expand-d), var(--sp-expand-d), 240ms, 240ms; }

.nav-bar, .nav-wings, .nav-panel, .nav-peek { position: absolute; opacity: 0; visibility: hidden; transition: opacity 120ms var(--ease-inout), visibility 0s 120ms; }
.nav[data-state="bar"] .nav-bar, .nav[data-state="notch"] .nav-wings, .nav[data-state="peek"] .nav-wings, .nav[data-state="peek"] .nav-peek,
.nav[data-state="open"] .nav-wings, .nav[data-state="open"] .nav-panel { opacity: 1; visibility: visible; transition: opacity 220ms 180ms var(--ease-out), visibility 0s; }
.nav-bar { inset: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 8px; }
.nav-links { position: absolute; left: 50%; translate: -50% 0; display: flex; gap: 4px; }
.nav-links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 14px; color: var(--ink-muted); transition: color var(--m-base); }
.nav-links a::before { content: ""; position: absolute; inset: 7px 2px; border-radius: 999px; background: rgba(255, 255, 255, .08); opacity: 0; scale: .9; transition: opacity var(--m-base), scale var(--m-base) var(--ease-out); z-index: -1; }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::before { opacity: 1; scale: 1; }
.nav-wings { left: 0; right: 0; top: 0; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 14px; }
.nav-wings .mark { width: 20px; height: 20px; }
.nav-sec { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.nav-sec-t { display: inline-block; animation: vin 260ms var(--ease-out); }
.nav-ring { width: 16px; height: 16px; rotate: -90deg; }
.nav-ring circle { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.nav-ring .bg { stroke: rgba(255, 255, 255, .2); }
.nav-ring .fg { stroke: var(--ink); stroke-dasharray: 1; stroke-dashoffset: var(--read, 1); }
@supports (animation-timeline: scroll()) {
  .nav-ring .fg { animation: read linear both; animation-timeline: scroll(root); }
  @keyframes read { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}
.nav-peek { left: 0; right: 0; top: 42px; text-align: center; font-size: 14px; font-weight: 600; padding: 0 20px; }
/* Open menu. Rows drop in behind the growing edge, sharpening from a blur, one after another (--i set in nav.js).
   Closing reverses fast with no stagger, so the island never waits on its content. */
.nav-panel { left: 12px; right: 12px; top: 44px; bottom: 12px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr) auto; gap: 2px 4px; }
.nav[data-state="open"] .nav-panel { transition: visibility 0s; }
.nav-panel > * { position: relative; opacity: 0; translate: 0 -8px; filter: blur(6px);
  transition: opacity 120ms var(--ease-inout), translate 160ms var(--ease-inout), filter 120ms var(--ease-inout), transform var(--press) var(--ease); }
.nav[data-state="open"] .nav-panel > * { --dl: calc(110ms + var(--i, 0) * 35ms); opacity: 1; translate: none; filter: none;
  transition: opacity 320ms var(--ease-out) var(--dl), translate 560ms var(--ease-expo) var(--dl), filter 360ms var(--ease-out) var(--dl), transform var(--press) var(--ease); }
/* One highlight glides from row to row instead of each row lighting up on its own (position set in nav.js). */
.nav-panel::before { content: ""; position: absolute; left: 0; top: 0; width: var(--hw, 0); height: var(--hh, 0); translate: var(--hx, 0) var(--hy, 0);
  border-radius: 18px; background: rgba(255, 255, 255, .07); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease-out); }
.nav-panel[data-hl]::before { opacity: 1;
  transition: opacity 160ms var(--ease-out), translate 380ms var(--ease-expo), width 380ms var(--ease-expo), height 380ms var(--ease-expo); }
.np-link { display: grid; grid-template-columns: auto 1fr auto; align-content: center; column-gap: 14px; padding: 0 18px 0 14px; border-radius: 18px; }
.np-link:active { transform: scale(.985); }
.np-link:focus-visible { outline-offset: -2px; border-radius: 18px; }
.nav-panel .np-ic { grid-row: 1 / 3; width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, .07); color: var(--ink-muted);
  transition: background var(--m-base) var(--ease-out), color var(--m-base) var(--ease-out); }
.np-link b { grid-column: 2; align-self: end; font-weight: 600; font-size: 15px; line-height: 1.3; letter-spacing: -0.015em; }
.np-link span { grid-column: 2; align-self: start; font-size: 13px; line-height: 1.35; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Chevron: slides in on hover, the same way the highlight arrives */
.np-link::after { content: ""; grid-column: 3; grid-row: 1 / 3; align-self: center; width: 7px; height: 7px; border: solid var(--ink-muted); border-width: 1.75px 1.75px 0 0;
  rotate: 45deg; opacity: 0; translate: -6px 0; transition: opacity var(--m-base) var(--ease-out), translate var(--m-slow) var(--ease-expo); }
.np-link:hover .np-ic, .np-link:focus-visible .np-ic { background: rgba(255, 255, 255, .13); color: var(--ink); }
.np-link:hover::after, .np-link:focus-visible::after { opacity: 1; translate: 0; }
.np-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 12px 2px 0; border-top: 1px solid var(--line); }
.np-find { flex: 1; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .06);
  color: var(--ink-muted); font-size: 14px; transition: background var(--m-base) var(--ease-out), color var(--m-base) var(--ease-out), transform var(--press) var(--ease); }
.np-find .np-ic { width: 18px; height: 18px; padding: 0; border-radius: 0; background: none; color: inherit; }
.np-find:hover { background: rgba(255, 255, 255, .1); color: var(--ink); }
.np-find:active { transform: scale(.985); }
.np-find:focus-visible { outline-offset: -2px; border-radius: 999px; }
.np-get.btn-sm { min-height: 40px; padding: 0 20px; }
@keyframes vin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.nav-toggle { position: absolute; left: 0; right: 0; top: 0; height: 38px; display: none; border-radius: 0 0 16px 16px; }
.nav[data-state="notch"] .nav-toggle, .nav[data-state="peek"] .nav-toggle, .nav[data-state="open"] .nav-toggle { display: block; }
.nav-toggle:focus-visible { outline-offset: -2px; }

.nav.menubar[data-state="bar"] .nav-isl { width: 100%; height: 38px; border-radius: 0; background-color: rgba(14, 10, 34, .26); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); }
.nav.menubar .nav-bar { padding: 0 10px 0 14px; justify-content: flex-start; gap: 6px; }
.nav.menubar[data-state="bar"] .brand { min-height: 38px; font-size: 14px; gap: 8px; }
.nav.menubar[data-state="bar"] .brand .mark { width: 18px; height: 18px; }
.nav.menubar .nav-links { position: static; translate: none; }
.nav.menubar .nav-links a { min-height: 38px; padding: 0 10px; font-size: 13.5px; color: rgba(255, 255, 255, .86); }
.nav.menubar .nav-links a::before { inset: 6px 0; border-radius: 6px; }
.nav-clock { margin-left: auto; padding: 0 12px; font-size: 13.5px; color: rgba(255, 255, 255, .86); white-space: nowrap; }
.nav.menubar[data-state="bar"] .btn-sm { min-height: 26px; padding: 3px 12px; font-size: 13px; }
.nav:not(.menubar) .nav-clock { display: none; }
@media (max-width: 1100px) { .nav.menubar .nav-links { display: none; } }
@media (max-width: 900px) { .nav-links { display: none; } } /* six centred links reach the brand and the button below this; the notch menu has them */

@media (max-width: 734px) {
  /* Landscape on a notched phone: keep content clear of the camera housing and the rounded corners */
  .wrap, .wrap-wide { padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
  .nav:is([data-state="notch"], [data-state="bar"]) .nav-toggle { height: 48px; } /* the island is 38px; the tap target reaches 44+ below it */
  /* Open menu: the page dims and holds still behind it */
  html:has(.nav[data-state="open"]) { overflow: hidden; }
  .nav::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease-out); }
  .nav[data-state="open"]::before { opacity: 1; pointer-events: auto; } /* catches the tap that closes it, so it never lands on the page */
  .nav-panel { overscroll-behavior: contain; }
  .np-find { min-height: 48px; }
  .nav[data-state="bar"] .nav-isl, .nav[data-state="notch"] .nav-isl { width: 224px; height: 38px; border-radius: 0 0 16px 16px; background-color: #000; --sh: 8px; }
  .nav[data-state="bar"] .nav-isl::before, .nav[data-state="bar"] .nav-isl::after { opacity: 1; }
  .nav[data-state="bar"] .nav-bar { opacity: 0; visibility: hidden; }
  .nav[data-state="bar"] .nav-wings { opacity: 1; visibility: visible; }
  .nav[data-state="bar"] .nav-toggle { display: block; }
  /* On phones the hero's own notch takes the top; the nav island steps in once the hero is gone */
  .nav.menubar[data-state="bar"] { opacity: 0; pointer-events: none; }
  .nav.menubar[data-state="bar"] .nav-isl { pointer-events: none; visibility: hidden; }
  .nav.menubar { transition: opacity 300ms var(--ease-out); }
  .nav[data-state="peek"] .nav-isl { width: min(380px, 100% - 16px); }
  .nav[data-state="open"] .nav-isl { width: calc(100% - 12px); height: min(500px, 100svh - 24px); }
  .nav-panel { grid-template-columns: 1fr; grid-template-rows: repeat(5, 1fr) auto; }
  .np-link b { font-size: 17px; }
  .np-foot { flex-wrap: wrap; }
  .np-find { flex-basis: 100%; }
  .np-get.btn-sm { flex: 1; min-height: 48px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html:has(.story) { scroll-snap-type: none; }
  .js .reveal { transform: none; filter: none; transition: opacity 150ms linear; }
  .btn, .link::after, .nav-isl, .sw, .sw::after, .m-notch { transition: none; }
  .m-doodle, .nav-sec-t, .card-isl i { animation: none !important; }
  .nav-panel > *, .nav[data-state="open"] .nav-panel > * { translate: none; filter: none; transition: opacity 150ms linear; }
  .nav-panel[data-hl]::before { transition: opacity 150ms linear; }
  .np-link::after { translate: 0; }
  .js .card .card-isl { translate: -50% 0; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .card-a, .pills a, .tag { border-color: var(--line-strong); }
}

/* Footer */
.foot { padding: 64px 0 40px; border-top: 1px solid var(--line); }
.foot-in { display: flex; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.foot-tag { margin-top: 6px; color: var(--ink-muted); font-size: 14px; }
.foot-cols { display: flex; gap: clamp(40px, 8vw, 120px); }
.foot-cols h2 { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 12px; }
.foot-cols a { display: flex; align-items: center; min-height: 36px; font-size: 14px; color: var(--ink-muted); transition: color var(--m-base); }
.foot-cols a:hover { color: var(--ink); }
.foot-fine { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 6px; font-size: 12px; color: var(--ink-muted); }

@media (max-width: 734px) {
  .foot { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .foot-in { flex-direction: column; gap: 32px; }
  .foot-cols { gap: 24px; }
  .foot-cols > div { flex: 1; }
  .foot-cols a { min-height: 44px; font-size: 15px; }
  .foot-fine { font-size: 13px; line-height: 1.5; }
  /* Reveals fade and rise without the blur: a full-screen blur per element costs frames on a phone GPU */
  .js .reveal { filter: none; }
}

/* Text pages: terms, privacy */
.legal { padding: calc(56px + clamp(48px, 6vw, 88px)) 0 var(--section); }
.legal .wrap { max-width: 720px; }
.legal .display { margin-top: 12px; }
.doc-date { margin-top: 12px; }
.legal > article h2 { margin-top: 40px; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.legal > article p, .legal > article li { margin-top: 10px; color: var(--ink-muted); }
.legal > article ul { list-style: disc; padding-left: 20px; }
.ul { color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }