/* Tillhouse marketing site.
   World: midnight frosted glass (pinned reference in design-ref/).
   Palette is deliberately centralised here; the owner wants to iterate colours,
   so every hue routes through these tokens and nothing else. */

:root {
  /* Ground and glass */
  --canvas: #09090b;
  --grid-line: rgba(226, 230, 238, 0.06);
  --glass: rgba(226, 230, 238, 0.03);
  --glass-strong: rgba(9, 9, 11, 0.97);
  --hairline: rgba(226, 230, 238, 0.12);
  --hairline-bright: rgba(226, 230, 238, 0.24);
  --frost-wash: rgba(226, 230, 238, 0.06);
  --frost-wash-hover: rgba(226, 230, 238, 0.12);

  /* Text ladder, brightest to dimmest */
  --ink-high: #f2f3f6;
  --ink: #e6e8ee;
  --ink-mid: #ccd0da;
  --ink-low: #9aa0ab;
  --white: #ffffff;

  /* The one accent: the mark's own tag amber (#ffb400, sampled from the
     logo itself, owner decision 26 Aug 2026; sticker red #d93a2b retired).
     Amber cannot carry white text (about 1.9:1), so everything sitting on
     the accent uses --on-accent, a warm near-black, instead. */
  --accent: #ffb400;
  --accent-bright: #ffc433;
  --on-accent: #221a02;

  /* Movement and settled outcomes: a price that rose, a price that fell,
     a sale that went through. Never borrowed for actions, which stay the
     accent's job, and never the only carrier of meaning. */
  --up: #4ec97f;
  --down: #ff6f5e;

  /* Atmosphere hues (rgb triples for alpha composition) */
  --spot-rgb: 150, 155, 168;
  --glow-rgb: 200, 206, 218;

  /* Wordmark gradient */
  /* Kept as a token but no longer painted here: the wordmark hero it filled
     was retired on 26 Aug 2026. The console still uses its own copy. */
  --skywash: linear-gradient(180deg, #f2f3f6 0%, #b6bcc8 100%);

  /* Elevation */
  --lift-card: inset 0 1px 1px rgba(226, 230, 238, 0.12),
               inset 0 24px 48px rgba(226, 230, 238, 0.05),
               0 24px 32px rgba(5, 5, 7, 0.7);
  --lift-modal: inset 0 1px 1px rgba(240, 242, 246, 0.2),
                inset 0 24px 48px rgba(226, 230, 238, 0.06),
                0 16px 32px rgba(0, 0, 0, 0.3);

  /* Type */
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --max-w: 1200px;
  --section-gap: 120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* A display rule on a class beats the hidden attribute's UA display:none, so a
   "hidden" form goes on occupying its full height while being invisible. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute; left: 16px; top: -48px; z-index: 50;
  background: var(--glass-strong); color: var(--white);
  padding: 10px 18px; border-radius: 999px;
  box-shadow: var(--lift-modal); text-decoration: none;
  transition: top 200ms ease;
}
.skip:focus-visible { top: 12px; }

a { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--hairline-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Atmosphere ---------- */

.atmosphere {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden;
}
.grid-layer {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, black 40%, transparent 100%);
}
.spotlight {
  position: absolute; left: 50%; top: -30vh;
  width: 140vw; height: 90vh;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%,
    transparent 42%,
    rgba(var(--spot-rgb), 0.18) 47%,
    rgba(var(--spot-rgb), 0.40) 50%,
    rgba(var(--spot-rgb), 0.18) 53%,
    transparent 58%);
  filter: blur(24px);
}

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

.site-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--max-w); margin: 0 auto;
  padding: 18px 24px;
}
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--canvas) 72%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  mask-image: linear-gradient(black 70%, transparent);
}
.mark {
  font-family: var(--font-display);
  font-weight: 500; font-size: 18px;
  color: var(--ink-high); text-decoration: none;
  letter-spacing: 0.01em;
}
.header-nav { display: flex; gap: 10px; }

/* ---------- Pills ---------- */

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; padding: 10px 20px;
  font-size: 14px; font-weight: 500; text-decoration: none;
  border: 0; cursor: pointer; font-family: var(--font-body);
  transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.pill.ghost {
  background: var(--frost-wash); color: var(--white);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.pill.ghost:hover { background: var(--frost-wash-hover); }
.pill.ghost.strong { box-shadow: inset 0 0 0 1px var(--hairline-bright); }
.pill.accent {
  background: var(--accent); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
              0 16px 32px rgba(0, 0, 0, 0.3);
}
.pill.accent:hover {
  background: var(--accent-bright);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
              0 16px 32px rgba(0, 0, 0, 0.4);
}
.pill:active { transform: translateY(1px); }

/* ---------- Eyebrow ---------- */

.eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 24px;
}
.eyebrow::before, .eyebrow::after {
  content: ""; height: 1px; width: 72px;
  background: linear-gradient(90deg, transparent, var(--hairline));
}
.eyebrow::after { background: linear-gradient(90deg, var(--hairline), transparent); }
.eyebrow.left { justify-content: flex-start; }
.eyebrow.left::before { display: none; }
.eyebrow.left::after { width: 56px; }

