/* ==========================================================================
   Domaind — inner pages (search, domain, marketplace, sell, how it works)
   Extends style.css. Same "Night grid" art direction.
   ========================================================================== */

/* ---------- Inner-page shell ---------------------------------------------- */

body.page .site-header {
  background: rgba(5, 9, 15, 0.94);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: oklch(1 0 0 / 0.1);
}

.pagehead {
  position: relative;
  background: var(--ink-900);
  color: var(--on-ink);
  padding-top: calc(72px + clamp(var(--space-8), 5vw, var(--space-16)));
  padding-bottom: clamp(var(--space-8), 5vw, var(--space-16));
  border-bottom: 1px solid oklch(1 0 0 / 0.08);
  overflow: hidden;
  isolation: isolate;
}
.pagehead::before {
  content: '';
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 130%;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 18% 0%, oklch(0.45 0.09 60 / 0.22) 0%, transparent 70%),
    radial-gradient(50% 60% at 92% 20%, oklch(0.4 0.09 250 / 0.28) 0%, transparent 72%);
  pointer-events: none;
}
.pagehead__inner { max-width: 900px; }
.pagehead h1 {
  font-family: var(--font-display);
  font-weight: 600;
  word-spacing: 0.06em;
  font-size: var(--text-2xl);
  letter-spacing: -0.032em;
  line-height: 1.06;
  color: var(--on-ink);
  text-wrap: balance;
}
.pagehead h1 em { font-style: normal; color: var(--color-primary-fill); }
.pagehead__lede {
  margin-top: var(--space-5);
  color: var(--on-ink-muted);
  font-size: var(--text-base);
  max-width: 62ch;
}
.pagehead__lede strong { color: var(--on-ink); font-weight: 600; }
.pagehead .search { margin-top: clamp(var(--space-6), 3vw, var(--space-10)); }
.pagehead--slim { padding-bottom: clamp(var(--space-6), 3vw, var(--space-10)); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--on-ink-faint);
  margin-bottom: var(--space-5);
}
.crumbs a { color: var(--on-ink-muted); text-decoration: none; }
.crumbs a:hover { color: var(--on-ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs span[aria-hidden] { color: var(--on-ink-faint); }

/* ---------- Two-column layout with filter rail ---------------------------- */

.with-rail {
  display: grid;
  grid-template-columns: 254px minmax(0, 1fr);
  gap: clamp(var(--space-6), 3vw, var(--space-10));
  align-items: start;
}

.rail {
  position: sticky;
  top: calc(72px + var(--space-6));
  display: grid;
  gap: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.rail__group { display: grid; gap: var(--space-3); }
.rail__group > h2 {
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  font-weight: 600;
}
.rail__group + .rail__group { border-top: 1px solid var(--color-divider); padding-top: var(--space-6); }
.check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}
.check input {
  appearance: none;
  width: 17px; height: 17px;
  flex: none;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
.check input:checked {
  background: var(--color-primary-fill);
  border-color: var(--color-primary-fill);
}
.check input:checked::after {
  content: '';
  width: 9px; height: 5px;
  border: 2px solid #1b1206;
  border-top: 0; border-right: 0;
  rotate: -45deg;
  translate: 0 -1px;
}
.check:hover { color: var(--color-text); }
.check em { font-style: normal; margin-inline-start: auto; color: var(--color-text-faint); font-size: var(--text-xs); font-family: var(--font-mono); }

.range { display: flex; align-items: center; gap: var(--space-2); }
.range input {
  width: 100%;
  min-width: 0;
  font: 500 var(--text-xs) / 1 var(--font-mono);
  padding: var(--space-3);
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.range span { color: var(--color-text-faint); font-size: var(--text-xs); }

.rail__reset {
  background: none; border: 0; padding: 0;
  color: var(--color-primary);
  font-size: var(--text-xs); font-weight: 600;
  cursor: pointer;
  justify-self: start;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Toolbar (count + sort) --------------------------------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.toolbar__count { font-size: var(--text-sm); color: var(--color-text-muted); }
.toolbar__count b { color: var(--color-text); font-weight: 600; }
.toolbar__count code { font-family: var(--font-mono); color: var(--color-text); font-size: 0.95em; }
.toolbar .selectish { margin-inline-start: auto; }

.selectish {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.selectish select {
  appearance: none;
  font: 600 var(--text-xs) / 1 var(--font-body);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-4);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1rem top 52%, right 0.7rem top 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Source legend — makes the dual-inventory model explicit */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.legend > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend i {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: currentColor;
}
.legend .is-new { color: var(--color-success); }
.legend .is-sale { color: var(--color-primary); }
.legend .is-offer { color: var(--color-info); }
.legend p { margin-inline-start: auto; max-width: 44ch; color: var(--color-text-faint); }

/* Row source attribution line */
.result__src {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.result__src b { font-weight: 600; color: var(--color-text-muted); }

/* Pagination */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-10);
}
.pager a, .pager span {
  min-width: 40px;
  min-height: 40px;
  display: grid;
  place-content: center;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  background: var(--color-surface);
}
.pager a:hover { color: var(--color-text); border-color: var(--color-text-faint); }
.pager [aria-current='page'] {
  background: var(--color-text);
  border-color: var(--color-text);
  color: var(--color-text-inverse);
}
.pager .pager__gap { border: 0; background: none; min-width: 20px; }

/* ---------- Chip filter bar (marketplace) -------------------------------- */

.chipbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid oklch(1 0 0 / 0.2);
  background: oklch(1 0 0 / 0.05);
  color: var(--on-ink-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-interactive), border-color var(--transition-interactive),
    background var(--transition-interactive);
}
.chip:hover { color: var(--on-ink); border-color: oklch(1 0 0 / 0.4); }
.chip[aria-pressed='true'], .chip.is-on {
  background: var(--on-ink);
  border-color: var(--on-ink);
  color: var(--ink-900);
}
.chip b { font-family: var(--font-mono); font-weight: 600; }

/* ---------- Domain detail page ------------------------------------------- */

.dom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 386px;
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: start;
}

.dom__name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(1.75rem, 1rem + 3.4vw, 3.75rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--on-ink);
  overflow-wrap: anywhere;
}
.dom__name .tld { color: var(--color-primary-fill); }
.dom__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.dom__tag {
  font-size: var(--text-xs);
  color: var(--on-ink-muted);
  padding: var(--space-2) var(--space-3);
  border: 1px solid oklch(1 0 0 / 0.18);
  border-radius: var(--radius-full);
}

/* Buy box */
.buybox {
  position: sticky;
  top: calc(72px + var(--space-6));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.buybox__price {
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-primary-highlight);
}
.buybox__price small {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.buybox__price b {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-xl);
  letter-spacing: -0.03em;
  color: var(--color-text);
  display: block;
  line-height: 1.1;
}
.buybox__price p { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-2); }
.buybox__body { padding: var(--space-6); display: grid; gap: var(--space-3); }
.buybox__body .btn { width: 100%; }
.buybox__or {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-xs); color: var(--color-text-faint);
  margin-block: var(--space-1);
}
.buybox__or::before, .buybox__or::after {
  content: ''; height: 1px; flex: 1; background: var(--color-divider);
}
.buybox__lto {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.buybox__lto b { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text); font-weight: 600; }
.buybox__trust {
  border-top: 1px solid var(--color-divider);
  padding: var(--space-5) var(--space-6);
  display: grid; gap: var(--space-3);
  background: var(--color-surface-2);
}
.buybox__trust li {
  display: flex; gap: var(--space-3); align-items: baseline;
  font-size: var(--text-xs); color: var(--color-text-muted);
  list-style: none;
}
.buybox__trust svg { flex: none; color: var(--color-success); translate: 0 2px; }
.buybox__trust b { color: var(--color-text); font-weight: 600; }

