/* memoe: the founding edition pages (/, /founders/*). Loads after brand.css and site.css and uses their tokens and roles:
   pale glass, graphite type, one dark pill as the primary action per view. Nothing flashes and nothing counts up. Two
   things are loud on purpose, at the owner's request: the top three cards are gold, silver and bronze, and the one button
   on the first screen pulses slowly (a soft ring, never faster than one a few seconds; still under reduced motion).

   Pieces: .featured (the gold first-place card), .podium-card (silver and bronze), .drop-button (scrolls to the price),
   .preorder-box (choose your price), .amount-*, .field / .check (form rows), .badge-card (the founder badge), .board (the
   leaderboard), .notice (status lines), .dev-banner (development previews only). */

.page-founders { --narrow: 640px; --wide: 1120px; }
/* The medals. Silver is made of brand tokens (white and the mists). Gold and bronze are not in the brand's palette, which
   keeps warm tones for photographs, so these nine are the only colour values written out on these pages. Graphite text
   holds 4.5:1 on every stop (pages.test.js measures it). */
.page-founders {
  --gold-1: #F8EBBD; --gold-2: #E8CA74; --gold-3: #D2A94A; --gold-4: #BC8F33; --gold-rim: #FFF7D6;
  --bronze-1: #EDC9A2; --bronze-2: #DAA26C; --bronze-3: #C2884F; --bronze-rim: #F6DDBF;
}
/* The pieces below set their own display; [hidden] must still win. */
.page-founders [hidden] { display: none !important; }
/* Grid children may shrink below their content (a long id, a wide table), so nothing pushes the page sideways. */
.page-founders .page > *, .page-founders .stack > *, .page-founders .stack-lg > * { min-width: 0; }
.page-founders fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.page-founders legend.label { margin-bottom: 4px; padding: 0; font-size: 15px; font-weight: var(--fw-medium); }

/* ---------- small type and labels ---------- */
.eyebrow { font-size: 13px; font-weight: var(--fw-medium); letter-spacing: .02em; color: var(--fg-2); }
.muted { color: var(--fg-2); }
.num { font-variant-numeric: tabular-nums; }
.stack { display: grid; gap: 12px; }
.stack-lg { display: grid; gap: 20px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.sample-mark { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .02em; color: var(--ink); background: color-mix(in srgb, var(--accent) 34%, transparent); vertical-align: 1px; }
.unset { color: var(--fg-2); font-style: normal; }

/* ---------- the development banner (sample terms, test or simulated payments; never in production) ---------- */
.dev-banner {
  position: relative; z-index: 30; margin: 0; padding: 10px var(--gutter);
  font-size: 13px; line-height: 1.4; text-align: center; color: var(--ink);
  background: color-mix(in srgb, var(--accent) 30%, var(--cloud));
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 30%, transparent);
}
.dev-banner b { font-weight: var(--fw-medium); }
.dev-flag { margin-bottom: 12px; font-size: 13px; font-weight: var(--fw-medium); color: var(--navy); }

/* ---------- the layout ----------
   Phones and tablets: the intro line, the podium (first place big, second and third side by side under it; together
   at least half the screen), the button that scrolls to the price, the price box, then the list of everyone else.
   Wide screens (1100px and up): the first screen is the podium (a little over half of it) with the button under it and
   the list of everyone after third place as a vertical strip beside both; the price box is below that first screen. */
.page-founders { --chrome: 148px; --drop-h: clamp(64px, 10svh, 84px); } /* the header and the intro (its button is 44 px tall); the big button's height */
.founders-layout {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;
  width: 100%; max-width: 1760px; margin-inline: auto; padding: 4px clamp(10px, 1.2vw, 16px) 16px;
}
.founders-layout > * { min-width: 0; }
.founders-intro { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 8px; text-align: center; }
.founders-title { font-size: 13px; }
.founders-value { font-size: 15px; line-height: 1.35; color: var(--ink); }
.founders-value b { font-weight: var(--fw-medium); }
/* "what is memoe": at the top centre, a capsule you can't miss, that scrolls down to what you get and what memoe does (#about). */
.founders-what { gap: 8px; min-height: 44px; padding: 0 22px; font-size: 16px; font-weight: var(--fw-medium); text-decoration: none; }
.what-arrow { font-weight: var(--fw-regular, 400); }

.podium {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.7fr) minmax(0, 1fr);
  grid-template-areas: "first first" "second third"; gap: 10px; min-height: 50svh;
}
.podium > .featured { grid-area: first; }
.podium > [data-podium="2"] { grid-area: second; }
.podium > [data-podium="3"] { grid-area: third; }
@media (min-width: 1100px) {
  .founders-layout {
    grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 380px);
    grid-template-areas: "intro intro" "podium board" "drop board" "pay pay";
    gap: 12px; padding-top: 2px;
  }
  .founders-intro { grid-area: intro; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0 20px; text-align: left; }
  .founders-title { justify-self: start; }
  .founders-what { justify-self: center; }
  .founders-value { justify-self: end; text-align: right; }
  .podium { grid-area: podium; min-height: max(360px, calc(100svh - var(--chrome) - var(--drop-h) - 12px)); grid-template-rows: auto auto; align-content: stretch; gap: 12px; }
  .drop-button { grid-area: drop; }
  /* size containment: the list is as tall as the podium and the button beside it and scrolls inside, so it never pushes the button down */
  #leaderboard { grid-area: board; contain: size; min-height: 0; }
}

/* the one button on the first screen: it scrolls down to the price box and pulses slowly to say so */
.drop-button {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 16px;
  min-height: var(--drop-h); padding: 0 32px; border-radius: 999px;
  font-size: clamp(24px, 2.4vw, 34px); font-weight: var(--fw-medium); letter-spacing: -.01em; line-height: 1.1; text-decoration: none;
  color: var(--text-on-image); background: var(--graphite-950);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--steel) 70%, transparent), 0 18px 36px -14px color-mix(in srgb, var(--graphite-950) 55%, transparent);
  animation: drop-pulse 2.8s ease-out infinite;
  transition: background-color .2s var(--ease);
}
.drop-arrow { display: inline-block; animation: drop-nudge 1.4s ease-in-out infinite; }
.drop-button:hover { background: var(--graphite-800); animation-play-state: paused; }
.drop-button:hover .drop-arrow { animation-play-state: paused; }
.drop-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; box-shadow: 0 0 0 3px var(--white); animation: none; }
@keyframes drop-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--steel) 70%, transparent), 0 18px 36px -14px color-mix(in srgb, var(--graphite-950) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 26px color-mix(in srgb, var(--steel) 0%, transparent), 0 18px 36px -14px color-mix(in srgb, var(--graphite-950) 55%, transparent); }
}
@keyframes drop-nudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) {
  .drop-button { animation: none; box-shadow: 0 0 0 6px color-mix(in srgb, var(--steel) 42%, transparent), 0 18px 36px -14px color-mix(in srgb, var(--graphite-950) 55%, transparent); }
  .drop-arrow { animation: none; }
}
@media (forced-colors: active) { .drop-button { animation: none; border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; } .drop-arrow { animation: none; } }

/* The three place cards are badges. Each is a dark stage with a thick rim of its metal (gold, silver, bronze) and rays of light, the emblem
   of the title the place carries large at the right with the title itself on a ribbon across it (home.js `emblemTile`), and the founder's
   name and total at the left. The badge is out of the flow (it is laid over the right of the card, and the words are given room beside it),
   so it can never make a card, and with it the first screen, any taller. The metal is three or four custom properties on the card
   (`--m1` lightest to `--m4` darkest, `--rim`) that the rim, the stitching, the ribbon, the rays and the buttons all read. */
.featured, .podium-card, .badge-card {
  --m1: var(--gold-1); --m2: var(--gold-2); --m3: var(--gold-3); --m4: var(--gold-4); --rim: var(--gold-rim);
  position: relative; isolation: isolate; overflow: hidden; min-height: 0; border-radius: var(--radius-panel); color: var(--white);
  background:
    radial-gradient(46% 120% at 79% 52%, color-mix(in srgb, var(--m2) 30%, transparent), transparent 74%),
    linear-gradient(112deg, transparent 36%, color-mix(in srgb, var(--white) 6%, transparent) 45%, transparent 54%),
    linear-gradient(165deg, var(--graphite-800), var(--graphite-950) 82%);
  box-shadow: 0 34px 60px -26px color-mix(in srgb, var(--m4) 72%, var(--graphite-950)), 0 8px 18px color-mix(in srgb, var(--graphite-950) 22%, transparent);
}
.page-founders .podium-card[data-podium="2"] { --m1: var(--white); --m2: var(--mist-200); --m3: var(--mist-300); --m4: var(--slate-500); --rim: var(--mist-300); }
.page-founders .podium-card[data-podium="3"] { --m1: var(--bronze-1); --m2: var(--bronze-2); --m3: var(--bronze-3); --m4: var(--bronze-3); --rim: var(--bronze-rim); }
.featured::before, .podium-card::before, .badge-card::before { /* the metal rim */
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 4px; pointer-events: none;
  background: conic-gradient(from 215deg, var(--rim), var(--m3), var(--white), var(--m2), var(--rim), var(--m4), var(--rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
/* the stitching of a badge, inside the rim */
.featured::after, .podium-card::after, .badge-card::after {
  content: ""; position: absolute; inset: 10px; z-index: 1; border-radius: calc(var(--radius-panel) - 10px); pointer-events: none;
  border: 1.5px dashed color-mix(in srgb, var(--m2) 44%, transparent);
}
.featured > *, .podium-card > *, .badge-card > * { position: relative; z-index: 2; min-width: 0; }
.featured {
  --badge-w: clamp(220px, 31vw, 520px);
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; gap: 6px; text-align: left;
  padding: clamp(14px, min(2.2vw, 3.4svh), 32px) clamp(20px, 2.6vw, 38px);
}
.featured.has-emblem { padding-right: calc(var(--badge-w) + clamp(6px, 1vw, 16px)); }
.featured.has-photo { --badge-w: clamp(200px, 24vw, 420px); grid-template-columns: min(30%, 22svh) minmax(0, 1fr); column-gap: clamp(14px, 2vw, 30px); align-items: center; }
.featured.has-photo > .featured-photo { grid-column: 1; grid-row: 1; }
.featured.has-photo > :not(.featured-photo):not(.card-emblem) { grid-column: 2; }
.featured-text { display: grid; justify-items: start; justify-self: stretch; gap: 6px; min-width: 0; }
.featured-place { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: var(--fw-medium); letter-spacing: .18em; text-transform: uppercase; color: var(--m2); }
.featured-place::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.featured-name {
  font-size: calc(clamp(28px, min(3.9vw, 7.2svh), 68px) * var(--name-scale, 1)); font-weight: var(--title-weight); line-height: 1.02; letter-spacing: -.04em; overflow-wrap: anywhere;
  color: var(--white); text-shadow: 0 2px 0 color-mix(in srgb, var(--graphite-950) 55%, transparent), 0 0 22px color-mix(in srgb, var(--m2) 22%, transparent);
}
/* a name is at most two lines on a card (and on the badge), so the buttons under it are always on the screen; a long one is set smaller so two lines take about the room of one */
.featured-who, .podium-who { display: grid; justify-items: start; gap: 0; min-width: 0; max-width: 100%; }
.featured-who > p, .podium-who > p { margin: 0; }
.featured-name, .podium-name, .badge-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.featured-name.is-long { --name-scale: .76; }
.featured-name.is-longer { --name-scale: .56; }
.podium-name.is-long { --name-scale: .8; }
.podium-name.is-longer { --name-scale: .64; }
.featured-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-top: 0; font-size: 15px; color: var(--mist-200); }
.featured-total .num { font-size: clamp(24px, min(2.9vw, 5.2svh), 46px); font-weight: var(--title-weight); line-height: 1.05; letter-spacing: -.025em; color: var(--m1); }
.featured.is-empty .featured-name { font-size: clamp(28px, 3.6vw, 52px); }
.featured-empty { max-width: 26em; color: var(--mist-200); }
.featured-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; background: var(--m3); border: 2px solid color-mix(in srgb, var(--m1) 72%, transparent); box-shadow: 0 18px 36px color-mix(in srgb, var(--graphite-950) 50%, transparent); }
/* a video on the first-place card: the picture's place, as a button with the picture (if any) behind a play mark; it opens video-dialog.js */
.featured-play { position: relative; display: block; padding: 0; overflow: hidden; cursor: pointer; font: inherit; color: inherit; background: linear-gradient(160deg, var(--gold-3), var(--gold-2)); }
.featured-play .featured-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.play-glyph { position: absolute; inset: 0; margin: auto; display: grid; place-items: center; width: clamp(44px, 36%, 68px); aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--graphite-950) 74%, transparent); border: 2px solid color-mix(in srgb, var(--white) 70%, transparent); transition: background-color .2s var(--ease), transform .2s var(--ease); }
.play-glyph::before { content: ""; width: 34%; aspect-ratio: 1; margin-left: 8%; background: var(--white); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.featured-play:hover .play-glyph { background: var(--graphite-950); transform: scale(1.06); }
.featured-play:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .play-glyph { transition: none; } .featured-play:hover .play-glyph { transform: none; } }
@media (forced-colors: active) { .play-glyph { background: ButtonFace; border-color: ButtonText; } .play-glyph::before { background: ButtonText; } }
/* the video's dialog (video-dialog.js) and a founder's own copy of it on the receipt page and in "edit my spot" */
.video-panel { width: min(100%, 880px); justify-items: stretch; gap: 14px; }
.founder-video, .act-video { display: block; width: 100%; max-height: min(72dvh, 760px); border-radius: var(--radius-card); background: var(--graphite-950); }
.act-video { max-height: 320px; }

