/*
 * SnipeOn's splash page — NEW-AI, third pass (28 Sep 2026).
 *
 * The second pass led with Monday Night War. This one leads with the everyday
 * product, auctions of single cards that end in the evening, and makes the War
 * one section among several. The research behind it is in docs/landing:
 * RESEARCH-2026-09-28.md, and layout-research.md §6 for the three layouts.
 *
 * DEMO: three layouts share this sheet until the meeting picks one. The rules
 * that only one layout uses sit under a "Layout A / B / C" heading, and the
 * switcher's rules under "Demo switcher". Delete the losers' sections then.
 *
 * Colours are the designer's STYLE sheet: a warm near-black like the N frames,
 * the lime action gradient, and magenta only where it means what it means in
 * the app, a PSA 10. The cards are drawn in CSS: placeholders until the
 * business photographs cards it owns (RESEARCH-2026-09-28.md §5).
 */
:root {
  --ground: #121112;
  --ground-deep: #0a0a0b;
  --surface: #1b1a1c;
  --surface-2: #232225;
  --line: rgb(255 255 255 / 0.1);
  --ink: #ffffff;
  --text: #ececef;
  --muted: #a8a7ad;
  --faint: #8d8c92;
  --lime-a: #ffff13;
  --lime-b: #66d400;
  --lime: linear-gradient(110deg, var(--lime-a), var(--lime-b));
  --magenta: #ff08ae;
  --on-lime: #0e0e0f;
  --label: #f1efe9;
  --radius: 16px;
  --gutter: 20px;
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/* Every layout and state is toggled with the hidden attribute, and a class
   that sets display must not bring it back. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgb(255 8 174 / 0.1), transparent 60%),
    radial-gradient(50rem 30rem at -20% 30%, rgb(160 240 10 / 0.06), transparent 60%),
    var(--ground);
  color: var(--text);
  font-family: var(--font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

/* Film grain: one fixed layer, no image request. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a {
  color: var(--ink);
  text-underline-offset: 3px;
}

a:hover {
  color: var(--lime-a);
}

.lime-text {
  background: var(--lime);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (forced-colors: active) {
  .lime-text {
    color: CanvasText;
    background: none;
  }
}

/* ---------- Demo switcher (DEMO: delete after the meeting) ---------- */

.demo-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px var(--gutter);
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  background: rgb(10 10 11 / 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px dashed rgb(255 255 255 / 0.18);
}

.demo-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.demo-tabs {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.demo-bar .demo-tab {
  min-height: 34px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.demo-bar .demo-tab:hover {
  color: var(--ink);
  box-shadow: none;
}

.demo-bar .demo-tab b {
  color: var(--ink);
  margin-right: 2px;
}

.demo-bar .demo-tab[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-lime);
}

.demo-bar .demo-tab[aria-pressed='true'] b {
  color: var(--on-lime);
}

.no-js .demo-bar {
  display: none;
}

@media (max-width: 560px) {
  .demo-bar .demo-tab span {
    display: none;
  }

  .demo-bar .demo-tab {
    min-width: 44px;
  }
}

/* ---------- Header ---------- */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px var(--gutter) 0;
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.lockup span {
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
}

.status-pill {
  margin: 0;
  white-space: nowrap;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- The intro: headline, paragraph, form ---------- */

.hero {
  position: relative;
  display: grid;
  gap: 20px;
  padding: 20px 0 40px;
}

.intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

h1 {
  margin: 0;
  max-width: 13ch;
  font-weight: 800;
  font-size: clamp(2.3rem, 10vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}

.lead {
  margin: 14px 0 0;
  max-width: 38ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}

.join {
  margin-top: 18px;
}

.waitlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.no-js .waitlist {
  display: none;
}

.waitlist label {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.field-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

input[type='email'] {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 17px; /* iOS zooms into anything under 16px */
}

input[type='email']::placeholder {
  color: var(--faint);
}

input[type='email']:focus {
  outline: 2px solid var(--lime-a);
  outline-offset: 2px;
}

input[aria-invalid='true'] {
  border-color: #ff6b6b;
}

button {
  min-height: 56px;
  margin-top: 4px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  color: var(--on-lime);
  background: var(--lime);
  box-shadow: 0 10px 32px rgb(160 230 0 / 0.28);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

button:hover {
  box-shadow: 0 12px 40px rgb(160 230 0 / 0.4);
}

button:active {
  transform: scale(0.98);
}

button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

button[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.field-row button {
  margin: 0;
}

.fine {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--faint);
}

.status {
  margin: 0;
  font-size: 14px;
}

.status:empty {
  display: none;
}

.status.error {
  color: #ff8a8a;
}

.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The confirmation: the moment people are most willing, so it is loud. */
.joined {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  padding: 22px 20px;
  border-radius: var(--radius);
  border: 1px solid rgb(160 230 0 / 0.5);
  background:
    radial-gradient(30rem 12rem at 0% 0%, rgb(180 240 10 / 0.14), transparent 70%),
    var(--surface);
}

.joined[hidden] {
  display: none;
}

.joined-title {
  margin: 0;
  font-weight: 800;
  font-size: 30px;
  line-height: 1.1;
  background: var(--lime);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.joined-title:focus {
  outline: none;
}

.joined p {
  margin: 0;
}

/* ---------- A slab, drawn ----------
 * A graded card in its case: the clear plastic, a label strip, and the card
 * behind it. Everything inside scales with the slab's width (cq units), so
 * one component serves a 50 px thumbnail and a 240 px hero. The case is drawn
 * on ::before because cq units on the slab's own box would measure the
 * container *around* it. `--h` sets the card's colour, and `--glow` the
 * shadow. Placeholder art: no player, no brand, no grader's mark. */

.slab {
  --h: 330;
  --glow: rgb(0 0 0 / 0.45);
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 0.62;
  display: flex;
  flex-direction: column;
}

.slab::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 7cqw;
  border: 1px solid rgb(255 255 255 / 0.24);
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.2), rgb(255 255 255 / 0.04) 45%, rgb(255 255 255 / 0.1)),
    rgb(30 30 34 / 0.75);
  box-shadow:
    inset 0 0 0 1.5cqw rgb(255 255 255 / 0.05),
    0 6cqw 16cqw var(--glow);
}

.slab-label {
  position: relative;
  margin: 6cqw 6cqw 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4cqw;
  min-height: 17cqw;
  padding: 2.5cqw 5cqw;
  border-radius: 2.5cqw;
  background: var(--label);
  color: #1a1a1c;
}

.slab-label span {
  font-size: 5.6cqw;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.slab-label b {
  margin-left: auto;
  font-size: 12cqw;
  font-weight: 800;
  line-height: 1;
}

.slab-card {
  position: relative;
  margin: 4cqw 6cqw 6cqw;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 3.5cqw solid #f4f2ec;
  border-radius: 2.5cqw;
  background:
    linear-gradient(125deg, transparent 38%, rgb(255 255 255 / 0.35) 47%, transparent 56%),
    repeating-linear-gradient(115deg, hsl(var(--h) 90% 70% / 0.18) 0 2px, transparent 2px 9px),
    radial-gradient(circle at 50% 36%, hsl(var(--h) 85% 60%), hsl(calc(var(--h) + 40) 70% 24%) 75%);
}

.slab-card i {
  font-style: normal;
  font-weight: 800;
  font-size: 34cqw;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgb(255 255 255 / 0.92);
  text-shadow: 0 2px 10px rgb(0 0 0 / 0.35);
}

/* The nameplate along the bottom of the card. */
.slab-card::after {
  content: '';
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 7%;
  height: 7%;
  border-radius: 1.5cqw;
  background: rgb(0 0 0 / 0.35);
}

/* Time on the photo, as Cars & Bids does it: text, so it weighs nothing. */
.chip {
  display: inline-block;
  margin: 0;
  padding: 5px 11px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 999px;
  background: rgb(14 14 15 / 0.86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- Layout A: a fan of slabs ---------- */

.hero-a .fan {
  order: -1;
}

.fan {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 176px;
  padding-bottom: 14px;
}

.fan .slab {
  flex: none;
}

.fan .slab-main {
  --glow: rgb(255 8 174 / 0.4);
  z-index: 2;
  width: 104px;
}

.fan .slab-side {
  width: 88px;
  margin-bottom: 6px;
}

.fan .slab-side:first-child {
  margin-right: -22px;
  transform: rotate(-9deg);
}

.fan .slab-side:nth-child(3) {
  margin-left: -22px;
  transform: rotate(9deg);
}

.fan-chip {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

/* ---------- Layout B: a wall of slabs ---------- */

.hero-b {
  /* Full bleed: the wall runs edge to edge, whatever main's width. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 120px var(--gutter);
  overflow: hidden;
}

.wall {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}

.wall-row {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: drift 90s linear infinite;
}

.wall-row:nth-child(even) {
  animation-direction: reverse;
  margin-left: -60px;
}

.wall .slab {
  width: 84px;
  flex: none;
}

@keyframes drift {
  to {
    transform: translateX(-50%);
  }
}

.panel-solid {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 24px 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--ground);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.6);
}

/* ---------- Layout C: the feed in a phone ---------- */

.phone-wrap {
  margin: 0;
  max-height: 460px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 78%, transparent);
  mask-image: linear-gradient(#000 78%, transparent);
}

.phone {
  width: 290px;
  max-width: 100%;
  margin: 0 auto;
  padding: 9px;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 44px;
  background: #050506;
  box-shadow:
    0 40px 100px rgb(0 0 0 / 0.6),
    0 0 80px rgb(160 230 0 / 0.08);
}

.phone-screen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 13px 16px;
  border-radius: 35px;
  background: #141315;
}

.phone-screen p {
  margin: 0;
}

.app-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}

.app-dots {
  width: 38px;
  height: 11px;
  border-radius: 999px;
  background: #050506;
}

.app-tabs {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: var(--faint);
}

.app-tabs b {
  color: var(--ink);
  font-weight: 800;
  box-shadow: 0 2px 0 var(--lime-b);
}

.app-strip-title {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.app-strip-title span {
  font-size: 12px;
  font-weight: 500;
  color: var(--faint);
}

.app-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.mini {
  display: grid;
  gap: 4px;
  justify-items: center;
}

.mini span {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.mini .slab {
  --glow: transparent;
}

.app-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 12px 12px;
  border-radius: 20px;
  background: var(--surface-2);
}

.app-card .slab {
  --glow: rgb(255 8 174 / 0.35);
  width: 58%;
  margin: 0 auto 6px;
}

.app-meta {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.app-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.app-row {
  display: flex;
  justify-content: space-between;
}

.app-row span {
  display: block;
  font-size: 11px;
  color: var(--faint);
}

.app-row b {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
}

.app-row b.lime-text {
  color: transparent;
}

.app-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.app-actions span {
  display: grid;
  place-items: center;
  min-height: 40px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
}

.app-bid {
  flex: 1;
  background: var(--lime);
  color: var(--on-lime);
}

.app-watch {
  padding: 0 16px;
  border: 1px solid var(--line);
  color: var(--ink);
}

.phone-wrap figcaption {
  display: none;
}

/* ---------- Example listings ---------- */

.listings {
  padding: 48px 0 44px;
  /* A band a step darker than the page, full width: Alt's slab band. */
  background: var(--ground-deep);
  box-shadow: 0 0 0 100vmax var(--ground-deep);
  clip-path: inset(0 -100vmax);
}

.listings-head {
  max-width: 62ch;
}

.listings-head p {
  margin: 0 0 8px;
  color: var(--muted);
}

.listings-head .example-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--faint);
}

.listings-head .example-tag {
  margin-left: 0;
}

.rail {
  list-style: none;
  margin: 20px calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter) 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 44%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

.lot {
  scroll-snap-align: start;
  min-width: 0;
}

.lot p {
  margin: 0;
}

.lot .lot-grade {
  margin-top: 10px;
}

.lot .lot-price {
  margin-top: 4px;
}

.lot-photo {
  position: relative;
  display: grid;
  place-items: center;
  padding: 16px 16px 26px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: radial-gradient(circle at 50% 30%, #2a2a2e, #161618 70%);
}

.lot-photo .slab {
  max-width: 130px;
}

.lot-photo .chip {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
}

.lot-grade {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.lot-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.lot-price {
  font-size: 13px;
  color: var(--faint);
}

.lot-price b {
  font-size: 16px;
  font-weight: 800;
}

/* Layout B shows the same lots as a grid under the wall. */
[data-layout='b'] .rail {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, 1fr);
  margin-inline: 0;
  padding-inline: 0;
  overflow: visible;
}

/* ---------- Sections ---------- */

.section {
  padding: 56px 0 8px;
}

h2 {
  margin: 0 0 16px;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

h3 {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

.bidding-grid {
  display: grid;
  gap: 22px;
}

.bidding-grid > div {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.bidding-grid p {
  margin: 6px 0 0;
  color: var(--muted);
}

/* The War: one feature among the others, still with its clock. */
.war-tile {
  position: relative;
  display: grid;
  gap: 22px;
  padding: 26px 22px;
  border: 1px solid rgb(160 230 0 / 0.3);
  border-radius: 22px;
  background:
    radial-gradient(28rem 16rem at 100% 0%, rgb(255 8 174 / 0.14), transparent 70%),
    radial-gradient(24rem 14rem at 0% 100%, rgb(160 230 0 / 0.1), transparent 70%),
    var(--surface);
}

.war-lockup {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.war-copy h2 {
  font-size: 30px;
  margin-bottom: 12px;
}

.war-copy p {
  margin: 0 0 10px;
  max-width: 46ch;
  color: var(--text);
}

.war-copy b.lime-text {
  font-weight: 800;
}

/* The weekly slot. A countdown only once a first War is dated. */
.clock {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ground);
}

.clock p {
  margin: 0;
}

.clock .clock-value,
.clock .clock-note {
  margin-top: 4px;
}

.clock-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime-a);
}

.clock-value {
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
}

/* Poppins has no tabular figures, so each digit of a live countdown sits in a
   fixed-width cell or the clock shakes as it ticks. */
.clock-value .digit {
  display: inline-block;
  width: 0.68em;
  text-align: center;
}

.clock-value .unit {
  margin: 0 0.35em 0 0.1em;
  font-size: 0.6em;
  font-weight: 700;
  color: var(--muted);
}

.clock-note {
  font-size: 14px;
  color: var(--muted);
}

.rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.rule-list li {
  padding: 14px 0 14px 30px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  background: url('assets/mark.svg') left 18px / 16px 16px no-repeat;
}

.rule-list li:first-child {
  border-top: 1px solid var(--line);
}

.rule-list b {
  color: var(--ink);
  font-weight: 700;
}

.xp-line {
  margin: 24px 0 0;
  color: var(--muted);
}

.basics {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--faint);
}

.basics a {
  color: var(--muted);
}

.social {
  padding: 48px 0 8px;
}

.social-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.social-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  font-weight: 700;
}

.social-links a span {
  font-weight: 500;
  color: var(--muted);
}

.foot {
  max-width: 1120px;
  margin: 48px auto 0;
  padding: 24px var(--gutter) calc(96px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--faint);
}

.foot p {
  margin: 0;
}

.foot a {
  color: var(--muted);
}

/* A placeholder, marked so nobody mistakes it for the real thing. */
.example-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px dashed var(--faint);
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  vertical-align: 2px;
}

/* ---------- Sticky bar, once the form is off screen ---------- */

.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: rgb(18 17 18 / 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}

.sticky[hidden] {
  display: none;
}

.sticky button {
  width: 100%;
  max-width: 440px;
  min-height: 48px;
  margin: 0;
  font-size: 16px;
}

/* ---------- Scroll-in, where the browser supports it ---------- */

@supports (animation-timeline: view()) {
  .rise {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }

  @keyframes rise {
    /* Movement only: a section is readable before it has scrolled in. */
    from {
      transform: translateY(18px);
    }
    to {
      transform: none;
    }
  }
}

/* ---------- Wide screens ---------- */

@media (min-width: 900px) {
  :root {
    --gutter: 40px;
  }

  h1 {
    font-size: 4.4rem;
  }

  .lead {
    font-size: 19px;
  }

  .join {
    margin-top: 26px;
  }

  .field-row {
    flex-direction: row;
  }

  .field-row input {
    flex: 1;
    min-height: 56px;
  }

  /* Layout A: intro left, the fan right. */
  .hero-a {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 40px;
    min-height: min(720px, calc(100svh - 120px));
    padding: 40px 0 64px;
  }

  .hero-a .fan {
    order: 0;
    height: 440px;
    padding-bottom: 30px;
  }

  .fan .slab-main {
    width: 230px;
  }

  .fan .slab-side {
    width: 190px;
    margin-bottom: 20px;
  }

  .fan .slab-side:first-child {
    margin-right: -60px;
  }

  .fan .slab-side:nth-child(3) {
    margin-left: -60px;
  }

  .fan-chip {
    font-size: 14px;
    padding: 8px 14px;
  }

  /* Layout B */
  .hero-b {
    padding: 120px var(--gutter);
  }

  .wall {
    gap: 22px;
  }

  .wall-row {
    gap: 22px;
  }

  .wall .slab {
    width: 130px;
  }

  .panel-solid {
    max-width: 680px;
    padding: 40px 44px;
  }

  .panel-solid h1 {
    max-width: none;
    font-size: 3.6rem;
  }

  /* Layout C: intro left, the phone right. */
  .hero-c {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;
    gap: 40px;
    padding: 40px 0 64px;
  }

  .phone-wrap {
    max-height: none;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .phone {
    width: 320px;
    transform: rotate(3deg);
  }

  .phone-wrap figcaption {
    display: block;
    margin-top: 18px;
    font-size: 13px;
    text-align: center;
    color: var(--faint);
  }

  .listings {
    padding: 72px 0 64px;
  }

  .rail {
    margin: 28px 0 0;
    padding: 0;
    grid-auto-flow: row;
    grid-template-columns: repeat(6, 1fr);
    overflow: visible;
  }

  [data-layout='b'] .rail {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  [data-layout='b'] .lot-photo .slab {
    max-width: 150px;
  }

  .section {
    padding-top: 80px;
  }

  h2 {
    font-size: 34px;
  }

  .bidding-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }

  .war-tile {
    grid-template-columns: 1.4fr 0.8fr;
    align-items: center;
    gap: 40px;
    padding: 44px;
  }

  .war-copy h2 {
    font-size: 44px;
  }

  .rule-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }

  .rule-list li,
  .rule-list li:first-child {
    border: 0;
    border-top: 1px solid var(--line);
  }

  .sticky {
    display: none;
  }
}

/* Short phones (iPhone SE and the like): a smaller fan and headline, so the
   button still makes the first screen. */
@media (max-width: 899px) and (max-height: 700px) {
  .fan {
    height: 132px;
    padding-bottom: 10px;
  }

  .fan .slab-main {
    width: 76px;
  }

  .fan .slab-side {
    width: 64px;
  }

  h1 {
    font-size: 2.1rem;
  }

  .lead {
    font-size: 15px;
    margin-top: 10px;
  }

  .join {
    margin-top: 14px;
  }

  .hero-b {
    padding-top: 96px;
  }
}

/* The shortest phones (iPhone SE at 568 px): smaller again, and the email
   field's label goes visually, since the placeholder and the button say what
   it is. Screen readers still get it. */
@media (max-width: 899px) and (max-height: 600px) {
  .top {
    padding-top: 10px;
  }

  .hero {
    padding-top: 12px;
    gap: 12px;
  }

  .fan {
    height: 100px;
    padding-bottom: 8px;
  }

  .fan .slab-main {
    width: 56px;
  }

  .fan .slab-side {
    width: 48px;
  }

  .fan .slab-side:first-child {
    margin-right: -14px;
  }

  .fan .slab-side:nth-child(3) {
    margin-left: -14px;
  }

  .fan-chip {
    padding: 3px 9px;
    font-size: 11px;
  }

  h1 {
    font-size: 1.85rem;
  }

  .lead {
    font-size: 14px;
  }

  .join {
    margin-top: 10px;
  }

  .waitlist label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .hero-b {
    padding-top: 72px;
  }

  .panel-solid {
    padding: 18px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .wall-row {
    animation: none;
  }

  .rise {
    animation: none !important;
  }

  button {
    transition: none;
  }
}

/* ---------- The privacy page ---------- */

.prose {
  max-width: 640px;
  padding: 40px 0 8px;
}

.prose h1 {
  max-width: none;
  font-size: 44px;
  margin-bottom: 24px;
}

.prose h2 {
  font-size: 21px;
  margin: 28px 0 8px;
}

.prose p {
  margin: 0 0 14px;
  color: var(--muted);
}