/* ============================================
   Flair — Design System
   Light, premium, AU-focused
   ============================================ */

:root {
  /* Colour palette */
  --bg: #FFFFFF;
  --bg-soft: #F2F1EA;
  --surface: #FFFFFF;
  --surface-2: #F7F7F2;
  --ink: #0B1A14;
  --ink-soft: #2C3E36;
  --muted: #6B7B72;
  --line: #E6E5DD;

  --primary: #0F3D2E;          /* deep forest green */
  --primary-soft: #E6F0EA;
  --accent: #4ADE80;            /* bright green CTA */
  --accent-hover: #3BC76E;
  --lavender: #E8E4F5;
  --mint: #DCF2E5;
  --cream: #FBF4E6;
  --rose: #F8E4DC;

  --warning: #F59E0B;
  --danger: #DC2626;
  --success: #16A34A;

  /* Typography */
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Spacing & shape */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --shadow-sm: 0 1px 2px rgba(11, 26, 20, 0.04), 0 1px 3px rgba(11, 26, 20, 0.06);
  --shadow: 0 4px 14px rgba(11, 26, 20, 0.06), 0 2px 4px rgba(11, 26, 20, 0.04);
  --shadow-lg: 0 12px 40px rgba(11, 26, 20, 0.10), 0 4px 12px rgba(11, 26, 20, 0.06);
  --shadow-glow: 0 0 0 6px rgba(74, 222, 128, 0.12);

  --container: 1240px;
}

/* ============================================
   Reset & base
   ============================================ */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg, video { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 0.4em;
  color: var(--ink);
}

h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 1.85rem); }
h4 { font-size: 1.2rem; }
p { margin: 0 0 1em; color: var(--ink-soft); }
small { font-size: 0.85rem; color: var(--muted); }

/* ============================================
   Layout
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: 64px 0; }      /* uniform top + bottom across every section */
.section-sm { padding: 48px 0; }
.section-tinted { background: #FFFFFF; }
.h2-no-wrap { white-space: nowrap; }
@media (max-width: 720px) { .h2-no-wrap { white-space: normal; } }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--lavender);
  color: var(--primary);
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.eyebrow.mint { background: var(--mint); }
.eyebrow.cream { background: var(--cream); color: #6F4E1A; }

/* ============================================
   Header / nav
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 245, 0.85);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.brand-mark {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  background: var(--primary);
  color: #fff;
  border-radius: 9px;
}
.brand-mark svg { width: 18px; height: 18px; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.nav-links a:hover { color: var(--primary); }

.nav-actions { display: flex; align-items: center; gap: 12px; }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: 100px;
  transition: background 0.15s;
  white-space: nowrap;
}
.header-phone:hover { background: rgba(15, 61, 46, 0.06); }
.header-phone svg { flex-shrink: 0; }
.header-phone .phone-label { font-size: 0.72rem; color: var(--ink-2); display: block; line-height: 1; margin-bottom: 2px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.header-phone .phone-num { display: block; line-height: 1.1; }

/* Hamburger toggle — hidden on desktop, shown on mobile by setupMobileNav */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex-shrink: 0;
}
.nav-toggle:hover { background: rgba(15, 61, 46, 0.06); border-color: var(--primary-soft); }
.nav-toggle .nav-icon-close { display: none; }
.site-header.nav-open .nav-toggle .nav-icon-burger { display: none; }
.site-header.nav-open .nav-toggle .nav-icon-close { display: block; }

/* Desktop layout — panel just lays out as before (links + actions inline) */
.nav-panel { display: contents; }

@media (max-width: 1080px) {
  .header-phone .phone-label { display: none; }
}

/* MOBILE: stop laying out as ribbon; show hamburger; collapse panel into a dropdown. */
@media (max-width: 880px) {
  .nav { padding: 12px 0; }
  /* Add extra horizontal inset on mobile so logo + hamburger don't
     hug the viewport edges (base .container padding is 24px). */
  .site-header > .container { padding-left: 32px; padding-right: 32px; }
  .brand { font-size: 1.15rem; gap: 7px; letter-spacing: -0.015em; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-mark svg { width: 15px; height: 15px; }

  .nav-toggle { display: inline-flex; }

  /* Panel becomes a dropdown anchored under the header */
  .nav-panel {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(11, 26, 20, 0.06);
    padding: 16px 20px 22px;
    flex-direction: column;
    gap: 4px;
    z-index: 49;
  }
  .site-header.nav-open .nav-panel { display: flex; }

  /* Nav links: stack vertically, full-width tap targets */
  .nav-links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0 0 8px;
    padding: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 14px 4px;
    font-size: 1.05rem;
    color: var(--ink);
    font-weight: 500;
  }
  .nav-links a[aria-current="page"] { color: var(--primary); font-weight: 600; }

  /* Action cluster: phone + sign-in + list-a-domain stacked, full-width buttons */
  .nav-actions {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 12px;
  }
  .nav-actions .btn,
  .nav-actions .btn-ghost,
  .nav-actions .btn-primary {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 18px;
    font-size: 0.95rem;
  }
  .header-phone {
    padding: 12px 14px;
    font-size: 1rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    justify-content: center;
  }
  .header-phone .phone-label { display: block; font-size: 0.7rem; }
}

@media (max-width: 380px) {
  .brand { font-size: 1.05rem; }
}

/* ============================================
   Buttons
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 100px;
  border: 1px solid transparent;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: #0a2d20; }

.btn-accent {
  background: var(--accent);
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(74, 222, 128, 0.35);
}
.btn-accent:hover { background: var(--accent-hover); }

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

.btn-link {
  background: transparent;
  padding: 6px 0;
  color: var(--primary);
  border-radius: 0;
}
.btn-link:hover { transform: none; opacity: 0.7; }

.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.btn-lg { padding: 16px 32px; font-size: 1.05rem; }

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  padding: 12px 0 14px;
  overflow: hidden;
  background: #FAFAF5;
}
.hero .eyebrow { margin-bottom: 10px; }
.hero h1 { margin-bottom: 22px; }

.hero::before {
  content: "";
  position: absolute;
  top: -200px; right: -200px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.12), transparent 60%);
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
/* Grid items default to min-width: auto (= min-content) which lets a
   wide nowrap child like .hero-featured-strip blow past the viewport.
   Force min-width: 0 so the strip respects the column and uses its
   own overflow-x: auto for horizontal scroll. */
.hero-grid > * { min-width: 0; }
.hero-grid .hero-lede { margin-left: auto; margin-right: auto; }
.hero-grid .ai-search { text-align: left; }

.hero h1 {
  font-weight: 400;
}
.hero h1 em {
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(120deg, var(--primary), #1F8F5C);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lede {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 0 22px;
}

/* AI search box — the cornerstone */
.ai-search {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 8px;
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
}
.ai-search:focus-within {
  border-color: var(--primary);
  box-shadow: var(--shadow-glow), var(--shadow-lg);
}

.ai-search-row {
  display: flex;
  align-items: flex-start;       /* aligns icon + button to top of multi-line textarea */
  gap: 10px;
  padding: 14px 12px 14px 22px;
}

.ai-search-icon {
  width: 26px; height: 26px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 14px;              /* visually centred against first line of text */
}

.ai-search input,
.ai-search textarea {
  flex: 1 1 auto;
  min-width: 0;                  /* allow flex item to shrink properly */
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  color: var(--ink);
  padding: 14px 0;
  line-height: 1.45;
  resize: none;
  min-height: 84px;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow: hidden;
  display: block;
  box-sizing: border-box;
}
.ai-search input::placeholder,
.ai-search textarea::placeholder { color: var(--muted); }

.ai-search .btn-accent {
  padding: 14px 24px;
  font-size: 0.95rem;
  align-self: stretch;           /* button matches the textarea height */
}

.ai-search-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--surface-2);
  align-items: center;
  justify-content: flex-end; /* push chip group right of "Try:" */
}
.ai-search-hint > span:first-child {
  font-size: 0.82rem;
  color: var(--muted);
  margin-right: auto; /* anchors "Try:" on the left */
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;          /* more expansive */
  min-width: 150px;           /* uniform, larger hit target */
  border-radius: 100px;
  background: var(--bg-soft);
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.chip:hover { background: var(--mint); color: var(--primary); border-color: var(--accent); }
@media (max-width: 600px) {
  .chip { min-width: 0; flex: 1 1 calc(50% - 10px); }
}

/* Featured strip — single row on desktop, wraps to multiple rows on mobile
   (so 6+ pills don't get clipped or pushed off-screen on phones). */
.hero-featured-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 16px;
  margin: 10px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.hero-featured-strip::-webkit-scrollbar { display: none; }
.hero-featured-strip .strip-label,
.hero-featured-strip a { flex-shrink: 0; white-space: nowrap; }

/* Mobile: 'Featured' label sits as its own centred row above a 3×2
   grid of pills (so total = label row + 2 pill rows). */
@media (max-width: 880px) {
  .hero-featured-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 10px;
    overflow-x: visible;
    font-size: 0.82rem;
  }
  .hero-featured-strip .strip-label {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 2px;
  }
  .hero-featured-strip a { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 380px) {
  .hero-featured-strip { font-size: 0.75rem; gap: 4px 8px; }
}
.hero-featured-strip .strip-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
}
.hero-featured-strip a {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hero-featured-strip a:hover {
  color: var(--primary);
  border-bottom-color: var(--accent);
}

/* Hero stats row */
/* ===== Stats strip (own narrow section) ===== */
.stats-strip {
  padding: 36px 0;
  background: var(--primary);             /* deep forest green */
  color: #fff;
}
.stats-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 600;
  color: var(--accent);                   /* mint — pops against the dark green */
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat-item span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);       /* white at 78% — readable on dark, less shouty than the numbers */
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
@media (max-width: 600px) {
  .stats-strip-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .stats-strip { padding: 22px 0; }
}

