/* ═══════════════════════════════════════════════════════════════
   ELOQI — "Studio Light"
   A warm-paper product page. One object at a time, lit well,
   with two dark cinema acts where you see what the phone sees.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* Canvas */
  --paper:      #FBFAF7;
  --paper-2:    #F4F2ED;
  --surface:    #FFFFFF;
  --night:      #0A0C10;

  /* Ink */
  --ink:        #12141A;
  --ink-2:      #55585F;
  --ink-3:      #6F727A;   /* 4.61:1 on paper (was #8B8E96, 3.14:1) */
  --on-night:   #F3F1EC;
  --on-night-2: #9BA1AC;

  /* Brand */
  --blue:       #2BB3FF;
  --blue-deep:  #0B71B2;   /* 5.01:1 on paper, 4.67:1 on paper-2 (was #0C75B8: 4.41:1 on paper-2, an AA miss in the tinted acts) */
  --blue-ink:   #07202F;
  --good:       #6FCF7E;
  --warn:       #F0A63C;
  --bad:        #F0645A;

  /* Lines */
  --line:       rgba(18, 20, 26, .10);
  --line-soft:  rgba(18, 20, 26, .06);
  --line-night: rgba(255, 255, 255, .12);

  /* Type */
  --display: "Bricolage Grotesque", "Bricolage Fallback", "Helvetica Neue", sans-serif;
  --sans:    "Instrument Sans", "Helvetica Neue", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --max:    1220px;
  --act-y:  clamp(5.5rem, 12vw, 11rem);

  /* Motion */
  --ease: cubic-bezier(.22, 1, .36, 1);

  --shadow-sm: 0 1px 2px rgba(18,20,26,.05), 0 4px 14px rgba(18,20,26,.05);
  --shadow-md: 0 2px 6px rgba(18,20,26,.05), 0 18px 44px rgba(18,20,26,.09);
  --shadow-lg: 0 4px 12px rgba(18,20,26,.06), 0 40px 90px rgba(18,20,26,.14);
}

/* ── Metric-matched display fallback ───────────────────────── */
/* Bricolage is 128 KB from Google Fonts, so a slow connection paints in a
   system font first. Measured at the heading weight it sets to 87% of the
   width of Helvetica Neue and Arial — enough that the h1 wrapped onto a
   third line and the hero jumped 42px when the real font landed (0.10 CLS
   on a throttled phone). Scaling the fallback to the same measure makes the
   swap a change of shapes only. Everything on --display sets its own
   line-height, so width is the one metric that has to agree. */
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Liberation Sans"), local("Roboto");
  size-adjust: 87%;
  font-weight: 300 800;
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
/* The bright brand blue is only 2.24:1 on paper, so the ring darkens on
   light ground and brightens on the dark acts. */
:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 3px; border-radius: 4px; }
.act--dark :focus-visible, .close :focus-visible, .foot :focus-visible { outline-color: var(--blue); }

/* ── Touch targets ─────────────────────────────────────────── */
/* These links are laid out at their text height (20–41px). Padding them
   would move the design, so each grows an invisible 44px pointer surface
   centred on itself instead: nothing shifts, the finger gets the area.
   Sideways bleed stays under half the gap to the next target, so no two
   can overlap. Inline links inside prose are deliberately left alone. */
.nav__mark, .nav__links a, .nav__cta, .nav__toggle,
.foot nav a, .btn--sm, .doc__back { position: relative; }
.nav__mark::after,
.nav__links a::before,
.nav__cta::after,
.nav__toggle::after,
.foot nav a::before,
.btn--sm::after,
.doc__back::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
}
.nav__links a::before,
.foot nav a::before { left: -6px; right: -6px; }   /* gaps are 30px / 22px */
.nav__toggle::after { left: -2px; right: -2px; }   /* 40px wide, gap .4rem */

.skip-link {
  position: fixed; top: .75rem; left: .75rem; z-index: 200;
  padding: .6rem 1rem; background: var(--ink); color: #fff;
  border-radius: 8px; transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* ── Type scale ────────────────────────────────────────────── */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 570;
  line-height: .98;
  letter-spacing: -.032em;
  font-variation-settings: "wdth" 96, "opsz" 72;
  text-wrap: balance;
}
h1 { font-size: clamp(2.7rem, 7.2vw, 5.6rem); }
h2 { font-size: clamp(2.1rem, 5.2vw, 4rem); }
h3 { font-size: 1.2rem; line-height: 1.2; letter-spacing: -.02em; font-variation-settings: "wdth" 100, "opsz" 20; }
h1 em { font-style: normal; color: var(--blue-deep); }

