/* ═══════════════════════════════════════════
   SOLTHAR — base styles. The identity layer is solthar.css.
   ═══════════════════════════════════════════ */

:root {
  /* Colour grading, revised against published research:
     - near-black (#07080D) with pure white text causes "halation" — text
       that seems to glow and blur — for the many people with astigmatism
       (NN/g); Material Design recommends a dark grey-navy base and off-white
       text for the same reason, and because shadows and raised surfaces are
       only visible on grey, not black;
     - saturated neon "vibrates" against dark backgrounds and strains the
       eye, so every accent is pulled back a step in saturation.
     Same cyan-blue-violet family, so the brand is unchanged. */
  --space-black: #0B0F19;
  --midnight: #0A7E96;
  --electric: #25E9FF;
  --cyan: #25E9FF;
  --violet: #A855F7;
  --emerald: #3DE8A0;

  --bg: var(--space-black);
  --bg-2: var(--midnight);
  --text: #E9EDF5;
  --text-soft: #B3BCCD;
  /* 5.0:1 on #07080D. The previous #6B7387 measured 4.27, under AA. */
  --text-muted: #8E97AB;
  --glass: rgba(255,255,255,0.045);
  --glass-strong: rgba(10,126,150,0.82);
  --glass-border: rgba(255,255,255,0.09);
  --glass-border-hover: rgba(37,233,255,0.35);
  --shadow: 0 18px 50px rgba(0,0,0,0.5);
  --nav-bg: rgba(7,8,13,0.85);

  --grad-brand: linear-gradient(120deg, var(--cyan), var(--electric) 45%, var(--violet));
  --radius: 20px;
  --radius-sm: 12px;
  /* Trialled on the hero first, now sitewide. The rule: display face for
     headings only, Inter for anything 16px or under, JetBrains Mono for
     figures that sit in a column so they align. */
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html[data-theme="light"] {
  --bg: #F4F6FB;
  --bg-2: #E9EDF7;
  --text: #0A7E96;
  --text-soft: #0A7E96;
  --text-muted: #25E9FF;
  --glass: rgba(255,255,255,0.65);
  --glass-strong: rgba(255,255,255,0.92);
  --glass-border: rgba(10,126,150,0.10);
  --glass-border-hover: rgba(37,233,255,0.45);
  --shadow: 0 18px 50px rgba(10,126,150,0.10);
  --nav-bg: rgba(244,246,251,0.88);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background 0.5s var(--ease), color 0.5s var(--ease);
}

body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1000px 600px at 85% -10%, rgba(168,85,247,0.14), transparent 60%),
    radial-gradient(900px 500px at 10% 20%, rgba(37,233,255,0.12), transparent 60%),
    radial-gradient(700px 500px at 60% 110%, rgba(37,233,255,0.07), transparent 60%),
    var(--bg);
  transition: background 0.5s var(--ease);
}

::selection { background: rgba(37,233,255,0.3); }

.container { max-width: 1500px; margin: 0 auto; padding: 0 36px; }

h1,h2,h3,h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; }

a { color: inherit; text-decoration: none; }

/* ── Cursor glow ─────────────────────────── */
.cursor-glow {
  position: fixed; z-index: 0; pointer-events: none;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,233,255,0.09), transparent 65%);
  transform: translate(-50%, -50%);
  left: 50vw; top: 30vh;
  transition: opacity 0.4s;
}
@media (hover: none) { .cursor-glow { display: none; } }

/* ── Glass ───────────────────────────────── */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-radius: var(--radius);
}

/* ── Buttons ─────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  padding: 12px 24px; border-radius: 999px; border: none; cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.3s, border-color 0.3s;
  will-change: transform;
  position: relative; overflow: hidden;
}
.btn-sm { padding: 9px 18px; font-size: 13.5px; }
.btn-lg { padding: 16px 32px; font-size: 16px; }

.btn-primary {
  background: linear-gradient(120deg, var(--electric), var(--violet));
  color: #fff;
  box-shadow: 0 8px 28px rgba(37,233,255,0.35), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 40px rgba(37,233,255,0.5), inset 0 1px 0 rgba(255,255,255,0.3); }
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-ghost {
  background: var(--glass); color: var(--text);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { border-color: var(--glass-border-hover); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(37,233,255,0.12); }

.glow::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; z-index: -1;
  background: var(--grad-brand); filter: blur(16px); opacity: 0.35;
  transition: opacity 0.3s;
}
.glow:hover::after { opacity: 0.65; }

/* ripple */
.btn .ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: rgba(255,255,255,0.35); transform: scale(0);
  animation: ripple 0.6s ease-out forwards;
}
@keyframes ripple { to { transform: scale(3); opacity: 0; } }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-soft); cursor: pointer; position: relative;
  transition: all 0.25s var(--ease);
}
.icon-btn:hover { color: var(--text); background: var(--glass); border-color: var(--glass-border); transform: translateY(-1px); }

.badge-dot::after {
  content: ""; position: absolute; top: 8px; right: 9px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emerald); box-shadow: 0 0 8px var(--emerald);
}
.bookmark-count {
  position: absolute; top: 2px; right: 2px;
  min-width: 15px; height: 15px; padding: 0 4px;
  font-size: 10px; font-weight: 700; line-height: 15px;
  background: var(--violet); color: #fff; border-radius: 999px;
}

.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: 0.5; transform: scale(0.8);} }

/* The brand gradient used to sit on every section title as well as every
   main button, so nothing stood out. Conversion research on the isolation
   (Von Restorff) effect is consistent: the action colour should be one the
   page uses nowhere else. Titles now read as plain, calm text, and the
   gradient belongs to the buttons you are meant to press. */
.gradient-text { color: inherit; }

/* ── Navigation ──────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: transparent;
  transition: background 0.4s var(--ease), box-shadow 0.4s, border-color 0.4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  border-bottom: 1px solid var(--glass-border);
}
.nav-inner {
  max-width: 1360px; margin: 0 auto; padding: 0 24px;
  height: 68px; display: flex; align-items: center; gap: 24px;
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo-mark { display: grid; place-items: center; }
.logo-text {
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  letter-spacing: 0.14em;
}
.nav-menu { display: flex; gap: 4px; margin: 0 auto; align-items: center; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 500; color: var(--text-soft);
  padding: 8px 13px; border-radius: 10px; background: none; border: none;
  cursor: pointer; font-family: var(--font-body);
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--text); background: var(--glass); }
.nav-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nav-login { font-size: 13.5px; font-weight: 500; color: var(--text-soft); padding: 8px 12px; transition: color 0.2s; }
.nav-login:hover { color: var(--text); }
.nav-burger { display: none; }

html[data-theme="dark"] .icon-sun { display: none; }
html[data-theme="light"] .icon-moon { display: none; }

/* ── Mega menu ───────────────────────────── */
.mega-menu {
  /* a contained floating panel, not a full-bleed bar */
  position: absolute; top: 72px; left: 0; right: 0;
  width: min(1060px, calc(100% - 48px)); margin: 0 auto;
  background: var(--glass-strong);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 60px rgba(37,233,255,0.10);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0.35s;
}
.mega-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mega-inner {
  max-width: none; margin: 0; padding: 24px 24px;
  display: grid; grid-template-columns: 1fr 260px; gap: 28px;
}
.mega-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.mega-cat {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 12px; cursor: pointer;
  transition: background 0.2s, transform 0.2s var(--ease);
}
.mega-cat:hover { background: var(--glass); transform: translateX(3px); }
.mega-cat-icon {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-size: 16px; background: var(--glass); border: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.mega-cat b { font-size: 13.5px; font-weight: 600; display: block; }
.mega-cat small { font-size: 11.5px; color: var(--text-muted); }
.mega-side { border-left: 1px solid var(--glass-border); padding-left: 32px; }
.mega-side-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 14px;
}
.mega-side-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.mega-pick {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 10px; cursor: pointer; transition: background 0.2s;
}
.mega-pick:hover { background: var(--glass); }
.mega-pick .tool-logo { width: 30px; height: 30px; font-size: 13px; border-radius: 8px; }
.mega-pick b { font-size: 13px; display: block; }
.mega-pick small { font-size: 11px; color: var(--text-muted); }
.mega-side-cta { font-size: 13px; font-weight: 600; color: var(--cyan); }

/* ── Hero ────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 130px 24px 80px; text-align: center;
  /* No overflow here. It used to be `overflow: hidden` to contain the
     decorative orbs, but CSS cannot hide one axis and leave the other
     visible: overflow-y silently became hidden too, which clipped the
     search results dropdown at the hero's bottom edge. The orbs are now
     clipped by their own layer instead. */
}

/* Decorative-only clipping layer: keeps the orbs and canvas inside the
   hero without turning the hero into a clipping context for real content. */
.hero-decor {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 0; border-radius: inherit;
}
#neuralCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 30%, var(--bg) 100%);
}
.hero-orb {
  position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none;
  animation: drift 14s ease-in-out infinite alternate;
}
.hero-orb-a { width: 420px; height: 420px; left: -120px; top: 12%; background: rgba(37,233,255,0.16); }
.hero-orb-b { width: 380px; height: 380px; right: -100px; bottom: 8%; background: rgba(168,85,247,0.15); animation-delay: -7s; }
@keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(50px, -40px) scale(1.12); } }

.hero-content { position: relative; z-index: 2; max-width: 900px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 18px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  font-size: 12.5px; color: var(--text-soft); margin-bottom: 30px;
}

.hero-title {
  font-size: clamp(42px, 7vw, 82px);
  line-height: 1.04; margin-bottom: 26px; letter-spacing: -0.03em;
}
.hero-sub {
  font-size: clamp(15px, 2vw, 19px); color: var(--text-soft);
  margin-bottom: 44px; line-height: 1.7;
}

/* search */
.hero-search { position: relative; max-width: 720px; margin: 0 auto 22px; }
.search-shell {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 24px;
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: var(--shadow);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease);
}
.search-shell:focus-within {
  border-color: var(--glass-border-hover);
  box-shadow: 0 0 0 4px rgba(37,233,255,0.08), 0 20px 60px rgba(0,0,0,0.5);
  transform: translateY(-2px);
}
.search-icon { color: var(--text-muted); flex-shrink: 0; }
#searchInput {
  flex: 1; background: none; border: none; outline: none;
  color: var(--text); font-size: 17px; font-family: var(--font-body);
  min-width: 0; padding: 12px 0;
}
#searchInput::placeholder { color: var(--text-muted); }
.search-kbd {
  font-family: var(--font-body); font-size: 11.5px; color: var(--text-muted);
  border: 1px solid var(--glass-border); border-radius: 7px; padding: 3px 8px;
  flex-shrink: 0;
}
.search-go { flex-shrink: 0; }

.search-results {
  position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 50;
  background: var(--glass-strong);
  text-align: left; padding: 8px; max-height: 380px; overflow-y: auto;
  box-shadow: var(--shadow);
  animation: popIn 0.25s var(--ease);
}
@keyframes popIn { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }
.sr-item {
  display: flex; align-items: center; gap: 13px;
  padding: 10px 12px; border-radius: 13px; cursor: pointer;
  transition: background 0.15s;
}
.sr-item.sel { background: var(--glass); }
.sr-item b { font-size: 14px; display: block; }
.sr-item b mark { background: none; color: var(--cyan); }
.sr-item small { font-size: 12px; color: var(--text-muted); display: block; }
.sr-meta { margin-left: auto; text-align: right; flex-shrink: 0; }
.sr-empty { padding: 22px; text-align: center; color: var(--text-muted); font-size: 14px; }

.hero-chips {
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center;
  align-items: center; margin-bottom: 44px;
}
.chips-label { font-size: 13px; color: var(--text-muted); }
.chip {
  font-size: 12.5px; font-weight: 500; color: var(--text-soft);
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  transition: all 0.25s var(--ease);
  font-family: var(--font-body);
}
.chip:hover {
  color: var(--text); border-color: var(--glass-border-hover);
  box-shadow: 0 6px 20px rgba(37,233,255,0.15);
  transform: translateY(-2px);
}

.hero-ctas { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.flame { color: var(--emerald); font-size: 11px; }

.hero-scroll-hint {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 40px; border: 2px solid var(--glass-border);
  border-radius: 14px; z-index: 2;
}
.hero-scroll-hint span {
  position: absolute; left: 50%; top: 7px; width: 4px; height: 8px;
  background: var(--cyan); border-radius: 4px; transform: translateX(-50%);
  animation: scrollHint 1.8s infinite;
}
@keyframes scrollHint { 0% { opacity: 1; top: 7px; } 70% { opacity: 0; top: 22px; } 100% { opacity: 0; } }

.br-desktop { display: block; }
@media (max-width: 640px) { .br-desktop { display: none; } }

/* ── Ticker ──────────────────────────────── */
.ticker-wrap {
  overflow: hidden; border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass); backdrop-filter: blur(10px);
  padding: 11px 0; position: relative; z-index: 2;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker { display: flex; gap: 44px; width: max-content; animation: tick 40s linear infinite; }
.ticker-wrap:hover .ticker { animation-play-state: paused; }
.tick-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-soft); white-space: nowrap; }
.tick-item b { color: var(--text); font-weight: 600; }
.tick-up { color: var(--emerald); } .tick-hot { color: var(--cyan); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ── Stats ───────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: 60px; position: relative; z-index: 2;
}
.stat { padding: 26px 22px; text-align: center; transition: transform 0.4s var(--ease), border-color 0.3s; }
.stat:hover { transform: translateY(-4px); border-color: var(--glass-border-hover); }
.stat-num {
  font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 40px); font-weight: 700;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-label { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ── Sections ────────────────────────────── */
.section { padding: 90px 28px 10px; position: relative; z-index: 2; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 38px;
}
.section-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cyan); margin-bottom: 8px;
}
.section-title { font-size: clamp(28px, 4vw, 42px); line-height: 1.1; }
.link-arrow { font-size: 14px; font-weight: 600; color: var(--text-soft); transition: color 0.2s, transform 0.2s; display: inline-block; }
.link-arrow:hover { color: var(--cyan); transform: translateX(3px); }

.seg-control {
  display: flex; gap: 4px; padding: 5px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 999px; backdrop-filter: blur(10px);
}
.seg {
  border: none; background: none; color: var(--text-muted);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  transition: all 0.25s var(--ease); white-space: nowrap;
}
.seg:hover { color: var(--text); }
.seg.active {
  color: #fff; background: linear-gradient(120deg, var(--electric), var(--violet));
  box-shadow: 0 4px 16px rgba(37,233,255,0.35);
}

/* ── Tool cards ──────────────────────────── */
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.tool-card {
  position: relative; padding: 24px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  backdrop-filter: blur(16px);
  transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s var(--ease);
  overflow: hidden;
  animation: cardIn 0.5s var(--ease) backwards;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.tool-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(37,233,255,0.5), transparent 40%, transparent 60%, rgba(168,85,247,0.5));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.35s;
  pointer-events: none;
}
.tool-card:hover { transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 40px rgba(37,233,255,0.08); }
.tool-card:hover::before { opacity: 1; }

.tool-top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.tool-logo {
  width: 46px; height: 46px; border-radius: 13px; flex-shrink: 0;
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 6px 16px rgba(0,0,0,0.3);
}
.tool-logo i { font-style: normal; }
.tool-logo .logo-img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  padding: 17%; box-sizing: border-box;
  object-fit: contain;
  border-radius: inherit;
}
.tool-name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tool-name { font-family: var(--font-display); font-size: 16.5px; font-weight: 600; }
.tool-cat { font-size: 11.5px; color: var(--text-muted); }
.tool-badges-top { margin-left: auto; display: flex; gap: 6px; flex-shrink: 0; }

.tool-desc { font-size: 13.5px; color: var(--text-soft); line-height: 1.55; margin-bottom: 16px; min-height: 42px; }

.badge {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.badge-free { background: rgba(61,232,160,0.12); color: var(--emerald); border: 1px solid rgba(61,232,160,0.3); }
.badge-freemium { background: rgba(37,233,255,0.1); color: var(--cyan); border: 1px solid rgba(37,233,255,0.28); }
.badge-paid { background: rgba(168,85,247,0.13); color: #C9A2FF; border: 1px solid rgba(168,85,247,0.35); }
.badge-trial { background: rgba(37,233,255,0.12); color: var(--electric); border: 1px solid rgba(37,233,255,0.3); }

.tool-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-muted);
  padding-top: 14px; border-top: 1px solid var(--glass-border);
}
.tool-meta .rating { color: #FCEE0A; font-weight: 600; }
.tool-meta .ai-score { color: var(--cyan); font-weight: 600; }
.tool-meta .visits { margin-left: auto; }

.tool-actions {
  display: flex; gap: 8px; margin-top: 14px;
}
.tool-actions .icon-btn { width: 34px; height: 34px; border: 1px solid var(--glass-border); border-radius: 10px; }
.tool-actions .icon-btn.active { color: var(--cyan); border-color: var(--glass-border-hover); background: rgba(37,233,255,0.08); }
.tool-open {
  margin-left: auto; font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-soft); padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--glass-border); background: transparent; cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.25s var(--ease);
}
.tool-open:hover { color: #fff; background: linear-gradient(120deg, var(--electric), var(--violet)); border-color: transparent; box-shadow: 0 6px 20px rgba(37,233,255,0.4); }

/* ── AI zone: always-on snapshot, hover swaps to details ──
   Fixed-height zone on every card. Default shows the AI Snapshot;
   hover crossfades to richer details in the same space.
   Nothing is ever empty, nothing on the page moves. */
.tool-card { display: flex; flex-direction: column; }
.tool-actions { margin-top: auto; }
.tool-zone {
  position: relative;
  height: 186px; flex-shrink: 0;
  margin-top: 13px;
  overflow: hidden;
}
.zone-snapshot, .zone-detail {
  position: absolute; inset: 0;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease);
}
.zone-detail { opacity: 0; transform: translateY(10px); pointer-events: none; }
.tool-card:hover .zone-snapshot,
.tool-card:focus-visible .zone-snapshot { opacity: 0; transform: translateY(-8px); }
.tool-card:hover .zone-detail,
.tool-card:focus-visible .zone-detail { opacity: 1; transform: none; }
/* touch devices have no hover: the snapshot stays, tap opens details */

.tool-zone h6 {
  display: flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.tool-zone h6 .zdot { color: var(--cyan); font-size: 11px; }
.zone-stars { display: flex; align-items: center; margin-bottom: 10px; }
.stars {
  position: relative; display: inline-block;
  font-size: 16px; line-height: 1; letter-spacing: 2.5px;
  color: rgba(255,255,255,0.16);
}
.stars b {
  position: absolute; left: 0; top: 0;
  overflow: hidden; white-space: nowrap;
  color: #FCEE0A;
}
html[data-theme="light"] .stars { color: rgba(7,8,13,0.15); }
.stars-val { font-size: 12.5px; font-weight: 600; color: var(--text-soft); margin-left: 8px; }
.zone-snapshot p {
  font-size: 13px; font-style: italic;
  color: var(--text-soft); line-height: 1.6;
  border-left: 2px solid var(--violet); padding-left: 11px;
}
.zone-snapshot p b { color: var(--cyan); font-style: normal; font-size: 11px; font-weight: 600; }
.ai-line {
  font-size: 12.5px; font-style: italic; color: var(--text-soft);
  border-left: 2px solid var(--violet); padding-left: 10px; line-height: 1.55;
}
.ai-line b { color: var(--cyan); font-style: normal; font-weight: 600; font-size: 11px; }
.bestfor { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.bestfor span {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: capitalize;
  padding: 4px 11px; border-radius: 999px;
  background: rgba(37,233,255,0.08);
  border: 1px solid rgba(37,233,255,0.22);
  color: var(--cyan);
}
.strengths { list-style: none; margin: 0 0 11px; font-size: 12.5px; color: var(--text-soft); }
.strengths li { padding: 2px 0; display: flex; gap: 7px; align-items: baseline; }
.strengths li::before { content: "✦"; color: var(--emerald); font-size: 10px; }
.conf-row { display: flex; align-items: center; gap: 9px; font-size: 11px; color: var(--text-muted); }
.conf-bar { flex: 0 0 90px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.09); overflow: hidden; display: block; }
.conf-bar b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--violet)); }

/* shared list markers (cards + tool page modal) */
li.feat::before { content: "✦"; color: var(--cyan); font-size: 10px; }
li.pro::before { content: "+"; color: var(--emerald); font-weight: 700; }
li.con::before { content: "−"; color: #FF2BD6; font-weight: 700; }

/* ── Tool page modal ─────────────────────── */
.modal-backdrop[hidden] { display: none; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(4,6,12,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 30px 18px;
  animation: fadeIn 0.25s;
}
@keyframes fadeIn { from { opacity: 0; } }
.tool-modal {
  position: relative; width: 100%; max-width: 780px;
  max-height: 86vh; overflow-y: auto;
  border-radius: 22px; padding: 28px;
  background: linear-gradient(180deg, rgb(10,126,150), rgb(10,126,150));
  border: 1px solid var(--glass-border);
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  animation: popIn 0.3s var(--ease);
}
html[data-theme="light"] .tool-modal { background: linear-gradient(180deg, rgb(251,252,255), rgb(242,246,255)); }
.modal-close {
  position: absolute; top: 14px; right: 18px;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 22px; line-height: 1; padding: 4px;
  z-index: 2;
}
.modal-close:hover { color: var(--text); }
.tm-head { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; padding-right: 26px; }
.tm-title h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.2; }
.tm-title > span { color: var(--text-muted); font-size: 13px; }
.tm-badges { margin-top: 6px; display: flex; gap: 6px; }
.tm-open { margin-left: auto; flex-shrink: 0; }
.tm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.tm-stats > div {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 12px; padding: 11px 12px; text-align: center;
}
.tm-stats b { display: block; font-size: 15px; font-family: var(--font-display); }
.tm-stats small { font-size: 11px; color: var(--text-muted); }
.tm-desc { font-size: 14px; color: var(--text-soft); line-height: 1.65; margin-bottom: 12px; }
.tm-quote { margin-bottom: 18px; }
.tool-modal h5 {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px;
}
.tool-modal ul { list-style: none; font-size: 13px; color: var(--text-soft); }
.tool-modal li { padding: 3px 0; display: flex; gap: 7px; align-items: baseline; }
.tm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; }
.tm-bestfor { margin: 0 0 18px; }
.tm-alts { border-top: 1px solid var(--glass-border); padding-top: 16px; }
.tm-alt {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.tm-alt:hover { background: var(--glass); border-color: var(--glass-border); }
.tm-alt b { display: block; font-size: 13.5px; }
.tm-alt small { color: var(--text-muted); font-size: 11.5px; }
.tm-alt em { margin-left: auto; font-style: normal; color: #FCEE0A; font-size: 12px; font-weight: 600; }
@media (max-width: 640px) {
  .tm-cols { grid-template-columns: 1fr; }
  .tm-stats { grid-template-columns: repeat(2, 1fr); }
  .tm-head { flex-wrap: wrap; }
  .tm-open { margin-left: 0; }
}

/* ── Categories grid ─────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cat-card {
  padding: 22px 20px; border-radius: var(--radius); cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s;
  position: relative; overflow: hidden;
}
.cat-card::after {
  content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%;
  right: -40px; top: -40px; filter: blur(40px); opacity: 0.16;
  background: var(--cat-color, var(--electric));
  transition: opacity 0.3s, transform 0.4s var(--ease);
}
.cat-card:hover { transform: translateY(-5px); border-color: var(--glass-border-hover); box-shadow: 0 18px 44px rgba(0,0,0,0.4); }
.cat-card:hover::after { opacity: 0.35; transform: scale(1.3); }
.cat-icon { font-size: 26px; margin-bottom: 12px; display: block; }
.cat-card b { font-family: var(--font-display); font-size: 15.5px; display: block; margin-bottom: 3px; }
.cat-card small { font-size: 12px; color: var(--text-muted); }

/* ── Collections ─────────────────────────── */
.collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.coll-card {
  position: relative; min-height: 210px; padding: 26px; border-radius: var(--radius);
  display: flex; flex-direction: column; justify-content: flex-end;
  cursor: pointer; overflow: hidden;
  border: 1px solid var(--glass-border);
  transition: transform 0.45s var(--ease), box-shadow 0.45s;
}
.coll-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 26px 60px rgba(0,0,0,0.5); }
.coll-bg { position: absolute; inset: 0; opacity: 0.9; transition: transform 0.6s var(--ease); }
.coll-card:hover .coll-bg { transform: scale(1.06); }
.coll-card > :not(.coll-bg) { position: relative; }
.coll-tag {
  align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
  background: rgba(7,8,13,0.5); color: #fff; backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18); margin-bottom: auto;
}
.coll-card h3 { font-size: 20px; color: #fff; margin: 14px 0 4px; }
.coll-card p { font-size: 12.5px; color: rgba(255,255,255,0.75); }

/* ── Trending dashboard ──────────────────── */
.trend-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; }
.trend-board { padding: 12px; }
.trend-row {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px; border-radius: 14px;
  transition: background 0.2s; cursor: pointer;
}
.trend-row:hover { background: var(--glass); }
.trend-rank {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  width: 26px; color: var(--text-muted); text-align: center; flex-shrink: 0;
}
/* The board now lists dated stories, so the rank column holds a date and
   each row is a real link to the report. */
a.trend-row { color: inherit; text-decoration: none; }
a.trend-row:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
#trendBoard .trend-rank {
  width: 52px; font-family: var(--font-mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: 0.02em; text-align: left;
}
#trendBoard .trend-info b {
  font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.section-link {
  font-size: 13.5px; font-weight: 600; color: var(--cyan); text-decoration: none;
  white-space: nowrap; transition: color 0.2s;
}
.section-link:hover { color: var(--text); }

/* Real counts of the month's stories by category. */
.month-bars { display: flex; flex-direction: column; gap: 14px; flex: 1; justify-content: center; }
.month-bar { display: grid; grid-template-columns: 124px 1fr 22px; align-items: center; gap: 12px; }
.month-bar-label { font-size: 12.5px; color: var(--text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.month-bar-track { height: 8px; border-radius: 999px; background: var(--glass); overflow: hidden; }
.month-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); }
.month-bar-n { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.month-note { margin-top: 18px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.trend-row:nth-child(1) .trend-rank { color: var(--cyan); }
.trend-row:nth-child(2) .trend-rank { color: var(--electric); }
.trend-row:nth-child(3) .trend-rank { color: var(--violet); }
.trend-info { flex: 1; min-width: 0; }
.trend-info b { font-size: 14px; display: block; }
.trend-info small { font-size: 11.5px; color: var(--text-muted); }
.trend-delta { font-size: 12.5px; font-weight: 700; color: var(--emerald); flex-shrink: 0; }
.trend-delta.down { color: #FF2BD6; }
.trend-spark { flex-shrink: 0; opacity: 0.9; }

.trend-chart { padding: 24px; display: flex; flex-direction: column; }
.trend-chart-title { font-size: 13px; font-weight: 600; color: var(--text-soft); margin-bottom: 16px; }
#trendCanvas { width: 100%; flex: 1; }
.trend-legend { display: flex; gap: 18px; margin-top: 14px; font-size: 12px; color: var(--text-muted); }
.trend-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }

.live-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em;
  padding: 7px 15px; border-radius: 999px;
  background: rgba(61,232,160,0.09); color: var(--emerald);
  border: 1px solid rgba(61,232,160,0.3);
}
.live-pill .pulse-dot { background: var(--emerald); box-shadow: 0 0 8px var(--emerald); }

/* ── News ────────────────────────────────── */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-card {
  padding: 24px; border-radius: var(--radius); cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  transition: transform 0.4s var(--ease), border-color 0.3s;
  display: flex; flex-direction: column; gap: 12px;
}
.news-card:hover { transform: translateY(-5px); border-color: var(--glass-border-hover); }
.news-top { display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-muted); }
.news-source {
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; font-size: 10px;
  background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--news-color, var(--cyan));
}
.news-card h3 { font-size: 17px; line-height: 1.35; }
.news-card p { font-size: 13px; color: var(--text-soft); flex: 1; }
.news-tldr {
  font-size: 12px; color: var(--text-soft);
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 12px; padding: 10px 13px;
}
.news-tldr b { color: var(--cyan); font-size: 10.5px; letter-spacing: 0.1em; }