/* ===== Mobile hero — keep everything inside the viewport ===== */
@media (max-width: 600px) {
  .hero { padding: 12px 0 16px; }
  .hero h1 { font-size: clamp(2rem, 10vw, 2.6rem); line-height: 1.05; }
  .hero-lede { font-size: 1rem; margin-bottom: 20px; }

  /* Stack icon + textarea + button so the button doesn't squeeze the input */
  .ai-search { padding: 6px; }
  .ai-search-row {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 14px;
  }
  .ai-search-icon { display: none; }
  .ai-search textarea { min-height: 108px; padding: 8px 0; }
  .ai-search .btn-accent { padding: 12px 18px; width: 100%; }

  /* Featured-domain pill row should wrap and not push past edge */
  .hero-featured-strip { gap: 8px 14px; font-size: 0.88rem; }

  /* 2x2 stats so they all fit */
  .hero-stats { gap: 18px 28px; margin-top: 18px; }
  .hero-stat { flex: 1 1 calc(50% - 28px); text-align: center; }
  .hero-stat strong { font-size: 1.3rem; }
}

/* Hero visual: featured-domain showcase */
.hero-showcase {
  position: relative;
  display: grid;
  gap: 14px;
}

.featured-domain {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: all 0.25s ease;
  cursor: pointer;
}
.featured-domain:hover {
  transform: translateX(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow);
}
.featured-domain .name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink);
}
.featured-domain .name .tld { color: var(--accent-hover); font-weight: 600; }
.featured-domain .meta { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; color: var(--muted); margin-top: 2px; }
.featured-domain .price { font-family: var(--font-sans); font-weight: 700; color: var(--primary); font-size: 1.05rem; }

/* Alternating green / white pattern */
.hero-showcase .featured-domain:nth-child(odd)  { background: var(--mint); border-color: transparent; }
.hero-showcase .featured-domain:nth-child(even) { background: #fff; border-color: var(--line); }

.hero-showcase-label {
  position: absolute;
  top: -10px;
  right: 14px;
  background: var(--primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  z-index: 1;
}

/* ============================================
   Hero testimonial strip — single quote above trust bar
   ============================================ */
.hero-testimonial {
  padding: 18px 0 22px;
  background: #FAFAF5;
  margin-top: 0;
}
.hero-testimonial blockquote { font-size: 0.98rem; }
.hero-testimonial figure {
  margin: 0 auto;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}
.hero-testimonial .stars {
  display: inline-flex;
  gap: 0.22em;
  color: #F5B324;
  font-size: 1.25rem;
  line-height: 1;
  padding: 2px 4px 0;
  overflow: visible;
}
.hero-testimonial .stars > span { display: inline-block; line-height: 1; }
.hero-testimonial .quote-headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.hero-testimonial blockquote {
  margin: 2px 0 4px;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--ink);
}
.hero-testimonial figcaption {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--muted);
}
.hero-testimonial .reviewer-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--surface-2);
}
.hero-testimonial figcaption em {
  font-style: normal;
  color: var(--primary);
}

/* ============================================
   Trust bar — rotating B&W logos
   ============================================ */
.trust-bar {
  background: #FAFAF5;
  padding: 14px 0 38px;
  overflow: hidden;
  margin-top: 0;
}
.trust-row {
  display: flex;
  align-items: center;
  gap: 28px;
}
.trust-head {
  flex: 0 0 auto;
  text-align: left;
}
.trust-label {
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.74rem;
  white-space: nowrap;
}
.trust-marquee {
  position: relative;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
}
@media (max-width: 720px) {
  .trust-row { flex-direction: column; align-items: center; gap: 8px; }
  .trust-head { text-align: center; width: 100%; }
  .trust-marquee { width: 100%; }
}
.trust-marquee-track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;        /* one single row */
  width: max-content;
  /* Very slow scroll. Track contains the list duplicated, so 50% = one full set */
  animation: trustScroll 180s linear infinite;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}
.trust-marquee:hover .trust-marquee-track { animation-play-state: paused; }
@keyframes trustScroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .trust-marquee-track { animation: none; }
}
.trust-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 170px;             /* fixed cell width = perfectly even loop, no jump */
  flex: 0 0 170px;
  opacity: 0.65;
  filter: grayscale(1) contrast(0.9);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.trust-logo:hover { opacity: 1; filter: grayscale(1) contrast(1); }
.trust-logo img {
  max-height: 30px;
  max-width: 130px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.trust-logo .logo-fallback { line-height: 1; }
.trust-logo .logo-fallback {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .trust-marquee-track { animation: none; }
}

/* ============================================
   Section header
   ============================================ */
/* Uniform editorial rhythm: 16px between eyebrow → h2 → p,
   then 40px from p to the section content below. */
.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}
.section-head .eyebrow { margin-bottom: 16px; }
.section-head h2 { margin: 0 0 16px; }
.section-head p { margin: 0; font-size: 1.1rem; color: var(--muted); }

/* ============================================
   Categories
   ============================================ */
.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { .categories-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px)  {
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  /* Show only first 4 categories on mobile */
  .categories-grid .category-card[data-mobile-hidden="true"] { display: none; }
}
@media (max-width: 460px)  { .categories-grid { grid-template-columns: 1fr; } }

/* Hide overflow categories until the toggle button is clicked. */
.categories-grid[data-collapsed="true"] .category-card[data-extra="true"] { display: none; }
.categories-cta { display: flex; justify-content: center; margin-top: 22px; }

.category-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 18px 16px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-decoration: none;
  color: inherit;
  min-height: 168px;
  overflow: hidden;
}
.category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 61, 46, 0) 60%, rgba(15, 61, 46, 0.03) 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.category-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px -18px rgba(15, 61, 46, 0.28);
}
.category-card:hover::before { opacity: 1; }

/* Tone-coloured icon badge — uses the existing brand accent palette */
.category-card .cat-icon {
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  color: var(--primary);
  background: var(--mint);
  flex: 0 0 auto;
}
.category-card[data-tone="lavender"] .cat-icon { background: var(--lavender); }
.category-card[data-tone="cream"]    .cat-icon { background: var(--cream); }
.category-card[data-tone="mint"]     .cat-icon { background: var(--mint); }
.category-card .cat-icon svg { width: 22px; height: 22px; }

.category-card .cat-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.category-card h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.25;
}
.category-card .cat-count {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.category-card .cat-count span {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 500;
  margin-left: 4px;
}

.category-card .cat-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
}
.category-card .cat-price {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-weight: 500;
}
.category-card .cat-arrow {
  color: var(--primary);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-weight: 600;
}
.category-card:hover .cat-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Dashboard inline industry editor */
.industry-select {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  padding: 6px 26px 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  max-width: 180px;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2364737B' stroke-width='1.5'><path d='M3 5 L6 8 L9 5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
  transition: border-color 0.15s ease;
}
.industry-select:hover, .industry-select:focus {
  border-color: var(--primary);
  outline: none;
}

