/* The landing page: what a visitor meets at `/` before the lobby. `landing.html`
   is the English page and `landing-pt.html` the Portuguese one; both share this
   sheet and `landing.js`, which only adds motion (the CSP allows no INLINE
   script; a file from 'self' is fine). Every motion rule below is either a
   one-shot CSS entrance that ends on the final state, or is scoped to
   `html.motion`, which the script sets only when reduced motion is not asked
   for -- so with the script off the page is complete and still.

   Every token here is `lobby.css`'s, copied rather than imported: that sheet
   carries the table's sticky header, the gate layer and the alarm frame, none
   of which this page has, and its `body` font size is the table's. The mock
   table in the hero is drawn with the lobby's own rules (46px rows, 19px mono
   countdown, the jade -> amber -> red ramp) so the page shows the product as
   it is, not a rendition of it. */

:root {
  --bg: #0b0d0c;
  --panel: #141817;
  --raised: #1c2120;
  --line: #272e2c;
  --line-soft: #1c2321;
  --ink: #e9edea;
  --ink-2: #b6bfbb;
  --dim: #7f8a86;
  --faint: #4a5350;
  --accent: #4fd39b;
  --good: #4fd39b;
  --warn: #e8b34a;
  --bad: #ef6a5a;

  --ui: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --text: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --num: "IBM Plex Mono", Consolas, ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; background: var(--bg); }

body {
  color: var(--ink);
  font: 400 13.5px/1.45 var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #7be3b8; }

.num, .cd, .at, .age, .chip .n, .dimv {
  font-family: var(--num);
  font-variant-numeric: tabular-nums;
}

.lbl {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
}
.lbl.accent { color: var(--accent); }
.lbl.faint { color: var(--faint); }

.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn-primary, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  font: 600 14px/1 var(--ui);
  border-radius: 7px;
  white-space: nowrap;
}
.btn-primary { color: #06231a; background: var(--accent); }
.btn-primary:hover { color: #06231a; background: #62dba8; }
.btn-ghost { color: var(--ink); background: var(--raised); border: 1px solid var(--line); padding: 0 16px; }
.btn-ghost:hover { color: var(--ink); border-color: var(--accent); }
/* Hover: a 1px lift and, on the primary, a glow drawn on its own layer so
   only opacity changes. The arrow nudges toward where it goes. */
.btn-primary, .btn-ghost {
  position: relative;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 8px 26px rgba(79, 211, 155, .38), 0 0 0 1px rgba(79, 211, 155, .5);
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
.btn-primary:hover, .btn-ghost:hover { transform: translateY(-1px); }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:active, .btn-ghost:active { transform: translateY(0); }
.btn-primary svg { transition: transform .2s cubic-bezier(.2, .7, .2, 1); }
.btn-primary:hover svg { transform: translateX(3px); }
.btn-primary:focus-visible, .btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-small { height: 36px; padding: 0 14px; font-size: 13px; }

/* ── the top bar: the lobby's own ────────────────────────────────────── */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 24px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .wordmark {
  font-family: var(--ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
}
.pulse-dot {
  position: relative;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--good);
  box-shadow: 0 0 10px rgba(79, 211, 155, .7);
}
.brand .by { margin-left: 6px; }
.nav-cta { display: flex; align-items: center; gap: 8px; }
/* The other language. A word, not a flag: it is the one control on the bar
   that is not a call to action. */
.lang {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 10px;
}
.lang:hover { color: var(--ink); }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 64px;
}
.hero-copy { display: flex; flex-direction: column; gap: 22px; padding-right: 8px; }
.hero h1 {
  margin: 0;
  font-family: var(--ui);
  font-size: 46px;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: pretty;
}
.hero .lead { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.hero .cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero .fine { margin: 0; font-size: 12.5px; color: var(--dim); }

/* The entrance: label, headline, lead, buttons and the fine print rise in
   turn, then the table. Plain CSS on purpose -- it needs no script, ends on
   the final state, and starts with the first paint, so nothing flashes
   visible and then hides again while a deferred script loads. */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rise-card { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > :nth-child(1) { animation-delay: .05s; }
.hero-copy > :nth-child(2) { animation-delay: .13s; }
.hero-copy > :nth-child(3) { animation-delay: .23s; }
.hero-copy > :nth-child(4) { animation-delay: .33s; }
.hero-copy > :nth-child(5) { animation-delay: .43s; }
.shot { animation: rise-card .9s cubic-bezier(.2, .7, .2, 1) .28s both; }

/* ── the stage behind the hero: a faint grid and one slow glow ──────── */
/* Two layers, both painted once: the grid never moves, and the glow moves by
   transform alone, so the compositor carries it and nothing repaints. The
   stage clips them, which is also what keeps a 390px page from scrolling
   sideways. */
.hero-stage { position: relative; overflow: hidden; isolation: isolate; }
.hero-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 255, 255, .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .032) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 65% 35%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 75% 70% at 65% 35%, #000 20%, transparent 72%);
  pointer-events: none;
}
.hero-stage::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10%;
  left: 38%;
  width: 70%;
  height: 110%;
  background: radial-gradient(closest-side, rgba(79, 211, 155, .15), rgba(79, 211, 155, .05) 55%, transparent);
  pointer-events: none;
  animation: glow-in 1.6s ease .35s both;
}
@keyframes glow-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-6%, 4%, 0) scale(1.08); }
  100% { transform: translate3d(4%, -3%, 0) scale(.96); }
}
.motion .hero-stage::after { animation: glow-in 1.6s ease .35s both, drift 22s ease-in-out 2s infinite alternate; }