.eyebrow {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex; align-items: center; gap: .65rem;
}
.eyebrow b { color: var(--blue-deep); font-weight: 500; }
.act--dark .eyebrow { color: var(--on-night-2); }
.act--dark .eyebrow b { color: var(--blue); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.4rem;
  border-radius: 999px;
  font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform .3s var(--ease), background .25s, box-shadow .3s var(--ease), color .25s, border-color .25s;
}
.btn--primary {
  background: var(--blue); color: var(--blue-ink);
  box-shadow: 0 1px 2px rgba(11,34,51,.16), 0 8px 22px rgba(43,179,255,.28);
}
.btn--primary:hover { background: #46bdff; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(11,34,51,.16), 0 14px 34px rgba(43,179,255,.38); }
.btn--ghost { border: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn--ghost:hover { transform: translateY(-2px); border-color: rgba(18,20,26,.2); box-shadow: var(--shadow-md); }
.btn--lg { padding: 1rem 1.9rem; font-size: 1.02rem; }
.btn--sm { padding: .58rem 1.05rem; font-size: .88rem; }
.btn--full { width: 100%; }
.btn:active { transform: translateY(0) scale(.985); }
.act--dark .btn--ghost { background: rgba(255,255,255,.06); border-color: var(--line-night); color: var(--on-night); box-shadow: none; }

.chip {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .38rem .85rem .38rem .6rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
  font-size: .82rem; font-weight: 500; color: var(--ink-2);
  box-shadow: var(--shadow-sm);
}
.chip__dot {
  position: relative;
  width: 7px; height: 7px; border-radius: 50%; background: var(--blue);
}
/* The ring is a scaled disc rather than an animated box-shadow spread.
   Identical picture (7px dot + 8px spread = 23px, so scale 3.3), but it
   runs on the compositor instead of repainting the chip every frame —
   this animation never stops, so it must never cost the main thread. */
.chip__dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(43,179,255,.55);
  animation: pulse 2.4s infinite;
}
@keyframes pulse {
  0%   { transform: scale(1);   opacity: 1; }
  70%  { transform: scale(3.3); opacity: 0; }
  100% { transform: scale(3.3); opacity: 0; }
}
/* An endless animation nobody can see is pure battery. app.js adds this
   class whenever the decoration leaves the viewport. */
.chip__dot.is-paused::after,
.wave.is-paused i { animation-play-state: paused; }

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100;
  padding: .85rem var(--gutter);
  transition: background .35s var(--ease), backdrop-filter .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(251,250,247,.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--line-soft);
}
/* The bar inverts while a dark act is passing behind it. */
.nav--dark .nav__mark { color: #fff; }
.nav--dark .nav__links a { color: rgba(255,255,255,.68); }
.nav--dark .nav__links a:hover { color: #fff; }
.nav--dark .nav__links a::after { background: #fff; }
.nav--dark .nav__toggle span { background: #fff; }
.nav--dark.is-stuck { background: rgba(9,11,15,.72); border-bottom-color: rgba(255,255,255,.10); }
.nav__inner {
  max-width: var(--max); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem;
}
.nav__mark {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 620; font-size: 1.12rem;
  letter-spacing: -.03em; font-variation-settings: "wdth" 100, "opsz" 18;
}
.nav__mark img { border-radius: 7px; }
.nav__links { display: flex; gap: 1.9rem; margin-inline: auto; }
.nav__links a {
  font-size: .92rem; color: var(--ink-2); font-weight: 500;
  position: relative; transition: color .2s;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1.5px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a[aria-current]::after { transform: scaleX(1); }
.nav__links a[aria-current] { color: var(--ink); }
.nav--dark .nav__links a[aria-current] { color: #fff; }

.nav__toggle { display: none; width: 40px; height: 40px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav__toggle span { width: 18px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease); }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }
.nav__menu {
  flex-direction: column; gap: .25rem;
  margin-top: .85rem; padding: 1rem;
  background: rgba(251,250,247,.94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-md);
}
.nav__menu a { padding: .7rem .4rem; font-size: 1.05rem; font-weight: 500; }
.nav__menu .btn { margin-top: .5rem; }
.nav__menu[hidden] { display: none; }

/* ── Hero ──────────────────────────────────────────────────────────────────────
   SIDE-BY-SIDE above 900px (owner call 2026-07-30): copy LEFT, board RIGHT. The
   headline and the CTA sit where the eye lands first in a left-to-right read, and
   the board becomes the evidence rather than the preamble. Below 900px it stacks
   back to the original centred column — one set of rules, no duplicated markup. */
.hero {
  max-width: var(--max); margin-inline: auto;
  padding: clamp(6rem, 11vh, 8rem) var(--gutter) 0;
  text-align: center;
}
.hero h1 { margin: 1.15rem auto 0; }
.hero .chip { margin-inline: auto; }
.hero__lede {
  max-width: 46ch; margin: 1.35rem auto 0;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  color: var(--ink-2); line-height: 1.55; text-wrap: pretty;
}
.hero__actions { display: flex; gap: .7rem; justify-content: center; margin-top: 1.7rem; flex-wrap: wrap; }

@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
    gap: clamp(1.6rem, 3.2vw, 3.4rem);
    text-align: left;
    padding-top: clamp(4.5rem, 9vh, 7rem);
  }
  /* The headline carries a hard break after "Chess,", so the second line must fit
     "explained out loud." in ONE line or it reads as a three-line stack with an
     orphan. Capped against the COLUMN (not the viewport) for exactly that reason. */
  .hero h1 { font-size: clamp(2.7rem, 5.1vw, 4.4rem); }
  /* The copy column reads as a block: nothing is centred, and the lede is measured
     in characters so the ragged right edge stays even as the column flexes. */
  .hero__copy { justify-self: start; }
  .hero .chip { margin-inline: 0; }
  .hero h1 { margin-inline: 0; }
  .hero__lede { margin-inline: 0; max-width: 38ch; }
  .hero__actions { justify-content: flex-start; }
  /* The board keeps its own aspect and simply fills its column; the viewport-height
     cap that kept it inside the fold when it was full-width no longer applies. */
  .hero__stage { margin-top: 0; }
  /* `.facts` is the hero's THIRD child, so the two-column grid auto-placed it into
     row 2 / column 1 and it rendered at half width under the copy. It spans the full
     grid instead, which also closes the dead gap the half-width row left behind. */
  .facts { grid-column: 1 / -1; }
}

/* Stage: the WebGL board floats on the paper */
.hero__stage { margin-top: clamp(1.1rem, 3vw, 2.2rem); }
.stage {
  position: relative;
  aspect-ratio: 16 / 9;
  width: min(100%, calc(64vh * 16 / 9));
  margin-inline: auto;
}
@media (min-width: 900px) {
  .stage { width: 100%; }
}
.stage canvas, .stage__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
/* The poster carries the fold until (and unless) the live board takes over. */
.stage__poster { opacity: 1; transition: opacity .9s var(--ease); border-radius: 18px; pointer-events: none; }
.stage.is-live .stage__poster { opacity: 0; }
.stage.is-fallback canvas { display: none; }
.stage canvas { cursor: grab; touch-action: pan-y; }
.stage canvas:active { cursor: grabbing; }

.stage__hud { margin-top: 1.1rem; min-height: 4.2rem; }
.stage__say {
  font-family: var(--display);
  font-size: clamp(1.02rem, 2.1vw, 1.32rem);
  font-variation-settings: "wdth" 100, "opsz" 22;
  letter-spacing: -.02em; line-height: 1.3;
  max-width: 36ch; margin-inline: auto;
  min-height: 2.6em;              /* two lines, so the caption never reflows */
}
.stage__say span { display: inline-block; }
.js .stage__say span { animation: sayIn .5s var(--ease) both; }
@keyframes sayIn { from { opacity: 0; transform: translateY(6px); } }
.stage__meta {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin-top: .6rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--ink-3);
}
.stage__meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); opacity: .55; }
/* Notation is case sensitive, so only the game credit gets set in caps. */
.stage__game { opacity: .72; text-transform: uppercase; }
@media (max-width: 640px) { .stage__game, .stage__meta i { display: none; } }

