/* Vanish landing · black direction
   Same tokens as dashboard F (Pure White): white page, Apple neutrals,
   one black tint, white overlays on footage. All type comes from --font-ui
   and --font-mono, so the family swaps in one line. The boldness lives in
   the hero window; every other section is quiet. */

:root {
  --accent: #1d1d1f;
  --accent-hover: #3a3a3c;
  --on-accent: #ffffff;
  --focus: rgba(29, 29, 31, 0.62);

  --overlay: #ffffff;
  --overlay-ring: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.3);
  --overlay-chip: rgba(255, 255, 255, 0.9);

  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --separator: rgba(0, 0, 0, 0.08);
  --separator-2: rgba(0, 0, 0, 0.14);
  --fill: rgba(120, 120, 128, 0.12);
  --label: #1d1d1f;
  --label-2: rgba(60, 60, 67, 0.78);   /* ≈ #5d5d63 on white, 6.3:1 */
  --label-3: rgba(60, 60, 67, 0.3);
  --ok: #248a3d;

  --font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display: clamp(2.375rem, 1.4rem + 2.8vw, 3.75rem);
  --fs-h2: clamp(2rem, 1.35rem + 2vw, 3.25rem);
  --fs-lede: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --fs-body: 0.9375rem;
  --fs-small: 0.8125rem;
  --fs-meta: 0.6875rem;

  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;
  --r-4: 20px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1360px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06), 0 14px 36px -8px rgba(0, 0, 0, 0.2);
  --knob: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.12);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 68px; }
/* Phones: the page only ever scrolls up and down. html clips sideways overflow
   (clip, not hidden, so the sticky nav and the laptop pin keep working), and the
   page doesn't rubber-band, so the sticky nav never drags away from the top.
   Older Safari without overflow: clip falls back to hidden on html only (hidden
   on body would make body the scroller and break sticky). */
html { overflow-x: clip; overscroll-behavior-y: none; }
@supports not (overflow-x: clip) { html { overflow-x: hidden; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img, canvas, video { display: block; max-width: 100%; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.src { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.skip { position: absolute; left: 12px; top: -48px; z-index: 50; padding: 8px 12px; background: var(--accent); color: var(--on-accent); border-radius: var(--r-1); text-decoration: none; font-size: var(--fs-small); }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- nav ------------------------------------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.brand svg { width: 20px; height: 20px; fill: none; stroke: currentColor; }
.b-dash { stroke-dasharray: 2 1.6; stroke-width: 1.2; }
.brand svg circle, .app-tile svg circle { fill: currentColor; stroke: none; }

/* Marquee bar (nav-lab V4). One sticky bar: flat at the top, translucent with a single hairline once scrolled.
   The current section sits inside the Vanish selection box, which follows the pointer and settles back.
   "Use Vanish" only appears once the hero's own button has left the screen; its space is always reserved. */
.nl-bar { position: sticky; top: 0; z-index: 20; height: 56px; background: rgba(255, 255, 255, 0); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); transition: background-color 240ms var(--ease); }
.nl-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--separator); opacity: 0; transition: opacity 240ms var(--ease); }
html.nl-scrolled .nl-bar { background: rgba(255, 255, 255, 0.78); }
html.nl-scrolled .nl-bar::after { opacity: 1; }
.nl-row { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.nl-row > .brand { height: 44px; justify-self: start; }
.nl-end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nl-links { position: relative; display: flex; align-items: center; }
.nl-links a { position: relative; z-index: 1; display: flex; align-items: center; height: 56px; padding: 0 13px; font-size: 13.5px; white-space: nowrap; text-decoration: none; color: var(--label-2); transition: color 160ms var(--ease); }
.nl-links a:hover, .nl-links a[aria-current] { color: var(--label); }
.nl-links a:focus-visible { outline-offset: -13px; }
.nl-links.is-hovering a[aria-current] { color: var(--label-2); }
.nl-links.is-hovering a.is-hot { color: var(--label); }
.nl-box { position: absolute; top: 15px; left: 0; height: 26px; width: var(--w, 0); transform: translateX(var(--x, 0)); pointer-events: none; border: 1px dashed rgba(29, 29, 31, 0.55); border-radius: 2px; opacity: 0; transition: transform 380ms var(--ease-out), width 380ms var(--ease-out), opacity 200ms var(--ease); }
.nl-box.is-set { opacity: 1; }
.nl-box i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--label); }
.nl-box i:nth-child(1) { left: -3px; top: -3px; } .nl-box i:nth-child(2) { right: -3px; top: -3px; }
.nl-box i:nth-child(3) { left: -3px; bottom: -3px; } .nl-box i:nth-child(4) { right: -3px; bottom: -3px; }
.nl-cta { display: inline-flex; align-items: center; height: 30px; padding: 0 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: opacity 220ms var(--ease), transform 220ms var(--ease), background-color 160ms var(--ease), visibility 0s linear 0s; }
.nl-cta:hover { background: var(--accent-hover); }
.nl-cta:focus-visible { outline-offset: 3px; border-radius: 999px; }
html:not(.nl-cta-on) .nl-cta { opacity: 0; transform: translateY(3px); visibility: hidden; pointer-events: none; transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 0s linear 180ms; }
.nl-burger, .nl-close { display: none; width: 44px; height: 44px; margin-right: -10px; align-items: center; justify-content: center; border-radius: 10px; }
.nl-close { display: inline-flex; }
.nl-burger svg, .nl-close svg { width: 20px; height: 20px; fill: none; stroke: var(--label); stroke-width: 1.6; stroke-linecap: round; }
.nl-burger:focus-visible, .nl-close:focus-visible { outline-offset: -2px; border-radius: 10px; }
@media (hover: hover) { .nl-burger:hover, .nl-close:hover { background: var(--fill); } }
@media (max-width: 859px) {
  .nl-links { display: none; }
  .nl-burger { display: inline-flex; }
  .nl-row { grid-template-columns: 1fr auto; }
}
/* Mobile: a full-screen numbered index; the current row wears the selection box */
html.nl-locked { overflow: hidden; }
.nl-sheet { margin: 0; padding: 0; border: 0; inset: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; background: transparent; color: var(--label); }
.nl-sheet::backdrop { background: rgba(0, 0, 0, 0); }
.nl-sheet-in { display: flex; flex-direction: column; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) max(20px, env(safe-area-inset-bottom)); background: #fff; opacity: 0; transform: translateY(-10px); transition: opacity 220ms var(--ease), transform 340ms var(--ease-out); }
.nl-sheet.is-open .nl-sheet-in { opacity: 1; transform: none; }
.nl-sheet-top { display: flex; align-items: center; justify-content: space-between; height: 56px; flex: none; }
.nl-sheet-top .brand { height: 44px; }
.nl-sheet nav { flex: 1; }
.nl-sheet ol { margin-top: 16px; }
.nl-sheet li a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; min-height: 64px; padding: 0 4px; text-decoration: none; font-size: 28px; letter-spacing: -0.035em; color: var(--label); }
.nl-sheet li a:focus-visible { outline-offset: -2px; }
.nl-sheet .n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; color: var(--label-2); }
.nl-sheet .t { justify-self: start; position: relative; }
.nl-sheet a[aria-current] .t { font-weight: 500; }
.nl-sheet a[aria-current] .t::before { content: ""; position: absolute; inset: -4px -10px; border: 1px dashed rgba(29, 29, 31, 0.55); border-radius: 2px; }
.nl-sheet a[aria-current] .t::after { content: ""; position: absolute; inset: -7.5px -13.5px; pointer-events: none;
  --d: radial-gradient(circle, #fff 1.8px, var(--label) 2.1px 3px, transparent 3.3px);
  background: var(--d) 0 0 / 7px 7px no-repeat, var(--d) 100% 0 / 7px 7px no-repeat, var(--d) 0 100% / 7px 7px no-repeat, var(--d) 100% 100% / 7px 7px no-repeat; }
.nl-sheet-cta { display: flex; align-items: center; justify-content: center; flex: none; height: 52px; margin-top: 20px; border-radius: 12px; background: var(--accent); color: var(--on-accent); text-decoration: none; font-size: 16px; font-weight: 500; }
.nl-sheet-cta:focus-visible { outline-offset: 3px; }
.nl-sheet-note { margin-top: 10px; text-align: center; font-size: var(--fs-small); color: var(--label-2); }
@media (prefers-reduced-motion: reduce) {
  .nl-bar, .nl-bar::after, .nl-box, .nl-cta, .nl-links a, .nl-sheet-in { transition: none !important; }
  .nl-sheet-in { transform: none; }
}

/* ---- buttons ----------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; background: var(--accent); color: var(--on-accent); border-radius: 8px; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background var(--ease) 160ms, transform var(--ease) 160ms; }
.btn:hover { background: var(--accent-hover); }
/* press (scale .97 + spring) lives in the .bx block at the end */
.btn-lg { height: 52px; padding: 0 28px; font-size: 16px; }


/* ---- hero ---------------------------------------------------------------- */
.hero { padding-bottom: clamp(56px, 8vw, 112px); }
.meta { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0 20px; font-size: var(--fs-meta); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label-2); }
.meta-r { display: flex; gap: 28px; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7.4fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.hero-copy { max-width: 460px; }
.app { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.app-tile { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--accent); color: #fff; }
.app-tile svg { width: 26px; height: 26px; fill: none; stroke: currentColor; }
.app-name { font-size: 17px; font-weight: 500; }
.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.045em; font-weight: 500; text-wrap: balance; }
.hero .display { max-width: 11.5em; }
.hero-act { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; }
.sub { display: grid; gap: 4px; }
.sub-1 { font-size: 15px; font-weight: 500; }
.sub-2 { font-size: var(--fs-small); color: var(--label-2); }

.hero-media { min-width: 0; }
.stage { position: relative; aspect-ratio: 1.33; width: 100%; border-radius: var(--r-4); overflow: hidden; background: #2a2622 url("assets/leather-blazer-poster.jpg") center / cover; isolation: isolate; user-select: none; -webkit-user-select: none; }
.cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.cv-after { clip-path: inset(0 100% 100% 0); transition: opacity 140ms linear; }
.stage.is-holding .cv-after { opacity: 0; }

/* the Vanish box, at hero scale */
.lens { position: absolute; left: 0; top: 0; width: 52%; height: 62%; border-radius: 12px; border: 1.5px solid var(--overlay); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 10px 40px -8px rgba(0, 0, 0, 0.35); cursor: grab; touch-action: none; will-change: transform; z-index: 2; }
.lens.is-dragging { cursor: grabbing; }
.dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--overlay); box-shadow: var(--overlay-ring); }
.d-nw { left: -5.75px; top: -5.75px; } .d-ne { right: -5.75px; top: -5.75px; }
.d-sw { left: -5.75px; bottom: -5.75px; } .d-se { right: -5.75px; bottom: -5.75px; }
.chip { position: absolute; left: 12px; top: 12px; height: 26px; padding: 0 11px; border-radius: 13px; background: var(--overlay-chip); color: #1d1d1f; font-size: 12px; font-weight: 500; letter-spacing: -0.003em; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); touch-action: none; -webkit-touch-callout: none; transition: background var(--ease) 140ms; white-space: nowrap; }
.stage.is-holding .chip { background: #1d1d1f; color: #fff; }
.move { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #1d1d1f; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); cursor: grab; touch-action: none; }
.move .i { width: 18px; height: 18px; }
.lens[data-corner="tl"] .chip { top: auto; bottom: 12px; }
.lens[data-corner="br"] .move { bottom: auto; top: 12px; }
.lens :focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55); }

/* Pause control (WCAG 2.2.2): out of sight until a keyboard user tabs to it. */
.pause-pill { position: absolute; left: 12px; bottom: 12px; z-index: 4; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 15px; background: var(--overlay-chip); color: #1d1d1f; font-size: 12px; font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 140ms linear, transform 200ms var(--ease-out); }
.pause-pill .i { width: 12px; height: 12px; fill: currentColor; stroke-width: 1; }
.pause-pill:focus-visible { opacity: 1; transform: none; pointer-events: auto; outline: 2px solid #fff; outline-offset: 2px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); flex: none; }

/* ---- sections ----------------------------------------------------------- */
.sec { padding: clamp(72px, 10vw, 144px) 0; border-top: 1px solid var(--separator); }
.sec-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7.4fr); gap: clamp(24px, 5vw, 96px); align-items: start; margin-bottom: clamp(40px, 5vw, 64px); }
.h2 { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.04em; font-weight: 500; text-wrap: balance; }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--label-2); max-width: 36em; text-wrap: pretty; }
.ledes { display: grid; gap: 14px; }

