/* Pip, pipdot.app. Warm neutrals, one orange, Switzer 500 + Geist Mono.
   Tokens mirror src/tokens/tokens.css (light + dark). */

@font-face {
  font-family: 'Switzer';
  src: url('fonts/Switzer-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/Switzer-500.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-latin.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #f6f4ef;
  --ink: #0c0c0c;
  --ink-2: #3a3a37;
  --dim: #6e6e68;
  --faint: #a3a39d;
  --ring: #c9c7c0;
  --rule: #e6e3dc;
  --card: #fffefb;
  --panel: #1c1b19;
  --btn-hover: #2a2a2a;
  --or: #ff4d00;
  --p-ink: #ffffff;
  --p-dim: #8d8b84;
  --p-faint: #6d6b65;
  --p-rule: #4a4843;
  --sans: 'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gut: clamp(20px, 4vw, 48px);
  --max: 1344px;
  --top-h: 68px;
  --shadow-card: 0 1px 2px rgba(40, 34, 24, 0.05), 0 14px 40px -18px rgba(40, 34, 24, 0.16);
  --pip-shadow: rgba(40, 34, 24, 0.26);
  --pip-glow: rgba(255, 120, 50, 0.2); --pip-glow-mid: rgba(255, 128, 60, 0.11); /* the light off the hero Pip (a warm peach on paper) */
  --grain: 0.035;                                                              /* the hero's film grain */
}
/* Dark: the system setting until someone uses the toggle (theme.js sets data-theme on <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #151412;
    --ink: #f2f0ea;
    --ink-2: #cfcdc5;
    --dim: #9a988f;
    --faint: #66645d;
    --ring: #4a4842;
    --rule: #2a2925;
    --card: #1c1b19;
    --panel: #26241f;
    --btn-hover: #dcd9d1;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 50px -20px rgba(0, 0, 0, 0.6);
  --pip-shadow: rgba(0, 0, 0, 0.6);
  --pip-glow: rgba(255, 77, 0, 0.13); --pip-glow-mid: rgba(255, 77, 0, 0.05);
  --grain: 0.036;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151412;
  --ink: #f2f0ea;
  --ink-2: #cfcdc5;
  --dim: #9a988f;
  --faint: #66645d;
  --ring: #4a4842;
  --rule: #2a2925;
  --card: #1c1b19;
  --panel: #26241f;
  --btn-hover: #dcd9d1;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 50px -20px rgba(0, 0, 0, 0.6);
  --pip-shadow: rgba(0, 0, 0, 0.6);
  --pip-glow: rgba(255, 77, 0, 0.13); --pip-glow-mid: rgba(255, 77, 0, 0.05);
  --grain: 0.036;
}
:root[data-theme="light"] { color-scheme: light; }
html.theme-switch, html.theme-switch *, html.theme-switch *::before, html.theme-switch *::after {
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease) !important;
}

*, *::before, *::after { box-sizing: border-box; }
/* Lenis smooth scrolling (rules from lenis@1.3.26/dist/lenis.css) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img, svg { display: block; }
::selection { background: var(--or); color: #fff; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 4px; }

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 8px; text-decoration: none; font-size: 14px; font-weight: 500; }
.skip:focus { top: 12px; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--dim); font-weight: 400; }
.sc {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-weight: 500; line-height: 1;
}
.sc::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--or); flex: none; }
.or { color: var(--or); }
kbd {
  font-family: var(--mono); font-size: 10.5px; border: 1px solid currentColor; border-radius: 3px;
  padding: 0 4px; line-height: 15px; margin-right: 6px; display: inline-block;
}

/* ── header ─────────────────────────────────────────────────────────── */
.top {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--top-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--gut);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 16px; letter-spacing: -0.01em; text-decoration: none; }
.brand i { position: relative; width: 24px; height: 24px; flex: none; background: url('pip-mark-64.png') center / contain no-repeat; transition: transform 0.4s var(--ease), opacity 0.4s var(--ease); } /* the 3D Pip mark (docs/brand/mark, small-sizes variant) */
.nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; }
.nav a:not(.btn) { text-decoration: none; color: var(--dim); transition: color 0.18s; }
.nav a:not(.btn):hover { color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 20px; border-radius: 10px;
  background: var(--ink); color: var(--bg); font-size: 14.5px; font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s, transform 0.18s;
}
.btn i { width: 6px; height: 6px; border-radius: 50%; background: var(--or); flex: none; }
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ring); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.sm { height: 36px; padding: 0 14px; font-size: 13.5px; border-radius: 9px; }

/* light / dark toggle: a half-filled disc that turns over */
.theme {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; margin: 0 -6px 0 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--dim); cursor: pointer;
  transition: color 0.18s, background-color 0.18s;
}
.theme:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.theme i {
  width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  transition: transform 0.5s var(--ease);
}
[data-theme="dark"] .theme i { transform: rotate(180deg); }

/* ── the dot, the panel, the stream (shared by the story and the static frames) ── */
.panel {
  background: var(--panel); color: var(--p-ink); border-radius: 56px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55);
  text-align: center;
}
.pbody { padding: 34px 44px 0; }
.mark { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--or); margin: 0 auto 18px; }
.pline {
  min-height: 36px; font-size: 30px; line-height: 36px; font-weight: 500; letter-spacing: -0.03em;
  white-space: pre; color: var(--p-ink);
}
.pline .hit { color: var(--or); }
.pline .ph { color: var(--p-faint); }
.caret {
  display: inline-block; width: 2px; height: 30px; margin: 0 1px; vertical-align: -5px;
  background: var(--or); border-radius: 1px; animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.und {
  margin-top: 18px; font-size: 13px; color: var(--p-dim); min-height: 18px; line-height: 18px;
  display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;
}
.und::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--or); opacity: 0.8; }
.und b { color: var(--p-ink); font-weight: 500; }
.hints { margin-top: 26px; font-size: 11.5px; color: var(--p-dim); display: flex; justify-content: center; gap: 18px; }
.hints kbd { border-color: var(--p-rule); color: var(--p-dim); }

