/* ChessForge landing v4 — the dark, cinematic layout.
   Design follows the supplied reference; the CONTENT is the real product. The
   reference carried a five-star testimonial from "@chesslover247" and a
   "players love ChessForge" banner: invented people and an aggregate claim, so
   that band holds the owner's own signed quote instead. */
:root{
  --bg:#05080e; --bg-2:#070c14; --bg-3:#0a111c;
  --panel:rgba(14,22,36,.72); --panel-2:rgba(18,28,45,.9);
  --line:rgba(120,170,235,.12); --line-2:rgba(120,170,235,.22);
  --a:#2FD1FF; --a-2:#7ce0ff; --a-deep:#1287c9;
  --ink:#f3f8ff; --ink-2:#dbe6f5; --ink-3:#9fb3cc;
  --ink-4:#75899f; --ink-5:#56687e;
  --bad:#ff6b6b; --good:#3dc97f;
  --gut:clamp(20px,4vw,64px);
  --wide:clamp(1040px,88vw,1420px);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink-2);
  font:400 15.5px/1.6 Manrope,system-ui,sans-serif;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,.brand-word,.btn,.pp,.fc-n,.eyebrow,.kicker{font-family:Sora,system-ui,sans-serif}
h1,h2,h3{margin:0;letter-spacing:-.035em;color:var(--ink);text-wrap:pretty}
p{margin:0;text-wrap:pretty}
a{color:var(--a);text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(47,209,255,.3)}
.skip{position:absolute;left:-9999px;top:0;background:var(--a);color:#04101f;padding:10px 16px;z-index:200}
.skip:focus{left:0}
/* One gradient for every accented half-sentence, so the emphasis reads the
   same everywhere it appears. */
.grad{background:linear-gradient(100deg,var(--a) 0%,var(--a-2) 55%,#a9ecff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:90;height:72px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:0 var(--gut);
  background:rgba(5,8,14,.7);backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.stuck{border-bottom-color:var(--line);background:rgba(5,8,14,.92)}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.mark{width:30px;height:30px;filter:drop-shadow(0 0 14px rgba(47,209,255,.45))}
.brand-word{font-size:17px;font-weight:600;letter-spacing:-.02em}
.links{display:flex;gap:clamp(18px,2.4vw,38px)}
.links a{font-size:14px;font-weight:500;color:var(--ink-3);transition:color .2s}
.links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:0;
  font-size:14.5px;font-weight:600;border-radius:999px;padding:12px 22px;
  transition:transform .2s var(--ease),box-shadow .3s,background .3s,border-color .3s}
.btn span{transition:transform .25s var(--ease)}
.btn:hover span{transform:translateX(3px)}
.btn-pill{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn-pill:hover{border-color:var(--a);color:var(--a-2)}
.btn-fill{background:linear-gradient(180deg,var(--a-2),var(--a));color:#04121c;
  box-shadow:0 14px 40px -14px rgba(47,209,255,.75)}
.btn-fill:hover{box-shadow:0 18px 50px -14px rgba(47,209,255,.95);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--a);color:var(--ink)}
.btn.wide{width:100%;justify-content:center;padding:14px}
.play{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);
  display:inline-flex;flex:none;position:relative}
.play::after{content:"";position:absolute;left:9px;top:7.5px;border-left:7px solid var(--a);
  border-top:5px solid transparent;border-bottom:5px solid transparent}
.burger{display:none;width:42px;height:42px;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;background:none;border:1px solid var(--line-2);
  border-radius:12px;cursor:pointer}
.burger span{width:17px;height:1.5px;background:var(--ink-2);border-radius:2px;
  transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu{position:fixed;top:72px;right:var(--gut);z-index:89;min-width:210px;display:flex;
  flex-direction:column;padding:10px;border-radius:16px;background:rgba(8,14,24,.97);
  border:1px solid var(--line-2);backdrop-filter:blur(18px);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.9)}
.menu[hidden]{display:none}
.menu a{padding:12px 14px;border-radius:10px;font-size:14.5px;color:var(--ink-2)}
.menu a:hover{background:rgba(47,209,255,.1);color:var(--a-2)}
.menu hr{border:0;border-top:1px solid var(--line);margin:8px 4px}
.menu-cta{background:linear-gradient(180deg,var(--a-2),var(--a));color:#04121c!important;
  font-weight:700;text-align:center}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:calc(72px + clamp(20px,3vw,48px)) var(--gut) clamp(50px,7vw,110px);
  overflow:hidden;
  background:radial-gradient(1200px 620px at 72% 8%,#0e2136 0%,transparent 62%),var(--bg)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
/* A single shaft of light across the board, the way the reference lights it. */
.beam{position:absolute;top:-30%;right:4%;width:52%;height:150%;
  background:linear-gradient(197deg,rgba(47,209,255,.16) 0%,rgba(47,209,255,0) 62%);
  transform:rotate(-8deg);filter:blur(30px)}
.haze{position:absolute;left:-12%;bottom:-30%;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,135,201,.22),transparent 66%);filter:blur(70px)}
/* Two columns, and the screen fills the second one.
   Stacked, the copy ran to the fold and the board began at y=660 in a 757px
   window -- 15% of it visible, with the whole right half of the screen empty.
   The point of this hero is that you play the board, and you cannot play what
   you cannot see. Side by side, both are on screen when the page loads. */
.hero-in{position:relative;max-width:var(--wide);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(24px,2.6vw,44px);align-items:start}
.hero-copy{max-width:58ch}
.hero-copy .sub{max-width:44ch}
.kicker{font-family:Sora,system-ui,sans-serif}
h1,h2,h3{margin:0;letter-spacing:-.035em;color:var(--ink);text-wrap:pretty}
p{margin:0;text-wrap:pretty}
a{color:var(--a);text-decoration:none}
img{max-width:100%;display:block}
::selection{background:rgba(47,209,255,.3)}
.skip{position:absolute;left:-9999px;top:0;background:var(--a);color:#04101f;padding:10px 16px;z-index:200}
.skip:focus{left:0}
/* One gradient for every accented half-sentence, so the emphasis reads the
   same everywhere it appears. */
.grad{background:linear-gradient(100deg,var(--a) 0%,var(--a-2) 55%,#a9ecff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:90;height:72px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;padding:0 var(--gut);
  background:rgba(5,8,14,.7);backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;transition:border-color .3s,background .3s}
.nav.stuck{border-bottom-color:var(--line);background:rgba(5,8,14,.92)}
.brand{display:flex;align-items:center;gap:11px;color:var(--ink)}
.mark{width:30px;height:30px;filter:drop-shadow(0 0 14px rgba(47,209,255,.45))}
.brand-word{font-size:17px;font-weight:600;letter-spacing:-.02em}
.links{display:flex;gap:clamp(18px,2.4vw,38px)}
.links a{font-size:14px;font-weight:500;color:var(--ink-3);transition:color .2s}
.links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;border:0;
  font-size:14.5px;font-weight:600;border-radius:999px;padding:12px 22px;
  transition:transform .2s var(--ease),box-shadow .3s,background .3s,border-color .3s}
.btn span{transition:transform .25s var(--ease)}
.btn:hover span{transform:translateX(3px)}
.btn-pill{background:transparent;color:var(--ink);border:1px solid var(--line-2)}
.btn-pill:hover{border-color:var(--a);color:var(--a-2)}
.btn-fill{background:linear-gradient(180deg,var(--a-2),var(--a));color:#04121c;
  box-shadow:0 14px 40px -14px rgba(47,209,255,.75)}
.btn-fill:hover{box-shadow:0 18px 50px -14px rgba(47,209,255,.95);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--a);color:var(--ink)}
.btn.wide{width:100%;justify-content:center;padding:14px}
.play{width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);
  display:inline-flex;flex:none;position:relative}
.play::after{content:"";position:absolute;left:9px;top:7.5px;border-left:7px solid var(--a);
  border-top:5px solid transparent;border-bottom:5px solid transparent}
.burger{display:none;width:42px;height:42px;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;background:none;border:1px solid var(--line-2);
  border-radius:12px;cursor:pointer}
.burger span{width:17px;height:1.5px;background:var(--ink-2);border-radius:2px;
  transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu{position:fixed;top:72px;right:var(--gut);z-index:89;min-width:210px;display:flex;
  flex-direction:column;padding:10px;border-radius:16px;background:rgba(8,14,24,.97);
  border:1px solid var(--line-2);backdrop-filter:blur(18px);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.9)}
