/* dm-serif-display — vendored from Google Fonts, latin + latin-ext */
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-serif-display-latin-ext-400-i-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-serif-display-latin-400-i-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-serif-display-latin-ext-400-n-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-serif-display-latin-400-n-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* dm-sans — vendored from Google Fonts, latin + latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-latin-ext-400-i-0.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-latin-400-i-1.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-latin-ext-400-n-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-latin-400-n-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-latin-ext-500-n-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-latin-500-n-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-latin-ext-700-n-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/dm-sans-latin-700-n-7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------------------------------------------------------------------------
   base.css — reset + the browser surfaces every site themes from its own tokens.
   Each site declares the tokens; this file only ever consumes them, so the
   three palettes stay completely independent.
   --------------------------------------------------------------------------- */

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

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky headers must not swallow the anchor target. */
  scroll-padding-block-start: 5rem;
}
@media (prefers-reduced-motion: reduce) {
  :where(html) { scroll-behavior: auto; }
}

:where(body) {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-body, 1.0625rem);
  line-height: 1.6;
  /* Fallback metrics matched to the webfont so a swap does not shift layout. */
  font-size-adjust: from-font;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

:where(h1, h2, h3, h4, p, figure, blockquote, dl, dd) { margin: 0; }
:where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; }
:where(img, svg, canvas) { display: block; max-width: 100%; }
:where(button, input, textarea) { font: inherit; color: inherit; }
:where(a) { color: inherit; text-decoration: none; }
:where(strong, b) { font-weight: 700; }

/* Long words in the corpus (file paths, !33633) must never blow out a card. */
:where(p, blockquote, li, dd, h1, h2, h3) { overflow-wrap: break-word; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p, blockquote) { text-wrap: pretty; }

/* --- browser surfaces: themed, never left at the platform default --------- */
::selection { background: var(--select-bg); color: var(--select-fg); }
:where(:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}
:where(html) {
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: thin;
}
/* Tabular figures wherever numbers are compared. */
:where(.num, .mono, time) { font-variant-numeric: tabular-nums; }

/* --- utilities ------------------------------------------------------------ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: 1rem; inset-block-start: -100%;
  z-index: 999; padding: .6rem 1rem; border-radius: 8px;
  background: var(--fg); color: var(--bg); font-weight: 700;
  transition: inset-block-start .15s ease;
}
.skip-link:focus { inset-block-start: 1rem; }

.wrap { width: min(100% - 2.5rem, var(--measure, 74rem)); margin-inline: auto; }

/* NOTE: no `content-visibility: auto` on these sections. It was tried and
   removed: the sections here are far taller than any honest
   `contain-intrinsic-size` guess (one list runs to 84 rows), so the browser
   kept re-resolving heights mid-scroll and the scroll position jumped. These
   pages are small enough to lay out in one go; the only heavy asset is
   three.js, and that is already deferred to its own chunk. */

/* The WebGL / canvas backdrop every site parks behind its content.
   `overflow-anchor: none` + containment matter: this element sits before the
   content in DOM order, so inserting a canvas into it once the lazy chunk
   lands would otherwise make Chrome's scroll anchoring nudge the page down. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  overflow-anchor: none;
  contain: strict;
}
.grain { overflow-anchor: none; }
.backdrop canvas { width: 100% !important; height: 100% !important; }

/* Animated film grain. Decoration, and proud of it. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: var(--grain-opacity, .035);
  background-image: var(--grain-url);
  background-size: 180px 180px;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .grain { animation: grain-drift 6s steps(6, end) infinite; }
}
@keyframes grain-drift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* Content sits above backdrop + grain. */
.page { position: relative; z-index: 2; }

/* --- reveal-on-scroll ------------------------------------------------------
   motion.dev drives this (it works in Firefox too, unlike view-timeline).
   The `.reveal` class only takes effect once JS confirms it can animate, so a
   no-JS reader gets everything at full opacity.                              */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* Decorative scroll-linked progress. Native only; no polyfill, no fallback. */
@supports ((animation-timeline: scroll()) and (animation-range: normal)) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress {
      transform-origin: 0 50%;
      animation: scale-x linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes scale-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}

