/* ==========================================================================
   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; }
/* align-content matters here: a .field in a .field-row stretches to the
   height of the tallest field, and without this its auto rows share out
   the spare height — the control in the shorter field grows taller and
   drops below the one beside it. Pin the rows to the top instead. */
.field { display: grid; gap: 0.35rem; align-content: start; }
.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 ---------------------------------------- */

/* Pinned to the viewport, not the page: submitting the contact form jumps to
   #contact, which used to leave the confirmation scrolled off the top. */
.flashes {
  position: fixed;
  top: 4.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  width: min(100% - 2rem, 32rem);
  display: grid;
  gap: 0.5rem;
}
.flash.is-fading { opacity: 0; transition: opacity 0.6s var(--ease); }
@media (max-width: 40rem) { .flashes { top: 3.9rem; } }
@media print { .flashes { display: none; } }
.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);
}
/* Everything in here is decorative and aria-hidden, so the whole layer is
   inert. Setting this on the container rather than on each child means a new
   background element cannot accidentally become clickable. */
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.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%; } }

/* Absolutely positioned, never interactive, and scaled to the viewport — a
   fixed 220px was a third of a phone screen. */
/* `.hero-bg-waves`, not `.hero-waves`: the SECTION is `hero hero-<style>`, so
   `.hero-waves` means "this hero uses waves". While the SVG wore that name too,
   this rule absolutely positioned the whole hero and the page collapsed —
   which is exactly what "the SVG waves background breaks the layout" was. */
.hero-bg-waves {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: clamp(80px, 13vw, 220px);
  pointer-events: none;
}
/* The background layer clips its own contents, so nothing inside it can
   spill into the page even if a shape is mis-sized. */
.hero-bg { overflow: hidden; }
.hero-bg-waves path { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.hero-bg-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; }

.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); }

/*
 * Running text is capped at a reading measure — roughly 75 characters a line,
 * which is where the eye stops losing its place on the way back. Tables and
 * the metric rail are data, not prose, so they still use the full column; the
 * contrast between the two is what makes the gap beside a paragraph look like
 * a fault rather than a choice. Adjustable from admin for anyone who prefers
 * the column filled.
 */
.prose { max-width: var(--measure, 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) {
  .search-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }

  /*
   * The listing sidebar carries the price and the call to action, so it is
   * the last thing that should go. Below this width it NARROWS rather than
   * collapsing; stacking it at 68rem sent every tablet and small laptop to a
   * single column with a call-to-action stretched the full width of the page.
   */
  .listing-layout { grid-template-columns: minmax(0, 1fr) 16rem; gap: 1.5rem; }
}

@media (max-width: 48rem) {
  /* A phone: now stacking is right, and a full-width button is the point. */
  .listing-layout { grid-template-columns: 1fr; }
  .listing-side { position: static; order: -1; }
}

@media (max-width: 56rem) {
  .site-nav, .header-search, .header-submit { display: none; }
  /* Exactly one light/dark switch at any width. Below the breakpoint the menu
     carries it, so the one in the bar stands down — two of them side by side
     is just a puzzle about which one to press. */
  .header-actions > .theme-toggle { 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; }
  /* The title is the flexible spacer in the sticky bar; hiding it here left
     the price and button bunched against the left edge with the free space
     stranded on the right, so the button takes over as the spacer's job. */
  .sticky-title { display: none; }
  .sticky-cta .btn-cta { margin-inline-start: auto; }
}

@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; }
  /* On a phone the button takes whatever width the price leaves, giving a
     44px-tall target across most of the bar rather than a small tap zone
     floating in empty space. */
  .sticky-cta .btn-cta { flex: 1 1 auto; min-height: 2.75rem; }
  .sticky-price { flex: 0 0 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;
}

