/* ============================================================================
   Hindsight — site styles

   Direction: "light room, loud game."

   The page is a warm near-white room. Every saturated colour in it is a piece
   of gameplay — the reel, the cover art, the library tiles. The chrome around
   them is ink, hairlines and one accent. That contrast is the whole design:
   a viewer's eye goes to the clips because nothing else is competing for it,
   which is also the argument the product is making.

   Light only, on purpose. The app follows the system; the site does not. A
   landing page that goes dark under prefers-color-scheme hides the one thing
   this page is built to show, and half the audience never sees the room.

   The accent (vermillion, the record dot in the icon) is semantic, never
   decorative. It means "recording" or "this is the part that gets saved."
   Primary buttons are ink, so the accent never has to mean "click me."
   ========================================================================= */

/* ---- Tokens ------------------------------------------------------------- */

:root {
  color-scheme: light;

  --paper:      #FBFAF8;   /* the room */
  --sunk:       #F3F1ED;   /* alternating band */
  --raised:     #FFFFFF;
  --ink:        #16161A;
  --ink-2:      rgba(22, 22, 26, 0.66);   /* 5.7:1 on paper */
  --ink-3:      rgba(22, 22, 26, 0.55);   /* 4.5:1 on paper */
  --ink-4:      rgba(22, 22, 26, 0.38);   /* decorative only */
  --hairline:   rgba(22, 22, 26, 0.10);
  --hairline-2: rgba(22, 22, 26, 0.06);

  --accent:      #C9372C;   /* text-safe vermillion */
  --accent-dot:  #FF3B30;   /* the record dot */
  --accent-wash: rgba(201, 55, 44, 0.09);

  /* The app's own dark ground, used only inside the product window. */
  --deck:      #1A1A1C;
  --deck-2:    #232326;
  --deck-3:    #2C2C30;
  --deck-ink:  #F2F1EE;
  --deck-ink-2: rgba(242, 241, 238, 0.62);
  --deck-line: rgba(255, 255, 255, 0.09);

  --btn-ink:     #16161A;
  --btn-ink-hov: #000000;
  --btn-quiet:   rgba(22, 22, 26, 0.05);
  --btn-quiet-h: rgba(22, 22, 26, 0.085);

  /* Concentric radii: an inner radius is its outer minus the padding — the
     same rule the app uses (10 outer, 4 pad, 6 inner). */
  --r-win:   18px;
  --r-card:  16px;
  --r-tile:  10px;
  --r-field: 11px;
  --r-pill:  999px;

  --shadow-contact: 0 1px 2px rgba(22, 22, 26, 0.05);
  --shadow-lift:    0 1px 2px rgba(22, 22, 26, 0.05), 0 12px 28px -14px rgba(22, 22, 26, 0.22);
  --shadow-card:    0 1px 2px rgba(22, 22, 26, 0.05), 0 18px 40px -24px rgba(22, 22, 26, 0.30);
  --shadow-win:     0 2px 8px rgba(22, 22, 26, 0.07), 0 44px 90px -40px rgba(22, 22, 26, 0.42);
  --shadow-clip:    0 2px 4px rgba(22, 22, 26, 0.10), 0 22px 44px -22px rgba(22, 22, 26, 0.45);

  --pad-x:  clamp(20px, 5vw, 48px);
  --pad-y:  clamp(84px, 9vw, 148px);
  --wide:   1180px;

  /* One easing for everything that moves, one spring for things that land. */
  --ease:   cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.44, 1);
  --hover:  180ms var(--ease);
  --press:  70ms var(--ease);

  /* SF Pro is the native face on the only platform this product runs on, so
     it is used deliberately here instead of a downloaded display font: it
     costs no request, and on a Mac-only landing page it is the opposite of
     generic. Numbers are SF Mono with tabular figures throughout. */
  --sans:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Arial, sans-serif;
  --mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

/* Hairlines are half a pixel on retina, which is every Mac. */
:root { --hairline-w: 1px; }
@media (min-resolution: 2dppx) {
  :root { --hairline-w: 0.5px; }
}

/* ---- Reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: clip;
}

/* height:auto lets `aspect-ratio` win over the width/height attributes, which
   the browser applies as presentation hints. The attributes stay on the markup
   because they are what reserves the space before the image arrives. */
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

h1, h2, h3, p, dl, dd, ol, ul, figure, figcaption { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

.sr-only {
  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;
  padding: 10px 16px; border-radius: var(--r-field);
  background: var(--raised); color: var(--ink);
  box-shadow: var(--shadow-lift); transition: top var(--hover);
}
.skip:focus { top: 12px; }

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

/* ---- Type scale --------------------------------------------------------- */

/* Hierarchy is carried by weight and size, with tracking tightened as the
   size grows — the optical correction SF Pro Display expects and the thing
   that separates a Mac headline from a web one. */
.display {
  font-family: var(--display);
  font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.6rem);
  line-height: 0.99;
  letter-spacing: -0.042em;
  font-weight: 700;
  text-wrap: balance;
}

.h2 {
  font-family: var(--display);
  font-size: clamp(1.85rem, 1.15rem + 2.6vw, 3rem);
  line-height: 1.07;
  letter-spacing: -0.035em;
  font-weight: 700;
  text-wrap: balance;
}

.h3 {
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.06rem + 0.55vw, 1.45rem);
  line-height: 1.18;
  letter-spacing: -0.024em;
  font-weight: 640;
}

.lead {
  font-size: clamp(1.03rem, 0.97rem + 0.3vw, 1.2rem);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -0.012em;
  text-wrap: pretty;
}
.lead--tight { max-width: 56ch; }

.eyebrow {
  font-size: 0.775rem;
  font-weight: 620;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--accent);
}

.fine {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 64ch;
}
.fine--center { margin-inline: auto; text-align: center; }

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  font-size: 0.95rem; font-weight: 590; letter-spacing: -0.012em;
  white-space: nowrap;
  transition: background var(--hover), transform var(--press), box-shadow var(--hover), color var(--hover);
}
.btn:active { transform: translateY(0.5px) scale(0.988); }

.btn--primary {
  background: var(--btn-ink); color: #FBFAF8;
  box-shadow: var(--shadow-lift);
}
.btn--primary:hover { background: var(--btn-ink-hov); box-shadow: var(--shadow-card); }

.btn--quiet { background: var(--btn-quiet); color: var(--ink); }
.btn--quiet:hover { background: var(--btn-quiet-h); }

.btn--sm  { padding: 9px 16px; font-size: 0.885rem; }
.btn--lg  { padding: 15px 26px; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }

.btn__glyph { width: 13px; height: 13px; opacity: 0.8; }

/* Pre-launch swaps the label, never the button, so nothing moves on load. */
.js-buy-label--buy { display: none; }
[data-checkout="on"] .js-buy-label { display: none; }
[data-checkout="on"] .js-buy-label--buy { display: inline; }

