@charset "UTF-8";

/* ==========================================================================
   RankBid by Flowtify
   Canada's pay-to-rank leaderboard.

   Hand written, no build step, no framework.

   The design has one job: make it obvious what a spot costs and how to take
   it. Everything else gets out of the way. Hovering any row shows the price
   of that exact position, because that is the question every visitor is
   actually asking.

   Canadian without the cliche: flag red as the one accent, and a northern
   lights wash behind the hero. Light by default, since this is read on
   phones in daylight; dark follows the visitor's own setting.
   ========================================================================== */

@font-face {
    font-family: 'Geist';
    src: url('/fonts/Geist-Variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;

    /* The flag red, warmed a shade so it reads as confident rather than
       alarming. Used for money, for action, and for nothing else. */
    --maple: #e4322b;
    --maple-deep: #c21f17;
    --maple-wash: #fff1f0;
    --maple-edge: #fcd5d2;

    /* Neutrals carry a trace of the accent's warmth, so the page reads as
       one decision rather than red dropped onto grey. */
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f7f6f5;
    --border: #e8e4e2;
    --border-strong: #d6d0cd;
    --ink: #18171b;
    --ink-2: #4b4950;
    --muted: #77757e;

    /* Northern lights, for the wash behind the hero only. */
    --aurora-1: #5eead4;
    --aurora-2: #818cf8;
    --aurora-3: #f0abfc;

    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgb(24 23 27 / 0.04), 0 10px 30px -18px rgb(24 23 27 / 0.22);
    --shadow-lift: 0 2px 6px rgb(24 23 27 / 0.07), 0 18px 40px -20px rgb(24 23 27 / 0.28);

    --wrap: 1180px;
    --wrap-narrow: 760px;
    --gutter: 18px;

    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0 0 0.5em;
    line-height: 1.18;
    letter-spacing: -0.025em;
    font-weight: 650;
    text-wrap: balance;
}

h1 { font-size: clamp(25px, 3.8vw, 34px); }
h2 { font-size: clamp(19px, 2.4vw, 23px); }
h3 { font-size: 17px; }

p { margin: 0 0 1em; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--maple-deep); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
    outline: 2px solid var(--maple);
    outline-offset: 2px;
    border-radius: 5px;
}

.tabular { font-variant-numeric: tabular-nums; }

.wrap {
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.wrap--narrow { max-width: var(--wrap-narrow); }

.skip { position: absolute; left: -9999px; }

.skip:focus {
    left: 12px; top: 12px; z-index: 100;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   Header
   ========================================================================== */

.topline {
    height: 3px;
    background: linear-gradient(90deg, var(--maple), #ff8a80 55%, var(--maple));
}

.header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--border);
}

.header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 60px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -0.035em;
    white-space: nowrap;
}

.brand__leaf { width: 19px; height: 19px; color: var(--maple); flex: 0 0 auto; }

.brand__by {
    font-size: 11.5px;
    font-weight: 450;
    color: var(--muted);
    letter-spacing: 0;
    align-self: flex-end;
    margin-bottom: 3px;
}

.nav {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
    font-size: 14px;
    color: var(--ink-2);
}

.nav a:hover { color: var(--ink); }

.search { position: relative; flex: 1 1 auto; max-width: 250px; }

.search input {
    width: 100%;
    height: 36px;
    padding: 0 12px 0 34px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: 999px;
    transition: border-color .15s, background .15s;
}

.search input:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--maple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--maple) 16%, transparent);
}

.search svg {
    position: absolute; left: 11px; top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

@media (max-width: 880px) {
    .nav a:not(.btn) { display: none; }
    .header__inner { gap: 11px; }
}

@media (max-width: 560px) {
    .header__inner { height: 56px; gap: 9px; }
    .brand { font-size: 17px; }
    .brand__by { display: none; }
    .search { max-width: none; }
    .search input { font-size: 16px; }
}

@media (max-width: 400px) { .search { display: none; } }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    font: inherit;
    font-size: 14.5px;
    font-weight: 570;
    color: #fff;
    background: var(--maple);
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform .12s, box-shadow .16s, background .16s;
}

.btn:hover {
    color: #fff;
    background: var(--maple-deep);
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--maple) 60%, transparent);
}

.btn:active { transform: translateY(1px); }

.btn--ghost {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--border-strong);
}

.btn--ghost:hover { color: var(--ink); background: var(--surface-2); box-shadow: none; }

.btn--sm { height: 33px; padding: 0 14px; font-size: 13.5px; }
.btn--wide { width: 100%; }
.btn--lg { height: 48px; padding: 0 26px; font-size: 16px; }

/* ==========================================================================
   Category chips
   ========================================================================== */

.chipstrip { position: relative; }

/* ---- the two buttons that reach the categories past the edge ---- */

.chipnav {
    position: absolute;
    z-index: 3;
    top: 50%;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    padding: 0;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    box-shadow: 0 2px 10px -3px rgb(24 23 27 / 0.28);
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .13s, border-color .13s, transform .13s;
}

.chipnav:hover {
    color: var(--maple-deep);
    border-color: var(--maple-edge);
    transform: translateY(-50%) scale(1.06);
}

.chipnav svg { width: 15px; height: 15px; }

.chipnav--back { left: 2px; }
.chipnav--back svg { transform: rotate(180deg); }
.chipnav--forward { right: 2px; }

/* Hidden by app.js when there is nothing further that way. */
.chipnav[hidden] { display: none; }

@media (hover: none) { .chipnav { display: none; } }

.chipstrip::before,
.chipstrip::after {
    content: '';
    position: absolute; top: 0;
    width: 46px; height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}

.chipstrip::before {
    left: 0;
    background: linear-gradient(270deg, transparent, var(--bg));
}

.chipstrip::after {
    right: 0;
    background: linear-gradient(90deg, transparent, var(--bg));
}