/* Marquee — pure CSS, duplicated content, aria-hidden on the clone. */
.marquee { overflow: hidden; display: flex; gap: var(--marquee-gap, 2rem); }
.marquee__track {
  display: flex;
  gap: var(--marquee-gap, 2rem);
  flex: 0 0 auto;
  min-width: 100%;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee var(--marquee-duration, 42s) linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(calc(-100% - var(--marquee-gap, 2rem))); } }

/* Dialogs: a modal for a task that needs neither interruption nor focus. */
:where(dialog) {
  border: 0; padding: 0; color: var(--fg);
  max-width: min(46rem, calc(100vw - 2rem));
  max-height: min(80svh, 44rem);
}
:where(dialog)::backdrop {
  background: var(--backdrop-tint, rgb(4 4 12 / .72));
  backdrop-filter: blur(10px) saturate(120%);
}


/* ===========================================================================
   whatthemodelsaid.com
   DM Serif Display + DM Sans. Near-black ground, violet→cyan→lime accents.
   Every decorative reflex here is deliberate: gradient text, glass, block
   shadows, thick accent borders, rings, sparklines, emoji icons, a modal.
   =========================================================================== */

@property --spin {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  /* ground + ink */
  --bg: #07060f;
  --bg-alt: #0b0918;
  --fg: #eceafa;
  --muted: #a49fca;          /* tinted from the violet hue, never gray */
  --dim: #807bab;           /* 5.12:1 — the old #6f6a96 was 4.01:1 on this ground */

  /* accents */
  --violet: #7c5cff;
  --indigo: #4f46e5;
  --cyan: #22d3ee;
  --lime: #a3e635;
  --pink: #f472b6;
  --amber: #fbbf24;

  --grad-hot: linear-gradient(100deg, var(--violet) 0%, var(--pink) 42%, var(--cyan) 100%);
  --grad-cool: linear-gradient(120deg, var(--cyan), var(--violet));

  /* glass */
  --glass: rgb(255 255 255 / .038);
  --glass-strong: rgb(255 255 255 / .06);
  --hair: rgb(255 255 255 / .1);
  --hair-bright: rgb(255 255 255 / .18);

  /* type */
  --font-display: 'DM Serif Display', ui-serif, Georgia, serif;
  --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  --fs-body: clamp(1rem, .96rem + .2vw, 1.125rem);
  --measure: 76rem;

  /* browser surfaces */
  --select-bg: var(--lime);
  --select-fg: #0a0a14;
  --focus: var(--cyan);
  --scroll-thumb: #2c2748;
  --scroll-track: #0a0913;
  --backdrop-tint: rgb(5 4 14 / .74);
  --grain-opacity: .04;
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* Aurora wash behind everything. Two fixed radial blobs, slowly breathing. */
body::before,
body::after {
  content: '';
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
}
body::before {
  inline-size: 60vmax; block-size: 60vmax;
  inset-block-start: -22vmax; inset-inline-start: -14vmax;
  background: radial-gradient(circle, rgb(124 92 255 / .40), transparent 68%);
}
body::after {
  inline-size: 52vmax; block-size: 52vmax;
  inset-block-end: -18vmax; inset-inline-end: -12vmax;
  background: radial-gradient(circle, rgb(34 211 238 / .26), transparent 68%);
}
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: breathe 19s ease-in-out infinite alternate; }
  body::after { animation: breathe 24s ease-in-out infinite alternate-reverse; }
}
@keyframes breathe {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(4vmax, 3vmax, 0) scale(1.14); }
}

/* --------------------------------------------------------------- typography */
.grad {
  background: var(--grad-hot);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* A gradient on the headline word. The whole point. */
}
@media (prefers-reduced-motion: no-preference) {
  .grad { animation: grad-pan 9s ease-in-out infinite alternate; }
}
@keyframes grad-pan { to { background-position: 100% 0; } }

.mono { font-family: var(--font-mono); font-size: .78em; letter-spacing: .02em; }
.num { font-variant-numeric: tabular-nums; }

/* The eyebrow. A hard ban, reinstated. */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1.1rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cyan);
}
.kicker__pulse {
  inline-size: 7px; block-size: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 rgb(163 230 53 / .7);
}
@media (prefers-reduced-motion: no-preference) {
  .kicker__pulse { animation: pulse 2.4s ease-out infinite; }
}
@keyframes pulse {
  70%, 100% { box-shadow: 0 0 0 9px rgb(163 230 53 / 0); }
}

