/*
  CeyPay Merchant Leaderboard
  ===========================
  CeyPay's design system (Geist, CeyPay blue #1c6ef5, the #070a10 canvas,
  dark + light) laid out the Droppy way: ink notch dock, glass wells, pill
  CTAs with the morph hover, binary field behind the hero, reveal motion.

  Theming: an inline script in <head> sets html[data-theme] before first
  paint (stored choice, else the system setting). Dark is the default
  without scripts. The notch dock stays ink in both themes.
  No build step.
*/

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #070a10;
  --well: #0d121b;
  --well-raised: #151c28;
  --well-shadow: none;

  --glass: rgba(255, 255, 255, 0.05);
  --glass-strong: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.12);

  --text: #e8edf6;
  --text-2: rgba(232, 237, 246, 0.72);
  --text-3: rgba(232, 237, 246, 0.55);
  --text-4: rgba(232, 237, 246, 0.38);

  /* CeyPay blue. The raw brand fills buttons; the tints carry text/rings. */
  --blue: #1c6ef5;
  --blue-hover: #3a82ff;
  --blue-active: #145ad0;
  --blue-soft: rgba(28, 110, 245, 0.16);
  --blue-soft-strong: rgba(75, 145, 255, 0.34);
  --blue-text: #8fb6ff;
  --ring: #4b91ff;
  --em-gradient: linear-gradient(100deg, #b9d0ff 5%, #4b91ff 50%, #1c6ef5 95%);

  --hairline: rgba(255, 255, 255, 0.05);
  --row-hover: rgba(255, 255, 255, 0.025);
  --band: rgba(7, 10, 16, 0.8);
  --band-line: rgba(255, 255, 255, 0.06);
  --scrim: rgba(3, 5, 9, 0.66);

  /* Elevation: deep and dark on the night canvas. */
  --shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.45);
  --shadow-float: 0 12px 40px rgba(0, 0, 0, 0.35);
  --shadow-menu: 0 22px 58px rgba(0, 0, 0, 0.3);
  --shadow-chip: 0 2px 8px rgba(0, 0, 0, 0.18);
  --shadow-card: 0 30px 80px rgba(0, 0, 0, 0.25);

  --gold: #f5c04e;
  --silver: #c9d3e0;
  --bronze: #e39a64;
  --success: #3fd08a;
  --error: #ff7a7a;

  --logo-tile: #ffffff;
  --field-head: 143, 182, 255;
  --field-tail: 28, 110, 245;
  --field-opacity: 0.5;

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.8 0 0 0 0 0.86 0 0 0 0 1 0 0 0 0.035 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #f4f6fa;
  --well: #ffffff;
  --well-raised: #eef2f8;
  --well-shadow: 0 0 0 1px rgba(15, 28, 52, 0.06), 0 1px 2px rgba(15, 28, 52, 0.04);

  --glass: rgba(15, 28, 52, 0.045);
  --glass-strong: rgba(15, 28, 52, 0.065);
  --glass-hover: rgba(15, 28, 52, 0.1);

  --text: #0e1420;
  --text-2: rgba(14, 20, 32, 0.74);
  --text-3: rgba(14, 20, 32, 0.58);
  --text-4: rgba(14, 20, 32, 0.44);

  --blue-soft: rgba(28, 110, 245, 0.1);
  --blue-soft-strong: rgba(28, 110, 245, 0.26);
  --blue-text: #0b57d0;
  --ring: #1c6ef5;
  --em-gradient: linear-gradient(100deg, #4b91ff 5%, #1c6ef5 45%, #0b46a8 95%);

  --hairline: rgba(15, 28, 52, 0.06);
  --row-hover: rgba(15, 28, 52, 0.025);
  --band: rgba(244, 246, 250, 0.84);
  --band-line: rgba(15, 28, 52, 0.07);
  --scrim: rgba(14, 20, 32, 0.22);

  /* Elevation: short, navy-tinted and faint so nothing smudges the canvas. */
  --shadow-modal: 0 24px 64px rgba(15, 28, 52, 0.12);
  --shadow-float: 0 10px 30px rgba(15, 28, 52, 0.16);
  --shadow-menu: 0 16px 40px rgba(15, 28, 52, 0.1);
  --shadow-chip: 0 1px 4px rgba(15, 28, 52, 0.08);
  --shadow-card: 0 12px 40px rgba(15, 28, 52, 0.06);

  --gold: #b7800b;
  --silver: #6f7d90;
  --bronze: #b0602a;
  --success: #15935a;
  --error: #c62f2f;

  --field-head: 28, 110, 245;
  --field-tail: 75, 145, 255;
  --field-opacity: 0.28;

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0.1 0 0 0 0 0.15 0 0 0 0 0.3 0 0 0 0.04 0'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

:root {
  --ink: #04060a;
  --on-ink: #e8edf6;
  --on-ink-soft: rgba(232, 237, 246, 0.62);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --container: 1200px;
  --pad: 24px;
  --nav-bar: 8px;
  --nav-h: 56px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dock-curve: cubic-bezier(0.32, 1.22, 0.36, 1);
  --fast: 150ms;
  --slow: 600ms;
}

/* ---------------------------------------------------------------------- */
/* Base                                                                   */
/* ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background-color: var(--bg);
  background-image: var(--grain);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
[hidden] { display: none !important; }
.hidden { display: none !important; }

::selection { background: var(--blue-soft-strong); color: inherit; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Logos swap with the theme. */
.logo-dark { display: block; }
.logo-light { display: none; }
:root[data-theme="light"] .on-canvas .logo-dark { display: none; }
:root[data-theme="light"] .on-canvas .logo-light { display: block; }

/* ---------------------------------------------------------------------- */
/* Notch dock nav                                                         */
/* ---------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: env(safe-area-inset-top, 0px);
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.nav::before {
  content: "";
  position: absolute;
  top: calc(-1 * env(safe-area-inset-top, 0px) - 1px);
  left: 0;
  right: 0;
  height: calc(env(safe-area-inset-top, 0px) + var(--nav-bar) + 2px);
  background: var(--ink);
}
.nav__pill {
  --fillet: 24px;
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: calc(100% - 2 * var(--fillet) - 8px);
  height: var(--nav-h);
  margin-top: var(--nav-bar);
  padding: 6px 7px 6px 16px;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: var(--ink);
  color: var(--on-ink);
  transform-origin: 50% 0;
  animation: navDock 640ms var(--dock-curve) 120ms both;
}
.nav__pill::before,
.nav__pill::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--nav-bar));
  width: var(--fillet);
  height: calc(var(--fillet) + var(--nav-bar));
  pointer-events: none;
}
.nav__pill::before {
  left: calc(-1 * var(--fillet) + 1px);
  background: radial-gradient(circle var(--fillet) at 0 100%, transparent calc(var(--fillet) - 1px), var(--ink) var(--fillet));
}
.nav__pill::after {
  right: calc(-1 * var(--fillet) + 1px);
  background: radial-gradient(circle var(--fillet) at 100% 100%, transparent calc(var(--fillet) - 1px), var(--ink) var(--fillet));
}
@keyframes navDock {
  0%   { opacity: 0; transform: translateY(-6px) scaleX(0.78); filter: blur(8px); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

.nav__logo {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-right: 12px;
}
.nav__logo img { height: 24px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 2px; margin-right: 4px; }
.nav__link {
  padding: 8px 12px;
  border-radius: var(--r-full);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--on-ink-soft);
  white-space: nowrap;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.nav__link:hover { color: var(--on-ink); background: rgba(255, 255, 255, 0.06); }

.nav__link--mobile { display: none; }

.nav__menu {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.nav__menu span {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: var(--on-ink);
  transition: transform 320ms var(--dock-curve), opacity 180ms ease;
}
.nav__pill.is-open .nav__menu span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__pill.is-open .nav__menu span:nth-child(2) { opacity: 0; }
.nav__pill.is-open .nav__menu span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Phones: Droppy's expanding notch. The pill spans the width and the links
   unfold beneath the logo row when the menu button is tapped. */
@media (max-width: 720px) {
  .nav__pill {
    width: calc(100% - 2 * var(--fillet) - 8px);
    height: auto;
    min-height: var(--nav-h);
    flex-wrap: wrap;
    column-gap: 4px;
    row-gap: 0;
    padding: 6px 8px 6px 14px;
  }
  .nav__logo { margin-right: auto; }
  .nav__menu { display: inline-flex; order: 2; }
  .theme-toggle { order: 1; }
  .nav__pill > .btn--nav { order: 3; }
  .nav__links {
    order: 5;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 2px;
    transition: max-height 560ms var(--dock-curve), opacity 240ms ease, padding 560ms var(--dock-curve);
  }
  .nav__pill.is-open .nav__links { max-height: 320px; opacity: 1; padding: 8px 2px 6px; }
  .nav__link { padding: 13px 12px; border-radius: 12px; font-size: 15px; }
  .nav__link--mobile { display: block; }
  .nav__links:not(.is-open-links) .nav__link { pointer-events: none; }
  .nav__pill.is-open .nav__link { pointer-events: auto; }
}
@media (max-width: 380px) {
  .nav__pill > .btn--nav { display: none; }
}

.theme-toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--on-ink-soft);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.theme-toggle:hover { background: rgba(255, 255, 255, 0.08); color: var(--on-ink); }
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  transition: opacity 340ms linear, filter 340ms cubic-bezier(0.22, 1, 0.36, 1), transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
}
.theme-toggle__sun,
:root[data-theme="light"] .theme-toggle__moon {
  opacity: 0;
  filter: blur(8px);
  transform: rotate(-40deg) scale(0.7);
}
:root[data-theme="light"] .theme-toggle__sun { opacity: 1; filter: blur(0); transform: none; }

