/* ==========================================================================
   SERPHeroes - homepage styles
   Brand: orange #FF8000 / #FF9900, gold #F1B826, ink #19130A, cream #FFFBF1
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --brand-300: #FFB459;
  --brand-400: #FF9900;
  --brand-500: #FF8000;
  --brand-600: #E56E00;
  --brand-700: #B85600;
  --gold: #F1B826;
  --cream: #FFFBF1;
  --ink: #19130A;

  --bg: #FFFFFF;
  --bg-soft: #FFFBF1;
  --bg-inset: #FBF7EF;
  --surface: #FFFFFF;
  --border: #EDE6D8;
  --border-strong: #DED4C0;
  --text: #19130A;
  --text-2: #46433D;
  --text-3: #7A7369;
  --invert-bg: #17120C;
  --invert-text: #FFFBF1;

  --pos: #1F9D62;
  --pos-soft: #E7F6EE;
  --neg: #D6453D;
  --neg-soft: #FCEBEA;

  --shadow-sm: 0 1px 2px rgba(25, 19, 10, .06), 0 1px 3px rgba(25, 19, 10, .04);
  --shadow-md: 0 4px 12px rgba(25, 19, 10, .07), 0 2px 4px rgba(25, 19, 10, .04);
  --shadow-lg: 0 18px 40px -12px rgba(25, 19, 10, .18), 0 6px 14px rgba(25, 19, 10, .06);
  --shadow-brand: 0 10px 24px -8px rgba(255, 128, 0, .45);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-full: 999px;

  --maxw: 1360px;   /* one content width for serpheroes.io and app.serpheroes.io */
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 68px;

  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

