/* ══════════════════════════════════════════════════════════════
   LENOVO 360 BOOST — landing page

   Direction: deep space. Drifting rock and starlight behind soft,
   lit panels — the campaign's own world rather than an instrument
   panel. Sits in the same family as auraiqchallenge.com and
   ultimatepoweruser.com: Montserrat and Archivo Black, pill
   buttons, generous radii, light that bleeds.

   Every colour resolves from the token block below, so the whole
   palette moves by editing these values.

   Type is never set in capitals. Lenovo does not use all caps —
   headings, labels and buttons are Title Case, body copy is
   sentence case. "BOOST" is the program name, not a shout, which
   is the one place capitals are correct.

   Shared with the mission log at /leaderboard/, which links this
   file for the top bar and then its own styles.css. Everything
   document-level here is scoped to `body.site` so it cannot reach
   the fixed-canvas page.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ground — aubergine, after auraiqchallenge.com */
  --void-rgb:   20, 8, 22;      /* #140816 */
  --deep-rgb:   26, 19, 37;     /* #1A1325 */
  --hull-rgb:   45, 27, 51;     /* #2d1b33 */
  --shadow-rgb: 9, 3, 11;

  /* accent — Lenovo red into a deeper red, magenta as the light */
  --boost-rgb:  226, 35, 26;    /* #E2231A */
  --deepred-rgb: 201, 31, 23;   /* #c91f17 */
  --magenta-rgb: 214, 51, 132;
  --violet-rgb: 138, 43, 226;   /* the blueviolet haze Aura hangs behind things */

  --void:    rgb(var(--void-rgb));
  --deep:    rgb(var(--deep-rgb));
  --boost:   rgb(var(--boost-rgb));
  --deepred: rgb(var(--deepred-rgb));
  --magenta: rgb(var(--magenta-rgb));
  --violet:  rgb(var(--violet-rgb));

  /* ink — lavender, not blue-grey */
  --ink:      #f7ecf5;
  --ink-soft: #d9c1d8;          /* Aura's lavender, its dominant ink */
  --ink-mute: #a289a6;

  --hairline: rgba(217, 193, 216, 0.18);

  /* light */
  --amb-a: 0.30;          /* spotlight intensity */
  --glow: 0 10px 44px rgba(var(--boost-rgb), 0.38);

  /* ── what the shared chrome reads ───────────────────────────
     The top bar and the mobile menu are the same object on every
     page, and they are not allowed a family resemblance. So they
     read these rather than --body and --edge: the mission log at
     /leaderboard/ links this file for the bar and then its own
     styles.css, which redefines both of those for the instrument.
     Anything the bar depends on is named where a page stylesheet
     will not land on it.

     The landing page's own tokens alias straight through, so there
     is one value and not two to keep in step. */
  --chrome-font: "Montserrat", system-ui, sans-serif;
  --chrome-edge: 24px;

  /* type */
  --display: "Archivo Black", "Helvetica Neue", Impact, sans-serif;
  --body: var(--chrome-font);

  /* metrics */
  --wrap-w: 1200px;
  --nav-h: 74px;
  --edge: var(--chrome-edge);
  --r-md: 16px;
  --r-lg: 26px;

  /* How far the launch pad canvas reaches up behind the top bar. */
  --pad-reach: 240px;
}

/* ── document (landing page only) ───────────────────────── */

