/* ==========================================================================
   Online Businesses For Sale — public stylesheet

   Written by hand, no build step. Load order:
     1. tokens        design decisions in one place
     2. base          resets and element defaults
     3. layout        wrap, sections, page furniture
     4. components    buttons, cards, rail, badges, forms …
     5. pages         hero, listing, search, compare
     6. utilities     helpers, motion preferences, print

   The signature element is the metric rail: figures set in tabular numerals
   on hairline-separated cells, so the numbers line up down a whole grid of
   cards. Everything else stays quiet so the rail reads first.
   ========================================================================== */

/* 1. Tokens ============================================================== */

:root {
  /* Overridden inline by the theme settings; these are the fallbacks. */
  --accent: #5b5bd6;
  --metric: #0fb292;
  --radius: 14px;

  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-ink: color-mix(in srgb, var(--accent) 82%, #000);

  --warn: #f0a01e;
  --danger: #d94a4a;

  --r-sm: calc(var(--radius) * 0.5);
  --r-lg: calc(var(--radius) * 1.4);
  --r-pill: 999px;

  --step: 0.25rem;
  --gap: 1rem;
  --gap-lg: 1.75rem;
  --wrap: 76rem;
  --wrap-narrow: 44rem;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-num: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono",
              Menlo, Consolas, monospace;

  --shadow-1: 0 1px 2px rgba(16, 19, 26, 0.06), 0 1px 3px rgba(16, 19, 26, 0.04);
  --shadow-2: 0 4px 12px rgba(16, 19, 26, 0.07), 0 2px 4px rgba(16, 19, 26, 0.04);
  --shadow-3: 0 18px 40px rgba(16, 19, 26, 0.12), 0 4px 10px rgba(16, 19, 26, 0.06);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 140ms;
  --slow: 320ms;
}

/* Light is the default; dark is applied by the data-theme attribute, which the
   inline script in the layout sets before first paint. */
:root,
[data-theme="light"] {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface-2: #f2f3f8;
  --ink: #12151c;
  --ink-2: #3d4351;
  --muted: #6b7280;
  --line: #e4e6ef;
  --line-strong: #d3d7e4;
  --overlay: rgba(255, 255, 255, 0.82);
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0c0e13;
  --surface: #141821;
  --surface-2: #1b202b;
  --ink: #e9ebf0;
  --ink-2: #c2c7d4;
  --muted: #99a1b0;
  --line: #252b38;
  --line-strong: #333b4c;
  --overlay: rgba(12, 14, 19, 0.78);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 20px 44px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

/* 2. Base =============================================================== */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  line-height: 1.15;
  letter-spacing: -0.021em;
  font-weight: 650;
}
h1 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem); }
h3 { font-size: 1.06rem; }

p { margin: 0 0 1em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }
svg { flex: none; }

button, input, select, textarea { font: inherit; color: inherit; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

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

::selection { background: var(--accent-soft); }

/* Form controls are styled here, in the base layer, so that component rules
   further down the file win. `input[type="search"]` and `.header-search input`
   have identical specificity, so whichever comes last decides — and it has to
   be the component. */
select, input[type="text"], input[type="email"], input[type="url"], input[type="search"],
input[type="number"], input[type="password"], input[type="date"], input[type="datetime-local"], textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
select:focus, input:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
select {
  appearance: none;
  padding-right: 2rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.05rem) 55%, calc(100% - 0.75rem) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
textarea { resize: vertical; min-height: 5rem; }

/* The hidden attribute has to beat any component display rule. The browser
   default is only `display: none` at user-agent weight, so a rule like
   `.cookie { display: flex }` silently defeats it and anything JavaScript
   hides stays on screen. Everything toggled by script relies on this. */
[hidden] { display: none !important; }

/* 3. Layout ============================================================= */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap.narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); }

main { display: block; min-height: 50vh; }

.section { margin: 3.25rem 0; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.section-head h2 { margin: 0; }
.section-more {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.9rem;
  font-weight: 550;
  white-space: nowrap;
}
.section-more:hover { text-decoration: none; gap: 0.5rem; }
.section-more svg { transition: transform var(--fast) var(--ease); }

/* margin-block only: the shorthand's 0 side-margins were overriding .wrap's
   margin-inline:auto (same specificity, declared later), pinning every page
   title to the viewport's left edge. */
.page-head { margin-block: 2.5rem 1.75rem; }
.page-head h1 { margin-bottom: 0.4rem; }
.lede {
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 46rem;
  margin: 0;
}

.skip {
  position: absolute;
  left: 0.75rem;
  top: -4rem;
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: var(--r-sm);
  transition: top var(--fast) var(--ease);
}
.skip:focus { top: 0.75rem; }

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

/* Honeypot field. Hidden from people, still in the DOM for bots. */
.hp {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
  overflow: hidden;
}

/* Announcement bar ------------------------------------------------------ */

.announce {
  background: var(--accent);
  color: #fff;
  text-align: center;
  font-size: 0.88rem;
  padding: 0.55rem 1rem;
}
.announce a {
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 550;
}

/* Header ---------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--overlay);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-weight: 680;
  letter-spacing: -0.02em;
  flex: none;
}
.brand:hover { text-decoration: none; }
/* Whatever gets uploaded, the logo renders at header height: the explicit
   CSS height beats the global `img { height: auto }` reset, width follows
   the aspect ratio, and the max-width keeps ultra-wide marks from crowding
   the nav on phones. */
.brand img {
  height: 32px; /* fallback — the real height comes from Settings > General as an inline style */
  width: auto;
  max-width: min(11rem, 42vw);
  object-fit: contain;
}
.brand-mark {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
}
.brand-name { font-size: 1.02rem; }

.site-nav { flex: 1; }
.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a, .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 0.93rem;
  font-weight: 520;
  background: none;
  border: 0;
  cursor: pointer;
}
.site-nav a:hover, .nav-trigger:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.has-menu { position: relative; }

