/* breaker.studio v5 — the spec sheet.
   The world: the engineering side of a sports broadcast — hairline rules,
   readouts, boards shown at their real canvas, running. Two typefaces, one
   accent. The hero shows the board where it lives: composited over a night
   break stream on a viewer's phone.
   Brand law: "breaker." cut wordmark, Instrument Sans 600, gold period. */

@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/instrument-sans-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0A0B0D;
  --bg-2: #0E1013;
  --panel: #141619;
  --line: rgba(242, 241, 236, 0.10);
  --line-2: rgba(242, 241, 236, 0.20);
  --line-3: rgba(242, 241, 236, 0.34);
  --ink: #F2F1EC;
  --body: #B9B8B2;
  --mute: #8F8E88;
  --gold: #C88D00;
  --gold-hi: #E2A61D;
  --gold-ink: #16150F;
  --live: #E24B4B;

  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, monospace;

  --gutter: clamp(20px, 4.2vw, 52px);
  --wrap: 1280px;
  --section: clamp(88px, 11vw, 160px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-med: 420ms;
  --t-slow: 900ms;
}

/* ---------- reset & ground ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  font: 400 17px/1.6 var(--sans);
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, iframe { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
b, strong { font-weight: 600; color: var(--ink); }
::selection { background: var(--gold); color: var(--gold-ink); }
::-moz-selection { background: var(--gold); color: var(--gold-ink); }
html { scrollbar-color: var(--line-2) var(--bg); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; background: var(--gold); color: var(--gold-ink);
  font: 600 14px var(--sans); text-decoration: none; border-radius: 3px;
  transition: top var(--t-fast) var(--ease-out);
}
.skip:focus { top: 12px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- typography ---------- */
.display {
  font-weight: 600;
  font-size: clamp(40px, 6.2vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
.display .dot, .h2 .dot, .h3 .dot { color: var(--gold); }
.h2 {
  font-weight: 600;
  font-size: clamp(30px, 3.9vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-wrap: balance;
}
.h3 { font-weight: 600; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.lede {
  font-size: clamp(18px, 1.55vw, 21px); line-height: 1.5;
  color: var(--body); max-width: 34em; text-wrap: pretty;
}
.lede b { color: var(--ink); }
p { text-wrap: pretty; }

/* the readout: measurements, states, identifiers. Data only. */
.ro {
  font: 500 12px/1.4 var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--mute); font-variant-numeric: tabular-nums;
}
.ro b { color: var(--ink); font-weight: 500; }

/* ---------- controls ---------- */
/* The gold face is foil. On hover the top edge catches the light and one
   specular band passes across it, the way a pack does when you turn it under
   a lamp. The label and the arrow ride above that layer, so nothing under
   them ever moves or dims. Hover-capable pointers only — on touch a :hover
   sticks after the tap and the sweep would strand mid-button. */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: 4px; border: 1px solid transparent;
  font: 600 15.5px/1 var(--sans); letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.btn-gold { background: var(--gold); color: var(--gold-ink); }
.btn-gold:hover { background: var(--gold-hi); }
.btn-line { background: transparent; color: var(--ink); border-color: var(--line-3); }
.btn-line:hover { border-color: var(--ink); background: rgba(242, 241, 236, 0.04); }
.btn-lg { min-height: 54px; padding: 0 26px; font-size: 16.5px; }
.btn svg {
  width: 16px; height: 16px; flex: none;
  position: relative; z-index: 3;
  transition: transform var(--t-med) var(--ease-out);
}
.btn-t { position: relative; z-index: 3; }

/* the light that runs across the foil; parked off the left edge at rest */
.btn-sheen {
  position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  background: linear-gradient(102deg, transparent 34%, rgba(255, 255, 255, 0.62) 47%,
              rgba(255, 255, 255, 0.12) 56%, transparent 70%);
  transform: translateX(-115%); opacity: 0;
}
/* on the dark line button the same band would read as a white flash */
.btn-line .btn-sheen {
  background: linear-gradient(102deg, transparent 34%, rgba(226, 166, 29, 0.34) 47%,
              rgba(226, 166, 29, 0.08) 56%, transparent 70%);
}
/* the top edge of the foil, lit */
.btn-gold::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px; height: 40%; z-index: 1;
  background: linear-gradient(180deg, rgba(255, 244, 210, 0.55), transparent);
  opacity: 0; transition: opacity var(--t-med) var(--ease-out);
}
@media (hover: hover) {
  .btn:hover svg { transform: translateX(3px); }
  /* its own curve: --ease-out front-loads the travel so hard the band reads
     as a flash instead of a light crossing the face */
  .btn:hover .btn-sheen { animation: btn-sheen 620ms cubic-bezier(0.36, 0.06, 0.28, 1) forwards; }
  .btn-gold:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -14px rgba(226, 166, 29, 0.7); }
  .btn-gold:hover::before { opacity: 1; }
  .btn-line:hover { transform: translateY(-1px); border-color: var(--gold); }
}
@keyframes btn-sheen {
  0%   { transform: translateX(-115%); opacity: 0; }
  12%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateX(115%); opacity: 0; }
}
/* after the hover rules: pressing must always win over the lift */
.btn:active { transform: translateY(1px); }

.tlink {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 500; text-decoration: none;
  text-underline-offset: 5px; text-decoration-thickness: 1px;
}
.tlink:hover { text-decoration: underline; text-decoration-color: var(--gold); }