.menu[hidden]{display:none}
.menu a{padding:12px 14px;border-radius:10px;font-size:14.5px;color:var(--ink-2)}
.menu a:hover{background:rgba(47,209,255,.1);color:var(--a-2)}
.menu hr{border:0;border-top:1px solid var(--line);margin:8px 4px}
.menu-cta{background:linear-gradient(180deg,var(--a-2),var(--a));color:#04121c!important;
  font-weight:700;text-align:center}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:calc(72px + clamp(20px,3vw,48px)) var(--gut) clamp(50px,7vw,110px);
  overflow:hidden;
  background:radial-gradient(1200px 620px at 72% 8%,#0e2136 0%,transparent 62%),var(--bg)}
.hero-bg{position:absolute;inset:0;pointer-events:none}
/* A single shaft of light across the board, the way the reference lights it. */
.beam{position:absolute;top:-30%;right:4%;width:52%;height:150%;
  background:linear-gradient(197deg,rgba(47,209,255,.16) 0%,rgba(47,209,255,0) 62%);
  transform:rotate(-8deg);filter:blur(30px)}
.haze{position:absolute;left:-12%;bottom:-30%;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(circle,rgba(18,135,201,.22),transparent 66%);filter:blur(70px)}
/* One column, not two.
   The coached screen is itself three columns -- what he is saying, the board,
   the read-out -- and squeezing that into half the hero left the board at
   294px, which is a thumbnail of the product rather than the product. The copy
   sits above it and the screen runs the full width, the way a product shot
   should. */
.hero-in{position:relative;max-width:var(--wide);margin:0 auto}
.hero-copy{max-width:min(760px,100%);margin-bottom:clamp(32px,4vw,56px)}
.hero-copy .sub{max-width:62ch}
.kicker{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--a);margin-bottom:18px}
h1{font-size:clamp(34px,4.1vw,60px);line-height:1.04;margin-bottom:18px}
.sub{font-size:clamp(15px,1.15vw,17px);line-height:1.65;color:var(--ink-3);max-width:46ch;
  margin-bottom:30px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.fine{font-size:13px;color:var(--ink-5);margin-top:14px;max-width:52ch;line-height:1.6}

/* ── free now, promo on top ──────────────────────────────────────────────────
   Two separate facts that kept being collapsed into one button. */
.promo{display:flex;align-items:flex-start;gap:10px;margin-top:18px;
  font-size:13.5px;line-height:1.55;color:var(--ink-3)}
.promo a{color:var(--a-2);text-decoration:none;white-space:nowrap}
.promo a:hover{text-decoration:underline}
.promo-tag{flex:none;font:700 9.5px/1 Sora,sans-serif;letter-spacing:.11em;
  text-transform:uppercase;color:#0a1420;background:var(--a);
  padding:5px 9px;border-radius:999px;margin-top:1px}

/* The glow behind the screen. Nothing else here survives the old hero: the
   board carried a perspective tilt, which foreshortened it so the squares
   measured differently row to row -- and the app's board is flat, because it
   is a board you click rather than a photograph of one. */
.stage{position:relative;isolation:isolate}
.stage-glow{position:absolute;inset:-6% -4% -12%;border-radius:28px;pointer-events:none;
  background:radial-gradient(circle at 50% 42%,rgba(47,209,255,.2),transparent 62%);
  filter:blur(46px)}

/* ── the hero: the coached screen ────────────────────────────────────────────
   Three columns, the way the app lays them out: what he is saying with the
   figure docked under it, the board, and the read-out. */
/* One column. Two narrow things side by side is what "cramped" was: a 253px
   rail next to a 449px board. The rail's contents now sit on the board. */
.coached{position:relative;z-index:1}
.c-say{border:1px solid var(--line-2);border-radius:14px;padding:13px 15px;
  background:var(--panel-2);backdrop-filter:blur(14px);
  transition:border-color .35s,box-shadow .35s}
.c-say.spoke{border-color:rgba(47,209,255,.5);
  box-shadow:0 20px 50px -26px rgba(47,209,255,.6)}
.c-who{display:flex;align-items:center;gap:9px;font:600 12px/1 Sora,sans-serif;
  color:var(--a-2);margin-bottom:8px}
.c-say p{font-size:13px;line-height:1.6;color:var(--ink-3)}
/* His lines differ in length, so the box was resizing under the chip and the
   buttons every time he spoke. Held at the height of the longest one. */
.c-say{min-height:172px;display:flex;flex-direction:column}
.grade{font:700 9.5px/1 Sora,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px}
.grade:empty{display:none}
.grade.best{color:#8ff0c4;background:rgba(61,201,127,.14);border:1px solid rgba(61,201,127,.45)}
.grade.good{color:#a9ecff;background:rgba(47,209,255,.12);border:1px solid rgba(47,209,255,.4)}
.grade.inaccuracy{color:#e8d9a8;background:rgba(229,167,61,.14);border:1px solid rgba(229,167,61,.42)}
.grade.mistake,.grade.blunder{color:#ffb3b3;background:rgba(255,107,107,.14);
  border:1px solid rgba(255,107,107,.45)}
/* "Considering" — the app's own chip, showing the move and the answer to it. */
.c-cand{display:flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:12px;padding:9px 12px;background:rgba(10,18,30,.7);
  min-height:34px;box-sizing:border-box}
 /* Reserved rather than removed. As display:none these appeared on the first
    move and shoved the whole rail down -- pressing a button should not move the
    thing you pressed. */
.c-cand[hidden],.c-act[hidden]{opacity:0;pointer-events:none}
.c-cand[hidden]{display:flex}
.c-cand-l{font:600 9.5px/1 Sora,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-5)}
.c-cand-v{font:600 13px/1 Sora,sans-serif;color:var(--ink)}
.c-act{display:flex;gap:8px;flex-wrap:wrap}
.c-act[hidden]{display:flex;visibility:hidden}
.c-cand,.c-act{transition:opacity .25s}
.fc-btn{background:rgba(47,209,255,.12);border:1px solid rgba(47,209,255,.4);color:var(--a-2);
  font:600 11.5px/1 Manrope,sans-serif;border-radius:999px;padding:8px 13px;cursor:pointer;
  transition:background .2s}
.fc-btn:hover{background:rgba(47,209,255,.24)}
.fc-btn.ghost{background:transparent;border-color:var(--line-2);color:var(--ink-3)}
.fc-btn.ghost:hover{border-color:var(--a);color:var(--ink)}
/* He stands on the background with no card around him, the way he does in the
   app -- a box would make him an illustration rather than someone in the room. */
.c-forge{margin-top:auto;padding-top:10px;display:flex;justify-content:flex-end;
  pointer-events:none}
/* Pushed right and allowed past the gap so he is shoulder-to-shoulder with the
   board frame. Bottom-aligned with the board, so he stands at it. */
.c-forge svg{width:100%;max-width:min(230px,100%);height:auto;display:block;
  margin-right:clamp(-26px,-1.6vw,-10px);margin-bottom:-4px}
.c-forge .forge-face{display:none}
.c-forge[data-expr="neutral"]   .forge-face[data-expr="neutral"],
.c-forge[data-expr="concerned"] .forge-face[data-expr="concerned"],
.c-forge[data-expr="impressed"] .forge-face[data-expr="impressed"]{display:block}

.c-main{min-width:0}
.c-who-row{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
  color:var(--ink-3);margin-bottom:5px}
.c-who-row.you{margin:5px 0 0}
.pip{width:15px;height:15px;border-radius:50%;flex:none}
.pip.w{background:linear-gradient(140deg,#e6eef8,#9fb3cc)}
.pip.b{background:linear-gradient(140deg,#2b3a52,#131d2c)}
.board-wrap{position:relative;border-radius:14px;padding:8px;
  background:linear-gradient(160deg,rgba(47,209,255,.2),rgba(47,209,255,0) 55%),
             linear-gradient(0deg,rgba(10,17,28,.92),rgba(10,17,28,.92));
  box-shadow:0 44px 100px -44px rgba(0,0,0,.95),0 0 0 1px rgba(120,170,235,.14),
             0 0 80px -40px rgba(47,209,255,.45)}
.board{display:grid;grid-template-columns:repeat(8,1fr);border-radius:8px;overflow:hidden}
.sq{aspect-ratio:1;position:relative;display:flex;align-items:center;justify-content:center;
  cursor:pointer}
/* Storm Marble -- the app's house board. Named, so a change in one place is
   visible in the other. */
:root{--sq-l:#bccedb;--sq-d:#4a7191}
.sq.l{background:var(--sq-l)}
.sq.d{background:var(--sq-d)}
.sq img{width:88%;height:88%;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.sq.pick::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 3px var(--a);
  background:rgba(47,209,255,.2)}
.sq.target::after{content:"";position:absolute;left:50%;top:50%;width:22%;height:22%;
  transform:translate(-50%,-50%);border-radius:50%;background:rgba(255,255,255,.55);
  box-shadow:0 0 10px rgba(0,0,0,.35);transition:width .15s,height .15s,background .15s}
.sq.target:hover::after{width:36%;height:36%;background:rgba(47,209,255,.9)}
.sq.from::after{content:"";position:absolute;inset:0;background:rgba(47,209,255,.26)}
.sq.to::after{content:"";position:absolute;inset:0;background:rgba(61,201,127,.34);
  box-shadow:inset 0 0 0 3px var(--good)}
.sq.bad::after{content:"";position:absolute;inset:0;background:rgba(255,107,107,.34);
  box-shadow:inset 0 0 0 3px var(--bad)}
.evalbar{height:6px;border-radius:999px;background:#0b1320;overflow:hidden;margin-top:9px}
.evalbar span{display:block;height:100%;width:66%;border-radius:999px;
  transition:width .5s var(--ease),background .3s;
  background:linear-gradient(90deg,var(--a-deep),var(--a))}
.evalbar span.bad{background:linear-gradient(90deg,#8d2b2b,var(--bad))}

.c-badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  border:1px solid rgba(47,209,255,.4);background:rgba(47,209,255,.1);border-radius:999px;
  padding:6px 12px;font:600 11px/1 Sora,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  color:var(--a-2)}
.ph-dot{width:7px;height:7px;border-radius:50%;background:var(--a);flex:none;
  box-shadow:0 0 10px var(--a);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.c-read{border:1px solid var(--line);border-radius:12px;padding:12px 13px;
  background:rgba(10,18,30,.65)}
.c-k{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-5)}
.c-v{display:block;font:700 22px/1.1 Sora,sans-serif;color:var(--ink);margin-top:5px;
  letter-spacing:-.02em}
.c-sub{display:block;font-size:11.5px;color:var(--ink-4);margin-top:4px}
.c-foot{grid-column:1 / -1;font-size:11px;line-height:1.5;color:var(--ink-5)}
/* The footnote and the running panel swap places; holding them in one cell
   keeps the column exactly as tall either way. */
.c-foot[hidden]{display:block;visibility:hidden;height:0;margin:0;overflow:hidden}

/* ── bands ───────────────────────────────────────────────────────────────── */
.band{padding:clamp(64px,8vw,130px) var(--gut);background:var(--bg-2);
  border-top:1px solid var(--line)}
.band.alt{background:var(--bg-3)}
.band > *{max-width:var(--wide);margin:0 auto}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--a);margin-bottom:16px}
h2{font-size:clamp(28px,3.4vw,46px);line-height:1.12}
.lede{font-size:15px;line-height:1.7;color:var(--ink-3);margin-top:18px;max-width:52ch}
.lede.mid{margin-left:auto;margin-right:auto}
.center{text-align:center}
.link-arrow{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-weight:600;
  font-size:14.5px}
.link-arrow span{transition:transform .25s var(--ease)}
.link-arrow:hover span{transform:translateX(4px)}

.feat{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr);
  gap:clamp(28px,4vw,72px);align-items:start}
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px)}
.fcard{border:1px solid var(--line);border-radius:16px;padding:clamp(18px,1.8vw,24px);
  background:var(--panel);transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.fcard:hover{border-color:rgba(47,209,255,.45);transform:translateY(-3px);
  box-shadow:0 24px 60px -30px rgba(47,209,255,.6)}
.ficon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:rgba(47,209,255,.12);border:1px solid rgba(47,209,255,.3);
  margin-bottom:16px}
.ficon svg{width:19px;height:19px;fill:none;stroke:var(--a);stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.fcard h3{font-size:15.5px;font-weight:600;margin-bottom:8px}
.fcard p{font-size:13px;line-height:1.6;color:var(--ink-4)}

.action{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);
  gap:clamp(28px,4vw,64px);align-items:center}
.shot{border-radius:18px;overflow:hidden;border:1px solid var(--line-2);
  background:linear-gradient(180deg,#0c1624,#070d17);
  box-shadow:0 50px 110px -46px rgba(0,0,0,.95),0 0 80px -40px rgba(47,209,255,.35)}
.shot-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;
  border-bottom:1px solid var(--line);background:rgba(9,16,27,.9)}
.shot-bar span{width:9px;height:9px;border-radius:50%;background:#22354c}
.shot-bar b{margin-left:8px;font:600 12px/1 Sora,sans-serif;color:var(--ink-3)}
.shot-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:14px;padding:14px}
.shot-board{display:grid;grid-template-columns:repeat(8,1fr);border-radius:8px;overflow:hidden;
  border:1px solid var(--line);align-self:start}
.shot-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.tabs{display:flex;gap:14px;border-bottom:1px solid var(--line);padding-bottom:9px;font-size:11.5px}
.tabs b{color:var(--a-2);font-weight:600;position:relative}
.tabs b::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--a)}
.tabs span{color:var(--ink-5)}
.mistake{border:1px solid rgba(255,107,107,.35);background:rgba(40,15,20,.6);
  border-radius:10px;padding:11px}
.mistake p{font-size:11.5px;line-height:1.5;color:var(--ink-3)}
.mistake b{color:var(--ink)}
.bestrow{display:flex;align-items:baseline;gap:8px;border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;background:rgba(10,18,30,.7)}
.bestrow .k{font-size:11px;color:var(--ink-5)}
.bestrow .v{font:700 15px/1 Sora,sans-serif;color:var(--a)}
.bestrow .sc{margin-left:auto;font-size:11px;color:var(--good)}
.movelist{display:flex;flex-direction:column;gap:5px;font-size:11.5px}
.movelist div{display:grid;grid-template-columns:26px 1fr 1fr;gap:8px;padding:6px 9px;
  border-radius:7px;background:rgba(10,18,30,.6)}
.movelist i{font-style:normal;color:var(--ink-5)}
.movelist b{color:var(--ink)}
.movelist span{color:var(--ink-4)}

/* ── pricing ─────────────────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(14px,1.8vw,24px);margin-top:clamp(30px,4vw,54px)}
.plan{border:1px solid var(--line);border-radius:18px;padding:clamp(22px,2.2vw,32px);
  background:var(--panel)}
.plan.lit{border-color:rgba(47,209,255,.45);
  box-shadow:0 30px 80px -34px rgba(47,209,255,.55);
  background:linear-gradient(180deg,rgba(14,32,52,.9),rgba(8,16,28,.9))}
.pn{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--a-2)}
.pp{font-size:clamp(30px,3vw,42px);font-weight:700;color:var(--ink);margin:14px 0 20px;
  letter-spacing:-.03em}
.pp s{color:var(--ink-5);font-size:.5em;font-weight:500;margin-right:10px}
.pp small{display:block;font:500 12.5px/1 Manrope,sans-serif;color:var(--ink-5);margin-top:9px}
.plan ul{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:11px}
.plan li{font-size:13px;line-height:1.55;color:var(--ink-3);padding-left:27px;position:relative}
.plan li::before{position:absolute;left:0;top:1px;width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.plan li.y::before{content:"\2713";background:rgba(47,209,255,.14);
  border:1px solid rgba(47,209,255,.5);color:var(--a-2)}
/* Shown, not omitted: a reader comparing two columns needs to see the gap. */
.plan li.n{color:var(--ink-5)}
.plan li.n::before{content:"\2715";background:rgba(255,107,107,.1);
  border:1px solid rgba(255,107,107,.3);color:#ff9a9a}
.pf{font-size:12px;color:var(--ink-5);margin-top:14px;text-align:center}

/* ── the quote band ──────────────────────────────────────────────────────── */
.quote-band{position:relative;padding:clamp(70px,9vw,140px) var(--gut);overflow:hidden;
  border-top:1px solid var(--line)}
.quote-bg{position:absolute;inset:0;
  background:radial-gradient(900px 500px at 50% 0%,#12283f 0%,transparent 65%),#060b13}
.quote-bg::after{content:"";position:absolute;inset:0;opacity:.5;
  background:linear-gradient(transparent 60%,rgba(5,8,14,.9))}
.quote{position:relative;max-width:820px;margin:0 auto;text-align:center}
.q{font:500 clamp(21px,2.6vw,34px)/1.4 Sora,sans-serif;color:var(--ink);letter-spacing:-.02em}
.q-more{font-size:15px;line-height:1.7;color:var(--ink-3);margin-top:22px}
.q-by{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:32px;
  text-align:left}
.q-mark{width:34px;height:34px;opacity:.85}
.q-by b{display:block;font-size:14px;color:var(--ink)}
.q-by span{display:block;font-size:12.5px;color:var(--ink-5);max-width:42ch;margin-top:3px}

.closer{padding:clamp(56px,7vw,110px) var(--gut);background:var(--bg-2);
  border-top:1px solid var(--line)}
.closer-in{max-width:760px;margin:0 auto;text-align:center}
.closer p{color:var(--ink-3);margin:14px 0 30px}

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot-brand{display:flex;gap:12px;align-items:center}
.foot-brand b{display:block;font:600 15px/1.2 Sora,sans-serif;color:var(--ink)}
.foot-brand span{font-size:12.5px;color:var(--ink-5)}

/* ── modals ──────────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  padding:var(--gut);background:rgba(3,6,11,.78);backdrop-filter:blur(10px)}
.modal[hidden]{display:none}
.modal-in{position:relative;max-width:70ch;width:100%;max-height:82vh;overflow-y:auto;
  background:#0b1421;border:1px solid var(--line-2);border-radius:18px;padding:clamp(24px,3vw,38px)}
.modal-x{position:absolute;top:14px;right:18px;background:none;border:0;color:var(--ink-4);
  font-size:28px;line-height:1;cursor:pointer}
.modal-in h2{font-size:22px;margin-bottom:16px}
.modal-in h3{font-size:14px;font-weight:600;color:var(--ink-2);margin:20px 0 6px}
.modal-in p{font-size:13.5px;line-height:1.7;color:var(--ink-3);margin-bottom:10px}
.modal-in code{font-size:12.5px;background:rgba(47,209,255,.12);padding:1px 5px;border-radius:4px;
  color:var(--a-2)}

/* ── scroll motion ───────────────────────────────────────────────────────────
   Every block fading up 26px over 0.9s is the house style of a generated page:
   uniform distance, uniform duration, uniform easing, applied to headings, body
   copy and cards alike. It reads as a template because it is one.

   Three different treatments instead, each matched to what it is moving:

     headings  wipe up from behind their own baseline, which is a typographic
               move rather than a card move -- no fade, so the type never
               renders at half opacity;
     body      does not move at all. Prose that slides is prose you cannot start
               reading until it has finished arriving;
     cards     rise 8px in 380ms with a 55ms stagger. Short and close, so it
               reads as the row settling rather than as six separate entrances.

   Under 700ms and under 10px is the difference between "this responded to me"
   and "this is performing for me". */
.reveal h2{display:block;overflow:hidden}
.reveal h2 > span,.reveal h2{will-change:transform}
.reveal h2{clip-path:inset(0 0 110% 0);transform:translateY(.14em);
  transition:clip-path .62s var(--ease),transform .62s var(--ease)}
.reveal.in h2{clip-path:inset(0 0 -20% 0);transform:none}
/* The eyebrow is a label, so it draws its rule in rather than sliding. */
.reveal .eyebrow{position:relative;opacity:0;transition:opacity .3s ease .1s}
.reveal.in .eyebrow{opacity:1}
.reveal .lede,.reveal .link-arrow,.reveal p{opacity:0;transition:opacity .5s ease .18s}
.reveal.in .lede,.reveal.in .link-arrow,.reveal.in p{opacity:1}
/* Cards are their own reveal, so a grid settles rather than the band arriving. */
.fcard,.plan{opacity:0;transform:translateY(8px);
  transition:opacity .38s var(--ease),transform .38s var(--ease),
             border-color .3s,box-shadow .3s}
.fcard.in,.plan.in{opacity:1;transform:none}
/* Anything else still tagged .reveal gets the quiet version. */
.reveal{opacity:1}
.shot,.quote,.closer-in{opacity:0;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.shot.in,.quote.in,.closer-in.in{opacity:1;transform:none}

@media (max-width:1320px) and (min-width:1081px){
  /* The copy has nothing left to say by this width; the board still needs room. */
  .hero-in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .hero-copy .sub{max-width:38ch}
}
@media (max-width:1080px){
  .feat,.action{grid-template-columns:1fr}
  .hero-in{grid-template-columns:1fr}
  .coached{grid-template-columns:minmax(0,1fr)}
    .c-forge svg{max-width:150px}
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stage{margin-top:36px}
}
@media (max-width:860px){
  .links,.nav > .btn-pill{display:none}
  .burger{display:flex}
  .shot-body{grid-template-columns:1fr}
}
@media (max-width:620px){
  .feat-grid{grid-template-columns:1fr}
  .stage-glow{display:none}
  .board-wrap{transform:none}
  .cta-row .btn{width:100%;justify-content:center}
  .q-by{flex-direction:column;text-align:center}
}
/* Every loop here is decoration. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .reveal,.float{opacity:1;transform:none}
}

/* ── board coordinates ───────────────────────────────────────────────────────
   Files and ranks outside the board, the way the app draws them: somebody
   being asked to find a move needs to be able to name the squares the coach is
   talking about. */
.board-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;gap:4px 6px}
.board-wrap .board{grid-column:2;grid-row:1}
.ranks,.files{display:grid;font:600 10.5px/1 Sora,sans-serif;color:var(--ink-5)}
.ranks{grid-column:1;grid-row:1;grid-template-rows:repeat(8,1fr);align-items:center;
  justify-items:center;width:16px}
.files{grid-column:2;grid-row:2;grid-template-columns:repeat(8,1fr);justify-items:center}
.ranks i,.files i{font-style:normal}

/* ── what happens next ───────────────────────────────────────────────────────
   The loop, running. Four steps, each filling its own bar and handing on. A
   static list of four features says the same words and demonstrates none of
   them, which is the difference this whole hero is built around. */
.flow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
 /* Never removed from flow. As display:none it appeared on the first move,
    grew the column by 404px and moved the board 84px up the screen -- you
    pressed a square and the board jumped. */
.flow[hidden]{display:flex}
.flow li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start;
  padding:10px 11px;border:1px solid var(--line);border-radius:11px;
  background:rgba(10,18,30,.6);opacity:.42;
  transition:opacity .3s,border-color .3s,background .3s}
.flow li.run{opacity:1;border-color:rgba(47,209,255,.45);background:rgba(13,28,45,.8)}
.flow li.done{opacity:1}
.fl-i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2);
  position:relative;transition:border-color .3s,background .3s}
.flow li.run .fl-i{border-color:var(--a)}
.flow li.run .fl-i::after{content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--a);animation:pulse 1s ease-in-out infinite}
.flow li.done .fl-i{border-color:var(--good);background:var(--good)}
/* The tick is drawn, not a glyph, so it does not depend on a font. */
.flow li.done .fl-i::after{content:"";position:absolute;left:5px;top:2px;width:5px;height:9px;
  border:solid #06210f;border-width:0 2px 2px 0;transform:rotate(42deg);animation:none}
.flow b{display:block;font:600 12px/1.3 Sora,sans-serif;color:var(--ink-2)}
.flow i{font-style:normal;font-size:11px;line-height:1.45;color:var(--ink-5)}
.fl-bar{grid-column:2;height:3px;border-radius:999px;background:rgba(120,170,235,.14);
  overflow:hidden;margin-top:8px}
.fl-bar > span{display:block;height:100%;width:0;border-radius:999px;background:var(--a)}
.flow li.run .fl-bar > span{width:100%;transition:width .62s linear}
.flow li.done .fl-bar > span{width:100%;background:var(--good);transition:background .3s}
@media (prefers-reduced-motion:reduce){
  .flow li{opacity:1}
  .flow li .fl-bar > span{width:100%}
}

/* ── the loop section ────────────────────────────────────────────────────────
   Sized like the thing it describes. The rail between the steps fills as you
   scroll past each one, so the page itself performs the sequence instead of
   listing it. */
.sep-line{height:1px;border:0;margin:0 0 clamp(44px,5vw,76px);
  background:linear-gradient(90deg,transparent,var(--line-2) 18%,var(--a) 50%,
             var(--line-2) 82%,transparent);opacity:.65}
.bl-head{max-width:820px;margin:0 auto clamp(44px,5vw,72px);text-align:center}
.bl-head h2{font-size:clamp(32px,4.6vw,60px);line-height:1.04;margin:14px 0 20px}
.bl-head .lede{margin:0 auto;max-width:62ch}

.bigloop{list-style:none;margin:0;padding:0;max-width:1000px;
  margin-inline:auto;counter-reset:none}
.bl{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,2.6vw,40px)}
/* the connector */
.bl-rail{position:relative;width:2px;background:var(--line);border-radius:2px;
  justify-self:center}
.bl-rail.last{background:linear-gradient(180deg,var(--line) 0 58%,transparent)}
.bl-rail::after{content:"";position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(180deg,var(--a),rgba(47,209,255,.15));
  transform:scaleY(0);transform-origin:top;transition:transform .9s cubic-bezier(.32,.72,0,1)}
.bl.in .bl-rail::after{transform:scaleY(1)}
.bl-dot{position:absolute;left:50%;top:18px;width:13px;height:13px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.35);background:var(--a);opacity:0;
  box-shadow:0 0 0 5px rgba(47,209,255,.14),0 0 22px rgba(47,209,255,.75);
  transition:transform .5s cubic-bezier(.32,.72,0,1),opacity .4s}
.bl.in .bl-dot{transform:translate(-50%,-50%) scale(1);opacity:1}
.bl-body{padding-bottom:clamp(48px,5.5vw,86px)}
.bl:last-child .bl-body{padding-bottom:0}
/* The numeral is the "bigger, cooler" part: set in the display face, filled
   with the accent gradient, and large enough to be the landmark you scroll to. */
.bl-n{display:block;font:800 clamp(40px,5.6vw,76px)/1 Sora,sans-serif;letter-spacing:-.04em;
  background:linear-gradient(120deg,var(--a),#8f7bff 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:6px;opacity:.22;transition:opacity .6s .1s}
.bl.in .bl-n{opacity:1}
.bl-body h3{font-size:clamp(24px,3.2vw,42px);line-height:1.08;letter-spacing:-.02em;
  margin-bottom:14px}
.bl-body p{font-size:clamp(15px,1.15vw,17.5px);line-height:1.62;color:var(--ink-3);
  max-width:60ch;margin-bottom:22px}
.bl-cta{font-size:14.5px}

.feat-more{max-width:var(--wide);margin:clamp(64px,7vw,110px) auto 0;
  border-top:1px solid var(--line);padding-top:clamp(36px,4vw,60px)}
.feat-more .eyebrow{text-align:center;margin-bottom:clamp(28px,3vw,44px)}

@media (max-width:720px){
  .bl{grid-template-columns:14px minmax(0,1fr);gap:18px}
  .bl-body p{margin-bottom:18px}
  .bl-cta{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .bl-rail::after{transform:scaleY(1)}
  .bl-dot{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .bl-n{opacity:1}
}

/* ── the comparison ──────────────────────────────────────────────────────────
   Three columns rather than the usual two-with-crosses: naming the dimension
   on the left is what stops it reading as marketing. */
.vs{max-width:1040px;margin:clamp(70px,7.5vw,120px) auto 0;text-align:center}
.vs-h{font-size:clamp(28px,3.9vw,50px);line-height:1.06;margin:14px 0 18px}
.vs-l{max-width:60ch;margin:0 auto clamp(32px,3.6vw,52px)}
.vs-grid{display:grid;grid-template-columns:minmax(110px,.62fr) 1fr 1fr;
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;text-align:left}
.vs-grid>*{background:var(--bg);padding:clamp(13px,1.3vw,19px) clamp(13px,1.4vw,20px);
  font-size:14.5px;line-height:1.55}
.vs-head{font:700 11px/1 Sora,sans-serif;letter-spacing:.12em;text-transform:uppercase;
  padding-top:16px;padding-bottom:16px}
.vs-head.a{grid-column:2;color:var(--ink-5)}
.vs-head.b{color:var(--a);background:rgba(47,209,255,.07)}
.vs-k{font:600 12px/1.4 Sora,sans-serif;letter-spacing:.02em;color:var(--ink-4);
  display:flex;align-items:center}
.vs-a{color:var(--ink-5)}
.vs-b{color:var(--ink-2);background:rgba(47,209,255,.05);
  box-shadow:inset 2px 0 0 rgba(47,209,255,.35)}
.vs-foot{font-size:13px;color:var(--ink-5);margin-top:18px;line-height:1.6}
@media (max-width:760px){
  .vs-grid{grid-template-columns:1fr}
  .vs-head.a{grid-column:1}
  .vs-k{border-top:1px solid var(--line);padding-top:16px;
    color:var(--ink-3);font-size:12.5px}
  .vs-grid>.vs-k:first-of-type{border-top:0}
  .vs-a::before{content:"Everywhere else — ";color:var(--ink-6,#5b6a80);font-weight:600}
  .vs-b::before{content:"ChessForge — ";color:var(--a);font-weight:600}
  .vs-head{display:none}
}

.faq-wrap{max-width:900px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 42px 20px 0;position:relative;
  font:600 clamp(15px,1.35vw,18px)/1.45 Sora,sans-serif;color:var(--ink);
  transition:color .18s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--a-2)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:1.6px solid var(--a);border-bottom:1.6px solid var(--a);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s cubic-bezier(.32,.72,0,1)}
.faq details[open] summary::after{transform:translateY(-20%) rotate(225deg)}
.faq details p{padding:0 8px 22px 0;font-size:15px;line-height:1.68;color:var(--ink-3);
  max-width:70ch}

/* the hand-off out of the hero */
.flow-next{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  margin-top:12px;padding:12px 16px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(47,209,255,.45);background:rgba(47,209,255,.1);
  color:var(--a-2);font:600 13px/1 Manrope,sans-serif;
  opacity:0;transform:translateY(6px);
  transition:opacity .4s,transform .4s cubic-bezier(.32,.72,0,1),background .2s}
 /* Reserved, not removed, for the same reason. */
.flow-next[aria-hidden="true"]{opacity:0;pointer-events:none}
.flow-next.in{opacity:1;transform:none}
.flow-next:hover{background:rgba(47,209,255,.22)}
.flow-next svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;animation:fnb 1.8s ease-in-out infinite}
@keyframes fnb{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.flow-next svg{animation:none}}

/* The section container the new blocks sit in. Was never defined -- the inner
   blocks each cap their own width, so nothing overflowed, but a bare class name
   in the markup is a trap for the next edit. */
.wrap{max-width:var(--wide);margin:0 auto}

/* ══ hero board: everything rides on the board ══════════════════════════════
   The coach card takes the top-right corner and GM Forge the bottom-right.
   Both are safe in THIS position: from Black's side the files run h..a left to
   right, so the right-hand corners are a1/b1/c1 and a8/b8/c8 -- the queenside
   rooks and bishops, none of which appear in the mate. Everything the coach
   talks about (f7, f3, e5, c4, c6) is left of centre and stays uncovered. */
/* Capped against the viewport height, not just its width. Freed of the rail
   the board wanted 682px, which is a better board and an invisible one: on a
   1512x757 laptop its foot landed at 877, past the bottom of the screen. */
/* Centred on the BOARD GROUP, not on the board. The coach card hangs 11% off
   the right edge, so centring .c-main left the whole thing sitting 28px right
   of the column's middle -- which is what "not centred" was. Half the overhang
   back the other way puts the visible mass on the axis. */
.c-main{min-width:0;margin:0 auto;transform:translateX(-5.5%);
  max-width:min(780px,100%,calc(100vh - 168px))}
.board-wrap{position:relative}

/* Hung off the right edge rather than sitting wholly inside it: the same
   corner, about half the squares covered. */
.c-say{position:absolute;top:-2%;right:-11%;z-index:3;
  width:min(52%,272px);min-height:0;
  background:rgba(9,16,27,.88);backdrop-filter:blur(18px) saturate(1.3);
  border-color:rgba(120,170,235,.28);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.95)}
.c-say p{font-size:12.5px}
/* Held at the two-line height so the card does not resize under your cursor
   when he answers with a shorter line. */
.c-say{--say-min:152px;min-height:var(--say-min)}
.c-act{margin-top:auto;padding-top:10px}

.c-forge{position:absolute;right:-9%;bottom:-2%;z-index:2;margin:0;padding:0;
  width:min(29%,164px);pointer-events:none;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.75))}
.c-forge svg{width:100%;max-width:none;height:auto;display:block;margin:0}

/* The board reads as a screenshot until something says otherwise.

   This was a bordered, blurred pill, which is the default shape every one of
   these ends up as -- and it breaks the rule the rest of the page follows,
   that a border appears on hover or focus and not before. So: no box. It is
   set exactly like the rank and file letters around the board, 10.5px Sora in
   the dimmest ink, letter-spaced and upper-case, so it reads as part of the
   board's own furniture rather than a chip floating over a screenshot. The
   cursor is the only thing in accent, and the only thing that moves. */
.cue{position:absolute;left:50%;bottom:-10px;transform:translate(-50%,100%);
  z-index:4;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  font:600 10.5px/1 Sora,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-5);
  transition:opacity .4s,transform .4s cubic-bezier(.32,.72,0,1)}
.cue.gone{opacity:0;transform:translate(-50%,100%) translateY(6px);pointer-events:none}
.cue-i{width:13px;height:13px;flex:none;fill:var(--a);
  animation:cueclick 2.6s cubic-bezier(.32,.72,0,1) infinite}
@keyframes cueclick{
  0%,62%,100%{transform:translate(0,0) scale(1)}
  70%        {transform:translate(1px,1px) scale(.8)}
  80%        {transform:translate(0,0) scale(1)}
}
@media (prefers-reduced-motion:reduce){.cue-i{animation:none}}

/* the read-outs, now a row under the board instead of a third column */
/* One line, everything on it. As a two-row block this was 138px tall and the
   board paid for every one of them. */
.c-strip{display:flex;flex-wrap:nowrap;align-items:stretch;gap:7px;margin-top:6px}
.c-strip>*{display:flex;align-items:baseline;gap:7px;padding:7px 10px;min-height:0;
  white-space:nowrap;overflow:hidden}
.c-strip .c-read{flex:1 1 0;min-width:0}
.c-strip .c-read .c-k{margin:0;flex:none}
.c-strip .c-read .c-v{font-size:15px;line-height:1.2;flex:none}
.c-strip .c-read .c-sub{font-size:10.5px;line-height:1.2;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.c-strip .c-badge{flex:none;align-items:center}
.c-strip .c-cand{flex:1 1 0;min-width:0}
.c-strip .c-cand-v{overflow:hidden;text-overflow:ellipsis}
@media (max-width:1180px){.c-strip .c-read .c-sub{display:none}}
@media (max-width:700px){.c-strip{flex-wrap:wrap}.c-strip>*{flex:1 1 auto}}

/* the footnote now sits under the panel it describes */
.proc-foot{text-align:center;max-width:60ch;margin:22px auto 0;font-size:11.5px}

/* Narrow: the two overlays come off the board and stack around it. They must
   be placed EXPLICITLY -- .board-wrap is a grid, so turning them static without
   a grid-row made them auto-placed items, which took the board's cell and left
   it 0px wide. */
@media (max-width:860px){
  .c-main{transform:none}
  .board-wrap{grid-template-rows:auto auto auto auto}
  .c-say{position:static;width:auto;min-height:0;margin:0 0 10px;
    grid-column:1 / -1;grid-row:1}
  .board-wrap .board{grid-row:2}
  .ranks{grid-row:2}
  .files{grid-row:3}
  .c-forge{position:static;width:150px;margin:12px auto 0;
    grid-column:1 / -1;grid-row:4}
  }

/* ══ the shine on the trial line ════════════════════════════════════════════
   The React component animates background-position from 150% to -50% across a
   200%-wide gradient; that is exactly what this keyframe does, so no runtime is
   needed. Blue rather than the component's grey/white, to match the accent. */
.shiny{display:inline-block;font-weight:700;
  --shine-base:#5AB4E0; --shine-hi:#EAFCFF;
  background-image:linear-gradient(120deg,
    var(--shine-base) 0%,var(--shine-base) 35%,
    var(--shine-hi) 50%,
    var(--shine-base) 65%,var(--shine-base) 100%);
  background-size:200% auto;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shiny 2s linear infinite}
@keyframes shiny{from{background-position:100% center}
                 to{background-position:0% center}}
.shiny:hover{animation-play-state:paused}
/* Without a painted colour the text is invisible if the animation is off, so
   the reduced-motion case restores a real one rather than just stopping it. */
@media (prefers-reduced-motion:reduce){
  .shiny{animation:none;-webkit-text-fill-color:#7FD3F2;color:#7FD3F2;
    background-image:none}
}

/* the three facts, one line, uniform */
.hero-facts{display:flex;flex-wrap:wrap;gap:8px 0;list-style:none;padding:0;
  margin:0 0 26px}
.hero-facts li{position:relative;font-size:13px;color:var(--ink-4);
  padding-right:16px;margin-right:16px}
.hero-facts li:not(:last-child)::after{content:"";position:absolute;right:0;top:50%;
  width:3px;height:3px;border-radius:50%;background:var(--a);transform:translateY(-50%)}

/* ══ the process section ════════════════════════════════════════════════════ */
#process .flow{flex-direction:row;max-width:1100px;margin:0 auto;gap:12px}
#process .flow li{flex:1 1 0;min-width:0;min-height:114px}
#process .flow-next{max-width:340px;margin:26px auto 0}
#process .bl-head{margin-bottom:clamp(32px,3.6vw,52px)}
/* The lede is rewritten to name your move, and the replacement is shorter --
   which pulled the panel 25px up the page just as you arrived at it. */
#process .lede{min-height:81px}
@media (max-width:760px){#process .lede{min-height:0}}
@media (max-width:860px){#process .flow{flex-direction:column}}

/* ══ hero copy: centred, board pushed right ═════════════════════════════════
   Centred as a block rather than paragraph-only -- a centred paragraph under a
   left-aligned headline reads as a bug, not a choice. */
/* Left-aligned. Centred, the headline lost its edge and the column read as a
   poster rather than something you start at the top-left of. */
.hero-copy{text-align:left}
.hero-copy .sub{margin-left:0;margin-right:0}
.hero-facts,.cta-row,.promo{justify-content:flex-start}
.promo>span{max-width:52ch}
.fine{margin-left:0;margin-right:0}

/* Pushed off centre towards the right edge of its column. The shift is capped
   by the coach card, which already hangs 11% past the board: too far right and
   the card leaves the column. */
/* Full push only where the column has room for the card's overhang. At 1100px
   it left an 18px margin to the window edge, which is a clip waiting for a
   scrollbar. */
.c-main{transform:translateX(1.5%)}
@media (min-width:1500px){.c-main{transform:translateX(6%)}}
@media (max-width:860px){.c-main{transform:none}}

/* Below 1500 the copy column takes enough of the row that an 11% overhang puts
   the coach card past the right edge of the WINDOW -- it measured -16px at
   1100. Narrower screens get a smaller overhang and no push. */
@media (max-width:1499px){
  .c-say{right:-4%}
  .c-forge{right:-3%}
  .c-main{transform:none}
}

/* Motion off: the reveals must not leave the page blank. */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
}
/* GM Forge as a real image, and the tab list under the feature cards */
.proc-forge{display:block;width:clamp(76px,7vw,110px);height:auto;margin:0 auto 14px;
  border-radius:50%;background:rgba(47,209,255,.08);padding:6px}
.tabs-line{text-align:center;font-size:13px;color:var(--ink-5);margin:-14px 0 26px}
.tabs-line .rail-i{display:inline-block;font:600 12px/1 Sora,sans-serif;color:var(--ink-3);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;margin:3px 2px}
.q-mark{border-radius:50%;object-fit:cover}

/* One mark, two weights: it glows in the nav and sits quiet in the footer. */
.mark-img{width:34px;height:34px;filter:drop-shadow(0 0 14px rgba(47,209,255,.45))}
.foot-brand .mark-img{width:21px;height:21px;filter:none}

/* ── yearly / monthly, and the clock on the offer ───────────────────────────
   Both hide themselves when the offer is over; nothing below should ever be
   visible advertising a price that cannot be charged. */
.bill-switch{display:inline-flex;gap:2px;padding:3px;margin:0 0 14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px}
.bill-switch[hidden]{display:none}
.bs-b{border:0;background:transparent;color:var(--ink-4);cursor:pointer;
  font:600 12.5px/1 Manrope,sans-serif;padding:8px 15px;border-radius:999px;
  transition:background .12s cubic-bezier(.32,.72,0,1),color .12s cubic-bezier(.32,.72,0,1)}
.bs-b:hover{color:var(--ink)}
.bs-b.on{background:var(--a);color:#07101a}
.pp .save{display:inline-block;font:700 10.5px/1 Sora,sans-serif;letter-spacing:.08em;
  text-transform:uppercase;color:#07101a;background:var(--a);
  padding:5px 9px;border-radius:999px;margin-left:10px;vertical-align:middle}
.offer-note{font-size:12.5px;line-height:1.5;color:var(--ink-4);margin:-8px 0 16px}
.offer-note[hidden]{display:none}
.offer-note b{color:var(--a);font-weight:700;font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* A right answer is marked on the card and held there for a beat before the
   page moves -- green for correct, the existing accent glow for everything
   else. The outline is on the card, not the board: the board still has to be
   readable underneath it. */
.c-say.right{border-color:#3BE38B;
  box-shadow:0 0 0 1px rgba(59,227,139,.55),0 0 34px -6px rgba(59,227,139,.75),
             0 26px 60px -30px rgba(0,0,0,.95)}
.c-say.right .c-who{color:#8BF0BE}
@media (prefers-reduced-motion:no-preference){
  .c-say.right{animation:rightpulse 1.1s cubic-bezier(.32,.72,0,1) 2}
}
@keyframes rightpulse{
  0%,100%{box-shadow:0 0 0 1px rgba(59,227,139,.55),0 0 34px -6px rgba(59,227,139,.75),
                     0 26px 60px -30px rgba(0,0,0,.95)}
  50%    {box-shadow:0 0 0 2px rgba(59,227,139,.9),0 0 46px -2px rgba(59,227,139,.95),
                     0 26px 60px -30px rgba(0,0,0,.95)}
}

/* The whole trial line is one target, and it goes to the prices. */
.promo-link{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  padding:7px 12px 7px 7px;margin-left:-7px;border-radius:999px;
  border:1px solid transparent;transition:border-color .18s,background .18s}
.promo-link:hover{border-color:rgba(47,209,255,.4);background:rgba(47,209,255,.07)}
.promo{margin-top:16px}
.promo .shiny{font-size:15px}

/* The three facts sit under the button on ONE line. nowrap on the row and on
   each item, so a long word cannot break one of them onto a second line. */
.hero-facts{flex-wrap:nowrap;margin:16px 0 0;gap:0}
.hero-facts li{white-space:nowrap;font-size:clamp(11.5px,.85vw,13px);
  padding-right:clamp(10px,1vw,16px);margin-right:clamp(10px,1vw,16px)}
@media (max-width:520px){
  .hero-facts{flex-wrap:wrap;gap:6px 0}
  .hero-facts li{font-size:12px}
}

/* The copy column is much shorter than the board beside it, and starting both
   at the same y left it riding high against a tall board. Nudged down -- not
   centred, which would drop it too far and break the read from the top. */
/* Only while the hero is actually two columns -- stacked, there is no tall
   board beside it and the offset is just a gap at the top of the page. */
@media (min-width:1081px){
  .hero-copy{padding-top:clamp(16px,7vh,88px)}
}

/* ══ PHONE ══════════════════════════════════════════════════════════════════
   Centred, and nothing moved or removed. Two things were actually wrong rather
   than merely left-aligned: the board sat 22px right of centre because the rank
   numbers took a grid column of their own, and the loop steps were indented
   past a connector rail that has nothing to connect on a single column. */
@media (max-width:700px){

  /* The hero, centred as a block. */
  .hero-copy{text-align:center;max-width:none;padding-top:0}
  .hero-copy .sub{margin-left:auto;margin-right:auto;max-width:34ch}
  .cta-row,.hero-facts,.promo{justify-content:center}
  .cta-row .btn{width:100%;justify-content:center}
  .promo{margin-top:18px}
  .promo-link{margin-left:0}
  .hero-facts{flex-wrap:wrap;gap:6px 0;margin-top:18px}

  /* The rank numbers move inside the board's left edge instead of taking a
     column beside it: the board is then both centred AND full width, rather
     than centred by losing 30px. */
  .board-wrap{grid-template-columns:minmax(0,1fr)}
  .board-wrap .board{grid-column:1}
  .ranks{position:absolute;left:10px;top:8px;bottom:26px;width:14px;
    grid-column:1;z-index:2;pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.7)}
  .files{grid-column:1}

  /* Every section heading and its lede on the centre line. */
  .bl-head,.vs,.feat-more,.quote,.tabs-line,.plans,.faq-wrap .bl-head{text-align:center}
  .bl-head .lede,.vs-l,.lede{margin-left:auto;margin-right:auto}
  .eyebrow{text-align:center}

  /* The loop, without a rail to indent past. */
  .bl{grid-template-columns:minmax(0,1fr)}
  .bl-rail{display:none}
  .bl-body{text-align:center;padding-bottom:44px}
  .bl-body p{margin-left:auto;margin-right:auto;max-width:36ch}
  .bl-body .btn,.bl-body .link-arrow{justify-content:center}
  .bl-cta{width:100%}

  /* The four steps read as cards rather than rows. */
  /* One column, and EVERY child has to be told so. .fl-bar carries
     grid-column:2 from the desktop layout; against a single-column grid that
     conjures an implicit second column, which is what threw the ticks and the
     captions out of line with each other. */
  /* flex:1 1 0 governs the MAIN axis. In the desktop row that is the width;
     the moment this becomes a column it is the height, and each card collapsed
     to 38px around 117px of content -- the icons and captions then sat on top
     of one another, which is what looked broken. */
  #process .flow li{flex:0 0 auto;
    grid-template-columns:minmax(0,1fr);justify-items:center;
    align-items:center;text-align:center;min-height:0;padding:18px 14px;gap:9px}
  #process .flow li > *{grid-column:1}
  #process .flow .fl-i{margin:0}
  #process .flow .fl-bar{width:min(190px,72%);justify-self:center;margin:2px 0 0}
  #process .flow b{font-size:13.5px}
  #process .flow i{font-size:12px}
  #process .flow-next{width:100%;max-width:none}
  .proc-foot{margin-left:auto;margin-right:auto}

  /* Pricing: the parts you read as a header are centred; the feature list keeps
     its left edge, because a column of ticks down the middle stops being a list
     you can scan. */
  .plan{text-align:center}
  .plan ul{text-align:left;display:inline-block;margin-left:auto;margin-right:auto}
  .plan .btn{width:100%;justify-content:center}
  .bill-switch{margin-left:auto;margin-right:auto}

  /* FAQ: the questions centre, the answers do not -- centred prose over four
     lines is harder to read, and these are the longest paragraphs on the page. */
  .faq summary{text-align:center;padding-right:0;padding-left:0}
  .faq summary::after{position:static;display:block;margin:10px auto 0;
    transform:rotate(45deg)}
  .faq details[open] summary::after{transform:rotate(225deg)}
  .faq details p{text-align:left}

  /* The comparison keeps its two labelled sides; only the axis label centres. */
  .vs-k{justify-content:center;text-align:center}

  .foot-brand{justify-content:center;text-align:center}
  }

/* Finger-sized. These measured 29-30px tall, and they are the two things a
   phone user actually taps: the coach's buttons and the billing switch.
   Apple asks for 44pt, Android for 48dp. */
@media (max-width:700px){
  .fc-btn{min-height:44px;padding:0 16px;font-size:13px}
  .c-act{gap:10px}
  .c-act .fc-btn{flex:1 1 0}
  .bs-b{min-height:44px;padding:0 18px;font-size:13.5px}
  .bill-switch{width:100%;justify-content:stretch}
  .bill-switch .bs-b{flex:1 1 0}
  .faq summary{min-height:44px;display:flex;flex-direction:column;justify-content:center}
}

/* Just the word, in the gradient the accent span used. The drawn underline
   that used to sit beneath it is gone. */
.word-underline{display:inline-block;
  background:linear-gradient(100deg,var(--a) 0%,var(--a-2) 55%,#a9ecff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* A touch bigger, same alignment and same position. The headline is longer
   than the one it replaced, so the step is small deliberately -- more than
   this and it takes a fourth line. */
h1{font-size:clamp(36px,4.35vw,64px)}
.sub{font-size:clamp(15.5px,1.22vw,18px)}
.kicker{font-size:12.5px}
.hero-facts li{font-size:clamp(12px,.9vw,13.5px)}
.promo .shiny{font-size:16px}
.cta-row .btn{font-size:15.5px}

/* GM Forge no longer stands at the board here, so the card is the only thing
   over it -- and the corner he was covering comes back. */
.c-forge{display:none}

/* Dragging. The ghost follows the cursor at full size; the square it came from
   keeps the piece at low opacity so the board never looks like it lost one. */
.drag-ghost{position:fixed;z-index:9999;pointer-events:none;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));transform:scale(1.06);
  will-change:left,top}
.sq img{-webkit-user-drag:none;user-select:none}
/* The legal square under the cursor, so a drop is never a guess. */
.sq.over::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 0 3px var(--a);background:rgba(47,209,255,.24)}
@media (hover:hover) and (pointer:fine){
  .sq:has(img){cursor:grab}
  .sq:active{cursor:grabbing}
}

/* Another step up on the hero copy. */
h1{font-size:clamp(38px,4.6vw,68px)}
.sub{font-size:clamp(16px,1.3vw,19px)}
.kicker{font-size:13px}
.hero-facts li{font-size:clamp(12.5px,.95vw,14px)}
.promo .shiny{font-size:17px}
.cta-row .btn{font-size:16px;padding:15px 26px}

/* ══ FOOTER ═════════════════════════════════════════════════════════════════
   A real one. The rebuild had left a single row of links: no way to contact
   anyone, no route to the app, and nowhere for the YouTube channel. */
.foot{border-top:1px solid var(--line);padding:clamp(48px,6vw,80px) var(--gut) 32px;
  background:linear-gradient(180deg,transparent,rgba(47,209,255,.04))}
.foot-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:20px;max-width:var(--wide);margin:0 auto clamp(36px,4vw,56px);
  padding-bottom:clamp(28px,3vw,40px);border-bottom:1px solid var(--line)}
.foot-brand{display:flex;gap:13px;align-items:center}
.foot-brand b{display:block;font:700 17px/1.2 Sora,sans-serif;color:var(--ink)}
.foot-brand span{display:block;font-size:13px;color:var(--ink-5);margin-top:3px}
.foot-cta{display:inline-flex;align-items:center;gap:9px;flex:none;
  padding:13px 22px;border-radius:999px;text-decoration:none;
  background:var(--a);color:#07101a;font:700 14.5px/1 Manrope,sans-serif;
  transition:filter .12s cubic-bezier(.32,.72,0,1),transform .12s cubic-bezier(.32,.72,0,1)}
.foot-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.foot-cta svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}

.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(24px,3vw,44px);max-width:var(--wide);margin:0 auto}
.foot-col h3{font:600 11px/1 Sora,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-5);margin-bottom:16px}
.foot-col a,.foot-col button{display:flex;align-items:center;gap:9px;
  background:none;border:0;padding:0;margin-bottom:11px;cursor:pointer;text-align:left;
  font:400 14px/1.45 Manrope,sans-serif;color:var(--ink-3);text-decoration:none;
  transition:color .12s cubic-bezier(.32,.72,0,1)}