.q { color: var(--violet); }

/* -------------------------------------------------------------------- chrome */
.scroll-progress {
  position: fixed;
  inset-block-start: 0; inset-inline: 0;
  z-index: 60;
  block-size: 2px;
  background: var(--grad-hot);
}

.nav {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  backdrop-filter: blur(16px) saturate(150%);
  background: rgb(7 6 15 / .62);
  border-block-end: 1px solid var(--hair);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-block-size: 4rem;
}
.nav__brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.01em; }
.nav__mark { font-size: 1.25rem; }
.nav__tld { color: var(--dim); }
.nav__links { display: none; gap: 1.6rem; margin-inline-start: auto; font-size: .92rem; color: var(--muted); }
.nav__links a { transition: color .18s ease; }
.nav__links a:hover { color: var(--fg); }
@media (width >= 56rem) { .nav__links { display: flex; } }
.nav__inner > .btn { margin-inline-start: auto; }
@media (width >= 56rem) { .nav__inner > .btn { margin-inline-start: 0; } }

/* ------------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--grad-hot);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .72rem 1.25rem;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: #0a0812;
  font-weight: 700;
  font-size: .94rem;
  cursor: pointer;
  box-shadow: 0 8px 30px -10px rgb(124 92 255 / .8);
  transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease, filter .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 40px -12px rgb(124 92 255 / .95); filter: saturate(120%); }
.btn:active { transform: translateY(0); }
.btn--sm { padding: .5rem .95rem; font-size: .85rem; }
.btn--lg { padding: .9rem 1.6rem; font-size: 1rem; }
.btn--ghost {
  background: var(--glass);
  color: var(--fg);
  border: 1px solid var(--hair-bright);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.btn--ghost:hover { background: var(--glass-strong); box-shadow: none; }

/* ---------------------------------------------------------------------- hero */
.hero { padding-block: clamp(3.5rem, 8vw, 7.5rem) clamp(2.5rem, 5vw, 4.5rem); }
.hero__inner { text-align: center; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 11vw, 8.5rem);
  line-height: .92;
  letter-spacing: -.03em;
  margin-block-end: 1.5rem;
}
.hero__sub {
  max-inline-size: 46rem;
  margin-inline: auto;
  color: var(--muted);
  font-size: clamp(1.02rem, .98rem + .35vw, 1.28rem);
  line-height: 1.62;
}
.hero__sub strong { color: var(--fg); }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
  margin-block: 2.4rem 3.4rem;
}

/* The hero-metric template, in full. */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  margin: 0;
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: var(--hair);
  overflow: hidden;
  backdrop-filter: blur(10px);
}
.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 1.5rem 1rem;
  background: rgb(11 9 24 / .82);
}
.metric dd { margin: 0; }
.metric__value { order: -1; }   /* dt must come first in the DOM; the number reads first */
.metric__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  line-height: 1;
  background: var(--grad-cool);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.metric__unit { font-style: normal; font-size: .5em; }
.metric__label { font-size: .82rem; font-weight: 500; color: var(--fg); }
.metric__foot { font-size: .72rem; color: var(--dim); }

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .9rem;
  margin-block-start: 1.6rem;
  font-size: .78rem;
  color: var(--muted);
}
.badges li {
  padding: .35rem .8rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--glass);
}
.badges i { color: var(--dim); font-style: normal; }

/* -------------------------------------------------------------------- ticker */
.ticker {
  --marquee-gap: 2.5rem;
  padding-block: 1rem;
  border-block: 1px solid var(--hair);
  background: rgb(124 92 255 / .06);
}
.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  white-space: nowrap;
  font-size: .87rem;
  color: var(--muted);
}
.ticker__item b { color: var(--fg); font-weight: 500; }
.ticker__item i { color: var(--lime); font-style: normal; }
.ticker__sep { color: var(--violet); }