/* ---------- wordmark (Brand Card construction) ---------- */
.wm { display: inline-block; text-decoration: none; color: var(--ink); line-height: 1; }
.wm-cut {
  position: relative; display: inline-block;
  font: 600 26px/1.1 var(--sans); letter-spacing: -0.055em; color: var(--ink);
}
.wm-cut > span { display: block; }
.wm-cut > span:first-child { clip-path: inset(0 0 38% 0); }
.wm-cut > span:last-child { position: absolute; inset: 0; clip-path: inset(62% 0 0 0); transform: translateX(0.07em); }
.wm-cut i { color: var(--gold); font-style: normal; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--gold-ink);
  display: inline-grid; place-items: center; flex: none;
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 11, 13, 0.82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 66px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a {
  font: 500 14.5px var(--sans); color: var(--body); text-decoration: none;
  letter-spacing: -0.005em; transition: color var(--t-fast);
  padding-block: 4px; /* 18px of type is under the 24px AA target on its own */
}
.nav-links a:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-cta .btn { min-height: 40px; padding: 0 16px; font-size: 14.5px; }
.nav-toggle {
  display: none; width: 44px; height: 44px; margin-right: -8px;
  background: none; border: 0; color: var(--ink); cursor: pointer; border-radius: 4px;
}
.nav-toggle svg { width: 22px; height: 22px; }

/* ---------- hero ---------- */
.hero {
  position: relative; z-index: 0;
  padding-block: clamp(56px, 7vw, 96px) clamp(64px, 8vw, 112px);
  /* capped: at 100svh alone a ~500px copy block floats in the middle of a
     1100px band on a big display, which is most of what read as "empty" */
  min-height: min(calc(100svh - 66px), 900px);
  display: flex; align-items: center;
}
/* the material world as a floor under the whole hero rather than a right-hand
   corner — boxed to the right it stacked on the same side as the phone and
   left the other half of the screen dead. Still never reaches full strength
   until below the copy, and still bleeds past the bottom of the hero into the
   next section's heading — no seam. */