/* ── Research ────────────────────────────── */
.research-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.paper-card {
  padding: 22px; border-radius: var(--radius); cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: transform 0.4s var(--ease), border-color 0.3s;
}
.paper-card:hover { transform: translateY(-4px); border-color: var(--glass-border-hover); }
.paper-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet); }
.paper-card h4 { font-size: 14.5px; margin: 9px 0 7px; line-height: 1.4; }
.paper-card p { font-size: 12px; color: var(--text-muted); }
.paper-bench { margin-top: 14px; }
.paper-bench small { font-size: 10.5px; color: var(--text-muted); display: flex; justify-content: space-between; margin-bottom: 4px; }
.bench-bar { height: 5px; border-radius: 4px; background: var(--glass-border); overflow: hidden; }
.bench-fill { height: 100%; border-radius: 4px; background: var(--grad-brand); width: 0; transition: width 1.2s var(--ease) 0.3s; }
.revealed .bench-fill { width: var(--w); }

/* ── Newsletter ──────────────────────────── */
.newsletter {
  position: relative; overflow: hidden;
  padding: 60px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: center;
}
.newsletter-glow {
  position: absolute; width: 500px; height: 500px; border-radius: 50%;
  right: -150px; top: -200px; filter: blur(100px);
  background: rgba(168,85,247,0.22); pointer-events: none;
}
.newsletter-sub { font-size: 15px; color: var(--text-soft); margin: 14px 0 26px; max-width: 480px; }
.newsletter-form { display: flex; gap: 10px; max-width: 460px; }
.newsletter-form input {
  flex: 1; padding: 13px 20px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--text); font-size: 14.5px; font-family: var(--font-body); outline: none;
  transition: border-color 0.3s;
  min-width: 0;
}
.newsletter-form input:focus { border-color: var(--glass-border-hover); }
.newsletter-note { font-size: 12px; color: var(--text-muted); margin-top: 12px; }
.newsletter-note.success { color: var(--emerald); }
.newsletter-preview { display: flex; flex-direction: column; gap: 12px; position: relative; }
.mail-card {
  display: flex; align-items: center; gap: 13px; padding: 15px 18px;
  transition: transform 0.35s var(--ease);
}
.mail-card:hover { transform: translateX(6px); }
.mail-card b { font-size: 13.5px; display: block; }
.mail-card small { font-size: 12px; color: var(--text-muted); }
.mail-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 10px currentColor; }

/* ── Testimonials ────────────────────────── */
.testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.testi-card {
  padding: 26px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: transform 0.4s var(--ease), border-color 0.3s;
}
.testi-card:hover { transform: translateY(-4px); border-color: var(--glass-border-hover); }
.testi-stars { color: #FCEE0A; font-size: 13px; letter-spacing: 3px; margin-bottom: 14px; }
.testi-card blockquote { font-size: 14.5px; color: var(--text-soft); line-height: 1.65; margin-bottom: 20px; }
.testi-who { display: flex; align-items: center; gap: 12px; }
.testi-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #fff;
  font-family: var(--font-display);
}
.testi-who b { font-size: 13.5px; display: block; }
.testi-who small { font-size: 12px; color: var(--text-muted); }

/* ── Partners ────────────────────────────── */
.partners-section { padding-bottom: 40px; }
.partners-label { text-align: center; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 26px; }
.partners { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.partner {
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: var(--text-muted); padding: 11px 24px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: all 0.3s var(--ease); cursor: default;
}
.partner:hover { color: var(--text); border-color: var(--glass-border-hover); transform: translateY(-2px); }

/* ── Footer ──────────────────────────────── */
.footer {
  margin-top: 90px; border-top: 1px solid var(--glass-border);
  background: linear-gradient(180deg, transparent, rgba(10,126,150,0.6));
  position: relative; z-index: 2;
}
html[data-theme="light"] .footer { background: linear-gradient(180deg, transparent, rgba(233,237,247,0.8)); }
.footer-inner {
  display: grid; grid-template-columns: 1.3fr 2fr; gap: 60px;
  padding-top: 64px; padding-bottom: 44px;
}
.footer-brand p { font-size: 13.5px; color: var(--text-muted); margin: 16px 0 20px; max-width: 300px; }
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--text-soft);
  transition: all 0.25s var(--ease);
}
.footer-social a:hover { color: var(--cyan); border-color: var(--glass-border-hover); transform: translateY(-2px); }
.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.footer-col h4 { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 13.5px; color: var(--text-soft); padding: 5px 0; transition: color 0.2s, transform 0.2s; }
.footer-col a:hover { color: var(--cyan); transform: translateX(2px); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  padding-top: 24px; padding-bottom: 30px;
  border-top: 1px solid var(--glass-border);
  font-size: 12.5px; color: var(--text-muted);
}
.footer-status { display: flex; align-items: center; gap: 8px; }

/* ── Assistant ───────────────────────────── */
.assistant { position: fixed; right: 26px; bottom: 26px; z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.assistant-fab {
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--electric), var(--violet));
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 12px 34px rgba(37,233,255,0.45);
  transition: transform 0.35s var(--ease), box-shadow 0.35s;
  position: relative;
}
.assistant-fab:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 18px 44px rgba(37,233,255,0.6); }
.assistant-panel[hidden] { display: none; }
.assistant-panel {
  width: 360px; max-width: calc(100vw - 48px); height: 480px; max-height: 65vh;
  background: var(--glass-strong);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow);
  animation: popIn 0.35s var(--ease);
}
.assistant-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid var(--glass-border);
}
.assistant-head b { font-size: 14.5px; font-family: var(--font-display); display: block; }
.assistant-head small { font-size: 11.5px; color: var(--text-muted); }
.assistant-head .icon-btn { margin-left: auto; }
.assistant-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  display: grid; place-items: center; position: relative;
}
.assistant-avatar span {
  width: 10px; height: 10px; border-radius: 50%; background: #fff;
  animation: pulse 2s infinite;
}
.assistant-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg {
  max-width: 85%; padding: 11px 15px; border-radius: 16px;
  font-size: 13.5px; line-height: 1.55;
  animation: popIn 0.3s var(--ease);
}
.msg.bot { background: var(--glass); border: 1px solid var(--glass-border); border-bottom-left-radius: 5px; align-self: flex-start; color: var(--text-soft); }
.msg.user {
  background: linear-gradient(120deg, var(--electric), var(--violet)); color: #fff;
  border-bottom-right-radius: 5px; align-self: flex-end;
}
.msg.typing span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); margin-right: 3px; animation: blink 1.2s infinite; }
.msg.typing span:nth-child(2) { animation-delay: 0.2s; }
.msg.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%,100% { opacity: 0.25; } 50% { opacity: 1; } }
.assistant-suggestions { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.sugg {
  font-size: 12.5px; color: var(--cyan); background: rgba(37,233,255,0.06);
  border: 1px solid rgba(37,233,255,0.25); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; font-family: var(--font-body);
  transition: all 0.25s;
}
.sugg:hover { background: rgba(37,233,255,0.14); transform: translateX(3px); }
.assistant-input {
  display: flex; gap: 9px; padding: 14px;
  border-top: 1px solid var(--glass-border);
}
.assistant-input input {
  flex: 1; background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 999px; padding: 10px 17px; color: var(--text);
  font-size: 13.5px; outline: none; font-family: var(--font-body); min-width: 0;
}
.assistant-input input:focus { border-color: var(--glass-border-hover); }

/* ── Toast ───────────────────────────────── */
.toast {
  position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 80px);
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  color: var(--text); font-size: 13.5px; font-weight: 500;
  padding: 13px 24px; border-radius: 999px; z-index: 300;
  box-shadow: var(--shadow); opacity: 0;
  transition: transform 0.45s var(--ease), opacity 0.45s;
  pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ── Reveal on scroll ────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.revealed { opacity: 1; transform: none; }

/* ── Responsive ──────────────────────────── */
@media (max-width: 1100px) {
  .nav-menu { display: none; }
  /* The mega menu is a sibling of .nav-menu, not a child, so hiding the menu
     never hid it. Hidden only by visibility, it stayed in layout: its 485px
     grid overflowed a 390px phone, the layout viewport grew to fit, and every
     fixed element — the nav included — stretched past the screen edge, so
     the whole page could be dragged sideways on iOS. Nothing opens it below
     this width, so take it out of layout. */
  .mega-menu { display: none; }
  .nav-burger { display: inline-flex; }
  .tool-grid, .news-grid, .testi-grid, .collection-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-grid, .research-grid { grid-template-columns: repeat(2, 1fr); }
  .trend-grid { grid-template-columns: 1fr; }
  .newsletter { grid-template-columns: 1fr; padding: 44px 32px; }
  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .mega-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 680px) {
  .tool-grid, .news-grid, .testi-grid, .collection-grid, .cat-grid, .research-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .search-kbd { display: none; }
  .search-go { display: none; }
  .nav-login { display: none; }
  .nav-actions .badge-dot, #bookmarkNavBtn, .nav-actions .btn-primary { display: none; }
  .seg-control { overflow-x: auto; max-width: 100%; }
  .section { padding: 64px 20px 6px; }
  .newsletter-form { flex-direction: column; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .hero-badge { font-size: 11px; }
}

/* ── Holographic AI clone ────────────────── */
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) 460px;
  gap: 56px; align-items: center;
  max-width: 1280px; width: 100%;
  text-align: left;
}
.hero-inner .hero-content { max-width: 760px; }
/* 4.8vw made "Then build the whole stack." wrap to a third line from
   1181px to 1439px, which is most laptops. 4.4vw fixed it but left only
   8px of headroom at 1366 — one font fallback away from breaking again.
   4.2vw holds two lines with ~40px to spare and still hits the 64px cap
   on wide screens. */
.hero-inner .hero-title { font-size: clamp(38px, 4.2vw, 64px); }
.hero-inner .hero-sub { font-size: clamp(15px, 1.6vw, 17.5px); margin-bottom: 36px; }
.hero-inner .hero-badge { margin-bottom: 24px; }
.hero-inner .hero-search { margin: 0 0 22px; }
.hero-inner .hero-chips { justify-content: flex-start; }
.hero-inner .hero-ctas { justify-content: flex-start; }

.hero-holo {
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  outline: none;
}
.hero-holo:focus-visible .holo-stage { outline: 2px solid var(--cyan); outline-offset: 8px; border-radius: 20px; }

.holo-stage {
  position: relative; width: 420px; height: 440px;
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out;
  will-change: transform;
}

.holo-head {
  position: absolute; left: 50%; top: 0;
  /* 420x429 (aspect 0.98). At 330px wide the horizontal field of view was
     narrower than the shapes, so the cube and sphere were clipped at the
     left and right edges. Widening the box fixes that at full scale,
     rather than pushing the camera back and shrinking the hologram. */
  width: 420px; height: 429px;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 18px rgba(37,233,255,0.2));
  animation: holoFloat 7s ease-in-out infinite, holoFlicker 6s ease-in-out infinite;
  z-index: 2;
}

/* Artwork hologram mode: user-supplied image, melted into the scene */
.holo-img {
  position: absolute; left: 50%; top: -10px;
  width: 352px; height: 456px;
  transform: translateX(-50%);
  animation: holoFloat 7s ease-in-out infinite, holoFlicker 6s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
.holo-img img,
.holo-img::after {
  -webkit-mask-image: radial-gradient(76% 86% at 50% 46%, #000 55%, transparent 81%);
  mask-image: radial-gradient(76% 86% at 50% 46%, #000 55%, transparent 81%);
}
.holo-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  mix-blend-mode: screen; /* dark artwork background disappears into the page */
  filter: saturate(1.18) brightness(1.08) contrast(1.06);
}
.holo-img::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(37,233,255,0.055) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  opacity: 0.65;
}
.img-mode .holo-orb,
.img-mode .holo-orbit,
.img-mode .chip-aiday { display: none; } /* the artwork brings its own */
html[data-theme="light"] .holo-img img { mix-blend-mode: normal; border-radius: 28px; }

.holo-orbit {
  position: absolute; left: 50%;
  border: 1px dashed rgba(37,233,255,0.24);
  border-radius: 50%;
  pointer-events: none;
}
.orbit-a {
  width: 384px; height: 132px; margin-left: -192px; top: 196px;
  transform: rotate(-13deg);
  animation: orbitBreath 6s ease-in-out infinite;
}
.orbit-b {
  width: 300px; height: 96px; margin-left: -150px; top: 130px;
  transform: rotate(9deg);
  border-color: rgba(168,85,247,0.22);
  animation: orbitBreath 6s ease-in-out infinite -3s;
}
@keyframes orbitBreath { 50% { opacity: 0.45; } }

.holo-orb {
  position: absolute; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--glass);
  border: 1px solid rgba(37,233,255,0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--cyan);
  box-shadow: 0 0 20px rgba(37,233,255,0.16), inset 0 0 12px rgba(37,233,255,0.08);
  animation: chipFloat 5.5s ease-in-out infinite;
  pointer-events: none;
}
.orb-code  { left: -14px; top: 58px;  animation-delay: -1.2s; }
.orb-spark { right: -4px; top: 18px;  animation-delay: -2.8s; color: #C9A2FF; border-color: rgba(168,85,247,0.4); box-shadow: 0 0 20px rgba(168,85,247,0.2); }
.orb-image { right: -28px; top: 206px; animation-delay: -0.6s; }
.orb-chart { left: -30px; top: 274px; animation-delay: -3.4s; color: var(--emerald); border-color: rgba(61,232,160,0.35); box-shadow: 0 0 20px rgba(61,232,160,0.16); }

.chip-aiday {
  bottom: 44px; right: -18px;
  animation-delay: -2s;
}
.aiday-logo {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #FF2BD6, #FF2BD6);
  color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 17px;
  box-shadow: 0 4px 14px rgba(255,43,214,0.35);
}
.chip-aiday b { display: block; font-size: 12.5px; color: var(--text); line-height: 1.3; }
.aiday-label { display: block; color: var(--cyan); font-size: 8.5px; font-weight: 700; letter-spacing: 0.16em; }
.aiday-stars { font-style: normal; color: #FCEE0A; font-size: 9.5px; letter-spacing: 1px; }

.holo-ripples span {
  position: absolute; left: 50%; bottom: 22px;
  width: 170px; height: 46px; margin-left: -85px;
  border: 1px solid rgba(37,233,255,0.55);
  border-radius: 50%;
  opacity: 0;
  animation: baseRipple 3.8s linear infinite;
  pointer-events: none;
}
.holo-ripples span:nth-child(2) { animation-delay: -1.27s; }
.holo-ripples span:nth-child(3) { animation-delay: -2.53s; }
@keyframes baseRipple {
  0% { transform: scale(0.3); opacity: 0; }
  12% { opacity: 0.75; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes holoFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-13px); }
}
/* smooth shimmer — no hard opacity steps (they read as blinking) */
@keyframes holoFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.93; }
}
.holo-core { animation: corePulse 2.4s ease-in-out infinite; transform-origin: 100px 122px; }
@keyframes corePulse { 50% { opacity: 0.45; transform: scale(1.35); } }

.holo-scan {
  position: absolute; left: 12%; right: 12%; top: 0; height: 54px;
  background: linear-gradient(180deg, transparent, rgba(37,233,255,0.32), transparent);
  border-radius: 50%;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: holoScanMove 4.4s linear infinite;
}
@keyframes holoScanMove {
  0% { transform: translateY(-30px); opacity: 0; }
  10% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translateY(370px); opacity: 0; }
}

.holo-beam {
  position: absolute; left: 50%; bottom: 42px;
  width: 260px; height: 340px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(37,233,255,0), rgba(37,233,255,0.09) 55%, rgba(37,233,255,0.22));
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  filter: blur(2px);
  pointer-events: none;
  animation: beamPulse 5s ease-in-out infinite;
}
@keyframes beamPulse { 50% { opacity: 0.55; } }

.holo-base {
  position: absolute; left: 50%; bottom: 8px;
  width: 240px; height: 80px;
  transform: translateX(-50%);
  overflow: visible;
}
.holo-base ellipse { fill: none; stroke: var(--cyan); }
.be1 { stroke-width: 1; opacity: 0.5; stroke-dasharray: 12 9; animation: baseDash 7s linear infinite; }
.be2 { stroke-width: 1; opacity: 0.4; stroke-dasharray: 5 7; animation: baseDash 9s linear infinite reverse; }
.be3 { stroke-width: 1.4; opacity: 0.65; animation: baseBreath 3.4s ease-in-out infinite; }
@keyframes baseDash { to { stroke-dashoffset: -200; } }
@keyframes baseBreath { 50% { opacity: 0.25; } }
.base-glow {
  position: absolute; left: 50%; bottom: 0;
  width: 230px; height: 62px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(37,233,255,0.35), transparent 70%);
  filter: blur(9px);
  pointer-events: none;
}

.holo-particles span {
  position: absolute; bottom: 66px;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 9px var(--cyan);
  opacity: 0;
  animation: holoRise 5.2s linear infinite;
}
.holo-particles span:nth-child(1) { left: 24%; animation-delay: 0s; }
.holo-particles span:nth-child(2) { left: 38%; animation-delay: -1.4s; animation-duration: 6.1s; }
.holo-particles span:nth-child(3) { left: 50%; animation-delay: -2.8s; }
.holo-particles span:nth-child(4) { left: 61%; animation-delay: -0.9s; animation-duration: 4.4s; }
.holo-particles span:nth-child(5) { left: 72%; animation-delay: -3.6s; animation-duration: 6.6s; }
.holo-particles span:nth-child(6) { left: 83%; animation-delay: -2.1s; }
@keyframes holoRise {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.9; }
  75% { opacity: 0.35; }
  100% { transform: translateY(-310px); opacity: 0; }
}

.holo-chip {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 14px;
  font-size: 11.5px; color: var(--text-soft);
  box-shadow: var(--shadow);
  white-space: nowrap;
  animation: chipFloat 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chipFloat { 50% { transform: translateY(-9px); } }
.chip-status {
  top: 30px; right: -30px;
  color: var(--text); font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.08em;
  animation-delay: -1s;
}
.chip-score { top: 158px; left: -46px; animation-delay: -2.5s; }
.chip-voice { bottom: 128px; right: -34px; animation-delay: -3.8s; }
.holo-chip small { line-height: 1.4; color: var(--text-muted); font-size: 10.5px; }
.score-ring {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px; color: var(--text);
  background:
    radial-gradient(closest-side, var(--bg-2) 72%, transparent 73% 100%),
    conic-gradient(var(--cyan) 0 89%, rgba(255,255,255,0.14) 89% 100%);
}
.wave { display: flex; gap: 3px; align-items: center; height: 20px; }
.wave i {
  width: 3px; height: 6px; border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), var(--violet));
  animation: wavey 1.1s ease-in-out infinite;
}
.wave i:nth-child(2) { animation-delay: 0.15s; }
.wave i:nth-child(3) { animation-delay: 0.3s; }
.wave i:nth-child(4) { animation-delay: 0.45s; }
.wave i:nth-child(5) { animation-delay: 0.6s; }
@keyframes wavey { 0%, 100% { height: 6px; } 50% { height: 19px; } }

.holo-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
}
.holo-label span { text-transform: none; letter-spacing: 0.02em; color: var(--cyan); font-weight: 500; }
.holo-label b { color: var(--cyan); font-weight: 600; }
.hero-holo:hover .holo-label span { text-shadow: 0 0 12px rgba(37,233,255,0.6); }

html[data-theme="light"] .holo-figure { filter: drop-shadow(0 0 22px rgba(37,233,255,0.45)); }
html[data-theme="light"] .holo-scan { mix-blend-mode: normal; opacity: 0.5; }