[data-theme="dark"] {
  --bg: #141210;
  --bg-soft: #1A1714;
  --bg-inset: #1E1A16;
  --surface: #1E1A16;
  --border: #332D25;
  --border-strong: #443C31;
  --text: #FAF6EE;
  --text-2: #D5CCBE;
  --text-3: #A09687;
  --invert-bg: #0E0C0A;
  --invert-text: #FFFBF1;
  --pos: #3BC383;
  --pos-soft: #14301F;
  --neg: #F4776F;
  --neg-soft: #35181A;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-lg: 0 22px 48px -14px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .3s var(--ease), color .3s var(--ease);

  /* A page shorter than the viewport — the auth pages, a 404 — would leave the
     footer floating with dead white space beneath it. Making the body a
     full-height column and letting <main> absorb the slack pins the footer to
     the bottom, and changes nothing on pages that already scroll. The drawer,
     to-top button and skip link are fixed/absolute, so they stay out of this
     flow; the sticky header is unaffected. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; letter-spacing: -.025em; margin: 0; font-weight: 800; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 3px; border-radius: 4px; }

/* The browser's own [hidden] rule is a UA style, so ANY author rule that sets
   `display` beats it and the element stays visible. Everything toggled with
   el.hidden in main.js depends on this winning instead. */
[hidden] { display: none !important; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, 112px); }
.section--soft { background: var(--bg-soft); }
.section--inset { background: var(--bg-inset); }
/* Visually hidden, still read aloud. Defined here rather than only in
   blog.css because the app loads style.css and pages.css but not blog.css —
   labels relying on it were rendering as visible text there. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--brand-500); color: #fff; padding: 10px 18px;
  border-radius: var(--r-sm); font-weight: 700; transition: top .2s;
}
.skip-link:focus { top: 12px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-600); background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  padding: 6px 12px; border-radius: var(--r-full);
}
[data-theme="dark"] .eyebrow { color: var(--brand-300); }

.section-head { max-width: 640px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 46px); margin-top: 16px; }
.section-head p { color: var(--text-3); font-size: clamp(16px, 1.6vw, 18px); margin-top: 16px; }
.hl { color: var(--brand-500); }
.hl-mark {
  background-image: linear-gradient(transparent 62%, color-mix(in srgb, var(--gold) 45%, transparent) 62%);
  padding-inline: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  padding: 12px 22px; border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s, border-color .18s, color .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* A disabled button that still looks clickable is a button people click and
   then wonder about. Nothing defined this before, so every disabled control in
   the app — Save, Discard, the dialogs mid-request — read as available. */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; box-shadow: none; filter: saturate(.7);
}
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover { transform: none; }
.btn--primary { background: linear-gradient(180deg, var(--brand-400), var(--brand-500)); color: #fff; box-shadow: var(--shadow-brand); }
.btn--primary:hover { background: linear-gradient(180deg, var(--brand-500), var(--brand-600)); }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { border-color: var(--brand-500); color: var(--brand-600); background: color-mix(in srgb, var(--brand-500) 7%, transparent); }
.btn--soft { background: var(--surface); border-color: var(--border); color: var(--text); box-shadow: var(--shadow-sm); }
.btn--soft:hover { border-color: var(--brand-500); }
.btn--lg { padding: 15px 28px; font-size: 16.5px; }
.btn--block { width: 100%; }
.btn svg { flex: none; }

/* ---------- Announcement ---------- */
.announce {
  background: linear-gradient(90deg, var(--ink), #3A2A15 55%, var(--brand-700));
  color: var(--cream); font-size: 13.5px; text-align: center;
  padding: 9px var(--gutter); position: relative; z-index: 60;
}
.announce b { color: var(--gold); }
.announce a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.announce a:hover { color: var(--gold); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.header.is-stuck { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); }
.header__inner { height: var(--header-h); display: flex; align-items: center; gap: 22px; }
/* Official lockup. Two files swapped by theme: logo.svg carries #333 text,
   dark-logo.svg carries white text. Width is auto so the 7:1 artwork keeps
   its ratio; the width/height attributes on the <img> prevent layout shift. */
.brand { display: inline-flex; align-items: center; }
.brand__logo { display: block; height: 27px; width: auto; }
.brand__logo--dark { display: none; }
[data-theme="dark"] .brand__logo--light { display: none; }
[data-theme="dark"] .brand__logo--dark { display: block; }

.brand--footer .brand__logo { height: 30px; }
.brand--drawer .brand__logo { height: 21px; }
@media (max-width: 420px) { .brand__logo { height: 23px; } }

.nav { display: flex; align-items: center; gap: 2px; margin-left: 14px; }
.nav > a, .nav__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: var(--r-sm); font-size: 15px; font-weight: 500;
  color: var(--text-2); background: none; border: 0; cursor: pointer; font-family: var(--font-body);
  transition: color .16s, background-color .16s;
}
.nav > a:hover, .nav__trigger:hover { color: var(--brand-600); background: color-mix(in srgb, var(--brand-500) 8%, transparent); }

/* Grouped "Product" menu */
.nav__group { position: relative; }
.nav__chev { transition: transform .2s var(--ease); opacity: .6; }
.nav__trigger[aria-expanded="true"] { color: var(--brand-600); background: color-mix(in srgb, var(--brand-500) 8%, transparent); }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
/* Same pill as the current-page link (.nav a[aria-current] in pages.css), so the
   section you are in looks identical on serpheroes.io and the app. */
.nav__trigger.is-active { color: var(--brand-600); font-weight: 600; background: color-mix(in srgb, var(--brand-500) 10%, transparent); }
[data-theme="dark"] .nav__trigger.is-active,
[data-theme="dark"] .nav__trigger[aria-expanded="true"] { color: var(--brand-300); }

.nav__panel {
  position: absolute; top: calc(100% + 10px); left: -8px; z-index: 60;
  width: 336px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  display: grid; gap: 2px;
  animation: navIn .18s var(--ease);
}
@keyframes navIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* The 10px offset above detaches the panel from the trigger, and that strip
   belongs to no child of .nav__group — so a pointer travelling down to the
   menu left the group, closed the panel, and dropped the click on whatever sat
   underneath. This bridges the strip so the journey stays inside the group.
   Only while the menu is open, and only as wide as the trigger, so it never
   covers a neighbouring nav link. The close delay in main.js backs this up
   where :has() is unsupported. */
.nav__group:has(.nav__trigger[aria-expanded="true"])::after {
  content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 11px; z-index: 60;
}

.nav__panel a {
  display: block; padding: 11px 12px; border-radius: var(--r-md);
  transition: background-color .15s;
}
.nav__panel a:hover { background: var(--bg-soft); }
.nav__panel a[aria-current="page"] { background: color-mix(in srgb, var(--brand-500) 9%, transparent); }
.nav__item-title {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 14.5px; color: var(--text);
}
.nav__panel a:hover .nav__item-title { color: var(--brand-600); }
[data-theme="dark"] .nav__panel a:hover .nav__item-title { color: var(--brand-300); }
.nav__item-desc { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 3px; line-height: 1.45; }
.header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.icon-btn {
  width: 38px; height: 38px; display: inline-grid; place-items: center;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; color: var(--text-2); transition: border-color .16s, color .16s, background-color .16s;
}
.icon-btn:hover { border-color: var(--brand-500); color: var(--brand-600); }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }

.burger { display: none; }
/* The burger takes over below 1080px: the full menu (with Domain Marketplace) no longer fits beside the actions. */
@media (max-width: 1080px) {
  .nav, .header__actions .btn--ghost { display: none; }
  .burger { display: inline-grid; }
}

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 90; display: none; }
.drawer[data-open="true"] { display: block; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(25, 19, 10, .5); backdrop-filter: blur(2px); animation: fade .2s var(--ease); }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw);
  background: var(--bg); border-left: 1px solid var(--border);
  padding: 18px var(--gutter) 28px; display: flex; flex-direction: column; gap: 4px;
  animation: slideIn .28s var(--ease); overflow-y: auto;
}
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.drawer__link {
  padding: 12px 4px; font-size: 16.5px; font-weight: 600; font-family: var(--font-display);
  border-bottom: 1px solid var(--border);
}
.drawer__link:hover { color: var(--brand-500); }
.drawer__label {
  margin: 20px 0 2px; font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-3);
}
.drawer__label:first-of-type { margin-top: 4px; }
.drawer__link--sub { font-size: 15.5px; font-weight: 500; padding-left: 0; }
.drawer__cta { margin-top: 20px; display: grid; gap: 10px; }
@keyframes slideIn { from { transform: translateX(100%); } to { transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: clamp(48px, 7vw, 86px) clamp(56px, 8vw, 96px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 620px; z-index: -2;
  background:
    radial-gradient(48% 55% at 18% 8%, color-mix(in srgb, var(--brand-400) 26%, transparent), transparent 70%),
    radial-gradient(44% 50% at 82% 0%, color-mix(in srgb, var(--gold) 24%, transparent), transparent 68%);
  filter: blur(6px);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--text) 13%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 22%, #000 0%, transparent 78%);
  mask-image: radial-gradient(70% 55% at 50% 22%, #000 0%, transparent 78%);
  opacity: .5;
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 60px); align-items: center; }
@media (max-width: 1000px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { font-size: clamp(38px, 5.6vw, 62px); margin-top: 20px; }
.hero__sub { margin-top: 20px; font-size: clamp(16.5px, 1.8vw, 19px); color: var(--text-2); max-width: 54ch; }
.hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero__note { margin-top: 14px; font-size: 13.5px; color: var(--text-3); display: flex; align-items: center; gap: 7px; }
.hero__note svg { color: var(--pos); flex: none; }

.stats { margin-top: 38px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 520px; }
.stat { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.stat__num { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.03em; }
.stat__num .unit { color: var(--brand-500); }
.stat__label { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }

/* Hero panel - app preview */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.panel__bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.dot:nth-child(1) { background: #FF6057; } .dot:nth-child(2) { background: #FFBD2E; } .dot:nth-child(3) { background: #28C840; }
.panel__url {
  margin-left: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); padding: 4px 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel__body { padding: 16px; }

.mini-rows { display: grid; gap: 8px; }
.mini-row {
  display: grid; grid-template-columns: 1.7fr .7fr .8fr .9fr; gap: 10px; align-items: center;
  padding: 11px 12px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-soft);
  font-size: 13.5px;
}
.mini-row--head { background: transparent; border-color: transparent; padding-block: 2px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 700; }
.mini-row__site { display: flex; align-items: center; gap: 9px; font-weight: 600; min-width: 0; }
.mini-row__site span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.favi { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; color: #fff; flex: none; font-family: var(--font-display); }
.chip-up { color: var(--pos); background: var(--pos-soft); border-radius: var(--r-full); padding: 2px 9px; font-size: 12px; font-weight: 700; display: inline-block; }
.chip-dr { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-2); }
.spark { height: 26px; width: 100%; }

.panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); background: var(--bg-soft); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); display: inline-block; margin-right: 6px; box-shadow: 0 0 0 0 color-mix(in srgb, var(--pos) 60%, transparent); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.logos { margin-top: clamp(44px, 6vw, 68px); text-align: center; }
.logos p { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.logos__row { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 5vw, 52px); align-items: center; opacity: .62; }
.logos__row span { font-family: var(--font-display); font-weight: 800; font-size: clamp(15px, 2vw, 19px); letter-spacing: -.02em; }

/* ---------- Explorer ---------- */
.explorer { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .explorer { grid-template-columns: 1fr; } }

.filters {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--shadow-sm); position: sticky; top: calc(var(--header-h) + 18px);
}
@media (max-width: 900px) { .filters { position: static; } }
.filters h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.filter { margin-top: 20px; }
.filter__label { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.filter__val { font-family: var(--font-mono); font-size: 12px; color: var(--brand-600); }
[data-theme="dark"] .filter__val { color: var(--brand-300); }
select, input[type="search"] {
  width: 100%; padding: 10px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--text); font-size: 14px;
}
select:hover, input[type="search"]:hover { border-color: var(--border-strong); }