.nav-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 15rem;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  display: grid;
  gap: 1px;
}
.nav-menu a {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  width: 100%;
}
.nav-menu a em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.nav-menu-all {
  border-top: 1px solid var(--line);
  margin-top: 0.25rem;
  color: var(--accent) !important;
  grid-template-columns: 1fr auto !important;
}

.fav-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}

.header-search { position: relative; width: min(20rem, 26vw); }
.header-search > svg,
.hero-search > svg {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.header-search input {
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  font-size: 0.9rem;
}
.header-search input:focus { border-color: var(--accent-line); }

.icon-btn {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }

.theme-toggle .theme-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-moon { display: block; }

.nav-burger { display: none; }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  padding: 0.5rem 1.25rem 1rem;
}
.mobile-nav a {
  padding: 0.7rem 0.25rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-weight: 520;
}

/* Search suggestions ---------------------------------------------------- */

.suggest {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 50;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  max-height: 22rem;
  overflow-y: auto;
}
.suggest a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  color: var(--ink);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.suggest a:last-child { border-bottom: 0; }
.suggest a:hover, .suggest a.is-active { background: var(--surface-2); text-decoration: none; }
.suggest .suggest-meta {
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.suggest-empty { padding: 0.85rem; color: var(--muted); font-size: 0.9rem; }

/* Footer ---------------------------------------------------------------- */

.disclosure-strip {
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.84rem;
  padding: 0.7rem 0;
}
/* Block centering on purpose — immune to flex-context quirks and identical
   in every browser. The strip carries the 4rem page gap itself and the footer
   drops its own, so the two sit welded together with no grey band between. */
.disclosure-strip { margin-top: 4rem; }
.disclosure-strip ~ .site-footer { margin-top: 0; }
.disclosure-strip .wrap { display: block; text-align: center; padding-block: 0.15rem; }
.disclosure-strip .icon { display: inline-block; vertical-align: -2px; margin-right: 0.35rem; }
.disclosure-strip a { margin-left: 0.35rem; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

.site-footer {
  margin-top: 4rem;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 3rem 0 1.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 2.5rem;
}
.footer-brand p { color: var(--muted); font-size: 0.92rem; max-width: 22rem; margin-top: 0.75rem; }
.socials { display: flex; gap: 0.4rem; }
.socials a {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink-2);
}
.socials a:hover { border-color: var(--accent-line); color: var(--accent); }

.footer-col h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 620; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-col a { color: var(--ink-2); font-size: 0.92rem; }
.footer-col a:hover { color: var(--accent); }
.newsletter p { color: var(--muted); font-size: 0.9rem; }
.newsletter-form { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.newsletter-form input[type="email"] {
  flex: 1 1 10rem;
  min-width: 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.84rem;
}
.footer-bottom p { margin: 0; }

/* 4. Components ========================================================= */

/* Buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.62rem 1.05rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: 0.94rem;
  font-weight: 570;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease),
              border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--accent-ink); box-shadow: var(--shadow-2); }

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

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { filter: brightness(0.92); }

.btn-sm { padding: 0.42rem 0.75rem; font-size: 0.86rem; }
.btn-lg { padding: 0.8rem 1.4rem; font-size: 1rem; }

.btn-cta {
  width: 100%;
  background: var(--accent);
  color: #fff;
  font-size: 1rem;
  padding: 0.85rem 1.2rem;
  position: relative;
  overflow: hidden;
}
.btn-cta:hover { background: var(--accent-ink); }

.button-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* CTA animations. Each is opt-in from Settings > Listings; all of them are
   suppressed by the reduced-motion block at the end of this file. */

@keyframes cta-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.028); }
}
.anim-pulse { animation: cta-pulse 2.4s var(--ease) infinite; }

@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
}
.anim-glow { animation: cta-glow 2.6s var(--ease) infinite; }

@keyframes cta-bounce {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-4px); }
  55% { transform: translateY(0); }
}
.anim-bounce { animation: cta-bounce 2.8s var(--ease) infinite; }

@keyframes cta-gradient { to { background-position: 200% 0; } }
.anim-gradient {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-ink) 35%,
              color-mix(in srgb, var(--accent) 60%, var(--metric)) 60%, var(--accent) 100%);
  background-size: 200% 100%;
  animation: cta-gradient 3.6s linear infinite;
}

@keyframes cta-shimmer { to { transform: translateX(240%); } }
.anim-shimmer::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%);
  animation: cta-shimmer 3s var(--ease) infinite;
}

@keyframes cta-breathe {
  0%, 100% { filter: saturate(1) brightness(1); }
  50% { filter: saturate(1.25) brightness(1.1); }
}
.anim-breathing { animation: cta-breathe 3.4s var(--ease) infinite; }