/* Facts strip */
.facts {
  list-style: none; padding: 0;
  margin: clamp(3rem, 7vw, 5.5rem) 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
}
.facts li {
  padding: 1.5rem 1.25rem;
  display: flex; flex-direction: column; gap: .2rem;
  border-right: 1px solid var(--line);
  text-align: left;
}
.facts li:last-child { border-right: 0; }
.facts strong { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }
.facts span { font-size: .85rem; color: var(--ink-3); line-height: 1.45; }
@media (max-width: 720px) {
  .facts { grid-template-columns: 1fr; }
  .facts li { border-right: 0; border-bottom: 1px solid var(--line); padding: 1.1rem 0; }
  .facts li:last-child { border-bottom: 0; }
}

/* ── Acts ──────────────────────────────────────────────────── */
.act { padding: var(--act-y) var(--gutter); }
.act > * { max-width: var(--max); margin-inline: auto; }
.act--tint { background: var(--paper-2); }
.act--dark {
  background: var(--night);
  color: var(--on-night);
  --line: var(--line-night);
  position: relative; overflow: hidden;
}
.act--dark h2 { color: #fff; }
.act--dark .act__lede { color: var(--on-night-2); }
.act--dark::before {
  content: ""; position: absolute; inset: -30% -10% auto; height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(43,179,255,.14), transparent 70%);
  pointer-events: none;
}