/* ------------------------------------------------------------------ sections */
.section { padding-block: clamp(4rem, 9vw, 8rem); }
.section--alt { background: linear-gradient(180deg, transparent, rgb(124 92 255 / .05), transparent); }
.section__head { max-inline-size: 44rem; margin-block-end: clamp(2.5rem, 5vw, 4rem); position: relative; }
.section__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4rem, 12vw, 9rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--hair-bright);
  margin-block-end: .5rem;
}
.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin-block-end: 1rem;
}
.section__lede { color: var(--muted); font-size: 1.05rem; max-inline-size: 40rem; }

/* ------------------------------------------------------- the identical cards */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
  gap: 1.1rem;
  /* Cards take their natural height. Stretching them to the tallest in the row
     left 200px of dead air inside the short ones, which reads as a bug rather
     than as the deliberately uniform grid this section is going for. */
  align-items: start;
}
.card {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  padding: 1.4rem;
  border: 1px solid var(--hair);
  border-inline-start: 4px solid var(--violet);   /* thick coloured border-left */
  border-radius: 16px;
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(130%);
  cursor: pointer;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s ease, background .2s ease, border-color .2s ease;
  transition-delay: 0s;
}
.card:nth-child(3n)   { border-inline-start-color: var(--cyan); }
.card:nth-child(3n+1) { border-inline-start-color: var(--pink); }
.card:hover,
.card:focus-visible {
  background: var(--glass-strong);
  transform: translate(-3px, -3px) rotate(var(--tilt, 0deg));
  box-shadow: 6px 6px 0 0 var(--violet);          /* the block shadow, as costume */
  border-color: var(--hair-bright);
}
.card__head { display: flex; align-items: flex-start; gap: .65rem; }
.card__icon { font-size: 1.1rem; line-height: 1.4; }
.card__title {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  line-height: 1.5;
}
.card__said {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.18rem, 1.05rem + .5vw, 1.42rem);
  line-height: 1.28;
  letter-spacing: -.01em;
  color: var(--fg);
}
.card__truth,
.card__bet {
  /* A nested card inside a card. Always wrong; here, twice. */
  padding: .8rem .9rem;
  border: 1px solid var(--hair);
  border-radius: 11px;
  background: rgb(0 0 0 / .28);
}
.card__truth { border-inline-start: 3px solid var(--lime); }
.card__bet { border-inline-start: 3px solid var(--amber); display: flex; gap: .55rem; }
.card__truth-tag,
.card__bet-tag {
  display: inline-block;
  margin-block-end: .35rem;
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--lime);
}
.card__bet-tag { color: var(--amber); margin: 0; font-size: .8rem; }
.card__truth p, .card__bet p { font-size: .93rem; color: var(--muted); line-height: 1.55; }
.card__bet em { color: var(--amber); font-style: italic; }
.card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-block-start: auto;
  padding-block-start: .6rem;
  border-block-start: 1px solid var(--hair);
  color: var(--dim);
}
.card__foot .dot { color: var(--violet); }
.card__open {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.card:hover .card__open { color: var(--cyan); border-color: rgb(34 211 238 / .5); }
.card__open:hover { background: rgb(34 211 238 / .12); color: var(--cyan); }

/* ------------------------------------------------------------- the top ten */
.ranks { display: grid; gap: .9rem; counter-reset: rank; }
.rank {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 1.2rem;
  align-items: start;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  transition: border-color .2s ease, background .2s ease;
}
.rank:hover { border-color: var(--hair-bright); background: var(--glass-strong); }
.rank__n {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  line-height: .85;
  background: var(--grad-hot);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* The first three earn a heavier presence than the rest. */
.rank:nth-child(-n+3) .rank__n { font-size: clamp(3rem, 7vw, 4.8rem); }
.rank__said {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + .7vw, 1.7rem);
  line-height: 1.26;
  letter-spacing: -.01em;
  color: var(--fg);
}
.rank__truth { margin-block-start: .6rem; color: var(--muted); font-size: 1rem; line-height: 1.55; }
.rank__tag {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--lime);
  margin-inline-end: .35rem;
}
.rank__note {
  margin-block-start: .7rem;
  padding-inline-start: .85rem;
  border-inline-start: 3px solid var(--cyan);
  color: var(--cyan);
  font-style: italic;
  font-size: .95rem;
  line-height: 1.5;
}
.rank__meta { display: block; margin-block-start: .8rem; color: var(--dim); }
@media (width < 34rem) {
  .rank { grid-template-columns: 1fr; gap: .3rem; }
}