/* Facts table */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.facts > div { background: var(--color-surface); padding: var(--space-5); }
.facts dt {
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}
.facts dd { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-sm); color: var(--color-text); }

/* Comparable sales table */
.tbl { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.tbl caption { text-align: left; font-size: var(--text-xs); color: var(--color-text-faint); padding-bottom: var(--space-3); }
.tbl th, .tbl td { padding: var(--space-4) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-divider); }
.tbl th {
  font-size: var(--text-xs); letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-text-faint); font-weight: 600;
}
.tbl td:last-child, .tbl th:last-child { text-align: right; }
.tbl tbody td:first-child { font-family: var(--font-mono); color: var(--color-text); }
.tbl tbody td:last-child { font-family: var(--font-mono); font-weight: 600; color: var(--color-text); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl--panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tbl-scroll { overflow-x: auto; }

/* Numeric variant: every column after the second is a right-aligned mono figure. */
.tbl--num tbody td:nth-child(n + 3),
.tbl--num thead th:nth-child(n + 3) { text-align: right; }
.tbl--num tbody td:nth-child(n + 3) { font-family: var(--font-mono); color: var(--color-text); font-variant-numeric: tabular-nums; }
.tbl--num tbody td:last-child { font-weight: 600; }

/* Offer form */
.offerform {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
}
.offerform > .field--full, .offerform > .form-actions { grid-column: 1 / -1; }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text); letter-spacing: 0.02em; }
.field input, .field textarea, .field select {
  font: 400 var(--text-sm) / 1.5 var(--font-body);
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  min-height: 46px;
  width: 100%;
}
.field textarea { min-height: 132px; resize: vertical; font-family: var(--font-mono); font-size: var(--text-xs); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible {
  outline: 2px solid var(--color-primary-fill);
  outline-offset: 1px;
  border-color: var(--color-primary-fill);
}
.field small { font-size: var(--text-xs); color: var(--color-text-faint); }
.field--money input { font-family: var(--font-mono); font-weight: 500; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.form-actions p { font-size: var(--text-xs); color: var(--color-text-faint); max-width: 48ch; }

/* ---------- Vertical steps ---------------------------------------------- */

.steps-v { display: grid; gap: var(--space-6); counter-reset: sv; }
.steps-v > li {
  list-style: none;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--space-5);
  position: relative;
}
.steps-v > li::before {
  counter-increment: sv;
  content: counter(sv);
  width: 44px; height: 44px;
  display: grid; place-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--color-primary);
}
.steps-v > li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 22px; top: 52px; bottom: -18px;
  width: 1px;
  background: var(--color-divider);
}
.steps-v h3 { font-size: var(--text-base); font-weight: 600; margin-bottom: var(--space-2); letter-spacing: -0.01em; }
.steps-v p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 62ch; }
.steps-v time {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ---------- Two-track comparison ---------------------------------------- */

.tracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
}
.track {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: clamp(var(--space-6), 3vw, var(--space-10));
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}
.track--dark { background: var(--ink-800); border-color: oklch(1 0 0 / 0.12); color: var(--on-ink); }
.track h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-lg); letter-spacing: -0.025em; word-spacing: 0.05em;
}
.track--dark h3 { color: var(--on-ink); }
.track > p { font-size: var(--text-sm); color: var(--color-text-muted); }
.track--dark > p { color: var(--on-ink-muted); }
.track ol, .track ul { list-style: none; display: grid; gap: var(--space-3); font-size: var(--text-sm); }
.track li { display: flex; gap: var(--space-3); align-items: baseline; color: var(--color-text-muted); }
.track--dark li { color: var(--on-ink-muted); }
.track li svg { flex: none; color: var(--color-primary); translate: 0 2px; }
.track--dark li svg { color: var(--color-primary-fill); }
.track__meta {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-divider);
  display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6);
  font-size: var(--text-xs); color: var(--color-text-faint);
}
.track--dark .track__meta { border-top-color: oklch(1 0 0 / 0.14); color: var(--on-ink-faint); }
.track__meta b { display: block; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text); font-weight: 600; }
.track--dark .track__meta b { color: var(--on-ink); }