/* Only where there is actually something hidden that way. */
.chipstrip--scrollable::after { opacity: 1; }
.chipstrip--scrollable:has(.chipnav--back:not([hidden]))::before { opacity: 1; }
.chipstrip--scrollable:has(.chipnav--forward[hidden])::after { opacity: 0; }

.chips {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 12px 0;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.chips::-webkit-scrollbar { display: none; }
.chips::after { content: ''; flex: 0 0 26px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 31px;
    padding: 0 13px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    scroll-snap-align: start;
    transition: border-color .15s, color .15s;
}

.chip:hover { color: var(--ink); border-color: var(--border-strong); }

.chip--on {
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
}

.chip--on:hover { color: #fff; }
.chip__n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chip--on .chip__n { color: rgb(255 255 255 / 0.55); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    position: relative;
    padding: 40px 0 34px;
    text-align: center;
    overflow: hidden;
}

/* Northern lights. Static, low contrast, behind everything. */
.hero::before {
    content: '';
    position: absolute;
    inset: -60% -20% auto -20%;
    height: 320px;
    background:
        radial-gradient(46% 60% at 22% 55%, color-mix(in srgb, var(--aurora-1) 34%, transparent), transparent 70%),
        radial-gradient(42% 58% at 54% 42%, color-mix(in srgb, var(--aurora-2) 30%, transparent), transparent 70%),
        radial-gradient(38% 54% at 80% 58%, color-mix(in srgb, var(--aurora-3) 26%, transparent), transparent 70%);
    filter: blur(38px);
    opacity: .5;
    pointer-events: none;
}

.hero > * { position: relative; }

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 16px;
    padding: 5px 14px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-2);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.hero__leaf { width: 13px; height: 13px; color: var(--maple); }

.hero__headline {
    margin: 0 0 10px;
    font-size: clamp(31px, 6.4vw, 54px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.042em;
}

.hero__price { color: var(--maple); font-variant-numeric: tabular-nums; }

.hero__sub {
    max-width: 560px;
    margin: 0 auto 24px;
    font-size: 16.5px;
    color: var(--ink-2);
    text-wrap: balance;
}

/* The whole business model in one row, floating on glass. */
.claimbar {
    display: flex;
    gap: 7px;
    max-width: 560px;
    margin: 0 auto;
    padding: 7px;
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    box-shadow: var(--shadow-lift);
}

.claimbar__url { flex: 1 1 auto; display: flex; align-items: center; }
.claimbar__amount { flex: 0 0 112px; position: relative; display: flex; align-items: center; }

.claimbar input {
    width: 100%;
    height: 42px;
    padding: 0 16px;
    font: inherit;
    font-size: 15.5px;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-radius: 999px;
}

.claimbar input:focus { outline: none; }
.claimbar input::placeholder { color: var(--muted); }

.claimbar__amount input {
    padding-left: 26px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.claimbar__dollar {
    position: absolute; left: 15px;
    color: var(--muted);
    font-weight: 600;
    pointer-events: none;
}

.claimbar__divider { width: 1px; background: var(--border); margin: 9px 0; }

.hint {
    min-height: 21px;
    margin: 13px 0 0;
    font-size: 13.5px;
    color: var(--muted);
}

.hint strong { color: var(--maple-deep); font-weight: 600; }

@media (max-width: 600px) {
    .hero { padding: 28px 0 26px; }
    .claimbar { flex-wrap: wrap; border-radius: var(--radius); }
    .claimbar__url { flex: 1 1 100%; }
    .claimbar__amount { flex: 1 1 96px; }
    .claimbar__divider { display: none; }
    .claimbar .btn { flex: 1 1 auto; height: 42px; }
    .claimbar input { border-radius: var(--radius-sm); }
}

/* ==========================================================================
   Page shell
   ========================================================================== */

/*
   Two columns: the board, and the one card that asks for the sale. The card
   is sticky because somebody who is still scrolling at row forty is exactly
   the person who should be able to act without scrolling back.
*/
.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 328px;
    align-items: start;
    gap: 34px;
    padding-bottom: 34px;
}

.layout__main { min-width: 0; }

/*
   The sidebar follows you down and then lets go. app.js gives this column a
   height that ends at the tenth row, and a sticky element simply stops when
   its containing block runs out, so it parks there and picks itself back up
   on the way up. No scroll handler, no jitter.
*/
.layout__side { align-self: stretch; }

.side { position: sticky; top: 76px; }

@media (max-width: 1040px) {
    .layout { grid-template-columns: minmax(0, 1fr); gap: 26px; }

    /* One column: nothing to follow, and the height app.js measured would
       only leave a hole. */
    .layout__side { height: auto !important; }
    .side { position: static; }
}

.layout__aside {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    align-items: start;
    gap: 16px;
    margin-top: 30px;
}

.side > * + * { margin-top: 14px; }

/* ==========================================================================
   The pitch card
   ========================================================================== */

.pitch {
    position: relative;
    overflow: hidden;
    padding: 22px 22px 20px;
    color: #fff;
    background: linear-gradient(158deg, #6b1712 0%, #2a1519 48%, #131218 100%);
    border-radius: var(--radius);
    box-shadow: 0 2px 6px rgb(24 23 27 / 0.1), 0 24px 44px -26px rgb(24 23 27 / 0.55);
}

/* The same northern lights as the hero, turned down to a glow in the corner. */
.pitch::before {
    content: '';
    position: absolute;
    inset: -70px -40px auto -40px;
    height: 250px;
    background:
        radial-gradient(44% 58% at 76% 62%, var(--aurora-1), transparent 70%),
        radial-gradient(48% 56% at 34% 48%, var(--aurora-2), transparent 72%),
        radial-gradient(40% 50% at 58% 30%, var(--aurora-3), transparent 74%);
    filter: blur(44px);
    opacity: .5;
    mix-blend-mode: screen;
    pointer-events: none;
}

.pitch > * { position: relative; }

.pitch__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 620;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.62);
}

.pitch__rank {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 12px 0 14px;
    font-size: 58px;
    font-weight: 720;
    line-height: 1;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
}

.pitch__hash { color: rgb(255 255 255 / 0.4); }

.pitch__rank-note {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: rgb(255 255 255 / 0.66);
}

.pitch__head {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 660;
    line-height: 1.2;
    letter-spacing: -0.028em;
    text-wrap: balance;
}

.pitch__sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: rgb(255 255 255 / 0.66);
}

.pitch__rule { height: 1px; margin: 18px 0 14px; background: rgb(255 255 255 / 0.15); }

.pitch__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.pitch__price-label { font-size: 13.5px; color: rgb(255 255 255 / 0.6); }

.pitch__price-value {
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.035em;
}

.pitch__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    font-size: 15.5px;
    font-weight: 620;
    letter-spacing: -0.01em;
    color: #17161a;
    background: #fff;
    border-radius: 999px;
    transition: transform .13s ease, box-shadow .13s ease;
}

.pitch__cta:hover {
    color: #17161a;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgb(0 0 0 / 0.5);
}

.pitch__cta:active { transform: translateY(0); }

.pitch__fine {
    margin: 11px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    text-align: center;
    color: rgb(255 255 255 / 0.45);
}

/* ==========================================================================
   The three steps, beside the board
   ========================================================================== */

.howcard__head {
    margin: 0 0 14px;
    font-size: 15.5px;
    font-weight: 640;
    letter-spacing: -0.02em;
}

.howsteps { list-style: none; margin: 0; padding: 0; }

.howsteps li {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
}

.howsteps li:last-child { padding-bottom: 0; }

/* The line that ties one step to the next. */
.howsteps li:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 12px; top: 28px; bottom: 6px;
    width: 1px;
    background: var(--border);
}

.howsteps__n {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 25px; height: 25px;
    font-size: 12px;
    font-weight: 640;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: var(--maple);
    border-radius: 50%;
}

/* Classes, not element selectors: a bare `.howsteps span` here outranks
   .howsteps__n and quietly restyles the numbered circle. */
.howsteps__title { display: block; font-size: 14px; font-weight: 620; letter-spacing: -0.012em; }
.howsteps__note { display: block; margin-top: 1px; font-size: 13px; line-height: 1.45; color: var(--muted); }

.howcard__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 16px;
    font-size: 13.5px;
    font-weight: 570;
    color: var(--maple-deep);
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
}

.card__title {
    margin: 0;
    font-size: 12px;
    font-weight: 640;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: var(--muted);
}

.card__body { padding: 16px; }
.card__text { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.card__text strong { color: var(--ink); font-weight: 620; }
.card__foot { margin-top: 12px; }

/* ==========================================================================
   The board
   ========================================================================== */

.boardhint {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    padding-left: 2px;
    font-size: 13px;
    color: var(--muted);
}

.boardhint svg {
    flex: 0 0 auto;
    width: 14px; height: 14px;
    color: var(--maple);
}

.boardhint__touch { display: none; }

@media (hover: none) {
    .boardhint__hover { display: none; }
    .boardhint__touch { display: inline; }
}

/* The first row's hover pill rises above the board, so leave it room. */
.board {
    margin-top: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.row {
    position: relative;
    display: grid;
    grid-template-columns: 40px 38px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    transition: background .14s;
}

.row:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.row:last-child { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }

.row:hover { background: var(--surface-2); }

/* The top three carry the accent, so the head of a board reads instantly. */
.row--1, .row--2, .row--3 { background: var(--maple-wash); }
.row--1:hover, .row--2:hover, .row--3:hover {
    background: color-mix(in srgb, var(--maple-wash) 62%, var(--surface));
}

/* An open spot offers a button, not a price repeated down the page. */
.row__open {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    height: 29px;
    padding: 0 13px;
    font-size: 13px;
    font-weight: 570;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    transition: color .14s, background .14s, border-color .14s;
}

/* Two levels, because they are two different clicks.

   Hovering the row means "this listing": the button wakes up, in red text
   on white, to say the spot is there for the taking, but it does not look
   pressed, because the click you are about to make goes to the profile.

   Hovering the button itself means "claim it": that is when it fills red.
   Before, the row hover filled it, so the button looked active while the
   cursor was on a link that went somewhere else. */
.row--open:hover .row__open,
.row--open:focus-within .row__open {
    color: var(--maple-deep);
    background: var(--surface);
    border-color: var(--maple);
}

.row--open .row__open:hover,
.row--open .row__open:focus-visible {
    color: #fff;
    background: var(--maple);
    border-color: var(--maple);
}

.row--open .row__open:active {
    background: var(--maple-deep);
    border-color: var(--maple-deep);
}

.row--open:hover { background: var(--maple-wash); }

/* A bar rides in on the left of whichever row the cursor is over, so the
   eye knows which spot the price belongs to. */
.row::before {
    content: '';
    position: absolute;
    left: 0; top: 6px; bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--maple);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .16s ease;
}

.row:hover::before, .row:focus-within::before { transform: scaleY(1); }

.row__rank {
    font-size: 15.5px;
    font-weight: 640;
    color: var(--muted);
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.row--1 .row__rank, .row--2 .row__rank, .row--3 .row__rank {
    color: var(--maple);
    font-size: 17px;
}

/*
   The monogram is the floor, not the plan: the business's real site icon is
   laid over it, and the letters only show through when a site has no icon
   worth using. One definition for the board, the feed and the profile.
*/
.avatar {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 38px; height: 38px;
    border-radius: 11px;
    overflow: hidden;
}

.avatar--sm { width: 26px; height: 26px; border-radius: 8px; }
.avatar--lg { width: 72px; height: 72px; border-radius: 20px; }

.avatar__initials {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -0.02em;
}

.avatar--sm .avatar__initials { font-size: 10.5px; }
.avatar--lg .avatar__initials { font-size: 25px; font-weight: 670; }

.avatar__icon {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    padding: 5px;
    object-fit: contain;
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--border);
    border-radius: inherit;
}

.avatar--sm .avatar__icon { padding: 3px; }
.avatar--lg .avatar__icon { padding: 10px; }

/* Hidden by app.js the moment a site turns out to have no icon. */
.avatar__icon--missing { display: none; }

.row__main { min-width: 0; }

.row__name {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.015em;
    transition: color .13s;
}

.row:hover .row__name { color: var(--maple-deep); }
.row:hover .row__rank { color: var(--maple); }

.row__name svg { opacity: 0; transition: opacity .13s; flex: 0 0 auto; }
.row:hover .row__name svg { opacity: .55; }

.row__tag {
    margin: 1px 0 2px;
    font-size: 13.5px;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    font-size: 12px;
    color: var(--muted);
}

.row__meta a:hover { color: var(--maple-deep); }
.row__sep { opacity: .4; }

.row__right { text-align: right; white-space: nowrap; }

.row__total {
    font-size: 16.5px;
    font-weight: 660;
    letter-spacing: -0.022em;
    font-variant-numeric: tabular-nums;
}

.row__details { font-size: 11.5px; color: var(--muted); }

.row__blanket { position: absolute; inset: 0; z-index: 1; }

/* The children of the row sit above the blanket so their own links stay
   clickable. But a tagline or a meta line is a full-width block, and the
   empty part of it to the right of the text was swallowing the click that
   should have reached the blanket: an arrow cursor on a row that is meant
   to be one big link. So the blocks let the pointer fall through, and only
   the links inside them catch it. */
.row__main > *, .row__right > * { position: relative; z-index: 2; pointer-events: none; }
.row__main a, .row__right a { pointer-events: auto; }
.row__rank, .avatar { position: relative; z-index: 0; }

/*
   The interaction the whole site turns on: hover any position and the price
   of that exact spot appears, one click from being yours.
*/
.row__take {
    position: absolute;
    z-index: 3;
    bottom: calc(100% - 15px);
    left: 50%;
    display: inline-flex;
    flex-direction: column;
    border-radius: 999px;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--maple) 75%, transparent);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 5px) scale(.96);
    transition: opacity .15s ease, transform .15s ease;
}

.row__take-buy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 570;
    white-space: nowrap;
    color: #fff;
    background: var(--maple);
    border-radius: 999px;
}

.row__take-label { opacity: .82; }
.row__take-price { font-weight: 700; letter-spacing: -0.01em; }
.row__take-go { flex: 0 0 auto; opacity: .7; }

/*
   The top five carry a published figure about what a high spot is worth.
   It is a sourced fact about search results, shown at the moment somebody
   is deciding, which is the only moment it is any use.
*/
.row__take--wide {
    width: min(420px, calc(100% - 24px));
    border-radius: 15px;
    background: var(--surface);
    box-shadow: 0 2px 6px rgb(24 23 27 / 0.08), 0 20px 40px -18px rgb(24 23 27 / 0.42);
}

/*
   On the top five the price is the headline of the card, not a caption on
   it. The finding underneath is the reason; the number is the offer.
*/
.row__take--wide .row__take-buy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'label label' 'price go';
    align-items: center;
    gap: 2px 10px;
    padding: 13px 16px 14px;
    border-radius: 15px 15px 0 0;
    white-space: normal;
    text-align: left;
}

.row__take--wide .row__take-label {
    grid-area: label;
    font-size: 12.5px;
    letter-spacing: 0.005em;
}

.row__take--wide .row__take-price {
    grid-area: price;
    font-size: 30px;
    font-weight: 730;
    line-height: 1.05;
    letter-spacing: -0.04em;
}

.row__take--wide .row__take-go {
    grid-area: go;
    width: 22px; height: 22px;
    opacity: .85;
}

.row__fact {
    display: block;
    padding: 11px 16px 12px;
    background: var(--surface-2);
    border-radius: 0 0 15px 15px;
    text-align: left;
    color: var(--ink-2);
}

.row__fact-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.row__fact-stat {
    flex: 0 0 auto;
    font-size: 17px;
    font-weight: 720;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--maple-deep);
    font-variant-numeric: tabular-nums;
}

.row__fact-head {
    font-size: 13.5px;
    font-weight: 660;
    letter-spacing: -0.015em;
    color: var(--ink);
}

.row__fact-line { display: block; font-size: 12.5px; line-height: 1.5; }

.row__fact-src {
    display: block;
    margin-top: 7px;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--muted);
}

.row:hover .row__take,
.row:focus-within .row__take {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0) scale(1);
}

.row__take:hover .row__take-buy { background: var(--maple-deep); }
.row__take-buy b { font-weight: 700; font-variant-numeric: tabular-nums; }

/* No hover on a touch screen, so the price lives in the row itself. */
.row__take-inline {
    display: none;
    margin-top: 7px;
    padding: 3px 11px;
    font-size: 12.5px;
    font-weight: 560;
    color: var(--maple-deep);
    background: var(--maple-wash);
    border: 1px solid var(--maple-edge);
    border-radius: 999px;
}

.row__take-inline b { font-weight: 700; }

/* Hidden on a mouse, where the hover card carries the same figure. */
.row__fact-touch { display: none; }

@media (hover: none) {
    .row__take { display: none; }
    .row__take-inline { display: inline-block; }

    /* The inline pill already is the call to action, with the price in it. */
    .row__open { display: none; }

    .row__fact-touch {
        display: block;
        margin: 8px 0 0;
        font-size: 12.5px;
        line-height: 1.45;
        color: var(--ink-2);
    }

    .row__fact-touch b { font-weight: 700; color: var(--maple-deep); }
    .row__fact-touch .row__fact-head { color: var(--ink); }
    .row__fact-touch span { display: block; margin-top: 3px; color: var(--muted); }
}