.ring {
  display: block; position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--ring);
}
.ring .f { position: absolute; inset: -1.5px; border-radius: 50%; background: var(--or); transform: scale(0); }
.ring svg {
  position: absolute; inset: -1.5px; width: calc(100% + 3px); height: calc(100% + 3px);
  fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 14; stroke-dashoffset: 14;
}
.ring.on { border-color: var(--or); }
.ring.on .f { transform: none; }
.ring.on svg { stroke-dashoffset: 0; }

.shead { display: flex; justify-content: space-between; align-items: center; height: 24px; margin-bottom: 32px; }
.shead .sc { color: var(--ink); }
.ln { display: grid; grid-template-columns: 36px minmax(0, 1fr); }
.ln .k { display: flex; align-items: flex-start; }
.ln .t { font-weight: 500; letter-spacing: -0.03em; line-height: 1.12; color: var(--ink); }
.tt {
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat;
  background-size: 0% 2px; background-position: 0 58%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ln .p { font-weight: 400; color: var(--dim); letter-spacing: -0.01em; margin-left: 0.35em; font-size: 0.9em; }
.ln.h .t { font-size: 42px; padding-bottom: 34px; }
.ln.h .k { padding-top: 10px; }
.ln.h .ring { width: 28px; height: 28px; }
.ln.h .ring svg { stroke-width: 1.6; }
.ln.m .t { font-size: 26px; padding-bottom: 24px; }
.ln.m .k { padding-top: 6px; }
.ln.s .t { font-size: 20px; color: var(--ink-2); letter-spacing: -0.01em; padding-bottom: 18px; }
.ln.s .k { padding-top: 3px; }
.ln.s .ring, .ln.d .ring { width: 16px; height: 16px; }
.ln.d .t { font-size: 20px; color: var(--faint); letter-spacing: -0.01em; padding-bottom: 18px; }
.ln.d .tt { background-size: 100% 1.5px; }
.ln.d .ring { border-color: var(--faint); }
.ln.d .ring .f { background: var(--faint); transform: none; }
.ln.d .ring svg { stroke-dashoffset: 0; stroke: var(--bg); }
.ln.x .tt { background-size: 100% 2px; }

.cf { position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--or); pointer-events: none; }
.cf:nth-child(5n + 3) { background: #ff8a5c; }
.cf:nth-child(5n + 4) { background: var(--ink); }
.cf:nth-child(5n) { background: var(--ring); }

/* ── the story: one sticky stage, four scrubbed beats (>= 720px, motion allowed) ── */
.story { display: none; position: relative; }
.frames { display: block; }
@media (min-width: 720px) and (prefers-reduced-motion: no-preference) {
  html.js .story { display: block; }
  html.js .frames { display: none; }
}
.beat { height: 100vh; pointer-events: none; }
.beat[data-beat='notch'] { height: 90vh; }
.beat[data-beat='type'] { height: 100vh; }
.beat[data-beat='land'] { height: 150vh; }
.beat[data-beat='done'] { height: 110vh; }

.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; container-type: inline-size; }
/* The animated stage is a picture: a stray drag or double-click must not paint the orange selection over it. */
.stage .pip, .stage .vis, .stage .pdot, .stage .fly, .stage .drip { -webkit-user-select: none; user-select: none; }
.hero-copy {
  position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(32px, 6vh, 64px);
  display: flex; justify-content: space-between; align-items: center; gap: 40px;
}
.hero-h {
  margin: 0; font-weight: 500; letter-spacing: -0.045em; line-height: 0.94;
  font-size: clamp(52px, 8vw, 132px);
}
.hero-side { display: grid; gap: 14px; justify-items: end; text-align: right; flex: none; }
.hero-side p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--dim); max-width: 26ch; }
/* with the waitlist there, the side is one column the form's width: the lede, the row and the small print share its
   left edge, 24 px from the lede to the row and 12 px to the small print */
.hero-side:has(> .wl-sm:not([hidden])) { width: min(400px, 100%); justify-items: stretch; text-align: left; gap: 24px; }
.hero-side:has(> .wl-sm:not([hidden])) p { max-width: none; }
.hero-side:has(> .wl-sm:not([hidden])) .wl-sm { margin-top: 0; }
/* the way to get Pip (launch): Apple's App Store badge, the Mac download, and where Windows stands */
.get { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 12px; }
.get-ios { display: inline-flex; flex: none; line-height: 0; border-radius: 8px; }
.get-ios img { display: block; width: 120px; height: 40px; }
.get-win { display: inline-flex; flex: none; line-height: 0; border-radius: 8px; }
.get-win img { display: block; width: 140px; height: 42px; }
.get .btn { height: 40px; padding: 0 16px; font-size: 14px; }
.get-note { flex-basis: 100%; margin: 2px 0 0; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--dim); }
.get-br { display: none; }
/* the note is a <p> too: it takes its own line under the badges, not the lede's 26ch column beside them */
.hero-side .get-note { max-width: none; }
/* In the story's hero the side is one left-aligned block at the right: its width is the badges' row (three badges,
   equal gaps); the lede and the note fill that width and share its left edge (width 0 + min-width 100% keeps them
   from widening it). */
