/* Gigbuilder Games — the host-facing sales page (gigbuildergames.com). Redesign 2026-10-02.
 *
 * SHOWTIME DARK (Scott's pick). The page sells the NIGHT, so it is lit like one: a deep stage
 * with the game screens as the light sources, and the five BINGO ball hues as the only saturated
 * colour. Each game section takes one hue as its light: bingo = I red, trivia = B blue,
 * HitList = O magenta. Gold (G) is the action colour: every button that does something.
 *
 * Display: Anton. Body: Heebo. The same pair as the player app (see the @font-face note below).
 * Ball hues are copied verbatim from games/bingo/src/columns.css. Change them there first.
 */

/* Anton + Heebo — the player app's faces (Scott picked option A, 2026-10-02), so the sales page,
   the phone and the TV read as one brand. Files copied from packages/shell-player/src/fonts.
   Heebo is variable (100–900); Anton has one weight. Latin subsets only, like the player app. */
@font-face {
  font-family: "Anton";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/anton-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Heebo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/heebo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  --stage:      oklch(0.165 0.030 285);
  --stage-deep: oklch(0.125 0.026 285);
  --stage-lift: oklch(0.215 0.034 285);
  --ink:        oklch(0.965 0.012 85);
  --ink-soft:   oklch(0.965 0.012 85 / 0.74);
  --ink-mute:   oklch(0.965 0.012 85 / 0.56);
  --line:       oklch(0.965 0.012 85 / 0.13);
  --line-firm:  oklch(0.965 0.012 85 / 0.26);

  /* Ball hues — games/bingo/src/columns.css */
  --b: oklch(0.700 0.185 250);
  --i: oklch(0.720 0.180 25);
  --n: oklch(0.780 0.165 145);
  --g: oklch(0.790 0.160 85);
  --o: oklch(0.700 0.190 320);
  --g-hi: oklch(0.860 0.150 85);
  --on-g: oklch(0.200 0.030 70);

  /* --slab keeps its name (it is "the display face" throughout this file); it is Anton now. */
  --slab: "Anton", "Oswald", Impact, "Arial Narrow", sans-serif;
  --sans: "Heebo", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --fs-body: clamp(1.02rem, 0.97rem + 0.24vw, 1.14rem);
  --fs-lede: clamp(1.14rem, 1.04rem + 0.5vw, 1.4rem);
  --fs-h3:   clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
  --fs-h2:   clamp(2.6rem, 1.65rem + 3.8vw, 4.95rem);
  /* Sized so "are gigs now." holds one line in the hero column at laptop widths. Anton is
     condensed, so it runs ~18% larger than Ultra did for the same line length. */
  --fs-h1:   clamp(3.05rem, 1.4rem + 4.25vw, 5.2rem);

  --gut: clamp(1rem, 0.5rem + 3vw, 3.5rem);
  --max: 78rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--stage);
  color: var(--ink);
  font: 400 var(--fs-body)/1.65 var(--sans);
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h1, h2 { font-family: var(--slab); line-height: 1.02; letter-spacing: 0.01em; text-wrap: balance; }
p { margin: 0; }
strong { font-weight: 700; color: var(--ink); }
:focus-visible { outline: 3px solid var(--g); outline-offset: 3px; border-radius: 4px; }

/* In-page anchors land below the sticky masthead, not under it. */
#games, #console, #night, #faq, #demo { scroll-margin-top: 5.5rem; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: var(--gut); top: 0.75rem; z-index: 50; background: var(--g); color: var(--on-g); padding: 0.5rem 0.9rem; border-radius: 6px; }

