/*
 * paytowin.sr.
 *
 * Laid out after outbid.lol, which is worth saying plainly: the shape is copied
 * on purpose because it is a proven shape for this exact mechanic -- one column,
 * price on the right, the paid-for positions tinted, everything else a hairline
 * apart. What is ours is the country, the currency and the prize at the top.
 *
 * The palette is theirs too, now, read off the live site rather than eyeballed:
 * their CSS ships `lab()` tokens for a light and a dark theme, and these are
 * those values converted to sRGB. One accent does every job -- `#e57255` is the
 * price, the active pill, the button and the tint on the top three. The earlier
 * two-accent split (cyan presses, gold is money) is gone with it; --accent and
 * --money are the same colour now and stay as two names only because the rules
 * below mean different things by them.
 *
 * Two values are ours: --panel-2 and --faint. Outbid exposes no token for a
 * second surface or a third text weight, so those are stepped off the ones it
 * does expose.
 */

:root {
  color-scheme: light;

  --bg: #fffdfa;
  --panel: #f6f3ef;
  --panel-2: #ece7e0;
  --line: #e6e0da;
  --line-hi: #d9d2ca;
  --text: #282624;
  --dim: #67625d;
  --faint: #8d867f;

  --accent: #e57255;
  --on-accent: #ffffff;
  --money: #e57255;
  --green: #009f2f;
  --bad: #e7000b;

  /* Their button is the accent knocked back into the page rather than the accent
     at full strength -- salmon on the light theme, brick on the dark one, from
     the one expression. */
  --accent-soft: color-mix(in srgb, var(--accent) 72%, var(--bg));

  /* The three top-row tints, derived so both themes get them for free. */
  --tint-1: color-mix(in srgb, var(--money) 15%, var(--panel));
  --tint-2: color-mix(in srgb, var(--money) 9%, var(--panel));
  --tint-3: color-mix(in srgb, var(--money) 5%, var(--panel));

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --w: 1160px;
}

:root.dark {
  color-scheme: dark;

  --bg: #1a1512;
  --panel: #231e1b;
  --panel-2: #2d2824;
  --line: rgba(255, 255, 255, 0.10);
  --line-hi: rgba(255, 255, 255, 0.15);
  --text: #f7f5f1;
  --dim: #aba39b;
  --faint: #8a827a;

  --green: #50c05f;
  --bad: #ff6467;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 60px;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.note { color: var(--faint); font-size: 13px; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
a { color: var(--accent); }

.wrap, .top, .cats, .hero, .prize, .how, .stats, .foot { max-width: var(--w); margin-inline: auto; }

/* ------------------------------------------------------------------ header */

.top { display: flex; align-items: center; gap: 18px; padding: 18px 0; }

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--text); }
.brand__bars { display: flex; flex-direction: column; gap: 3px; }
.brand__bars i { display: block; height: 3px; border-radius: 2px; background: var(--accent); }
.brand__bars i:nth-child(1) { width: 18px; }
.brand__bars i:nth-child(2) { width: 12px; }
.brand__bars i:nth-child(3) { width: 22px; }
.brand__name { font-size: 19px; font-weight: 800; letter-spacing: -0.03em; }
.brand__tld { color: var(--dim); }

/* The live line. Social proof, so it is a pill you could click rather than a
   label -- these numbers are the argument for paying and should look reachable. */
.pulse {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--line-hi); border-radius: 999px;
  background: var(--panel);
  color: var(--dim); font-size: 13px; text-decoration: none;
}
.pulse strong { color: var(--text); }
.pulse__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--green); }
.pulse__sep { color: var(--faint); }
.pulse__link { color: var(--text); font-weight: 600; }

.top__nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.top__nav a:not(.btn) { color: var(--dim); text-decoration: none; font-size: 14px; font-weight: 500; }
.top__nav a:not(.btn):hover { color: var(--text); }

.btn {
  display: inline-block; padding: 12px 24px;
  border: 1px solid var(--line-hi); border-radius: 999px;
  background: transparent; color: var(--text);
  font: inherit; font-size: 14px; font-weight: 650;
  text-decoration: none; cursor: pointer;
}
.btn--sm { padding: 9px 18px; font-size: 13px; }
.btn--primary { background: var(--accent-soft); border-color: transparent; color: var(--on-accent); }
.btn--primary:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Their theme switch: a round icon button in the nav, moon on the light theme,
   sun on the dark one. Both icons live in the same grid cell so the button
   never changes size when they swap. */
.tmode {
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line-hi); border-radius: 999px;
  background: var(--panel); color: var(--dim); cursor: pointer;
}
.tmode:hover { color: var(--text); border-color: var(--text); }
.tmode__i {
  grid-area: 1 / 1; width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.tmode__i--sun { display: none; }
:root.dark .tmode__i--moon { display: none; }
:root.dark .tmode__i--sun { display: block; }

/* --------------------------------------------------------- category rail */

.cats {
  display: flex; align-items: center; gap: 6px;
  padding: 8px; margin-top: 4px;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel);
  overflow-x: auto; scrollbar-width: none;
}
.cats::-webkit-scrollbar { display: none; }
.cat {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 0; border-radius: 999px;
  background: transparent; color: var(--dim);
  font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer;
  white-space: nowrap;
}
/* The mark takes the pill's colour, so it inverts with it when the pill goes
   active without a second rule. */
.cat__i {
  flex: 0 0 14px; width: 14px; height: 14px;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.cat:hover { color: var(--text); }
.cat.is-on { background: var(--accent); color: var(--on-accent); }

/* ------------------------------------------------------------------ toggle */

.toggle {
  display: flex; justify-content: center; gap: 4px;
  width: max-content; margin: 26px auto 0; padding: 5px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--panel);
}
.toggle__btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 18px; border: 0; border-radius: 999px;
  background: transparent; color: var(--dim);
  font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer;
}
.toggle__btn.is-on { background: var(--accent); color: var(--on-accent); }
.toggle__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); }

/* -------------------------------------------------------------------- hero */

.hero { padding: 38px 0 30px; text-align: center; }
.hero__line {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  flex-wrap: wrap;
  font-size: clamp(30px, 5vw, 52px); font-weight: 800;
}
.hero__rank { color: var(--text); }
.hero__price { color: var(--money); }

/* Small, round and quiet: the steppers nudge the figure, they are not the call
   to action sitting beside them. */
.step {
  width: 26px; height: 26px; padding: 0;
  border: 1px solid var(--line-hi); border-radius: 999px;
  background: var(--panel-2); color: var(--dim);
  font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.step:hover { color: var(--text); border-color: var(--text); }

.claim { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.claim__field {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 300px; max-width: 380px;
  padding: 0 22px;
  border: 1px solid var(--line-hi); border-radius: 999px; background: var(--panel);
}
.claim__field--sm { flex: 1 1 200px; max-width: 240px; }
.claim__icon { color: var(--faint); }
.claim__field input {
  flex: 1; min-width: 0; padding: 14px 0;
  border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 15px;
}
.claim__field input:focus { outline: none; }
.claim__field:focus-within { border-color: var(--accent); }
.claim__select {
  padding: 14px 20px; border: 1px solid var(--line-hi); border-radius: 999px;
  background: var(--panel); color: var(--dim); font: inherit; font-size: 15px; cursor: pointer;
}
.claim__go { padding-inline: 28px; }
.claim__status { flex-basis: 100%; margin: 4px 0 0; font-size: 14px; color: var(--accent); min-height: 20px; }
.claim__status.is-bad { color: var(--bad); }

/* -------------------------------------------------------------------- rows */

.rows { list-style: none; margin: 8px 0 0; padding: 0; }

.row {
  display: grid;
  grid-template-columns: 56px 64px 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--line);
}

/*
 * The paid positions.
 *
 * Only the top three are tinted, each a shade less than the last. The board's
 * argument is that being up here is different; a list where every row looks the
 * same makes that argument in words only.
 */
.row.is-top { border-bottom: 0; border-radius: 14px; margin-bottom: 10px; }
.row--1 { background: var(--tint-1); box-shadow: inset 2px 0 0 var(--money); }
.row--2 { background: var(--tint-2); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--money) 60%, transparent); }
.row--3 { background: var(--tint-3); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--money) 35%, transparent); }
.row.is-top .row__rank { color: var(--money); }

.row__rank { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--faint); text-align: center; }

.row__logo {
  width: 64px; height: 64px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--panel-2); color: var(--text);
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  overflow: hidden;
}
.row__logo img { width: 100%; height: 100%; object-fit: cover; }

.row__title { font-size: 16.5px; font-weight: 700; }
.row__title a { color: inherit; text-decoration: none; }
.row__title a:hover { text-decoration: underline; }
/*
 * The founding chip.
 *
 * The board's whole argument is that being early is worth something; this says
 * it on the row. Tinted from the money colour rather than given one of its own,
 * because it is a claim about money put in early, not a fourth signal.
 */
.row__badge {
  display: inline-block; vertical-align: 2px;
  margin-left: 9px; padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--money) 45%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--money) 12%, transparent);
  color: var(--money);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}

.row__desc {
  margin: 3px 0 0; color: var(--dim); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row__meta { margin: 7px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--faint); font-size: 12.5px; }
.row__cat { color: var(--text); font-weight: 700; }
.row__bid { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--money); text-align: right; }

/* ------------------------------------------------------------- founders
 *
 * A founding listing is the admin's own: on the board permanently, under the
 * ladder, and not competing. It reads as a fixture rather than a contender --
 * no number, no figure, and no top-three glow even when it is the only row
 * on an empty board, which is when it used to light up as the leader.
 */
.row--founder .row__rank { color: var(--accent); }

.row__star {
  width: 17px;
  height: 17px;
  fill: currentColor;
  stroke: none;
  vertical-align: middle;
}

/* The line the prize is drawn at. Stated on the board itself, because being in
   the top three is the whole offer and nobody should have to count rows. */
