/* Math Blitz — landing page
   ============================================================================
   Court, flipped for the web. Tokens are the same values as
   MathBlitz/Sources/UI/Theme.swift; only their JOBS swap round:

     in the app          on this page
     ------------------  --------------------------------------------------
     #0F1319  ground     the PLATE — one dark island, the phone in your hand
     #ECE7DC  plate      the page GROUND
     #12161B  plate ink  body ink on bone
     #00E5A0  accent     unchanged: "act now", one per viewport
     #5AC8FF / #FF8A3D   unchanged lane colours, spent generously on
                         Proof and Lanes — never on a control

   Two radii (14 / 22; a pill is a shape, not a radius). One page margin.
   Six type steps, floor 12.5px. Nothing tappable under 44px.
   If Theme.swift moves, move this block with it.
   ========================================================================== */

/* Repo font, not Google Fonts: the raw Google build's Devanagari vertical
   metrics (ascent 1.078em / descent 0.524em) break every line box. This copy
   comes from scripts/make_display_font.py — ascent .900, descent -.280. */
@font-face {
  font-family: 'Baloo 2';
  src: url('assets/fonts/Baloo2-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ground + ink */
  --bone:        #ECE7DC;
  --bone-hi:     #F5F2EA;
  --ink:         #12161B;
  --ink-2:       rgba(18, 22, 27, .72);   /* 6.6:1 on bone */
  --ink-3:       rgba(18, 22, 27, .62);   /* 4.7:1 on bone */
  --line:        rgba(18, 22, 27, .14);
  --line-2:      rgba(18, 22, 27, .30);

  /* the plate: the app's ground, kept as an island */
  --plate:       #0F1319;
  --plate-2:     #181D26;
  --plate-3:     #222A36;
  --plate-ink:   #F1EEE8;
  --plate-ink-2: rgba(241, 238, 232, .62);
  --plate-line:  rgba(236, 231, 220, .13);

  /* the one "act now", and the two lane colours */
  --accent:      #00E5A0;
  --accent-hi:   #2BF0B4;
  --accent-ink:  #04120C;
  --kids:        #5AC8FF;
  --adults:      #FF8A3D;
  --loss:        #FF5A52;

  --display: 'Baloo 2', 'Figtree', system-ui, sans-serif;
  --body:    'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* six type steps */
  --t-hero:  clamp(38px, 10.2vw, 66px);
  --t-h2:    clamp(27px, 4.4vw, 42px);
  --t-h3:    clamp(19px, 2.3vw, 23px);
  --t-body:  17px;
  --t-small: 15px;
  --t-micro: 12.5px;

  --wrap: 1120px;
  --page: 16px;                 /* THE page margin */
  --r:    14px;
  --r-lg: 22px;
}
@media (min-width: 560px) { :root { --page: 24px; } }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

body {
  margin: 0;
  overflow-x: hidden;            /* belt: the lane glyph is positioned art */
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }
p { margin: 0; }
a { color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 { font-size: var(--t-hero); line-height: 1.02; }
h2 { font-size: var(--t-h2);   line-height: 1.06; }
h3 { font-size: var(--t-h3);   line-height: 1.15; }

.lead { font-size: clamp(17px, 2vw, 21px); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; z-index: 90;
  background: var(--ink); color: var(--bone);
  padding: 12px 18px; border-radius: var(--r); font-weight: 700; text-decoration: none;
}
.skip:focus { left: 16px; top: 16px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.game :focus-visible, .btn-ink:focus-visible, .foot :focus-visible { outline-color: var(--accent); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--page); }
.wrap.narrow > * { max-width: 720px; }        /* one left edge, a shorter measure */

/* ---------------------------------------------------------------- buttons
   Four jobs, one shape. accent = the single "act now" per viewport.
   ink = quiet but solid on bone. bone / quiet = the two that live ON the
   dark plate, so the plate never has to borrow mint. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 26px;
  font-family: var(--display); font-weight: 800; font-size: var(--t-body);
  letter-spacing: -0.005em;
  text-decoration: none; border: 0; border-radius: var(--r);
  cursor: pointer; white-space: nowrap;
  touch-action: manipulation; user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .1s ease, background .14s ease, box-shadow .14s ease;
}
.btn:active { transform: translateY(1px) scale(.985); }
.btn-lg { min-height: 58px; padding: 16px 30px; font-size: clamp(17px, 1.6vw, 19px); }
.btn-sm { min-height: 44px; padding: 10px 18px; font-size: var(--t-small); }

.btn-accent { background: var(--accent); color: var(--accent-ink); box-shadow: 0 3px 0 #00B37D; }
.btn-accent:hover { background: var(--accent-hi); }
.btn-accent:active { box-shadow: 0 1px 0 #00B37D; }

.btn-ink { background: var(--ink); color: var(--bone); box-shadow: 0 3px 0 rgba(18,22,27,.35); }
.btn-ink:hover { background: #1E242C; }
.btn-ink:active { box-shadow: 0 1px 0 rgba(18,22,27,.35); }

.btn-bone { background: var(--bone); color: var(--ink); box-shadow: 0 3px 0 #BDB6A6; }
.btn-bone:hover { background: #F7F4ED; }
.btn-bone:active { box-shadow: 0 1px 0 #BDB6A6; }

.btn-quiet { background: transparent; color: var(--plate-ink); box-shadow: inset 0 0 0 2px var(--plate-line); }
.btn-quiet:hover { background: var(--plate-2); }

/* ---------------------------------------------------------------- nav
   The nav button is INK, not mint: it shares a viewport with the hero CTA
   and the page spends mint once. */
.top { border-bottom: 1px solid var(--line); }
.nav {
  display: flex; align-items: center; gap: 14px;
  max-width: var(--wrap); margin: 0 auto; padding: 12px var(--page);
}
.brand { display: flex; align-items: center; min-height: 44px; margin-right: auto;
         text-decoration: none; color: var(--ink); }
.brand-mark { height: 30px; width: auto; }
@media (min-width: 720px) { .brand-mark { height: 36px; } }

.nav-links { display: none; gap: 4px; }
@media (min-width: 620px) { .nav-links { display: flex; } }
.nav-links a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: var(--t-small); font-weight: 600; color: var(--ink-2); text-decoration: none;
  border-radius: 999px;
}
.nav-links a:hover { color: var(--ink); background: rgba(18,22,27,.06); }

/* ---------------------------------------------------------------- rhythm */
.section { padding-block: clamp(52px, 7vw, 92px); }
.section > .wrap > h2 { margin-bottom: clamp(22px, 3vw, 34px); }

/* ---------------------------------------------------------------- hero */
.hero { padding-block: clamp(26px, 4vw, 54px) clamp(40px, 6vw, 76px); }
.hero-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: start; }
  .hero { padding-block: clamp(34px, 4vw, 64px) clamp(56px, 7vw, 96px); }
  /* The pad only exists during a round, so give the resting stage enough
     height that the plate still reads as a phone rather than a strip. */
  .game[data-state="idle"] .stage, .game[data-state="over"] .stage { min-height: 300px; }
}
.hero-copy > * + * { margin-top: 22px; }
.hero-cta { width: 100%; }
@media (min-width: 420px) { .hero-cta { width: auto; } }