#hero-copy .hero-side { justify-items: stretch; text-align: left; gap: 20px; }
#hero-copy .hero-side > p { max-width: none; width: 0; min-width: 100%; }
#hero-copy .get { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; align-items: center; gap: 12px; }
#hero-copy .get-note { grid-column: 1 / -1; width: 0; min-width: 100%; margin: 0; }
#hero-copy .get-note span { display: none; } /* two clean lines: the Mac, then Windows */
#hero-copy .get-br { display: inline; }
/* on a narrow window (721 to 1000 px) the badges take two rows, so the headline keeps its three lines */
@media (max-width: 1000px) { #hero-copy .get { grid-template-columns: repeat(2, auto); } }
.hero-side:has(> .wl-sm:not([hidden])) .get { justify-content: flex-start; }
@media (max-width: 720px) { .get-note span { display: none; } .get-br { display: inline; } }
/* ── Pip (pip.js): in the story the hero's dot is Pip. He sits where the dot sits (his ball's bottom on the dot's
   bottom), breathing, and shrinks into the dot as the first beat starts; meanwhile the flat dot and its ripples wait
   under him (html.pip-dot). The box is the strips' crop: 1.24 ball diameters wide, 2.09 high, the floor at 98.8 %. ── */
.pdot-pip { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; transform-origin: 0 0; will-change: transform, opacity; }
.pdot-pip canvas { display: block; width: 100%; height: 100%; }
.pdot-pip-sh { position: absolute; left: 50%; top: 98.8%; width: 70%; height: 8%; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--pip-shadow), transparent); will-change: opacity; }
html.pip-dot .stage .pdot, html.pip-dot .stage .pip-halo { opacity: 0 !important; }
/* a soft warm light off him, centred on his ball (pip.js sizes it: 1.6 of his diameters out); it shrinks with him */
.pdot-pip-glow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, var(--pip-glow), var(--pip-glow-mid) 45%, transparent); will-change: opacity; }
/* a fine, static film grain on the page's background, fixed to the window (it never scrolls or repaints): body is
   its own stacking context, so the grain sits over body's colour and under everything on the page */
body { isolation: isolate; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url('pip/grain.png') 0 0 / 160px 160px; opacity: var(--grain);
}
.f-hero { position: relative; isolation: isolate; overflow-x: clip; }
/* In the "keep" beat the notch's resting dot at the top is a small Pip (pip.js moves him with #pdot; the flat dot
   hides while he is there). The flying mark stays the plain dot. */
.rest-pip { position: absolute; left: 0; top: 0; z-index: 4; width: 28px; height: 28px; margin: -14px 0 0 -14px; opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity; }
.rest-pip i { display: block; width: 100%; height: 100%; border-radius: 50%; background: url('pip/face-sm.webp') 50% 50% / 100% 100% no-repeat; animation: rest-pip-breathe 2.6s ease-in-out infinite; }
@keyframes rest-pip-breathe { 50% { transform: scale(1.045); } }
html.pip-rest .stage .pdot { opacity: 0 !important; }
/* Back at the hero (main.js sets at-hero from the scroll itself, not from the scrubbed timelines), the hero's initial
   state is guaranteed: everything on the stage that is not the hero's own (its copy, the dot and its halo, the drip,
   Pip) is hidden: the notch, the shock, the dotted path, the flying mark, the stream, the confetti, the captions and the
   keep scene's small Pip, whatever value a timeline left behind (beats rewinding in another order, a refresh on a theme
   change, or a tab whose frames stopped mid-scrub). */
