/* The screens. Everything on the site that stands for a real screen in Times
   Square is drawn here: an LED face with its pixel grid and its glow, the
   square itself at night as the home page opens on it, the tote board that
   counts a coin up to its booking, and the few pieces around them.
   Colours come from the tokens in extra.css; the only colour that is not the
   site's blue is the warm white and amber of the lamps. */

/* ------------------------------------------------------------ LED face */

.led {
  position: relative;
  overflow: hidden;
  background: #020409;
  border-radius: 6px;
  isolation: isolate;
}
.led > .led-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The pixel grid and a slow scan: what makes a picture read as a screen. */
.led::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.55));
  mix-blend-mode: multiply;
}
.led::before {
  content: '';
  position: absolute;
  inset: -40% 0 auto 0;
  height: 40%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  animation: led-scan 5.5s linear infinite;
}
@keyframes led-scan {
  to {
    transform: translateY(350%);
  }
}
.led-glow {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 24px -2px color-mix(in oklab, var(--tint, var(--primary)) 55%, transparent),
    0 0 90px -10px color-mix(in oklab, var(--tint, var(--primary)) 45%, transparent);
}

/* The ad a coin runs when it has not uploaded its own: its picture, its
   ticker as big as the screen allows, and the one line that says why it is
   there. Laid out in container units so it reads the same at any size. */