/* second and third: the same badge, smaller, in silver and bronze, no picture */
.podium-card {
  --badge-w: clamp(160px, 17vw, 300px);
  container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; gap: 4px;
  padding: clamp(12px, min(1.8vw, 2.6svh), 26px) clamp(16px, 1.8vw, 26px);
}
.podium-card.has-emblem { padding-right: calc(var(--badge-w) + clamp(4px, .6vw, 10px)); }
.podium-place { font-size: 13px; font-weight: var(--fw-medium); letter-spacing: .14em; text-transform: uppercase; color: var(--m2); }
.podium-name { font-size: calc(clamp(22px, min(3vw, 5.4svh), 48px) * var(--name-scale, 1)); font-weight: var(--title-weight); line-height: 1.04; letter-spacing: -.035em; overflow-wrap: anywhere; color: var(--white); text-shadow: 0 2px 0 color-mix(in srgb, var(--graphite-950) 55%, transparent); }
.podium-total { font-size: 14px; color: var(--mist-200); }
.podium-total .num { font-size: clamp(18px, 1.8vw, 26px); font-weight: var(--fw-medium); color: var(--m1); }
.podium-open { font-size: 16px; color: var(--mist-200); }

/* The badge itself (home.js `emblemTile`): rays of light, the title's emblem, the title on a ribbon, five stars and the rarity. It is laid over the
   right of the card and is a column, so the emblem takes whatever height the ribbon and the stars leave, and the ribbon is as big as the badge
   is wide: `--fit` is what one line of the title needs (a percentage of the width) and `--fit2` what two balanced lines need (board-words.js
   `titleFit`); a narrow badge takes the two-line size. The rays and sparkles move by the badge's rules above and stand still for reduced motion. */
.card-emblem {
  --badge-accent: var(--m2);
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: var(--badge-w); container-type: size; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(14px, 4.5%, 24px) 2% clamp(12px, 4%, 20px);
}
.card-rays {
  position: absolute; left: 50%; top: 40%; width: 280%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(color-mix(in srgb, var(--m2) 34%, transparent) 0 3deg, transparent 3deg 11deg);
  -webkit-mask: radial-gradient(circle closest-side, #000 0, transparent 70%); mask: radial-gradient(circle closest-side, #000 0, transparent 70%);
  animation: card-rays-turn 150s linear infinite;
}
@keyframes card-rays-turn { to { rotate: 360deg; } }
.card-emblem-art { position: relative; flex: 1 1 0; min-height: 0; max-width: 100%; aspect-ratio: 6 / 5; }
.card-emblem-art .emblem { position: absolute; inset: 0; width: 100%; height: 100%; }
.card-ribbon {
  position: relative; z-index: 2; flex: none; width: 98%; margin: -.75em 0 0; padding: .2em .8em .24em; text-align: center;
  font-size: clamp(14px, min(calc(var(--fit2, 8) * .97cqw), 10cqh), 64px); font-weight: var(--title-weight); line-height: 1; letter-spacing: -.035em; text-wrap: balance; overflow-wrap: break-word;
  color: var(--graphite-950); text-shadow: 0 1px 0 color-mix(in srgb, var(--white) 55%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--white) 70%, transparent) 0 2px, transparent 2px),
    linear-gradient(0deg, color-mix(in srgb, var(--graphite-950) 24%, transparent) 0 2px, transparent 2px),
    linear-gradient(180deg, var(--m1), var(--m2) 46%, var(--m3));
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
  filter: none;
}
@container (min-width: 330px) { .card-ribbon { font-size: clamp(14px, min(calc(var(--fit, 8) * .97cqw), 12cqh), 64px); } }
.card-emblem-caption { flex: none; display: grid; justify-items: center; gap: 5px; margin: 8px 0 0; font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .3em; text-transform: uppercase; color: var(--m2); }
.card-emblem-stars { display: inline-flex; gap: 4px; }
.card-emblem-caption .star { width: 12px; height: 12px; filter: drop-shadow(0 0 3px var(--graphite-950)); }
.card-emblem-caption { text-shadow: 0 0 6px var(--graphite-950), 0 0 2px var(--graphite-950); }
/* an open place wears its badge too, dimmed: the title is what the place is for */
.is-empty > .card-emblem { opacity: .5; filter: saturate(.55); }
@media (prefers-reduced-motion: reduce) { .card-rays { animation: none; } }

/* ---------- the motion on the three place cards (card-fx.js) ----------
   First place is on fire, second is frost, third smoulders. One decorative layer behind the rim, the badge and the words, laid over the card
   (it takes no room, so a card and the first screen are the height they were). Its pieces take the card's metal (`--m1` lightest to `--m4`
   darkest), so gold burns, silver glints and bronze glows copper with no colour of their own, and they move by transform, translate and
   opacity only: no filter, no live blur, nothing that repaints. Sizes are in the layer's own units (`cqh`, `cqw`: it is a size container), so
   the same fire fits the tall first-place card and the small ones. The words sit over the left of the card, so the layer is dimmed there to
   keep them 4.5:1 or better; the badge's side burns at full strength. Each piece has an index (`fx-i3`) and a rule here for it. */
.featured > .card-fx, .podium-card > .card-fx {
  position: absolute; inset: 0; z-index: 0; min-width: 0; border-radius: inherit; overflow: hidden; pointer-events: none; container-type: size;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .34), rgb(0 0 0 / .34) 30%, #000 60%); mask-image: linear-gradient(90deg, rgb(0 0 0 / .34), rgb(0 0 0 / .34) 30%, #000 60%);
  --flame: polygon(62% 0, 64% 8%, 67% 17%, 73% 27%, 81% 39%, 89% 53%, 95% 68%, 98% 82%, 93% 94%, 80% 100%, 20% 100%, 7% 94%, 2% 82%, 5% 68%, 12% 54%, 22% 42%, 30% 32%, 34% 22%, 42% 13%, 51% 7%, 57% 3%);
}
.card-fx > * { position: absolute; display: block; pointer-events: none; }
/* frost is light on the surface, so it lies over the badge (it takes no clicks); fire and embers are behind it */
.featured > .card-fx[data-fx="frost"], .podium-card > .card-fx[data-fx="frost"] { z-index: 3; }

/* a glow at the foot of the card that breathes (fire and embers) */
.fx-glow {
  left: -8%; right: -8%; bottom: -8cqh; height: 84cqh; transform-origin: 50% 100%;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, color-mix(in srgb, var(--m3) 74%, transparent), color-mix(in srgb, var(--fx-base, var(--m4)) 38%, transparent) 52%, transparent 78%);
  animation: fx-breathe 2.8s ease-in-out infinite;
}
.card-fx[data-fx="embers"] .fx-glow { animation-duration: 4.4s; opacity: .8; }
@keyframes fx-breathe { 0%, 100% { opacity: .58; transform: scaleY(.9); } 50% { opacity: 1; transform: scaleY(1.1); } }

/* a tongue of flame: the outer flame is the metal, from its darkest at the foot to its lightest, clear at the tip; the core (::after) is
   brighter, smaller and quicker. They waver by scale and skew from their base, each on its own beat (`--d`, `--delay`), so no two move together. */
.fx-flame {
  left: var(--x); bottom: -4cqh; width: var(--w); height: calc(var(--h) * var(--hs, 1)); transform-origin: 50% 100%; scale: var(--flip, 1) 1;
  clip-path: var(--flame); background: linear-gradient(0deg, var(--fx-base, var(--m4)), var(--m3) 22%, color-mix(in srgb, var(--m3) 90%, transparent) 46%, color-mix(in srgb, var(--m2) 70%, transparent) 68%, color-mix(in srgb, var(--m2) 24%, transparent) 88%, transparent);
  opacity: 1; animation: fx-lick calc(var(--d) * var(--ts, 1)) ease-in-out var(--delay) infinite alternate;
}
.fx-flame::after {
  content: ""; position: absolute; left: 28%; right: 28%; bottom: 0; height: 52%; transform-origin: 50% 100%;
  clip-path: var(--flame); background: linear-gradient(0deg, var(--white), var(--m1) 34%, color-mix(in srgb, var(--m1) 46%, transparent) 66%, transparent);
  animation: fx-core calc(var(--d) * .62 * var(--ts, 1)) ease-in-out var(--delay) infinite alternate;
}
.card-fx[data-fx="fire"] { --fx-base: var(--bronze-3); }
.card-fx[data-fx="embers"] { --hs: .5; --ts: 1.5; }
.card-fx[data-fx="embers"] .fx-flame { opacity: .66; }
@keyframes fx-lick {
  0% { transform: scale(.92, .84) skewX(-5deg); opacity: .62; }
  38% { transform: translateY(-2%) scale(1.04, 1.1) skewX(4deg); opacity: .9; }
  72% { transform: translateY(-1%) scale(.97, .95) skewX(-3deg); opacity: .74; }
  100% { transform: translateY(-4%) scale(1.06, 1.17) skewX(5deg); opacity: .96; }
}
@keyframes fx-core { 0% { transform: scale(.9, .8); opacity: .7; } 50% { transform: scale(1.04, 1.12); opacity: 1; } 100% { transform: scale(.95, .92); opacity: .82; } }

.fx-flame.fx-i1 { --x: -4%; --w: 26cqh; --h: 50cqh; --d: 1.5s; --delay: -.2s; }
.fx-flame.fx-i2 { --x: 9%; --w: 22cqh; --h: 40cqh; --d: 1.2s; --delay: -.9s; --flip: -1; }
.fx-flame.fx-i3 { --x: 23%; --w: 28cqh; --h: 58cqh; --d: 1.8s; --delay: -.5s; }
.fx-flame.fx-i4 { --x: 38%; --w: 30cqh; --h: 70cqh; --d: 1.4s; --delay: -1.1s; --flip: -1; }
.fx-flame.fx-i5 { --x: 54%; --w: 34cqh; --h: 84cqh; --d: 1.9s; --delay: -.3s; }
.fx-flame.fx-i6 { --x: 70%; --w: 28cqh; --h: 66cqh; --d: 1.3s; --delay: -.7s; --flip: -1; }
.fx-flame.fx-i7 { --x: 85%; --w: 30cqh; --h: 54cqh; --d: 1.6s; --delay: -1.3s; }

/* an ember: a small bright spot that leaves the foot of the card, drifts and goes out (rises by `--rise` of the card's height, sideways by `--dx`) */
.fx-ember {
  left: var(--x); bottom: 2cqh; width: var(--s); aspect-ratio: 1; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, var(--white) 0 18%, var(--m1) 38%, color-mix(in srgb, var(--m2) 40%, transparent) 62%, transparent 74%);
  animation: fx-rise calc(var(--d) * var(--ts, 1)) ease-out var(--delay) infinite;
}
@keyframes fx-rise {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  14% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--rise) * -1)) scale(.25); opacity: 0; }
}
.fx-ember.fx-i1 { --x: 8%; --s: 8px; --d: 3.1s; --delay: -.4s; --dx: 3cqw; --rise: 78cqh; }
.fx-ember.fx-i2 { --x: 17%; --s: 5px; --d: 4.2s; --delay: -2.2s; --dx: -2cqw; --rise: 92cqh; }
.fx-ember.fx-i3 { --x: 29%; --s: 7px; --d: 3.6s; --delay: -1.4s; --dx: 4cqw; --rise: 70cqh; }
.fx-ember.fx-i4 { --x: 38%; --s: 5px; --d: 4.6s; --delay: -3.3s; --dx: -3cqw; --rise: 96cqh; }
.fx-ember.fx-i5 { --x: 47%; --s: 8px; --d: 3.3s; --delay: -.9s; --dx: 2cqw; --rise: 82cqh; }
.fx-ember.fx-i6 { --x: 55%; --s: 5px; --d: 4s; --delay: -2.8s; --dx: -4cqw; --rise: 90cqh; }
.fx-ember.fx-i7 { --x: 63%; --s: 7px; --d: 3.8s; --delay: -1.9s; --dx: 3cqw; --rise: 74cqh; }
.fx-ember.fx-i8 { --x: 71%; --s: 10px; --d: 3.4s; --delay: -.2s; --dx: -2cqw; --rise: 88cqh; }
.fx-ember.fx-i9 { --x: 78%; --s: 5px; --d: 4.4s; --delay: -3.6s; --dx: 5cqw; --rise: 94cqh; }
.fx-ember.fx-i10 { --x: 85%; --s: 7px; --d: 3.2s; --delay: -1.1s; --dx: -3cqw; --rise: 72cqh; }
.fx-ember.fx-i11 { --x: 91%; --s: 8px; --d: 4.1s; --delay: -2.5s; --dx: 2cqw; --rise: 86cqh; }
.fx-ember.fx-i12 { --x: 96%; --s: 5px; --d: 3.7s; --delay: -.7s; --dx: -4cqw; --rise: 80cqh; }
.fx-ember.fx-i13 { --x: 22%; --s: 5px; --d: 4.8s; --delay: -4.1s; --dx: 3cqw; --rise: 76cqh; }
.fx-ember.fx-i14 { --x: 67%; --s: 7px; --d: 4.5s; --delay: -3s; --dx: -2cqw; --rise: 84cqh; }