/* ---------------------------------------------------------------- the bets */
.bets { display: grid; gap: 1rem; }
.bet {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.4rem;
  align-items: start;
  padding: 1.5rem;
  border: 1px solid var(--hair);
  border-radius: 18px;
  background: var(--glass);
  backdrop-filter: blur(12px);
}
.ring { position: relative; inline-size: 72px; text-align: center; }
.ring svg { inline-size: 72px; block-size: 72px; transform: rotate(-90deg); }
.ring__track { fill: none; stroke: var(--hair); stroke-width: 5; }
.ring__value {
  fill: none;
  stroke: url(#none) var(--amber);
  stroke: var(--amber);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: var(--dash);
}
.ring__pct {
  position: absolute;
  inset-block-start: 26px; inset-inline: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--amber);
}
.ring__pct i { font-style: normal; font-size: .6em; }
.ring__label {
  display: block;
  margin-block-start: .2rem;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.bet__claim {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + .6vw, 1.6rem);
  line-height: 1.3;
  color: var(--fg);
}
.bet__collapse { display: flex; align-items: center; gap: .6rem; margin-block: .8rem .6rem; }
.bet__arrow { color: var(--pink); }
.bet__gap {
  padding: .2rem .6rem;
  border: 1px solid rgb(244 114 182 / .35);
  border-radius: 999px;
  background: rgb(244 114 182 / .1);
  color: var(--pink);
  letter-spacing: .06em;
}
.bet__bust { color: var(--muted); font-size: 1rem; line-height: 1.55; }
.bet__bust-tag {
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--lime);
  margin-inline-end: .3rem;
}
.bet__meta { display: block; margin-block-start: .7rem; color: var(--dim); }
@media (width < 40rem) {
  .bet { grid-template-columns: 1fr; gap: 1rem; }
}

/* ------------------------------------------------------------ coverage bento */
.bento {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: .9rem;
}
.tile {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: 1.1rem 1.2rem 1rem;
  border: 1px solid var(--hair);
  border-radius: 16px;
  background: var(--glass);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, border-color .2s ease;
}
.tile:hover { transform: translateY(-3px); border-color: var(--hair-bright); }
.tile--wide { grid-column: span 2; }
@media (width < 34rem) { .tile--wide { grid-column: span 1; } }
.tile__icon { font-size: 1.2rem; }
.tile__name { color: var(--cyan); word-break: break-all; }
.tile__count {
  font-family: var(--font-display);
  font-size: 2.1rem;
  line-height: 1.05;
  color: var(--fg);
}
.tile__sub { font-size: .74rem; color: var(--dim); margin-block-end: .5rem; }
.spark { inline-size: 100%; block-size: 26px; margin-block-start: auto; overflow: visible; }
.spark__line { fill: none; stroke: var(--lime); stroke-width: 1.5; stroke-linejoin: round; }
.spark__area { fill: rgb(163 230 53 / .12); stroke: none; }
.spark__dot { fill: var(--lime); }

/* --------------------------------------------------------------- logo wall */
.logos { padding-block: clamp(2.5rem, 5vw, 4rem); border-block: 1px solid var(--hair); }
.logos__label { display: block; text-align: center; color: var(--dim); }
.logo {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem 1rem;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--glass);
  color: var(--muted);
  white-space: nowrap;
  font-size: .8rem;
}

/* ------------------------------------------------------------------ pricing */
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.1rem; align-items: start; }
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.8rem 1.5rem;
  border: 1px solid var(--hair);
  border-radius: 20px;
  background: var(--glass);
  backdrop-filter: blur(12px);
}
.tier--featured {
  border-color: transparent;
  background:
    linear-gradient(rgb(11 9 24 / .92), rgb(11 9 24 / .92)) padding-box,
    var(--grad-hot) border-box;
  border: 1px solid transparent;
  box-shadow: 0 20px 60px -24px rgb(124 92 255 / .9);
}
.tier__flag {
  position: absolute;
  inset-block-start: -.7rem; inset-inline-start: 1.5rem;
  padding: .2rem .7rem;
  border-radius: 999px;
  background: var(--grad-hot);
  color: #0a0812;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tier__name { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
.tier__price { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; }
.tier__price i { font-style: normal; font-size: .34em; color: var(--dim); }
.tier__list { display: grid; gap: .55rem; font-size: .92rem; color: var(--muted); }
.tier .btn { justify-content: center; margin-block-start: auto; }

/* ------------------------------------------------------------------- closer */
.closer { padding-block: clamp(4rem, 10vw, 8rem); }
.closer__inner { max-inline-size: 48rem; margin-inline: auto; text-align: center; }
.closer__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 5.5vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin-block-end: 1.4rem;
}
.closer__body { color: var(--muted); font-size: 1.08rem; line-height: 1.68; }
.closer__body em { color: var(--lime); font-style: italic; }