.ad {
  position: absolute;
  inset: 0;
  container-type: size;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 5%;
  padding: 5% 7%;
  color: #fff;
  background:
    radial-gradient(80% 120% at 0% 100%, color-mix(in oklab, var(--tint, var(--primary)) 60%, transparent), transparent 60%),
    radial-gradient(70% 90% at 100% 0%, color-mix(in oklab, var(--tint2, var(--led-hot)) 45%, transparent), transparent 65%),
    #050814;
}
.ad-pic {
  width: 34cqh;
  height: 34cqh;
  min-width: 34cqh;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 0 0 0.9cqh rgba(255, 255, 255, 0.9), 0 0 6cqh color-mix(in oklab, var(--tint, var(--primary)) 70%, transparent);
  background: #111;
}
.ad-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ad-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2.5cqh;
}
.ad-kicker {
  font-size: clamp(6px, 7cqh, 40px);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--led);
}
.ad-ticker {
  font-size: clamp(8px, min(28cqh, calc(92cqw / var(--len, 7))), 220px);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.ad-line {
  font-size: clamp(6px, 7.5cqh, 44px);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Tall screens stack the picture over the words. */
.ad.ad-tall {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  justify-items: start;
  align-content: end;
  gap: 3%;
  padding: 9%;
}
.ad.ad-tall .ad-pic {
  width: 40cqw;
  height: 40cqw;
  min-width: 0;
}
.ad.ad-tall .ad-ticker {
  font-size: clamp(8px, min(14cqh, calc(150cqw / var(--len, 7))), 220px);
}
.ad.ad-tall .ad-kicker,
.ad.ad-tall .ad-line {
  font-size: clamp(6px, 5cqw, 40px);
}

/* ---------------------------------------------------- the square at night */

.ts {
  position: relative;
  width: 100%;
  height: clamp(360px, 52vw, 560px);
  border-radius: 1.5rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(60% 55% at 50% 38%, rgba(31, 143, 255, 0.2), transparent 70%),
    linear-gradient(180deg, #02040a 0%, #050a17 52%, #0a0f1c 70%, #03050b 100%);
  perspective: 900px;
  perspective-origin: 50% 42%;
}
/* The sky over the square is never dark: a haze of every screen at once. */
.ts::before {
  content: '';
  position: absolute;
  inset: 0 0 45% 0;
  background:
    radial-gradient(30% 60% at 22% 0%, rgba(255, 61, 127, 0.18), transparent 70%),
    radial-gradient(30% 60% at 78% 0%, rgba(255, 209, 102, 0.14), transparent 70%);
  pointer-events: none;
}
.ts-world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* The two walls of buildings, hinged at their near edge and swung back. */
.ts-wall {
  position: absolute;
  top: -14%;
  height: 88%;
  width: 46%;
  transform-style: preserve-3d;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 22px 100%,
    linear-gradient(0deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(180deg, #0b1020, #070b16 60%, #05080f);
}
.ts-left {
  left: 0;
  transform-origin: 0% 50%;
  transform: rotateY(62deg);
}
.ts-right {
  right: 0;
  transform-origin: 100% 50%;
  transform: rotateY(-62deg);
}
/* Lit windows, a few, not a grid of them. */
.ts-wall::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(2px 3px at 12% 88%, #ffd9a0, transparent),
    radial-gradient(2px 3px at 31% 92%, #ffd9a0, transparent),
    radial-gradient(2px 3px at 58% 86%, #cfe6ff, transparent),
    radial-gradient(2px 3px at 77% 94%, #ffd9a0, transparent),
    radial-gradient(2px 3px at 88% 83%, #cfe6ff, transparent);
  opacity: 0.8;
  pointer-events: none;
}
.ts-slot {
  position: absolute;
}
.ts-slot > .led {
  width: 100%;
  height: 100%;
}

/* The building at the end of the square: the one screen that faces you. */
.ts-back {
  position: absolute;
  left: 50%;
  top: -4%;
  width: 36%;
  height: 78%;
  transform: translateX(-50%) translateZ(-160px);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) 0 0 / 18px 100%,
    linear-gradient(180deg, #0a0f1f, #060912);
  border-radius: 2px;
}

/* The street, drawn flat in one point perspective: a wet road that takes
   the colour of the screens, its lanes running to the building at the end,
   and the crossing in front. */
.ts-street {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 27%;
  pointer-events: none;
}
.ts-street svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Vertical signs on the corners, the way the square stacks its names. */
.ts-strip {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  border-radius: 3px;
  background: #07040a;
  font-weight: 800;
  line-height: 1;
  color: var(--c, var(--led-hot));
  text-shadow: 0 0 8px var(--c, var(--led-hot)), 0 0 20px var(--c, var(--led-hot));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 30px -6px var(--c, var(--led-hot));
  font-size: clamp(9px, 1.35vw, 18px);
}
.ts-strip span {
  animation: strip-flick 7s steps(1) infinite;
  animation-delay: var(--f, 0s);
}
@keyframes strip-flick {
  0%, 92%, 96% { opacity: 1; }
  94%, 98% { opacity: 0.35; }
}
.ts-lane {
  position: absolute;
  bottom: 6%;
  height: 16%;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.ts-lane i {
  position: absolute;
  height: 2px;
  width: 22%;
  border-radius: 2px;
  filter: blur(0.6px);
  animation: ts-drive var(--t, 3.6s) linear infinite;
  animation-delay: var(--d, 0s);
  opacity: 0;
}
.ts-lane i.w {
  background: linear-gradient(90deg, transparent, #fff6e0);
  box-shadow: 0 0 10px #fff1c9;
}
.ts-lane i.r {
  background: linear-gradient(270deg, transparent, #ff4d5a);
  box-shadow: 0 0 10px #ff4d5a;
  animation-name: ts-drive-back;
}
@keyframes ts-drive {
  0% {
    transform: translateX(-30%);
    opacity: 0;
  }
  10%,
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(560%);
    opacity: 0;
  }
}
@keyframes ts-drive-back {
  0% {
    transform: translateX(560%);
    opacity: 0;
  }
  10%,
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(-30%);
    opacity: 0;
  }
}
/* The crowd along the bottom edge, as one dark line of heads. */
.ts-crowd {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12%;
  background: radial-gradient(9px 12px at 9px 100%, #010207 98%, transparent) 0 100% / 17px 100% repeat-x,
    radial-gradient(8px 10px at 8px 100%, #010207 98%, transparent) 7px 100% / 23px 88% repeat-x,
    linear-gradient(180deg, transparent 55%, #010207 55%);
  opacity: 0.95;
  pointer-events: none;
}
/* The chip that says whose ad this is and how close the next one is. */
.ts-tag {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.9rem 0.5rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(3, 6, 14, 0.78);
  backdrop-filter: blur(10px);
  font-size: 0.8125rem;
  white-space: nowrap;
  max-width: calc(100% - 2rem);
}
.ts-tag .bar {
  width: 88px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.ts-tag .bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--gold));
}
.ts-live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff5470;
}
.ts-live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
  animation: pulse-dot 1.4s ease-in-out infinite;
}
@keyframes pulse-dot {
  50% {
    opacity: 0.35;
  }
}

/* Ads change the way a screen changes: a hard wipe, not a fade. */
.swap-in {
  animation: swap-in 520ms cubic-bezier(0.2, 0.7, 0.1, 1) both;
}
@keyframes swap-in {
  0% {
    clip-path: inset(0 0 100% 0);
    filter: brightness(2.2);
  }
  60% {
    filter: brightness(1.3);
  }
  100% {
    clip-path: inset(0 0 0 0);
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .led::before,
  .ts-lane i,
  .ts-strip span,
  .swap-in,
  .ts-live::before {
    animation: none !important;
  }
  .ts-lane i {
    opacity: 0.6;
  }
}

/* ------------------------------------------------------------ tote board */

/* How far a coin is to its booking: a heavy bar with the goal at its end,
   the amount in front and the time it will take under it. */
.tote {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--foreground) 8%, transparent);
  overflow: hidden;
}
.tote > span {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #1673d9, var(--primary) 60%, var(--gold));
  box-shadow: 0 0 18px -2px rgba(31, 143, 255, 0.7);
  transition: width 900ms cubic-bezier(0.2, 0.7, 0.1, 1);
}
.tote > span::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 0 6px, transparent 6px 12px);
  animation: tote-run 1.2s linear infinite;
}
@keyframes tote-run {
  to {
    background-position: 17px 0;
  }
}
.tote.tote-sm {
  height: 6px;
}
.tote.tote-sm > span {
  box-shadow: none;
}
.tote.tote-sm > span::after {
  display: none;
}
.tote.is-done > span {
  background: linear-gradient(90deg, #1fae62, #46d369);
  box-shadow: 0 0 18px -2px rgba(70, 211, 105, 0.6);
}

/* The digits of the board, lit. */
.digits {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-shadow: 0 0 22px rgba(31, 143, 255, 0.35);
}

/* ---------------------------------------------------------- status pill */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 1.5rem;
  padding: 0 0.6rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  background: color-mix(in oklab, var(--card) 70%, transparent);
  white-space: nowrap;
}
.pill::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.pill-funding {
  color: var(--primary);
  border-color: color-mix(in oklab, var(--primary) 35%, transparent);
}
.pill-funded,
.pill-ordered {
  color: var(--led);
  border-color: color-mix(in oklab, var(--led) 35%, transparent);
}
.pill-scheduled {
  color: #b99bff;
  border-color: color-mix(in oklab, #b99bff 35%, transparent);
}
.pill-aired {
  color: var(--up);
  border-color: color-mix(in oklab, var(--up) 35%, transparent);
}
.pill-rejected {
  color: var(--down);
  border-color: color-mix(in oklab, var(--down) 35%, transparent);
}

/* The steps of a booking, from the first fee to the video. */
.track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}
.track li {
  position: relative;
  padding-top: 1.1rem;
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.track li::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--foreground) 10%, transparent);
}
.track li.done::before {
  background: var(--primary);
}
.track li.now::before {
  background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--foreground) 10%, transparent));
}
.track li.done,
.track li.now {
  color: var(--foreground);
}
.track li b {
  display: block;
  font-weight: 600;
  font-size: 0.8125rem;
}

/* ------------------------------------------------------- screen picker */

.pick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: var(--card);
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, transform 150ms ease, background 150ms ease;
}
.pick:hover {
  border-color: color-mix(in oklab, var(--foreground) 22%, transparent);
  transform: translateY(-2px);
}
.pick[aria-pressed='true'] {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 7%, var(--card));
  box-shadow: 0 0 0 1px var(--primary), 0 18px 40px -24px rgba(31, 143, 255, 0.8);
}
.pick-art {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 0.7rem;
  overflow: hidden;
  background: linear-gradient(180deg, #050915, #0a1020);
}
.pick-art .led {
  position: absolute;
}
.days {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}
.days button {
  height: 3.25rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border);
  background: var(--card);
  font-weight: 600;
  font-size: 1.05rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  transition: border-color 150ms ease, background 150ms ease;
}
.days button small {
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.days button[aria-pressed='true'] {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, var(--card));
  box-shadow: 0 0 0 1px var(--primary);
}

