/* ============================================================
   KIDS CODING CLUB — shared styles for the portal
   (The slide decks carry their own styles.)
   ============================================================ */

:root{
  --bg:#10133a; --bg2:#1b1f5c;
  --card:#fff; --ink:#151736; --muted:#5a5f86;
  --p1:#ff5d8f; --p2:#ffb703; --p3:#3ddc97; --p4:#4cc9f0; --p5:#b388ff;
  --bad:#e63946; --line:#dfe2ff;
  --font:"Trebuchet MS","Segoe UI",Verdana,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font);
  background:radial-gradient(1200px 700px at 15% 0%,var(--bg2),var(--bg));
  background-attachment:fixed;
  color:var(--ink);min-height:100vh;
}

/* ---------- top bar ---------- */
.bar{
  display:flex;align-items:center;gap:16px;padding:12px 20px;flex-wrap:wrap;
  background:rgba(0,0,0,.3);backdrop-filter:blur(6px);color:#fff;
}
.bar.admin{background:#0b0e2a;border-bottom:3px solid var(--p2)}
.bar .brand{font-weight:bold;font-size:17px;color:#fff;text-decoration:none;white-space:nowrap}
.bar nav{display:flex;gap:14px;flex:1;flex-wrap:wrap}
.bar nav a{color:#cfd3ff;text-decoration:none;font-weight:bold;font-size:15px}
.bar nav a:hover{color:var(--p2)}
.bar .who{font-weight:bold;font-size:15px}
.bar .out{color:#cfd3ff;text-decoration:none;font-size:14px;border:2px solid rgba(255,255,255,.25);
  padding:4px 10px;border-radius:99px}

.wrap{max-width:1100px;margin:0 auto;padding:22px 18px 60px}

/* ---------- hero ---------- */
.hero{text-align:center;color:#fff;padding:26px 10px 10px}
.hero.small{padding:14px 10px 6px}
.hero-emoji{font-size:64px;line-height:1}
.hero h1{font-size:clamp(26px,4.4vw,44px);text-shadow:0 4px 0 rgba(0,0,0,.25)}
.lead{color:#cfd3ff;font-size:clamp(15px,2vw,20px);margin-top:6px}

h1,h2,h3{line-height:1.2}
.wrap > h1{color:#fff;font-size:clamp(24px,3.6vw,36px);margin-bottom:16px;
  text-shadow:0 3px 0 rgba(0,0,0,.25)}

/* ---------- cards ---------- */
.card{
  background:var(--card);border-radius:20px;box-shadow:0 8px 0 rgba(0,0,0,.18);
  padding:20px 22px;margin:0 0 18px;
}
.card.narrow{max-width:460px;margin:0 auto 18px}
.card h2{margin-bottom:8px}
.card h3{margin-bottom:8px}
.card hr{border:none;border-top:3px dashed var(--line);margin:16px 0}
.center{text-align:center}
.small{font-size:14px}
.note{color:var(--muted);font-size:14px}
.crumbs{color:#cfd3ff;text-align:center;font-size:14px;margin-bottom:10px}
.words{margin-top:10px}
.kw{display:inline-block;background:#fff3c4;border-bottom:3px solid var(--p2);
  padding:2px 10px;border-radius:8px;font-weight:bold;margin:3px 4px 0 0}

.good{color:#0b8a5b;font-weight:bold}
.bad{color:var(--bad);font-weight:bold}
.warn{color:#a06800;font-weight:bold}
.flash{background:#fff3c4;border:3px solid var(--p2);border-radius:14px;
  padding:12px 16px;margin-bottom:16px;font-weight:bold;color:#3d2a00}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--p4);color:#08243a;font-weight:bold;font-size:17px;
  padding:11px 20px;border-radius:14px;border:none;cursor:pointer;text-decoration:none;
  box-shadow:0 5px 0 rgba(0,0,0,.22);font-family:var(--font);margin:4px 4px 4px 0;
  transition:transform .08s;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.22)}
.btn.big{font-size:20px;padding:14px 28px}
.btn.small{font-size:14px;padding:7px 13px;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.btn.pink{background:var(--p1);color:#fff}
.btn.green{background:var(--p3);color:#0b3b28}
.btn.yellow{background:var(--p2);color:#3d2a00}
.btn.ghost{background:#eceefb;color:var(--ink)}
.btn.danger{background:var(--bad);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ---------- forms ---------- */
label{display:block;margin:0 0 12px;font-weight:bold;font-size:15px}
label.inline{display:flex;align-items:center;gap:8px}
input[type=text],input[type=password],input[type=number],select,textarea{
  display:block;width:100%;margin-top:5px;font-family:var(--font);font-size:16px;
  padding:10px 13px;border:3px solid var(--line);border-radius:12px;background:#fbfbff;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--p4)}
input.pin{letter-spacing:.5em;text-align:center;font-size:26px}
textarea{resize:vertical}
.inline-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.inline-form label{margin:0;flex:1 1 150px}
.inline-form button{flex:0 0 auto}

/* ---------- session tiles ---------- */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-bottom:18px}
.tile{background:#fff;border-radius:20px;box-shadow:0 8px 0 rgba(0,0,0,.18);padding:20px;
  border-top:8px solid var(--p4);display:flex;flex-direction:column}
.tile.locked{border-top-color:#9aa0c8;opacity:.85}
.tile.done{border-top-color:var(--p3)}
.tile.partial{border-top-color:var(--p1)}
.tile-num{font-size:13px;font-weight:bold;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.tile h2{font-size:21px;margin:4px 0}
.tile .phase{font-size:13px;color:var(--p5);font-weight:bold}
.tile .sub{font-size:15px;color:var(--muted);margin:8px 0;flex:1}
.tile .scoreline{font-size:14px;background:#f3f4ff;border-radius:10px;padding:8px;margin-bottom:10px}
.badge{display:inline-block;font-weight:bold;font-size:14px;padding:5px 12px;
  border-radius:99px;margin-bottom:10px;background:#eceefb;align-self:flex-start}
.badge.ready{background:#d9f6ff}
.badge.done{background:#e3fff2;color:#0b8a5b}
.badge.partial{background:#ffe4ee;color:#b3005b}
.badge.locked{background:#e8eaf6;color:#4a4f7a}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:10px 12px;text-align:left;border-bottom:2px solid var(--line);vertical-align:middle}
th{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);white-space:nowrap}
tbody tr:hover{background:#f7f8ff}
tr.dim{opacity:.5}
td.ava{font-size:24px}
td.rank{font-size:20px;font-weight:bold;white-space:nowrap}
.board tr.me{background:#fff3c4}
.board tr.me:hover{background:#ffeba8}
.you{background:var(--p2);color:#3d2a00;font-size:11px;padding:2px 7px;border-radius:99px;font-weight:bold}
.stars{color:var(--p2);letter-spacing:2px;font-size:17px}
.board-explain{background:#f3f4ff;border-radius:12px;padding:12px 14px;margin-bottom:14px;font-size:15px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tabs.small .tab{font-size:14px;padding:6px 12px}
.tab{background:rgba(255,255,255,.14);color:#cfd3ff;text-decoration:none;font-weight:bold;
  padding:9px 16px;border-radius:99px;font-size:15px}
.tab:hover{background:rgba(255,255,255,.25);color:#fff}
.tab.on{background:var(--p2);color:#3d2a00}

/* ---------- chips & stats ---------- */
.chip{display:inline-block;background:#eceefb;color:var(--ink);font-size:13px;font-weight:bold;
  padding:5px 12px;border-radius:99px;margin:3px 5px 3px 0}
.chip.open{background:#e3fff2;color:#0b8a5b}
.chip.locked{background:#ffe8e8;color:#b3001b}
.stats{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:18px}
.stat{background:#fff;border-radius:16px;box-shadow:0 6px 0 rgba(0,0,0,.16);padding:16px;text-align:center}
.stat .v{font-size:30px;font-weight:bold;color:var(--p5)}
.stat .k{font-size:13px;color:var(--muted);margin-top:4px}

.two-col{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ---------- session admin ---------- */
.session-admin{border-left:10px solid #9aa0c8}
.session-admin.is-open{border-left-color:var(--p3)}
.sa-head{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.sa-facts{margin:12px 0}

/* ---------- lists ---------- */
ul.tick{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:16px}
ul.tick li::before{content:"👉 "}
ol.steps-inline{list-style:none;display:flex;flex-wrap:wrap;gap:10px;font-size:15px;counter-reset:s}
ol.steps-inline li{background:#f3f4ff;border-radius:12px;padding:8px 14px;font-weight:bold}

/* ---------- test ---------- */
.testbar{display:flex;align-items:center;gap:14px;background:#0b0e2a;color:#fff;
  border-radius:16px;padding:12px 18px;margin-bottom:16px;flex-wrap:wrap}
.tb-left{font-size:15px;font-weight:bold;white-space:nowrap}
.tb-mid{flex:1;height:12px;background:rgba(255,255,255,.18);border-radius:99px;overflow:hidden;min-width:100px}
.tb-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--p3),var(--p2),var(--p1));transition:width .3s}
.tb-right{font-size:19px;font-weight:bold;font-variant-numeric:tabular-nums;white-space:nowrap}
.tb-right.low{color:#ff7a7a}

.q{font-size:clamp(18px,2.5vw,25px);font-weight:bold;text-align:center;margin-bottom:14px}
.opts{display:flex;flex-direction:column;gap:10px;max-width:620px;margin:0 auto}
.opt{background:#f3f4ff;border:3px solid var(--line);border-radius:14px;padding:13px 17px;
  font-size:17px;font-weight:bold;text-align:left;cursor:pointer;font-family:var(--font);color:var(--ink)}
.opt:hover:not(:disabled){border-color:var(--p4)}
.opt.right{background:#e3fff2;border-color:var(--p3)}
.opt.wrong{background:#ffe8e8;border-color:var(--bad)}
.opt:disabled{cursor:not-allowed;opacity:.75}
.msg{text-align:center;font-weight:bold;font-size:17px;min-height:26px;margin-top:12px}
.msg.win{color:#0b8a5b}
.msg.lose{color:var(--bad)}

/* ---------- feedback stars ---------- */
.fq{margin-bottom:22px;padding-bottom:18px;border-bottom:3px dashed var(--line)}
.fq:last-of-type{border-bottom:none}
.starpick{display:flex;gap:10px;justify-content:center;margin-top:10px}
.star{font-size:46px;background:none;border:none;cursor:pointer;color:#c9cdf5;line-height:1;
  padding:0 4px;transition:transform .1s;font-family:var(--font)}
.star:hover{transform:scale(1.18)}
.star.on{color:var(--p2)}
.yesno{display:flex;gap:14px;justify-content:center;margin-top:10px}
.yn{font-size:19px;font-weight:bold;padding:13px 30px;border-radius:14px;border:4px solid var(--line);
  background:#f3f4ff;cursor:pointer;font-family:var(--font);color:var(--ink)}
.yn.yes.on{background:#e3fff2;border-color:var(--p3)}
.yn.no.on{background:#ffe8e8;border-color:var(--bad)}

/* ---------- dashboard: my result + mini leaderboards ---------- */
.myresult{background:#f3f4ff;border-radius:12px;padding:10px 12px;margin-bottom:10px;font-size:14px}
.myresult b{color:var(--ink)}
.bars{display:grid;grid-template-columns:auto 1fr auto;gap:5px 8px;align-items:center;margin-top:8px}
.bars span:first-child,.bars span:nth-child(3n+1){font-size:12px;color:var(--muted);white-space:nowrap}
.bars .bar{background:#dfe2ff;border-radius:99px;height:9px;overflow:hidden;display:block}
.bars .bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--p3),var(--p4));transition:width .4s}
.bars b{font-size:12px;font-variant-numeric:tabular-nums}

.miniwrap{background:#fffdf3;border:2px solid #ffe9a8;border-radius:12px;
  padding:10px 12px;margin-bottom:12px}
.mini-head{font-weight:bold;font-size:13px;color:#8a5b00;margin-bottom:6px}
.mini-empty{font-size:13px;margin:0}
table.mini-board{width:100%;border-collapse:collapse;font-size:13px}
table.mini-board td{padding:3px 4px;border:none}
table.mini-board td.r{width:26px;font-size:15px}
table.mini-board td.n{overflow:hidden;text-overflow:ellipsis}
table.mini-board td.p{text-align:right;font-weight:bold;white-space:nowrap}
table.mini-board td.t{text-align:right;color:var(--muted);white-space:nowrap;font-size:12px}
table.mini-board tr.me{background:#fff3c4}
table.mini-board tr.faint{opacity:.65;font-style:italic}
.mini-link{display:inline-block;margin-top:6px;font-size:12px;font-weight:bold;
  color:var(--p5);text-decoration:none}
.mini-link:hover{text-decoration:underline}
.scorecard .stats{margin-bottom:10px}
.scorecard .stat .v{font-size:26px}

/* ---------- interactive challenge inside the test ----------
   NOTE: the class is .cgrid, NOT .grid — .grid is already the dashboard's
   session-tile layout, and reusing it here silently broke that page. */
.gridwrap{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.cgrid{display:grid;gap:5px;background:#dfe2ff;padding:6px;border-radius:16px}
.cgrid .cell{width:clamp(38px,7vw,58px);height:clamp(38px,7vw,58px);background:#fff;
  border-radius:10px;display:grid;place-items:center;font-size:clamp(22px,4vw,32px);
  transition:background .15s}
.cgrid .cell.wall{background:#3a3f74}
.cgrid .cell.goal{background:#fff6d6}
.cgrid .cell.target{box-shadow:inset 0 0 0 3px #ffd76a}
.cgrid .cell.paint{background:var(--p4)}
.cgrid .cell.paint.target{background:var(--p3);box-shadow:inset 0 0 0 3px #17b077}
.progpanel{min-width:240px;flex:1 1 250px;max-width:340px}
.prog{min-height:60px;background:#f3f4ff;border:3px dashed #c9cdf5;border-radius:14px;padding:8px;
  display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start}
.cmd{background:var(--p4);color:#08243a;font-weight:bold;font-size:19px;padding:5px 11px;
  border-radius:10px;cursor:pointer}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:176px;margin:10px auto}
.pad button{font-size:23px;padding:7px;border-radius:12px;background:var(--p4);color:#08243a;
  font-weight:bold;box-shadow:0 4px 0 rgba(0,0,0,.2);border:none;cursor:pointer;font-family:var(--font)}
.pad button:active{transform:translateY(3px);box-shadow:none}

/* ---------- per-session reset panel ---------- */
.resetpanel{background:#fff8f8;border:2px solid #ffd9d9;border-radius:14px;
  padding:12px 14px;margin:12px 0}
.resetpanel h3{font-size:16px;color:#b3001b;margin-bottom:6px}
.resetpanel table{font-size:14px}
.resetpanel form{display:inline;margin:0}

/* ---------- confetti ---------- */
.conf{position:fixed;top:-20px;width:11px;height:16px;border-radius:3px;
  pointer-events:none;z-index:99;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}

/* ---------- phase headings on the student dashboard ---------- */
.phasehead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:26px 0 12px;padding-bottom:8px;border-bottom:2px solid rgba(255,255,255,.16)}
.phasehead h2{color:#fff;font-size:clamp(18px,2.6vw,25px);margin:0;
  text-shadow:0 2px 0 rgba(0,0,0,.25)}
.phasecount{color:#cfd3ff;font-size:14px;font-weight:bold;
  background:rgba(255,255,255,.12);border-radius:99px;padding:3px 11px}
.nextphase{margin-top:22px;border:3px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.04)}
.nextphase h3{color:#fff;margin-bottom:4px}
.nextphase .note{color:#cfd3ff}

/* ---------- "How did I do?" review + question analysis ---------- */
.scorerow{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.scorebox{background:#f3f4ff;border-radius:14px;padding:12px 18px;text-align:center;min-width:104px}
.scorebox b{display:block;font-size:26px;line-height:1.1;color:var(--ink)}
.scorebox span{font-size:13px;color:#5b619a}

/* A left border carries the verdict, so it reads at a glance and does not
   depend on colour alone — the text label says the same thing. */
.qreview{border-left:6px solid #dfe2ff;background:#fafbff;border-radius:12px;
  padding:12px 14px;margin-bottom:10px}
.qreview.first{border-left-color:#3ddc97}
.qreview.later{border-left-color:#ffb703}
.qreview.skip {border-left-color:#c9cdf5}
.qhead{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.qnum{font-weight:bold;color:#5b619a;font-size:14px}
.qtext{font-weight:bold;flex:1 1 260px}
.qtag{font-size:13px;font-weight:bold;color:#5b619a;white-space:nowrap}
.qreview.first .qtag{color:#0b8a5b}
.qreview.later .qtag{color:#a86800}
.qopts{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.qopts li{background:#fff;border:2px solid #eceefb;border-radius:10px;padding:8px 11px;font-size:15px}
.qopts li.right{background:#e3fff2;border-color:#3ddc97}
.qopts li.chosen-wrong{background:#ffe8e8;border-color:#ffb3b3}
.qopts .mark{font-size:12px;font-weight:bold;color:#5b619a;margin-left:6px;white-space:nowrap}

.qbar{background:#eceefb;border-radius:99px;height:12px;overflow:hidden;min-width:90px}
.qbar i{display:block;height:100%;background:#3ddc97;border-radius:99px}
.qbar.warn i{background:#ffb703}
.qbar.bad  i{background:#ff5d8f}

/* ============================================================
   THE PUBLIC LANDING PAGE
   The first thing a parent sees, so it carries more prose than
   anywhere else in the app. Everything here is layout for that
   prose — the colours and the button styles are the ones the
   rest of the portal already uses.
   ============================================================ */

/* .bar is a wrapping flexbox; this spacer pushes Log in / Sign up
   to the right on a desktop and lets them wrap under the club name
   on a phone, with no media query and no second layout. */
.bar .barspace{flex:1}
.bar.landing{background:rgba(0,0,0,.34)}
.bar.landing .btn{margin:0}

/* --- hero: text left, a little live terminal right --- */
.landing-hero{
  padding:38px 10px 22px;text-align:left;
  display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center;
  position:relative;
}
.heroglow{
  position:absolute;inset:-40px -10px auto;height:340px;pointer-events:none;z-index:0;
  background:radial-gradient(520px 240px at 22% 40%,rgba(255,93,143,.30),transparent 70%),
             radial-gradient(460px 220px at 78% 30%,rgba(76,201,240,.26),transparent 70%);
  filter:blur(6px);
}
.herotext{position:relative;z-index:1}
.eyebrow{
  display:inline-block;color:#cfd3ff;font-size:14px;font-weight:bold;
  background:rgba(255,255,255,.10);border:2px solid rgba(255,255,255,.18);
  padding:5px 13px;border-radius:99px;margin-bottom:14px;
}
.landing-hero h1{font-size:clamp(30px,4.6vw,54px);line-height:1.12;color:#fff}
.landing-hero h1 .hl{
  color:var(--p2);position:relative;white-space:nowrap;
}
/* A highlighter stroke, not a block behind the word: it sits BELOW the
   baseline and stays thin, so the letters keep their shape. */
.landing-hero h1 .hl::after{
  content:'';position:absolute;left:-.04em;right:-.04em;bottom:.01em;height:.13em;
  background:var(--p1);opacity:.75;border-radius:99px;
}
.landing-hero .lead{max-width:34rem;margin:14px 0 0}
.herobtns{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}

/* the little terminal */
.heroterm{
  position:relative;z-index:1;background:#0a0d28;border:3px solid rgba(255,255,255,.14);
  border-radius:16px;box-shadow:0 14px 34px rgba(0,0,0,.42);overflow:hidden;
  font-family:Consolas,"Courier New",monospace;
}
.termbar{
  display:flex;align-items:center;gap:6px;padding:9px 13px;background:rgba(255,255,255,.06);
  color:#8e96d6;font-size:12px;font-family:var(--font);
}
.termbar span{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.termbar span:nth-child(2){background:#febc2e}
.termbar span:nth-child(3){background:#28c840}
.termbar b{margin-left:8px;font-weight:normal}
.herocode{
  margin:0;padding:16px 16px 6px;color:#8ef7c8;font-size:15px;line-height:1.6;
  min-height:5.2em;white-space:pre-wrap;word-break:break-word;
}
.herocode::after{
  content:'▋';color:var(--p2);animation:blink 1s steps(2) infinite;
}
@keyframes blink{50%{opacity:0}}
.heroout{
  margin:0 16px 16px;padding:10px 13px;border-radius:10px;min-height:2.6em;
  background:rgba(255,255,255,.06);color:#fff;font-size:15px;line-height:1.5;
  white-space:pre-wrap;opacity:0;transform:translateY(5px);transition:all .3s;
}
.heroout.show{opacity:1;transform:none}
.heroout.ashtml{font-family:var(--font);font-size:24px;font-weight:bold}

/* --- the stat strip --- */
.statstrip{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
  margin:0 0 20px;padding:16px;border-radius:18px;
  background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.10);
}
.sfig{text-align:center;min-width:104px;flex:1}
.sfig b{display:block;color:var(--p2);font-size:clamp(26px,3.4vw,36px);line-height:1}
.sfig span{color:#cfd3ff;font-size:13px}

/* --- scroll reveal ---
   Gated on .has-js, which landing.js sets on <html> as its first act. Hiding
   content in a stylesheet and relying on JavaScript to bring it back means a
   blocked or failed script leaves a blank page — on the one page whose whole
   job is to be readable by a stranger. With the gate, no JS simply means no
   animation, and every word is on screen. */
.has-js .reveal{opacity:0;transform:translateY(22px);
  transition:opacity .5s ease,transform .5s ease}
.has-js .reveal.shown{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .has-js .reveal{opacity:1;transform:none;transition:none}
}

/* Body copy on a marketing page needs to be bigger than a form label. */
.big-p{font-size:17px;line-height:1.65;margin-bottom:12px}

/* --- who can join --- */
.whogrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:12px}
.whocard{border-radius:16px;padding:16px 18px;border:3px solid var(--line)}
.whocard.yes{background:#eefcf5;border-color:#a9ecce}
.whocard.no{background:#fff8e6;border-color:#ffe0a3}
.whocard h3{margin-bottom:10px}
.whocard ul.tick li{margin-bottom:6px}

/* --- the four phases ---
   Fixed at two columns, not auto-fit. auto-fit gave three across on a laptop
   and left phase 4 stranded on a row of its own, which reads as an afterthought
   rather than the finale. Four cards want 2x2. */
.phasecards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:14px}
@media (max-width:720px){ .phasecards{grid-template-columns:1fr} }
.phasecard{border-radius:18px;padding:18px;color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.18)}
.phasecard.p1{background:linear-gradient(160deg,#ff7aa2,#e8446f)}
.phasecard.p2{background:linear-gradient(160deg,#ffc63d,#e59400)}
.phasecard.p3{background:linear-gradient(160deg,#4fe3a8,#12a870)}
.phasecard.p4{background:linear-gradient(160deg,#7bd6ff,#3a86c8)}
.phasecard .pnum{font-size:13px;font-weight:bold;text-transform:uppercase;
  letter-spacing:.09em;opacity:.85}
.phasecard h3{margin:4px 0 6px;font-size:21px}
.phasecard .pwhen{font-size:13px;opacity:.9;margin-bottom:10px;font-weight:bold}
.phasecard p{font-size:15px;line-height:1.5;margin-bottom:10px}
.phasecard code{background:rgba(0,0,0,.22);padding:1px 6px;border-radius:6px}
.phasecard .pend{background:rgba(0,0,0,.18);border-radius:10px;padding:8px 11px;
  font-size:14px;margin-bottom:0}

/* ---------- THE PLAYGROUND ---------- */
.playground{padding-bottom:14px}
.pghead{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.sfxslot{flex:0 0 auto}

.pgtabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0;
  border-bottom:3px solid var(--line);padding-bottom:0}
.pgtab{
  border:3px solid var(--line);border-bottom:none;background:#f4f6ff;color:var(--muted);
  font-family:var(--font);font-weight:bold;font-size:15px;cursor:pointer;
  padding:10px 15px;border-radius:12px 12px 0 0;margin-bottom:-3px;transition:all .15s;
}
.pgtab:hover{background:#fff;color:var(--ink)}
.pgtab.on{background:#fff;color:var(--ink);border-color:var(--p4);
  border-bottom:3px solid #fff}
.pgpane{padding-top:16px;animation:panefade .25s ease}
@keyframes panefade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pgintro{font-size:15px;line-height:1.6;margin-bottom:14px}
.pgintro i{color:var(--muted)}
.pgintro code{background:#fff3c4;padding:1px 6px;border-radius:6px;font-weight:bold}
.pgfoot{margin-top:16px}

/* --- Phase 1: the robot --- */
.rbwrap{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start}
.rbgrid{display:grid;gap:5px;background:#dfe2ff;padding:7px;border-radius:14px}
.rbcell{
  width:clamp(38px,5.2vw,54px);height:clamp(38px,5.2vw,54px);
  background:#fff;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:clamp(20px,2.8vw,28px);transition:background .18s;
}
.rbcell.wall{background:#c9ccec}
.rbcell.goal{background:#fff3c4}
.rbcell.trail{background:#c9f7e2}
.rblabel{font-weight:bold;font-size:14px;color:var(--muted);margin-bottom:6px}
.rbprog{
  min-height:52px;background:#f4f6ff;border:3px dashed var(--line);border-radius:12px;
  padding:8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:12px;
}
.rbhint{color:var(--muted);font-size:14px;padding:0 4px}
.rbcmd{
  background:var(--p4);color:#fff;border:none;border-radius:9px;cursor:pointer;
  font-size:20px;width:38px;height:38px;line-height:1;font-family:var(--font);
  box-shadow:0 3px 0 rgba(0,0,0,.2);transition:transform .1s;
}
.rbcmd:hover{transform:translateY(-2px)}
.rbcmd:active{transform:translateY(1px);box-shadow:none}
.rbpad{display:grid;grid-template-columns:repeat(3,52px);gap:6px;margin-bottom:12px}
button.rbpad{all:unset}
.rbpad > button{
  background:#fff;border:3px solid var(--line);border-radius:12px;cursor:pointer;
  font-size:24px;height:52px;font-family:var(--font);color:var(--ink);
  transition:all .12s;
}
.rbpad > button:hover:not(:disabled){background:var(--p2);border-color:var(--p2);transform:translateY(-2px)}
.rbpad > button:active:not(:disabled){transform:translateY(1px)}
.rbpad > button.blank{visibility:hidden}
.rbbtns{display:flex;gap:8px;flex-wrap:wrap}
.rbmsg{margin-top:14px;font-weight:bold;font-size:16px;min-height:1.5em;text-align:center}
.rbmsg.win{color:#0b8a5b}
.rbmsg.lose{color:var(--bad)}

/* --- Phase 2 & 3: the editors --- */
.labsplit{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.labed{
  width:100%;min-height:190px;resize:vertical;
  font-family:Consolas,"Courier New",monospace;font-size:14px;line-height:1.55;
  background:#0a0d28;color:#8ef7c8;border:3px solid #2a2f66;border-radius:12px;padding:12px;
}
.labed:focus{outline:none;border-color:var(--p4)}
.labpv{
  width:100%;min-height:190px;background:#fff;border:3px solid var(--line);
  border-radius:12px;display:block;
}
.labout{
  width:100%;min-height:190px;margin:0;overflow:auto;
  font-family:Consolas,"Courier New",monospace;font-size:14px;line-height:1.55;
  background:#0a0d28;color:#fff;border:3px solid #2a2f66;border-radius:12px;padding:12px;
  white-space:pre-wrap;word-break:break-word;
}
.labout .err{color:#ff8fab;font-weight:bold}
.labbtns{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- THE ROADMAP ---------- */
.roadmap{display:grid;gap:10px;margin:14px 0 16px}
.rmtrack{border-radius:14px;padding:11px 14px;border-left:7px solid}
.rmtrack.p1{background:#fff0f4;border-color:var(--p1)}
.rmtrack.p2{background:#fff8e6;border-color:var(--p2)}
.rmtrack.p3{background:#eafaf3;border-color:var(--p3)}
.rmtrack.p4{background:#eaf6fd;border-color:var(--p4)}
.rmhead{display:flex;align-items:center;gap:9px;font-weight:bold;font-size:15px;margin-bottom:9px}
.rmicon{font-size:20px}
.rmdots{display:flex;gap:8px;flex-wrap:wrap}
.rmdot{
  width:44px;height:44px;border-radius:12px;cursor:pointer;
  border:3px solid rgba(0,0,0,.10);background:#fff;color:var(--ink);
  font-family:var(--font);font-weight:bold;font-size:17px;transition:all .14s;
}
.rmdot:hover{transform:translateY(-3px);box-shadow:0 5px 0 rgba(0,0,0,.14)}
.rmdot.on{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-3px)}
.rmdot:focus-visible{outline:3px solid var(--p4);outline-offset:2px}
.rmdetail{
  background:#f4f6ff;border-radius:14px;padding:15px 18px;border:3px solid var(--line);
}
.rmdetail.pop{animation:rmpop .28s ease}
@keyframes rmpop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.rmnum{font-size:12px;font-weight:bold;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.rmdetail h4{font-size:20px;margin:3px 0 4px}
.rmdetail .rmphase{font-size:13px;font-weight:bold;color:var(--p1);margin-bottom:7px}
.rmdetail p{line-height:1.6}

/* ---------- how a session works ---------- */
.flowsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0}
.fstep{
  background:#f4f6ff;border-radius:14px;padding:14px 12px;text-align:center;
  border:3px solid var(--line);position:relative;transition:transform .15s;
}
.fstep:hover{transform:translateY(-4px)}
.fnum{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;width:24px;height:24px;border-radius:50%;
  font-size:13px;font-weight:bold;line-height:24px;
}
.femo{font-size:30px;line-height:1;margin:6px 0 4px}
.fstep b{display:block;font-size:15px}
.fstep span{display:block;color:var(--muted);font-size:13px;line-height:1.45;margin-top:3px}

/* --- questions parents ask (accordion) --- */
.faq{margin-top:10px}
.faqq{
  display:block;width:100%;text-align:left;cursor:pointer;
  font-family:var(--font);font-weight:bold;font-size:16px;color:var(--ink);
  background:#f4f6ff;border:3px solid var(--line);border-radius:12px;
  padding:12px 44px 12px 15px;margin-bottom:8px;position:relative;transition:all .15s;
}
.faqq:hover{background:#eaeeff}
.faqq::after{
  content:'+';position:absolute;right:15px;top:50%;transform:translateY(-50%);
  font-size:22px;color:var(--p1);transition:transform .2s;
}
.faqq.open{background:var(--ink);color:#fff;border-color:var(--ink);
  border-radius:12px 12px 0 0;margin-bottom:0}
.faqq.open::after{content:'−';color:var(--p2)}
.faqa{
  border:3px solid var(--ink);border-top:none;border-radius:0 0 12px 12px;
  padding:13px 15px;margin-bottom:8px;animation:panefade .2s ease;
}
.faqa p{color:var(--muted);line-height:1.65}

/* ============================================================
   LEADERBOARD BADGES
   Seven tiers, drawn as inline SVG by lib/badges.php.
   ============================================================ */

.badge{display:block;margin:0 auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}

/* the top three, above the table */
.podium{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin:4px 0 20px;align-items:end;
}
.pod{
  text-align:center;padding:14px 8px 12px;border-radius:16px;
  background:#f4f6ff;border:3px solid var(--line);
}
/* second place first, winner in the middle and lifted — a podium, not a list */
.pod:nth-child(1){order:2;transform:translateY(-10px);background:#fffaf0;border-color:var(--p2)}
.pod:nth-child(2){order:1}
.pod:nth-child(3){order:3}
.pod.me{border-color:var(--p1);background:#fff0f4}
.podwho{font-weight:bold;font-size:15px;margin-top:6px}
.podpts{color:var(--muted);font-size:13px}
.podpts b{color:var(--ink);font-size:16px}

/* the compact form used in table cells */
.bchip{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:3px 11px 3px 4px;border-radius:99px;font-size:12px;font-weight:bold;
  border:2px solid;line-height:1.5;
}
.bchip b{
  display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;border-radius:50%;font-size:12px;
}
.bchip.b-platinum   {background:#f2e9ff;border-color:#7b3fd4;color:#3f1a75}
.bchip.b-platinum b {background:#7b3fd4;color:#fff}
.bchip.b-diamond    {background:#e4f5ff;border-color:#1f7fd4;color:#0a3f6b}
.bchip.b-diamond b  {background:#1f7fd4;color:#fff}
.bchip.b-gold       {background:#fff5da;border-color:#d9930a;color:#6b4400}
.bchip.b-gold b     {background:#d9930a;color:#fff}
.bchip.b-silver     {background:#f0f2f8;border-color:#8d97ad;color:#3c4356}
.bchip.b-silver b   {background:#8d97ad;color:#fff}
.bchip.b-bronze     {background:#fdeee1;border-color:#a45f23;color:#5c3210}
.bchip.b-bronze b   {background:#a45f23;color:#fff}
.bchip.b-merit      {background:#e6f9ec;border-color:#2a9a52;color:#125c2e}
.bchip.b-merit b    {background:#2a9a52;color:#fff}
.bchip.b-participant{background:#f4ecff;border-color:#6b45b0;color:#361a63}
.bchip.b-participant b{background:#6b45b0;color:#fff}

/* the badge trio on a student's own scorecard */
.badgestats .stat{background:transparent;border:none;box-shadow:none;padding:4px}
.badgestats .stat .k{margin-top:4px}

/* "how the badges work" */
.badgelegend{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
  gap:10px;margin-top:12px;
}
.blitem{text-align:center}
.blname{display:block;font-size:13px;font-weight:bold;color:var(--ink);margin-top:3px}
.blrank{display:block;font-size:12px;color:var(--muted);font-weight:bold}

@media (max-width:600px){
  /* A three-column podium at 390px gives each badge about 110px including
     padding, which is smaller than the chip it is meant to celebrate. Stack. */
  .podium{grid-template-columns:1fr;gap:8px}
  .pod:nth-child(1){order:1;transform:none}
  .pod:nth-child(2){order:2}
  .pod{display:flex;align-items:center;gap:14px;text-align:left;padding:10px 14px}
  .pod .badge{margin:0;flex:0 0 auto;height:64px;width:auto}
  .badgelegend{grid-template-columns:repeat(3,1fr)}
}

/* ---------- end-of-phase test ----------
   It closes a phase, so it should not look like the fifth session of one. */
.tile.phasetest{
  background:linear-gradient(160deg,#fffaf0,#fff2d8);
  border:4px solid var(--p2);
}
.tile.phasetest .tile-num{
  background:var(--p2);color:#3d2a00;border-radius:99px;
  padding:3px 12px;display:inline-block;font-weight:bold;
}
.tile.phasetest.locked{background:#f4f6ff;border-color:var(--line);opacity:.9}
.tile.phasetest.done{background:linear-gradient(160deg,#eefcf5,#dff7ea);border-color:var(--p3)}
.badge.phasetest{background:var(--p2);color:#3d2a00}

.phaseintro .big-list li{font-size:16px;line-height:1.65;margin-bottom:7px}
.phaseintro code{background:#fff3c4;padding:1px 7px;border-radius:6px;font-weight:bold}
.phasefacts{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 10px}

/* --- landing confetti --- */
.lpconf{
  position:fixed;top:-12px;width:10px;height:16px;border-radius:2px;z-index:9999;
  pointer-events:none;animation:lpfall linear forwards;
}
@keyframes lpfall{to{transform:translateY(104vh) rotate(640deg);opacity:.15}}

/* ============================================================
   MOTION
   ------------------------------------------------------------
   Everything below is decoration and every bit of it is switched
   off by prefers-reduced-motion at the bottom of this block. The
   page must be exactly as USABLE with all of it disabled — motion
   draws the eye along the content, it never carries meaning on
   its own.
   ============================================================ */

/* --- a progress bar showing how far down the page you are --- */
.scrollbar{
  position:fixed;top:0;left:0;height:4px;width:0;z-index:999;
  background:linear-gradient(90deg,var(--p1),var(--p2),var(--p3),var(--p4));
  transition:width .1s linear;pointer-events:none;
}

/* --- the animated backdrop ---
   A fixed layer at z-index:-1. Negative z-index paints it above the root
   background but below every box in the page, so it shows through the gaps
   between cards without anything having to be made transparent. Content is
   lifted to z-index:1 below so nothing can ever land underneath it. */
.bgfx{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
}
.mode-landing header.bar,
.mode-landing .wrap{position:relative;z-index:1}

.bgblob{
  position:absolute;border-radius:50%;opacity:.16;filter:blur(48px);
  transform:translate(-50%,-50%);animation:blobdrift ease-in-out infinite alternate;
}
@keyframes blobdrift{
  from{transform:translate(-50%,-50%) scale(1)}
  to  {transform:translate(calc(-50% + 74px),calc(-50% - 58px)) scale(1.22)}
}

.bgglyph{
  position:absolute;bottom:-8%;color:rgba(255,255,255,.11);font-weight:bold;
  font-family:Consolas,"Courier New",monospace;white-space:nowrap;
  animation:glyphrise linear infinite;
}
@keyframes glyphrise{
  0%  {transform:translateY(0) rotate(0deg);opacity:0}
  10% {opacity:1}
  90% {opacity:1}
  100%{transform:translateY(-118vh) rotate(22deg);opacity:0}
}

.bgstar{
  position:absolute;border-radius:50%;background:#fff;
  animation:twinkledot ease-in-out infinite alternate;
}
@keyframes twinkledot{
  from{opacity:.10;transform:scale(.7)}
  to  {opacity:.55;transform:scale(1.25)}
}

/* --- staggered arrival: children land one after another --- */
.has-js .reveal.shown .stagger > *{animation:popin .45s backwards}
.has-js .reveal.shown .stagger > *:nth-child(1){animation-delay:.05s}
.has-js .reveal.shown .stagger > *:nth-child(2){animation-delay:.12s}
.has-js .reveal.shown .stagger > *:nth-child(3){animation-delay:.19s}
.has-js .reveal.shown .stagger > *:nth-child(4){animation-delay:.26s}
.has-js .reveal.shown .stagger > *:nth-child(5){animation-delay:.33s}
.has-js .reveal.shown .stagger > *:nth-child(6){animation-delay:.40s}
@keyframes popin{
  from{opacity:0;transform:translateY(16px) scale(.96)}
  to  {opacity:1;transform:none}
}

/* --- section headings draw their own underline --- */
.card > h2{position:relative;display:inline-block;padding-bottom:7px}
.card > h2::after{
  content:'';position:absolute;left:0;bottom:0;height:4px;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--p1),var(--p2));
}
.has-js .reveal.shown > h2::after{animation:sweep .6s .2s ease forwards}
@keyframes sweep{to{width:100%}}

/* --- the robot is alive --- */
.rbcell{transition:background .18s,transform .18s}
.rbcell.trail{animation:ripple .4s ease}
@keyframes ripple{
  0%{transform:scale(.82);background:var(--p3)}
  100%{transform:scale(1)}
}
.rbbot{display:inline-block;animation:bob 1.4s ease-in-out infinite}
@keyframes bob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.rbgoal{display:inline-block;animation:twinkle 1.8s ease-in-out infinite}
@keyframes twinkle{
  0%,100%{transform:scale(1) rotate(0)}
  50%{transform:scale(1.18) rotate(11deg)}
}
/* a step being added lands rather than appears */
.rbcmd{animation:cmdin .22s backwards}
@keyframes cmdin{from{opacity:0;transform:translateY(-8px) scale(.7)}to{opacity:1;transform:none}}

/* --- the primary call to action catches the light --- */
.btn.green.big{position:relative;overflow:hidden}
.btn.green.big::after{
  content:'';position:absolute;top:-60%;left:-70%;width:36%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(18deg);animation:shine 4.5s ease-in-out infinite;
}
@keyframes shine{
  0%,72%{left:-70%}
  92%,100%{left:130%}
}

/* --- roadmap: the phase icon reacts, dots settle in --- */
.rmtrack:hover .rmicon{animation:wiggle .55s ease}
@keyframes wiggle{
  0%,100%{transform:rotate(0)}
  30%{transform:rotate(-16deg) scale(1.14)}
  65%{transform:rotate(13deg) scale(1.14)}
}
.has-js .reveal.shown .rmdots > *{animation:dotin .38s backwards}
.has-js .reveal.shown .rmdots > *:nth-child(1){animation-delay:.05s}
.has-js .reveal.shown .rmdots > *:nth-child(2){animation-delay:.11s}
.has-js .reveal.shown .rmdots > *:nth-child(3){animation-delay:.17s}
.has-js .reveal.shown .rmdots > *:nth-child(4){animation-delay:.23s}
@keyframes dotin{from{opacity:0;transform:scale(.4) rotate(-14deg)}to{opacity:1;transform:none}}

/* --- how a session works: a line joins the steps --- */
.flowsteps{position:relative}
.flowsteps::before{
  content:'';position:absolute;top:26px;left:6%;height:4px;width:0;
  background:repeating-linear-gradient(90deg,var(--line) 0 9px,transparent 9px 18px);
  border-radius:99px;z-index:0;
}
.has-js .reveal.shown .flowsteps::before{animation:joinup .9s .25s ease forwards}
@keyframes joinup{to{width:88%}}
.fstep{position:relative;z-index:1}
.fstep:hover .femo{animation:wiggle .55s ease}

/* --- the who-cards lift on hover --- */
.whocard{transition:transform .18s,box-shadow .18s}
.whocard:hover{transform:translateY(-4px);box-shadow:0 8px 0 rgba(0,0,0,.09)}

/* --- the tab you are on gets a moving accent --- */
.pgtab{position:relative}
.pgtab.on::before{
  content:'';position:absolute;left:12px;right:12px;top:0;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--p1),var(--p4));animation:sweep .35s ease forwards;
}

/* --- stat figures land as they count --- */
.has-js .reveal.shown .sfig{animation:popin .5s backwards}
.has-js .reveal.shown .sfig:nth-child(2){animation-delay:.08s}
.has-js .reveal.shown .sfig:nth-child(3){animation-delay:.16s}
.has-js .reveal.shown .sfig:nth-child(4){animation-delay:.24s}
.has-js .reveal.shown .sfig:nth-child(5){animation-delay:.32s}

/* --- FAQ answers unfold rather than blink into place --- */
.faqa{animation:unfold .26s ease}
@keyframes unfold{
  from{opacity:0;transform:translateY(-8px)}
  to  {opacity:1;transform:none}
}

/* ============================================================
   LANDING SECTIONS — each one its own colour, gently moving
   ------------------------------------------------------------
   A white card on a dark page is readable but flat, and six of
   them in a row read as one long document rather than six
   things worth stopping at. Each section gets a tint drawn from
   the palette, a coloured cap so you can see where it starts,
   and a slow drifting glow behind the words.

   Two layers, both pseudo-elements, so no extra markup:
     ::before  the tint. Always covers the whole card, so the
               glow below can never leave a bare corner.
     ::after   two blurred blobs on an oversized square that
               rotates. Rotating one composited layer is much
               cheaper than animating gradient positions, and
               moving both blobs at once keeps them from
               looking like they are on a track.
   ============================================================ */
.sec{position:relative;overflow:hidden;isolation:isolate;
  box-shadow:0 8px 0 rgba(0,0,0,.18),inset 0 6px 0 var(--sa)}
.sec > *{position:relative;z-index:1}

.sec::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(155deg,var(--s1),var(--s2));
}
.sec::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:-25%;top:50%;width:150%;height:150%;margin-top:-75%;
  background:radial-gradient(circle at 24% 28%,var(--s3),transparent 42%),
             radial-gradient(circle at 76% 72%,var(--s4),transparent 42%);
  filter:blur(26px);
  animation:secglow 34s linear infinite;
}
@keyframes secglow{
  from{transform:rotate(0deg)}
  to  {transform:rotate(360deg)}
}

/* The palette, one entry per section. --sa is the cap. */
.s-play{--sa:var(--p4);--s1:#f3fbff;--s2:#e9f2ff;
        --s3:rgba(76,201,240,.42);--s4:rgba(179,136,255,.30)}
.s-map {--sa:var(--p5);--s1:#fbf6ff;--s2:#fff1f7;
        --s3:rgba(179,136,255,.38);--s4:rgba(255,93,143,.26)}
.s-who {--sa:var(--p3);--s1:#f1fff8;--s2:#eafaf3;
        --s3:rgba(61,220,151,.40);--s4:rgba(76,201,240,.26)}
.s-how {--sa:var(--p2);--s1:#fffaef;--s2:#fff3e0;
        --s3:rgba(255,183,3,.36);--s4:rgba(255,93,143,.22)}
.s-faq {--sa:#8f96c9;--s1:#f7f8ff;--s2:#eef0ff;
        --s3:rgba(120,128,190,.30);--s4:rgba(76,201,240,.24)}
.s-join{--sa:var(--p1);--s1:#fff5f9;--s2:#ffeef5;
        --s3:rgba(255,93,143,.40);--s4:rgba(255,183,3,.28)}

/* Panels inside a tinted section go translucent white instead of their
   own pale blue, which would fight the tint on the warm sections. */
.sec .fstep,.sec .faqq,.sec .rmdetail,.sec .rbprog,.sec .pgtab{
  background:rgba(255,255,255,.74);border-color:rgba(255,255,255,.9)}
.sec .faqq:hover,.sec .pgtab:hover{background:#fff}
.sec .pgtab.on{background:#fff;border-color:var(--sa);border-bottom-color:#fff}
.sec .faqq.open{background:var(--ink);border-color:var(--ink)}
.sec .rmtrack,.sec .whocard,.sec .rbgrid{
  box-shadow:0 3px 10px rgba(20,24,70,.05)}

/* --- the stat strip catches a slow sheen --- */
.statstrip{position:relative;overflow:hidden}
.statstrip::after{
  content:'';position:absolute;top:-60%;left:-40%;width:26%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  transform:rotate(16deg);pointer-events:none;
  animation:statsheen 7s ease-in-out infinite;
}
@keyframes statsheen{
  0%,62%{left:-40%}
  90%,100%{left:150%}
}

/* --- a row of buttons ---
   Inline-blocks of different sizes sit on a shared baseline, which left the
   small ghost button hanging off the bottom of the big green one. A flex row
   centres the boxes on each other instead of on their text. */
.btnrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:14px 0 0}
.btnrow.center{justify-content:center}
.btnrow .btn{margin:0}
/* The button's drop shadow sits outside its box, so whatever follows needs
   clearing room or it looks stuck to the underside of the row. */
.btnrow + p{margin-top:14px}

/* ============================================================
   ...and none of it happens if the visitor asked for calm.
   One block, at the end, so it always wins.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .bgfx,.scrollbar{display:none}
  .has-js .reveal.shown .stagger > *,
  .has-js .reveal.shown .rmdots > *,
  .has-js .reveal.shown .sfig,
  .rbcmd,.faqa,.pgpane{animation:none}
  .rbcell.trail,.rbbot,.rbgoal{animation:none}
  .btn.green.big::after{display:none}
  .card > h2::after{width:100%;animation:none}
  .flowsteps::before{width:88%;animation:none}
  .whocard:hover,.fstep:hover{transform:none}
  .rmtrack:hover .rmicon,.fstep:hover .femo{animation:none}
  /* The section colours stay — they are colour, not motion. Only the
     drifting glow and the sheen stop. */
  .sec::after,.statstrip::after{animation:none}
}

.joincard{padding-top:10px}
.landingfoot{margin-top:6px}
.landingfoot a{color:#9aa2d8}

/* --- sign-up form --- */
/* Honeypot. Hidden from people without display:none, which some form-fillers
   check for and skip; anything that lands in here was not typed by a human. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bigcode{display:inline-block;background:#fff3c4;border-bottom:3px solid var(--p2);
  padding:3px 12px;border-radius:8px;font-size:20px;font-weight:bold}

/* --- admin: the sign-up queue --- */
.navbadge{display:inline-block;background:var(--p1);color:#fff;border-radius:99px;
  padding:1px 8px;font-size:12px;vertical-align:middle;margin-left:2px}
.signup .sa-head h2{font-size:21px}
.signupnote{background:#f4f6ff;border-left:5px solid var(--p4);border-radius:0 10px 10px 0;
  padding:10px 14px;margin:10px 0;font-size:15px}
.wrap-h2{color:#fff;margin:22px 0 12px;text-shadow:0 3px 0 rgba(0,0,0,.25)}
.signupalert{border:4px solid var(--p3);background:#eefcf5}
.signupalert h2{color:#0b6b47}

/* The hero stacks before the general phone breakpoint: two columns stop being
   readable well above 600px once the terminal is in there. */
@media (max-width:900px){
  .landing-hero{grid-template-columns:1fr;text-align:center;gap:22px}
  .landing-hero .lead{margin-left:auto;margin-right:auto}
  .herobtns{justify-content:center}
  .heroterm{max-width:520px;margin:0 auto;width:100%}
  /* The hero centres itself here, and the terminal inherited it — centred
     code reads as decoration. Code is always left-aligned, everywhere. */
  .heroterm{text-align:left}
}

/* The playground panes are the first thing to break: an editor beside its
   preview needs real width, and a 5-column robot grid beside a keypad does not
   fit a phone at all. Both become one column, editor above output. */
@media (max-width:760px){
  .labsplit{grid-template-columns:1fr}
  .labed,.labpv,.labout{min-height:150px}
  .rbwrap{grid-template-columns:1fr;justify-items:center}
  .rbside{width:100%;max-width:320px}
  .rbpad{justify-content:center;margin-left:auto;margin-right:auto}
}

@media (max-width:600px){
  .bar{gap:10px;padding:10px 12px}
  .bar .who{display:none}
  .wrap{padding:16px 12px 40px}
  .card{padding:16px}
  .scorebox{padding:10px 14px;min-width:84px}
  .scorebox b{font-size:21px}
  /* On a phone the two doors should be full width and thumb-sized, not a
     pair of small pills squeezed onto the end of the header row. */
  .bar.landing .barspace{flex-basis:100%;height:0}
  .bar.landing .btn{flex:1;text-align:center}
  .herobtns .btn{width:100%}
  .landing-hero{padding:24px 4px 12px}
  .statstrip{gap:6px;padding:13px 10px}
  .sfig{min-width:78px}
  .sfig b{font-size:24px}
  /* Tabs scroll sideways rather than wrapping into a ragged two-line block. */
  .pgtabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .pgtab{flex:0 0 auto;font-size:14px;padding:9px 12px}
  .rmdot{width:40px;height:40px;font-size:16px}
  .flowsteps{grid-template-columns:repeat(2,1fr)}
}