/* ─── buttons ───────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: 700 1rem/1 var(--sans); letter-spacing: 0.01em;
  text-decoration: none; border-radius: 999px; padding: 0.85rem 1.4rem; min-height: 44px;
  border: 2px solid transparent; cursor: pointer;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease), border-color 160ms var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--g); color: var(--on-g); box-shadow: 0 0 0 0 oklch(0.790 0.160 85 / 0); }
.btn-gold:hover { background: var(--g-hi); box-shadow: 0 0 32px -4px oklch(0.790 0.160 85 / 0.55); }
.btn-line { border-color: var(--line-firm); color: var(--ink); }
.btn-line:hover { border-color: var(--ink); }
.btn-lg { font-size: 1.08rem; padding: 1.05rem 1.7rem; }
.btn-sm { font-size: 0.92rem; padding: 0.6rem 1.05rem; min-height: 40px; }

/* ─── masthead ──────────────────────────────────────────────────────────────────────── */
.mast {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem var(--gut);
  background: oklch(0.165 0.030 285 / 0.82);
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.mast.scrolled { border-bottom-color: var(--line); }
.mark { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.mark-ball {
  display: grid; place-items: center; flex: none;
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  font: 400 1rem/1 var(--slab); color: var(--on-g);
  background: radial-gradient(circle at 34% 28%, var(--g-hi), var(--g) 55%, oklch(0.580 0.152 85));
}
.mark-words { font: 800 1.08rem/1 var(--sans); letter-spacing: -0.01em; }
.mark-words span { color: var(--g); }
.mast-nav { display: flex; align-items: center; gap: clamp(0.6rem, 0.2rem + 1.4vw, 1.6rem); }
.mast-nav a:not(.btn) { text-decoration: none; font-weight: 600; font-size: 0.96rem; color: var(--ink-soft); }
.mast-nav a:not(.btn):hover { color: var(--ink); }
@media (max-width: 760px) {
  .mast-nav a[href^="#"]:not(.btn) { display: none; }
}
/* Narrow phones: hide the words visually but keep them as the link's accessible name. */
@media (max-width: 400px) {
  .mark-words { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ─── hero ──────────────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  max-width: var(--max); margin: 0 auto;
  padding: clamp(2.5rem, 1rem + 6vw, 6.5rem) var(--gut) clamp(3rem, 1rem + 6vw, 6rem);
  isolation: isolate;
  /* The stage wash (::before) and the drifting balls deliberately reach past the hero, out to the
     window edge. The sideways clip lives on html/body, NOT here: clipping the hero itself cut the
     wash off in a hard vertical edge at the 78rem content width. */
}
/* Stage wash: two coloured spots and a warm floor bounce. Light, not decoration. */
.hero::before {
  content: ""; position: absolute; inset: -10% -20% -5%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 55% at 78% 40%, oklch(0.700 0.190 320 / 0.30), transparent 70%),
    radial-gradient(35% 45% at 95% 85%, oklch(0.700 0.185 250 / 0.26), transparent 70%),
    radial-gradient(45% 40% at 10% 100%, oklch(0.790 0.160 85 / 0.10), transparent 70%);
}
.kicker {
  font-weight: 800; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--g); margin-bottom: 1.1rem;
}
.hero h1 { font-size: var(--fs-h1); }
/* No max-width on ledes or band lines on this page: they run the full column (Scott, 2026-10-02,
   and the standing rule from FTF). Paragraph measure is left to the columns. */
.lede { font-size: var(--fs-lede); color: var(--ink-soft); margin-top: 1.4rem; line-height: 1.55; }
.hero-do { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; }
.hero-trial { margin-top: 1.25rem; font-size: 0.95rem; color: var(--ink-mute); }
.hero-trial strong { color: var(--ink-soft); }

.hero-stage { position: relative; }
.screen {
  margin: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-firm);
  box-shadow:
    0 0 0 8px oklch(0.110 0.020 285),
    0 30px 80px -20px oklch(0.700 0.190 320 / 0.45),
    0 50px 120px -30px oklch(0.700 0.185 250 / 0.40);
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
  transform-origin: 60% 50%;
}