.hero-atmos {
  position: absolute; left: 0; right: 0; top: 38%; bottom: -42%;
  z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 66%, transparent 96%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 40%, #000 66%, transparent 96%);
}
.hero-atmos img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 76%;
  opacity: 0.33;
  /* held back rather than cut off under the copy column */
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.88) 24%, #000 48%, #000 100%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.88) 24%, #000 48%, #000 100%);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.hero-copy { max-width: 640px; }
.hero-copy .display { margin-bottom: clamp(20px, 2.6vw, 30px); }
.hero-copy .lede { margin-bottom: clamp(28px, 3.2vw, 40px); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cta-row .or { color: var(--mute); font-size: 14.5px; }
.hero-line {
  margin-top: clamp(36px, 4.6vw, 60px);
  padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 32px;
}
.hero-line .ro { display: inline-flex; align-items: center; gap: 8px; }
.hero-line .ro::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---------- the phone: the board where it lives ---------- */
/* --pw lives on the column, not the frame: the caption is a SIBLING of the
   frame and needs the same number. Declared on .board-frame it silently fell
   back to its 300px default and set a floor the hero could not shrink past. */
.phone-col {
  /* the phone is the product and has to be readable, but it is a tall object:
     sized on viewport width alone it grows straight off the bottom of a
     1440x900 laptop, so the height term is what actually governs it */
  --pw: clamp(250px, min(25vw, 34svh), 372px);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  min-width: 0; max-width: 100%;
}
.board-frame {
  --screen-r: calc(var(--pw, 300px) * 0.14 - 2px);
  width: min(var(--pw, 300px), 100%);
  border-radius: calc(var(--screen-r) + 6px);
  border: 1px solid var(--line-3);
  background: #050507;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 0 0 2px rgba(255, 255, 255, 0.05),
              0 40px 90px -30px rgba(0, 0, 0, 0.95);
  padding: 5px;
  position: relative;
  transform: rotate(2deg);
}
.board-frame::before, .board-frame::after {
  content: ''; position: absolute; width: 3.5px; border-radius: 2px;
  background: linear-gradient(180deg, #3E4049, #23242B);
}
.board-frame::before { left: -3px; top: 20%; height: 13%; }
.board-frame::after { right: -3px; top: 25%; height: 9.5%; }
.board-crop.phone-screen {
  border-radius: var(--screen-r);
  aspect-ratio: 9 / 19.5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.phone-island {
  position: absolute; top: 1.6%; left: 50%; transform: translateX(-50%);
  width: 29%; height: 3.3%; border-radius: 999px; background: #000; z-index: 4;
}
.phone-island::after {
  content: ''; position: absolute; top: 50%; right: 9%; transform: translateY(-50%);
  width: 13%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #223055, #0B0E17 70%);
}
.phone-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 24px; min-width: min(var(--pw, 300px), 100%); max-width: 100%; }
.phone-cap .ro { white-space: nowrap; }

/* the camera feed under the board */
.feed { position: absolute; inset: 0; z-index: 0; }
.feed-scene {
  position: absolute; inset: -4%;
  background:
    radial-gradient(85% 42% at 50% 74%, rgba(222, 168, 92, 0.30), rgba(222, 168, 92, 0.07) 52%, transparent 74%),
    radial-gradient(60% 24% at 46% 62%, rgba(255, 214, 150, 0.16), transparent 70%),
    radial-gradient(130% 60% at 50% -8%, rgba(84, 92, 118, 0.22), transparent 62%),
    linear-gradient(180deg, transparent 52%, rgba(8, 7, 5, 0.28) 76%, rgba(8, 7, 5, 0.55) 100%),
    linear-gradient(180deg, #14161D 0%, #101116 52%, #1A1410 100%);
}
.feed-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.feed-video.on { opacity: 1; }

/* the stream chrome: live-shopping anatomy, scaled from --bscale so it holds
   its proportions at any phone width. Diegetic colours — this is content on
   a screen, not site chrome. */
.stream-ui {
  position: absolute; inset: 0; z-index: 2;
  font-size: calc(var(--bscale, 0.3) * 40px);
  display: flex; flex-direction: column;
  color: #fff; pointer-events: none;
}
.s-status {
  display: flex; justify-content: space-between; align-items: center;
  height: 5.8%; margin: 0 1.7em; font-size: 0.72em; font-weight: 600; letter-spacing: 0.02em;
}
.s-sig { display: inline-flex; align-items: center; gap: 0.42em; }
.s-sig svg { height: 0.72em; width: auto; display: block; }
.s-top { display: flex; align-items: center; gap: 0.5em; margin: 0.1em 0.9em 0; }
.s-host {
  display: flex; align-items: center; gap: 0.5em; min-width: 0;
  background: rgba(0, 0, 0, 0.42); border-radius: 2em; padding: 0.22em 0.85em 0.22em 0.24em;
}
.s-ava {
  width: 1.9em; height: 1.9em; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #C8992F, #5A4310); font-weight: 700; font-size: 0.95em;
}
.s-hostname { font-size: 0.7em; font-weight: 600; line-height: 1.25; white-space: nowrap; }
.s-hostname em { display: block; font-style: normal; font-weight: 400; opacity: 0.72; font-size: 0.87em; }
.s-live { background: #E5484D; border-radius: 0.45em; padding: 0.34em 0.5em 0.3em; font-size: 0.58em; font-weight: 700; letter-spacing: 0.09em; }
.s-x {
  margin-left: auto; width: 1.9em; height: 1.9em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.42);
}
.s-x svg { height: 0.62em; width: auto; }
.s-hearts { position: absolute; right: 0.9em; bottom: 6.4em; width: 2.4em; height: 10em; }
.s-hearts i { position: absolute; bottom: 0; left: 50%; opacity: 0; }
.s-hearts svg { display: block; width: 1.35em; height: auto; }
.s-hearts i:nth-child(2) svg { width: 1.05em; }
.s-hearts i:nth-child(4) svg { width: 0.9em; }
.s-chat { max-width: 76%; margin: auto 0 0.8em 0.9em; }
.s-chat ul { display: flex; flex-direction: column; gap: 0.42em; }
.s-chat li {
  align-self: flex-start; background: rgba(0, 0, 0, 0.42); border-radius: 1.1em;
  padding: 0.42em 0.85em; font-size: 0.72em; line-height: 1.4;
}
.s-chat b { font-weight: 600; color: #F0CE82; margin-right: 0.3em; }
.s-chat .s-buy { background: rgba(200, 141, 0, 0.42); }
.s-chat .s-buy b { color: #fff; }
.s-dock { display: flex; align-items: center; gap: 0.45em; margin: 0 0.9em 1em; }
.s-say {
  flex: 1; min-width: 0; overflow: hidden; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 2em;
  padding: 0.5em 0.9em; font-size: 0.72em; color: rgba(255, 255, 255, 0.72);
}
.s-ico {
  width: 2.1em; height: 2.1em; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.14);
}
.s-ico svg { width: 0.95em; height: auto; }
.s-cta { background: #fff; color: #101014; font-weight: 600; border-radius: 2em; padding: 0.52em 0.95em; font-size: 0.72em; white-space: nowrap; }
.s-home { width: 36%; height: 0.32em; border-radius: 999px; background: rgba(255, 255, 255, 0.34); margin: 0 auto 0.55em; }

@media (prefers-reduced-motion: no-preference) {
  .feed-scene { animation: feed-breathe 18s ease-in-out infinite alternate; }
  @keyframes feed-breathe { from { transform: scale(1); } to { transform: scale(1.035) translateY(-0.6%); } }
  .s-hearts i { animation: heart-rise 4.2s ease-in infinite; }
  .s-hearts i:nth-child(2) { animation-delay: 1.4s; animation-duration: 3.6s; animation-name: heart-rise-b; }
  .s-hearts i:nth-child(3) { animation-delay: 2.3s; animation-duration: 4.6s; }
  .s-hearts i:nth-child(4) { animation-delay: 3.1s; animation-duration: 3.9s; animation-name: heart-rise-b; }
  @keyframes heart-rise {
    0% { transform: translate(-50%, 0) scale(0.55); opacity: 0; }
    10% { opacity: 0.9; } 62% { opacity: 0.7; }
    100% { transform: translate(calc(-50% + 0.8em), -8.6em) scale(1.05) rotate(9deg); opacity: 0; }
  }
  @keyframes heart-rise-b {
    0% { transform: translate(-50%, 0) scale(0.55); opacity: 0; }
    10% { opacity: 0.85; } 62% { opacity: 0.65; }
    100% { transform: translate(calc(-50% - 1em), -8.2em) scale(0.95) rotate(-11deg); opacity: 0; }
  }
  .s-chat li { animation: chat-in 0.4s cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }
  @keyframes chat-in { from { opacity: 0; transform: translateY(0.8em); } }
}

/* board viewports: 1080×1920 documents scaled to fit — site.js sets --bscale */
.board-crop { position: relative; overflow: hidden; background: #000; background-size: cover; background-position: center top; }
.board-crop iframe {
  position: absolute; top: var(--by, 0); left: var(--bx, 0); z-index: 1;
  width: 1080px; height: 1920px; max-width: none; border: 0;
  transform-origin: 0 0; transform: scale(var(--bscale, 0.25));
  opacity: 0; transition: opacity var(--t-slow) var(--ease-out);
}
.board-crop iframe.ready { opacity: 1; }
.board-crop .plate { position: absolute; top: var(--by, 0); left: 0; width: 100%; height: auto; z-index: 0; }
.board-crop .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; }

/* the hero's one authored moment: the copy settles, the phone lights up.
   Gated on html.js so a page without script is simply visible. */
.js .hero .hero-copy > * { opacity: 0; transform: translateY(14px); }
.js .hero .phone-col { opacity: 0; transform: translateY(22px); }
.hero.is-on .hero-copy > * { opacity: 1; transform: none; }
.hero.is-on .hero-copy > :nth-child(1) { transition: opacity 800ms var(--ease-out) 80ms, transform 900ms var(--ease-out) 80ms; }
.hero.is-on .hero-copy > :nth-child(2) { transition: opacity 800ms var(--ease-out) 220ms, transform 900ms var(--ease-out) 220ms; }
.hero.is-on .hero-copy > :nth-child(3) { transition: opacity 800ms var(--ease-out) 360ms, transform 900ms var(--ease-out) 360ms; }
.hero.is-on .hero-copy > :nth-child(4) { transition: opacity 800ms var(--ease-out) 500ms, transform 900ms var(--ease-out) 500ms; }
.hero.is-on .phone-col { opacity: 1; transform: none; transition: opacity 1000ms var(--ease-out) 300ms, transform 1100ms var(--ease-out) 300ms; }

/* ---------- showcase: one board, its panel, linked live ---------- */
.showcase {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 3.5vw, 48px); align-items: start;
}
.showcase-crop {
  aspect-ratio: 6 / 5;
  box-shadow: 0 0 0 1px var(--line-2), 0 40px 90px -40px rgba(0, 0, 0, 0.95);
}
.showcase-cap { display: flex; justify-content: space-between; gap: 12px; padding: 14px 2px 0; }
.panel-frame {
  position: relative; height: 100%; min-height: 520px;
  background: #0b0f16; overflow: hidden;
  box-shadow: 0 0 0 1px var(--line-2), 0 40px 90px -40px rgba(0, 0, 0, 0.95);
}
.showcase-panel { display: grid; grid-template-rows: 1fr auto; height: 100%; }
.panel-frame iframe {
  width: 100%; height: 100%; border: 0; display: block;
  opacity: 0; transition: opacity var(--t-slow) var(--ease-out);
}
.panel-frame iframe.ready { opacity: 1; }
.panel-frame .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; }

/* other frames we have drawn: a quiet strip of frame art, images only */
.frames { margin-top: clamp(48px, 6vw, 80px); }
.frames-lede { color: var(--mute); font-size: 15px; margin-bottom: 18px; }
.frames-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); }
.frames-row li { display: grid; gap: 10px; }
.frames-row img {
  /* the plate is a 1080×1920 render; show its frame band (canvas rows ~260–770).
     height:auto lets aspect-ratio beat the attribute height. */
  width: 100%; height: auto; aspect-ratio: 1080 / 520; object-fit: cover; object-position: 50% 19%;
  box-shadow: 0 0 0 1px var(--line);
}

/* ======================= below the fold ======================= */
/* sections flow into one another: no rules between them, the hero's foil
   bleeds under the first section's heading */
.sect { position: relative; padding-block: var(--section); }
.sect-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.sect-head .h2 { margin-bottom: 18px; }

/* arrivals: one entrance, used sparingly, from an already-visible default */
.js-arrive [data-arrive] { opacity: 0; transform: translateY(18px); }
.js-arrive [data-arrive].is-in { opacity: 1; transform: none; transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out); }
.js-arrive .show:nth-child(2).is-in, .js-arrive .steps li:nth-child(2).is-in, .js-arrive .feat-item:nth-child(2).is-in { transition-delay: 90ms; }
.js-arrive .show:nth-child(3).is-in, .js-arrive .steps li:nth-child(3).is-in, .js-arrive .feat-item:nth-child(3).is-in { transition-delay: 180ms; }
.js-arrive .steps li:nth-child(4).is-in, .js-arrive .feat-item:nth-child(4).is-in { transition-delay: 270ms; }