@keyframes cta-ripple {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0.5; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
.anim-ripple::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 60%; aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: cta-ripple 2.4s var(--ease) infinite;
}

/* Badges ---------------------------------------------------------------- */

.badges { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.55rem; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.16rem 0.5rem;
  border-radius: var(--r-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  line-height: 1.5;
}
.badges-lg .badge { font-size: 0.8rem; padding: 0.26rem 0.65rem; }

.badge-featured { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.badge-sponsored { background: color-mix(in srgb, var(--warn) 14%, transparent); color: color-mix(in srgb, var(--warn) 80%, #000); border-color: color-mix(in srgb, var(--warn) 32%, transparent); }
.badge-editors { background: color-mix(in srgb, var(--metric) 13%, transparent); color: color-mix(in srgb, var(--metric) 85%, #000); border-color: color-mix(in srgb, var(--metric) 30%, transparent); }
.badge-verified { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-strong); }
.badge-sold { background: var(--ink); color: var(--surface); }
[data-theme="dark"] .badge-sponsored { color: var(--warn); }
[data-theme="dark"] .badge-editors { color: var(--metric); }

/* Cards ----------------------------------------------------------------- */

.listing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
  gap: 1.25rem;
}
.listing-list { display: grid; gap: 0.9rem; }

.card {
  position: relative;
  /* A column flex box so the footer can be pushed to the bottom: grid already
     stretches every card in a row to the same height, but without this the
     rail and footer floated at different heights inside those equal boxes. */
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--fast) var(--ease), box-shadow var(--slow) var(--ease),
              transform var(--slow) var(--ease);
}
.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.card.is-sold .card-media { filter: grayscale(0.55); }

.card-media {
  display: block;
  flex: 0 0 auto;   /* never squashed when the card is stretched to row height */
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  font-size: 1.6rem;
  font-weight: 680;
  letter-spacing: 0.04em;
  color: var(--muted);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface-2)), var(--surface-2));
}

.card-body { padding: 1rem 1.1rem 0.9rem; flex: 1 1 auto; display: flex; flex-direction: column; }
.card-title { font-size: 1.02rem; margin: 0 0 0.35rem; line-height: 1.3; }
.card-title a { color: var(--ink); }
.card-title a:hover { color: var(--accent); text-decoration: none; }
.card-desc { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.85rem; }

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;   /* pinned to the bottom, so footers line up across a row */
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
}
/* Guarantees a gap above the footer even when a card has no slack. */
.card .rail { margin-bottom: 0.85rem; }
.card-host {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.79rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-tools { display: flex; gap: 0.2rem; flex: none; }

.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  color: var(--muted);
  font-size: 0.82rem;
  cursor: pointer;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.tool-btn:hover { background: var(--surface-2); color: var(--ink); }
.tool-btn[aria-pressed="true"], .tool-btn.is-on { color: var(--accent); background: var(--accent-soft); }
.tool-btn[aria-pressed="true"] svg { fill: currentColor; }

/* List variant: image on the left. */
@media (min-width: 45rem) {
  .card-list {
    display: grid;
    grid-template-columns: 13rem 1fr;
  }
  .card-list .card-media { aspect-ratio: auto; height: 100%; min-height: 9.5rem; }
  .card-list .card-body { padding: 1.1rem 1.25rem; }
  .card-list .card-title { font-size: 1.1rem; }
}

/* The metric rail — the signature element ------------------------------- */

.rail {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.rail-cell {
  flex: 1 1 auto;
  min-width: 5.2rem;
  padding: 0.55rem 0.7rem 0.55rem 0;
  border-right: 1px solid var(--line);
}
.rail-cell:last-child { border-right: 0; padding-right: 0; }
.rail-cell + .rail-cell { padding-left: 0.7rem; }

.rail dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 580;
  margin-bottom: 0.15rem;
}
.rail dd {
  margin: 0;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  font-weight: 550;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.rail .rail-text { font-family: var(--font); font-weight: 520; }
.rail .rail-good { color: var(--metric); }

.rail-wide {
  margin: 1.5rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.35rem 1rem;
}
.rail-wide .rail-cell { padding: 0.85rem 1rem 0.85rem 0; }
.rail-wide .rail-cell + .rail-cell { padding-left: 1rem; }
.rail-wide dd { font-size: 1.15rem; }

/* Category grids -------------------------------------------------------- */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cat-grid a {
  --cat: var(--accent);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-weight: 540;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.cat-grid a:hover { border-color: var(--cat); transform: translateY(-1px); text-decoration: none; }
.cat-icon { display: grid; place-items: center; color: var(--cat, var(--accent)); }
.cat-count {
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.cat-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.cat-tree a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-weight: 545;
}
.cat-tree a:hover { border-color: var(--accent-line); text-decoration: none; }
.cat-tree .cat-tree { margin: 0.5rem 0 0.75rem 1.5rem; }
.cat-tree .depth-1 a, .cat-tree .cat-tree a { font-weight: 460; font-size: 0.93rem; }
.cat-intro { color: var(--muted); font-size: 0.87rem; margin: 0.35rem 0 0 0.9rem; }

.chips, .hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1.75rem;
}
.chips a, .hero-chips a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.86rem;
  font-weight: 520;
}
.chips a:hover, .hero-chips a:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.chips em { font-style: normal; color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* Toolbar, sort and pagination ------------------------------------------ */

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 0 1.1rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
.result-count { margin: 0; color: var(--muted); font-size: 0.9rem; flex: 1; }
.result-count strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.sort-form select { width: auto; min-width: 11rem; font-size: 0.9rem; }

.view-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.view-toggle .icon-btn { width: 30px; height: 30px; }
.view-toggle .is-active { background: var(--accent-soft); color: var(--accent); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 2.5rem 0;
}
.page-numbers {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-numbers a, .page-numbers .is-current, .page-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.7rem;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.page-numbers a:hover, .page-btn:hover { border-color: var(--accent-line); color: var(--accent); text-decoration: none; }
.page-numbers .is-current { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.page-gap { display: grid; place-items: end; padding: 0 0.2rem; color: var(--muted); }

.load-more {
  display: block;
  margin: 2rem auto;
}
.pagination-sentinel { height: 1px; }

/* Forms ----------------------------------------------------------------- */

.stack { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.35rem; }
.field label { font-size: 0.88rem; font-weight: 560; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1rem; }
.field-full { grid-column: 1 / -1; }
.hint { color: var(--muted); font-size: 0.82rem; margin: 0; }
.req {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  font-weight: 620;
  margin-left: 0.3rem;
}

fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin: 0 0 1.25rem;
  display: grid;
  gap: 1rem;
}
legend { padding: 0 0.5rem; font-weight: 620; font-size: 0.92rem; }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  font-size: 0.9rem;
  cursor: pointer;
}
.check input { margin-top: 0.25rem; accent-color: var(--accent); }
.check em { font-style: normal; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  margin-bottom: 3rem;
}

.strength { display: grid; gap: 0.3rem; }
.strength-bar {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.strength-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--danger);
  transition: width var(--slow) var(--ease), background var(--slow) var(--ease);
}
.strength[data-score="2"] .strength-bar i { background: var(--warn); }
.strength[data-score="3"] .strength-bar i,
.strength[data-score="4"] .strength-bar i { background: var(--metric); }
.strength-text { font-size: 0.8rem; color: var(--muted); }

/* Flashes, notices, empty states ---------------------------------------- */

.flashes { width: min(100% - 2.5rem, var(--wrap)); margin: 1rem auto 0; display: grid; gap: 0.5rem; }
.flash {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: 0.92rem;
  box-shadow: var(--shadow-1);
}
.flash-success { border-color: color-mix(in srgb, var(--metric) 40%, transparent); color: color-mix(in srgb, var(--metric) 88%, var(--ink)); }
.flash-error { border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); }
.flash span { flex: 1; }
.flash-close { background: none; border: 0; color: inherit; cursor: pointer; opacity: 0.6; padding: 0.2rem; }
.flash-close:hover { opacity: 1; }