@media (max-width: 1180px) {
  /* minmax(0,·) not 1fr — `1fr` has an auto minimum that a wide child
     can push past, which is what broke the mobile hero. */
  .hero-inner { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .hero-inner .hero-content { max-width: 100%; min-width: 0; }
  .hero-holo { display: none; }
  .hero-inner .hero-content { margin: 0 auto; }
  .hero-inner .hero-search { margin: 0 auto 22px; }
  .hero-inner .hero-chips, .hero-inner .hero-ctas { justify-content: center; }
}

/* ── Nova guide pop-up ───────────────────── */
.nova-pop {
  position: fixed; right: 26px; bottom: 106px; z-index: 950;
  width: 308px; padding: 16px 18px;
  display: flex; gap: 13px; align-items: flex-start;
  border-radius: 18px;
  box-shadow: var(--shadow), 0 0 46px rgba(37,233,255,0.14);
  opacity: 0; transform: translateY(16px) scale(0.96);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
  pointer-events: none;
}
.nova-pop.show { opacity: 1; transform: none; pointer-events: auto; }
.nova-pop-close {
  position: absolute; top: 6px; right: 11px;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 17px; line-height: 1;
  padding: 4px;
}
.nova-pop-close:hover { color: var(--text); }
.nova-face {
  flex-shrink: 0; position: relative;
  animation: novaFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(37,233,255,0.35));
}
/* bot hover thrust + ambient sparks */
.nf-thrust {
  animation: thrustPulse 1.5s ease-in-out infinite;
  transform-box: fill-box; transform-origin: 50% 0;
}
@keyframes thrustPulse {
  50% { opacity: 0.4; transform: scaleY(0.78); }
}
.nf-spark { animation: sparkTw 2.6s ease-in-out infinite; }
.nf-spark.s2 { animation-delay: -0.9s; }
.nf-spark.s3 { animation-delay: -1.7s; }
@keyframes sparkTw {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 1; }
}
@keyframes novaFloat { 50% { transform: translateY(-4px); } }
.nf-eye {
  animation: novaBlink 4.4s infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes novaBlink {
  0%, 91%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.12); }
  97% { transform: scaleY(1); }
}
.nova-pop-txt b { font-size: 13.5px; font-family: var(--font-display); }
.nova-pop-txt p { font-size: 12.5px; color: var(--text-soft); margin: 4px 0 11px; line-height: 1.55; }
.nova-pop-actions { display: flex; gap: 8px; }
.btn-sm { padding: 7px 14px; font-size: 12px; border-radius: 10px; }
.assistant-fab .nova-face-svg { display: block; }

@media (max-width: 640px) { .nova-pop { right: 14px; width: calc(100vw - 28px); max-width: 320px; } }

/* ── Immersive search panel ──────────────── */
/* ── Stacking order, documented so it stops being guesswork ──
     200  assistant (fixed)
     100  nav (fixed)
      60  search panel + its dropdown   ← must beat hero CTAs and the ticker
       2  hero content, ticker
       0  hero decoration
   The panel carries a transform, which makes it a stacking context. That
   traps the dropdown's own z-index inside it, so the panel itself has to
   sit above later siblings or the CTA buttons and ticker paint over it. */
.search-panel {
  --mx: 50%;
  position: relative;
  z-index: 60;
  max-width: 720px;
  margin: 0 0 26px;
  padding: 12px;
  border-radius: 26px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(180deg, rgba(10,126,150,0.82), rgba(10,126,150,0.92)) padding-box,
    radial-gradient(200px 100px at var(--mx) -12%, rgba(37,233,255,0.95), transparent 65%) border-box,
    linear-gradient(120deg, rgba(37,233,255,0.5), rgba(37,233,255,0.32) 45%, rgba(168,85,247,0.55)) border-box;
  transition: box-shadow 0.45s var(--ease);
}
/* ambient aura breathing behind the panel */
.search-panel::before {
  content: ""; position: absolute; inset: -36px -46px; z-index: -1;
  background:
    radial-gradient(45% 62% at 20% 50%, rgba(37,233,255,0.17), transparent 70%),
    radial-gradient(45% 62% at 80% 50%, rgba(168,85,247,0.19), transparent 70%),
    radial-gradient(62% 72% at 50% 112%, rgba(37,233,255,0.15), transparent 70%);
  filter: blur(26px);
  opacity: 0.4;
  animation: auraDrift 9s ease-in-out infinite alternate;
  transition: opacity 0.7s;
  pointer-events: none;
}
@keyframes auraDrift {
  from { transform: translateX(-12px) scale(1); }
  to { transform: translateX(12px) scale(1.05); }
}
.search-panel.lit::before { opacity: 0.85; }
/* light sweep each time the panel scrolls into view */
.search-panel::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.09) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 120% 0;
  pointer-events: none;
}
.search-panel.lit::after { animation: panelSweep 1.5s var(--ease) 0.1s both; }
@keyframes panelSweep {
  from { background-position: 120% 0; }
  to { background-position: -60% 0; }
}
/* hover = the whole bar glows up */
.search-panel:hover {
  box-shadow:
    0 0 0 1px rgba(37,233,255,0.32),
    0 14px 80px rgba(37,233,255,0.34),
    0 0 150px rgba(37,233,255,0.2);
}
.search-panel:hover::before { opacity: 1; }
.search-panel:hover .search-shell {
  border-color: rgba(37,233,255,0.42);
  box-shadow:
    0 0 26px rgba(37,233,255,0.18),
    inset 0 0 20px rgba(37,233,255,0.055);
}
.search-panel:hover .search-kbd { border-color: rgba(37,233,255,0.35); color: var(--cyan); }
.search-panel:hover .search-icon { color: var(--cyan); }
/* sheen sweeps across the bar on hover-in */
.search-shell { position: relative; overflow: hidden; }
.search-shell::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.13) 50%, transparent 58%);
  background-size: 250% 100%;
  opacity: 0;
  pointer-events: none;
}
.search-panel:hover .search-shell::after { animation: shellSheen 1s var(--ease) both; }
@keyframes shellSheen {
  from { opacity: 0; background-position: 130% 0; }
  25% { opacity: 1; }
  to { opacity: 0; background-position: -50% 0; }
}

/* typing = full immersion */
.search-panel:focus-within {
  box-shadow:
    0 0 0 1px rgba(37,233,255,0.22),
    0 14px 70px rgba(37,233,255,0.26),
    0 0 130px rgba(37,233,255,0.12);
}
.search-panel:focus-within::before { opacity: 1; }

.search-panel .hero-search { max-width: none; margin: 0; }
.search-panel .search-shell {
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.07);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.search-panel .search-shell:focus-within {
  transform: none;
  border-color: rgba(37,233,255,0.35);
  box-shadow: 0 0 0 4px rgba(37,233,255,0.07);
}
.search-panel .hero-chips {
  margin: 13px 6px 3px;
  justify-content: flex-start;
  flex-wrap: nowrap; /* always a single clean row */
  overflow-x: auto;
  scrollbar-width: none;
  /* Without this the row reports its full width as min-content and
     inflates the hero grid track — the scroll container can never
     shrink, so it overflows instead of scrolling. */
  min-width: 0;
}
.search-panel .hero-chips::-webkit-scrollbar { display: none; }
.search-panel .chip { white-space: nowrap; flex-shrink: 0; }

html[data-theme="light"] .search-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.88), rgba(243,246,255,0.94)) padding-box,
    radial-gradient(200px 100px at var(--mx) -12%, rgba(10,126,150,0.75), transparent 65%) border-box,
    linear-gradient(120deg, rgba(10,126,150,0.45), rgba(37,233,255,0.3) 45%, rgba(168,85,247,0.45)) border-box;
}
html[data-theme="light"] .search-panel::before { opacity: 0.3; }
/* The aura's box reached 46px past each side of the panel. On a phone the
   panel already sits ~20px from each screen edge, so the box pushed the
   document 14px wider than the screen and the whole page could be dragged
   sideways. The blur spreads the glow visually regardless of the box, so
   pulling the box in changes nothing you can see. */
@media (max-width: 680px) {
  .search-panel::before { inset: -30px -14px; }
}
html[data-theme="light"] .search-panel.lit::before { opacity: 0.55; }

@media (max-width: 1180px) {
  .search-panel { margin: 0 auto 26px; }
  /* Centred flex content that overflows a scroll container is
     unreachable — you can never scroll back to the first chip.
     `safe center` centres only while it fits, then falls back to
     start. The plain declaration first keeps old browsers reachable. */
  .search-panel .hero-chips { justify-content: flex-start; }
  .search-panel .hero-chips { justify-content: safe center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════
   INDIVIDUAL TOOL PAGE  (tool.html)
   ══════════════════════════════════════════ */
.tool-page { padding-top: 120px; padding-bottom: 80px; max-width: 1080px; }
.tp-loading { color: var(--text-muted); padding: 60px 0; }

.tp-back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--text-muted);
  margin-bottom: 26px; transition: color 0.2s;
}
.tp-back:hover { color: var(--cyan); }

/* hero */
.tp-hero {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-bottom: 26px; margin-bottom: 26px;
  border-bottom: 1px solid var(--glass-border);
}
.tp-title { flex: 1; min-width: 200px; }
.tp-title h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.02em;
}
.tp-cat { color: var(--text-muted); font-size: 14.5px; margin-top: 4px; }
.tp-badges { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
.tp-cta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* stat tiles */
.tp-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 34px;
}
.tp-stats > div {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 15px 14px; text-align: center;
}
.tp-stats b {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--font-display); font-size: 17px;
}
.tp-stats small { display: block; color: var(--text-muted); font-size: 11.5px; margin-top: 5px; }

/* body: main + sidebar */
.tp-body { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start; }
.tp-main h2 {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  margin: 28px 0 12px; letter-spacing: -0.01em;
}
.tp-main h2:first-child { margin-top: 0; }
.tp-desc { font-size: 15.5px; color: var(--text-soft); line-height: 1.7; }
.tp-quote { margin: 16px 0 0; font-size: 14px; }
.tp-list { list-style: none; font-size: 14.5px; color: var(--text-soft); }
.tp-list li { padding: 5px 0; display: flex; gap: 9px; align-items: baseline; }
.tp-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

/* sidebar card */
.tp-side { position: static; }
.tp-card {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 20px; backdrop-filter: blur(14px);
}
.tp-card h3 {
  font-family: var(--font-display); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 14px;
}
.tp-facts { display: flex; flex-direction: column; gap: 11px; margin-bottom: 16px; }
.tp-facts > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.tp-facts dt { color: var(--text-muted); }
.tp-facts dd { color: var(--text); font-weight: 500; text-align: right; }  /* 550 was faux-rendered */
.tp-facts a { color: var(--cyan); }
.tp-facts a:hover { text-decoration: underline; }

/* alternatives */
.tp-alts { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--glass-border); }
.tp-alts h2 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin-bottom: 16px; }
.tp-alt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tp-alt {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.tp-alt:hover {
  transform: translateY(-3px); border-color: var(--glass-border-hover);
  box-shadow: 0 14px 34px rgba(0,0,0,0.35);
}
.tp-alt-txt { min-width: 0; flex: 1; }
.tp-alt-txt b { display: block; font-size: 14px; }
.tp-alt-txt small { color: var(--text-muted); font-size: 11.5px; }
.tp-alt em { font-style: normal; color: #FCEE0A; font-size: 12.5px; font-weight: 600; }

/* not-found */
.tp-empty { padding: 60px 0 40px; max-width: 52ch; }
.tp-empty h1 { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 34px); margin-bottom: 12px; }
.tp-empty p { color: var(--text-soft); margin-bottom: 22px; line-height: 1.65; }
.tp-empty code { font-family: var(--font-body); color: var(--cyan); }

/* footer bits used by tool.html */
.footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a { color: var(--text-muted); font-size: 13.5px; transition: color 0.2s; }
.footer-links a:hover { color: var(--cyan); }
.footer-copy { color: var(--text-muted); font-size: 13.5px; }

@media (max-width: 900px) {
  .tp-body { grid-template-columns: 1fr; }
  .tp-side { position: static; }
  .tp-stats { grid-template-columns: repeat(2, 1fr); }
  .tp-alt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .tp-pc { grid-template-columns: 1fr; }
  .tp-alt-grid { grid-template-columns: 1fr; }
  .tp-cta { width: 100%; }
}

/* ══════════════════════════════════════════
   BROWSE / DIRECTORY  (ai-tools.html)
   ══════════════════════════════════════════ */
.browse { padding-top: 120px; padding-bottom: 80px; }
.br-head { margin-bottom: 30px; }
.br-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -0.02em;
  margin: 8px 0 10px;
}
.br-sub { color: var(--text-soft); font-size: 15.5px; max-width: 60ch; }

.br-layout { display: grid; grid-template-columns: 244px 1fr; gap: 28px; align-items: start; }

/* ── filter rail ── */
.br-filters {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 20px 18px;
  backdrop-filter: blur(14px);
}
.br-filter-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--glass-border);
}
.br-filter-head h2 { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.br-clear {
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
  color: var(--text-muted); font-size: 12.5px; transition: color 0.2s;
}
.br-clear:hover { color: var(--cyan); }

.br-group { margin-bottom: 20px; }
.br-group:last-child { margin-bottom: 0; }
.br-label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 9px;
}
.br-label b { color: var(--cyan); font-weight: 600; }

.br-search { position: relative; display: flex; align-items: center; }
.br-search svg { position: absolute; left: 11px; color: var(--text-muted); pointer-events: none; }
.br-search input {
  width: 100%; padding: 9px 11px 9px 32px; border-radius: 11px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border);
  color: var(--text); font-family: var(--font-body); font-size: 13.5px; outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.br-search input:focus { border-color: rgba(37,233,255,0.4); box-shadow: 0 0 0 3px rgba(37,233,255,0.08); }
html[data-theme="light"] .br-search input { background: rgba(7,8,13,0.03); }

.br-checks, .br-cats { display: flex; flex-direction: column; gap: 2px; }
.br-cats { max-height: 260px; overflow-y: auto; padding-right: 4px; }
.br-cats::-webkit-scrollbar { width: 5px; }
.br-cats::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; }
.br-checks label, .br-cats label {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 13.5px; color: var(--text-soft);
  padding: 6px 8px; border-radius: 9px; transition: background 0.15s, color 0.15s;
}
.br-checks label:hover, .br-cats label:hover { background: var(--glass); color: var(--text); }
.br-checks input, .br-cats input { accent-color: var(--cyan); width: 15px; height: 15px; cursor: pointer; flex: none; }
.br-cats label span { flex: 1; min-width: 0; }
.br-cats label em {
  font-style: normal; font-size: 11.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.br-range { width: 100%; accent-color: var(--cyan); cursor: pointer; }

/* ── results ── */
.br-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.br-count { color: var(--text-muted); font-size: 14px; }
.br-count b { color: var(--text); font-family: var(--font-display); font-size: 17px; }
.br-sort { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-muted); }
.br-sort select {
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--text);
  font-family: var(--font-body); font-size: 13.5px; padding: 8px 12px; border-radius: 11px;
  cursor: pointer; outline: none;
}
.br-sort select:focus { border-color: rgba(37,233,255,0.4); }

.br-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.br-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: 12.5px; color: var(--cyan);
  background: rgba(37,233,255,0.08); border: 1px solid rgba(37,233,255,0.26);
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.br-chip:hover { background: rgba(37,233,255,0.16); border-color: rgba(37,233,255,0.5); }
.br-chip span { opacity: 0.75; font-size: 14px; line-height: 1; }

.br-results .tool-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.br-empty { text-align: center; padding: 60px 20px; }
.br-empty h3 { font-family: var(--font-display); font-size: 19px; margin-bottom: 8px; }
.br-empty p { color: var(--text-muted); font-size: 14px; margin-bottom: 18px; }

.br-more-wrap { display: flex; justify-content: center; margin-top: 30px; }

@media (max-width: 940px) {
  .br-layout { grid-template-columns: 1fr; }
  .br-cats { max-height: 200px; }
}

/* Card header: survive narrow columns (browse grid) without collisions */
.tool-top > div { min-width: 0; }
.tool-name-row { flex-wrap: nowrap; min-width: 0; }
.tool-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-cat {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tool-badges-top { align-self: flex-start; }
.br-results .tool-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* ══════════════════════════════════════════
   COLLECTIONS  (collections.html / collection.html)
   ══════════════════════════════════════════ */
.collections-page, .collection-page { padding-top: 120px; padding-bottom: 80px; }
.collection-page { max-width: 900px; }

/* ── index grid ── */
.coll-index-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px;
}
.coll-index-card {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius); min-height: 250px;
  border: 1px solid var(--glass-border);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s;
}
.coll-index-card:hover {
  transform: translateY(-6px);
  border-color: var(--glass-border-hover);
  box-shadow: 0 26px 60px rgba(0,0,0,0.48);
}
.coll-index-card .coll-bg { position: absolute; inset: 0; z-index: -1; }
.coll-index-card .coll-tag { align-self: flex-start; margin-bottom: auto; }
.coll-index-body h2 {
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  letter-spacing: -0.01em; margin-bottom: 5px;
}
.coll-index-body p { font-size: 13.5px; color: rgba(255,255,255,0.72); }
.coll-foot {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.coll-faces { display: flex; }
.coll-faces .tool-logo {
  box-shadow: 0 0 0 2px rgba(10,14,26,0.55);
  margin-left: -7px;
}
.coll-faces .tool-logo:first-child { margin-left: 0; }
.coll-count {
  margin-left: auto; font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,0.9);
  font-variant-numeric: tabular-nums;
}

/* ── detail hero ── */
.coll-hero {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--radius); padding: 34px 30px 28px;
  border: 1px solid var(--glass-border);
  margin-bottom: 26px;
}
.coll-hero .coll-bg { position: absolute; inset: 0; z-index: -1; }
.coll-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 4.2vw, 42px); line-height: 1.08;
  letter-spacing: -0.02em; margin: 14px 0 8px;
}
.coll-hero-sub { font-size: 16px; color: rgba(255,255,255,0.82); }
.coll-meta {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 16px; font-size: 12.5px; color: rgba(255,255,255,0.66);
}
.coll-meta b { color: #fff; font-family: var(--font-display); font-size: 14px; }

.coll-intro {
  font-size: 15.5px; line-height: 1.75; color: var(--text-soft);
  border-left: 2px solid var(--violet); padding-left: 16px;
  margin-bottom: 32px; max-width: 68ch;
}

/* ── ranked list ── */
.coll-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.coll-item {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: transform 0.35s var(--ease), border-color 0.3s, box-shadow 0.35s;
}
.coll-item:hover {
  transform: translateY(-3px); border-color: var(--glass-border-hover);
  box-shadow: 0 16px 40px rgba(0,0,0,0.36);
}
.coll-rank {
  flex: none; width: 30px; text-align: center;
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.coll-item:nth-child(1) .coll-rank { color: #FCEE0A; }
.coll-item:nth-child(2) .coll-rank { color: #C9D3E5; }
.coll-item:nth-child(3) .coll-rank { color: #FCEE0A; }
.coll-item-main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; }
.coll-item-txt { min-width: 0; }
.coll-item-txt b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.coll-item-cat { display: block; font-size: 11.5px; color: var(--text-muted); margin-bottom: 4px; }
.coll-why { font-size: 13px; color: var(--text-soft); line-height: 1.5; }
.coll-item-side {
  flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 7px;
}
.coll-scores { display: flex; gap: 10px; align-items: center; font-size: 12.5px; }
.coll-badges { display: flex; gap: 5px; }
.coll-visit { padding: 5px 12px; font-size: 12px; }

/* ── more collections ── */
.coll-more { margin-top: 46px; padding-top: 28px; border-top: 1px solid var(--glass-border); }
.coll-more h2 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin-bottom: 14px; }
.coll-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.coll-more-card {
  padding: 14px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.coll-more-card:hover { transform: translateY(-3px); border-color: var(--glass-border-hover); }
.coll-more-bar { display: block; height: 4px; width: 40px; border-radius: 3px; margin-bottom: 10px; }
.coll-more-card b { display: block; font-size: 14px; margin-bottom: 3px; }
.coll-more-card small { color: var(--text-muted); font-size: 12px; }

@media (max-width: 680px) {
  .coll-item { flex-wrap: wrap; }
  .coll-item-side { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ══════════════════════════════════════════
   BLOG  (blog.html / post.html)
   ══════════════════════════════════════════ */
.blog-page, .post-page { padding-top: 120px; padding-bottom: 80px; }
.post-page { max-width: 760px; }

.blog-meta { font-size: 12.5px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.blog-cat {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cyan); background: rgba(37,233,255,0.08);
  border: 1px solid rgba(37,233,255,0.24); padding: 3px 9px; border-radius: 999px;
}
.blog-dot { opacity: 0.4; }

/* ── featured ── */
.blog-feature {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--glass-border); background: var(--glass);
  margin-bottom: 34px;
  transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s;
}
.blog-feature:hover { transform: translateY(-5px); border-color: var(--glass-border-hover); box-shadow: 0 26px 60px rgba(0,0,0,0.45); }
.blog-feature-art { position: relative; min-height: 260px; }
.blog-feature-badge {
  position: absolute; top: 16px; left: 16px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,0.35); backdrop-filter: blur(6px);
  padding: 5px 11px; border-radius: 999px;
}
.blog-feature-body { padding: 30px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.blog-feature-body h2 { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; }
.blog-excerpt { color: var(--text-soft); font-size: 14.5px; line-height: 1.6; }
.blog-read { color: var(--cyan); font-weight: 600; font-size: 13.5px; margin-top: 4px; }

/* ── grid ── */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.blog-card {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--glass-border); background: var(--glass);
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s;
}
.blog-card:hover { transform: translateY(-5px); border-color: var(--glass-border-hover); box-shadow: 0 20px 46px rgba(0,0,0,0.4); }
.blog-card-art { height: 130px; }
.blog-card-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.blog-card-body h3 { font-family: var(--font-display); font-size: 17.5px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }

/* ── article ── */
.post-head { margin-bottom: 22px; }
.post-head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 4.4vw, 44px); line-height: 1.1; letter-spacing: -0.02em; margin: 12px 0 12px; text-wrap: balance; }
.post-lede { font-size: 18px; color: var(--text-soft); line-height: 1.6; }
.post-byline { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.post-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: #fff; }
.post-byline b { display: block; font-size: 14px; }
.post-byline small { color: var(--text-muted); font-size: 12.5px; }
.post-art { height: 200px; border-radius: var(--radius); margin: 4px 0 30px; }

.post-body { font-size: 16.5px; line-height: 1.75; color: var(--text-soft); }
.post-body h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; margin: 34px 0 12px; }
.post-body p { margin-bottom: 18px; }
.post-ul { list-style: none; margin: 0 0 20px; padding: 0; }
.post-ul li { position: relative; padding: 4px 0 4px 24px; }
.post-ul li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--violet)); }
.post-body blockquote {
  margin: 26px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--violet);
  font-family: var(--font-display); font-size: 21px; font-weight: 500; line-height: 1.4;
  color: var(--text); letter-spacing: -0.01em;
}

/* inline tool cards in an article */
.post-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 8px 0 26px; }
.post-tool {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.post-tool:hover { transform: translateY(-3px); border-color: var(--glass-border-hover); }
.post-tool-txt { min-width: 0; flex: 1; }
.post-tool-txt b { display: block; font-size: 14px; }
.post-tool-txt small { color: var(--text-muted); font-size: 11.5px; }
.post-tool em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--cyan); }

.post-related, .post-more { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--glass-border); }
.post-related h2, .post-more h2 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin-bottom: 14px; }
.post-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.post-more-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.post-more-card { padding: 16px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border); transition: transform 0.3s var(--ease), border-color 0.3s; }
.post-more-card:hover { transform: translateY(-3px); border-color: var(--glass-border-hover); }
.post-more-bar { display: block; height: 4px; width: 40px; border-radius: 3px; margin-bottom: 12px; }
.post-more-card b { display: block; font-size: 14.5px; margin-top: 8px; line-height: 1.3; }

@media (max-width: 720px) {
  .blog-feature { grid-template-columns: 1fr; }
  .blog-feature-art { min-height: 170px; }
}

/* ══════════════════════════════════════════
   NEWS  (news.html / story.html)
   ══════════════════════════════════════════ */
.news-page, .story-page, .research-page { padding-top: 120px; padding-bottom: 80px; }
.story-page { max-width: 760px; }