/* ============================================
   Domain card grid
   ============================================ */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .domain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .domain-grid { grid-template-columns: 1fr; } }

.domain-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: all 0.22s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.domain-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  opacity: 0;
  transition: opacity 0.2s;
}
.domain-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.domain-card:hover::before { opacity: 1; }

.domain-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.domain-tag {
  font-size: 0.72rem;
  padding: 4px 10px;
  background: var(--bg-soft);
  border-radius: 100px;
  color: var(--ink-soft);
  font-weight: 500;
}
.domain-tag.featured { background: var(--mint); color: var(--primary); }
.domain-tag.new { background: var(--lavender); color: #5040A8; }

.domain-card .name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);    /* most ≤22-char domains fit; longer get ellipsis */
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;                     /* safety net for the longest names */
}
.domain-card .name .tld { color: var(--accent-hover); font-weight: 500; }

.domain-card .desc {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 8px 0 24px;
}

.domain-card .footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--surface-2);
}
.domain-card .price-block { display: flex; flex-direction: column; }
.domain-card .price-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.domain-card .price { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--primary); line-height: 1.1; }
.domain-card .price-lto { margin-top: 4px; font-size: 0.78rem; color: var(--accent-hover); font-weight: 500; }
/* Detail page LTO line — sits inside .purchase-card right under .price-large. */
.purchase-card .price-lto { margin: 6px 0 18px; font-size: 0.92rem; color: var(--accent-hover); font-weight: 500; }

/* ============================================
   How it works
   ============================================ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 980px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .steps-grid { grid-template-columns: 1fr; } }
/* 5-card modifier — used on the homepage 'Our services' section so all
   five cards (Buy / Sell / Acquire / Appraise / Name) fit in a single
   row on desktop. Falls back to 3 cols on tablet (3+2), 2 on small
   tablet, 1 on mobile. */
.steps-grid-5 { grid-template-columns: repeat(5, 1fr); gap: 18px; }
@media (max-width: 1100px) { .steps-grid-5 { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (max-width: 760px)  { .steps-grid-5 { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 480px)  { .steps-grid-5 { grid-template-columns: 1fr; } }

.step-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
}
.step-num {
  position: absolute;
  top: 20px; right: 24px;
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 400;
  color: var(--primary-soft);
  line-height: 1;
  letter-spacing: -0.04em;
}
.step-icon {
  width: 50px; height: 50px;
  background: var(--primary);
  color: var(--accent);
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.step-card h4 { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 600; margin-bottom: 8px; }
.step-card p { font-size: 0.92rem; margin: 0; }

/* When the step-card is itself a link (Our Services section), make the
   whole tile clickable with a subtle hover lift matching domain-card. */
a.step-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
a.step-card-link:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ============================================
   Sell CTA section
   ============================================ */
.sell-cta {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 72px 64px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.sell-cta::before {
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.18), transparent 60%);
}
.sell-cta h2 { color: #fff; margin-bottom: 16px; }
.sell-cta h2 em { font-style: italic; color: var(--accent); }
.sell-cta p { color: rgba(255, 255, 255, 0.78); font-size: 1.08rem; margin-bottom: 28px; }

.valuation-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  padding: 28px;
  backdrop-filter: blur(8px);
  position: relative;
  z-index: 1;
}
.valuation-card label {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.valuation-card .input-row {
  display: flex;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  padding: 6px;
}
.valuation-card input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 1.02rem;
}
.valuation-card input::placeholder { color: rgba(255, 255, 255, 0.5); }
.valuation-card .perks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
}
.valuation-card .perks span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.3;
}
.valuation-card .perks span::before { content: "✓"; color: var(--accent); font-weight: 700; }

/* Refined left-column pitch (sell CTA) */
.sell-pitch h2 { margin-top: 14px; line-height: 1.18; }
.sell-pitch h2 em { font-style: italic; color: var(--accent); }
.sell-pitch > p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  margin: 16px 0 22px;
  max-width: 46ch;
}
.sell-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.sell-bullets li {
  position: relative;
  padding-left: 28px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}
.sell-bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 6px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(74, 222, 128, 0.22);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ADE80' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}
.sell-bullets li strong { color: #fff; font-weight: 600; }

/* Multi-field appraisal form on the dark glass card */
.valuation-card-multi .vc-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: 0;
  text-transform: none;
}
.valuation-card-multi .vc-sub {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0 0 16px;
}
.valuation-card-multi .vc-fields {
  display: grid;
  gap: 8px;
}
.valuation-card-multi .vc-fields input {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: #fff;
  box-sizing: border-box;
  transition: border-color .15s ease, background .15s ease;
}
.valuation-card-multi .vc-fields input::placeholder { color: rgba(255, 255, 255, 0.5); }
.valuation-card-multi .vc-fields input:focus {
  outline: 0;
  border-color: rgba(74, 222, 128, 0.5);
  background: rgba(255, 255, 255, 0.12);
}
.valuation-card-multi .vc-status {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 10px;
  min-height: 1em;
}

@media (max-width: 880px) {
  .sell-cta { grid-template-columns: 1fr; padding: 48px 32px; }
  .sell-pitch > p { max-width: none; }
}

/* ============================================
   Testimonials
   ============================================ */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 980px) { .testimonial-grid { grid-template-columns: 1fr; } }

.testimonial-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.testimonial-card .quote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 24px;
  font-weight: 400;
}
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--primary);
  font-weight: 700;
  display: grid;
  place-items: center;
}
.testimonial-author .name { font-weight: 600; font-size: 0.92rem; }
.testimonial-author .role { font-size: 0.82rem; color: var(--muted); }

/* ============================================
   FAQ accordion
   ============================================ */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 1.6rem;
  color: var(--primary);
  font-weight: 300;
  transition: transform 0.2s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item .answer { padding: 0 0 24px; color: var(--ink-soft); font-size: 1rem; line-height: 1.65; }

/* ============================================
   Footer
   ============================================ */
.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.7);
  padding: 72px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 56px;
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