.act__head { max-width: 62ch; }
.act__head h2 { margin: 1rem 0 0; }
.act__lede {
  margin-top: 1.15rem; max-width: 52ch;
  font-size: clamp(1rem, 1.5vw, 1.13rem);
  color: var(--ink-2); line-height: 1.6; text-wrap: pretty;
}

/* ── 01 Vision ─────────────────────────────────────────────── */
/* The photograph is composed with the board on the right, so on wide
   screens the copy lives in the empty table on the left of the frame. */
.act--bleed { padding: 0; }
.act--bleed > * { max-width: none; }
.scan { position: relative; isolation: isolate; }
.scan__media { position: relative; }
.scan img { width: 100%; display: block; }
.scan__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scan__hud { position: absolute; inset: auto 0 0; display: flex; gap: .5rem; padding: clamp(.75rem, 2vw, 1.4rem); }

.scan__copy { padding: var(--act-y) var(--gutter) 0; }
.scan__copy h2 { margin: 1rem 0 0; }
.scan__points { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.15rem; }
.scan__points li { display: flex; flex-direction: column; gap: .2rem; }
.scan__points b { font-size: .98rem; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.scan__points span { font-size: .9rem; line-height: 1.5; color: var(--on-night-2); }

@media (min-width: 901px) {
  .scan__copy {
    position: absolute; z-index: 2; inset: 0 auto 0 0;
    display: flex; flex-direction: column; justify-content: center;
    width: min(42%, 34rem);
    padding: 0 0 0 clamp(2rem, 6vw, 6rem);
  }
  /* Scrim so the copy stays legible over the wood, without dulling the board. */
  .scan__media::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, rgba(6,7,10,.92) 6%, rgba(6,7,10,.72) 34%, rgba(6,7,10,0) 62%);
  }
  .scan__hud { z-index: 2; justify-content: flex-end; }
}
@media (max-width: 900px) {
  .scan { padding-bottom: var(--act-y); }
  .scan__media {
    border-radius: clamp(14px, 3vw, 22px); overflow: hidden;
    margin: clamp(2rem, 6vw, 3rem) var(--gutter) 0;
    box-shadow: 0 30px 70px rgba(0,0,0,.5);
  }
}
.scan__tag {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem .7rem; border-radius: 999px;
  background: rgba(10,12,16,.6); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #fff;
  opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.scan.is-locked .scan__tag { opacity: 1; transform: none; }
.scan.is-locked .scan__tag--conf { transition-delay: .35s; }
.scan__tag--lock::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); margin-right: .45rem; vertical-align: middle; }