/* how it works */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; counter-reset: s; }
.steps li { border-top: 1px solid var(--label); padding-top: 18px; }
.steps .n { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--label-2); margin-bottom: 28px; }
.steps h4 { margin-top: 0;  font-size: 17px; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 6px; }
.steps p { color: var(--label-2); font-size: var(--fs-body); max-width: 26em; }
/* ---- how it works: the laptop ---------------------------------------------
   A real-time 3D laptop (js/laptop.js, three.js). The stage is a fixed-ratio
   box that is wider than the laptop so the perspective has room; the canvas
   and the poster (a still render of the same scene, fully open) fill it. The
   poster shows until the 3D view is ready, and stays for reduced motion,
   ?still, no JS or no WebGL. No brand marks: a generic aluminium laptop. */
.sec-how { padding-bottom: clamp(72px, 10vw, 144px); }
.lap-scene { position: relative; }
.lap-pin { position: relative; overflow: clip; }
.lap-head .sec-head { margin-bottom: clamp(8px, 2vw, 24px); }

.lap {
  /* --w: the laptop's width. Fit the open laptop under the heading in one viewport. */
  --w: min(980px, 72vw, calc((100svh - 260px) * 1.05));
  margin: 0 auto;
  width: var(--w);
}
.lap-stage {
  position: relative;
  width: calc(var(--w) * 1.3);
  margin-left: calc(var(--w) * -0.15);
  aspect-ratio: 1300 / 930;
}
.lap-poster, .lap-gl { position: absolute; inset: 0; width: 100%; height: 100%; }
.lap-poster { object-fit: contain; transition: opacity 400ms ease; }
/* The poster render has faint copies of the side-rail items baked into its outer edges (seen in ?still,
   reduced motion and before WebGL loads); the laptop itself sits within 7-93% of the width, so fade them out (soft, keeps the shadow). */