/* ---------- boards ---------- */
.show-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 32px) clamp(16px, 2.2vw, 28px); }
.show-crop {
  aspect-ratio: 6 / 5; /* with data-offset, the crop is the board band of the canvas */
  box-shadow: 0 0 0 1px var(--line-2), 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  transition: box-shadow var(--t-med) var(--ease-out);
}
.show:hover .show-crop, .show:focus-within .show-crop { box-shadow: 0 0 0 1px var(--line-3), 0 24px 60px -24px rgba(0, 0, 0, 0.95); }
.show-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 2px 0; }
.show-cap .h3 { font-size: 17px; }
.show-cap .ro { text-align: right; }
.show-note { margin-top: 28px; max-width: 62ch; color: var(--mute); font-size: 15px; }

/* ---------- two-column sections with a spec list ---------- */
.two-col { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.two-col-rev { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.col-copy .h2 { margin-bottom: 18px; }
.col-copy .lede { margin-bottom: clamp(32px, 4vw, 48px); }
.spec { border-top: 1px solid var(--line-2); }
.spec-row { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.spec-row dt { font: 500 12px/1.9 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.spec-row dd { color: var(--body); font-size: 16.5px; line-height: 1.55; }
.spec-row dd::first-line { color: var(--ink); }
.plate-fig { position: relative; aspect-ratio: 4 / 5; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2); background: var(--bg-2); }
.plate-fig img { width: 100%; height: 100%; object-fit: cover; }
.col-fig { position: sticky; top: 96px; }
#look .col-fig img { object-position: 78% 50%; }
.col-fig-wide img { object-position: 30% 50%; }

/* ---------- easy ---------- */
.sect-feat { isolation: isolate; overflow: hidden; }
.feat-atmos { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: -1; pointer-events: none; }
.feat-atmos {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
}
.feat-atmos img {
  width: 100%; height: 100%; object-fit: cover; object-position: 0% 30%; opacity: 0.16;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 75%);
  mask-image: linear-gradient(90deg, #000 0%, #000 35%, transparent 75%);
}
.feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 40px); border-top: 1px solid var(--line-2); }
.feat-item { padding: 24px 0 26px; border-bottom: 1px solid var(--line); position: relative; }
.feat-item::before { content: ''; position: absolute; top: -1px; left: 0; width: 28px; height: 1px; background: var(--gold); }
.feat-item .h3 { margin-bottom: 10px; font-size: 19px; }
.feat-item p { font-size: 15.5px; line-height: 1.55; }

/* ---------- menu: a price-less spec list ---------- */
.menu { border-top: 1px solid var(--line-2); }
.menu-group { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.menu-title { padding-top: 2px; }
.menu-list li { display: grid; grid-template-columns: 240px 1fr; gap: 20px; padding: 12px 0; border-top: 1px solid var(--line); }
.menu-list li:first-child { border-top: 0; padding-top: 0; }
.mi-name { color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
.mi-desc { color: var(--body); font-size: 16px; line-height: 1.5; }

/* ---------- process ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); border-top: 1px solid var(--line-2); }
.steps li { padding-top: 20px; position: relative; }
.steps li::before { content: ''; position: absolute; top: -1px; left: 0; width: 28px; height: 1px; background: var(--gold); }
.step-n { display: block; margin-bottom: 14px; }
.steps .h3 { margin-bottom: 10px; }
.steps p { font-size: 16px; line-height: 1.55; }

/* ---------- call ---------- */
.sect-call { isolation: isolate; overflow-x: clip; padding-block: clamp(120px, 16vw, 220px); }
.call-atmos { position: absolute; left: 0; right: 0; top: -16%; bottom: -26%; z-index: -1; pointer-events: none; }
.call-atmos {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 66%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 66%, transparent 100%);
}
.call-atmos img {
  width: 100%; height: 100%; object-fit: cover; object-position: 0% 60%; opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 85%);
  mask-image: linear-gradient(90deg, #000 0%, #000 40%, transparent 85%);
}
.call-in .display { margin-bottom: 20px; font-size: clamp(38px, 5.4vw, 72px); }
.call-in .lede { margin-bottom: 32px; }
@media (min-width: 961px) {
  .call-in { display: grid; grid-template-columns: 1fr minmax(0, 620px); }
  .call-in > * { grid-column: 2; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .menu-list li { grid-template-columns: 200px 1fr; }
}
@media (max-width: 960px) {
  .hero { min-height: 0; }
  /* minmax(0,·), not 1fr: a bare 1fr keeps an automatic min-content minimum,
     which let the phone caption set a floor wider than the viewport */
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero-copy { max-width: 600px; }
  .phone-col { --pw: min(300px, 74vw); align-items: flex-start; }
  .board-frame { transform: rotate(1.4deg); }
  /* the caption has a whole column to itself here and no room to be precious */
  .phone-cap .ro { white-space: normal; }
  .hero-atmos { top: 58%; left: 0; }
  .hero-atmos img { object-position: 0% 70%; opacity: 0.3; }
  .show-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col, .two-col-rev { grid-template-columns: 1fr; }
  .two-col-rev .col-fig { order: 2; }
  .col-fig { position: static; aspect-ratio: 16 / 9; }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-group { grid-template-columns: 1fr; gap: 14px; }
  .showcase { grid-template-columns: 1fr; }
  .panel-frame { min-height: 460px; }
  .frames-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .frames-row li:nth-child(n+4) { display: none; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .nav-links {
    display: none; position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 16px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
  .nav-links a:last-child { border-bottom: 0; }
  .nav-toggle { display: inline-grid; place-items: center; }
  .nav-cta .btn-line { display: none; }
}
@media (max-width: 640px) {
  .menu-list li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 560px) {
  .display { font-size: clamp(38px, 11.5vw, 52px); letter-spacing: -0.03em; }
  .cta-row .btn { width: 100%; justify-content: center; }
  .cta-row .or { display: none; }
  .show-grid { grid-template-columns: 1fr; }
  .spec-row { grid-template-columns: 1fr; gap: 4px; }
  .steps { grid-template-columns: 1fr; }
  .phone-cap { flex-direction: column; gap: 4px; }
}

/* ---------- target size: nothing tappable under the AA minimum ---------- */
/* These read as text links, so they sit at the type's own 17px height — under
   the 24px WCAG 2.5.8 target, and they are in navs rather than sentences so the
   inline exception does not cover them. 4px takes them to 25px everywhere; a
   finger gets more room again. */
.hero-line .ro, .foot-legal a { padding-block: 4px; }
.foot-mail { display: inline-block; padding-block: 4px; }
@media (pointer: coarse) {
  .hero-line { gap: 4px 32px; }
  .hero-line .ro, .foot-legal a { padding-block: 8px; }
}

/* ---------- reduced motion: static, complete, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .hero .hero-copy > *, .js .hero .phone-col { opacity: 1; transform: none; }
  .board-frame { transform: none; }
  .s-hearts { display: none; }
  .board-crop iframe { transition: none; }
}

/* ---------- questions: answered in plain sight, no accordions ---------- */
.spec-q .spec-row { grid-template-columns: 250px 1fr; padding: 18px 0; }
.spec-q dt { font: 600 17px/1.35 var(--sans); letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.spec-q dd::first-line { color: var(--body); }
.col-copy .h2 + .spec { margin-top: clamp(28px, 3.5vw, 40px); }
@media (max-width: 960px) { .spec-q .spec-row { grid-template-columns: 1fr; gap: 6px; } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } }
#questions .col-fig img { object-position: 50% 58%; }

/* features: the desk plate sits beside the heading; the grid runs full width below */
.feat-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.feat-head .sect-head { margin-bottom: 0; }
.feat-fig { aspect-ratio: 16 / 10; }
.feat-fig img { object-position: 20% 55%; }
/* the refractor now carries the call: its corner sits low-left, the copy sits right */
.call-atmos img { object-position: 0% 100%; opacity: 0.62; }
@media (max-width: 960px) {
  .feat-head { grid-template-columns: 1fr; }
  .feat-fig { aspect-ratio: 16 / 9; }
}
@media (max-width: 960px) {
  /* on a phone the copy spans the width: keep the refractor low and quiet under it */
  .call-atmos img { object-position: 40% 100%; opacity: 0.4; -webkit-mask-image: none; mask-image: none; }
  .call-atmos { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 42%, #000 72%, transparent 100%); }
}

/* ---------- thanks.html: the after-payment page ---------- */
.doc { padding-block: clamp(64px, 9vw, 128px); min-height: calc(100svh - 66px); }
.doc-in { max-width: 680px; margin-inline: auto; }
.doc .display { font-size: clamp(40px, 6vw, 72px); margin-bottom: 14px; }
.doc-stamp { display: block; margin-bottom: 28px; color: var(--gold); }
.doc .lede { margin-bottom: 40px; }
.doc .h3 { margin: 36px 0 10px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.doc p { margin-bottom: 12px; }
.doc-list { list-style: decimal; padding-left: 22px; display: grid; gap: 8px; margin: 8px 0 14px; }
.doc-list li::marker { color: var(--gold); font-weight: 600; }
.doc-cta { margin-top: 40px; }

/* ---------- legal documents (terms, privacy) ---------- */
/* Read as a spec sheet, not a wall: a document readout at the top, numbered
   clauses on hairlines, and a rail that tracks where you are. Same furniture
   as the Questions section, so these do not look like a different website. */
.doc-legal { padding-block: clamp(56px, 7vw, 104px) clamp(72px, 9vw, 128px); }
.legal-in {
  max-width: 1020px; margin-inline: auto;
  display: grid; grid-template-columns: 200px minmax(0, 1fr);
  gap: 0 clamp(32px, 5vw, 76px); align-items: start;
}
.legal-head { grid-column: 1 / -1; margin-bottom: clamp(46px, 6vw, 80px); }
.legal-head .display { font-size: clamp(40px, 6vw, 76px); margin-bottom: 14px; }
.legal-head .lede { margin-bottom: 36px; max-width: 60ch; }
.legal-card { border-top: 1px solid var(--line-2); max-width: 660px; }
.legal-card .spec-row { padding: 13px 0; }
.legal-card dd { font-size: 15.5px; }

.legal-rail { position: sticky; top: 92px; display: grid; align-content: start; gap: 1px; }
.rail-t { font: 500 11px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); margin-bottom: 14px; }
.legal-rail a {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: baseline;
  padding: 8px 0 8px 13px; border-left: 1px solid var(--line);
  color: var(--body); text-decoration: none; font-size: 13.5px; line-height: 1.35;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.legal-rail a b { font: 500 11px/1.5 var(--mono); color: var(--mute); font-weight: 500; transition: color var(--t-fast); }
.legal-rail a:hover { color: var(--ink); border-color: var(--line-3); }
.legal-rail a.is-on { color: var(--ink); border-color: var(--gold); }
.legal-rail a.is-on b { color: var(--gold); }

.legal-body > section { padding-top: 26px; border-top: 1px solid var(--line-2); margin-bottom: 42px; scroll-margin-top: 92px; }
.legal-body > section:last-of-type { margin-bottom: 0; }
.legal-body .h3 { display: grid; grid-template-columns: 46px minmax(0, 1fr); margin: 0 0 12px; padding: 0; border-top: 0; font-size: 21px; }
.cl-n { font: 500 12px/1.95 var(--mono); letter-spacing: 0.06em; color: var(--gold); }
.legal-body p { margin-bottom: 12px; max-width: 64ch; }
.legal-body p:last-child { margin-bottom: 0; }

.legal-end {
  grid-column: 1 / -1; margin-top: clamp(52px, 7vw, 88px);
  padding: clamp(26px, 3.2vw, 38px); border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
}
.legal-end .h3 { margin: 0 0 6px; padding-top: 0; border-top: 0; }
.legal-end p { color: var(--body); max-width: 46ch; }

@media (max-width: 900px) {
  .legal-in { grid-template-columns: 1fr; }
  .legal-rail { position: static; margin-bottom: 44px; }
}

/* ======================= 3 Sep 2026 restructure (bs website design plan) =======================
   hero → [demo slot] → thin CTA bar → brand → install → forever → call → questions → discord → footer.
   The hero readout line is now three anchors into the sections it names. */

/* the readout line links into the page */
.hero-line a.ro { text-decoration: none; transition: color var(--t-fast); }
.hero-line a.ro:hover { color: var(--ink); }
.hero-line a.ro:hover::before { background: var(--gold-hi); }

/* ---------- brand: copy beside a fan of frames ---------- */
.brand-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.brand-list { display: grid; border-top: 1px solid var(--line-2); }
.brand-list li { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.5; }
.brand-list .ro { padding-top: 4px; }

/* the fan: five plates dealt like a hand, pivoting from below the deck */
.fan { display: grid; gap: 8px; }
/* anchored sections clear the sticky nav */
.sect[id], .discord[id] { scroll-margin-top: 78px; }
.fan-deck {
  position: relative; aspect-ratio: 16 / 11; margin: 0 auto; width: 100%;
  --card-w: 46%;
}
.fan-deck li {
  position: absolute; left: 50%; bottom: 22%; width: var(--card-w);
  aspect-ratio: 1080 / 640; overflow: hidden;
  transform-origin: 50% 300%;
  transform: translateX(-50%) rotate(var(--r));
  box-shadow: 0 0 0 1px var(--line-2), 0 30px 70px -30px rgba(0, 0, 0, 0.95);
  background: var(--bg-2);
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.fan-deck li:nth-child(1) { --r: -22deg; z-index: 1; }
.fan-deck li:nth-child(2) { --r: -11deg; z-index: 2; }
.fan-deck li:nth-child(3) { --r: 0deg; z-index: 3; }
.fan-deck li:nth-child(4) { --r: 11deg; z-index: 2; }
.fan-deck li:nth-child(5) { --r: 22deg; z-index: 1; }
.fan-deck li:hover { z-index: 5; transform: translateX(-50%) rotate(var(--r)) translateY(-3%) scale(1.03); box-shadow: 0 0 0 1px var(--line-3), 0 30px 70px -24px rgba(0, 0, 0, 0.95); }
.fan-deck img {
  /* a 1080×1920 render; show the frame band, the way .frames-row did */
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 19%;
}
.fan-cap { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 2px; }

/* ---------- install: copy beside a layered product shot ---------- */
/* the desk lamp pools behind the stage on the right, arriving from above the section and
   dissolving before the next; the OBS window is the hero, the installer floats over its corner */
.sect-install { isolation: isolate; overflow-x: clip; }
.install-atmos { position: absolute; left: 22%; right: -6%; top: -18%; height: 112%; z-index: -1; pointer-events: none; }
.install-atmos {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 62%, transparent 100%);
}
.install-atmos img {
  width: 100%; height: 100%; object-fit: cover; object-position: 38% 42%; opacity: 0.46;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 32%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 32%, #000 100%);
}
.install-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.install-steps { display: grid; gap: 18px; }
.install-steps li { position: relative; padding-left: 22px; display: grid; gap: 3px; }
.install-steps li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.install-steps b { color: var(--ink); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.install-steps span { font-size: 15.5px; color: var(--body); line-height: 1.5; }

.install-stage { position: relative; padding: 0 0 22% 9%; }
.nowrap { white-space: nowrap; }
.mock-obs { position: relative; z-index: 1; }
.mock-installer {
  position: absolute; left: 0; bottom: 0; width: 47%; z-index: 2;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.7));
}
.mock-installer .mock-body { box-shadow: none; }

.mock { display: grid; gap: 0; }
.mock-bar {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: #111317; border: 1px solid var(--line-2); border-bottom: 0; border-radius: 6px 6px 0 0;
}
.mock-dots { display: inline-flex; gap: 6px; }
.mock-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); display: block; }
.mock-body { background: var(--panel); border: 1px solid var(--line-2); border-radius: 0 0 6px 6px; padding: 22px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.95); }

.mock-file { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.mock-ico { width: 34px; height: 42px; flex: none; border: 1px solid var(--line-3); border-radius: 3px; position: relative; background: var(--bg-2); }
.mock-ico::before { content: ''; position: absolute; top: -1px; right: -1px; width: 11px; height: 11px; background: var(--panel); border-left: 1px solid var(--line-3); border-bottom: 1px solid var(--line-3); }
.mock-ico::after { content: ''; position: absolute; left: 7px; right: 7px; bottom: 9px; height: 2px; background: var(--gold); }
.mock-file-name { font: 500 14px/1.3 var(--mono); color: var(--ink); }
.mock-file-name em { display: block; font: 400 13px/1.4 var(--sans); font-style: normal; color: var(--mute); margin-top: 2px; }
.mock-cta { position: relative; display: flex; justify-content: center; padding: 26px 0 22px; }
.mock-btn {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px;
  border-radius: 4px; background: var(--gold); color: var(--gold-ink); font: 600 15px/1 var(--sans);
  box-shadow: 0 0 0 4px rgba(200, 141, 0, 0.18);
}
.mock-cursor { position: absolute; width: 18px; height: auto; left: calc(50% + 34px); top: calc(50% + 4px); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
.mock-steps { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--body); }
.mock-steps li { display: flex; align-items: center; gap: 10px; }
.mock-steps li::before {
  content: ''; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1px solid var(--line-3);
}
.mock-steps li.done::before {
  border-color: var(--gold); background: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-5' fill='none' stroke='%2316150F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mock-steps li.done { color: var(--ink); }

.mock-obs-body { padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr) 156px; gap: 14px; }
.mock-preview {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #000; border: 1px solid var(--line);
}
.mock-preview img {
  /* the plate, aspect-filled the way a 9:16 board sits in a 16:9 preview when the canvas is portrait:
     show the frame band, centred */
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%;
}
.mock-live { position: absolute; top: 8px; left: 8px; padding: 3px 7px; background: var(--live); color: #fff; border-radius: 3px; font-size: 10px; }
.mock-panes { display: grid; gap: 14px; align-content: start; }
.mock-pane { display: grid; gap: 6px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; font-size: 13.5px; line-height: 1.35; color: var(--mute); }
.mock-pane b { color: var(--ink); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mock-pane b::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }

/* ---------- forever: the kept collection ---------- */
/* the binder page lives on the right, arriving from above and dissolving below; the two days
   run down the left as a vertical timeline, and the payoff sits under them, beside the cards */
.sect-forever { isolation: isolate; overflow-x: clip; padding-block: clamp(96px, 12vw, 170px); }
/* sized by width at the image's own ratio, so the binder is seen whole rather than cropped */
.forever-atmos { position: absolute; right: -6%; top: 7%; width: 78%; aspect-ratio: 1376 / 768; z-index: -1; pointer-events: none; }
.forever-atmos {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 80%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 11%, #000 80%, transparent 100%);
}
.forever-atmos img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0.78;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 36%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 36%, #000 100%);
}
.forever-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); }
.forever-grid .col-copy .lede { margin-bottom: clamp(36px, 4vw, 52px); }

/* the vertical timeline: gold stops on a thin rail that fades out after the last one */
.tl { position: relative; display: grid; gap: clamp(26px, 3vw, 38px); padding-left: 30px; }
.tl::before {
  content: ''; position: absolute; left: 4px; top: 8px; bottom: -70px; width: 1px;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold) 70%, transparent 100%);
}
.tl li { position: relative; }
.tl li::before {
  content: ''; position: absolute; left: -30px; top: 4px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--bg);
}
.tl-day { display: block; margin-bottom: 8px; color: var(--gold); }
.tl .h3 { margin-bottom: 8px; }
.tl p { font-size: 16px; line-height: 1.55; max-width: 44ch; }
.js-arrive .tl li:nth-child(2).is-in { transition-delay: 90ms; }
.js-arrive .tl li:nth-child(3).is-in { transition-delay: 180ms; }