/* ------------------------------------------------------------ misc */

.headline {
  font-size: clamp(2.5rem, 6.4vw, 4.75rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 700;
  text-wrap: balance;
}
.headline em {
  font-style: normal;
  color: var(--primary);
}
.eyebrow-led {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem 0.3rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklab, var(--card) 80%, transparent);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.eyebrow-led b {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.sec-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.sec-title::before {
  content: '';
  width: 4px;
  height: 20px;
  border-radius: 999px;
  background: var(--primary);
}
.ticker-tape {
  display: flex;
  overflow: hidden;
  border-block: 1px solid var(--border);
  background: #04070f;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-tape > div {
  display: flex;
  flex-shrink: 0;
  gap: 2.5rem;
  padding: 0.7rem 1.25rem;
  animation: tape 60s linear infinite;
  font-family: var(--default-mono-font-family);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.ticker-tape:hover > div {
  animation-play-state: paused;
}
@keyframes tape {
  to {
    transform: translateX(-100%);
  }
}
.ticker-tape b {
  color: var(--led);
  font-weight: 600;
}
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 9rem;
  border: 1.5px dashed color-mix(in oklab, var(--foreground) 20%, transparent);
  border-radius: 1rem;
  background: color-mix(in oklab, var(--card) 60%, transparent);
  text-align: center;
  transition: border-color 150ms ease, background 150ms ease;
  cursor: pointer;
}
.dropzone:hover,
.dropzone.is-over {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 6%, var(--card));
}

/* The news zipper along the foot of the building at the end. */
.ts-zipper {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 8%;
  height: 13%;
  overflow: hidden;
  border-radius: 3px;
  background: #020409;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 30px -6px rgba(255, 209, 102, 0.4);
}
.ts-zipper .ticker-tape {
  height: 100%;
  border: 0;
  align-items: center;
}
.ts-zipper .ticker-tape > div {
  padding: 0 1rem;
  font-size: clamp(7px, 1.1vw, 12px);
}

/* The figures under the square, on one heavy band. */
.statband {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  background: var(--card);
  overflow: hidden;
}
@media (min-width: 48rem) {
  .statband {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.statband > div {
  padding: 1.1rem 1.25rem;
  text-align: left;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.statband dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted-foreground);
}
.statband dd {
  margin-top: 0.4rem;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* How it works: four numbered moments on one rail. */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}
@media (min-width: 40rem) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.steps li {
  position: relative;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  overflow: hidden;
}
.steps-n {
  position: absolute;
  right: 1rem;
  top: 0.6rem;
  font-size: 2.75rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: color-mix(in oklab, var(--foreground) 7%, transparent);
}

/* The launch form. */
.form-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.form-step span {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.75rem;
  font-weight: 700;
}
.goal-line {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in oklab, var(--primary) 30%, var(--border));
  border-radius: 1rem;
  background: color-mix(in oklab, var(--primary) 6%, var(--card));
}
/* The big preview: the chosen screen, at night, with the ad on it. */
.preview-stage {
  position: relative;
  aspect-ratio: 16 / 11;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(70% 60% at 50% 40%, rgba(31, 143, 255, 0.22), transparent 70%),
    linear-gradient(180deg, #03050c, #0a1122 70%, #05070e);
}
.preview-stage .preview-led {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 16%;
  aspect-ratio: 16 / 9;
}
.preview-stage.is-tall .preview-led {
  left: 50%;
  right: auto;
  top: 7%;
  height: 86%;
  aspect-ratio: auto;
  width: 50%;
  transform: translateX(-50%);
}

/* ------------------------------------------------ the real square, live */

.real {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #05070d;
  isolation: isolate;
}
.real-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.real-face {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
.real-ad {
  position: absolute;
  inset: 0;
  overflow: hidden;
  filter: saturate(1.12) brightness(1.06);
  box-shadow: 0 0 60px 10px color-mix(in oklab, var(--tint, var(--primary)) 45%, transparent);
}
/* The same pixel grid as the site's own screens, faint, so the ad reads as
   light coming off a wall rather than a sticker on a photo. */
.real-ad::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 5px);
  pointer-events: none;
}
.real-credit {
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  z-index: 3;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.7);
  font-size: 9px;
  line-height: 1.4;
}
.real-pin {
  position: absolute;
  z-index: 4;
  left: 0.75rem;
  top: 0.75rem;
}