/* ── the product, as it is drawn ─────────────────────────────────────── */
.shot {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55), 0 0 90px -20px rgba(79, 211, 155, .22);
  overflow: hidden;
}
.shot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
}
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  background: var(--raised);
  color: var(--ink-2);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  white-space: nowrap;
}
.chip.on { color: var(--ink); border-color: var(--accent); background: rgba(79, 211, 155, .10); }
.chip .n { font-size: 11px; color: var(--dim); }
.chip.on .n { color: var(--accent); }
.age {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-2);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 3px 8px;
  white-space: nowrap;
}
.age .dot { position: relative; width: 5px; height: 5px; border-radius: 999px; background: var(--good); }

/* ── the live table (landing.js) ──────────────────────────────────────── */
/* A ring that breathes out of the "read" dot, the bar's dot and the pinned
   row's play button: scale and opacity, nothing else. */
@keyframes ping { 0% { transform: scale(1); opacity: .55; } 80%, 100% { transform: scale(3.2); opacity: 0; } }
@keyframes ping-soft { 0% { transform: scale(1); opacity: .45; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.motion .age .dot::after,
.motion .pulse-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--good);
  animation: ping 2.4s cubic-bezier(.2, .6, .3, 1) infinite;
}
.motion .pulse-dot::after { animation-delay: 1.2s; }
.motion .mock.watch .play.on { position: relative; }
.motion .mock.watch .play.on::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  animation: ping-soft 2.4s ease-out infinite;
}
/* A fresh read: the chip flashes once. */
@keyframes fresh { 0% { opacity: .35; } 100% { opacity: 1; } }
.motion .age.fresh { animation: fresh .9s ease-out; }

/* Rows: FLIP moves (landing.js sets the start offset inline and clears it),
   a fade-and-slide out at zero, a slide in from below for the refill. */
.motion .mock tbody tr {
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .45s ease;
}
.motion .mock tbody tr.leaving { opacity: 0; transform: translateX(-18px); }
.motion .mock tbody tr.entering { opacity: 0; transform: translateY(14px); transition: none; }
@keyframes reread { 0%, 40% { opacity: .2; } 100% { opacity: 1; } }
.motion .mock tbody tr.reread .cd,
.motion .mock tbody tr.reread .at { animation: reread .9s ease-out; }

.shot-watch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 6px;
  border-bottom: 1px solid var(--line-soft);
}