/* 11. Pricing, plans and checkout ========================================= */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.1rem;
  align-items: start;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.4rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.plan-card.is-highlighted {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), var(--shadow-2);
}
.plan-badge {
  position: absolute;
  top: -0.7rem;
  left: 1.2rem;
  padding: 0.15rem 0.6rem;
  border-radius: 99px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.plan-card h2 { margin: 0; font-size: 1.15rem; }
.plan-price { margin: 0; display: flex; align-items: baseline; gap: 0.4rem; }
.plan-price strong { font-size: 2rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan-tagline { margin: 0; color: var(--muted); font-size: 0.92rem; }
.plan-features { list-style: none; margin: 0.2rem 0 0.6rem; padding: 0; display: grid; gap: 0.45rem; font-size: 0.92rem; }
.plan-features li { display: flex; gap: 0.5rem; align-items: flex-start; }
.plan-features .icon { color: var(--metric); flex: 0 0 auto; margin-top: 0.15rem; }
.plan-card .btn { margin-top: auto; justify-content: center; }

.addon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.addon-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.addon-list .muted { display: block; font-size: 0.86rem; }
.addon-price { font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Plan picker inside the submission form */
.plan-picker { display: grid; gap: 0.6rem; }
.plan-option {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
}
.plan-option:hover { border-color: var(--line-strong); }
.plan-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.plan-option input { margin-top: 0.2rem; flex: 0 0 auto; }
.plan-option-body { display: grid; gap: 0.15rem; }
.plan-option-price { font-weight: 650; font-variant-numeric: tabular-nums; }
.plan-addons-head { margin: 0.7rem 0 0; font-weight: 650; font-size: 0.9rem; }

/* Checkout */
.order-summary {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: 1.2rem;
}
.order-summary h2 { margin: 0 0 0.6rem; font-size: 1.02rem; }
.order-summary ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.order-summary li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.94rem; }
.order-total {
  display: flex;
  justify-content: space-between;
  margin: 0.8rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  font-size: 1.05rem;
}
.pay-methods { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.pay-methods .btn-cta { width: 100%; justify-content: center; }
.pay-methods .opt { margin-left: 0.5rem; }

/* 12. Enquiries, invoices and account closure ============================= */

.enquiry-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.enquiry {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.enquiry-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; font-size: 0.92rem; }
.enquiry-head time { color: var(--muted); font-size: 0.82rem; margin-left: auto; }
.enquiry-listing { margin: 0.15rem 0 0.5rem; color: var(--muted); font-size: 0.82rem; }
.enquiry-offer {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--metric) 14%, transparent);
  color: var(--metric);
  font-size: 0.86rem;
}
.enquiry-body { margin: 0; font-size: 0.94rem; line-height: 1.55; }

.billing-details { margin-bottom: 1rem; }
.billing-details > summary { cursor: pointer; font-size: 0.92rem; padding: 0.5rem 0; }

/* Invoice sheet — deliberately plain, because it gets printed. */
.invoice-sheet {
  max-width: 46rem;
  margin: 0 auto 3rem;
  padding: 2.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.invoice-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.invoice-head h1 { margin: 0; font-size: 1.6rem; }
.invoice-number { margin: 0.2rem 0 0; color: var(--muted); font-variant-numeric: tabular-nums; }
.invoice-paid, .invoice-due { padding: 0.3rem 0.75rem; border-radius: 99px; font-weight: 650; font-size: 0.88rem; }
.invoice-paid { background: color-mix(in srgb, var(--metric) 15%, transparent); color: var(--metric); }
.invoice-due { background: color-mix(in srgb, #f0a01e 20%, transparent); color: #b97708; }
.invoice-parties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 1.2rem;
  margin: 2rem 0 1.5rem;
}
.invoice-parties h2 { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 0.35rem; }
.invoice-parties p { margin: 0; font-size: 0.92rem; line-height: 1.55; }
.invoice-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.invoice-table th, .invoice-table td { padding: 0.65rem 0.2rem; text-align: left; border-bottom: 1px solid var(--line); }
.invoice-table thead th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.invoice-table .num, .invoice-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.invoice-table tfoot th, .invoice-table tfoot td { border-bottom: 0; padding-top: 0.9rem; font-size: 1.05rem; }
.invoice-notes { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.invoice-notes h2 { font-size: 0.95rem; color: var(--ink); margin: 0 0 0.4rem; }

/* 13. Anonymous sellers and link-less listings ============================ */

.cta-exclusive {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.55rem 0 0;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 650;
}
.enquiry-replies {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0.6rem 0 0 0.9rem;
  border-top: 1px solid var(--line);
  border-left: 2px solid var(--accent-soft);
  display: grid;
  gap: 0.5rem;
  font-size: 0.9rem;
}
.enquiry-replies .muted { display: block; font-size: 0.76rem; }
.enquiry-reply { margin-top: 0.7rem; }
.enquiry-reply > summary { display: inline-flex; cursor: pointer; list-style: none; }
.enquiry-reply > summary::-webkit-details-marker { display: none; }
.enquiry-reply[open] > summary { color: var(--accent); }

/* Confirmation shown inside the contact card itself. */
.form-sent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--metric) 45%, var(--line));
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--metric) 10%, var(--surface));
  font-size: 0.92rem;
  line-height: 1.5;
}
.form-sent .icon { color: var(--metric); flex: 0 0 auto; margin-top: 0.1rem; }

