/* The landing page (pages/home): one centred column of bands, and a dock that carries the one call to action once
   the big buttons scroll away. Loads after save_point/tokens and save_point/components. */
:root { --art-plate: #f4f7ff; --art-check: #e6ecfd; --art-ray: #ffe9a3; --art-glow: #ffffff; }

html { scroll-behavior: smooth; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* The page fills the viewport and the footer ends it: the base checker runs to the bottom of the document. */
.sp-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.sp-page > main { flex: 1 0 auto; }
.sp-page > .zone--foot { margin-top: -40px; }
/* The footer's navy field runs up under the FAQ's slanted foot (the FAQ is above it), so no light checker shows in the wedge
   between the slant and the footer's top edge: the slant's whole drop, 2.79vw, plus a margin. */
.sp-page > .zone--foot::before { top: calc(-2.79vw - 12px); }
.wrap { width: 100%; max-width: var(--content-max); margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
@media (min-width: 600px) { .wrap { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } }
a { color: var(--royal-ink); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
.band { padding-block: var(--space-16); }
.band--tight { padding-block: var(--space-10) var(--space-16); }
.section-head { display: grid; gap: var(--space-3); justify-items: center; text-align: center; margin-bottom: var(--space-10); }
.section-head h2 { margin: 0; font: 900 italic clamp(30px, 3.8vw, 46px)/1.08 var(--font-display); color: var(--royal-ink); text-shadow: 0 2px 0 color-mix(in srgb, currentColor 22%, transparent); }
.section-head p { max-width: 560px; color: var(--ink-muted); font-size: 18px; line-height: 28px; }

/* Hero: a title block (logo, headline), a measured lead, and one action group (button, end date, countdown).
   Type scale: h1 clamp(36px, 5.2vw, 64px), section headings clamp(30px, 3.8vw, 46px), lead 16 to 18px, small text 14 to 15px. Gaps come from --space-*. */
/* First screen: two tight groups (logo, headline, lead; then button, end date, countdown) a little apart, so the
   prize cards show below them without scrolling. */
/* The fold: hero and reel together fill one viewport. The hero takes the room the reel leaves and scales with the height. */
.fold { --hh: max(300px, calc(100svh - 340px)); display: flex; flex-direction: column; min-height: 100svh; }
.fold .zone--hero { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-bottom: 0; }
.fold .zone--hero > .wrap { width: 100%; }
.fold .zone--reel { flex: none; }
.hero { display: flex; padding-block: var(--space-3) 0; }
.hero__copy { display: flex; flex-direction: column; align-items: center; flex: 1; gap: clamp(8px, calc(var(--hh) * .05), 56px); text-align: center; min-width: 0; }
.hero__group { display: flex; width: 100%; flex-direction: column; align-items: center; gap: clamp(6px, calc(var(--hh) * .025), 32px); min-width: 0; }
.hero__logo { width: clamp(130px, min(34vw, calc(var(--hh) * .56)), 640px); height: auto; filter: drop-shadow(0 4px 0 var(--shade)); }
.hero h1 { margin: 0; max-width: 24ch; font: 500 clamp(22px, min(5vw, calc(var(--hh) * .09)), 84px)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--ink); text-wrap: balance; }
/* The headline: two lines in the page's heading font. Only the last phrase rolls ("a keyboard", "a mouse", "a controller", "games"), and it carries the colour (--c, solid).
   The roll: all the words share one grid cell, and the box clips only vertically (clip-path, so the width can change
   without cutting a word) to its own line plus room for descenders and the bounce. The words travel 1.8em, more than the
   box is tall, so the outgoing and incoming words are never both inside it. The box's width follows the word
   (hero_cycle_controller), which slides "Get" to keep the line centred. */
.hero__line { display: block; }
.hero__line--roll { display: flex; justify-content: center; gap: .26em; margin-top: .02em; }
/* The roll is a scrolling list cropped to one row: the words sit in one column (the first again at the end, for a seamless
   loop), the window is exactly one row tall, and each tick moves the column up one row. The window's inline padding and
   negative margin keep the side bearings unclipped. Its width follows the current word. */
.hero__cycle { --row: 1.3em; display: block; height: var(--row); overflow: clip; padding-inline: .3em; margin-inline: -.3em; box-sizing: content-box; }
.hero__cycle.is-ready { transition: width .5s cubic-bezier(.3, .7, .3, 1); }
.hero__track { display: block; transform: translateY(calc(var(--i, 0) * var(--row) * -1)); }
.hero__cycle.is-ready .hero__track { transition: transform .5s cubic-bezier(.45, 0, .2, 1); }
.hero__cycle.is-snapping .hero__track { transition: none; }
.hero__cycle-word { display: block; width: max-content; height: var(--row); line-height: var(--row); white-space: nowrap; color: var(--c, var(--ink)); }
.hero__cycle-word--0 { --c: var(--royal-ink); }
.hero__cycle-word--1 { --c: var(--violet-ink); }
.hero__cycle-word--2 { --c: var(--mint-ink); }
.hero__cycle-word--3 { --c: var(--coral-ink); }
@media (prefers-reduced-motion: reduce) { .hero__track, .hero__cycle { transition: none !important; } }
@media (max-width: 599px) { .hero__logo { width: clamp(130px, min(64vw, calc(var(--hh) * .6)), 300px); } .hero h1 { font-size: clamp(26px, 8vw, 36px); } }
.hero__cta { margin: 0; }
.when { display: grid; gap: var(--space-3); justify-items: center; width: min(100%, 440px); margin: 0; }
.when__dates { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 8px; font: 800 clamp(14px, 1.4vw, 15px)/1.4 var(--font-body); color: var(--ink); }
.when__dates .sp-icon { font-size: 18px; color: var(--royal-ink); }

/* Prize reel: four copies of the list in a scroller the prize-reel controller nudges left forever. People can scroll it
   themselves (trackpad, drag, keys); it waits while they do, and while they hover or focus it. */
.reel { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scrollbar-width: none; padding-block: var(--space-4) var(--space-8); }
.reel::-webkit-scrollbar { display: none; }
.reel__track { display: flex; gap: var(--space-4); width: max-content; padding-block: 6px; }
.reel__item { --rc-panel: color-mix(in srgb, var(--mint) 82%, #ffffff); --rc-line: var(--mint-line); --rc-light: color-mix(in srgb, var(--mint-hi) 45%, #ffffff);
  flex: none; display: grid; gap: 2px; width: 224px; padding: 10px 10px 12px; color: var(--ink); text-decoration: none; background: linear-gradient(180deg, var(--surface), var(--surface-sunken));
  border: 2px solid var(--line-strong); border-radius: var(--radius-lg);
  box-shadow: 0 var(--lip-depth) 0 var(--line-lip), inset 0 2px 0 rgba(255, 255, 255, .9), 0 10px 14px -6px rgba(10, 16, 56, .25);
  transform: rotate(var(--tilt, -1.5deg)); transition: transform 200ms cubic-bezier(.3, 1.6, .5, 1); }
.reel__item--rare { --rc-panel: var(--royal-hi); --rc-line: var(--royal); --rc-light: color-mix(in srgb, var(--logo-fill) 70%, #ffffff); }
.reel__item--epic { --rc-panel: color-mix(in srgb, var(--violet) 85%, #ffffff); --rc-line: color-mix(in srgb, var(--violet) 55%, var(--violet-ink)); --rc-light: color-mix(in srgb, var(--violet) 30%, #ffffff); }
.reel__item:nth-child(even) { --tilt: 1.5deg; }
.reel__item:hover { transform: rotate(0deg) translateY(-4px); }
.reel__item:focus-visible { outline: none; box-shadow: 0 var(--lip-depth) 0 var(--line-lip), var(--focus-ring); }
/* The art panel, as on the shop's cards: a rim in the tier's colour, a face lit from the top and sunk a little under
   it, and halftone dots that melt together along the bottom (one shared symbol, _shop_shapes). */
.reel__art { position: relative; display: grid; place-items: center; height: 140px; margin-bottom: 6px; border-radius: var(--radius-sm); font-size: 48px; color: var(--on-royal);
  overflow: hidden; isolation: isolate; border: 3px solid var(--rc-line); background: linear-gradient(180deg, var(--rc-light) 0%, var(--rc-panel) 48%);
  box-shadow: inset 0 7px 8px -5px rgba(10, 16, 56, .35); }
.reel__dots { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; fill: var(--rc-line); }
.reel__art > img, .reel__art > .sp-icon { position: relative; z-index: 1; }
.reel__art img { max-width: 88%; max-height: 118px; filter: drop-shadow(0 3px 3px rgba(10, 16, 56, .35)); }
.reel__name { padding-inline: 4px; font: 800 16px/20px var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reel__price { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 4px 4px 0; }
.reel__price img { flex: none; width: auto; height: 34px; filter: drop-shadow(0 1px 0 rgba(10, 16, 56, .15)); }
.reel__cost { display: grid; justify-items: start; gap: 3px; min-width: 0; text-align: left; }
.reel__hrs { font: 900 italic 21px/1 var(--font-display); white-space: nowrap; color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.reel__hrs small { font-size: .64em; font-weight: 900; }
@media (max-width: 599px) { .reel__item { width: 176px; } .reel__art { height: 108px; } .reel__art img { max-height: 90px; } .reel__hrs { font-size: 17px; } .reel__price img { height: 28px; } }
@media (prefers-reduced-motion: reduce) {
  .reel__track { padding-inline: 16px; }
  .reel__item[aria-hidden="true"] { display: none; }
}

/* Countdown: a leaning HUD plate */
.cd { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-4); background: var(--frame); color: var(--on-frame);
  border-radius: var(--radius-md); transform: skewX(var(--slant)); box-shadow: 0 var(--lip-depth) 0 var(--frame-lip), var(--shadow-soft); }
.cd > * { transform: skewX(calc(var(--slant) * -1)); }
.cd__label { font: 800 11px/14px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--frame-muted); width: 44px; }
.cd__cells { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.cd__cell { display: grid; justify-items: center; gap: 2px; padding: var(--space-1) var(--space-1) 6px; border-radius: var(--radius-xs); background: var(--frame-track); }
.cd__cell b { font: 900 italic clamp(20px, 2.6vw, 26px)/1.2 var(--font-display); font-variant-numeric: tabular-nums; color: var(--gold); text-shadow: 0 2px 0 var(--gold-lip); }
.cd__cell small { font: 800 10px/12px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--frame-muted); }
@media (max-width: 420px) { .cd { padding-inline: var(--space-3); gap: var(--space-2); } .cd__label { width: auto; } .cd__cells { gap: var(--space-1); } }

/* Steps */
.steps { display: grid; gap: calc(var(--space-6) + 24px) var(--space-6); margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step { position: relative; display: grid; gap: var(--space-3); align-content: start; padding: 42px var(--space-5) var(--space-6); background: var(--surface);
  border: 2px solid var(--line); border-radius: var(--radius-xl); box-shadow: 0 var(--lip-depth) 0 var(--line); min-width: 0; }
/* The step's illustration: a colour icon (sp_color_icon), big enough to read as one. The <ol> keeps the numbering. */
/* The icon sits on the card's top-left corner like a sticker, half outside. No overflow clip on .step or its parents. */
.step__icon { position: absolute; top: -30px; left: -16px; z-index: 1; font-size: 64px; line-height: 1; transform: rotate(-5deg);
  filter: drop-shadow(0 4px 5px rgba(10, 16, 56, .3)); }
.step:nth-child(even) .step__icon { transform: rotate(4deg); }
@media (max-width: 599px) { .step__icon { left: -6px; } }
.step__icon .sp-color-icon { display: block; }
.step h3 { margin: 0; font: 800 italic 22px/28px var(--font-display); }
.step p { color: var(--ink-muted); }
.step--last { border-color: var(--gold-line); box-shadow: 0 var(--lip-depth) 0 var(--gold-lip); }

/* Prizes */
/* Prize shop: a card per prize hung on a clip, priced in hours (the hourglass is
   Save Point's currency). The panel's colour climbs with the price, like a game's rarity: green, blue, then purple. */

.prizes { width: 100%; display: grid; gap: var(--space-6) var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .prizes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); } }
@media (min-width: 960px) { .prizes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shop-shapes { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The prize tag card's rules (.shop-card*) live in prize_tag.css, loaded by _shop_shapes for the landing page and the shop. */

.reel__total { font: 800 italic 13px/1 var(--font-display); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Claim popup: a game shop's purchase card. A royal top with the prize's name and its picture on rays over a
   wave, then one stats row (the daily pace, then hours and days) and the claim button. Armand's ribbon straddles the card's top edge. */
.claim { --over: 18px; width: min(100%, 460px); max-width: 100%; max-height: 100%; margin: auto; padding: calc((min(100vw, 460px) - 20px) * .146 + 14px) calc(var(--over) + 10px) var(--space-6); border: 0; background: transparent; color: var(--ink); overflow: auto; overscroll-behavior: contain; }
.claim::backdrop { background: rgba(10, 16, 56, .72); }
/* The page behind stays put while the popup is open. The gutter keeps it from jumping sideways when its scrollbar goes. */
html:has(.claim) { scrollbar-gutter: stable; }
html:has(.claim[open]) { overflow: hidden; }
.claim__sheet { position: relative; z-index: 1; container-type: inline-size; }
.claim__card { --bh: calc((100cqw + var(--over) * 2) * .3175); position: relative; overflow: hidden; background: var(--surface-sunken); border: 3px solid var(--royal-soft); border-radius: 28px;
  box-shadow: 0 0 0 3px var(--royal-line), 0 18px 48px -12px rgba(10, 16, 56, .6); }
.claim[open] .claim__sheet { animation: claim-pop 420ms cubic-bezier(.3, 1.6, .5, 1); }
@keyframes claim-pop { from { transform: translateY(24px) scale(.88); opacity: 0; } to { transform: none; opacity: 1; } }

/* The ribbon is as wide as the card plus --over on each side, so its tails overhang by the same amount at every width, and
   its middle sits on the card's top edge. The text follows the ribbon's arch (an SVG textPath). */
.claim__banner { position: absolute; z-index: 4; top: 0; left: calc(var(--over) * -1); right: calc(var(--over) * -1); transform: translateY(-46%); pointer-events: none; filter: drop-shadow(0 6px 5px rgba(10, 16, 56, .35)); }
.claim__banner img { display: block; width: 100%; height: auto; }
.claim__banner svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.claim__banner text { font: 900 italic 112px var(--font-display); letter-spacing: 1px; }
.claim__banner-text { fill: #fff; }
.claim__banner-lip { fill: var(--coral-ink); stroke: var(--coral-ink); stroke-width: 10px; stroke-linejoin: round; }

.claim__top { position: relative; padding: calc(var(--bh) * .34 + 26px) 22px 44px; text-align: center; color: var(--on-royal);
  background: linear-gradient(160deg, var(--royal-hi), var(--royal) 70%); }
/* The halftone, white and faint, sitting on the wave. It is 20% wider than the card (40 units each side of 400), so the card's clip cuts it and its ends never show. Opacity on the whole drawing, so melted dots don't stack up. */
.claim__dots { position: absolute; left: -10%; bottom: 0; width: 120%; height: auto; fill: #ffffff; opacity: .16; }
.claim__head { position: relative; z-index: 2; display: grid; justify-items: center; gap: 4px; }
.claim__name { margin: 0; font: 900 italic 30px/1.08 var(--font-display); color: var(--on-royal); text-shadow: 0 3px 0 var(--royal-lip); overflow-wrap: anywhere; }
.claim__kind { margin: 0; font: 800 15px/20px var(--font-body); color: var(--on-royal); }

/* The picture stands over the wave, on slowly turning rays: a pre-drawn layer turned by transform. */
.claim__art { position: relative; z-index: 2; display: grid; place-items: center; width: 100%; height: 220px; margin-top: var(--space-3); }
.claim__art-rays { position: absolute; inset: -10%; background: repeating-conic-gradient(rgba(255, 255, 255, .22) 0 9deg, transparent 9deg 18deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  will-change: transform; animation: claim-turn 40s linear infinite; }
.claim__art img { position: relative; max-width: 100%; max-height: 200px; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(10, 16, 56, .45)); }
.claim[open] .claim__art img { animation: claim-pop 520ms 80ms cubic-bezier(.3, 1.6, .5, 1) both; }
.claim__wave { position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; width: 100%; height: 48px; fill: var(--surface-sunken); }

.claim__bottom { display: grid; gap: var(--space-5); padding: 2px 22px 26px; } /* the bottom is the 22px side plus the 4px lip */
/* One quiet stats row: the daily pace is the hero, the total hours and days sit under it, small. */
.claim__stats { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; justify-content: center; align-items: center; text-align: left; }
.claim__stats img { grid-row: 1 / span 2; width: auto; height: 52px; filter: drop-shadow(0 2px 0 rgba(10, 16, 56, .15)); }
/* Two text colours only: navy ink for the daily pace, one muted shade for the totals. */
.claim__pace { margin: 0; font: 900 italic 36px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.claim__pace small { font-size: .5em; font-weight: 900; }
.claim__totals { margin: 0; font: 800 italic 16px/1 var(--font-display); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.claim__totals b { font: inherit; color: inherit; }

.claim__actions { display: flex; gap: var(--space-4); align-items: stretch; }
.claim__x { flex: none; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 3px solid var(--line-strong); border-radius: 18px;
  background: var(--surface); color: var(--royal-ink); font-size: 30px; cursor: pointer; box-shadow: 0 4px 0 var(--line-lip); }
.claim__x:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--line-lip); }
.claim__x:focus-visible, .claim__go:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.claim__go { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 0 var(--space-5); border-radius: 18px;
  color: var(--on-royal); text-decoration: none; background: linear-gradient(180deg, var(--royal-hi), var(--royal)); border: 2px solid var(--royal-line);
  box-shadow: inset 0 2px 0 var(--gloss), 0 4px 0 var(--royal-lip), 0 0 28px var(--royal-glow), 0 0 0 4px var(--royal-glow); }
.claim__go:hover { filter: brightness(1.06); }
.claim__go:active { transform: translateY(2px); box-shadow: inset 0 2px 0 var(--gloss), 0 2px 0 var(--royal-lip); }
.claim__go span { font: 900 italic 24px/1 var(--font-display); }

@keyframes claim-turn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .claim__art-rays, .claim[open] .claim__sheet, .claim[open] .claim__art img { animation: none; } }
@media (max-width: 420px) {
  .claim { --over: 14px; } .claim__top { padding: calc(var(--bh) * .34 + 20px) 16px 40px; } .claim__name { font-size: 25px; }
  .claim__art { height: 170px; } .claim__art img { max-height: 150px; }
  .claim__x, .claim__go { border-radius: 12px; } /* the card's 25px inner radius less the 14-16px gap */
  .claim__bottom { padding: 2px 16px 20px; } .claim__pace { font-size: 32px; } .claim__go span { font-size: 22px; }
}

/* Hack Club */
.hc { display: grid; gap: var(--space-5); align-items: center; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc__panel { grid-column: 1 / -1; order: -1; }
@media (min-width: 960px) {
  .hc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto); gap: var(--space-6) var(--space-8); }
  .hc__panel { grid-column: 2; grid-row: 1 / span 3; order: 0; }
  .hc .snap--l { grid-column: 1; }
  .hc .snap--r { grid-column: 3; }
  .hc .snap:nth-of-type(1), .hc .snap:nth-of-type(4) { grid-row: 1; }
  .hc .snap:nth-of-type(2), .hc .snap:nth-of-type(5) { grid-row: 2; }
  .hc .snap:nth-of-type(3), .hc .snap:nth-of-type(6) { grid-row: 3; }
}
.hc__panel { position: relative; display: grid; gap: var(--space-4); padding: var(--space-8) var(--space-6); text-align: center;
  background: var(--frame); color: var(--on-frame); border-radius: var(--radius-xl); box-shadow: 0 var(--lip-depth) 0 var(--frame-lip), var(--shadow-soft); }
.hc__panel { box-shadow: 0 0 0 2px color-mix(in oklch, white 14%, transparent); }
.hc__panel h2 { margin: -64px 0 0; font-size: clamp(34px, 4.4vw, 50px); line-height: 1.1; transform: rotate(-3deg); }
.hc__panel p { color: var(--frame-muted); font-size: 17px; line-height: 27px; }
.hc__panel p b { color: var(--on-frame); }
.hc__panel a { color: var(--gold); }
.hc__stats { display: grid; justify-content: center; justify-items: start; gap: var(--space-4); }
/* No pill: the coin, number and label sit straight on the panel. */
.hc__stats .sp-stat { height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; gap: var(--space-3); }
.hc__stats .sp-stat__key { width: 36px; height: 36px; }
/* Recessed well (remove the hc__panel--inset class in home.html.erb to restore the raised panel): hard-edged shadows, no blur.
   A thick deep band inside the top and left, a thin lit lip inside the bottom and right, and a crisp light rim outside. */
.hc__panel--inset { background: color-mix(in oklch, var(--frame) 80%, #02051a);
  box-shadow: inset 0 9px 0 #05093a, inset 7px 0 0 #090e44, inset -3px -4px 0 color-mix(in oklch, white 22%, transparent), 0 0 0 3px color-mix(in oklch, white 26%, transparent), 0 4px 0 3px color-mix(in oklch, white 12%, transparent); }
.snap { margin: 0; padding: 8px; background: var(--surface); border-radius: var(--radius-md); box-shadow: 0 var(--lip-depth) 0 var(--line-strong), var(--shadow-soft);
  transform: rotate(var(--r, 0deg)); transition: transform 200ms cubic-bezier(.3, 1.6, .5, 1); }
.snap:hover { transform: rotate(0deg) scale(1.03); }
.snap img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xs); }
.snap:nth-of-type(1) { --r: -4deg; } .snap:nth-of-type(2) { --r: 3deg; } .snap:nth-of-type(3) { --r: 2deg; }
.snap:nth-of-type(4) { --r: -3deg; } .snap:nth-of-type(5) { --r: -2deg; } .snap:nth-of-type(6) { --r: 4deg; }

/* FAQ */
.faq { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.faq__col { display: grid; gap: var(--space-8); min-width: 0; }
.faq__group { display: grid; gap: var(--space-3); min-width: 0; }
.faq__title { margin: 0; font: 800 13px/16px var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: #c7d0f5; padding-left: 4px; }
.sp-faq details > div { color: var(--ink-muted); }
/* FAQ open/close animation: faq_controller.js sets data-faq-state at the start of each animation, so the chevron turns both ways. */
.faq .sp-faq details[data-faq-state] summary .sp-icon { transition: transform 300ms cubic-bezier(.34, 1.4, .5, 1); }
.faq .sp-faq details[data-faq-state="open"] summary .sp-icon { transform: rotate(180deg); }
.faq .sp-faq details[data-faq-state="closed"] summary .sp-icon { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .faq .sp-faq details[data-faq-state] summary .sp-icon { transition: none; } }

/* Dock: the one call to action, always in reach */
/* The dock sticks to the bottom of the viewport inside <main>, so it can never leave main. Its negative margins pull it
   so that, once main ends (at the foot of the FAQ), its bar is centred on the slanted seam at the page centre (the +1.395vw is half the slant's drop) between the FAQ and the footer and
   scrolls away with the page. --dock-bar is the bar's height, --dock-gap the space under it. */
.dock { --dock-bar: 68px; --dock-gap: calc(14px + env(safe-area-inset-bottom, 0px)); position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: center; pointer-events: none;
  margin-top: calc(var(--dock-bar) / -2); margin-bottom: calc(var(--dock-bar) / -2 - var(--dock-gap) + 1.395vw);
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) var(--dock-gap) max(12px, env(safe-area-inset-left, 0px));
  transition: transform 260ms cubic-bezier(.3, 1.3, .5, 1), opacity 200ms; }
.dock.is-away { transform: translateY(140%); opacity: 0; }
/* The bar's corners are the button's plus the 8px around it, so they stay concentric. */
.dock__bar { pointer-events: auto; display: flex; align-items: center; gap: var(--space-4); max-width: 100%; padding: 8px 8px calc(8px + var(--lip-depth)) 20px; background: var(--frame); color: var(--on-frame);
  border-radius: calc(var(--radius-md) + 8px); box-shadow: 0 var(--lip-depth) 0 var(--frame-lip), 0 0 0 2px var(--ramp-3), var(--shadow-soft); }
.dock__time { display: grid; gap: 1px; min-width: 0; }
.dock__time small { font: 800 11px/12px var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--frame-muted); }
.dock__time b { font: 900 italic 20px/22px var(--font-display); font-variant-numeric: tabular-nums; color: var(--gold); white-space: nowrap; }
.dock .sp-btn { margin-bottom: 0; }
@media (max-width: 420px) { .dock__bar { gap: var(--space-2); padding-left: 14px; } .dock__time b { font-size: 17px; line-height: 20px; } .dock .sp-btn { padding: 0 var(--space-3); font-size: 15px; } }
@media (max-width: 380px) { .dock__bar { padding-left: 10px; } .dock__time b { font-size: 15px; letter-spacing: -.01em; } .dock .sp-btn { padding: 0 var(--space-2); font-size: 14px; } .dock .sp-btn svg { display: none; } }

/* ---------- Zones: the page's backgrounds ----------
   The page is a stack of full-bleed zones, each with its own field, pattern and edge, so it reads as layers rather
   than one grid. The base is a wavy checker (an SVG tile whose columns bend in one S-wave per tile, so it repeats).
   Every pattern is a gradient or an inline SVG, and nothing here moves. Dark mode swaps the tile and the fade. */
:root {
  --wave-tile: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%22224%22 viewBox=%220 0 56 224%22%3E%3Cdefs%3E%3CclipPath id=%22e%22%3E%3Crect y=%220%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%2256%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%22112%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%22168%22 width=%2256%22 height=%2228%22/%3E%3C/clipPath%3E%3CclipPath id=%22o%22%3E%3Crect y=%2228%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%2284%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%22140%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%22196%22 width=%2256%22 height=%2228%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath fill=%22%23fff%22 fill-opacity=%22.5%22 clip-path=%22url%28%23e%29%22 d=%22M-56 0 C-52.3 18.7 -49 37.3 -49 56 C-49 74.7 -52.3 93.3 -56 112 C-59.7 130.7 -63 149.3 -63 168 C-63 186.7 -59.7 205.3 -56 224 L-28 224 C-31.7 205.3 -35 186.7 -35 168 C-35 149.3 -31.7 130.7 -28 112 C-24.3 93.3 -21 74.7 -21 56 C-21 37.3 -24.3 18.7 -28 0Z M0 0 C3.7 18.7 7 37.3 7 56 C7 74.7 3.7 93.3 0 112 C-3.7 130.7 -7 149.3 -7 168 C-7 186.7 -3.7 205.3 -0 224 L28 224 C24.3 205.3 21 186.7 21 168 C21 149.3 24.3 130.7 28 112 C31.7 93.3 35 74.7 35 56 C35 37.3 31.7 18.7 28 0Z M56 0 C59.7 18.7 63 37.3 63 56 C63 74.7 59.7 93.3 56 112 C52.3 130.7 49 149.3 49 168 C49 186.7 52.3 205.3 56 224 L84 224 C80.3 205.3 77 186.7 77 168 C77 149.3 80.3 130.7 84 112 C87.7 93.3 91 74.7 91 56 C91 37.3 87.7 18.7 84 0Z%22/%3E%3Cpath fill=%22%23fff%22 fill-opacity=%22.5%22 clip-path=%22url%28%23o%29%22 d=%22M-28 0 C-24.3 18.7 -21 37.3 -21 56 C-21 74.7 -24.3 93.3 -28 112 C-31.7 130.7 -35 149.3 -35 168 C-35 186.7 -31.7 205.3 -28 224 L-0 224 C-3.7 205.3 -7 186.7 -7 168 C-7 149.3 -3.7 130.7 0 112 C3.7 93.3 7 74.7 7 56 C7 37.3 3.7 18.7 0 0Z M28 0 C31.7 18.7 35 37.3 35 56 C35 74.7 31.7 93.3 28 112 C24.3 130.7 21 149.3 21 168 C21 186.7 24.3 205.3 28 224 L56 224 C52.3 205.3 49 186.7 49 168 C49 149.3 52.3 130.7 56 112 C59.7 93.3 63 74.7 63 56 C63 37.3 59.7 18.7 56 0Z M84 0 C87.7 18.7 91 37.3 91 56 C91 74.7 87.7 93.3 84 112 C80.3 130.7 77 149.3 77 168 C77 186.7 80.3 205.3 84 224 L112 224 C108.3 205.3 105 186.7 105 168 C105 149.3 108.3 130.7 112 112 C115.7 93.3 119 74.7 119 56 C119 37.3 115.7 18.7 112 0Z%22/%3E%3C/svg%3E");
  /* One periwinkle glow behind the logo, many stops so it doesn't band, and a vignette that darkens each zone toward its
     edges. Layers only: they sit under the patterns and the content, and nothing moves. */
  --hero-glow: radial-gradient(ellipse min(70vw, 640px) 330px at 50% 200px, #7e98ff8c 0, #7e98ff78 12%, #7e98ff5e 24%, #7e98ff44 36%, #7e98ff2c 48%, #7e98ff18 60%, #7e98ff0a 74%, #7e98ff03 88%, transparent 100%);
  --band-star: var(--band-stars);
  --spark-white: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 0C13 7 17 11 24 12 17 13 13 17 12 24 11 17 7 13 0 12 7 11 11 7 12 0Z%22 fill=%22%23fff%22/%3E%3C/svg%3E");
  --spark-gold: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 0C13 7 17 11 24 12 17 13 13 17 12 24 11 17 7 13 0 12 7 11 11 7 12 0Z%22 fill=%22%23ffc727%22/%3E%3C/svg%3E");
  --orbit: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22%3E%3Cpath d=%22M100 10C106 70 130 94 190 100 130 106 106 130 100 190 94 130 70 106 10 100 70 94 94 70 100 10Z%22 fill=%22%23fff%22/%3E%3Cellipse cx=%22100%22 cy=%22100%22 rx=%2296%22 ry=%2240%22 transform=%22rotate%28-24 100 100%29%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%225%22/%3E%3Ccircle cx=%22188%22 cy=%2261%22 r=%229%22 fill=%22%23fff%22/%3E%3C/svg%3E");
  --band-stars: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%2256%22 viewBox=%220 0 56 56%22%3E%3Cg fill=%22%23e9a514%22 fill-opacity=%22.45%22%3E%3Cpath transform=%22translate%286 6%29 scale%28.75%29%22 d=%22M12 0C13 7 17 11 24 12 17 13 13 17 12 24 11 17 7 13 0 12 7 11 11 7 12 0Z%22/%3E%3Cpath transform=%22translate%2834 32%29 scale%28.45%29%22 d=%22M12 0C13 7 17 11 24 12 17 13 13 17 12 24 11 17 7 13 0 12 7 11 11 7 12 0Z%22/%3E%3C/g%3E%3C/svg%3E");
  --hearts: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22 viewBox=%220 0 64 64%22%3E%3Cg fill=%22%23ffffff%22 fill-opacity=%22.08%22%3E%3Cpath d=%22M20 36C11 29 5 24 5 17.5A7.5 7.5 0 0 1 20 14 7.5 7.5 0 0 1 35 17.5C35 24 29 29 20 36Z%22/%3E%3Cpath transform=%22translate%2844 44%29 scale%28.5%29%22 d=%22M12 0C13 7 17 11 24 12 17 13 13 17 12 24 11 17 7 13 0 12 7 11 11 7 12 0Z%22/%3E%3C/g%3E%3C/svg%3E");
  --dots: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22168%22 height=%228%22 viewBox=%220 0 168 8%22%3E%3Cg fill=%22%23fff%22%3E%3Ccircle cx=%224%22 cy=%224%22 r=%222.2%22/%3E%3Ccircle cx=%2218%22 cy=%224%22 r=%222.2%22/%3E%3Ccircle cx=%2232%22 cy=%224%22 r=%222.2%22/%3E%3Ccircle cx=%2246%22 cy=%224%22 r=%222.2%22/%3E%3Ccircle cx=%2260%22 cy=%224%22 r=%222.2%22/%3E%3Ccircle cx=%2274%22 cy=%224%22 r=%222.2%22/%3E%3Ccircle cx=%2288%22 cy=%224%22 r=%222.2%22/%3E%3Ccircle cx=%22102%22 cy=%224%22 r=%222.2%22/%3E%3Ccircle cx=%22116%22 cy=%224%22 r=%222.2%22/%3E%3Ccircle cx=%22130%22 cy=%224%22 r=%222.2%22/%3E%3Ccircle cx=%22144%22 cy=%224%22 r=%222.2%22/%3E%3Ccircle cx=%22158%22 cy=%224%22 r=%222.2%22/%3E%3C/g%3E%3C/svg%3E");
  --cross: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 80%22%3E%3Cg fill=%22none%22 stroke=%22%23fff%22 stroke-width=%221.5%22%3E%3Ccircle cx=%2240%22 cy=%2240%22 r=%2226%22/%3E%3Cpath d=%22M40 4V22M40 58V76M4 40H22M58 40H76%22/%3E%3C/g%3E%3Cg fill=%22%23fff%22%3E%3Ccircle cx=%2240%22 cy=%224%22 r=%223%22/%3E%3Ccircle cx=%2240%22 cy=%2276%22 r=%223%22/%3E%3Ccircle cx=%224%22 cy=%2240%22 r=%223%22/%3E%3Ccircle cx=%2276%22 cy=%2240%22 r=%223%22/%3E%3C/g%3E%3C/svg%3E");
  --wave: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%2236%22 viewBox=%220 0 180 36%22%3E%3Cpath d=%22M0 18C45 0 45 0 90 18 135 36 135 36 180 18V36H0Z%22/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --wave-tile: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%22224%22 viewBox=%220 0 56 224%22%3E%3Cdefs%3E%3CclipPath id=%22e%22%3E%3Crect y=%220%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%2256%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%22112%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%22168%22 width=%2256%22 height=%2228%22/%3E%3C/clipPath%3E%3CclipPath id=%22o%22%3E%3Crect y=%2228%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%2284%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%22140%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%22196%22 width=%2256%22 height=%2228%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath fill=%22%23141f62%22 clip-path=%22url%28%23e%29%22 d=%22M-56 0 C-52.3 18.7 -49 37.3 -49 56 C-49 74.7 -52.3 93.3 -56 112 C-59.7 130.7 -63 149.3 -63 168 C-63 186.7 -59.7 205.3 -56 224 L-28 224 C-31.7 205.3 -35 186.7 -35 168 C-35 149.3 -31.7 130.7 -28 112 C-24.3 93.3 -21 74.7 -21 56 C-21 37.3 -24.3 18.7 -28 0Z M0 0 C3.7 18.7 7 37.3 7 56 C7 74.7 3.7 93.3 0 112 C-3.7 130.7 -7 149.3 -7 168 C-7 186.7 -3.7 205.3 -0 224 L28 224 C24.3 205.3 21 186.7 21 168 C21 149.3 24.3 130.7 28 112 C31.7 93.3 35 74.7 35 56 C35 37.3 31.7 18.7 28 0Z M56 0 C59.7 18.7 63 37.3 63 56 C63 74.7 59.7 93.3 56 112 C52.3 130.7 49 149.3 49 168 C49 186.7 52.3 205.3 56 224 L84 224 C80.3 205.3 77 186.7 77 168 C77 149.3 80.3 130.7 84 112 C87.7 93.3 91 74.7 91 56 C91 37.3 87.7 18.7 84 0Z%22/%3E%3Cpath fill=%22%23141f62%22 clip-path=%22url%28%23o%29%22 d=%22M-28 0 C-24.3 18.7 -21 37.3 -21 56 C-21 74.7 -24.3 93.3 -28 112 C-31.7 130.7 -35 149.3 -35 168 C-35 186.7 -31.7 205.3 -28 224 L-0 224 C-3.7 205.3 -7 186.7 -7 168 C-7 149.3 -3.7 130.7 0 112 C3.7 93.3 7 74.7 7 56 C7 37.3 3.7 18.7 0 0Z M28 0 C31.7 18.7 35 37.3 35 56 C35 74.7 31.7 93.3 28 112 C24.3 130.7 21 149.3 21 168 C21 186.7 24.3 205.3 28 224 L56 224 C52.3 205.3 49 186.7 49 168 C49 149.3 52.3 130.7 56 112 C59.7 93.3 63 74.7 63 56 C63 37.3 59.7 18.7 56 0Z M84 0 C87.7 18.7 91 37.3 91 56 C91 74.7 87.7 93.3 84 112 C80.3 130.7 77 149.3 77 168 C77 186.7 80.3 205.3 84 224 L112 224 C108.3 205.3 105 186.7 105 168 C105 149.3 108.3 130.7 112 112 C115.7 93.3 119 74.7 119 56 C119 37.3 115.7 18.7 112 0Z%22/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  --wave-tile: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2256%22 height=%22224%22 viewBox=%220 0 56 224%22%3E%3Cdefs%3E%3CclipPath id=%22e%22%3E%3Crect y=%220%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%2256%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%22112%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%22168%22 width=%2256%22 height=%2228%22/%3E%3C/clipPath%3E%3CclipPath id=%22o%22%3E%3Crect y=%2228%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%2284%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%22140%22 width=%2256%22 height=%2228%22/%3E%3Crect y=%22196%22 width=%2256%22 height=%2228%22/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath fill=%22%23141f62%22 clip-path=%22url%28%23e%29%22 d=%22M-56 0 C-52.3 18.7 -49 37.3 -49 56 C-49 74.7 -52.3 93.3 -56 112 C-59.7 130.7 -63 149.3 -63 168 C-63 186.7 -59.7 205.3 -56 224 L-28 224 C-31.7 205.3 -35 186.7 -35 168 C-35 149.3 -31.7 130.7 -28 112 C-24.3 93.3 -21 74.7 -21 56 C-21 37.3 -24.3 18.7 -28 0Z M0 0 C3.7 18.7 7 37.3 7 56 C7 74.7 3.7 93.3 0 112 C-3.7 130.7 -7 149.3 -7 168 C-7 186.7 -3.7 205.3 -0 224 L28 224 C24.3 205.3 21 186.7 21 168 C21 149.3 24.3 130.7 28 112 C31.7 93.3 35 74.7 35 56 C35 37.3 31.7 18.7 28 0Z M56 0 C59.7 18.7 63 37.3 63 56 C63 74.7 59.7 93.3 56 112 C52.3 130.7 49 149.3 49 168 C49 186.7 52.3 205.3 56 224 L84 224 C80.3 205.3 77 186.7 77 168 C77 149.3 80.3 130.7 84 112 C87.7 93.3 91 74.7 91 56 C91 37.3 87.7 18.7 84 0Z%22/%3E%3Cpath fill=%22%23141f62%22 clip-path=%22url%28%23o%29%22 d=%22M-28 0 C-24.3 18.7 -21 37.3 -21 56 C-21 74.7 -24.3 93.3 -28 112 C-31.7 130.7 -35 149.3 -35 168 C-35 186.7 -31.7 205.3 -28 224 L-0 224 C-3.7 205.3 -7 186.7 -7 168 C-7 149.3 -3.7 130.7 0 112 C3.7 93.3 7 74.7 7 56 C7 37.3 3.7 18.7 0 0Z M28 0 C31.7 18.7 35 37.3 35 56 C35 74.7 31.7 93.3 28 112 C24.3 130.7 21 149.3 21 168 C21 186.7 24.3 205.3 28 224 L56 224 C52.3 205.3 49 186.7 49 168 C49 149.3 52.3 130.7 56 112 C59.7 93.3 63 74.7 63 56 C63 37.3 59.7 18.7 56 0Z M84 0 C87.7 18.7 91 37.3 91 56 C91 74.7 87.7 93.3 84 112 C80.3 130.7 77 149.3 77 168 C77 186.7 80.3 205.3 84 224 L112 224 C108.3 205.3 105 186.7 105 168 C105 149.3 108.3 130.7 112 112 C115.7 93.3 119 74.7 119 56 C119 37.3 115.7 18.7 112 0Z%22/%3E%3C/svg%3E");
}

/* The colour ramp: the page descends from the hero's light periwinkle (--ramp-a) through royal (--ramp-b) to the footer's
   deep navy (--ramp-c), one step per zone: hero 1, reel 2, how 3, prizes 4, Hack Club 5, FAQ 6, footer 7. Steps are
   interpolated in oklch, so they are even. Every zone paints its field, its pattern tint and its vignette from its own
   step (and the next one down, for the edge). Zones from step 3 on are dark: they carry .zone--dark (light type). */
:root {
  --ramp-a: #d6e1ff; --ramp-b: var(--royal); --ramp-c: oklch(0.2 0.14 268);
  --ramp-1: var(--ramp-a);
  --ramp-2: color-mix(in oklch, var(--ramp-a) 66.667%, var(--ramp-b));
  --ramp-3: color-mix(in oklch, var(--ramp-a) 33.333%, var(--ramp-b));
  --ramp-4: var(--ramp-b);
  --ramp-5: color-mix(in oklch, var(--ramp-b) 66.667%, var(--ramp-c));
  --ramp-6: color-mix(in oklch, var(--ramp-b) 33.333%, var(--ramp-c));
  --ramp-7: var(--ramp-c);
  /* Vignettes: a soft light in the middle, and the edges darkened toward the next step down. */
  --hero-vignette: radial-gradient(ellipse farthest-corner at 50% 40%, transparent 0, transparent 50%, color-mix(in oklch, oklch(0.5 0.19 270) 17%, transparent) 64%, color-mix(in oklch, oklch(0.5 0.19 270) 44%, transparent) 80%, color-mix(in oklch, oklch(0.5 0.19 270) 80%, transparent) 100%);
  --how-vignette: radial-gradient(ellipse farthest-corner at 50% 45%, transparent 0, transparent 50%, color-mix(in oklch, oklch(0.38 0.2 270) 22%, transparent) 64%, color-mix(in oklch, oklch(0.38 0.2 270) 55%, transparent) 80%, color-mix(in oklch, oklch(0.38 0.2 270) 100%, transparent) 100%);
  --prizes-vignette: radial-gradient(ellipse farthest-corner at 50% 35%, transparent 0, transparent 50%, color-mix(in oklch, oklch(0.4 0.2 272) 22%, transparent) 64%, color-mix(in oklch, oklch(0.4 0.2 272) 55%, transparent) 80%, color-mix(in oklch, oklch(0.4 0.2 272) 100%, transparent) 100%);
  --hc-vignette: radial-gradient(ellipse farthest-corner at 50% 45%, transparent 0, transparent 50%, color-mix(in oklch, oklch(0.3 0.17 272) 22%, transparent) 64%, color-mix(in oklch, oklch(0.3 0.17 272) 55%, transparent) 80%, color-mix(in oklch, oklch(0.3 0.17 272) 100%, transparent) 100%);
  --faq-vignette: radial-gradient(ellipse farthest-corner at 50% 45%, transparent 0, transparent 50%, color-mix(in oklch, oklch(0.26 0.15 272) 22%, transparent) 64%, color-mix(in oklch, oklch(0.26 0.15 272) 55%, transparent) 80%, color-mix(in oklch, oklch(0.26 0.15 272) 100%, transparent) 100%);
  /* One pattern per zone, none shared: the hero's wavy checker, the reel band's stars, How's diamond lattice, the prize
     shop's dot grid, Hack Club's hearts, the FAQ's plus signs. The footer has none. */
  --plus: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22%3E%3Cpath d=%22M20 14v12M14 20h12%22 stroke=%22%23fff%22 stroke-opacity=%22.09%22 stroke-width=%222.4%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ramp-a: #2b3a9c; --ramp-b: #18236b; --ramp-c: #05071f; } }
:root[data-theme="dark"] { --ramp-a: #2b3a9c; --ramp-b: #18236b; --ramp-c: #05071f; }

/* The canvas behind the page: light at the top, the footer's navy at the bottom, so overscroll and any gap match. */
html { background: linear-gradient(180deg, var(--ramp-1) 50%, var(--ramp-7) 50%); }
.sp-page { overflow-x: clip; background-color: var(--ramp-1); }
.zone { position: relative; isolation: isolate; }
.zone::before, .zone::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Hero: the checker fades into cream toward the bottom, one periwinkle glow sits behind the logo, and a vignette darkens the edges. */
.zone--hero { padding-bottom: 24px; }
.zone--hero::before { top: -80px; bottom: -480px;
  background:
    var(--hero-glow),
    linear-gradient(180deg, var(--ramp-1) 0, var(--ramp-1) 20%, var(--ramp-2) calc(100% - 140px), var(--ramp-2) 100%); }
/* The zone's effects layer (zone__fx): its pattern, then its vignette over it, so the pattern fades into the edges. It sits
   above the zone's field and below the content. The hero's pattern is the wavy checker, which fades out toward the reel. */
.zone__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.zone__fx::before, .zone__fx::after { content: ""; position: absolute; inset: 0; }
.zone--hero .zone__fx { inset: -80px 0 -480px; }
.zone--hero .zone__fx::before { background: var(--wave-tile) 0 0 / 56px 224px;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent calc(100% - 300px)); mask-image: linear-gradient(180deg, #000 30%, transparent calc(100% - 300px)); }
.zone--hero .zone__fx::after { background: var(--hero-vignette); mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent calc(100% - 120px)); mask-image: linear-gradient(180deg, #000 55%, transparent calc(100% - 120px)); }
.zone--hero::after { display: none; }

/* Reel: a tilted gold band with a darker gold rim crosses the page, and the prize cards ride on it. */
.zone--reel { z-index: 4; overflow: hidden; padding-block: calc(24px + 1.5vw) calc(32px + 1.5vw); margin-top: -16px; }
.zone--reel::before { inset: calc(22px + 1.5vw) -6% calc(26px + 1.5vw); transform: rotate(-2.5deg);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 36%, var(--gold-line));
  border-block: 5px solid var(--gold-lip); box-shadow: inset 0 3px 0 #ffffff80, inset 0 -3px 0 #ffffff26, 0 14px 24px -10px #1b247080; }
.zone--reel::after { inset: calc(27px + 1.5vw) -6% calc(31px + 1.5vw); transform: rotate(-2.5deg); background: var(--band-star) 0 0 / 56px 56px; }
.zone--reel .reel { width: 112%; margin-left: -6%; padding-block: var(--space-4); transform: rotate(-2.5deg); }

/* How it works: a raised royal panel. Its top is a diagonal cut parallel to the band, with a light rim; its bottom is
   rounded and throws a shadow onto the prize shop below. A quilted diamond lattice runs across the field. */
.zone--how { z-index: 3; margin-top: calc(-36px - 1.5vw); padding-top: 72px; padding-bottom: 32px; }
.zone--how::before { top: -4.37vw; border-radius: 0 0 56px 56px; clip-path: polygon(0 4.37vw, 100% 0, 100% calc(100% + 48px), 0 calc(100% + 48px));
  background:
    var(--how-vignette),
    repeating-linear-gradient(45deg, transparent 0 54px, color-mix(in oklch, var(--ramp-5) 22%, transparent) 54px 57px, color-mix(in oklch, white 18%, transparent) 57px 60px),
    repeating-linear-gradient(-45deg, transparent 0 54px, color-mix(in oklch, var(--ramp-5) 22%, transparent) 54px 57px, color-mix(in oklch, white 18%, transparent) 57px 60px),
    radial-gradient(ellipse 60% 40% at 50% 100%, var(--ramp-4), transparent 70%), var(--ramp-3);
  background-blend-mode: multiply, normal, normal, normal, normal;
  box-shadow: inset 0 -4px 0 var(--ramp-4), 0 18px 30px -12px color-mix(in oklch, var(--ramp-7) 60%, transparent); }
.zone--how::after { display: none; }
.zone--how .section-head::before { display: none; }
.zone--how .section-head { margin-top: var(--space-4); }
@media (max-width: 599px) { .zone--how::before { border-radius: 0 0 32px 32px; } .zone--how { padding-top: 56px; } }

/* Dark zones: light type. The prizes heading alone has the orbit-ring star behind it, the FAQ heading a speech bubble. */
.zone--dark .section-head { position: relative; }
.zone--prizes .section-head::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px;
  background: var(--orbit) center / contain no-repeat; opacity: .16; pointer-events: none; }
.zone--faq .section-head::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22%3E%3Cpath fill=%22%23fff%22 d=%22M40 30H160Q180 30 180 50V120Q180 140 160 140H110L70 176V140H40Q20 140 20 120V50Q20 30 40 30Z%22/%3E%3Cpath fill=%22none%22 stroke=%22%23090e38%22 stroke-width=%2214%22 stroke-linecap=%22round%22 d=%22M82 66Q82 50 100 50 118 50 118 66 118 78 100 86V98%22/%3E%3Ccircle cx=%22100%22 cy=%22116%22 r=%228%22 fill=%22%23090e38%22/%3E%3C/svg%3E") center / contain no-repeat; opacity: .08; pointer-events: none; }
.zone--dark .section-head h2 { color: #ffffff; text-shadow: 0 3px 0 #0e145080; }
.zone--dark .section-head p { color: var(--frame-muted); }

/* Prize shop: the royal step. A dot grid fades out from the top, a vignette closes
   the edges, sparkles and a crosshair float in it (the decorations below), and the bright cards pop. The wave at its foot is the next zone's. */
.zone--prizes { z-index: 2; margin-top: -60px; padding-top: 96px; padding-bottom: 92px; }
.zone--prizes::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% 100%, color-mix(in oklch, var(--ramp-5) 80%, white), transparent 70%),
    linear-gradient(180deg, var(--ramp-4), var(--ramp-4) 45%, color-mix(in oklch, var(--ramp-4) 50%, var(--ramp-5)));
  box-shadow: inset 0 60px 60px -40px color-mix(in oklch, var(--ramp-7) 55%, transparent), inset 0 -40px 60px -40px color-mix(in oklch, var(--ramp-7) 45%, transparent); }
.zone--prizes::after { display: none; }
.zone--prizes .zone__fx::before { top: 60px; background: radial-gradient(circle, color-mix(in oklch, white 24%, transparent) 1.6px, transparent 2.2px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 10%, transparent 100%); mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 10%, transparent 100%); }
.zone--prizes .zone__fx::after { background: var(--prizes-vignette); mix-blend-mode: multiply; }
/* Thin frame lines with beads at the corners, around the shop. */
.zone--prizes .prizes { position: relative; }
.zone--prizes .prizes::before { content: ""; position: absolute; inset: -22px -16px -18px; z-index: -1; border: 1.5px solid #ffffff2e; border-radius: 10px; pointer-events: none;
  background: radial-gradient(circle, #ffffffb3 3px, transparent 3.5px) -5px -5px / 10px 10px no-repeat, radial-gradient(circle, #ffffffb3 3px, transparent 3.5px) right -5px top -5px / 10px 10px no-repeat,
    radial-gradient(circle, #ffffffb3 3px, transparent 3.5px) -5px bottom -5px / 10px 10px no-repeat, radial-gradient(circle, #ffffffb3 3px, transparent 3.5px) right -5px bottom -5px / 10px 10px no-repeat; }
@media (max-width: 599px) { .zone--prizes .prizes::before { inset: -18px -8px -12px; } }

/* Decorations: sparkles, crosshairs and dot rows painted over a zone's background, as elements so they can move. Each has
   its own phase (--d), period (--p) and amplitude (--a) from LandingHelper#landing_decor, so nothing moves in lockstep.
   Only transform and opacity animate. Reduced motion stills them. They sit under the zone's content. */
.decor { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.decor--hc { top: -34px; }
.decor__item { position: absolute; display: block; }
.decor__spark { background: var(--spark-white) center / contain no-repeat; animation: decor-twinkle var(--p) var(--d) ease-in-out infinite; }
.decor__cross { background: var(--cross) center / contain no-repeat; animation: decor-spin var(--p) var(--d) linear infinite; }
.decor__dots { display: flex; justify-content: space-between; align-items: center; }
.decor__dots i { width: 4.4px; height: 4.4px; border-radius: 50%; background: #fff; animation: decor-wave var(--p) calc(var(--d) + var(--i) * .16s) ease-in-out infinite; }
.decor__set--narrow { display: none; }
@media (max-width: 599px) { .decor__set--wide { display: none; } .decor__set--narrow { display: block; } }
@keyframes decor-twinkle {
  0%, 100% { transform: scale(calc(1 - var(--a))) rotate(calc(var(--r) * -1)); opacity: calc(1 - var(--a) * 2); }
  50% { transform: scale(calc(1 + var(--a) * .5)) rotate(var(--r)); opacity: 1; } }
@keyframes decor-spin {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(calc(90deg * var(--s))) scale(calc(1 + var(--a) * .5)); }
  50% { transform: rotate(calc(180deg * var(--s))) scale(1); }
  75% { transform: rotate(calc(270deg * var(--s))) scale(calc(1 + var(--a) * .5)); }
  100% { transform: rotate(calc(360deg * var(--s))) scale(1); } }
@keyframes decor-wave {
  0%, 100% { transform: translateY(0) scale(1); opacity: .45; }
  50% { transform: translateY(calc(var(--a) * -14px)) scale(1.35); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .decor__item, .decor__dots i { animation: none; } }

/* Hack Club: the fifth step, with hearts, under a wavy top edge that laps over the royal prize shop. Mint sparkles. */
.zone--hc { z-index: 3; padding-block: 8px 24px; }
.zone--hc::before { top: -34px;
  background: var(--hc-vignette), var(--hearts) 0 0 / 64px 64px, var(--ramp-5); background-blend-mode: multiply, normal, normal;
  -webkit-mask: var(--wave) 0 0 / 180px 36px repeat-x, linear-gradient(#000, #000) 0 36px / 100% calc(100% - 36px) no-repeat;
  mask: var(--wave) 0 0 / 180px 36px repeat-x, linear-gradient(#000, #000) 0 36px / 100% calc(100% - 36px) no-repeat; }
.zone--hc::after { display: none; }

/* FAQ: a recessed well on the sixth step, with plus signs. A gold hairline tops it, the walls shade inward, and its foot is cut on a slant. */
.zone--faq { z-index: 2; padding-top: 40px; padding-bottom: 72px; }
.zone--faq::before {
  background: var(--faq-vignette), var(--plus) 0 0 / 40px 40px, oklch(0.31 0.18 270); background-blend-mode: multiply, normal, normal;
  box-shadow: inset 0 3px 0 var(--gold), inset 0 5px 0 var(--gold-lip), inset 0 40px 50px -30px color-mix(in oklch, var(--ramp-7) 55%, transparent);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 2.79vw)); }
/* The slant's shadow onto the next zone: a see-through slab skewed to the same angle, so only its shadow shows. */
.zone--faq::after { top: auto; height: 120px; transform: skewY(1.6deg); transform-origin: 100% 100%; border-bottom: 2px solid color-mix(in oklch, oklch(0.6 0.16 270) 85%, transparent);
  box-shadow: 0 14px 0 oklch(0.1 0.09 270); }
.zone--faq .section-head { margin-top: var(--space-4); }

/* Label strips: a row of small caps, glyphs and a checker block over a dashed rule, along a zone's edge. */
.strip { position: absolute; left: 0; right: 0; z-index: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin: 0;
  padding: 6px max(16px, env(safe-area-inset-left, 0px)) 6px; font: 800 11px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden;
  color: #ffffffa6; border-bottom: 1px dashed #ffffff4d; pointer-events: none; user-select: none; }
.strip--top { top: 70px; }
.strip--bottom { top: auto; bottom: 54px; border-bottom: 0; border-top: 1px dashed #ffffff4d; }
.strip__check { width: 28px; height: 10px; background: linear-gradient(90deg, currentColor 0 50%, transparent 50%) 0 0 / 10px 5px, linear-gradient(90deg, transparent 0 50%, currentColor 50%) 0 5px / 10px 5px repeat-x; background-repeat: repeat-x; opacity: .8; }
.zone--faq .strip { top: 10px; }
@media (max-width: 599px) { .strip > :nth-child(n + 5) { display: none; } }
@media (max-width: 599px) {
  .zone--prizes { padding-top: 84px; } .zone--prizes .strip--top { top: 60px; }
}