/* Floating balls — the same identity as the TV balls: hue ring, specular highlight. */
.balls { position: absolute; inset: -6%; z-index: 2; pointer-events: none; }
.ball {
  --hue: var(--b);
  position: absolute; left: var(--x); top: var(--y);
  width: clamp(2.8rem, 1.8rem + 3vw, 4.4rem); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-content: center; text-align: center;
  font: 400 clamp(0.62rem, 0.5rem + 0.4vw, 0.85rem)/1 var(--slab); color: var(--hue);
  background: radial-gradient(circle at 32% 26%, oklch(0.990 0.005 264) 0 18%, oklch(0.930 0.010 264) 55%, oklch(0.800 0.012 264));
  border: 3px solid var(--hue);
  box-shadow: 0 12px 26px -8px oklch(0 0 0 / 0.55), 0 0 30px -6px var(--hue);
  /* Starts only once gb.js adds .motion, a few seconds after load: continuous motion during
     load kept the page from ever being "visually complete" (Lighthouse Speed Index). */
}
.motion .ball { animation: drift 9s ease-in-out infinite var(--d); }
.ball b { display: block; font-weight: 400; font-size: 1.7em; color: oklch(0.200 0.020 264); margin-top: 0.08em; }
.ball-b { --hue: var(--b); } .ball-i { --hue: var(--i); } .ball-n { --hue: var(--n); }
.ball-g { --hue: var(--g); } .ball-o { --hue: var(--o); }
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-6deg); }
  50%      { transform: translate3d(0, -14px, 0) rotate(5deg); }
}

/* First-load: the headline and copy are visible at once (they are the LCP, and a fade-in cost a
   full second of Speed Index on mobile, 2026-10-02). Only the screen gets a short power-on flash,
   and it starts visible, so it never delays the page being drawn. */
.js .screen { animation: power 700ms var(--ease) both; }
@keyframes power {
  from { filter: brightness(1.8) saturate(0.4); }
  to   { filter: none; }
}

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero-stage { max-width: 40rem; margin-inline: auto; width: 100%; }
  .screen { transform: none; }
  .balls { inset: -8% -2%; }
}

/* ─── ticker ────────────────────────────────────────────────────────────────────────── */
.ticker {
  overflow: hidden; border-block: 1px solid var(--line);
  background: var(--stage-deep);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display: flex; width: max-content; }
.motion .ticker-track { animation: tick 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker ul { display: flex; margin: 0; padding: 0; list-style: none; }
.ticker li {
  display: flex; align-items: center; gap: 1.6rem; padding: 1.05rem 0 1.05rem 1.6rem;
  font: 400 clamp(0.95rem, 0.85rem + 0.4vw, 1.2rem)/1 var(--slab); white-space: nowrap; color: var(--ink);
}
.ticker li::after { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--g); }
.ticker li:nth-child(5n+1)::after { background: var(--b); }
.ticker li:nth-child(5n+2)::after { background: var(--i); }
.ticker li:nth-child(5n+3)::after { background: var(--n); }
.ticker li:nth-child(5n+4)::after { background: var(--g); }
.ticker li:nth-child(5n+5)::after { background: var(--o); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ─── shared section rhythm ─────────────────────────────────────────────────────────── */
.why, .games-intro, .night, .kit, .price, .faq, .demo {
  max-width: var(--max); margin: 0 auto; padding-inline: var(--gut);
}

/* ─── why ───────────────────────────────────────────────────────────────────────────── */
.why {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  padding-block: clamp(4rem, 2rem + 6vw, 8rem);
}
.why h2 { font-size: clamp(2.5rem, 1.65rem + 3.07vw, 4.25rem); }
.why h2 span { color: var(--g); }
.why-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: why; }
.why-list li {
  counter-increment: why;
  display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 1rem;
  padding: 1.35rem 0; border-top: 1px solid var(--line);
}
.why-list li:last-child { border-bottom: 1px solid var(--line); }
.why-list li::before {
  content: counter(why, decimal-leading-zero); grid-row: span 2;
  font: 400 1.35rem/1.2 var(--slab); color: var(--ink-mute);
}
.why-list h3 { font: 800 var(--fs-h3)/1.25 var(--sans); }
.why-list p { color: var(--ink-soft); margin-top: 0.3rem; max-width: 52ch; }
@media (max-width: 860px) { .why { grid-template-columns: 1fr; } }