/* ---------- Value grid (sell page) -------------------------------------- */

.vgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--color-divider);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.vgrid > div { background: var(--color-surface); padding: clamp(var(--space-5), 2.5vw, var(--space-8)); }
.vgrid h3 {
  font-size: var(--text-base); font-weight: 600; letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}
.vgrid b {
  display: block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.03em;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.vgrid p { font-size: var(--text-sm); color: var(--color-text-muted); }
.vgrid p a { color: var(--color-primary); }
@media (max-width: 900px) { .vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vgrid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------------------------------------------------------- */

.faq { display: grid; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.faq details { border-bottom: 1px solid var(--color-divider); }
.faq details:last-child { border-bottom: 0; }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-5) var(--space-6);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  display: flex; align-items: baseline; gap: var(--space-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  margin-inline-start: auto;
  font-family: var(--font-mono);
  color: var(--color-primary);
  font-size: var(--text-base);
  line-height: 1;
  flex: none;
}
.faq details[open] summary::after { content: '–'; }
.faq summary:hover { background: var(--color-surface-offset); }
.faq details > div { padding: 0 var(--space-6) var(--space-5); }
.faq p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 76ch; }
.faq p + p { margin-top: var(--space-3); }

/* ---------- Disclosure panel (registrar / partner transparency) ---------- */

.disclose {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary-fill);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: clamp(var(--space-5), 2.5vw, var(--space-8));
  display: grid;
  gap: var(--space-4);
}
.disclose h3 { font-size: var(--text-base); font-weight: 600; }
.disclose p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 82ch; }
.disclose p a { color: var(--color-primary); text-underline-offset: 3px; }
.faq details > div a { color: var(--color-primary); text-underline-offset: 3px; }
.track a, .steps-v a { color: var(--color-primary); text-underline-offset: 3px; }

/* ---------- Callout band ------------------------------------------------- */

.band {
  background: var(--ink-800);
  color: var(--on-ink);
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}
.band__inner { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; }
.band h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-xl); letter-spacing: -0.03em; word-spacing: 0.05em;
  color: var(--on-ink);
}
.band p { color: var(--on-ink-muted); font-size: var(--text-sm); margin-top: var(--space-3); max-width: 60ch; }
.band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-self: end; }

/* ---------- Utility ----------------------------------------------------- */

.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(var(--space-8), 4vw, var(--space-12)); }
.section__head { margin-bottom: clamp(var(--space-6), 3vw, var(--space-10)); }
.muted-note { font-size: var(--text-xs); color: var(--color-text-faint); max-width: 84ch; }
.muted-note a { color: var(--color-primary); }

/* ---------- Responsive -------------------------------------------------- */

@media (max-width: 1080px) {
  .dom { grid-template-columns: minmax(0, 1fr); }
  .buybox { position: static; }
  .band__inner { grid-template-columns: minmax(0, 1fr); }
  .band__actions { justify-self: start; }
}

@media (max-width: 900px) {
  .with-rail { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .rail { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
  .rail__group + .rail__group { border-top: 0; padding-top: 0; }
}

@media (max-width: 640px) {
  .pagehead { padding-top: calc(72px + var(--space-8)); }
  .legend p { margin-inline-start: 0; }
  .toolbar .selectish { margin-inline-start: 0; }
  .facts { grid-template-columns: 1fr; }
  .steps-v > li { grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-4); }
  .steps-v > li::before { width: 36px; height: 36px; }
  .steps-v > li:not(:last-child)::after { left: 18px; top: 44px; }
}

/* ---------------------------------------------------------------------------
   Sample-data notice
   ---------------------------------------------------------------------------
   Used on search, marketplace and domain pages while the aftermarket feed is
   not connected. Those three pages also carry <meta name="robots" content=
   "noindex, nofollow"> and are excluded in robots.txt.

   This is deliberate and load-bearing: publishing invented five-figure asking
   prices on a live commercial domain would be a real credibility problem when
   applying to Sedo and Afternic, who look at the site. Remove this component,
   the robots.txt Disallow lines and the noindex flags on the SAME DAY the real
   listing feed goes live. Not before. Not later.
   -------------------------------------------------------------------------- */
.notice {
  display: flex;
  gap: 0.6em;
  align-items: baseline;
  max-width: var(--content-default);
  margin: 0 0 var(--space-6);
  padding: 0.85em 1.1em;
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in oklab, var(--color-primary) 9%, transparent);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.notice strong {
  color: var(--color-text);
  font-weight: 700;
  white-space: nowrap;
}

/* Left-aligned action row for page heads. `.band__actions` centres its
   children, which is right inside a closing band but wrong under left-aligned
   page-head copy. */
.pagehead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* Headings that are links inside card grids. Without this they fall back to the
   browser default blue-and-underlined, which looks broken against the dark
   theme. `.vgrid p a` was already covered; the h3 case was not. */
.vgrid h3 a,
.vgrid h4 a {
  color: var(--color-text);
  text-decoration: none;
}

.vgrid h3 a:hover,
.vgrid h4 a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}