.forever-line { margin-top: clamp(80px, 10vw, 140px); }
.forever-line > * { max-width: 720px; }
.forever-h { font-size: clamp(38px, 5.4vw, 72px); margin-bottom: 18px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .brand-grid { grid-template-columns: 1fr; gap: 40px; }
  .fan-deck { --card-w: 52%; aspect-ratio: 16 / 12; max-width: 620px; }
  .install-grid { grid-template-columns: 1fr; gap: 44px; }
  .install-atmos { left: -10%; right: -10%; top: -12%; height: 80%; }
  .install-atmos img { -webkit-mask-image: none; mask-image: none; opacity: 0.32; }
  .install-stage { padding: 0; }
  .mock-installer { position: relative; width: 84%; margin: -10% 0 0 auto; }
  .forever-grid { grid-template-columns: 1fr; }
  /* on a phone the binder becomes a band above the copy instead of a backdrop under it */
  .forever-atmos { position: relative; inset: auto; width: 118%; margin: -14% -9% -6%; aspect-ratio: 16 / 9; }
  .forever-atmos { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%); }
  .forever-atmos img { -webkit-mask-image: none; mask-image: none; opacity: 0.85; object-position: 60% 50%; }
  .sect-forever { padding-top: 0; }
}
@media (max-width: 700px) {
  .mock-obs-body { grid-template-columns: 1fr; }
  .mock-panes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  /* narrower deal so the outer cards stay inside the viewport */
  .fan-deck { --card-w: 58%; aspect-ratio: 16 / 11; }
  .fan-cap { flex-direction: column; gap: 6px; }
  .fan-deck li:nth-child(1) { --r: -14deg; }
  .fan-deck li:nth-child(2) { --r: -7deg; }
  .fan-deck li:nth-child(4) { --r: 7deg; }
  .fan-deck li:nth-child(5) { --r: 14deg; }
  .brand-list li { grid-template-columns: 1fr; gap: 4px; }
  .mock-panes { grid-template-columns: 1fr; }
  .mock-installer { width: 100%; margin: 16px 0 0; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fan-deck li:hover { transform: translateX(-50%) rotate(var(--r)); }
}

/* ---------- discord: the back room ---------- */
/* the desk after the show, lit cool by an off-screen monitor, anchored left and dissolving into
   the copy; the band is a full section now, not a strip */
.discord { position: relative; isolation: isolate; overflow-x: clip; padding-block: clamp(96px, 12vw, 170px); }
.discord-atmos { position: absolute; left: -6%; top: -10%; width: 74%; aspect-ratio: 1376 / 768; z-index: -1; pointer-events: none; }
.discord-atmos {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 28%, #000 76%, transparent 100%);
}
.discord-atmos img {
  width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; opacity: 0.74;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 58%, transparent 100%);
}
.discord-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); }
.discord-copy { grid-column: 2; }
.discord-copy .h2 { margin-bottom: 18px; }
.discord-copy .lede { margin-bottom: 32px; }