/* ── 02 Voice ──────────────────────────────────────────────── */
.split {
  display: grid; grid-template-columns: 1fr .8fr;
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split__copy h2 { margin: 1rem 0 0; }

.roster { display: flex; gap: .6rem; margin-top: 2.2rem; flex-wrap: wrap; }
.roster__face {
  width: 60px; height: 60px; border-radius: 50%; overflow: hidden;
  border: 2px solid transparent; padding: 0;
  filter: grayscale(1) contrast(.95); opacity: .5;
  transition: filter .35s var(--ease), opacity .35s, transform .35s var(--ease), border-color .35s;
  background: var(--paper-2);
}
.roster__face img { width: 100%; height: 100%; object-fit: cover; }
.roster__face:hover { opacity: .85; transform: translateY(-3px); }
.roster__face.is-active {
  filter: none; opacity: 1; border-color: var(--blue); transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(43,179,255,.3);
}
.roster__note { margin-top: 1.1rem; font-size: .95rem; color: var(--ink-2); min-height: 3em; }
/* Keep all six faces on one row on a phone. */
@media (max-width: 430px) {
  .roster { gap: .4rem; }
  .roster__face { width: 48px; height: 48px; }
}

/* Phone */
.phone {
  width: min(300px, 76vw); margin-inline: auto;
  padding: 10px; border-radius: 46px;
  background: linear-gradient(160deg, #33363d, #16181c 42%, #0c0d10);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.1);
}
.phone__screen {
  position: relative; border-radius: 37px; overflow: hidden;
  background: #1B1A18; aspect-ratio: 9 / 19.2;
  display: flex; flex-direction: column;
  color: #EDEBE7;
}
.phone__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem 1.1rem .3rem; font-size: .62rem; font-weight: 600;
}
.phone__notch { width: 62px; height: 17px; border-radius: 999px; background: #000; }
.phone__status { width: 34px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.5); }

.say { display: flex; gap: .6rem; padding: .7rem .8rem .55rem; align-items: flex-start; position: relative; }
.say__face { width: 34px; height: 34px; border-radius: 50%; flex: none; object-fit: cover; background: #2a2825; }
.say__body { flex: 1; min-width: 0; }
.say__name { font-size: .64rem; font-weight: 700; color: var(--blue); letter-spacing: .02em; }
.say__text { font-size: .68rem; line-height: 1.35; color: #DEDBD5; min-height: 2.7em; }
.wave { position: absolute; right: .8rem; bottom: .1rem; display: flex; gap: 2px; align-items: flex-end; height: 13px; }
/* Bars scale from their base instead of animating `height`: an animated
   height relayouts eleven elements every frame, forever, even with the
   phone mock far off screen. Same picture, no layout. */
.wave i {
  width: 2px; border-radius: 1px; background: var(--blue); height: 100%;
  transform-origin: bottom; transform: scaleY(.18);
  animation: wv 1s ease-in-out infinite;
}
@keyframes wv { 0%, 100% { transform: scaleY(.18); opacity: .5 } 50% { transform: scaleY(1); opacity: 1 } }

/* The phone's board is the shared .cb, just smaller and inset. */
.mini {
  width: calc(100% - 1.2rem); margin: .3rem .6rem 0;
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
/* Evaluation bar + move strip, so the screen reads like the real app
   rather than a board floating in dead space. */
.phone__eval {
  height: 4px; border-radius: 2px; background: #34322E;
  margin: .55rem .6rem 0; overflow: hidden;
}
.phone__eval i { display: block; height: 100%; width: var(--w); background: var(--blue); border-radius: 2px; }
.phone__moves {
  display: flex; gap: .45rem; align-items: center;
  padding: .5rem .6rem 0; font-size: .53rem; color: #7E7A75;
  font-variant-numeric: tabular-nums; overflow: hidden;
}
.phone__moves .is-now { color: #EDEBE7; font-weight: 700; background: rgba(255,255,255,.09); padding: .1rem .3rem; border-radius: 4px; }
.phone__tip {
  margin: .55rem .6rem 0; padding: .5rem .6rem;
  border-radius: 9px; background: #26241F; border-left: 2px solid var(--blue);
  display: flex; flex-direction: column; gap: .12rem;
}
.phone__tip b { font-size: .52rem; color: var(--blue); letter-spacing: .04em; text-transform: uppercase; }
.phone__tip span { font-size: .58rem; line-height: 1.35; color: #C9C5BE; }

.phone__tabs {
  margin-top: auto; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: .6rem .4rem 1.1rem; font-size: .52rem; text-align: center; color: #8B8681;
  border-top: 1px solid rgba(255,255,255,.07);
}
.phone__tabs .is-on { color: var(--blue); font-weight: 600; }

/* ── 03 Review ─────────────────────────────────────────────── */
.reviewcard {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: clamp(18px, 2.2vw, 28px);
  padding: clamp(1.4rem, 3.2vw, 2.6rem);
  box-shadow: var(--shadow-md);
}
.reviewcard__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.acc { display: flex; flex-direction: column; }
.acc--b { text-align: right; }
.acc__val {
  font-family: var(--display); font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 570; letter-spacing: -.04em; line-height: 1;
  font-variation-settings: "wdth" 92, "opsz" 44;
  font-variant-numeric: tabular-nums;
}
.acc__val small { font-size: .42em; color: var(--ink-3); margin-left: .1em; }
.acc:not(.acc--b) .acc__val { color: var(--blue-deep); }
.acc__who { font-size: .8rem; color: var(--ink-3); margin-top: .35rem; }
.reviewcard__game {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); text-align: center;
}
@media (max-width: 560px) { .reviewcard__game { display: none; } }

.graph { position: relative; margin: 1.6rem 0 .5rem; }
.graph svg { width: 100%; height: clamp(130px, 22vw, 200px); overflow: visible; }
.graph__mid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
#evalLine { stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.graph__pins { position: absolute; inset: 0; pointer-events: none; }
.graph__pin {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.4); border: 2.5px solid var(--surface);
  opacity: 0; transition: opacity .4s var(--ease) var(--d, 0s), transform .4s var(--ease) var(--d, 0s);
}
.is-drawn .graph__pin { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.graph__pin--bad { background: var(--bad); }
.graph__pin--good { background: var(--blue-deep); box-shadow: 0 0 0 5px rgba(43,179,255,.18); }

/* Scrub the graph to replay the game. */
.graph__guide {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(18,20,26,.22); pointer-events: none;
}
.graph__guide[hidden] { display: none; }
.graph__peek {
  position: absolute; bottom: calc(100% + .7rem); width: 186px;
  padding: .6rem; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  pointer-events: none; transform: translateX(-50%); z-index: 3;
}
.graph__peek[hidden] { display: none; }
.graph__peek .cb { border-radius: 6px; box-shadow: none; }
.graph__peektop {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: .5rem; font-size: .78rem;
}
.graph__peektop b { font-weight: 700; font-variant-numeric: tabular-nums; }
.graph__peektop span { font-family: var(--mono); font-size: .68rem; color: var(--blue-deep); }
.graph__peekline { margin-top: .2rem; font-size: .72rem; line-height: 1.35; color: var(--ink-3); }
.graph__hint {
  margin-top: .4rem; text-align: right;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); opacity: .8;
}
@media (hover: none) { .graph__hint { display: none; } }

.moments { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .6rem; }
.moment {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .9rem 1rem; border-radius: 14px; background: var(--paper-2);
  border: 1px solid var(--line-soft);
}
.moment__tag {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .55rem; border-radius: 6px; flex: none; font-weight: 500;
}
/* These two sit on their own tint over --paper-2, which costs about half a
   point of contrast, so they run darker than the shared tokens. */
.moment--blunder .moment__tag { background: rgba(240,100,90,.14); color: #B7352B; }   /* 4.58:1 */
.moment--brilliant .moment__tag { background: rgba(43,179,255,.14); color: #0A6BA8; } /* 4.58:1 */
.moment p { font-size: .92rem; color: var(--ink-2); line-height: 1.5; }
.moment b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.bars { margin-top: 1.5rem; display: grid; gap: .55rem; }
.bars__row { display: grid; grid-template-columns: 5.5rem 1fr 1.5rem; align-items: center; gap: .8rem; font-size: .82rem; color: var(--ink-2); }
.bars__row i { height: 6px; border-radius: 3px; background: var(--line); position: relative; overflow: hidden; }
.bars__row i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--ink-3);
  border-radius: 3px; transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease);
}
.is-drawn .bars__row i::after { transform: scaleX(1); }
.bars__row:nth-child(1) i::after { background: var(--blue); }
.bars__row:nth-child(2) i::after { background: var(--good); transition-delay: .08s; }
.bars__row:nth-child(3) i::after { background: var(--warn); transition-delay: .16s; }
.bars__row:nth-child(4) i::after { background: var(--bad); transition-delay: .24s; }
.bars__row b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }

/* ── Shared chess board (demo + previews) ──────────────────── */
.cb {
  display: grid; grid-template-columns: repeat(8, 1fr);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.45);
  width: 100%; aspect-ratio: 1;
}
.cb > * {
  position: relative; aspect-ratio: 1; padding: 0; border-radius: 0;
  transition: filter .18s;
}
.cb .l { background: #EEF2F9; }
.cb .d { background: #7C9AC6; }
.cb img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; pointer-events: none; }
.cb .is-from::after,
.cb .is-to::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(43,179,255,.42); box-shadow: inset 0 0 0 2px rgba(43,179,255,.9);
}
.cb .is-sel::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(255,214,64,.42); box-shadow: inset 0 0 0 2px rgba(255,214,64,.95);
}
.cb .is-bad::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(240,100,90,.45); box-shadow: inset 0 0 0 2px rgba(240,100,90,.95);
}
/* Legal-destination dots: small on empty squares, a ring on captures. */
.cb .dot::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 26%; height: 26%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: rgba(18,20,26,.32); pointer-events: none;
}
.cb .dot.cap::before {
  width: 86%; height: 86%; background: none;
  border: 4px solid rgba(18,20,26,.32); box-sizing: border-box;
}
.cb button:not([disabled]):hover { filter: brightness(1.06); }
.cb--lg { max-width: 460px; margin-inline: auto; }