.news-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.news-chip {
  font-family: var(--font-body); font-size: 13px; color: var(--text-soft);
  background: var(--glass); border: 1px solid var(--glass-border);
  padding: 7px 15px; border-radius: 999px; cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.news-chip:hover { color: var(--text); border-color: var(--glass-border-hover); }
.news-chip.active { color: var(--bg); background: var(--cyan); border-color: var(--cyan); font-weight: 600; }
html[data-theme="light"] .news-chip.active { color: #fff; }

.news-source { font-weight: 700; color: var(--cyan); letter-spacing: 0.02em; }
.news-cat {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--glass-border); padding: 2px 8px; border-radius: 6px;
  margin-left: auto;
}
.news-summary { color: var(--text-soft); font-size: 14px; line-height: 1.6; }

/* featured */
.news-feature {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 0;
  border-radius: var(--radius); overflow: hidden; margin-bottom: 30px;
  border: 1px solid var(--glass-border); background: var(--glass);
  transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s;
}
.news-feature:hover { transform: translateY(-5px); border-color: var(--glass-border-hover); box-shadow: 0 26px 60px rgba(0,0,0,0.45); }
.news-feature-art { position: relative; min-height: 230px; }
.news-feature-badge {
  position: absolute; top: 16px; left: 16px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #fff;
  background: rgba(0,0,0,0.35); backdrop-filter: blur(6px); padding: 5px 11px; border-radius: 999px;
}
.news-feature-body { padding: 28px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.news-feature-body h2 { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 27px); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.news-tldr {
  font-size: 13px; color: var(--text-soft); line-height: 1.55; margin-top: 4px;
  padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(37,233,255,0.22);
  background: rgba(37,233,255,0.05);
}
.news-tldr b { color: var(--cyan); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; margin-right: 6px; }

/* feed list */
.news-feed { display: flex; flex-direction: column; gap: 12px; }
.news-item {
  display: flex; gap: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--glass-border); background: var(--glass);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.news-item:hover { transform: translateX(4px); border-color: var(--glass-border-hover); box-shadow: 0 14px 34px rgba(0,0,0,0.32); }
.news-item-rail { width: 4px; flex: none; background: var(--nc, var(--cyan)); }
.news-item-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.news-item-body h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }

/* story */
.story-head { margin-bottom: 20px; }
.story-head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 4vw, 40px); line-height: 1.12; letter-spacing: -0.02em; margin: 12px 0; text-wrap: balance; }
.story-summary { font-size: 17.5px; color: var(--text-soft); line-height: 1.55; }
.story-art { height: 200px; border-radius: var(--radius); margin: 6px 0 24px; }
.story-tldr {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--radius); margin-bottom: 28px;
  border: 1px solid rgba(37,233,255,0.26); background: rgba(37,233,255,0.06);
}
.story-tldr-label {
  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bg); background: var(--cyan); padding: 5px 10px; border-radius: 8px; margin-top: 2px;
}
html[data-theme="light"] .story-tldr-label { color: #fff; }
.story-tldr p { font-size: 15px; color: var(--text); line-height: 1.6; font-weight: 500; }

/* ══════════════════════════════════════════
   RESEARCH HUB  (research.html)
   ══════════════════════════════════════════ */
.rh-section { margin-top: 44px; }
.rh-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.rh-sub { color: var(--text-muted); font-size: 13.5px; margin: 4px 0 16px; }
.rh-bar { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.09); overflow: hidden; }
.rh-bar s { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
html[data-theme="light"] .rh-bar { background: rgba(7,8,13,0.1); }

/* leaderboard */
.rh-board { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.rh-row {
  display: grid; grid-template-columns: 34px 1.4fr 3fr 66px; gap: 18px; align-items: center;
  padding: 16px 20px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-border);
}
.rh-row:first-child { border-color: rgba(37,233,255,0.3); box-shadow: 0 0 30px rgba(37,233,255,0.07); }
.rh-pos { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-muted); text-align: center; }
.rh-row:first-child .rh-pos { color: #FCEE0A; }
.rh-model b { display: block; font-family: var(--font-display); font-size: 15.5px; font-weight: 600; }
.rh-model small { color: var(--text-muted); font-size: 12px; }
.rh-axes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rh-axis-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.rh-axis-top small { font-size: 11px; color: var(--text-muted); }
.rh-axis-top b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rh-overall { text-align: center; }
.rh-overall-num { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--cyan); }
.rh-overall small { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }

/* papers */
.rh-papers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.rh-paper {
  padding: 20px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.rh-paper:hover { transform: translateY(-4px); border-color: var(--glass-border-hover); }
.rh-paper-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.rh-paper-meta { font-size: 11.5px; color: var(--text-muted); }
.rh-paper h3 { font-family: var(--font-display); font-size: 16px; font-weight: 600; line-height: 1.3; margin-bottom: 8px; }
.rh-paper p { font-size: 13px; color: var(--text-soft); line-height: 1.55; margin-bottom: 14px; }
.rh-bench small { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-muted); margin-bottom: 6px; }

/* model releases */
.rh-models { margin-top: 16px; border-left: 2px solid var(--glass-border); padding-left: 4px; }
.rh-model-row { display: grid; grid-template-columns: 78px 18px 1fr; align-items: center; gap: 4px; padding: 12px 0; }
.rh-model-date { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.rh-dot { width: 11px; height: 11px; border-radius: 50%; margin-left: -6px; }
.rh-dot-frontier { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.rh-dot-open { background: var(--emerald); box-shadow: 0 0 10px var(--emerald); }
.rh-model-info b { font-size: 14.5px; display: flex; align-items: center; gap: 9px; }
.rh-model-info small { color: var(--text-muted); font-size: 12.5px; }
.rh-model-type {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 6px; color: var(--cyan); border: 1px solid rgba(37,233,255,0.3);
}
.rh-model-type.open { color: var(--emerald); border-color: rgba(61,232,160,0.35); }

@media (max-width: 780px) {
  .news-feature { grid-template-columns: 1fr; }
  .news-feature-art { min-height: 160px; }
  .rh-row { grid-template-columns: 28px 1fr; gap: 12px; }
  .rh-axes { grid-column: 1 / -1; }
  .rh-overall { display: none; }
}

/* ══════════════════════════════════════════
   COMPARE  (compare.html)
   ══════════════════════════════════════════ */
.compare-page { padding-top: 120px; padding-bottom: 80px; max-width: 1000px; }

.cmp-pickers { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 28px; }
.cmp-pickers select {
  width: 100%; padding: 13px 15px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--text); font-family: var(--font-body); font-size: 14.5px;
  cursor: pointer; outline: none; transition: border-color 0.25s;
}
.cmp-pickers select:focus { border-color: rgba(37,233,255,0.4); }
.cmp-swap { width: 42px; height: 42px; border: 1px solid var(--glass-border); border-radius: 12px; }

.cmp-hint { color: var(--text-muted); font-size: 14.5px; padding: 8px 0 20px; }

/* head-to-head cards */
.cmp-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; margin-bottom: 18px; }
.cmp-side {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 24px 18px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-border);
}
.cmp-side-name b { display: block; font-family: var(--font-display); font-size: 19px; font-weight: 700; }
.cmp-side-name small { color: var(--text-muted); font-size: 12.5px; }
.cmp-side-name:hover b { color: var(--cyan); }
.cmp-side-badges { display: flex; gap: 6px; }
.cmp-side-meta { display: flex; gap: 14px; font-size: 13.5px; }
.cmp-vs {
  align-self: center; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(135deg, var(--electric), var(--violet));
  box-shadow: 0 0 30px rgba(37,233,255,0.4);
}

/* verdict */
.cmp-verdict {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 22px; border-radius: var(--radius); margin-bottom: 24px;
  border: 1px solid rgba(37,233,255,0.28); background: rgba(37,233,255,0.05);
}
.cmp-crown { font-size: 26px; color: #FCEE0A; line-height: 1; margin-top: 2px; }
.cmp-verdict b { font-family: var(--font-display); font-size: 16.5px; }
.cmp-verdict p { color: var(--text-soft); font-size: 14px; line-height: 1.6; margin: 6px 0 12px; }
.cmp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-chips span {
  font-size: 12px; color: var(--text-muted);
  border: 1px solid var(--glass-border); border-radius: 999px; padding: 5px 12px;
}
.cmp-chips span b { color: var(--cyan); font-weight: 600; font-family: var(--font-body); font-size: 12px; }

/* spec table */
.cmp-table { border: 1px solid var(--glass-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 28px; }
.cmp-row { display: grid; grid-template-columns: 150px 1fr 1fr; border-top: 1px solid var(--glass-border); }
.cmp-row:first-child { border-top: none; }
.cmp-row-head { background: var(--glass); }
.cmp-row-head .cmp-cell b { font-family: var(--font-display); font-size: 14.5px; }
.cmp-label {
  padding: 13px 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
  display: flex; align-items: center;
}
.cmp-cell {
  padding: 13px 16px; font-size: 14px; color: var(--text-soft);
  border-left: 1px solid var(--glass-border);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.cmp-cell.win { color: var(--text); background: rgba(37,233,255,0.06); font-weight: 600; }
.cmp-cell.win::after { content: "✓"; color: var(--emerald); font-size: 12px; margin-left: auto; }

/* feature / pros / cons columns */
.cmp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.cmp-cols h4 { font-family: var(--font-display); font-size: 14px; font-weight: 600; margin-bottom: 9px; }
.cmp-best { margin-bottom: 34px; }

/* matchups */
.cmp-matchups-wrap { margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--glass-border); }
.cmp-matchups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 14px; }
.cmp-match {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.cmp-match:hover { transform: translateY(-3px); border-color: var(--glass-border-hover); }
.cmp-match-logos { display: flex; }
.cmp-match-logos .tool-logo { box-shadow: 0 0 0 2px var(--bg-2); }
.cmp-match-logos .tool-logo + .tool-logo { margin-left: -8px; }
.cmp-match-txt b { display: block; font-size: 13.5px; }
.cmp-match-txt b i { font-style: normal; color: var(--text-muted); font-size: 11px; padding: 0 2px; }
.cmp-match-txt small { color: var(--text-muted); font-size: 11.5px; }

@media (max-width: 720px) {
  .cmp-head { grid-template-columns: 1fr; }
  .cmp-vs { justify-self: center; }
  .cmp-pickers { grid-template-columns: 1fr; }
  .cmp-swap { justify-self: center; }
  .cmp-cols { grid-template-columns: 1fr; }
  .cmp-row { grid-template-columns: 110px 1fr 1fr; }
}

/* compare-with links on the tool page sidebar */
.tp-cmp { margin-top: 16px; }
.tp-cmp-row {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 11px; border-radius: 11px; font-size: 13px;
  transition: background 0.15s;
}
.tp-cmp-row:hover { background: var(--glass); }
.tp-cmp-row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-cmp-row i { font-style: normal; color: var(--text-muted); font-size: 11px; flex: none; }
.tp-cmp-row span { margin-left: auto; color: var(--cyan); flex: none; }

/* ══════════════════════════════════════════
   RESOURCES DROPDOWN  (nav)
   ══════════════════════════════════════════ */
.nav-item-drop { position: relative; }
.drop-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body);
}
.drop-trigger svg { transition: transform 0.25s var(--ease); }
.nav-item-drop.open .drop-trigger svg { transform: rotate(180deg); }

.nav-drop {
  position: absolute; top: calc(100% + 14px); left: 50%;
  width: 250px; padding: 8px;
  transform: translateX(-50%) translateY(-8px);
  background: var(--glass-strong);
  backdrop-filter: blur(30px) saturate(1.6);
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 50px rgba(37,233,255,0.08);
  opacity: 0; visibility: hidden;
  transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  z-index: 60;
}
.nav-item-drop.open .nav-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop a {
  display: block; padding: 10px 13px; border-radius: 12px;
  transition: background 0.18s;
}
.nav-drop a:hover { background: var(--glass); }
.nav-drop a b {
  display: block; font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 2px;
}
.nav-drop a:hover b { color: var(--cyan); }
.nav-drop a small { display: block; font-size: 11.5px; color: var(--text-muted); line-height: 1.4; }

/* the mega trigger is now a link — keep it looking like a nav item */
a.mega-trigger { display: inline-flex; align-items: center; gap: 6px; }
a.mega-trigger svg { transition: transform 0.25s var(--ease); }
.mega-menu.open ~ .nav-inner a.mega-trigger svg,
a.mega-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (max-width: 980px) {
  .nav-drop { width: 220px; }
}

/* ══════════════════════════════════════════
   WORKFLOWS  (workflows.html / workflow.html)
   ══════════════════════════════════════════ */
.wf-page, .wf-detail, .ws-page { padding-top: 120px; padding-bottom: 80px; }
.wf-detail { max-width: 860px; }

.wf-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
.wf-audience {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cyan); background: rgba(37,233,255,0.08);
  border: 1px solid rgba(37,233,255,0.24); padding: 3px 9px; border-radius: 999px;
}

.wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
.wf-card {
  border-radius: var(--radius); overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: transform 0.4s var(--ease), border-color 0.3s, box-shadow 0.4s;
}
.wf-card:hover { transform: translateY(-5px); border-color: var(--glass-border-hover); box-shadow: 0 22px 50px rgba(0,0,0,0.42); }
.wf-card-bar { display: block; height: 5px; }
.wf-card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 9px; }
.wf-card-body h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.wf-outcome { font-size: 13.5px; color: var(--text-soft); line-height: 1.55; }
.wf-chain {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--glass-border);
}
.wf-arrow { color: var(--text-muted); font-size: 13px; }

/* detail hero */
.wf-hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 30px 28px; border-radius: var(--radius); margin-bottom: 24px;
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(130% 110% at 15% 5%, color-mix(in srgb, var(--g1) 55%, transparent), transparent 62%),
    radial-gradient(120% 130% at 90% 95%, color-mix(in srgb, var(--g2) 60%, transparent), transparent 65%),
    var(--midnight);
}
.wf-hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(27px, 4vw, 40px); line-height: 1.1; letter-spacing: -0.02em; margin: 12px 0 8px; }
.wf-hero-outcome { font-size: 16px; color: rgba(255,255,255,0.85); max-width: 56ch; }
.wf-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* the chain itself */
.wf-steps { list-style: none; margin: 30px 0 0; }
.wf-step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.wf-step-rail { display: flex; flex-direction: column; align-items: center; }
.wf-step-num {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, var(--electric), var(--violet));
  box-shadow: 0 0 20px rgba(37,233,255,0.35);
}
.wf-step-line { flex: 1; width: 2px; margin: 8px 0; background: linear-gradient(180deg, var(--violet), transparent); }
.wf-step-body { padding-bottom: 26px; min-width: 0; }
.wf-stage {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 9px;
}
.wf-tool {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.wf-tool:hover { transform: translateX(4px); border-color: var(--glass-border-hover); }
.wf-tool-txt { flex: 1; min-width: 0; }
.wf-tool-txt b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.wf-tool-txt small { color: var(--text-muted); font-size: 11.5px; }
.wf-tool-side { display: flex; align-items: center; gap: 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.wf-why { font-size: 13.5px; color: var(--text-soft); line-height: 1.6; margin-top: 10px; padding-left: 2px; }
.wf-more { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--glass-border); }
.wf-more h2 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin-bottom: 14px; }

/* ══════════════════════════════════════════
   WORKSPACE  (workspace.html)
   ══════════════════════════════════════════ */
.ws-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.ws-stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); }
.ws-stats b { color: var(--text); font-family: var(--font-display); font-size: 17px; margin-right: 4px; }

.ws-stack {
  border: 1px solid var(--glass-border); border-radius: var(--radius);
  background: var(--glass); padding: 20px 22px; margin-bottom: 18px;
}
.ws-stack-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ws-name {
  flex: 1; min-width: 0; background: none; border: 1px solid transparent; border-radius: 10px;
  color: var(--text); font-family: var(--font-display); font-size: 19px; font-weight: 700;
  padding: 6px 10px; margin-left: -10px; outline: none;
  transition: background 0.2s, border-color 0.2s;
}
.ws-name:hover { background: rgba(255,255,255,0.04); }
.ws-name:focus { background: rgba(255,255,255,0.05); border-color: rgba(37,233,255,0.35); }
.ws-count { font-size: 12.5px; color: var(--text-muted); flex: none; }
.ws-del:hover { color: #FF2BD6; }

.ws-tools { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ws-tool {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 13px;
  background: rgba(255,255,255,0.025); border: 1px solid var(--glass-border);
}
html[data-theme="light"] .ws-tool { background: rgba(7,8,13,0.02); }
.ws-tool-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.ws-tool-txt b { display: block; font-size: 14.5px; }
.ws-tool-txt small { color: var(--text-muted); font-size: 11.5px; }
.ws-tool-main:hover .ws-tool-txt b { color: var(--cyan); }
.ws-tool-side { display: flex; gap: 5px; flex: none; }
.ws-remove:hover { color: #FF2BD6; }
.ws-stack-empty { color: var(--text-muted); font-size: 13.5px; padding: 6px 0 14px; }

.ws-picker {
  width: 100%; padding: 10px 13px; border-radius: 12px;
  background: var(--glass); border: 1px dashed var(--glass-border);
  color: var(--text-soft); font-family: var(--font-body); font-size: 13.5px;
  cursor: pointer; outline: none; transition: border-color 0.25s, color 0.25s;
}
.ws-picker:hover, .ws-picker:focus { border-color: rgba(37,233,255,0.45); color: var(--text); }

.ws-empty { text-align: center; padding: 60px 20px; }
.ws-empty h3 { font-family: var(--font-display); font-size: 21px; margin-bottom: 8px; }
.ws-empty p { color: var(--text-muted); font-size: 14.5px; margin-bottom: 20px; }
.ws-empty-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* add-to-stack control on the tool page */
.tp-stack { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.tp-stack select {
  flex: 1; min-width: 0; padding: 9px 11px; border-radius: 11px;
  background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--text); font-family: var(--font-body); font-size: 13px; cursor: pointer; outline: none;
}

@media (max-width: 640px) {
  .wf-step { grid-template-columns: 34px 1fr; gap: 12px; }
  .wf-tool { flex-wrap: wrap; }
  .wf-tool-side { width: 100%; justify-content: flex-start; }
}

/* ══════════════════════════════════════════
   WORKFLOWS v2 — hero, pipeline, swaps
   ══════════════════════════════════════════ */
.wf-page { padding: 0 0 80px; }
.wf-page-hero { position: relative; overflow: hidden; padding: 130px 0 44px; margin-bottom: 34px; }
.wf-hero-glow {
  position: absolute; inset: -40% 0 auto 0; height: 460px; pointer-events: none;
  background:
    radial-gradient(50% 60% at 25% 40%, rgba(37,233,255,0.20), transparent 70%),
    radial-gradient(45% 55% at 78% 30%, rgba(168,85,247,0.20), transparent 70%),
    radial-gradient(40% 50% at 50% 80%, rgba(37,233,255,0.12), transparent 70%);
  filter: blur(18px);
}
.wf-hero-inner { position: relative; }
.wf-page-title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -0.025em;
  font-size: clamp(34px, 5.4vw, 58px); line-height: 1.03; margin: 8px 0 12px;
}
.wf-page-sub { font-size: clamp(15px, 1.8vw, 17.5px); color: var(--text-soft); max-width: 62ch; line-height: 1.6; }

.wf-search-wrap {
  position: relative; display: flex; align-items: center;
  max-width: 560px; margin: 26px 0 16px;
}
.wf-search-wrap svg { position: absolute; left: 18px; color: var(--text-muted); pointer-events: none; }
.wf-search-wrap input {
  width: 100%; padding: 15px 18px 15px 48px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  color: var(--text); font-family: var(--font-body); font-size: 15px; outline: none;
  backdrop-filter: blur(20px);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.wf-search-wrap input:focus {
  border-color: rgba(37,233,255,0.45);
  box-shadow: 0 0 0 4px rgba(37,233,255,0.08), 0 12px 40px rgba(37,233,255,0.16);
}
.wf-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.wf-quick-chip {
  font-family: var(--font-body); font-size: 13px; color: var(--text-soft);
  background: var(--glass); border: 1px solid var(--glass-border);
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.wf-quick-chip:hover { color: var(--cyan); border-color: rgba(37,233,255,0.4); transform: translateY(-2px); }

.wf-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.wf-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.wf-none { color: var(--text-muted); padding: 40px 0; text-align: center; }

/* ── cards: metrics + pipeline + hover reveal ── */
.wf-card-body { gap: 8px; flex: 1; display: flex; flex-direction: column; }
.wf-card { display: flex; flex-direction: column; }
.wf-scores { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 2px; }
.wf-diff { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }
.wf-diff i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.16); display: block; }
.wf-diff i.on { background: linear-gradient(135deg, var(--cyan), var(--violet)); }
html[data-theme="light"] .wf-diff i { background: rgba(7,8,13,0.16); }
.wf-diff b { font-weight: 600; color: var(--text-soft); font-size: 12px; }
.wf-stat { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }
.wf-cost {
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  color: var(--text-soft); border: 1px solid var(--glass-border);
}
.wf-cost.free { color: var(--emerald); border-color: rgba(61,232,160,0.35); background: rgba(61,232,160,0.07); }

.wf-pipe {
  display: flex; align-items: flex-start; gap: 3px; flex-wrap: wrap;
  align-content: flex-start; flex: 1;
  margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--glass-border);
}
.wf-pipe-node { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 52px; }
.wf-pipe-node small {
  font-size: 9.5px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text-muted); text-align: center; line-height: 1.2;
}
.wf-pipe-arrow { color: var(--text-muted); font-size: 12px; margin-top: 10px; }

/* Outcomes stay visible — no hover expansion. Cards must never
   change height, or hovering one shoves the whole grid around. */
.wf-reveal {
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}
.wf-reveal-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px;
}
.wf-outcomes { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.wf-outcomes li { font-size: 13px; color: var(--text-soft); display: flex; gap: 8px; align-items: baseline; }
.wf-outcomes li::before { content: "✓"; color: var(--emerald); font-weight: 700; font-size: 11px; }
.wf-start { font-size: 13.5px; font-weight: 600; color: var(--cyan); display: inline-block; margin-top: 4px; transition: transform 0.25s var(--ease); }
.wf-card:hover .wf-start { transform: translateX(4px); }

/* ── detail: scorecard ── */
.wf-scorecard {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 26px;
}
.wf-scorecard > div {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: 14px; padding: 14px 12px; text-align: center;
}
.wf-scorecard b {
  display: block; font-family: var(--font-display); font-size: 19px; font-weight: 700;
  color: var(--cyan);
}
.wf-scorecard small { display: block; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; }
.wf-score-diff { display: inline-flex; align-items: center; gap: 5px; font-size: 14px !important; }
.wf-score-diff i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.wf-score-diff i.on { background: linear-gradient(135deg, var(--cyan), var(--violet)); }

/* ── detail: horizontal pipeline rail ──
   The six stages read left to right as one map, so the shape of the
   workflow is legible before any clicking. Detail for the selected step
   opens below; all six panels stay in the DOM and are toggled. ── */
.wf-flow { margin: 26px 0 20px; }
.wf-rail-scroll { overflow-x: auto; overflow-y: hidden; padding: 4px 2px 10px; scrollbar-width: none; }
.wf-rail-scroll::-webkit-scrollbar { display: none; }
.wf-rail { list-style: none; display: flex; align-items: stretch; gap: 0; }
/* Nodes share the row and shrink together. max-content here would push the
   sixth node past the edge, so natural sizing is left to the mobile strip. */
.wf-node-wrap { display: flex; flex: 1 1 0; min-width: 0; }

.wf-node {
  position: relative; flex: 1; cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 10px 13px;
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius); color: inherit;
  transition: border-color 0.22s, background 0.22s, transform 0.22s, box-shadow 0.22s;
}
.wf-node:hover { transform: translateY(-2px); border-color: rgba(37,233,255,0.35); }
.wf-node:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.wf-node.on {
  border-color: rgba(37,233,255,0.6);
  background: linear-gradient(180deg, rgba(37,233,255,0.13), rgba(168,85,247,0.07));
  box-shadow: 0 10px 30px -14px rgba(37,233,255,0.6);
}
.wf-node-num {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 500; font-size: 11px;
  color: var(--text-muted);
  background: rgba(255,255,255,0.05); border: 1px solid var(--glass-border);
  transition: color 0.22s, background 0.22s, box-shadow 0.22s;
}
.wf-node.on .wf-node-num {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--electric), var(--violet));
  box-shadow: 0 0 14px rgba(37,233,255,0.5);
}
html[data-theme="light"] .wf-node-num { background: rgba(7,8,13,0.04); }
.wf-node-logo { display: block; opacity: 0.75; transition: opacity 0.22s; }
.wf-node.on .wf-node-logo, .wf-node:hover .wf-node-logo { opacity: 1; }
.wf-node-stage {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--text-muted); transition: color 0.22s;
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-node.on .wf-node-stage { color: var(--cyan); }
/* Cyan on the near-white light background is about 1.3:1 — the active stage
   label has to shift to the blue the light theme already uses for accents. */