/* ---------- Hero ---------- */

.hero {
  max-width: var(--max-w); margin: 0 auto;
  padding: 64px 24px 40px;
  text-align: center;
}
.hero-sub {
  max-width: 560px; margin: 0 auto 32px;
  font-size: 18px; line-height: 1.55;
  color: var(--ink-mid);
}
.hero-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

.glass-card {
  background: var(--glass);
  border-radius: 16px;
  box-shadow: var(--lift-card);
  padding: 24px;
  text-align: left;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Card internals */

.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.card-title {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-mid);
}
.card-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--frost-wash-hover);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.card-live {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; color: var(--ink-high);
  padding: 3px 8px; border-radius: 6px;
  background: var(--frost-wash);
  box-shadow: inset 0 0 0 1px var(--hairline-bright);
}
.mono-line {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--ink); margin-bottom: 6px;
}
.mono-line.dim { color: var(--ink-low); margin-bottom: 10px; }
.big-price {
  font-family: var(--font-display); font-weight: 500;
  font-size: 40px; color: var(--ink-high);
  line-height: 1.1;
}
.card-note { font-size: 13px; color: var(--ink-low); margin-top: 4px; }
.hair { height: 1px; background: var(--hairline); margin: 16px 0; }
.card-foot { font-size: 13px; color: var(--ink-low); line-height: 1.5; }

.till-lines { list-style: none; }
.till-lines li {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14px; padding: 6px 0; color: var(--ink);
}
.till-lines li span:last-child { font-family: var(--font-mono); font-size: 13px; }
.till-total {
  display: flex; justify-content: space-between;
  font-weight: 600; color: var(--ink-high); font-size: 15px;
  margin-bottom: 8px;
}
.till-cash {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-low);
  margin-bottom: 16px;
}
.loc-line {
  font-family: var(--font-mono); font-size: 15px;
  color: var(--ink-high);
}
.stock-rows { list-style: none; }
.stock-rows li {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; padding: 5px 0; color: var(--ink-mid);
}
.stock-rows .ok { color: var(--ink-high); }

/* The label, the toploader, the flip */