/* ── Your move (playable demo) ─────────────────────────────── */
.demo__grid {
  display: grid; grid-template-columns: 1fr .85fr;
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
}
@media (max-width: 940px) { .demo__grid { grid-template-columns: 1fr; } }
.demo__copy h2 { margin: 1rem 0 0; }
.demo__coach {
  display: flex; gap: .9rem; align-items: flex-start;
  margin-top: 2rem; padding: 1rem 1.1rem;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-night);
  border-radius: 16px;
}
.demo__face { width: 42px; height: 42px; border-radius: 50%; flex: none; object-fit: cover; }
.demo__name {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--blue); margin-bottom: .2rem;
}
.demo__say { font-size: .98rem; line-height: 1.5; color: var(--on-night); min-height: 3em; }
.demo__actions { display: flex; gap: .6rem; margin-top: 1.3rem; flex-wrap: wrap; align-items: center; }
.demo__win[hidden] { display: none; }
.demo__step {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  margin-top: 1rem;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-night-2);
}
.demo__step i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }
@media (max-width: 520px) { .demo__step i, .demo__step span:last-child { display: none; } }
.demo.is-solved .cb { box-shadow: 0 30px 70px rgba(43,179,255,.30), 0 0 0 2px rgba(43,179,255,.5); }

/* ── 04 Practice ───────────────────────────────────────────── */
.tri {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.2rem, 2.5vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 860px) { .tri { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; } }
.tri__card h3 { margin-top: 1.3rem; }
.tri__card p { margin-top: .5rem; font-size: .93rem; color: var(--ink-2); line-height: 1.55; }
.tri__shot {
  border-radius: 20px; overflow: hidden; background: var(--paper-2);
  border: 1px solid var(--line-soft);
  aspect-ratio: 4 / 3.4;
  box-shadow: var(--shadow-sm);
}
.tri__shot img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%;
  transition: transform 1.1s var(--ease);
}
.tri__card:hover .tri__shot img { transform: scale(1.045); }