body.site {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.site * { box-sizing: border-box; }

body.site img { display: block; max-width: 100%; }
body.site a { color: inherit; text-decoration: none; }

html.site-root { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible { outline: 2px solid var(--magenta); outline-offset: 3px; border-radius: 2px; }

/* ── the field behind everything ─────────────────────────
   The same drifting rock and starlight the mission flies through,
   so reading the page happens inside the campaign's world rather
   than beside it. Fixed, so content scrolls over a still field. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Spotlights over the field. The canvas gives motion and grain;
   this gives the scene depth and colour it cannot paint cheaply. */
.lights {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(62vw 50vh at 8% -10%, rgba(var(--magenta-rgb), var(--amb-a)), transparent 60%),
    radial-gradient(58vw 46vh at 94% -6%, rgba(var(--violet-rgb), var(--amb-a)), transparent 62%),
    radial-gradient(80vw 44vh at 50% 112%, rgba(var(--boost-rgb), 0.20), transparent 66%);
}

.page { position: relative; z-index: 1; }

/* Named `wrap`, not `rail`: the mission log already owns `.rail` for
   its instrument rails, and this file is linked there too. */
.wrap {
  width: 100%;
  max-width: var(--wrap-w);
  margin-inline: auto;
  padding-inline: var(--chrome-edge);
}

/* ══ TOP BAR ═══════════════════════════════════════════════
   Shared with the mission log. Sticky here, static there — the
   mission page is a fixed canvas and never scrolls. */

/* The document rules above are scoped to body.site, which the mission
   log is not, so the shared chrome carries its own. Without these the
   bar inherited the instrument's face and its images kept a baseline
   gap, and the two pages' bars were visibly different objects. */
/* `body.site a { color: inherit }` is the landing page's reset, and it is
   more specific than the rules that paint links — so on that page every
   link in the bar, the Leaderboard button included, is --ink. Off that
   page the same links fell through to the UA's default blue. Reproduce
   the reset for the chrome and both pages land on the same colour. */
.top-bar a, .mobile-menu a, .btn { text-decoration: none; }
.top-bar a, .mobile-menu a { color: inherit; }
.top-bar, .mobile-menu {
  font-family: var(--chrome-font);
  /* Same leading as body.site. Left to inherit, the bar was 6px shorter
     on the mission log — everything in it is padding around one line of
     text, so the leading is the height. */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  /* And the same ink. Left to inherit this was --ink here and --bone on
     the mission log, which is not one property but every colour in the
     bar that resolves to currentColor — the hamburger's bars, the close
     cross, any border or outline nobody thought to paint. */
  color: var(--ink);
}
.top-bar img, .mobile-menu img { display: block; max-width: 100%; }

.top-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(var(--void-rgb), 0.72);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hairline);
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
}

/* The Lenovo | Intel lockup, sized off its height so the supplied
   art keeps its own proportions. The file is the light-on-dark
   variant — swap it if the bar ever goes light. */
.logo-lockup { display: flex; align-items: center; min-width: 0; }

.logo-lockup a { display: block; }

.logo-lockup img { height: 30px; width: auto; }

.top-bar-right { display: flex; align-items: center; gap: 34px; }

.top-nav ul {
  display: flex;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-nav a {
  position: relative;
  display: block;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 600;
  /* Full ink, not --ink-soft. This rule used to ask for the softer one
     and never got it on the landing page: `body.site a { color: inherit }`
     is a shade more specific and had been quietly winning, so the two
     pages' bars sat at different weights. The landing page is the one
     that is right, so it is the one written down. */
  color: var(--ink);
  white-space: nowrap;
  transition: color 180ms;
}

.top-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--boost), var(--magenta));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms ease;
}

/* The sweep is the whole hover tell now that the resting colour is
   already full ink. */
.top-nav a:hover::after { transform: scaleX(1); }
.top-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ── buttons ─────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--chrome-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 240ms ease, border-color 240ms ease, color 240ms ease;
}

.btn svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--boost), var(--deepred));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, var(--glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset, 0 14px 52px rgba(var(--magenta-rgb), 0.5);
}

.btn-ghost {
  color: var(--ink-soft);
  border-color: var(--hairline);
  background: rgba(var(--hull-rgb), 0.45);
}

.btn-ghost:hover {
  color: var(--ink);
  border-color: rgba(var(--violet-rgb), 0.8);
  box-shadow: 0 0 26px rgba(var(--violet-rgb), 0.35);
}

.top-cta { padding: 12px 24px; font-size: 13px; }

/* ── hamburger + mobile menu ─────────────────────────────── */

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--ink-soft);
  transition: transform 240ms ease, opacity 180ms ease;
}

.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--void-rgb), 0.97);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 260ms ease;
}

.mobile-menu.is-open { opacity: 1; visibility: visible; }