html.at-hero .stage > :not(#hero-copy):not(#pip-halo):not(#pdot):not(#drip):not(.pdot-pip) { visibility: hidden !important; }
/* The header's small Pip: the static mark at rest; while he hops, the hop clip over it (same ball, same place). */
.brand i .pipc-sm { display: block; opacity: 0; position: absolute; left: -0.8px; bottom: 1.2px; width: 25.6px; height: 43.1px; pointer-events: none; }
.brand i.pipc-play { background-image: none; }
.brand i.pipc-play .pipc-sm { opacity: 1; }

/* At rest the dot breathes, and a line of dots drips from it: the same dots as the flight path, saying "scroll". */
html.at-hero .pdot { animation: pdot-breathe 2.6s ease-in-out infinite; }
@keyframes pdot-breathe {
  0%, 100% { box-shadow: 0 2px 10px 0 rgba(255, 77, 0, 0.35), 0 0 0 0 rgba(255, 77, 0, 0.18); }
  50% { box-shadow: 0 2px 14px 0 rgba(255, 77, 0, 0.5), 0 0 0 9px rgba(255, 77, 0, 0); }
}
.drip {
  position: absolute; left: 50%; top: 0; z-index: 2; display: grid; justify-items: center; gap: 12px;
  /* 22 px below the dot's spot: clear of Pip's shadow, and the same with or without him, so nothing moves when he appears */
  transform: translate(-50%, calc(var(--drip-y, 40vh) + 22px)); opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none;
}
html.at-hero .drip { opacity: 1; transition-delay: 0.6s; }
.drip i {
  display: block; width: 6px; height: var(--drip-h, 72px);
  background: radial-gradient(circle, var(--or) 1.1px, transparent 1.7px) 50% 0 / 6px 9px repeat-y;
  -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent);
  animation: drip 1.1s linear infinite;
}
@keyframes drip { to { background-position: 50% 9px; } }
.drip .mono { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

.pip {
  /* the dark notch panel; it grows out of the dot and folds back into it */
  position: absolute; left: 50%; top: 0; z-index: 3;
  width: 18px; height: 18px; border-radius: 9px; background: var(--panel); overflow: hidden; text-align: center;
  transform: translate(-50%, calc(34vh - 9px)); opacity: 0;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55);
}
.pip .mark { visibility: hidden; } /* the travelling .pdot stands in for the mark */
.pdot {
  /* the dot itself: never changes colour, only size and place */
  position: absolute; left: 0; top: 0; z-index: 4; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: var(--or); pointer-events: none;
  transform: translate(50vw, 34vh);
  transform: translate(50cqw, 34vh); /* the stage's centre (main.js: half its client width), scrollbar or not */
  box-shadow: 0 2px 10px 0 rgba(255, 77, 0, 0.35);
}
.shock {
  position: absolute; left: 0; top: 0; z-index: 2; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--or); opacity: 0; pointer-events: none;
}
.flight {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible;
}
#flight-dots { fill: none; stroke: var(--or); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 0.1 8; }
#flight-reveal { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; }
.pip-halo {
  position: absolute; left: 50%; top: 0; z-index: 2; width: 18px; height: 18px; margin-left: -9px;
  border-radius: 50%; transform: translateY(calc(34vh - 9px)); pointer-events: none;
}
.pip-halo::before, .pip-halo::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--or); opacity: 0;
}
html.at-hero .pip-halo::before { animation: ripple 2.8s var(--ease) 0.6s infinite; }
html.at-hero .pip-halo::after { animation: ripple 2.8s var(--ease) 2s infinite; }
@keyframes ripple { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(4.2); opacity: 0; } }
.pip .pbody {
  position: absolute; left: 50%; top: 0; width: var(--pw, 680px); height: 196px; margin-left: calc(var(--pw, 680px) / -2);
  opacity: 0;
}
.pip .pline { overflow: hidden; }
.fly { position: absolute; left: 0; top: 0; z-index: 4; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--or); opacity: 0; pointer-events: none; }

.vis { position: absolute; top: 124px; left: 50%; width: min(760px, calc(100% - 2 * var(--gut))); transform: translateX(-50%); bottom: 180px; }
.story .stream { position: absolute; inset: 0; }
.story .shead { opacity: 0; }
.story .ln { position: absolute; left: 0; right: 0; top: 0; opacity: 0; }
.story .ln .t { white-space: nowrap; }
.confetti { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 5; }
.confetti .cf { opacity: 0; }

.caps { position: absolute; left: var(--gut); right: var(--gut); bottom: clamp(28px, 5vh, 56px); height: 150px; pointer-events: none; z-index: 6; }
.cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; opacity: 0; }
.cap .sc { margin-bottom: 16px; }
.cap p { margin: 0; font-size: clamp(24px, 2.5vw, 36px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 500; max-width: 26ch; }
.cap .n { flex: none; }

/* ── static frames (under 720px, reduced motion, or no script) ─────────── */
.frames { padding-top: var(--top-h); }
.f-hero { min-height: min(92vh, 860px); display: flex; flex-direction: column; justify-content: space-between; padding: 12vh var(--gut) 48px; gap: 48px; }
.f-hero .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--or); margin: 0 auto; box-shadow: 0 2px 10px rgba(255, 77, 0, 0.35); }
/* the static hero's dot is Pip too, as a still with a 140 px ball (he breathes only where motion is allowed) */
.f-hero .dot { width: 174px; height: 293px; border-radius: 0; background: url('pip/still.webp') 50% 100% / contain no-repeat; box-shadow: none; transform-origin: 50% 98.8%; }
.f-hero .dot { position: relative; }
.f-hero .dot::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 74.8%; width: 448px; height: 448px; margin: -224px 0 0 -224px; border-radius: 50%; background: radial-gradient(closest-side, var(--pip-glow), var(--pip-glow-mid) 45%, transparent); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .f-hero .dot { animation: pip-breathe 2.6s ease-in-out infinite; } }
@keyframes pip-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.01, 0.988); } }
.f-hero .hero-h { font-size: clamp(48px, 12.5vw, 148px); }
.f-hero .hero-side { justify-items: start; text-align: left; margin-top: 24px; padding: 0; }
.f-hero .get { justify-content: flex-start; } /* the badges on the lede's left edge, as the text above them */
.frame { padding: 72px var(--gut); max-width: 760px; margin: 0 auto; }
.frame .fcap { margin-bottom: 36px; }
.frame .fcap .sc { margin-bottom: 16px; }
.frame .fcap p { margin: 0; font-size: 24px; line-height: 1.22; letter-spacing: -0.02em; font-weight: 500; max-width: 30ch; }
.frame .panel { padding: 30px 22px 26px; border-radius: 44px; }
.frame .pbody { padding: 0; }
.frame .pline { white-space: normal; font-size: clamp(22px, 6vw, 30px); line-height: 1.2; }
.frame .stream { position: relative; }
.frame .ring-wrap { position: relative; }
.frame .stream { margin-top: 110px; }
.f-flight { position: absolute; left: 0; top: -100px; width: 100%; height: 166px; overflow: visible; pointer-events: none; }
.f-flight path { fill: none; stroke: var(--or); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 0.1 8; vector-effect: non-scaling-stroke; }
.frame .confetti-static { position: absolute; left: 14px; top: 14px; width: 0; height: 0; }
.frame .confetti-static .cf { opacity: 1; }
@media (max-width: 480px) {
  .frame .ln.h .t { font-size: 36px; }
  .frame .ln.h .k { padding-top: 7px; }
  .frame .ln.h .ring { width: 26px; height: 26px; }
  .frame .ln.m .t { font-size: 23px; }
  .frame .ln.m .k { padding-top: 5px; }
  .frame .ln.s .t, .frame .ln.d .t { font-size: 18px; padding-bottom: 16px; }
  .frame .hints { flex-wrap: wrap; gap: 8px 18px; }
}