/* ==========================================================================
   The bar that follows a phone down the page
   ========================================================================== */

.mobilebar { display: none; }

@media (max-width: 1040px) {
    .mobilebar {
        position: fixed;
        z-index: 50;
        left: 0; right: 0; bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
        background: color-mix(in srgb, var(--surface) 88%, transparent);
        backdrop-filter: saturate(160%) blur(14px);
        border-top: 1px solid var(--border);
        box-shadow: 0 -8px 24px -18px rgb(24 23 27 / 0.5);
    }

    .mobilebar__text { font-size: 13.5px; color: var(--ink-2); }
    .mobilebar__text b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

    body { padding-bottom: 70px; }
}

@media (max-width: 560px) {
    .row {
        grid-template-columns: 26px 34px minmax(0, 1fr);
        gap: 9px;
        padding: 11px 12px;
        align-items: start;
    }
    .row__rank { padding-top: 7px; font-size: 13.5px; }
    .row--1 .row__rank, .row--2 .row__rank, .row--3 .row__rank { font-size: 15px; }
    .row .avatar { width: 34px; height: 34px; margin-top: 2px; }
    .row__tag { white-space: normal; }
    .row__right {
        grid-column: 2 / -1;
        margin-top: 4px;
        text-align: left;
        display: flex;
        align-items: baseline;
        gap: 9px;
    }
    .row__total { font-size: 15px; }
}

/* Badges */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 560;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--ink-2);
    background: var(--surface);
}

.badge--verified {
    color: #047857;
    background: #ecfdf5;
    border-color: #a7f3d0;
}

.badge--canada {
    color: var(--maple-deep);
    background: var(--maple-wash);
    border-color: var(--maple-edge);
}

.badge--unclaimed { color: var(--muted); border-style: dashed; }

/* A business from outside Canada. Same board, marked so nobody has to guess. */
.badge--global { color: var(--ink-2); }
.row__global { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.row__global svg { flex: 0 0 auto; }

.midbanner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 15px 16px;
    background: linear-gradient(100deg, var(--maple-wash), transparent 72%);
    border-top: 1px solid var(--maple-edge);
    border-bottom: 1px solid var(--maple-edge);
}

.midbanner p { margin: 0; font-size: 14.5px; }
.midbanner strong { font-weight: 630; }

/* ==========================================================================
   Activity and lists
   ========================================================================== */

.feed { list-style: none; margin: 0; padding: 0; }

.feed li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 13.5px;
}

.feed li:last-child { border-bottom: 0; }

.feed__text { min-width: 0; line-height: 1.45; }
.feed__when { font-size: 11.5px; color: var(--muted); }

.feed__amount {
    color: var(--maple-deep);
    font-weight: 620;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Stats
   ========================================================================== */

.stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin: 36px 0 0;
}

.stat { padding: 18px 14px; background: var(--surface); text-align: center; }

.stat__n {
    font-size: clamp(19px, 2.8vw, 25px);
    font-weight: 680;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.stat__l { margin-top: 2px; font-size: 12.5px; color: var(--muted); }

@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/*
   What replaces the numbers before there are any numbers. Three steps, in
   order, because the sequence is the information.
*/
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1px;
    margin: 20px 0 54px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.step { padding: 22px 20px 24px; background: var(--surface); }

.step__n {
    display: grid;
    place-items: center;
    width: 26px; height: 26px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 660;
    font-variant-numeric: tabular-nums;
    color: var(--maple);
    background: var(--maple-wash);
    border: 1px solid var(--maple-edge);
    border-radius: 50%;
}

.step__h { margin: 0 0 5px; font-size: 16px; font-weight: 640; letter-spacing: -0.02em; }
.step__p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }


/* ==========================================================================
   The answer above a board
   ========================================================================== */

.intro { margin: 4px 0 18px; }
.intro h1 { margin-bottom: 9px; }

.intro__answer {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 70ch;
}

.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 15px 0 0;
    padding: 0;
    list-style: none;
}

.facts li {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 12px;
    font-size: 12.5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.facts b { font-weight: 630; font-variant-numeric: tabular-nums; }
.facts span { color: var(--muted); }

/* ==========================================================================
   Pagination
   ========================================================================== */

.pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 24px 0 0;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.pager a, .pager span {
    display: grid;
    place-items: center;
    min-width: 36px; height: 36px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-2);
}

.pager a:hover { border-color: var(--border-strong); color: var(--ink); }

.pager .on {
    color: #fff;
    background: var(--maple);
    border-color: var(--maple);
    font-weight: 600;
}

.pager .gap { border: 0; background: none; color: var(--muted); min-width: 18px; }


/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { margin: 38px 0 0; }
.faq h2 { font-size: 19px; margin-bottom: 12px; }
.faq__item { padding: 15px 0; border-top: 1px solid var(--border); }
.faq__item h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 630; }
.faq__item p { margin: 0; color: var(--ink-2); max-width: 72ch; }

/* ==========================================================================
   Listing page
   ========================================================================== */

.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 16px 0 14px;
    font-size: 13px;
    color: var(--muted);
}

.crumbs a:hover { color: var(--maple-deep); }
.crumbs span { opacity: .5; }
.crumbs__here { opacity: 1; color: var(--ink-2); }

.profile { display: flex; gap: 18px; align-items: flex-start; padding: 22px; }

.profile__main { min-width: 0; flex: 1 1 auto; }
.profile h1 { margin: 0 0 4px; font-size: clamp(22px, 3.2vw, 29px); }
.profile__tag { margin: 0 0 10px; font-size: 15.5px; color: var(--ink-2); }
.profile__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.profile__actions { display: flex; flex-wrap: wrap; gap: 9px; }