input[type="range"] { width: 100%; appearance: none; -webkit-appearance: none; background: transparent; height: 22px; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: var(--border-strong); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6.5px; border-radius: 50%;
  background: var(--brand-500); border: 3px solid var(--surface); box-shadow: var(--shadow-sm);
}
input[type="range"]::-moz-range-track { height: 5px; border-radius: 99px; background: var(--border-strong); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--brand-500); border: 3px solid var(--surface); }

.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track { width: 40px; height: 23px; border-radius: 99px; background: var(--border-strong); position: relative; transition: background-color .2s; flex: none; }
.switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); box-shadow: var(--shadow-sm); }
.switch input:checked + .switch__track { background: var(--brand-500); }
.switch input:checked + .switch__track::after { transform: translateX(17px); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--brand-500); outline-offset: 3px; }

.filters__reset { margin-top: 22px; }

.results { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.results__top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.results__count { font-size: 14px; color: var(--text-3); }
.results__count b { color: var(--text); font-family: var(--font-display); font-size: 16px; }
.results__search { max-width: 250px; }

.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 760px; }
.data th {
  /* Not uppercased: Chromium's UA sheet resets text-transform on <button>,
     so a sortable header would render title case next to a plain one
     shouting in caps. Matching them is better than one odd column. */
  text-align: left; font-size: 12px; letter-spacing: .01em; color: var(--text-3);
  font-weight: 800; padding: 11px 16px; border-bottom: 1px solid var(--border); background: var(--bg-soft);
  white-space: nowrap;
}
.data th button {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 5px;
}
.data th button:hover { color: var(--brand-600); }
.data th .arrow { opacity: .3; transition: opacity .15s, transform .15s; }
.data th[aria-sort] .arrow { opacity: 1; color: var(--brand-500); }
.data th[aria-sort="ascending"] .arrow { transform: rotate(180deg); }
.data td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data tbody tr { transition: background-color .15s; }
.data tbody tr:hover { background: var(--bg-soft); }
.data tbody tr:last-child td { border-bottom: 0; }
.cell-site { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.cell-site small { display: block; font-weight: 500; color: var(--text-3); font-size: 12px; }
.num { font-family: var(--font-mono); font-size: 13px; }
.badge {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 700; border: 1px solid var(--border-strong); color: var(--text-2);
  white-space: nowrap;
}
.badge--gem { color: var(--brand-600); border-color: color-mix(in srgb, var(--brand-500) 40%, transparent); background: color-mix(in srgb, var(--brand-500) 10%, transparent); }
[data-theme="dark"] .badge--gem { color: var(--brand-300); }
.delta { font-family: var(--font-mono); font-size: 13px; font-weight: 600; }
.delta--up { color: var(--pos); } .delta--down { color: var(--neg); }

.empty { padding: 56px 24px; text-align: center; color: var(--text-3); }
.empty h4 { font-size: 17px; color: var(--text); margin-bottom: 6px; }
.results__foot { padding: 12px 18px; border-top: 1px solid var(--border); background: var(--bg-soft); font-size: 12.5px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }

/* ---------- Feature grid ---------- */
.f-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.f-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 24px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s;
}
.f-card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--gold)); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.f-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.f-card:hover::after { transform: scaleX(1); }
.f-card__icon {
  width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: 16px;
  background: color-mix(in srgb, var(--brand-500) 12%, transparent); color: var(--brand-600);
}
[data-theme="dark"] .f-card__icon { color: var(--brand-300); }
.f-card h3 { font-size: 17.5px; margin-bottom: 8px; }
.f-card p { font-size: 14.5px; color: var(--text-3); }