/* ─── games ─────────────────────────────────────────────────────────────────────────── */
.games-intro { padding-top: clamp(1rem, 0.5rem + 2vw, 2rem); padding-bottom: clamp(2.5rem, 1rem + 3vw, 4rem); }
.games-intro h2 { font-size: var(--fs-h2); }
.games-intro p { color: var(--ink-soft); font-size: var(--fs-lede); margin-top: 0.8rem; }   /* full column width (Scott, 2026-10-02) */

.game {
  --hue: var(--i);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  max-width: var(--max); margin: 0 auto 1.5rem;
  padding: clamp(3rem, 1.5rem + 5vw, 6rem) var(--gut);
  border-radius: 28px;
  background:
    radial-gradient(60% 80% at var(--spot, 85%) 50%, color-mix(in oklch, var(--hue) 30%, transparent), transparent 72%),
    var(--stage-deep);
  border: 1px solid color-mix(in oklch, var(--hue) 28%, transparent);
}
.game-trivia  { --hue: var(--b); --spot: 15%; }
.game-hitlist { --hue: var(--o); }
.game-mixer   { --hue: var(--n); --spot: 15%; }
.game-mixer .game-copy { order: 2; }
.game-trivia .game-copy { order: 2; }

.game-tag { font: 800 0.8rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--hue); }
.game h2 { font-size: clamp(3.3rem, 1.9rem + 5.4vw, 6.4rem); margin-top: 0.6rem; }
.game h2 span { display: block; font-size: 0.42em; color: var(--hue); margin-top: 0.3em; }
.game-lede { font-size: var(--fs-lede); color: var(--ink-soft); margin-top: 1rem; line-height: 1.55; }
.facts { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.facts li { position: relative; padding-left: 1.6rem; color: var(--ink-soft); }
.facts li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 0.7rem; height: 0.7rem; border-radius: 50%;
  background: var(--hue); box-shadow: 0 0 12px var(--hue);
}

.game-visual { position: relative; display: grid; justify-items: center; gap: 1.6rem; }

/* Real screenshots: the host's big screen, with the player's phone (or a HitList card) standing
   in front of it, so every game shows both sides of the night at once. */
/* The screen keeps ~4% clear on the overlap side so the phone can stand OUTSIDE its edge,
   covering a corner, never the middle of the console. */
/* Overlays sit on the LEFT corner for every game: on all three TV boards the live information
   (current call, now playing, the question) is on the right, and the left is the pattern grid
   or leaderboard, which the phone or card repeats anyway. */
.shots { display: block; position: relative; padding: 0 0 clamp(2rem, 1rem + 4vw, 4rem) 4%; }
.shot-screen {
  width: 100%; border-radius: 14px; border: 1px solid var(--line-firm);
  box-shadow: 0 0 0 6px oklch(0.090 0.015 285), 0 40px 90px -30px color-mix(in oklch, var(--hue) 75%, transparent);
}
.shot-phone {
  position: absolute; left: -2%; bottom: 0;
  width: 27%; min-width: 6.2rem;
  border-radius: 1.2rem; border: 1px solid var(--line-firm);
  box-shadow: 0 0 0 6px oklch(0.090 0.015 285), 0 30px 60px -16px oklch(0 0 0 / 0.7), 0 0 50px -10px color-mix(in oklch, var(--hue) 70%, transparent);
  transform: rotate(-4deg);
}
.shot-solo { transform: rotate(-1.5deg); }

/* HitList: a printed-style card of real song titles. */
.songcard {
  width: min(30rem, 92vw); padding: 1.1rem;
  border-radius: 1.1rem; background: oklch(0.140 0.040 320);
  border: 1px solid color-mix(in oklch, var(--hue) 40%, transparent);
  box-shadow: 0 40px 90px -30px color-mix(in oklch, var(--hue) 80%, transparent);
  transform: rotate(2deg);
}
.songcard-head { font: 400 1.05rem/1 var(--slab); color: var(--hue); text-align: center; padding-bottom: 0.9rem; }
.songs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.3rem; }
.songs span {
  display: grid; place-items: center; text-align: center; aspect-ratio: 1; padding: 0.25rem;
  border-radius: 0.45rem; background: oklch(0.215 0.045 320);
  font: 700 clamp(0.5rem, 0.42rem + 0.32vw, 0.72rem)/1.15 var(--sans); color: var(--ink-soft);
  overflow-wrap: anywhere; hyphens: auto;
}
.songs .d { background: var(--o); color: oklch(0.985 0.005 320); }
.songs .free { font: 400 0.75rem/1 var(--slab); color: var(--g); background: oklch(0.250 0.050 320); }