.mobile-menu ul {
  display: grid;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.mobile-menu a {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.mobile-menu .btn { font-family: var(--chrome-font); font-size: 15px; }

.mobile-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}

.mobile-close svg {
  width: 26px; height: 26px;
  margin: 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ══ TYPE SCALE ════════════════════════════════════════════ */

/* An eyebrow is a lit pill, not a caps label — it reads as a tag
   on the section rather than a readout. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 8px 18px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(var(--violet-rgb), 0.10);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.bubble-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--boost);
  box-shadow: 0 0 10px var(--boost);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.8); }
}

.section-heading {
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1.06;
  letter-spacing: -0.02em;
}

.section-sub {
  margin: 56px 0 16px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(23px, 2.6vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.section-intro {
  margin: 0 0 40px;
  max-width: 64ch;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.section { padding: clamp(64px, 8vw, 110px) 0; }

/* ══ HERO ══════════════════════════════════════════════════ */

.hero { padding: clamp(48px, 7vw, 92px) 0 clamp(40px, 5vw, 72px); }

.hero-inner { display: grid; gap: 52px; }

/* The headline is the supplied wordmark, so it is sized as artwork
   rather than as type: a width that tracks the viewport the way the
   old clamp on font-size did, and the height left to the file's own
   ratio. The file is reframed to the ink (see the note in it), so the
   left edge of the b is the left edge of the box and the mark hangs
   on the same line as the copy below it. line-height 0 keeps the
   inline image from carrying a descender gap under the mark. */
.hero h1 {
  margin: 0 0 24px;
  line-height: 0;
}

.hero h1 img {
  display: block;
  width: clamp(230px, 36vw, 420px);
  max-width: 100%;
  height: auto;
  /* The same starlight the type glow gave, moved to the alpha edge. */
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.28))
    drop-shadow(0 0 34px rgba(var(--violet-rgb), 0.5))
    drop-shadow(0 0 72px rgba(var(--boost-rgb), 0.42));
}

/* ══ THE LOCKUP ════════════════════════════════════════════
   boost(ED). One definition, used everywhere it appears — the hero,
   the closing heading, the mission log's note, both walkthroughs —
   because it is a mark and a mark that is set differently in each
   place it lands is not one mark.

   Both halves are named here, not just the suffix. It carries its own
   face wherever it goes, the way a logo does in running copy: dropped
   into a paragraph it would otherwise take that paragraph's type, and
   on the mission log that is IBM Plex.

   The two halves are told apart by weight and colour, not by scale:
   same size, same baseline, the word in Archivo Black and the suffix
   in Archivo Medium. Archivo rather than Archivo Black for the suffix
   because the Black ships in a single weight and cannot be set
   thinner — but it is the top of the Archivo superfamily, so the
   letterforms are the same ones. Sized up a hair because the lighter
   cut's caps run narrower, and matched em for em the suffix reads
   small beside the word.

   Font stacks are spelled out rather than taken from --display and
   --body: those are redefined per page, and this must not be. */
.lockup {
  font-family: "Archivo Black", "Helvetica Neue", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: -0.03em;
}

.lockup i {
  font-style: normal;
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: 1.08em;
  vertical-align: baseline;
  letter-spacing: -0.02em;
  color: var(--boost);
}

.hero-copy {
  margin: 0 0 34px;
  max-width: 58ch;
  font-size: 17px;
  line-height: 1.78;
  color: var(--ink-soft);
}

.hero-copy strong { color: var(--ink); font-weight: 700; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── cards ───────────────────────────────────────────────
   One lit-glass treatment, used by every card on the page.
   Named `card`, not `panel`: the mission log owns `.panel` for its
   end-of-run dialog, and this file is linked there too. */

.card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(var(--hull-rgb), 0.72), rgba(var(--deep-rgb), 0.60));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 26px 60px rgba(var(--shadow-rgb), 0.5);
  backdrop-filter: blur(10px);
}

/* Hover lights the card's own edge in Lenovo red — the two mission
   steps, the two rewards, and the mission clock.

   The border goes with the glow rather than the glow going on alone: a
   halo around an edge that has not changed reads as a blur behind the
   card rather than as the card lighting up. The existing drop shadow is
   restated so it is not lost to the shorthand.

   Behind `hover: hover` because a phone has no hover to leave — a tap
   would otherwise light a card and leave it lit. */
@media (hover: hover) {
  .step, .reward, .countdown {
    transition: border-color 260ms ease, box-shadow 260ms ease;
  }

  .step:hover, .reward:hover, .countdown:hover {
    border-color: rgba(var(--boost-rgb), 0.7);
    box-shadow:
      0 0 0 1px rgba(var(--boost-rgb), 0.32) inset,
      0 0 32px rgba(var(--boost-rgb), 0.32),
      0 26px 60px rgba(var(--shadow-rgb), 0.5);
  }

  /* The marker lights with the card, not on its own hover: the whole
     step is the target, so the mark filling in is the card's own
     response rather than a second thing to find. */
  .step-mark img { transition: opacity 260ms ease; }
  .step:hover .mark-rest { opacity: 0; }
  .step:hover .mark-hot  { opacity: 1; }
}

/* The swap still happens, it just stops being a fade. */
@media (prefers-reduced-motion: reduce) {
  .step-mark img { transition: none; }
}

/* ── the launch pad ──────────────────────────────────────── */

/* The vehicle hovers in open space rather than inside a frame, so
   the pad carries no ground of its own. Unlabelled by design: the
   cursor over the hull is the only affordance. */