.flip-scene {
  perspective: 1100px;
  display: grid; place-items: center;
  margin: 10px 0 20px;
  min-height: 250px;
}
.flipper {
  position: relative;
  width: 168px; height: 232px;
  transform-style: preserve-3d;
  animation: cardflip 8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
@keyframes cardflip {
  0%, 38%   { transform: rotateY(0deg); }
  50%, 88%  { transform: rotateY(180deg); }
  100%      { transform: rotateY(360deg); }
}
.flip-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flip-back { transform: rotateY(180deg); }
.toploader {
  position: relative; width: 100%; height: 100%;
  border-radius: 8px;
  background: rgba(226, 230, 238, 0.05);
  box-shadow: inset 0 0 0 3px rgba(226, 230, 238, 0.14),
              inset 6px 10px 22px rgba(216, 236, 248, 0.05),
              0 16px 32px rgba(0, 0, 0, 0.4);
  padding: 10px;
}
.card-img {
  width: 100%; height: 100%;
  border-radius: 8px;
  object-fit: cover; display: block;
}
/* The folded label: front half rides the right edge, and when the card turns
   over that same fold sits on the back's left edge, QR out. */
.label-half {
  position: absolute; top: 64px;
  width: 92px; height: 44px;
  background: #f4f4f0; color: #111;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35),
              inset 0 0 0 1px rgba(0, 0, 0, 0.07);
  display: flex; align-items: center;
}
.half-front {
  right: -7px;
  border-radius: 3px 0 0 3px;
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 2px; padding: 0 10px;
}
.half-front b { font-size: 10px; font-weight: 600; white-space: nowrap; }
.half-front span { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.half-back {
  left: -7px;
  border-radius: 0 3px 3px 0;
  justify-content: flex-start; gap: 7px; padding: 4px 8px;
}
.half-back .tag-qr { height: 34px; width: 34px; flex: none; }
/* Where the card lives, printed the way a thermal tag actually prints it: two
   short lines you can read at arm's length in a box. It was set vertically to
   fit, which turned the one piece of information a person needs off the back
   of a card into something they have to tilt their head to read. */
.lab-drawer {
  display: flex; flex-direction: column; gap: 1px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: 8.5px; line-height: 1.3; color: #111;
  letter-spacing: 0.06em; white-space: nowrap;
}
.lab-drawer b { font-weight: 700; }
.tag-qr { fill: #111; }

/* Step 3: phone scan, phone till, reader */

.ring-scene {
  display: flex; align-items: center; justify-content: center;
  gap: 22px;
  margin: 8px 0 20px;
  min-height: 250px;
}
.phone {
  position: relative;
  width: 128px; height: 244px;
  border-radius: 20px;
  background: #0a0c14;
  box-shadow: inset 0 0 0 3px rgba(226, 230, 238, 0.18),
              0 16px 32px rgba(0, 0, 0, 0.4);
  padding: 10px 8px 8px;
}
.p-notch {
  position: absolute; top: 7px; left: 50%; translate: -50% 0;
  width: 34px; height: 5px; border-radius: 3px;
  background: rgba(226, 230, 238, 0.18);
}
.p-screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 12px;
  background: rgba(226, 230, 238, 0.04);
  box-shadow: inset 0 0 0 1px var(--hairline);
  overflow: hidden;
}
.p-scan, .p-till {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 10px;
  opacity: 0;
  transition: opacity 420ms ease;
}
.ring-scene[data-step="scan"] .p-scan { opacity: 1; }
.ring-scene[data-step="till"] .p-till,
.ring-scene[data-step="pay"] .p-till { opacity: 1; }
.vf {
  position: relative;
  width: 76px; height: 76px;
  display: grid; place-items: center;
}
.vf-label {
  width: 52px; height: 52px; border-radius: 3px;
  background: #f4f4f0;
  display: grid; place-items: center;
}
.vf-label .tag-qr { width: 42px; height: 42px; }
.vf-beam {
  position: absolute; left: 4px; right: 4px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ink-high), transparent);
  box-shadow: 0 0 10px 2px rgba(240, 242, 246, 0.35);
  animation: beam 1.8s ease-in-out infinite;
}
.vf-corner {
  position: absolute; width: 14px; height: 14px;
  border: 2px solid rgba(240, 242, 246, 0.5);
}
.vf-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 3px 0 0 0; }
.vf-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 3px 0 0; }
.vf-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 3px; }
.vf-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 3px 0; }
.p-hint { font-size: 10px; color: var(--ink-low); font-family: var(--font-mono); letter-spacing: 0.08em; }
.p-scanbar {
  width: 100%;
  font-size: 8.5px; color: rgba(226, 230, 238, 0.6);
  padding: 6px 8px; border-radius: 5px;
  background: rgba(226, 230, 238, 0.06);
  box-shadow: inset 0 0 0 1px var(--hairline);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-line {
  width: 100%;
  display: flex; flex-direction: column; gap: 1px;
  font-size: 9px; color: var(--ink);
  padding: 7px 2px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.p-line b { font-size: 12px; color: var(--ink-high); font-family: var(--font-mono); font-weight: 500; }
.p-tenders { display: flex; gap: 6px; width: 100%; margin-top: 2px; }
.p-tenders .tender { padding: 6px 4px; font-size: 10px; }
.ring-scene[data-step="pay"] [data-cardbtn] {
  background: var(--accent-bright);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.reader {
  width: 92px; height: 158px;
  border-radius: 12px;
  background: #0a0c14;
  box-shadow: inset 0 0 0 3px rgba(226, 230, 238, 0.14),
              0 16px 32px rgba(0, 0, 0, 0.4);
  padding: 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.r-screen {
  height: 52px; border-radius: 6px;
  background: rgba(226, 230, 238, 0.05);
  box-shadow: inset 0 0 0 1px var(--hairline);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  transition: box-shadow 300ms ease;
}
.r-amt {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 15px; color: var(--ink-low);
  transition: color 300ms ease;
}
.r-sub {
  font-family: var(--font-mono); font-size: 8px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-low);
}
.ring-scene[data-step="pay"] .r-amt { color: var(--ink-high); }
.ring-scene[data-step="pay"] .r-screen {
  box-shadow: inset 0 0 0 1px var(--hairline-bright),
              0 0 18px rgba(240, 242, 246, 0.12);
}
.r-pad {
  flex: 1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.r-pad span {
  border-radius: 4px;
  background: rgba(226, 230, 238, 0.06);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

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

.section {
  max-width: var(--max-w);
  margin: var(--section-gap) auto 0;
  padding: 0 24px;
  text-align: center;
}
h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.5vw, 44px);
  line-height: 1.16;
  color: var(--ink-high);
  text-wrap: balance;
  margin-bottom: 16px;
}
.section-sub {
  max-width: 620px; margin: 0 auto;
  color: var(--ink-mid); font-size: 17px; line-height: 1.55;
}

/* ---------- The reprice-to-till pipeline ---------- */

.pipeline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
  text-align: left;
}
.stage-press { grid-column: 1 / -1; }
.stage { padding: 28px; }
.stage-head { margin-bottom: 20px; }
.stage-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mid);
  padding: 4px 10px; border-radius: 6px;
  background: var(--frost-wash);
  box-shadow: inset 0 0 0 1px var(--hairline);
  margin-bottom: 12px;
}
.stage h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; color: var(--ink-high);
}