/* ---- Nav ---------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 60;
  padding: 12px var(--pad-x);
  transition: padding var(--hover);
}
.nav::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(251, 250, 248, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: var(--hairline-w) solid transparent;
  opacity: 0; transition: opacity var(--hover), border-color var(--hover);
}
.nav.is-scrolled { padding-block: 8px; }
.nav.is-scrolled::before { opacity: 1; border-bottom-color: var(--hairline); }

.nav__inner {
  position: relative;
  max-width: var(--wide); margin-inline: auto;
  display: flex; align-items: center; gap: 20px;
}

.brand { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; }
.brand__icon {
  width: 28px; height: 28px; flex: 0 0 28px;
  border-radius: 6.3px;
  box-shadow: 0 1px 2px rgba(22, 22, 26, 0.16), 0 4px 10px -6px rgba(22, 22, 26, 0.55);
}
.brand__wordmark {
  font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "SF Pro Rounded", var(--sans);
  font-size: 1.04rem; font-weight: 650; line-height: 1;
  letter-spacing: -0.028em;
}
#nav .brand { gap: 9px; }
#nav .brand__icon { width: 30px; height: 30px; flex-basis: 30px; border-radius: 6.75px; }
#nav .brand__wordmark { font-size: 1.12rem; }
.brand__mark { width: 26px; height: 26px; color: var(--ink); }
.brand__dot { fill: var(--accent-dot); }
.brand__name { font-weight: 640; letter-spacing: -0.024em; font-size: 1.03rem; }

.nav__links { display: flex; gap: 4px; }
/* Optically centred only on the landing page, where there is a call to action
   on the right to balance against. The document pages have no third element,
   so their links simply follow the brand. */
#nav .nav__links { position: absolute; left: 50%; transform: translateX(-50%); }
.nav__links a {
  padding: 7px 13px; border-radius: var(--r-pill);
  font-size: 0.96rem; font-weight: 500; color: var(--ink-2);
  transition: color var(--hover), background var(--hover);
}
.nav__links a:hover { color: var(--ink); background: var(--btn-quiet); }

#nav .btn--sm { padding: 10px 18px; font-size: 0.95rem; }

@media (max-width: 940px) { .nav__links { display: none; } }

/* ---- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(56px, 7vw, 96px) var(--pad-x) 0;
  text-align: center;
  overflow: clip;
}

/* One soft warm bloom behind the headline. Painted with a gradient rather
   than an image so it stays a few bytes and never bands on a wide display. */
.hero__glow {
  position: absolute; left: 50%; top: -22%;
  width: min(1500px, 150vw); aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(255, 116, 82, 0.18), transparent 72%),
    radial-gradient(closest-side, rgba(112, 144, 255, 0.14), transparent 70%);
  background-position: 42% 40%, 64% 52%;
  background-size: 62% 88%, 58% 80%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.hero__copy {
  position: relative;
  max-width: 940px; margin-inline: auto;
  display: grid; justify-items: center; gap: 22px;
}

.hero__platform {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink);
  font-size: 0.96rem; font-weight: 620;
  letter-spacing: -0.018em;
  line-height: 1;
}
.hero__platform-mark {
  width: 22px; height: 22px; flex: none;
  object-fit: contain;
  transform: translateY(-1px);
}
@keyframes rec {
  0%        { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.45); }
  55%, 100% { box-shadow: 0 0 0 7px rgba(255, 59, 48, 0); }
}