.pad { position: relative; }

/* The canvas reaches up past the top of the hero and is pulled back by
   the same amount, so it occupies its old height in the layout while
   giving the launch somewhere to go. `.page` sits at z-index 1 and the
   bar at 60, so the ship climbs away behind the bar rather than being
   clipped short of it. */
.pad canvas {
  display: block;
  width: 100%;
  height: calc(560px + var(--pad-reach));
  margin-top: calc(var(--pad-reach) * -1);
}

/* ── countdown ───────────────────────────────────────────── */

/* Sits under the whole promo rather than beside it, centred on the
   page so it reads as the mission clock and not a hero aside. */
.hero-countdown { margin-top: clamp(20px, 3.4vw, 44px); }

.countdown {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 24px clamp(20px, 3vw, 40px) 22px;
  text-align: center;
}

.cd-label {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

.cd-digits {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(6px, 1.4vw, 14px);
}

.cd-seg { display: flex; flex-direction: column; gap: 6px; min-width: 56px; }

.cd-seg-num {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 28px rgba(var(--violet-rgb), 0.55);
}

.cd-seg-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}

.cd-sep {
  padding-top: 4px;
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 34px);
  color: rgba(217, 193, 216, 0.26);
}

/* ══ LEADERBOARD PREVIEW ═══════════════════════════════════ */

.board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 26px;
  border-bottom: 1px solid var(--hairline);
}

.board-title {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

.board-list { margin: 0; padding: 8px 26px 10px; list-style: none; }

.board-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 15px 0;
  border-top: 1px solid rgba(217, 193, 216, 0.09);
}

.board-row:first-child { border-top: 0; }

.board-pos {
  font-family: var(--display);
  font-size: 15px;
  color: var(--ink-mute);
}

/* The leader is the only row that gets the accent — a board where
   every row is highlighted highlights nothing. */
.board-row:first-child .board-pos {
  color: var(--boost);
  text-shadow: 0 0 16px rgba(var(--boost-rgb), 0.8);
}

.board-who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.board-org {
  display: block;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-mute);
}

.board-pts {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: -0.01em;
}

.board-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px 26px;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-soft);
  transition: color 180ms;
}

.board-foot:hover { color: var(--ink); }

.board-foot svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ══ MISSION STEPS ═════════════════════════════════════════
   Numbered because the copy numbers them: an ordered list carries
   that order semantically, so the numerals are not decoration. */

.steps {
  display: grid;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The marker column is wider than the 60px the old line art needed:
   the supplied marks sit inside their own disc, so the rocket is about
   three fifths of the box rather than all of it, and at 60px it read as
   a small drawing rather than as a mark. */
.step {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 22px;
  padding: 32px;
}

/* A vehicle rather than a numeral. The <ol> is still counting, so these
   carry no information the list does not already have — they say what
   kind of boost each objective is, which a digit could not.

   Centred against the whole card rather than hung off the top line.
   Only the marker is moved — the copy still sets the row's height.

   The two states are stacked in one grid cell rather than swapped by
   src, so both are decoded before the pointer ever arrives and the
   change is a fade instead of a flash of nothing. */
.step-mark {
  display: grid;
  align-self: center;
  aspect-ratio: 1;
}

.step-mark img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.step-mark .mark-hot { opacity: 0; }

.step h3 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  letter-spacing: -0.012em;
}

.step p { margin: 0; color: var(--ink-soft); }

/* The ordinal on the deadline. The browser default for <sup> is sized
   for a footnote marker — at 0.83em the "st" sat almost as large as the
   date it hangs off, and raised far enough to touch the line above.
   Sized and lifted to read as part of the number instead. Kept separate
   from the ® marks, which want to be smaller still. */
.ord {
  font-size: 0.62em;
  vertical-align: baseline;
  position: relative;
  top: -0.42em;
}

/* ══ REWARDS ═══════════════════════════════════════════════ */

.reward {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 40px;
  align-items: center;
  padding: 34px;
}

.reward h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.015em;
}

.reward p { margin: 0 0 16px; color: var(--ink-soft); }

.reward p:last-child { margin-bottom: 0; }