/* ── quiet sections ──────────────────────────────────────────────────── */
.wrapx { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.sec { padding: clamp(96px, 14vw, 180px) 0; }
.sec + .sec { padding-top: 0; }
.sec-head { display: grid; gap: 28px; max-width: 1100px; margin-bottom: clamp(56px, 7vw, 96px); }
.sec-head h2 {
  margin: 0; font-weight: 500; letter-spacing: -0.04em; line-height: 0.98;
  font-size: clamp(44px, 7vw, 104px); text-wrap: balance;
}
.sec-head p { margin: 0; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--dim); max-width: 46ch; }
.sec-head p b { color: var(--ink); font-weight: 500; }

/* say it */
.ex { list-style: none; margin: 0; padding: 0; display: grid; }
.ex li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px 40px;
  padding: 22px 0; border-top: 1px solid var(--rule);
}
.ex li:last-child { border-bottom: 1px solid var(--rule); }
.ex .say { font-size: clamp(22px, 3vw, 38px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.ex .say .hit { color: var(--or); transition: color 0.6s var(--ease); }
.ex.wait li:not(.lit) .say .hit { color: var(--ink); }
.ex .got { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.5px; color: var(--dim); letter-spacing: 0.02em; white-space: nowrap; }
.ex .got::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--or); }
.ex-note { margin: 28px 0 0; font-size: 15px; color: var(--dim); }

/* notes */
.notes-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.card { background: var(--card); border-radius: 16px; padding: 28px; box-shadow: var(--shadow-card); }
.card .cap-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 22px; gap: 8px 12px; }
.card .cap-row .sc { white-space: nowrap; }
.tree { list-style: none; margin: 0; padding: 0; font-size: 15.5px; }
.tree li { display: grid; grid-template-columns: 16px 1fr auto; column-gap: 12px; align-items: center; height: 38px; }
.tree li.in1 { padding-left: 24px; }
.tree li.in2 { padding-left: 48px; }
.tree svg { width: 16px; height: 16px; fill: none; stroke: var(--dim); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.tree .on { color: var(--ink); }
.tree .on svg { stroke: var(--or); }
.tree .r { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.md { margin: 0; font-family: var(--mono); font-size: 14px; line-height: 1.75; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.md .mk { color: var(--faint); }
.md .h { color: var(--ink); font-weight: 500; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 72px; }
.facts h3 { margin: 0 0 10px; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.facts p { margin: 0; color: var(--dim); font-size: 16px; line-height: 1.55; }

/* one dot */
.dot-demo { display: grid; gap: 48px; justify-items: center; }
.dot-demo .panel { width: min(680px, 100%); padding: 34px 44px 30px; }
.dot-demo .pbody { padding: 0; }
.dot-demo .pline { white-space: normal; }
.states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; width: 100%; max-width: 980px; margin-top: 24px; }
.state { display: grid; gap: 14px; justify-items: start; align-content: start; }
.state .vis-dot { height: 40px; display: flex; align-items: center; }
.state h3 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.state p { margin: 0; color: var(--dim); font-size: 16px; line-height: 1.55; max-width: 30ch; }
.d-rest { width: 10px; height: 10px; border-radius: 50%; background: var(--or); box-shadow: 0 2px 10px rgba(255, 77, 0, 0.35); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 2px 10px rgba(255, 77, 0, 0.35); } 50% { box-shadow: 0 0 0 7px rgba(255, 77, 0, 0.16), 0 2px 10px rgba(255, 77, 0, 0.35); } }
.d-held { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--or) inset, 0 2px 10px rgba(255, 77, 0, 0.25); }
.d-open { width: 64px; height: 20px; border-radius: 10px; background: var(--panel); position: relative; }
.d-open::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: var(--or); }
.keys { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; font-size: 14px; color: var(--dim); }
.keys kbd { color: var(--ink); opacity: 0.8; }

/* pricing */
.sec#pricing .sec-head { margin-bottom: clamp(40px, 5vw, 64px); }
/* Free and Pro, compared. The label column is wide; Free and Pro are fixed columns, Pro on a quiet raised panel (the
   card tokens, radius 20) that runs the whole height. Rows are 64 tall with one hairline; cells are rings in the app's
   style: the rest ring for no, an ink ring with a tick for Free, a lit orange ring with a white tick for Pro. The heads
   stick under the top bar from 1080px. scenes.js plays the entrance (rows rise, Pro's rings light and their ticks draw,
   the foot settles last); without it, or with reduced motion, this is the still. */