.footer-grid h5 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  margin: 0 0 18px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a { font-size: 0.92rem; color: rgba(255, 255, 255, 0.65); }
.footer-grid a:hover { color: #fff; }

.footer-brand { max-width: 280px; }
.footer-brand .brand { color: #fff; margin-bottom: 14px; }
.footer-brand p { color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-categories {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 28px;
}
.footer-categories h5 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 14px;
}
.footer-categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px 18px;
}
.footer-categories-grid a {
  display: block;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
  padding: 4px 0;
}
.footer-categories-grid a:hover { color: #fff; }
@media (max-width: 880px) { .footer-categories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .footer-categories-grid { grid-template-columns: 1fr; } }

/* ============================================
   Search results page
   ============================================ */
.search-page {
  padding: 32px 0 80px;
}
.search-bar-sticky {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 6px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 32px;
}

.ai-summary {
  background: linear-gradient(135deg, var(--primary-soft), #fff);
  border: 1px solid var(--primary-soft);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin-bottom: 36px;
  display: flex;
  gap: 20px;
}
.ai-summary-icon {
  width: 40px; height: 40px;
  background: var(--primary);
  color: var(--accent);
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ai-summary h3 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  margin-bottom: 10px;
}
.ai-summary p { color: var(--ink); font-size: 1rem; margin: 0 0 12px; }
.ai-summary p:last-child { margin: 0; }
.ai-summary .reasoning {
  font-size: 0.86rem;
  color: var(--ink-soft);
  font-style: italic;
}

.search-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
}
@media (max-width: 880px) { .search-layout { grid-template-columns: 1fr; } }

.filters {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  height: fit-content;
  position: sticky;
  top: 96px;
  /* Cap the height so taller filter sets (Price + TLD + Length + 30+
     industries + Clear button) stay reachable on shorter viewports —
     without this the sidebar's bottom rows are hidden below the fold
     and impossible to click. */
  max-height: calc(100vh - 96px - 24px);
  overflow-y: auto;
  /* Tighter custom scrollbar so the chrome doesn't dominate. */
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.filters::-webkit-scrollbar { width: 8px; }
.filters::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.filters::-webkit-scrollbar-track { background: transparent; }

/* ===== Mobile filters toggle =====
   Filters take ~600px of vertical space — on mobile that pushes search
   results entirely below the fold. Collapse by default; reveal on tap. */
.filters-toggle { display: none; }   /* hidden on desktop */

@media (max-width: 880px) {
  .filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 10px;
    margin-bottom: 16px;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
    width: 100%;
    justify-content: center;
    transition: border-color .15s ease, background .15s ease;
  }
  .filters-toggle:hover { border-color: var(--primary-soft); }
  .filters-toggle .filters-toggle-count {
    display: inline-grid;
    place-items: center;
    min-width: 22px; height: 22px;
    padding: 0 6px;
    background: var(--accent);
    color: var(--primary);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
  }
  .filters-toggle .filters-toggle-chev {
    margin-left: auto;
    transition: transform .2s ease;
  }
  .search-layout.filters-open .filters-toggle .filters-toggle-chev {
    transform: rotate(180deg);
  }

  /* Collapse the filters panel on mobile by default; reveal when the
     parent layout has .filters-open. Drop sticky positioning so it
     sits naturally above the results when expanded. */
  .filters {
    display: none;
    position: static;
    top: auto;
    margin-bottom: 16px;
  }
  .search-layout.filters-open .filters { display: block; }
}
.filter-group { margin-bottom: 24px; }
.filter-group h5 { font-size: 0.82rem; text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); margin: 0 0 12px; }
.filter-option { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.9rem; color: var(--ink-soft); cursor: pointer; }
.filter-option input { accent-color: var(--primary); }
.filter-option .filter-count { color: var(--muted); font-size: 0.8rem; margin-left: auto; }
/* Industry filter has 30+ items — keep it scrollable so the sidebar stays manageable. */
#industryFilter { max-height: 360px; overflow-y: auto; padding-right: 6px; }

.search-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.search-results-header .count { color: var(--muted); font-size: 0.92rem; }

select.sort {
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 600px) { .results-grid { grid-template-columns: 1fr; } }

/* ============================================
   Domain detail page
   ============================================ */
.detail-page { padding: 48px 0 80px; }
.breadcrumb { font-size: 0.85rem; color: var(--muted); margin-bottom: 24px; }
.breadcrumb a:hover { color: var(--primary); }

.detail-hero {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  align-items: center;
}
@media (max-width: 880px) { .detail-hero { grid-template-columns: 1fr; padding: 32px 24px; } }

.detail-hero .domain-display {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 18px;
  word-break: break-all;
}
.detail-hero .domain-display .tld { color: var(--accent-hover); }

.detail-tags { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.detail-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px 0 0; border-top: 1px solid var(--surface-2); }
.detail-meta-item small { display: block; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; color: var(--muted); margin-bottom: 4px; font-size: 0.72rem; }
.detail-meta-item strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); font-weight: 500; }

.purchase-card {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 32px;
}
.purchase-card .price-tag {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
}
.purchase-card .price-large {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 4px 0 24px;
  color: #fff;
}
.purchase-card .btn { width: 100%; margin-bottom: 8px; }
.purchase-card .secure { font-size: 0.78rem; color: rgba(255,255,255,0.65); margin-top: 16px; text-align: center; }
.purchase-card .secure::before { content: "🔒  "; }

/* ============================================
   Dashboard
   ============================================ */
.dashboard-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}
@media (max-width: 880px) { .dashboard-shell { grid-template-columns: 1fr; } }

.dash-sidebar {
  background: var(--ink);
  color: #fff;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dash-sidebar .brand { color: #fff; padding: 0 12px 24px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 16px; }
.dash-sidebar nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,0.65);
  font-size: 0.92rem;
  font-weight: 500;
  transition: all 0.15s;
}
.dash-sidebar nav a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.dash-sidebar nav a.active { background: var(--accent); color: var(--ink); font-weight: 700; }
.dash-sidebar nav .label { text-transform: uppercase; font-size: 0.7rem; color: rgba(255,255,255,0.4); padding: 16px 12px 8px; letter-spacing: 0.06em; font-weight: 700; }

.dash-main { padding: 32px 40px; background: var(--bg); }
@media (max-width: 600px) { .dash-main { padding: 24px 20px; } }

.dash-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
.dash-header h1 { font-size: 2rem; margin: 0; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 880px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.stat-card .label { font-size: 0.78rem; text-transform: uppercase; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; }
.stat-card .value { font-family: var(--font-display); font-size: 2rem; font-weight: 500; margin: 6px 0 4px; }
.stat-card .delta { font-size: 0.82rem; font-weight: 600; color: var(--success); }
.stat-card .delta.down { color: var(--danger); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--surface-2);
}
.panel-head h3 { margin: 0; font-family: var(--font-sans); font-size: 1.1rem; font-weight: 600; }

table.domains-table {
  width: 100%;
  border-collapse: collapse;
}
.domains-table th {
  text-align: left;
  padding: 12px 24px;
  font-size: 0.72rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.domains-table td {
  padding: 16px 24px;
  border-bottom: 1px solid var(--surface-2);
  font-size: 0.92rem;
  vertical-align: middle;
}
.domains-table tr:last-child td { border-bottom: 0; }
.domains-table tr:hover td { background: var(--bg); }

.domain-name-cell { display: flex; flex-direction: column; }
.domain-name-cell .name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; color: var(--ink); }
.domain-name-cell .name .tld { color: var(--accent-hover); }
.domain-name-cell .added { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.status-pill.live { background: var(--mint); color: var(--success); }
.status-pill.live::before { background: var(--success); }
.status-pill.draft { background: var(--bg-soft); color: var(--muted); }
.status-pill.draft::before { background: var(--muted); }
.status-pill.sold { background: var(--lavender); color: #5040A8; }
.status-pill.sold::before { background: #5040A8; }
.status-pill.offer { background: var(--cream); color: #B45309; }
.status-pill.offer::before { background: var(--warning); }

/* Listing type pill — sits in the inventory table next to status. */
.type-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.76rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.type-pill.buy_now    { background: rgba(45, 180, 142, 0.10); color: var(--success, #2DB48E); border-color: rgba(45, 180, 142, 0.25); }
.type-pill.make_offer { background: rgba(180, 83, 9, 0.08);   color: #B45309;                 border-color: rgba(180, 83, 9, 0.20); }

.row-actions { display: flex; gap: 8px; }
.icon-btn {
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  color: var(--ink-soft);
  transition: all 0.15s;
}
.icon-btn:hover { background: var(--mint); border-color: var(--accent); color: var(--primary); }

/* Add domain form */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 28px;
}
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .full { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  outline: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(15, 61, 46, 0.08);
}
.field textarea { min-height: 100px; resize: vertical; }
.field .help { font-size: 0.78rem; color: var(--muted); }
.field label .help-inline { font-size: 0.74rem; color: var(--muted); font-weight: 400; margin-left: 4px; }

/* AI valuation widget in dashboard */
.ai-valuation-suggest {
  background: linear-gradient(135deg, var(--mint), var(--surface));
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.ai-valuation-suggest strong { color: var(--primary); font-family: var(--font-display); font-size: 1.2rem; }
.ai-valuation-suggest small { color: var(--ink-soft); }

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--ink);
  color: #fff;
  padding: 14px 20px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.25s ease;
  z-index: 100;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.show::before { content: "✓"; color: var(--accent); font-weight: 700; }

/* ============================================
   Sell page (sell.html)
   ============================================ */

/* Why-sell value cards */
.value-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
}
.value-card .value-icon {
  width: 44px; height: 44px;
  background: rgba(74, 222, 128, 0.18);
  color: var(--primary);
  border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.value-card .value-icon svg { width: 22px; height: 22px; }
.value-card h4 { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; margin: 0 0 8px; }
.value-card p { font-size: 0.92rem; color: var(--ink-2); margin: 0; line-height: 1.55; }
@media (max-width: 980px) { .value-props { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .value-props { grid-template-columns: 1fr !important; } }

/* "What you need to know" terms grid */
.terms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 28px;
}
@media (max-width: 980px) { .terms-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .terms-grid { grid-template-columns: 1fr; } }
.term-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
}
.term-card .term-num {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 10px;
}
.term-card h4 { font-family: var(--font-sans); font-size: 1.02rem; font-weight: 600; margin: 0 0 8px; }
.term-card p { font-size: 0.9rem; color: var(--ink-2); margin: 0; line-height: 1.55; }

/* How-it-works numbered steps */
.how-steps {
  list-style: none;
  padding: 0;
  margin: 36px auto 0;
  max-width: 760px;
  display: grid;
  gap: 16px;
}
.how-steps li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 22px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
}
.how-steps .step-num {
  position: static;
  width: 48px; height: 48px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}
.how-steps .step-body h4 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; margin: 0 0 6px; }
.how-steps .step-body p { font-size: 0.95rem; color: var(--ink-2); margin: 0; line-height: 1.55; }
@media (max-width: 600px) {
  .how-steps li { grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 20px; }
  .how-steps .step-num { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* Comparison table */
.compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  min-width: 760px;
  font-size: 0.92rem;
}
.compare-table thead th {
  background: var(--surface);
  text-align: left;
  padding: 16px 14px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.compare-table tbody th {
  text-align: left;
  padding: 14px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  background: #FAFAF5;
  border-bottom: 1px solid var(--line);
}
.compare-table td {
  padding: 14px;
  vertical-align: top;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  line-height: 1.45;
}
.compare-table tr:last-child td,
.compare-table tr:last-child th { border-bottom: 0; }
.compare-table td.yes { color: var(--primary); font-weight: 600; }
.compare-table td.yes::before { content: "✓ "; color: var(--accent); font-weight: 700; }
.compare-table td.no  { color: #c0392b; }
.compare-table td.no::before  { content: "✗ "; }
.compare-table td.meh { color: var(--ink-2); }
.compare-table td.meh::before { content: "~ "; color: var(--ink-2); }

/* Listing form */
.listing-form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-top: 32px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.04);
}
.listing-form .lf-row { margin-bottom: 16px; }
.listing-form label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.listing-form .lf-optional { font-weight: 400; color: var(--ink-2); font-size: 0.82rem; }
.listing-form input,
.listing-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.listing-form textarea { resize: vertical; min-height: 56px; line-height: 1.5; font-family: var(--font-mono, ui-monospace, "SF Mono", Consolas, monospace); font-size: 0.9rem; }
.listing-form input:focus,
.listing-form textarea:focus {
  outline: 0;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(46, 92, 75, 0.12);
}
.listing-form small { display: block; margin-top: 6px; color: var(--ink-2); font-size: 0.82rem; }
.listing-form .lf-status { font-size: 0.9rem; color: var(--ink-2); margin-top: 12px; min-height: 1.2em; text-align: center; }
.lf-terms {
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.88rem;
}
.lf-terms summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; }
.lf-terms summary::-webkit-details-marker { display: none; }
.lf-terms summary::after { content: "▾"; float: right; color: var(--ink-2); transition: transform .2s ease; }
.lf-terms[open] summary::after { transform: rotate(180deg); }
.lf-terms ol { margin: 14px 0 0 18px; padding: 0; color: var(--ink-2); line-height: 1.55; }
.lf-terms li { margin-bottom: 8px; }
.lf-terms strong { color: var(--ink); }

/* FAQ block (sell.html) — shared styling complement to existing .faq-item */
.faq { display: grid; gap: 8px; }
@media (max-width: 600px) {
  .listing-form { padding: 24px 20px; }
}

/* ============================================
   About page (about.html)
   ============================================ */

/* Hero with side graphic */
.about-hero { padding-top: 56px; padding-bottom: 32px; }
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: center;
}
.about-hero h1 em { font-style: italic; color: var(--primary); }
.about-hero-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 36px;
  display: grid; place-items: center;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  margin-left: auto;
}
.about-hero-card svg { width: 100%; height: auto; }
@media (max-width: 880px) {
  .about-hero-grid { grid-template-columns: 1fr; }
  .about-hero-card { max-width: 320px; margin: 0 auto; padding: 28px; }
}

/* Story long-form */
.story-prose { margin-top: 24px; }
.story-prose p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.story-prose strong { color: var(--ink); font-weight: 600; }

/* How-we-work three columns */
.how-we-work {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 36px;
}
.how-col {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
}
.how-col h4 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--primary);
}
.how-col ol {
  margin: 0;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.6;
}
.how-col li { margin-bottom: 10px; }
@media (max-width: 880px) { .how-we-work { grid-template-columns: 1fr; } }

/* Founders grid */
.founders-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 36px;
}
.founder-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.founder-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.02em;
}
.founder-avatar-cliff { background: linear-gradient(135deg, #2E5C4B 0%, #4A8F6E 100%); }
.founder-avatar-kiara { background: linear-gradient(135deg, #C29CC1 0%, #8A6296 100%); }
.founder-avatar-team  { background: linear-gradient(135deg, #D4B98A 0%, #B49560 100%); font-size: 1.8rem; }
.founder-body h4 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 4px;
}
.founder-role {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin-bottom: 12px;
}
.founder-body p { font-size: 0.93rem; color: var(--ink-2); line-height: 1.6; margin: 0 0 14px; }
.founder-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}
.founder-link:hover { color: var(--primary-soft); }
@media (max-width: 880px) { .founders-grid { grid-template-columns: 1fr; } }

/* Trust band — 4-column proof row */
.trust-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.trust-item h5 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  font-weight: 700;
  margin: 0 0 8px;
}
.trust-item p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.55; margin: 0; }
@media (max-width: 880px) { .trust-band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust-band { grid-template-columns: 1fr; } }

/* ============================================
   How-it-works page (how-it-works.html)
   ============================================ */

/* Visual 5-step flow diagram */
.flow-diagram {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr) auto) 1fr;
  /* simpler: just a flex row that wraps. */
  display: flex;
  gap: 0;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  padding: 28px 0;
}
.flow-node {
  flex: 0 0 auto;
  width: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.flow-node-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--primary-soft);
  color: var(--primary);
  display: grid; place-items: center;
  box-shadow: 0 2px 14px rgba(46, 92, 75, 0.08);
}
.flow-node-final .flow-node-circle {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.flow-node-label { display: block; }
.flow-step-num {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.flow-node-label strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.flow-arrow {
  flex: 0 0 60px;
  display: grid; place-items: center;
  color: var(--primary-soft);
  align-self: center;
  margin-top: 28px; /* center on circle */
}
.flow-arrow svg { width: 60px; height: auto; }
@media (max-width: 980px) {
  .flow-arrow { display: none; }
  .flow-node { width: 45%; }
}
@media (max-width: 560px) {
  .flow-node { width: 100%; padding: 16px 0; }
  .flow-diagram { gap: 4px; }
}

/* Rich variant — used on the homepage 'How buying works' section.
   The base .flow-diagram (used on /how-it-works) keeps tight 168px
   nodes for a glanceable summary; .flow-diagram-rich widens nodes
   and adds a description paragraph beneath each step. */
.flow-diagram-rich .flow-node { width: 220px; gap: 14px; }
.flow-diagram-rich .flow-node-label strong { font-size: 1rem; margin-bottom: 6px; }
.flow-node-desc {
  font-family: var(--font-sans);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 6px 0 0;
}
@media (max-width: 980px) {
  .flow-diagram-rich .flow-node { width: 46%; }
}
@media (max-width: 560px) {
  .flow-diagram-rich .flow-node { width: 100%; max-width: 360px; }
}

/* Detailed numbered steps (vertical) */
.flow-steps-detail {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 16px;
}
.flow-steps-detail > li {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.flow-steps-detail .step-num {
  position: static;
  width: 48px; height: 48px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
}
.flow-steps-detail .step-body h3 {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}
.flow-steps-detail .step-body p {
  font-size: 0.97rem;
  color: var(--ink-2);
  line-height: 1.65;
  margin: 0 0 12px;
}
.flow-steps-detail .step-body ul {
  margin: 0 0 12px;
  padding-left: 20px;
  color: var(--ink-2);
  font-size: 0.95rem;
  line-height: 1.6;
}
.flow-steps-detail .step-body li { margin-bottom: 8px; }
.flow-steps-detail .step-body strong { color: var(--ink); }
.flow-steps-detail .step-body em { font-style: italic; color: var(--primary); }
@media (max-width: 600px) {
  .flow-steps-detail > li { grid-template-columns: 44px 1fr; gap: 16px; padding: 22px 20px; }
  .flow-steps-detail .step-num { width: 40px; height: 40px; font-size: 1.1rem; }
}

/* Timeline grid */
.timeline-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 36px;
}
.timeline-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 18px;
}
.timeline-card .timeline-time {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  background: rgba(74, 222, 128, 0.16);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.timeline-card h4 { font-family: var(--font-sans); font-size: 0.98rem; font-weight: 600; margin: 0 0 6px; }
.timeline-card p { font-size: 0.88rem; color: var(--ink-2); line-height: 1.55; margin: 0; }
@media (max-width: 980px) { .timeline-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .timeline-grid { grid-template-columns: 1fr; } }

/* ============================================
   Blog (blog/*.html)
   ============================================ */

/* Article wrapper — caps at a comfortable reading width */
.blog-article > .container { max-width: 760px; padding-top: 28px; padding-bottom: 56px; }

/* Breadcrumbs */
.blog-crumbs {
  font-size: 0.85rem;
  color: var(--ink-2);
  margin-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.blog-crumbs a { color: var(--ink-2); }
.blog-crumbs a:hover { color: var(--primary); }
.blog-crumbs span[aria-hidden] { color: var(--line); }
.blog-crumbs .current { color: var(--ink); font-weight: 500; }

/* Article header */
.article-head { margin: 0 0 36px; }
.article-head h1 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1.18;
  margin: 14px 0 18px;
  letter-spacing: -0.01em;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0;
}
.article-meta a { color: var(--ink-2); border-bottom: 1px dotted var(--line); }
.article-meta a:hover { color: var(--primary); }
.article-meta span[aria-hidden] { color: var(--line); }

/* Lede paragraphs — slightly larger to set the article tone */
.article-lede p {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 18px;
}

/* Table of contents */
.article-toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  margin: 36px 0 48px;
}
.article-toc h2 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.article-toc ol {
  margin: 0;
  padding-left: 22px;
  list-style: decimal;
}
.article-toc li { margin-bottom: 6px; }
.article-toc a {
  color: var(--ink);
  font-size: 0.97rem;
  font-weight: 500;
}
.article-toc a:hover { color: var(--primary); text-decoration: underline; }

/* Article body — long-form prose */
.article-body { font-size: 1.05rem; line-height: 1.78; color: var(--ink-2); }
.article-body h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 56px 0 18px;
  scroll-margin-top: 80px;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
  font-family: var(--font-sans);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin: 32px 0 12px;
}
.article-body p { margin: 0 0 18px; }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body em { font-style: italic; }
.article-body a {
  color: var(--primary);
  border-bottom: 1px solid rgba(46, 92, 75, 0.25);
  transition: border-color .15s ease, color .15s ease;
}
.article-body a:hover { color: var(--primary-soft); border-bottom-color: var(--primary); }
.article-body ul {
  padding-left: 22px;
  margin: 0 0 22px;
}
.article-body ul li { margin-bottom: 8px; padding-left: 4px; }
.article-body ul li::marker { color: var(--primary); }
.article-body code {
  background: rgba(46, 92, 75, 0.08);
  color: var(--primary);
  padding: 2px 6px;
  border-radius: 5px;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.92em;
}
.article-divider {
  margin: 48px 0 36px;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Closing CTA cluster */
.article-cta {
  margin: 48px 0 0;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Related articles block */
.article-related { margin-top: 48px; }
.article-related h2 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.related-empty { color: var(--ink-2); font-size: 0.95rem; margin: 0; }
.related-empty a { color: var(--primary); border-bottom: 1px solid rgba(46, 92, 75, 0.25); }

/* Blog index list */
.blog-index-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 18px;
}
.blog-index-item { margin: 0; }
.blog-index-link {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.blog-index-link:hover {
  border-color: var(--primary-soft);
  box-shadow: 0 8px 28px rgba(46, 92, 75, 0.08);
  transform: translateY(-2px);
}
.blog-index-eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--primary);
  margin-bottom: 10px;
}
.blog-index-link h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--ink);
}
.blog-index-link p {
  color: var(--ink-2);
  margin: 0 0 14px;
  line-height: 1.6;
  font-size: 0.97rem;
}
.blog-index-cta {
  display: inline-block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--primary);
}
.blog-index-link:hover .blog-index-cta { color: var(--primary-soft); }

@media (max-width: 600px) {
  .article-toc { padding: 20px 22px; }
  .article-cta { padding: 24px 20px; flex-direction: column; }
  .article-cta .btn { width: 100%; text-align: center; justify-content: center; }
  .blog-index-link { padding: 22px 22px; }
}

/* Article hero image (blog/*.html) */
.article-hero-image {
  margin: 0 0 24px;
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
.article-hero-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* In-article FAQ — tighter wrapper than the standalone .faq-list,
   but reuses the .faq-item summary/answer styling. */
.article-faq {
  margin: 0 0 28px;
  border-top: 1px solid var(--line);
}

/* Related CTA card (replaces the older .article-related placeholder) */
.related-cta {
  margin-top: 48px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  text-align: center;
}
.related-cta h3 {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0 0 10px;
}
.related-cta p {
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto 22px;
}
.related-cta .cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 600px) {
  .related-cta { padding: 28px 22px; }
  .related-cta .cta-buttons { flex-direction: column; }
  .related-cta .cta-buttons .btn { width: 100%; text-align: center; justify-content: center; }
}

/* In-article comparison tables (blog/*.html) — sized to fit the 760px
   article column on desktop with no horizontal scroll. Falls back to
   horizontal scroll only on viewports narrower than the article itself
   (mobile), where overflow is expected. */
.article-table-wrap {
  margin: 0 0 22px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-lg);
}
.article-compare {
  margin: 0;
  font-size: 0.88rem;
  min-width: 0;             /* override .compare-table base 760px min-width */
  table-layout: fixed;      /* predictable column widths, allows wrapping */
}
.article-compare th,
.article-compare td {
  padding: 12px 12px;       /* tighter than the 14-16px base */
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.article-compare thead th { font-size: 0.82rem; }
.article-compare tbody th { font-size: 0.85rem; }
.article-compare th[scope="row"] code {
  background: rgba(15, 61, 46, 0.08);
  font-size: 0.85em;
}
/* Column widths: row-label / best-for / signal / cost  →  4 / 5 / 4 / 5 */
.article-compare col.col-label  { width: 22%; }
.article-compare col.col-best   { width: 28%; }
.article-compare col.col-signal { width: 22%; }
.article-compare col.col-cost   { width: 28%; }
@media (max-width: 600px) {
  .article-compare { font-size: 0.82rem; }
  .article-compare th,
  .article-compare td { padding: 10px 8px; }
}

/* In-article SVG visuals (inline figures inside .article-body) */
.article-figure {
  margin: 28px 0 32px;
  padding: 0;
}
.article-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  background: #FAFAF5;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-sizing: border-box;
}
.article-figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--ink-2);
  font-style: italic;
  text-align: center;
}
@media (max-width: 600px) {
  .article-svg { padding: 10px; }
}

/* ============================================
   Naming page (naming.html) — was services.html pre-2026-05
   ============================================ */

/* Pricing line under each service-card heading */
.services-price {
  margin: 0 0 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.services-price strong {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--primary);
  letter-spacing: -0.005em;
}
.services-price span {
  font-size: 0.85rem;
  color: var(--ink-2);
}

/* Service-card feature bullets — green check marker */
.services-bullets {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: grid;
  gap: 8px;
}
.services-bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 0.92rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.services-bullets li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0;
  color: var(--accent);
  font-weight: 700;
}

/* Service tier cards — extend .term-card with a vertical layout */
.services-grid .term-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px;
}
.services-grid .term-card > p {
  flex-grow: 0;
  margin-top: 4px;
}
@media (max-width: 980px) {
  .services-grid { grid-template-columns: 1fr !important; }
}

/* Bundle callout band */
.services-bundle {
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.services-bundle h3 {
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  margin: 8px 0 8px;
}
.services-bundle h3 strong { color: var(--accent); }
.services-bundle p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
}
.services-bundle p strong { color: var(--accent); font-weight: 600; }
.services-bundle .eyebrow.mint {
  background: rgba(74, 222, 128, 0.18);
  color: var(--accent);
}
@media (max-width: 700px) {
  .services-bundle {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 28px 24px;
  }
  .services-bundle .btn { width: 100%; justify-content: center; }
}

/* AI-search per-pick reason — surfaced under the domain name when the
   ai-search edge function attaches a `_llmReason` to a result card. */