/* On HitList the song card plays the phone's part: smaller, standing in front of the console. */
.shot-card {
  position: absolute; left: -2%; bottom: 0;
  width: 44%; min-width: 11rem; padding: 0.55rem; transform: rotate(-3deg);
}
.shot-card .songcard-head { font-size: 0.78rem; padding-bottom: 0.45rem; }
.shot-card .songs { gap: 0.22rem; }
.shot-card .songs span { font-size: clamp(0.36rem, 0.28rem + 0.26vw, 0.5rem); border-radius: 0.3rem; padding: 0.1rem;
  overflow-wrap: normal; word-break: normal; hyphens: auto; -webkit-hyphens: auto; }  /* break "Obses-sion", never "Obsessio-n" */
.shot-card .songs .free { font-size: 0.6rem; }

@media (max-width: 860px) {
  .game { grid-template-columns: 1fr; border-radius: 0; margin-bottom: 0; border-inline: 0; }
  .game-trivia .game-copy, .game-mixer .game-copy { order: 0; }
}

/* ─── host console (tabs) ───────────────────────────────────────────────────────────── */
.console { max-width: var(--max); margin: 0 auto; padding: clamp(4rem, 2rem + 6vw, 8rem) var(--gut) 0; }
.console-head h2 { font-size: var(--fs-h2); }
.console-head p { color: var(--ink-soft); font-size: var(--fs-lede); margin-top: 0.9rem; line-height: 1.55; }
.console-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 2rem 0 1.4rem; }
.console-tabs [role="tab"] {
  font: 700 1rem/1 var(--sans); color: var(--ink-soft); cursor: pointer;
  min-height: 44px; padding: 0.7rem 1.3rem; border-radius: 999px;
  background: transparent; border: 2px solid var(--line-firm);
  transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease);
}
.console-tabs [role="tab"]:hover { color: var(--ink); border-color: var(--ink-soft); }
.console-tabs [role="tab"][aria-selected="true"] { background: var(--g); border-color: var(--g); color: var(--on-g); }
/* Without JS there are no tabs to press: hide the bar and show every console, stacked. */
html:not(.js-ready) .console-tabs { display: none; }
.console-panel { margin: 0 0 1.5rem; }
.console-panel figure { margin: 0; }
.console-panel:focus-visible { outline-offset: 6px; border-radius: 16px; }
.console-panel img {
  width: 100%; border-radius: 16px; border: 1px solid var(--line-firm);
  box-shadow: 0 0 0 7px oklch(0.090 0.015 285), 0 40px 100px -40px oklch(0.790 0.160 85 / 0.35);
}
.console-panel figcaption { margin-top: 1.1rem; color: var(--ink-soft); font-size: 1.02rem; }
.js-ready .console-panel[hidden] { display: none; }
.js-ready .console-panel:not([hidden]) { animation: panelIn 420ms var(--ease); }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js-ready .console-panel:not([hidden]) { animation: none; } }