.cmp { --free-w: 200px; --pro-w: 236px; position: relative; }
.cmp::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: var(--pro-w); border-radius: 20px;
  background: var(--card); box-shadow: var(--shadow-card); pointer-events: none;
}
.ct { position: relative; width: 100%; border-collapse: separate; border-spacing: 0; }
.ct th, .ct td { padding: 0; text-align: left; font-weight: 400; }
.ct .c, .ct thead .c-free, .ct thead .c-pro { text-align: center; }
.ct .c-free { width: var(--free-w); }
.ct .c-pro { width: var(--pro-w); }
.ct .mh { display: none; }
/* the heads */
.ct thead .h { padding: 36px 0 26px; vertical-align: bottom; box-shadow: 0 1px 0 var(--rule); }
.ct thead .c-pro { background: var(--card); border-radius: 20px 20px 0 0; }
.ct .hm { display: block; width: 44px; height: 44px; margin: 0 auto 14px; position: relative; }
.ct .hm-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--or); }
.ct .hm-pip { background: url('pip/content-144.webp') 50% 50% / 100% 100% no-repeat; border-radius: 50%; }
.ct .hn { display: block; font-size: 24px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); }
.ct .hp { display: block; margin-top: 8px; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: var(--dim); }
.ct .hp-or { margin-top: 6px; color: var(--ink-2); }
.ct .hp-or::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--or); vertical-align: middle; }
/* the groups and the rows */
.ct .g th { padding: 44px 0 6px; }
.ct tbody:first-of-type .g th { padding-top: 30px; }
.ct .r th, .ct .r td { height: 64px; vertical-align: middle; border-bottom: 1px solid var(--rule); }
.ct .r th { padding-right: 32px; }
.ct .lbl { display: block; font-size: 18px; line-height: 1.3; color: var(--ink-2); transition: color 0.15s var(--ease); }
.ct .sub { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct .rg { display: inline-block; width: 22px; height: 22px; vertical-align: middle; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ct .rg-no circle { stroke: var(--ring); }
.ct .rg-free circle, .ct .rg-free path { stroke: var(--ink); }
.ct .rg-free path { stroke-width: 1.7; }
.ct .rg-pro .rg-disc { fill: var(--or); stroke: none; transform-origin: 12px 12px; transform-box: view-box; }
.ct .rg-pro path { stroke: #fff; stroke-width: 1.9; }
.ct .cv { font-size: 14.5px; line-height: 1.3; color: var(--ink-2); }
.ct .c-pro .cv { color: var(--ink); font-weight: 500; }
@media (hover: hover) and (min-width: 720px) {
  .ct .r:hover .lbl { color: var(--ink); }
}
/* the foot: what each column opens with, at launch (nothing is on sale yet, so these are not links) */
.ct .f td { padding: 28px 0 30px; vertical-align: top; }
.ct .cta { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 20px; font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; }
.ct a.cta:hover { filter: brightness(1.06); }
.ct .f .get-ios, .ct .f .get-win { display: flex; justify-content: center; margin: 0 auto 10px; width: max-content; }
.ct .cta-q { box-shadow: inset 0 0 0 1px var(--ring); color: var(--ink); }
.ct .cta-or { background: var(--or); color: #fff; box-shadow: 0 10px 22px -12px rgba(255, 77, 0, 0.6); }
.ct .soon { display: block; margin-top: 9px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); }
.ct .soon-l { display: block; margin: 9px auto 0; max-width: 24ch; font-size: 12.5px; line-height: 1.45; color: var(--dim); }
@media (min-width: 1080px) {
  /* the heads stick under the top bar; they take a ground only while stuck (scenes.js adds .is-stuck), so at rest the
     page's grain runs under them like everywhere else */
  .ct thead .h { position: sticky; top: var(--top-h); z-index: 2; }
  .ct.is-stuck thead .h { background: var(--bg); }
  .ct.is-stuck thead .c-pro { background: var(--card); }
}
@media (max-width: 1079.98px) {
  .cmp { --free-w: 150px; --pro-w: 182px; }
  .ct .hp br { display: none; }
  .ct .cta { padding: 0 14px; font-size: 13px; }
}
@media (max-width: 719.98px) {
  /* each row: the label across, then Free and Pro side by side; the Pro panel runs down the right half */
  .cmp::before { width: 50%; border-radius: 18px; }
  .ct, .ct thead, .ct tbody, .ct tfoot { display: block; }
  .ct tr { display: grid; grid-template-columns: 1fr 1fr; }
  .ct thead .h-lbl { display: none; }
  .ct thead .h { padding: 26px 8px 20px; box-shadow: none; border-bottom: 1px solid var(--rule); }
  .ct thead .c-pro { border-radius: 18px 18px 0 0; }
  .ct .hm { width: 36px; height: 36px; margin-bottom: 10px; }
  .ct .hm-dot::before { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
  .ct .hn { font-size: 21px; }
  .ct .hp { font-size: 10.5px; }
  .ct .hp br { display: block; }
  .ct .c-pro .hp > span { display: block; }
  .ct .c-pro .hp .hs, .ct .c-pro .hp br { display: none; }
  .ct .hp-or::before { display: none; }
  .ct .hp-or > span:first-child::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--or); vertical-align: middle; }
  .ct .c-free, .ct .c-pro { width: auto; }
  .ct .g th { grid-column: 1 / -1; padding: 30px 14px 4px; }
  .ct tbody:first-of-type .g th { padding-top: 22px; }
  .ct .r { border-bottom: 1px solid var(--rule); padding: 14px 0 16px; }
  .ct .r th, .ct .r td { height: auto; border: 0; }
  .ct .r th { grid-column: 1 / -1; padding: 0 14px 12px; }
  .ct .lbl { font-size: 16.5px; }
  .ct .sub { white-space: normal; }
  .ct .r td { display: flex; justify-content: center; align-items: center; min-height: 24px; }
  .ct .cv { font-size: 13px; }
  .ct .f td:first-child { display: none; }
  .ct .f td { padding: 22px 6px 24px; }
  .ct .cta { height: 36px; padding: 0 12px; font-size: 12.5px; }
  .ct .f .c-pro .cta { white-space: normal; height: auto; min-height: 36px; padding: 8px 12px; line-height: 1.25; text-align: center; justify-content: center; }
}
.fine { margin: 28px 0 0; color: var(--dim); font-size: 15px; line-height: 1.6; max-width: 70ch; }

/* waitlist: "Tell me when it's ready" (waitlist.js shows it; hidden until an endpoint exists, except on localhost) */
.wl { display: grid; gap: 12px; }
.wl-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.wl-form input {
  height: 52px; min-width: 0; padding: 0 18px; border: 0; border-radius: 12px; background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--ring); color: var(--ink); font: 400 16px/1 var(--sans);
  transition: box-shadow 0.18s;
}
.wl-form input::placeholder { color: var(--faint); }
.wl-form .wl-hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* honeypot: people never see or reach it */
.wl-form input:hover { box-shadow: inset 0 0 0 1.5px var(--dim); }
.wl-form input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--or); }
.wl-form .btn { height: 52px; border-radius: 12px; }
.wl-form .btn:disabled { cursor: progress; opacity: 0.7; }
.wl-form[data-state="invalid"] input { box-shadow: inset 0 0 0 2px var(--or); }
.wl-msg { grid-column: 1 / -1; margin: 0; min-height: 1.5em; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); display: flex; align-items: baseline; gap: 10px; }
.wl-msg:empty { min-height: 0; }
.wl-form[data-state="done"] .wl-msg::before {
  content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--or); transform: translateY(-1px);
}
.wl-form[data-state="error"] .wl-msg, .wl-form[data-state="invalid"] .wl-msg { color: var(--ink); }
.wl-consent { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--dim); }
.wl-consent a { color: var(--ink-2); text-decoration-color: var(--or); text-underline-offset: 3px; }
.wl-lg { max-width: 620px; }
.wl-sm { width: min(400px, 100%); margin-top: 8px; text-align: left; }
.wl-form input, .wl-form .btn { box-sizing: border-box; margin: 0; }
.wl-sm .wl-form { align-items: stretch; }
.wl-sm .wl-form input, .wl-sm .wl-form .btn { height: 48px; border-radius: 12px; }
.wl-sm .wl-form input { font-size: 15px; padding: 0 14px; }
.wl-sm .wl-consent { font-size: 12.5px; text-wrap: pretty; }
.hero-side .wl-sm { justify-self: end; }
.f-hero .hero-side .wl-sm { justify-self: start; }
@media (max-width: 480px) { .wl-lg .wl-form, .wl-sm .wl-form { grid-template-columns: 1fr; } .wl-lg .wl-form .btn, .wl-sm .wl-form .btn { width: 100%; } }