html[data-theme="light"] .wf-node.on .wf-node-stage { color: #25E9FF; }
html[data-theme="light"] .wf-arrow { color: rgba(168,85,247,0.55); }
.wf-node-tool {
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--text);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* a swapped step stays visible on the rail, not just inside its panel */
.wf-node.swapped { border-color: rgba(252,238,10,0.4); }
.wf-node-dot {
  position: absolute; top: 9px; right: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: #FCEE0A;
  box-shadow: 0 0 8px rgba(252,238,10,0.8);
}

.wf-arrow {
  flex: none; display: grid; place-items: center; width: 26px;
  color: rgba(168,85,247,0.55);
}

/* ── the open step ── */
.wf-layout { display: grid; grid-template-columns: 1fr 280px; gap: 28px; align-items: start; }
.wf-panels { min-width: 0; }
.wf-panel {
  background: var(--glass); border: 1px solid var(--glass-border);
  border-radius: var(--radius); padding: 20px 22px;
  animation: wfPanelIn 0.26s ease;
}
.wf-panel[hidden] { display: none; }
@keyframes wfPanelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wf-panel { animation: none; } }
.wf-panel.swapped { border-color: rgba(252,238,10,0.35); }
.wf-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.wf-panel-count {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted); letter-spacing: 0.04em;
}
.wf-pnum {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; color: #fff;
  background: linear-gradient(135deg, var(--electric), var(--violet));
  box-shadow: 0 0 16px rgba(37,233,255,0.35);
}
.wf-pstage-name {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text);
}
.wf-swapped-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold, #FCEE0A); border: 1px solid rgba(252,238,10,0.4);
  padding: 2px 8px; border-radius: 999px;
}
.wf-ptool { display: flex; align-items: center; gap: 13px; }
.wf-ptool-txt { flex: 1; min-width: 0; }
.wf-ptool-txt b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.wf-ptool-txt small { color: var(--text-muted); font-size: 11.5px; }
.wf-ptool:hover .wf-ptool-txt b { color: var(--cyan); }
.wf-ptool-side { display: flex; align-items: center; gap: 7px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.wf-panel .wf-why { font-size: 14px; color: var(--text-soft); line-height: 1.65; margin-top: 12px; }

.wf-swap { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--glass-border); }
.wf-swap-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-right: 2px; }
.wf-swap-btn {
  font-family: var(--font-body); font-size: 12px; color: var(--text-soft);
  background: rgba(255,255,255,0.04); border: 1px solid var(--glass-border);
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s;
}
.wf-swap-btn:hover { color: var(--cyan); border-color: rgba(37,233,255,0.45); background: rgba(37,233,255,0.08); transform: translateY(-1px); }
.wf-swap-btn.undo { color: #FCEE0A; border-color: rgba(252,238,10,0.35); }
html[data-theme="light"] .wf-swap-btn { background: rgba(7,8,13,0.03); }

/* prev / next, labelled with the actual stage you are moving to */
.wf-panel-nav {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--glass-border);
}
.wf-step-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--text-soft);
  background: none; border: 1px solid var(--glass-border);
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  max-width: 48%; white-space: nowrap; overflow: hidden;
}
.wf-step-btn:hover:not(:disabled) { color: var(--cyan); border-color: rgba(37,233,255,0.45); background: rgba(37,233,255,0.07); }
.wf-step-btn:disabled { opacity: 0.32; cursor: default; }

/* detail sidebar */
.wf-side { display: flex; flex-direction: column; gap: 14px; }
.wf-result { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.wf-result li { font-size: 13.5px; color: var(--text-soft); display: flex; gap: 9px; align-items: baseline; }
.wf-result li::before { content: "✓"; color: var(--emerald); font-weight: 700; font-size: 12px; }
.wf-side-stack { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; }
.wf-side-note { font-size: 12px; color: var(--text-muted); }

@media (max-width: 900px) {
  .wf-layout { grid-template-columns: 1fr; }
  .wf-scorecard { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  /* Six nodes stop fitting: the rail becomes a swipe strip with snap points,
     edges faded so it reads as scrollable rather than cut off. */
  .wf-rail-scroll {
    scroll-snap-type: x mandatory;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .wf-rail { min-width: max-content; }
  .wf-node-wrap { flex: 0 0 118px; min-width: 118px; scroll-snap-align: center; }
  .wf-arrow { width: 18px; }
  .wf-node { padding: 12px 8px; }
  .wf-panel { padding: 17px 16px; }
  .wf-step-btn { max-width: 47%; text-overflow: ellipsis; }
}
@media (max-width: 560px) {
  .wf-scorecard { grid-template-columns: repeat(2, 1fr); }
  .wf-panel-head { flex-wrap: wrap; }
  .wf-panel-count { margin-left: 0; width: 100%; }
  /* Name, category and badges cannot share one line at this width — the
     badges were landing on top of the category text. Give them their own. */
  .wf-ptool { flex-wrap: wrap; row-gap: 11px; }
  .wf-ptool-side { flex: 1 0 100%; justify-content: flex-start; }
}

/* ═══════════════════════════════════════════
   AI INTELLIGENCE
   Benchmarks are facts, DNA is judgement — the
   styling has to keep those visually distinct.
   Facts read as tables. Judgement reads as stars.
   ═══════════════════════════════════════════ */

/* wider dropdown for the Intelligence panel */
.nav-drop-intel { min-width: 268px; }
.nav-drop-intel b { display: flex; align-items: center; gap: 8px; }

/* ── Hub hero ────────────────────────────── */
.intel-page { padding-top: 92px; }
.intel-hero { padding: 42px 0 30px; position: relative; overflow: hidden; }
.intel-hero::before {
  content: ""; position: absolute; inset: -40% 20% auto -10%; height: 420px;
  background: radial-gradient(closest-side, rgba(37,233,255,.16), transparent 70%);
  pointer-events: none;
}
.intel-title { font-family: var(--font-display); font-size: clamp(2.1rem, 4.4vw, 3.3rem); line-height: 1.1; letter-spacing: -.02em; margin: 8px 0 14px; }
.intel-sub { max-width: 62ch; color: var(--text-soft); line-height: 1.65; }
.intel-hero-stats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 26px; }
.intel-stat { display: flex; flex-direction: column; }
.intel-stat b { font-family: var(--font-display); font-size: 1.5rem; }
.intel-stat small { color: var(--text-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }

/* ── Tabs ────────────────────────────────── */
.intel-tabsbar {
  position: sticky; top: 64px; z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-block: 1px solid var(--glass-border);
  margin-bottom: 34px;
}
.intel-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.intel-tabs::-webkit-scrollbar { display: none; }
.intel-tab {
  flex: none; display: flex; align-items: center; gap: 7px;
  padding: 14px 16px; background: none; border: 0; cursor: pointer;
  color: var(--text-soft); font: inherit; font-size: .9rem; font-weight: 500;
  border-bottom: 2px solid transparent; transition: color .18s, border-color .18s;
}
.intel-tab:hover { color: var(--text); }
.intel-tab.active { color: var(--text); border-bottom-color: var(--cyan); }
.intel-view { padding-bottom: 70px; }
.intel-foot { margin-top: 16px; color: var(--text-soft); font-size: .85rem; }
.intel-foot a { color: var(--cyan); }

/* ── Tables (leaderboard + benchmarks) ───── */
.lb-wrap { overflow-x: auto; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass); }
.lb { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 720px; }
.lb th {
  text-align: left; padding: 14px 16px; font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft);
  border-bottom: 1px solid var(--glass-border); white-space: nowrap;
}
.lb th.sortable { cursor: pointer; user-select: none; }
.lb th.sortable:hover { color: var(--text); }
.lb th.sorted { color: var(--cyan); }
.lb-caret { margin-left: 4px; }
.lb td { padding: 13px 16px; border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 55%, transparent); vertical-align: middle; }
.lb tbody tr:last-child td { border-bottom: 0; }
.lb tbody tr { transition: background .15s; }
.lb tbody tr:hover { background: color-mix(in srgb, var(--electric) 6%, transparent); }
.lb-rank { font-family: var(--font-display); color: var(--text-soft); width: 44px; }
.lb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-num.muted { color: var(--text-soft); }
.lb-score { display: block; font-weight: 600; }
.lb-bar { display: block; height: 3px; border-radius: 2px; background: var(--glass-border); margin-top: 5px; width: 74px; margin-left: auto; overflow: hidden; }
.lb-bar i { display: block; height: 100%; border-radius: 2px; }
.lb-best { white-space: nowrap; }
.lb-tag {
  display: inline-block; padding: 3px 9px; margin: 2px 3px 2px 0; border-radius: 100px;
  font-size: .72rem; background: color-mix(in srgb, var(--electric) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--electric) 26%, transparent); color: var(--text);
}
.bench-best { color: var(--emerald); font-weight: 700; }
.bench-key, .dna-legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 0 0 20px; }
.bench-key-item, .dna-legend-item {
  padding: 11px 13px; border: 1px solid var(--glass-border); border-radius: 11px; background: var(--glass);
}
.bench-key-item b, .dna-legend-item b { display: block; font-size: .85rem; margin-bottom: 3px; }
.bench-key-item small, .dna-legend-item small { color: var(--text-soft); font-size: .78rem; line-height: 1.5; }

/* model chip, reused everywhere */
.m-chip { display: inline-flex; align-items: center; gap: 10px; }
.m-chip b { display: block; font-size: .9rem; }
.m-chip small { display: block; color: var(--text-soft); font-size: .76rem; }
.m-dot { width: 26px; height: 26px; border-radius: 8px; flex: none; }

/* ── Stars ───────────────────────────────── */
.dna-stars { display: inline-flex; gap: 2px; }
.dna-star {
  width: 13px; height: 13px; display: block; border-radius: 2px;
  background: var(--glass-border);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.dna-star.full { background: var(--cyan); }
.dna-star.half { background: linear-gradient(90deg, var(--cyan) 50%, var(--glass-border) 50%); }

/* ── Radar ───────────────────────────────── */
.radar { width: 100%; height: auto; max-width: 340px; overflow: visible; }
.radar-ring { fill: none; stroke: var(--glass-border); stroke-width: 1; }
.radar-spoke { stroke: var(--glass-border); stroke-width: 1; }
.radar-shape { fill: color-mix(in srgb, var(--rc) 22%, transparent); stroke: var(--rc); stroke-width: 2; stroke-linejoin: round; }
.radar-label { fill: var(--text-soft); font-size: 9.5px; font-family: var(--font-body); letter-spacing: .04em; }

/* ── DNA cards ───────────────────────────── */
.dna-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 18px; }
.dna-card { position: relative; padding: 22px; border: 1px solid var(--glass-border); border-radius: 18px; background: var(--glass); overflow: hidden; }
.dna-bar { position: absolute; inset: 0 0 auto; height: 3px; }
.dna-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.dna-name { display: inline-flex; align-items: center; gap: 10px; }
.dna-name b { display: block; font-family: var(--font-display); font-size: 1.05rem; }
.dna-name small { display: block; color: var(--text-soft); font-size: .78rem; }
.dna-avg { text-align: right; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; }
.dna-avg small { display: block; font-family: var(--font-body); font-size: .66rem; letter-spacing: .1em; color: var(--text-soft); text-transform: uppercase; margin-top: 3px; }
.dna-tagline { color: var(--text-soft); font-size: .88rem; margin: 10px 0 4px; }
.dna-split { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: center; margin: 6px 0 14px; }
.dna-axes { list-style: none; display: grid; gap: 7px; }
.dna-axes li { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dna-axis-label { font-size: .84rem; color: var(--text-soft); }
.dna-verdict { font-size: .87rem; padding-top: 13px; border-top: 1px solid var(--glass-border); }
.dna-verdict b { color: var(--cyan); }
.dna-more { display: inline-block; margin-top: 11px; font-size: .85rem; color: var(--cyan); font-weight: 500; }

/* ── Arena ───────────────────────────────── */
.arena-pickers { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 26px; }
.arena-pickers select {
  padding: 12px 14px; border-radius: 12px; background: var(--glass);
  border: 1px solid var(--glass-border); color: var(--text); font: inherit; font-size: .9rem; width: 100%;
}
.arena-same { color: var(--text-soft); padding: 30px 0; }
.arena-head { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: stretch; margin-bottom: 24px; }
.arena-card {
  padding: 18px; border-radius: 16px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--g2) 40%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--g1) 13%, transparent), color-mix(in srgb, var(--g2) 8%, transparent));
  transition: transform .18s;
}
.arena-card:hover { transform: translateY(-2px); }
.arena-card b { display: block; font-family: var(--font-display); font-size: 1.2rem; }
.arena-card small { display: block; color: var(--text-soft); font-size: .8rem; margin-top: 2px; }
.arena-dna { display: inline-block; margin-top: 9px; font-size: .8rem; padding: 3px 11px; border-radius: 100px; background: var(--glass); border: 1px solid var(--glass-border); }
.arena-vs { align-self: center; font-family: var(--font-display); color: var(--text-soft); letter-spacing: .1em; }
.arena-radar { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 26px; }
.arena-key { list-style: none; display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; font-size: .85rem; }
.arena-key li { display: flex; align-items: center; gap: 7px; }
.arena-key i { width: 11px; height: 11px; border-radius: 3px; }
.arena-table { width: 100%; border-collapse: collapse; border: 1px solid var(--glass-border); border-radius: 16px; overflow: hidden; background: var(--glass); }
.arena-table th { padding: 13px 14px; font-size: .8rem; border-bottom: 1px solid var(--glass-border); }
.arena-table th:nth-child(2) { color: var(--text-soft); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.arena-table td { padding: 11px 14px; border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 50%, transparent); font-size: .88rem; }
.arena-table tr:last-child td { border-bottom: 0; }
.ar-axis { text-align: center; width: 34%; }
.ar-axis b { display: block; font-size: .86rem; }
.ar-axis small { display: block; color: var(--text-soft); font-size: .74rem; margin-top: 2px; }
.ar-side { text-align: center; font-variant-numeric: tabular-nums; }
.ar-side.win { background: color-mix(in srgb, var(--emerald) 11%, transparent); font-weight: 600; }
.ar-side.lose { opacity: .55; }
.ar-divider td { background: color-mix(in srgb, var(--electric) 8%, transparent); text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-soft); }
.arena-verdict { margin-top: 26px; padding: 24px; border-radius: 18px; border: 1px solid var(--glass-border); background: var(--glass); }
.arena-verdict-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--cyan); margin-bottom: 8px; }
.arena-verdict-body { font-size: 1.05rem; line-height: 1.6; }
.arena-verdict-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--glass-border); font-size: .89rem; color: var(--text-soft); }
.arena-verdict-split b { color: var(--text); }

/* ── Hub timeline ────────────────────────── */
.mtl { list-style: none; position: relative; padding-left: 26px; }
.mtl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--glass-border); }
.mtl-year { display: block; margin: 26px 0 12px -26px; padding-left: 26px; font-family: var(--font-display); font-size: 1.35rem; color: var(--text-soft); }
.mtl-row { position: relative; padding: 0 0 20px 18px; }
.mtl-node { position: absolute; left: -26px; top: 4px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 3px var(--bg); }
.mtl-date { font-size: .76rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .07em; }
.mtl-label { font-family: var(--font-display); font-size: 1.02rem; margin: 3px 0; }
.mtl-org { font-family: var(--font-body); font-size: .76rem; font-weight: 400; color: var(--text-soft); }
.mtl-note { font-size: .87rem; color: var(--text-soft); }

/* ═══════════ MODEL PAGE ═══════════ */
.model-page { padding-top: 64px; }
.mp-hero { padding: 34px 0 30px; position: relative; overflow: hidden; border-bottom: 1px solid var(--glass-border); }
.mp-hero::before {
  content: ""; position: absolute; inset: -60% 30% auto -15%; height: 460px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--g2) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.mp-back { display: inline-block; font-size: .85rem; color: var(--text-soft); margin-bottom: 18px; }
.mp-back:hover { color: var(--cyan); }
.mp-hero-grid { display: grid; grid-template-columns: 1fr 320px; gap: 30px; align-items: center; }
.mp-org { font-size: .8rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .09em; }
.mp-name { font-family: var(--font-display); font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.02em; margin: 8px 0 6px; }
.mp-tagline { font-size: 1.06rem; color: var(--text-soft); max-width: 46ch; }
.mp-hero-stats { display: flex; flex-wrap: wrap; gap: 24px; margin: 22px 0 16px; }
.mp-hs b { display: block; font-family: var(--font-display); font-size: 1.5rem; }
.mp-hs small { display: block; font-size: .72rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .08em; }
.mp-hero-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-hero-radar { display: flex; justify-content: center; }

.mp-subnav {
  position: sticky; top: 64px; z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--glass-border);
}
.mp-subnav nav { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: none; }
.mp-subnav nav::-webkit-scrollbar { display: none; }
.mp-subnav-link {
  flex: none; padding: 13px 14px; font-size: .87rem; color: var(--text-soft);
  border-bottom: 2px solid transparent; white-space: nowrap; transition: color .18s, border-color .18s;
}
.mp-subnav-link:hover { color: var(--text); }
.mp-subnav-link.active { color: var(--text); border-bottom-color: var(--cyan); }

.mp-body { padding-bottom: 80px; }
.mp-sec { padding: 46px 0 6px; scroll-margin-top: 120px; }
.mp-sec + .mp-sec { border-top: 1px solid color-mix(in srgb, var(--glass-border) 60%, transparent); }
.mp-h2 { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 10px; }
.mp-sec-sub { color: var(--text-soft); font-size: .92rem; max-width: 70ch; line-height: 1.65; margin-bottom: 22px; }
.mp-sec-sub a { color: var(--cyan); }
.mp-lede { font-size: 1.04rem; line-height: 1.72; max-width: 72ch; color: var(--text-soft); }
.mp-lead-note { margin-top: 14px; font-size: .92rem; }
.mp-lead-note b { color: var(--emerald); }

.mp-tools { margin-top: 26px; }
.mp-tools-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-soft); margin-bottom: 10px; }
.mp-tools-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-tool { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 13px; border: 1px solid var(--glass-border); background: var(--glass); transition: transform .18s, border-color .18s; }
.mp-tool:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--cyan) 40%, transparent); }
.mp-tool b { display: block; font-size: .9rem; }
.mp-tool small { display: block; font-size: .74rem; color: var(--text-soft); }

.mp-dna { display: grid; grid-template-columns: 1fr 290px; gap: 30px; align-items: start; }
.mp-dna-list { list-style: none; display: grid; gap: 2px; }
.mp-dna-list li { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 55%, transparent); }
.mp-dna-axis b { display: block; font-size: .95rem; }
.mp-dna-axis small { display: block; font-size: .79rem; color: var(--text-soft); margin-top: 2px; }
.mp-dna-score { display: flex; align-items: center; gap: 10px; flex: none; }
/* Direct child only. This styles the numeric label <i>4.5</i>; the stars
   are also <i> elements, nested inside .dna-stars, and were inheriting
   the 26px number-column width, which stretched them to 2:1. */
.mp-dna-score > i { font-style: normal; font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--text-soft); width: 26px; text-align: right; }
.mp-dna-side { padding: 20px; border: 1px solid var(--glass-border); border-radius: 18px; background: var(--glass); text-align: center; }
.mp-dna-avg { margin-top: 12px; font-size: .87rem; color: var(--text-soft); }
.mp-dna-avg b { font-family: var(--font-display); font-size: 1.5rem; color: var(--text); display: block; }
.mp-dna-weak { margin-top: 8px; font-size: .82rem; color: var(--text-soft); }

.mp-bench { list-style: none; display: grid; gap: 22px; }
.mp-bench-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.mp-bench-name b { font-size: .95rem; }
.mp-bench-name small { display: block; font-size: .79rem; color: var(--text-soft); margin-top: 2px; }
.mp-bench-val { font-family: var(--font-display); font-size: 1.25rem; font-variant-numeric: tabular-nums; flex: none; }
.mp-bench-val.best { color: var(--emerald); }
.mp-bench-val i { font-style: normal; font-family: var(--font-body); font-size: .64rem; text-transform: uppercase; letter-spacing: .1em; margin-left: 6px; }
.mp-bench-track { position: relative; height: 7px; border-radius: 4px; background: var(--glass-border); margin: 9px 0 5px; overflow: visible; }
.mp-bench-fill { display: block; height: 100%; border-radius: 4px; }
.mp-bench-avg { position: absolute; top: -3px; width: 2px; height: 13px; background: var(--text-soft); border-radius: 1px; }
.mp-bench-ctx { font-size: .77rem; color: var(--text-soft); }

.mp-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.mp-price { padding: 18px; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass); }
.mp-price-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-soft); }
.mp-price-val { font-family: var(--font-display); font-size: 1.75rem; margin: 6px 0 2px; }
.mp-price-val.good { color: var(--emerald); }
.mp-price-unit { font-size: .78rem; color: var(--text-soft); }
.mp-price-scale { display: block; position: relative; height: 3px; border-radius: 2px; background: var(--glass-border); margin: 14px 0 6px; }
.mp-price-scale i { position: absolute; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); transform: translateX(-50%); }
.mp-price-range { display: flex; justify-content: space-between; font-size: .7rem; color: var(--text-soft); }
.mp-free { margin-top: 18px; font-size: .9rem; color: var(--text-soft); }
.mp-free b { color: var(--text); }
.mp-price-example { margin-top: 8px; font-size: .9rem; color: var(--text-soft); }
.mp-price-example b { color: var(--cyan); }

.mp-alts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.mp-alt { padding: 18px; border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass); }
.mp-alt-head { display: flex; align-items: center; gap: 10px; }
.mp-alt-head b { display: block; font-size: .96rem; }
.mp-alt-head small { display: block; font-size: .76rem; color: var(--text-soft); }
.mp-alt-dna { margin-left: auto; font-family: var(--font-display); font-size: 1.1rem; }
.mp-alt-sim { margin: 11px 0 10px; font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--text-soft); }
.mp-alt-line { font-size: .86rem; padding-left: 17px; position: relative; margin-bottom: 5px; }
.mp-alt-line::before { position: absolute; left: 0; }
.mp-alt-line.up::before { content: "▲"; color: var(--emerald); font-size: .6rem; top: 4px; }
.mp-alt-line.down::before { content: "▼"; color: #FF2BD6; font-size: .6rem; top: 4px; }
.mp-alt-cta { display: inline-block; margin-top: 12px; font-size: .84rem; color: var(--cyan); font-weight: 500; }

.mp-timeline { list-style: none; position: relative; padding-left: 26px; }
.mp-timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--glass-border); }
.mp-timeline li { position: relative; padding: 0 0 22px 16px; }
.mp-tl-node { position: absolute; left: -26px; top: 4px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 3px var(--bg); }
.mp-timeline li:not(.current) .mp-tl-node { opacity: .45; }
.mp-tl-date { font-size: .76rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .08em; }
.mp-tl-now { display: inline-block; padding: 2px 8px; border-radius: 100px; background: color-mix(in srgb, var(--emerald) 16%, transparent); color: var(--emerald); letter-spacing: .06em; margin-left: 5px; }
.mp-tl-label { font-family: var(--font-display); font-size: 1.02rem; margin: 3px 0; }
.mp-tl-note { font-size: .87rem; color: var(--text-soft); }

.mp-verdict { padding: 26px; border-radius: 20px; border: 1px solid color-mix(in srgb, var(--g2) 34%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--g1) 10%, transparent), color-mix(in srgb, var(--g2) 6%, transparent)); }
.mp-verdict-line { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.45; }
.mp-verdict-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--glass-border); }
.mp-vc-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .11em; margin-bottom: 10px; }
.mp-vc-label.up { color: var(--emerald); }
.mp-vc-label.down { color: #FF2BD6; }
.mp-verdict-cols ul { list-style: none; display: grid; gap: 9px; }
.mp-verdict-cols li { font-size: .89rem; line-height: 1.55; color: var(--text-soft); padding-left: 14px; position: relative; }
.mp-verdict-cols li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--glass-border); }
.mp-verdict-cols b { color: var(--text); }
.mp-verdict-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

@media (max-width: 980px) {
  .mp-hero-grid, .mp-dna { grid-template-columns: 1fr; }
  .mp-hero-radar { order: -1; }
  .dna-grid { grid-template-columns: 1fr; }
  .dna-split { grid-template-columns: 1fr; }
  .dna-split .radar { max-width: 260px; margin: 0 auto; }
}
@media (max-width: 720px) {
  .arena-head, .arena-pickers { grid-template-columns: 1fr; }
  .arena-vs { justify-self: center; }
  .arena-verdict-split, .mp-verdict-cols { grid-template-columns: 1fr; }
}