/* frost (second place): a pale sheen that crosses the metal every few seconds, glints that open and close, and a slow mist at the foot */
.fx-mist {
  left: var(--x); bottom: -22cqh; width: 72cqw; height: 66cqh; opacity: .8;
  background: radial-gradient(ellipse 50% 50% at 50% 60%, color-mix(in srgb, var(--m1) 15%, transparent), color-mix(in srgb, var(--m2) 6%, transparent) 56%, transparent 74%);
  animation: fx-drift var(--d) ease-in-out var(--delay) infinite alternate;
}
@keyframes fx-drift { from { transform: translate(-7cqw, 5cqh); opacity: .5; } to { transform: translate(9cqw, -5cqh); opacity: 1; } }
.fx-mist.fx-i1 { --x: -20%; --d: 9s; --delay: -2s; }
.fx-mist.fx-i2 { --x: 22%; --d: 11s; --delay: -6s; }
.fx-mist.fx-i3 { --x: 54%; --d: 8s; --delay: -4s; }
.fx-sheen {
  top: -10%; bottom: -10%; left: 0; width: 36cqw; transform: skewX(-20deg); translate: -60cqw 0;
  background: linear-gradient(90deg, transparent 8%, color-mix(in srgb, var(--white) 58%, transparent) 30%, transparent 46%, color-mix(in srgb, var(--white) 34%, transparent) 60%, transparent 76%);
  animation: fx-sweep 7s ease-in-out infinite;
}
@keyframes fx-sweep { 0% { translate: -60cqw 0; } 36%, 100% { translate: 150cqw 0; } }
.fx-glint {
  left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; opacity: 0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  background: radial-gradient(circle, var(--white) 0 30%, var(--m1) 70%); animation: fx-twinkle var(--d) ease-in-out var(--delay) infinite;
}
@keyframes fx-twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 48% { opacity: 1; transform: scale(1) rotate(45deg); } 62% { opacity: .5; transform: scale(.7) rotate(60deg); } }
.fx-glint.fx-i1 { --x: 52%; --y: 14%; --s: 15px; --d: 3.6s; --delay: -.6s; }
.fx-glint.fx-i2 { --x: 70%; --y: 62%; --s: 11px; --d: 4.4s; --delay: -2.4s; }
.fx-glint.fx-i3 { --x: 86%; --y: 20%; --s: 13px; --d: 3.9s; --delay: -1.5s; }
.fx-glint.fx-i4 { --x: 60%; --y: 80%; --s: 9px; --d: 3.2s; --delay: -2.9s; }
.fx-glint.fx-i5 { --x: 93%; --y: 58%; --s: 10px; --d: 4.8s; --delay: -.2s; }
.fx-glint.fx-i6 { --x: 40%; --y: 44%; --s: 8px; --d: 4.1s; --delay: -3.4s; }

/* a phone: the badge is the top of the card and the words are under it, so the layer is only as tall as the badge and burns behind it, and
   the words (and the buttons) stay on the plain stage */
@media (max-width: 600px) {
  .featured > .card-fx, .podium-card > .card-fx { bottom: auto; -webkit-mask-image: linear-gradient(180deg, #000 76%, transparent); mask-image: linear-gradient(180deg, #000 76%, transparent); border-radius: var(--radius-panel) var(--radius-panel) 0 0; opacity: .85; }
  .featured > .card-fx { height: calc(clamp(150px, 52vw, 210px) + 44px); }
  .podium-card > .card-fx { height: calc(clamp(116px, 38vw, 150px) + 32px); }
}
/* reduced motion: nothing moves; the glow and the flames stay as a still picture, the embers, glints and sheen (which only exist in motion) are not drawn */
@media (prefers-reduced-motion: reduce) {
  .card-fx *, .card-fx *::after { animation: none; }
  .fx-ember, .fx-glint, .fx-sheen { display: none; }
}
@media (forced-colors: active), (prefers-contrast: more) { .card-fx { display: none; } }

/* a founder's link: a pill with the address the server made for it; opens in a new tab and says it is untrusted */
.link-pill {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; margin-top: 6px; padding: 0 16px;
  border-radius: 999px; font-size: 15px; font-weight: var(--fw-medium); color: var(--ink); text-decoration: none;
  background: color-mix(in srgb, var(--white) 56%, transparent); border: 1px solid color-mix(in srgb, var(--slate-600) 36%, transparent);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.link-pill > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.link-pill .arrow { font-size: 13px; opacity: .7; }
.link-pill:hover { background: color-mix(in srgb, var(--white) 82%, transparent); border-color: var(--graphite-800); }
.link-pill:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--white); }
/* on a place card (a dark badge) the link, the claim button and the chip are glass over the stage, edged in the card's metal */
.link-pill--first, .podium-card .link-pill { color: var(--white); background: color-mix(in srgb, var(--white) 10%, transparent); border-color: color-mix(in srgb, var(--m2) 58%, transparent); }
.link-pill--first:hover, .podium-card .link-pill:hover { background: color-mix(in srgb, var(--white) 20%, transparent); border-color: var(--m1); }
.link-pill--first:focus-visible, .podium-card .link-pill:focus-visible { outline-color: var(--m1); box-shadow: 0 0 0 3px var(--graphite-950); }
.link-pill--row { min-height: 28px; margin: 0; padding: 0 10px; font-size: 13px; }

/* ---------- choose your price: the box holds only what is typed or ticked ---------- */
.preorder-box { display: flex; flex-direction: column; width: 100%; max-width: 680px; justify-self: center; padding: clamp(22px, 3vw, 40px); scroll-margin-top: 16px; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--graphite-950) 40%, transparent), 0 6px 16px color-mix(in srgb, var(--graphite-950) 10%, transparent); }
.preorder-box .section-title { font-size: clamp(32px, 3.4vw, 48px); }
.closes-note { margin: -6px 0 0; font-size: 14px; color: var(--fg-2); }
.purchase-form { display: flex; flex-direction: column; flex: 1 1 auto; gap: 14px; }
.purchase-fields { display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 auto; gap: 14px; }
.purchase-fields > * { min-width: 0; }
.pay-agree { display: grid; gap: 8px; }
.purchase-fields > .button-primary { width: 100%; min-height: 60px; padding: 0 28px; font-size: 18px; }
.amount-quick { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.climb { display: flex; flex: 1 1 150px; min-width: 0; }
.climb-button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 48px; padding: 0 14px; border-radius: 999px; border-color: var(--graphite-800); font-variant-numeric: tabular-nums; white-space: nowrap; }
.climb-place { font-size: 14px; font-weight: var(--fw-medium); }
.climb-amount { font-size: 17px; font-weight: var(--fw-medium); }
.climb-button.is-on { color: var(--text-on-image); background: var(--graphite-800); }
.beat-note { color: var(--ink); }
.beat-note:empty { display: none; }

.amount-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 48px; height: 100%; padding: 0 14px;
  border-radius: 999px; font-size: 16px; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums;
  color: var(--ink); background: color-mix(in srgb, var(--white) 46%, transparent);
  border: 1px solid color-mix(in srgb, var(--slate-600) 40%, transparent);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
/* the title chips on the card tools: radio buttons like the amount chips, with words (so they wrap) */
.title-picker { justify-content: center; }
.title-picker-legend { width: 100%; margin: 0 0 4px; padding: 0; font-size: 13px; text-align: center; color: var(--fg-2); }
.title-picker .chip span { min-width: 0; min-height: 44px; padding: 0 14px; font-size: 14px; text-align: center; }
.chip input:checked + span { background: var(--graphite-800); border-color: var(--graphite-800); color: var(--text-on-image); }
.chip input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--white); }
@media (max-width: 480px) { .chip span { min-width: 48px; padding: 0 10px; font-size: 15px; } }
.chip:hover input:not(:checked) + span { background: color-mix(in srgb, var(--white) 75%, transparent); }

.amount-field { display: grid; gap: 8px; }
.amount-field label { font-size: 15px; font-weight: var(--fw-medium); }
.amount-input {
  display: flex; align-items: center; gap: 6px; min-height: 66px; padding: 0 20px;
  border-radius: 999px; background: var(--surface-elevated); border: 1px solid var(--mist-300);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--graphite-950) 6%, transparent);
}
.amount-input:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--white); }
.amount-input .symbol, .amount-input .code { font-size: 26px; color: var(--fg-2); }
.amount-input .code { font-size: 14px; font-weight: var(--fw-medium); letter-spacing: .04em; }
.amount-input input {
  flex: 1; width: 100%; min-width: 0; height: 62px; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 34px; font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; color: var(--ink);
}
.amount-field[data-invalid] .amount-input { border-color: var(--destructive); }

.math { display: grid; gap: 2px; padding: 14px 18px; border-radius: var(--radius-control); background: color-mix(in srgb, var(--white) 42%, transparent); }
.math div { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.math div:last-child { padding-top: 6px; margin-top: 4px; border-top: 1px solid var(--hairline); font-weight: var(--fw-medium); }

/* ---------- form rows ---------- */
.field { display: grid; gap: 6px; }
.field label, .field .label { font-size: 15px; font-weight: var(--fw-medium); }
.field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="url"], .field input[type="date"], .field input[type="number"], .field input:not([type]), .field textarea, .field input[inputmode], .field select {
  min-height: 48px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--mist-300); background: var(--surface-elevated);
  font: inherit; font-size: 17px; color: var(--ink);
}
.field textarea { min-height: 96px; padding: 12px 16px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field .hint, .amount-field .hint { font-size: 14px; color: var(--fg-2); }
.field-error, .form-error { font-size: 14px; color: var(--ink); padding-left: 12px; border-left: 3px solid var(--destructive); }
.field-error:empty, .form-error:empty { display: none; }
.field[data-invalid] input { border-color: var(--destructive); }
.code-input { letter-spacing: .35em; font-variant-numeric: tabular-nums; }

.check { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; min-height: 44px; font-size: 15px; line-height: 1.45; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--graphite-800); cursor: pointer; }
.check a { text-decoration: underline; text-underline-offset: 3px; }

.purchase-cta { display: grid; gap: 10px; justify-items: start; }
.purchase-cta .button-primary { min-height: 56px; padding: 0 32px; font-size: 17px; }
.purchase-cta { align-self: start; }
.button-primary[disabled], .button-secondary[disabled] { opacity: .55; cursor: not-allowed; }
.button-primary[aria-busy="true"] { cursor: progress; }
.link-button { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, var(--ink) 45%, transparent); }
.link-button:hover { text-decoration-color: var(--ink); }

.terms-list { display: grid; gap: 12px; }
.terms-list div { display: grid; gap: 2px; }
.terms-list dt { font-size: 14px; font-weight: var(--fw-medium); }
.terms-list dd { margin: 0; font-size: 15px; color: var(--fg-2); }

.gets { display: grid; gap: 10px; }
.gets li { position: relative; padding-left: 28px; }
.gets li::before { content: ""; position: absolute; left: 6px; top: .38em; width: 6px; height: 11px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 40deg; }
.gets.not li::before { width: 11px; height: 0; top: .72em; left: 3px; border-width: 1.5px 0 0; rotate: 0deg; }

/* ---------- the badge card: the same badge as the three place cards (their dark stage, stitching, metal rim, rays and ribbon are the rules above and
   `.card-emblem` below), stacked: the art on top, then the place, the name and the total. It is the badge on the receipt page and on the
   challenge page; badge-draw.js draws the same one for the pictures. The metal is the title's: `.metal-<name>` is the table in emblem.js
   `METALS` (a test holds the two equal), and the first three places' titles are gold, silver and bronze. ---------- */