/* ---------------------------------------------------------------------- */
/* Buttons (the Droppy set, in CeyPay blue)                               */
/* ---------------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding-inline: 20px;
  border: 0;
  border-radius: var(--r-lg);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.btn svg { width: 16px; height: 16px; }
.btn--sm { height: 38px; padding-inline: 16px; }
.btn--block { width: 100%; }

.btn--nav { border-radius: var(--r-full); background: var(--blue); color: #fff; }
.btn--nav:hover { background: var(--blue-hover); }
.btn--nav:active { background: var(--blue-active); }

.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hover); }
.btn--primary:active { background: var(--blue-active); }

.btn--glass {
  background: var(--glass-strong);
  color: var(--text);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.btn--glass:hover { background: var(--glass-hover); }

.btn--pill {
  height: auto;
  gap: 11px;
  padding: 16px 26px;
  border-radius: 20px;
  font-size: 16px;
  line-height: 1.4;
}
.btn--pill svg { width: 18px; height: 18px; }

/* Morph hover, ported from getdroppy.app: the label blurs out and a glyph
   blurs in, centred. app/ui.js builds the two faces. */
.btn-morph {
  --morph-dur: 340ms;
  --morph-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --morph-blur: 16px;
  --morph-tap-dur: 620ms;
}
.btn-morph__face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  transition: opacity var(--morph-dur) linear, filter var(--morph-dur) var(--morph-ease);
}
.btn-morph__face--hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: blur(var(--morph-blur));
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .btn-morph--icon:not(:disabled):hover .btn-morph__face--rest { opacity: 0; filter: blur(var(--morph-blur)); }
  .btn-morph--icon:not(:disabled):hover .btn-morph__face--hover { opacity: 1; filter: blur(0); }
  .btn-morph--label:not(:disabled):hover .btn-morph__face--rest { animation: morphDissolve var(--morph-dur) var(--morph-ease); }
}
.btn-morph--icon.is-tapmorph .btn-morph__face--rest { animation: morphTapOut var(--morph-tap-dur) var(--morph-ease); }
.btn-morph--icon.is-tapmorph .btn-morph__face--hover { animation: morphTapIn var(--morph-tap-dur) var(--morph-ease); }
@keyframes morphTapOut {
  0% { opacity: 1; filter: blur(0); }
  32%, 68% { opacity: 0; filter: blur(var(--morph-blur)); }
  100% { opacity: 1; filter: blur(0); }
}
@keyframes morphTapIn {
  0% { opacity: 0; filter: blur(var(--morph-blur)); }
  32%, 68% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(var(--morph-blur)); }
}
@keyframes morphDissolve {
  0% { filter: blur(0); opacity: 1; }
  45% { filter: blur(var(--morph-blur)); opacity: 0.3; }
  100% { filter: blur(0); opacity: 1; }
}
.btn-morph > .btn-morph__face--hover > .btn-morph__mark { width: var(--morph-mark, 20px); height: var(--morph-mark, 20px); }
.btn--pill.btn-morph { --morph-mark: 24px; }
.btn--nav.btn-morph, .btn--sm.btn-morph { --morph-blur: 11px; --morph-mark: 17px; }

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