/* Chosen plan summary on the plans-first submission form. */
.plan-chosen {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--accent-soft);
}
.plan-chosen > div { display: grid; gap: 0.1rem; margin-right: auto; }
.plan-chosen .muted { font-size: 0.86rem; }

/* 14. Pricing page, flow steps and running total =========================== */

.pricing-head { text-align: center; max-width: 42rem; margin-inline: auto; }
.pricing-head .lede { margin-inline: auto; }

/* Plan cards: the highlighted one lifts, and every button lines up along the
   bottom however uneven the feature lists are. */
.plan-grid { align-items: stretch; }
.plan-card { gap: 0.9rem; }
.plan-card.is-highlighted { transform: translateY(-6px); }
.plan-card-head { display: grid; gap: 0.3rem; }
.plan-card-head h2 { font-size: 1.1rem; letter-spacing: -0.01em; }
.plan-price { display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap; margin: 0; }
.plan-price strong { font-size: 2.3rem; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan-period { color: var(--muted); font-size: 0.86rem; }
.plan-features { border-top: 1px solid var(--line); padding-top: 0.9rem; }
.plan-features li { align-items: flex-start; }
.plan-cta { margin-top: auto; justify-content: center; }
@media (max-width: 60rem) { .plan-card.is-highlighted { transform: none; } }

/* Comparison table */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.plan-compare { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 34rem; }
.plan-compare th, .plan-compare td { padding: 0.7rem 0.9rem; text-align: left; border-bottom: 1px solid var(--line); }
.plan-compare thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.plan-compare thead th.is-highlighted { color: var(--accent); }
.plan-compare tbody th { font-weight: 550; }
.plan-compare td { text-align: center; }
.plan-compare td.num { font-variant-numeric: tabular-nums; }
.plan-compare tbody tr:last-child th, .plan-compare tbody tr:last-child td { border-bottom: 0; }
.plan-compare .has-yes .icon { color: var(--metric); }
.plan-compare .has-no { color: var(--muted); }

/* Add-ons as cards */
.addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.addon-card {
  display: grid;
  gap: 0.35rem;
  align-content: start;
  padding: 1.1rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.addon-card h3 { margin: 0; font-size: 1rem; }
.addon-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.addon-card .addon-price { color: var(--ink); font-weight: 700; font-size: 1.05rem; margin-top: 0.2rem; }

.pricing-footnote { max-width: 44rem; color: var(--muted); font-size: 0.94rem; line-height: 1.65; }
.pricing-footnote p { margin: 0 0 0.8rem; }
.pricing-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 2.5rem;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
}
.pricing-trust .icon { color: var(--metric); }

/* Flow progress */
.flow-steps {
  display: flex;
  gap: 0.4rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}
.flow-steps li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 600;
}
.flow-step-mark {
  display: grid;
  place-content: center;
  width: 1.4rem;
  height: 1.4rem;
  flex: none;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 0.76rem;
}
.flow-steps li.is-current { border-color: var(--accent); color: var(--ink); background: var(--surface); }
.flow-steps li.is-current .flow-step-mark { background: var(--accent); color: #fff; }
.flow-steps li.is-done { color: var(--ink); }
.flow-steps li.is-done .flow-step-mark { background: var(--metric); color: #fff; }
@media (max-width: 34rem) {
  .flow-steps li { padding: 0.45rem 0.5rem; }
  .flow-step-label { display: none; }
  .flow-steps li.is-current .flow-step-label { display: inline; }
}

/* Running total on the submission form */
.plan-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.8rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-size: 1.02rem;
}
.plan-total strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.plan-total.is-free strong { font-size: 1rem; color: var(--metric); }

/* 15. Valuation calculator ================================================ */

.valuation-adjusters {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.1rem 1.15rem 1.25rem;
  margin: 0;
  display: grid;
  gap: 0.7rem;
}
.valuation-adjusters legend { padding: 0 0.45rem; font-weight: 700; font-size: 0.95rem; }

/* Slider: a number you can read without hunting for it, and honest endpoints. */
.range-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.range-value {
  padding: 0.1rem 0.55rem;
  border-radius: 99px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.range-scale {
  display: flex;
  justify-content: space-between;
  margin-top: -0.15rem;
  color: var(--muted);
  font-size: 0.76rem;
}
.link-btn {
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font: inherit;
  font-size: 0.82rem;
  text-decoration: underline;
  cursor: pointer;
}

/* What moved the multiple, and in which direction. */
.valuation-why { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.valuation-why li {
  padding: 0.15rem 0.55rem;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.valuation-why .is-up { background: color-mix(in srgb, var(--metric) 14%, transparent); color: var(--metric); }
.valuation-why .is-down { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }

.valuation-basis { text-align: center; }

/* The native stepper sits awkwardly inside the rounded control, and arrow
   keys still step the value without it. */
#valuation-form input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
#valuation-form input[type="number"]::-webkit-outer-spin-button,
#valuation-form input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Staff-only diagnostic on public pages: visible to a signed-in admin,
   never rendered for a visitor. Deliberately unlike the site's own notices
   so it can't be mistaken for something the public sees. */
.admin-note {
  display: flex;
  gap: 0.65rem;
  margin: 0 0 1.2rem;
  padding: 0.9rem 1rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 0.88rem;
  line-height: 1.55;
}
.admin-note .icon { flex: 0 0 auto; margin-top: 0.15rem; color: #b97708; }
.admin-note p { margin: 0.25rem 0 0; }
.admin-note a { text-decoration: underline; }

/* A figure the seller withheld: same slot, same alignment, visibly not a
   number — so a card reads as "deliberately private", not "missing data". */
.rail-withheld {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-style: italic;
  align-self: center;
}

/* 16. Pricing table polish and motion ===================================== */

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

.plan-card {
  position: relative;
  /* No overflow:hidden here — the "Most popular" badge deliberately sits
     above the card's top edge, and clipping it cut the label in half. The
     accent hairline is rounded to the card instead. */
  transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease),
              border-color var(--fast) var(--ease);
}
/* The accent hairline that used to sit along the top of the recommended plan
   is gone on purpose. An absolutely positioned child is placed against the
   PADDING box, so its corners were a whole border-width wider than the card's
   own rounded corners and the line poked out at the top as a stray blue mark.
   The highlighted card already has an accent border, an accent ring, a lift
   and a badge — the hairline said nothing the others did not. */
/* The badge sits above the hairline and the card border — and is pinned to
   its own width. Twice now a later rule has turned it into a flex item and
   stretched it across the card; width:max-content and align-self mean that
   even if it happens again the label keeps its shape. */
.plan-badge {
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 2.4rem);
  align-self: flex-start;
  inset-inline-end: auto;
}
.plan-card .plan-price strong { transition: color var(--fast) var(--ease); }

/* Lift is opt-in: the class is added by JavaScript only when motion is
   permitted. :focus-within gives keyboard users the same affordance. */
.motion-lift .plan-card:hover,
.motion-lift .plan-card:focus-within,
.motion-lift .addon-card:hover,
.motion-lift .addon-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: var(--line-strong);
}
.motion-lift .plan-card.is-highlighted:hover,
.motion-lift .plan-card.is-highlighted:focus-within {
  transform: translateY(-10px);
  border-color: var(--accent);
}
.motion-lift .plan-card:hover .plan-price strong { color: var(--accent); }
.addon-card { transition: transform var(--slow) var(--ease), box-shadow var(--slow) var(--ease), border-color var(--fast) var(--ease); }

/* --- Entrance ----------------------------------------------------------- */

/* Scoped to .motion-reveal, which JavaScript adds only after checking the
   reduced-motion preference — so this can never hide content from someone
   without JavaScript, and never from a screen reader. */
.motion-reveal .plan-card,
.motion-reveal .addon-card {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  /* Staggered by position, capped so a long row never crawls in. */
  transition-delay: calc(min(var(--i, 0), 5) * 70ms);
}
.motion-reveal .plan-card.is-in,
.motion-reveal .addon-card.is-in { opacity: 1; transform: none; }

/* --- Comparison table --------------------------------------------------- */

.plan-compare tbody tr { transition: background var(--fast) var(--ease); }
.plan-compare tbody tr:hover { background: var(--surface-2); }
/* The row label stays put while the columns scroll on a narrow screen. */
.plan-compare tbody th[scope="row"],
.plan-compare thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
}
.plan-compare tbody tr:hover th[scope="row"] { background: var(--surface-2); }
.plan-compare thead th.is-highlighted { position: relative; }
.plan-compare thead th.is-highlighted::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--accent);
}

/* --- Motion off --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .motion-reveal .plan-card,
  .motion-reveal .addon-card { opacity: 1; transform: none; transition: none; }
  .motion-lift .plan-card:hover,
  .motion-lift .plan-card:focus-within,
  .motion-lift .plan-card.is-highlighted:hover,
  .motion-lift .addon-card:hover,
  .motion-lift .addon-card:focus-within { transform: none; }
}
@media print {
  .motion-reveal .plan-card,
  .motion-reveal .addon-card { opacity: 1; transform: none; }
}

/* Install: choosing what the site is for. */
.profile-choice { display: grid; gap: 0.6rem; border: 0; padding: 0; margin: 0 0 0.4rem; }
.profile-choice legend { font-weight: 700; font-size: 0.95rem; padding: 0; }
.profile-option {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
}
.profile-option:hover { border-color: var(--accent); }
.profile-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.profile-option input { margin-top: 0.25rem; flex: 0 0 auto; }
.profile-option-body { display: grid; gap: 0.15rem; font-size: 0.9rem; }
.profile-option-body strong { font-size: 0.98rem; }
.profile-option-body .muted { font-size: 0.82rem; }

/* Whole-card click, and the glow option ----------------------------------- */

/* The overlay belongs to the button, so the card has exactly one link. Text
   inside stays selectable above it because the overlay sits behind content. */