.empty, .notice-card {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 3.5rem 1.5rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--muted);
}
.empty h2, .notice-card h1 { margin: 0.5rem 0 0; color: var(--ink); }
.empty p, .notice-card p { margin: 0; max-width: 30rem; }
.notice-card { border-style: solid; background: var(--surface); }
.notice-card > svg { color: var(--metric); }
.notice-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; margin-top: 1.25rem !important; }
.error-code {
  font-family: var(--font-num);
  font-size: 3rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.04em;
}

/* Ads ------------------------------------------------------------------- */

.ad-slot { margin: 1.5rem 0; text-align: center; }
.ad-slot:empty { display: none; }
.ad-slot.in-grid { grid-column: 1 / -1; }

/* Cookie notice, back to top, compare tray ------------------------------- */

.cookie {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 60;
  width: min(24rem, calc(100vw - 2rem));
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  font-size: 0.85rem;
  color: var(--ink-2);
}
.cookie p { margin: 0; }

.to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 55;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  box-shadow: var(--shadow-2);
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.to-top:hover { transform: translateY(-2px); color: var(--accent); }

.compare-tray {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 58;
  width: min(46rem, calc(100vw - 2rem));
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  padding: 0.7rem 0.9rem;
}
.compare-tray-inner { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.compare-tray-count { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.compare-tray-items { display: flex; gap: 0.4rem; flex: 1; flex-wrap: wrap; min-width: 0; }
.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.4rem 0.25rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  max-width: 12rem;
}
.compare-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-chip button { background: none; border: 0; cursor: pointer; color: var(--muted); display: grid; padding: 0; }
.compare-chip button:hover { color: var(--danger); }

/* 5. Pages ============================================================== */

/* Hero ------------------------------------------------------------------ */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding: clamp(3rem, 2rem + 6vw, 6rem) 0 clamp(2.5rem, 2rem + 4vw, 4.5rem);
}
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg img, .hero-bg video { width: 100%; height: 100%; object-fit: cover; }
.hero-image .hero-bg::after,
.hero-video .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 55%, transparent), var(--bg));
}

/* Animated mesh: three blurred blobs drifting slowly. No canvas, no JS. */
.mesh {
  position: absolute;
  width: 45vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
}
.mesh-1 { background: var(--accent); top: -18%; left: -8%; animation: drift-1 22s var(--ease) infinite alternate; }
.mesh-2 { background: var(--metric); top: 10%; right: -12%; animation: drift-2 26s var(--ease) infinite alternate; }
.mesh-3 { background: color-mix(in srgb, var(--accent) 50%, var(--warn)); bottom: -30%; left: 35%; animation: drift-3 30s var(--ease) infinite alternate; opacity: 0.32; }
[data-theme="dark"] .mesh { opacity: 0.28; }