.foot-col a:hover,.foot-col button:hover{color:var(--a)}
.foot-ic{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
/* The play triangle is a solid shape inside the outlined badge. */
.foot-ic .yt-tri{fill:currentColor;stroke:none}

.foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:10px;max-width:var(--wide);margin:clamp(36px,4vw,56px) auto 0;
  padding-top:24px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-5)}
.foot-made{color:var(--ink-6,#4c5a6e)}

@media (max-width:860px){
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
}
@media (max-width:700px){
  .foot{text-align:center}
  .foot-top{flex-direction:column;justify-content:center}
  .foot-brand{flex-direction:column;text-align:center;gap:10px}
  .foot-cta{width:100%;justify-content:center;min-height:48px}
  .foot-col a,.foot-col button{justify-content:center;min-height:32px}
  .foot-bottom{flex-direction:column;justify-content:center;text-align:center}
}

/* ══ Player reviews ═════════════════════════════════════════════════════════
   Hidden until there is at least one; the founder's note stands alone until
   then, which is the honest state rather than an empty heading. */
.reviews{max-width:var(--wide);margin:0 auto clamp(44px,5vw,72px);text-align:center}
.reviews[hidden]{display:none}
.reviews .eyebrow{margin-bottom:clamp(22px,2.4vw,34px)}
/* Cards keep a readable width instead of stretching to fill the row, so one
   or two reviews centre at a normal size rather than becoming a single
   letterbox that announces how few there are. */
.rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,330px));
  justify-content:center;gap:clamp(14px,1.5vw,20px);max-width:1060px;margin:0 auto}