/* icons in the model sub-nav need breathing room from the word */
.mp-subnav-link { display: inline-flex; align-items: center; gap: 7px; }
/* section headings: same treatment, applied via the emoji in the markup */
.mp-h2 { display: flex; align-items: center; gap: 9px; }

/* Papers page → AI Intelligence signpost. The leaderboard used to
   live here; anyone who bookmarked it needs to be told where it went. */
.rh-crosslink {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin: 46px 0 20px; padding: 22px 26px;
  border: 1px solid var(--glass-border); border-radius: 18px;
  background: linear-gradient(140deg, rgba(37,233,255,.10), rgba(168,85,247,.06));
}
.rh-crosslink-label { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 5px; }
.rh-crosslink-body { color: var(--text-soft); font-size: .9rem; max-width: 58ch; }

/* ═══════════════════════════════════════════
   COMBOBOX — the compare tool pickers
   Type-ahead, like a flight search field.
   ═══════════════════════════════════════════ */
.cbx { position: relative; }
.cbx-field {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--glass-border);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.cbx.open .cbx-field,
.cbx-field:focus-within {
  border-color: var(--glass-border-hover);
  box-shadow: 0 0 0 4px rgba(37,233,255,.08);
  background: rgba(255,255,255,.06);
}
.cbx-logo { flex: none; display: flex; }
.cbx-input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--text); font: inherit; font-size: .95rem; padding: 2px 0;
}
.cbx-input::placeholder { color: var(--text-muted); }
.cbx-clear, .cbx-caret { flex: none; color: var(--text-muted); }
.cbx-clear {
  display: grid; place-items: center; width: 22px; height: 22px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.07);
  cursor: pointer; transition: background .15s, color .15s;
}
.cbx-clear:hover { background: rgba(255,255,255,.14); color: var(--text); }
.cbx.open .cbx-caret { transform: rotate(180deg); }
.cbx-caret { transition: transform .2s var(--ease); }

.cbx-panel {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 7px);
  max-height: 340px; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: 16px;
  background: var(--glass-strong); backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border); box-shadow: var(--shadow);
}
.cbx-opt {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 11px; cursor: pointer;
}
.cbx-opt.active { background: rgba(37,233,255,.16); }
.cbx-opt.chosen { opacity: .55; }
.cbx-opt-text { flex: 1; min-width: 0; }
.cbx-opt-text b { display: block; font-size: .92rem; font-weight: 500; }
.cbx-opt-text small { display: block; font-size: .77rem; color: var(--text-soft); }
.cbx-opt mark { background: none; color: var(--cyan); font-weight: 700; }
.cbx-opt-score {
  flex: none; text-align: right; font-family: var(--font-display);
  font-size: .95rem; line-height: 1;
}
.cbx-opt-score i {
  display: block; font-style: normal; font-family: var(--font-body);
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px;
}
.cbx-empty { padding: 18px 12px; color: var(--text-soft); font-size: .88rem; text-align: center; }

/* [hidden] loses to an explicit display value — restore it, or the
   clear button and the empty logo slot sit there taking up space. */
.cbx-logo[hidden], .cbx-clear[hidden], .cbx-panel[hidden] { display: none; }

/* ═══════════════════════════════════════════
   WORKFLOWS — mode switch + card actions
   ═══════════════════════════════════════════ */
.wf-modes {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 18px;
  border-radius: 100px; background: var(--glass); border: 1px solid var(--glass-border);
}
.wf-mode {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border: 0; border-radius: 100px; cursor: pointer;
  background: none; color: var(--text-soft); font: inherit; font-size: .9rem; font-weight: 500;
  transition: background .18s, color .18s;
}
.wf-mode:hover { color: var(--text); }
.wf-mode.active {
  color: var(--text);
  background: linear-gradient(120deg, rgba(37,233,255,.20), rgba(168,85,247,.20));
  box-shadow: inset 0 0 0 1px var(--glass-border-hover);
}
.wf-mission-search button { flex: none; white-space: nowrap; }

.wf-card-link { color: inherit; }
.wf-card-link:hover { color: var(--cyan); }
.wf-card { cursor: pointer; }

.wf-actions {
  display: flex; gap: 8px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--glass-border);
}
.wf-act {
  flex: 1; text-align: center; padding: 8px 10px; border-radius: 10px;
  font-size: .84rem; font-weight: 500; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--text-soft);
  font-family: inherit; transition: background .16s, color .16s, border-color .16s;
}
.wf-act:hover { color: var(--text); border-color: var(--glass-border-hover); background: rgba(255,255,255,.07); }
.wf-act.primary {
  color: var(--text);
  background: linear-gradient(120deg, rgba(37,233,255,.18), rgba(168,85,247,.18));
  border-color: color-mix(in srgb, var(--cyan) 32%, transparent);
}

/* ═══════════════════════════════════════════
   MISSION CONTROL
   ═══════════════════════════════════════════ */
.mc-empty { padding: 40px 0 60px; max-width: 62ch; }
.mc-empty-title { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 8px; }
.mc-empty-body { color: var(--text-soft); line-height: 1.65; margin-bottom: 20px; }
.mc-examples { display: flex; flex-wrap: wrap; gap: 8px; }

.mc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding: 30px 0 18px;
}
.mc-eyebrow { font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; color: var(--cyan); }
.mc-title { font-family: var(--font-display); font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 7px 0 6px; }
.mc-sub { color: var(--text-soft); max-width: 60ch; }
.mc-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.mc-stats {
  display: flex; flex-wrap: wrap; gap: 26px; padding: 18px 22px; margin-bottom: 18px;
  border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass);
}
.mc-stat b { display: block; font-family: var(--font-display); font-size: 1.35rem; }
.mc-stat small { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft); }

.mc-note {
  padding: 13px 16px; margin-bottom: 20px; border-radius: 12px; font-size: .88rem; color: var(--text-soft);
  background: rgba(37,233,255,.08); border: 1px solid var(--glass-border);
}
.mc-note b { color: var(--text); }

.mc-steps { list-style: none; position: relative; padding-left: 0; }
.mc-step {
  position: relative; padding: 20px 22px; margin-bottom: 12px;
  border: 1px solid var(--glass-border); border-radius: 18px; background: var(--glass);
}
.mc-step-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.mc-step-n {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-family: var(--font-display); font-size: .9rem;
  background: linear-gradient(135deg, var(--cyan), var(--violet)); color: #07080D;
}
.mc-step-head h3 { font-family: var(--font-display); font-size: 1.1rem; }
.mc-why { color: var(--text-soft); font-size: .89rem; margin-top: 3px; line-height: 1.55; }

.mc-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mc-pick {
  display: flex; align-items: center; gap: 11px; padding: 11px 13px;
  border-radius: 13px; border: 1px solid var(--glass-border); background: rgba(255,255,255,.03);
  transition: transform .16s, border-color .16s;
}
.mc-pick:hover { transform: translateY(-2px); border-color: var(--glass-border-hover); }
.mc-pick.lead { border-color: color-mix(in srgb, var(--emerald) 34%, transparent); background: rgba(61,232,160,.06); }
.mc-pick-text { flex: 1; min-width: 0; }
.mc-pick-text b { display: block; font-size: .92rem; }
.mc-pick-text small { display: block; font-size: .75rem; color: var(--text-soft); }
.mc-pick-meta { flex: none; text-align: right; }
.mc-pick-meta i {
  display: block; font-style: normal; font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 3px;
}
.mc-lead-tag { color: var(--emerald); }
.mc-alt-tag { color: var(--text-muted); }
.mc-pick-meta em { font-style: normal; font-family: var(--font-display); font-size: .92rem; }

.mc-foot { margin: 22px 0 70px; color: var(--text-soft); font-size: .85rem; max-width: 78ch; line-height: 1.6; }

@media (max-width: 720px) {
  .mc-picks { grid-template-columns: 1fr; }
  .wf-modes { display: flex; width: 100%; }
  .wf-mode { flex: 1; justify-content: center; padding: 9px 10px; font-size: .84rem; }
  .wf-actions { flex-wrap: wrap; }
}

/* [hidden] loses to an explicit display — the mode switch depends on it */
.wf-search-wrap[hidden], .wf-modes[hidden], .wf-actions[hidden] { display: none !important; }

/* Clone framing on a workflow detail page */
.wf-clone-banner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin: 0 0 20px; padding: 16px 20px;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
  background: linear-gradient(140deg, rgba(37,233,255,.10), rgba(168,85,247,.07));
}
.wf-clone-title { font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 3px; }
.wf-clone-body { color: var(--text-soft); font-size: .87rem; max-width: 62ch; }

/* ── Workflows hero: mode-aware copy ─────── */
.wf-mode-hint { color: var(--text-soft); font-size: .9rem; margin: 0 0 16px; }
.wf-mode-hint b { color: var(--text); }
.wf-inline-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--cyan); text-decoration: underline;
  text-underline-offset: 3px;
}
.wf-try-label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-muted); margin: 18px 0 9px;
}

/* ── Mission Control: how it works ───────── */
.mc-how {
  list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin: 34px 0 70px;
}
.mc-how li {
  display: flex; gap: 13px; padding: 18px 20px;
  border: 1px solid var(--glass-border); border-radius: 16px; background: var(--glass);
}
.mc-how span {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-family: var(--font-display); font-size: .82rem;
  background: rgba(255,255,255,.07); color: var(--text-soft);
}
.mc-how b { display: block; font-size: .95rem; margin-bottom: 4px; }
.mc-how p { color: var(--text-soft); font-size: .85rem; line-height: 1.5; }

/* ── Mission Control: results ────────────── */
.mc-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.mc-pill {
  padding: 4px 12px; border-radius: 100px; font-size: .8rem;
  background: rgba(255,255,255,.06); border: 1px solid var(--glass-border); color: var(--text);
}
.mc-pill.soft { color: var(--text-soft); }
.mc-guide {
  padding: 14px 18px; margin-bottom: 22px; border-radius: 13px;
  background: rgba(37,233,255,.07); border: 1px solid var(--glass-border);
  color: var(--text-soft); font-size: .9rem; line-height: 1.6;
}
.mc-guide b { color: var(--text); }

.mc-step { padding-bottom: 22px; }
.mc-step-of {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-muted); margin-bottom: 10px;
}
.mc-connector {
  position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%);
  color: var(--text-muted); font-size: 1.1rem; line-height: 1; z-index: 1;
}
.mc-steps { display: grid; gap: 26px; }

/* Each option says what it is, instead of "Pick" / "Alt" */
.mc-pick { flex-direction: column; align-items: stretch; gap: 9px; padding: 13px 15px; }
.mc-pick-tag {
  font-style: normal; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
}
.mc-pick.lead .mc-pick-tag { color: var(--emerald); }
.mc-pick-row { display: flex; align-items: center; gap: 11px; }
.mc-pick-score {
  flex: none; font-style: normal; font-family: var(--font-display); font-size: .95rem; color: var(--text-soft);
}

.mc-foot {
  margin: 30px 0 80px; padding: 18px 20px; border-radius: 14px;
  border: 1px solid var(--glass-border); background: var(--glass);
  color: var(--text-soft); font-size: .86rem; line-height: 1.65; max-width: 82ch;
}
.mc-foot p + p { margin-top: 9px; }
.mc-foot b { color: var(--text); }

/* ═══════════════════════════════════════════
   MOBILE DRAWER
   Below 1100px the desktop menu is hidden, so this
   is the only navigation that exists. It ships on
   every page via nav.js.
   ═══════════════════════════════════════════ */
.nav-drawer-backdrop {
  position: fixed; inset: 0; z-index: 998;
  background: rgba(3, 4, 8, 0.66); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .24s var(--ease);
}
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 999;
  width: min(360px, 88vw); display: flex; flex-direction: column;
  background: var(--glass-strong); backdrop-filter: blur(24px);
  border-left: 1px solid var(--glass-border);
  box-shadow: -24px 0 60px rgba(0,0,0,.5);
  transform: translateX(100%); transition: transform .26s var(--ease);
  overscroll-behavior: contain;
}
body.drawer-open { overflow: hidden; }
body.drawer-open .nav-drawer { transform: none; }
body.drawer-open .nav-drawer-backdrop { opacity: 1; }
.nav-drawer[hidden], .nav-drawer-backdrop[hidden] { display: none; }

.nd-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--glass-border); flex: none;
}
.nd-title { font-family: var(--font-display); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }

.nd-body { flex: 1; overflow-y: auto; padding: 10px 12px 18px; }
.nd-link, .nd-group > summary {
  display: block; padding: 13px 14px; border-radius: 12px;
  font-size: 1rem; font-weight: 500; color: var(--text);
  cursor: pointer; list-style: none;
}
.nd-group > summary::-webkit-details-marker { display: none; }
.nd-link:hover, .nd-group > summary:hover { background: rgba(255,255,255,.06); }
.nd-link.active { color: var(--cyan); }

.nd-group > summary { display: flex; align-items: center; justify-content: space-between; }
.nd-group > summary::after {
  content: ""; width: 8px; height: 8px; flex: none;
  border-right: 1.8px solid var(--text-muted); border-bottom: 1.8px solid var(--text-muted);
  /* translateY follows the rotated axis, so nudge with margin instead */
  transform: rotate(45deg); margin-top: -3px; transition: transform .2s var(--ease);
}
.nd-group[open] > summary::after { transform: rotate(-135deg); margin-top: 3px; }

.nd-sub { padding: 2px 0 10px 12px; margin-left: 12px; border-left: 1px solid var(--glass-border); }
.nd-sub a { display: block; padding: 10px 12px; border-radius: 10px; font-size: .92rem; color: var(--text-soft); }
.nd-sub a:hover { background: rgba(255,255,255,.05); color: var(--text); }
.nd-sub b { display: block; font-weight: 500; color: var(--text); }
.nd-sub small { display: block; font-size: .76rem; color: var(--text-muted); margin-top: 1px; }

.nd-foot { flex: none; padding: 16px 18px 22px; border-top: 1px solid var(--glass-border); }
.nd-cta { display: block; text-align: center; width: 100%; }
.nd-extra { display: flex; gap: 18px; margin-top: 14px; justify-content: center; }
.nd-extra a { font-size: .86rem; color: var(--text-soft); }
.nd-extra a:hover { color: var(--cyan); }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-drawer-backdrop { transition: none; }
}

/* ── Hero on small screens ───────────────
   The panel and its inner rows must all be able to shrink, or one
   unshrinkable row drags the whole hero past the viewport edge. */
@media (max-width: 680px) {
  .hero { padding-left: 18px; padding-right: 18px; }
  .search-panel { padding: 9px; border-radius: 20px; max-width: 100%; min-width: 0; }
  .search-panel .search-shell { padding: 6px 8px 6px 16px; }
  .search-shell { min-width: 0; }
  .search-shell input { min-width: 0; font-size: 16px; }  /* 16px stops iOS zoom-on-focus */
  .hero-badge { max-width: 100%; }
  .hero-ctas { width: 100%; }
  .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
}

/* ── 404 ─────────────────────────────────── */
.nf-page { padding: 130px 24px 110px; text-align: center; }
.nf-code {
  font-family: var(--font-display); font-size: clamp(80px, 18vw, 190px); line-height: .9;
  background: var(--grad-brand); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; margin: 10px 0 6px;
}
.nf-title { font-family: var(--font-display); font-size: clamp(1.4rem, 3.4vw, 2.1rem); margin-bottom: 10px; }
.nf-sub { color: var(--text-soft); margin-bottom: 34px; }
.nf-links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px; max-width: 900px; margin: 0 auto 34px; text-align: left;
}
.nf-card {
  padding: 17px 19px; border-radius: 15px; background: var(--glass);
  border: 1px solid var(--glass-border); transition: transform .18s, border-color .18s;
}
.nf-card:hover { transform: translateY(-3px); border-color: var(--glass-border-hover); }
.nf-card b { display: block; font-size: .98rem; margin-bottom: 3px; }
.nf-card small { display: block; font-size: .81rem; color: var(--text-soft); }

/* Trust cards replace the old testimonial cards in the same slot */
.trust-icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 12px; font-size: 20px; margin-bottom: 14px;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
}
.trust-title { font-family: var(--font-display); font-size: 1.05rem; margin-bottom: 8px; }
.trust-body { color: var(--text-soft); font-size: .9rem; line-height: 1.65; }

/* Quote attribution without a dash */
.quote-by {
  display: block; margin-top: 8px; color: var(--cyan);
  font-weight: 500; font-size: .8rem; letter-spacing: .04em;
}

/* Shown instead of a fabricated star rating */
.no-rating { font-size: .8rem; color: var(--text-muted); font-style: italic; }

/* ═══════════════════════════════════════════
   DOC PAGES (about, contact, privacy, terms, submit)
   ═══════════════════════════════════════════ */
.doc-page { padding: 130px 24px 100px; max-width: 860px; }
.doc-head { margin-bottom: 40px; }
.doc-title { font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.12; letter-spacing: -.02em; margin: 10px 0 14px; }
.doc-lede { font-size: 1.08rem; color: var(--text-soft); line-height: 1.7; max-width: 62ch; }
.doc-body h2 { font-family: var(--font-display); font-size: 1.28rem; margin: 38px 0 12px; }
.doc-body p { color: var(--text-soft); line-height: 1.75; margin-bottom: 14px; max-width: 70ch; }
.doc-body a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.doc-body ul, .doc-body ol { color: var(--text-soft); line-height: 1.75; margin: 0 0 16px 20px; max-width: 70ch; }
.doc-body li { margin-bottom: 8px; }
.doc-body b { color: var(--text); }
.doc-note {
  padding: 15px 18px; margin: 22px 0 8px; border-radius: 13px; font-size: .9rem;
  color: var(--text-soft); line-height: 1.65;
  background: rgba(252,238,10,.07); border: 1px solid rgba(252,238,10,.28);
}
.doc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 12px; margin: 8px 0 10px; }
.doc-card { padding: 16px 18px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-border); transition: transform .18s, border-color .18s; }
.doc-card:hover { transform: translateY(-2px); border-color: var(--glass-border-hover); }
.doc-card b { display: block; margin-bottom: 3px; }
.doc-card small { display: block; color: var(--text-soft); font-size: .84rem; }

/* ── Submit form ─────────────────────────── */
.submit-form { display: grid; gap: 16px; margin: 26px 0 10px; }
.sf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sf-field { display: block; }
.sf-field > span { display: block; font-size: .88rem; font-weight: 500; margin-bottom: 7px; }
.sf-field > span i { font-style: normal; font-size: .72rem; color: var(--text-muted); margin-left: 6px; text-transform: uppercase; letter-spacing: .08em; }
.sf-field input, .sf-field select, .sf-field textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; font: inherit; font-size: .94rem;
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--text);
  transition: border-color .18s, box-shadow .18s;
}
.sf-field input:focus, .sf-field select:focus, .sf-field textarea:focus {
  outline: none; border-color: var(--glass-border-hover); box-shadow: 0 0 0 4px rgba(37,233,255,.08);
}
.sf-field textarea { resize: vertical; line-height: 1.6; }
.sf-count { display: block; text-align: right; font-size: .75rem; color: var(--text-muted); margin-top: 5px; }
.sf-check { display: flex; align-items: center; gap: 10px; align-self: end; padding-bottom: 12px; }
.sf-check input { width: auto; }
.sf-check span { font-size: .88rem; color: var(--text-soft); margin: 0; }
.sf-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.sf-note { font-size: .9rem; line-height: 1.6; max-width: 66ch; }
.sf-note.error { color: #FF2BD6; }
.sf-note.success { color: var(--emerald); }
.sf-steps { counter-reset: none; }
@media (max-width: 680px) { .sf-row { grid-template-columns: 1fr; } .doc-page { padding: 110px 18px 80px; } }

/* Unverified-benchmark notice */
.bench-warn {
  display: block; margin-top: 10px; padding: 11px 14px; border-radius: 11px;
  font-size: .85rem; line-height: 1.6; color: #FCEE0A;
  background: rgba(252,238,10,.07); border: 1px solid rgba(252,238,10,.26);
}
.bench-warn.standalone { margin: 0 0 20px; max-width: 78ch; }

/* Scannable trust checklist above the explanatory cards */
.trust-checks {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin: 0 0 26px; padding: 0;
}
.trust-checks li {
  display: flex; align-items: center; gap: 9px;
  font-size: .94rem; color: var(--text-soft);
}
.trust-checks li::before {
  content: "\2713"; flex: none;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: var(--emerald);
  background: color-mix(in srgb, var(--emerald) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald) 44%, transparent);
}

/* Workspace zero state: sell what a stack does, not what is missing */
.ws-empty-lede { color: var(--text-soft); max-width: 56ch; margin: 8px auto 20px; line-height: 1.65; }
.ws-unlock {
  list-style: none; display: inline-grid; gap: 10px; text-align: left;
  margin: 0 auto 26px; padding: 0;
}
.ws-unlock li {
  display: flex; align-items: center; gap: 11px;
  font-size: .95rem; color: var(--text-soft);
}
.ws-unlock li::before {
  content: "\2713"; flex: none; width: 19px; height: 19px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  color: var(--emerald);
  background: color-mix(in srgb, var(--emerald) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald) 44%, transparent);
}
.ws-noaccount { margin-top: 18px; font-size: .84rem; color: var(--text-muted); }

/* ═══════════════════════════════════════════
   LIGHT THEME
   The dark theme is the design; light was a set of
   patches on top of it. The problems were structural:
   neon accents built for a black background wash out
   on white, the atmospheric glows turn into a lavender
   haze, translucent "glass" surfaces stop reading as
   cards, and the particle hologram disappears entirely.
   This block fixes the causes rather than the symptoms.
   ═══════════════════════════════════════════ */
html[data-theme="light"] {
  /* Cooler, cleaner paper. The old #F4F6FB carried a blue cast
     that fought every accent placed on it. */
  --bg: #FBFCFE;
  --bg-2: #F1F4FA;
  --text: #0A0E1A;
  --text-soft: #0A7E96;
  /* #25E9FF measured 4.39:1 on white, just under the 4.5 AA floor. */
  --text-muted: #25E9FF;

  /* Surfaces become opaque. Translucency over a light page reads
     as a smudge, not a card. */
  --glass: #FFFFFF;
  --glass-strong: #FFFFFF;
  --glass-border: rgba(10,126,150,0.09);
  --glass-border-hover: rgba(37,233,255,0.42);
  --nav-bg: rgba(251,252,254,0.86);
  --shadow: 0 10px 30px rgba(10,126,150,0.07);

  /* #25E9FF is a neon for black. On white it is nearly invisible,
     so light gets its own ink-weight accents. Gradients keep the
     bright originals, since they sit on saturated fills. */
  --accent-ink: #0A7E96;      /* readable teal for icons and small text */
  --accent-ink-2: #25E9FF;    /* readable blue */
  --accent-ink-3: #A855F7;    /* readable violet */
}

/* ── Depth via shadow, not translucency ─── */
html[data-theme="light"] .glass,
html[data-theme="light"] .tool-card,
html[data-theme="light"] .stat,
html[data-theme="light"] .cat-card,
html[data-theme="light"] .coll-card,
html[data-theme="light"] .testi-card,
html[data-theme="light"] .wf-card,
html[data-theme="light"] .dna-card,
html[data-theme="light"] .mc-step,
html[data-theme="light"] .doc-card,
html[data-theme="light"] .nf-card,
html[data-theme="light"] .mp-price,
html[data-theme="light"] .mp-alt,
html[data-theme="light"] .lb-wrap,
html[data-theme="light"] .bench-key-item,
html[data-theme="light"] .dna-legend-item {
  background: #FFFFFF;
  border-color: rgba(10,126,150,0.10);
  box-shadow: 0 1px 2px rgba(10,126,150,0.05), 0 6px 18px rgba(10,126,150,0.05);
}
html[data-theme="light"] .tool-card:hover,
html[data-theme="light"] .wf-card:hover,
html[data-theme="light"] .cat-card:hover,
html[data-theme="light"] .coll-card:hover {
  box-shadow: 0 4px 10px rgba(10,126,150,0.07), 0 16px 36px rgba(37,233,255,0.12);
  border-color: rgba(37,233,255,0.28);
}