.hero {
  position: relative;
  padding: 136px 0 4px;
}

/* Hero art, Droppy style: one zoomed-in crop of the CeyPay dash pattern,
   pinned to the top of the page and masked so it melts into the canvas at
   both ends. Scroll eases it out of the zoom and up as a single layer (ui.js). */
.hero__art {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  height: min(max(56.6vw, 70vh), 88vh);
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 60%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 60%, transparent 100%);
}
.hero__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: var(--pattern-opacity);
  transform: scale(1.45);
  transform-origin: 50% 40%;
  will-change: transform;
  transition: opacity 400ms var(--ease);
}
:root,
:root[data-theme="dark"] { --pattern-opacity: 0.07; }
:root[data-theme="light"] { --pattern-opacity: 0.08; }
/* Above .layout so the sort menu opens over the category chips. */
.hero__inner { z-index: 2; }
.layout { position: relative; z-index: 1; }

@media (max-width: 720px) {
  .hero__art { height: 560px; }
  .hero__pattern { transform: scale(1.25); }
  :root, :root[data-theme="dark"] { --pattern-opacity: 0.06; }
  :root[data-theme="light"] { --pattern-opacity: 0.07; }
}
.field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 62% at 50% 36%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 62% at 50% 36%, #000 10%, transparent 75%);
  opacity: var(--field-opacity);
}
.field canvas { display: block; width: 100%; height: 100%; }

/* Trench-simple hero: plain eyebrow, solid title, one-line subtitle. */
.hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.hero__inner .hero__title { margin-top: 22px; }
.hero__inner .hero__lede { margin-top: 18px; }
.kicker img { width: 22px; height: 22px; }
.hero__title {
  font-size: clamp(2.4rem, 5.6vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  background: var(--em-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lede {
  max-width: 760px;
  font-size: clamp(1rem, 2.1vw, 1.15rem);
  line-height: 1.5;
  color: var(--text-3);
  text-wrap: pretty;
}
/* Stat pills: the Trench column-head shape (dot, label, count bubble). */
.hstats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.hstat {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 7px 6px 14px;
  border-radius: var(--r-full);
  background: var(--well);
  box-shadow: var(--well-shadow);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.hstat__dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--c, var(--blue)); }
.hstat__count {
  min-width: 34px;
  padding: 2px 10px;
  border-radius: var(--r-full);
  background: var(--glass-strong);
  font-size: 0.8rem;
  color: var(--text-2);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Controls row under the hero, Trench style: CTA, expanding search, sort
   pill, view toggle, all 44px tall and centred. */
.controls {
  position: relative;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 30px;
}
.controls .btn { height: 44px; border-radius: 22px; }
.controls__summary {
  min-height: 20px;
  margin-top: 10px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-4);
  opacity: 0;
  transition: opacity 160ms ease;
}
.controls__summary.is-visible { opacity: 1; }

.xsearch {
  position: relative;
  display: flex;
  align-items: center;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--glass-strong);
  transition: width 460ms var(--dock-curve), background 200ms ease, box-shadow 200ms ease;
}
.xsearch:hover { background: var(--glass-hover); }
.xsearch.is-open {
  width: min(340px, calc(100vw - 2 * var(--pad)));
  background: var(--well);
  box-shadow: var(--well-shadow), 0 0 0 2px var(--blue-soft-strong);
}
.xsearch__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: none;
  color: var(--text-2);
  cursor: pointer;
}
.xsearch__btn svg { width: 17px; height: 17px; }
.xsearch__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 4px 0 0;
  border: 0;
  background: none;
  font-size: 0.95rem;
  outline: none;
  opacity: 0;
  transition: opacity 160ms ease;
}
.xsearch.is-open .xsearch__input { opacity: 1; transition-delay: 120ms; }
.xsearch__input::placeholder { color: var(--text-4); }
.xsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.xsearch__clear {
  flex: none;
  margin-right: 6px;
  padding: 7px 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-3);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