/* ---------- Google update impact ---------- */
.impact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 56px); align-items: center; }
@media (max-width: 920px) { .impact { grid-template-columns: 1fr; } }
.update-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.update-tabs button {
  padding: 8px 15px; border-radius: var(--r-full); border: 1px solid var(--border-strong);
  background: var(--surface); cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-2);
  transition: all .18s var(--ease);
}
.update-tabs button:hover { border-color: var(--brand-500); color: var(--brand-600); }
.update-tabs button[aria-selected="true"] { background: var(--brand-500); border-color: var(--brand-500); color: #fff; box-shadow: var(--shadow-brand); }
.chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-md); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: 12.5px; color: var(--text-3); margin-bottom: 16px; }
.chart-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; }
.bars { display: grid; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) 76px; gap: 12px; align-items: center; font-size: 13.5px; }
@media (max-width: 480px) { .bar-row { grid-template-columns: 92px minmax(0, 1fr) 60px; font-size: 12.5px; } }
.bar-row__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { display: grid; gap: 5px; }
.bar { height: 11px; border-radius: 99px; background: var(--border-strong); position: relative; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; width: 0; transition: width .9s var(--ease); }
.bar--before i { background: color-mix(in srgb, var(--text-3) 55%, transparent); }
.bar--after i { background: linear-gradient(90deg, var(--brand-400), var(--brand-500)); }
.bar--after.is-neg i { background: linear-gradient(90deg, #F09189, var(--neg)); }
.bar-row__delta { text-align: right; font-family: var(--font-mono); font-weight: 700; font-size: 13px; }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.pillar { background: var(--surface); padding: 28px 24px; }
.pillar__k { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.03em; color: var(--brand-500); }
.pillar h3 { font-size: 16px; margin: 10px 0 8px; }
.pillar p { font-size: 14px; color: var(--text-3); }

/* ---------- Pricing ---------- */
.billing {
  display: inline-flex; padding: 5px; gap: 4px; border-radius: var(--r-full);
  background: var(--bg-inset); border: 1px solid var(--border);
}
.billing button {
  border: 0; background: none; cursor: pointer; padding: 9px 20px; border-radius: var(--r-full);
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--text-3);
  transition: all .2s var(--ease);
}
.billing button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.billing .save { font-size: 10.5px; color: var(--pos); margin-left: 6px; font-weight: 800; }

.plans { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; align-items: stretch; }
.plan {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 28px 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.plan--featured { border-color: var(--brand-500); box-shadow: var(--shadow-lg); position: relative; }
.plan--featured::before {
  content: "Most popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--brand-500); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 5px 14px; border-radius: var(--r-full); white-space: nowrap;
}
.plan__name { font-family: var(--font-display); font-weight: 800; font-size: 17px; }
.plan__desc { font-size: 13.5px; color: var(--text-3); margin-top: 5px; min-height: 40px; }
.plan__price { margin: 18px 0 4px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.plan__amount { font-family: var(--font-display); font-size: 42px; font-weight: 800; letter-spacing: -.04em; }
.plan__per { font-size: 14px; color: var(--text-3); }
.plan__was { font-size: 14px; color: var(--text-3); text-decoration: line-through; }
.plan__equiv { font-size: 12.5px; color: var(--pos); font-weight: 600; min-height: 19px; }
.plan ul { margin: 20px 0 24px; display: grid; gap: 11px; font-size: 14px; color: var(--text-2); }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li svg { flex: none; margin-top: 3px; color: var(--brand-500); }
.plan li.muted { color: var(--text-3); }
.plan li.muted svg { color: var(--text-3); opacity: .6; }
.plan .btn { margin-top: auto; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; display: grid; gap: 10px; }
.acc { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.acc.is-open { border-color: var(--brand-500); box-shadow: var(--shadow-sm); }
.acc__btn {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 18px 20px; display: flex; gap: 16px; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--text);
}
.acc__btn:hover { color: var(--brand-600); }
.acc__icon { flex: none; width: 24px; height: 24px; display: grid; place-items: center; color: var(--brand-500); transition: transform .25s var(--ease); }
.acc__btn[aria-expanded="true"] .acc__icon { transform: rotate(45deg); }
.acc__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding: 0 20px 20px; color: var(--text-3); font-size: 14.8px; }

/* ---------- CTA ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--invert-bg); color: var(--invert-text); border-radius: var(--r-xl); padding: clamp(40px, 6vw, 68px) clamp(24px, 5vw, 60px); text-align: center; }
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(55% 90% at 50% 120%, color-mix(in srgb, var(--brand-500) 55%, transparent), transparent 70%);
}
.cta-band::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 251, 241, .13) 1px, transparent 1px); background-size: 20px 20px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 75%);
  mask-image: radial-gradient(60% 60% at 50% 50%, #000, transparent 75%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(28px, 4.2vw, 44px); max-width: 18ch; margin-inline: auto; }
.cta-band p { margin: 18px auto 0; max-width: 56ch; color: color-mix(in srgb, var(--invert-text) 76%, transparent); font-size: 17px; }
.cta-band .btn--ghost { border-color: rgba(255, 251, 241, .32); color: var(--invert-text); }
.cta-band .btn--ghost:hover { border-color: var(--invert-text); background: rgba(255, 251, 241, .1); color: var(--invert-text); }
.cta-band__row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-band__note { margin-top: 18px; font-size: 13px; opacity: .7; }

/* ---------- Footer ---------- */
/* No margin-top here: when the preceding section is also --bg-soft, a margin
   lets the white page background show through as an empty band. The footer
   butts up to whatever precedes it and its own padding does the spacing. */
.footer { border-top: 1px solid var(--border); background: var(--bg-soft); padding-block: clamp(56px, 7vw, 78px) 28px; }
.footer__grid { display: grid; grid-template-columns: 1.7fr repeat(4, minmax(0, 1fr)); gap: 40px 28px; }
@media (max-width: 1040px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 840px)  { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px)  { .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; } }
/* Brand block spans the row on the narrower grids so the link columns stay even */
@media (max-width: 1040px) { .footer__grid > div:first-child { grid-column: 1 / -1; } }
.footer p.blurb { color: var(--text-3); font-size: 14px; margin-top: 14px; max-width: 34ch; }
.footer h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 14px; }
.footer li + li { margin-top: 9px; }
.footer li a { font-size: 14.5px; color: var(--text-2); }
.footer li a:hover { color: var(--brand-600); }
.socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.socials a { width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-3); transition: all .18s; }
.socials a:hover { border-color: var(--brand-500); color: var(--brand-600); transform: translateY(-2px); }
.footer__bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-3); }
.footer__bottom p { margin: 0; }
.footer__bottom .dot-sep { margin: 0 6px; opacity: .5; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.footer__legal a, .footer__bottom a { color: var(--text-3); }
.footer__legal a:hover, .footer__bottom a:hover { color: var(--brand-600); }
[data-theme="dark"] .footer__legal a:hover, [data-theme="dark"] .footer__bottom a:hover { color: var(--brand-300); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(12px); transition: all .25s var(--ease);
}
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { color: var(--brand-600); border-color: var(--brand-500); }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Cross-host sign-in state ----------
   Both the signed-out and signed-in controls ship in the markup; an inline
   script in <head> sets data-auth from the hint cookie before first paint and
   this hides the wrong pair. Doing it this way rather than server-side keeps
   it correct on cached WordPress output, which cannot vary per visitor. */
.auth-in { display: none; }
html[data-auth="in"] .auth-in { display: inline-flex; }
/* The menu wrapper positions its popover, and the drawer copy is a grid of
   rows — neither works as an inline-flex box. */
html[data-auth="in"] .usermenu.auth-in { display: block; }
/* Signed in, the drawer keeps the site links only; the account links live in the header avatar menu. */
html[data-auth="in"] .drawer__cta, html[data-auth="in"] .drawer__cta .usermenu__panel.auth-in { display: none; }
html[data-auth="in"] .auth-out { display: none; }
.drawer__cta .auth-in { display: none; }
html[data-auth="in"] .drawer__cta .auth-in { display: inline-flex; }

/* ---------- Signed-in profile menu ----------
   Replaces the Sign in / Start free pair once a session exists. Shared by the
   app and the WordPress header, so it lives here rather than in either one.

   Built from the header's own vocabulary: the trigger is the height of
   .icon-btn and shares its radius, border and surface, so it reads as a
   sibling of the theme toggle rather than a foreign element. The avatar is a
   rounded square because that is what this site uses for avatars already —
   see .favi in the results table — not a circle. */
.usermenu { position: relative; }

.usermenu__trigger {
  height: 38px;                      /* .icon-btn height, so the row aligns */
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0 9px 0 5px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); box-shadow: var(--shadow-sm);
  cursor: pointer; font: inherit; color: var(--text-3);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background-color .15s;
}
.usermenu__trigger:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.usermenu__trigger[aria-expanded="true"] {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 16%, transparent);
}
.usermenu__trigger:focus-visible { outline: 3px solid var(--brand-500); outline-offset: 2px; }