/* Step 1: the press */

.reprice-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.reprice-btn {
  border: 0; cursor: pointer;
  border-radius: 999px; padding: 12px 26px;
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  background: var(--accent); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
              0 12px 24px rgba(0, 0, 0, 0.3);
  transition: background 160ms ease, transform 160ms ease;
}
.reprice-btn:hover { background: var(--accent-bright); }
.reprice-btn:active, .reprice-btn.pressed { transform: translateY(1px) scale(0.99); }
/* The drift list (mirrors HQ's Prices view) */

.press-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap;
}
.press-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.print-btn {
  border: 0; cursor: pointer;
  border-radius: 999px; padding: 12px 22px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  background: var(--frost-wash); color: var(--white);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}
.print-btn:disabled { opacity: 0.45; cursor: default; }
.print-btn.ready {
  background: var(--frost-wash-hover);
  box-shadow: inset 0 0 0 1px var(--hairline-bright);
}
.drift-list { list-style: none; margin-bottom: 4px; }
.drift-list { margin-top: 8px; }
.drift-list li {
  display: grid;
  grid-template-columns: 26px 44px 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.drift-list li:last-child { border-bottom: 0; }
.pick {
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--frost-wash);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.pick svg {
  width: 13px; height: 13px;
  fill: none; stroke: var(--ink-high); stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0;
}
.drift-list li.on .pick { box-shadow: inset 0 0 0 1px var(--hairline-bright); }
.drift-list li.on .pick svg { opacity: 1; }
.d-name { font-size: 14px; color: var(--ink); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.d-name small { font-size: 12px; color: var(--ink-low); }
.drift-tag {
  font-style: normal; font-size: 11px;
  font-family: var(--font-mono);
  color: var(--ink-mid);
  background: var(--frost-wash);
  box-shadow: inset 0 0 0 1px var(--hairline);
  border-radius: 6px; padding: 2px 7px;
  width: max-content; max-width: 100%; margin-top: 3px;
}
.d-amt {
  font-family: var(--font-mono); font-size: 14px; color: var(--ink-low);
  text-align: right; display: flex; flex-direction: column; gap: 1px;
}
.d-amt small {
  font-size: 11px; color: var(--ink-low);
  font-variant-numeric: tabular-nums;
}
.d-amt, .d-amt small { transition: color 320ms ease; }
.drift-list li.done .d-amt { color: var(--ink-high); }
/* The sign is in the text as well as the colour, so the movement still
   reads with the colour taken away. */
.drift-list li.done .d-amt small { color: var(--ink-mid); }
.drift-list li.done.up .d-amt small { color: var(--up); }
.drift-list li.done.down .d-amt small { color: var(--down); }
.thumb {
  width: 44px; height: 60px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 3px; }

.roll {
  display: inline-grid;
  overflow: hidden;
  text-align: right;
}
.roll s, .roll em {
  grid-area: 1 / 1;
  font-family: var(--font-mono); font-style: normal; font-size: 15px;
  text-decoration: none;
  transition: translate 450ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 450ms ease;
}
.roll s { color: var(--ink-low); }
.roll em { color: var(--ink-high); translate: 0 115%; opacity: 0; }
li.done .roll s { translate: 0 -115%; opacity: 0; }
li.done .roll em { translate: 0 0; opacity: 1; }
.d-amt small { opacity: 0; transition: opacity 400ms ease 200ms; }
li.done .d-amt small { opacity: 1; }

/* The till mock (mirrors the Till: scan bar, bill, tender) */

.scanbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(226, 230, 238, 0.06);
  box-shadow: inset 0 0 0 1px var(--hairline);
  margin-bottom: 14px;
}
.scanbar svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: var(--ink-mid); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.tender-row { display: flex; gap: 10px; }
.tender {
  flex: 1;
  text-align: center; padding: 10px;
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  background: var(--frost-wash); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.tender.accent-fill {
  background: var(--accent); color: var(--on-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
              0 12px 24px rgba(0, 0, 0, 0.3);
}
/* Capability strip */

/* ---------- Demo ---------- */

.demo-frame {
  max-width: 860px;
  margin: 56px auto 0;
  border-radius: 16px;
  background: var(--glass-strong);
  box-shadow: var(--lift-modal);
  overflow: hidden;
  text-align: left;
}
.demo-chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--hairline);
}
.chrome-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--frost-wash-hover);
}
.chrome-title {
  margin-left: 10px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-low); letter-spacing: 0.04em;
}
.demo-stage {
  position: relative;
  min-height: 340px;
}
.scene {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 32px; align-items: center;
  padding: 40px 48px;
  opacity: 0; visibility: hidden;
  transform: translateX(36px);
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s 520ms;
}
/* The scene being left slides out the way it came from, so the sequence reads
   as one card moving forward rather than five pictures dissolving. */
.scene.leaving { transform: translateX(-36px); }
.scene.active {
  opacity: 1; visibility: visible;
  transform: translateX(0);
  transition: opacity 420ms cubic-bezier(0.16, 1, 0.3, 1) 90ms,
              transform 520ms cubic-bezier(0.16, 1, 0.3, 1) 90ms,
              visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
  .scene, .scene.active, .scene.leaving { transform: none; }
}
.scene-copy h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 24px; color: var(--ink-high);
  margin-bottom: 10px;
}
.scene-copy p { color: var(--ink-mid); font-size: 15px; line-height: 1.6; }

.scene-visual { display: grid; place-items: center; }


.ident-panel, .listing-panel, .till-panel, .books-panel {
  width: 100%; max-width: 320px;
  background: var(--glass);
  border-radius: 16px; padding: 20px;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.ident-name {
  font-family: var(--font-display); font-weight: 500;
  font-size: 19px; color: var(--ink-high); margin-bottom: 4px;
}
.ident-meta { font-size: 13px; color: var(--ink-low); margin-bottom: 12px; }
.ident-price {
  font-family: var(--font-display); font-weight: 500;
  font-size: 26px; color: var(--ink-high);
}
.ident-price span {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-low); margin-left: 8px;
}
.listing-panel { display: flex; gap: 16px; }
.listing-photo {
  flex: 0 0 72px; height: 100px; border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}
.listing-photo img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: 6px;
}
.listing-badge {
  display: inline-block; margin-top: 10px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-high); padding: 4px 9px; border-radius: 6px;
  background: var(--frost-wash);
  box-shadow: inset 0 0 0 1px var(--hairline-bright);
}
.till-panel { position: relative; }
.rung-stamp {
  width: max-content; margin: 14px auto 0;
  font-family: var(--font-mono); font-size: 13px;
  letter-spacing: 0.18em; color: var(--up);
  padding: 5px 10px; border-radius: 6px;
  border: 1.5px solid color-mix(in srgb, var(--up) 45%, transparent);
  rotate: -3deg;
  animation: stamp 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.scene.active .rung-stamp { animation-delay: 700ms; }
@keyframes stamp {
  from { opacity: 0; scale: 1.6; }
  to   { opacity: 1; scale: 1; }
}
.ledger-rows { list-style: none; }
.ledger-rows li {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 14px; padding: 9px 0; color: var(--ink);
  border-bottom: 1px solid var(--hairline);
}
.ledger-rows li:last-child { border-bottom: 0; }
.ledger-rows li span:last-child { font-family: var(--font-mono); font-size: 13px; }
.ledger-rows .ok { color: var(--ink-high); }

.demo-controls {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--hairline);
}
.demo-play {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--frost-wash); border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background 160ms ease;
}
.demo-play:hover { background: var(--frost-wash-hover); }
.demo-play svg {
  width: 14px; height: 14px;
  fill: none; stroke: var(--ink); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.demo-play .ic-play { display: none; fill: var(--ink); stroke: none; }
.demo-play[data-playing="false"] .ic-pause { display: none; }
.demo-play[data-playing="false"] .ic-play { display: block; }
/* The step track. Five anonymous dots told you a slideshow was running and
   nothing else; arriving mid-sequence you could not tell where you were or
   what was coming. Named and numbered, the whole journey reads before the
   animation has played a frame, which is the hook the section was missing.
   Numbers are earned here: the sequence IS the information. */
.demo-dots { display: flex; gap: 4px; flex: 1; min-width: 0; }
.demo-dots button {
  flex: 1; min-width: 0; position: relative;
  display: flex; align-items: center; gap: 7px;
  border: 0; cursor: pointer; padding: 7px 10px 9px;
  background: transparent; color: var(--ink-low);
  border-radius: 8px;
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  transition: color 200ms ease, background 200ms ease;
}
.demo-dots button:hover { color: var(--ink-mid); background: var(--frost-wash); }
.demo-dots button i {
  font-style: normal;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0;
  width: 18px; height: 18px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--frost-wash); color: var(--ink-low);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: all 200ms ease;
}
.demo-dots button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The rail under each step: filled for steps already passed, and actively
   filling on the current one, so the dwell is visible rather than a surprise. */
.demo-dots button u {
  position: absolute; left: 10px; right: 10px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--frost-wash-hover);
  overflow: hidden;
}
.demo-dots button u::after {
  content: ""; display: block; height: 100%; width: 100%;
  background: var(--ink-low); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
}
.demo-dots button.done u::after { transform: scaleX(1); }
.demo-dots button.active { color: var(--ink-high); background: var(--frost-wash); }
.demo-dots button.active i {
  background: var(--accent); color: var(--on-accent); box-shadow: none;
}
.demo-dots button.active u::after {
  background: var(--accent);
  animation: step-fill var(--dwell, 3800ms) linear forwards;
}
@keyframes step-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.demo-frame[data-paused="true"] .demo-dots button.active u::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .demo-dots button.active u::after { animation: none; transform: scaleX(1); }
}
@media (max-width: 760px) {
  .demo-dots button span { display: none; }
  .demo-dots button { justify-content: center; padding: 7px 4px 9px; }
}
.demo-caption {
  margin-top: 20px;
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em; color: var(--ink-low);
}

/* ---------- Claims ---------- */

#claims { text-align: left; }
.compare-rows { list-style: none; margin-bottom: 16px; }
.compare-rows li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 13px 14px; border-radius: 6px; font-size: 14px;
  margin-bottom: 8px;
}
.compare-rows li span:last-child { font-family: var(--font-mono); }
.compare-rows .win {
  color: var(--ink-high);
  background: var(--frost-wash);
  box-shadow: inset 0 0 0 1px var(--hairline-bright);
}
.compare-rows .lose { color: var(--ink-low); }
.compare-rows .lose span { text-decoration: line-through; text-decoration-color: rgba(157, 167, 186, 0.6); }

.meter-row { margin-bottom: 16px; }
.meter-label {
  display: flex; justify-content: space-between;
  font-size: 13px; color: var(--ink-mid); margin-bottom: 7px;
}
.meter-label span:last-child { font-family: var(--font-mono); font-size: 12px; color: var(--ink-low); }
.meter {
  height: 6px; border-radius: 999px;
  background: var(--frost-wash);
  box-shadow: inset 0 0 0 1px var(--hairline);
  overflow: hidden;
}
.meter span {
  display: block; height: 100%; width: var(--fill);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--glow-rgb), 1), var(--ink-high));
  box-shadow: 0 0 10px rgba(var(--glow-rgb), 0.4);
}

/* ---------- Pricing ---------- */

.tier-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 380px));
  gap: 24px; justify-content: center;
  margin-top: 56px;
}
/* Three across needs narrower columns and a tighter gutter, and the middle one
   is the one being recommended, so it keeps the flag and the halo. */
.tier-row.three { grid-template-columns: repeat(3, minmax(0, 330px)); gap: 20px; }

/* Who the tier is for, said once, under the price. A tier list answers "what
   do I get"; this answers "is this me", which is the question actually being
   asked at a price table. */
.tier-for {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-low);
  margin-top: 10px; padding-bottom: 16px;
  box-shadow: inset 0 -1px 0 var(--hairline);
}
/* Every card the same height, every button on the same shelf: the card is a
   column and the CTA pins to its floor, however long the list above it ran. */
.tier { text-align: left; padding: 32px; position: relative; display: flex; flex-direction: column; }
.tier .tier-cta { margin-top: auto; }
.tier .tier-list { margin-bottom: 24px; }
.tier.featured {
  background: var(--glass-strong);
  box-shadow: var(--lift-modal), 0 0 48px color-mix(in srgb, var(--accent) 14%, transparent);
}
.tier-flag {
  position: absolute; top: -13px; left: 32px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-high);
  background: var(--canvas);
  padding: 5px 12px; border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--hairline-bright);
}
.tier h3 {
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; color: var(--ink-high); margin-bottom: 8px;
}
.tier-price {
  font-family: var(--font-display); font-weight: 500;
  font-size: 44px; color: var(--ink-high); margin-bottom: 20px;
}
.tier-price span { font-size: 16px; color: var(--ink-low); font-family: var(--font-body); }
.tier-price .tier-around {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-low);
  margin-bottom: 2px;
}
.tier-list { list-style: none; margin-bottom: 28px; }
.tier-list li {
  padding: 9px 0 9px 26px; font-size: 15px; color: var(--ink-mid);
  position: relative;
  border-bottom: 1px solid var(--hairline);
}
.tier-list li:last-child { border-bottom: 0; }
.tier-list li::before {
  content: ""; position: absolute; left: 2px; top: 16px;
  width: 12px; height: 7px;
  border-left: 1.5px solid var(--ink-mid);
  border-bottom: 1.5px solid var(--ink-mid);
  transform: rotate(-45deg);
}
.tier-cta { width: 100%; }
.pricing-note {
  margin-top: 32px;
  font-size: 14px; color: var(--ink-low);
}

/* ---------- Waitlist ---------- */

#waitlist { padding-bottom: 40px; }
/* The button that asks for the form, and the plate the form arrives on. */
.wl-open { margin-top: 40px; }
.wl-open[aria-expanded="true"] { display: none; }

/* Height is animated through grid-template-rows rather than max-height: the
   panel can be any height and still open to exactly its own, with no guessed
   ceiling to clip a validation message later. */
.wl-panel {
  display: grid; grid-template-rows: 0fr;
  max-width: 520px; margin: 0 auto;
  transition: grid-template-rows 420ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 260ms ease, margin-top 420ms cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
}
.wl-panel > .wl-panel-in { overflow: hidden; min-height: 0; }
.wl-panel.open { grid-template-rows: 1fr; opacity: 1; margin-top: 32px; }
/* Once the reveal has finished, the row stops being an animated 1fr and
   becomes plain auto. Transitioning grid-template-rows leaves a resolved pixel
   value behind, so a later change of content (the form leaving, the
   confirmation arriving) would be clipped to the height the animation stopped
   at. The panel never closes, so nothing is lost by settling it. */
.wl-panel.settled { grid-template-rows: auto; transition: opacity 260ms ease; }

.wl-panel-in {
  background: var(--glass-strong); border-radius: 16px;
  box-shadow: var(--lift-modal);
}
.wl-panel.open .wl-panel-in { padding: 28px; }

.wl-lead { color: var(--ink-mid); font-size: 15px; margin-bottom: 4px; }

.waitlist-form {
  display: flex; flex-direction: column; gap: 16px;
  text-align: left;
}
.wl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wl-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.wl-field label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-low);
  display: flex; align-items: baseline; gap: 8px;
}
/* Said rather than starred, because an asterisk is a convention the reader has
   to already know and this is the only required field on the page. */
.wl-req { color: var(--ink-mid); letter-spacing: 0.08em; }
.waitlist-form select {
  width: 100%; border: 0; border-radius: 6px; padding: 12px 16px;
  font-family: var(--font-body); font-size: 15px;
  background: rgba(226, 230, 238, 0.06); color: var(--white);
  box-shadow: inset 0 0 0 1px var(--hairline);
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-low) 50%),
                    linear-gradient(135deg, var(--ink-low) 50%, transparent 50%);
  background-position: calc(100% - 20px) calc(50% + 1px), calc(100% - 15px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  transition: box-shadow 180ms ease;
}
.waitlist-form select:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--hairline-bright); }
.waitlist-form select option { background: #12121a; }

.waitlist-form input,
.waitlist-form textarea {
  width: 100%; min-width: 0;
  border-radius: 6px; border: 0;
  padding: 12px 16px;
  font-family: var(--font-body); font-size: 15px; line-height: 1.45;
  background: rgba(226, 230, 238, 0.06);
  color: var(--white);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: box-shadow 180ms ease;
}
.waitlist-form textarea { resize: vertical; min-height: 76px; }
.waitlist-form input::placeholder,
.waitlist-form textarea::placeholder { color: rgba(226, 230, 238, 0.6); }
.waitlist-form input:focus-visible,
.waitlist-form textarea:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--hairline-bright);
}
.waitlist-form input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px rgba(228, 109, 76, 0.6);
}
.waitlist-form .pill { width: 100%; justify-content: center; margin-top: 4px; }
.form-note {
  min-height: 24px; margin-top: 16px; text-align: left;
  font-size: 14px; color: var(--ink-mid);
}
.form-note.ok { color: var(--ink-high); }
.form-note.err { color: #e4886d; }

/* ---------- Footer ---------- */

.site-footer {
  max-width: var(--max-w);
  margin: var(--section-gap) auto 0;
  padding: 28px 24px 36px;
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  justify-content: center;
  font-size: 13px; color: var(--ink-low);
}
.mark-img { height: 38px; width: auto; display: block; }
.site-footer a { color: var(--ink-low); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer span:first-child {
  font-family: var(--font-display); font-weight: 500; color: var(--ink-mid);
}

/* ---------- Responsive ---------- */

/* Between a laptop and a phone, three columns are too narrow to read but one
   is a long scroll. The recommended tier leads, the other two sit beneath. */
@media (max-width: 1040px) and (min-width: 901px) {
  .tier-row.three { grid-template-columns: repeat(2, minmax(0, 340px)); }
  .tier-row.three .featured { order: -1; }
}

@media (max-width: 900px) {
  :root { --section-gap: 88px; }
  .pipeline { grid-template-columns: 1fr; }
  .stage-press { grid-column: auto; }
  .scene {
    grid-template-columns: 1fr; gap: 24px; padding: 28px 24px;
    text-align: center; align-content: center; align-items: start;
  }
  .scene-copy p { max-width: 44ch; margin: 0 auto; }
  .demo-stage { min-height: 440px; }
  .tier-row, .tier-row.three { grid-template-columns: minmax(0, 420px); }
  /* The recommended tier leads on a phone as it does on a laptop. */
  .tier-row.three .featured { order: -1; }
}

@media (max-width: 480px) {
  /* Wrapped eyebrow text leaves the hairline wings floating mid-line. */
  .eyebrow::before, .eyebrow::after { display: none; }
  /* The first phone screen was six lines of sub-copy and a stack of pills,
     with the repricer's edge barely cresting the fold. Tighter words, tighter
     stack, and the working thing joins the first screen. */
  .hero.hero { padding-top: 20px; }
  .hero .hero-sub { font-size: 16px; max-width: 34ch; margin-bottom: 22px; }
  .hero-actions { margin-bottom: 0; }
  .hero .pipeline { margin-top: 34px; }
}

@media (max-width: 700px) {
  .hero { padding-top: 64px; }
  .hero-actions { margin-bottom: 56px; }
  .header-nav .pill:first-child { display: none; }
  .wl-pair { grid-template-columns: 1fr; }
  .demo-stage { min-height: 500px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ring-beam { animation: none; top: 50%; }
  .rung-stamp { animation: none; opacity: 1; }
  .scene, .scene.active { transition: none; }
}



/* ---------- Hero, rebuilt ----------
   The wordmark hero cost a full screen to say the product's name, which the
   header already says. The opening now leads with the claim and the repricer
   itself, so the first screen shows the thing working. */
.hero h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(38px, 6vw, 68px); line-height: 1.06; letter-spacing: -0.02em;
  color: var(--ink-high); text-wrap: balance;
  max-width: 16ch; margin: 0 auto;
}
.hero .hero-sub { max-width: 60ch; margin: 22px auto 30px; }
.hero .pipeline { margin-top: 56px; }

/* ---------- Claims, compressed ----------
   Three alternating full-height rows became one band. They are supporting
   evidence for a shop already shown working above, and they should read like
   three short answers rather than three more acts. */
.claim-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px; margin-top: 44px; text-align: left;
}
.claim-brief h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 19px;
  color: var(--ink-high); letter-spacing: -0.01em;
  padding-bottom: 12px; margin-bottom: 12px;
  box-shadow: inset 0 -1px 0 var(--hairline);
}
.claim-brief p { color: var(--ink-low); font-size: 15px; max-width: 40ch; }