/* -------------------------------------------------------------------- footer */
.foot { border-block-start: 1px solid var(--hair); padding-block: 2.5rem 3rem; background: rgb(0 0 0 / .3); }
.foot__inner { display: grid; gap: 1.5rem; }
@media (width >= 52rem) { .foot__inner { grid-template-columns: 2fr 1fr 1fr; align-items: start; } }
.foot__brand { font-weight: 700; margin-block-end: .5rem; }
.foot__note { font-size: .85rem; color: var(--dim); line-height: 1.6; max-inline-size: 34rem; }
.foot__note code { color: var(--cyan); }
.foot__badges, .foot__links { display: grid; gap: .5rem; font-size: .85rem; color: var(--muted); }
/* The box these sites sit on belongs to something real; the credit says so. */
.foot__host { margin-block-start: .8rem; font-size: .85rem; color: var(--muted); }
.foot__host a {
  color: var(--lime);
  text-decoration: underline;
  text-decoration-color: rgb(163 230 53 / .4);
  text-underline-offset: 3px;
}
.foot__host a:hover { text-decoration-color: var(--lime); }
.foot__links a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgb(34 211 238 / .35); text-underline-offset: 3px; }
.foot__links a:hover { text-decoration-color: var(--cyan); }

/* --------------------------------------------------------------------- modal */
.modal {
  inline-size: min(46rem, calc(100vw - 2rem));
  margin: auto;
  border-radius: 22px;
  background:
    linear-gradient(rgb(11 9 24 / .96), rgb(11 9 24 / .96)) padding-box,
    var(--grad-hot) border-box;
  border: 1px solid transparent;
  box-shadow: 0 40px 120px -40px rgb(0 0 0 / .9);
  overflow: auto;
}
.modal__close-form { position: sticky; inset-block-start: 0; display: flex; justify-content: flex-end; padding: .75rem .75rem 0; }
.modal__close {
  inline-size: 2rem; block-size: 2rem;
  display: grid; place-items: center;
  border: 1px solid var(--hair);
  border-radius: 50%;
  background: var(--glass);
  color: var(--muted);
  cursor: pointer;
}
.modal__close:hover { color: var(--fg); background: var(--glass-strong); }
.modal__body { padding: .5rem 1.8rem 2rem; display: grid; gap: 1rem; }
.modal__body--center { text-align: center; justify-items: center; padding-block-end: 2.4rem; }
.modal__emoji { font-size: 2.6rem; }
.modal__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.1; }
.modal__said {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  line-height: 1.25;
  padding-inline-start: 1rem;
  border-inline-start: 4px solid var(--violet);
}
.modal__truth, .modal__take, .modal__bet {
  padding: 1rem 1.1rem;
  border: 1px solid var(--hair);
  border-radius: 12px;
  background: rgb(0 0 0 / .3);
  color: var(--muted);
}
.modal__truth { border-inline-start: 3px solid var(--lime); }
.modal__take { border-inline-start: 3px solid var(--cyan); }
.modal__bet { border-inline-start: 3px solid var(--amber); }
.modal__bet em { color: var(--amber); }
.modal__meta { color: var(--dim); }
.modal__demo-copy { color: var(--muted); max-inline-size: 32rem; line-height: 1.65; }

/* Entrance for the dialog — one authored moment, then it stops. */
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: modal-in .28s cubic-bezier(.2,.9,.2,1); }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(14px) scale(.97); }
  }
}

/* Staggered reveal, driven by motion.dev (see app.js). */
.js .reveal { transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }