/* ==========================================================================
   adultbid.lol
   Light, warm, unmistakably erotic without a single explicit pixel: rose paper,
   deep plum ink, one hot pink that carries every number and every action.
   Reads like premium lingerie packaging rather than a nightclub flyer, and it
   is the only one of the three that is light, which makes it the safest thing
   to post anywhere.
   ========================================================================== */

:root {
    --bg:        #FFF5F7;
    --panel:     #FFFFFF;
    --panel-2:   #FDECF1;
    --line:      #F3D9E1;
    --line-soft: #F9E8ED;

    --ink:       #2A0F1C;
    --muted:     #8A6474;
    --faint:     #B694A2;

    --pink:      #E5326F;
    --pink-dk:   #C31D57;
    --pink-soft: #FFE1EB;
    --live:      #17B26A;
    --plum:      #6B1741;
    --silver:    #A9909B;
    --bronze:    #C08457;

    --font: 'Figtree', system-ui, 'Yu Gothic', 'Hiragino Sans', sans-serif;
    --r: 18px;
    --max: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    background:
        radial-gradient(1000px 520px at 50% -180px, #FFE3EC 0%, transparent 70%),
        var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
.ab-wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }
@media (max-width: 620px) {
    /* 10px is right for the board rows, which need every pixel of width, and far
       too tight for a paragraph. Prose gets its own breathing room back. */
    .ab-wrap { padding: 0 10px; }
    .ab-prose, .ab-seo, .ab-home-seo { padding-left: 10px; padding-right: 10px; }
    /* Guides and listing pages carry both classes on one element, so the paddings
       do not add up; they need the full margin in one rule. */
    .ab-wrap.ab-prose, .ab-wrap.ab-site { padding-left: 20px; padding-right: 20px; }
    .ab-prose p, .ab-prose li, .ab-seo p, .ab-seo li { font-size: 15.5px; line-height: 1.65; }
    .ab-prose h1 { font-size: 27px; }
    .ab-prose h2, .ab-seo h2 { font-size: 19px; margin-top: 28px; }
    .ab-faq dd { margin-bottom: 14px; }
}

/* header */
.ab-head { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.ab-head__in { display: flex; align-items: center; gap: 18px; height: 54px; max-width: var(--max); margin: 0 auto; padding: 0 22px; }
.ab-logo { font-size: 22px; font-weight: 800; letter-spacing: -.04em; }
.ab-logo em { font-style: normal; color: var(--pink); }
.ab-live { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); }
.ab-live b { color: var(--ink); font-weight: 700; }
.ab-live__sep { color: var(--faint); }
.ab-live__net { color: var(--muted); }
.ab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 60%, transparent); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ab-nav { margin-left: auto; display: flex; gap: 24px; font-size: 14px; color: var(--muted); font-weight: 500; }
.ab-nav a:hover, .ab-nav a[aria-current] { color: var(--pink); }

/* categories */
.ab-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; padding: 8px 0 2px; }
.ab-cat { flex: 0 0 auto; padding: 4px 11px; border: 1px solid color-mix(in srgb, var(--plum) 18%, transparent); border-radius: 999px; background: var(--panel); font-size: 12px; font-weight: 600; color: var(--plum); white-space: nowrap; box-shadow: 0 1px 2px rgba(107,23,65,.06); transition: .16s; }
.ab-cat:hover { color: var(--pink); border-color: var(--pink); box-shadow: 0 2px 6px rgba(229,50,111,.18); }
.ab-cat[aria-current] { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: 0 3px 10px -3px var(--pink); }
.ab-cat--empty { opacity: .5; box-shadow: none; }
.ab-cat__n { margin-left: 5px; color: var(--faint); font-weight: 500; font-size: 11px; }
.ab-cat__short { display: none; }
.ab-cat[aria-current] .ab-cat__n { color: rgba(255,255,255,.75); }

.ab-rule {
    height: 0; margin: 8px auto 0; border: 0;
    border-top: 1px solid var(--line);
    max-width: 720px;
}

/* hero */
.ab-hero { text-align: center; padding: 12px 0 4px; }
.ab-boards {
    display: inline-flex; align-items: center; gap: 0; padding: 3px;
    background: var(--pink-soft); border: 1px solid var(--line);
    border-radius: 999px; margin-bottom: 10px;
}
.ab-boards a {
    position: relative; padding: 5px 20px; border-radius: 999px;
    font-size: 13.5px; font-weight: 600; color: var(--muted); transition: .16s;
}
.ab-boards a:hover { color: var(--plum); }
/* A hairline between the two so the pair does not read as one lozenge. */
.ab-boards a + a::before {
    content: ''; position: absolute; left: 0; top: 22%; bottom: 22%;
    width: 1px; background: color-mix(in srgb, var(--plum) 22%, transparent);
}
.ab-boards a[aria-current] {
    background: var(--panel); color: var(--pink-dk); font-weight: 800;
    box-shadow: 0 2px 6px rgba(107,23,65,.18);
}
.ab-boards a[aria-current]::before, .ab-boards a[aria-current] + a::before { display: none; }

/* "All" is the way back out of a category, so it stays visible instead of
   sitting in the same grey as the seven it competes with. */
.ab-cat--all:not([aria-current]) { border-color: var(--pink); color: var(--pink-dk); }
.ab-cat--all:not([aria-current]):hover { background: var(--pink-soft); }
.ab-hero__label {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 6px 16px;
    font-size: clamp(23px, 3.1vw, 33px); font-weight: 700; letter-spacing: -.035em;
    margin: 0 0 16px;
}
.ab-price { display: inline-flex; align-items: center; gap: 12px; }
.ab-price__fig { display: inline-flex; align-items: baseline; font-size: clamp(34px, 4.4vw, 48px); font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--pink); font-variant-numeric: tabular-nums; }
/* The amount is typed, not only stepped (Ben, 2026-09-05). The field inherits
   the figure's type so nothing moves when it gains focus; the dashed rule is
   the only thing that says it can be edited. */
.ab-price__in { font: inherit; letter-spacing: inherit; font-variant-numeric: inherit; color: inherit;
    background: none; border: 0; border-bottom: 2px dashed color-mix(in srgb, var(--pink) 35%, transparent);
    padding: 0 1px 2px; margin: 0; width: 2ch; text-align: left; border-radius: 0; -webkit-appearance: none; appearance: none; }
.ab-price__in:hover { border-bottom-color: color-mix(in srgb, var(--pink) 60%, transparent); }
.ab-price__in:focus { outline: none; border-bottom-style: solid; border-bottom-color: var(--pink); }
.ab-step { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; transition: .16s; }
.ab-step:hover { color: var(--pink); border-color: var(--pink); transform: scale(1.07); }