/* The hero keeps "Your move." in ink and puts the playful colour UNDER it,
   so the CTA is still the only mint thing in the viewport. Same device
   signs the footer — used exactly twice on the page. */
.marker {
  display: inline-block;
  white-space: nowrap;
  border-radius: 3px;
  background-image: linear-gradient(var(--adults), var(--adults));
  background-repeat: no-repeat;
  background-position: 0 76%;
  background-size: 0 .24em;
  animation: sweep .55s .25s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes sweep { to { background-size: 100% .24em; } }

.trust { display: flex; flex-wrap: wrap; gap: 6px; }
.trust li {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--ink-2);
  background: var(--bone-hi); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 11px;
}
@media (min-width: 420px) { .trust li { letter-spacing: .04em; padding: 7px 14px; } }

/* ---------------------------------------------------------------- the round
   One dark plate. Everything inside it is the app's palette; nothing outside
   it is. On a phone the numpad only exists while a round is running, which
   is what keeps the whole plate inside one screen. */
.hero-game { min-width: 0; }
.game {
  background: var(--plate);
  color: var(--plate-ink);
  border-radius: var(--r-lg);
  padding: 14px 14px 16px;
  box-shadow: 0 14px 34px -18px rgba(15, 19, 25, .55), 0 2px 0 rgba(18,22,27,.14);
}
@media (min-width: 420px) { .game { padding: 18px 18px 20px; } }