@keyframes drift-1 { to { transform: translate3d(12%, 14%, 0) scale(1.15); } }
@keyframes drift-2 { to { transform: translate3d(-14%, 8%, 0) scale(1.1); } }
@keyframes drift-3 { to { transform: translate3d(8%, -12%, 0) scale(1.2); } }

.hero-gradient .hero-bg {
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--accent) 18%, var(--bg)),
    var(--bg) 45%,
    color-mix(in srgb, var(--metric) 14%, var(--bg)));
  background-size: 220% 220%;
  animation: hero-shift 18s var(--ease) infinite alternate;
}
@keyframes hero-shift { to { background-position: 100% 100%; } }

.hero-waves { position: absolute; bottom: 0; left: 0; width: 100%; height: 220px; }
.hero-waves path { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.hero-waves .wave-2 { fill: color-mix(in srgb, var(--metric) 10%, transparent); animation: wave 14s var(--ease) infinite alternate; }
@keyframes wave { to { transform: translateX(-3%); } }

.hero-inner { text-align: center; display: grid; justify-items: center; gap: 1.25rem; }
.hero-title {
  margin: 0;
  font-size: clamp(2rem, 1.2rem + 3.6vw, 3.4rem);
  letter-spacing: -0.03em;
  max-width: 20ch;
}
.hero-sub { margin: 0; color: var(--muted); font-size: clamp(1rem, 0.95rem + 0.4vw, 1.2rem); max-width: 46ch; }

.hero-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: min(100%, 34rem);
  padding: 0.4rem 0.4rem 0.4rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
}
.hero-search input {
  flex: 1;
  border: 0;
  background: none;
  padding: 0.55rem 0.25rem 0.55rem 2rem;
  min-width: 0;
}
.hero-search input:focus { box-shadow: none; }
.hero-search .btn { border-radius: var(--r-pill); }
.hero-search .suggest { border-radius: var(--radius); }

.hero-ctas { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.hero-stat { margin: 0; color: var(--muted); font-size: 0.92rem; }
.hero-stat strong { color: var(--ink); font-variant-numeric: tabular-nums; font-family: var(--font-num); }

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

.cat-header {
  --cat: var(--accent);
  position: relative;
  isolation: isolate;
  padding: 2.5rem 0 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--cat) 8%, transparent), transparent);
}
.cat-header.has-image { padding: 4rem 0 3rem; }
.cat-header-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.cat-header-bg img { width: 100%; height: 100%; object-fit: cover; }
.cat-header-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 60%, transparent), var(--bg));
}
.cat-header h1 { display: flex; align-items: center; gap: 0.6rem; }

.crumbs { margin-bottom: 1rem; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.84rem;
  color: var(--muted);
}
.crumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line-strong); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent); }
.crumbs li:last-child a { color: var(--ink-2); }

/* Listing detail --------------------------------------------------------- */

.listing-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 3rem;
}
.listing-head h1 { margin-bottom: 0.5rem; }
.listing-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.listing-cats a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.83rem;
  color: var(--muted);
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.listing-cats a:hover { color: var(--accent); border-color: var(--accent-line); text-decoration: none; }

.listing-hero {
  margin: 1.5rem 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.listing-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: 0.6rem;
  margin: 1.5rem 0;
}
.gallery-item {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--slow) var(--ease); }
.gallery-item:hover img { transform: scale(1.04); }

