/* Tokyo Time — page styles. Tokens live in tokens.css. */

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

/**
 * The browser hides [hidden] with `display: none` from its own stylesheet,
 * at the same specificity as a class. Any author rule setting `display`
 * therefore beats it — and .btn sets `display: inline-flex`.
 *
 * The result was that every element the site hides by toggling `hidden`
 * stayed on screen: "Sign in", "Messages" and "Account" all at once in the
 * header, whatever the signed-in state, and the signed-out notice showing
 * next to the form it was meant to replace. The JavaScript was working
 * correctly the whole time; the CSS was quietly ignoring it.
 *
 * !important is right here rather than lazy: `hidden` is not a style choice,
 * it is a statement that the element is not currently part of the page, and
 * nothing about how a component paints should be able to overrule it.
 */
[hidden] { display: none !important; }

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

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

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 var(--s-3); font-weight: 700; }
h1 { font-size: var(--t-3xl); letter-spacing: -0.03em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-md); }
p  { margin: 0 0 var(--s-4); }

a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

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

/**
 * One focus treatment for the whole site.
 *
 * A ring rather than a border swap, so a focused control does not change
 * size and nudge everything beside it; :focus-visible rather than :focus, so
 * a mouse click on a button does not leave a ring behind it.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-4); }
.wrap.narrow { max-width: var(--wrap-narrow); }
.small { font-size: var(--t-sm); color: var(--ink-muted); }
.lead  { font-size: var(--t-md); color: var(--ink-muted); }
.n     { color: var(--ink-faint); font-size: var(--t-xs); font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; top: -100px; left: var(--s-3); z-index: 100;
  background: var(--surface); color: var(--ink); padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-md);
  text-decoration: none;
}
.skip:focus { top: var(--s-3); }

/* ── buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4); min-height: 40px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  background: var(--bg-sunken); color: var(--ink);
  font: inherit; font-size: var(--t-sm); font-weight: 650; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-hi); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg-hover); border-color: var(--ink-faint); }
.btn-google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.btn-google:hover { background: #f7f8f8; }
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: var(--s-3) var(--s-6); min-height: 50px; font-size: var(--t-md); border-radius: var(--r-sm); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; pointer-events: none; }

.link-btn {
  background: none; border: 0; padding: 0; font: inherit; font-size: var(--t-sm);
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link-btn:hover { color: var(--accent-hi); }

/* ── header ──────────────────────────────────────────────────────── */
/**
 * Sticky, and 64px of it. On a results page the search box and the filters
 * are at the top and the reader is a long way down a grid of cards; carrying
 * the way back out with them costs one header height and saves a scroll to
 * the top on every navigation.
 */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.head-row { display: flex; align-items: center; gap: var(--s-5); height: var(--head-h); }

.brand { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; flex-shrink: 0; color: var(--ink); }
.brand-mark { width: 28px; height: 28px; color: var(--accent); }
.brand-text { font-size: var(--t-lg); font-weight: 800; letter-spacing: -0.04em; }
.brand-text b { color: var(--accent); font-weight: 800; }

.head-nav { display: flex; gap: var(--s-5); margin-right: auto; }
.head-nav a {
  position: relative; display: flex; align-items: center; height: var(--head-h);
  font-size: var(--t-base); font-weight: 600; color: var(--ink-muted); text-decoration: none;
}
.head-nav a:hover { color: var(--ink); }
/* The current section is marked with a rule under it rather than a colour
   change alone, because a colour change alone is invisible to a good share of
   readers and this is the only wayfinding on the page furniture. */
.head-nav a[aria-current] { color: var(--ink); }
.head-nav a[aria-current]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--accent); border-radius: 3px 3px 0 0;
}

.head-actions { display: flex; align-items: center; gap: var(--s-3); }
.head-link {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-muted); text-decoration: none;
  white-space: nowrap;
}
.head-link:hover { color: var(--ink); }

.head-toggle { display: none; background: none; border: 0; padding: var(--s-2); cursor: pointer; }
.head-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }

.badge {
  display: inline-block; min-width: 18px; padding: 0 5px;
  background: var(--hot); color: var(--hot-ink);
  border-radius: var(--r-full); font-size: 11px; font-weight: 700;
  text-align: center; line-height: 18px;
}

/* ── the theme switch ────────────────────────────────────────────── */
/**
 * Both icons ship in the markup and CSS reveals whichever matches the theme
 * in force. That way the right one is painted on the first frame — including
 * for a reader following their operating system, where no script has decided
 * anything and only the media query knows which theme is active.
 *
 * `visibility` rather than `display` while scripting is unknown: the button
 * does nothing without JavaScript, so it must not be clickable — but it must
 * still hold its 38px, or the header jumps when the module lands.
 */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: 38px; height: 38px; flex-shrink: 0;
  padding: 0; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-muted); cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease);
}
.theme-toggle:hover { background: var(--bg-hover); color: var(--ink); border-color: var(--line-strong); }
.theme-toggle .i { width: 19px; height: 19px; }
html:not(.js) .theme-toggle { visibility: hidden; }

/* Light in force: offer the moon. Dark in force: offer the sun. */
.i-sun  { display: none; }
.i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun  { display: block; }
  :root:not([data-theme="light"]) .i-moon { display: none; }
}
:root[data-theme="dark"] .i-sun  { display: block; }
:root[data-theme="dark"] .i-moon { display: none; }
:root[data-theme="light"] .i-sun  { display: none; }
:root[data-theme="light"] .i-moon { display: block; }

.theme-toggle-nav {
  width: auto; height: auto; justify-content: flex-start;
  padding: var(--s-3) 0; border: 0; background: none; font: inherit;
  color: var(--ink-muted);
}
.theme-toggle-nav:hover { background: none; color: var(--ink); }
.theme-toggle-label { font-size: var(--t-base); font-weight: 600; }

/* ── mobile nav ──────────────────────────────────────────────────── */
.mobile-nav {
  display: none; flex-direction: column;
  padding: var(--s-3) var(--s-4) var(--s-5);
  background: var(--surface); border-top: 1px solid var(--line);
}
.mobile-nav a {
  padding: var(--s-3) 0; text-decoration: none; color: var(--ink);
  font-weight: 600; border-bottom: 1px solid var(--line);
}
.mobile-nav-cta { margin-top: var(--s-4); border-bottom: 0; color: var(--accent-ink); }

@media (max-width: 980px) {
  .head-nav { display: none; }
  .head-actions .head-link { display: none; }
  /* One margin-left:auto in this row, not two. Two split the free space
     between them and left the theme switch marooned in the middle of the
     phone header instead of beside the menu button. */
  .head-toggle { display: block; }
  .head-actions { gap: var(--s-2); margin-left: auto; }
  .mobile-nav:not([hidden]) { display: flex; }
}
@media (max-width: 560px) {
  .head-actions .btn-primary { display: none; }
  .brand-text { font-size: var(--t-md); }
}

/* ── hero and the quick search panel ─────────────────────────────── */
/**
 * The hero is a coloured band with a white panel sitting on it, which is the
 * arrangement this category has converged on for one reason: the panel is
 * the only thing on the page that has to be found instantly, and a white
 * card on a dark ground finds itself.
 */
.hero {
  background:
    radial-gradient(1100px 420px at 12% -30%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
    linear-gradient(160deg, #0d2b57 0%, #0d1b2a 62%);
  color: #f4f7fb;
  padding: var(--s-8) 0 var(--s-7);
  text-align: center;
}
.hero-inner { max-width: 940px; }
.hero h1 {
  font-size: clamp(1.9rem, 5vw, var(--t-4xl));
  max-width: 24ch; margin: 0 auto var(--s-4); color: #fff;
}
.hero-sub {
  color: #c2d1e4; font-size: var(--t-md);
  max-width: 58ch; margin: 0 auto var(--s-6);
}
.hero-stats { margin: var(--s-5) 0 0; color: #c2d1e4; font-size: var(--t-sm); }
.hero-stats strong { color: #fff; }
.hero-stats a { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.hero-stats a:hover { text-decoration-color: #fff; }

.qs-panel {
  max-width: 940px; margin: 0 auto;
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--s-5);
  text-align: left;
}
.qs-heading { font-size: var(--t-md); margin: 0 0 var(--s-3); }

.qs-text { position: relative; margin-bottom: var(--s-4); }
.qs-icon {
  position: absolute; left: var(--s-4); top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--ink-faint); pointer-events: none;
}
.qs-text input {
  width: 100%; padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) * 2 + 20px);
  min-height: 52px;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: var(--t-md);
}
.qs-text input::placeholder { color: var(--ink-faint); }
.qs-text input:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }

/* Six fields that fold from three columns to two to one. `auto-fit` with a
   `min()` floor rather than a fixed one — a track minimum wider than the
   viewport pushes the grid past the screen edge and scrolls the whole page
   sideways, which is exactly how the plan cards broke once already. */
.qs-grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  margin-bottom: var(--s-4);
}
.qs-field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.qs-field label { font-size: var(--t-xs); font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; }
.qs-field select {
  width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: var(--t-base);
}
.qs-field select:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
.qs-go { width: 100%; }
.qs-note { margin: var(--s-4) 0 0; font-size: var(--t-sm); color: var(--ink-muted); }

@media (min-width: 780px) {
  .qs { display: grid; grid-template-columns: 1fr auto; gap: 0 var(--s-3); align-items: end; }
  .qs-text  { grid-column: 1 / -1; }
  .qs-grid  { grid-column: 1; margin-bottom: 0; }
  .qs-go    { grid-column: 2; width: auto; }
}

.inline-search { display: flex; gap: var(--s-2); margin: 0 0 var(--s-5); max-width: 520px; }
.inline-search input {
  flex: 1; min-width: 0; padding: var(--s-3) var(--s-4);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit;
}
.inline-search input:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }

/* ── the trust strip ─────────────────────────────────────────────── */
/**
 * Four claims, each of which is true and each of which is checkable on
 * another page of this site. Nothing aspirational goes in here — a strip of
 * promises directly under the search box is the most-read copy on the site
 * and the least forgiving place to overstate anything.
 */
.trust { background: var(--surface); border-bottom: 1px solid var(--line); }
.trust-row {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  padding-top: var(--s-6); padding-bottom: var(--s-6);
}
.trust-item h2 { font-size: var(--t-base); margin: 0 0 var(--s-1); }
.trust-item p { margin: 0; font-size: var(--t-sm); color: var(--ink-muted); }

/* ── cards ───────────────────────────────────────────────────────── */
.grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}
.grid-featured { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s var(--ease), transform .18s var(--ease), border-color .18s var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--line-strong); }
.card-featured { border-color: color-mix(in srgb, var(--hot) 40%, var(--line)); }
.card-sold .card-media img { opacity: .55; }
.card-link { display: block; text-decoration: none; color: inherit; }

.card-media { position: relative; aspect-ratio: 4 / 3; background: var(--bg-sunken); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }

.card-flags {
  position: absolute; top: var(--s-2); left: var(--s-2);
  display: flex; gap: var(--s-1); flex-wrap: wrap;
}
.flag {
  display: inline-block; padding: 3px var(--s-2);
  border-radius: var(--r-sm); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .02em; line-height: 1.4;
}
.flag-featured { background: var(--hot); color: var(--hot-ink); }
.flag-sold { background: #0d1b2a; color: #fff; }
.flag-lg { position: absolute; top: var(--s-3); left: var(--s-3); font-size: var(--t-base); padding: var(--s-2) var(--s-4); }

.card-photos {
  position: absolute; right: var(--s-2); bottom: var(--s-2);
  padding: 2px var(--s-2); border-radius: var(--r-sm);
  background: rgba(13, 27, 42, .78); color: #fff;
  font-size: var(--t-xs); font-weight: 600;
}

.card-body { padding: var(--s-3) var(--s-4) var(--s-4); }
/**
 * Title, then what it is made of, then the price, then where it is.
 *
 * The price is the heaviest thing in the card by a wide margin and lands in
 * the same place in every one of them, because a shopper going down a grid
 * of twenty is reading the price column and nothing else.
 */
.card-title {
  font-size: var(--t-base); font-weight: 650; margin: 0 0 var(--s-1); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-spec { font-size: var(--t-xs); color: var(--ink-faint); margin: 0 0 var(--s-3); }
.card-price {
  font-size: var(--t-lg); font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 var(--s-2); font-variant-numeric: tabular-nums;
}
.card-meta { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; font-size: var(--t-xs); color: var(--ink-faint); margin: 0; }
.card-cond {
  padding: 2px var(--s-2); border-radius: var(--r-full);
  background: var(--bg-sunken); color: var(--ink-muted); font-weight: 600;
}

.empty {
  padding: var(--s-7); text-align: center; color: var(--ink-muted);
  background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r);
}

.featured-row {
  margin: var(--s-6) 0; padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.featured-head { margin-bottom: var(--s-4); }
.featured-head h2 { margin: 0 0 var(--s-1); font-size: var(--t-md); }
.featured-head p { margin: 0; }

/* ── page furniture ──────────────────────────────────────────────── */
main { padding-bottom: var(--s-8); }
.page-home main { padding-bottom: 0; }

.crumbs { padding: var(--s-4) 0 var(--s-3); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; font-size: var(--t-xs); color: var(--ink-faint); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: var(--s-2); color: var(--line-strong); }
.crumbs a { color: var(--ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }

.hub-head { padding: var(--s-3) 0 var(--s-5); max-width: 70ch; }
.hub-intro { color: var(--ink-muted); }
.hub-count { font-size: var(--t-sm); color: var(--ink-faint); margin: 0; }
.hub-tools { margin: 0 0 var(--s-4); }

.home-block { padding: var(--s-6) 0; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-4); }
.block-head h2 { margin: 0; }
.more { font-size: var(--t-sm); font-weight: 600; }
.cols-3 { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* Chips are the quick facets. Pill-shaped, on a white ground, so a row of
   them reads as a set of choices rather than a paragraph of links. */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink); text-decoration: none;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.chip:hover { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }

.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.link-list a { text-decoration: none; font-size: var(--t-sm); font-weight: 600; }
.link-list a:hover { text-decoration: underline; }

.crosslinks { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); margin: var(--s-7) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--line); }
.crosslink-group h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }
.crosslink-group ul { list-style: none; margin: 0; padding: 0; }
.crosslink-group li { padding: var(--s-1) 0; }
.crosslink-group a { font-size: var(--t-sm); text-decoration: none; }
.crosslink-group a:hover { text-decoration: underline; }

.browse-section { margin: var(--s-6) 0; }
.browse-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.browse-list li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
.browse-list a { text-decoration: none; font-size: var(--t-sm); }

/* ── pagination ──────────────────────────────────────────────────── */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--s-3); margin: var(--s-7) 0; flex-wrap: wrap; }
.pager ol { display: flex; gap: var(--s-1); list-style: none; margin: 0; padding: 0; }
.pager a, .pager span, .pager-step {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 var(--s-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer;
}
.pager a:hover, .pager button:hover { border-color: var(--accent); color: var(--accent); }
.pager [aria-current] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
.pager .gap { border: 0; background: none; }
.pager-step.is-off { color: var(--ink-faint); border-color: var(--line); opacity: .5; cursor: default; }

/* ── the listing page ────────────────────────────────────────────── */
.ad-layout { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
@media (max-width: 900px) { .ad-layout { grid-template-columns: 1fr; } }

.gallery-main {
  position: relative; aspect-ratio: 4 / 3; background: var(--bg-sunken);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
}
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs { display: flex; gap: var(--s-2); list-style: none; margin: var(--s-3) 0 0; padding: 0; overflow-x: auto; }
.gallery-thumbs button { padding: 0; border: 2px solid var(--line); border-radius: var(--r-sm); background: none; cursor: pointer; overflow: hidden; width: 84px; flex-shrink: 0; }
.gallery-thumbs button[aria-current] { border-color: var(--accent); }
.gallery-thumbs img { width: 84px; height: 63px; object-fit: cover; }
.gallery-empty { padding: var(--s-7); text-align: center; background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r); }

.ad-desc, .ad-specs { margin-top: var(--s-6); }
.ad-desc p { max-width: 68ch; }

/**
 * The specification list.
 *
 * Two columns of label/value rows. `gap: 0 var(--s-7)` sets the COLUMN gap
 * only — the row gap stays zero because the rows already separate themselves
 * with a bottom border and their own padding, and adding a row gap on top
 * spaced the borders away from the text they belong to.
 */
.specs { display: grid; gap: 0 var(--s-7); margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.spec { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.spec dt { color: var(--ink-faint); font-size: var(--t-sm); }
.spec dd { margin: 0; font-size: var(--t-sm); font-weight: 650; text-align: right; }
.note { margin-top: var(--s-4); padding: var(--s-4); background: var(--accent-wash); border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.ad-side { position: sticky; top: calc(var(--head-h) + var(--s-3)); display: grid; gap: var(--s-4); }
.ad-box {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: var(--s-5); box-shadow: var(--shadow-sm);
}
.ad-title { font-size: var(--t-lg); margin: 0 0 var(--s-3); }
.ad-price { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -0.03em; margin: 0 0 var(--s-2); font-variant-numeric: tabular-nums; }
.ad-sold { color: var(--warn); font-weight: 700; }
.ad-where { font-size: var(--t-sm); color: var(--ink-muted); margin: 0 0 var(--s-1); }
.ad-when { margin: 0 0 var(--s-4); }
.ad-seller { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.ad-safety ul { margin: 0; padding-left: var(--s-4); }
.ad-safety li { margin-bottom: var(--s-2); }

.enquiry { padding-top: var(--s-4); border-top: 1px solid var(--line); }
.enquiry h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }

.related { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }

/* ── forms ───────────────────────────────────────────────────────── */
.field { display: block; margin-bottom: var(--s-5); }
.field > span:first-child { display: block; font-size: var(--t-sm); font-weight: 700; margin-bottom: var(--s-2); }
.field input, .field select, .field textarea {
  width: 100%; padding: var(--s-3) var(--s-4); min-height: 46px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: var(--t-base);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; line-height: 1.6; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); box-shadow: var(--ring); outline: none;
}
.hint { display: block; font-size: var(--t-xs); color: var(--ink-faint); margin-top: var(--s-1); }
.req { font-style: normal; font-size: var(--t-xs); color: var(--hot); font-weight: 600; }
.field-row { display: grid; gap: var(--s-4); grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

fieldset {
  border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-5); margin: 0 0 var(--s-5);
  background: var(--surface);
}
legend { padding: 0 var(--s-2); font-weight: 700; font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }

.form-error, .auth-error {
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  background: var(--bad-wash); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent);
  border-radius: var(--r-sm); color: var(--bad); font-size: var(--t-sm);
}
.form-note { margin-top: var(--s-2); }

.notice {
  padding: var(--s-4); margin-bottom: var(--s-5);
  background: var(--accent-wash); border: 1px solid var(--accent-line);
  border-radius: var(--r); font-size: var(--t-sm);
}

/* ── auth ────────────────────────────────────────────────────────── */
.page-auth main { padding-top: var(--s-7); }
.auth-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6); margin-bottom: var(--s-5);
  box-shadow: var(--shadow);
}
.auth-alt { font-size: var(--t-sm); color: var(--ink-muted); text-align: center; margin: var(--s-4) 0 0; }
.or { position: relative; text-align: center; margin: var(--s-5) 0; }
.or::before { content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: var(--line); }
.or span { position: relative; background: var(--surface); padding: 0 var(--s-3); font-size: var(--t-xs); color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }

/* ── plans ───────────────────────────────────────────────────────── */
.plans { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); margin: var(--s-5) 0; }
.plan {
  position: relative; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow-sm);
}
.plan-premium { border-color: var(--accent); box-shadow: var(--shadow); }
.plan-flag {
  position: absolute; top: -11px; left: var(--s-5);
  background: var(--accent); color: var(--accent-ink);
  padding: 3px var(--s-3); border-radius: var(--r-full); font-size: var(--t-xs); font-weight: 700;
}
.plan h2 { margin: 0 0 var(--s-2); font-size: var(--t-md); }
.plan-price { margin: 0 0 var(--s-2); }
.plan-price strong { font-size: var(--t-3xl); font-weight: 800; letter-spacing: -0.03em; }
/* The price is set at 3rem with negative tracking, which pulls the space
   after it almost shut — "$9.90one listing". The margin puts it back. */
.plan-price span { margin-left: var(--s-1); font-size: var(--t-sm); color: var(--ink-faint); }
.plan-tagline { color: var(--ink-muted); font-size: var(--t-sm); margin-bottom: var(--s-4); }
.plan-features, .plan-lacks { list-style: none; margin: 0 0 var(--s-5); padding: 0; }
.plan-features li, .plan-lacks li { position: relative; padding-left: var(--s-5); margin-bottom: var(--s-2); font-size: var(--t-sm); }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.plan-lacks li { color: var(--ink-faint); }
.plan-lacks li::before { content: "—"; position: absolute; left: 0; }

.plan-picker { display: grid; gap: var(--s-3); }
.plan-option {
  display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
}
.plan-option:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); box-shadow: var(--ring); }
.plan-option-body { display: flex; flex-direction: column; gap: 2px; }

.compare { width: 100%; border-collapse: collapse; font-size: var(--t-sm); background: var(--surface); }
.compare th, .compare td { padding: var(--s-3) var(--s-4); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare thead th { color: var(--ink-faint); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
.compare thead .price { display: block; font-size: var(--t-lg); font-weight: 800; color: var(--ink); text-transform: none; letter-spacing: -0.02em; }
.compare tbody th { font-weight: 600; color: var(--ink-muted); }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }

/* ── the photo uploader ──────────────────────────────────────────── */
.drop {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-7); background: var(--surface);
  border: 2px dashed var(--line-strong); border-radius: var(--r); cursor: pointer; text-align: center;
}
.drop:hover { border-color: var(--accent); background: var(--accent-wash); }
.thumbs { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: var(--s-4) 0; padding: 0; }
.thumbs li { position: relative; width: 96px; }
.thumbs img { width: 96px; height: 72px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.thumbs button { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border: 0; border-radius: var(--r-full); background: rgba(13,27,42,.8); color: #fff; cursor: pointer; font-size: 12px; line-height: 1; }
.thumbs .first-flag { position: absolute; bottom: 2px; left: 2px; background: var(--accent); color: var(--accent-ink); font-size: 10px; padding: 1px 4px; border-radius: 3px; font-weight: 700; }

/* ── search ──────────────────────────────────────────────────────── */
.search-h1 { margin: var(--s-6) 0 var(--s-4); }

.search-bar { position: relative; display: flex; gap: var(--s-2); margin-bottom: var(--s-2); }
.search-bar-icon {
  position: absolute; left: var(--s-4); top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; color: var(--ink-faint); pointer-events: none;
}
.search-bar input {
  flex: 1; min-width: 0;
  padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) * 2 + 20px);
  min-height: 50px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  font: inherit; font-size: var(--t-md);
}
.search-bar input:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
.search-hint { margin-bottom: var(--s-4); }

.search-interpretation {
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: var(--r);
}
.search-interpretation p { margin: 0 0 var(--s-1); font-size: var(--t-sm); }
.search-interpretation .label { color: var(--ink-faint); text-transform: uppercase; font-size: var(--t-xs); letter-spacing: .06em; }

.search-layout { display: grid; gap: var(--s-6); grid-template-columns: 270px minmax(0, 1fr); align-items: start; }

/**
 * The filter rail.
 *
 * A card on desktop, sticky beside the results. On a phone the whole thing
 * collapses into one summary that says "Filter" and carries a count of what
 * is currently applied — so the results start immediately under the search
 * box instead of eight screens below thirty brand checkboxes.
 *
 * The rail is opened by app.mjs at wide widths, because no CSS can open a
 * <details>. That is safe here and nowhere else: this page cannot render a
 * single result without JavaScript, since the results come from the API.
 */
.filter-rail {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-sm);
  padding: 0 var(--s-4);
}
.filter-rail-summary {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-4) 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: var(--t-md);
}
.filter-rail-summary::-webkit-details-marker { display: none; }
.filter-rail-summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg); transition: transform .18s var(--ease);
}
.filter-rail[open] > .filter-rail-summary::after { transform: rotate(-135deg); }
.filter-active {
  min-width: 20px; padding: 0 6px; border-radius: var(--r-full);
  background: var(--accent); color: var(--accent-ink);
  font-size: var(--t-xs); font-weight: 700; text-align: center; line-height: 20px;
}

.filter-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--s-3); }
.filter-head h2 { margin: 0; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint); }

.filter-group { border-top: 1px solid var(--line); }
.filter-group > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) 0; cursor: pointer; list-style: none;
  font-size: var(--t-sm); font-weight: 700; color: var(--ink);
}
.filter-group > summary::-webkit-details-marker { display: none; }
.filter-group > summary::after {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg); transition: transform .18s var(--ease);
}
.filter-group[open] > summary::after { transform: rotate(-135deg); }

/* The fieldset inside carries the grouping semantics and none of the chrome —
   the accordion is already drawing the box. */
.filter-options, .filter-price {
  border: 0; border-radius: 0; margin: 0; padding: 0 0 var(--s-4);
  background: none;
}
.filter-options { display: grid; gap: var(--s-2); max-height: 230px; overflow-y: auto; }
.filter-options label { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); cursor: pointer; }
.filter-options input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); flex-shrink: 0; }
.filter-options em { font-style: normal; color: var(--ink-faint); font-size: var(--t-xs); }
.filter-price { display: grid; gap: var(--s-2); grid-template-columns: 1fr 1fr; }
/* min-width: 0 on both halves. A number input sizes itself from its own
   default width, which is wider than a 270px rail split in two, and a grid
   track never shrinks below its content unless it is told it may — so
   without this the "To $" box hung 118px past the edge of the sidebar. */
.filter-price label { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; font-size: var(--t-xs); color: var(--ink-faint); }
.filter-price input {
  width: 100%; min-width: 0;
  padding: var(--s-2) var(--s-3); min-height: 40px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit;
}

/**
 * The results bar sticks under the header, so the count and the sort stay
 * reachable while the reader is well down the grid — which is the whole
 * reason to have a count on the page at all.
 */
.results-head {
  position: sticky; top: var(--head-h); z-index: 10;
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-3) 0; margin-bottom: var(--s-4); flex-wrap: wrap;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.results-head p { margin: 0; font-size: var(--t-md); font-weight: 700; color: var(--ink); }
.sort { display: flex; align-items: center; gap: var(--s-2); }
.sort > span { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); font-weight: 700; }
.sort select {
  padding: var(--s-2) var(--s-3); min-height: 40px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit; font-size: var(--t-sm);
}
.search-empty { padding: var(--s-7); text-align: center; color: var(--ink-muted); }
.pager-slot:empty { display: none; }

@media (max-width: 860px) {
  .search-layout { grid-template-columns: 1fr; }
  /* The rail moves ABOVE the results on a phone, collapsed. Below them it
     may as well not exist — nobody scrolls past twenty cards to find the
     filters that would have removed them. */
  .search-filters { order: 1; }
  .search-results { order: 2; }
  .results-head { position: static; }
}
@media (min-width: 861px) {
  .search-filters { position: sticky; top: calc(var(--head-h) + var(--s-3)); max-height: calc(100vh - var(--head-h) - var(--s-5)); overflow-y: auto; }
  .filter-rail-summary { display: none; }
}

/* ── messages ────────────────────────────────────────────────────── */
.messages-layout { display: grid; gap: var(--s-5); grid-template-columns: 320px minmax(0, 1fr); align-items: start; }
@media (max-width: 800px) { .messages-layout { grid-template-columns: 1fr; } }

.thread-list { display: grid; gap: var(--s-2); }
.thread-item {
  display: flex; gap: var(--s-3); width: 100%; padding: var(--s-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.thread-item:hover { border-color: var(--line-strong); background: var(--bg-hover); }
.thread-item[aria-current] { border-color: var(--accent); background: var(--accent-wash); }
.thread-item img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--r-sm); flex-shrink: 0; }
.thread-item .t { font-size: var(--t-sm); font-weight: 700; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-item .p { font-size: var(--t-xs); color: var(--ink-faint); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-item .unread { background: var(--hot); color: var(--hot-ink); border-radius: var(--r-full); font-size: 10px; padding: 1px 6px; font-weight: 700; }

.thread-view { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-5); box-shadow: var(--shadow-sm); }
.thread-head { padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); margin-bottom: var(--s-4); }
.thread-listing { font-weight: 700; text-decoration: none; }
.thread-messages { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; gap: var(--s-3); max-height: 460px; overflow-y: auto; }
.msg { max-width: 82%; padding: var(--s-3) var(--s-4); border-radius: var(--r); background: var(--bg-sunken); }
.msg-mine { margin-left: auto; background: var(--accent-wash); }
.msg-meta { font-size: var(--t-xs); color: var(--ink-faint); margin: 0 0 var(--s-1); }
.msg-body { margin: 0; white-space: pre-wrap; font-size: var(--t-sm); }
.thread-reply textarea {
  width: 100%; padding: var(--s-3); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--r-sm); font: inherit; resize: vertical;
}
.thread-reply textarea:focus { border-color: var(--accent); box-shadow: var(--ring); outline: none; }
.thread-reply button { margin-top: var(--s-2); }
.privacy-note { margin-top: var(--s-3); }
.thread-empty { color: var(--ink-faint); padding: var(--s-6); }

/* ── account ─────────────────────────────────────────────────────── */
.account-nav { display: flex; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); margin-bottom: var(--s-5); }
.account-nav a { font-size: var(--t-sm); font-weight: 600; text-decoration: none; }
.account-banner { padding: var(--s-4); background: var(--warn-wash); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); border-radius: var(--r); margin-bottom: var(--s-5); }
.account-banner.is-good { background: var(--good-wash); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.account-banner p:last-child { margin-bottom: 0; }
.my-listings { display: grid; gap: var(--s-3); }
.my-listing {
  display: flex; gap: var(--s-4); padding: var(--s-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  flex-wrap: wrap; align-items: center; box-shadow: var(--shadow-sm);
}
.my-listing img { width: 84px; height: 63px; object-fit: cover; border-radius: var(--r-sm); }
.my-listing .body { flex: 1; min-width: 180px; }
.my-listing .status { font-size: var(--t-xs); font-weight: 700; padding: 3px var(--s-3); border-radius: var(--r-full); background: var(--bg-sunken); color: var(--ink-muted); }
.my-listing .status-live { background: var(--good-wash); color: var(--good); }
.my-listing .status-draft { background: var(--warn-wash); color: var(--warn); }
.my-listing .actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.loading { color: var(--ink-faint); }

/* ── prose ───────────────────────────────────────────────────────── */
.prose { max-width: 70ch; }

/**
 * Pages that carry the plan cards or the comparison table.
 *
 * The prose column is capped at 70ch because that is a comfortable line
 * length to read. Cards are not prose: squeezed into 70ch the two plans came
 * out about 300px wide, every feature wrapped onto three lines, and the page
 * became a long scroll of narrow text.
 *
 * So the column cap moves off the article and onto the things that are
 * actually read as sentences. The cards and the table then take the full
 * width of the wrap.
 */
.page-sell .prose { max-width: none; }
.page-sell .prose > p,
.page-sell .prose > ul,
.page-sell .prose > ol,
.page-sell .prose > h2,
.page-sell .prose > h3,
.page-sell .prose > .faq-list { max-width: 70ch; }
/* min(380px, 100%) rather than a bare 380px: a fixed minimum wider than the
   viewport forces the grid track past the screen edge and the whole page
   scrolls sideways. Measured at 6px of overflow on a 390px phone. */
.page-sell .plans { grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: var(--s-5); }
.page-browse .prose { max-width: none; }
.prose h2 { margin-top: var(--s-6); }
.prose ul, .prose ol { padding-left: var(--s-5); }
.prose li { margin-bottom: var(--s-2); }
.prose blockquote { margin: var(--s-5) 0; padding: var(--s-4) var(--s-5); background: var(--surface); border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.prose blockquote p:last-child { margin: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-6) 0; }
.prose table { margin: var(--s-4) 0; }
.byline { margin-top: calc(var(--s-3) * -1); color: var(--ink-muted); }
.steps { counter-reset: step; }
.cta-row { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); }

.guide-index { list-style: none; margin: 0; padding: 0; }
.guide-index li { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.guide-index a { text-decoration: none; font-weight: 700; }
.guide-index p { margin: var(--s-1) 0 0; font-size: var(--t-sm); color: var(--ink-muted); }
.guide-more { max-width: 70ch; margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.guide-more ul { list-style: none; margin: 0; padding: 0; }
.guide-more li { padding: var(--s-2) 0; }

/* ── questions ───────────────────────────────────────────────────── */
.faq { margin: var(--s-7) 0; }
/**
 * Questions, as an accordion.
 *
 * Built on <details>/<summary>, so it opens and closes with no JavaScript at
 * all, is keyboard operable for free, and is announced correctly by screen
 * readers. The answers stay in the DOM when closed, which is what keeps the
 * FAQPage structured data honest — Google requires the marked-up answer to be
 * the one on the page, and collapsed is not the same as absent.
 */
.faq-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.faq-item + .faq-item { border-top: 1px solid var(--line); }
.faq-item > summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); cursor: pointer; list-style: none;
  font-weight: 700; font-size: var(--t-md); line-height: 1.4;
}
/* Safari draws its own triangle unless this is removed. */
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px; margin-top: 6px;
  border-right: 2px solid var(--ink-faint); border-bottom: 2px solid var(--ink-faint);
  transform: rotate(45deg); transition: transform .18s var(--ease);
}
.faq-item[open] > summary { background: var(--bg-hover); }
.faq-item[open] > summary::after { transform: rotate(-135deg); }
.faq-item > summary:hover { color: var(--accent); }
.faq-item > summary:hover::after { border-color: var(--accent); }
.faq-answer { padding: 0 var(--s-5) var(--s-5); color: var(--ink-muted); max-width: 70ch; }
.faq-answer > p:last-child { margin-bottom: 0; }

/* ── the sell block on the homepage ──────────────────────────────── */
.home-sell { padding: var(--s-6) 0 var(--s-8); }
.sell-card {
  padding: var(--s-6); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); max-width: 68ch; box-shadow: var(--shadow-sm);
}
.sell-prices { font-size: var(--t-md); }
.sell-card .btn { margin-right: var(--s-2); }

/* ── footer ──────────────────────────────────────────────────────── */
.site-foot { margin-top: var(--s-8); padding: var(--s-7) 0 var(--s-6); background: var(--bg-sunken); border-top: 1px solid var(--line); }
.foot-cols { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); margin-bottom: var(--s-6); }
.foot-col h2 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-bottom: var(--s-3); }
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { padding: var(--s-1) 0; }
.foot-col a { font-size: var(--t-sm); color: var(--ink-muted); text-decoration: none; }
.foot-col a:hover { color: var(--accent); text-decoration: underline; }
.foot-base { padding-top: var(--s-5); border-top: 1px solid var(--line); max-width: 76ch; }
.foot-base p { margin-bottom: var(--s-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .card:hover { transform: none; }
}