.metal-steel { --m1: var(--mist-200); --m2: var(--glass-blue); --m3: var(--ice); --m4: var(--steel); --rim: var(--mist-200); }
.metal-ice { --m1: var(--white); --m2: var(--glass-blue); --m3: var(--ice); --m4: var(--steel); --rim: var(--white); }
.metal-blue { --m1: var(--white); --m2: var(--glass-blue); --m3: var(--active); --m4: var(--active-pressed); --rim: var(--active); }
.metal-diamond { --m1: var(--white); --m2: var(--white); --m3: var(--glass-blue); --m4: var(--ice); --rim: var(--white); }
.metal-gold { --m1: var(--gold-1); --m2: var(--gold-2); --m3: var(--gold-3); --m4: var(--gold-4); --rim: var(--gold-rim); }
.metal-silver { --m1: var(--white); --m2: var(--mist-200); --m3: var(--mist-300); --m4: var(--slate-500); --rim: var(--mist-300); }
.metal-bronze { --m1: var(--bronze-1); --m2: var(--bronze-2); --m3: var(--bronze-3); --m4: var(--bronze-3); --rim: var(--bronze-rim); }
.badge-card {
  --tilt-x: 0deg; --tilt-y: 0deg;
  display: grid; justify-items: center; align-content: start; gap: 0; width: 100%; max-width: 460px; margin: 6px auto 4px; padding: 18px 20px 24px; text-align: center;
  background:
    radial-gradient(62% 52% at 50% 40%, color-mix(in srgb, var(--m2) 30%, transparent), transparent 74%),
    linear-gradient(112deg, transparent 36%, color-mix(in srgb, var(--white) 6%, transparent) 45%, transparent 54%),
    linear-gradient(165deg, var(--graphite-800), var(--graphite-950) 82%);
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform .25s var(--ease);
}
.badge-card > .card-emblem { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1 / .94; margin-top: 2px; }
.badge-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding-inline: 4px; }
.badge-logo { height: 24px; width: auto; }
.badge-label { font-size: 12px; letter-spacing: .16em; line-height: 1.35; text-align: right; text-wrap: balance; color: var(--mist-300); }
@media (max-width: 480px) { .badge-label { font-size: 11px; letter-spacing: .12em; } }
.badge-words { display: grid; justify-items: center; gap: 4px; width: 100%; min-width: 0; padding: 4px 6px 0; }
.badge-words > p { margin: 0; }
.badge-place { font-size: 12px; font-weight: var(--fw-medium); letter-spacing: .18em; text-transform: uppercase; color: var(--m2); }
.badge-name { max-width: 100%; font-size: calc(clamp(26px, 8vw, 34px) * var(--name-scale, 1)); font-weight: var(--fw-medium); line-height: 1.1; letter-spacing: -.01em; color: var(--white); overflow-wrap: anywhere; } /* a long name takes two lines and is set smaller, never more */
.badge-name.is-long { --name-scale: .84; }
.badge-name.is-longer { --name-scale: .68; }
.badge-total { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 10px; font-size: 14px; color: var(--mist-200); }
.badge-total .num { font-size: clamp(34px, 9vw, 44px); font-weight: var(--title-weight); line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--m1); }
.emblem { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 18px color-mix(in srgb, var(--badge-accent, var(--m2)) 52%, transparent)); }
.emblem-rays { transform-origin: 120px 100px; animation: emblem-spin 120s linear infinite; }
@keyframes emblem-spin { to { transform: rotate(360deg); } }
.emblem-sparkle { animation: emblem-twinkle 3.2s ease-in-out infinite; }
.emblem-sparkle.sparkle-1 { animation-delay: -1.1s; }
.emblem-sparkle.sparkle-2 { animation-delay: -2.2s; }
@keyframes emblem-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.star { width: 13px; height: 13px; background: color-mix(in srgb, var(--badge-accent, var(--m2)) 24%, transparent); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.star.on { background: var(--badge-accent, var(--m2)); }
@media (prefers-reduced-motion: reduce) { .badge-card { transition: none; transform: none; } .emblem-rays, .emblem-sparkle { animation: none; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .badge-card { background: var(--graphite-950); box-shadow: 0 0 0 1px var(--m2); }
}
@media (forced-colors: active) {
  .badge-card { background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow: none; }
  .badge-card::before, .badge-card::after { display: none; }
  .emblem { filter: none; }
  .star, .star.on { background: CanvasText; }
  .badge-label, .badge-place, .badge-name, .badge-total, .badge-total .num { color: CanvasText; background: none; }
  .featured, .podium-card { background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow: none; }
  .featured::before, .featured::after, .podium-card::before, .podium-card::after, .card-rays { display: none; }
  .featured-name, .featured-total .num, .featured-place, .featured-total, .featured-empty, .podium-name, .podium-place, .podium-total, .podium-total .num, .podium-open, .featured-refs, .podium-refs, .card-emblem-caption { color: CanvasText; background: none; text-shadow: none; }
  .card-ribbon { color: CanvasText; background: Canvas; border: 1px solid CanvasText; clip-path: none; text-shadow: none; }
  .featured-share { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; box-shadow: none; }
  .claim-button, .link-pill--first, .podium-card .link-pill { color: ButtonText; background: ButtonFace; border-color: ButtonText; }
}
@media (prefers-contrast: more) {
  .featured, .podium-card { background: var(--graphite-950); box-shadow: 0 0 0 1px var(--m2); }
  .card-rays { display: none; }
  .featured-total, .featured-empty, .podium-total, .podium-open, .featured-refs, .podium-refs { color: var(--white); }
}

/* ---------- the leaderboard ---------- */
.board { display: flex; flex-direction: column; flex: 1 0 auto; }
/* rank, name, total, and the narrow count of referrals: the last column is a fixed width so the totals and the counts line up in every row (and under the header) */
.board-row, .board-cols { display: grid; grid-template-columns: 28px 48px minmax(0, 1fr) auto 2.1rem; gap: 4px 10px; align-items: start; }
.board-row { flex: 1 0 auto; align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--hairline); }
.board-row:last-child { border-bottom: 0; }
.board-rank { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--fg-2); }
/* the emblem of the title under the name: small and still, drawn from one shared sprite (emblem-view.js), so a long list stays light */
.board-emblem { display: grid; place-items: center; width: 48px; height: 40px; border-radius: 11px; overflow: hidden; background: radial-gradient(70% 70% at 50% 46%, color-mix(in srgb, var(--ice) 26%, transparent), transparent 80%), linear-gradient(172deg, var(--graphite-800), var(--graphite-950)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 14%, transparent); }
.board-row.is-open .board-emblem { background: none; box-shadow: none; }
.emblem--mini { width: 46px; height: auto; filter: none; }
.emblem-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.board-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; font-size: 16px; overflow-wrap: anywhere; }
.board-row.is-open .board-rank, .board-row.is-open .board-name { color: var(--fg-2); }
/* the title this total has earned, under the name */
.board-role { flex: 1 0 100%; font-size: 13px; line-height: 1.25; color: var(--fg-2); }
.board-total { font-size: 16px; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; text-align: right; }
.board-refs { font-size: 16px; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; text-align: right; }
.board-refs.is-none { font-weight: var(--fw-regular, 400); color: var(--fg-2); }
.board-cols { position: sticky; top: 0; z-index: 1; padding: 2px 2px 4px; font-size: 11px; line-height: 1.2; letter-spacing: .04em; color: var(--fg-2); border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--mist-100) 82%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.board-cols abbr { grid-column: 5; text-align: right; text-decoration: none; cursor: help; }
/* the list's column is narrow: a little wider from 1360 px up (room for the emblem chips), and compact rows in the narrowest window that still has the column beside the podium */
@media (min-width: 1360px) { .founders-layout { grid-template-columns: minmax(0, 1fr) clamp(360px, 26vw, 430px); } }
@media (min-width: 1100px) and (max-width: 1279px) {
  .board-row, .board-cols { grid-template-columns: 22px 34px minmax(0, 1fr) auto 1.9rem; gap: 4px 6px; }
  .board-emblem { width: 34px; height: 30px; border-radius: 9px; }
  .emblem--mini { width: 33px; }
  .board-total, .board-refs, .board-name { font-size: 15px; }
}
/* "3 referrals" under a top-three total, only when there is someone */
.featured-refs { margin: 2px 0 0; font-size: 15px; font-weight: var(--fw-medium); color: var(--mist-200); }
.podium-refs { margin: 0; font-size: 13px; font-weight: var(--fw-medium); color: var(--mist-200); }
#leaderboard { display: flex; flex-direction: column; min-height: 0; padding: clamp(16px, 1.8vw, 22px); }
@media (min-width: 1100px) { #leaderboard { contain: size; overflow: hidden; } #leaderboard .board-area { max-height: none; flex: 1 1 0; } }
#leaderboard .section-title { margin: 0; font-size: clamp(22px, 2vw, 28px); }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.board-note { flex: none; margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: var(--fg-2); }
.share-open { flex: none; min-width: 72px; padding-inline: 18px; }
.board-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.share-open[hidden], .share-dialog [hidden] { display: none; }
/* the same "share" on the first-place card: a big dark pill on the gold, beside the founder's link when there is one */
.featured-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 10px; }
.featured-actions .link-pill { margin-top: 0; }
.featured-share { min-height: 52px; padding-inline: 32px; font-size: 17px; color: var(--graphite-950); background: linear-gradient(180deg, var(--m1), var(--m2) 50%, var(--m3)); box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--m2) 55%, transparent), inset 0 1px 0 color-mix(in srgb, var(--white) 70%, transparent); }
.featured-share:hover { background: linear-gradient(180deg, var(--white), var(--m1) 50%, var(--m2)); }
.featured-share:focus-visible { outline-color: var(--m1); box-shadow: 0 0 0 3px var(--graphite-950); }
.featured-share[hidden] { display: none; }
/* "claim $46" on the three cards: a quiet pill, in the same glass-on-metal look as the link pill, so the big dark "share" and the page's one big button stay the loudest things. */
.claim-button { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--white); background: color-mix(in srgb, var(--white) 10%, transparent); border: 1px solid color-mix(in srgb, var(--m2) 58%, transparent); cursor: pointer; }
.claim-button::after { content: ""; position: absolute; inset: -2px 0; }
.claim-button:hover { background: color-mix(in srgb, var(--white) 20%, transparent); border-color: var(--m1); }
.claim-button:focus-visible { outline: 2px solid var(--m1); outline-offset: 3px; box-shadow: 0 0 0 3px var(--graphite-950); }
.claim-amount { font-weight: var(--fw-medium); }
.featured-actions .claim-button { margin-top: 0; }
/* a short window (a small laptop): tighter gaps and a slimmer share button, so the first screen still reaches the big button */
@media (min-width: 1100px) and (max-height: 680px) {
  .founders-layout { gap: 8px; }
  .podium { gap: 8px; }
  .featured-actions { margin-top: 6px; }
  .featured-share { min-height: 46px; padding-inline: 26px; font-size: 16px; }
  .podium-card .claim-button { margin-top: 2px; }
}
/* a short window (720 px and under): the title stays big but the name and the total share a line, and second and third lose their small emblem and
   their quiet "claim" pill (the first card keeps its own, beside share, at no cost in height), because the first screen must reach the big
   button; typing an amount says the same thing as a pill */
@media (min-width: 1100px) {
  .featured-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; } /* first place: the name and the total share a line */
}
@media (min-width: 1100px) and (max-height: 720px) {
  .podium-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
  .podium-card .claim-button { display: none; }
  .podium-card .card-emblem-caption { display: none; }
  .podium-card { gap: 2px; }
}
.board-area { display: flex; flex-direction: column; min-height: 0; max-height: min(52vh, 440px); overflow-y: auto; overscroll-behavior: contain; }
.board-area:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.board-more { justify-self: center; margin-top: 14px; }
.state { display: grid; gap: 10px; justify-items: start; padding: 8px 0; }
.state p { color: var(--fg-2); }
.skeleton { display: grid; gap: 12px; }
.skeleton span { display: block; height: 18px; border-radius: 9px; background: color-mix(in srgb, var(--slate-600) 14%, transparent); }
.skeleton span:nth-child(2) { width: 82%; }
.skeleton span:nth-child(3) { width: 64%; }


/* ---------- status lines ---------- */
.notice { display: grid; gap: 6px; padding: 14px 18px; border-radius: var(--radius-control); background: color-mix(in srgb, var(--white) 52%, transparent); border-left: 3px solid var(--steel); }
.notice[data-tone="warn"], .notice[data-tone="error"] { border-left-color: var(--destructive); }
.notice[data-tone="ok"] { border-left-color: var(--navy); }
.notice p { color: var(--fg); }
.notice:empty { display: none; }

/* ---------- tables and sharing (moderation, the confirmation page) ---------- */
.status-word { font-weight: var(--fw-medium); }
.history { width: 100%; border-collapse: collapse; font-size: 15px; }
.history th { padding: 0 8px 8px; text-align: left; font-size: 13px; font-weight: var(--fw-medium); color: var(--fg-2); border-bottom: 1px solid var(--hairline); }
.history td { padding: 10px 8px; border-bottom: 1px solid var(--hairline); vertical-align: top; font-variant-numeric: tabular-nums; }
.history td:first-child, .history th:first-child { padding-left: 0; }
.history .money { text-align: right; white-space: nowrap; }
.history-wrap { overflow-x: auto; }
.history td { overflow-wrap: anywhere; }
/* the first-place picture: the buyer's own (confirmation page) and the moderation queue */
.photo-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; }
.photo-thumb { width: 120px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; background: var(--mist-200); }
.queue { display: grid; gap: 16px; }
.queue-item { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .queue-item { grid-template-columns: 220px minmax(0, 1fr); } }
.queue-item img { width: 100%; max-width: 220px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; background: var(--mist-200); }
.queue-video { display: block; width: 100%; max-height: 440px; border-radius: 16px; background: var(--graphite-950); }
@media (min-width: 720px) { .queue-item:has(> .queue-video) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.share-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }

/* ---------- the confirmation page: the badge, the picture for first place, the link ---------- */
/* The page is short: a wide panel with what the founder can add on the left (a picture, a link) and the badge with its two
   buttons on the right; a buyer with nothing to add gets the badge alone, centered. On a phone it is one column in that order. */