.prose { max-width: 42rem; line-height: 1.7; }
.prose h2 { margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }
.prose blockquote {
  margin: 1.5rem 0;
  padding-left: 1rem;
  border-left: 3px solid var(--accent-line);
  color: var(--ink-2);
}
.prose code {
  font-family: var(--font-num);
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.details { margin: 2.5rem 0; }
.detail-group + .detail-group { margin-top: 1.75rem; }
.detail-group h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.detail-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.detail-list > div { background: var(--surface); padding: 0.8rem 1rem; }
.detail-list dt { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.2rem; }
.detail-list dd { margin: 0; font-weight: 540; }
.detail-list dd.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

.listing-note { margin: 2rem 0; }

.contact-card {
  margin: 2.5rem 0;
  padding: 1.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.contact-card > p { color: var(--muted); font-size: 0.9rem; }

/* Sidebar CTA ----------------------------------------------------------- */

.listing-side { position: sticky; top: 5rem; display: grid; gap: 1rem; }
.cta-card {
  padding: 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  display: grid;
  gap: 0.75rem;
}
.cta-price { display: grid; gap: 0.15rem; margin: 0; }
.cta-price-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.cta-price strong {
  font-family: var(--font-num);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cta-host { margin: 0; font-size: 0.78rem; color: var(--muted); text-align: center; }
.cta-disclosure {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
  display: flex;
  gap: 0.35rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}
.cta-tools { display: flex; gap: 0.25rem; justify-content: space-between; }
.sold-note {
  margin: 0;
  padding: 0.6rem 0.75rem;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  font-size: 0.84rem;
  color: var(--ink-2);
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.report summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0;
  list-style: none;
}
.report summary::-webkit-details-marker { display: none; }
.report summary:hover { color: var(--ink); }
.report[open] { padding-bottom: 1rem; }

.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 56;
  background: var(--overlay);
  backdrop-filter: blur(12px) saturate(1.6);
  border-top: 1px solid var(--line-strong);
  padding: 0.65rem 1rem;
  animation: slide-up var(--slow) var(--ease);
}
@keyframes slide-up { from { transform: translateY(100%); } }
.sticky-cta-inner {
  width: min(100% - 1rem, var(--wrap));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.sticky-title { font-weight: 570; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-price { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 570; }
.sticky-cta .btn-cta { width: auto; flex: none; }

/* Search ---------------------------------------------------------------- */

.search-layout {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  margin-bottom: 3rem;
}
.filters {
  position: sticky;
  top: 5rem;
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.filter-group {
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 1rem 0 0;
  margin: 0;
  gap: 0.5rem;
  max-height: 15rem;
  overflow-y: auto;
}
.filter-group legend {
  padding: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.filter-actions { display: grid; gap: 0.5rem; }

/* Compare --------------------------------------------------------------- */

.compare-scroll { overflow-x: auto; margin-bottom: 1.5rem; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 40rem;
}
.compare-table th, .compare-table td {
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.compare-table thead th { background: var(--surface); vertical-align: bottom; }
.compare-table tbody th { background: var(--surface-2); font-size: 0.85rem; font-weight: 560; width: 11rem; }
.compare-table td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.compare-corner { background: var(--surface-2) !important; }
.compare-head { display: grid; gap: 0.5rem; color: var(--ink); font-weight: 600; }
.compare-head img { border-radius: var(--r-sm); width: 100%; max-width: 9rem; }
.dash { color: var(--line-strong); }
.compare-actions { display: flex; gap: 0.6rem; }

/* 6. Utilities and preferences ========================================== */

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.muted { color: var(--muted); }
.spacer { flex: 1; }

@media (max-width: 68rem) {
  .listing-layout, .search-layout { grid-template-columns: 1fr; }
  .listing-side, .filters { position: static; }
  .listing-side { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 56rem) {
  .site-nav, .header-search, .header-submit { display: none; }
  .nav-burger { display: grid; }
  /* Only ever visible below this breakpoint, and only once opened. */
  .mobile-nav:not([hidden]) { display: grid; }
  .header-inner { justify-content: space-between; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .toolbar { gap: 0.5rem; }
  .view-toggle { display: none; }
  .sticky-title { display: none; }
}

@media (max-width: 30rem) {
  .wrap { width: calc(100% - 1.75rem); }
  .rail-cell { min-width: 4.5rem; }
  .cookie { left: 0.5rem; right: 0.5rem; width: auto; }
}

/* Anyone who asks for less motion gets a completely still page: no drifting
   mesh, no CTA animation, no smooth scrolling. The same applies when the
   admin switches animations off site-wide. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
[data-motion="off"] *, [data-motion="off"] *::before, [data-motion="off"] *::after {
  animation: none !important;
}

@media print {
  .site-header, .site-footer, .sticky-cta, .compare-tray, .to-top, .cookie,
  .cta-tools, .report, .ad-slot { display: none !important; }
  body { background: #fff; color: #000; }
  .listing-layout { grid-template-columns: 1fr; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}

/* 8. Feature round ======================================================== */

/* -- Animated site backgrounds (Settings > Design > Site background) ------
   Pure CSS, fixed behind everything, pointer-events off. Big blurred blobs
   moved only with transform, so the compositor does all the work. The global
   reduced-motion rule and data-motion="off" freeze them automatically. */
.site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bg-blob {
  position: absolute;
  width: 44vmax;
  height: 44vmax;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.32;
  will-change: transform;
}
[data-theme="dark"] .bg-blob { opacity: 0.22; }

.site-bg-aurora .bg-blob-1 { background: radial-gradient(circle at 30% 30%, var(--accent), transparent 65%); top: -18vmax; left: -10vmax; animation: bg-drift-1 26s ease-in-out infinite alternate; }
.site-bg-aurora .bg-blob-2 { background: radial-gradient(circle at 60% 40%, var(--metric), transparent 65%); top: 30%; right: -16vmax; animation: bg-drift-2 32s ease-in-out infinite alternate; }
.site-bg-aurora .bg-blob-3 { background: radial-gradient(circle at 50% 50%, #f0a01e, transparent 65%); bottom: -20vmax; left: 22%; animation: bg-drift-3 38s ease-in-out infinite alternate; }
@keyframes bg-drift-1 { to { transform: translate(9vmax, 7vmax) scale(1.15); } }
@keyframes bg-drift-2 { to { transform: translate(-8vmax, -6vmax) scale(0.9); } }
@keyframes bg-drift-3 { to { transform: translate(6vmax, -9vmax) scale(1.1); } }

.site-bg-mesh .bg-blob { animation: none; opacity: 0.22; }
.site-bg-mesh .bg-blob-1 { background: radial-gradient(circle, var(--accent), transparent 62%); top: -14vmax; left: -8vmax; }
.site-bg-mesh .bg-blob-2 { background: radial-gradient(circle, var(--metric), transparent 62%); top: 40%; right: -14vmax; }
.site-bg-mesh .bg-blob-3 { background: radial-gradient(circle, #d94a4a, transparent 62%); bottom: -16vmax; left: 30%; }
[data-theme="dark"] .site-bg-mesh .bg-blob { opacity: 0.14; }

.site-bg-grid { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 44px 44px; opacity: 0.5; }
.site-bg-grid .bg-blob-2, .site-bg-grid .bg-blob-3 { display: none; }
.site-bg-grid .bg-blob-1 { background: radial-gradient(circle, var(--accent), transparent 60%); width: 34vmax; height: 34vmax; opacity: 0.18; top: -6vmax; left: -6vmax; animation: bg-sweep 40s linear infinite; }
@keyframes bg-sweep { 50% { transform: translate(60vw, 40vh); } }

/* -- Sticky promo bar ----------------------------------------------------- */
.promo-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: var(--ink);
  color: var(--bg);
  padding: 0.6rem max(1rem, env(safe-area-inset-left)) calc(0.6rem + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgb(0 0 0 / 0.18);
}
[data-theme="dark"] .promo-bar { background: var(--surface-2); color: var(--ink); border-top: 1px solid var(--line); }
.promo-inner { max-width: 76rem; margin-inline: auto; display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.promo-text { flex: 1 1 16rem; font-size: 0.95rem; font-weight: 550; }
.promo-close { color: inherit; opacity: 0.8; }
.promo-close:hover { opacity: 1; }

/* Everything else pinned to the bottom steps up out of the bar's way. */
body.has-promo .cookie { bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
body.has-promo .to-top { bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
body.has-promo .compare-tray { bottom: calc(4.2rem + env(safe-area-inset-bottom)); }

/* -- Listing ID, view counter --------------------------------------------- */
.listing-id { display: flex; align-items: center; gap: 0.5rem; margin: 0.15rem 0 0; color: var(--muted); font-size: 0.88rem; }
.listing-id .num { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; letter-spacing: 0.01em; }
.tool-btn-inline { padding: 0.1rem 0.45rem; font-size: 0.78rem; }
.cta-views { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.65rem; color: var(--muted); font-size: 0.88rem; }
.cta-views .num { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }

/* -- Buyer due-diligence notice ------------------------------------------- */
.notice-warn {
  display: flex;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid color-mix(in srgb, #f0a01e 45%, var(--line));
  border-left: 3px solid #f0a01e;
  border-radius: var(--r-md);
  background: color-mix(in srgb, #f0a01e 9%, var(--surface));
  font-size: 0.88rem;
  line-height: 1.5;
}
.notice-warn-icon { color: #b97708; flex: 0 0 auto; margin-top: 0.1rem; }
[data-theme="dark"] .notice-warn-icon { color: #f0b95a; }
.notice-warn strong { display: block; margin-bottom: 0.2rem; }
.notice-warn p { margin: 0; color: var(--muted); }

/* -- Share menu ----------------------------------------------------------- */
.share { position: relative; }
.share > summary { list-style: none; cursor: pointer; }
.share > summary::-webkit-details-marker { display: none; }
.share[open] > summary { background: var(--accent-soft); color: var(--accent); border-radius: var(--r-sm); }
.share-menu {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 0;
  z-index: 30;
  min-width: 12.5rem;
  display: grid;
  padding: 0.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
}
.share-menu a, .share-menu button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}
.share-menu a:hover, .share-menu button:hover { background: var(--surface-2); }
.share-menu .icon { color: var(--muted); }

/* -- FAQ accordion -------------------------------------------------------- */
.faq { display: grid; gap: 0.6rem; max-width: 60rem; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-mark { color: var(--muted); transition: transform var(--fast) var(--ease); flex: 0 0 auto; }
.faq-item[open] .faq-mark { transform: rotate(180deg); }
.faq-item[open] summary { border-bottom: 1px solid var(--line); }
.faq-answer { padding: 0.8rem 1rem 1rem; color: var(--muted); font-size: 0.94rem; line-height: 1.6; }
.faq-answer p { margin: 0 0 0.6rem; }
.faq-answer p:last-child { margin-bottom: 0; }

/* -- Full-width newsletter section ---------------------------------------- */
.newsletter-cta {
  margin: 2.5rem 0 1rem;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background:
    radial-gradient(60rem 20rem at 110% -30%, var(--accent-soft), transparent 60%),
    radial-gradient(50rem 18rem at -20% 130%, color-mix(in srgb, var(--metric) 16%, transparent), transparent 60%),
    var(--surface);
  padding: clamp(1.4rem, 4vw, 2.4rem);
}
.newsletter-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.newsletter-cta-copy { flex: 1 1 22rem; }
.newsletter-cta h2 { margin: 0 0 0.35rem; font-size: clamp(1.25rem, 2.6vw, 1.6rem); letter-spacing: -0.01em; }
.newsletter-cta p { margin: 0; color: var(--muted); max-width: 34rem; }
.newsletter-cta .newsletter-form { flex: 1 1 20rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.newsletter-cta .newsletter-form input[type="email"] { flex: 1 1 12rem; min-width: 0; }

/* -- Submission form polish ----------------------------------------------- */
.form-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.5;
}
.form-note .icon { color: var(--accent); margin-top: 0.15rem; flex: 0 0 auto; }
.form-note-text { flex: 1; min-width: 0; }
.opt {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.45rem;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.form-card fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.1rem 1.15rem 1.25rem; margin: 0; }
.form-card fieldset + fieldset { margin-top: 1.1rem; }
.form-card legend { padding: 0 0.45rem; font-weight: 700; font-size: 0.95rem; }
.form-card input[type="file"] { padding: 0.45rem; border: 1px dashed var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); width: 100%; }
.field-narrow { max-width: 16rem; }

/* -- Currency switcher ---------------------------------------------------- */
.currency-switch {
  width: auto;
  padding: 0.35rem 1.7rem 0.35rem 0.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  background-position: calc(100% - 0.85rem) 55%, calc(100% - 0.55rem) 55%;
}

/* -- Category placeholder cards ------------------------------------------- */
.card-fallback-cat {
  --cat: var(--accent);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.45rem;
  width: 100%;
  height: 100%;
  color: #fff;
  background:
    radial-gradient(120% 120% at 15% 10%, color-mix(in srgb, var(--cat) 88%, #fff) 0%, var(--cat) 55%, color-mix(in srgb, var(--cat) 70%, #000) 100%);
}
.card-fallback-cat .icon { opacity: 0.95; }
.card-fallback-cat em { font-style: normal; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.03em; opacity: 0.92; }
.card-host-direct .icon { color: var(--metric); }

/* -- Two-factor code entry ------------------------------------------------ */
.empty-note { margin: 1rem auto 0; max-width: 30rem; text-align: center; color: var(--muted); font-size: 0.92rem; }

.code-input {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.35em;
  font-size: 1.15rem;
  text-align: center;
  max-width: 11rem;
}

/* 9. Recommendations round ================================================ */

/* -- Valuation calculator ------------------------------------------------- */
.valuation-result {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin-top: 0.4rem;
}
.valuation-cell {
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  text-align: center;
}
.valuation-main { border-color: var(--accent); background: var(--accent-soft); }
.valuation-label { font-size: 0.78rem; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.valuation-cell strong { font-size: clamp(1.05rem, 2.6vw, 1.5rem); font-variant-numeric: tabular-nums; }
input[type="range"] { width: 100%; accent-color: var(--accent); }
@media (max-width: 34rem) { .valuation-result { grid-template-columns: 1fr; } }

/* -- Guides --------------------------------------------------------------- */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.guide-card {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.guide-card h2 { margin: 0; font-size: 1.08rem; line-height: 1.35; }
.guide-card p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.guide-meta { color: var(--muted); font-size: 0.85rem; }
.guide-more { margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.guide-more h2 { font-size: 1rem; margin: 0 0 0.5rem; }
.guide-more ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }

/* Long-form article body (guides, CMS pages). */
.prose { font-size: 1.02rem; line-height: 1.72; }
.prose h2 { margin: 1.6em 0 0.5em; font-size: 1.3rem; letter-spacing: -0.01em; }
.prose h3 { margin: 1.3em 0 0.4em; font-size: 1.1rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose li { margin-bottom: 0.35em; }
.prose blockquote { margin: 1.2em 0; padding: 0.6em 1em; border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }

/* -- Testimonials --------------------------------------------------------- */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.testimonial {
  margin: 0;
  display: grid;
  gap: 0.7rem;
  align-content: space-between;
  padding: 1.15rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.testimonial blockquote { margin: 0; font-size: 0.98rem; line-height: 1.55; }
.testimonial figcaption { display: grid; font-size: 0.85rem; }
.testimonial figcaption span { color: var(--muted); }

/* -- Confidential lock box ------------------------------------------------ */
.nda-box {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: var(--r-md);
  background: var(--accent-soft);
}
.nda-title { display: flex; align-items: center; gap: 0.45rem; margin: 0; font-weight: 700; }
.nda-text { margin: 0; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.badge-confidential { background: var(--accent-soft); color: var(--accent); }

/* -- Price drop ----------------------------------------------------------- */
.price-drop {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0 0;
  padding: 0.25rem 0.6rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--metric) 14%, transparent);
  color: var(--metric);
  font-size: 0.82rem;
  font-weight: 650;
}
.price-drop .icon { transform: scaleY(-1); }
.price-drop .muted { font-weight: 500; }
.badge-drop { background: color-mix(in srgb, var(--metric) 16%, transparent); color: var(--metric); }
.badge-drop .icon { transform: scaleY(-1); }

/* -- Seller portal -------------------------------------------------------- */
.seller-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.seller-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.seller-table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.seller-table th, .seller-table td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); }
.seller-table tbody tr:last-child td { border-bottom: 0; }
.seller-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.seller-status { padding: 0.15rem 0.55rem; border-radius: 99px; font-size: 0.78rem; font-weight: 650; background: var(--surface-2); }
.seller-status-published { background: color-mix(in srgb, var(--metric) 15%, transparent); color: var(--metric); }
.seller-status-draft, .seller-status-pending { color: var(--muted); }

/* 10. Undisclosed figures & currency disclaimer =========================== */

.detail-withheld { color: var(--muted); }

/* The "prefer not to disclose" tick under a figure field. */
.check-nd {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
}
.check-nd input { margin: 0; }

/* Currency disclaimer popover beside the switcher. */
.currency-info { position: relative; flex: none; }
.currency-info > summary {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem;
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.currency-info > summary::-webkit-details-marker { display: none; }
.currency-info > summary:hover { color: var(--ink); background: var(--surface-2); }
.currency-info[open] > summary { color: var(--accent); background: var(--accent-soft); }
.currency-note {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 60;
  width: min(22rem, 78vw);
  margin: 0;
  padding: 0.75rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}