.xsearch.is-open .xsearch__clear { opacity: 1; pointer-events: auto; }
.xsearch__clear:hover { color: var(--text); background: var(--glass); }

.sortpill {
  --menu-h: 146px;
  position: relative;
  display: inline-flex;
  height: 44px;
  min-width: 176px;
  border-radius: 22px;
  color: var(--text-2);
  isolation: isolate;
}
.sortpill::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 22px;
  background: var(--glass-strong);
  transition: bottom 340ms cubic-bezier(0.22, 1, 0.36, 1), background 200ms ease, box-shadow 300ms ease;
}
.sortpill:hover::before { background: var(--glass-hover); }
.sortpill.is-open { color: var(--text); }
/* The menu grows out of the pill itself instead of popping a separate box. */
.sortpill.is-open::before {
  bottom: calc(-1 * var(--menu-h));
  background: var(--well-raised);
  box-shadow: var(--shadow-menu), 0 0 0 1px var(--hairline);
}
.sortpill__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 14px;
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
}
.sortpill__trigger svg { width: 16px; height: 16px; }
.sortpill__label { flex: 1; text-align: left; white-space: nowrap; }
.sortpill__chevron { width: 11px !important; height: 11px !important; transition: transform 200ms var(--ease); }
.sortpill.is-open .sortpill__chevron { transform: rotate(180deg); }
.sortpill__menu {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-9px);
  transition: opacity 140ms ease, visibility 240ms ease, transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.sortpill.is-open .sortpill__menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 60ms; }
.sortpill__option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  height: 40px;
  padding: 0 11px;
  border: 0;
  border-radius: 12px;
  background: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-2);
  text-align: left;
  cursor: pointer;
}
.sortpill__option:hover,
.sortpill__option:focus-visible { background: var(--glass); color: var(--text); outline: none; }
.sortpill__option.is-active { background: var(--blue-soft); color: var(--text); }
.sortpill__check { width: 14px; height: 14px; margin-left: auto; color: var(--blue-text); opacity: 0; }
.sortpill__option.is-active .sortpill__check { opacity: 1; }

.controls .segmented { border-radius: 22px; padding: 3px; background: var(--glass-strong); box-shadow: none; }
.controls .segmented__btn { height: 38px; border-radius: 19px; }
.controls .segmented__btn.is-active { background: var(--well); box-shadow: var(--well-shadow); }

@media (max-width: 720px) {
  .hero { padding-top: 112px; }
  /* Search, sort and view share one line; the CTA takes the line below. */
  .controls { gap: 8px; width: 100%; max-width: 420px; margin-inline: auto; }
  .controls__cta { order: 5; flex-basis: 100%; }
  .sortpill { flex: 1; min-width: 0; }
  .sortpill__label { overflow: hidden; text-overflow: ellipsis; }
  .xsearch.is-open { order: -1; flex-basis: 100%; width: 100%; }
  .hstat { font-size: 0.85rem; padding-left: 12px; }
}

/* ---------------------------------------------------------------------- */
/* Layout                                                                 */
/* ---------------------------------------------------------------------- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
  gap: 28px;
  padding-block: 28px 64px;
}
.aside {
  position: sticky;
  top: calc(var(--nav-bar) + var(--nav-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.card {
  padding: 22px;
  border-radius: var(--r-xl);
  background: var(--well);
  box-shadow: var(--well-shadow);
}
.card__title {
  margin-bottom: 16px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
}
.steps--mobile { display: none; }

@media (max-width: 1020px) {
  .toolbar::before { left: 50%; right: auto; width: 100vw; transform: translateX(-50%); }
  .layout { grid-template-columns: minmax(0, 1fr); }
  .aside { position: static; }
  .aside .steps-card { display: none; }
  .steps--mobile { display: block; margin-bottom: 14px; }
}

/* How it works */
.steps { display: flex; flex-direction: column; }
.step {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 18px;
}
.step:last-child { padding-bottom: 0; }
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 15.5px;
  top: 36px;
  bottom: 4px;
  width: 1px;
  background: var(--hairline);
}
.step__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--blue-soft);
  color: var(--blue-text);
  font-size: 0.85rem;
  font-weight: 600;
}
.step__title { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; padding-top: 5px; }
.step__desc { margin-top: 3px; font-size: 0.85rem; color: var(--text-3); line-height: 1.45; }

@media (max-width: 1020px) and (min-width: 621px) {
  .steps--mobile .steps { flex-direction: row; gap: 18px; }
  .steps--mobile .step { flex: 1; padding-bottom: 0; }
  .steps--mobile .step::before { display: none; }
}

/* Owner CTA card */
.owner-card { position: relative; }
.owner-card h3 { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.owner-card p { margin: 6px 0 16px; font-size: 0.875rem; color: var(--text-3); }

/* Recent voters marquee */
.voters {
  position: relative;
  height: 332px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  scrollbar-width: none;
}
.voters::-webkit-scrollbar { display: none; }
.voters__list { display: flex; flex-direction: column; gap: 8px; padding-block: 8px; }
.voters__status { padding: 32px 0; text-align: center; font-size: 0.875rem; color: var(--text-3); }
.voter-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  background: var(--glass);
  transition: background var(--fast) var(--ease);
}
.voter-card:hover { background: var(--glass-strong); }
.voter-avatar {
  position: relative;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: var(--r-full);
}
.voter-avatar > span,
.voter-avatar > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voter-avatar > span {
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
.voter-card > span:nth-child(2) { min-width: 0; }
.voter-name { display: block; overflow: hidden; font-size: 0.875rem; font-weight: 600; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.voter-username { display: block; font-size: 0.75rem; line-height: 1.3; color: var(--text-3); }
.voter-count { font-size: 0.75rem; font-weight: 600; color: var(--text-4); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------- */
/* Board                                                                  */
/* ---------------------------------------------------------------------- */

.board { scroll-margin-top: calc(var(--nav-bar) + var(--nav-h) + 12px); }
.board__filters { margin-bottom: 12px; }

.toolbar {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--nav-bar) + var(--nav-h));
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
}
/* No fill at rest; a full-bleed frosted band fades in once stuck. */
.toolbar::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * (env(safe-area-inset-top, 0px) + var(--nav-bar) + var(--nav-h)));
  bottom: 0;
  /* From the viewport's left edge to the board column's right edge; with the
     sidebar alongside, a full-bleed band cut across it. */
  left: -100vw;
  right: 0;
  background: var(--band);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 1px 0 var(--band-line);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
}
.toolbar.is-stuck::before { opacity: 1; }
.toolbar__row { display: flex; gap: 10px; }

.search { position: relative; flex: 1 1 auto; }
.search > svg {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 17px;
  height: 17px;
  transform: translateY(-50%);
  color: var(--text-4);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 46px;
  padding: 0 44px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--well);
  box-shadow: var(--well-shadow);
  font-size: 0.95rem;
  outline: none;
  transition: background var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.search input::placeholder { color: var(--text-4); }
.search input:focus { background: var(--well-raised); box-shadow: 0 0 0 2px var(--blue-soft-strong); }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search kbd {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  padding: 1px 7px;
  border-radius: 6px;
  background: var(--glass-strong);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-4);
}
@media (hover: none) { .search kbd { display: none; } }

.segmented {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-lg);
  background: var(--well);
  box-shadow: var(--well-shadow);
}
.segmented__btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.segmented__btn svg { width: 18px; height: 18px; }
.segmented__btn:hover { color: var(--text); }
.segmented__btn.is-active { background: var(--well-raised); color: var(--text); }