.mock { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mock + .mock { margin-top: 10px; }
.mock thead th {
  text-align: left;
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--dim);
  padding: 0 12px 8px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.mock thead th.r, .mock tbody td.r { text-align: right; }
.mock tbody td {
  padding: 0 12px;
  height: 46px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  white-space: nowrap;
}
.mock tbody tr:hover td { background: rgba(255, 255, 255, .022); }
.mock td.buyin { font-size: 14px; font-weight: 600; color: var(--ink); }
.mock td.name { white-space: normal; }
.mock td.dimv { font-size: 12.5px; color: var(--ink-2); }
.mock .cd { font-size: 19px; font-weight: 600; line-height: 1.05; }
.mock .at { font-size: 10.5px; color: var(--dim); line-height: 1.3; }
.cd.red { color: var(--bad); }
.cd.amber-red { color: #ec8a4f; }
.cd.amber { color: var(--warn); }
.cd.amber-jade { color: #9cc858; }
.cd.jade { color: var(--good); }
.mock tr.pinned td.name { font-weight: 700; }

.sitetag {
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
  padding: 2px 7px;
  font-family: var(--text);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .06);
  white-space: nowrap;
}
/* `SITE_HUE` in lobby.js, one class per client. */
.sitetag.gg { color: #ef6a5a; }
.sitetag.s888 { color: #5aa9f0; }
.sitetag.party { color: #f0a24a; }
.sitetag.stars { color: #c48cf5; }
.sitetag.acr { color: #4fd39b; }
.sitetag.wpt { color: #e8d24a; }
.sitetag.champion { color: #8fd45a; }
.sitetag.coin { color: #4fd0d3; }
.sitetag.tiger { color: #f08aa8; }

.play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--accent);
  border-radius: 6px;
  width: 26px;
  height: 24px;
  opacity: .8;
}
.play.on { opacity: 1; background: rgba(79, 211, 155, .14); }

.legend {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line);
}
.legend .key { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-2); }
.legend .sw { width: 8px; height: 8px; border-radius: 2px; }
.legend .sw.jade { background: var(--good); }
.legend .sw.amber { background: var(--warn); }
.legend .sw.red { background: var(--bad); }

/* ── the nine clients ────────────────────────────────────────────────── */
.clients { padding-top: 8px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 18px; }
.clients-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.clients-head p { margin: 0; font-size: 12.5px; color: var(--dim); }
.logos { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
/* Painted on #000, like the picker's tiles: every logo is cut on the client's
   own near-black, and a tile on the panel grey would draw a black rectangle. */
.logos .tile {
  background: #000;
  border: 1px solid var(--line);
  border-radius: 8px;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}
.logos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logos .tile { transition: border-color .2s ease; }
.logos .tile:hover { border-color: rgba(79, 211, 155, .55); }

/* The marquee (landing.js, motion only): the nine tiles twice in one track
   that slides by exactly one set -- half the track plus half a gap -- so the
   loop has no seam. The edges fade rather than cut. Hover pauses it. */
.logos.marquee {
  display: block;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logos-track { display: flex; gap: 8px; width: max-content; animation: marquee 42s linear infinite; }
.logos-track .tile { flex: none; width: 152px; }
.logos.marquee:hover .logos-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translate3d(calc(-50% - 4px), 0, 0); } }

/* ── three answers ───────────────────────────────────────────────────── */
.band { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-top: 56px; padding-bottom: 56px; }
.three > div { display: flex; flex-direction: column; gap: 12px; }
.three h3 { margin: 0; font-family: var(--ui); font-size: 19px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.three p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.three svg { stroke: var(--accent); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.three > div:hover svg { transform: translateY(-3px); }

/* ── filters ─────────────────────────────────────────────────────────── */
.filt { padding-top: 56px; padding-bottom: 56px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.filt-copy { display: flex; flex-direction: column; gap: 12px; }
.filt h2 { margin: 0; font-family: var(--ui); font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.filt p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.filt-shot { display: flex; flex-direction: column; gap: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; transition: border-color .25s ease; }
.filt-shot:hover { border-color: rgba(79, 211, 155, .4); }
.filt-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filt-row .to { color: var(--dim); }
.field {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 7px;
  font-size: 13px;
  color: var(--ink);
}
.field.range { width: 72px; }
.field.name { min-width: 150px; color: var(--faint); }
.sites-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 4px 9px 4px 11px;
  background: var(--raised);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink);
}
.sites-btn .mini { width: 34px; height: 17px; border-radius: 3px; background: #000; overflow: hidden; display: inline-flex; }
.sites-btn .mini img { width: 100%; height: 100%; object-fit: cover; }
.sites-btn .caret { opacity: .55; }

/* ── access ──────────────────────────────────────────────────────────── */
.access-band { border-top: 1px solid var(--line); background: var(--panel); }
.access { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.access-copy { display: flex; flex-direction: column; gap: 16px; }
.access h2 { margin: 0; font-family: var(--ui); font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }
.access p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.access .cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
/* The gate card, as the lobby draws it (`.gate-card` in lobby.css): a visitor
   who reads this page and then meets the real card should recognise it. */
.gate-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 26px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  max-width: 340px;
  width: 100%;
  justify-self: end;
  transition: border-color .25s ease;
}
.gate-card:hover { border-color: rgba(79, 211, 155, .4); }
.gate-card h3 { margin: 0; font: 600 20px/1.2 var(--ui); color: var(--ink); }
.gate-card .sub { margin: 0 0 10px; font: 400 13px/1.4 var(--text); color: var(--dim); }
.gate-card .provider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font: 600 14px/1 var(--ui);
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: 7px;
}
.gate-card .provider { transition: border-color .18s ease, transform .18s ease; }
.gate-card .provider:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); }
.gate-card .fine { margin: 10px 0 0; font-size: 12px; line-height: 1.4; color: var(--dim); }

/* ── footer ──────────────────────────────────────────────────────────── */
.foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; padding-bottom: 28px; }
.foot nav { display: flex; align-items: center; gap: 18px; font-size: 12.5px; }
.foot nav a { color: var(--ink-2); }
.foot nav a:hover { color: var(--ink); }

/* ── scroll reveals (landing.js) ─────────────────────────────────────── */
/* Below the hero, each block rises once as it comes into view, its children
   a beat apart (`--rv-delay`). Scoped to `.motion`, so without the script or
   with reduced motion there is nothing to wait for. Hover effects never sit
   on a `.rv` element's own transform, which would inherit the delay. */
.motion .rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--rv-delay, 0ms);
}
.motion .rv.in { opacity: 1; transform: none; }
.motion .rv.in.gate-card, .motion .rv.in.filt-shot { transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .2, 1), border-color .25s ease; }

/* ── reduced motion: the final state, still ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .btn-primary:hover, .btn-ghost:hover, .gate-card .provider:hover,
  .btn-primary:hover svg, .three > div:hover svg { transform: none; }
}

/* ── phones ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 40px; padding-bottom: 40px; }
  .hero h1 { font-size: 34px; }
  .hero-copy { padding-right: 0; }
  .nav-cta .btn-small { display: none; }
  /* The wordmark alone on a phone: with the by-line beside it the two wrap
     into a four-line bar, measured at 390px. */
  .brand .by { display: none; }
  .brand .wordmark { white-space: nowrap; font-size: 15px; }
  .three { grid-template-columns: minmax(0, 1fr); }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos-track .tile { width: 120px; }
  .logos-track { animation-duration: 34s; }
  .hero-stage::after { left: 0; top: 30%; width: 120%; height: 80%; }
  .filt { grid-template-columns: minmax(0, 1fr); }
  .access { grid-template-columns: minmax(0, 1fr); }
  .gate-card { justify-self: start; }
  .foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* Est. end and Prize leave; Late reg, Buy-in, Site and Tournament are the
     four the lobby itself never lets a viewer hide. */
  .mock .hide-m { display: none; }
  .mock col.hide-m { width: 0 !important; }
  .mock col.c-play { width: 34px !important; }
  .mock col.c-late { width: 82px !important; }
  .mock col.c-buy { width: 52px !important; }
  .mock col.c-site { width: 74px !important; }
  .mock tbody td { padding: 0 6px; }
  .mock .cd { font-size: 16px; }
  .mock .sitetag { padding: 2px 5px; letter-spacing: .04em; }
  /* With the table live, a refill may bring a longer name; held to one line
     so every row stays 46px and the card never changes height. */
  .motion .mock td.name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}