.page-confirm .page > * { max-width: 1060px; }
.page-confirm .panel { padding: clamp(20px, 3vw, 36px); }
.page-confirm .page-title { font-size: clamp(30px, 3.6vw, 46px); }
.page-confirm .panel .lede { margin-top: 10px; max-width: 40em; font-size: clamp(17px, 1.5vw, 20px); }
.page-confirm [data-confirm-body] { gap: 20px; margin-top: 18px; }
.page-confirm .panel-actions { margin-top: 18px; }
.confirm-grid { display: grid; gap: 20px; align-items: start; justify-items: center; }
.confirm-main { display: grid; gap: 14px; width: 100%; }
.confirm-side { display: grid; gap: 10px; width: 100%; max-width: 520px; }
.confirm-side .badge-card { margin-block: 6px 0; }
.confirm-side .share-actions { justify-content: center; }
@media (min-width: 900px) {
  .confirm-grid.has-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; justify-items: stretch; }
  .confirm-grid.has-actions .confirm-side { justify-self: end; }
}
/* what the founder can add: a quiet card with a short title and the field, nothing else */
.act { display: grid; gap: 12px; padding: 16px 18px; border-radius: var(--radius-card); background: color-mix(in srgb, var(--white) 52%, transparent); border: 1px solid color-mix(in srgb, var(--slate-600) 22%, transparent); }
.act-title { font-size: 18px; font-weight: var(--fw-medium); line-height: 1.2; letter-spacing: -.01em; }
/* the referral call to action: dark so nothing else near it competes, with the gold rim of the first-place card (the one place
   warm colour is not a photograph); the thank-you on the left and the link on the right where there is room */
.referral { display: grid; gap: 16px; padding: clamp(18px, 2.6vw, 28px); border-radius: var(--radius-panel); color: var(--text-on-image); background: var(--graphite-950); box-shadow: inset 0 0 0 1.5px var(--gold-3), 0 26px 50px -22px color-mix(in srgb, var(--graphite-950) 62%, transparent); }
.referral-copy, .referral-act { display: grid; gap: 10px; align-content: center; min-width: 0; }
@media (min-width: 900px) { .referral { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } }
.referral-title { margin: 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: var(--title-weight); line-height: 1.12; letter-spacing: -.025em; overflow-wrap: anywhere; }
.referral-text { margin: 0; font-size: 16px; line-height: 1.45; color: var(--mist-100); }
.referral-link { display: flex; flex-wrap: wrap; gap: 10px; }
.referral-url { flex: 1 1 220px; min-width: 0; min-height: 52px; padding: 0 20px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--white) 34%, transparent); background: color-mix(in srgb, var(--white) 10%, transparent); color: var(--text-on-image); font: inherit; font-size: 17px; text-overflow: ellipsis; }
.referral-url:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }
.button-light, .button-ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; font: inherit; font-size: 17px; font-weight: var(--fw-medium); cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.button-light { border: 0; color: var(--graphite-950); background: var(--white); }
.button-light:hover { background: var(--gold-1); }
.button-ghost { color: var(--text-on-image); background: transparent; border: 1.5px solid color-mix(in srgb, var(--white) 55%, transparent); }
.button-ghost:hover { background: color-mix(in srgb, var(--white) 14%, transparent); border-color: var(--white); }
.button-light:focus-visible, .button-ghost:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; }
.referral-status { margin: 0; min-height: 1.4em; font-size: 15px; color: var(--gold-1); }
.referral-count { margin: 0; font-size: 16px; font-weight: var(--fw-medium); }
.referral-fine { margin: 0; font-size: 13px; line-height: 1.45; color: var(--mist-300); }
/* the picture field: a small picture (or a plus) and what it says, in one line */
.drop { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; border-radius: var(--radius-card); cursor: pointer; border: 1.5px dashed var(--slate-600); background: color-mix(in srgb, var(--white) 46%, transparent); transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.drop:hover, .drop:focus-within { background: color-mix(in srgb, var(--white) 74%, transparent); border-color: var(--graphite-800); }
.drop:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.drop-title { min-width: 0; font-size: 17px; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.drop-thumb-host { display: grid; flex: none; }
.drop-thumb { display: grid; place-items: center; width: 56px; height: 70px; object-fit: cover; border-radius: 12px; background: var(--mist-200); font-size: 28px; font-weight: var(--fw-regular); color: var(--graphite-800); }
.link-form { display: flex; flex-wrap: wrap; gap: 8px; }
.link-form input { flex: 1 1 220px; min-width: 0; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--mist-300); background: var(--surface-elevated); font: inherit; font-size: 17px; color: var(--ink); }
.link-form input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- the simulated checkout (local development only) ---------- */
.dev-checkout .panel-actions form { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .chip span { transition: none; }
}

/* ---------- phones: first place, second and third smaller, the button, the price (big), then the list ---------- */
@media (max-width: 600px) {
  .founders-layout { gap: 10px; }
  .founders-value { font-size: 14px; }
  /* the badges are tall, so the rows take what each card needs (no stretched empty space under the buttons) */
  .podium { gap: 8px; min-height: 0; grid-template-rows: auto auto; }
  .featured { padding: 14px 16px; gap: 3px; }
  .featured-place::before { display: none; }
  .featured-place { font-size: 12px; letter-spacing: .16em; }
  /* a name stays the biggest thing under the badge: a long one wraps to two lines at a smaller size, not one line at a tiny one */
  .featured-name { font-size: calc(30px * var(--name-scale, 1)); }
  .featured-name.is-long { --name-scale: .86; }
  .featured-name.is-longer { --name-scale: .7; }
  .featured-total { margin-top: 0; font-size: 13px; }
  .featured-total .num { font-size: 22px; }
  .featured.has-photo { grid-template-columns: min(34%, 24svh) minmax(0, 1fr); column-gap: 14px; }
  .featured-text { gap: 3px; }
  .featured-actions { gap: 8px; margin-top: 6px; }
  .featured-share { min-height: 48px; padding-inline: 26px; font-size: 16px; }
  .featured-photo { border-radius: 14px; }
  .link-pill { min-height: 40px; margin-top: 4px; padding: 0 14px; font-size: 14px; }
  .podium-card { padding: 12px 14px; gap: 2px; }
  .podium-place { font-size: 12px; }
  .podium-name { font-size: calc(22px * var(--name-scale, 1)); }
  .podium-total > span:last-child, .podium-card .link-pill .arrow { display: none; }
  .podium-total .num { font-size: 17px; }
  /* phones: the badge is the top of each card, in the flow, full width; the words come under it (the ribbon's title is sized by the badge's width) */
  .featured.has-emblem, .podium-card.has-emblem { padding-right: 16px; }
  .podium-card.has-emblem { padding-right: 14px; }
  .featured > .card-emblem, .podium-card > .card-emblem { position: relative; inset: auto; width: 100%; height: clamp(150px, 52vw, 210px); margin-bottom: 2px; }
  .podium-card > .card-emblem { height: clamp(116px, 38vw, 150px); }
  .featured.has-photo > .card-emblem { grid-column: 1 / -1; grid-row: 1; }
  .featured.has-photo > .featured-photo { grid-row: 2; }
  .featured.has-photo > :not(.featured-photo):not(.card-emblem) { grid-row: 2; }
  .card-emblem-caption { display: none; }
  .claim-button { min-height: 40px; margin-top: 4px; padding: 0 12px; gap: 6px; font-size: 14px; }
  .claim-button::after { inset: -2px 0; }
  .drop-button { --drop-h: 72px; padding: 0 20px; font-size: 24px; }
  .preorder-box { padding: 20px; margin-top: 6px; }
  .climb-button { padding: 0 10px; }
  .climb-amount { font-size: 16px; }
  .amount-input { min-height: 68px; }
  .amount-input input { height: 64px; font-size: 36px; }
  .button-light, .button-ghost { flex: 1 1 100%; }
}

/* ---------- the film beside the price box (assets/founders/film.js) ---------- */
/* The price box and the film are one row (`.pay-row`, the grid's "pay" area). The film is a portrait video on a frost panel that
   starts, without sound, when it is scrolled to; the browser's own controls turn the sound on. On a phone it comes after the
   price box, no taller than most of the screen. */
.pay-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
/* What you get and what memoe does (#about): on a phone it comes before the price box, on a wide screen it is on its left. */
.about-box { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 2.6vw, 34px); scroll-margin-top: 16px; }
/* three levels: a small tracked label, one large light headline, then plain lines; the icons are outline strokes in a quiet round chip */
.about-eyebrow { margin: 0; font-size: 13px; font-weight: var(--fw-medium); letter-spacing: .14em; color: var(--fg-2); }
.about-title { margin: 0; font-size: clamp(32px, 3.1vw, 44px); font-weight: var(--title-weight); line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.about-does { display: grid; gap: 10px; margin: 6px 0 0; padding: 0; list-style: none; }
.about-does li { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: var(--fw-medium); line-height: 1.25; color: var(--ink); }
.about-icon { flex: none; box-sizing: content-box; width: 22px; height: 22px; padding: 9px; border-radius: 50%; fill: none; stroke: var(--graphite-950); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; background: color-mix(in srgb, var(--white) 62%, transparent); border: 1px solid color-mix(in srgb, var(--slate-600) 22%, transparent); }
.about-more { justify-self: start; font-size: 15px; }
.about-get-title { margin-top: 10px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--graphite-950) 12%, transparent); }
.about-get { display: grid; gap: 0; margin: 0; }
.about-get > div { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--graphite-950) 10%, transparent); }
.about-get > div:last-child { border-bottom: 0; }
.about-get dt { font-size: 17px; font-weight: var(--fw-medium); line-height: 1.25; color: var(--ink); }
.about-get dd { margin: 0; font-size: 14px; line-height: 1.4; color: var(--fg-2); }
.about-fine { margin: 0; font-size: 13px; line-height: 1.45; color: var(--fg-2); }
.about-fine a { color: inherit; text-underline-offset: 3px; }
.film { display: grid; gap: 8px; align-content: start; justify-self: center; width: 100%; max-width: 420px; margin: 0; padding: 10px; border-radius: var(--radius-panel); }
.film-video { display: block; width: 100%; height: auto; max-height: 78svh; aspect-ratio: 9 / 16; object-fit: contain; border-radius: calc(var(--radius-panel) - 10px); background: var(--graphite-950); }
.film-video a { color: var(--text-on-image); }
.film-note { margin: 0; padding: 0 8px 4px; font-size: 13px; line-height: 1.4; color: var(--fg-2); }
@media (min-width: 1100px) {
  .pay-row {
    grid-area: pay; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-areas: "about price" "film film";
    width: 100%; max-width: 1240px; justify-self: center; align-items: stretch; gap: clamp(20px, 3vw, 44px);
    margin-block: clamp(32px, 9svh, 96px) clamp(16px, 4svh, 48px);
  }
  .about-box { grid-area: about; }
  .preorder-box { grid-area: price; }
  .film { grid-area: film; max-width: 380px; }
}
/* wide enough for all three side by side: what you get, the price box, the film */
@media (min-width: 1360px) {
  .pay-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, .95fr); grid-template-areas: "about price film"; max-width: 1500px; }
  /* the three panels are one height (the row stretches them); the film sits in the middle of its panel */
  .film { max-width: none; align-content: center; }
}

/* ---------- the footer on the founding edition pages ---------- */
/* as wide as the page's own content, so it reads as the foot of the page and not a small card under the price box */
.page-founders .site-footer { padding-inline: clamp(10px, 1.2vw, 16px); }
.page-founders .footer-panel { max-width: 1760px; }

/* ---------- the share picture ---------- */
/* "share" above the leaderboard opens a dialog with the picture (share.js draws it, share-ui.js runs the dialog). The panel is the
   site's glass, like the waitlist dialog's: a full-window dialog with the panel in the middle, so a tap on the space around it closes it. */