.rev{margin:0;padding:22px;border:1px solid var(--line);border-radius:16px;
  background:var(--panel-2);text-align:left;display:flex;flex-direction:column;gap:12px}
.rev-stars{display:flex;gap:4px}
.rev-star{width:14px;height:14px;background:var(--line-2);
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.rev-star.on{background:var(--a)}
.rev blockquote{margin:0;font-size:15px;line-height:1.6;color:var(--ink-2);
  overflow-wrap:anywhere}
.rev figcaption{font:600 12.5px/1 Sora,sans-serif;color:var(--ink-5)}
@media (max-width:700px){
  .rev{text-align:center;align-items:center}
  .rev-stars{justify-content:center}
}


/* ── the two plan cards, as a diff ─────────────────────────────────────────
   Same six rows in the same order on both, so the columns line up and the only
   thing that moves between them is the number. The number is the argument:
   "1 of 14" next to "all 14" says more than any adjective. */
.plans{align-items:stretch}
.plan{display:flex;flex-direction:column}
.plan ul{gap:0;flex:1}
.plan li{display:flex;align-items:baseline;gap:14px;padding:9px 0;
  border-top:1px solid rgba(255,255,255,.05);font-size:13px;line-height:1.4;
  color:var(--ink-3);min-height:38px}
.plan li:first-child{border-top:0}
.plan li::before{content:none}
.plan li{padding-left:0}
.plan li .k{flex:1;min-width:0}
.plan li .v{flex:none;font:700 13.5px/1.2 Sora,sans-serif;color:var(--ink);
  text-align:right;white-space:nowrap}
.plan li .v em{display:inline-block;margin-left:8px;padding:4px 7px;border-radius:999px;
  font:700 9.5px/1 Sora,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  font-style:normal;color:#07101a;background:var(--a);vertical-align:middle}
.plan li.off .k{color:var(--ink-5)}
.plan li .v.lk{color:var(--ink-5);font-weight:600;position:relative;padding-left:18px}
/* a drawn padlock: an escaped glyph in a stylesheet has printed itself over
   the text here before */
.plan li .v.lk::before{content:"";position:absolute;left:0;top:2px;
  width:11px;height:8px;border-radius:2px;background:var(--ink-5)}
.plan li .v.lk::after{content:"";position:absolute;left:2.5px;top:-2.5px;
  width:6px;height:6px;border:1.6px solid var(--ink-5);border-bottom:0;
  border-radius:4px 4px 0 0}

/* the free card carries the switch's twin in the same slot, so both cards are
   the same height and the two prices sit on one line across */
.bill-static{display:inline-flex;gap:2px;padding:3px;margin:0 0 14px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px}
.bill-static span{display:block;font:600 12.5px/1 Manrope,sans-serif;color:var(--ink-5);
  padding:8px 15px;border-radius:999px}
@media (max-width:640px){
  .bill-static{width:100%;justify-content:center;margin-left:auto;margin-right:auto}
  .bill-static span{flex:1;min-height:44px;font-size:13.5px;padding:0 18px;
    display:flex;align-items:center;justify-content:center}
}


/* ══════════════════════════════════════════════════════════════════════════
   TOPBAR AND HERO
   The accent is ink, not light: it appears on a rule, on small caps and on one
   button. No gradient text, no ambient beam, no glowing anything -- those read
   as generated, and on a chess site they compete with the boards, which are the
   only thing here worth looking at.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the bar ───────────────────────────────────────────────────────────── */
/* The strip behind it is gone.

   Two earlier .nav rules in this file set a full-width background and a bottom
   border on .stuck, and the rule below never overrode them -- so scrolling put
   the rounded card inside a dark bar spanning the window. The card is the whole
   bar now: everything outside it is the page, showing through.

   !important because those earlier rules are duplicated twice over and sit in a
   block that predates this one; overriding by order alone has already failed
   here once. */
.nav,.nav.stuck{background:none!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;border-bottom:0!important;
  height:auto!important;display:block!important;
  position:fixed;top:0;left:0;right:0;z-index:60;padding:14px var(--gut) 0}

/* Shorter across, a little taller, a little rounder. The blur stays on the card
   itself, which is what makes the page visibly pass underneath it. */
.nav-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;
  width:min(1040px,100%);margin:0 auto;padding:13px 13px 13px 18px;
  border-radius:15px;background:rgba(7,12,20,.72);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
          backdrop-filter:blur(20px) saturate(135%);
  border:1px solid var(--line);
  transition:background .3s var(--ease),border-color .3s var(--ease),
             box-shadow .3s var(--ease)}
/* Once the page moves under it the card lifts slightly off the content, which
   is the only thing that should change on scroll. */
.nav.stuck .nav-in{background:rgba(6,10,17,.9);border-color:var(--line-2);
  box-shadow:0 14px 34px -26px rgba(0,0,0,.95)}
.nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none;
  padding:4px 6px;border-radius:7px;transition:opacity .18s var(--ease)}