.domain-card .card-llm-reason {
  margin: 6px 0 10px;
  padding: 6px 10px;
  background: rgba(74, 222, 128, 0.10);
  border-left: 2px solid var(--accent);
  border-radius: 4px;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--ink-2);
  font-style: italic;
}
.domain-card .card-llm-reason span { color: var(--primary); font-style: normal; margin-right: 2px; }

/* Subtle dim+fade when search results are being live-reranked by the
   ai-search edge function — gives a hint of motion as Claude's
   ordering swaps in over the local-scorer ordering. */
.results-grid {
  transition: opacity 0.18s ease;
}
.results-grid.reranking {
  opacity: 0.55;
}

/* ============================================
   Search no-results empty state
   ============================================ */
.no-results-state {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  text-align: center;
  max-width: 720px;
  margin: 8px auto 0;
}
.no-results-state h2 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 18px;
  line-height: 1.25;
}
.no-results-state .ns-domain,
.no-results-state .ns-query { color: var(--primary); font-style: italic; }
.no-results-state > p {
  font-size: 1rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0 auto 22px;
  max-width: 540px;
}
.ns-options-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 28px;
  max-width: 540px;
  text-align: left;
  display: grid;
  gap: 12px;
}
.ns-options-list li {
  position: relative;
  padding: 12px 16px 12px 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.ns-options-list li::before {
  content: "→";
  position: absolute;
  left: 12px; top: 12px;
  color: var(--primary);
  font-weight: 700;
}
.ns-options-list strong { color: var(--ink); font-weight: 600; }
.ns-cta-group {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}
.ns-search-again {
  margin: 22px 0 0 !important;
  font-size: 0.88rem;
  color: var(--muted);
}
.ns-search-again a {
  color: var(--primary);
  font-weight: 500;
  border-bottom: 1px dotted var(--line);
}
.ns-search-again a:hover { border-bottom-color: var(--primary); }

@media (max-width: 600px) {
  .no-results-state { padding: 36px 22px; }
  .ns-cta-group { flex-direction: column; }
  .ns-cta-group .btn { width: 100%; justify-content: center; }
}


/* ============================================================
   Domain landing page (/<domain>/) — premium product detail
   layout aligned with Afternic / Atom / Spaceship best practice.
   ============================================================ */

.dp-page { padding: 24px 0 80px; }

.dp-breadcrumb {
  font-size: 0.85rem;
  color: var(--ink-2);
  margin: 0 0 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
.dp-breadcrumb a { color: var(--ink-2); }
.dp-breadcrumb a:hover { color: var(--primary); }
.dp-breadcrumb span[aria-hidden] { color: var(--line); }

.dp-section-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  margin: 0 0 18px;
  letter-spacing: -0.005em;
}
.dp-section-sub { color: var(--ink-2); font-size: 0.98rem; margin: -8px 0 24px; max-width: 640px; }

.dp-hero {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  margin-bottom: 56px;
}
.dp-hero-main { min-width: 0; }
.dp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dp-domain {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.4vw, 4.4rem);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 8px;
  color: var(--ink);
  word-break: break-word;
}
.dp-domain .tld { color: var(--accent-hover); font-weight: 500; }
/* Sale-state tagline sits directly under the domain — italic serif so it
   reads as continuation of the headline, not as a separate UI badge. */
.dp-for-sale {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  color: var(--primary);
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}
.dp-quick-stats {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 24px;
}
.dp-quick-stats li {
  background: rgba(15, 61, 46, 0.06);
  color: var(--primary);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.dp-desc {
  font-size: 1.08rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 560px;
  margin: 0 0 32px;
}
.dp-why {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
}
.dp-why h2 {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.dp-why ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.dp-why li {
  position: relative; padding-left: 24px;
  font-size: 0.95rem; line-height: 1.55; color: var(--ink-2);
}
.dp-why li::before {
  content: "\2713";
  position: absolute; left: 4px; top: 0;
  color: var(--accent);
  font-weight: 700;
}

.dp-purchase {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  height: fit-content;
  position: sticky;
  top: 96px;
  box-shadow: 0 8px 28px rgba(11, 26, 20, 0.05);
}
.dp-price-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.dp-price {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.dp-lto-hint {
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--accent-hover);
  font-weight: 500;
  margin-bottom: 22px;
}
.dp-cta-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.dp-cta-stack .btn { width: 100%; justify-content: center; }
.dp-cta-stack .dp-cta-tertiary {
  background: transparent !important;
  color: var(--primary);
  font-weight: 600;
  padding: 6px 0;
  margin: 2px auto 0;
  width: auto;
  border-bottom: 1px dashed var(--line);
  border-radius: 0;
}
.dp-cta-stack .dp-cta-tertiary:hover { border-bottom-color: var(--primary); background: transparent !important; }
.dp-trust-mini {
  list-style: none; padding: 14px 0 0; margin: 0;
  border-top: 1px solid var(--line);
  display: grid; gap: 8px;
}
.dp-trust-mini li {
  font-size: 0.82rem;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 8px;
  line-height: 1.4;
}
.dp-trust-icon { font-size: 1rem; }
.dp-purchase-note {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-2);
  text-align: center;
}
.dp-purchase-note a { color: var(--primary); font-weight: 600; }

@media (max-width: 880px) {
  .dp-hero { grid-template-columns: 1fr; gap: 28px; margin-bottom: 36px; }
  .dp-purchase { position: static; padding: 22px 20px; }
  .dp-domain { font-size: clamp(2rem, 11vw, 3rem); }
}

.dp-attrs { margin-bottom: 56px; }
.dp-attrs-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}
.dp-attr-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: left;
}
.dp-attr-card small {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.dp-attr-card strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: block;
}
@media (max-width: 980px) { .dp-attrs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .dp-attrs-grid { grid-template-columns: repeat(2, 1fr); } }

.dp-lto { margin-bottom: 56px; }
.dp-lto-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.dp-lto-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex; flex-direction: column;
  position: relative;
}
.dp-lto-card.dp-lto-best {
  border-color: var(--primary);
  border-width: 2px;
  padding: 23px;
}
.dp-lto-card.dp-lto-best::before {
  content: "Best value";
  position: absolute; top: -10px; left: 20px;
  background: var(--primary); color: #fff;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.dp-lto-card h4 {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin: 0 0 12px;
}
.dp-lto-price {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 4px;
}
.dp-lto-price .dp-lto-suffix {
  font-size: 0.85rem;
  color: var(--ink-2);
  font-weight: 500;
  margin-left: 4px;
}
.dp-lto-card p {
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 8px 0 0;
}
.dp-lto-faq { margin-top: 20px; }
.dp-lto-faq details {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px;
  background: var(--surface);
}
.dp-lto-faq summary { cursor: pointer; font-weight: 600; color: var(--ink); list-style: none; }
.dp-lto-faq summary::-webkit-details-marker { display: none; }
.dp-lto-faq summary::after { content: "+"; float: right; color: var(--primary); font-size: 1.3rem; font-weight: 300; line-height: 0.8; }
.dp-lto-faq details[open] summary::after { content: "\2212"; }
.dp-lto-faq details p { margin: 12px 0 0; color: var(--ink-2); font-size: 0.92rem; line-height: 1.6; }
@media (max-width: 780px) { .dp-lto-grid { grid-template-columns: 1fr; } }

.dp-usecases { margin-bottom: 56px; }
.dp-usecases-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.dp-usecase-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px;
}
.dp-usecase-card .dp-usecase-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(74, 222, 128, 0.18);
  color: var(--primary);
  display: grid; place-items: center;
  margin-bottom: 12px;
  font-size: 1.05rem;
  font-weight: 700;
}
.dp-usecase-card h4 {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--ink);
}
.dp-usecase-card p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}
@media (max-width: 980px) { .dp-usecases-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dp-usecases-grid { grid-template-columns: 1fr; } }

.dp-process { margin-bottom: 56px; }
.dp-process-steps {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.dp-process-steps li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 20px;
}
.dp-process-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 14px;
}
.dp-process-steps h4 {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ink);
}
.dp-process-steps p {
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}
.dp-process-link { text-align: center; margin: 22px 0 0; }
.dp-process-link a { color: var(--primary); font-weight: 600; }
@media (max-width: 880px) { .dp-process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dp-process-steps { grid-template-columns: 1fr; } }