.share-dialog {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; overflow: hidden; background: transparent; color: var(--ink);
}
.share-dialog[open] {
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.share-dialog::backdrop {
  background: color-mix(in srgb, var(--graphite-950) 40%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.share-panel {
  --glass-under: color-mix(in srgb, var(--cloud) 68%, transparent);
  display: grid; gap: 14px; justify-items: center; align-content: start;
  width: min(100%, 520px); max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(16px, 3vw, 24px); border-radius: var(--radius-panel);
}
.share-title { margin: 0; justify-self: start; font-size: clamp(22px, 2.4vw, 28px); font-weight: 300; letter-spacing: -.01em; }
.share-stage { display: grid; justify-items: center; gap: 8px; width: 100%; min-height: 3.2em; }
.share-preview {
  display: block; width: auto; height: auto; max-width: 100%; max-height: min(62dvh, 640px);
  border-radius: var(--radius-card); box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--graphite-950) 60%, transparent);
}
.share-note { margin: 0; min-height: 1.4em; text-align: center; font-size: var(--fs-body); color: var(--fg-2); }
/* "highlight your place": the founder types their email and the picture marks their own spot (share-mine.js). */
.share-mine { display: flex; gap: 10px; width: 100%; align-items: center; }
.share-mine .spot-input { flex: 1 1 auto; min-width: 0; min-height: 48px; font-size: 16px; padding-inline: 18px; }
.share-mine .button-secondary { flex: 0 0 auto; min-width: 0; padding-inline: 20px; }
.share-mine-note { margin: -6px 0 0; min-height: 1.2em; width: 100%; text-align: left; color: var(--fg-2); }
.share-panel .share-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
/* "make my card" (after a founder is found) swaps the leaderboard picture for their own card and its tools (card.js). */
.share-card-button { justify-self: stretch; }
.share-dialog[data-mode="card"] .share-mine, .share-dialog[data-mode="card"] .share-mine-note, .share-dialog[data-mode="card"] .share-card-button { display: none; }
.share-dialog[data-mode="card"] .share-preview { max-height: min(38dvh, 420px); }
.share-panel .card-tools { display: grid; gap: 12px; justify-items: center; width: 100%; }
.share-panel .title-picker { justify-content: center; }
/* "edit my spot": the same dialog, left-aligned and wide enough for the picture's preview (spot.js, manage.js). */
.spot-panel { justify-items: stretch; width: min(100%, 600px); gap: 16px; }
.spot-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.spot-close { min-width: 0; padding-inline: 18px; }
.spot-stage { display: grid; gap: 16px; }
.spot-input { width: 100%; min-height: 52px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--mist-300); background: var(--surface-elevated); font: inherit; font-size: 18px; color: var(--ink); }
.spot-input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.spot-input:disabled { opacity: .6; }
.spot-panel .featured--preview { max-width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .share-dialog[open] .share-panel { animation: share-in .3s var(--ease); }
}
@keyframes share-in { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .share-dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- the other boards: tabs, the "today" chip on first place, their lists, and the country dialog ---------- */
/* boards.js and countries.js build everything here. Same glass, the same metals and the same pills as the rest of the page. */
.board-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: none; margin: 0 0 8px; }
.board-tab[hidden] { display: none; }
/* all time and today are one switch (all time first, and the page opens on it); newest and referrals are tabs beside it */
.board-toggle { display: inline-flex; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--graphite-950) 7%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--graphite-950) 14%, transparent); }
.board-toggle .board-tab { min-height: 32px; padding: 0 15px; font-size: 14px; background: transparent; border-color: transparent; }
.board-toggle .board-tab:hover { background: color-mix(in srgb, var(--white) 66%, transparent); border-color: transparent; }
.board-toggle .board-tab[aria-pressed="true"] { background: var(--graphite-950); border-color: var(--graphite-950); box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--graphite-950) 70%, transparent); }
.board-tab {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 8px; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: var(--fw-medium); line-height: 1; color: var(--graphite-950); cursor: pointer;
  background: color-mix(in srgb, var(--white) 40%, transparent); border: 1px solid color-mix(in srgb, var(--graphite-950) 18%, transparent);
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.board-tab::after { content: ""; position: absolute; inset: -5px -2px; } /* a 44 px tap area */
.board-tab:hover { background: color-mix(in srgb, var(--white) 72%, transparent); border-color: color-mix(in srgb, var(--graphite-950) 42%, transparent); }
.board-tab[aria-pressed="true"] { background: var(--graphite-950); border-color: var(--graphite-950); color: var(--white); }
.board-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .board-tab { transition: none; } }
@media (forced-colors: active) { .board-tab { border-color: ButtonText; } .board-tab[aria-pressed="true"] { background: Highlight; color: HighlightText; border-color: Highlight; } }

/* "larpiest countries": the leading country's flag, big, under the leaderboard's title, on the gold the leader has everywhere on the page. One tap opens
   the map and the ranking (countries.js). Hidden until a country leads. */
.country-banner {
  position: relative; isolation: isolate; overflow: hidden; flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 14px;
  grid-template-areas: "eyebrow eyebrow go" "flag name name" "flag line line" "flag tag tag";
  width: 100%; margin: 6px 0 12px; padding: 12px 14px 12px 14px; border: 0; border-radius: var(--radius-card); font: inherit; text-align: left; color: var(--graphite-950); cursor: pointer;
  background:
    linear-gradient(112deg, transparent 34%, color-mix(in srgb, var(--white) 34%, transparent) 44%, color-mix(in srgb, var(--white) 8%, transparent) 52%, transparent 60%),
    radial-gradient(90% 120% at 6% 0%, color-mix(in srgb, var(--white) 58%, transparent), transparent 62%),
    linear-gradient(145deg, var(--gold-1) 0%, var(--gold-2) 32%, var(--gold-3) 60%, var(--gold-2) 82%, var(--gold-4) 100%);
  box-shadow: 0 18px 30px -18px color-mix(in srgb, var(--gold-4) 80%, var(--graphite-950)), 0 3px 10px color-mix(in srgb, var(--graphite-950) 14%, transparent);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.country-banner[hidden] { display: none; }
.country-banner::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 215deg, var(--gold-rim), var(--gold-3), var(--white), var(--gold-2), var(--gold-rim), var(--gold-4), var(--gold-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.country-banner > * { position: relative; z-index: 2; min-width: 0; }
.country-banner:hover { transform: translateY(-1px); box-shadow: 0 22px 34px -18px color-mix(in srgb, var(--gold-4) 80%, var(--graphite-950)), 0 4px 12px color-mix(in srgb, var(--graphite-950) 16%, transparent); }
.country-banner:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--white); }
.country-banner-flag { grid-area: flag; display: grid; place-items: center; min-width: 56px; }
.country-banner-eyebrow { grid-area: eyebrow; align-self: center; font-size: 11px; font-weight: var(--fw-medium); letter-spacing: .16em; text-transform: uppercase; color: var(--graphite-800); }
.country-banner-name { grid-area: name; font-size: clamp(24px, 2.2vw, 30px); font-weight: var(--title-weight); line-height: 1.04; letter-spacing: -.035em; overflow-wrap: anywhere; text-shadow: 0 1px 0 color-mix(in srgb, var(--white) 50%, transparent); }
.country-banner-line { grid-area: line; font-size: 13px; line-height: 1.3; color: var(--graphite-800); }
/* the country takeover: one quiet button under the banner, and its dialog (takeover.js) */
.takeover-offer { margin: -4px 0 0; }
.takeover-offer[hidden] { display: none; }
.takeover-open { min-height: 44px; font-size: 14px; }
.takeover-panel { justify-items: stretch; width: min(100%, 560px); gap: 14px; max-height: calc(100dvh - 32px); overflow-y: auto; }
.takeover-stage { display: grid; gap: 14px; min-width: 0; }
.takeover-form { gap: 14px; }
.takeover-form .field select { width: 100%; }
.takeover-top-note { color: var(--fg-2); }
.takeover-total { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 15px; color: var(--fg-2); }
.takeover-total-amount { font-size: 26px; font-weight: var(--fw-medium); letter-spacing: -.02em; color: var(--ink); }
.takeover-when { margin: 0; }
.takeover-note { margin: 0; }
.takeover-confirm { max-width: 640px; }
.countries-toggle { justify-self: start; }
.countries-body { display: grid; gap: 16px; min-width: 0; }
.country-banner-tag { grid-area: tag; justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 10px 2px 7px; border-radius: 999px; font-size: 12px; font-weight: var(--fw-medium); line-height: 1.3; color: var(--graphite-950); background: color-mix(in srgb, var(--white) 38%, transparent); border: 1px solid color-mix(in srgb, var(--graphite-950) 36%, transparent); }
.country-banner-tag[hidden] { display: none; }
.flag--tag { font-size: 14px; }
.flag--tag.is-code { font-size: 9px; min-width: 1.9em; }
.country-banner-go { grid-area: go; justify-self: end; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: var(--fw-medium); color: var(--white); background: color-mix(in srgb, var(--graphite-950) 88%, transparent); }
.country-banner-go::after { content: " \2192"; }
@media (prefers-reduced-motion: reduce) { .country-banner { transition: none; } .country-banner:hover { transform: none; } }
@media (forced-colors: active) { .country-banner { background: ButtonFace; color: ButtonText; border: 2px solid ButtonText; box-shadow: none; } .country-banner::before { display: none; } .country-banner-go { background: ButtonText; color: ButtonFace; } }
/* a flag: the country's emoji, or (where the browser has no flag emoji) its code on a plate */
.flag { display: inline-block; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.flag--banner { font-size: 52px; filter: drop-shadow(0 3px 5px color-mix(in srgb, var(--graphite-950) 28%, transparent)); }
.flag--leader { font-size: .8em; margin-right: .2em; vertical-align: -.06em; }
.flag--row { font-size: 20px; }
.flag.is-code { display: inline-grid; place-items: center; min-width: 1.7em; padding: .28em .4em; border-radius: .3em; font-family: var(--font); font-size: .42em; font-weight: var(--fw-medium); letter-spacing: .08em; color: var(--white); background: var(--graphite-950); }
.flag--banner.is-code { font-size: 22px; min-width: 56px; }
.flag--leader.is-code { font-size: .3em; vertical-align: .3em; }
.flag--row.is-code { font-size: 11px; }

/* the lists for today, referrals and newest: a number, who (and a quiet line), and the value the board is ranked by */
.board-row--side, .board-cols--side { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 10px; }
.board-row--side { flex: 0 0 auto; padding-block: 12px; }
.board-row--side .board-rank { white-space: nowrap; }
.board-cols--side span:last-child { grid-column: 3; text-align: right; }

/* the small pulsing "today" chip on the first-place card: today's leader, one tap to today's board. It takes the height of the place line
   and a little more; its ring breathes slowly (still under reduced motion, and while the pointer is on it). */
.featured-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; width: 100%; min-width: 0; margin-block: -3px; }
.today-chip {
  position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 26px; max-width: 100%; padding: 0 11px 0 9px; border-radius: 999px;
  margin-block: -5px; /* 26 px tall, but it takes the room of the place line beside it (about 16 px), so the card is no taller for it */
  font: inherit; font-size: 12px; font-weight: var(--fw-medium); letter-spacing: .02em; line-height: 1; white-space: nowrap; cursor: pointer;
  color: var(--white); background: color-mix(in srgb, var(--white) 12%, transparent); border: 1px solid color-mix(in srgb, var(--m2) 60%, transparent);
  box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--graphite-950) 70%, transparent);
}
.today-chip[hidden] { display: none; }
.today-chip::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid var(--m2); opacity: 0; pointer-events: none; animation: today-ring 2.8s var(--ease) infinite; }
.today-chip::after { content: ""; position: absolute; inset: -9px -4px; } /* a 44 px tap area */
.today-chip:hover { background: color-mix(in srgb, var(--white) 24%, transparent); }
.today-chip:hover::before { animation-play-state: paused; }
.today-chip:focus-visible { outline: 2px solid var(--m1); outline-offset: 3px; box-shadow: 0 0 0 3px var(--graphite-950); }
.today-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--m2); }
.today-who { min-width: 0; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; font-weight: 400; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--white) 84%, transparent); }
@keyframes today-ring { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.14, 1.55); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .today-chip::before { animation: none; opacity: 0; } }
@media (forced-colors: active) { .today-chip { background: ButtonFace; color: ButtonText; border-color: ButtonText; } .today-chip::before { display: none; } }
@media (min-width: 1100px) and (max-height: 680px) { .featured-head { margin-block: -5px; } }
/* a phone scrolls, so the chip may wrap under the place line and have its whole height, instead of overlapping the title below it */
@media (max-width: 1099px) { .featured-head { margin-block: 0; row-gap: 8px; } .today-chip { margin-block: 0; } }