.chips {
  display: flex;
  gap: 4px;
  min-width: 0;
  padding: 4px;
  border-radius: var(--r-lg);
  background: var(--well);
  box-shadow: var(--well-shadow);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.chips::-webkit-scrollbar { display: none; }
.chips::after { content: ""; flex: 0 0 28px; }

/* Chip scroller: wraps the chips with prev/next arrows for mouse users,
   who have no horizontal wheel. Arrows only show when there is more to
   scroll in that direction; the fade mask follows the same state. */
.chips-wrap { position: relative; }
.chips-wrap .chips { scroll-behavior: smooth; }
.chips-wrap.can-left .chips {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
.chips-wrap:not(.can-right) .chips {
  -webkit-mask-image: none;
  mask-image: none;
}
.chips-wrap.can-left:not(.can-right) .chips {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px);
  mask-image: linear-gradient(90deg, transparent, #000 40px);
}
.chips-arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--well-raised);
  box-shadow: var(--shadow-chip), 0 0 0 1px var(--hairline);
  color: var(--text-2);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.chips-arrow:hover { color: var(--text); }
.chips-arrow svg { width: 15px; height: 15px; }
.chips-arrow--prev { left: 6px; }
.chips-arrow--next { right: 6px; }
@media (hover: hover) and (pointer: fine) {
  .chips-wrap.can-left .chips-arrow--prev,
  .chips-wrap.can-right .chips-arrow--next { display: grid; }
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.chip:hover { color: var(--text); }
.chip.is-active { background: var(--well-raised); color: var(--text); }
.chip__count { font-size: 0.75rem; color: var(--text-4); font-variant-numeric: tabular-nums; }

.list {
  border-radius: var(--r-xl);
  background: var(--well);
  box-shadow: var(--well-shadow);
  overflow: hidden;
}
.list__head,
.merchant {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 118px;
  align-items: center;
  gap: 14px;
  padding-inline: 20px;
}
.list__head {
  height: 44px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-4);
}
.list__head > :last-child { text-align: right; }

.board__list { display: block; }
.board__status {
  padding: 56px 24px;
  text-align: center;
  color: var(--text-3);
}
.board__status--error { color: var(--error); }

/* Loading skeleton, Droppy's shimmer: flat blocks with one soft highlight
   sweeping across. The sweep is fixed to the viewport so every block on the
   page shimmers as a single wave instead of each running its own. */
:root,
:root[data-theme="dark"] { --sk-base: rgba(255, 255, 255, 0.05); --sk-shine: rgba(255, 255, 255, 0.1); }
:root[data-theme="light"] { --sk-base: rgba(15, 28, 52, 0.06); --sk-shine: rgba(15, 28, 52, 0.02); }
.sk {
  display: block;
  border-radius: var(--r-sm);
  background: linear-gradient(100deg, var(--sk-base) 40%, var(--sk-shine) 50%, var(--sk-base) 60%) fixed;
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.merchant--skeleton { pointer-events: none; }
.merchant--skeleton .merchant__logo.sk {
  background: linear-gradient(100deg, var(--sk-base) 40%, var(--sk-shine) 50%, var(--sk-base) 60%) fixed;
  background-size: 200% 100%;
  box-shadow: none;
  border-radius: 14px;
}
.chip--skeleton { padding: 0 6px; cursor: default; pointer-events: none; }
.chip--skeleton .sk { height: 14px; border-radius: 7px; }
.sk--rank { width: 22px; height: 16px; }
.sk--name { width: 62%; height: 14px; margin-block: 3px; border-radius: 7px; }
.merchant--skeleton:nth-child(3n) .sk--name { width: 44%; }
.merchant--skeleton:nth-child(3n + 1) .sk--name { width: 54%; }
.sk--cat { width: 118px; height: 22px; border-radius: var(--r-full); }
.sk--loc { width: 64px; height: 12px; border-radius: 6px; }
.sk--vote { width: 56px; height: 56px; border-radius: 14px; }
.board--grid .merchant--skeleton .merchant__logo.sk { border-radius: 16px; }
.board--grid .sk--name { width: 78%; }

.merchant {
  min-height: 76px;
  padding-block: 12px;
  border-top: 1px solid var(--hairline);
  transition: background var(--fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .merchant:hover { background: var(--row-hover); }
}

.merchant__rank {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.merchant__rank-hash { margin-right: 1px; color: var(--text-4); font-weight: 500; }
.merchant--top .merchant__rank { color: var(--medal); }
.merchant--top .merchant__rank-hash { color: inherit; opacity: 0.6; }
.merchant[data-rank="1"] { --medal: var(--gold); }
.merchant[data-rank="2"] { --medal: var(--silver); }
.merchant[data-rank="3"] { --medal: var(--bronze); }

.merchant__main { display: flex; align-items: center; gap: 14px; min-width: 0; }
.merchant__logo {
  position: relative;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--logo-tile);
  box-shadow: inset 0 0 0 1px rgba(15, 28, 52, 0.08);
}
.merchant__logo img { width: 100%; height: 100%; object-fit: cover; }
.merchant__logo--fallback img { padding: 9px; object-fit: contain; }
.merchant--top .merchant__logo { box-shadow: 0 0 0 2px var(--medal); }

.merchant__text { min-width: 0; }
.merchant__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 0.975rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.merchant__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 5px;
  font-size: 0.8rem;
  color: var(--text-3);
}
.merchant__cat {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 9px;
  border-radius: var(--r-full);
  background: var(--blue-soft);
  color: var(--blue-text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.merchant__loc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.merchant__loc svg { width: 13px; height: 13px; opacity: 0.7; }

.merchant__vote { display: flex; justify-content: flex-end; }
/* Vote chip, from Droppy's Trench: chevron over the count in a soft square.
   Press squishes to 0.96 under the finger (armed on pointerdown, released on
   up/cancel); a landed vote pops once and the chip stays blue after. */
.upvote {
  --press-release: cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 56px;
  height: 56px;
  padding: 0 12px;
  border: 0;
  border-radius: 14px;
  background: var(--glass-strong);
  color: var(--text-2);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 180ms ease, color 180ms ease, transform 420ms var(--press-release);
}
.upvote svg { width: 15px; height: 15px; transition: transform 240ms var(--dock-curve); }
.upvote:hover { background: var(--blue-soft); color: var(--blue-text); }
.upvote:hover svg { transform: translateY(-2px); }
.upvote.pressing { transform: scale(0.96); transition: background 180ms ease, color 180ms ease, transform 90ms ease-out; }
.upvote.is-voted { background: var(--blue-soft); color: var(--blue-text); }
.upvote.is-voted:hover { background: var(--blue-soft-strong); }
.upvote.pop { animation: votePop 320ms ease; }
.upvote__label { display: none; }
@keyframes votePop { 40% { transform: scale(1.14); } }

.merchant.is-upvoted { animation: rowFlash 900ms var(--ease); }
@keyframes rowFlash {
  0% { background: var(--blue-soft); }
  100% { background: transparent; }
}

/* Grid view */
.board--grid .list { background: transparent; box-shadow: none; overflow: visible; border-radius: 0; }
.board--grid .list__head { display: none; }
.board--grid .board__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.board--grid .merchant {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "main main"
    "rank vote";
  align-content: space-between;
  gap: 16px;
  min-height: 0;
  padding: 18px;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--well);
  box-shadow: var(--well-shadow);
}
.board--grid .merchant__main { grid-area: main; flex-direction: column; align-items: flex-start; gap: 12px; }
/* Column flex doesn't bound width: pin the text to the card so long chips
   and names wrap instead of spilling past the edge. */
.board--grid .merchant__text { width: 100%; }
.board--grid .merchant__name { -webkit-line-clamp: 3; line-clamp: 3; }
.board--grid .merchant__logo { width: 56px; height: 56px; border-radius: 16px; }
.board--grid .merchant__rank { grid-area: rank; align-self: center; }
.board--grid .merchant__vote { grid-area: vote; }
.board--grid .board__status { grid-column: 1 / -1; border-radius: var(--r-xl); background: var(--well); }

.board__foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px 0;
  font-size: 0.8rem;
  color: var(--text-4);
}

@media (max-width: 620px) {
  .toolbar { position: static; }
  .list__head { display: none; }
  /* One compact line per merchant: logo (rank badge on its corner), name,
     and a Product Hunt style vertical upvote on the right. */
  .list .merchant {
    position: relative;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    min-height: 0;
    padding: 14px 14px 14px 16px;
  }
  .merchant:first-child { border-top: 0; }
  .merchant__main { align-items: flex-start; gap: 12px; }
  .merchant__name { -webkit-line-clamp: 3; line-clamp: 3; }
  .merchant__logo { width: 46px; height: 46px; border-radius: 13px; margin-top: 2px; }
  .board:not(.board--grid) .merchant__rank {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 1;
    min-width: 24px;
    padding: 1px 6px;
    border-radius: var(--r-full);
    background: var(--well-raised);
    box-shadow: 0 0 0 2px var(--well);
    font-size: 0.7rem;
    text-align: center;
    line-height: 1.5;
  }
  .board:not(.board--grid) .merchant--top .merchant__rank { background: var(--medal); color: #0b0f17; }
  .board:not(.board--grid) .merchant__rank-hash { display: none; }
  .upvote { min-width: 52px; height: 54px; padding: 0 10px; font-size: 0.875rem; }

  .dock__body { padding: 12px; gap: 10px; }
  .dock__text { font-size: 0.85rem; }
  .board--grid .board__list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .board--grid .merchant { padding: 14px; gap: 12px; }
  .board--grid .merchant__logo { width: 48px; height: 48px; }
  .board--grid .upvote { height: 48px; min-width: 48px; }
  .sk--vote { width: 52px; height: 54px; }
  .board--grid .sk--vote { width: 48px; height: 48px; }
  .board--grid .sk--cat { width: 88px; }
}

/* ---------------------------------------------------------------------- */
/* Floating docks                                                         */
/* ---------------------------------------------------------------------- */

.dock {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  width: max-content;
  max-width: calc(100vw - 24px);
  transform: translateX(-50%);
  animation: dockIn 560ms var(--dock-curve) 900ms both;
}
.dock.dismissed { animation: dockOut 360ms var(--ease) both; }
@keyframes dockIn {
  0% { opacity: 0; transform: translate(-50%, 20px) scale(0.9); filter: blur(8px); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); }
}
@keyframes dockOut {
  to { opacity: 0; transform: translate(-50%, 20px) scale(0.94); filter: blur(6px); }
}
.dock__body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 18px;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-float);
}
.dock__text { font-size: 0.9rem; font-weight: 500; }
.dock__actions { display: flex; gap: 6px; }
.dock .btn--glass { background: rgba(255, 255, 255, 0.1); color: var(--on-ink); }
.dock .btn--glass:hover { background: rgba(255, 255, 255, 0.16); }
.dock__close {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--on-ink-soft);
  cursor: pointer;
}
.dock__close:hover { background: rgba(255, 255, 255, 0.08); color: var(--on-ink); }
.dock__close svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
  .dock { width: calc(100vw - 24px); }
  .dock__body { flex-wrap: wrap; justify-content: center; padding: 14px; border-radius: 22px; text-align: center; }
  .dock__text { flex-basis: 100%; }
  .dock__actions { flex: 1; }
  .dock__actions .btn { flex: 1; }
}