.nav .brand:hover{opacity:.78}
.nav .mark-img{width:26px;height:26px;display:block}
.nav .brand-word{font:700 16px/1 Sora,sans-serif;letter-spacing:-.01em;color:var(--ink)}
.nav .links{display:flex;justify-content:center;gap:2px}
.nav .links a{position:relative;padding:9px 14px;border-radius:7px;
  font:500 13.5px/1 Manrope,sans-serif;color:var(--ink-3);text-decoration:none;
  transition:color .18s var(--ease),background .18s var(--ease)}
.nav .links a:hover{color:var(--ink);background:rgba(120,170,235,.06)}
.nav .links a.on{color:var(--ink)}
.nav .links a.on::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;
  height:1.5px;background:var(--a)}
.nav-cta{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
  border-radius:8px;font:600 13.5px/1 Manrope,sans-serif;text-decoration:none;
  color:#04121f;background:var(--a);
  transition:transform .18s var(--ease),background .18s var(--ease)}
.nav-cta svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .18s var(--ease)}
.nav-cta:hover{background:var(--a-2);transform:translateY(-1px)}
.nav-cta:hover svg{transform:translateX(2px)}
.nav-cta:active{transform:translateY(1px)}

/* ── the hero ──────────────────────────────────────────────────────────────
   Asymmetric on purpose: the copy takes five columns of twelve and the boards
   take the rest, overlapping their own column. Nothing is centred, because a
   centred column of text above a row of equal cards is the shape every
   generated page has. */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:150px var(--gut) 90px;overflow:hidden}