.display { max-width: 15ch; }
.hero .lead { max-width: 47ch; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.hero__meta {
  font-size: 0.85rem; color: var(--ink-3); letter-spacing: -0.005em;
}

/* ---- The reel ----------------------------------------------------------- */

/* Eighteen clips on a slowly turning drum. The cards sit on a circle of
   radius R = (cardWidth + gap) / (2·tan(180°/18)); the drum is pushed back by
   that same R so the front card lands at z = 0 and is drawn at exactly 1:1 —
   otherwise perspective magnifies it and the whole thing reads as a gimmick.
   Eighteen rather than a dozen because the angle between neighbours is what
   sets the shape: 20° gives a shallow arc with nine cards across it, where
   30° gives four cards and five edge-on slivers. Cards that turn past 90° are
   hidden by their own backface, and the stage mask fades them out well before
   that edge could be seen. */
.reel {
  --cw:  300px;
  --gap: 34px;
  --R:   947px;   /* (300 + 34) / (2·tan 10°) */
  --P:   1500px;
  --cap: 44px;
  --spin: 96s;

  position: relative;
  margin-top: clamp(40px, 5vw, 68px);
}

.reel__stage {
  display: flex; align-items: center; justify-content: center;
  perspective: var(--P);
  /* Above centre, so the cards that recede also rise: the row's bottom edge
     bows into an arc instead of sitting on a ruler. */
  perspective-origin: 50% 26%;
  height: calc(var(--cw) * 0.5625 + var(--cap) + 60px);
  overflow: hidden;
  /* Opaque across the arc, then a fast fall-off in the last few percent. A
     plain linear fade leaves 250px of half-visible card on each side, which
     looks like a rendering fault rather than depth. */
  -webkit-mask-image: var(--reel-mask);
  mask-image: var(--reel-mask);
  --reel-mask: linear-gradient(90deg,
    transparent 0, rgba(0,0,0,0.5) 3.5%, #000 11%,
    #000 89%, rgba(0,0,0,0.5) 96.5%, transparent 100%);
}

.reel__drum {
  position: relative; flex: none;
  width: var(--cw); height: calc(var(--cw) * 0.5625 + var(--cap));
  transform-style: preserve-3d;
  transform: translateZ(calc(-1 * var(--R)));
  animation: drum var(--spin) linear infinite;
}
@keyframes drum {
  from { transform: translateZ(calc(-1 * var(--R))) rotateY(0deg); }
  to   { transform: translateZ(calc(-1 * var(--R))) rotateY(-360deg); }
}
.reel:hover .reel__drum,
.reel:focus-within .reel__drum { animation-play-state: paused; }

.reel__card {
  position: absolute; inset: 0;
  transform: rotateY(calc(var(--i) * 20deg)) translateZ(var(--R));
  backface-visibility: hidden;
  border-radius: var(--r-card);
  background: var(--raised);
  border: var(--hairline-w) solid var(--hairline);
  box-shadow: var(--shadow-clip);
  overflow: hidden;
  transition: transform 420ms var(--spring), box-shadow var(--hover);
}
.reel__card:hover {
  transform: rotateY(calc(var(--i) * 20deg)) translateZ(calc(var(--R) + 40px));
  box-shadow: 0 4px 8px rgba(22, 22, 26, 0.12), 0 30px 60px -24px rgba(22, 22, 26, 0.5);
}
.reel__card img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--deck-2);
}
.reel__card figcaption {
  display: flex; align-items: center; gap: 10px;
  height: var(--cap); padding: 0 13px;
  font-size: 0.8rem; letter-spacing: -0.01em;
}
.reel__title {
  font-weight: 540; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.reel__time { margin-left: auto; color: var(--ink-3); font-size: 0.76rem; }

.reel__note {
  margin-top: clamp(22px, 3vw, 34px);
  text-align: center; font-size: 0.85rem; color: var(--ink-3);
}

@media (max-width: 1000px) {
  .reel { --cw: 236px; --gap: 26px; --R: 743px; --P: 1200px; }
}
@media (max-width: 620px) {
  .reel { --cw: 176px; --gap: 16px; --R: 545px; --P: 900px; --cap: 34px; --spin: 76s; }
  .reel__card figcaption { padding: 0 10px; font-size: 0.72rem; }
  .reel__stage { --reel-mask: linear-gradient(90deg,
    transparent 0, rgba(0,0,0,0.5) 2%, #000 6%,
    #000 94%, rgba(0,0,0,0.5) 98%, transparent 100%); }
}

/* ---- Sections ----------------------------------------------------------- */

.section { padding: var(--pad-y) var(--pad-x); }
.section--sunk { background: var(--sunk); }
.section--flush { padding-inline: 0; }
.section--flush .section__inner { padding-inline: var(--pad-x); }

.section__inner { max-width: var(--wide); margin-inline: auto; }
.section__inner--narrow { max-width: 780px; }

.section__head { display: grid; gap: 14px; margin-bottom: clamp(40px, 5vw, 64px); }
.section__head--center { justify-items: center; text-align: center; }
.section__head--center .lead { margin-inline: auto; }
.section__head .h2 { max-width: 20ch; }
/* A forced break that a translator can still move, since <br> inside a
   data-i18n element would be destroyed when the string is swapped. */
.h2__line { display: block; }

/* ---- Replay demo -------------------------------------------------------- */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  grid-template-areas: "tape tray" "ctrl tray";
  gap: 20px 28px;
  align-items: start;
  padding: clamp(20px, 3vw, 30px);
  border-radius: calc(var(--r-card) + 8px);
  background: var(--raised);
  border: var(--hairline-w) solid var(--hairline);
  box-shadow: var(--shadow-card);
}

.demo__tape { grid-area: tape; }

/* The buffer, drawn as what it actually is: a strip of already-encoded frames
   moving right to left, the oldest dissolving off the left edge because that
   is the part being thrown away. Abstract tick marks were the first draft and
   they said nothing — a filmstrip says "this is video, and it is already
   here" without a caption. */
.tape {
  position: relative;
  height: 88px;
  border-radius: var(--r-tile);
  background: var(--deck);
  border: var(--hairline-w) solid rgba(255, 90, 80, 0.40);
  overflow: hidden;
  isolation: isolate;
}

.tape__film { position: absolute; inset: 0; display: flex; }
.tape__strip {
  display: flex; gap: 2px; padding-right: 2px;
  animation: film 26s linear infinite;
  will-change: transform;
}
@keyframes film { to { transform: translate3d(-100%, 0, 0); } }
.tape__frame {
  flex: none; height: 88px; aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--deck-2);
}

/* Older than your limit: gone. The gradient is the discard. */
.tape__age {
  position: absolute; inset: 0 auto 0 0; width: 34%;
  background: linear-gradient(90deg,
    var(--deck) 18%, rgba(26, 26, 28, 0.82) 46%, rgba(26, 26, 28, 0.35) 74%, transparent);
  pointer-events: none;
}

.tape__label {
  position: absolute; left: 10px; top: 9px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 6px;
  background: rgba(10, 10, 12, 0.62);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 0.62rem; letter-spacing: 0.11em; font-weight: 600;
  color: rgba(255, 202, 197, 0.96);
}
.tape__labelDot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-dot);
  animation: rec 2.4s var(--ease) infinite;
}
.tape__now {
  position: absolute; top: 0; bottom: 0; right: 0; width: 2px;
  background: var(--accent-dot);
  box-shadow: 0 0 16px 3px rgba(255, 59, 48, 0.65);
}
.tape__flash {
  position: absolute; inset: 0; border-radius: var(--r-tile);
  background: #FFF; opacity: 0; pointer-events: none;
}
.tape.is-saving .tape__flash { animation: flash 480ms var(--ease); }
@keyframes flash {
  0%   { opacity: 0.55; }
  100% { opacity: 0; }
}

.tape__axis {
  display: flex; justify-content: space-between;
  margin-top: 9px; font-size: 0.7rem; color: var(--ink-4);
}

.demo__controls {
  grid-area: ctrl;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

.keycap {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--raised);
  border: var(--hairline-w) solid var(--hairline);
  box-shadow: 0 2px 0 rgba(22, 22, 26, 0.10), var(--shadow-contact);
  transition: transform var(--press), box-shadow var(--press), background var(--hover);
}
.keycap:hover { background: #FFF; }
.keycap:active,
.keycap.is-down {
  transform: translateY(2px);
  box-shadow: 0 0 0 rgba(22, 22, 26, 0.10), var(--shadow-contact);
}
.keycap kbd {
  font-family: var(--sans); font-size: 0.9rem; font-weight: 560;
  min-width: 26px; padding: 3px 6px; text-align: center;
  border-radius: 6px; background: var(--btn-quiet);
}
.keycap__hint {
  margin-left: 6px; padding-left: 10px;
  border-left: var(--hairline-w) solid var(--hairline);
  font-size: 0.82rem; color: var(--ink-3);
}

.demo__caption { font-size: 0.86rem; color: var(--ink-3); max-width: 46ch; }

.demo__tray {
  grid-area: tray;
  border-left: var(--hairline-w) solid var(--hairline);
  padding-left: 26px;
  /* Room for four clips reserved up front, so pressing the key fills a space
     that was already there instead of shoving the page down. */
  min-height: 216px;
}
.demo__trayHead {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-4);
  margin-bottom: 12px;
}
.demo__count { color: var(--ink); font-size: 0.8rem; }

.tray { display: grid; gap: 8px; }
.tray__empty { font-size: 0.85rem; color: var(--ink-4); }

.tray__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: 10px;
  background: var(--sunk);
  animation: land 460ms var(--spring) both;
}
@keyframes land {
  from { opacity: 0; transform: translate3d(-24px, -8px, 0) scale(0.9); }
  to   { opacity: 1; transform: none; }
}
.tray__thumb {
  width: 54px; height: 30px; border-radius: 5px; object-fit: cover;
  background: var(--deck-2); flex: none;
}
.tray__meta { display: grid; gap: 1px; min-width: 0; }
.tray__name {
  font-size: 0.79rem; font-weight: 540;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tray__sub { font-size: 0.7rem; color: var(--ink-3); }

@media (max-width: 860px) {
  .demo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tape" "ctrl" "tray";
  }
  .demo__tray {
    border-left: 0; padding-left: 0; min-height: 0;
    border-top: var(--hairline-w) solid var(--hairline); padding-top: 20px;
  }
}