/* ---------- footer: the last frame ---------- */
/* the rip, lit gold, behind the final ask; then the wordmark at poster size as the sign-off */
.foot { position: relative; isolation: isolate; overflow-x: clip; padding: clamp(120px, 15vw, 220px) 0 36px; }
.foot-atmos { position: absolute; right: -8%; top: 5%; width: 78%; aspect-ratio: 1376 / 768; z-index: -1; pointer-events: none; }
.foot-atmos {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 72%, transparent 100%);
}
.foot-atmos img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0.8;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
}
.foot-in { display: grid; gap: clamp(72px, 9vw, 130px) 0; }
.foot-in > .foot-row { margin-top: calc(-1 * clamp(72px, 9vw, 130px) + 40px); }
.foot-cta { max-width: 640px; }
.foot-h { font-size: clamp(38px, 5.4vw, 72px); margin-bottom: 20px; }
.foot-cta .lede { margin-bottom: 32px; }

.foot-mark { line-height: 0.82; margin-bottom: -0.06em; }
/* "breaker." is one unbreakable word ~3.3x its font size wide, so a hard 96px
   floor is wider than the wrap below ~356px and shoved the whole closing block
   off-screen. min(96px, 26vw) keeps the poster size everywhere it fits and only
   gives way on the smallest phones. */