/* faq */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 26px 0; font-size: clamp(20px, 2.4vw, 28px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.2;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ring); transition: background 0.2s, box-shadow 0.2s;
}
.faq details[open] summary::after { background: var(--or); box-shadow: inset 0 0 0 1.5px var(--or); }
.faq summary:hover::after { box-shadow: inset 0 0 0 1.5px var(--ink); }
.faq .a { padding: 0 0 30px; max-width: 62ch; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
.faq .a p { margin: 0 0 12px; }

/* footer */
.foot { padding: 96px 0 40px; }
.foot-big { font-size: clamp(56px, 13vw, 200px); font-weight: 500; letter-spacing: -0.05em; line-height: 0.9; margin: 0 0 56px; display: flex; align-items: baseline; gap: 0.02em; }
.foot-big i { display: inline-block; width: 0.13em; height: 0.13em; margin: 0 0.035em; border-radius: 50%; background: var(--or); }
.foot-row { display: flex; justify-content: space-between; align-items: center; gap: 20px 40px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 14px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.foot-links a { text-decoration: none; color: var(--dim); transition: color 0.18s; }
.foot-links a:hover { color: var(--ink); }
.foot-social { display: flex; align-items: center; gap: 6px; margin-left: -6px; }
.foot-social a { display: inline-flex; padding: 6px; margin: -6px 0; border-radius: 8px; color: var(--dim); transition: color 0.18s; }
.foot-social a:hover { color: var(--ink); }
.foot-social svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── documents (terms, privacy, refunds) ─────────────────────────────── */
.doc { max-width: 700px; margin: 0 auto; padding: calc(var(--top-h) + 72px) var(--gut) 120px; }
.doc .draft {
  display: flex; width: fit-content; align-items: center; gap: 10px; margin: 0 0 40px; padding: 10px 16px;
  border: 1.5px solid var(--or); border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1.3;
}
.doc .draft::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--or); flex: none; }
.doc h1 { font-size: clamp(44px, 7vw, 76px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; margin: 18px 0 18px; }
.doc .lede { font-size: 20px; line-height: 1.5; color: var(--ink-2); margin: 0 0 12px; }
.doc .meta { margin: 0 0 56px; font-size: 12px; color: var(--dim); }
.doc h2 { font-size: 24px; font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; margin: 56px 0 14px; }
.doc h3 { font-size: 18px; font-weight: 500; margin: 32px 0 8px; }
.doc p, .doc li { font-size: 17px; line-height: 1.68; color: var(--ink-2); }
.doc p { margin: 0 0 16px; }
.doc ul { margin: 0 0 16px; padding-left: 20px; }
.doc li { margin-bottom: 6px; }
.doc li::marker { color: var(--or); }
.doc b, .doc strong { color: var(--ink); font-weight: 500; }
.doc a { text-decoration-color: var(--or); text-underline-offset: 3px; }
.doc .box { background: var(--card); border-radius: 14px; padding: 22px 24px; margin: 0 0 16px; }
.doc .box p:last-child { margin: 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 15.5px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--rule); color: var(--ink-2); line-height: 1.5; }
.doc th { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
.nav a[aria-current] { color: var(--ink); }
.doc .todo { background: var(--rule); color: var(--ink); border-radius: 4px; padding: 0 5px; font-family: var(--mono); font-size: 0.82em; }

/* ── blog (/blog/): the index and the posts, on the same .doc column ─── */
.nav a[aria-current="page"] { color: var(--ink); }
.doc .code { background: var(--rule); color: var(--ink); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: 0.84em; white-space: nowrap; }
.doc .post-list { list-style: none; margin: 0; padding: 0; }
.doc .post-item { margin: 0 0 48px; }
.doc .post-item:last-child { margin-bottom: 0; }
.doc .post-item .mono { margin: 0 0 10px; font-size: 12px; line-height: 1.4; color: var(--dim); }
.doc .post-item h2, .doc .post-item h3 { font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; margin: 0 0 10px; }
.doc .post-item h2 { font-size: clamp(24px, 3.6vw, 32px); }
.doc .post-item h3 { font-size: 22px; letter-spacing: -0.025em; }
.doc .post-item h2 a, .doc .post-item h3 a { color: var(--ink); text-decoration: none; }
.doc .post-item h2 a:hover, .doc .post-item h3 a:hover { text-decoration: underline; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.doc .post-item p:last-child { margin: 0; }
.doc.blog .meta a { color: var(--dim); }
.doc.blog .meta a:hover { color: var(--ink); }
.doc .back { text-decoration: none; transition: color 0.18s; }
.doc .back:hover { color: var(--ink); }
.doc.post h1 { font-size: clamp(40px, 6.4vw, 64px); letter-spacing: -0.035em; line-height: 1.04; }
.doc.post .meta { margin-bottom: 48px; }
.doc .end { margin: 64px 0 80px; }
.doc .end .btn { margin-top: 4px; }
.doc .more > .sc { display: flex; margin-bottom: 28px; }
/* /signed-in: a sign-in link opened on the website (auth-landing.js); the spent-link text when data-auth="expired" */
.doc.signin .when-expired { display: none; }
:root[data-auth="expired"] .doc.signin .when-expired { display: block; }
:root[data-auth="expired"] .doc.signin .when-signin { display: none; }
.doc.signin .btn { margin-top: 20px; }
/* the join page (pipdot.app/join/<token>): the Pip mark, one line, one orange button, a quiet way in the browser */
.doc.join { max-width: 620px; }
.join-mark { display: block; width: 64px; height: 64px; margin-bottom: 28px; background: url('/pip/mark-160.webp') 50% 50% / 100% 100% no-repeat; }
.doc.join h1 { font-size: clamp(36px, 6vw, 56px); letter-spacing: -0.035em; line-height: 1.05; }
.btn.btn-or { background: var(--or); color: #fff; height: 50px; padding: 0 24px; border-radius: 12px; font-size: 15.5px; margin-top: 12px; }
.btn.btn-or:hover { background: var(--or); box-shadow: 0 10px 24px -12px rgba(255, 77, 0, 0.7); }
.doc.join .join-alt { margin: 18px 0 0; font-size: 16px; }
.doc.join .join-alt a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ring); text-underline-offset: 4px; }
.doc.join .join-get { margin: 40px 0 0; font-size: 15px; color: var(--dim); }
.doc.join .join-get a { color: var(--ink); }
.doc.join .join-fine { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--dim); max-width: 46ch; }
.doc.join .when-bad { display: none; }
:root[data-join="bad"] .doc.join .when-bad { display: block; }
:root[data-join="bad"] .doc.join .when-ok { display: none; }
.doc .fig { margin: 36px 0 44px; }
.doc .fig img { display: block; width: auto; max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px var(--rule); background: var(--card); }
.doc .fig figcaption { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.5; color: var(--dim); }
.doc .fig .only-dark { display: none; }
:root[data-theme="dark"] .doc .fig .only-dark { display: block; }
:root[data-theme="dark"] .doc .fig .only-light { display: none; }
.doc table.status { margin: 28px 0 12px; }
.doc table.status td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.doc .table-note { font-size: 14px; color: var(--dim); margin: 0 0 40px; }
@media (max-width: 600px) {
  .doc table.status td:nth-child(2)::before, .doc table.status td:nth-child(3)::before { content: attr(data-label); }
}

@media (max-width: 600px) {
  .doc thead { display: none; }
  .doc table, .doc tbody, .doc tr, .doc td { display: block; }
  .doc tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .doc td { border: 0; padding: 3px 0; }
  .doc td:nth-child(2)::before, .doc td:nth-child(3)::before {
    display: block; margin-top: 8px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); font-weight: 500;
  }
  .doc td:nth-child(2)::before { content: "Why"; }
  .doc td:nth-child(3)::before { content: "Kept for"; }
}

/* ── small screens ───────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .notes-grid { grid-template-columns: 1fr; }
  .facts, .states { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .nav a:not(.btn) { display: none; }
  .ex li { grid-template-columns: 1fr; padding: 20px 0; }
  .dot-demo .panel { padding: 28px 20px 24px; }
  .dot-demo .pline { font-size: clamp(22px, 6vw, 30px); line-height: 1.2; }
  .card { padding: 22px; }
  .md { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}