/* ---- Steps -------------------------------------------------------------- */

.steps {
  display: grid; gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(44px, 5vw, 66px);
}
.step { display: grid; gap: 9px; align-content: start; }
.step__num {
  font-size: 0.74rem; font-weight: 600; color: var(--accent);
  letter-spacing: 0.04em;
}
.step__title { font-size: 1.06rem; font-weight: 620; letter-spacing: -0.02em; }
.step__body { font-size: 0.93rem; color: var(--ink-2); line-height: 1.55; }

@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* ---- Game marquee ------------------------------------------------------- */

.marquee {
  display: grid; gap: clamp(10px, 1.4vw, 16px);
  padding: clamp(6px, 1vw, 12px) 0 clamp(30px, 4vw, 48px);
  /* The mask hides the ends but does not clip layout — without this the rows
     are wider than the viewport and the whole document scrolls sideways. */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  user-select: none;
}
.marquee__row { display: flex; width: max-content; }
.marquee__track {
  display: flex; gap: clamp(10px, 1.4vw, 16px);
  padding-right: clamp(10px, 1.4vw, 16px);
  animation: march var(--dur, 80s) linear infinite;
  will-change: transform;
}
.marquee__row--rev .marquee__track { animation-direction: reverse; }
@keyframes march { to { transform: translate3d(-100%, 0, 0); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

.cover {
  flex: none;
  width: clamp(76px, 8.4vw, 116px);
  aspect-ratio: 2 / 3;
  border-radius: 9px;
  object-fit: cover;
  background: var(--sunk);
  border: var(--hairline-w) solid var(--hairline);
  box-shadow: var(--shadow-contact);
  transition: transform 320ms var(--spring), box-shadow var(--hover);
}
.cover:hover { transform: translateY(-6px) scale(1.03); box-shadow: var(--shadow-card); }

/* The marquee is 36 cover images and therefore zero text. This paragraph is
   the same 36 titles as prose, which is the version search engines and answer
   engines can actually read. Quiet on purpose: it is set at the size of a
   caption because it is a caption, not a keyword dump. */
.games__titles {
  max-width: 74ch; margin: 0 auto clamp(20px, 3vw, 30px);
  text-align: center;
  font-size: 0.88rem; line-height: 1.6; color: var(--ink-3);
  text-wrap: pretty;
}

.tags {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-bottom: 22px;
}
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 15px; border-radius: var(--r-pill);
  background: var(--raised);
  border: var(--hairline-w) solid var(--hairline);
  font-size: 0.85rem; font-weight: 520; color: var(--ink-2);
  box-shadow: var(--shadow-contact);
}
.tag__icon { width: 17px; height: 17px; flex: none; object-fit: contain; }
.tag__icon--rpcs3 { width: 18px; height: 18px; border-radius: 3px; }
.tag__icon--dolphin { width: 18px; height: 18px; }
.tag__icon--pcsx2 { width: 18px; height: 18px; }
.tag__icon--retroarch { width: 18px; height: 18px; }
.tag__icon--parallels { width: 17px; height: 17px; }

/* ---- Menu bar workflow ------------------------------------------------- */

.menu-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.84fr) minmax(430px, 1.16fr);
  align-items: center;
  gap: clamp(44px, 7vw, 92px);
  margin-bottom: clamp(96px, 11vw, 152px);
}
.menu-feature__copy { display: grid; align-content: center; gap: 16px; }
.menu-feature__copy .h2 { max-width: 13ch; }
.menu-feature__copy .lead { max-width: 48ch; }

.menu-benefits {
  display: grid; gap: 0;
  margin-top: 14px;
  border-top: var(--hairline-w) solid var(--hairline);
}
.menu-benefits > div {
  display: grid; grid-template-columns: minmax(126px, 0.72fr) 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: var(--hairline-w) solid var(--hairline);
}
.menu-benefits dt { font-size: 0.9rem; font-weight: 620; letter-spacing: -0.016em; }
.menu-benefits dd { font-size: 0.86rem; line-height: 1.5; color: var(--ink-3); }

.menu-demo {
  overflow: hidden;
  min-width: 0;
  border-radius: calc(var(--r-win) + 6px);
  background: #242428;
  color: var(--deck-ink);
  border: var(--hairline-w) solid rgba(0, 0, 0, 0.5);
  box-shadow: var(--shadow-win);
}
.menu-demo__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 38px; padding: 0 14px;
  background: #151518;
  border-bottom: var(--hairline-w) solid rgba(255, 255, 255, 0.08);
  font-size: 0.71rem; color: rgba(242, 241, 238, 0.72);
}
.menu-demo__app { display: inline-flex; align-items: center; gap: 7px; font-weight: 560; color: var(--deck-ink); }
.menu-demo__app img { width: 18px; height: 18px; }
.menu-demo__clock { font-size: 0.67rem; color: rgba(242, 241, 238, 0.52); white-space: nowrap; }

.menu-popover {
  width: min(84%, 430px);
  margin: clamp(28px, 5vw, 52px) auto;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(250, 249, 247, 0.98);
  color: var(--ink);
  border: var(--hairline-w) solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 28px 64px -24px rgba(0, 0, 0, 0.72), 0 2px 8px rgba(0, 0, 0, 0.22);
}
.menu-popover__head,
.menu-popover__source,
.menu-popover__row,
.menu-popover__length {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px;
  border-bottom: var(--hairline-w) solid var(--hairline);
}
.menu-popover__head > span:first-child { display: inline-flex; align-items: center; gap: 9px; font-weight: 640; }
.menu-popover__head img { width: 28px; height: 28px; border-radius: 6px; box-shadow: var(--shadow-contact); }
.menu-popover__state { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--ink-3); }
.menu-popover__state i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dot); }

.menu-popover__source { background: rgba(22, 22, 26, 0.035); }
.menu-popover__source > img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; }
.menu-popover__source > span:nth-child(2),
.menu-popover__row > span:first-child,
.menu-popover__length > span:first-child { display: grid; margin-right: auto; line-height: 1.25; }
.menu-popover small { font-size: 0.66rem; color: var(--ink-3); }
.menu-popover strong { font-size: 0.8rem; font-weight: 600; letter-spacing: -0.012em; }
.menu-popover__source > .mono { margin-left: auto; font-size: 0.68rem; color: var(--ink-3); white-space: nowrap; }