.usermenu__chev { transition: transform .2s var(--ease); opacity: .5; }
.usermenu__trigger[aria-expanded="true"] .usermenu__chev { transform: rotate(180deg); opacity: .9; }

.usermenu__avatar {
  width: 28px; height: 28px; border-radius: 7px; flex: none;
  display: grid; place-items: center;
  /* Same gradient as .btn--primary, so the one saturated element in the
     header belongs to the same family as the primary action. */
  background: linear-gradient(180deg, var(--brand-400), var(--brand-500));
  color: #fff; font-family: var(--font-display); font-weight: 800;
  font-size: 12.5px; line-height: 1; text-transform: uppercase;
}
.usermenu__avatar svg { width: 15px; height: 15px; }

.usermenu__panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 272px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  animation: navIn .18s var(--ease);
}
/* Same gap-bridge as the Product menu: without it the pointer leaves the
   group crossing the 10px offset and the panel closes mid-journey. */
.usermenu:has(.usermenu__trigger[aria-expanded="true"])::after {
  content: ''; position: absolute; top: 100%; right: 0; width: 100%; height: 11px; z-index: 60;
}

/* Identity block, bled to the panel edges so it reads as a header rather than
   a first menu row. */
.usermenu__who {
  display: flex; align-items: center; gap: 10px;
  margin: -6px -6px 6px; padding: 13px 14px;
  background: var(--bg-soft); border-bottom: 1px solid var(--border);
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
}
.usermenu__who .usermenu__avatar { width: 34px; height: 34px; border-radius: 9px; font-size: 14.5px; }
.usermenu__id { min-width: 0; }      /* lets the email actually truncate */
.usermenu__email {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 13.5px; color: var(--text); line-height: 1.3;
  /* Ellipsis, not break-all: a long address used to wrap mid-word and leave
     a ragged second line in the middle of the panel. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usermenu__plan { display: block; font-size: 12px; color: var(--text-3); margin-top: 2px; }

.usermenu__panel a,
.usermenu__panel button {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 9px 11px; border-radius: var(--r-md);
  background: none; border: 0; cursor: pointer;
  font: inherit; font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--text-2);
  transition: background-color .15s, color .15s;
}
.usermenu__panel a:hover,
.usermenu__panel button:hover { background: var(--bg-soft); color: var(--text); }
.usermenu__panel a:focus-visible,
.usermenu__panel button:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.usermenu__panel svg { width: 17px; height: 17px; flex: none; opacity: .45; transition: opacity .15s, color .15s; }
.usermenu__panel a:hover svg,
.usermenu__panel button:hover svg { opacity: 1; color: var(--brand-600); }
[data-theme="dark"] .usermenu__panel a:hover svg,
[data-theme="dark"] .usermenu__panel button:hover svg { color: var(--brand-300); }
.usermenu__panel button[disabled] { opacity: .6; cursor: default; }

.usermenu__sep { height: 1px; background: var(--border); margin: 6px 8px; }

/* In the drawer the menu is already inside a panel, so it renders as a plain
   list instead of a floating popover. */
.drawer__cta .usermenu__panel {
  position: static; width: auto; padding: 0; border: 0; box-shadow: none;
  background: none; animation: none;
}
.drawer__cta .usermenu__who {
  margin: 0 0 6px; border-radius: var(--r-md);
  border: 1px solid var(--border);
}
.drawer__cta .usermenu__panel a,
.drawer__cta .usermenu__panel button { padding: 11px; font-size: 15px; }

/* Small phones: the logo never shrinks to make room. Below 400px the header
   bar keeps logo, "Start free" and the menu button; the theme switch moves
   into the menu drawer, where there is room for it. */
.brand { flex: none; }
.drawer__top-actions { display: flex; align-items: center; gap: 8px; }
.theme-toggle--drawer { display: none; }
@media (max-width: 480px) {
  .brand__logo { height: 23px; }
  .header__inner { gap: 14px; }
  .header__actions { gap: 8px; }
}
@media (max-width: 400px) {
  .header__inner { gap: 10px; }
  .header__actions { gap: 6px; }
  .header__actions .theme-toggle { display: none; }
  .theme-toggle--drawer { display: inline-grid; }
  .brand__logo { height: 21px; }
  .header__actions .btn--primary { padding-inline: 14px; font-size: 14px; }
}
@media (max-width: 340px) { .brand__logo { height: 19px; } }

/* "Domain Marketplace" in the main menu: up front, highlighted, same pill shape as the other links. */
.nav > a.nav__market {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 4px; padding: 7px 13px 7px 11px; border-radius: 999px;
  color: var(--brand-700, var(--brand-600)); font-weight: 700;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 16%, transparent), color-mix(in srgb, var(--brand-500) 7%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-500) 38%, transparent);
  transition: background-color .15s, box-shadow .15s, color .15s, transform .15s;
}
.nav > a.nav__market:hover, .nav > a.nav__market[aria-current="page"] {
  color: #fff; background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--brand-500) 85%, transparent);
}
.nav > a.nav__market:active { transform: translateY(1px); }
.nav__market-ico { flex: none; }
.nav > a.nav__market:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
/* A tight header (just above the burger breakpoint): "Marketplace" alone. */
@media (max-width: 1180px) { .nav__market-long { display: none; } }
/* In the mobile menu: the first thing after Home, with what it is. */
.drawer__link.drawer__market {
  display: flex; align-items: center; gap: 12px; margin: 6px 0; padding: 12px 14px; border-radius: 14px;
  color: var(--brand-700, var(--brand-600)); font-weight: 700;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-500) 15%, transparent), color-mix(in srgb, var(--brand-500) 5%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-500) 35%, transparent);
}
.drawer__market span { display: grid; gap: 1px; }
.drawer__market small { font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.drawer__market .nav__market-ico { width: 20px; height: 20px; }
[data-theme="dark"] .nav > a.nav__market:not(:hover):not([aria-current="page"]), [data-theme="dark"] .drawer__link.drawer__market { color: var(--brand-300); }
/* Between the burger breakpoint and a wide screen the header is tight: tighter menu, labels on one line. */
.nav > a, .nav__trigger { white-space: nowrap; }
@media (max-width: 1180px) and (min-width: 1081px) {
  .nav { margin-left: 6px; gap: 0; }
  .nav > a, .nav__trigger { padding-left: 8px; padding-right: 8px; font-size: 14px; }
  .nav > a.nav__market { margin: 0 2px; padding: 6px 11px; }
}

/* ==== Header menu, refined (26 Oct 2026) ====
   The page you are on is marked by an orange underline rather than a filled pill; the dropdowns
   are two columns of icon tiles with a one-line description and a footer link. */
.header .nav > a, .header .nav__trigger { position: relative; font-weight: 500; }
.header .nav > a[aria-current="page"]:not(.nav__market),
.header .nav__trigger.is-active {
  color: var(--brand-600); background: none; font-weight: 600;
}
.header .nav > a[aria-current="page"]:not(.nav__market)::after,
.header .nav__trigger.is-active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
}
[data-theme="dark"] .header .nav > a[aria-current="page"]:not(.nav__market),
[data-theme="dark"] .header .nav__trigger.is-active { color: var(--brand-300); }