.hud {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 0 4px 12px;
}
.hud-cell { display: flex; align-items: baseline; gap: 8px; }
.hud-cell-end { margin-left: auto; }
.hud-label {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--plate-ink-2);
}
.hud-clock, .hud-score {
  font-family: var(--display); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hud-clock { font-size: 26px; min-width: 5ch; white-space: nowrap; }
.hud-score { font-size: 22px; min-width: 1.6ch; display: inline-block; }
.hud-score.bump { animation: bump .34s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bump { 40% { transform: scale(1.45) translateY(-2px); } }

.lives { display: flex; gap: 6px; }
.life {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--plate-ink); transition: background .2s ease, transform .2s ease;
}
.life.gone { background: var(--plate-3); transform: scale(.72); }

.stage {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 150px; padding: 14px 10px; text-align: center;
}
.stage.miss { animation: shake .34s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
  20% { transform: translateX(-9px); } 45% { transform: translateX(9px); }
  70% { transform: translateX(-4px); } 100% { transform: translateX(0); }
}

.panel { width: 100%; }
.panel > * + * { margin-top: 14px; }
.panel h3 { color: var(--plate-ink); }
/* Scoped to the start panel on purpose: `.panel p` is type+class, which
   out-specifies `.question` / `.final` and shrank both. */
#panelStart p { color: var(--plate-ink-2); font-size: var(--t-small); }

.question {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(36px, 9.2vw, 48px); line-height: 1;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  color: var(--plate-ink);
}
.entry {
  display: inline-block; min-width: 4.2ch; padding-bottom: 6px;
  border-bottom: 3px solid var(--plate-line);
  font-family: var(--display); font-weight: 800;
  font-size: 30px; line-height: 1.12; min-height: 40px;
  letter-spacing: .06em; font-variant-numeric: tabular-nums;
  color: var(--plate-ink);
  transition: color .16s ease, border-color .16s ease;
}
.entry.pop   { animation: pop .2s cubic-bezier(.2, 1.7, .4, 1); color: var(--accent); border-color: var(--accent); }
.entry.wrong { color: var(--loss); border-color: var(--loss); }
@keyframes pop { 45% { transform: scale(1.22); } }
.stage:focus { outline: none; }

/* The question clock is the bar, and only the bar. heat() in game.js drives
   the colour mint -> amber -> red as the 7 seconds drain. */
.qclock { height: 8px; background: var(--plate-3); border-radius: 999px; margin: 12px 4px 14px; overflow: hidden; }
.qclock-fill { display: block; height: 100%; width: 100%; background: var(--accent); border-radius: 999px; }

.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.key {
  min-height: 58px; padding: 0; border: 0; border-radius: var(--r);
  background: var(--plate-3); color: var(--plate-ink);
  font-family: var(--display); font-weight: 800; font-size: 26px;
  font-variant-numeric: tabular-nums; line-height: 1; cursor: pointer;
  touch-action: manipulation; user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35);
  transition: transform .07s ease, background .12s ease;
}
@media (min-width: 420px) { .key { min-height: 62px; } }
.key:hover { background: #2C3543; }
.key:active, .key.down { transform: translateY(2px) scale(.97); background: #36414F; box-shadow: none; }
.key-util { font-size: 20px; background: var(--plate-2); color: var(--plate-ink-2); }
.key-enter { font-size: var(--t-small); letter-spacing: .02em; background: var(--plate-2);
             box-shadow: inset 0 0 0 2px rgba(236, 231, 220, .34), 0 2px 0 rgba(0, 0, 0, .35); }
.key-enter:hover { background: #202734; }

/* Idle and round-over: no clock, no numpad. Keeps the resting plate short
   enough that the headline, the lead and the whole plate share one screen. */
.game[data-state="idle"] .qclock,
.game[data-state="idle"] .pad,
.game[data-state="over"] .qclock,
.game[data-state="over"] .pad { display: none; }
.game[data-state="over"] .hud-clock { min-width: 0; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; font-family: var(--body); font-weight: 600; color: var(--plate-ink-2); }

.final {
  font-family: var(--display); font-weight: 800; font-size: 74px; line-height: .92;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--plate-ink);
}
.panel > .final-label {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--plate-ink-2); margin-top: 8px;
}
.verdict { color: var(--plate-ink); font-size: var(--t-body); max-width: 30ch; margin-inline: auto; }
.panel-actions { display: grid; gap: 10px; width: 100%; max-width: 300px; margin-inline: auto; }

.game-foot { margin-top: 14px; padding-inline: 4px; font-size: var(--t-micro); line-height: 1.5; color: var(--ink-3); }

/* ---------------------------------------------------------------- proof
   The two numbers the page is allowed to have. Lane colour as a fat rule and
   a tag, over a lane tint — loud, but not the same object as Lanes below. */
.proof { padding-block: clamp(8px, 2vw, 16px) 0; }
.proof-list { display: grid; gap: 12px; }
@media (min-width: 860px) { .proof-list { grid-template-columns: 1fr 1fr; } }

.proof-row {
  display: grid; gap: 10px; align-content: start;
  border-radius: var(--r);
  border-left: 10px solid var(--lane);
  background: var(--lane-tint);
  padding: 18px 20px;
}
.proof-kids   { --lane: var(--kids);   --lane-tint: rgba(90, 200, 255, .30); }
.proof-adults { --lane: var(--adults); --lane-tint: rgba(255, 138, 61, .30); }

.lane-tag {
  justify-self: start;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
  background: var(--lane); border-radius: 999px; padding: 5px 12px;
}
.proof-row p { font-size: clamp(17px, 1.9vw, 19.5px); font-weight: 500; line-height: 1.4; }
.source {
  justify-self: start; display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.source:hover { color: var(--ink); }

/* ---------------------------------------------------------------- lanes
   Two bold colour blocks. The colour IS the content here: one glance says
   there are two of these and they are not the same. */
.lane-grid { display: grid; gap: 14px; }
@media (min-width: 780px) {
  .lane-grid { grid-template-columns: 1fr 1fr; }
  .lane-block { min-height: 240px; padding: 28px; }
  .lane-glyph { font-size: 74px; }
}

.lane-block {
  border-radius: var(--r-lg); padding: 22px;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: space-between; gap: 20px;
  color: var(--ink);
  transition: transform .16s ease;
}
.lane-block:hover { transform: translateY(-3px); }
.lane-block-kids   { background: var(--kids); }
.lane-block-adults { background: var(--adults); }
.lane-block p {
  font-size: clamp(19px, 2.5vw, 25px); font-weight: 600; line-height: 1.26;
  letter-spacing: -0.01em; max-width: 26ch;
}
/* The brand mark's own cross, in flow as a lane badge. It used to be an
   absolute 170px watermark, which clipped mid-stroke and ran under the
   third line of the adults' copy. */
.lane-glyph {
  font-family: var(--display); font-weight: 800; font-size: 54px; line-height: .78;
  color: rgba(18, 22, 27, .30);
}

/* ---------------------------------------------------------------- parents */
.parents .lead { margin-top: 18px; }
.checklist {
  display: grid; gap: 1px; margin-top: 30px;
  background: var(--line); border-radius: var(--r); overflow: hidden;
}
.checklist li { background: var(--bone-hi); padding: 18px 20px; font-size: var(--t-body); }
.checklist strong { font-family: var(--display); font-weight: 800; }
.checklist span { color: var(--ink-2); }

.send { margin-top: clamp(40px, 5vw, 64px); }
.send-sub { margin-top: 8px; color: var(--ink-2); font-size: var(--t-small); }
.send-grid { display: grid; gap: 26px; margin-top: 24px; }
@media (min-width: 768px) { .send-grid { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.send-main { min-width: 0; }
.send-store { width: 100%; }              /* phones: the store button above the form */
@media (min-width: 420px) { .send-store { width: auto; } }

.qr { display: none; }                    /* a QR is useless on the device it points at */
@media (min-width: 768px) {
  .qr { display: block; text-align: center; }
  .qr-head { font-family: var(--display); font-weight: 800; font-size: var(--t-h3); line-height: 1.15; max-width: 9ch; margin: 0 auto 12px; }
  .qr img { width: 150px; height: 150px; background: var(--bone-hi); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; }
}

/* ---------------------------------------------------------------- form */
.signup { margin-top: 26px; }
.field-label { display: block; font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.field-row { display: grid; gap: 10px; }
@media (min-width: 520px) { .field-row { grid-template-columns: minmax(0, 1fr) auto; } }
.signup input[type="email"] {
  width: 100%; min-height: 52px; padding: 12px 16px;
  font-family: var(--body); font-size: var(--t-body); color: var(--ink);
  background: var(--bone-hi); border: 2px solid var(--line-2); border-radius: var(--r);
}
.signup input[type="email"]::placeholder { color: var(--ink-3); }
.signup input[type="email"]:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-color: var(--ink); }
.signup input[type="email"][aria-invalid="true"] { border-color: var(--loss); }
.signup button[disabled] { opacity: .55; cursor: progress; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 18px; padding: 10px 0; min-height: 44px;
  font-size: var(--t-small); color: var(--ink-2); cursor: pointer;
}
.consent input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--ink); }
.privacy { margin-top: 10px; font-size: var(--t-micro); color: var(--ink-3); }
.form-status { margin-top: 12px; font-size: var(--t-small); font-weight: 600; line-height: 1.45; min-height: 1.45em; }
.form-status.ok   { color: #0A6B4A; }
.form-status.bad  { color: #B3241D; }

/* ---------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); padding-block: clamp(52px, 7vw, 84px) 40px; }
.signature {
  font-family: var(--display); font-weight: 800;
  font-size: var(--t-h2); line-height: 1.04; letter-spacing: -0.012em;
  margin-bottom: 26px;
}
.credit { margin-top: 34px; font-size: var(--t-micro); color: var(--ink-3); }

/* ---------------------------------------------------------------- the mark
   The + eye and the x eye are the same cross 45 degrees apart, so the wink
   is one rotation. Markup from scripts/make_lockups.py tags the + as .wink. */
.wink { transform-box: fill-box; transform-origin: center; }
.brand-mark .wink { animation: wink 3.6s cubic-bezier(.34, 1.3, .5, 1) infinite; }
@keyframes wink {
  0%, 22%   { transform: rotate(0deg); }
  38%, 54%  { transform: rotate(45deg); }
  72%, 100% { transform: rotate(0deg); }
}


/* ---------------------------------------------------------------- mint hero
   The hero and header sit on the accent, so the hero CTA goes ink and the
   footer goes ink with the one mint button. Chosen from five variants on
   2026-09-21 (Court, Sky, Tangerine, Mint, Candy); Mint won. */
:root {
  --page-bg:        var(--bone);
  --hero-bg:        var(--accent);
  --top-line:       rgba(18, 22, 27, .18);
  --marker:         var(--adults);
  --marker-foot:    var(--adults);
  --hero-cta-bg:    var(--ink);
  --hero-cta-ink:   var(--bone);
  --hero-cta-shadow:rgba(0, 0, 0, .35);
  --foot-bg:        var(--ink);
  --foot-line:      transparent;
  --foot-ink:       var(--bone);
  --foot-ink-3:     rgba(236, 231, 220, .6);
  --foot-btn-bg:    var(--accent);
  --foot-btn-ink:   var(--accent-ink);
  --card-bg:        var(--bone-hi);
}
body { background: var(--page-bg); }
.top, .hero { background: var(--hero-bg); }
.top { border-bottom-color: var(--top-line); }
.marker { background-image: linear-gradient(var(--marker), var(--marker)); }
.foot .marker { background-image: linear-gradient(var(--marker-foot), var(--marker-foot)); }
.hero .btn-accent { background: var(--hero-cta-bg); color: var(--hero-cta-ink); box-shadow: 0 3px 0 var(--hero-cta-shadow); }
.hero .btn-accent:hover { background: var(--hero-cta-bg); filter: brightness(1.08); }
.foot { background: var(--foot-bg); color: var(--foot-ink); border-top-color: var(--foot-line); }
.foot .btn-ink { background: var(--foot-btn-bg); color: var(--foot-btn-ink); }
.foot .btn-ink:hover { background: var(--foot-btn-bg); filter: brightness(1.12); }
.foot .credit { color: var(--foot-ink-3); }
.checklist li, .trust li { background: var(--card-bg); }