.plan-cta.stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
}
/* The badge is excluded on purpose: it is absolutely positioned and overhangs
   the card, and this rule's `position: relative` turned it into a flex item
   that stretched across the whole card. */
.plan-card > *:not(.plan-cta):not(.plan-badge) { position: relative; z-index: 1; }
.plan-card:has(.plan-cta.stretched) { cursor: pointer; }

/* Glow is a transition on hover, never a loop — a pulsing card would fall
   foul of "pause, stop, hide" and drain a battery for no reason. */
.motion-glow .plan-card,
.motion-glow .addon-card { transition: box-shadow var(--slow) var(--ease), border-color var(--fast) var(--ease); }
.motion-glow .plan-card:hover,
.motion-glow .plan-card:focus-within,
.motion-glow .addon-card:hover,
.motion-glow .addon-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 30px color-mix(in srgb, var(--accent) 28%, transparent);
}
.motion-glow .plan-card.is-highlighted:hover,
.motion-glow .plan-card.is-highlighted:focus-within {
  box-shadow: 0 0 0 2px var(--accent), 0 12px 40px color-mix(in srgb, var(--accent) 38%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .motion-glow .plan-card,
  .motion-glow .addon-card { transition: none; }
}

/* Seller portal: sign-in alternatives and plan choice --------------------- */

.seller-or {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 1.4rem 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.seller-or::before, .seller-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Choosing a plan from the portal reuses the pricing cards, but each one is
   a label wrapping a radio rather than a link. */
label.plan-card { cursor: pointer; }
label.plan-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-choose { display: flex; align-items: center; gap: 0.55rem; font-size: 1.05rem; }
.plan-choose input { flex: 0 0 auto; }

/* The optional account password on the submission form: a narrow, centred
   block so it reads as an aside rather than another required question.
   The selector has to out-rank `.form-card fieldset { margin: 0 }` further up
   — being later in the file is not enough against higher specificity, which
   is why this sat stubbornly left-aligned. */
.form-card fieldset.account-password,
.account-password {
  max-width: 26rem;
  margin: 0 auto;
  padding: 1.1rem 1.2rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  display: grid;
  gap: 0.8rem;
  text-align: left;
}
.account-password legend { padding: 0 0.4rem; font-weight: 650; font-size: 0.95rem; }
.account-password .hint { margin-bottom: 0.2rem; }
input.is-match { border-color: var(--metric); }
input.is-mismatch { border-color: var(--danger); }

/* "Check your spam folder" — shown wherever an email has just gone out. */
.spam-notice { display: inline-flex; align-items: flex-start; gap: 0.4rem; margin-top: 0.7rem; }
.spam-notice .icon { flex: 0 0 auto; margin-top: 0.15rem; }

/* Cascading location filter in the search sidebar. */
.location-filter { display: grid; gap: 0.7rem; }
.location-filter select:disabled { opacity: 0.55; cursor: not-allowed; }

/* Header account menu ----------------------------------------------------- */

.header-signin,
.account-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.account-menu > summary::-webkit-details-marker { display: none; }
.header-signin:hover,
.account-menu > summary:hover { border-color: var(--line-strong); }
.account-menu { position: relative; }
.account-panel {
  position: absolute;
  top: calc(100% + 0.45rem);
  right: 0;
  z-index: 60;
  min-width: 15rem;
  display: grid;
  gap: 0.1rem;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}
.account-who {
  margin: 0 0 0.35rem;
  padding: 0.35rem 0.55rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}
.account-who strong { color: var(--ink); word-break: break-all; }
.account-panel a,
.account-panel button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.55rem;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}
.account-panel a:hover,
.account-panel button:hover { background: var(--surface-2); }
.account-panel form { margin: 0; }
@media (max-width: 60rem) { .account-name { display: none; } }

/* Room for the "Most popular" badge, which overhangs the top of its card and
   was landing on whatever text sat above the grid. */
.plan-grid { padding-top: 0.75rem; }

/* The placement note above the plan grid: icon and text on one line, centred
   as a block rather than as loose inline content. */
.placement-note {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.45rem;
  max-width: 34rem;
  margin: 0 auto 1.4rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}
.placement-note .icon { flex: 0 0 auto; margin-top: 0.15rem; }

/* Whereabouts asked once, as one question, rather than as loose fields
   scattered through the grid. */
.location-group { margin-top: 1.1rem; }
.location-group > .hint { margin-bottom: 0.6rem; }

/* Mobile menu: the extras that the narrow header bar cannot show ---------- */

.mobile-nav .mobile-signout { margin: 0; }
.mobile-nav .mobile-signout button,
.mobile-nav .mobile-theme {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  height: auto;
  padding: 0.7rem 0.9rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.mobile-nav .mobile-signout button:hover,
.mobile-nav .mobile-theme:hover { background: var(--surface-2); }
.mobile-nav .mobile-theme { border-top: 1px solid var(--line); }
.tool-label { font-size: inherit; }
@media (min-width: 56.01rem) { .mobile-theme { display: none; } }

/* Filters on Browse: a sidebar on a desktop, a disclosure on a phone. */
.filter-shell > summary {
  display: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.filter-shell > summary::-webkit-details-marker { display: none; }
.filter-shell > summary .pill { font-style: normal; }

@media (max-width: 62rem) {
  /* Listings first, filters one tap away. The element's own behaviour hides
     the contents when it is closed; the summary is the only thing that needs
     revealing here. */
  .filter-shell > summary { display: flex; }
}

/* Site background: waves ---------------------------------------------------
   The container is already fixed, clipped and non-interactive; the swell is a
   slow horizontal drift, which is cheap to composite and stops entirely for
   anyone who has asked for reduced motion. */

.site-waves {
  position: absolute;
  bottom: 0;
  left: -5%;
  width: 110%;
  height: clamp(110px, 18vh, 260px);
}
.site-waves path { fill: color-mix(in srgb, var(--accent) 10%, transparent); }
.site-waves .site-wave-2 { fill: color-mix(in srgb, var(--metric) 9%, transparent); }
.site-bg-waves .site-waves path { animation: site-swell 18s ease-in-out infinite alternate; }
.site-bg-waves .site-waves .site-wave-2 { animation-duration: 26s; animation-direction: alternate-reverse; }
@keyframes site-swell { to { transform: translateX(-4%); } }

@media (prefers-reduced-motion: reduce) {
  .site-bg-waves .site-waves path { animation: none; }
}
/* Switching animations off site-wide stills it too, not just the hero. */
[data-motion="off"] .site-bg-waves .site-waves path { animation: none; }

/* Contact page details block. */
.contact-details {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}
.contact-details p { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0; font-size: 0.92rem; }
.contact-details .icon { flex: 0 0 auto; margin-top: 0.15rem; color: var(--muted); }

/* Hero background video ---------------------------------------------------
   An iframe has no object-fit, so it is sized to overflow the hero in both
   directions and centred — the same result as `cover` on an image. */

.hero-embed { position: absolute; inset: 0; overflow: hidden; }
/* NOT `.hero-video`: the section already carries `hero-<style>`, so that class
   means "this hero uses a video" — reusing it for the element absolutely
   positioned the entire hero and every section below it slid up underneath. */
.hero-embed-frame,
.hero-bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;          /* 16:9 of the width */
  min-width: 177.78vh;      /* …and tall enough when the hero is tall */
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}
.hero-bg-video { object-fit: cover; }

/* An icon inside a button sits on the text baseline rather than floating
   above it; .btn is already a flex row, so the gap comes from there. */
.btn-icon { display: inline-flex; align-items: center; }
.btn-icon svg { display: block; }


/* The listing's picture at the top of the sidebar card.
   The wrapper owns the shape and the clipping, so whatever <picture> emits
   inside it — img, source, a placeholder colour — cannot overflow the card. */
.cta-thumb {
  overflow: hidden;
  width: 100%;
  margin-bottom: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  aspect-ratio: 16 / 10;
}
.cta-thumb img,
.cta-thumb picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 48rem) {
  /*
   * Stacked on a phone the card is full width, so a 16:10 picture would take
   * most of the first screen before the price is even visible. A wider crop
   * keeps it a banner rather than the whole view.
   */
  .cta-thumb { aspect-ratio: 21 / 8; max-height: 11rem; }
}

/* Live password rules. State is carried by the tick and the text, not by
   colour alone — colour is the reinforcement, never the message. */
.strength-rules { display: grid; gap: 0.28rem; margin: 0.55rem 0 0; padding: 0; list-style: none; }
.strength-rule {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--muted);
}
.strength-tick {
  display: inline-grid;
  place-content: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  font-size: 0.7rem;
  line-height: 1;
}
.strength-tick::before { content: "·"; }
.strength-rule.is-met { color: var(--ink); }
.strength-rule.is-met .strength-tick {
  border-color: var(--metric);
  background: color-mix(in srgb, var(--metric) 16%, transparent);
  color: var(--metric);
}
.strength-rule.is-met .strength-tick::before { content: "✓"; }