/* Admin profile dock: bottom-right */
.dock--profile { left: auto; right: 16px; transform: none; animation-name: dockInSide; }
@media (max-width: 560px) {
  .dock--profile { width: auto; }
  .dock--profile .dock__body { flex-wrap: nowrap; padding: 6px; }
}
@keyframes dockInSide {
  0% { opacity: 0; transform: translateY(20px) scale(0.9); filter: blur(8px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.dock--profile .dock__body { padding: 6px; gap: 4px; }
.dock__avatar { width: 38px; height: 38px; border-radius: var(--r-full); object-fit: cover; background: #fff; }
.dock__menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 190px;
  padding: 6px;
  border-radius: 18px;
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-float);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 180ms var(--ease), transform 240ms var(--dock-curve);
}
.dock__menu.open { opacity: 1; transform: none; pointer-events: auto; }
.dock__menu-item {
  display: flex;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  color: var(--on-ink);
  cursor: pointer;
}
.dock__menu-item:hover { background: rgba(255, 255, 255, 0.08); }

/* ---------------------------------------------------------------------- */
/* Dialogs                                                                */
/* ---------------------------------------------------------------------- */

.dialog {
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: var(--well);
  color: var(--text);
  box-shadow: var(--shadow-modal), 0 0 0 1px var(--hairline);
  overflow: auto;
}
.dialog::backdrop {
  background: var(--scrim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.dialog[open] { animation: dialogIn 420ms var(--dock-curve); }
@keyframes dialogIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
.dialog__inner { padding: 26px; }
.dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dialog__title { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; }
.dialog__sub { margin-top: 6px; font-size: 0.9rem; color: var(--text-3); }
.dialog__close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  margin: -6px -8px 0 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-full);
  background: var(--glass);
  color: var(--text-3);
  cursor: pointer;
}
.dialog__close:hover { background: var(--glass-strong); color: var(--text); }
.dialog__close svg { width: 16px; height: 16px; }

.dialog__steps { display: flex; flex-direction: column; gap: 22px; margin-top: 24px; }
.dstep { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.dstep__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  background: var(--blue-soft);
  color: var(--blue-text);
  font-size: 0.8rem;
  font-weight: 600;
}
.dstep__label { display: block; padding-top: 3px; margin-bottom: 10px; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }

.field-input,
.field-textarea {
  width: 100%;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--well-raised);
  font-size: 0.9rem;
  outline: none;
  transition: box-shadow var(--fast) var(--ease);
}
.field-textarea {
  display: block;
  min-height: 150px;
  padding: 14px 16px;
  line-height: 1.5;
  resize: vertical;
}
.field-input { height: 48px; padding: 0 16px; }
.field-input:focus,
.field-textarea:focus { box-shadow: 0 0 0 2px var(--blue-soft-strong); }
.field-textarea[aria-busy="true"] { color: var(--text-3); }

.dstep__tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.share-links { display: flex; flex-wrap: wrap; gap: 8px; }
.share-link svg { width: 15px; height: 15px; }

.dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 26px;
}
@media (max-width: 480px) {
  .dialog__inner { padding: 20px; }
  .dialog__actions .btn { flex: 1; }
}