/* ─── how a night runs ──────────────────────────────────────────────────────────────── */
.night {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 1.5rem clamp(2rem, 1rem + 4vw, 5rem);
  padding-block: clamp(4rem, 2rem + 6vw, 8rem);
}
.night-head { grid-column: 1 / -1; }
.night-head h2 { font-size: var(--fs-h2); }
.night-head p { color: var(--ink-soft); font-size: var(--fs-lede); margin-top: 0.8rem; }
.steps { list-style: none; margin: 1rem 0 0; padding: 0; counter-reset: step; display: grid; gap: 1.8rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 3.4rem 1fr; column-gap: 1.1rem; }
.steps li::before {
  content: counter(step); grid-row: span 2;
  width: 3.1rem; height: 3.1rem; border-radius: 50%; display: grid; place-items: center;
  font: 400 1.25rem/1 var(--slab); color: var(--on-g); background: var(--g);
}
.steps li:nth-child(2)::before { background: var(--n); }
.steps li:nth-child(3)::before { background: var(--b); color: oklch(0.985 0.005 250); }
.steps h3 { font: 800 var(--fs-h3)/1.25 var(--sans); padding-top: 0.55rem; }
.steps p { color: var(--ink-soft); margin-top: 0.35rem; max-width: 54ch; }
.night-room { margin: 1rem 0 0; align-self: start; }
.night-room img { border-radius: 16px; transform: rotate(2deg); box-shadow: 0 30px 70px -26px oklch(0.790 0.160 85 / 0.4); }
.night-room figcaption { margin-top: 1rem; font-size: 0.9rem; color: var(--ink-mute); }
@media (max-width: 860px) { .night { grid-template-columns: 1fr; } .night-room { max-width: 24rem; } }

/* ─── kit ───────────────────────────────────────────────────────────────────────────── */
.kit { padding-block: 0 clamp(4rem, 2rem + 5vw, 7rem); }
.kit h2 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); margin-bottom: 1.6rem; }
.kit dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 2.5rem; }
.kit dl > div { padding: 1.2rem 0; border-top: 1px solid var(--line); }
.kit dt { font-weight: 800; font-size: 1.08rem; }
.kit dd { margin: 0.3rem 0 0; color: var(--ink-soft); }

/* ─── price ─────────────────────────────────────────────────────────────────────────── */
.price {
  text-align: center; display: grid; justify-items: center; gap: 1.4rem;
  padding-block: clamp(4rem, 2rem + 6vw, 7.5rem);
  border-block: 1px solid var(--line);
  background: radial-gradient(50% 70% at 50% 0%, oklch(0.790 0.160 85 / 0.16), transparent 70%);
  max-width: none;
}
.price h2 { font-size: var(--fs-h2); }
.price h2 span { color: var(--g); }
.price p { color: var(--ink-soft); font-size: var(--fs-lede); }

/* ─── faq ───────────────────────────────────────────────────────────────────────────── */
.faq {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem);
  padding-block: clamp(4rem, 2rem + 6vw, 8rem);
}
.faq h2 { font-size: var(--fs-h2); }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.2rem 2.6rem 1.2rem 0; font-weight: 800; font-size: 1.1rem; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.4rem; top: 50%; width: 0.75rem; height: 0.75rem; margin-top: -0.5rem;
  border-right: 2.5px solid var(--g); border-bottom: 2.5px solid var(--g);
  transform: rotate(45deg); transition: transform 240ms var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -0.15rem; }
.faq summary:hover { color: var(--g); }
.faq details p { padding: 0 2.6rem 1.3rem 0; color: var(--ink-soft); max-width: 62ch; }
@media (max-width: 860px) { .faq { grid-template-columns: 1fr; } }