/* the country dialog: the leader on a gold card, a world map, the ranking */
.countries-panel { justify-items: stretch; width: min(100%, 980px); gap: 14px; }
.countries-stage { display: grid; gap: 16px; min-width: 0; }
.country-leader {
  position: relative; isolation: isolate; overflow: hidden; display: grid; justify-items: start; gap: 2px; padding: clamp(14px, 2.4vw, 22px) clamp(18px, 3vw, 30px);
  border-radius: var(--radius-card); color: var(--graphite-950);
  background:
    radial-gradient(90% 90% at 8% 0%, color-mix(in srgb, var(--white) 55%, transparent), transparent 62%),
    linear-gradient(145deg, var(--gold-1) 0%, var(--gold-2) 32%, var(--gold-3) 60%, var(--gold-2) 82%, var(--gold-4) 100%);
  box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--gold-4) 80%, var(--graphite-950)), 0 4px 12px color-mix(in srgb, var(--graphite-950) 14%, transparent);
}
.country-leader::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from 215deg, var(--gold-rim), var(--gold-3), var(--white), var(--gold-2), var(--gold-rim), var(--gold-4), var(--gold-rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.country-leader > * { position: relative; z-index: 2; margin: 0; }
.country-leader-eyebrow { font-size: 13px; font-weight: var(--fw-medium); letter-spacing: .18em; color: var(--graphite-800); }
.country-leader-name { font-size: clamp(34px, 6vw, 64px); font-weight: var(--title-weight); line-height: 1.02; letter-spacing: -.04em; overflow-wrap: anywhere; text-shadow: 0 1px 0 color-mix(in srgb, var(--white) 50%, transparent); }
.country-leader-total { margin-top: 4px; font-size: 16px; color: var(--graphite-800); }
.country-leader-total .num { font-size: clamp(24px, 3.4vw, 40px); font-weight: var(--title-weight); letter-spacing: -.025em; color: var(--graphite-950); }
.country-leader-per, .country-leader-gap { font-size: 14px; color: var(--graphite-800); }
.country-empty { margin: 0; font-size: 18px; line-height: 1.45; color: var(--fg-2); }
.country-map-box { padding: 6px; border-radius: var(--radius-card); background: color-mix(in srgb, var(--white) 36%, transparent); box-shadow: inset 0 0 0 1px var(--hairline); }
.country-map { display: block; width: 100%; height: auto; }
.land { fill: var(--mist-200); stroke: color-mix(in srgb, var(--white) 80%, transparent); stroke-width: .7; stroke-linejoin: round; }
/* cool blues only, from pale to steel: the gold leader must be the loudest thing on the map, so no country is drawn dark */
.land.c1 { fill: color-mix(in srgb, var(--glass-blue) 62%, var(--white)); }
.land.c2 { fill: var(--glass-blue); }
.land.c3 { fill: var(--ice); }
.land.c4 { fill: color-mix(in srgb, var(--steel) 78%, var(--ice)); }
.glow-in { stop-color: var(--gold-2); stop-opacity: .75; }
.glow-out { stop-color: var(--gold-2); stop-opacity: 0; }
.land.is-leader { fill: var(--gold-3); stroke: var(--gold-4); stroke-width: 1.6; }
.map-ring { fill: none; stroke-width: 3.5; }
.map-medal--gold .map-ring { stroke: var(--gold-4); }
.map-medal--gold .map-core { fill: var(--gold-rim); stroke: var(--gold-4); stroke-width: 2; }
.map-medal--silver .map-ring { stroke: var(--slate-600); }
.map-medal--silver .map-core { fill: var(--white); stroke: var(--slate-600); stroke-width: 1.6; }
.map-medal--bronze .map-ring { stroke: var(--bronze-3); }
.map-medal--bronze .map-core { fill: var(--bronze-rim); stroke: var(--bronze-3); stroke-width: 1.6; }
.map-pulse { fill: var(--gold-3); opacity: .55; transform-box: fill-box; transform-origin: center; animation: map-pulse 2.2s ease-out infinite; }
@keyframes map-pulse { from { transform: scale(1); opacity: .55; } to { transform: scale(3.6); opacity: 0; } }
.map-label { font-size: 34px; font-weight: 500; fill: var(--graphite-950); stroke: var(--white); stroke-width: 7px; stroke-linejoin: round; paint-order: stroke; }
@media (prefers-reduced-motion: reduce) { .map-pulse { animation: none; opacity: .28; } }
@media (max-width: 640px) {
  .map-label { display: none; }
  /* on a phone the map is a quarter of its size: the medals are drawn bigger so the leader is still the first thing seen */
  .map-medal--gold .map-ring, .map-pulse { r: 36px; }
  .map-halo { r: 150px; }
  .map-medal--gold .map-core { r: 13px; }
  .map-medal--silver .map-ring, .map-medal--bronze .map-ring { r: 22px; }
  .map-medal--silver .map-core, .map-medal--bronze .map-core { r: 8px; }
  .map-ring { stroke-width: 7px; }
}
@media (forced-colors: active) { .land { fill: Canvas; stroke: CanvasText; } .land.c1, .land.c2, .land.c3, .land.c4 { fill: GrayText; } .land.is-leader { fill: Highlight; } }
.country-list { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; max-height: min(34dvh, 320px); overflow-y: auto; overscroll-behavior: contain; }
.country-row {
  position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "rank name total" "rank meta total";
  align-items: center; gap: 0 12px; padding: 9px 6px 11px; border-bottom: 1px solid var(--hairline);
}
.country-rank { grid-area: rank; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--fg-2); }
.country-name { grid-area: name; display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.country-meta, .country-sub { font-size: 13px; color: var(--fg-2); }
.country-meta { grid-area: meta; }
.country-sub { grid-area: sub; }
.country-row.has-sub { grid-template-areas: "rank name total" "rank meta total" "rank sub total"; }
.country-total { grid-area: total; font-size: 17px; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
/* each country's total against the leader's, as a hairline under its row */
.country-bar { position: absolute; left: 52px; bottom: 3px; height: 3px; width: calc((100% - 58px) * var(--share, 0)); border-radius: 2px; background: var(--ice); }
.country-row--gold { background: linear-gradient(90deg, color-mix(in srgb, var(--gold-1) 60%, transparent), transparent 75%); border-radius: 12px; }
.country-row--gold .country-rank { font-weight: var(--fw-medium); color: var(--graphite-950); background: linear-gradient(145deg, var(--gold-1), var(--gold-3)); }
.country-row--gold .country-bar { background: var(--gold-3); }
.country-row--silver .country-rank { font-weight: var(--fw-medium); color: var(--graphite-950); background: linear-gradient(145deg, var(--white), var(--mist-300)); }
.country-row--bronze .country-rank { font-weight: var(--fw-medium); color: var(--graphite-950); background: linear-gradient(145deg, var(--bronze-1), var(--bronze-3)); }
.country-row--bronze .country-bar { background: var(--bronze-3); }

/* ---------- the challenge page (/c/<code>): a founder's challenge, and what it would take to beat it ---------- */
/* The challenger's badge and standing on the left, a price to try on the right; one column on a phone. The class names are `rival-*`
   because the site's own `share-card` and `photo-card` classes draw other things. */
.page-challenge .page > * { max-width: 1060px; }
.page-challenge .panel { padding: clamp(20px, 3vw, 36px); }
.page-challenge .page-title { font-size: clamp(30px, 3.6vw, 46px); }
.page-challenge .panel .lede { margin-top: 10px; max-width: 40em; font-size: clamp(17px, 1.5vw, 20px); }
.page-challenge [data-challenge-body] { gap: 20px; margin-top: 18px; }
.page-challenge .panel-actions { margin-top: 18px; }
.page-challenge .fine { margin-top: 12px; max-width: 46em; }
.page-challenge [data-challenge-body]:empty { display: none; }
.rival-badge { display: grid; gap: 12px; align-content: start; width: 100%; max-width: 420px; }
.rival-side { display: grid; gap: 2px; }
.rival-stat { margin: 0; font-size: 16px; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.rival-stat + .rival-stat { font-weight: var(--fw-regular); color: var(--fg-2); }
.rival-form { display: grid; gap: 14px; align-content: start; }
.rival-says { display: grid; gap: 6px; min-height: 4.2em; }
.rival-result { margin: 0; font-size: clamp(18px, 1.6vw, 22px); font-weight: var(--fw-medium); overflow-wrap: anywhere; }
.rival-place { margin: 0; font-size: 16px; color: var(--fg-2); }
@media (min-width: 900px) {
  .page-challenge [data-challenge-body] { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; gap: 32px; }
}

/* ---------- the sponsor ad in the home page's header (sponsor-banner.js, sponsor-ad.js) and its preview on the sponsor page (/founders/sponsor) ---------- */
/* The ad is the first-place badge made small: a dark stage inside a gold rim with stitching, rays of light, the emblem of "the main
   character", a gold chip, and first place's fire burning behind it (the place cards' own `.card-fx`, so it moves as they do and stands
   still under reduced motion). It sits between the lockup and the nav on a wide window and takes no height there (a negative margin
   keeps the bar's row where it was, so the first screen is where it was); below 1100 px it is a row of its own under the bar, centred.
   The fire is dimmed behind the words so white on the stage keeps 4.5:1 or better; the emblem's and the chip's sides burn at full
   strength. The words are put in by the script with textContent; the company's name is the one part that may be long, so it shrinks. */
.sponsor-ad {
  --m1: var(--gold-1); --m2: var(--gold-2); --m3: var(--gold-3); --m4: var(--gold-4); --rim: var(--gold-rim); --badge-accent: var(--m2);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; max-width: 100%;
  height: 52px; margin-block: -4px; padding: 0 8px 0 5px; border-radius: 999px; overflow: hidden; color: var(--white); text-decoration: none; white-space: nowrap;
  background:
    radial-gradient(54% 150% at 12% 52%, color-mix(in srgb, var(--m2) 30%, transparent), transparent 74%),
    linear-gradient(112deg, transparent 36%, color-mix(in srgb, var(--white) 6%, transparent) 45%, transparent 54%),
    linear-gradient(165deg, var(--graphite-800), var(--graphite-950) 82%);
  box-shadow: 0 16px 26px -14px color-mix(in srgb, var(--m4) 72%, var(--graphite-950)), 0 4px 10px color-mix(in srgb, var(--graphite-950) 22%, transparent);
}
.sponsor-ad::before { /* the metal rim */
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 2.5px; pointer-events: none;
  background: conic-gradient(from 215deg, var(--rim), var(--m3), var(--white), var(--m2), var(--rim), var(--m4), var(--rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.sponsor-ad::after { /* the stitching, inside the rim */
  content: ""; position: absolute; inset: 5px; z-index: 1; border-radius: 999px; pointer-events: none; border: 1px dashed color-mix(in srgb, var(--m2) 44%, transparent);
}
.sponsor-ad > * { position: relative; z-index: 2; min-width: 0; }
.sponsor-ad > .card-fx { position: absolute; z-index: 0; }
.sponsor-ad > .ad-rays {
  position: absolute; z-index: 0; left: 31px; top: 50%; width: 260px; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(color-mix(in srgb, var(--m2) 34%, transparent) 0 3deg, transparent 3deg 11deg);
  -webkit-mask: radial-gradient(circle closest-side, #000 0, transparent 70%); mask: radial-gradient(circle closest-side, #000 0, transparent 70%);
  animation: card-rays-turn 150s linear infinite;
}
.ad-emblem { flex: none; width: 52px; height: 44px; overflow: hidden; }
.ad-emblem .emblem { width: 100%; height: 100%; filter: none; }
.ad-words { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; text-align: left; }
/* a soft dark band behind the words, fading out at both ends, so the fire can burn through the middle of the unit and the words keep their contrast */
.ad-words::before {
  content: ""; position: absolute; inset: -9px -16px; z-index: -1; pointer-events: none; border-radius: 18px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--graphite-950) 56%, transparent) 16px, color-mix(in srgb, var(--graphite-950) 56%, transparent) calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
.ad-label { font-size: 10px; line-height: 1; font-weight: var(--fw-medium); letter-spacing: .2em; text-transform: uppercase; color: var(--m2); text-shadow: 0 0 6px var(--graphite-950), 0 0 2px var(--graphite-950); }
.ad-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 16px; line-height: 1.15; font-weight: var(--fw-medium); color: var(--white); text-shadow: 0 1px 6px var(--graphite-950), 0 0 2px var(--graphite-950); }
/* the chip: the ribbon's gold with graphite text (4.5:1 or better on every stop, as the ribbon's) */
.ad-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; line-height: 1; font-weight: var(--fw-medium); color: var(--graphite-950);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--white) 70%, transparent) 0 1px, transparent 1px),
    linear-gradient(180deg, var(--m1), var(--m2) 46%, var(--m3));
}
.ad-extra { display: none; font-weight: 400; }
@media (min-width: 1700px) { .ad-extra { display: inline; } }
.ad-arrow { flex: none; font-size: 14px; }
.ad-arrow--plain { padding-inline: 6px 4px; color: var(--m2); }
.sponsor-ad[href] { transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.sponsor-ad[href]:hover { transform: translateY(-1px); box-shadow: 0 18px 28px -14px color-mix(in srgb, var(--m4) 82%, var(--graphite-950)), 0 4px 10px color-mix(in srgb, var(--graphite-950) 22%, transparent); }
.sponsor-ad[href]:hover .ad-chip { filter: brightness(1.06); }
.sponsor-ad:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* its fire: the place cards' layer (the rules above), flames widened for a unit this wide and short, dimmed behind the words */
.sponsor-ad > .card-fx {
  inset: 0; min-width: 0; border-radius: inherit; overflow: hidden; pointer-events: none; container-type: size;
  -webkit-mask-image: linear-gradient(90deg, #000, #000 20%, rgb(0 0 0 / .75) 38%, rgb(0 0 0 / .75) 74%, #000); mask-image: linear-gradient(90deg, #000, #000 20%, rgb(0 0 0 / .75) 38%, rgb(0 0 0 / .75) 74%, #000);
  --flame: polygon(62% 0, 64% 8%, 67% 17%, 73% 27%, 81% 39%, 89% 53%, 95% 68%, 98% 82%, 93% 94%, 80% 100%, 20% 100%, 7% 94%, 2% 82%, 5% 68%, 12% 54%, 22% 42%, 30% 32%, 34% 22%, 42% 13%, 51% 7%, 57% 3%);
}
.sponsor-ad .fx-flame { width: calc(var(--w) * 1.7); }
/* the sheen that crosses it is softer than on the cards: it passes over the words */
.sponsor-ad .fx-sheen { background: linear-gradient(90deg, transparent 8%, color-mix(in srgb, var(--white) 30%, transparent) 30%, transparent 46%, color-mix(in srgb, var(--white) 18%, transparent) 60%, transparent 76%); }
/* the booking page's preview: the ad at its own width, centred */
.ad-preview { display: grid; justify-items: center; gap: 10px; padding: 8px 0 4px; }
.ad-preview .fine { margin: 0; text-align: center; }
.ad-preview .sponsor-ad { max-width: min(100%, 440px); }
@media (prefers-reduced-motion: reduce) { .sponsor-ad > .ad-rays { animation: none; } .sponsor-ad[href] { transition: none; } .sponsor-ad[href]:hover { transform: none; } }
@media (forced-colors: active) {
  .sponsor-ad { background: Canvas; color: CanvasText; border: 1px solid CanvasText; box-shadow: none; }
  .sponsor-ad::before, .sponsor-ad::after, .sponsor-ad > .ad-rays { display: none; }
  .ad-label, .ad-name { color: CanvasText; text-shadow: none; }
  .ad-chip { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; }
  .ad-arrow--plain { color: CanvasText; }
}
@media (prefers-contrast: more) {
  .sponsor-ad { background: var(--graphite-950); box-shadow: 0 0 0 1px var(--m2); }
  .sponsor-ad > .ad-rays { display: none; }
}

/* The side ad: the same unit in second place's metal (silver, with the frost's glare and glints instead of fire), smaller, a name that links.
   It sits right beside the main ad and is 40 px tall, so it takes no room in the bar's row either. */
.sponsor-ad.metal-silver { --m1: var(--white); --m2: var(--mist-200); --m3: var(--mist-300); --m4: var(--slate-500); --rim: var(--mist-300); --badge-accent: var(--m2); }
.sponsor-ad--side { height: 40px; margin-block: 0; gap: 8px; padding: 0 6px 0 4px; }
.sponsor-ad--side::before { padding: 2px; }
.sponsor-ad--side::after { inset: 4px; }
.sponsor-ad--side > .ad-rays { left: 24px; width: 190px; }
.sponsor-ad--side .ad-emblem { width: 40px; height: 32px; }
.sponsor-ad--side .ad-words { gap: 3px; }
.sponsor-ad--side .ad-label { font-size: 9px; }
.sponsor-ad--side .ad-name { font-size: 14px; }
.sponsor-ad--side .ad-chip { min-height: 26px; padding: 0 10px; font-size: 12px; }
.sponsor-ad--side > .card-fx { -webkit-mask-image: none; mask-image: none; }
.sponsor-ad--side .fx-sheen { background: linear-gradient(90deg, transparent 8%, color-mix(in srgb, var(--white) 34%, transparent) 30%, transparent 46%, color-mix(in srgb, var(--white) 20%, transparent) 60%, transparent 76%); }

/* The logo slot, left of the wordmark: a round bronze medallion (rim, stitching, a pale plate for the picture) that pulses. No words: the
   picture is the buyer's and it links to their site. The ring is outside the medallion and moves by transform and opacity only. */
.brand-row { display: flex; align-items: center; gap: 14px; flex: none; min-width: 0; }
.logo-slot { display: inline-flex; align-items: center; flex: none; }
.logo-slot[hidden] { display: none; }
.sponsor-logo {
  --m1: var(--bronze-1); --m2: var(--bronze-2); --m3: var(--bronze-3); --m4: var(--bronze-3); --rim: var(--bronze-rim);
  position: relative; isolation: isolate; flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; margin-block: -2px; border-radius: 50%; text-decoration: none; color: var(--graphite-950);
  background: linear-gradient(165deg, var(--graphite-800), var(--graphite-950) 82%);
  box-shadow: 0 10px 18px -10px color-mix(in srgb, var(--m4) 80%, var(--graphite-950)), 0 3px 8px color-mix(in srgb, var(--graphite-950) 22%, transparent);
  animation: logo-beat 2.8s ease-in-out infinite;
}
.sponsor-logo::before { /* the pulse: a ring that leaves the medallion and fades */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; border: 2px solid var(--m2); opacity: 0; pointer-events: none;
  animation: logo-ring 2.8s ease-out infinite;
}
.sponsor-logo::after { /* the metal rim and stitching */
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; padding: 2.5px; pointer-events: none;
  background: conic-gradient(from 215deg, var(--rim), var(--m3), var(--white), var(--m2), var(--rim), var(--m4), var(--rim));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.logo-plate { position: relative; z-index: 1; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--white); }
.logo-img { display: block; width: 100%; height: 100%; padding: 5px; object-fit: contain; }
.logo-plus { font-size: 22px; line-height: 1; font-weight: var(--fw-medium); color: var(--graphite-800); }
.sponsor-logo.is-example .logo-plate { background: color-mix(in srgb, var(--white) 88%, var(--bronze-1)); }
.sponsor-logo[href]:hover { animation-play-state: paused; filter: brightness(1.05); }
.sponsor-logo:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sponsor-logo.is-preview { margin: 6px; }
@keyframes logo-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes logo-ring { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(1.75); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .sponsor-logo { animation: none; }
  .sponsor-logo::before { animation: none; opacity: .4; transform: scale(1.18); }
}
@media (forced-colors: active) { .sponsor-logo { background: Canvas; border: 1px solid CanvasText; box-shadow: none; animation: none; } .sponsor-logo::before, .sponsor-logo::after { display: none; } .logo-plate { background: Canvas; } }
@media (prefers-contrast: more) { .sponsor-logo::before { display: none; } }
@media (max-width: 1099px) { .brand-row { gap: 10px; } }

/* The capsule that offers the days beside a running sponsor's ad. The pill is a pseudo-element so the tap area stays 44 px tall. Graphite
   on the pale glass: 4.5:1 or better. */
.sponsor-book { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: 100%; min-height: 44px; padding: 0 16px; font-size: 13px; line-height: 1; color: var(--ink); text-decoration: none; white-space: nowrap; }
.sponsor-book[hidden] { display: none; }
.sponsor-book::before { content: ""; position: absolute; inset: 7px 0; z-index: -1; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--slate-600) 32%, transparent); background: color-mix(in srgb, var(--white) 58%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background .2s var(--ease), border-color .2s var(--ease); }
.sponsor-book:hover::before { background: color-mix(in srgb, var(--white) 82%, transparent); border-color: var(--graphite-800); }
.sponsor-book:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 999px; }
.sponsor-arrow { flex: none; font-size: 12px; opacity: .7; }
/* When the two sit side by side and the bar is tight, the running sponsor's name gives way (it is the part that can be long) and the
   booking line, which carries the price, stays whole; alone on a narrow row the line's words give way last. Nothing runs under the nav. */
.sponsor-slot .sponsor-book { flex-shrink: 0; }
.sponsor-book [data-sponsor-book-text] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* The space for sale: the same capsule with a dashed edge (an empty slot) and a way in. */
.sponsor-slot { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.sponsor-slot[hidden] { display: none; }
.sponsor-book::before { border-style: dashed; background: color-mix(in srgb, var(--white) 34%, transparent); }
.sponsor-book:hover::before { border-style: solid; }
.sponsor-book:hover .sponsor-arrow { opacity: 1; }
@media (max-width: 1099px) {
  .page-founders .bar { flex-wrap: wrap; row-gap: 0; }
  .page-founders .sponsor-slot { order: 5; flex: 0 1 auto; margin-inline: auto; flex-wrap: wrap; }
}
@media (forced-colors: active) { .sponsor-book::before { border-color: ButtonText; background: Canvas; } }
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .sponsor-book::before { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* The booking calendar on /founders/sponsor (sponsor-calendar.js draws the days): one month at a time, a day is a 44 px button, the
   days that can't be picked are struck through (taken) or dashed (held while someone pays), the chosen days are graphite. */
.calendar { display: grid; gap: 8px; width: 100%; max-width: 400px; padding: 10px; border-radius: var(--radius-card); border: 1px solid color-mix(in srgb, var(--slate-600) 24%, transparent); background: color-mix(in srgb, var(--white) 56%, transparent); }
.cal-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; }
.cal-month { margin: 0; text-align: center; font-weight: var(--fw-medium); }
.cal-nav { min-width: 44px; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.cal-nav:hover:not(:disabled) { background: color-mix(in srgb, var(--white) 70%, transparent); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-nav:focus-visible, .cal-day:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cal-week, .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-week span { text-align: center; font-size: 12px; color: var(--fg-2); }
.cal-day { min-height: 44px; padding: 0; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; cursor: pointer; }
.cal-day.is-free:hover { background: color-mix(in srgb, var(--white) 80%, transparent); border-color: var(--graphite-800); }
.cal-day.is-in-range { background: var(--ink); border-color: var(--ink); color: var(--white); }
.cal-day.is-first { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--ink); position: relative; }
.cal-day:disabled { cursor: default; }
.cal-day.is-taken { color: var(--fg-2); text-decoration: line-through; background: color-mix(in srgb, var(--slate-600) 14%, transparent); }
.cal-day.is-held { color: var(--fg-2); border: 1px dashed var(--slate-600); }
.cal-day.is-short { color: var(--fg-2); opacity: .55; }
.cal-day.is-out { opacity: .28; }
@media (forced-colors: active) {
  .cal-day.is-in-range { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  .cal-day.is-taken, .cal-day.is-held, .cal-day.is-short, .cal-day.is-out { color: GrayText; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .calendar { background: var(--white); } }

/* The places that can be bought, as a group of radio buttons (sponsor.js): the name, what it costs to start, and one line on what it is. */
.slot-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.slot-options { display: grid; gap: 8px; }
.slot-option { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; min-height: 44px; padding: 12px 14px; border-radius: var(--radius-card); border: 1px solid color-mix(in srgb, var(--slate-600) 28%, transparent); background: color-mix(in srgb, var(--white) 48%, transparent); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); }
.slot-option input { grid-row: 1 / span 2; width: 20px; height: 20px; margin: 0; accent-color: var(--graphite-800); cursor: pointer; }
.slot-name { font-size: 16px; font-weight: var(--fw-medium); }
.slot-price { font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; }
.slot-about { grid-column: 2 / -1; font-size: 14px; line-height: 1.4; color: var(--fg-2); }
.slot-option:hover { border-color: var(--graphite-800); }
.slot-option:has(input:checked) { border-color: var(--ink); background: color-mix(in srgb, var(--white) 86%, transparent); box-shadow: 0 0 0 1px var(--ink); }
.slot-option:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.slot-option:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.field input[type="file"] { min-height: 44px; padding: 8px 0; font: inherit; font-size: 15px; color: var(--ink); }
.admin-logo { display: block; width: 64px; height: 64px; padding: 4px; object-fit: contain; border-radius: 50%; background: var(--white); border: 1px solid var(--mist-300); }
.ad-preview-unit { display: grid; justify-items: center; max-width: 100%; }
@media (forced-colors: active) { .slot-option { border-color: ButtonText; background: Canvas; } .slot-option:has(input:checked) { border-width: 2px; } }
.page-sponsor .page > * { max-width: 760px; }
.page-sponsor .panel { padding: clamp(20px, 3vw, 36px); }
.page-sponsor .page-title { margin-top: 6px; font-size: clamp(30px, 3.6vw, 46px); }
.page-sponsor .panel .lede { margin-top: 10px; max-width: 40em; font-size: clamp(17px, 1.5vw, 20px); }
.page-sponsor .notice { margin-top: 16px; }
.page-sponsor .panel-actions { margin-top: 18px; }
.sponsor-now { display: grid; gap: 2px; margin-top: 16px; }
.sponsor-now-line { margin: 0; font-size: 17px; overflow-wrap: anywhere; }
.sponsor-now-line b { font-weight: var(--fw-medium); }
.sponsor-form { margin-top: 22px; }
.sponsor-form .button-primary { justify-self: start; margin-top: 0; }
.sponsor-total { margin: 0; font-size: 17px; font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.sponsor-total:empty { display: none; }
[data-sponsor-body] { margin-top: 18px; }
[data-sponsor-body]:empty { display: none; }
.sponsor-summary { display: grid; gap: 8px; margin: 0; }
.sponsor-summary > div { display: grid; grid-template-columns: minmax(4.5em, 6em) minmax(0, 1fr); gap: 12px; }
.sponsor-summary dt { font-size: 14px; color: var(--fg-2); }
.sponsor-summary dd { margin: 0; overflow-wrap: anywhere; }
.sponsor-reason { margin: 0; padding-left: 12px; border-left: 3px solid var(--destructive); overflow-wrap: anywhere; }
.sponsor-reason b { font-weight: var(--fw-medium); }
.queue-item--solo { grid-template-columns: minmax(0, 1fr); }

/* ---------- "buy domains": a small, flashy capsule beside the intro's title ----------
   It lives in .founders-lead with the h1, in the intro's left cell, so the intro is no taller than it was (the capsule is 36 px,
   the row is the 44 px of "what is memoe" beside it). Dark graphite with a pulsing accent dot and a glint that crosses it every
   few seconds; only transform and opacity move. Nothing moves under reduced motion; forced colours get a plain outline. */
.founders-lead { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; min-width: 0; }
@media (min-width: 1100px) { .founders-lead { justify-self: start; justify-content: flex-start; flex-wrap: nowrap; } }
.founders-domains {
  position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 0 16px 0 13px; overflow: hidden; isolation: isolate;
  border-radius: 999px; background: var(--graphite-950); color: var(--text-on-image); font-size: 14px; font-weight: var(--fw-medium); letter-spacing: .01em; line-height: 1; text-decoration: none; white-space: nowrap;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--white) 24%, transparent) inset, 0 6px 20px color-mix(in srgb, var(--accent) 38%, transparent);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.founders-domains::after { /* the glint */
  content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: 46%;
  background: linear-gradient(100deg, transparent 0%, color-mix(in srgb, var(--white) 46%, transparent) 50%, transparent 100%);
  transform: translateX(-130%) skewX(-18deg); animation: domains-glint 3.8s var(--ease) 1.2s infinite;
}
.founders-domains::before { /* a hit area of 44 px, taller than the capsule */
  content: ""; position: absolute; inset: -4px -2px; z-index: 1;
}
.founders-domains:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--white) 36%, transparent) inset, 0 8px 26px color-mix(in srgb, var(--accent) 52%, transparent); }
.founders-domains:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.domains-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: domains-ping 2s ease-out infinite; }
@keyframes domains-glint { 0%, 55% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } }
@keyframes domains-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 80%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .founders-domains::after { animation: none; opacity: 0; }
  .domains-dot { animation: none; }
  .founders-domains { transition: none; }
}
@media (forced-colors: active) {
  .founders-domains { forced-color-adjust: none; background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; box-shadow: none; }
  .founders-domains::after { display: none; }
  .domains-dot { background: ButtonText; animation: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .founders-domains { box-shadow: none; }
  .founders-domains::after { display: none; }
}