/* ── Privacy ───────────────────────────────────────────────── */
.act--quiet { text-align: center; }
.quiet { max-width: 56ch; }
.quiet .eyebrow { justify-content: center; }
.quiet h2 { margin: 1rem 0 0; }
.quiet .act__lede { margin-inline: auto; }
.orbit {
  list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  display: flex; justify-content: center; flex-wrap: wrap;
}
.orbit li {
  padding: 1.1rem 1.8rem; display: flex; flex-direction: column; gap: .2rem;
  border-left: 1px solid var(--line-night);
}
.orbit li:first-child { border-left: 0; }
.orbit b { font-size: 1rem; font-weight: 600; color: #fff; }
.orbit span { font-size: .8rem; color: var(--on-night-2); }

/* ── Pricing ───────────────────────────────────────────────── */
#pricing .act__head, #pricing .act__lede { margin-inline: auto; }
#pricing .act__head { text-align: center; }
#pricing .eyebrow { justify-content: center; }
.plans {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.2rem); align-items: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
@media (max-width: 820px) { .plans { grid-template-columns: 1fr; max-width: 26rem; margin-inline: auto; } }
.plan {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 22px; padding: 1.8rem 1.5rem;
  display: flex; flex-direction: column; gap: .5rem;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan--best {
  border-color: rgba(43,179,255,.5); padding-block: 2.4rem;
  box-shadow: var(--shadow-md), 0 0 0 4px rgba(43,179,255,.08);
  position: relative;
}
.plan__flag {
  position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: var(--blue-ink);
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: .28rem .7rem; border-radius: 999px; white-space: nowrap;
}
.plan h3 { color: var(--ink-2); font-size: .95rem; font-weight: 600; }
.plan__price {
  font-family: var(--display); font-size: clamp(2.1rem, 4vw, 2.7rem);
  font-weight: 570; letter-spacing: -.04em; line-height: 1;
  font-variation-settings: "wdth" 94, "opsz" 40;
}
.plan__price small { font-size: .34em; color: var(--ink-3); font-weight: 500; letter-spacing: -.01em; }
.plan__note { font-size: .87rem; color: var(--ink-3); margin-bottom: .6rem; }
.plan .btn { margin-top: auto; }

.perks {
  list-style: none; padding: 0;
  margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 46rem;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem 1.8rem;
}
@media (max-width: 640px) { .perks { grid-template-columns: 1fr; } }
.perks li { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; color: var(--ink-2); }
.perks li::before {
  content: ""; flex: none; width: 17px; height: 17px; margin-top: .18rem; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2307202F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5 8.5 14 15 6.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.plans__cta {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.plans__cta p {
  max-width: 46ch; text-align: center;
  font-size: .84rem; color: var(--ink-3); line-height: 1.55;
}

/* ── FAQ ───────────────────────────────────────────────────── */
.faq { max-width: 46rem; }
.faq h2 { margin-bottom: 2rem; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0;
  font-size: 1.06rem; font-weight: 500; letter-spacing: -.015em;
  position: relative; transition: color .2s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%; width: 13px; height: 13px;
  margin-top: -6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238B8E96' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M8 1v14M1 8h14'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .4s var(--ease);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq summary:hover { color: var(--blue-deep); }
.faq details p { padding: 0 3rem 1.4rem 0; color: var(--ink-2); font-size: .97rem; line-height: 1.6; }

/* ── Closing ───────────────────────────────────────────────── */
.close {
  padding: clamp(6rem, 13vw, 10rem) var(--gutter);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(43,179,255,.16), transparent 62%),
    var(--night);
  color: var(--on-night); text-align: center;
}
.close__inner { max-width: 42rem; margin-inline: auto; }
.close h2 { color: #fff; }
.close p { margin-top: 1.2rem; color: var(--on-night-2); font-size: 1.08rem; }
.close .btn { margin-top: 2.2rem; }
.close__fine {
  margin-top: 1.6rem; display: flex; align-items: center; justify-content: center;
  gap: .7rem; flex-wrap: wrap; font-size: .82rem; color: rgba(255,255,255,.42);
}
.close__fine i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }

/* ── Footer ────────────────────────────────────────────────── */
.foot { padding: 3rem var(--gutter); background: var(--night); border-top: 1px solid var(--line-night); color: var(--on-night-2); }
.foot__inner {
  max-width: var(--max); margin-inline: auto;
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.foot .nav__mark { color: #fff; }
.foot nav { display: flex; gap: 1.4rem; margin-inline: auto; flex-wrap: wrap; }
.foot nav a { font-size: .88rem; transition: color .2s; }
.foot nav a:hover { color: #fff; }
.foot p { font-size: .82rem; opacity: .6; }
@media (max-width: 720px) { .foot__inner { flex-direction: column; align-items: flex-start; gap: 1.2rem; } .foot nav { margin: 0; } }

/* ── Reveal + load choreography ────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(26px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js [data-anim] { opacity: 0; transform: translateY(18px); }
.js.is-ready [data-anim] {
  opacity: 1; transform: none;
  transition: opacity .85s var(--ease), transform .85s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-anim="1"] { --i: 0 } .js [data-anim="2"] { --i: 1 }
.js [data-anim="3"] { --i: 2 } .js [data-anim="4"] { --i: 3 }
.js [data-anim="5"] { --i: 4 } .js [data-anim="6"] { --i: 6 }

/* ── Mobile nav ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; padding: .5rem .9rem; font-size: .82rem; }
  .nav__toggle { display: flex; margin-left: .4rem; }
  .nav__menu:not([hidden]) { display: flex; }
  .nav.is-open { background: rgba(251,250,247,.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
}
@media (min-width: 861px) { .nav__menu { display: none !important; } }

/* ── Legal / support pages ─────────────────────────────────── */
.doc { max-width: 46rem; margin-inline: auto; padding: clamp(7rem, 16vh, 10rem) var(--gutter) var(--act-y); }
.doc h1 { font-size: clamp(2.2rem, 5.5vw, 3.4rem); }
.doc__meta { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; }
.doc h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-top: 2.6rem; }
.doc h3 { margin-top: 1.8rem; }
.doc p, .doc li { color: var(--ink-2); margin-top: .9rem; line-height: 1.68; font-size: 1rem; }
.doc ul, .doc ol { padding-left: 1.2rem; }
.doc li { margin-top: .5rem; }
.doc a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 3px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc .doc__back {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .9rem; color: var(--ink-3); margin-bottom: 2rem;
  text-decoration: none;
}
.doc .doc__back:hover { color: var(--ink); }

/* ── Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .js .reveal, .js [data-anim] { opacity: 1 !important; transform: none !important; }
}