.dp-trust-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 56px;
}
.dp-trust-band-item {
  background: #fff;
  padding: 22px 20px;
}
.dp-trust-band-item strong {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 6px;
}
.dp-trust-band-item span {
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.5;
}
@media (max-width: 880px) { .dp-trust-band { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dp-trust-band { grid-template-columns: 1fr; } }

.dp-faq { margin-bottom: 56px; max-width: 880px; }

.dp-similar { margin-bottom: 56px; }
.dp-similar-grid { margin-bottom: 24px; }
.dp-similar-cta { text-align: center; }

.dp-mobile-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 20px rgba(11, 26, 20, 0.08);
  align-items: center;
  gap: 12px;
}
.dp-mobile-bar-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dp-mobile-bar-domain {
  font-size: 0.85rem;
  color: var(--ink-2);
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dp-mobile-bar-price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--primary);
}
.dp-mobile-bar-cta { padding: 12px 24px; flex-shrink: 0; }
@media (max-width: 880px) {
  .dp-mobile-bar { display: flex; }
  .dp-page { padding-bottom: 100px; }
}


/* ============================================================
   Dashboard rebuild (2026-05-14)
   Modal pop-ups, sortable table, chip-picker industries, tabbed
   panes for Inventory / Inquiries / Sales / Profile / Settings.
   ============================================================ */

/* Sidebar nav badge restyles */
.dash-sidebar nav a .nav-badge {
  margin-left: auto;
  background: var(--accent);
  color: var(--ink);
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  flex: 0 0 auto;
  white-space: nowrap;
}
.dash-sidebar nav a .nav-badge-warning { background: var(--warning); color: #fff; }
.dash-sidebar nav a .nav-badge[hidden] { display: none; }
/* Keep the link label on a single line. The badge floats to the right via
   margin-left:auto; the label needs min-width:0 so flex will let it shrink
   instead of wrapping when the sidebar is narrow. */
.dash-sidebar nav a .nav-label {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tabs */
.dash-tab[hidden] { display: none; }

/* Panel head — fixed-narrow search input on the inventory table */
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 24px;
}
.panel-head-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.dash-search-input {
  width: 220px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  transition: border-color 0.15s ease;
}
.dash-search-input:focus { outline: 0; border-color: var(--primary); }
.panel-head .sort {
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 0.88rem;
  color: var(--ink);
  font-family: inherit;
}

/* Sortable column headers */
.domains-table th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 22px;
}
.domains-table th.sortable:hover { color: var(--primary); }
.domains-table th.sortable.num { text-align: right; }
.domains-table th.num,
.domains-table td.num { text-align: right; white-space: nowrap; }
/* Columns whose values look like badges/pills/icons read better centred. */
.domains-table th.col-center,
.domains-table td.col-center { text-align: center; }
.domains-table td.col-center .row-industries,
.domains-table td.col-center .row-actions { justify-content: center; }
/* When a sortable header is centred, the sort arrow needs to sit
   inside the centred text instead of pinned to the right padding. */
.domains-table th.sortable.col-center { padding-right: 12px; }
.domains-table th .th-help {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  opacity: 0.85;
}
.domains-table th .sort-ind {
  display: inline-block;
  width: 12px;
  margin-left: 4px;
  font-size: 0.72rem;
  opacity: 0.4;
}
.domains-table th.sort-asc  .sort-ind::before { content: "\25B2"; opacity: 1; color: var(--primary); }
.domains-table th.sort-desc .sort-ind::before { content: "\25BC"; opacity: 1; color: var(--primary); }

.dash-table-wrap {
  overflow-x: auto;
}
.dash-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px;
  border-top: 1px solid var(--surface-2);
}

/* Industry chip cluster on table rows */
.row-industries {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 240px;
}
.row-industry-chip {
  background: rgba(15, 61, 46, 0.06);
  color: var(--primary);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  white-space: nowrap;
}
.row-industry-chip.primary {
  background: var(--primary);
  color: #fff;
}
.row-industry-empty { color: var(--muted); font-style: italic; font-size: 0.85rem; }

/* Status pills */
.status-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.status-pill.live    { background: rgba(74, 222, 128, 0.18); color: var(--primary); }
.status-pill.draft   { background: var(--surface-2); color: var(--ink-2); }
.status-pill.sold    { background: rgba(15, 61, 46, 0.85); color: #fff; }
.status-pill.paused  { background: rgba(245, 158, 11, 0.18); color: #92560B; }
.status-pill.new     { background: rgba(74, 222, 128, 0.22); color: var(--primary); }
.status-pill.replied { background: rgba(15, 61, 46, 0.08); color: var(--ink-2); }
.status-pill.closed  { background: var(--surface-2); color: var(--muted); }
.status-pill.spam    { background: rgba(220, 38, 38, 0.12); color: var(--danger); }
.status-pill.in_escrow,.status-pill.transferred,.status-pill.paid_out { background: rgba(15, 61, 46, 0.85); color: #fff; }

.row-actions { display: flex; gap: 6px; }
.icon-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  width: 30px; height: 30px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.15s, border-color 0.15s;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--primary-soft); }

/* ============================================================
   Modal pop-ups (Add / Edit domain)
   ============================================================ */
.dash-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 80px 16px 32px; overflow-y: auto; }
.dash-modal[hidden] { display: none; }
.dash-modal-backdrop { position: absolute; inset: 0; background: rgba(11, 26, 20, 0.55); backdrop-filter: blur(2px); }
.dash-modal-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 640px;
  box-shadow: 0 24px 60px rgba(11, 26, 20, 0.25);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
}
.dash-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.dash-modal-head h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
}
.dash-modal-close {
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  color: var(--ink-2);
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  line-height: 1;
}
.dash-modal-close:hover { background: var(--surface-2); }
.dash-modal-body {
  padding: 24px;
  overflow-y: auto;
}
.dash-modal-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 18px !important;
}

/* Chip picker (multi-industry with primary) */
.chip-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  max-height: 220px;
  overflow-y: auto;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
}
.chip:hover { background: var(--surface-2); border-color: var(--primary-soft); }
.chip.selected {
  background: rgba(15, 61, 46, 0.08);
  border-color: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
.chip.primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 600;
}
.chip.primary::before { content: "★"; margin-right: 4px; font-size: 0.8em; }

/* Profile / settings panel forms */
.panel-form {
  padding: 24px;
}
.panel-form-checkboxes {
  padding: 12px 24px 24px;
  display: grid;
  gap: 8px;
}
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s;
}
.check-row:hover { background: var(--surface-2); }
.check-row input[type="checkbox"] { margin-top: 4px; transform: scale(1.15); accent-color: var(--primary); flex-shrink: 0; }
.check-row strong { display: block; color: var(--ink); font-weight: 600; font-size: 0.95rem; margin-bottom: 4px; }
.check-row span { font-size: 0.85rem; color: var(--ink-2); line-height: 1.45; }

.settings-block { padding: 20px 24px; display: grid; gap: 18px; }
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.settings-row strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.settings-row span { font-size: 0.88rem; color: var(--ink-2); display: block; }

/* Inventory category + price range filters */
.dash-price-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.dash-price-label {
  font-size: 0.82rem;
  color: var(--ink-2);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-right: 2px;
}
.dash-price-input {
  width: 76px;
  padding: 5px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 0.86rem;
  color: var(--ink);
  -moz-appearance: textfield;
  appearance: textfield;
}
.dash-price-input::-webkit-outer-spin-button,
.dash-price-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dash-price-input:focus { outline: 0; background: var(--cream); }
.dash-price-sep { color: var(--ink-2); font-size: 0.9rem; }

/* AI "Generate with AI" button on description fields */
.ai-desc-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.ai-desc-label-row label { margin-bottom: 0; }
.ai-desc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ai-desc-btn svg { color: var(--mint, #2DB48E); flex: 0 0 auto; }
.ai-desc-btn:hover:not(:disabled) {
  border-color: var(--mint, #2DB48E);
  background: rgba(45, 180, 142, 0.06);
  color: var(--mint, #2DB48E);
}
.ai-desc-btn:disabled { opacity: 0.55; cursor: progress; }

@media (max-width: 720px) {
  .dash-modal { padding: 16px; }
  .dash-modal-card { max-height: calc(100vh - 32px); }
  .panel-head { padding: 16px; }
  .dash-search-input { width: 100%; }
  .dash-price-range { width: 100%; box-sizing: border-box; }
  .dash-price-input { flex: 1 1 0; width: auto; min-width: 0; }
}