/* ─── demo ──────────────────────────────────────────────────────────────────────────── */
.demo {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 2rem clamp(2rem, 1rem + 4vw, 5rem);
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(4rem, 2rem + 6vw, 8rem);
  scroll-margin-top: 4.5rem;
}
.demo h2 { font-size: var(--fs-h2); }
.demo-copy p { color: var(--ink-soft); font-size: var(--fs-lede); margin-top: 1rem; }
.demo-copy .demo-signin { font-size: 0.98rem; color: var(--ink-mute); margin-top: 1.6rem; }
.demo-signin a { color: var(--g); font-weight: 700; }
.demo-form {
  display: grid; gap: 1rem; padding: clamp(1.2rem, 0.8rem + 2vw, 2.2rem);
  border-radius: 22px; background: var(--stage-lift); border: 1px solid var(--line);
}
.demo-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.demo-form label { display: grid; gap: 0.4rem; font-weight: 700; font-size: 0.95rem; align-content: start; }
.demo-form .opt { font-weight: 400; color: var(--ink-mute); font-size: 0.85rem; }
.demo-form input, .demo-form textarea {
  font: 400 1rem/1.4 var(--sans); color: var(--ink);
  background: var(--stage-deep); border: 1px solid var(--line-firm); border-radius: 12px;
  padding: 0.8rem 0.9rem; min-height: 44px; width: 100%;
}
.demo-form textarea { resize: vertical; }
.demo-form input:focus, .demo-form textarea:focus { outline: none; border-color: var(--g); box-shadow: 0 0 0 3px oklch(0.790 0.160 85 / 0.25); }
.demo-form .btn { justify-self: start; }
.demo-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { min-height: 1.4em; font-weight: 700; }
.form-msg.ok { color: var(--n); }
.form-msg.err { color: var(--i); }
@media (max-width: 860px) { .demo { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .demo-form .row { grid-template-columns: 1fr; } }

/* ─── footer ────────────────────────────────────────────────────────────────────────── */
.foot {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 2rem; align-items: center;
  padding: 2.4rem var(--gut) calc(2.4rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: var(--stage-deep);
}
.foot-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem; justify-content: flex-end; }
.foot-nav a { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; padding-block: 0.6rem; }
.foot-nav a:hover { color: var(--ink); }
.foot-fine { grid-column: 1 / -1; font-size: 0.85rem; color: var(--ink-mute); }
/* Our sites: the family of sites, one row across the bottom (crosslinking pass, 2026-10-02). */
.foot-sites { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.85rem; }
.foot-sites span { color: var(--ink-mute); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.72rem; align-self: center; }
.foot-sites a { color: var(--ink-mute); text-decoration: none; }
.foot-sites a:hover { color: var(--ink); }
@media (max-width: 700px) { .foot { grid-template-columns: 1fr; } .foot-nav { justify-content: flex-start; } }

/* ─── scroll to top: a gold ball that rolls in ──────────────────────────────────────── */
.to-top {
  position: fixed; z-index: 30;
  right: calc(var(--gut) * 0.6 + env(safe-area-inset-right));
  bottom: calc(1.2rem + env(safe-area-inset-bottom));
  width: 3.6rem; height: 3.6rem; border-radius: 50%; text-decoration: none;
  opacity: 0; pointer-events: none;
  transform: translateY(1.5rem) rotate(-120deg);
  transition: opacity 320ms var(--ease), transform 520ms var(--ease);
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top-ball {
  display: grid; place-items: center; align-content: center; width: 100%; height: 100%; border-radius: 50%;
  color: var(--on-g);
  background: radial-gradient(circle at 34% 28%, var(--g-hi), var(--g) 55%, oklch(0.580 0.152 85));
  box-shadow: 0 10px 26px -8px oklch(0 0 0 / 0.6), 0 0 26px -6px var(--g);
  transition: transform 220ms var(--ease);
}
.to-top-ball svg { margin-bottom: -0.15rem; }
.to-top-ball b { font: 400 0.58rem/1 var(--slab); letter-spacing: 0.06em; }
.to-top:hover .to-top-ball { transform: translateY(-3px); }
/* No-JS: the link still works; it just shows all the time near the end of the page. */
html:not(.js-ready) .to-top { opacity: 1; pointer-events: auto; transform: none; position: static; display: block; margin: 0 auto 1.5rem; }

/* ─── scroll reveals: gated on .js-ready, which gb.js sets itself, so a script that fails to
   load can never leave a section hidden. ── */
.js-ready .reveal { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.js-ready .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .motion .ball, .motion .ticker-track { animation: none; }
  .ticker-track { flex-wrap: wrap; width: auto; }
  .ticker-track ul[aria-hidden] { display: none; }
  .js .screen { animation: none; }
  .js-ready .reveal { opacity: 1; transform: none; transition: none; }
  .to-top, .to-top-ball { transition: opacity 150ms linear; transform: none; }
}