.ranks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
    gap: 1px;
    background: var(--border);
    border-top: 1px solid var(--border);
}

.rankcell { padding: 14px 16px; background: var(--surface); }

.rankcell__n {
    font-size: 20px;
    font-weight: 680;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.rankcell__n--text { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }

.rankcell__l {
    font-size: 12.5px;
    line-height: 1.35;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rankcell a:hover .rankcell__l { color: var(--maple-deep); }

.paytable { width: 100%; border-collapse: collapse; font-size: 14px; }

.paytable th {
    text-align: left;
    font-size: 11.5px;
    font-weight: 570;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    padding: 0 0 8px;
    border-bottom: 1px solid var(--border);
}

.paytable td { padding: 9px 0; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.paytable tr:last-child td { border-bottom: 0; }
.paytable td:last-child, .paytable th:last-child { text-align: right; }

/* ==========================================================================
   Prose
   ========================================================================== */

.prose {
    max-width: 68ch;
    margin-inline: auto;
    padding: 30px 0 56px;
    font-size: 16.5px;
    line-height: 1.7;
}

.prose h1 { margin-bottom: 0.4em; }
.prose h2 { margin-top: 1.7em; font-size: 21px; }
.prose h3 { margin-top: 1.4em; font-size: 17px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: 0.4em; }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 1.2em 0; }
.prose th, .prose td { padding: 9px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.prose th { font-weight: 620; color: var(--muted); font-size: 12.5px; text-transform: uppercase; }

.lead { font-size: 17.5px; color: var(--ink-2); }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 40px 0 0;
    font-size: 14px;
}

.footer__cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 26px 22px;
    padding-bottom: 30px;
}

.footer h4 {
    margin: 0 0 10px;
    font-size: 11.5px;
    font-weight: 630;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}

.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 6px; }
.footer a { color: var(--ink-2); }
.footer a:hover { color: var(--maple-deep); }
.footer__cols--dense ul { columns: 2; column-gap: 16px; }

.footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0 24px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 13px;
}

.footer__flow { display: inline-flex; align-items: center; gap: 7px; font-weight: 540; color: var(--ink-2); }
.footer__leaf { width: 15px; height: 15px; color: var(--maple); }
.footer__h4--gap { margin-top: 16px; }

/* ==========================================================================
   Utilities
   ========================================================================== */

.muted { color: var(--muted); }
.tiny { font-size: 12.5px; }
.center { text-align: center; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.stack > * + * { margin-top: 14px; }

.notice {
    padding: 13px 15px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--maple);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.empty { padding: 44px 20px; text-align: center; color: var(--muted); }
.empty h3 { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .header, .footer, .chips, .claimbar, .midbanner, .row__take { display: none; }
    .board { border: 0; box-shadow: none; }
}

/* ==========================================================================
   The submission form
   ========================================================================== */

.submit { max-width: 620px; margin-inline: auto; padding: 28px 0 60px; }
.submit__head { margin-bottom: 20px; }
.submit__head h1 { margin-bottom: 8px; }
.submit__head .lead { margin: 0; max-width: 54ch; }

.field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 570; }

.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field input[type="password"],
.field select,
.field textarea {
    width: 100%;
    padding: 10px 13px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    transition: border-color .15s, box-shadow .15s;
}

.field textarea { resize: vertical; min-height: 84px; line-height: 1.55; }

.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--maple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--maple) 16%, transparent);
}

.field input[readonly] { background: var(--surface-2); color: var(--muted); }