.hero-in{width:min(var(--wide),100%);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(30px,5vw,80px);align-items:center}

/* a rule, not a pill: the eyebrow is set against a hairline that runs out of it */
.eyebrow-rule{display:flex;align-items:center;gap:14px;margin:0 0 26px}
.eyebrow-rule span{flex:none;font:600 11px/1 Sora,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--a-2)}
.eyebrow-rule::after{content:"";flex:1;height:1px;background:var(--line-2)}

.hero-h{margin:0;font:600 clamp(38px,5.1vw,68px)/1.06 Sora,sans-serif;
  letter-spacing:-.035em;color:var(--ink)}
.hero-sub{margin:24px 0 0;max-width:46ch;
  font:400 clamp(15px,1.35vw,17px)/1.68 Manrope,sans-serif;color:var(--ink-3)}
.hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero-fine{margin:18px 0 0;font:400 12.5px/1.5 Manrope,sans-serif;color:var(--ink-5)}

/* ── the three staged positions ────────────────────────────────────────────
   Different sizes and vertical offsets, overlapping. The opening sits furthest
   back and smallest and the endgame nearest and largest, so the group reads as
   a progression rather than as three of a kind. */
.stage3{position:relative;display:grid;grid-template-columns:repeat(12,1fr);
  align-items:start}