.cut {
  display: flex; align-items: center; gap: 14px;
  margin: 14px 4px 18px;
  color: var(--money); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
}
.cut::before, .cut::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--money) 35%, transparent); }

/* ------------------------------------------------------------------- pager */

.pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 28px; }
.pager button {
  min-width: 34px; height: 34px; padding: 0 10px;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--accent); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer;
}
.pager button.is-on { background: var(--accent); color: var(--on-accent); }
.pager button:disabled { color: var(--faint); cursor: default; }
.pager__count { margin: 10px 0 0; text-align: center; color: var(--faint); font-size: 13px; }

/* ---------------------------------------------------------------- sections */

/*
 * Below the board the page was four blocks floating in dead space -- 46px of
 * padding above and below each one, and nothing drawing a line between them, so
 * the eye read gaps rather than structure. Sections now sit on a hairline and
 * carry a small uppercase label, which is what tells you a new thing has started
 * without another 26px heading shouting it.
 */

.eyebrow {
  margin: 0 0 10px;
  color: var(--faint);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}

.how, .stats { border-top: 1px solid var(--line); }
.prize { padding: 34px 0 0; }
.how { padding: 40px 0; margin-top: 40px; }
.prize h2, .how h2 { font-size: 26px; font-weight: 780; }

/* ------------------------------------------------------------------- prize */

/*
 * The biggest claim on the page, and previously the weakest thing on it: a grey
 * paragraph under a heading. It gets the panel and the ember edge the number one
 * row gets, because it is the same offer stated in words.
 */
.prize { display: grid; grid-template-columns: 1fr 250px; gap: 12px; align-items: stretch; }

.prize__card {
  padding: 26px 30px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel);
  box-shadow: inset 2px 0 0 var(--money);
}
.prize__lead { max-width: 620px; margin: 12px 0 0; color: var(--dim); font-size: 16px; }

.prize__slots { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; }
.slot {
  display: grid; place-items: center;
  width: 42px; height: 34px; border-radius: 10px;
  font-family: var(--mono); font-size: 13.5px; font-weight: 700; color: var(--money);
}
.slot--1 { background: var(--tint-1); box-shadow: inset 2px 0 0 var(--money); }
.slot--2 { background: var(--tint-2); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--money) 60%, transparent); }
.slot--3 { background: var(--tint-3); box-shadow: inset 2px 0 0 color-mix(in srgb, var(--money) 35%, transparent); }
.slot__note { margin-left: 6px; color: var(--faint); font-size: 12.5px; }

.season {
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px 26px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--panel);
}
.season__n { margin: 0; font-size: 30px; font-weight: 700; color: var(--money); letter-spacing: -0.01em; }
.season__l { margin: 6px 0 0; color: var(--faint); font-size: 13px; }

/* ------------------------------------------------------------------- rules */

.steps {
  list-style: none; counter-reset: s; margin: 22px 0 0; padding: 0;
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.steps li {
  counter-increment: s;
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel);
}
.steps h3 { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }

/* A chip rather than "1." in running text: at this size the number is a label on
   the card, not the first word of the sentence. */
.steps h3::before {
  content: counter(s);
  display: grid; place-items: center;
  flex: 0 0 24px; width: 24px; height: 24px;
  border-radius: 8px; background: var(--panel-2); color: var(--accent);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
}
.steps p { margin: 10px 0 0; color: var(--dim); font-size: 14px; }

/* ------------------------------------------------------------------- stats */

.stats {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 28px;
  padding: 34px 0;
}
.stats__blurb { max-width: 430px; margin: 0; color: var(--dim); font-size: 16px; }
.stats__blurb strong { color: var(--money); }
.stats__cards { display: flex; gap: 12px; }

/* Bordered like every other card on the page. They were the one panel here with
   a fill and no edge, which is what made them look dropped in. */
.stat {
  min-width: 180px;
  padding: 18px 24px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--panel);
}
.stat__n { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: 0.04em; }
.stat__cur { color: var(--money); font-size: 18px; }
.stat__dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--green); }
.stat__l { margin: 6px 0 0; color: var(--faint); font-size: 13px; }

.foot {
  margin-top: 4px; padding-top: 30px;
  border-top: 1px solid var(--line);
  text-align: center; color: var(--faint); font-size: 13px;
}
.foot p { margin: 0 0 8px; }
.foot__links a { text-decoration: none; }
.foot .note { max-width: 620px; margin-inline: auto; }

@media (max-width: 780px) {
  .top { flex-wrap: wrap; }
  .pulse { order: 3; width: 100%; justify-content: center; }
  .top__nav a:not(.btn) { display: none; }
  .row { grid-template-columns: 34px 46px 1fr auto; gap: 12px; padding: 14px 6px; }
  .row__logo { width: 46px; height: 46px; border-radius: 10px; font-size: 16px; }
  .prize { grid-template-columns: 1fr; }
  .prize__card { padding: 22px 20px; }
  .prize__slots { flex-wrap: wrap; }
  .stats { grid-template-columns: 1fr; }
  .stats__cards { flex-wrap: wrap; }
  .stat { flex: 1 1 150px; min-width: 0; }
}