.notice { text-align: center; }
.notice__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 4px auto 14px;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success);
}
.notice__icon svg { width: 26px; height: 26px; }
.notice--error .notice__icon { background: color-mix(in srgb, var(--error) 16%, transparent); color: var(--error); }
.notice__icon .icon-error, .notice--error .notice__icon .icon-ok { display: none; }
.notice--error .notice__icon .icon-error { display: block; }
.notice .dialog__sub { max-width: 380px; margin-inline: auto; }
.notice .dialog__actions { justify-content: center; }
.dialog--notice { width: min(420px, calc(100vw - 24px)); }

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

.footer {
  padding: 56px 0 0;
  overflow: hidden;
  border-top: 1px solid var(--hairline);
}

/* Giant cropped wordmark closing the page, from the Droppy footer: a faint
   "CeyPay" whose lower edge is cut by the viewport, drifting up a little as
   it scrolls into view (ui.js). */
.footer__wordmark {
  overflow: hidden;
  height: clamp(84px, 14vw, 200px);
  margin-top: clamp(36px, 6vw, 64px);
}
.footer__wordmark span {
  display: block;
  font-size: clamp(5rem, 24vw, 21rem);
  font-weight: 700;
  line-height: 0.78;
  letter-spacing: -0.06em;
  text-align: center;
  white-space: nowrap;
  color: transparent;
  background: linear-gradient(180deg, var(--wordmark-top), var(--wordmark-bottom));
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
  will-change: transform;
  transform: translateY(0.06em);
}
:root,
:root[data-theme="dark"] { --wordmark-top: rgba(143, 182, 255, 0.1); --wordmark-bottom: rgba(232, 237, 246, 0.03); }
:root[data-theme="light"] { --wordmark-top: rgba(28, 110, 245, 0.12); --wordmark-bottom: rgba(14, 20, 32, 0.03); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}
.footer__logo img { height: 30px; width: auto; }
.footer__desc { max-width: 340px; margin-top: 14px; font-size: 0.9rem; color: var(--text-3); }
.dialog__title:focus { outline: none; }
.socials { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; }
.footer__badges { margin-top: 20px; }
.footer__ph { display: inline-block; border-radius: 10px; transition: opacity var(--fast) var(--ease); }
.footer__ph:hover { opacity: 0.85; }
.footer__ph img { display: block; width: 170px; max-width: 100%; height: auto; }
.social {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
  background: var(--glass);
  color: var(--text-2);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.social:hover { background: var(--glass-strong); color: var(--text); }
.social svg { width: 17px; height: 17px; }
.footer__head { margin-bottom: 14px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-4); }
.footer__links { display: flex; flex-direction: column; gap: 2px; }
.footer__links a {
  width: fit-content;
  padding: 6px 0;
  font-size: 0.9rem;
  color: var(--text-2);
  transition: color var(--fast) var(--ease);
}
.footer__links a:hover { color: var(--text); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 44px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  font-size: 0.8rem;
  color: var(--text-4);
}
.footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.footer__version {
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.byline { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-weight: 500; }
.byline svg { width: 14px; height: 14px; fill: #e0557f; }
.byline a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; color: var(--text-2); }
.byline a:hover { color: var(--text); }
.byline img { width: 22px; height: 22px; border-radius: 50%; }

@media (max-width: 960px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__bottom { flex-direction: column-reverse; align-items: flex-start; }
}

/* Leave room for the floating dock at the bottom of the page. */
/* The floating dock sits over the decorative wordmark, so the footer's
   real content never needs extra bottom room. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { transition: none; }
  .reveal { transition-duration: 1ms; transform: none; }
  .nav__pill, .dock, .dialog[open], .sk { animation: none; }
  .btn:active, .upvote:active, .theme-toggle:active { transform: none; }
  .theme-toggle svg, .btn-morph__face { transition: none; }
  .btn-morph__face--hover { display: none; }
  .btn-morph--label:hover .btn-morph__face--rest { animation: none; }
  .btn-morph--icon:hover .btn-morph__face--rest { opacity: 1; filter: none; }
  .btn-morph.is-tapmorph .btn-morph__face--rest,
  .btn-morph.is-tapmorph .btn-morph__face--hover { animation: none; }
  .merchant.is-upvoted { animation: none; }
}