/* The live square behind the opening of the home page. */
.live {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--border);
  background: #02040a;
  min-height: clamp(520px, 62vw, 700px);
  isolation: isolate;
}
.live-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* The stream is 16 by 9; it is drawn larger than the box and centred, so it
   always covers it and the player's own title bar falls outside. */
.live-video iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(var(--h, 700px) * 16 / 9));
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 100%;
  transform: translate(-50%, -50%) scale(1.18);
  border: 0;
}
.live::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2, 4, 10, 0.92) 0%, rgba(2, 4, 10, 0.7) 38%, rgba(2, 4, 10, 0.15) 70%, rgba(2, 4, 10, 0.05) 100%),
    linear-gradient(0deg, rgba(2, 4, 10, 0.9) 0%, transparent 38%);
}
.live-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: inherit;
  padding: clamp(1.25rem, 3.5vw, 2.75rem);
}
.live-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.8rem 0.35rem 0.6rem;
  border-radius: 999px;
  background: rgba(2, 4, 10, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.8);
}
.live-cams {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: rgba(2, 4, 10, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
}
.live-cams button {
  height: 1.9rem;
  padding: 0 0.8rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: background 150ms ease, color 150ms ease;
}
.live-cams button:hover {
  color: #fff;
}
.live-cams button[aria-pressed='true'] {
  background: #fff;
  color: #04121f;
}
.live-copy {
  max-width: 40rem;
  text-align: left;
}
.live-copy .headline {
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
}
.live-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
}
.live-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}