.foot-mark .wm-cut { font-size: clamp(min(96px, 26vw), 17.5vw, 250px); letter-spacing: -0.06em; line-height: 0.9; color: var(--ink); }

/* the closing row: one object on the left, the small print squared off right.
   No rule above it — the footer closes on the wordmark, not on a hairline. */
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 40px; padding-top: 30px; }

/* the back room, as a door rather than a word */
.soc {
  display: inline-grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 6px;
  border: 1px solid var(--line-2); color: var(--mute);
  transition: color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.soc svg { width: 22px; height: 22px; }
@media (hover: hover) {
  .soc:hover { color: var(--gold-hi); border-color: var(--gold); transform: translateY(-1px); box-shadow: 0 10px 30px -16px rgba(226, 166, 29, 0.8); }
}
.soc:active { transform: translateY(1px); }

.foot-left { display: flex; align-items: center; gap: 20px; }

.foot-meta { display: grid; gap: 8px; justify-items: end; text-align: right; }
.foot-meta .ro { text-transform: none; letter-spacing: 0.02em; max-width: 58ch; text-wrap: balance; }
.foot-copy { color: var(--mute); }
.foot-mail { color: var(--body); text-decoration: none; }
.foot-mail:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

.foot-legal { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; color: var(--mute); }
.foot-legal i { font-style: normal; color: var(--line-3); }
.foot-legal a { color: var(--body); text-decoration: none; transition: color var(--t-fast); }
.foot-legal a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 4px; }

@media (max-width: 960px) {
  .discord-grid { grid-template-columns: 1fr; }
  .discord-copy { grid-column: 1; }
  .discord-atmos { position: relative; inset: auto; width: 118%; margin: -14% -9% -4%; aspect-ratio: 16 / 9; }
  .discord-atmos { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%); }
  .discord-atmos img { -webkit-mask-image: none; mask-image: none; opacity: 0.85; object-position: 40% 50%; }
  .discord { padding-top: 0; }
  .foot-atmos { right: -20%; top: -4%; width: 120%; }
  .foot-atmos img { -webkit-mask-image: none; mask-image: none; opacity: 0.5; }
  .foot-meta { justify-items: start; text-align: left; }
}
@media (max-width: 560px) {
  .discord .cta-row .ro { width: 100%; }
}

/* the doc pages (thanks, 404) end on the closing row alone */
.foot-plain { padding: 40px 0 36px; }
.foot-plain .foot-row { padding-top: 0; }