/* challenge.css — the mebobox Build Challenge landing page (/build-challenge-2026).
 *
 * Loaded AFTER account.css, which supplies the whole shell: the palette tokens, the self-hosted
 * fonts (Comfortaa / Nunito / Doto), the deep-indigo background with its scanlines + starfield, the
 * sticky app bar, and the form components (.field, .check, .primary, .panel). Nothing here
 * redefines any of that — this file is only the page's own layout.
 *
 * The design came from a standalone prototype built in a different palette (purple/pink/yellow on
 * #0d0b1a, Fredoka + Space Grotesk). Its LAYOUT is kept — hero, video, four steps, a raised podium,
 * the form — and its colours and fonts are dropped in favour of the site's, so the page reads as
 * part of mebobox rather than as a campaign microsite that happens to link to it. The one warm
 * accent that stays is gold, for first place, because there it means something: it's the site's own
 * amber (studio.css uses the same #f7d774 for "waiting"), not a new brand colour.
 */

.ch-main { position:relative; z-index:1; flex:1; width:100%; max-width:1120px; margin:0 auto; padding:0 22px; }

/* A section's kicker + heading, the same lockup the account pages use for a page title. */
.ch-kicker {
  display:block; text-align:center; font-family:var(--f-mono); font-size:12px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; color:var(--blue); margin:0 0 10px;
}
.ch-h2 {
  font-family:var(--f-display); font-weight:800; font-size:clamp(26px,4.6vw,38px);
  text-align:center; margin:0 0 40px; line-height:1.15;
}
.ch-section { padding:82px 0 0; }

/* ---- hero ---- */
/* One column, using the full width of the page. The prototype paired the copy with a decorative
   panel and we tried the prizes there instead; both crowded the opening. With the column gone there
   is no reason to keep the copy in half the space, so the headline gets the whole width — only the
   body paragraphs keep a measure (see .ch-lede), because a 1100px line is unreadable however much
   room there is for it. */
.ch-hero { padding:96px 0 34px; }
/* Two pills above the headline: who we're looking for, and when it happens. Kept as a pair on one
   row so they read as one statement, and wrapping on a narrow screen rather than shrinking. */
.ch-eyebrows { display:flex; flex-wrap:wrap; gap:10px; margin:0; }
.ch-eyebrow {
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px;
  background:rgba(43,140,255,0.1); border:1px solid var(--line-strong);
  font-size:11.5px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:#9fc2ff;
}
/* The "when" pill is green rather than blue — a different fact deserves a different colour, and
   green is the site's own "this is fine / it's happening" accent (the same one Studio uses when a
   game passes its checks). */
.ch-eyebrow.is-when {
  background:rgba(70,224,138,0.1); border-color:rgba(70,224,138,0.42); color:#7ee08a;
}
/* The deadline, in the competition's own gold. It sat under the buttons before, where it read as
   small print about a decision already made; up here it is one of the three facts you take in
   before deciding anything. */
.ch-eyebrow.is-deadline {
  background:rgba(255,199,74,0.1); border-color:rgba(255,199,74,0.45); color:#ffc74a;
}
/* The competition's name, sitting above the headline. Big enough to be the page's title but set in
   gold rather than white, so it introduces the three promises below instead of competing with them —
   and gold is what the competition is everywhere else: the app-bar pill, the Studio button, first
   place on this very page. */
/* The name and the promise are ONE lockup, so they are set at one size — the title sat visibly
   smaller than the lines under it and read as a label stuck on top rather than as the first line of
   the thing. The heading came down to meet it rather than the title going up: four lines at 52px was
   already most of the first screen, and the hero has more to say below them. */
.ch-hero-title, .ch-h1 { font-size:clamp(30px,4.4vw,44px); }
.ch-hero-title {
  margin:26px 0 0; font-family:var(--f-display); font-weight:800; line-height:1.12;
  letter-spacing:-1px; color:#ffc74a; text-shadow:0 0 34px rgba(255,199,74,0.28);
}
.ch-h1 {
  font-family:var(--f-display); font-weight:800; letter-spacing:-1px; line-height:1.12;
  margin:0;
}
/* One sentence per line, set by the markup rather than by where the text happens to wrap — so the
   three promises land as three, at every width. */