.pos{margin:0;position:relative}
.pos.in{opacity:1;transform:none}
.pos{opacity:0;transform:translateY(22px) scale(.985);
  transition:opacity .6s var(--ease),transform .72s cubic-bezier(.22,1.2,.36,1)}
.pos-b{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  aspect-ratio:1/1;width:100%;border-radius:4px;overflow:hidden;
  border:1px solid rgba(8,14,22,.9);
  box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.ps{position:relative;display:grid;place-items:center}
.ps.l{background:var(--sq-l)}
.ps.d{background:var(--sq-d)}
.ps img{width:88%;height:88%;display:block}

/* the stagger */
.pos-a  {grid-column:1 / span 6;  grid-row:1; z-index:1; margin-top:0}
.pos-b2 {grid-column:5 / span 6;  grid-row:1; z-index:2; margin-top:clamp(52px,7vw,104px)}
.pos-c  {grid-column:8 / span 5;  grid-row:1; z-index:3; margin-top:clamp(170px,23vw,320px)}

.pos figcaption{display:block;margin-top:11px;padding-left:1px}
.pos figcaption b{display:block;font:600 12.5px/1 Sora,sans-serif;
  letter-spacing:.02em;color:var(--ink-2)}
.pos figcaption span{display:block;margin-top:4px;
  font:400 11.5px/1.45 Manrope,sans-serif;color:var(--ink-5)}
/* The two behind are quieter, so the eye is led rather than split three ways. */
.pos-a{opacity:0}
.pos-a.in{opacity:.9}
.pos-b2.in{opacity:.96}

@media (max-width:1040px){
  .hero{padding-top:128px}
  .hero-in{grid-template-columns:1fr;gap:clamp(44px,7vw,64px)}
  .stage3{grid-template-columns:repeat(12,1fr)}
  .pos-a{grid-column:1 / span 6}
  .pos-b2{grid-column:6 / span 6;margin-top:clamp(40px,8vw,70px)}
  .pos-c{grid-column:3 / span 5;margin-top:clamp(120px,26vw,220px)}
}
@media (max-width:640px){
  .stage3{display:flex;flex-direction:column;gap:26px}
  .pos,.pos-a,.pos-b2,.pos-c{grid-column:auto;margin-top:0;width:100%;opacity:1}
  .pos-a.in,.pos-b2.in{opacity:1}
  .nav .links{display:none}
  .nav-in{padding:8px 8px 8px 12px;gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .pos{opacity:1;transform:none;transition:none}
  .pos-a{opacity:.9}
}

/* ── the three phases ──────────────────────────────────────────────────── */
.phase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px);
  margin-top:clamp(40px,5vw,60px);align-items:stretch}
.phase{display:flex;flex-direction:column;padding:clamp(22px,2.4vw,30px);
  border-radius:16px;background:var(--panel);border:1px solid var(--line);
  box-shadow:0 26px 60px -46px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.035);
  transition:border-color .3s var(--ease),transform .3s var(--ease),
             box-shadow .3s var(--ease)}
.phase:hover{border-color:var(--line-2);transform:translateY(-2px);
  box-shadow:0 34px 70px -46px rgba(0,0,0,1),inset 0 1px 0 rgba(255,255,255,.05)}