.field__help { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.field__error { margin: 6px 0 0; font-size: 13px; color: #b91c1c; font-weight: 500; }

/* ---- Where the business is ---------------------------------------
   Two chips that are really radio buttons. The rest of the form follows
   the choice with CSS alone, so it works before the script loads and
   without it: pick Global and the city field folds away, the help line
   swaps, and the confirmation stops asking for a Canadian declaration
   that would be untrue. */
.scopepick { border: 0; padding: 0; margin: 0; min-width: 0; }
.scopepick legend { display: block; margin-bottom: 8px; padding: 0; font-size: 14px; font-weight: 570; }
.scopepick__options { display: flex; gap: 8px; flex-wrap: wrap; }

/* Written with the fieldset in the selector on purpose: the generic
   ".field label" rule turns every label in a field into a block, which
   would win over ".chip" and leave the leaf and the word sitting at the
   top of a box instead of centred in a pill. */
.scopepick .scopepick__chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    cursor: pointer;
    height: 36px;
    padding: 0 15px;
    font-size: 14px;
    line-height: 1;
    gap: 7px;
    user-select: none;
}

.scopepick__chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.scopepick__chip:has(input:checked) { color: #fff; background: var(--ink); border-color: var(--ink); }
.scopepick__chip:has(input:focus-visible) { outline: 2px solid var(--maple); outline-offset: 2px; }
.scopepick__leaf { width: 13px; height: 13px; color: var(--maple); }
.scopepick__chip:has(input:checked) .scopepick__leaf { color: #ff8a80; }
.scopepick__globe { color: var(--muted); }
.scopepick__chip:has(input:checked) .scopepick__globe { color: rgb(255 255 255 / 0.8); }

.scopepick__help--global,
.confirm__text--global { display: none; }

#claim:has(#scope_global:checked) .scopepick__help--ca,
#claim:has(#scope_global:checked) .field--city,
#claim:has(#scope_global:checked) .confirm__text--ca { display: none; }
#claim:has(#scope_global:checked) .scopepick__help--global { display: block; }
#claim:has(#scope_global:checked) .confirm__text--global { display: inline; }


.amountbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

.amountbox:focus-within {
    border-color: var(--maple);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--maple) 16%, transparent);
}

.amountbox span { color: var(--muted); font-weight: 570; }
.amountbox__cur { font-size: 13px; }

.amountbox input {
    flex: 1 1 auto;
    padding: 10px 0;
    border: 0;
    background: transparent;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.amountbox input:focus { outline: none; box-shadow: none; }

.confirm { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }

.confirm input {
    margin-top: 3px;
    width: 17px; height: 17px;
    accent-color: var(--maple);
    flex: 0 0 auto;
}

.notice--bad { border-left-color: #dc2626; background: #fef2f2; color: #7f1d1d; }
.notice--good { border-left-color: #059669; background: #ecfdf5; color: #065f46; }

/* ==========================================================================
   After checkout
   ========================================================================== */

.done { max-width: 540px; margin-inline: auto; padding: 54px 0 70px; text-align: center; }
.done h1 { font-size: clamp(26px, 4.4vw, 38px); }
.done .lead { margin-inline: auto; max-width: 44ch; }

.done__tick {
    display: grid; place-items: center;
    width: 56px; height: 56px;
    margin: 0 auto 20px;
    border-radius: 50%;
    color: #fff;
    background: var(--maple);
}


.done__spin {
    width: 32px; height: 32px;
    margin: 0 auto 22px;
    border: 3px solid var(--border-strong);
    border-top-color: var(--maple);
    border-radius: 50%;
    animation: spin 800ms linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.done__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.done__share { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); }

/* ==========================================================================
   Discover pages: search, activity, stats, categories and cities
   ========================================================================== */

/* These five are one column rather than a board plus a sidebar, so they carry
   the bottom breathing room and the rhythm .layout would have given them. */
.discover { padding-bottom: 56px; }

.discover > * + * { margin-top: 24px; }

/* The search box on the search page itself, for narrowing a query without
   reaching back up to the one in the header. */
.searchbox {
    display: flex;
    gap: 8px;
}

.searchbox__field { flex: 1 1 auto; }

.searchbox input {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.searchbox input:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Six columns of monthly figures scroll sideways on a phone rather than
   squashing into something nobody can read. */
.tablescroll { overflow-x: auto; }

/* The category grid. Each tile is a .card, so it only needs the padding and
   the type scale here. */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tile {
    display: block;
    height: 100%;
    padding: 15px 16px;
    transition: border-color .15s;
}

.tile:hover { border-color: var(--border-strong); }

.tile__name {
    display: block;
    font-size: 15.5px;
    font-weight: 620;
    color: var(--ink);
}

.tile__short {
    display: block;
    margin-top: 5px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

.tile__meta {
    display: block;
    margin-top: 11px;
    font-size: 12.5px;
    color: var(--muted);
}

.tile__leader { color: var(--ink-2); }

/* Cities wrap instead of scrolling sideways the way the category chips do:
   this page is the index, so every city has to be visible at once. */
.chipwrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A city nobody has claimed yet still gets a link, just a quieter one. */
.chip--quiet {
    color: var(--muted);
    border-style: dashed;
}

.chip--quiet:hover { color: var(--ink-2); }

/* ==========================================================================
   The admin panel
   ==========================================================================

   Everything below is prefixed .adm- and is used by views/admin/ only. It is
   at the end of this file, and nowhere else, so that the public stylesheet
   above stays the whole story for anything a visitor sees.

   No design ambition on purpose: tables and forms, with one loud bar across
   the top so there is never a moment of wondering which side of the site you
   are looking at. The bar carries the flag red a shade deeper than the
   public accent, which keeps it unmistakably RankBid while still reading as
   the back of the house rather than the front.
   ========================================================================== */

.adm {
    /* The admin's own three colours, so nothing below hard codes a hex. */
    --adm-bar: #c21f17;
    --adm-bar-ink: #fbd9d6;
    --adm-good: #15803d;

    background: var(--surface-2);
    color: var(--ink);
}

/* The bar. The one loud thing in the admin. */

.adm-bar {
    background: var(--adm-bar);
    color: #fff;
}

.adm-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 20px;
    max-width: 1180px;
    margin-inline: auto;
    padding: 11px 20px;
}

.adm-bar__brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 640;
    color: #fff;
    text-decoration: none;
}

.adm-bar__leaf {
    width: 19px;
    height: 19px;
    color: #fff;
}

.adm-bar__who {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: 13px;
    color: var(--adm-bar-ink);
}

.adm-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.adm-nav a {
    padding: 4px 10px;
    font-size: 13.5px;
    color: var(--adm-bar-ink);
    text-decoration: none;
    border-radius: var(--radius-sm);
}

.adm-nav a:hover { color: #fff; background: rgb(255 255 255 / 0.14); }
.adm-nav a.on { color: var(--adm-bar); background: #fff; font-weight: 560; }

/* Page frame */

.adm-main {
    max-width: 1180px;
    margin-inline: auto;
    padding: 22px 20px 60px;
}

.adm-h1 { margin: 0 0 16px; font-size: 22px; font-weight: 640; }
.adm-h2 { margin: 0 0 10px; font-size: 14px; font-weight: 620; text-transform: uppercase;
          letter-spacing: .03em; color: var(--muted); }

.adm-section { margin-bottom: 30px; }
.adm-narrow { max-width: 400px; }

.adm-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    max-width: 1180px;
    margin-inline: auto;
    padding: 16px 20px 34px;
    font-size: 12.5px;
    color: var(--muted);
    border-top: 1px solid var(--border);
}

/* Cards, which here are just a box around a form. */

.adm-card {
    padding: 16px;
    margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Messages. One line, no icons. */

.adm-flash {
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--muted);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.adm-flash--good { border-left-color: var(--adm-good); }
.adm-flash--bad { border-left-color: #dc2626; color: #7f1d1d; background: #fef2f2; }
.adm-flash--once { border-left-color: var(--maple); }

.adm-once {
    display: block;
    margin-top: 7px;
    padding: 9px 11px;
    font-family: var(--mono);
    font-size: 13px;
    word-break: break-all;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

/* Tables. The admin is mostly this. */

.adm-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.adm-table th,
.adm-table td {
    padding: 7px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}

.adm-table thead th {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--muted);
    white-space: nowrap;
}

.adm-table tr:last-child td { border-bottom: 0; }
.adm-table--pairs th { width: 180px; color: var(--muted); font-weight: 500; }

.adm-num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-mono { font-family: var(--mono); font-size: 12.5px; }
.adm-muted { color: var(--muted); }
.adm-wrap { max-width: 420px; word-break: break-word; white-space: normal; }
.adm-json { max-width: 280px; font-size: 11.5px; color: var(--ink-2); }
.adm-pre { margin: 0; font-family: var(--mono); font-size: 12.5px; white-space: pre-wrap; }

/* A wide table scrolls inside its own box rather than the page. */
.adm-scroll { overflow-x: auto; }

/* Status words, coloured only enough to be picked out at a glance. */

.adm-tag {
    display: inline-block;
    padding: 1px 7px;
    font-size: 11.5px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--ink-2);
    background: var(--surface-2);
}

.adm-tag--published, .adm-tag--paid { color: #065f46; border-color: #a7f3d0; background: #ecfdf5; }
.adm-tag--hidden { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.adm-tag--removed, .adm-tag--refunded,
.adm-tag--disputed, .adm-tag--dispute_lost { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
.adm-tag--unclaimed { border-style: dashed; }

/* Forms */

.adm-field { margin-bottom: 13px; }

.adm-field label {
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 560;
}

.adm-field input[type="text"],
.adm-field input[type="email"],
.adm-field input[type="password"],
.adm-field input[type="number"],
.adm-field input[type="search"],
.adm-field select,
.adm-field textarea {
    width: 100%;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
}

.adm-field textarea { resize: vertical; line-height: 1.5; }

.adm-field input:focus,
.adm-field select:focus,
.adm-field textarea:focus {
    outline: 2px solid var(--maple);
    outline-offset: 1px;
    border-color: var(--maple);
}

.adm-field--check label { display: flex; align-items: center; gap: 7px; font-weight: 400; }
.adm-field--check input { width: auto; }
.adm-field--go { display: flex; align-items: flex-end; gap: 8px; }

.adm-help { margin: 5px 0 0; font-size: 12.5px; color: var(--muted); }
.adm-note { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
.adm-note--lead { margin-bottom: 16px; }
.adm-empty { padding: 20px 0; font-size: 14px; color: var(--muted); }

/* The one-time code box: big enough that six digits are not a squint. */
.adm-code { font-family: var(--mono); font-size: 20px !important; letter-spacing: .3em; text-align: center; }

.adm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    padding: 14px;
    margin-bottom: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.adm-filters .adm-field { margin-bottom: 0; min-width: 160px; }

/* Buttons. Small, plain, and warn-red for anything that costs money. */

.adm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 14px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 560;
    color: #fff;
    text-decoration: none;
    background: var(--maple);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.adm-btn:hover { color: #fff; background: var(--maple-deep); }

.adm-btn--ghost {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--border-strong);
}

.adm-btn--ghost:hover { color: var(--ink); background: var(--surface-2); }
.adm-btn--warn {
    color: var(--maple-deep);
    background: var(--surface);
    border-color: var(--maple-deep);
}

.adm-btn--warn:hover { color: #fff; background: var(--maple-deep); }
.adm-btn--sm { height: 28px; padding: 0 10px; font-size: 12.5px; }

.adm-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* The same idea inside a table row, packed tighter. The cell does not wrap,
   because a row that grows to two lines for its buttons makes a fifty row
   table twice as long to scan. */
.adm-rowacts {
    display: flex;
    gap: 5px;
    align-items: center;
    white-space: nowrap;
}

.adm-rowacts form { margin: 0; }
.adm-rowacts .adm-btn { padding: 0 9px; }
.adm-actions form { margin: 0; }
.adm-inline { display: inline-block; margin-top: 10px; }

.adm-refund { display: flex; gap: 5px; align-items: center; }
.adm-refund input {
    width: 84px;
    padding: 4px 7px;
    font: inherit;
    font-size: 12.5px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
}

/* Lists of counts and links */

.adm-queue, .adm-links { margin: 0; padding: 0; list-style: none; font-size: 14px; }

.adm-queue li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: 0;
}

.adm-queue li:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.adm-queue li:last-child { border-bottom: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }

.adm-count { font-variant-numeric: tabular-nums; color: var(--muted); }
.adm-count--on { color: var(--maple-deep); font-weight: 620; }

.adm-links li { padding: 3px 0; }

/* Labels that only a screen reader needs. */
.adm-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 720px) {
    .adm-bar__inner { padding: 10px 14px; }
    .adm-bar__who { width: 100%; margin-left: 0; }
    .adm-main { padding: 18px 14px 48px; }
    .adm-table--pairs th { width: auto; }
}

/* ==========================================================================
   The owner's page
   ========================================================================== */

.manage { max-width: 680px; margin-inline: auto; padding: 26px 0 60px; }
.manage > * + * { margin-top: 16px; }

.manage__head { margin-bottom: 22px; }
.manage__head h1 { margin: 8px 0 8px; font-size: clamp(25px, 4vw, 34px); }

.manage__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 620;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted);
}

.manage__leaf { width: 13px; height: 13px; color: var(--maple); }

.manage__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 14px; }

.manage__note { margin: -4px 0 0; }

.manage__rule { height: 1px; margin: 20px 0 18px; border: 0; background: var(--border); }

.manage .field { margin-bottom: 15px; }
.manage .notice { margin-bottom: 16px; }