.lap-poster { -webkit-mask-image: linear-gradient(90deg, transparent 4.2%, #000 7%, #000 93%, transparent 95.8%); mask-image: linear-gradient(90deg, transparent 4.2%, #000 7%, #000 93%, transparent 95.8%); }
.lap-gl { opacity: 0; transition: opacity 400ms ease; }
.lap.is-live .lap-gl { opacity: 1; }
.lap.is-live .lap-poster { opacity: 0; }

.steps-title { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 500; letter-spacing: -0.025em; margin: clamp(48px, 6vw, 88px) 0 clamp(24px, 3vw, 36px); }

@media (max-width: 640px) {
  .lap { --w: calc(100vw - 2 * var(--gutter) - 56px); }
}

/* Callouts: a numbered list of six features. Wide screens (.has-side, set by
   js/laptop.js when there is room): two columns either side of the laptop, left
   items right-aligned toward it, right items left-aligned. While the pin steps
   (.is-stepping) the active item is dark with its sub-line and a ring marks its
   part of the screen; the rest are muted. Otherwise: one list under the laptop,
   everything shown, and clicking an item rings its part of the screen. */
.lap-rails { margin: 8px auto 0; padding: 0 var(--gutter); width: 100%; max-width: calc(560px + 2 * var(--gutter)); }
.lap-rail { list-style: none; margin: 0; padding: 0; }
.lap-rail li + li { border-top: 1px solid var(--separator, rgba(0, 0, 0, 0.1)); }
.lap-rail button { display: flex; gap: 12px; width: 100%; padding: 11px 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--label); transition: color 250ms ease; }
.lap-rail .n { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; transition: background-color 250ms, color 250ms, border-color 250ms; }
.lap-rail .tx { min-width: 0; }
.lap-rail b { display: block; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; }
.lap-rail .tx span { display: block; font-size: 13px; line-height: 1.4; color: var(--label-2); margin-top: 2px; transition: max-height 300ms ease, opacity 300ms ease, margin 300ms ease; }
.lap-rail li.on .n { background: var(--label); border-color: var(--label); color: #fff; }
.is-stepping .lap-rail button { color: rgba(60, 60, 67, 0.45); }
.is-stepping .lap-rail li.on button, .is-stepping .lap-rail button:hover { color: var(--label); }
.is-stepping .lap-rail .tx span { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; }
.is-stepping .lap-rail li.on .tx span { max-height: 40px; opacity: 1; margin-top: 2px; }
.has-side .lap-rails { position: absolute; inset: 0; margin: 0; padding: 0; max-width: none; pointer-events: none; z-index: 2; }
.has-side .lap-rail { position: absolute; transform: translateY(-50%); pointer-events: auto; }
.has-side .lap-rail[data-col="l"] button { flex-direction: row-reverse; text-align: right; }
.lap-ring {
  position: absolute; left: 0; top: 0; z-index: 1; border-radius: 8px; pointer-events: none; opacity: 0; visibility: hidden;
  box-shadow: 0 0 0 1.5px #fff, 0 0 0 3px var(--label), 0 6px 24px rgba(0, 0, 0, 0.18);
  transition: transform 520ms cubic-bezier(0.3, 0.7, 0.2, 1), width 520ms cubic-bezier(0.3, 0.7, 0.2, 1), height 520ms cubic-bezier(0.3, 0.7, 0.2, 1), visibility 0s linear 520ms;
}
.lap-ring.on { visibility: visible; transition: transform 520ms cubic-bezier(0.3, 0.7, 0.2, 1), width 520ms cubic-bezier(0.3, 0.7, 0.2, 1), height 520ms cubic-bezier(0.3, 0.7, 0.2, 1), visibility 0s; }
.lap-scene:not(.is-stepping) .lap-ring.on { opacity: 1; }

/* Pinned mode (set by JS on wide, tall-enough screens with motion allowed):
   the scene is taller than the viewport and the pin sticks under the nav. */
.lap-scene.is-pinned { height: calc(100svh - 56px + 280vh); } /* 140vh opens the lid, 140vh steps through the six features and holds */
.lap-scene.is-pinned .lap-pin { position: sticky; top: 56px; height: calc(100svh - 56px); display: flex; flex-direction: column; justify-content: center; }

/* fills */
.stage-sm { aspect-ratio: 16 / 9; border-radius: var(--r-3); background-image: url("assets/fills-quiet-room-poster.webp"); cursor: default; }
.fbox { position: absolute; border: 1.5px solid var(--overlay); border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); pointer-events: none; transition: opacity 160ms linear; }
.fbox .dot { width: 8px; height: 8px; }
.fbox .d-nw { left: -4.75px; top: -4.75px; } .fbox .d-ne { right: -4.75px; top: -4.75px; }
.fbox .d-sw { left: -4.75px; bottom: -4.75px; } .fbox .d-se { right: -4.75px; bottom: -4.75px; }
.fsrc { position: absolute; border: 1.5px dashed rgba(255, 255, 255, 0.9); border-radius: 2px; pointer-events: none; transition: opacity 160ms linear; }
.fsrc span { position: absolute; left: 0; bottom: calc(100% + 6px); font-size: 11px; font-weight: 500; color: #fff; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.fsrc[hidden] { display: block; opacity: 0; }
.stage-sm { touch-action: pan-y; cursor: ew-resize; }
.fdiv { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-left: 1.5px solid var(--overlay); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.25); z-index: 2; }
.fknob { position: absolute; top: 50%; left: 0; width: 36px; height: 36px; margin: -18px 0 0 -18.75px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #1d1d1f; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); cursor: ew-resize; touch-action: none; }
.fknob svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fknob:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.55); }
.tag { position: absolute; top: 12px; height: 22px; padding: 0 9px; display: inline-flex; align-items: center; border-radius: 11px; background: var(--overlay-chip); color: #1d1d1f; font-size: 11px; font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); pointer-events: none; z-index: 1; }
.tag-l { left: 12px; } .tag-r { right: 12px; }
.hint { font-size: var(--fs-small); color: var(--label-2); }
.fills-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.credit-inline { font-size: 12px; color: var(--label-2); }
.fills-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 48px); }
.bento { --tile: #f4f4f5; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.b-video { grid-column: 1 / span 8; display: flex; flex-direction: column; border-radius: 28px; background: var(--tile); padding: 12px; min-width: 0; }
.b-video .stage-sm { flex: 1; aspect-ratio: auto; min-height: 420px; border-radius: 20px; }
.b-video .fills-bar { margin: 12px 12px 2px; }
.b-picks { grid-column: 9 / span 4; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.tile { position: relative; display: flex; flex-direction: column; text-align: left; min-width: 0; padding: 20px 20px 22px; border-radius: 28px; background: var(--tile); transition: transform 260ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease); }
.tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.25); }
.tile:active { transform: scale(0.99); }
.tile[aria-checked="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--accent); }
.tile[aria-checked="true"]:hover { box-shadow: inset 0 0 0 1.5px var(--accent), 0 10px 24px -14px rgba(0, 0, 0, 0.25); }
.tile:focus-visible { outline-offset: 3px; border-radius: 30px; }
.tile .art { flex: 1; display: grid; place-items: center; min-height: 0; padding: 4px 0 14px; }
.t-t { font-size: 16px; font-weight: 500; letter-spacing: -0.015em; }
.t-d { font-size: 13.5px; line-height: 1.45; color: var(--label-2); margin-top: 2px; }

/* the line art: 1.1px strokes, dotted guides */
.ill { width: 100%; max-height: 132px; height: auto; overflow: visible; transition: transform 400ms var(--ease); }
.ill .s { fill: none; stroke: var(--accent); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ill .s.dash { stroke-dasharray: 4 3.5; }
.ill .d { fill: none; stroke: var(--accent); stroke-width: 1.15; stroke-linecap: round; stroke-dasharray: 0.01 3.6; vector-effect: non-scaling-stroke; opacity: 0.7; }
.ill .h { fill: #fff; stroke: var(--accent); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.ill .p { fill: var(--accent); opacity: 0.7; }
.ill .fill { fill: var(--accent); }
.ill g { transform-box: view-box; }
.tile:hover .ill { transform: scale(1.03); }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fadein { from { opacity: 0; } }
@keyframes march { to { stroke-dashoffset: -7.2; } }
/* draw on once, when the grid scrolls in */
.motion .bento:not(.is-drawn) .ill .s:not(.dash) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .bento:not(.is-drawn) .ill :is(.d, .h, .p, .fill, .dash) { opacity: 0; }
.motion .bento.is-drawn .ill .s:not(.dash) { stroke-dasharray: 1; animation: draw 1300ms var(--ease-out) both; }
.motion .bento.is-drawn .ill :is(.d, .h, .p, .fill, .dash) { animation: fadein 700ms var(--ease) 400ms both; }
.motion .bento.is-drawn .tile:nth-child(2) .ill * { animation-delay: 90ms; }
.motion .bento.is-drawn .tile:nth-child(3) .ill * { animation-delay: 180ms; }
.motion .bento.is-drawn .tile:nth-child(4) .ill * { animation-delay: 270ms; }
/* then each tile keeps quietly showing its idea (offset loops, 3.6–4.8 s) */
.motion .bento.is-drawn .ill .arc { animation: fadein 700ms var(--ease) 400ms both, march 1.2s linear 1.1s infinite; }
.motion .bento.is-drawn .ghost { animation: ghost 4.2s var(--ease) 1.2s infinite; }
.motion .bento.is-drawn .wv-r { animation: wvr 4.2s var(--ease) 1.2s infinite; }
@keyframes ghost { 0% { opacity: 0; transform: translateX(0); } 14% { opacity: 0.9; transform: translateX(0); } 66% { opacity: 0.9; transform: translateX(104px); } 80%, 100% { opacity: 0; transform: translateX(104px); } }
@keyframes wvr { 0%, 62% { opacity: 0.18; } 72%, 92% { opacity: 1; } 100% { opacity: 0.18; } }
.ring { transform-origin: 120px 90px; }
.motion .bento.is-drawn .ring { animation: breathe 4.8s ease-in-out infinite; }
.motion .bento.is-drawn .r1 { animation-delay: -1.3s; } .motion .bento.is-drawn .r2 { animation-delay: -1s; }
.motion .bento.is-drawn .r3 { animation-delay: -0.7s; } .motion .bento.is-drawn .r4 { animation-delay: -0.4s; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.88); } }
.motion .bento.is-drawn .arw { animation: arw 2.4s ease-in-out -1.3s infinite; }
.a-t { --dx: 0px; --dy: 4px; } .a-b { --dx: 0px; --dy: -4px; } .a-l { --dx: 4px; --dy: 0px; } .a-r { --dx: -4px; --dy: 0px; }
@keyframes arw { 0%, 100% { transform: translate(0, 0); opacity: 0.55; } 50% { transform: translate(var(--dx), var(--dy)); opacity: 1; } }
.motion .bento.is-drawn .hc { animation: flick 3.6s steps(1) infinite; animation-delay: calc(var(--i) * -0.62s - 2.1s); }
@keyframes flick { 0% { opacity: 1; } 25% { opacity: 0.15; } 50% { opacity: 1; } 75% { opacity: 0.45; } }
.blk { transform-origin: 120px 90px; }
.motion .bento.is-drawn .blk { animation: blk 4.4s var(--ease) -0.7s infinite; }
@keyframes blk { 0% { opacity: 0; transform: scale(1.32); } 28% { opacity: 1; transform: scale(1); } 72% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; transform: scale(1); } }
.motion .bento.is-drawn .tick { animation: tick 4.4s var(--ease) -0.7s infinite; }
@keyframes tick { 0%, 24% { transform: scale(1); } 28% { transform: scale(1.45); } 34%, 100% { transform: scale(1); } }
.bento:not(.is-live) .ill, .bento:not(.is-live) .ill * { animation-play-state: paused !important; }
@media (max-width: 1024px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .b-video, .b-picks { grid-column: 1 / -1; }
  .b-video .stage-sm { min-height: 0; aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
  .fills-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .bento { grid-template-columns: 1fr; gap: 10px; }
  .b-video { padding: 8px; border-radius: 24px; }
  .b-video .stage-sm { aspect-ratio: 4 / 3; border-radius: 18px; }
  .b-picks { gap: 10px; }
  .tile { padding: 14px 14px 16px; border-radius: 22px; }
  .tile .art { padding: 0 0 8px; }
  .ill { max-height: 84px; }
  .t-t { font-size: 15px; }
  .t-d { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tile, .ill { transition: none; } }

/* privacy: a receipt printed by the page. The boldness is the paper; the copy stays quiet. */
.rc-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.rc-copy { display: grid; gap: 20px; }
.rc-copy .lede { max-width: 28em; }
.rc-try { max-width: 28em; padding-top: 20px; border-top: 1px solid var(--separator); color: var(--label-2); }
.rc-printer { position: relative; padding: 28px clamp(16px, 3vw, 40px) 0; background: var(--bg-2); border-radius: var(--r-4); overflow: hidden; }
.rc-slot { position: relative; z-index: 2; height: 10px; border-radius: 5px; background: #1d1d1f; box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6); }
.rc-clip { position: relative; z-index: 1; margin: -5px 12px 0; padding: 0 12px 40px; overflow: hidden; }
.rc-paper { --z: 7px; position: relative; display: grid; gap: 20px; width: min(100%, 340px); margin: 0 auto; padding: 32px 24px calc(28px + var(--z)); background: #fff; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--label);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--z)) 100%; }
.motion .rc-printer .rc-paper { transform: translateY(-101%); }
.motion .rc-printer.is-in .rc-paper { transform: none; transition: transform 2.4s steps(20, end) 200ms; }
.rc-head { display: grid; justify-items: center; gap: 6px; text-align: center; padding-bottom: 20px; border-bottom: 1px dashed var(--separator-2); }
.rc-logo { width: 22px; height: 22px; fill: var(--label); }
.rc-logo rect { fill: none; stroke: var(--label); stroke-width: 1.2; stroke-dasharray: 2 1.6; }
.rc-head h3 { font-family: var(--font-ui); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.rc-head p { color: var(--label-2); }
.rc-lines, .rc-meta { display: grid; gap: 8px; }
.rc-lines > div, .rc-meta > div { display: flex; align-items: baseline; gap: 6px; }
.rc-lines dt, .rc-meta dt { display: flex; flex: 1; min-width: 0; color: var(--label-2); white-space: nowrap; }
.rc-lines dt::after, .rc-meta dt::after { content: ""; flex: 1; min-width: 12px; margin: 0 2px 0 8px; border-bottom: 1px dotted var(--label-3); transform: translateY(-4px); }
.rc-lines dd, .rc-meta dd { display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-total { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 0; border-block: 1px dashed var(--separator-2); }
.rc-total span { font-weight: 500; }
.rc-total strong { font-family: var(--font-ui); font-size: 44px; line-height: 1; font-weight: 500; letter-spacing: -0.05em; }
.rc-thanks { text-align: center; color: var(--label-2); padding-top: 4px; }
@media (max-width: 900px) { .rc-grid { grid-template-columns: 1fr; } }
@media (max-width: 420px) {
  .rc-paper { padding-inline: 18px; font-size: 12px; }
  .rc-clip { margin-inline: 4px; padding-inline: 4px; }
}

/* fit: sort it yourself (#fit) */
#fit .h2 .t2 { display: block; color: var(--label-3); }
.fit-tray { margin-bottom: clamp(40px, 5vw, 64px); padding: 18px; border-radius: var(--r-4); background: var(--bg-2); }
.fit-tray[hidden] { display: none; }
.fit-top, .fit-done { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0 2px; }
.fit-top { margin-bottom: 16px; }
.fit-msg { font-size: var(--fs-body); color: var(--label-2); text-wrap: pretty; min-height: 1.5em; }
.fit-msg b, .fit-done b { color: var(--label); font-weight: 500; }
.fit-msg.is-bad b { color: #c93400; }
.fit-acts { display: flex; gap: 16px; align-items: baseline; white-space: nowrap; font-size: var(--fs-small); }
.fit-acts button { color: var(--label-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--separator-2); }
.fit-acts button:hover { color: var(--label); }
.fit-n { font-family: var(--font-mono); font-size: 12px; color: var(--label-3); }
.fit-body { overflow: hidden; }
.fit-body[hidden], .fit-done[hidden] { display: none; }
.fit-tray.is-done .fit-top { display: none; }
.fit-done { align-items: center; }
.fit-done-txt p { font-size: var(--fs-body); color: var(--label-2); }
.fit-done-txt .fit-last { margin-top: 2px; font-size: var(--fs-small); color: var(--label-3); }
.fit-cards { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 10px; }
.fit-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 6px 6px 10px; background: var(--bg); border-radius: var(--r-2); box-shadow: var(--knob); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; text-align: left; transition: transform 450ms cubic-bezier(.3, 1.3, .5, 1), box-shadow 200ms var(--ease); }
.fit-shot { position: relative; display: block; overflow: hidden; background: #e8e8ea; aspect-ratio: 16 / 10; border-radius: 6px; }
.fit-shot canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fit-card .fit-shot { pointer-events: none; }
.fit-lbl { font-size: 12px; line-height: 1.3; padding: 0 2px; color: var(--label); }
.fit-card:hover { box-shadow: var(--shadow); }
.fit-card[aria-pressed="true"] { transform: translateY(-6px); box-shadow: 0 0 0 2px var(--label), var(--shadow); }
.fit-card.is-drag { z-index: 20; transition: box-shadow 200ms var(--ease); box-shadow: 0 0 0 1px rgba(0,0,0,.1), 0 22px 40px -10px rgba(0,0,0,.35); cursor: grabbing; }
.fit-card.is-sorted { box-shadow: none; background: transparent; outline: 1px dashed var(--separator-2); outline-offset: -1px; cursor: default; }
.fit-card.is-sorted > * { visibility: hidden; }
.fit-fly { position: fixed; z-index: 60; left: 0; top: 0; margin: 0; pointer-events: none; transform-origin: 0 0; }
.is-shake { animation: fit-shake 420ms var(--ease); }
@keyframes fit-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
.fit-dzs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.fit-dz { display: flex; gap: 10px; align-items: center; justify-content: center; padding: 12px; border-radius: var(--r-2); border: 1px dashed var(--separator-2); color: var(--label-2); font-size: var(--fs-small); font-weight: 500; transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); }
.fit-dz:disabled { cursor: default; opacity: .7; }
.fit-dz:not(:disabled) { color: var(--label); border-color: var(--label); background: var(--bg); }
.fit-dz.is-over { background: rgba(0,0,0,.04); border-color: var(--label); }
.fit-tick { width: 12px; height: 7px; margin-top: -4px; border: solid currentColor; border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
.fit-dash { flex: none; width: 12px; height: 2px; border-radius: 1px; background: var(--label-2); }
.fit-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 96px); }
.fit-col { border-radius: var(--r-3); margin: -12px; padding: 12px; transition: box-shadow 200ms var(--ease); }
.fit-col.is-over { box-shadow: inset 0 0 0 1.5px var(--label); }
.fit-col h3 { font-size: 17px; font-weight: 500; padding-bottom: 14px; border-bottom: 1px solid var(--label); }
.fit-yes li { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--separator); }
.fit-yes p { font-size: var(--fs-body); }
.fit-no li { display: grid; grid-template-columns: 14px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--separator); }
.fit-no .fit-dash { margin-top: 10px; }
.fit-no b { display: block; font-weight: 400; color: var(--label); }
.fit-why { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 12px; line-height: 1.55; color: var(--label-2); letter-spacing: 0; }
.fit-foot { margin-top: 20px; font-size: var(--fs-small); color: var(--label-3); }
.fit-cols li { transition: opacity 300ms var(--ease); }
.fit-cols li canvas { transition: opacity 400ms var(--ease); }
.fit-cols li p, .fit-cols li b, .fit-cols li .fit-why { transition: color 450ms var(--ease), background-color 450ms var(--ease); }
.fit-cols li.is-ghost .fit-shot { background: transparent; box-shadow: inset 0 0 0 1px var(--separator-2); }
.fit-cols li.is-ghost canvas, .fit-cols li.is-ghost .fit-dash { opacity: 0; }
.fit-cols li.is-ghost p, .fit-cols li.is-ghost b, .fit-cols li.is-ghost .fit-why { color: transparent; background-color: var(--bg-2); border-radius: 4px; width: fit-content; }
@media (max-width: 1024px) { .fit-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .fit-tray { padding: 12px; margin-left: calc(var(--gutter) * -.5); margin-right: calc(var(--gutter) * -.5); }
  .fit-top, .fit-done { flex-direction: column; gap: 8px; }
  .fit-done { align-items: flex-start; }
  .fit-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fit-lbl { font-size: 11px; }
  .fit-cols { grid-template-columns: 1fr; gap: 48px; }
  .fit-yes li { grid-template-columns: 96px 1fr; gap: 14px; }
}
@media (pointer: coarse) { .fit-card { touch-action: manipulation; } }
@media (prefers-reduced-motion: reduce) { .fit-card, .fit-dz, .fit-cols li, .fit-cols li * { transition: none; } .is-shake { animation: none; } }


/* closing: night dust. One dark band: a sparse dust field, two rows of our clips running through
   one glowing Vanish box, marks dissolving into the dust as they enter it. Then a white footer. */
.close { padding: 0 0 clamp(48px, 6vw, 80px); }
.nd { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; background: #070708; color: #f5f5f7; }
.nd-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.nd-edge { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; background: radial-gradient(130% 110% at 50% 35%, transparent 55%, rgba(60, 60, 66, 0.22) 100%), var(--nd-grain, none); background-size: auto, 160px; opacity: 0.24; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(120% 100% at 50% 40%, transparent 50%, #000 100%); mask-image: radial-gradient(120% 100% at 50% 40%, transparent 50%, #000 100%); }
.nd-film { --tw: 232px; --th: calc(var(--tw) * 0.5625); --gap: 12px; --pt: 32px; position: relative; z-index: 1; height: calc(var(--th) * 2 + var(--gap) + var(--pt) * 2); padding-top: var(--pt); -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.nd-row { position: relative; height: var(--th); }
.nd-row + .nd-row { margin-top: var(--gap); }
.nd-ft { position: absolute; left: 0; top: 0; width: var(--tw); height: var(--th); border-radius: 8px; overflow: hidden; background: #222; will-change: transform; }
.nd-ft img { width: 100%; height: 100%; object-fit: cover; }
.nd-ft-dim { position: absolute; inset: 0; background: #070708; opacity: 0.5; }
.nd-mark { position: absolute; width: calc(var(--tw) * 0.1); height: calc(var(--tw) * 0.102); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); will-change: transform, opacity; }
.nd-box { position: absolute; left: 50%; top: calc(var(--pt) - 12px); width: calc(var(--tw) + 24px); height: calc(var(--th) * 2 + var(--gap) + 24px); transform: translateX(-50%); border: 1.5px solid #fff; border-radius: 12px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 0 24px rgba(255, 255, 255, 0.18), 0 0 90px rgba(255, 255, 255, 0.08); pointer-events: none; }
.nd-box i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #070708; }
.nd-box i:nth-child(1) { left: -5px; top: -5px; }
.nd-box i:nth-child(2) { right: -5px; top: -5px; }
.nd-box i:nth-child(3) { left: -5px; bottom: -5px; }
.nd-box i:nth-child(4) { right: -5px; bottom: -5px; }
.nd-halo { position: absolute; left: 50%; top: 50%; width: calc(var(--tw) * 2.6); height: calc(var(--th) * 4); transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.03) 55%, transparent); pointer-events: none; }
.motion .nd-halo { animation: nd-breathe 5s ease-in-out infinite; }
.nd.is-off .nd-halo { animation-play-state: paused; }
@keyframes nd-breathe { 0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(0.97); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); } }
.nd-grid { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 48px; padding: 8px clamp(32px, 5vw, 72px) clamp(32px, 5vw, 72px); }
.nd-title { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.04em; font-weight: 500; text-shadow: 0 0 28px rgba(255, 255, 255, 0.14); }
.nd-dim-t { color: #8e8e93; }
.nd-sub { margin-top: 14px; font-size: var(--fs-lede); color: rgba(245, 245, 247, 0.72); max-width: 32em; }
.nd-fair { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: var(--fs-small); color: rgba(245, 245, 247, 0.72); }
.nd .btn-inv:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.btn-inv { background: #fff; color: #1d1d1f; }
.btn-inv:hover { background: #e8e8ed; }
.btn-inv:focus-visible { outline-color: #fff; }



/* ---- steps: the real dashboard, driven by a scripted cursor (js/steps.js) */
.sec-steps { padding-top: 0; border-top: 0; }
.v5 .h2 { max-width: 15ch; }
.stp-cols { display: grid; margin-top: clamp(28px, 3.5vw, 44px); }
.v5 .col-t { font-size: 17px; font-weight: 500; letter-spacing: -0.015em; }
.v5 .col-d { color: var(--label-2); margin-top: 4px; max-width: 30ch; }
.pin-n { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0; }
.stp-stage { position: relative; overflow: hidden; background: var(--bg-2); border-radius: 32px; margin-top: clamp(32px, 4vw, 56px); isolation: isolate; }
.v5 { --win-shadow: 0 0 0 .5px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.05), 0 24px 60px -18px rgba(0,0,0,.28); }
@keyframes ping { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }

.v5 .stp-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px clamp(16px, 2.4vw, 32px); }
.step5 { display: block; width: 100%; padding: 4px 0; text-align: left; transition: opacity 240ms var(--ease); }
.step5 .col-t { display: flex; align-items: center; gap: 10px; }
.step5 .col-d { display: block; }
.v5 .step5[aria-current="false"] { opacity: .42; }
.v5 .step5:hover { opacity: 1; }
.v5 .stp-stage { aspect-ratio: 1.95; }
.win5 { position: absolute; left: 5%; right: 5%; top: 8%; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: var(--win-shadow); }
.v5[data-mode="live"] .win5 { height: auto; }
.win5 iframe { display: block; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; pointer-events: none; }
.v5[data-mode="live"] .still5 { display: none; }
.v5[data-mode="still"] iframe { display: none; }
.still5 { position: relative; }
.still5 img { width: 100%; height: auto; opacity: 0; transition: opacity 420ms var(--ease); }
.still5 img + img { position: absolute; inset: 0; }
.still5 img:first-child { position: relative; }
.still5 img.on { opacity: 1; }
.win5 { opacity: 1; }
.v5[data-mode="live"]:not(.is-ready) .win5::after { content: ""; position: absolute; inset: 0; background: #fff; }
.pin5 { position: absolute; z-index: 3; transform: translate(-50%, -50%) scale(.82); width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; box-shadow: 0 0 0 2.5px #fff, 0 4px 12px rgba(0,0,0,.22); opacity: .5; transition: transform 300ms var(--ease), opacity 240ms var(--ease), left 500ms var(--ease-out), top 500ms var(--ease-out); pointer-events: none; }
.pin5::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(29,29,31,.55); opacity: 0; }
.pin5.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
.pin5.is-on::before { animation: ping 1.5s var(--ease-out) infinite; }
.v5[data-mode="live"][data-step="3"] .pin5:not(.is-on) { opacity: 0; }
.cursor5 { position: absolute; left: 0; top: 0; z-index: 6; width: 0; height: 0; pointer-events: none; will-change: transform; }
.cursor5 svg { position: absolute; left: -2px; top: -1px; width: 24px; height: 24px; filter: drop-shadow(0 1.5px 2px rgba(0,0,0,.28)); transition: scale 90ms var(--ease); transform-origin: 3px 2px; }
.cursor5 .c-hand { display: none; left: -8px; top: -2px; transform-origin: 9px 3px; }
.cursor5.hand .c-arrow { display: none; }
.cursor5.hand .c-hand { display: block; }
.cursor5.down svg { scale: .88; }
.v5[data-mode="still"] .cursor5 { opacity: 0; }
.ripple5 { position: absolute; left: 0; top: 0; z-index: 5; width: 0; height: 0; pointer-events: none; }
.ripple5::after { content: ""; position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(29,29,31,.55); background: rgba(29,29,31,.08); opacity: 0; }
.ripple5.go::after { animation: rip 460ms var(--ease-out); }
@keyframes rip { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.4); } }
.v5-note { margin-top: 14px; font-size: 13px; color: var(--label-2); }
@media (max-width: 900px) { .v5 .stp-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .v5 .stp-cols { grid-template-columns: 1fr; gap: 10px; }
  .v5 .step5 .col-d { margin-left: 32px; }
  .v5 .stp-stage { aspect-ratio: 1.45; border-radius: 20px; }
  .sec-steps .stp-cols { grid-template-columns: 1fr; }
  .win5 { left: 4%; right: 4%; top: 7%; border-radius: 8px; }
  .pin5 { width: 18px; height: 18px; font-size: 10px; box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0,0,0,.25); }
}
@media (prefers-reduced-motion: reduce) { .still5 img, .pin5, .step5 { transition: none; } .pin5.is-on::before { animation: none; } }



/* ---- pricing: "Check your clip" (from pricing-lab V4, js/pricing.js) ------- */
.sec-pricing { --bg-3: #ededf0; --dark: #1d1d1f; --on-dark: #f5f5f7; --on-dark-2: rgba(235, 235, 245, 0.66); --dur-1: 120ms; --dur-2: 180ms; --dur-slide: 460ms; --ease-slide: cubic-bezier(.32, .72, 0, 1); --label-3: rgba(60, 60, 67, 0.42); }
.sec-pricing .p-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sec-pricing .h2 .t2 { display: block; color: var(--label-3); }
.sec-pricing .ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sec-pricing .h2 .t2 { display: block; color: var(--label-3); }
.sec-pricing .p-head .lede { margin-top: 20px; margin-inline: auto; max-width: 34em; color: var(--label-2); font-size: var(--fs-lede); line-height: 1.55; text-wrap: pretty; }
/* ---------------------------------------------------------------- billing toggle: one sliding thumb */
.sec-pricing .bill-wrap { position: relative; margin-top: 40px; padding-top: 14px; }
.sec-pricing .bill {
  position: relative; isolation: isolate; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 4px; gap: 2px; border-radius: 999px; background: var(--fill);
}
.sec-pricing .bill button {
  position: relative; z-index: 1; min-width: 104px; height: 36px; padding: 0 18px; border-radius: 999px;
  font-size: var(--fs-body); font-weight: 500; color: var(--label-2); white-space: nowrap;
  transition: color var(--dur-2) var(--ease-out);
}
.sec-pricing .bill button[aria-checked="true"] { color: var(--label); }
.sec-pricing .bill button:hover:not([aria-checked="true"]) { color: var(--label); }
.sec-pricing .bill-thumb {
  position: absolute; z-index: 0; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px;
  background: var(--bg); box-shadow: var(--knob); pointer-events: none; opacity: 0;
  transition: transform var(--dur-slide) var(--ease-slide), width var(--dur-slide) var(--ease-slide), scale var(--dur-1) var(--ease-out), opacity var(--dur-1);
}
.sec-pricing .bill.has-thumb .bill-thumb { opacity: 1; }
.sec-pricing .bill.instant .bill-thumb { transition: none; }
.sec-pricing .bill:has(button[aria-checked="true"]:active) .bill-thumb { scale: 0.97; }
.sec-pricing .bill button:focus-visible { outline-offset: -2px; border-radius: 999px; }
.sec-pricing .bill-tag {
  position: absolute; top: -12px; z-index: 2; padding: 2px 9px; border-radius: 999px;
  background: var(--bg); color: var(--label); box-shadow: 0 0 0 1px var(--separator-2);
  font-size: 0.75rem; font-weight: 500; white-space: nowrap; pointer-events: none;
  transform: translateX(-50%);
}
.billing-once .sec-pricing .bill-wrap > :not(.bill-cur) { display: none; }
/* currency: a compact second control beside the billing toggle (₦ / $) */
.sec-pricing .bill-cur { margin-left: 8px; vertical-align: top; }
.sec-pricing .bill-cur button { min-width: 44px; padding: 0 14px; font-variant-numeric: tabular-nums; }
@media (max-width: 400px) {
  .sec-pricing .bill-cur { margin-left: 6px; }
  .sec-pricing .bill:not(.bill-cur) button { min-width: 92px; padding: 0 14px; }
  .sec-pricing .bill-cur button { padding: 0 12px; }
}

.sec-pricing .btn.full { display: flex; width: 100%; }
.sec-pricing .price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.sec-pricing .price-amt { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sec-pricing .price-per { font-size: 0.9375rem; color: inherit; opacity: 0.6; font-weight: 400; letter-spacing: 0; }
.sec-pricing .price-note { font-size: var(--fs-small); color: var(--label-2); margin-top: 2px; }
/* ================================================================ V4: check your clip */
.sec-pricing .chk { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; margin-top: 64px; align-items: start; }
.sec-pricing .chk-fig { margin: 0; position: sticky; top: 24px; }
.sec-pricing .scale { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-3); overflow: hidden; background: var(--bg-2); }
.sec-pricing .tier { position: absolute; left: 0; bottom: 0; overflow: hidden; background: var(--bg-3); box-shadow: 0 0 0 2px #fff; }
.sec-pricing .tier-img { position: absolute; inset: 0; background-size: cover; background-position: 50% 45%; opacity: 0; transition: opacity 400ms var(--ease-out); }
.sec-pricing .tier-img.on { opacity: 1; }
.sec-pricing .tier-lab { z-index: 1; }
.sec-pricing .tier.t4k { width: 100%; height: 100%; box-shadow: none; }
.sec-pricing .tier.t1080 { width: 50%; height: 50%; }
.sec-pricing .tier.t720 { width: 33.333%; height: 33.333%; }
.sec-pricing .tier-lab { position: absolute; top: 10px; left: 10px; padding: 2px 8px; border-radius: var(--r-1); background: rgba(255,255,255,.9); font-size: 0.75rem; font-weight: 500; white-space: nowrap; }
.sec-pricing .clipbox {
  position: absolute; left: 0; bottom: 0; z-index: 3; pointer-events: none;
  outline: 1.5px dashed #fff; outline-offset: -1.5px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.0);
  transition: width var(--dur-slide) var(--ease-slide), height var(--dur-slide) var(--ease-slide);
}
.sec-pricing .clipbox i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.3); }
.sec-pricing .clipbox i:nth-child(1) { left: -4px; top: -4px; } .sec-pricing .clipbox i:nth-child(2) { right: -4px; top: -4px; }
.sec-pricing .clipbox i:nth-child(3) { left: -4px; bottom: -4px; } .sec-pricing .clipbox i:nth-child(4) { right: -4px; bottom: -4px; }
.sec-pricing .clipbox-lab { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: var(--r-1); background: var(--dark); color: #fff; font-size: 0.75rem; font-family: var(--font-mono); white-space: nowrap; }
.sec-pricing .clipbox.tiny .clipbox-lab { right: auto; left: calc(100% + 8px); }
.sec-pricing .scale-cap { margin-top: 12px; font-size: var(--fs-small); color: var(--label-2); }
.sec-pricing .chk-panel { display: flex; flex-direction: column; gap: 24px; }
.sec-pricing .presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sec-pricing .preset { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: var(--r-2); background: var(--bg-2); text-align: left; transition: background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.sec-pricing .preset:hover { background: var(--bg-3); }
.sec-pricing .preset[aria-checked="true"] { background: var(--bg); box-shadow: 0 0 0 1.5px var(--accent); }
.sec-pricing .preset b { font-weight: 500; font-size: var(--fs-body); }
.sec-pricing .preset span { font-size: var(--fs-small); color: var(--label-2); font-variant-numeric: tabular-nums; }
.sec-pricing .preset.own { border: 1px dashed var(--separator-2); background: var(--bg); }
.sec-pricing .preset.own:hover { background: var(--bg-2); }
.sec-pricing .preset.own[aria-checked="true"] { border-color: transparent; }
.sec-pricing .facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 28px; font-family: var(--font-mono); font-size: var(--fs-small); }
.sec-pricing .facts dt { color: var(--label-2); font-family: var(--font-ui); }
.sec-pricing .facts dd { margin: 0; grid-row: 2; }
.sec-pricing .verdict { font-size: 1.25rem; line-height: 1.35; letter-spacing: -0.015em; font-weight: 500; text-wrap: pretty; min-height: 3.6em; }
.sec-pricing .verdict small { display: block; margin-top: 6px; font-size: var(--fs-body); color: var(--label-2); font-weight: 400; letter-spacing: -0.006em; }
.sec-pricing .plans4 { display: grid; gap: 8px; }
.sec-pricing .plan4 { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 16px; padding: 16px; border-radius: var(--r-3); box-shadow: 0 0 0 1px var(--separator); transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.sec-pricing .plan4-name { font-weight: 500; font-size: 1.0625rem; }
.sec-pricing .plan4 .price { grid-row: span 2; }
.sec-pricing .plan4 .price-amt { font-size: 1.125rem; }
.sec-pricing .plan4-sub { font-size: var(--fs-small); color: var(--label-2); }
.sec-pricing .plan4 .btn { grid-column: 1 / -1; margin-top: 12px; height: 44px; }
.sec-pricing .plan4.pick { background: var(--dark); color: var(--on-dark); box-shadow: none; }
.sec-pricing .plan4.pick .plan4-sub, .sec-pricing .plan4.pick .price-note { color: var(--on-dark-2); }
.sec-pricing .plan4:not(.pick) .btn { background: var(--fill); color: var(--label); }
.sec-pricing .plan4:not(.pick) .btn:hover { background: rgba(120,120,128,.2); }
.sec-pricing .plan4.pick .btn { background: #fff; color: var(--label); }
.sec-pricing .plan4.pick .btn:hover { background: #e8e8ed; }
.sec-pricing .plan4.pick :focus-visible { outline-color: #fff; }
.sec-pricing .plan4-fine { grid-column: 1 / -1; margin-top: 8px; text-align: center; font-size: 0.75rem; color: var(--label-2); }
.sec-pricing .plan4.pick .plan4-fine { color: var(--on-dark-2); }
/* V4 benefit lists: short lines, one check each */
.sec-pricing .incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--separator); }
.sec-pricing .incl-head { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 16px; }
.sec-pricing .incl-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.sec-pricing .incl-list li { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 0; border-bottom: 1px solid var(--separator); }
.sec-pricing .incl-list li .ic { width: 16px; height: 16px; }
.sec-pricing .incl-list li.hl { grid-column: 1 / -1; margin-top: 8px; padding: 12px 14px; border: 0; border-radius: var(--r-2); background: var(--dark); color: var(--on-dark); font-weight: 500; }
.sec-pricing .incl-list li.hl small { margin-left: auto; color: var(--on-dark-2); font-size: var(--fs-small); font-weight: 400; white-space: nowrap; }
@media (max-width: 900px) { .sec-pricing .incl { grid-template-columns: 1fr; gap: 40px; margin-top: 48px; } }
@media (max-width: 420px) { .sec-pricing .incl-list { grid-template-columns: 1fr; } .sec-pricing .incl-list li.hl small { display: none; } }

@media (max-width: 900px) { .sec-pricing .chk { grid-template-columns: 1fr; gap: 32px; } .sec-pricing .chk-fig { position: static; } }
@media (max-width: 760px) { .sec-pricing .presets { grid-template-columns: 1fr 1fr; } .sec-pricing .verdict { font-size: 1.125rem; min-height: 0; } }

/* ---- entrances: see entrances.css + js/entrances.js (sections opt in with data-ent) */
.motion .hero-copy > * { animation: rise 900ms var(--ease-out) both; }
.motion .hero-copy > :nth-child(2) { animation-delay: 60ms; }
.motion .hero-copy > :nth-child(3) { animation-delay: 140ms; }
.motion .stage[data-stage] { animation: wipe 1100ms var(--ease-out) 80ms both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes wipe { from { clip-path: inset(6% 6% 6% 6% round 28px); opacity: 0.4; } to { clip-path: inset(0 0 0 0 round 20px); opacity: 1; } }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 640px; }
  .hero .display { max-width: 13em; }
  .hero-act { justify-content: flex-start; gap: 32px; }
  .sec-head { grid-template-columns: 1fr; gap: 16px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .stage[data-stage] { aspect-ratio: 3 / 2; }
}
@media (max-width: 640px) {
  .meta-r { gap: 16px; }
  .meta p:first-child { display: none; }
  .meta { justify-content: flex-start; }
  .app { margin-bottom: 20px; }
  .hero-act { flex-direction: column; align-items: stretch; gap: 20px; }
  .btn { width: 100%; }
  .stage[data-stage] { aspect-ratio: 4 / 5; }
  .lens { border-radius: 10px; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .steps .n { margin-bottom: 12px; }
  .fills-bar { flex-wrap: wrap; }
  .nd { border-radius: 20px; }
  .nd-grid { grid-template-columns: 1fr; }
  .nd .btn { width: 100%; }
  .nd-film { --tw: 148px; --pt: 20px; }
  .nd-box { top: calc(var(--pt) - 8px); width: calc(var(--tw) + 16px); height: calc(var(--th) * 2 + var(--gap) + 16px); }
}

/* ---- hero · full-bleed cinema (hero-lab V2, js/hero-cinema.js) -----------
   The reel fills the hero inside a 12px inset. White headline bottom-left over
   a soft shade; the marks sit in the top corners so the box never meets the
   type. Every class is hc- so nothing collides with the fills stage. */
.hero.hc { padding: 12px 12px clamp(56px, 8vw, 112px); }
.hc-frame { position: relative; height: clamp(560px, calc(100svh - 56px - 24px), 920px); border-radius: 22px; overflow: hidden; isolation: isolate; user-select: none; -webkit-user-select: none; background: #c9cbce url("assets/leather-blazer-poster.jpg") center / cover; }
.hc-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hc-after { clip-path: inset(50% 50% 50% 50%); transition: opacity 140ms linear; }
.hc-holding .hc-after { opacity: 0; }
.hc-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.28) 30%, rgba(0, 0, 0, 0) 58%); }

.hc-lens { position: absolute; left: 0; top: 0; z-index: 3; width: 20%; height: 20%; border-radius: 10px; border: 1.5px solid var(--overlay); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 10px 40px -8px rgba(0, 0, 0, 0.35); cursor: grab; touch-action: none; will-change: transform; }
.hc-lens.hc-dragging { cursor: grabbing; }
.hc-lens.hc-off { opacity: 0; pointer-events: none; }
.hc-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--overlay); box-shadow: var(--overlay-ring); pointer-events: none; }
.hc-nw { left: -5.75px; top: -5.75px; } .hc-ne { right: -5.75px; top: -5.75px; }
.hc-sw { left: -5.75px; bottom: -5.75px; } .hc-se { right: -5.75px; bottom: -5.75px; }
.hc-hit { position: absolute; inset: 0; border-radius: inherit; cursor: inherit; }
.hc-hit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.5); border-radius: 10px; }
.hc-chip { position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(calc(-50% + var(--chip-shift, 0px))); height: 28px; padding: 0 12px; border-radius: 14px; background: var(--overlay-chip); color: #1d1d1f; font-size: 12px; font-weight: 500; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); touch-action: none; -webkit-touch-callout: none; white-space: nowrap; transition: background 140ms var(--ease); }
.hc-chip::before { content: ""; position: absolute; inset: -8px -4px; } /* 44px tap target */
.hc-lens.hc-chip-up .hc-chip { top: auto; bottom: calc(100% + 10px); }
.hc-holding .hc-chip { background: #1d1d1f; color: #fff; }
.hc-chip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.5); border-radius: 14px; }

.hc-copy { position: absolute; z-index: 4; left: clamp(20px, 4vw, 56px); right: clamp(20px, 4vw, 56px); bottom: clamp(24px, 4vw, 56px); color: #fff; pointer-events: none; }
.hc-copy > * { pointer-events: auto; }
.hc-title { font-size: clamp(2.5rem, 1.2rem + 4.2vw, 5.25rem); line-height: 0.98; letter-spacing: -0.05em; font-weight: 500; max-width: 12em; text-wrap: balance; text-shadow: 0 1px 30px rgba(0, 0, 0, 0.15); }
.hc-br { display: none; }
.hc-act { display: flex; align-items: center; gap: 20px; margin-top: clamp(20px, 2.4vw, 32px); }
.hc-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 24px; border-radius: 8px; background: #fff; color: #1d1d1f; font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background 160ms var(--ease), transform 160ms var(--ease); }
.hc-btn:hover { background: #ececf0; }
.hc-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hc-sub { display: grid; gap: 4px; }
.hc-sub-1 { font-size: 15px; font-weight: 500; }
.hc-sub-2 { font-size: 13px; color: rgba(255, 255, 255, 0.78); }

.hc-meta { position: absolute; z-index: 4; right: clamp(20px, 4vw, 56px); bottom: clamp(24px, 4vw, 56px); display: flex; align-items: center; gap: 12px; }
.hc-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 10px; border-radius: 15px; background: rgba(255, 255, 255, 0.16); color: #fff; font-size: 12px; font-weight: 500; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hc-pill:hover { background: rgba(255, 255, 255, 0.26); }
.hc-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hc-pill .i { width: 12px; height: 12px; fill: currentColor; stroke-width: 1; }
/* Visitors don't get a visible stop control (user call). It stays for WCAG 2.2.2: visually hidden,
   and shown as the pill only while it has keyboard focus. */
.hc-pill:not(:focus-visible) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; box-shadow: none; }


@media (min-width: 900px) { .hc-br { display: inline; } }
@media (max-width: 900px) {
  .hc-meta { top: 14px; bottom: auto; right: auto; left: 50%; transform: translateX(-50%); }
}
@media (max-width: 560px) {
  .hero.hc { padding: 8px 8px 56px; }
  .hc-frame { height: clamp(560px, calc(100svh - 56px - 16px), 760px); border-radius: 18px; }
  .hc-copy { left: 20px; right: 20px; bottom: 24px; }
  .hc-act { flex-direction: column-reverse; align-items: flex-start; gap: 18px; }
  .hc-meta { top: auto; left: auto; transform: none; right: 20px; bottom: 32px; }
  .hc-shade { background: linear-gradient(to top, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.3) 38%, rgba(0, 0, 0, 0) 62%); }
}
@media (prefers-reduced-motion: reduce) {
  .hc-frame, .hc-copy { animation: none !important; }
}

/* ---- footer: giant wordmark (from footer-lab-2 V1) ------------------------------------------------
   Links in one calm row; "Vanish" set across the full width with its last letter already taken out by
   a Vanish box. Hover a letter and the box moves there; that letter breaks into grains (js/footer.js). Every page (black/, privacy/, credits/) uses this footer. */
.wm { padding: clamp(24px, 3vw, 40px) 0 32px; overflow: hidden; }
.wm a { color: inherit; text-decoration: none; }
.wm-top { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.wm-h { margin: 0 0 16px; font-size: 13px; font-weight: 400; color: var(--label-2); letter-spacing: -0.003em; }
.wm-group ul { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.wm-group li { font-size: 15px; line-height: 24px; letter-spacing: -0.01em; }
.wm-group a { display: inline-flex; align-items: center; gap: 8px; min-height: 24px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 220ms var(--ease); }
.wm-group a:hover { background-size: 100% 1px; }
.wm-ic { width: 14px; height: 14px; fill: currentColor; flex: none; }
.wm-fair { justify-self: end; align-self: end; max-width: 24ch; font-size: 13px; line-height: 20px; color: var(--label-2); text-align: right; }
.wm-word { position: relative; margin: clamp(40px, 6vw, 88px) 0 clamp(28px, 3vw, 44px); user-select: none; -webkit-user-select: none; }
.wm-type { display: flex; justify-content: space-between; font-size: 24.5vw; font-weight: 600; letter-spacing: -0.065em; line-height: 0.74; color: var(--label); padding-top: 0.06em; cursor: default; }
@media (min-width: 1360px) { .wm-type { font-size: 333px; } }
.wm-type span { display: block; transition: opacity 420ms var(--ease); }
.wm-type span.gone { opacity: 0; transition: none; }
.wm-type span.back { transition: opacity 600ms var(--ease) 120ms; }
.wm-dust { position: absolute; left: 0; top: -20%; width: calc(100% + var(--gutter)); height: 140%; pointer-events: none; }
.wm-box { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border: 1.5px dashed var(--label); border-radius: 6px; pointer-events: none; transform: translate3d(var(--bx, 0), var(--by, 0), 0); transition: transform 520ms var(--ease-out), width 520ms var(--ease-out), height 520ms var(--ease-out); }
.wm-box i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--label); box-shadow: 0 0 0 2px #fff; }
.wm-box i:nth-child(1) { left: -5px; top: -5px; } .wm-box i:nth-child(2) { right: -5px; top: -5px; }
.wm-box i:nth-child(3) { left: -5px; bottom: -5px; } .wm-box i:nth-child(4) { right: -5px; bottom: -5px; }
.wm-box.snap { transition: none; }
.wm-base { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--label-2); }
.wm-base::before { content: ""; order: 2; flex: 1; height: 1px; background: var(--separator); }
.wm-base p:first-child { order: 1; } .wm-base p:last-child { order: 3; }
.wm-base a { color: var(--label); }
.wm-base a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .wm-top { grid-template-columns: 1fr 1fr; }
  .wm-group:first-child { grid-column: 1 / -1; }
  .wm-fair { grid-column: 1 / -1; justify-self: start; text-align: left; }
}
@media (max-width: 640px) {
  .wm-top { grid-template-columns: 1fr; gap: 28px; }
  .wm-group ul { gap: 8px 18px; }
  .wm-group li { font-size: 16px; line-height: 28px; }
  .wm-box { border-width: 1.2px; border-radius: 4px; }
  .wm-box i { width: 6px; height: 6px; }
  .wm-box i:nth-child(1), .wm-box i:nth-child(3) { left: -3.5px; } .wm-box i:nth-child(2), .wm-box i:nth-child(4) { right: -3.5px; }
  .wm-box i:nth-child(1), .wm-box i:nth-child(2) { top: -3.5px; } .wm-box i:nth-child(3), .wm-box i:nth-child(4) { bottom: -3.5px; }
  .wm-base { flex-direction: column; align-items: flex-start; gap: 6px; }
  .wm-base::before { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wm-group a, .wm-type span, .wm-box { transition: none; } }

/* ---- buttons: V4 "Dust" (buttons-lab, chosen 2026-10-07) ------------------------------------------
   Hover rolls the label up letter by letter; press sheds a few grains of the button's own colour
   (js/buttons.js, one fixed canvas that only runs while grains are alive). One family on every button:
     primary .nl-cta .nl-sheet-cta · white on dark .hc-btn .btn-inv .plan4.pick .btn ·
     secondary .plan4 .btn .hc-chip · text .fit-acts button · toggle .bill button · icon .nl-burger .nl-close .hc-pill
   Footer links keep their own underline (the giant wordmark is the footer's grain moment).
   Movement uses `translate`/`scale`, so it composes with transforms the page already owns. */
:root {
  --bx-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.104 27.9%, 1.077 31.1%, 1.017 38.3%, 0.991 42.5%, 0.983 45.6%, 0.985 50.6%, 0.999 61.4%, 1.003 75.3%, 1);
}
.bx-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bx-lab { display: inline-flex; line-height: 1.25; clip-path: inset(0 -6px); pointer-events: none; }
.bx-ch { display: inline-block; white-space: pre; text-shadow: 0 1.25em 0 currentColor; transition: translate 460ms var(--ease) calc(var(--i) * 16ms); }
.bx-fx { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.bx-ok { display: inline-block; width: 13px; height: 13px; margin-right: 5px; align-self: center; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

:root :is(.nl-cta, .nl-sheet-cta, .hc-btn, .btn-inv, .plan4 .btn, .fit-acts button, .bill button, .nl-burger, .nl-close) { position: relative; }
:root :is(.nl-cta, .nl-sheet-cta, .hc-btn, .btn-inv, .plan4 .btn, .hc-chip, .fit-acts button, .wm-group a, .wm-base a, .bill button, .nl-burger, .nl-close, .hc-pill) {
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* press: in to .97 fast, spring back */
:root :is(.nl-cta, .nl-sheet-cta, .hc-btn, .btn-inv, .plan4 .btn, .hc-chip, .nl-burger, .nl-close, .hc-pill, .bill button) {
  transition: background-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease), scale 420ms var(--bx-spring), opacity 220ms var(--ease), transform 220ms var(--ease), visibility 0s;
}
:root :is(.nl-cta, .nl-sheet-cta, .hc-btn, .btn-inv, .plan4 .btn, .hc-chip, .nl-burger, .nl-close, .hc-pill, .bill button):active:not(:disabled, [aria-disabled="true"]) { scale: 0.97; transition-duration: 160ms, 160ms, 160ms, 80ms; }
@media (hover: hover) { :root .nl-sheet-cta:hover { background: var(--accent-hover); } }
/* hover: the label rolls up, letter by letter */
@media (hover: hover) {
  :root :hover:not(:disabled, [aria-disabled="true"]) > .bx-lab .bx-ch { translate: 0 -1.25em; }
}
:root :focus-visible > .bx-lab .bx-ch { translate: 0 -1.25em; }
/* text links: underline drawn by the fx layer so the letters can roll; press dims */
:root .fit-acts button { text-decoration: none; transition: color 160ms var(--ease), opacity 120ms var(--ease); }
:root .fit-acts button > .bx-fx::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--separator-2); transition: background-color 160ms; }
:root .fit-acts button:hover > .bx-fx::before { background: currentColor; }
:root :is(.fit-acts button, .wm-group a, .wm-base a):active:not([aria-disabled="true"]) { opacity: 0.6; transition-duration: 60ms; }
/* 44px touch targets for the small ones (text links 20-28px tall, nav pill 30px) */
:root :is(.fit-acts button, .wm-group a, .wm-base a)::after { content: ""; position: absolute; inset: -12px -6px; }
:root :is(.wm-group a, .wm-base a) { position: relative; }
:root a.nl-cta.nl-cta::after { content: ""; position: absolute; inset: -7px -2px; }
/* focus: one crisp ring; white on dark; white with a dark halo on footage */
:root :is(.nl-cta, .nl-sheet-cta, .hc-btn, .btn-inv, .plan4 .btn, .fit-acts button, .wm-group a, .wm-base a, .bill button, .nl-burger, .nl-close):focus-visible { outline: 2px solid #1d1d1f; outline-offset: 3px; }
:root :is(.btn-inv, .plan4.pick .btn):focus-visible { outline-color: #fff; }
:root :is(.bill button, .nl-burger, .nl-close):focus-visible { outline-offset: -2px; }
:root :is(.hc-btn, .hc-chip, .hc-pill):focus-visible { outline: 2px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.45); }
/* disabled */
:root :is(.nl-cta, .nl-sheet-cta, .hc-btn, .btn-inv, .plan4 .btn, .hc-chip, .fit-acts button, .wm-group a, .wm-base a, .bill button, .nl-burger, .nl-close, .hc-pill):is(:disabled, [aria-disabled="true"]) { opacity: 0.38; cursor: not-allowed; scale: none !important; }
/* loading -> success ("Sort them for me"): letters breathe, the underline fills with the 0 / 9 count */
:root .fit-auto[data-bx-state] { color: var(--label); cursor: progress; }
:root .fit-auto[data-bx-state="success"] { cursor: default; }
:root .fit-auto[data-bx-state="loading"] .bx-ch { animation: bx-breathe 1.2s ease-in-out calc(var(--i) * 60ms) infinite; }
@keyframes bx-breathe { 50% { opacity: 0.35; } }
:root .fit-auto[data-bx-state] > .bx-fx::before { background: currentColor; transform-origin: 0 50%; scale: var(--bx-p, 0) 1; transition: scale 360ms var(--ease); }
:root .fit-auto[data-bx-state="success"] > .bx-fx::before { scale: 1 1; }
@media (prefers-reduced-motion: reduce) {
  .bx-ch { transition: none !important; animation: none !important; translate: none !important; }
  :root :is(.nl-cta, .nl-sheet-cta, .hc-btn, .btn-inv, .plan4 .btn, .hc-chip, .nl-burger, .nl-close, .hc-pill, .bill button) { scale: none !important; }
  .fit-auto > .bx-fx::before { transition: none !important; }
}

/* ---------------------------------------------------------------- creator portfolio: line globe beside "Mikky Innovate" (Hugeicons Globe02Icon, MIT) */
:root .wm-base .wm-web { display: inline-flex; vertical-align: -2px; margin-left: 6px; color: var(--label-2); transition: color 160ms var(--ease); }
:root .wm-base .wm-web:hover { color: var(--label); text-decoration: none; }
.wm-ic-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* phones: a 44 × 44 tap area around the 14px globe, reaching right (away from the name link) */
@media (pointer: coarse), (max-width: 640px) { :root .wm-base .wm-web::after { inset: -15px -24px -15px -6px; } }

/* ===================================================================== FAQ
   Quiet Apple: the head on the left (like "How it works"), hairline rows on the right
   (like the Fit lists). A row is a <details>: the question is the summary, the plus turns
   into a minus, and the answer opens with a short height ease where the browser can
   animate to auto (interpolate-size); elsewhere it simply opens. */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7.4fr); gap: clamp(24px, 5vw, 96px); align-items: start; }
.faq-head { position: sticky; top: 96px; }
.faq-head .lede { margin-top: 20px; max-width: 26em; }
.faq-list { border-top: 1px solid var(--label); }
.faq-q { border-bottom: 1px solid var(--separator); }
.faq-q summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 18px 0; cursor: pointer; list-style: none; border-radius: var(--r-1); }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.faq-q h3 { font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem); line-height: 1.35; font-weight: 500; letter-spacing: -0.012em; text-wrap: balance; }
.faq-pm { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--fill); transition: background-color 200ms var(--ease); }
.faq-pm::before, .faq-pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -0.75px 0 0 -5.5px; border-radius: 1px; background: var(--label); transition: transform 320ms var(--ease-out); }
.faq-pm::after { transform: rotate(90deg); }
.faq-q[open] .faq-pm::after { transform: rotate(0deg); }
@media (hover: hover) { .faq-q summary:hover .faq-pm { background: rgba(120, 120, 128, 0.2); } }
.faq-a p { max-width: 38em; padding: 0 52px 24px 0; font-size: var(--fs-body); line-height: 1.6; color: var(--label-2); text-wrap: pretty; }
.faq-a a { color: var(--label); text-decoration: underline; text-decoration-color: var(--separator-2); text-underline-offset: 3px; transition: text-decoration-color 160ms var(--ease); }
.faq-a a:hover { text-decoration-color: currentColor; }
.faq-a a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
@supports (interpolate-size: allow-keywords) {
  .faq-q { interpolate-size: allow-keywords; }
  .faq-q::details-content { height: 0; overflow: clip; opacity: 0; transition: height 380ms var(--ease-out), opacity 260ms var(--ease), content-visibility 380ms allow-discrete; }
  .faq-q[open]::details-content { height: auto; opacity: 1; }
}
@media (max-width: 859px) {
  .faq-grid { grid-template-columns: 1fr; gap: 32px; }
  .faq-head { position: static; }
  .faq-a p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-pm::before, .faq-pm::after, .faq-q::details-content { transition: none !important; }
}