.shortcut-keys { display: flex; gap: 4px; }
.shortcut-keys kbd {
  display: grid; place-items: center;
  min-width: 26px; height: 24px; padding-inline: 6px;
  border-radius: 5px;
  background: var(--raised);
  border: var(--hairline-w) solid rgba(22, 22, 26, 0.16);
  box-shadow: 0 1px 0 rgba(22, 22, 26, 0.14);
  font: 560 0.72rem/1 var(--sans);
}
.length-options { display: flex; gap: 2px; padding: 2px; border-radius: 7px; background: rgba(22, 22, 26, 0.06); }
.length-options i { padding: 4px 6px; border-radius: 5px; font: normal 0.64rem/1 var(--mono); color: var(--ink-3); }
.length-options .is-on { background: var(--raised); color: var(--ink); box-shadow: var(--shadow-contact); }
.menu-popover__open { display: block; padding: 12px 16px; text-align: center; font-size: 0.76rem; font-weight: 570; color: var(--ink-2); }

@media (max-width: 940px) {
  .menu-feature { grid-template-columns: 1fr; }
  .menu-feature__copy { max-width: 650px; }
  .menu-feature__copy .h2 { max-width: 16ch; }
}
@media (max-width: 520px) {
  .menu-benefits > div { grid-template-columns: 1fr; gap: 4px; }
  .menu-demo__clock { display: none; }
  .menu-popover { width: calc(100% - 32px); }
  .menu-popover__length { align-items: flex-start; flex-direction: column; }
  .length-options { width: 100%; justify-content: space-between; }
  .length-options i { flex: 1; text-align: center; }
}

/* ---- The product window ------------------------------------------------- */

/* Built as markup rather than a screenshot: it stays sharp on any display,
   reflows on a phone, and the buffer readout can actually tick. */
.win {
  border-radius: var(--r-win);
  background: var(--deck);
  border: var(--hairline-w) solid rgba(0, 0, 0, 0.5);
  box-shadow: var(--shadow-win);
  overflow: hidden;
  color: var(--deck-ink);
}

.win__bar {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  height: 38px;
  background: var(--deck-2);
  border-bottom: var(--hairline-w) solid var(--deck-line);
}
.win__lights { position: absolute; left: 13px; display: flex; gap: 7px; }
.win__lights i { width: 11px; height: 11px; border-radius: 50%; background: #3A3A3E; }
.win__lights i:nth-child(1) { background: #FF5F57; }
.win__lights i:nth-child(2) { background: #FEBC2E; }
.win__lights i:nth-child(3) { background: #28C840; }
.win__title { font-size: 0.79rem; font-weight: 560; color: var(--deck-ink-2); }

.win__body { display: grid; grid-template-columns: 208px minmax(0, 1fr); }

.win__side {
  display: grid; align-content: start; gap: 6px;
  padding: 14px 10px 0;
  background: rgba(255, 255, 255, 0.026);
  border-right: var(--hairline-w) solid var(--deck-line);
  min-height: 420px;
  grid-template-rows: auto auto auto 1fr auto;
}
.side__nav { display: grid; gap: 1px; }
.side__item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 7px;
  font-size: 0.83rem; color: var(--deck-ink-2); letter-spacing: -0.008em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side__item.is-active { background: rgba(255, 255, 255, 0.09); color: var(--deck-ink); font-weight: 540; }
.side__item.is-target { background: rgba(255, 59, 48, 0.13); color: var(--deck-ink); font-weight: 540; }
.side__dot {
  margin-left: auto; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-dot); flex: none;
}
.side__art { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; flex: none; }
.side__head {
  padding: 12px 9px 3px;
  font-size: 0.64rem; font-weight: 640; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(242, 241, 238, 0.38);
}
.side__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin: 0 -10px; padding: 11px 16px;
  border-top: var(--hairline-w) solid var(--deck-line);
  font-size: 0.74rem; color: var(--deck-ink-2);
}
.side__hold { display: inline-flex; align-items: center; gap: 6px; }
.side__pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent-dot);
  animation: rec 2.4s var(--ease) infinite;
}