/* Two-column dropdown */
.nav__panel.nav__panel--grid {
  left: 50%; width: 600px; margin-left: -300px; padding: 10px;
  grid-template-columns: 1fr 1fr; gap: 4px;
  border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(25, 19, 10, .32), 0 2px 8px rgba(25, 19, 10, .06);
}
.nav__panel--grid a.nav__item {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 12px;
}
.nav__panel--grid .nav__item-text { display: grid; gap: 2px; min-width: 0; }
.nav__panel--grid .nav__item-title { font-size: 14px; line-height: 1.3; }
.nav__panel--grid .nav__item-desc { margin-top: 0; font-size: 12.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav__panel--grid a.nav__item:hover .nav__ico { transform: scale(1.06); }
.nav__panel--grid .nav__foot {
  grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 4px;
  margin-top: 4px; padding: 10px 14px 6px; border-top: 1px solid var(--border); border-radius: 0;
  font-size: 13px; font-weight: 600; color: var(--brand-600);
}
.nav__panel--grid .nav__foot:hover { background: none; color: var(--brand-700, var(--brand-600)); }
[data-theme="dark"] .nav__panel--grid .nav__foot { color: var(--brand-300); }

/* Icon tiles */
.nav__ico {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; flex: none;
  color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 18%, transparent);
  transition: transform .15s;
}
.nav__ico--sm { width: 30px; height: 30px; border-radius: 9px; }
.nav__ico--sm svg { width: 16px; height: 16px; }
.nav__ico--orange { --tone: #f07a0a; }
.nav__ico--amber  { --tone: #d98e04; }
.nav__ico--purple { --tone: #7c4ddb; }
.nav__ico--green  { --tone: #16a34a; }
.nav__ico--blue   { --tone: #2f6fe0; }
.nav__ico--red    { --tone: #dc3b3b; }
.nav__ico--slate  { --tone: #5b6576; }
[data-theme="dark"] .nav__ico { background: color-mix(in srgb, var(--tone) 20%, transparent); }
[data-theme="dark"] .nav__ico--slate { --tone: #9aa4b4; }

/* Mobile drawer: the same tiles beside each menu item */
.drawer__link.drawer__link--ico { display: flex; align-items: center; gap: 12px; }

/* "Start free →" */
.btn--cta { gap: 8px; }
.btn--cta .btn__arrow { transition: transform .18s; }
.btn--cta:hover .btn__arrow { transform: translateX(3px); }

/* The dropdown never runs off a narrow desktop window */
@media (max-width: 1240px) { .nav__panel.nav__panel--grid { width: 560px; margin-left: -280px; } }