.ch-h1 span { display:block; }
/* Three sentences, three flat colours — white, green, blue — rather than a gradient sweep. Two of
   the site's own accents, used once each, so the headline has rhythm without any phrase fighting
   the one beside it. (An earlier version put "Win prizes." in gold; gold next to blue-green was a
   clash, not an accent. Gold still means "prize" where it stands alone: the nav pill, first place.) */
.ch-h1 .accent { color:#2b8cff; }
.ch-h1 .accent-2 { color:#46e08a; }
/* The two paragraphs under the headline sit SIDE BY SIDE on a wide screen rather than in a single
   column hugging the left edge. That uses the full width the hero has — but as two readable columns,
   because one 140-character line is a wall of text however handsome the width is. They stack back
   into one column as soon as a column would get too narrow to be worth having. */
.ch-hero-lede { display:grid; grid-template-columns:1fr 1fr; gap:16px 56px; margin:34px 0 0; }
.ch-lede { color:#c2cadd; font-size:16.5px; line-height:1.65; margin:0; }
.ch-lede strong { color:var(--fg); font-weight:600; }
.ch-ctas { display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.ch-ctas .primary, .ch-ctas .ghostbtn { padding:14px 24px; font-size:15px; text-decoration:none; }
/* "you can start today" — a note, not a button: it answers the question the dates above raise
   ("so I'll come back later"), and runs the full width beneath them so it reads as its own
   statement rather than as small print hanging off the last fact. */
.ch-startnow {
  margin:16px 0 0; font-size:14.5px; line-height:1.6; color:var(--muted-2);
  padding:16px 22px; border-radius:16px;
  background:rgba(70,224,138,0.07); border:1px solid rgba(70,224,138,0.3);
}
.ch-startnow strong { color:var(--fg); font-weight:600; }
.ch-startnow a { color:#7ee08a; font-weight:700; white-space:nowrap; }
.ch-startnow a:hover { text-decoration:underline; }

/* ---- the sticky register bar ---- */
/* Sits directly under the app bar (which is itself sticky) — js/challenge.js measures that bar and
   sets --ch-appbar-h, so this lines up whatever the header ends up being. z-index below the app bar
   so the two never fight, and `hidden` is honoured so it's out of the accessibility tree until it
   really is on screen. */
.ch-sticky {
  position:fixed; left:0; right:0; top:var(--ch-appbar-h, 62px); z-index:39;
  backdrop-filter:blur(14px);
  background:linear-gradient(180deg, rgba(8,8,24,0.94), rgba(8,8,24,0.82));
  border-bottom:1px solid rgba(43,140,255,0.18);
  transform:translateY(-105%); transition:transform .22s ease;
}
.ch-sticky[hidden] { display:none; }
.ch-sticky.is-in { transform:none; }
.ch-sticky-inner {
  max-width:1120px; margin:0 auto; padding:10px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.ch-sticky-text { margin:0; display:flex; align-items:baseline; gap:10px; min-width:0; }
.ch-sticky-text strong { font-family:var(--f-display); font-weight:700; font-size:15px; color:var(--fg); white-space:nowrap; }
.ch-sticky-text span { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-sticky .primary { padding:9px 18px; font-size:14px; text-decoration:none; white-space:nowrap; flex:none; }
@media (max-width:560px) {
  /* On a phone the bar is the button and nothing else — the strapline would push it off the edge. */
  .ch-sticky-text span { display:none; }
  .ch-sticky-inner { padding:9px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-sticky { transition:none; }
}

/* ---- video ---- */
.ch-video {
  position:relative; max-width:840px; margin:0 auto; aspect-ratio:16/9; border-radius:20px; overflow:hidden;
  border:1px solid var(--line); background:var(--grad-panel); box-shadow:0 18px 50px rgba(0,0,0,0.45);
}
.ch-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
/* Placeholder until a video URL is configured — deliberately looks like a player, not like a gap. */
.ch-video-ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  background:repeating-linear-gradient(135deg, rgba(43,140,255,0.05) 0 14px, transparent 14px 28px); }
.ch-video-play {
  width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--grad-blue); border:1px solid rgba(43,140,255,0.6); box-shadow:var(--shadow-btn);
}
.ch-video-note { font-family:var(--f-mono); font-size:12px; letter-spacing:2px; color:var(--muted); }

/* ---- the second video ---- */
/* A row, not a second hero: the player is small and the words sit beside it, so it reads as "and
   here is the next one" rather than competing with the video above. Same 840px so the two share a
   column edge. */
.ch-video-more {
  display:grid; grid-template-columns:210px 1fr; gap:18px; align-items:center;
  max-width:840px; margin:16px auto 0; padding:13px; border-radius:16px;
  border:1px solid var(--line); background:var(--grad-panel);
}
.ch-video-more-player {
  position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:#000;
}
.ch-video-more-player iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.ch-video-more-kicker {
  margin:0 0 4px; font-family:var(--f-mono); font-size:11px; letter-spacing:2px; color:var(--blue);
}
.ch-video-more-title { margin:0 0 5px; font-size:16px; font-weight:700; }
.ch-video-more-body { margin:0; font-size:13px; color:var(--muted); line-height:1.45; }

/* Stacked on a phone, where 300px of player beside text leaves neither enough room. */
@media (max-width:720px) {
  .ch-video-more { grid-template-columns:1fr; gap:14px; }
}

/* ---- steps ---- */
/* Three steps now, not four — the register-your-interest one went when the form did. Three columns
   rather than four with a hole in it, and the row keeps the page's full width: the prizes above and
   the facts panel below both run edge to edge, so a narrower block here read as indented rather than
   as deliberate. */
.ch-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; }
.ch-step {
  display:flex; flex-direction:column; gap:12px; padding:22px; border-radius:20px;
  border:1px solid var(--line); background:var(--grad-panel); box-shadow:0 12px 40px rgba(0,0,0,0.35);
}
.ch-step-n {
  width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-weight:700; font-size:19px; color:#fff;
  background:var(--grad-blue); border:1px solid rgba(43,140,255,0.6); box-shadow:var(--shadow-btn);
}
.ch-step h3 { font-family:var(--f-display); font-weight:700; font-size:17px; margin:0; }
.ch-step p { font-size:13.5px; color:var(--muted-2); line-height:1.55; margin:0; }

/* ---- at a glance ---- */
/* The facts you'd want before deciding — when, who, what it costs, where the rules are — in one
   panel under the steps. A definition list because that is literally what it is (label, value), and
   because it keeps the label readable when the row wraps down a phone. */
.ch-glance {
  margin:28px 0 0; padding:20px 24px; border-radius:20px;
  border:1px solid var(--line); background:var(--grad-panel);
}
.ch-glance-facts {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:18px 28px; margin:0;
}
.ch-glance-fact { min-width:0; }
.ch-glance-fact dt {
  font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--muted); margin:0 0 4px;
}
.ch-glance-fact dd { margin:0; font-family:var(--f-display); font-weight:700; font-size:15px; color:var(--fg); }
.ch-glance-fact dd a { color:var(--blue); font-weight:700; }
.ch-glance-fact dd a:hover { text-decoration:underline; }

/* ---- prizes ---- */
/* Three across, in their own section: the podium is the clearest way to show a placing, and it needs
   the width to be one. (It briefly lived beside the headline as a stack; two dense columns made the
   opening cluttered, which is the thing a hero can least afford.) */
.ch-prizes { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:center; }
.ch-prize {
  text-align:center; padding:26px 20px; border-radius:20px;
  border:1px solid var(--line); background:var(--grad-panel);
}
.ch-prize-medal { font-size:30px; line-height:1; }
.ch-prize-place { font-family:var(--f-display); font-weight:700; font-size:15px; color:var(--muted-2); margin:12px 0 6px; }
.ch-prize-what { font-family:var(--f-display); font-weight:800; font-size:clamp(22px,3vw,30px); color:var(--fg); line-height:1.15; }
/* What the judges are looking for — the reason to aim at this prize rather than another. */
.ch-prize-sub { font-size:13.5px; color:var(--muted-2); margin:10px 0 0; line-height:1.5; }
/* "book voucher" rides with the amount rather than sitting on its own line — it qualifies the
   number, and as a line of its own it was just the word said twice. Same size and weight as the
   amount, because it's part of the same phrase: "£20 book voucher" is the prize, not "£20" with a
   footnote. It only breaks to its own line so the two halves don't wrap raggedly. */
.ch-prize-what span { display:block; }
/* The overall winner: gold, raised, and moved into the middle column so the three read as a set with
   a clear centre. It is FIRST in the source (it's the biggest prize, and that's the order it should
   be read and spoken in) — `order` only moves it visually, and only while the three sit side by
   side. The gold is the site's own amber, and the same colour as the competition pill in the app
   bar, so the promise and the invitation match. */
.ch-prize.is-winner { order:2; }
.ch-prize.is-left { order:1; }
.ch-prize.is-right { order:3; }
.ch-prize.is-winner {
  padding:34px 22px; border-color:rgba(247,215,116,0.45);
  background:linear-gradient(180deg, rgba(247,215,116,0.13), rgba(12,18,48,0.6));
  box-shadow:0 16px 46px rgba(0,0,0,0.45);
}
.ch-prize.is-winner .ch-prize-place { color:#f7d774; }
.ch-prize.is-winner .ch-prize-what { color:#ffe9a8; }
.ch-bug {
  display:flex; align-items:flex-start; gap:16px; margin-top:18px; padding:20px 22px; border-radius:20px;
  border:1px solid rgba(70,224,138,0.35); background:rgba(70,224,138,0.07);
}
.ch-bug-icon { font-size:26px; line-height:1.2; flex:none; }
.ch-bug h3 { font-family:var(--f-display); font-weight:700; font-size:16px; margin:0 0 5px; color:#bdeccf; }
.ch-bug p { font-size:13.5px; color:#c2cadd; line-height:1.55; margin:0; }

/* ---- the closing invitation ----
   This panel used to hold the register-your-interest form. Entering happens in Creator Studio now,
   so what is left is the two notes a parent reads and one link to the thing that actually starts it. */
/* Full width, like the steps and the facts panel. The 560px cap was sized for the form that used to
   be in here; with the form gone it left a narrow column floating under two edge-to-edge panels. */
.ch-register {
  padding:34px; border-radius:24px;
  border:1px solid var(--line); background:var(--grad-panel); box-shadow:0 18px 50px rgba(0,0,0,0.45);
}
/* The invitation keeps a measure of its own inside the wide panel — a centred sentence 150
   characters across is a worse read than a narrow one, however much room there is for it. */
.ch-startbox .ch-h2, .ch-startbox .ch-register-sub { max-width:46ch; margin-left:auto; margin-right:auto; }
.ch-register .ch-h2 { margin-bottom:6px; }
.ch-register-sub { text-align:center; color:var(--muted); font-size:14px; margin:0 0 26px; }
.ch-startbox { text-align:center; }
.ch-startbox .primary { display:inline-block; padding:14px 30px; font-size:15.5px; }

/* Two notes, side by side once the panel is wide enough to make that a better read than one very
   long line each. They stack back into a column on a narrow screen. */
.ch-notes {
  margin-top:24px; padding-top:20px; border-top:1px solid var(--line-soft);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px 32px; text-align:left;
}
.ch-note { display:flex; gap:12px; align-items:flex-start; font-size:12.5px; color:var(--muted-2); line-height:1.6; }
.ch-note .ch-note-icon { flex:none; font-size:16px; line-height:1.4; }
.ch-note strong { color:var(--fg); font-weight:600; }
.ch-note a { color:var(--blue); }

/* The confirmation replaces the form in place — no navigation, so nothing is lost behind a page load. */

/* The sign-off under the form: the whole offer in three short sentences, which is what somebody who
   scrolled this far and didn't fill it in should be left with. */
.ch-footnote {
  text-align:center; margin:36px 0 0; font-family:var(--f-display); font-weight:700;
  font-size:clamp(16px,2.4vw,20px); color:var(--muted-2);
}
.ch-footnote-dates { font-family:var(--f-ui); font-weight:400; font-size:13px; color:var(--muted); margin-top:10px; }

/* ---- responsive ---- */
@media (max-width:900px) {
  .ch-hero { padding-top:40px; }
  .ch-hero-lede { grid-template-columns:1fr; gap:18px; }
  .ch-steps { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .ch-steps, .ch-prizes { grid-template-columns:1fr; }
  /* Stacked, there is no podium to arrange — so drop the reordering and let it read 1-2-3. */
  .ch-prize.is-winner, .ch-prize.is-left, .ch-prize.is-right { order:0; }
  .ch-register { padding:24px 20px; }
  .ch-section { padding-top:56px; }
  .ch-bug { flex-direction:column; gap:10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-video-ph { animation:none; }
}