@media (max-width: 900px) {
  .claim-row { grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
  .claim-brief p { max-width: none; }
  .hero { padding-top: 36px; }
}


/* ---------- Joined ----------
   The confirmation stands where the form stood, so the change of state is the
   thing you notice rather than a line of text under fields you already filled. */
.wl-done { text-align: center; padding: 12px 0 4px; }
.wl-done h3 {
  font-family: var(--font-display); font-weight: 500; font-size: 22px;
  color: var(--ink-high); letter-spacing: -0.01em; margin-top: 16px;
}
.wl-done p { color: var(--ink-mid); font-size: 15px; margin-top: 8px; }
.wl-done b { color: var(--ink-high); font-weight: 500; }

/* Drawn, not a glyph: a tick that is really two rotated borders scales with
   its box and never falls back to a font that does not have it. */
.wl-tick {
  display: block; width: 46px; height: 46px; margin: 0 auto;
  border-radius: 50%; position: relative;
  background: var(--frost-wash);
  box-shadow: inset 0 0 0 1px var(--hairline-bright);
}
.wl-tick::after {
  content: ""; position: absolute; left: 17px; top: 12px;
  width: 10px; height: 18px;
  border: solid var(--ink-high); border-width: 0 1.5px 1.5px 0;
  transform: rotate(43deg);
  transform-origin: center;
  animation: tick-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes tick-in {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .wl-tick::after { animation: none; }
}


/* ---------- Critique burn-down, 26 Aug 2026 ---------- */

/* The flip's back: a sleeved card, publisher-neutral, wearing the mark. The
   platform sells to comics and coins as much as cards, and a real publisher's
   back art under a "not affiliated" footer argued against itself. */
.card-back-generic {
  width: 100%; height: 100%; border-radius: 8px;
  background:
    repeating-linear-gradient(135deg, rgba(226,230,238,0.05) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #17181d, #0c0d10);
  box-shadow: inset 0 0 0 1px var(--hairline);
  display: grid; place-items: center;
}
.card-back-generic svg {
  width: 34px; height: 34px; fill: var(--accent); opacity: 0.85;
}

/* A graded slab in the drift list: the case drawn, not photographed. */
.thumb-slab {
  display: grid; place-items: end center;
  background: linear-gradient(170deg, rgba(226,230,238,0.14), rgba(226,230,238,0.04));
  box-shadow: inset 0 0 0 1px var(--hairline-bright);
  border-radius: 4px;
}
.thumb-slab i {
  display: block; width: 80%; height: 26%;
  margin-bottom: 8%;
  border-radius: 2px;
  background: var(--ink-high);
  opacity: 0.9;
}

/* The panel can be closed as well as opened. */
.wl-panel-in { position: relative; }
.wl-close {
  position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--frost-wash); color: var(--ink-mid);
  display: none; place-items: center;
  transition: background 160ms ease, color 160ms ease;
}
.wl-panel.open .wl-close { display: grid; }
.wl-close:hover { background: var(--frost-wash-hover); color: var(--ink-high); }
.wl-close svg { width: 12px; height: 12px; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; }

/* The one unsized control on the page. */
.demo-play { font-size: 14px; }

.pricing-note b { color: var(--ink-mid); font-weight: 600; }