.reward-note {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

.reward-art { display: grid; gap: 12px; }



/* The product shots. Both are 4:3 cut-outs on transparency, which is
   why the frame keeps that ratio and lights the middle of it: the
   glow reads as the object sitting in the same space the rest of the
   page flies through, rather than as a photo pasted onto a panel. */
.shot {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background:
    radial-gradient(72% 62% at 50% 50%,
      rgba(var(--violet-rgb), 0.16), transparent 70%),
    rgba(var(--void-rgb), 0.5);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Grounds the cut-out — without it the chrome floats. */
  filter: drop-shadow(0 14px 28px rgba(var(--shadow-rgb), 0.55));
}

/* ── goal meter ──────────────────────────────────────────── */

.goal {
  margin-top: 22px;
  padding: 20px 22px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: rgba(var(--void-rgb), 0.42);
}

.goal-label {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}

.goal-figures {
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.goal-num {
  font-family: var(--display);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
}

.goal-of { font-size: 13px; font-weight: 600; color: var(--ink-mute); }

.meter { display: flex; align-items: center; gap: 14px; }

.meter-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(217, 193, 216, 0.12);
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--boost), var(--magenta));
  box-shadow: 0 0 18px rgba(var(--magenta-rgb), 0.6);
}

.meter-pct { font-size: 13px; font-weight: 700; color: var(--ink-mute); }

/* ══ MATERIALS ═════════════════════════════════════════════ */

.pending {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 32px 34px;
}

.pending .bubble-dot { flex: none; background: var(--magenta); box-shadow: 0 0 12px var(--magenta); }

.pending p { margin: 0; color: var(--ink-soft); }

/* ══ CLOSER ════════════════════════════════════════════════ */

.closer { text-align: center; }

.closer .eyebrow { margin-inline: auto; }

.closer .section-intro { margin-inline: auto; }

/* ══ FOOTER ════════════════════════════════════════════════ */

.site-footer {
  padding: 48px 0;
  border-top: 1px solid var(--hairline);
  background: rgba(var(--void-rgb), 0.8);
}

.footer-inner {
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
}

/* The measure still caps the line length; auto margins centre the block
   the cap leaves behind. */
.footer-legal {
  margin: 0 auto;
  max-width: 96ch;
  font-size: 12px;
  line-height: 1.8;
  color: var(--ink-mute);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-mute);
}

.footer-links a:hover { color: var(--ink); }

/* ══ WIDE ══════════════════════════════════════════════════ */

@media (min-width: 900px) {
  .hero-inner {
    grid-template-columns: 1.02fr 0.98fr;
    align-items: center;
    gap: 60px;
  }

  .steps { grid-template-columns: 1fr 1fr; }
}

/* ══ NARROW ════════════════════════════════════════════════ */

@media (max-width: 899px) {
  .reward { grid-template-columns: 1fr; gap: 26px; }
  .reward-art { max-width: 440px; }
}

@media (max-width: 720px) {
  :root { --chrome-edge: 18px; --nav-h: 64px; --r-lg: 20px; }

  .top-nav, .top-cta { display: none; }
  .hamburger { display: flex; }

  .logo-lockup img { height: 24px; }

  /* No launch pad on a phone. Stacked under the copy it was a third of
     a screenful of empty space around a small ship, and its whole point
     — click it and fly — is a pointer gesture. js/home.js checks for
     this and skips building it, so nothing animates off-screen. */
  .hero-pad { display: none; }

  /* The clock becomes a sticky bar along the bottom. On a phone the
     hero is most of a screenful on its own, so a countdown parked in
     the middle of it scrolled away and was never seen again; pinned
     down there it stays with you the whole page. */
  .hero-countdown {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 55;   /* under the mobile menu at 80, which should cover it */
    margin: 0;
    max-width: none;
    padding-inline: 0;
  }

  .countdown {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 9px 14px 11px;
    border: 0;
    border-top: 1px solid var(--hairline);
    border-radius: 0;
    background: rgba(var(--void-rgb), 0.94);
    backdrop-filter: blur(14px);
  }

  .cd-label { margin-bottom: 5px; font-size: 11px; }
  .cd-seg { min-width: 0; gap: 2px; }
  .cd-seg-num { font-size: 25px; }
  .cd-seg-label { font-size: 8.5px; letter-spacing: 0.08em; }
  .cd-sep { display: none; }
  .cd-digits { flex-wrap: nowrap; gap: 0; justify-content: space-around; }

  /* Clear the bar, or it sits on top of the footer's last line. */
  body.site { padding-bottom: 84px; }

  .step { grid-template-columns: 38px 1fr; gap: 16px; padding: 24px; }

  .reward { padding: 24px; }

  .board-head, .board-list, .board-foot { padding-inline: 20px; }
}

/* ══ REDUCED MOTION ════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  html.site-root { scroll-behavior: auto; }
  .btn:hover { transform: none; }
  .bubble-dot { animation: none; }
}