/* Lengths: airtime and whole days, each with its price. */
.lengths {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (min-width: 40rem) {
  .lengths {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.lengths button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  height: 3.4rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border);
  background: var(--card);
  transition: border-color 150ms ease, background 150ms ease;
}
.lengths button span {
  font-weight: 600;
  font-size: 0.95rem;
}
.lengths button small {
  font-size: 0.7rem;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.lengths button:hover {
  border-color: color-mix(in oklab, var(--foreground) 22%, transparent);
}
.lengths button[aria-pressed='true'] {
  border-color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, var(--card));
  box-shadow: 0 0 0 1px var(--primary);
}
.lengths button[aria-pressed='true'] small {
  color: var(--foreground);
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.375rem;
}
@media (min-width: 40rem) {
  .price-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.price-cell {
  display: block;
  padding: 0.5rem 0.25rem;
  border-radius: 0.6rem;
  border: 1px solid var(--border);
  background: var(--background);
  text-align: center;
  transition: border-color 150ms ease;
}
.price-cell:hover {
  border-color: var(--primary);
}
.price-cell dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}
.price-cell dd {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}


/* An uploaded ad fills its face the way the screen would show it. */
.real-ad > .led-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* The empty face: what a screen shows before a coin has booked it. */
.adph {
  position: absolute;
  inset: 0;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3cqh;
  background:
    radial-gradient(70% 90% at 50% 120%, rgba(31, 143, 255, 0.55), transparent 70%),
    linear-gradient(180deg, #06101f, #030712);
  color: #fff;
  text-align: center;
}
.adph::before {
  content: '';
  position: absolute;
  inset: 5cqh 4cqw;
  border: 0.5cqh dashed rgba(255, 255, 255, 0.28);
  border-radius: 2cqh;
}
.adph-mark {
  width: 16cqh;
  height: 16cqh;
}
.adph-title {
  font-size: clamp(8px, min(15cqh, 11cqw), 180px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.adph-line {
  font-size: clamp(6px, 5.5cqh, 44px);
  color: rgba(255, 255, 255, 0.7);
}
.adph-tall .adph-title {
  font-size: clamp(8px, 16cqw, 180px);
}
.adph-tall .adph-line {
  font-size: clamp(6px, 5.5cqw, 44px);
}

/* ------------------------------------------------------- home, polished */

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.78);
}
.hero-proof li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.hero-proof li::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%2304121f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat,
    var(--primary);
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.price-table th {
  padding: 0.85rem 1.25rem;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
}
.price-table td {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.price-table tbody tr:last-child td {
  border-bottom: 0;
}
.price-table tbody tr:hover {
  background: color-mix(in oklab, var(--foreground) 3%, transparent);
}
@media (max-width: 40rem) {
  .price-table th,
  .price-table td {
    padding: 0.75rem 0.7rem;
    font-size: 0.8rem;
  }
}

.faq {
  padding: 0;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--muted-foreground);
  transition: transform 200ms ease;
}
.faq[open] summary::after {
  transform: rotate(45deg);
}
.faq p {
  padding: 0 1.25rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}

.cta-band {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: 1.5rem;
  overflow: hidden;
  isolation: isolate;
  background: #030712;
  border: 1px solid var(--border);
}
/* The square behind it, out of focus, so no other brand's ad can be read. */
.cta-band::before {
  content: '';
  position: absolute;
  inset: -24px;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 7, 18, 0.9), rgba(3, 7, 18, 0.5)),
    url('/screens/times-square.webp') 70% 40% / cover;
  filter: blur(10px) saturate(1.2);
}

/* Legal pages, set for reading. */
.legal-body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}
.legal-body ul {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-left: 1.1rem;
  list-style: disc;
}
.legal-body a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* On a phone the words cover the whole picture, so the whole picture dims. */
@media (max-width: 48rem) {
  .live::after {
    background:
      linear-gradient(0deg, rgba(2, 4, 10, 0.95) 0%, rgba(2, 4, 10, 0.55) 60%, rgba(2, 4, 10, 0.75) 100%),
      rgba(2, 4, 10, 0.35);
  }
  .live-badge {
    font-size: 0.6875rem;
  }
}