/* form */
.ab-claim { display: flex; gap: 10px; max-width: 720px; margin: 0 auto; flex-wrap: wrap; }
.ab-claim > * { height: 46px; }
.ab-field { flex: 1 1 260px; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; transition: .16s; }
.ab-field:focus-within { border-color: var(--pink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 14%, transparent); }
.ab-field input, .ab-field select { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--ink); font-family: var(--font); font-size: 14.5px; }
.ab-field input::placeholder { color: var(--faint); }
.ab-field--pick { flex: 0 1 190px; }
.ab-btn { padding: 0 32px; border: 0; border-radius: 999px; background: var(--pink); color: #fff; font-family: var(--font); font-size: 14.5px; font-weight: 700; cursor: pointer; transition: .16s; box-shadow: 0 8px 22px -12px var(--pink); }
.ab-btn:hover { background: var(--pink-dk); transform: translateY(-1px); }
.ab-btn--link { display: inline-block; height: 52px; line-height: 52px; }
.ab-btn--block { display: block; width: 100%; height: 54px; margin-top: 24px; }
.ab-note { margin: 7px 0 0; font-size: 12.5px; color: var(--muted); }
.ab-note a { color: var(--pink); font-weight: 600; }
.ab-errors { max-width: 720px; margin: 0 auto 16px; padding: 12px 16px; border: 1px solid #F0BCC9; border-radius: 12px; background: #FFF0F4; color: var(--pink-dk); font-size: 13.5px; text-align: left; }

/* network line. Deliberately the quietest thing on the page: it is context, not
   a listing, and it used to be a filled block that outranked the board itself. */
.ab-net {
    margin: 0 0 10px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: 4px 7px;
    font-size: 13.5px; color: var(--muted);
}
.ab-net b { font-size: 15px; font-weight: 800; color: var(--plum); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ab-net__sep { color: var(--line); }
.ab-net__frame { color: var(--faint); }
.ab-net__frame--short { display: none; }
.ab-net a {
    display: inline-flex; align-items: center; gap: 4px;
    margin-left: 3px; padding: 3px 11px;
    border: 1px solid var(--pink); border-radius: 999px;
    color: var(--pink-dk); font-weight: 700; font-size: 12.5px; white-space: nowrap;
    transition: .16s;
}
.ab-net a:hover { background: var(--pink); color: #fff; }
.ab-dot--sm { width: 6px; height: 6px; }

/* the listing row, the only presentation on the board */

.ab-mark { width: 70px; height: 70px; border-radius: 18px; background: var(--pink-soft); border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; flex: 0 0 auto; }
.ab-mark img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.ab-mark__letter { font-size: 26px; font-weight: 800; color: var(--pink); }

.ab-meta { display: flex; align-items: center; gap: 11px; font-size: 12px; color: var(--faint); flex-wrap: wrap; min-width: 0; }
.ab-meta__host { color: var(--plum); font-weight: 700; }
.ab-row:hover .ab-meta__host { color: var(--pink); text-decoration: underline; text-underline-offset: 2px; }
.ab-chip { padding: 3px 11px; border-radius: 999px; background: var(--pink-soft); color: var(--pink-dk); font-size: 11.5px; font-weight: 700; }

.ab-money { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.045em; line-height: 1; }

/* Rank badge. The top three are told apart by this and by the row's tint, never
   by getting more or less content than the rows beneath them: a listing that
   paid more must never show less. */
.ab-rank {
    grid-area: rank;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 27px; padding: 0 10px; border-radius: 8px;
    font-size: 13.5px; font-weight: 800; color: #fff; background: var(--pink);
    box-shadow: 0 5px 14px -6px var(--pink);
}
.ab-rank--silver { background: var(--silver); box-shadow: none; }
.ab-rank--bronze { background: var(--bronze); box-shadow: none; }

/* tape */
.ab-section { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 8px; }
.ab-section h2 { font-size: 18px; font-weight: 700; letter-spacing: -.025em; margin: 0; }
.ab-section span { font-size: 13px; color: var(--faint); }
.ab-section a { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--pink); }

.ab-tape { border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); overflow: hidden; }
/* The main board separates its rows so the top three can carry a card of their
   own without the list looking like two different components. */
.ab-tape--main { border: 0; background: none; border-radius: 0; overflow: visible; display: grid; gap: 6px; }
.ab-tape--main .ab-row { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.ab-tape--main .ab-row:hover { border-color: var(--pink); }

.ab-row--top { background: linear-gradient(180deg, #fff, var(--panel-2)) !important; }
.ab-row--top { grid-template-columns: 54px 44px minmax(0, 1fr) auto; gap: 0 13px; padding: 12px 11px 12px 16px; min-height: 115px; }
.ab-row--top .ab-mark { width: 44px; height: 44px; border-radius: 12px; }
.ab-row--top .ab-row__title { font-size: 15.5px; margin-bottom: 4px; }
.ab-row--top .ab-row__tag { font-size: 12px; margin-bottom: 5px; -webkit-line-clamp: 2; min-height: 2.84em; }
.ab-row--top .ab-money { font-size: 24px; color: var(--pink); }
.ab-row--top .ab-rank { min-width: 46px; height: 29px; font-size: 14px; }

/* The top three carry a heavy border in their own medal colour. A 1px hairline
   was not telling anyone anything from across a room, and the podium is the
   thing this board sells. */
.ab-tape--main .ab-row--gold   { border: 3px solid var(--pink)   !important; box-shadow: 0 10px 28px -20px var(--pink); }
.ab-tape--main .ab-row--silver { border: 3px solid var(--silver) !important; box-shadow: 0 10px 28px -22px var(--silver); }
.ab-tape--main .ab-row--bronze { border: 3px solid var(--bronze) !important; box-shadow: 0 10px 28px -22px var(--bronze); }
.ab-row { position: relative; display: grid;
    grid-template-columns: 48px 36px minmax(0, 1fr) auto;
    grid-template-areas: "rank mark title right" "rank mark body right";
    gap: 0 10px; align-items: center; min-height: 84px; padding: 7px 9px 7px 13px; border-bottom: 1px solid var(--line-soft); transition: border-color .15s, background .15s; }
.ab-row:last-child { border-bottom: 0; }
.ab-row:hover { background: #FFF9FB; }
.ab-row__n { grid-area: rank; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 3px 0; border-radius: 8px; background: var(--pink-soft); font-size: 12.5px; font-weight: 800; color: var(--pink-dk); font-variant-numeric: tabular-nums; }
.ab-row .ab-mark { grid-area: mark; width: 36px; height: 36px; border-radius: 10px; }
.ab-row .ab-mark img { padding: 6px; }
.ab-row .ab-mark__letter { font-size: 17px; }
.ab-row__body { grid-area: body; min-width: 0; }
/* Nudged a pixel down for optical alignment against the rank badge. The offset
   is taken out of the bottom margin so the row height is untouched.
   NOT position:relative, which was the first attempt and broke the card: a
   positioned title becomes the containing block for its own ::after overlay, so
   the click target shrank from the whole row to the title alone. */
.ab-row__title { grid-area: title; font-size: 13px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-row__title:hover { color: var(--pink); }
.ab-row__title a::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.ab-row__right { position: relative; z-index: 1; }
.ab-row:hover .ab-row__title { color: var(--pink); }
.ab-row { cursor: pointer; }
/* Up to two lines of the site's own meta description. */
.ab-row__tag {
    margin: 0 0 3px; font-size: 11px; line-height: 1.45; color: var(--muted);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 1.42em;
}
.ab-row__title {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 1.42em;
}
.ab-row__right {
    grid-area: right;
    display: flex; flex-direction: column; align-items: flex-end;
    justify-content: center; gap: 6px;
}
.ab-row .ab-money { font-size: 17px; }
.ab-row--slim { grid-template-columns: 70px 1fr auto; }

.ab-visit { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; transition: .16s; }
.ab-visit:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.ab-visit--end { margin-left: auto; }
.ab-row__right .ab-visit { position: relative; top: 4px; }

/* ticker, empty, footer, prose */
.ab-ticker { margin: 28px 0; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.ab-ticker__track { display: flex; gap: 34px; width: max-content; animation: slide 42s linear infinite; }
.ab-ticker:hover .ab-ticker__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.ab-ticker__item { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ab-ticker__item b { color: var(--ink); }
.ab-ticker__item i { color: var(--pink); font-style: normal; font-weight: 800; }

.ab-empty { padding: 54px 30px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r); background: var(--panel); }
.ab-empty h3 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; margin: 0 0 8px; }
.ab-empty p { color: var(--muted); margin: 0 0 20px; }

.ab-foot { margin-top: 60px; padding: 30px 0 46px; border-top: 1px solid var(--line); color: var(--faint); font-size: 12.5px; }
.ab-foot__in { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.ab-foot a { color: var(--muted); font-weight: 500; }
.ab-foot a:hover { color: var(--pink); }
.ab-foot__age { margin-left: auto; padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; }

.ab-prose { max-width: 74ch; margin: 36px auto 0; }
.ab-prose h1 { font-size: clamp(30px, 4.6vw, 44px); font-weight: 800; letter-spacing: -.04em; margin: 0 0 10px; }
.ab-prose h2 { font-size: 21px; font-weight: 700; letter-spacing: -.03em; margin: 34px 0 10px; color: var(--plum); }
.ab-prose p, .ab-prose li { color: var(--muted); }
.ab-prose li { margin-bottom: 9px; }
.ab-prose strong { color: var(--ink); font-weight: 700; }
.ab-prose code { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--pink-soft); color: var(--pink-dk); font-size: 13px; }
.ab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 26px 0; }
.ab-stat { background: var(--panel); padding: 24px 20px; }
.ab-stat b { display: block; font-size: 32px; font-weight: 800; letter-spacing: -.045em; color: var(--pink); }
.ab-stat span { font-size: 12.5px; color: var(--faint); }

.ab-form { margin: 26px 0 20px; }
.ab-label { display: block; margin: 20px 0 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.ab-field--wide { display: flex; height: 54px; border-radius: 14px; }
.ab-field__pre { color: var(--faint); font-size: 17px; font-weight: 700; }
.ab-addr { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); font-family: ui-monospace, Menlo, monospace; font-size: 13.5px; word-break: break-all; }

@media (max-width: 860px) {
    .ab-stats { grid-template-columns: repeat(2, 1fr); }
    .ab-crown { grid-template-columns: auto 1fr; padding: 42px 22px 24px; }
    .ab-crown__money { grid-column: 1 / -1; text-align: left; }
    .ab-crown .ab-money { font-size: 34px; }
    .ab-nav { display: none; }
}

/* ------------------------------------------------------------------ desktop ---
   Mobile is signed off and lives in the ≤620px block below; nothing here may
   leak into it, hence the min-width guard rather than editing the base rules.
   Ben's note on desktop: not airy enough, the rank badge does not carry, the
   cards lack presence. So: more room inside each card, a badge that is a real
   feature, a bigger logo, and type a step up. */
@media (min-width: 621px) {
    /* The top of the page breathes to match the cards. Same guard, same reason:
       mobile is signed off and none of this may reach it. */
    .ab-head__in { height: 74px; gap: 24px; }
    .ab-logo { font-size: 30px; }
    .ab-live { font-size: 15.5px; gap: 9px; }
    .ab-live b { font-size: 16.5px; }
    .ab-dot { width: 10px; height: 10px; }
    .ab-nav { font-size: 16px; gap: 32px; }
    .ab-cats { gap: 8px; padding: 18px 0 10px; }
    .ab-cat { padding: 6px 15px; font-size: 13px; }
    .ab-cat__n { font-size: 12px; margin-left: 6px; }
    .ab-rule { margin-top: 14px; }
    .ab-boards { margin-bottom: 20px; }
    .ab-boards a { padding: 7px 24px; font-size: 14px; }
    .ab-hero { padding: 26px 0 12px; }
    .ab-hero__label { margin-bottom: 22px; gap: 8px 20px; }
    .ab-price__fig { font-size: clamp(38px, 4.8vw, 54px); }
    .ab-step { width: 34px; height: 34px; }
    .ab-claim { gap: 12px; }
    .ab-claim > * { height: 52px; }
    .ab-field { padding: 0 20px; }
    .ab-field input, .ab-field select { font-size: 15px; }
    .ab-btn { padding: 0 34px; font-size: 15px; }
    .ab-note { margin-top: 12px; font-size: 13px; }
    .ab-net { margin: 8px 0 20px; font-size: 13.5px; gap: 5px 8px; }
    .ab-net b { font-size: 16px; }

    .ab-tape--main { gap: 10px; }

    .ab-row {
        grid-template-columns: 62px 48px minmax(0, 1fr) auto;
        gap: 0 16px;
        padding: 14px 18px 14px 20px;
        min-height: 100px;
        border-radius: 16px;
    }
    .ab-row--top {
        grid-template-columns: 74px 64px minmax(0, 1fr) auto;
        gap: 0 20px;
        padding: 20px 22px 20px 26px;
        min-height: 136px;
        border-radius: 20px;
    }

    /* The badge becomes the loudest thing after the price. */
    .ab-row__n {
        min-width: 54px; height: 34px; padding: 0 12px;
        font-size: 15px; font-weight: 800; border-radius: 10px;
    }
    .ab-rank {
        min-width: 66px; height: 42px; padding: 0 14px;
        font-size: 19px; font-weight: 800; border-radius: 12px;
        box-shadow: 0 8px 22px -8px var(--pink);
    }
    .ab-rank--silver { box-shadow: 0 8px 22px -10px var(--silver); }
    .ab-rank--bronze { box-shadow: 0 8px 22px -10px var(--bronze); }

    .ab-row .ab-mark { width: 48px; height: 48px; border-radius: 13px; }
    .ab-row .ab-mark img { padding: 8px; }
    .ab-row--top .ab-mark { width: 64px; height: 64px; border-radius: 17px; }
    .ab-row--top .ab-mark img { padding: 11px; }
    .ab-row--top .ab-mark__letter { font-size: 26px; }

    .ab-row__title { font-size: 15px; margin-bottom: 4px; }
    .ab-row--top .ab-row__title { font-size: 18px; margin-bottom: 6px; }
    .ab-row__tag { font-size: 12.5px; line-height: 1.5; margin-bottom: 6px; }
    .ab-row--top .ab-row__tag { font-size: 13.5px; margin-bottom: 8px; min-height: 3em; }
    .ab-meta { font-size: 12.5px; gap: 12px; }
    .ab-chip { font-size: 12px; padding: 4px 12px; }

    .ab-row .ab-money { font-size: 21px; }
    .ab-row--top .ab-money { font-size: 28px; }
    .ab-row__right { gap: 10px; }
    .ab-visit { padding: 9px 18px; font-size: 13px; }

    .ab-tape--main .ab-row--gold   { border-width: 3px; box-shadow: 0 16px 40px -26px var(--pink); }
    .ab-tape--main .ab-row--silver { border-width: 3px; box-shadow: 0 16px 40px -28px var(--silver); }
    .ab-tape--main .ab-row--bronze { border-width: 3px; box-shadow: 0 16px 40px -28px var(--bronze); }
    .ab-tape--main .ab-row:hover { transform: translateY(-1px); box-shadow: 0 14px 32px -24px var(--pink); }
}

@media (max-width: 620px) {
    /* Two lines, the same for every rank. min-width:0 throughout, because the
       grid default of auto resolves to min-content and once made a row render
       510px wide inside a 346px column and scroll the whole page sideways. */
    .ab-tape--main { gap: 5px; }
    /* The title takes the whole width beside the rank and the logo drops below
       it, which is the shape outbid.lol uses on a phone. Nothing but the rank
       shares the title's line, so it reads far wider at the same height. */
    .ab-row {
        grid-template-columns: auto 30px minmax(0, 1fr) auto;
        grid-template-areas: "rank title title right" "mark body body right";
        column-gap: 7px; row-gap: 2px;
        padding: 7px 6px 7px 9px;
        min-width: 0;
        min-height: 78px;
    }
    .ab-row__body { grid-area: body; min-width: 0; }
    /* The top three come down about 15% and step down slightly by rank. Content
       is identical at every rank; only padding and leading scale, which is the
       distinction Rule I turns on. These selectors carry --top so they beat the
       desktop .ab-row--top rules, which are more specific than a bare class and
       silently kept their margins otherwise. */
    .ab-row--top { column-gap: 8px; row-gap: 0; }
    .ab-row--top.ab-row--gold   { padding: 7px 7px 7px 10px; min-height: 96px; }
    .ab-row--top.ab-row--silver { padding: 6px 7px 6px 10px; min-height: 92px; }
    .ab-row--top.ab-row--bronze { padding: 5px 7px 5px 10px; min-height: 88px; }
    .ab-row--top .ab-row__title { margin-bottom: 1px; }
    .ab-row--top .ab-row__tag { margin-bottom: 1px; }
    .ab-row--top .ab-row__body .ab-meta { margin-top: 0; }
    .ab-row__n, .ab-row .ab-rank { min-width: 32px; height: 22px; font-size: 11.5px; padding: 0 6px; }
    .ab-row .ab-mark { width: 30px; height: 30px; border-radius: 9px; }
    .ab-row--top .ab-mark { width: 34px; height: 34px; border-radius: 10px; }
    .ab-row .ab-mark img { padding: 5px; }
    .ab-row__title { font-size: 13px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ab-row--top .ab-row__title { font-size: 13.5px; }
    /* Ben, 2026-09-05: clicks are shown on mobile too. The line is tight, so the
       meta row is kept on one line and its items shrink rather than wrap, which
       would push the row past its fixed height. */
    .ab-row__body .ab-meta { flex-wrap: nowrap; }
    .ab-meta__host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .ab-meta__clicks, .ab-meta__more { flex: 0 0 auto; white-space: nowrap; }
    .ab-row__body .ab-meta { gap: 7px; }
    .ab-row__body .ab-meta { margin-top: 2px; gap: 8px; font-size: 11.5px; }
    .ab-row__body .ab-meta .ab-chip { display: none; }
    .ab-row__right { grid-column: 4; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: 4px; }
    .ab-row .ab-money { font-size: 16px; }
    .ab-row--top .ab-money { font-size: 19px; }
    .ab-visit { padding: 5px 11px; font-size: 11.5px; }
    .ab-hero { padding: 8px 0 2px; }
    .ab-hero__label { font-size: 20px; gap: 4px 10px; margin-bottom: 10px; }
    .ab-net__row > a { display: none; }
    .ab-net { padding: 10px 14px 8px; }
    /* The header already carries the clicks figure, so the band drops to the two
       traffic numbers and its framing clause. */
    .ab-cat__full { display: none; }
    .ab-cat__short { display: inline; }
    .ab-cats { gap: 4px; padding: 6px 0 2px; }
    .ab-cat { padding: 4px 10px; font-size: 11.5px; }

    .ab-net { font-size: 12px; gap: 3px 5px; margin-bottom: 8px; }
    .ab-net b { font-size: 14px; }
    .ab-net__frame--full { display: none; }
    .ab-net__frame--short { display: inline; }
    .ab-net__row h2 { font-size: 12px; }
    .ab-note { margin-top: 8px; }
    /* URL and category share a row so the form is two lines, not three. */
    .ab-claim { gap: 8px; }
    .ab-field { flex: 1 1 60%; }
    .ab-field--pick { flex: 1 1 32%; }
    .ab-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ------------------------------------------------------------ mobile menu ---
   Desktop keeps the inline nav. Under 860px it folds behind a burger and drops
   down as a panel under the sticky header. */
.ab-burger { display: none; margin-left: auto; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.ab-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--plum); transition: transform .18s, opacity .18s; }
@media (max-width: 860px) {
    .ab-burger { display: inline-flex; }
    .ab-live { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .ab-nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0;
        flex-direction: column; gap: 0; margin: 0; padding: 8px 12px 12px;
        background: var(--panel); border-bottom: 1px solid var(--line);
        box-shadow: 0 16px 34px -22px rgba(107,23,65,.4);
    }
    .ab-nav a { padding: 12px 12px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--plum); }
    .ab-nav a[aria-current] { background: var(--pink-soft); color: var(--pink-dk); }
    .ab-head.is-open .ab-nav { display: flex; }
    .ab-head.is-open .ab-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .ab-head.is-open .ab-burger span:nth-child(2) { opacity: 0; }
    .ab-head.is-open .ab-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

.ab-trust { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; letter-spacing: 0.01em; }

/* Rules: the moderation panel, first thing after the intro. */
.ab-callout { margin: 22px 0 34px; padding: 20px 24px 8px; border: 2px solid var(--pink); border-radius: 16px; background: #fff; box-shadow: 0 8px 28px rgba(229, 50, 111, 0.08); }
.ab-callout__title { margin: 0 0 10px !important; font-size: 21px; color: var(--pink-dk); }
.ab-callout__list { margin: 0; padding-left: 20px; }
.ab-callout__list li { margin: 0 0 12px; }
.ab-callout__list strong { color: var(--plum); }
@media (max-width: 620px) { .ab-callout { padding: 16px 16px 4px; } .ab-callout__title { font-size: 19px; } }

/* About: the board's money first. */
.ab-hero-stat { display: flex; flex-direction: column; gap: 4px; margin: 26px 0 18px; padding: 26px 28px; border-radius: 18px; background: linear-gradient(135deg, var(--pink) 0%, var(--pink-dk) 100%); color: #fff; box-shadow: 0 14px 36px rgba(229, 50, 111, 0.22); }
.ab-hero-stat__label { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.ab-hero-stat__value { font-size: 56px; line-height: 1; font-weight: 800; letter-spacing: -.04em; }
.ab-hero-stat__sub { font-size: 14.5px; opacity: .95; }
.ab-hero-stat__sub strong { color: #fff; }
.ab-moves { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.ab-moves li { display: flex; gap: 12px; align-items: baseline; padding: 11px 16px; border-top: 1px solid var(--line); font-size: 14.5px; }
.ab-moves li:first-child { border-top: 0; }
.ab-moves__who { font-weight: 700; color: var(--plum); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-moves__what { color: var(--muted); }
.ab-moves__when { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.ab-steps { counter-reset: s; list-style: none; padding: 0; margin: 14px 0 0; }
.ab-steps li { position: relative; padding: 0 0 14px 44px; }
.ab-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 1px; width: 30px; height: 30px; border-radius: 50%; background: var(--pink); color: #fff; font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.ab-faq dt { font-weight: 700; color: var(--plum); margin: 18px 0 4px; }
.ab-faq dd { margin: 0; }
@media (max-width: 620px) { .ab-hero-stat { padding: 20px 18px; } .ab-hero-stat__value { font-size: 42px; } .ab-moves li { flex-wrap: wrap; } .ab-moves__when { margin-left: 0; width: 100%; } }

.ab-brand { font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.ab-brand em { font-style: normal; color: var(--pink); }
.ab-backlink { margin: 30px 0 6px; padding: 22px 24px 10px; border: 2px solid var(--pink); border-radius: 16px; background: #fff; box-shadow: 0 8px 28px rgba(229, 50, 111, 0.08); }
.ab-backlink h2 { margin: 0 0 8px !important; color: var(--pink-dk); }
.ab-backlink ul { margin: 10px 0 0; }
.ab-backlink li { margin: 0 0 10px; }

/* Under every board: the explainer, the pay-to-rank story and the FAQ. */
.ab-seo { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.ab-seo h3 { font-size: 16px; margin: 22px 0 6px; color: var(--plum); }
.ab-seo__buzz { margin: 18px 0 8px; padding: 14px 18px; border-left: 4px solid var(--pink); background: #fff; border-radius: 0 12px 12px 0; }
.ab-seo__buzz h3 { margin-top: 0; }
.ab-seo__buzz p { margin: 0; }
.ab-lede { font-size: 18px; line-height: 1.55; }

/* Details link and the claim-this-position CTA. Both sit above the row's click overlay. */
.ab-meta__more { position: relative; z-index: 2; color: var(--pink); font-weight: 600; text-decoration: none; }
.ab-meta__more:hover { text-decoration: underline; }
.ab-take { display: none; position: relative; z-index: 2; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; text-decoration: none; box-shadow: 0 6px 16px rgba(229, 50, 111, .28); }
.ab-take:hover { background: var(--pink-dk); }
.ab-take__short { display: none; }
@media (min-width: 621px) {
    .ab-row:hover .ab-take, .ab-row:focus-within .ab-take { display: inline-flex; }
    .ab-row:hover .ab-visit, .ab-row:focus-within .ab-visit { display: none; }
}
/* Between 621 and 860px the long label is wider than Visit, and swapping it in grew
   the row by 32px on hover, moving a row under the cursor. The short label is the same
   width as Visit, so nothing reflows. Above 860px there is room for the long one. */
@media (min-width: 621px) and (max-width: 860px) {
    .ab-take__long { display: none; }
    .ab-take__short { display: inline; }
}
/* Mobile keeps Visit (Ben, 2026-09-04). The claim CTA stays a desktop hover
   affordance: on a phone the row already opens the site, and swapping the button
   for a paid action on the primary tap target is not what a visitor came for.
   .ab-take stays in the markup, hidden, so nothing about the row's height moves. */
/* Listing pages */
.ab-crumbs { font-size: 13px; color: var(--muted); margin: 0 0 14px; }
.ab-crumbs a { color: var(--muted); text-decoration: none; }
.ab-crumbs a:hover { color: var(--pink); }
.ab-site__head { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; }
.ab-site__head .ab-mark { width: 64px; height: 64px; flex: 0 0 auto; }
.ab-site__head h1 { margin: 0 0 4px; font-size: 30px; }
.ab-site__host { margin: 0; color: var(--muted); font-size: 14px; }
.ab-site__actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 8px; }
.ab-btn--ghost { background: #fff; color: var(--pink); border: 2px solid var(--pink); }
.ab-btn--ghost:hover { background: var(--pink); color: #fff; }
.ab-site__points { margin: 10px 0 0; }
.ab-history { width: 100%; border-collapse: collapse; font-size: 14px; margin: 8px 0 0; }
.ab-history th, .ab-history td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ab-history th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ab-site__related { list-style: none; padding: 0; margin: 8px 0 0; }
.ab-site__related li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.ab-site__related a { font-weight: 700; color: var(--plum); text-decoration: none; }
.ab-seo__boards { font-size: 14px; line-height: 1.9; }
@media (max-width: 620px) { .ab-site__head h1 { font-size: 24px; } .ab-site__head .ab-mark { width: 48px; height: 48px; } }

.ab-site__line { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }

.ab-seo__who { padding-left: 22px; margin: 8px 0 0; }
.ab-seo__who li { margin: 0 0 10px; }
.ab-seo__who a { font-weight: 700; color: var(--plum); text-decoration: none; }

.ab-next { padding-left: 20px; margin: 8px 0 18px; }
.ab-next li { margin: 0 0 6px; }
.ab-tablewrap { overflow-x: auto; margin: 12px 0 6px; }
.ab-compare { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
.ab-compare th, .ab-compare td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ab-compare th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ab-compare td:first-child { font-weight: 700; color: var(--plum); white-space: nowrap; }

/* Ben, 2026-09-04: never write "no nofollow", a skim reader sees only the second
   word. The link is dofollow and it is said in green, positively. */
.ab-dofollow { color: var(--live); font-weight: 800; }
.ab-dofollow--chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #E7F7EF; color: #0E8A50; font-size: .92em; }

/* The smallest phones still in use: buy back the width the click figure takes,
   so the host is not the thing that gets cut. */
@media (max-width: 360px) {
    .ab-row__body .ab-meta { gap: 5px; font-size: 11px; }
    .ab-row__body .ab-meta__more { font-size: 10.5px; }
}

/* The third-party live counter on About. The widget is a transparent 28px line,
   so it gets a row beside its link rather than a panel of its own. */
.ab-live-strip { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin: 14px 0 6px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.ab-live-strip iframe { flex: 1 1 220px; min-width: 200px; height: 30px; border: 0; background: transparent; }
.ab-live-strip a { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--pink); text-decoration: none; }
.ab-live-strip a:hover { text-decoration: underline; }
@media (max-width: 620px) { .ab-live-strip { gap: 8px; padding: 10px 12px; } .ab-live-strip iframe { flex-basis: 100%; } }

/* The live visitor count in the header, the way outbid.lol shows one. The
   iframe cannot take a click, so pointer-events go to the link around it and
   the whole badge opens the public dashboard. Fixed height: the bar is 54px
   and nothing here may change that. */
.ab-now { display: inline-flex; align-items: center; gap: 7px; height: 22px; padding: 0 10px 0 8px; margin-left: -4px;
    border: 1px solid color-mix(in srgb, var(--live) 30%, transparent); border-radius: 999px;
    background: color-mix(in srgb, var(--live) 8%, transparent);
    font-size: 13px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.ab-now:hover { border-color: var(--live); background: color-mix(in srgb, var(--live) 14%, transparent); }
.ab-now b { color: var(--ink); font-weight: 700; }
.ab-now__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 2.2s infinite; flex: 0 0 auto; }
@media (min-width: 1500px) { .ab-now { height: 26px; font-size: 15px; } .ab-now b { font-size: 16px; } .ab-now__dot { width: 8px; height: 8px; } }
.ab-now__short { display: none; }
/* Phones and tablets keep the count (Ben, 2026-09-07), shortened to the number
   and the word that carries it. Below 620px the bar cannot hold three figures,
   so the operator's monthly clicks step out of the header: they are still on
   the page, with their label, in the band under the board. */
/* The wording stays the desktop wording (Ben, 2026-09-07). Only the very small
   phones, where it cannot fit beside the logo and the menu, fall back to the
   number alone: the pulsing dot already says what it counts. */
@media (max-width: 900px) { .ab-now { padding: 0 9px 0 7px; } }
@media (max-width: 360px) {
    .ab-now__label { display: none; }
}
@media (max-width: 620px) {
    /* The operator's figure leaves the bar with its label, never without it: a bare
       794K beside "56 listed" reads as this board's traffic. It stays on the page,
       labelled, in the band under the board. */
    .ab-live__sep, .ab-live__net, .ab-live__net-fig { display: none; }
    /* The listing count is a fact, not a live feed: no pulsing dot for it on a
       phone, where the only thing that is genuinely live is the visitor count. */
    .ab-live .ab-dot { display: none; }
    .ab-live { gap: 5px; }
    /* The pill still yields space; the count is what holds its width. */
    .ab-live { flex: 0 1 auto; min-width: 0; }
    .ab-now { margin-left: 0; height: 21px; font-size: 12.5px; flex: 0 0 auto; }
}
/* 320px: logo, count, listing count and the menu button leave nothing spare, and
   the listing count was the one being cut. The bar's own gap gives it back. */
/* Measured at 390px, the commonest phone: the bar needs 349px of content and the
   22px side padding left it three short, which the listing count paid for. */
@media (max-width: 620px) { .ab-head__in { gap: 12px; padding: 0 14px; } }
@media (max-width: 360px) {
    .ab-head__in { gap: 10px; padding: 0 12px; }
    .ab-now { padding: 0 8px 0 6px; gap: 5px; }
}