.ph-tag{display:inline-block;padding:5px 11px;border-radius:999px;
  background:rgba(47,209,255,.09);border:1px solid rgba(47,209,255,.22);
  font:700 10.5px/1 Sora,sans-serif;letter-spacing:.13em;text-transform:uppercase;
  color:var(--a-2)}
.phase h3{margin:14px 0 0;font:700 clamp(19px,2.1vw,23px)/1.28 Sora,sans-serif;
  letter-spacing:-.02em;color:var(--ink);max-width:22ch}
.phase p{margin:14px 0 0;font:400 14px/1.68 Manrope,sans-serif;color:var(--ink-4);
  max-width:46ch}
.phase p b{color:var(--ink-2);font-weight:600}
.ph-facts{list-style:none;display:flex;gap:clamp(12px,1.6vw,22px);margin:auto 0 0;
  padding:20px 0 0;border-top:1px solid var(--line)}
.ph-facts li{display:flex;flex-direction:column;gap:3px}
.ph-facts b{font:700 20px/1 Sora,sans-serif;letter-spacing:-.02em;color:var(--a-2)}
.ph-facts span{font:500 10.5px/1.3 Manrope,sans-serif;color:var(--ink-5);max-width:11ch}

/* ── how it works ──────────────────────────────────────────────────────── */
.steps-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);
  list-style:none;margin:clamp(40px,5vw,60px) 0 0;padding:0;counter-reset:s3}
.steps-3 li{position:relative;padding:clamp(22px,2.4vw,28px);border-radius:16px;
  background:rgba(14,22,36,.5);border:1px solid var(--line);
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.steps-3 li:hover{border-color:var(--line-2);background:rgba(16,26,42,.66)}
.s3-n{font:700 11px/1 Sora,sans-serif;letter-spacing:.16em;color:var(--a);
  opacity:.75}
.steps-3 b{display:block;margin:12px 0 0;
  font:700 clamp(17px,1.9vw,20px)/1.3 Sora,sans-serif;letter-spacing:-.02em;color:var(--ink)}
.steps-3 p{margin:10px 0 0;font:400 13.6px/1.66 Manrope,sans-serif;color:var(--ink-4);
  max-width:40ch}

/* ── try it ────────────────────────────────────────────────────────────── */
.try-wrap{margin-top:clamp(36px,4.5vw,54px)}

/* ── why it sticks ─────────────────────────────────────────────────────── */
.proof-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;
  gap:clamp(14px,1.6vw,20px);margin-top:clamp(40px,5vw,60px);align-items:stretch}
.pf{display:flex;flex-direction:column;padding:clamp(22px,2.4vw,30px);
  border-radius:16px;background:var(--panel);border:1px solid var(--line);
  transition:border-color .3s var(--ease)}
.pf:hover{border-color:var(--line-2)}
.pf b{font:700 clamp(16px,1.8vw,19px)/1.3 Sora,sans-serif;letter-spacing:-.02em;
  color:var(--ink)}
.pf p{margin:11px 0 0;font:400 13.6px/1.66 Manrope,sans-serif;color:var(--ink-4)}
.pf p i{color:var(--ink-2);font-style:italic}
/* the schedule, drawn rather than described */
.pf-sched{display:flex;align-items:center;gap:0;margin-bottom:20px;flex-wrap:nowrap}
.pf-sched span{flex:none;padding:5px 8px;border-radius:7px;
  background:rgba(47,209,255,.08);border:1px solid rgba(47,209,255,.18);
  font:700 11px/1 Sora,sans-serif;color:var(--a-2)}
.pf-sched i{flex:1;height:1px;min-width:6px;
  background:linear-gradient(90deg,rgba(47,209,255,.35),rgba(47,209,255,.12))}

@media (max-width:1000px){
  .phase-grid,.steps-3{grid-template-columns:1fr 1fr}
  .proof-grid{grid-template-columns:1fr 1fr}
  .proof-grid .pf:first-child{grid-column:1 / -1}
}
@media (max-width:720px){
  .phase-grid,.steps-3,.proof-grid{grid-template-columns:1fr}
  .proof-grid .pf:first-child{grid-column:auto}
  .ph-facts{gap:18px}
  .pf-sched span{padding:4px 6px;font-size:10px}
}


/* ══ TELLS, REMOVED ═══════════════════════════════════════════════════════
   Gradient-filled headline words and cyan light spilling out of buttons are
   the two most recognisable marks of a generated page. The accent stays -- it
   is the brand -- but it is used as ink now, never as a light source. */
.grad{background:none!important;-webkit-background-clip:border-box!important;
  background-clip:border-box!important;color:var(--ink-2)!important}
/* The emphasis it was carrying moves to the shape of the sentence instead:
   the second line sits in the lighter ink, which is how a printed subhead has
   always done it. */
.btn-fill{box-shadow:none!important}
.btn-fill:hover{box-shadow:none!important;background:var(--a-2)}
.phase,.pf,.steps-3 li{box-shadow:none}
.phase:hover{box-shadow:none;transform:none;border-color:var(--line-2)}

/* ══ THE PHASES, AS AN EDITORIAL LIST ═════════════════════════════════════
   Three equal floating cards in a row is the layout every SaaS page ships. The
   same content reads better as a numbered list with a real position beside each
   one: a rule between the rows, the figure on alternating sides, and the board
   doing the work the icon grid used to pretend to do. */
.phase-grid{display:block;margin-top:clamp(40px,5vw,64px)}
.phase{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(24px,4vw,70px);align-items:center;
  padding:clamp(34px,4.4vw,58px) 0;border:0;border-radius:0;background:none;
  border-top:1px solid var(--line)}
.phase:first-child{border-top:0;padding-top:0}
.phase:hover{background:none}
/* Alternating sides. Not decoration: it stops three long rows scanning as one
   block, and it puts each board next to the sentence that describes it. */
.phase:nth-child(even) > header,
.phase:nth-child(even) .ph-body{order:2}
.phase:nth-child(even) .ph-fig{order:1}
.phase > header{grid-column:1;grid-row:1}
.ph-body{grid-column:1;grid-row:2}
.ph-fig{grid-column:2;grid-row:1 / span 2}
.phase:nth-child(even) > header{grid-column:2;grid-row:1}
.phase:nth-child(even) .ph-body{grid-column:2;grid-row:2}
.phase:nth-child(even) .ph-fig{grid-column:1;grid-row:1 / span 2}

.ph-tag{display:inline-flex;align-items:center;gap:9px;padding:0;border:0;
  background:none;font:600 11px/1 Sora,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:var(--a-2)}
.ph-tag::before{content:attr(data-n);font-variant-numeric:tabular-nums;
  color:var(--ink-5);letter-spacing:.06em}
.phase h3{margin:16px 0 0;font:600 clamp(24px,3.1vw,38px)/1.16 Sora,sans-serif;
  letter-spacing:-.03em;color:var(--ink);max-width:18ch}
.phase p{margin:16px 0 0;font:400 15px/1.72 Manrope,sans-serif;color:var(--ink-3);
  max-width:52ch}
.phase p b{color:var(--ink);font-weight:600}
.ph-facts{list-style:none;display:flex;gap:clamp(20px,3vw,44px);margin:26px 0 0;
  padding:0;border:0}
.ph-facts li{display:flex;flex-direction:column;gap:4px}
.ph-facts b{font:600 clamp(22px,2.6vw,30px)/1 Sora,sans-serif;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.ph-facts span{font:400 11px/1.35 Manrope,sans-serif;color:var(--ink-5);max-width:13ch}
.ph-fig{margin:0}
.ph-fig .pos-b{max-width:420px;margin-inline:auto}
.ph-fig figcaption{margin-top:12px;text-align:center;
  font:400 11.5px/1.5 Manrope,sans-serif;color:var(--ink-5)}

@media (max-width:900px){
  .phase{grid-template-columns:1fr;gap:26px}
  .phase > header,.phase .ph-body,.phase .ph-fig,
  .phase:nth-child(even) > header,.phase:nth-child(even) .ph-body,
  .phase:nth-child(even) .ph-fig{grid-column:1;grid-row:auto;order:0}
  .ph-fig .pos-b{max-width:340px}
}


/* ── the endgame judgement ────────────────────────────────────────────────
   Board on the left, the question beside it. Asymmetric like the rest of the
   page, and the answer replaces the question in place rather than appearing
   under it, so the section does not grow a screen taller mid-read. */
.judge{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  gap:clamp(28px,4.5vw,64px);align-items:center;
  margin-top:clamp(36px,4.5vw,56px)}
.judge-fig{margin:0}
.judge-fig .pos-b{max-width:380px;margin-inline:auto}
.j-side{margin:0;font:600 11px/1 Sora,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--a-2)}
.j-q{margin:16px 0 0;font:600 clamp(26px,3.4vw,42px)/1.14 Sora,sans-serif;
  letter-spacing:-.03em;color:var(--ink)}
.j-note{margin:14px 0 0;max-width:44ch;
  font:400 15px/1.7 Manrope,sans-serif;color:var(--ink-3)}
.j-acts{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}

.j-verdict{margin:0;font:600 clamp(20px,2.4vw,27px)/1.25 Sora,sans-serif;
  letter-spacing:-.02em}
.j-verdict.good{color:var(--good)}
.j-verdict.bad{color:var(--ink)}
.j-why{margin:13px 0 0;max-width:48ch;font:400 14.5px/1.7 Manrope,sans-serif;
  color:var(--ink-3)}
.j-rule{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line);
  max-width:48ch;font:400 14.5px/1.7 Manrope,sans-serif;color:var(--ink-2)}
.j-rule b{color:var(--ink);font-weight:600}
.j-steps{margin:16px 0 0;padding:0 0 0 22px;max-width:50ch}
.j-steps li{margin-top:9px;font:400 13.6px/1.66 Manrope,sans-serif;color:var(--ink-4)}
.j-steps li::marker{color:var(--ink-5);font-variant-numeric:tabular-nums}
.j-steps i{color:var(--ink-2);font-style:italic}

/* The swap between question and answer, so it reads as one panel turning over
   rather than two panels appearing. */
#judgeAsk,#judgeSaid{min-width:0}
#judgeAsk.in,#judgeSaid.in{animation:j-turn .42s cubic-bezier(.22,1,.36,1)}
@keyframes j-turn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}}

@media (max-width:900px){
  .judge{grid-template-columns:1fr;gap:28px}
  .judge-fig .pos-b{max-width:320px}
}
@media (prefers-reduced-motion:reduce){
  #judgeAsk.in,#judgeSaid.in{animation:none}
}