/* Sidebar glyphs, drawn as masks so one rule colours them all. */
.side__ico {
  width: 15px; height: 15px; flex: none;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.side__ico[data-ico="grid"] { -webkit-mask-image: var(--ico-grid); mask-image: var(--ico-grid); }
.side__ico[data-ico="rec"]  { -webkit-mask-image: var(--ico-rec);  mask-image: var(--ico-rec); }
.side__ico[data-ico="wave"] { -webkit-mask-image: var(--ico-wave); mask-image: var(--ico-wave); }
.side__ico[data-ico="key"]  { -webkit-mask-image: var(--ico-key);  mask-image: var(--ico-key); }
.side__ico[data-ico="disp"] { -webkit-mask-image: var(--ico-disp); mask-image: var(--ico-disp); }
.side__ico[data-ico="chat"] { -webkit-mask-image: var(--ico-chat); mask-image: var(--ico-chat); }

:root {
  --ico-grid: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect x="1.5" y="1.5" width="5.5" height="5.5" rx="1.4" fill="black"/><rect x="9" y="1.5" width="5.5" height="5.5" rx="1.4" fill="black"/><rect x="1.5" y="9" width="5.5" height="5.5" rx="1.4" fill="black"/><rect x="9" y="9" width="5.5" height="5.5" rx="1.4" fill="black"/></svg>');
  --ico-rec:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6.2" fill="none" stroke="black" stroke-width="1.5"/><circle cx="8" cy="8" r="2.6" fill="black"/></svg>');
  --ico-wave: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g fill="black"><rect x="1" y="6" width="1.7" height="4" rx="0.85"/><rect x="4.3" y="3.4" width="1.7" height="9.2" rx="0.85"/><rect x="7.6" y="5" width="1.7" height="6" rx="0.85"/><rect x="10.9" y="2.2" width="1.7" height="11.6" rx="0.85"/><rect x="14" y="6.4" width="1.5" height="3.2" rx="0.75"/></g></svg>');
  --ico-key:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect x="1.4" y="3.4" width="13.2" height="9.2" rx="2" fill="none" stroke="black" stroke-width="1.4"/><rect x="4.2" y="9.2" width="7.6" height="1.5" rx="0.75" fill="black"/></svg>');
  --ico-disp: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect x="1.2" y="2.4" width="13.6" height="9" rx="1.6" fill="none" stroke="black" stroke-width="1.4"/><rect x="5.4" y="13" width="5.2" height="1.4" rx="0.7" fill="black"/></svg>');
  --ico-chat: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M8 2.2c3.6 0 6.4 2.2 6.4 5s-2.8 5-6.4 5c-.7 0-1.4-.1-2-.2L3 13.6l.7-2.3C2.3 10.4 1.6 9 1.6 7.2c0-2.8 2.8-5 6.4-5z" fill="black"/></svg>');
}

.win__main { padding: 18px clamp(14px, 2vw, 22px) 22px; min-width: 0; }
.win__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.win__h { font-size: 1.32rem; font-weight: 660; letter-spacing: -0.026em; }
.win__seg {
  display: flex; gap: 2px; padding: 2px;
  border-radius: 8px; background: rgba(255, 255, 255, 0.07);
  font-size: 0.75rem; color: var(--deck-ink-2);
}
.win__seg span { padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.win__seg .is-on { background: rgba(255, 255, 255, 0.13); color: var(--deck-ink); font-weight: 540; }
.win__sub { margin-top: 4px; font-size: 0.74rem; color: rgba(242, 241, 238, 0.42); }
.win__day {
  margin: 20px 0 9px;
  font-size: 0.64rem; font-weight: 640; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(242, 241, 238, 0.38);
}
.win__grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tile {
  position: relative;
  border-radius: var(--r-tile);
  background: var(--deck-2);
  border: var(--hairline-w) solid var(--deck-line);
  overflow: hidden;
  transition: transform 320ms var(--spring), box-shadow var(--hover);
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.8); }
.tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tile__dur {
  position: absolute; top: 7px; right: 7px;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 0.65rem; color: #FFF;
}
.tile figcaption {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 9px 9px;
  font-size: 0.75rem; font-weight: 520;
  white-space: nowrap; overflow: hidden;
}
.tile figcaption > span {
  margin-left: auto; font-size: 0.68rem;
  color: rgba(242, 241, 238, 0.42); font-weight: 400;
}

@media (max-width: 900px) {
  .win__body { grid-template-columns: 1fr; }
  .win__side { display: none; }
  .win__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .win__seg span:nth-child(3) { display: none; }
}

/* ---- Capture cards ------------------------------------------------------ */

.cards {
  display: grid; gap: clamp(18px, 2vw, 26px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card3 {
  display: grid; align-content: start; gap: 12px;
  padding: clamp(16px, 1.6vw, 20px);
  border-radius: calc(var(--r-card) + 6px);
  background: var(--raised);
  border: var(--hairline-w) solid var(--hairline);
  box-shadow: var(--shadow-card);
}
.card3__stage {
  display: grid; gap: 14px;
  padding: 16px; margin-bottom: 4px;
  border-radius: var(--r-card);
  background: var(--sunk);
  border: var(--hairline-w) solid var(--hairline-2);
}
.card3__body { font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; }

@media (max-width: 1000px) { .cards { grid-template-columns: 1fr; } }

/* Scope: a clip with a notification landing on top of it. */
.scope {
  position: relative;
  border-radius: var(--r-tile);
  overflow: hidden;
  background: var(--deck-2);
  aspect-ratio: 16 / 9;
}
.scope__shot { width: 100%; height: 100%; object-fit: cover; }
.scope__toast {
  position: absolute; top: 10px; right: 10px; left: 22%;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(28, 28, 32, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: var(--hairline-w) solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.7);
  color: #FFF; font-size: 0.72rem;
  transition: opacity 340ms var(--ease), transform 420ms var(--spring), filter 340ms var(--ease);
}
.scope__avatar {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  background: linear-gradient(140deg, #7C8CF8, #A97CF8);
}
.scope__msg { display: grid; line-height: 1.25; min-width: 0; }
.scope__msg b { font-weight: 600; }
.scope__msg { color: rgba(255, 255, 255, 0.72); }
.scope__msg b { color: #FFF; }

.scope__badge {
  position: absolute; left: 10px; bottom: 10px;
  padding: 4px 8px; border-radius: 6px;
  background: rgba(255, 59, 48, 0.92); color: #FFF;
  font-size: 0.6rem; font-weight: 640; letter-spacing: 0.09em;
  transition: background 300ms var(--ease);
}
/* Window-scoped: the toast never entered the capture, so it leaves. */
.scope.is-scoped .scope__toast {
  opacity: 0; transform: translate3d(14px, -6px, 0) scale(0.94);
  filter: blur(3px);
}
.scope.is-scoped .scope__badge { background: rgba(40, 168, 96, 0.94); }

.switch {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.86rem; font-weight: 520; color: var(--ink-2);
  text-align: left;
}
.switch__track {
  position: relative; flex: none;
  width: 38px; height: 22px; border-radius: var(--r-pill);
  background: rgba(22, 22, 26, 0.16);
  transition: background 260ms var(--ease);
}
.switch__knob {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #FFF; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: transform 320ms var(--spring);
}
.switch[aria-pressed="true"] .switch__track { background: #28A860; }
.switch[aria-pressed="true"] .switch__knob { transform: translateX(16px); }
.switch:hover .switch__label { color: var(--ink); }

/* Mixer: three tracks, one of them muted. */
.mix { display: grid; gap: 10px; }
.mix__row {
  display: grid; grid-template-columns: 62px minmax(0, 1fr);
  align-items: center; gap: 12px;
  transition: opacity 300ms var(--ease);
}
.mix__row.is-muted { opacity: 0.26; }
.mix__name { font-size: 0.8rem; font-weight: 540; color: var(--ink-2); }
.mix__bars { display: flex; align-items: center; gap: 3px; height: 38px; }
.mix__bars i {
  flex: 1; min-width: 3px; border-radius: 2px;
  background: var(--ink);
  height: 14%;
  transform-origin: center;
  animation: vu 1.1s var(--ease) infinite alternate;
}
.mix__row[data-mix-row="game"]  .mix__bars i { background: var(--ink); }
.mix__row[data-mix-row="voice"] .mix__bars i { background: #6E7CF0; }
.mix__row[data-mix-row="mic"]   .mix__bars i { background: var(--accent); }
.mix__row.is-muted .mix__bars i { animation-play-state: paused; }
@keyframes vu { to { height: var(--h, 70%); } }

/* Race: the number that is the whole argument. */
.race { display: grid; gap: 6px; justify-items: start; padding: 6px 2px 2px; }
.race__num {
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.2rem);
  font-weight: 640; letter-spacing: -0.045em; line-height: 1;
}
.race__num small { font-size: 0.4em; font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.race__label { font-size: 0.83rem; color: var(--ink-3); }
.race__bar {
  width: 100%; height: 6px; margin-top: 10px;
  border-radius: 3px; background: rgba(22, 22, 26, 0.09);
  overflow: hidden;
}
.race__bar span {
  display: block; height: 100%; width: 0;
  border-radius: 3px; background: var(--accent);
  transition: width 900ms var(--ease);
}
.race__foot { font-size: 0.75rem; color: var(--ink-4); letter-spacing: 0; }

/* ---- Storage and performance ------------------------------------------- */

.efficiency {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr);
  overflow: hidden;
  border-radius: calc(var(--r-card) + 8px);
  background: var(--raised);
  border: var(--hairline-w) solid var(--hairline);
  box-shadow: var(--shadow-lift);
}
.efficiency__primary { padding: clamp(30px, 5vw, 54px); }
.efficiency__kicker {
  display: block; margin-bottom: 10px;
  font-size: 0.74rem; font-weight: 640; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.efficiency__value {
  display: block;
  font-size: clamp(3.2rem, 2rem + 4.5vw, 5.4rem);
  line-height: 0.96; letter-spacing: -0.065em; font-weight: 620;
}
.efficiency__value small { font-size: 0.28em; color: var(--ink-3); letter-spacing: -0.02em; }
.efficiency__primary > p { margin-top: 10px; max-width: 30ch; color: var(--ink-2); }
.efficiency__buffer {
  position: relative; height: 8px; margin-top: clamp(34px, 5vw, 52px);
  border-radius: var(--r-pill); background: rgba(22, 22, 26, 0.08);
}
.efficiency__buffer span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--ink); opacity: 0.82; }
.efficiency__buffer i {
  position: absolute; right: -1px; top: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  transform: translateY(-50%); background: var(--accent-dot);
  box-shadow: 0 0 0 5px var(--raised);
}
.efficiency__bufferLabel {
  display: flex; justify-content: space-between; max-width: none !important;
  margin-top: 10px !important; font: 0.68rem/1.3 var(--mono); color: var(--ink-4) !important;
}
.efficiency__facts {
  display: grid; align-content: stretch;
  border-left: var(--hairline-w) solid var(--hairline);
}
.efficiency__facts > div {
  display: grid; align-content: center; gap: 6px;
  padding: 20px clamp(24px, 4vw, 38px);
  border-bottom: var(--hairline-w) solid var(--hairline);
}
.efficiency__facts > div:last-child { border-bottom: 0; }
.efficiency__facts dt { font-size: 0.76rem; color: var(--ink-3); }
.efficiency__facts dd { font-size: 1rem; font-weight: 600; letter-spacing: -0.018em; }
.performance-note { margin-top: 24px; }

@media (max-width: 760px) {
  .efficiency { grid-template-columns: 1fr; }
  .efficiency__facts { border-left: 0; border-top: var(--hairline-w) solid var(--hairline); }
}

/* ---- Small grids -------------------------------------------------------- */

.grid {
  display: grid; gap: clamp(18px, 2vw, 26px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(36px, 4vw, 52px);
}
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cell dt { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.016em; margin-bottom: 4px; }
.cell dd { font-size: 0.88rem; color: var(--ink-3); line-height: 1.5; }
.feature-glyphs .cell {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px;
  padding-top: 18px;
  border-top: var(--hairline-w) solid var(--hairline);
}
.cell__glyph {
  width: 23px; height: 23px; margin-top: 1px;
  fill: none; stroke: var(--ink-2); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 880px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grid, .grid--4 { grid-template-columns: 1fr; } }

/* ---- Pricing ------------------------------------------------------------ */

.pricing {
  width: min(100%, 650px);
  margin-inline: auto;
}

.card {
  padding: clamp(24px, 3vw, 32px);
  border-radius: calc(var(--r-card) + 6px);
  background: var(--raised);
  border: var(--hairline-w) solid var(--hairline);
  box-shadow: var(--shadow-card);
}
.card--price { padding: clamp(28px, 5vw, 46px); border-radius: calc(var(--r-card) + 10px); }

.price-product { display: flex; align-items: center; gap: 13px; }
.price-product img { width: 48px; height: 48px; border-radius: 11px; box-shadow: var(--shadow-lift); }
.price-product span { display: grid; gap: 2px; }
.price-product strong { font-size: 1rem; font-weight: 640; letter-spacing: -0.018em; }
.price-product small { font-size: 0.8rem; color: var(--ink-3); }

.card__price { display: flex; align-items: baseline; gap: 9px; margin: 28px 0 22px; }
.card__amount { font-size: clamp(2.4rem, 1.7rem + 2.2vw, 3rem); font-weight: 640; letter-spacing: -0.05em; }
.card__once { font-size: 0.87rem; color: var(--ink-3); }

.ticks { display: grid; gap: 11px; margin-bottom: 28px; }
.ticks li {
  position: relative; padding-left: 26px;
  font-size: 0.92rem; color: var(--ink-2);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.34em;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent-wash);
}
.ticks li::after {
  content: ""; position: absolute; left: 4.6px; top: 0.62em;
  width: 6px; height: 3.2px;
  border-left: 1.6px solid var(--accent); border-bottom: 1.6px solid var(--accent);
  transform: rotate(-45deg);
}

.card__fine { font-size: 0.76rem; color: var(--ink-3); line-height: 1.5; }
.card__body { font-size: 0.94rem; color: var(--ink-2); margin: 10px 0 20px; }

.price__buy { display: none; }
[data-checkout="on"] .price__buy { display: flex; }
.price__waitlist {
  padding-top: 24px;
  border-top: var(--hairline-w) solid var(--hairline);
}
[data-checkout="on"] .price__waitlist { display: none; }
.price__waitlistTitle { margin-bottom: 12px; font-size: 0.9rem; font-weight: 600; letter-spacing: -0.014em; }
.price__fineprint {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 22px; padding-top: 18px;
  border-top: var(--hairline-w) solid var(--hairline-2);
}

.mas { display: none; margin-top: 10px; }
[data-mas="on"] .mas { display: block; }
.mas__inner {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 18px; border-radius: var(--r-pill);
  border: var(--hairline-w) solid var(--hairline);
  background: var(--raised);
  transition: background var(--hover);
}
.mas:hover .mas__inner { background: var(--btn-quiet); }
.mas__glyph { width: 17px; height: 17px; }
.mas__text { display: grid; line-height: 1.05; text-align: left; }
.mas__text small { font-size: 0.6rem; color: var(--ink-3); }
.mas__text strong { font-size: 0.92rem; font-weight: 570; letter-spacing: -0.016em; }

/* ---- Waitlist ----------------------------------------------------------- */

.waitlist__label {
  display: block; margin-bottom: 7px;
  font-size: 0.78rem; font-weight: 560; color: var(--ink-3);
}
.waitlist__row { display: flex; gap: 8px; }
.waitlist__input {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  border-radius: var(--r-field);
  border: var(--hairline-w) solid var(--hairline);
  background: var(--raised);
  transition: border-color var(--hover), box-shadow var(--hover);
}
.waitlist__input::placeholder { color: var(--ink-4); }
.waitlist__input:focus {
  outline: none;
  border-color: rgba(22, 22, 26, 0.3);
  box-shadow: 0 0 0 3px rgba(22, 22, 26, 0.07);
}
.waitlist__note, .waitlist__done { margin-top: 10px; font-size: 0.78rem; color: var(--ink-3); }

@media (max-width: 520px) {
  .waitlist__row { flex-direction: column; }
  .waitlist__row .btn { width: 100%; }
  .price__fineprint { display: grid; gap: 6px; }
}

/* ---- FAQ ---------------------------------------------------------------- */

.faq { border-top: var(--hairline-w) solid var(--hairline); }
.qa { border-bottom: var(--hairline-w) solid var(--hairline); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 19px 2px;
  font-size: 1.01rem; font-weight: 550; letter-spacing: -0.018em;
  cursor: pointer; list-style: none;
  transition: color var(--hover);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa summary::after {
  content: ""; flex: none;
  width: 11px; height: 11px;
  border-right: 1.7px solid var(--ink-4); border-bottom: 1.7px solid var(--ink-4);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 260ms var(--ease), border-color var(--hover);
}
.qa[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); border-color: var(--accent); }
.qa__body { padding: 0 2px 21px; max-width: 62ch; }
.qa__body p { font-size: 0.94rem; color: var(--ink-2); line-height: 1.6; }
.qa[open] .qa__body { animation: qaIn 320ms var(--ease); }
@keyframes qaIn {
  from { opacity: 0; transform: translate3d(0, -5px, 0); }
  to   { opacity: 1; transform: none; }
}

/* ---- Closing ------------------------------------------------------------ */

.close {
  padding: var(--pad-y) var(--pad-x);
  text-align: center;
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255, 122, 89, 0.10), transparent 70%),
    var(--paper);
  border-top: var(--hairline-w) solid var(--hairline);
}
.close__inner { max-width: 640px; margin-inline: auto; display: grid; justify-items: center; gap: 18px; }
.close .lead { max-width: 40ch; }

/* ---- Footer ------------------------------------------------------------- */

.foot {
  padding: clamp(36px, 4vw, 52px) var(--pad-x);
  background: var(--sunk);
  border-top: var(--hairline-w) solid var(--hairline);
}
.foot__inner {
  max-width: var(--wide); margin-inline: auto;
  display: grid; gap: 16px; justify-items: center; text-align: center;
}
.foot__links { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.foot__links a {
  font-size: 0.88rem; color: var(--ink-2);
  transition: color var(--hover);
}
.foot__links a:hover { color: var(--ink); }
.foot__note { font-size: 0.76rem; color: var(--ink-4); max-width: 62ch; line-height: 1.55; }

/* ---- Document pages ----------------------------------------------------
   Terms, privacy and the press kit share this stylesheet and have their own
   small vocabulary: a measured column of running text, a three column footer
   and the press kit's download tiles. */

.shell { max-width: var(--wide); margin-inline: auto; padding-inline: var(--pad-x); }
.shell--narrow { max-width: 720px; }

.prose { padding: clamp(48px, 6vw, 82px) 0 clamp(56px, 7vw, 96px); }
.prose h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem);
  line-height: 1.06; letter-spacing: -0.035em; font-weight: 700;
}
.prose h2 {
  font-family: var(--display);
  margin: clamp(32px, 3.6vw, 46px) 0 10px;
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.25; letter-spacing: -0.022em; font-weight: 640;
}
.prose h3 { margin: 24px 0 8px; font-size: 1rem; font-weight: 620; letter-spacing: -0.018em; }
.prose p, .prose li { color: var(--ink-2); line-height: 1.65; margin-bottom: 12px; }
.prose ul, .prose ol { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.prose li { margin-bottom: 6px; }
.prose a { color: var(--accent); text-underline-offset: 3px; text-decoration: underline; }
.prose a:hover { color: var(--ink); }
.prose__meta {
  margin-top: 12px; padding-bottom: 8px;
  font-size: 0.88rem; color: var(--ink-3);
}
.prose code, .prose .mono { font-family: var(--mono); font-size: 0.92em; }

.assets {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 20px 0 8px;
}
.asset {
  display: flex; align-items: center; gap: 12px;
  padding: 14px; border-radius: var(--r-card);
  border: var(--hairline-w) solid var(--hairline);
  transition: background var(--hover), box-shadow var(--hover), transform var(--press);
}
/* A download tile is a control, not a link in running text, so it opts out of
   the prose link treatment it would otherwise inherit. */
.prose .asset { color: inherit; text-decoration: none; }
.asset:hover { background: var(--raised); box-shadow: var(--shadow-lift); }
.asset:active { transform: translateY(0.5px); }
.asset--wide { grid-column: 1 / -1; }
.asset img { width: 44px; height: 44px; flex: none; border-radius: 9px; }
.asset__name { display: grid; gap: 2px; font-size: 0.92rem; font-weight: 560; letter-spacing: -0.014em; }
.asset__size { font-size: 0.78rem; font-weight: 400; color: var(--ink-3); }
.raised { background: var(--raised); box-shadow: var(--shadow-contact); }

.foot__brand { display: grid; gap: 8px; }
.foot__line { font-size: 0.86rem; color: var(--ink-3); }
.foot__cols {
  display: grid; gap: 22px 40px;
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
}
.foot__col { display: grid; gap: 7px; align-content: start; }
.foot__col a { font-size: 0.88rem; color: var(--ink-2); transition: color var(--hover); }
.foot__col a:hover { color: var(--ink); }
.foot__head {
  font-size: 0.7rem; font-weight: 640; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 2px;
}
.foot__legal {
  margin-top: clamp(28px, 3vw, 40px); padding-top: 20px;
  border-top: var(--hairline-w) solid var(--hairline);
  font-size: 0.78rem; color: var(--ink-4);
}

/* The document pages lay their footer out in two columns; the landing page
   footer is a single centred stack and keeps its own rules above. */
.foot .shell.foot__inner {
  display: flex; flex-wrap: wrap; gap: 32px;
  justify-content: space-between; text-align: left;
}

@media (max-width: 620px) {
  .foot .shell.foot__inner { flex-direction: column; gap: 26px; }
}

/* ---- 404 ---------------------------------------------------------------- */

.notfound {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--pad-x);
  background:
    radial-gradient(ellipse 60% 60% at 50% 18%, rgba(255, 116, 82, 0.12), transparent 70%),
    var(--paper);
}
.notfound__inner {
  display: grid; justify-items: center; gap: 18px;
  max-width: 520px; text-align: center;
}
.notfound__code {
  font-size: 0.8rem; font-weight: 620; letter-spacing: 0.14em;
  color: var(--accent);
}
.notfound__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.notfound__links {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center;
  margin-top: 10px; font-size: 0.85rem;
}
.notfound__links a { color: var(--ink-3); transition: color var(--hover); }
.notfound__links a:hover { color: var(--ink); }

/* ---- Reveal ------------------------------------------------------------- */

/* Only armed when JavaScript is running (main.js sets data-js), so a script
   failure can never leave the page blank. */
[data-js="on"] .reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-js="on"] .reveal.is-in { opacity: 1; transform: none; }

/* ---- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* The drum has no resting frame of its own, so give it one: a static fan
     with the front card square to the reader. */
  .reel__drum { animation: none; }
  .tape__strip { animation: none; }
  .marquee__track { animation: none; }
  [data-js="on"] .reveal { opacity: 1; transform: none; }
}