/* ── Atmosphere: the source of the lavender haze ─── */
html[data-theme="light"] .hero-orb-a { background: rgba(37,233,255,0.06); }
html[data-theme="light"] .hero-orb-b { background: rgba(168,85,247,0.05); }
html[data-theme="light"] .cursor-glow { opacity: 0.25; }
html[data-theme="light"] .intel-hero::before,
html[data-theme="light"] .mp-hero::before,
html[data-theme="light"] .wf-hero-glow { opacity: 0.35; }

/* ── Accents that were invisible on white ─── */
html[data-theme="light"] .section-eyebrow,
html[data-theme="light"] .mc-eyebrow,
html[data-theme="light"] .dna-verdict b,
html[data-theme="light"] .mp-price-example b,
html[data-theme="light"] .quote-by,
html[data-theme="light"] .link-arrow,
html[data-theme="light"] .dna-more,
html[data-theme="light"] .mp-alt-cta,
html[data-theme="light"] .wf-inline-link,
html[data-theme="light"] .intel-foot a,
html[data-theme="light"] .doc-body a { color: var(--accent-ink); }

html[data-theme="light"] .intel-tab.active,
html[data-theme="light"] .mp-subnav-link.active { border-bottom-color: var(--accent-ink); color: var(--text); }
html[data-theme="light"] .dna-star.full { background: var(--accent-ink); }
html[data-theme="light"] .dna-star.half { background: linear-gradient(90deg, var(--accent-ink) 50%, rgba(10,126,150,0.14) 50%); }
html[data-theme="light"] .dna-star { background: rgba(10,126,150,0.14); }
html[data-theme="light"] .pulse-dot { background: var(--accent-ink); }
html[data-theme="light"] .radar-shape { fill: color-mix(in srgb, var(--rc) 26%, transparent); }
html[data-theme="light"] .radar-ring,
html[data-theme="light"] .radar-spoke { stroke: rgba(10,126,150,0.14); }
html[data-theme="light"] .cbx-opt mark { color: var(--accent-ink); }
html[data-theme="light"] .trust-checks li::before,
html[data-theme="light"] .ws-unlock li::before { color: #3DE8A0; background: rgba(61,232,160,.10); border-color: rgba(61,232,160,.34); }

/* Headline gradient: the light stops vanished into the page */
html[data-theme="light"] .gradient-text {
  background: linear-gradient(120deg, #0A7E96, #25E9FF 45%, #A855F7);
  -webkit-background-clip: text; background-clip: text;
}

/* ── Nav needs a real edge on a light page ─── */
html[data-theme="light"] .nav.scrolled {
  box-shadow: 0 1px 0 rgba(10,126,150,0.07), 0 6px 24px rgba(10,126,150,0.05);
}
html[data-theme="light"] .nav-drop,
html[data-theme="light"] .mega-menu,
html[data-theme="light"] .cbx-panel,
html[data-theme="light"] .nav-drawer {
  background: #FFFFFF;
  box-shadow: 0 20px 60px rgba(10,126,150,0.14);
}

/* ── The hologram is cyan particles on black. On white it
      disappeared, so give it back a dark stage to live on. ─── */
/* No panel: the particles are dark ink in light mode, so the hologram
   sits directly on the page. A soft radial lift gives it depth without
   drawing a box around it. */
html[data-theme="light"] .holo-stage {
  background: radial-gradient(60% 55% at 50% 42%, rgba(37,233,255,0.07), transparent 70%);
}
html[data-theme="light"] .holo-label { color: var(--text-soft); }
html[data-theme="light"] .holo-orbit { opacity: 0.5; }

/* ── Inputs and pills ─── */
html[data-theme="light"] .search-shell,
html[data-theme="light"] .cbx-field,
html[data-theme="light"] .sf-field input,
html[data-theme="light"] .sf-field select,
html[data-theme="light"] .sf-field textarea,
html[data-theme="light"] .arena-pickers select {
  background: #FFFFFF;
  border-color: rgba(10,126,150,0.14);
}
html[data-theme="light"] .chip,
html[data-theme="light"] .wf-quick-chip,
html[data-theme="light"] .news-chip,
html[data-theme="light"] .lb-tag,
html[data-theme="light"] .mc-pill {
  background: #FFFFFF; border-color: rgba(10,126,150,0.12); color: var(--text-soft);
}
html[data-theme="light"] .chip:hover,
html[data-theme="light"] .wf-quick-chip:hover { border-color: var(--accent-ink); color: var(--text); }
html[data-theme="light"] .news-chip.active { background: var(--accent-ink-2); border-color: var(--accent-ink-2); }

/* ── Notices keep their meaning on a light page ─── */
html[data-theme="light"] .mc-guide,
html[data-theme="light"] .mc-note,
html[data-theme="light"] .rh-crosslink { background: rgba(37,233,255,0.05); border-color: rgba(37,233,255,0.18); }
html[data-theme="light"] .doc-note { background: rgba(181,168,0,0.07); border-color: rgba(181,168,0,0.28); color: var(--text-soft); }
html[data-theme="light"] .bench-warn { background: rgba(181,168,0,0.07); border-color: rgba(181,168,0,0.3); color: #B5A800; }
html[data-theme="light"] .mc-pick.lead { background: rgba(61,232,160,0.06); border-color: rgba(61,232,160,0.30); }
html[data-theme="light"] .mc-lead-tag { color: #3DE8A0; }
html[data-theme="light"] .ar-side.win { background: rgba(61,232,160,0.09); }
html[data-theme="light"] .bench-best { color: #3DE8A0; }
html[data-theme="light"] .wf-cost.free { color: #3DE8A0; }

/* ── Tables ─── */
html[data-theme="light"] .lb tbody tr:hover { background: rgba(37,233,255,0.04); }
html[data-theme="light"] .lb th.sorted { color: var(--accent-ink); }
html[data-theme="light"] .arena-table { background: #FFFFFF; }

/* ── Light: accents that failed contrast on white ───
   #25E9FF scored 1.37:1 and #FCEE0A scored 1.52:1 against a white
   card. WCAG AA needs 4.5:1 for text this size, so light mode gets
   ink-weight equivalents that keep the same meaning. */
html[data-theme="light"] .ai-score { color: var(--accent-ink); }
html[data-theme="light"] .rating,
html[data-theme="light"] .stars-val { color: #B5A800; }
html[data-theme="light"] .stars > b { color: #FCEE0A; }
html[data-theme="light"] .stars { color: rgba(10,126,150,0.16); }
html[data-theme="light"] .ai-line,
html[data-theme="light"] .tm-quote,
html[data-theme="light"] .tp-quote { color: var(--text-soft); }
html[data-theme="light"] .flame { color: #3DE8A0; }
html[data-theme="light"] .badge-trial { color: var(--accent-ink-2); border-color: rgba(37,233,255,.32); background: rgba(37,233,255,.06); }
html[data-theme="light"] .visits { color: var(--text-muted); }
html[data-theme="light"] .wf-stat,
html[data-theme="light"] .mtl-date,
html[data-theme="light"] .mp-org { color: var(--text-muted); }

/* Badges and tag chips used the neon cyan, which measured 1.37:1 on a
   white card. Same meaning, ink weight. */
html[data-theme="light"] .badge-freemium,
html[data-theme="light"] .badge-free { color: var(--accent-ink); border-color: rgba(10,126,150,.30); background: rgba(10,126,150,.07); }
html[data-theme="light"] .badge-paid { color: var(--accent-ink-3); border-color: rgba(168,85,247,.30); background: rgba(168,85,247,.06); }
html[data-theme="light"] .tp-tag,
html[data-theme="light"] .tool-tag,
html[data-theme="light"] .tag { color: var(--text-soft); background: rgba(10,126,150,.05); border-color: rgba(10,126,150,.10); }
html[data-theme="light"] .stars > b { color: #B5A800; }

/* Last two neon-on-white cases: the filter label value and the
   "best for" tag row, both still using the dark-theme cyan. */
html[data-theme="light"] .br-label b,
html[data-theme="light"] .bestfor span { color: var(--accent-ink); }

/* Workflow audience pills were still the dark-theme cyan on a white card */
html[data-theme="light"] .wf-audience {
  color: var(--accent-ink);
  background: rgba(10,126,150,.07);
  border-color: rgba(10,126,150,.28);
}
html[data-theme="light"] .wf-reveal-label,
html[data-theme="light"] .mc-step-of,
html[data-theme="light"] .lb th { color: var(--text-muted); }
html[data-theme="light"] .wf-outcomes li::before { color: #3DE8A0; }

/* Active item in the mobile drawer (hidden on desktop, still must pass) */
html[data-theme="light"] .nd-link.active { color: var(--accent-ink); }

/* ── Light: cards that keep a coloured backdrop ───
   Collection cards paint a saturated gradient behind their content, so
   their text must stay white in both themes. The light block above
   turned generic card surfaces white, which made these headings
   inherit dark ink and sit unreadably on the gradient. */
html[data-theme="light"] .coll-index-card,
html[data-theme="light"] .coll-card {
  background: transparent;
  box-shadow: 0 6px 22px rgba(10,126,150,0.12);
}
html[data-theme="light"] .coll-index-card,
html[data-theme="light"] .coll-index-body h2,
html[data-theme="light"] .coll-index-body h3,
html[data-theme="light"] .coll-card,
html[data-theme="light"] .coll-card h3 { color: #fff; }
html[data-theme="light"] .coll-index-body p,
html[data-theme="light"] .coll-card p { color: rgba(255,255,255,0.82); }
html[data-theme="light"] .coll-index-card .coll-tag,
html[data-theme="light"] .coll-card .coll-tag {
  background: rgba(7,8,13,0.45); color: #fff; border-color: rgba(255,255,255,0.22);
}
html[data-theme="light"] .coll-count,
html[data-theme="light"] .coll-index-card .coll-meta { color: rgba(255,255,255,0.88); }

/* Same idea for the workflow and model detail heroes, which also sit
   on their own gradient. */
html[data-theme="light"] .wf-hero h1,
html[data-theme="light"] .wf-hero-outcome,
html[data-theme="light"] .coll-hero-sub { color: #fff; }

/* Theme toggle is hidden while the site ships dark-only.
   Set THEME_TOGGLE = true in data.js to restore it. */
html.theme-locked #themeToggle { display: none !important; }

/* ── No curated match: hand the query to Mission Control ───
   A zero-result search used to end the journey. It now previews a
   generated plan in place, so the reader never has to retype. */
.wf-handoff {
  max-width: 720px; margin: 8px auto 60px; padding: 26px 28px;
  border-radius: 20px; background: var(--glass);
  border: 1px solid var(--glass-border);
}
.wf-handoff-eyebrow {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-muted); margin-bottom: 8px;
}
.wf-handoff-title { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.35; margin-bottom: 8px; }
.wf-handoff-body { color: var(--text-soft); font-size: .92rem; line-height: 1.65; margin-bottom: 20px; max-width: 62ch; }
.wf-handoff-steps { list-style: none; display: grid; gap: 8px; margin: 0 0 22px; padding: 0; }
.wf-handoff-steps li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px;
  background: rgba(255,255,255,.03); border: 1px solid var(--glass-border);
}
.wf-handoff-steps li span {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; font-size: .76rem; font-family: var(--font-display);
  background: linear-gradient(135deg, var(--cyan), var(--violet)); color: #07080D;
}
.wf-handoff-steps li b { flex: 1; font-weight: 500; font-size: .92rem; }
.wf-handoff-steps li em { font-style: normal; font-size: .85rem; color: var(--text-soft); }
.wf-handoff-steps li.more {
  justify-content: center; color: var(--text-muted); font-size: .84rem;
  background: none; border-style: dashed;
}
.wf-handoff-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.wf-handoff-note { margin-top: 12px; font-size: .86rem; color: var(--emerald); }
html[data-theme="light"] .wf-handoff-steps li { background: #fff; }

/* ── Honest "we do not cover this" state ───
   Shown instead of a generated plan when no archetype matches. A plausible
   looking template is worse than an admission. */
.mc-nocover { padding: 34px 0 70px; max-width: 760px; }
.mc-nocover-body { color: var(--text-soft); line-height: 1.7; margin: 10px 0 26px; max-width: 66ch; }
.mc-nocover-label {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-muted); margin-bottom: 12px;
}
.mc-nocover-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 26px; }
.mc-nocover-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.mc-weak-tag {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .1em;
  padding: 3px 8px; border-radius: 100px; vertical-align: middle;
  color: #FCEE0A; background: rgba(252,238,10,.1); border: 1px solid rgba(252,238,10,.3);
}
html[data-theme="light"] .mc-weak-tag { color: #B5A800; background: rgba(181,168,0,.08); border-color: rgba(181,168,0,.3); }

/* ── Search dropdown as a real overlay ───
   .hero-content sets z-index:2, which creates a stacking context and caps
   anything inside it. The dropdown's own z-index could never escape, so the
   stats section (also z-index:2, later in the DOM) painted over it. Lift the
   context only while the dropdown is open. */
/* Lift at the OUTERMOST ancestor. .hero-inner and .hero-content are both
   z-index:2, so raising either one just moves the trap up a level — the
   value still gets scoped inside the next context down. .hero is the first
   ancestor that doesn't create one, so it's the only lever that reaches
   the root and clears .stats. */
body.search-open .hero { z-index: 80; }

/* A soft scrim so the panel reads as a deliberate overlay rather than a box
   that happens to sit on top of the page. */
body.search-open::after {
  content: ""; position: fixed; inset: 0; z-index: 55;
  background: rgba(3, 4, 8, 0.45);
  backdrop-filter: blur(1.5px);
  animation: srScrim .18s ease-out both;
  pointer-events: none;
}
@keyframes srScrim { from { opacity: 0; } to { opacity: 1; } }

/* A menu surface should be opaque. --glass-strong is 82% alpha, so the
   hero's decorative orbs read straight through the results and make the
   panel look like it's floating in the artwork. */
.search-results {
  background: #0A7E96;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 0 1px var(--glass-border);
}
html[data-theme="light"] .search-results { background: #FFFFFF; }
html[data-theme="light"] body.search-open::after { background: rgba(10,126,150,.25); }
html[data-theme="light"] .search-results { box-shadow: 0 24px 60px rgba(10,126,150,.18), 0 0 0 1px var(--glass-border); }

/* The scroll cue lives inside .hero and outranked the dropdown. It's an
   affordance for "there's more below" — irrelevant while someone is
   picking a result, so it steps aside. */
body.search-open .hero-scroll-hint { opacity: 0; pointer-events: none; transition: opacity .18s ease; }

/* On a phone the dropdown reaches the bottom-right corner, where the
   assistant FAB floats at z-index 200. Raising the dropdown above a fixed
   nav-level element would be wrong, so the FAB steps aside instead — it's
   a competing CTA during a focused task anyway. */
body.search-open .assistant { opacity: 0; pointer-events: none; transition: opacity .18s ease; }

/* Search is scoped to tools, so people who arrive with a goal rather than a
   tool need somewhere to land. Quiet by design: it's a fallback, not a
   second CTA competing with the search itself. */
.search-alt {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
}
.search-alt a {
  color: var(--cyan);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--cyan) 35%, transparent);
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.search-alt a::after { content: " \2192"; }
.search-alt a:hover { color: var(--electric); border-color: var(--electric); }
.hero-inner .search-alt { text-align: left; }
@media (max-width: 900px) { .hero-inner .search-alt { text-align: center; } }

/* ── Generated cover art ─────────────────────
   Posts had no featured image, only a flat gradient. Covers are now
   drawn SVGs (see cover-art.js) that fill their frame like a photo
   would, cropping rather than squashing at any aspect ratio. */
.blog-card-art, .blog-feature-art, .post-art, .story-art, .news-feature-art {
  position: relative;
  overflow: hidden;
  background: var(--midnight);
}
.cover-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
.blog-feature-badge, .news-feature-badge { z-index: 2; }

/* ── Blog cards, one shape ───────────────────
   The art was a fixed 130px while the body grew with the text, so
   cards in a row ended up different shapes. Now the art holds a fixed
   ratio, the title and excerpt are clamped to a set number of lines,
   and the read link is pushed to the bottom, so every card matches
   whatever the copy length happens to be. */
.blog-grid { align-items: stretch; }
.blog-card { height: 100%; }
.blog-card-art { height: auto; aspect-ratio: 16 / 9; }
.blog-card-body { flex: 1; }
.blog-card-body h3 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.5em;
}
.blog-card .blog-excerpt {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
  /* Clamping caps the maximum but not the minimum, so a two-line excerpt
     still made a shorter card once the grid dropped to one column. */
  min-height: 4.8em;
}
.blog-read-sm {
  margin-top: auto; padding-top: 12px;
  font-size: 13.5px; font-weight: 600; color: var(--cyan);
}
.blog-card:hover .blog-read-sm { color: var(--electric); }

/* A lone card on the final row reads as a mistake. Cap the column
   count so the grid stays even at common widths. */
@media (min-width: 1100px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) and (max-width: 1099px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }

/* The hero headline is two deliberate lines. If a future edit makes a line
   too long for the column, balance the wrap rather than leaving one orphan
   word on a third line. */
.hero-title { text-wrap: balance; }

/* Open-weight marker + benchmark provenance on model pages. */
.m-open {
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .08em;  /* 800 is not installed; it was being faux-bolded */
  padding: 2px 6px; border-radius: 5px; margin-left: 6px; vertical-align: middle;
  color: var(--emerald, #3DE8A0); background: color-mix(in srgb, var(--emerald, #3DE8A0) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--emerald, #3DE8A0) 35%, transparent);
}
.bench-cov { color: var(--text-muted); font-weight: 500; }
.mp-sources { margin: 14px 0 4px; font-size: 13.5px; color: var(--text-soft); }
.mp-sources b { display: block; margin-bottom: 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.mp-sources ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.mp-sources li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 11px; border-radius: 9px; background: var(--glass); border: 1px solid var(--glass-border); }
.mp-sources li span { color: var(--text-muted); white-space: nowrap; }
.mp-bench-empty {
  padding: 16px 18px; border-radius: 13px; font-size: 14.5px; line-height: 1.65;
  color: var(--text-soft); background: var(--glass); border: 1px solid var(--glass-border);
}


/* ── DNA stars, redrawn ──────────────────────
   Was a clip-path polygon on a 13px square. Two problems: clip-path edges
   barely antialias at that size, so the points came out ragged, and a real
   five-point star is 1.0515:1, so a square box squashed it by 5%. That is
   the "stretched" look.

   Now an SVG mask with the true geometry and the true aspect ratio. Vector,
   so it stays sharp at any zoom or pixel density, and the half state is
   still just a background gradient because the mask owns the shape. */
.dna-star {
  --star: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2095.11%2090.45%22%3E%3Cpath%20d%3D%22M47.55%200.00%20L61.60%2030.66%20L95.11%2034.55%20L70.28%2057.39%20L76.94%2090.45%20L47.55%2073.90%20L18.16%2090.45%20L24.82%2057.39%20L0.00%2034.55%20L33.50%2030.66%20Z%22%2F%3E%3C%2Fsvg%3E");
  /* Explicit box on both axes. With `height: auto` + aspect-ratio the flex
     row resolved height first and back-computed the width, which inflated
     the star to 26px. 15 / 1.0515 = 14.27 keeps the true proportions. */
  width: 15px;
  height: 14.27px;
  flex: 0 0 auto;
  display: block;
  clip-path: none;            /* the old polygon must be switched off */
  border-radius: 0;
  -webkit-mask-image: var(--star);
          mask-image: var(--star);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  background: var(--glass-border);
}
.dna-star.full { background: var(--cyan); }
.dna-star.half { background: linear-gradient(90deg, var(--cyan) 50%, var(--glass-border) 50%); }
.dna-stars { gap: 3px; align-items: center; }

html[data-theme="light"] .dna-star { background: rgba(10,126,150,0.16); }
html[data-theme="light"] .dna-star.full { background: var(--accent-ink); }
html[data-theme="light"] .dna-star.half { background: linear-gradient(90deg, var(--accent-ink) 50%, rgba(10,126,150,0.16) 50%); }


/* ── Mobile nav alignment ────────────────────
   .nav-inner is a flex row with justify-content: normal. On desktop the
   actions land on the right only because .nav-menu carries `margin: 0 auto`
   and soaks up the free space either side of it. At 1100px the menu goes
   display:none, those auto margins go with it, and the logo and the icons
   collapse together against the left edge with 128px of dead space to the
   right. Push the actions over explicitly once the menu is gone. */
@media (max-width: 1100px) {
  .nav-actions { margin-left: auto; }
}

/* ── Mobile hero rhythm ──────────────────────
   padding-top was 130px at every width. That is sized for the 76px desktop
   nav; against the 68px mobile nav it left ~62px of empty space above the
   badge before anything started. Tighten the top and bottom on phones so
   the hero starts where the eye expects and the CTAs are not stranded. */
@media (max-width: 680px) {
  .hero {
    /* The real cause of the gaps was not the padding. .hero is
       min-height:100vh with align-items:center, so a 632px content block
       floated in the middle of an 844px box and the leftover 212px split
       evenly above and below. Reducing padding just moved the centring
       box. On a phone the hero does not need to fill the screen: size it
       to its content and start it under the nav. */
    min-height: 0;
    align-items: flex-start;
    padding-top: 96px;
    padding-bottom: 44px;
  }
}

/* ══════════════════════════════════════════════
   MOBILE PASS
   Everything below is from a measured audit of all
   19 page templates at 390x844, not from eyeballing.
   ══════════════════════════════════════════════ */
@media (max-width: 680px) {

  /* ── Inner page top padding ──
     120px is sized for the desktop nav. Against the 69px mobile nav it
     leaves ~50px of dead space before the first heading on every page. */
  .tool-page, .browse, .collections-page, .collection-page,
  .blog-page, .post-page, .news-page, .story-page, .research-page,
  .compare-page, .wf-page, .wf-detail, .ws-page, .doc-page, .nf-page {
    padding-top: 96px;
    padding-bottom: 56px;
  }

  /* ── Gutters ──
     28px is generous on a 390px screen; 20px gives the content more room
     while still keeping text off the glass. */
  .container { padding-left: 20px; padding-right: 20px; }

  /* ── Tap targets ──
     Audit found these under the 44px accessibility floor, several at
     34px or less. Every one is a real control, not an inline link. */
  .icon-btn { min-width: 40px; min-height: 40px; }
  .tool-card .icon-btn,
  .icon-btn.act-bm, .icon-btn.act-cmp, .icon-btn.act-share { width: 40px; height: 40px; }
  .tool-open { min-height: 40px; }
  .nova-pop-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }

  /* Chips and segmented controls sat at 31px. */
  .chip, .seg, .news-chip, .wf-quick-chip, .bench-chip { min-height: 38px; }

  /* Filter checkboxes were 15x15. The box stays small visually, but the
     label around it becomes the target. */
  .br-opt, .br-check, label:has(input[type="checkbox"]) { min-height: 40px; display: flex; align-items: center; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }

  /* Footer and inline card links were 22–26px tall. The real footer class
     is .footer-links, not .footer-col — the audit caught the miss. */
  .footer-links a, .footer-inner a, .link-arrow, .wf-card-link {
    min-height: 36px; display: inline-flex; align-items: center;
  }
  .footer-links { gap: 4px 18px; flex-wrap: wrap; }
  .logo { min-height: 40px; }

  /* ── Text floor ──
     Audit found 9.5px, 10px and 10.5px in production. Anything under
     11px is genuinely hard to read on a phone. */
  .blog-feature-badge, .blog-cat, .news-source, .paper-tag,
  .wf-audience, .wf-reveal-label, .coll-tag, .badge,
  .badge-freemium, .badge-trial, .badge-paid, .zdot, .quote-by,
  .br-label, .flame { font-size: 11px !important; }
  .wf-card small, .tool-card small, .m-chip small { font-size: 11px; }
  /* One stray 10.5px label the named selectors above did not reach. */
  .tool-card span, .coll-card span, .news-item span { font-size: max(11px, 1em); }

  /* Filter controls the audit caught last: a 15px-tall Clear button and a
     16px-tall range slider. The checkbox labels were already 312x40, so
     those were a false positive on the input rather than its label. */
  .br-clear { min-height: 36px; display: inline-flex; align-items: center; padding: 0 10px; }
  .br-range { min-height: 36px; }
  input[type="range"] {
    min-height: 36px;                 /* touch area, not visual track height */
    background: transparent;
  }
  input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; }

  /* Model page links sat at 22px tall. */
  .mp-back, .mp-alt-cta { min-height: 36px; display: inline-flex; align-items: center; }

  /* The OPEN badge I added for open-weight models rendered at 9.5px, and
     the benchmark-coverage "(n)" at 10.24px. Both below the readable floor. */
  .m-open { font-size: 11px; padding: 3px 7px; }
  .bench-cov { font-size: 11px; }

  /* Last pass. A text input at 28px and buttons at 30px are awkward to hit,
     and iOS zooms any input under 16px font-size on focus. */
  .cbx-input, input[type="text"], input[type="search"], input[type="email"], textarea, select {
    min-height: 44px;
    font-size: 16px;              /* stops iOS auto-zoom on focus */
  }
  .btn-sm { min-height: 36px; }
  .nova-pop-close { width: 36px; height: 36px; }

  /* Two remaining 10.5px labels in the hero stats and ticker. */
  .stat small, .tick-item b, .tick-item span { font-size: 11px; }
}

/* The hologram is decoration, not a control. It no longer opens Nova, so
   it should not advertise itself as clickable or show a focus ring. */
.hero-holo { cursor: default; }
.hero-holo:focus-visible .holo-stage { outline: none; }

/* ── Browse filters on mobile ────────────────
   The panel measured 775px tall on a 390px screen, so the first tool sat
   1.28 screens down the page. It also capped the 30-category list at
   200px with its own scrollbar, which is awkward on touch: a scrolling
   box inside a scrolling page.

   Collapsed by default on phones. Nothing is removed, and when it is open
   the category list runs at full height so there is no nested scroll. */
.br-toggle { display: none; }

@media (max-width: 940px) {
  .br-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%;
    min-height: 48px; padding: 0 14px; margin-top: 4px;
    border-radius: 12px; cursor: pointer;
    background: var(--glass); border: 1px solid var(--glass-border);
    color: var(--text); font: inherit; font-size: 14.5px; font-weight: 600;
  }
  .br-toggle-label { flex: 1; text-align: left; }
  .br-toggle-count {
    font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
    background: var(--cyan); color: #04121A;
  }
  .br-toggle-chev { transition: transform .2s ease; flex: none; }
  .br-filters.open .br-toggle-chev { transform: rotate(180deg); }

  .br-body { display: none; padding-top: 14px; }
  .br-filters.open .br-body { display: block; }

  /* Open panel: let the categories breathe instead of scrolling inside. */
  .br-filters.open .br-cats { max-height: none; overflow: visible; }

  /* The toggle carries the "Filters" label, so the panel heading beside it
     was the word twice. Move the heading row inside the collapsible body
     (done in JS) and let the toggle stand alone. */
  .br-filter-head { display: none; }
  .br-filters.open .br-body .br-filter-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 0 0 12px;
  }

  /* Collapsed, the panel is just a chrome box around a bordered button.
     Drop the outer shell and let the toggle be the whole control. */
  .br-filters {
    background: none; border: 0; padding: 0;
  }
  .br-filters.open {
    background: var(--glass); border: 1px solid var(--glass-border);
    border-radius: var(--radius); padding: 14px;
  }
}

/* ── Hero headline, flat fill ────────────────
   Was a cyan→blue→violet gradient clipped to the text. Two problems: the
   violet end measured 4.47:1 against the hero background, below the 4.5:1
   AA floor and the weakest thing on the page, and because the gradient
   ran left to right the opening words read lighter than the closing ones,
   which looked like a weight change rather than a colour one.

   Flat fills instead. Line one white, line two cyan at 13.84:1, both at
   the same weight so the two lines read as one sentence. */
.hero-title { font-weight: 700; color: var(--text); }
.hero-title-alt {
  color: var(--cyan);
  font-weight: inherit;      /* must not drift from line one */
  background: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

/* ── Hero subhead ────────────────
   One line now. --text-soft measured 10.27:1, which passes, but reads dim
   against the constellation artwork behind it. One step lighter, 12.60:1. */
/* ── Hero greys: two tokens, no more ────────────
   The search card had drifted to three greys — subhead light, "Try:" and
   the workflow fallback much dimmer, chip text somewhere in between. Three
   levels read as inconsistency rather than hierarchy. One grey for anything
   the visitor reads as content, one for anything that only labels a control.
   --hero-label measures 7.8:1 on the space black, so demoting a label never
   costs legibility. */
:root {
  --hero-ink: #CBD3E4;
  --hero-label: #9AA3B9;
}
html[data-theme="light"] {
  --hero-ink: #0A7E96;
  --hero-label: #25E9FF;
}

.hero-sub { color: var(--hero-ink); }
.search-panel .chip { color: var(--hero-ink); }
.search-panel .chip:hover { color: var(--text); }

.chips-label,
.hero-inner .search-alt,
.search-panel .search-icon,
.search-panel .search-kbd { color: var(--hero-label); }
.search-panel #searchInput::placeholder { color: var(--hero-label); }

/* ── Hero CTAs: one loud, one quiet ────────────
   Two btn-lg pills side by side gave browse and trending the same visual
   claim, so the pair cancelled out and neither read as the next step.
   Explore keeps the filled pill; Trending drops to a text link — it points
   at a section further down the same page, which is a smaller promise. */
.cta-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body);
  font-size: 15px; font-weight: 500;
  color: var(--hero-ink);
  text-decoration: none;
  padding: 16px 8px;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.cta-secondary:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--cyan) 45%, transparent);
}
.hero-ctas { align-items: center; gap: 10px; }
/* Full-width button plus an inline link on one row leaves the link squeezed
   against the edge. Stack them; the link keeps its quieter weight. */
@media (max-width: 680px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .cta-secondary { justify-content: center; padding: 10px 8px; }
}

/* The subhead is one line from 1280px up, but at ~1181px it exceeds the
   column by about 4px and wraps, which would leave a single word stranded
   on line two. Balance the break so it splits evenly instead. */
.hero-sub { text-wrap: balance; }

/* ── Search dropdown: sections, hints, empty state ──
   The list used to be six bare rows. It now carries a count, an escape to
   the full result set, keyboard hints, and something useful to show before
   you have typed anything. */
.sr-head {
  margin: 2px 4px 6px; padding: 0 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted);
}
.sr-section + .sr-section { margin-top: 10px; }

.sr-item { border-radius: 13px; }
.sr-item.sel { background: rgba(37,233,255,0.10); box-shadow: inset 0 0 0 1px rgba(37,233,255,0.28); }
.sr-item .sr-meta small { display: block; font-size: 11px; color: var(--text-muted); }
.sr-item mark { background: rgba(37,233,255,.18); color: var(--cyan); border-radius: 3px; padding: 0 2px; }

/* Recent queries, one tap to run again. */
.sr-recent {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 6px 6px 8px; padding: 7px 12px; min-height: 36px;
  border-radius: 999px; cursor: pointer;
  background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--text-soft); font: inherit; font-size: 13px;
}
.sr-recent:hover { border-color: var(--glass-border-hover); color: var(--text); }

/* Footer: keyboard hints on the left, a way past the cap on the right. */
.sr-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 8px; padding: 10px 12px 4px;
  border-top: 1px solid color-mix(in srgb, var(--glass-border) 60%, transparent);
  font-size: 12px; color: var(--text-muted);
}
.sr-keys { display: inline-flex; align-items: center; gap: 5px; }
.sr-keys kbd {
  font: inherit; font-size: 10.5px; line-height: 1;
  padding: 3px 5px; border-radius: 5px;
  background: rgba(255,255,255,.05); border: 1px solid var(--glass-border);
  color: var(--text-soft);
}
.sr-all { color: var(--cyan); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sr-all:hover { color: var(--electric); }

/* Empty state now offers a route out instead of a dead end. */
.sr-empty { display: grid; gap: 8px; padding: 18px 14px 14px; font-size: 14px; color: var(--text-soft); }
.sr-empty b { font-size: 15px; color: var(--text); }
.sr-empty em { font-style: normal; color: var(--cyan); }
.sr-plan {
  justify-self: start; margin-top: 4px; padding: 9px 14px; min-height: 38px;
  display: inline-flex; align-items: center;
  border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 13.5px;
  color: var(--cyan); background: rgba(37,233,255,.08); border: 1px solid rgba(37,233,255,.28);
}
.sr-plan:hover { background: rgba(37,233,255,.14); }

/* Rows arrive in sequence rather than all at once. Short enough not to
   delay anyone, long enough to read as motion. */
@media (prefers-reduced-motion: no-preference) {
  .search-results .sr-item { animation: srIn .18s var(--ease) both; }
  .search-results .sr-item:nth-child(2) { animation-delay: .02s; }
  .search-results .sr-item:nth-child(3) { animation-delay: .04s; }
  .search-results .sr-item:nth-child(4) { animation-delay: .06s; }
  .search-results .sr-item:nth-child(5) { animation-delay: .08s; }
  .search-results .sr-item:nth-child(6) { animation-delay: .10s; }
  @keyframes srIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 680px) {
  .sr-foot { flex-wrap: wrap; }
  .sr-keys { display: none; }        /* no keyboard on a phone */
  .sr-all { min-height: 36px; display: inline-flex; align-items: center; }
}

/* ── Mega menu, tightened ────────────────────
   It ran 673px tall, 75% of a 900px screen. The cause was not the number
   of categories: "Video Generation" and "Image Generation" needed 107px of
   a 107px text column and wrapped to two lines, and because grid rows size
   to their tallest cell, those two inflated every row from ~52px to 89px.
   Across eight rows that is roughly 280px of empty space.

   Buy the labels a few more pixels, and guarantee one line with an
   ellipsis so no future category can do this again. */
.mega-inner { padding: 18px 22px; gap: 24px; }

.mega-cat { padding: 7px 10px; gap: 9px; align-items: center; }
.mega-cat-icon { width: 30px; height: 30px; border-radius: 9px; font-size: 15px; flex: none; }
.mega-cat > span { min-width: 0; }          /* lets the ellipsis actually engage */
.mega-cat b {
  font-size: 13px; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mega-cat small { font-size: 11px; line-height: 1.2; }
.mega-grid { gap: 4px 8px; }

/* Safety net: on a short screen the panel scrolls rather than running off
   the bottom of the window. */
.mega-menu { max-height: calc(100vh - 110px); overflow-y: auto; }
.mega-side { padding-left: 26px; }
.mega-side-list { gap: 6px; margin-bottom: 14px; }
.mega-pick { padding: 6px 8px; }


/* ── Type scale notes ────────────────────────
   Instrument Sans sits looser than Space Grotesk did at display sizes, so
   headings carry a touch of negative tracking. Kept out of the token so
   body copy is unaffected. */
h1, h2, h3, h4, .hero-title, .section-title, .br-title {
  letter-spacing: -0.025em;
}

/* Figures that sit in a column align only if the digits are the same
   width. Tabular numerals do most of that, the mono face guarantees it. */
.lb-num, .bench-cov, .mp-hs b, .wf-cost, .tool-price,
.mp-bench-val, .paper-score, .m-chip .rating {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  /* several of these are <b>, which would inherit 700. We ship mono at
     400/500/600, so 700 would be synthesised. */
  font-weight: 600;
}
.search-kbd, .holo-label, kbd {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

/* A nested <b> inherits `bolder`, which resolves to 900 when the parent is
   already 700 — and 900 is not installed in any of our families, so the
   browser synthesises it. Pin bold to the weight we actually ship. */
b, strong { font-weight: 700; }

/* The caret is decoration inside a control the field-level handler owns.
   Marking it non-interactive keeps it from becoming an event target of its
   own again, and the pointer cue now covers the whole field. */
.cbx-caret { pointer-events: none; }
.cbx-field { cursor: pointer; }
.cbx-field .cbx-input { cursor: text; }

/* ── Category grid on phones ─────────────────
   A blanket rule drops every card grid to one column at 680px. That is
   right for tool and news cards, which carry real content, and wrong for
   a category card that is an icon, a name and a count: 30 of them at
   153px each ran to 5,276px, six full screens of scroll for one section.

   Two columns and a tighter card, so nothing is hidden behind a "view
   all" and the section stops dominating the page. */
@media (max-width: 680px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cat-card { padding: 14px 12px; }
  .cat-icon { font-size: 20px; margin-bottom: 7px; }
  .cat-card b { font-size: 13.5px; margin-bottom: 1px; line-height: 1.25; }
  .cat-card small { font-size: 11px; }
  /* the decorative corner orb is 120px on a 180px card: pure noise here */
  .cat-card::after { display: none; }
}

/* Two columns got the category section from 6 screens to 2.3. Still long
   for a browse aid sitting between the tool grid and collections, so show
   the twelve biggest categories and let the reader ask for the rest. */
@media (max-width: 680px) {
  .cat-grid:not(.all) .cat-card:nth-child(n+13) { display: none; }
  .cat-more {
    display: block; width: 100%; margin-top: 12px; min-height: 44px;
    padding: 12px 16px; border-radius: 12px; cursor: pointer;
    background: var(--glass); border: 1px solid var(--glass-border);
    color: var(--text); font: inherit; font-size: 14px; font-weight: 600;
  }
  .cat-more b { color: var(--cyan); }
  .cat-more:hover { border-color: var(--glass-border-hover); }
}
.cat-more { display: none; }

/* Every story now carries the report it came from. A news feed that
   summarises other people's reporting has to say so and link out. */
.story-source {
  margin: 26px 0 0; padding: 14px 16px;
  border-radius: 12px; font-size: 13.5px; line-height: 1.6;
  background: var(--glass); border: 1px solid var(--glass-border);
  color: var(--text-muted);
}
.story-source a { color: var(--cyan); font-weight: 600; text-decoration: none; margin-left: 6px; }
.story-source a:hover { color: var(--electric); }

/* Build-time tool content (build-prerender.py). tool.js replaces it with
   the interactive page on load; until then — and for anything that never
   runs JavaScript — this is a readable page rather than "Loading…". */
.tp-static { max-width: 720px; padding: 8px 0 40px; }
.tp-static h1 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 44px); font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 8px; }
.tp-static h2 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin: 26px 0 10px; }
.tp-static-meta { font-size: 13.5px; color: var(--text-muted); }
.tp-static-desc { font-size: 16px; line-height: 1.65; color: var(--text-soft); margin-top: 16px; }
.tp-static-take { margin: 18px 0 0; padding-left: 14px; border-left: 2px solid var(--violet); font-style: italic; color: var(--text-soft); }
.tp-static-take cite { display: block; margin-top: 6px; font-style: normal; font-size: 12.5px; color: var(--cyan); }
.tp-static ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.tp-static li { font-size: 14.5px; color: var(--text-soft); padding-left: 16px; position: relative; }
.tp-static li::before { content: "+"; position: absolute; left: 0; color: var(--cyan); }
.tp-static-visit { display: inline-block; margin-top: 22px; font-weight: 600; color: var(--cyan); text-decoration: none; }

/* ── Hero core: projection staging ─────────────
   With the WebGL core running (holo3d.js adds .holo-3d):
   - the two tilted dashed ellipses stand down; they framed the old spinning
     solids and cut across a projected icon at arbitrary angles;
   - a soft pool of the page ground sits behind the glyph, so the background
     network lines no longer run straight through it. Theme-aware through
     --bg, and fully feathered so there is no visible disc edge. */
.holo-stage.holo-3d .holo-orbit { display: none; }
.holo-stage.holo-3d::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  /* 100%, not 150%: the wider pool reached past the stage and pushed the
     page 5px wider than a 1440px window. The feathered edge still reads as
     a soft pool, and the stage itself spans the glyph. */
  left: 50%; top: 42%; width: 100%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--bg) 0%, var(--bg) 38%, transparent 100%);
  opacity: 0.88;
}

/* "My lists" replaces a gradient "Build your stack" button in the nav. A
   second primary button up there competed with the one main action on every
   page; this reads as a quiet, labelled link instead of an unexplained icon. */
.nav-saved {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500; color: var(--text-soft); text-decoration: none;
  padding: 8px 12px; border-radius: 10px; transition: color .2s, background .2s;
}
.nav-saved:hover { color: var(--text); background: var(--glass); }
.nav-saved:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.nav-saved .bookmark-count { position: static; transform: none; }
.nav-link { font-size: 14.5px; }
@media (max-width: 680px) { .nav-saved { display: none; } }

/* ═══════════════════════════════════════════
   SIMPLE HOMEPAGE (revamp)
   Calm raised surfaces instead of glass-and-glow, generous spacing, and
   nothing set below 15px that someone is expected to read.
   ═══════════════════════════════════════════ */
.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;
}
:root { --surface: #0A7E96; --surface-2: #0A7E96; --hairline: rgba(255,255,255,0.08); }
html[data-theme="light"] { --surface: #FFFFFF; --surface-2: #F3F5FA; --hairline: rgba(10,126,150,0.09); }

.section-lead { margin-top: 10px; max-width: 58ch; font-size: 16px; line-height: 1.6; color: var(--text-soft); }
.section-eyebrow { font-size: 12.5px; }

/* How it works — three steps, read left to right */
.how-steps {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  counter-reset: none;
}
.how-steps li {
  position: relative; padding: 26px 24px 24px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.how-n {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--bg);
  background: var(--grad-brand); margin-bottom: 16px;
}
.how-steps h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.how-steps p { font-size: 15.5px; line-height: 1.6; color: var(--text-soft); }

.trust-row {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px;
  font-size: 14.5px; color: var(--text-soft);
}
.trust-row li { display: inline-flex; align-items: center; gap: 8px; }
.trust-row li::before { content: "✓"; color: var(--emerald); font-weight: 700; }

/* Task grid — eight jobs, each a real link */
.task-grid { grid-template-columns: repeat(4, 1fr); }
.task-grid .cat-card {
  display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
  padding: 18px 18px; background: var(--surface); border-color: var(--hairline); backdrop-filter: none;
}
.task-grid .cat-card::after { display: none; }
.task-grid .cat-card b { font-size: 16px; font-weight: 600; display: block; }
.task-grid .cat-card small { font-size: 13px; color: var(--text-muted); }
.task-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-grid .cat-icon { font-size: 22px; flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px; background: var(--surface-2); margin: 0; }
.task-grid .cat-card:hover { border-color: var(--glass-border-hover); transform: translateY(-2px); }
.task-grid .cat-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Simplified tool card */
.tool-card { background: var(--surface); border-color: var(--hairline); backdrop-filter: none; }
.tool-desc {
  font-size: 15px; line-height: 1.55; color: var(--text-soft); margin: 14px 0 12px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tool-card .tool-meta { margin-bottom: 16px; font-size: 13.5px; }
.tool-card .ai-score { font-size: 13px; }
.tool-actions { display: flex; align-items: center; gap: 8px; }
.tool-act {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--text-soft);
  background: transparent; border: 1px solid var(--hairline); border-radius: 999px; padding: 7px 12px;
  transition: color .2s, border-color .2s, background .2s;
}
.tool-act:hover { color: var(--text); border-color: var(--glass-border-hover); }
.tool-act.active { color: var(--cyan); border-color: rgba(37,233,255,0.4); }
.tool-act:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.tool-actions .tool-open { margin-left: auto; }

/* Guides */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.guide-card {
  display: flex; flex-direction: column; gap: 10px; padding: 24px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  transition: border-color .25s, transform .25s var(--ease);
}
.guide-card:hover { border-color: var(--glass-border-hover); transform: translateY(-2px); }
.guide-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.guide-for { font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); }
.guide-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.guide-card p { font-size: 15px; line-height: 1.55; color: var(--text-soft); flex: 1; }
.guide-tools { display: flex; gap: 6px; margin-top: 4px; }
.guide-meta { font-size: 13px; color: var(--text-muted); }

/* Homepage news: a headline and one plain line */
#newsGrid .news-card p { font-size: 15px; line-height: 1.55; }

@media (max-width: 980px) {
  .how-steps, .guide-grid { grid-template-columns: 1fr; }
  .task-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .task-grid { grid-template-columns: 1fr; }
}

/* The scroll-hint mouse sat on top of the "How it works" link on phones,
   where the hero is a single column and the link lands at the bottom. */
@media (max-width: 680px) { .hero-scroll-hint { display: none; } }

/* Homepage: the three newest blog posts */
.blog-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.blog-mini {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  transition: border-color .25s, transform .25s var(--ease);
}
.blog-mini:hover { border-color: var(--glass-border-hover); transform: translateY(-2px); }
.blog-mini:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.blog-mini-art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }   /* .cover-svg is absolutely positioned: without this it escapes and fills the section */
.blog-mini-art svg { width: 100%; height: 100%; display: block; }
.blog-mini-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.blog-mini-meta { font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
.blog-mini h3 { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.3; }
.blog-mini p { font-size: 15px; line-height: 1.55; color: var(--text-soft);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* One column on tablets: a full-width 16:9 cover filled the whole screen per
   post, so the card goes side by side (art left, words right) instead. */
@media (max-width: 980px) {
  .blog-mini-grid { grid-template-columns: 1fr; }
  .blog-mini { flex-direction: row; }
  .blog-mini-art { width: 36%; flex: none; aspect-ratio: auto; min-height: 150px; }
}
@media (max-width: 560px) {
  .blog-mini { flex-direction: column; }
  .blog-mini-art { width: 100%; aspect-ratio: 16 / 9; max-height: 180px; min-height: 0; }
}
.post-sources { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.post-sources h2 { font-size: 18px !important; margin: 0 0 12px !important; }
.post-sources ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.post-sources li { font-size: 14.5px; color: var(--text-muted); }
.post-sources a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }

/* ── Blog: inline links, takeaways, contents, tables ── */
.post-body .post-link {
  color: var(--cyan); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 3px; text-decoration-color: rgba(37,233,255,0.45);
  transition: text-decoration-color .2s, color .2s;
}
.post-body .post-link:hover { color: var(--text); text-decoration-color: currentColor; }
.post-body .post-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 3px; }
.post-body .post-link.ext::after { content: " ↗"; font-size: .85em; text-decoration: none; display: inline-block; }

.post-takeaways {
  margin: 0 0 32px; padding: 20px 22px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid var(--cyan);
}
.post-takeaways b { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); margin-bottom: 10px; }
.post-takeaways ul { display: flex; flex-direction: column; gap: 8px; padding-left: 18px; }
.post-takeaways li { font-size: 15.5px; line-height: 1.55; color: var(--text); }

.post-toc { margin: 0 0 32px; padding: 18px 22px; border-radius: 14px; background: var(--surface); border: 1px solid var(--hairline); }
.post-toc b { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
.post-toc ol { padding-left: 20px; columns: 2; column-gap: 28px; }
.post-toc li { font-size: 14.5px; line-height: 1.5; margin-bottom: 6px; break-inside: avoid; color: var(--text-muted); }
.post-toc a { color: var(--text-soft); text-decoration: none; }
.post-toc a:hover { color: var(--cyan); text-decoration: underline; }
@media (max-width: 680px) { .post-toc ol { columns: 1; } }
.post-body h2[id] { scroll-margin-top: 90px; }

.post-table { margin: 28px 0; }
.post-table-scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 14px; }
.post-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; }
.post-table th, .post-table td { padding: 12px 16px; text-align: left; vertical-align: top; line-height: 1.45; border-bottom: 1px solid var(--hairline); }
.post-table thead th { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); background: var(--surface); font-weight: 600; }
.post-table tbody th { font-weight: 600; color: var(--text); white-space: nowrap; }
.post-table td { color: var(--text-soft); font-variant-numeric: tabular-nums; }
.post-table tbody tr:last-child th, .post-table tbody tr:last-child td { border-bottom: 0; }
.post-table figcaption { margin-top: 10px; font-size: 13.5px; color: var(--text-muted); }

/* End-of-post call to action */
.post-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin: 48px 0 8px; padding: 28px 30px; border-radius: var(--radius);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(37,233,255,0.10), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(168,85,247,0.12), transparent 55%),
    var(--surface);
  border: 1px solid var(--glass-border-hover);
}
.post-cta-copy { flex: 1 1 320px; }
.post-cta-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px; }
.post-cta h2 { font-family: var(--font-display); font-size: 24px !important; line-height: 1.25; margin: 0 0 8px !important; }
.post-cta-copy p:last-child { font-size: 15.5px; line-height: 1.55; color: var(--text-soft); margin: 0; }
.post-cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.post-cta-alt { font-size: 14.5px; font-weight: 500; color: var(--text-soft); text-decoration: none; }
.post-cta-alt:hover { color: var(--cyan); }
.post-cta-alt:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 560px) { .post-cta { padding: 22px 20px; } .post-cta-actions, .post-cta .btn { width: 100%; } .post-cta .btn { justify-content: center; } }