/* ═══════════════════════════════════════════════════════════
   SOLTHAR — design system
   Loaded after styles.css on every page. styles.css still owns layout and
   component structure; this layer owns the identity: tokens, type, surfaces,
   motion, and the page-specific interfaces.

   Colour rules
   - Cyan is the primary accent: links, focus, active edges, data.
   - Yellow is the secondary accent: the one action on a view, active nav.
   - Violet and pink are for special moments only: Model DNA, the logo, hero art.
   - Long-form reading (blog, news) gets none of the neon.
   ═══════════════════════════════════════════════════════════ */
:root {
  --void: #07080D;
  --night: #111522;
  --steel: #1A2030;
  --neon-cyan: #25E9FF;
  --cyber-yellow: #FCEE0A;
  --electric-violet: #A855F7;
  --neon-pink: #FF2BD6;
  --ice: #F2F4FA;
  --muted: #A7B0C4;
  /* Violet is below AA as small text on these surfaces; this is its text tint. */
  --violet-text: #C9A2FF;

  /* The names the original stylesheet reads, repointed at the new palette. */
  --space-black: var(--void);
  --midnight: var(--night);
  --electric: var(--neon-cyan);
  --cyan: var(--neon-cyan);
  --violet: var(--electric-violet);
  --emerald: #3DE8A0;
  --bg: var(--void);
  --bg-2: var(--night);
  --text: var(--ice);
  --text-soft: #C7CEDD;
  --text-muted: var(--muted);
  --surface: rgba(26, 32, 48, .72);
  --surface-2: rgba(17, 21, 34, .86);
  --hairline: rgba(167, 176, 196, .16);
  --glass: rgba(26, 32, 48, .6);
  --glass-strong: rgba(13, 16, 27, .94);
  --glass-border: rgba(167, 176, 196, .16);
  --glass-border-hover: rgba(37, 233, 255, .55);
  --shadow: 0 18px 50px rgba(0, 0, 0, .55);
  --nav-bg: rgba(7, 8, 13, .84);
  --grad-brand: linear-gradient(120deg, #25E9FF, #4FB4FF 34%, #A855F7 68%, #FF2BD6);
  --radius: 16px;
  --radius-sm: 10px;
  --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(.22, 1, .36, 1);
  --card-bg: linear-gradient(180deg, rgba(26, 32, 48, .9), rgba(17, 21, 34, .92));
}

/* ── Page ground ──────────────────────────────────────────── */
html { background: var(--void); }
body { background: transparent; color: var(--ice); }
body::before {
  background:
    radial-gradient(1100px 620px at 92% -8%, rgba(168, 85, 247, .09), transparent 62%),
    radial-gradient(1000px 560px at 6% 4%, rgba(37, 233, 255, .06), transparent 60%),
    var(--void);
}
/* A faint engineering grid: structure you feel rather than see. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(167, 176, 196, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167, 176, 196, .028) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .25) 70%, transparent);
          mask-image: linear-gradient(180deg, #000, rgba(0, 0, 0, .25) 70%, transparent);
}
::selection { background: rgba(37, 233, 255, .32); color: #fff; }
.cursor-glow { background: radial-gradient(circle, rgba(37, 233, 255, .05), transparent 65%); }

:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }

/* ── Type ─────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.022em; color: var(--ice); }
.section { padding-top: 72px; padding-bottom: 12px; }
.section-head { align-items: flex-end; margin-bottom: 26px; gap: 24px; }
.section-eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--neon-cyan); margin-bottom: 10px;
  background: none; -webkit-text-fill-color: currentColor;
}
.section-eyebrow::before { content: "// "; opacity: .65; }
.section-title {
  font-size: clamp(25px, 2.25vw, 33px); line-height: 1.14; position: relative;
}
.section-head .section-title { padding-left: 26px; }
.section-head .section-title::before {
  content: ""; position: absolute; left: 0; top: .16em; bottom: .16em; width: 8px;
  background: var(--gold-fill); transform: skewX(-14deg);
  box-shadow: 0 0 14px rgba(255, 214, 10, .26);
}
.section-lead { color: var(--muted); font-size: 15.5px; margin-top: 8px; max-width: 62ch; }
.link-arrow, .section-head a { color: var(--neon-cyan); font-size: 14px; font-weight: 500; white-space: nowrap; }
.link-arrow:hover { color: var(--ice); }
.gradient-text { color: var(--neon-cyan); background: none; -webkit-text-fill-color: currentColor; }

/* ── Controls ─────────────────────────────────────────────── */
.btn {
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px; letter-spacing: .005em;
  border-radius: var(--radius-sm); padding: 12px 22px; overflow: visible;
}
.btn-sm { padding: 9px 16px; font-size: 13.5px; }
.btn-lg { padding: 15px 28px; font-size: 15.5px; }
.btn-primary {
  background: var(--cyber-yellow); color: #0B0C10;
  box-shadow: 0 0 0 1px rgba(252, 238, 10, .25), 0 8px 26px rgba(252, 238, 10, .16);
}
.btn-primary:hover {
  background: #FFF56A; color: #0B0C10; transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(252, 238, 10, .45), 0 12px 34px rgba(252, 238, 10, .3);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  background: rgba(26, 32, 48, .72); color: var(--ice);
  border: 1px solid var(--hairline); backdrop-filter: none;
}
.btn-ghost:hover { border-color: var(--glass-border-hover); box-shadow: 0 0 22px rgba(37, 233, 255, .14); transform: translateY(-1px); }
.icon-btn { color: var(--text-soft); border-radius: var(--radius-sm); }
.icon-btn:hover { color: var(--neon-cyan); background: rgba(37, 233, 255, .08); }
.glass { background: var(--surface); border-color: var(--hairline); border-radius: var(--radius); }
.badge { font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em; border-radius: 6px; padding: 3px 8px; font-weight: 500; }
.badge-free { background: rgba(61, 232, 160, .1); color: var(--emerald); border-color: rgba(61, 232, 160, .32); }
.badge-freemium { background: transparent; border: 0; padding: 0; color: var(--emerald); font-size: 12.5px; }
.badge-paid { background: transparent; border: 0; padding: 0; color: #FF7CE5; font-size: 12.5px; }
.badge-trial { background: rgba(37, 233, 255, .08); color: var(--neon-cyan); border-color: rgba(37, 233, 255, .3); }
.badge-free { background: transparent; border: 0; padding: 0; font-size: 12.5px; }
input, select, textarea { font-family: var(--font-body); }
.toast { background: var(--glass-strong); border: 1px solid var(--glass-border-hover); color: var(--ice); }

/* ── Nav ──────────────────────────────────────────────────── */
.nav { border-bottom: 1px solid rgba(37, 233, 255, .1); background: rgba(7, 8, 13, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav.scrolled { background: var(--nav-bg); border-bottom-color: rgba(37, 233, 255, .16); }
.nav-inner { max-width: 1500px; height: 66px; padding: 0 36px; gap: 18px; }
.logo { gap: 12px; color: var(--ice); }
.logo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.logo-mark { width: 34px; height: 34px; flex: none; display: block; filter: drop-shadow(0 0 9px rgba(37, 233, 255, .3)); transition: filter .35s var(--ease); }
.logo:hover .logo-mark { filter: drop-shadow(0 0 14px rgba(37, 233, 255, .55)) drop-shadow(0 0 22px rgba(255, 43, 214, .28)); }
.logo-word { width: 138px; height: 17px; flex: none; display: block; color: var(--ice); }
.logo-text { display: none; }
.nav-tagline {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--neon-cyan); white-space: nowrap; padding-left: 18px; margin-left: 2px;
  border-left: 1px solid var(--hairline); line-height: 22px; flex: none;
}
.nav-menu { gap: 2px; margin: 0 auto; }
.nav-link {
  position: relative; font-size: 14.5px; font-weight: 500; color: #D3D9E6; padding: 8px 12px;
  border-radius: 0; background: none !important;
}
.nav-link:hover { color: var(--neon-cyan); }
.nav-link.active { color: var(--cyber-yellow); }
/* A bracket under the current page, not a pill. */
.nav-link.active::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: -3px; height: 5px;
  border: 2px solid var(--cyber-yellow); border-top: 0; border-radius: 0 0 4px 4px;
  box-shadow: 0 3px 10px rgba(252, 238, 10, .32);
}
.nav-actions { gap: 4px; }
.nav-saved { color: #D3D9E6; font-size: 14.5px; font-weight: 500; padding: 8px 8px 8px 2px; white-space: nowrap; }
.nav-saved:hover { color: var(--neon-cyan); }
.bookmark-count { background: var(--cyber-yellow); color: #0B0C10; font-family: var(--font-mono); }
@media (max-width: 1480px) { .nav-tagline { display: none; } }
@media (max-width: 1240px) {
  .nav-inner { padding: 0 20px; gap: 10px; }
  .nav-link { font-size: 13.5px; padding: 8px 9px; }
  .nav-saved { font-size: 13.5px; }
  .logo-word { width: 116px; height: 14px; }
}
/* Seven links need the room: below this the drawer takes over. */
@media (max-width: 1100px) {
  .nav-menu { display: none; }
  .nav-burger { display: grid; }
  .nav-actions { margin-left: auto; }
}
@media (max-width: 420px) {
  .nav-inner { padding: 0 14px; }
  .logo-word { width: 104px; height: 13px; }
  .logo-mark { width: 30px; height: 30px; }
}
.nav-drawer { background: #0B0D15; border-left: 1px solid rgba(37, 233, 255, .2); }
.nd-link { font-family: var(--font-display); }
.nd-link.active { color: var(--cyber-yellow); }

/* ── Homepage: hero ───────────────────────────────────────── */
.hero {
  min-height: 0; padding: 0; display: block; overflow: visible; text-align: left; position: relative; isolation: auto;
}
/* The art keeps its own aspect ratio and is anchored right, so the live
   hologram stays registered with the screen painted into the picture at any
   width. Baked fades on its left and bottom edges dissolve it into the page. */
.hero-art {
  position: absolute; top: 0; right: 0; z-index: -1; pointer-events: none;
  width: min(max(100%, 1360px), 2200px); aspect-ratio: 3840 / 1800;
}
.hero-art picture, .hero-art img { display: block; width: 100%; height: 100%; }
.hero-art img { object-fit: cover; object-position: right top; }
.hero-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 8, 13, 0) 62%, var(--void) 98%),
    linear-gradient(90deg, var(--void) 0, rgba(7, 8, 13, .95) 38%, rgba(7, 8, 13, .55) 46%, rgba(7, 8, 13, .12) 54%, transparent 58%);
}
/* Network layer only over the empty sky on the left; the city has enough going on. */
#neuralCanvas {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: .42;
  -webkit-mask-image: linear-gradient(90deg, #000, #000 34%, transparent 62%);
          mask-image: linear-gradient(90deg, #000, #000 34%, transparent 62%);
}
.hero-decor, .hero-vignette, .hero-scroll-hint { display: none !important; }

.hero-inner {
  display: block; max-width: 1500px; margin: 0 auto; padding: 94px 36px 24px;
  min-height: 0; position: relative; z-index: 2;
}
.hero-inner .hero-content, .hero-content { max-width: 800px; margin: 0; text-align: left; position: relative; z-index: 3; }
.hero-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 14px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
.hero-status b { font-weight: 500; color: var(--cyber-yellow); display: inline-flex; align-items: center; gap: 9px; letter-spacing: .1em; }
.hero-status i { font-style: normal; display: inline-flex; gap: 16px; }
.hero-status i span::before { content: "/"; color: rgba(167, 176, 196, .4); margin-right: 16px; }
.hero-status .pulse-dot {
  width: 9px; height: 9px; border-radius: 3px; background: var(--cyber-yellow); flex: none;
  box-shadow: 0 0 10px rgba(252, 238, 10, .75); animation: statusPulse 2.8s ease-in-out infinite;
}
@keyframes statusPulse { 0%, 100% { opacity: 1; } 50% { opacity: .62; } }

.hero-inner .hero-title, .hero-title {
  font-size: clamp(42px, 4.75vw, 74px); line-height: 1.02; letter-spacing: -.035em; margin: 0 0 15px; font-weight: 700;
  white-space: normal; color: var(--ice);
}
.hero-title-alt { color: var(--cyber-yellow); background: none; -webkit-text-fill-color: currentColor; display: block; text-shadow: 0 0 34px rgba(252, 238, 10, .22); }
.hero-inner .hero-sub, .hero-sub {
  font-size: clamp(16px, 1.32vw, 19px); line-height: 1.48; color: #D3D9E6; max-width: 640px; margin: 0 0 20px; font-weight: 400;
}

/* Search terminal */
.search-panel {
  background: none; border: 0; padding: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  max-width: 800px; margin: 0; position: relative; z-index: 10;
}
.search-panel::before, .search-panel::after { display: none !important; }
.search-panel:hover { background: none; border: 0; box-shadow: none; transform: none; }
.hero-inner .hero-search, .hero-search { margin: 0 0 12px; max-width: none; }
.search-shell {
  position: relative; height: 62px; padding: 0 8px 0 22px; gap: 14px; display: flex; align-items: center;
  border-radius: 31px; background: rgba(9, 11, 18, .88); border: 0;
  box-shadow: 0 0 34px rgba(37, 233, 255, .14), 0 0 60px rgba(168, 85, 247, .1);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: box-shadow .35s var(--ease);
}
/* Border as a gradient ring: cyan through violet to pink. */
.search-shell::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px; pointer-events: none;
  background: linear-gradient(95deg, #25E9FF, #4FB4FF 38%, #A855F7 72%, #FF2BD6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.search-shell:focus-within { box-shadow: 0 0 44px rgba(37, 233, 255, .3), 0 0 80px rgba(168, 85, 247, .2); }
.search-shell::after { display: none !important; }
.search-icon { color: var(--neon-cyan); flex: none; }
.search-shell input { font-size: 16.5px; color: var(--ice); background: none; border: 0; flex: 1; min-width: 0; height: 100%; }
.search-shell input::placeholder { color: var(--muted); }
.search-shell input:focus { outline: none; }
.search-kbd {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); padding: 5px 8px; border-radius: 7px;
  background: rgba(167, 176, 196, .1); border: 1px solid rgba(167, 176, 196, .16); flex: none;
}
.search-go { height: 46px; padding: 0 22px; border-radius: 23px; flex: none; }
.search-go svg { margin-left: 2px; }
.search-results { background: var(--glass-strong) !important; border: 1px solid rgba(37, 233, 255, .3); border-radius: 14px; }

.hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 8px; justify-content: flex-start; }
.chips-label { font-size: 14px; font-weight: 500; color: #D3D9E6; margin-right: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: #E2E7F1; font-weight: 500;
  padding: 8px 15px; border-radius: 999px; background: rgba(13, 16, 27, .72);
  border: 1px solid rgba(167, 176, 196, .22); cursor: pointer; transition: border-color .25s, color .25s, box-shadow .25s, transform .25s var(--ease);
}
.chip svg { flex: none; }
.chip:hover { border-color: rgba(37, 233, 255, .6); color: #fff; box-shadow: 0 0 18px rgba(37, 233, 255, .18); transform: translateY(-1px); background: rgba(13, 16, 27, .9); }
.search-alt { font-size: 13px; color: var(--muted); margin: 0; }
.search-alt a { color: var(--neon-cyan); font-weight: 500; border: 0; }
.search-alt a:hover { color: var(--ice); }

/* Feature tiles: the five doors into the product */
.hero-tiles {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; position: relative; z-index: 4;
  margin-top: 4px;
}
.hero-tile {
  --tile: 37, 233, 255; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start;
  min-height: 134px; padding: 15px 42px 14px 18px; border-radius: 14px; isolation: isolate;
  background: rgba(14, 17, 28, .86); border: 1px solid rgba(var(--tile), .5);
  box-shadow: 0 0 22px rgba(var(--tile), .1), inset 0 0 26px rgba(var(--tile), .05);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.hero-tile:hover { transform: translateY(-3px); border-color: rgba(var(--tile), .95); box-shadow: 0 0 34px rgba(var(--tile), .26), inset 0 0 30px rgba(var(--tile), .08); }
.hero-tile > svg.tile-ic { color: rgb(var(--tile)); flex: none; filter: drop-shadow(0 0 7px rgba(var(--tile), .55)); }
.hero-tile b { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.012em; color: var(--ice); line-height: 1.2; margin-top: 11px; text-shadow: 0 1px 8px rgba(7, 8, 13, .8); }
.hero-tile small { font-size: 13px; line-height: 1.32; color: #D3D9E6; margin-top: 3px; text-shadow: 0 1px 8px rgba(7, 8, 13, .9); }
.hero-tile .tile-go { position: absolute; right: 15px; bottom: 15px; color: rgb(var(--tile)); transition: transform .3s var(--ease); }
.hero-tile:hover .tile-go { transform: translateX(3px); }
.tile-tools { --tile: 37, 233, 255; --tile-art: url(assets/art/tile-tools.webp); }
.tile-dna { --tile: 168, 85, 247; --tile-art: url(assets/art/tile-dna.webp); }
.tile-mission { --tile: 252, 238, 10; --tile-art: url(assets/art/tile-mission.webp); }
.tile-intel { --tile: 192, 92, 255; --tile-art: url(assets/art/tile-intel.webp); }
.tile-compare { --tile: 37, 233, 255; --tile-art: url(assets/art/tile-compare.webp); }
.tile-mission b, .tile-mission small { color: var(--ice); }
@media (max-width: 1180px) {
  .hero-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .hero-tile { grid-column: span 2; }
  .hero-tile:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 760px) {
  .hero-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .hero-tile, .hero-tile:nth-child(n+4) { min-height: 112px; padding: 12px 34px 12px 13px; grid-column: auto; }
  .hero-tile:last-child { grid-column: 1 / -1; }
  .hero-tile b { font-size: 16px; }
  .hero-tile small { font-size: 12.5px; }
  .hero-tile .tile-go { right: 11px; bottom: 11px; }
}

/* Featured + latest */
.feat-split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 34px; padding-top: 38px; }
.feat-main { min-width: 0; }
.feat-main .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.feat-main .section-lead { margin-top: 2px; padding-left: 26px; font-size: 14.5px; }
.latest-rail { border-left: 1px solid var(--hairline); padding-left: 32px; min-width: 0; display: flex; flex-direction: column; }
.latest-rail h2 { font-size: clamp(22px, 1.75vw, 27px); padding-left: 24px; position: relative; margin-bottom: 18px; }
.latest-rail h2::before { content: ""; position: absolute; left: 0; top: .14em; bottom: .14em; width: 7px; background: var(--gold-fill); transform: skewX(-14deg); box-shadow: 0 0 12px rgba(255, 214, 10, .26); }
.latest-item { display: grid; grid-template-columns: 112px minmax(0, 1fr) 16px; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--hairline); align-items: start; }
.latest-item:first-of-type { padding-top: 0; }
.latest-item:last-child { border-bottom: 0; }
.latest-art { position: relative; display: block; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 10; background: var(--steel); border: 1px solid var(--hairline); }
.latest-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.latest-item b { font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.28; letter-spacing: -.008em; color: var(--ice); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.latest-item small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.latest-item .go { color: var(--muted); margin-top: 2px; transition: color .2s, transform .25s var(--ease); }
.latest-item:hover b { color: var(--neon-cyan); }
.latest-item:hover .go { color: var(--neon-cyan); transform: translate(2px, -2px); }
@media (max-width: 1320px) {
  .feat-split { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .latest-rail { border-left: 0; padding-left: 0; border-top: 1px solid var(--hairline); padding-top: 28px; }
  .latest-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
  .latest-item { border-bottom: 0; padding: 0; }
}
@media (max-width: 1100px) { .feat-main .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .latest-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 620px) { .feat-main .tool-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── Tool cards ───────────────────────────────────────────── */
.tool-grid { gap: 16px; }
.tool-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate;
  min-height: 262px; padding: 16px 16px 14px; border-radius: 14px; cursor: pointer;
  background: var(--card-bg); border: 1px solid var(--hairline); backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.tool-card::before { display: none; }
.tool-card:hover { transform: translateY(-3px); border-color: rgba(37, 233, 255, .4); box-shadow: 0 16px 44px rgba(0, 0, 0, .5), 0 0 26px rgba(37, 233, 255, .11); }
.tool-card:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
/* Scene art at the top of the card, dissolving into the steel */
.tool-art {
  position: absolute; left: 0; right: 0; top: 0; height: 116px; z-index: -1; background-size: 160% auto; background-position: var(--art-x, 60%) 42%; opacity: .88;
  filter: hue-rotate(var(--art-h, 0deg));
  -webkit-mask-image: linear-gradient(180deg, #000 34%, transparent), linear-gradient(90deg, rgba(0, 0, 0, .1), #000 58%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 34%, transparent), linear-gradient(90deg, rgba(0, 0, 0, .1), #000 58%);
  mask-composite: intersect;
  transition: opacity .35s, transform .7s var(--ease);
}
.tool-card:hover .tool-art { opacity: 1; transform: scale(1.04); }
.tool-card .tool-logo { width: 48px; height: 48px; border-radius: 12px; font-size: 20px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); border: 1px solid rgba(255, 255, 255, .12); flex: none; }
.tool-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; min-height: 48px; }
.tool-score {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--text-soft); line-height: 1;
  padding: 5px 7px; border-radius: 6px; background: rgba(7, 8, 13, .72); border: 1px solid rgba(167, 176, 196, .2);
}
.tool-score b { color: var(--neon-cyan); font-weight: 600; margin-left: 3px; }
.tool-card .tool-name { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -.014em; color: var(--ice); line-height: 1.2; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-card .tool-cat { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--neon-cyan); display: block; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-card .tool-desc { font-size: 13.5px; line-height: 1.45; color: #C7CEDD; margin: 9px 0 12px; min-height: 2.9em; -webkit-line-clamp: 2; }
.tool-caps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; height: 25px; overflow: hidden; }
.tool-caps span {
  font-size: 11.5px; color: #D3D9E6; line-height: 1; padding: 6px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(167, 176, 196, .07); border: 1px solid rgba(167, 176, 196, .16);
}
.tool-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; min-height: 34px; }
.tool-price { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; min-width: 0; margin-right: auto; }
.tool-price .badge-trial { display: none; }
.tool-foot .tool-actions { margin: 0; gap: 6px; display: flex; flex: none; }
.tool-card .tool-act, .tool-card .tool-open {
  width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border-radius: 8px; cursor: pointer; flex: none; margin: 0;
  color: #D3D9E6; background: rgba(7, 8, 13, .5); border: 1px solid rgba(167, 176, 196, .26);
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s, transform .2s var(--ease);
}
.tool-card .tool-act:hover { color: var(--neon-cyan); border-color: rgba(37, 233, 255, .7); box-shadow: 0 0 12px rgba(37, 233, 255, .25); }
.tool-card .tool-act.active { color: var(--cyber-yellow); border-color: rgba(252, 238, 10, .6); }
.tool-card .tool-open { background: var(--cyber-yellow); border-color: var(--cyber-yellow); color: #0B0C10; }
.tool-card .tool-open:hover { background: #FFF56A; color: #0B0C10; border-color: #FFF56A; box-shadow: 0 0 16px rgba(252, 238, 10, .45); transform: translateX(1px); }

/* Scan: a single slow pass over chosen components, never a loop on idle text. */
.scan { position: relative; overflow: hidden; }
.scan::before {
  content: ""; position: absolute; left: 0; right: 0; top: -30%; height: 30%; pointer-events: none; z-index: 1; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(37, 233, 255, .1) 72%, rgba(37, 233, 255, .3) 99%, transparent);
}
.scan:hover::before, .scan.scan-on::before { animation: scanPass 1.6s var(--ease) both; }
@keyframes scanPass { 0% { top: -30%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* ── Homepage sections ────────────────────────────────────── */
.how-steps { gap: 16px; }
.how-steps li { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 14px; padding: 22px; }
.how-n {
  font-family: var(--font-mono); font-weight: 500; font-size: 13px; color: #0B0C10; background: var(--neon-cyan); border-radius: 7px;
  width: 30px; height: 30px; display: grid; place-items: center; box-shadow: 0 0 16px rgba(37, 233, 255, .35);
}
.how-steps h3 { font-size: 19px; font-weight: 600; margin-top: 14px; }
.how-steps p { color: #C7CEDD; }
.trust-row li { font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; color: var(--text-soft); }
.trust-row li::before { color: var(--emerald); }
.cat-card, .task-grid .cat-card { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 14px; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.cat-card:hover { transform: translateY(-2px); border-color: rgba(37, 233, 255, .5); box-shadow: 0 0 22px rgba(37, 233, 255, .12); }
.cat-card b { font-family: var(--font-display); font-weight: 600; }
.cat-card small { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.cat-icon { filter: saturate(.9); }
.guide-card { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 14px; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.guide-card:hover { transform: translateY(-2px); border-color: rgba(37, 233, 255, .5); box-shadow: 0 0 22px rgba(37, 233, 255, .12); }
.guide-for { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--neon-cyan); }
.guide-card h3 { font-weight: 600; }
.guide-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.blog-mini { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.blog-mini:hover { transform: translateY(-2px); border-color: rgba(37, 233, 255, .4); box-shadow: 0 0 22px rgba(37, 233, 255, .1); }
.blog-mini h3 { font-weight: 600; }
.blog-mini-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--neon-cyan); text-transform: uppercase; }
.news-card { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 14px; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.news-card::before { display: none; }
.news-card:hover { transform: translateY(-2px); border-color: rgba(37, 233, 255, .4); box-shadow: 0 0 22px rgba(37, 233, 255, .1); }
.news-top { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.news-source { color: var(--neon-cyan); }
.newsletter { background: linear-gradient(120deg, rgba(26, 32, 48, .92), rgba(17, 21, 34, .92)); border: 1px solid rgba(37, 233, 255, .24); border-radius: 18px; }
.newsletter-glow { background: radial-gradient(circle, rgba(168, 85, 247, .16), transparent 65%); }
.newsletter-form input { background: rgba(7, 8, 13, .7); border: 1px solid var(--hairline); color: var(--ice); border-radius: var(--radius-sm); }
.newsletter-form input:focus { border-color: var(--neon-cyan); outline: none; box-shadow: 0 0 0 3px rgba(37, 233, 255, .14); }
.mail-card { background: rgba(7, 8, 13, .5); border-color: var(--hairline); border-radius: 12px; }

/* ── Footer ───────────────────────────────────────────────── */
.footer { background: linear-gradient(180deg, transparent, rgba(17, 21, 34, .6)); border-top: 1px solid rgba(37, 233, 255, .14); margin-top: 72px; }
.footer-inner { display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 56px; padding-top: 52px; padding-bottom: 26px; align-items: start; }
.footer-brand p { color: var(--muted); font-size: 14px; line-height: 1.55; margin-top: 14px; max-width: 34ch; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col h4 { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--neon-cyan); margin-bottom: 5px; }
.footer-col a { font-size: 14px; color: #C7CEDD; }
.footer-col a:hover { color: var(--neon-cyan); }
.footer-bottom { border-top: 1px solid var(--hairline); padding-top: 18px; padding-bottom: 26px; }
.footer-bottom p { font-size: 12.5px; color: var(--muted); font-family: var(--font-mono); letter-spacing: .01em; }
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Nova, the guide ──────────────────────────────────────── */
.assistant-fab { background: linear-gradient(135deg, #25E9FF, #A855F7 75%); box-shadow: 0 8px 28px rgba(37, 233, 255, .3), 0 0 40px rgba(168, 85, 247, .22); }
.assistant-panel { background: var(--glass-strong); border-color: rgba(37, 233, 255, .3); }
.msg.bot { background: rgba(26, 32, 48, .8); border-color: var(--hairline); }
.sugg { border-color: var(--hairline); background: rgba(26, 32, 48, .6); color: var(--text-soft); }
.sugg:hover { border-color: rgba(37, 233, 255, .55); color: var(--ice); }
.assistant-input input { background: rgba(7, 8, 13, .7); border-color: var(--hairline); color: var(--ice); }

/* ── Phones: hero ─────────────────────────────────────────── */
@media (max-width: 760px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .hero-art { width: 100%; aspect-ratio: 1050 / 780; }
  .hero-art::after { background: linear-gradient(180deg, rgba(7, 8, 13, .55), rgba(7, 8, 13, .72) 44%, var(--void) 92%); }
  #neuralCanvas { display: none; }
  .hero-inner { padding: 86px 16px 18px; }
  .hero-status { font-size: 10.5px; gap: 4px 10px; margin-bottom: 12px; }
  .hero-status i { gap: 10px; }
  .hero-status i span::before { margin-right: 10px; }
  .hero-inner .hero-title, .hero-title { font-size: clamp(38px, 11.4vw, 52px); }
  .hero-inner .hero-sub, .hero-sub { font-size: 15.5px; margin-bottom: 18px; }
  .search-shell { height: 54px; padding: 0 5px 0 15px; gap: 10px; border-radius: 27px; }
  .search-shell input { font-size: 15px; }
  .search-kbd { display: none; }
  .search-go { height: 44px; padding: 0 16px; border-radius: 22px; }
  .chips-label { width: 100%; font-size: 13px; }
  .chip { font-size: 13px; padding: 7px 12px; }
  .section { padding-top: 48px; }
  .section-head { flex-wrap: wrap; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .scan::before, .hero-status .pulse-dot { animation: none !important; }
  .hero-tile, .tool-card, .chip { transition: none; }
}

/* ═══════════════════════════════════════════════════════════
   Shared page furniture
   ═══════════════════════════════════════════════════════════ */
.section { padding-left: 36px; padding-right: 36px; }
@media (max-width: 760px) { .section { padding-left: 16px; padding-right: 16px; } }
.glow::after { display: none; }
.btn-primary, .btn-primary.glow { background: var(--cyber-yellow); color: #0B0C10; }
.fx-net-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.5) 62%, transparent); mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.5) 62%, transparent); }
.br-head > *:not(canvas), .wf-hero-inner > *, .intel-hero > .container { position: relative; z-index: 1; }
.br-head { position: relative; padding-bottom: 22px; }
.br-title { font-size: clamp(32px, 3.6vw, 54px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; }
.br-sub { color: var(--text-soft); font-size: clamp(15.5px, 1.2vw, 17.5px); max-width: 62ch; }
.browse, .blog-page, .news-page, .story-page, .research-page, .wf-detail, .ws-page, .collections-page, .collection-page, .tool-page, .model-page { padding-top: 104px; }
.compare-page { padding-top: 104px; max-width: 1200px; }
.tp-back, .mp-back { font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em; color: var(--muted); }
.tp-back:hover, .mp-back:hover { color: var(--neon-cyan); }

/* Form controls: native, restyled, so they keep their accessibility */
html { color-scheme: dark; }
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin: 0; flex: none; cursor: pointer; border-radius: 4px;
  background: rgba(7, 8, 13, .7); border: 1px solid rgba(167, 176, 196, .4); display: inline-grid; place-items: center; transition: border-color .2s, background .2s, box-shadow .2s;
}
input[type="checkbox"]:hover { border-color: var(--neon-cyan); }
input[type="checkbox"]:checked { background: var(--neon-cyan); border-color: var(--neon-cyan); box-shadow: 0 0 10px rgba(37, 233, 255, .4); }
input[type="checkbox"]:checked::after { content: ""; width: 9px; height: 5px; border: 2px solid #07080D; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
input[type="range"] { accent-color: var(--neon-cyan); }
select, .br-sort select {
  background-color: rgba(26, 32, 48, .8); color: var(--ice); border: 1px solid var(--hairline); border-radius: var(--radius-sm); font-size: 14px;
}
select:hover { border-color: rgba(37, 233, 255, .5); }
select option { background: #111522; color: var(--ice); }

/* ═══════════════════════════════════════════════════════════
   Find Tools
   ═══════════════════════════════════════════════════════════ */
.br-layout { gap: 26px; }
.br-filters { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 14px; backdrop-filter: none; -webkit-backdrop-filter: none; }
.br-filter-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 17px; }
.br-clear { color: var(--muted); font-size: 13px; }
.br-clear:hover { color: var(--neon-cyan); }
.br-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }
.br-label b { color: var(--neon-cyan); font-weight: 500; }
.br-search { background: rgba(7, 8, 13, .6); border: 1px solid var(--hairline); border-radius: 9px; }
.br-search:focus-within { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(37, 233, 255, .12); }
.br-search svg { color: var(--neon-cyan); }
.br-checks label, .br-cats label { color: #D3D9E6; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.br-cats label small, .br-cat-n { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-left: auto; }
.br-count { font-family: var(--font-mono); font-size: 13px; color: var(--muted); letter-spacing: .02em; }
.br-count b { color: var(--neon-cyan); font-weight: 500; }
.br-sort span { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.br-chips button, .br-chip { background: rgba(37, 233, 255, .08); border: 1px solid rgba(37, 233, 255, .34); color: var(--ice); border-radius: 999px; }
.br-results .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1240px) { .br-results .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .br-results .tool-grid { grid-template-columns: minmax(0, 1fr); } }

/* ═══════════════════════════════════════════════════════════
   Compare: a head-to-head arena, cyan corner against pink corner
   ═══════════════════════════════════════════════════════════ */
.cbx-field, .cbx-input { background: rgba(26, 32, 48, .8); border-color: var(--hairline); border-radius: 10px; }
.cbx-field:focus-within { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(37, 233, 255, .12); }
.cbx-panel { background: var(--glass-strong) !important; border-color: rgba(37, 233, 255, .3); border-radius: 12px; }
.cbx-opt-score { font-family: var(--font-mono); color: var(--neon-cyan); }
.cmp-swap { border: 1px solid var(--hairline); background: rgba(26, 32, 48, .8); }
.cmp-swap:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
.cmp-side {
  --corner: 37, 233, 255; position: relative; overflow: hidden; background: var(--card-bg); border: 1px solid rgba(var(--corner), .38); border-radius: 14px;
  box-shadow: inset 0 0 44px rgba(var(--corner), .05), 0 0 26px rgba(var(--corner), .07);
}
.cmp-side:last-of-type, .cmp-head > .cmp-side:last-child { --corner: 255, 43, 214; }
.cmp-side::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(var(--corner), 1), transparent); }
.cmp-side-name { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.015em; }
.cmp-vs {
  background: var(--cyber-yellow); color: #0B0C10; font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: .04em; border: 0; border-radius: 0; box-shadow: none;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.cmp-verdict { background: linear-gradient(120deg, rgba(37, 233, 255, .06), rgba(26, 32, 48, .9) 40%); border: 1px solid rgba(37, 233, 255, .38); border-radius: 14px; }
.cmp-verdict h2, .cmp-verdict h3 { font-weight: 600; }
.cmp-crown { filter: saturate(1.2); }
.cmp-chips > * { font-family: var(--font-mono); font-size: 11.5px; background: rgba(7, 8, 13, .5); border-color: var(--hairline); border-radius: 7px; }
.cmp-table { border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; background: rgba(17, 21, 34, .72); }
.cmp-row { border-color: var(--hairline); }
.cmp-row-head { background: rgba(26, 32, 48, .9); font-family: var(--font-display); font-weight: 600; }
.cmp-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); }
.cmp-cell { font-size: 14.5px; }
.cmp-best { background: rgba(37, 233, 255, .07); color: var(--ice); }
.cmp-match { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px; }
.cmp-match:hover { border-color: rgba(37, 233, 255, .5); box-shadow: 0 0 18px rgba(37, 233, 255, .12); }

/* ═══════════════════════════════════════════════════════════
   Model DNA: holographic data
   ═══════════════════════════════════════════════════════════ */
.intel-page { padding-top: 66px; }
.intel-hero { padding: 38px 0 22px; border-bottom: 0; }
.intel-hero::before { display: none; }
.intel-hero::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: min(56%, 860px); z-index: 0; pointer-events: none;
  opacity: .62;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 44%); mask-image: linear-gradient(90deg, transparent, #000 44%);
}
.intel-title { font-size: clamp(32px, 3.5vw, 52px); line-height: 1.06; letter-spacing: -.03em; }
.intel-title .gradient-text { color: var(--violet-text); }
.intel-sub { color: var(--text-soft); max-width: 62ch; font-size: 15.5px; }
#intelStats b, .intel-hero-stats b { font-family: var(--font-mono); font-weight: 500; color: var(--neon-cyan); }
.intel-hero-stats small, .intel-hero-stats span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--muted); }
.intel-tabsbar { background: rgba(7, 8, 13, .86); border-color: rgba(168, 85, 247, .26); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.intel-tab { font-family: var(--font-display); font-weight: 500; color: #D3D9E6; }
.intel-tab:hover { color: var(--ice); }
.intel-tab.active { color: var(--ice); border-color: var(--electric-violet); box-shadow: inset 0 -2px 0 var(--electric-violet); }
.rh-title { font-size: clamp(23px, 2vw, 30px); font-weight: 600; }
.rh-sub { color: var(--text-soft); }
.dna-sub { font-size: 19px; font-weight: 600; margin: 40px 0 14px; }

.dna-scanner {
  display: grid; grid-template-columns: 250px minmax(0, 1fr) minmax(300px, 400px); gap: 26px; align-items: stretch; margin-top: 22px; padding: 22px; position: relative; overflow: hidden;
  background: radial-gradient(70% 90% at 52% 42%, rgba(70, 40, 150, .3), transparent 70%), linear-gradient(180deg, rgba(17, 21, 34, .94), rgba(9, 11, 19, .96));
  border: 1px solid rgba(168, 85, 247, .36); border-radius: 18px; box-shadow: 0 0 44px rgba(168, 85, 247, .12), inset 0 0 60px rgba(37, 233, 255, .03);
}
.dsc-list { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dsc-model {
  display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; cursor: pointer; padding: 8px 10px; border-radius: 9px; color: var(--text-soft);
  background: transparent; border: 1px solid transparent; font: inherit; transition: background .2s, border-color .2s, color .2s;
}
.dsc-model .m-dot { width: 12px; height: 12px; border-radius: 4px; }
.dsc-model b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 14px; line-height: 1.2; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsc-model small { display: block; font-size: 11.5px; color: var(--muted); }
.dsc-model em { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.dsc-model:hover { background: rgba(167, 176, 196, .07); color: var(--ice); }
.dsc-model.on { background: rgba(37, 233, 255, .1); border-color: rgba(37, 233, 255, .55); color: var(--ice); box-shadow: 0 0 18px rgba(37, 233, 255, .14); }
.dsc-model.on em { color: var(--neon-cyan); }
.dsc-stage { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; perspective: 1100px; }
.dsc-holo {
  --rx: 0deg; --ry: 0deg; position: relative; width: min(100%, 560px); aspect-ratio: 1; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .25s ease-out;
}
.dsc-radar { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dsc-grid { fill: none; stroke: rgba(37, 233, 255, .2); stroke-width: 1; }
.dsc-spoke { stroke: rgba(37, 233, 255, .16); stroke-width: 1; transition: stroke .2s; }
.dsc-spoke.hot { stroke: var(--cyber-yellow); stroke-width: 1.5; }
.dsc-avg { fill: none; stroke: rgba(242, 244, 250, .45); stroke-width: 1.2; stroke-dasharray: 4 5; }
.dsc-shape { fill: url(#dscFill); stroke: url(#dscLine); stroke-width: 2.4; stroke-linejoin: round; filter: drop-shadow(0 0 10px rgba(37, 233, 255, .55)); }
.dsc-pt { fill: #fff; filter: drop-shadow(0 0 6px rgba(37, 233, 255, .95)); transition: fill .2s; }
.dsc-pt.hot { fill: var(--cyber-yellow); filter: drop-shadow(0 0 8px rgba(252, 238, 10, .95)); }
.dsc-label { font-family: var(--font-mono); font-size: 13px; fill: #D3D9E6; letter-spacing: .03em; transition: fill .2s; }
.dsc-label.hot { fill: var(--cyber-yellow); }
/* A slow turning ring and a radar sweep: the "projector" under the data */
.dsc-ring { position: absolute; inset: 7%; border-radius: 50%; border: 1px dashed rgba(168, 85, 247, .4); animation: dscTurn 60s linear infinite; }
.dsc-sweep {
  position: absolute; inset: 15%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(37, 233, 255, 0) 0 300deg, rgba(37, 233, 255, .13) 360deg); animation: dscTurn 7s linear infinite;
}
@keyframes dscTurn { to { transform: rotate(360deg); } }
.dsc-holo.pulse .dsc-radar { animation: dscPulse .8s var(--ease); }
@keyframes dscPulse { 0% { opacity: .35; filter: brightness(1.8); } 100% { opacity: 1; filter: none; } }
.dsc-key { display: flex; gap: 22px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.dsc-key span { display: inline-flex; align-items: center; gap: 8px; }
.dsc-key span::before { content: ""; width: 20px; height: 0; border-top: 2px solid var(--neon-cyan); }
.dsc-key .k-avg::before { border-top: 1.5px dashed rgba(242, 244, 250, .6); }
.dsc-read { min-width: 0; display: flex; flex-direction: column; }
.dsc-org { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--neon-cyan); }
.dsc-name { font-size: clamp(25px, 2.2vw, 33px); font-weight: 600; line-height: 1.1; margin-top: 5px; }
.dsc-tag { color: var(--text-soft); font-size: 14.5px; line-height: 1.45; margin-top: 8px; }
.dsc-score { display: flex; align-items: baseline; gap: 10px; margin: 13px 0 11px; }
.dsc-score b { font-family: var(--font-mono); font-weight: 500; font-size: 36px; line-height: 1; color: var(--cyber-yellow); text-shadow: 0 0 20px rgba(252, 238, 10, .3); }
.dsc-score small { font-size: 12.5px; color: var(--muted); }
.dsc-axes { list-style: none; display: flex; flex-direction: column; gap: 3px; padding: 0; margin: 0; }
.dsc-axis { display: grid; grid-template-columns: 82px minmax(0, 1fr) 30px; align-items: center; gap: 10px; font-size: 13px; color: #D3D9E6; padding: 4px 6px; margin: 0 -6px; border-radius: 6px; transition: background .2s; cursor: default; }
.dsc-axis.hot { background: rgba(252, 238, 10, .08); color: var(--ice); }
.dna-meter { display: block; height: 7px; border-radius: 2px; background: rgba(167, 176, 196, .14); overflow: hidden; position: relative; }
.dna-meter i { display: block; height: 100%; background: linear-gradient(90deg, #25E9FF, #8AA0FF 60%, #C98BFF); box-shadow: 0 0 10px rgba(37, 233, 255, .5); transition: width .6s var(--ease); }
/* Segment the bar so it reads as an instrument rather than a progress bar */
.dna-meter::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(9, 11, 19, .95) calc(10% - 2px) 10%); }
.dna-val { font-family: var(--font-mono); font-weight: 500; font-size: 12px; color: var(--ice); text-align: right; }
.dsc-verdict { font-size: 14px; line-height: 1.5; color: var(--text-soft); margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--hairline); }
.dsc-verdict b, .dna-verdict b { color: var(--neon-cyan); font-weight: 600; }
.dsc-read .dna-more { margin-top: 10px; color: var(--neon-cyan); font-weight: 500; font-size: 14px; }
@media (max-width: 1240px) {
  .dna-scanner { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
  .dsc-list { grid-column: 1 / -1; flex-direction: row; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
  .dsc-model { flex: 0 0 auto; width: 210px; }
}
@media (max-width: 800px) {
  .dna-scanner { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 16px; }
  .dsc-holo { width: min(100%, 420px); }
  .dsc-label { font-size: 15px; }
}

.dna-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dna-legend-item { background: rgba(26, 32, 48, .5); border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 13px; }
.dna-legend-item b { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ice); }
.dna-legend-item small { display: block; font-size: 12.5px; line-height: 1.42; color: var(--muted); }
@media (max-width: 1000px) { .dna-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .dna-legend { grid-template-columns: minmax(0, 1fr); } }
.dna-grid { gap: 16px; }
.dna-card { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; }
.dna-card:hover { border-color: rgba(168, 85, 247, .5); box-shadow: 0 0 26px rgba(168, 85, 247, .14); }
.dna-bar { opacity: .9; }
.dna-avg { font-family: var(--font-mono); font-weight: 500; color: var(--cyber-yellow); }
.dna-avg small { color: var(--muted); }
.dna-name b { font-family: var(--font-display); font-weight: 600; }
.dna-axes li { display: grid; grid-template-columns: 80px minmax(0, 1fr) 28px; align-items: center; gap: 9px; }
.dna-axis-label { font-size: 13px; color: #D3D9E6; }
.dna-more { color: var(--neon-cyan); }
/* Small radars on every card and model page share the projector look */
.radar-ring { fill: none; stroke: rgba(37, 233, 255, .2); }
.radar-spoke { stroke: rgba(37, 233, 255, .14); }
.radar-shape { fill: color-mix(in srgb, var(--rc, #25E9FF) 26%, transparent); stroke: var(--rc, #25E9FF); stroke-width: 1.8; filter: drop-shadow(0 0 7px color-mix(in srgb, var(--rc, #25E9FF) 70%, transparent)); }
.radar-label { font-family: var(--font-mono); font-size: 9.5px; fill: var(--muted); }
.lb-wrap { border: 1px solid var(--hairline); border-radius: 14px; background: rgba(17, 21, 34, .72); }
.lb th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--muted); background: rgba(26, 32, 48, .9); }
.lb td { border-color: var(--hairline); }
.lb tbody tr:hover { background: rgba(37, 233, 255, .04); }
.intel-foot { color: var(--muted); font-size: 13.5px; }
.bench-key-item { background: rgba(26, 32, 48, .5); border: 1px solid var(--hairline); border-radius: 10px; }
.arena-pickers select { min-height: 46px; padding: 0 14px; }
/* Model page */
.mp-hero { position: relative; overflow: hidden; }
.mp-name { font-size: clamp(34px, 4vw, 60px); line-height: 1.04; letter-spacing: -.03em; }
.mp-org { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--neon-cyan); text-transform: uppercase; }
.mp-hs b { font-family: var(--font-mono); font-weight: 500; color: var(--neon-cyan); }
.mp-subnav { background: rgba(7, 8, 13, .86); border-color: rgba(168, 85, 247, .26); }
.mp-subnav-link.active { color: var(--ice); border-color: var(--electric-violet); }
.mp-h2 { font-weight: 600; }
.dna-star { background: rgba(167, 176, 196, .18); }
.dna-star.full, .dna-star.half { background: var(--neon-cyan); }

/* ═══════════════════════════════════════════════════════════
   Mission Control: a command deck. Guides share the page, so everything
   here is scoped to body.mode-mission.
   ═══════════════════════════════════════════════════════════ */
.mc-status { display: none; }
.mc-radar { display: none !important; }
.wf-page-hero { padding: 104px 0 26px; margin-bottom: 18px; }
.wf-hero-glow { display: none; }
.wf-page-title { font-size: clamp(32px, 3.6vw, 54px); line-height: 1.06; letter-spacing: -.03em; font-weight: 700; }
.wf-page-sub { color: var(--text-soft); font-size: clamp(15.5px, 1.2vw, 17.5px); max-width: 62ch; }
.wf-modes { background: rgba(17, 21, 34, .9); border: 1px solid var(--hairline); border-radius: 11px; padding: 4px; display: inline-flex; gap: 3px; }
.wf-mode { font-family: var(--font-display); font-weight: 500; font-size: 14px; color: #D3D9E6; padding: 8px 15px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; }
.wf-mode:hover { color: var(--ice); }
.wf-mode.active { background: rgba(37, 233, 255, .14); color: var(--neon-cyan); box-shadow: inset 0 0 0 1px rgba(37, 233, 255, .45); }
.wf-mode-hint { color: var(--muted); font-size: 14px; }
.wf-mode-hint b { color: var(--neon-cyan); }
.wf-inline-link { color: var(--neon-cyan); }
.wf-search-wrap { background: rgba(9, 11, 18, .86); border: 1px solid var(--hairline); border-radius: 12px; }
.wf-search-wrap:focus-within { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(37, 233, 255, .12); }
.wf-search-wrap svg { color: var(--neon-cyan); position: relative; z-index: 1; }
.wf-search-wrap input { background: transparent; border: 0; color: var(--ice); }
.wf-search-wrap input:focus { outline: none; box-shadow: none; }
.wf-quick-chip { background: rgba(13, 16, 27, .72); border: 1px solid rgba(167, 176, 196, .22); color: #E2E7F1; border-radius: 999px; }
.wf-quick-chip:hover { border-color: rgba(37, 233, 255, .6); color: #fff; box-shadow: 0 0 16px rgba(37, 233, 255, .16); }
.wf-try-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--muted); }

body.mode-mission .wf-page-hero { padding: 88px 0 0; margin-bottom: 18px; overflow: visible; }
body.mode-mission .wf-page-hero > canvas { display: none; }
body.mode-mission .wf-hero-inner {
  position: relative; overflow: hidden; padding: 24px 28px 26px; width: calc(100% - 72px); max-width: 1428px; margin: 0 auto;
  background: linear-gradient(115deg, rgba(20, 22, 12, .9), rgba(10, 12, 20, .94) 58%), #0A0C14;
  border: 1px solid rgba(252, 238, 10, .42); border-radius: 16px;
  box-shadow: 0 0 44px rgba(252, 238, 10, .08), inset 0 0 70px rgba(252, 238, 10, .03);
}
/* Faint panel grid, then corner brackets like an instrument bezel */
body.mode-mission .wf-hero-inner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(252, 238, 10, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(252, 238, 10, .045) 1px, transparent 1px); background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 70%); mask-image: linear-gradient(90deg, rgba(0,0,0,.25), #000 70%);
}
body.mode-mission .mc-status {
  display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(252, 238, 10, .18);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
body.mode-mission .mc-status b { font-weight: 500; color: var(--cyber-yellow); display: inline-flex; align-items: center; gap: 9px; }
body.mode-mission .mc-status .pulse-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--cyber-yellow); box-shadow: 0 0 10px rgba(252, 238, 10, .8); animation: statusPulse 2.8s ease-in-out infinite; }
body.mode-mission .section-eyebrow { color: var(--cyber-yellow); }
body.mode-mission .wf-page-sub { max-width: 54ch; margin-bottom: 14px; }
body.mode-mission .wf-hero-inner > *:not(.mc-radar):not(.mc-status) { max-width: min(62%, 780px); position: relative; z-index: 1; }
body.mode-mission .wf-mode.active { background: rgba(252, 238, 10, .14); color: var(--cyber-yellow); box-shadow: inset 0 0 0 1px rgba(252, 238, 10, .5); }
body.mode-mission .wf-mission-search { border-color: rgba(252, 238, 10, .5); background: rgba(5, 6, 10, .9); box-shadow: 0 0 22px rgba(252, 238, 10, .1); }
body.mode-mission .wf-mission-search:focus-within { border-color: var(--cyber-yellow); box-shadow: 0 0 0 3px rgba(252, 238, 10, .14), 0 0 26px rgba(252, 238, 10, .16); }
body.mode-mission .wf-mission-search svg { color: var(--cyber-yellow); }
body.mode-mission .wf-quick-chip:hover { border-color: rgba(252, 238, 10, .6); box-shadow: 0 0 16px rgba(252, 238, 10, .14); }
@media (max-width: 980px) {
  body.mode-mission .wf-hero-inner { width: calc(100% - 32px); padding: 18px 16px 20px; }
  body.mode-mission .wf-hero-inner > *:not(.mc-radar):not(.mc-status) { max-width: 100%; }
  body.mode-mission .mc-radar { display: none; }
}

.mc-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; list-style: none; padding: 0; margin: 0; }
.mc-how li { display: flex; gap: 14px; background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 13px; padding: 18px; }
.mc-how span { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; font-family: var(--font-mono); font-size: 13px; color: #0B0C10; background: var(--cyber-yellow); box-shadow: 0 0 14px rgba(252, 238, 10, .3); }
.mc-how b { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; }
.mc-how p { color: var(--text-soft); font-size: 14px; margin-top: 3px; }
@media (max-width: 860px) { .mc-how { grid-template-columns: minmax(0, 1fr); } }
/* The plan reads as a flight plan: a lit rail with one module per step */
.mc-head { background: linear-gradient(120deg, rgba(252, 238, 10, .06), rgba(17, 21, 34, .92) 45%); border: 1px solid rgba(252, 238, 10, .32); border-radius: 14px; padding: 18px 20px; }
.mc-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--cyber-yellow); }
.mc-title { font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; letter-spacing: -.02em; }
.mc-pill { font-family: var(--font-mono); font-size: 11.5px; background: rgba(7, 8, 13, .6); border: 1px solid rgba(252, 238, 10, .3); color: var(--ice); border-radius: 6px; }
.mc-pill.soft { border-color: var(--hairline); color: var(--muted); }
.mc-guide { color: var(--text-soft); margin-top: 12px; background: rgba(26, 32, 48, .5); border: 1px solid var(--hairline); border-radius: 10px; }
.mc-guide b { color: var(--ice); }
.mc-steps { position: relative; list-style: none; padding: 0 0 0 58px; margin: 22px 0 0; }
.mc-steps::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 44px; width: 2px; background: linear-gradient(180deg, var(--cyber-yellow), rgba(252, 238, 10, .15)); box-shadow: 0 0 10px rgba(252, 238, 10, .4); }
.mc-step { position: relative; background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 13px; padding: 16px 18px; margin-bottom: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4px 22px; align-items: start; }
.mc-step:hover { border-color: rgba(252, 238, 10, .4); }
.mc-step-of { grid-column: 1 / -1; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.mc-step-head { display: block; }
.mc-step-n { position: absolute; left: -58px; top: 12px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #0B0C10; border: 1.5px solid var(--cyber-yellow); color: var(--cyber-yellow); font-family: var(--font-mono); font-size: 15px; box-shadow: 0 0 16px rgba(252, 238, 10, .28); }
.mc-step h3 { font-size: 18px; font-weight: 600; }
.mc-why { color: var(--text-soft); font-size: 14px; margin-top: 3px; }
.mc-weak-tag { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); border-color: var(--hairline); }
.mc-picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; }
.mc-pick { background: rgba(7, 8, 13, .55); border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 10px; display: block; transition: border-color .2s, box-shadow .2s; }
.mc-pick:hover { border-color: rgba(37, 233, 255, .55); box-shadow: 0 0 16px rgba(37, 233, 255, .14); }
.mc-pick.lead { border-color: rgba(252, 238, 10, .5); background: rgba(252, 238, 10, .04); }
.mc-pick-tag { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); }
.mc-pick.lead .mc-pick-tag { color: var(--cyber-yellow); }
.mc-pick-row { display: flex; align-items: center; gap: 9px; margin-top: 5px; }
.mc-pick-text { min-width: 0; flex: 1; }
.mc-pick-text b { display: block; font-family: var(--font-display); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-pick-text small { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-pick-score { font-style: normal; font-family: var(--font-mono); font-size: 12px; color: var(--neon-cyan); }
.mc-connector { display: none; }
.mc-foot { color: var(--muted); font-size: 14px; border-top: 1px solid var(--hairline); padding-top: 16px; }
.mc-foot b { color: var(--ice); }
.mc-note { background: rgba(252, 238, 10, .06); border: 1px solid rgba(252, 238, 10, .3); border-radius: 10px; color: var(--text-soft); }
.mc-nocover { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 14px; }
@media (max-width: 880px) {
  .mc-steps { padding-left: 0; }
  .mc-steps::before { display: none; }
  .mc-step { grid-template-columns: minmax(0, 1fr); padding-left: 16px; }
  .mc-step-n { position: static; width: 34px; height: 34px; margin-bottom: 8px; font-size: 13px; }
}
@media (max-width: 520px) { .mc-picks { grid-template-columns: minmax(0, 1fr); } }

/* ═══════════════════════════════════════════════════════════
   Guides
   ═══════════════════════════════════════════════════════════ */
.wf-card { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; }
.wf-card:hover { border-color: rgba(37, 233, 255, .45); box-shadow: 0 0 24px rgba(37, 233, 255, .1); }
.wf-card h2 { font-weight: 600; }
.wf-audience { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--neon-cyan); background: rgba(37, 233, 255, .08); border: 1px solid rgba(37, 233, 255, .3); border-radius: 6px; }
.wf-diff i.on { background: var(--neon-cyan); box-shadow: 0 0 6px rgba(37, 233, 255, .7); }
.wf-cost { font-family: var(--font-mono); font-size: 11px; border-radius: 6px; }
.wf-cost.free { color: var(--emerald); border-color: rgba(61, 232, 160, .35); background: rgba(61, 232, 160, .08); }
.wf-reveal-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--muted); }
.wf-act { background: rgba(7, 8, 13, .55); border: 1px solid var(--hairline); color: var(--ice); border-radius: 9px; }
.wf-act:hover { border-color: rgba(37, 233, 255, .6); color: var(--neon-cyan); }
.wf-act.primary { background: var(--cyber-yellow); border-color: var(--cyber-yellow); color: #0B0C10; font-weight: 600; }
.wf-act.primary:hover { background: #FFF56A; color: #0B0C10; border-color: #FFF56A; box-shadow: 0 0 16px rgba(252, 238, 10, .4); }
.news-chip { font-family: var(--font-mono); font-size: 12px; background: rgba(13, 16, 27, .72); border: 1px solid rgba(167, 176, 196, .22); color: #E2E7F1; border-radius: 8px; }
.news-chip:hover { border-color: rgba(37, 233, 255, .6); color: var(--ice); }
.news-chip.active { background: rgba(37, 233, 255, .12); color: var(--neon-cyan); border-color: rgba(37, 233, 255, .55); box-shadow: inset 0 0 14px rgba(37, 233, 255, .1), 0 0 16px rgba(37, 233, 255, .12); }
/* Guide detail: drop the bright poster behind the title for steel and a lit edge */
.wf-hero { background: linear-gradient(115deg, rgba(26, 32, 48, .95), rgba(13, 16, 27, .96)) !important; border: 1px solid rgba(37, 233, 255, .3); border-radius: 16px; position: relative; overflow: hidden; }
.wf-hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--grad-brand); }
.wf-hero h1 { font-size: clamp(30px, 3.2vw, 48px); letter-spacing: -.03em; line-height: 1.08; }
.wf-scorecard > * { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px; }
.wf-scorecard b { font-family: var(--font-mono); font-weight: 500; color: var(--neon-cyan); font-size: clamp(15px, 1.3vw, 19px); line-height: 1.25; }
.wf-node { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px; }
.wf-node:hover { border-color: rgba(37, 233, 255, .5); }
.wf-node.active { border-color: var(--neon-cyan); box-shadow: 0 0 20px rgba(37, 233, 255, .2), inset 0 0 18px rgba(37, 233, 255, .06); }
.wf-node-num, .wf-node-stage, .wf-pstage-name { font-family: var(--font-mono); letter-spacing: .08em; }
.wf-node-dot { background: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-cyan); }
.wf-panel, .wf-result, .wf-side-stack, .wf-side-note { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 14px; }
.wf-swap, .wf-swap-btn, .wf-step-btn { background: rgba(7, 8, 13, .55); border: 1px solid var(--hairline); color: var(--ice); border-radius: 8px; }
.wf-swap:hover, .wf-swap-btn:hover, .wf-step-btn:hover { border-color: rgba(37, 233, 255, .6); color: var(--neon-cyan); }
.wf-why { border-color: var(--electric-violet); color: var(--text-soft); }
.post-more-card, .tp-alt { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px; }
.post-more-card:hover, .tp-alt:hover { border-color: rgba(37, 233, 255, .5); box-shadow: 0 0 18px rgba(37, 233, 255, .1); }

/* ═══════════════════════════════════════════════════════════
   Blog and news: built for reading. The page goes quiet here. No glow on the
   text, no network in the header, generous space, and one column of type.
   ═══════════════════════════════════════════════════════════ */
.blog-page .fx-net-canvas, .news-page .fx-net-canvas { display: none; }
.blog-feature, .news-feature { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 16px; overflow: hidden; }
.blog-feature:hover, .news-feature:hover { border-color: rgba(167, 176, 196, .34); }
.blog-feature h2, .news-feature h2 { font-size: clamp(24px, 2.5vw, 36px); font-weight: 600; letter-spacing: -.024em; line-height: 1.14; }
.blog-card { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; transition: transform .3s var(--ease), border-color .3s; }
.blog-card:hover { transform: translateY(-2px); border-color: rgba(167, 176, 196, .34); }
.blog-card h3 { font-weight: 600; font-size: 19px; line-height: 1.26; letter-spacing: -.014em; }
.blog-excerpt { color: var(--text-soft); }
.blog-cat, .news-cat { font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--neon-cyan); background: transparent; border: 0; padding: 0; }
.blog-meta { font-size: 13px; color: var(--muted); }
.blog-read, .blog-read-sm { color: var(--neon-cyan); font-weight: 500; }
.blog-feature-badge, .news-feature-badge { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; background: rgba(7, 8, 13, .7); color: var(--ice); border-radius: 6px; }
.news-item { background: transparent; border: 0; border-bottom: 1px solid var(--hairline); border-radius: 0; padding: 22px 4px; }
.news-item:hover { background: rgba(167, 176, 196, .03); }
.news-item h3, .news-item h2 { font-weight: 600; font-size: 20px; letter-spacing: -.016em; line-height: 1.24; }
.news-item-rail { display: none; }
.news-summary { color: var(--text-soft); line-height: 1.55; }
.news-tldr, .story-tldr { background: rgba(26, 32, 48, .62); border: 1px solid var(--hairline); border-left: 2px solid var(--neon-cyan); border-radius: 8px; color: var(--text-soft); }
.story-tldr-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--neon-cyan); background: transparent; padding: 0; border: 0; }

/* The article itself */
.post-page, .story-page { max-width: 780px; padding-left: 24px; padding-right: 24px; }
.post-head, .story-head { margin-bottom: 28px; }
.post-head h1, .story-head h1 { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.08; letter-spacing: -.03em; font-weight: 700; margin: 12px 0 14px; }
.post-lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--text-soft); font-weight: 400; }
.post-byline { color: var(--muted); font-size: 14px; }
.post-avatar { background: var(--steel); }
.post-art, .story-art { position: relative; display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 8.2; border-radius: 14px; overflow: hidden; margin: 26px 0 38px; border: 1px solid var(--hairline); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.post-art svg, .story-art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (min-width: 900px) { .post-art, .story-art { width: calc(100% + 120px); margin-left: -60px; margin-right: -60px; } }
.post-body { font-size: 18px; line-height: 1.74; color: #DDE2EC; font-family: var(--font-body); }
.post-body p { margin: 0 0 1.25em; }
.post-body h2 { font-size: clamp(25px, 2.4vw, 31px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; margin: 2em 0 .6em; color: var(--ice); scroll-margin-top: 90px; }
.post-body h3 { font-size: 21px; font-weight: 600; line-height: 1.28; margin: 1.6em 0 .5em; color: var(--ice); }
.post-body a, .post-link { color: var(--neon-cyan); text-decoration: underline; text-decoration-color: rgba(37, 233, 255, .4); text-underline-offset: 3px; }
.post-body a:hover, .post-link:hover { text-decoration-color: var(--neon-cyan); }
.post-ul { margin: 0 0 1.3em; padding-left: 1.2em; }
.post-ul li { margin-bottom: .5em; }
.post-ul li::marker { color: var(--muted); }
.post-body blockquote { border-left: 2px solid rgba(167, 176, 196, .5); padding: 2px 0 2px 20px; margin: 1.5em 0; color: var(--text-soft); font-style: italic; background: none; }
.post-toc, .post-takeaways { background: rgba(26, 32, 48, .5); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: none; }
.post-takeaways { border-left: 2px solid var(--neon-cyan); }
.post-toc a { color: var(--text-soft); text-decoration: none; }
.post-toc a:hover { color: var(--neon-cyan); }
.post-table-scroll { border: 1px solid var(--hairline); border-radius: 12px; }
.post-table th { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; color: var(--muted); background: rgba(26, 32, 48, .8); }
.post-table td { border-color: var(--hairline); font-size: 15.5px; line-height: 1.5; }
.post-cta { background: linear-gradient(120deg, rgba(26, 32, 48, .95), rgba(17, 21, 34, .95)); border: 1px solid rgba(252, 238, 10, .34); border-radius: 14px; }
.post-cta-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--cyber-yellow); }
.post-cta-copy h3, .post-cta h3 { margin-top: 0; }
.post-cta a.btn { text-decoration: none; }
.post-sources { color: var(--muted); font-size: 14px; }
.post-tool { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px; text-decoration: none; }
.post-tool:hover { border-color: rgba(37, 233, 255, .5); }

/* ═══════════════════════════════════════════════════════════
   My Lists
   ═══════════════════════════════════════════════════════════ */
.ws-bar { align-items: center; }
.ws-count { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.ws-empty {
  background: linear-gradient(180deg, rgba(26, 32, 48, .6), rgba(17, 21, 34, .6)); border: 1px dashed rgba(37, 233, 255, .34); border-radius: 16px; padding: 44px 24px;
}
.ws-empty h2 { font-weight: 600; }
.ws-stack { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 14px; }
.ws-stack:hover { border-color: rgba(37, 233, 255, .4); }
.ws-stack-head { border-color: var(--hairline); }
.ws-name { font-family: var(--font-display); font-weight: 600; background: transparent; color: var(--ice); }
.ws-stats { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.ws-tool { background: rgba(7, 8, 13, .5); border: 1px solid var(--hairline); border-radius: 10px; }
.ws-tool:hover { border-color: rgba(37, 233, 255, .4); }
.ws-noaccount { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════
   Tool pages, collections, research, documents, 404
   ═══════════════════════════════════════════════════════════ */
.tp-hero { position: relative; }
.tp-title { font-size: clamp(32px, 3.8vw, 54px); line-height: 1.06; letter-spacing: -.03em; }
.tp-cat { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--neon-cyan); }
.tp-stats > * { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px; }
.tp-stats b { font-family: var(--font-mono); font-weight: 500; }
.tp-card { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 14px; }
.tp-card h2, .tp-card h3 { font-weight: 600; }
.tp-quote { border-color: var(--electric-violet); color: var(--text-soft); }
.tp-facts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--muted); }
.conf-bar { background: rgba(167, 176, 196, .14); }
.conf-bar i, .conf-bar b { background: var(--neon-cyan); box-shadow: 0 0 8px rgba(37, 233, 255, .5); }
.bestfor > * { font-family: var(--font-mono); font-size: 11.5px; }
.stars, .rating { color: var(--cyber-yellow); }
.ai-score { color: var(--neon-cyan); font-family: var(--font-mono); font-size: .92em; }
.coll-index-card, .coll-card, .coll-item { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; }
.coll-index-card:hover, .coll-card:hover, .coll-item:hover { border-color: rgba(37, 233, 255, .45); box-shadow: 0 0 22px rgba(37, 233, 255, .1); }
.coll-hero { background: linear-gradient(115deg, rgba(26, 32, 48, .95), rgba(13, 16, 27, .96)) !important; border: 1px solid rgba(37, 233, 255, .28); border-radius: 16px; }
.coll-bg { opacity: .16; filter: saturate(.75); }
.coll-rank { font-family: var(--font-mono); color: var(--cyber-yellow); }
.coll-tag { font-family: var(--font-mono); font-size: 11px; }
.rh-paper { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px; }
.rh-paper:hover { border-color: rgba(37, 233, 255, .45); }
.paper-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; }
.doc-page { padding-top: 110px; }
.doc-title { font-size: clamp(32px, 3.8vw, 52px); letter-spacing: -.03em; line-height: 1.08; }
.doc-lede { color: var(--text-soft); }
.doc-body { font-size: 17px; line-height: 1.7; color: #DDE2EC; }
.doc-body h2 { font-weight: 600; margin-top: 1.8em; }
.doc-card { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px; }
.doc-card:hover { border-color: rgba(37, 233, 255, .5); }
.doc-note { background: rgba(26, 32, 48, .6); border: 1px solid var(--hairline); border-radius: 10px; }
.sf-field input, .sf-field select, .sf-field textarea, .submit-form input, .submit-form select, .submit-form textarea { background: rgba(7, 8, 13, .6); border: 1px solid var(--hairline); color: var(--ice); border-radius: 9px; }
.sf-field input:focus, .sf-field select:focus, .sf-field textarea:focus { border-color: var(--neon-cyan); outline: none; box-shadow: 0 0 0 3px rgba(37, 233, 255, .12); }
.nf-title { font-size: clamp(34px, 5vw, 64px); letter-spacing: -.03em; }
.nf-code { font-family: var(--font-mono); color: var(--cyber-yellow); text-shadow: 0 0 24px rgba(252, 238, 10, .3); }
.nf-card { background: var(--card-bg); border: 1px solid var(--hairline); border-radius: 12px; }
.nf-card:hover { border-color: rgba(37, 233, 255, .5); }
@media (prefers-reduced-motion: reduce) {
  .dsc-ring, .dsc-sweep, .mc-sweep, .mc-radar b, body.mode-mission .mc-status .pulse-dot, .dsc-holo.pulse .dsc-radar { animation: none !important; }
  .dsc-holo { transform: none; }
}

/* My Lists: saved tools */
.ws-h { font-family: var(--font-display); font-size: clamp(20px, 1.7vw, 25px); font-weight: 600; letter-spacing: -.016em; }
.ws-h small { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--neon-cyan); }
.ws-saved { margin: 8px 0 38px; scroll-margin-top: 90px; }
.ws-saved .ws-tools { margin-top: 14px; }
.ws-saved-empty { margin-top: 12px; padding: 16px 18px; color: var(--text-soft); font-size: 14.5px; border: 1px dashed rgba(37, 233, 255, .3); border-radius: 12px; background: rgba(26, 32, 48, .4); }
.ws-saved-empty a { color: var(--neon-cyan); font-weight: 500; margin-left: 4px; }
.ws-bar { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-bottom: 16px; }
.ws-bar .ws-stats { flex: 1; min-width: 0; }

/* ── Tablets: the panorama would sit behind the words, so it steps back ── */
@media (max-width: 1180px) {
  .hero-inner, .hero-inner .hero-content, .hero-content { text-align: left; }
  .hero-inner .hero-chips, .hero-chips { justify-content: flex-start; }
  .search-alt { text-align: left; }
  .hero-art::after {
    background:
      linear-gradient(180deg, rgba(7, 8, 13, 0) 62%, var(--void) 98%),
      linear-gradient(90deg, rgba(7, 8, 13, .96), rgba(7, 8, 13, .88) 62%, rgba(7, 8, 13, .58) 82%, rgba(7, 8, 13, .4));
  }
}
@media (max-width: 760px) {
  /* Phones: a low band of city behind the status line, then the words on clean ground. */
  .hero-art::after { background: linear-gradient(180deg, rgba(7, 8, 13, .55), rgba(7, 8, 13, .72) 44%, var(--void) 92%); }
  .hero-status i { flex-wrap: wrap; gap: 2px 10px; }
  .hero-status i span:first-child::before { content: none; }
  .hero-chips { flex-wrap: wrap; overflow: visible; }
}

/* A failed or slow script must never leave the page blank. .reveal starts hidden
   and waits for JavaScript to show it, so CSS shows it anyway after a moment:
   quickly for the hero, later for sections people have not scrolled to yet. */
@keyframes revealSafety { to { opacity: 1; transform: none; } }
.reveal { animation: revealSafety .5s var(--ease) 6s forwards; }
.hero .reveal { animation: revealSafety .5s var(--ease) 1.2s forwards; }
.reveal.revealed { animation: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; animation: none; transition: none; } }

/* ═══════════════════════════════════════════════════════════
   GLASS
   Translucent panels with a lit top edge, a faint diagonal reflection, and a
   highlight that follows the cursor (fx.js feeds --mx, --my and --lit). Same
   thinking as the Ramayana relic cards: one light source, every surface reacts.
   Glass needs something behind it, so the whole site sits on a soft, blurred
   wash of the city's colours instead of flat black.
   ═══════════════════════════════════════════════════════════ */
:root {
  --glass-edge: rgba(255, 255, 255, .1);
  --glass: rgba(255, 255, 255, .05);
  --glass-strong: rgba(11, 13, 21, .86);
  --glass-border: rgba(255, 255, 255, .15);
  --glass-border-hover: rgba(37, 233, 255, .6);
  --hairline: rgba(255, 255, 255, .09);
  --surface: rgba(255, 255, 255, .05);
  --surface-2: rgba(255, 255, 255, .03);
  --nav-bg: rgba(9, 11, 18, .62);
  --text-soft: #D5DAE6;
  --gloss:
    linear-gradient(180deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, 0) 34%),
    linear-gradient(112deg, rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, .055) 38%, rgba(255, 255, 255, 0) 43%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .03) 54%, rgba(255, 255, 255, 0) 60%);
  --tint: linear-gradient(165deg, rgba(22, 28, 46, .62), rgba(9, 11, 20, .8));
  --card-bg: var(--gloss), var(--tint);
}
body::before {
  background:
    linear-gradient(180deg, rgba(7, 8, 13, .8), rgba(7, 8, 13, .93)),
    url(assets/art/ground.webp) center / cover no-repeat,
    var(--void);
}
body::after { background-image: none; }

/* Every panel, on every page */
:is(.tool-card, .cat-card, .guide-card, .blog-mini, .blog-card, .blog-feature, .news-card, .news-feature, .wf-card,
    .coll-index-card, .coll-card, .coll-item, .dna-card, .dna-scanner, .br-filters, .nf-card, .doc-card,
    .mc-step, .mc-head, .cmp-side, .cmp-verdict, .ws-stack, .ws-empty, .ws-tool, .tp-card, .wf-panel,
    .wf-result, .wf-side-stack, .wf-side-note, .rh-paper, .newsletter, .mp-alt, .post-more-card, .tp-alt,
    .wf-node, .wf-hero, .coll-hero, .post-cta, .post-takeaways, .post-toc, .lb-wrap, .cmp-table, .cmp-match, .mc-pick,
    .dna-legend-item, .bench-key-item, .mail-card, .post-tool, .doc-note, .ws-saved-empty, .mc-guide, .tp-hero) {
  --specular: radial-gradient(280px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, calc(var(--lit, 0) * .17)), rgba(255, 255, 255, 0) 72%);
  background: var(--specular), var(--gloss), var(--tint);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--panel-shadow);
}
.how-steps li, .mc-how li, .tp-stats > *, .wf-scorecard > * {
  --specular: radial-gradient(280px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, calc(var(--lit, 0) * .17)), rgba(255, 255, 255, 0) 72%);
  background: var(--specular), var(--gloss), var(--tint);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--panel-shadow);
}
/* The light-catching edge */
.lit-glass { position: relative; }
.lit-glass::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 5;
  opacity: var(--lit, 0);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .95), rgba(37, 233, 255, .75) 34%, rgba(168, 85, 247, .35) 58%, transparent 76%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* A little depth when the pointer is over a card */
:is(.tool-card, .hero-tile, .guide-card, .blog-mini, .blog-card, .cat-card) {
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0));
  transition: transform .28s var(--ease), border-color .35s, box-shadow .35s;
}
:is(.tool-card, .hero-tile, .guide-card, .blog-mini, .blog-card, .cat-card):hover { --lift: -3px; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)); }

/* Yellow buttons: lit from above, with a streak that passes on hover */
.btn-primary, .btn-primary.glow, .wf-act.primary, .tool-card .tool-open {
  background: var(--gold-fill);
  color: var(--ink); border-color: #FFE75A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72), inset 0 -1px 0 rgba(150, 105, 0, .3), 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(255, 205, 10, .16);
  position: relative; overflow: hidden;
}
.btn-primary::before, .tool-card .tool-open::before, .wf-act.primary::before {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 38%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .7), rgba(255, 255, 255, 0));
  transition: left .7s var(--ease);
}
.btn-primary:hover::before, .tool-card .tool-open:hover::before, .wf-act.primary:hover::before { left: 120%; }
.btn-primary:hover, .tool-card .tool-open:hover, .wf-act.primary:hover { background: var(--gold-fill-hover); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -1px 0 rgba(150, 105, 0, .25), 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px rgba(255, 205, 10, .3); }
.btn-ghost, .wf-act, .tool-card .tool-act, .wf-swap, .wf-swap-btn, .wf-step-btn {
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}

/* ── Nav: a sheet of glass over the city ── */
.nav, .nav.scrolled {
  background: linear-gradient(180deg, rgba(14, 16, 26, .66), rgba(9, 11, 18, .5));
  backdrop-filter: blur(22px) saturate(170%); -webkit-backdrop-filter: blur(22px) saturate(170%);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 8px 30px rgba(0, 0, 0, .25);
}
.nav-user { display: flex; align-items: center; margin-left: 8px; }
.nav-user .drop-trigger { display: flex; align-items: center; gap: 7px; background: none; border: 0; padding: 0; cursor: pointer; color: #D3D9E6; }
.nav-user .drop-trigger img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; border: 1px solid rgba(255, 255, 255, .34); box-shadow: 0 0 14px rgba(37, 233, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .4); }
.nav-user:hover .drop-trigger img { border-color: var(--neon-cyan); }
.nav-user .nav-drop { left: auto; right: 0; transform: translateY(-8px); }
.nav-user.open .nav-drop { transform: translateY(0); }
.nav-drop { background: var(--gloss), rgba(13, 15, 24, .9); border: 1px solid var(--glass-edge); border-radius: 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 24px 60px rgba(0, 0, 0, .6); }
@media (max-width: 760px) { .nav-user { display: none; } }

/* ── Hero: the picture, as in the reference ── */
.hero-art { width: min(100%, 2400px); aspect-ratio: 2 / 1; }
.hero-art img { object-fit: cover; object-position: right top; }
.hero-art::after {
  background:
    linear-gradient(180deg, rgba(7, 8, 13, 0) 66%, var(--void) 99%),
    linear-gradient(90deg, rgba(7, 8, 13, .55) 0, rgba(7, 8, 13, .25) 34%, rgba(7, 8, 13, 0) 50%);
}
#neuralCanvas { opacity: .3; -webkit-mask-image: linear-gradient(90deg, #000, #000 26%, transparent 46%); mask-image: linear-gradient(90deg, #000, #000 26%, transparent 46%); }
.hero-inner { padding: 100px 36px 22px; }
.hero-status { margin-bottom: 15px; }
.hero-inner .hero-title, .hero-title {
  font-family: "Michroma", var(--font-display); font-weight: 400; font-size: clamp(30px, 3.62vw, 62px); line-height: 1.17; letter-spacing: -.012em; margin: 0 0 14px;
  -webkit-text-stroke: .75px currentColor; paint-order: stroke fill; text-shadow: 0 2px 26px rgba(7, 8, 13, .7);
}
.hero-title-alt { text-shadow: 0 0 30px rgba(252, 238, 10, .3), 0 2px 18px rgba(7, 8, 13, .5); }
.hero-inner .hero-sub, .hero-sub { font-size: clamp(16px, 1.3vw, 20px); line-height: 1.38; color: #E2E6EF; margin-bottom: 20px; text-shadow: 0 1px 14px rgba(7, 8, 13, .85); }
.search-panel { max-width: 824px; }
.search-shell {
  height: 56px; padding: 0 6px 0 22px; border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 46%), rgba(9, 11, 18, .62);
  backdrop-filter: blur(18px) saturate(170%); -webkit-backdrop-filter: blur(18px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 0 30px rgba(37, 233, 255, .16), 0 0 54px rgba(255, 43, 214, .1);
}
.search-go { height: 44px; border-radius: 22px; }
.chip {
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .02)), rgba(9, 11, 18, .5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}
.hero-chips { margin-bottom: 0; }

/* ── Feature tiles: real pictures behind glass ── */
.hero-tile {
  min-height: 130px; padding: 15px 40px 14px 18px; border-radius: 15px; border: 1px solid rgba(var(--tile), .5);
  --specular: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, calc(var(--lit, 0) * .22)), rgba(255, 255, 255, 0) 72%);
  background:
    var(--specular),
    linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 30%),
    linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(90deg, rgba(9, 11, 18, .94) 18%, rgba(9, 11, 18, .6) 56%, rgba(9, 11, 18, .08) 100%),
    var(--tile-art) right center / cover no-repeat,
    #0A0C14;
  background-size: auto, auto, auto, auto, cover, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 22px rgba(var(--tile), .12), 0 16px 38px rgba(0, 0, 0, .42);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.hero-tile:hover { border-color: rgba(var(--tile), .95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 30px rgba(var(--tile), .28), 0 18px 44px rgba(0, 0, 0, .5); }
.hero-tile b { font-size: clamp(16px, 1.34vw, 21px); }

/* ── Tool cards: picture over the top, as in the reference ── */
.tool-card { min-height: 270px; padding: 16px 16px 14px; border-radius: 15px; overflow: hidden; }
.tool-card::before {
  content: ""; display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; opacity: 1; transform: none; left: 0; right: 0;
  background: var(--specular), linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .05) 40%, rgba(255, 255, 255, 0) 45%);
}
.tool-card > * { position: relative; z-index: 3; }
.tool-card > .tool-art {
  position: absolute; left: 0; right: 0; top: 0; height: 74%; z-index: 0; opacity: .95; filter: none;
  background-size: cover; background-position: var(--art-x, 70%) 30%;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .55) 58%, transparent); mask-image: linear-gradient(180deg, #000 30%, rgba(0, 0, 0, .55) 58%, transparent);
  -webkit-mask-composite: source-over; mask-composite: add;
}
.tool-card:hover > .tool-art { opacity: 1; transform: scale(1.05); }
.art-12 { --art: url(assets/art/card-chatgpt.webp); }
.art-13 { --art: url(assets/art/card-claude.webp); }
.art-14 { --art: url(assets/art/card-midjourney.webp); }
.art-15 { --art: url(assets/art/card-gemini.webp); }
.tool-card > .tool-art { background-image: var(--art); }
.tool-card .tool-logo:has(.logo-img) { background: rgba(9, 11, 18, .55) !important; }
.tool-card .tool-logo { border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 20px rgba(0, 0, 0, .5); }
.tool-head { margin-bottom: 26px; }
.tool-card .tool-name { font-size: 20px; text-shadow: 0 1px 12px rgba(7, 8, 13, .9); }
.tool-card .tool-cat { text-shadow: 0 1px 8px rgba(7, 8, 13, .95); }
.tool-card .tool-desc { color: #E2E6EF; text-shadow: 0 1px 8px rgba(7, 8, 13, .8); }
.tool-caps span { background: rgba(255, 255, 255, .055); border-color: rgba(255, 255, 255, .08); box-shadow: none; color: #C7CEDD; }
.tool-card .tool-score { background: rgba(9, 11, 18, .72); border-color: rgba(255, 255, 255, .24); font-size: 10.5px; padding: 5px 7px; line-height: 1; }
.feat-main .tool-score { display: none; }
.latest-art { border-color: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.latest-rail { border-left-color: rgba(255, 255, 255, .12); }

/* ── Painted covers give way to real pictures ── */
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.latest-art, .blog-mini-art, .blog-card-art, .blog-feature-art, .news-feature-art, .post-art, .story-art { position: relative; overflow: hidden; }
.post-art, .story-art { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 20px 60px rgba(0, 0, 0, .5); }

/* ── A picture at the top of each section's first page ── */
.page-art, .browse .br-head, .compare-page .br-head, .blog-page .br-head, .news-page .br-head, .ws-page .br-head, .collections-page .br-head, .research-page .br-head { position: relative; }
:is(.browse, .compare-page, .blog-page, .news-page, .ws-page, .collections-page, .research-page) .br-head::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; top: -104px; left: 50%; width: 100vw; height: calc(100% + 150px); transform: translateX(-50%);
  background: var(--head-art) right 22% / min(62vw, 980px) auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 72%), linear-gradient(180deg, #000 58%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 30%, #000 72%), linear-gradient(180deg, #000 58%, transparent);
  mask-composite: intersect;
}
.browse { --head-art: url(assets/art/tile-tools.webp); }
.compare-page { --head-art: url(assets/art/tile-compare.webp); max-width: 1240px; }
.news-page { --head-art: url(assets/art/cover-city.webp); }
.collections-page { --head-art: url(assets/art/cover-prism.webp); }
.research-page { --head-art: url(assets/art/card-research.webp); }
.intel-hero::after { background: url(assets/art/tile-dna.webp) right 40% / cover no-repeat; opacity: .92; width: min(62%, 980px); }
.intel-hero::before { display: none; }
.wf-page-hero { position: relative; overflow: hidden; }
.wf-page-hero::after {
  content: ""; position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: min(60%, 960px); pointer-events: none;
  background: url(assets/art/cover-studio.webp) right 30% / cover no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 52%), linear-gradient(180deg, #000 62%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 52%), linear-gradient(180deg, #000 62%, transparent);
  mask-composite: intersect;
}
body.mode-mission .wf-page-hero::after { display: none; }
body.mode-mission .wf-hero-inner {
  background:
    linear-gradient(90deg, rgba(10, 10, 8, .95) 26%, rgba(10, 10, 8, .55) 56%, rgba(10, 10, 8, .05) 90%),
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 14%),
    url(assets/art/tile-mission.webp) right center / auto 118% no-repeat,
    #0A0A08;
  border: 1px solid rgba(252, 238, 10, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 0 44px rgba(252, 238, 10, .12), 0 20px 50px rgba(0, 0, 0, .5);
}
body.mode-mission .wf-hero-inner::before { display: none; }
.dna-scanner { background: var(--specular), var(--gloss), radial-gradient(70% 90% at 52% 42%, rgba(70, 40, 150, .36), transparent 70%), var(--tint); border-color: rgba(168, 85, 247, .46); }
.cmp-side { --corner: 37, 233, 255; border-color: rgba(var(--corner), .55); }
.cmp-side:last-of-type, .cmp-head > .cmp-side:last-child { --corner: 255, 43, 214; }
.cmp-verdict { border-color: rgba(37, 233, 255, .5); }
.post-cta { border-color: rgba(252, 238, 10, .5); }
.mc-head { border-color: rgba(252, 238, 10, .44); }
.newsletter { border-color: rgba(37, 233, 255, .36); }
.wf-hero { background: var(--specular), var(--gloss), var(--tint) !important; }
.coll-hero { background: var(--specular), var(--gloss), var(--tint) !important; }
.footer { background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .012)); border-top: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.assistant-panel { background: var(--gloss), rgba(11, 13, 21, .86); border-color: var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 30px 70px rgba(0, 0, 0, .6); }
.assistant-fab { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 28px rgba(37, 233, 255, .3); }
.search-results { background: var(--gloss), rgba(11, 13, 21, .97) !important; border-color: var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 30px 70px rgba(0, 0, 0, .65); }
.toast { background: var(--gloss), rgba(11, 13, 21, .92); border-color: var(--glass-edge); }

/* Long reading stays calm: glass only around the edges, none under the words */
.post-page ~ *, .story-page ~ * { }
body:has(.post-page, .story-page)::before { background: var(--void); }

/* ── Tablets and phones ── */
@media (max-width: 1180px) {
  .hero-art::after {
    background:
      linear-gradient(180deg, rgba(7, 8, 13, 0) 60%, var(--void) 98%),
      linear-gradient(90deg, rgba(7, 8, 13, .9) 0, rgba(7, 8, 13, .72) 44%, rgba(7, 8, 13, .12) 72%);
  }
  .hero-inner .hero-title, .hero-title { font-size: clamp(30px, 4.6vw, 54px); }
}
@media (max-width: 760px) {
  .hero-art { width: 100%; aspect-ratio: 1 / 1; }
  .hero-art img { object-position: center top; }
  .hero-art::after { background: linear-gradient(180deg, rgba(7, 8, 13, .05) 30%, rgba(7, 8, 13, .55) 62%, var(--void) 96%); }
  .hero-inner { padding: min(62vw, 250px) 16px 16px; }
  .hero-inner .hero-title, .hero-title { font-size: clamp(27px, 8.3vw, 36px); -webkit-text-stroke: .5px currentColor; line-height: 1.2; }
  .hero-chips { flex-wrap: wrap !important; overflow: visible !important; justify-content: flex-start !important; }
  .chips-label { width: auto; }
  .tool-score { font-size: 11px; }
  :is(.browse, .compare-page, .blog-page, .news-page, .ws-page, .collections-page, .research-page) .br-head::after { background-size: 120vw auto; background-position: right top; opacity: .55; }
  .wf-page-hero::after { width: 100%; opacity: .5; }
  body.mode-mission .wf-hero-inner { background: linear-gradient(180deg, rgba(10, 10, 8, .76), rgba(10, 10, 8, .92)), url(assets/art/tile-mission.webp) center / cover no-repeat, #0A0A08; }
  .intel-hero::after { width: 100%; opacity: .34; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav, .search-shell, .chip { backdrop-filter: none; -webkit-backdrop-filter: none; background: #0E1018; }
}

/* ── Refinements after seeing the real pictures in place ── */
/* The art fades to nothing, not to a colour, so no edge shows against the wash. */
.hero-art {
  -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .55) 78%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .55) 78%, transparent 99%);
}
.hero-art::after { background: linear-gradient(90deg, rgba(7, 8, 13, .55) 0, rgba(7, 8, 13, .25) 34%, rgba(7, 8, 13, 0) 50%); }
.hero-inner .hero-title, .hero-title { -webkit-text-stroke: 1.15px currentColor; }
.hero-tile {
  background:
    var(--specular),
    linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, 0) 30%),
    linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, 0) 45%),
    linear-gradient(90deg, rgba(9, 11, 18, .97) 22%, rgba(9, 11, 18, .78) 52%, rgba(9, 11, 18, .12) 100%),
    var(--tile-art) right 40% / auto 128% no-repeat,
    #0A0C14;
}
/* Keep the picture to the top of the card and clear the words */
.tool-card > .tool-art {
  height: 58%;
  -webkit-mask-image: linear-gradient(180deg, #000 18%, rgba(0, 0, 0, .42) 48%, rgba(0, 0, 0, .1) 74%, transparent), linear-gradient(90deg, rgba(0, 0, 0, .34), #000 62%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 18%, rgba(0, 0, 0, .42) 48%, rgba(0, 0, 0, .1) 74%, transparent), linear-gradient(90deg, rgba(0, 0, 0, .34), #000 62%);
  mask-composite: intersect;
}
.tool-card .tool-name { text-shadow: 0 1px 3px rgba(7, 8, 13, .95), 0 0 16px rgba(7, 8, 13, .95); }
.tool-card .tool-cat { text-shadow: 0 1px 2px rgba(7, 8, 13, 1), 0 0 10px rgba(7, 8, 13, 1); }
@media (max-width: 1180px) {
  .hero-art::after { background: linear-gradient(90deg, rgba(7, 8, 13, .9) 0, rgba(7, 8, 13, .72) 44%, rgba(7, 8, 13, .12) 72%); }
}
@media (max-width: 760px) {
  .hero-art { -webkit-mask-image: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, .4) 70%, transparent); mask-image: linear-gradient(180deg, #000 40%, rgba(0, 0, 0, .4) 70%, transparent); }
  .hero-art::after { background: none; }
  .hero-inner .hero-title, .hero-title { -webkit-text-stroke: .6px currentColor; }
}

/* ═══════════════════════════════════════════════════════════
   Pictures through the rest of the site
   ═══════════════════════════════════════════════════════════ */
/* Tasks on the homepage: icon on glass, picture falling away to the right */
.task-grid, .cat-grid.task-grid { gap: 14px; }
.cat-card, .task-grid .cat-card {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 92px; padding: 16px 18px; overflow: hidden; border-radius: 14px;
  background:
    var(--specular),
    linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 34%),
    linear-gradient(90deg, rgba(10, 12, 20, .97) 30%, rgba(10, 12, 20, .72) 62%, rgba(10, 12, 20, .16)),
    var(--art) right 35% / 74% auto no-repeat,
    #0A0C14;
}
.cat-card .cat-icon {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; color: var(--neon-cyan); filter: none; font-size: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 18px rgba(37, 233, 255, .12);
}
.cat-card b { font-size: 16.5px; }
.cat-card small { color: var(--text-soft); }
.task-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* Guides: a picture across the top of each card */
.card-pic { display: block; background: var(--art) center 35% / cover no-repeat; }
.guide-card { position: relative; overflow: hidden; padding-top: 128px; }
.guide-card > .card-pic {
  position: absolute; left: 0; right: 0; top: 0; height: 150px;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent);
  transition: transform .7s var(--ease);
}
.guide-card > *:not(.card-pic) { position: relative; }
.guide-card:hover > .card-pic { transform: scale(1.04); }
.wf-card { display: flex; flex-direction: column; position: relative; overflow: hidden; }
.wf-card > .card-pic {
  height: 118px; flex: none; margin-bottom: -26px;
  -webkit-mask-image: linear-gradient(180deg, #000 42%, transparent); mask-image: linear-gradient(180deg, #000 42%, transparent);
}
.wf-card > .wf-card-body { position: relative; }
.wf-card-bar { display: none; }
/* Guide page and tool page heroes share their picture */
.wf-hero, .tp-hero, .coll-hero { position: relative; overflow: hidden; }
.wf-hero {
  background:
    var(--specular), var(--gloss),
    linear-gradient(90deg, rgba(10, 12, 20, .96) 34%, rgba(10, 12, 20, .55) 66%, rgba(10, 12, 20, .12)),
    var(--art) right center / cover no-repeat, #0A0C14 !important;
  border-color: rgba(37, 233, 255, .4);
}
.wf-hero::before { display: none; }
.tp-hero {
  padding: 24px 26px; border-radius: 16px; margin-top: 12px; border-color: rgba(37, 233, 255, .34);
  background:
    var(--specular), var(--gloss),
    linear-gradient(90deg, rgba(10, 12, 20, .95) 28%, rgba(10, 12, 20, .55) 62%, rgba(10, 12, 20, .25)),
    var(--art) right 35% / cover no-repeat, #0A0C14;
}
.tp-hero .tool-logo:has(.logo-img) { background: rgba(9, 11, 18, .55) !important; border: 1px solid rgba(255, 255, 255, .26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 26px rgba(0, 0, 0, .5); }
.tp-title h1 { font-size: clamp(32px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -.028em; text-shadow: 0 2px 18px rgba(7, 8, 13, .8); }
.tp-title { font-size: inherit; }
.tool-logo:has(.logo-img) { background: rgba(9, 11, 18, .55) !important; }

/* Collections */
.coll-index-card { position: relative; overflow: hidden; min-height: 250px; display: flex; flex-direction: column; }
.coll-index-card .coll-bg {
  position: absolute; inset: 0 0 auto 0; height: 66%; opacity: .95; filter: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent);
  transition: transform .7s var(--ease);
}
.coll-index-card:hover .coll-bg { transform: scale(1.04); }
.coll-index-card > *:not(.coll-bg) { position: relative; z-index: 1; }
.coll-index-body { margin-top: auto; }
.coll-index-body h2 { text-shadow: 0 1px 10px rgba(7, 8, 13, .9); }
.coll-tag { background: rgba(9, 11, 18, .72); border: 1px solid rgba(255, 255, 255, .22); border-radius: 7px; color: var(--ice); }
.coll-hero .coll-bg { position: absolute; inset: 0; opacity: .62; filter: none; z-index: 0; -webkit-mask-image: linear-gradient(90deg, transparent 18%, #000 70%); mask-image: linear-gradient(90deg, transparent 18%, #000 70%); }
.coll-hero > *:not(.coll-bg) { position: relative; z-index: 1; }

/* News: a picture for every story */
.news-card { position: relative; overflow: hidden; padding-top: 128px; }
.news-card-art { position: absolute; left: 0; right: 0; top: 0; height: 150px; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); }
.news-card > *:not(.news-card-art) { position: relative; }
.news-item { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 22px; align-items: center; }
.news-item-art { position: relative; aspect-ratio: 16 / 9; border-radius: 11px; overflow: hidden; border: 1px solid var(--glass-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.news-item-rail { display: none; }
@media (max-width: 680px) { .news-item { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; } .news-item .news-summary { display: none; } }

/* Model pages and documents get a picture at the very top */
.model-page, .doc-page, .nf-page, .wf-detail, .tool-page, .collection-page { position: relative; }
.mp-hero { overflow: visible; }

/* Icons in tabs and section titles */
.intel-tab { display: inline-flex; align-items: center; gap: 8px; }
.intel-tab span, .mp-subnav-link span { display: inline-flex; color: var(--violet-text); }
.intel-tab.active span { color: var(--neon-cyan); }
.mp-subnav-link { display: inline-flex; align-items: center; gap: 7px; }
.mp-h2 { display: flex; align-items: center; gap: 10px; }
.mp-h2 .ic { color: var(--violet-text); }
.cmp-crown { color: var(--cyber-yellow); display: inline-flex; filter: drop-shadow(0 0 8px rgba(252, 238, 10, .5)); }
.ar-meter { display: grid; grid-template-columns: minmax(0, 1fr) 30px; align-items: center; gap: 8px; width: 100%; min-width: 96px; }
.mp-dna-score { display: grid; grid-template-columns: minmax(70px, 150px) 30px; align-items: center; gap: 8px; }

/* Newsletter sits on a picture too */
.newsletter {
  position: relative; overflow: hidden; border-color: rgba(37, 233, 255, .34);
  background:
    var(--specular), var(--gloss),
    linear-gradient(90deg, rgba(10, 12, 20, .96) 38%, rgba(10, 12, 20, .7) 66%, rgba(10, 12, 20, .35)),
    url(assets/art/cover-plane.webp) right center / cover no-repeat, #0A0C14;
}
.newsletter-glow { display: none; }
.mail-card { background: var(--gloss), rgba(9, 11, 18, .66); }

/* Living image: a very slow reflection crossing the hero, like light on a window.
   It moves by transform, so the browser does not repaint the picture each frame. */
.hero-art { overflow: hidden; }
.hero-art::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 56%; z-index: 1; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(170, 230, 255, .075) 50%, rgba(255, 255, 255, 0) 70%);
  transform: translateX(-100%); animation: heroSheen 16s ease-in-out infinite; will-change: transform;
}
@keyframes heroSheen { 0%, 12% { transform: translateX(-100%); } 62%, 100% { transform: translateX(190%); } }
@media (prefers-reduced-motion: reduce) { .hero-art::before { animation: none; display: none; } }

/* Headers with a picture need a little more air */
.br-head { padding-top: 6px; padding-bottom: 30px; min-height: 186px; }
.br-sub { text-shadow: 0 1px 12px rgba(7, 8, 13, .8); }
@media (max-width: 760px) {
  .cat-card, .task-grid .cat-card { min-height: 82px; padding: 13px 14px; background-size: auto, auto, auto, 92% auto, auto; }
  .tp-hero { padding: 18px; }
  .news-card { padding-top: 112px; }
  .mp-hero::before, .doc-page::before, .nf-page::before { background-size: 120vw auto; opacity: .5; }
}

/* Mission Control: words stay on clean ground, the machine sits to the right */
body.mode-mission .wf-hero-inner {
  background:
    linear-gradient(90deg, rgba(9, 9, 7, .98) 36%, rgba(9, 9, 7, .84) 54%, rgba(9, 9, 7, .2) 80%, rgba(9, 9, 7, .05)),
    linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 14%),
    url(assets/art/tile-mission.webp) right center / auto 122% no-repeat,
    #0A0A08;
}

/* The site is dark-only: the unused theme button must never flash on load. */
#themeToggle { display: none !important; }
.mp-hero-radar { position: relative; }
.mp-hero-radar .radar { filter: drop-shadow(0 0 22px rgba(168, 85, 247, .3)); }
@media (max-width: 760px) {
  .tool-card .tool-score { font-size: 10px; }
  :is(.browse, .compare-page, .blog-page, .news-page, .ws-page, .collections-page, .research-page) .br-head::after { opacity: .34; }
  .wf-page-hero::after { opacity: .3; }
  .intel-hero::after { opacity: .24; }
  .mp-hero::before, .doc-page::before, .nf-page::before { opacity: .3; }
}

/* ── Shine: a glare across the top-left corner, as on a real pane of glass,
      plus a stronger highlight under the cursor. ── */
:root {
  --glare: linear-gradient(118deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .024) 14%, rgba(255, 255, 255, 0) 27%);
  --streak: linear-gradient(112deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .022) 44%, rgba(255, 255, 255, 0) 49%);
  --gloss: var(--glare), linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 26%), var(--streak);
}
:is(.tool-card, .cat-card, .guide-card, .blog-mini, .blog-card, .blog-feature, .news-card, .news-feature, .wf-card,
    .coll-index-card, .coll-card, .coll-item, .dna-card, .dna-scanner, .br-filters, .nf-card, .doc-card,
    .mc-step, .mc-head, .cmp-side, .cmp-verdict, .ws-stack, .ws-empty, .ws-tool, .tp-card, .wf-panel,
    .wf-result, .wf-side-stack, .wf-side-note, .rh-paper, .newsletter, .mp-alt, .post-more-card, .tp-alt,
    .wf-node, .wf-hero, .coll-hero, .post-cta, .post-takeaways, .post-toc, .lb-wrap, .cmp-table, .cmp-match, .mc-pick,
    .dna-legend-item, .bench-key-item, .mail-card, .post-tool, .doc-note, .ws-saved-empty, .mc-guide, .tp-hero, .hero-tile),
.how-steps li, .mc-how li, .tp-stats > *, .wf-scorecard > * {
  --specular: radial-gradient(300px circle at var(--mx, -999px) var(--my, -999px), rgba(255, 255, 255, calc(var(--lit, 0) * .26)), rgba(255, 255, 255, 0) 70%);
}
/* Cards with pictures: the glass sits on top of the picture */
.tool-card::before, .guide-card::before, .news-card::before, .blog-mini::before, .blog-card::before, .coll-index-card::before, .wf-card::before {
  content: ""; display: block; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; left: 0; right: 0; opacity: 1; transform: none;
  background: var(--specular), var(--glare), var(--streak);
}
.guide-card > *, .news-card > *, .blog-mini > *, .blog-card > *, .coll-index-card > *, .wf-card > * { z-index: auto; }
.hero-tile {
  background:
    var(--specular),
    var(--glare),
    var(--streak),
    linear-gradient(90deg, rgba(9, 11, 18, .985) 30%, rgba(9, 11, 18, .84) 56%, rgba(9, 11, 18, .34) 82%, rgba(9, 11, 18, .14) 100%),
    var(--tile-art) right 40% / auto 128% no-repeat,
    #0A0C14;
}
.cat-card, .task-grid .cat-card {
  background:
    var(--specular),
    var(--glare),
    var(--streak),
    linear-gradient(90deg, rgba(10, 12, 20, .97) 30%, rgba(10, 12, 20, .72) 62%, rgba(10, 12, 20, .16)),
    var(--art) right 35% / 74% auto no-repeat,
    #0A0C14;
}
.wf-hero { background: var(--specular), var(--glare), var(--streak), linear-gradient(90deg, rgba(10, 12, 20, .96) 34%, rgba(10, 12, 20, .55) 66%, rgba(10, 12, 20, .12)), var(--art) right center / cover no-repeat, #0A0C14 !important; }
.tp-hero { background: var(--specular), var(--glare), var(--streak), linear-gradient(90deg, rgba(10, 12, 20, .95) 28%, rgba(10, 12, 20, .55) 62%, rgba(10, 12, 20, .25)), var(--art) right 35% / cover no-repeat, #0A0C14; }
.newsletter { background: var(--specular), var(--glare), var(--streak), linear-gradient(90deg, rgba(10, 12, 20, .96) 38%, rgba(10, 12, 20, .7) 66%, rgba(10, 12, 20, .35)), url(assets/art/cover-plane.webp) right center / cover no-repeat, #0A0C14; }
@media (max-width: 760px) {
  .cat-card, .task-grid .cat-card { background-size: auto, auto, auto, auto, 92% auto, auto; }
}

/* The cursor light is a hotspot with a soft falloff, not a wash over the card. */
:is(.tool-card, .cat-card, .guide-card, .blog-mini, .blog-card, .blog-feature, .news-card, .news-feature, .wf-card,
    .coll-index-card, .coll-card, .coll-item, .dna-card, .dna-scanner, .br-filters, .nf-card, .doc-card,
    .mc-step, .mc-head, .cmp-side, .cmp-verdict, .ws-stack, .ws-empty, .ws-tool, .tp-card, .wf-panel,
    .wf-result, .wf-side-stack, .wf-side-note, .rh-paper, .newsletter, .mp-alt, .post-more-card, .tp-alt,
    .wf-node, .wf-hero, .coll-hero, .post-cta, .post-takeaways, .post-toc, .lb-wrap, .cmp-table, .cmp-match, .mc-pick,
    .dna-legend-item, .bench-key-item, .mail-card, .post-tool, .doc-note, .ws-saved-empty, .mc-guide, .tp-hero, .hero-tile),
.how-steps li, .mc-how li, .tp-stats > *, .wf-scorecard > * {
  --specular: radial-gradient(230px circle at var(--mx, -999px) var(--my, -999px),
    rgba(255, 255, 255, calc(var(--lit, 0) * .2)) 0,
    rgba(255, 255, 255, calc(var(--lit, 0) * .07)) 34%,
    rgba(255, 255, 255, 0) 72%);
}

/* Typography: no stranded words, tidy rags */
h1, h2, h3, .br-title, .wf-page-title, .intel-title, .doc-title { text-wrap: balance; }
p, .br-sub, .wf-page-sub, .intel-sub, .section-lead, .hero-sub, .tool-desc, .news-summary, .blog-excerpt { text-wrap: pretty; }
.br-sub { max-width: 58ch; }

/* Tool page rhythm */
.tp-main > * + *, .tp-body > * + * { margin-top: 26px; }
.tp-body h2, .tp-main h2 { font-weight: 600; }
.tp-card h3, .tp-card h2 { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.feat, .pro, .con { color: var(--text-soft); }

/* Long reading stays quiet: no glare beside the words */
.post-toc, .post-takeaways, .post-sources { background: rgba(255, 255, 255, .035); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.post-takeaways { border-left: 2px solid var(--neon-cyan); }

/* Links inside Nova's answers */
.msg.bot a { color: var(--neon-cyan); }
.msg.bot a:hover { color: var(--ice); text-decoration: underline; }
.msg.bot a b { color: inherit; }

/* Per-tool crop of the card picture */
.tool-card > .tool-art { background-size: var(--art-z, 100%) auto; background-position: var(--art-x, 70%) var(--art-y, 30%); transform: scaleX(var(--art-flip, 1)); }
.tool-card:hover > .tool-art { transform: scaleX(var(--art-flip, 1)) scale(1.05); }

/* Search results: the way through to everything stays in view */
.sr-foot { position: sticky; bottom: 0; background: rgba(11, 13, 21, .96); border-top: 1px solid var(--hairline); z-index: 2; }
.sr-all { color: var(--neon-cyan); font-weight: 500; }
.sr-item.sel { background: rgba(37, 233, 255, .08); }
.sr-item mark { background: none; color: var(--neon-cyan); padding: 0; }

/* Tools with no logo: a letter on glass, not a loud coloured block */
.tool-logo:not(:has(.logo-img)) { background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03)), rgba(9, 11, 18, .72) !important; color: var(--neon-cyan); border: 1px solid rgba(37, 233, 255, .38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24); font-family: var(--font-display); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   PREMIUM FINISH
   What this layer holds to:
   1. Deep, cool glass. Colour comes from the pictures and the cursor, never grey fill.
   2. Restraint. One loud thing per view; everything else is quiet until you engage.
   3. Warm gold on anything big, as in the reference. Raw #FCEE0A stays for small text.
   4. Hierarchy from size and weight, not from more boxes.
   ═══════════════════════════════════════════════════════════ */
:root {
  --gold-fill: linear-gradient(180deg, #FFF16A 0%, #FFE226 48%, #FFCE05 100%);
  --gold-fill-hover: linear-gradient(180deg, #FFF78F 0%, #FFEA3D 48%, #FFD81F 100%);
  --gold-text: linear-gradient(180deg, #FFF48A 8%, #FFE22B 52%, #FFC800 96%);
  --ink: #15120A;
  --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, .11), 0 1px 2px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .34);
  --sweep: linear-gradient(112deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, 0) 56%);
  --text-soft: #CDD3E0;
}

/* Details people feel without noticing */
html {
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-kerning: normal;
  scrollbar-color: rgba(167, 176, 196, .3) transparent; scrollbar-width: thin;
}
/* A trace of film grain over the page, so large dark gradients never band. */
body::after {
  -webkit-mask-image: none; mask-image: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
input, textarea { caret-color: var(--neon-cyan); }
.lb td, .cmp-cell, .tp-stats b { font-variant-numeric: tabular-nums; }

/* ── Headline: the same gold as the buttons ── */
.hero-title-alt {
  color: #FFDE2A; background: var(--gold-text); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 0 20px rgba(255, 205, 10, .2));
}

/* ── Section heads: the slash does the work, the words line up ── */
.section-head .section-lead { padding-left: 26px; }
.section-head .section-title { letter-spacing: -.024em; }

/* ── Numbered steps: a spec sheet, not bright squares ── */
.how-steps li { padding: 22px 24px 26px; }
.how-n {
  display: flex; align-items: center; gap: 12px; width: auto; height: auto; background: none; box-shadow: none; border-radius: 0;
  font-size: 12px; letter-spacing: .16em; color: var(--neon-cyan); margin-bottom: 20px;
}
.how-n::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(37, 233, 255, .42), rgba(255, 255, 255, .05)); }
.how-steps h3 { font-size: 20px; margin-top: 0; letter-spacing: -.016em; }
.how-steps p { font-size: 15px; color: #C4CBD9; }
.mc-how li { flex-direction: column; gap: 14px; padding: 20px 22px 22px; }
.mc-how span {
  display: flex; align-items: center; gap: 12px; width: auto; height: auto; background: none; box-shadow: none; border-radius: 0;
  font-size: 12px; letter-spacing: .16em; color: var(--cyber-yellow);
}
.mc-how span::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 214, 10, .46), rgba(255, 255, 255, .05)); }

/* ── Promises under the steps ── */
.trust-row { gap: 10px 34px; margin-top: 22px; }
.trust-row li { font-family: var(--font-body); font-size: 13.5px; letter-spacing: 0; color: #C4CBD9; }
.trust-row li::before {
  content: ""; width: 17px; height: 17px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(61, 232, 160, .38);
  background: rgba(61, 232, 160, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233DE8A0' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* ── A pass of light over the glass when the pointer arrives ── */
.tool-card::before, .guide-card::before, .news-card::before, .blog-mini::before, .blog-card::before, .coll-index-card::before, .wf-card::before {
  background: var(--specular), var(--sweep), var(--glare), var(--streak);
  background-repeat: no-repeat; background-size: auto, 320% 100%, auto, auto; background-position: 0 0, 130% 0, 0 0, 0 0;
  transition: background-position 1.1s var(--ease);
}
:is(.tool-card, .guide-card, .news-card, .blog-mini, .blog-card, .coll-index-card, .wf-card):hover::before { background-position: 0 0, -30% 0, 0 0, 0 0; }

/* ── Pictures settle in instead of ending in a hard line ── */
.cover-img { transition: transform .9s var(--ease); }
:is(.blog-mini, .blog-card, .blog-feature, .news-feature, .news-item, .latest-item):hover .cover-img { transform: scale(1.035); }
.blog-mini-art::after, .blog-card-art::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 12, 22, 0), rgba(10, 12, 22, .78));
}

/* ── Nova: a quiet light in the corner, not a cartoon ── */
.assistant-fab {
  width: 50px; height: 50px; border-radius: 25px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: flex-start; overflow: hidden; color: var(--ice);
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)), rgba(11, 13, 21, .8);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 30px rgba(0, 0, 0, .5), 0 0 22px rgba(37, 233, 255, .14);
  transition: width .38s var(--ease), box-shadow .3s, transform .3s var(--ease);
}
.assistant-fab::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: linear-gradient(130deg, #25E9FF, #A855F7 60%, rgba(255, 43, 214, .7));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.nova-spark { flex: none; display: block; }
.fab-label { margin-left: 10px; font-family: var(--font-display); font-weight: 600; font-size: 13.5px; white-space: nowrap; opacity: 0; transition: opacity .22s; }
@media (hover: hover) and (pointer: fine) {
  .assistant-fab:hover { width: 128px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 12px 34px rgba(0, 0, 0, .55), 0 0 30px rgba(37, 233, 255, .24); }
  .assistant-fab:hover .fab-label { opacity: 1; }
}

/* Descenders stay inside the gold: without the room, "p" and "y" lose their fill. */
.hero-title-alt { padding-bottom: .2em; margin-bottom: -.2em; }
/* A steady pass of light, so the sweep can actually be seen */
.tool-card::before, .guide-card::before, .news-card::before, .blog-mini::before, .blog-card::before, .coll-index-card::before, .wf-card::before { transition: background-position 1s cubic-bezier(.35, .1, .35, 1); }

/* ── Tile arrows stay legible on any picture ── */
.hero-tile .tile-go {
  right: 12px; bottom: 12px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(9, 11, 18, .72); border: 1px solid rgba(var(--tile), .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .3s var(--ease), background .3s, border-color .3s;
}
.hero-tile:hover .tile-go { background: rgba(var(--tile), .16); border-color: rgba(var(--tile), .9); }

/* ── Maker logos beside AI models ── */
.m-logo {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; overflow: hidden;
  background: rgba(9, 11, 18, .72); border: 1px solid rgba(255, 255, 255, .13); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--neon-cyan);
}
.m-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dsc-model .m-logo { width: 20px; height: 20px; border-radius: 6px; font-size: 10px; }

/* ── Leaderboards: a clean instrument, no reflections across the numbers ── */
.lb-wrap, .cmp-table { background: linear-gradient(180deg, rgba(20, 25, 41, .5), rgba(10, 12, 22, .74)); }
.lb th.lb-num { text-align: right; }
.lb tbody tr { transition: background .2s; }
.lb-rank { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); }
.lb-tag { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09); color: #C7CEDD; }

/* ── Tool page: numbers you can read across a room, then calm, ordered detail ── */
.tool-page { max-width: 1180px; }
.tp-hero .tool-logo:has(.logo-img) { border-color: rgba(255, 255, 255, .16); }
.tp-cta .btn-ghost { background: rgba(9, 11, 18, .66); border-color: rgba(255, 255, 255, .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tp-stats { gap: 14px; margin: 16px 0 46px; }
.tp-stats > div { text-align: left; padding: 18px 20px 16px; border-radius: 14px; }
.tp-stats > div > b { justify-content: flex-start; align-items: baseline; gap: 2px; font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.3vw, 31px); letter-spacing: -.026em; line-height: 1.12; color: var(--ice); }
.tp-stats .stars b { display: block; font: inherit; letter-spacing: inherit; }
.tp-stats b i { font-style: normal; font-size: .46em; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.tp-stats small { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 9px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.tp-stats small .stars { font-size: 11px; letter-spacing: .04em; font-family: var(--font-body); }
.tp-body { grid-template-columns: minmax(0, 1fr) 340px; gap: 46px; }
.tp-main h2 { font-size: 20px; letter-spacing: -.016em; margin: 40px 0 14px; }
.tp-main > * + *, .tp-body > * + * { margin-top: 0; }
.tp-desc { font-size: 18px; line-height: 1.6; color: #DDE2EC; }
.tp-quote { margin-top: 18px; padding: 2px 0 2px 16px; border-left: 2px solid var(--electric-violet); font-size: 15px; line-height: 1.55; color: var(--text-soft); }
.tp-main > .tp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.tp-main > .tp-list li { padding: 13px 15px; align-items: center; font-size: 14.5px; color: #DDE2EC; border: 1px solid var(--hairline); border-radius: 11px; background: rgba(255, 255, 255, .022); }
li.feat::before { font-size: 11px; text-shadow: 0 0 10px rgba(37, 233, 255, .6); }
.tp-pc { gap: 14px; margin-top: 40px; }
.tp-pc > div { --pc: 61, 232, 160; padding: 20px 22px 18px; border-radius: 14px; border: 1px solid var(--hairline); box-shadow: var(--panel-shadow); background: linear-gradient(180deg, rgba(var(--pc), .075), rgba(var(--pc), 0) 46%), var(--tint); }
.tp-pc > div:last-child { --pc: 255, 90, 200; }
.tp-pc h2 { margin: 0 0 10px; font-size: 16px; color: rgb(var(--pc)); letter-spacing: -.008em; }
.tp-pc .tp-list li { padding: 6px 0; line-height: 1.5; color: #DDE2EC; }
.bestfor { display: flex; flex-wrap: wrap; gap: 8px; }
.bestfor span { font-family: var(--font-body); font-size: 13.5px; padding: 8px 14px; border-radius: 999px; color: var(--ice); background: rgba(37, 233, 255, .07); border: 1px solid rgba(37, 233, 255, .24); }
.tp-card { padding: 22px; }
.tp-card + .tp-card { margin-top: 14px; }
.tp-facts dt { color: var(--muted); }
.tp-facts dd { color: var(--ice); }
.tp-stack { margin-top: 16px; }
.tp-cmp-row { border-radius: 9px; transition: background .2s; }
.tp-cmp-row:hover { background: rgba(37, 233, 255, .06); }
.tp-alts { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--hairline); }
.tp-alts h2 { font-size: 24px; letter-spacing: -.02em; }
@media (max-width: 900px) {
  .tp-body { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .tp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 34px; }
}
@media (max-width: 560px) { .tp-pc { grid-template-columns: minmax(0, 1fr); } }

/* ── Compare: a tidy grid of matchups, no stranded card, no uneven rows ── */
.cmp-matchups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cmp-match { min-height: 86px; display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.cmp-match-txt { min-width: 0; }
.cmp-match-txt b { font-size: 14.5px; font-family: var(--font-display); font-weight: 600; letter-spacing: -.008em; }
.cmp-match-txt b i { margin: 0 3px; font-family: var(--font-mono); font-size: 10.5px; }
.cmp-match-txt small { display: block; margin-top: 4px; font-size: 12.5px; color: #B9C1D1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1000px) { .cmp-matchups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cmp-matchups { grid-template-columns: minmax(0, 1fr); } }

/* ── Guides and Mission Control: room to breathe around the switch ── */
.wf-modes { margin-top: 20px; }
.wf-mode-hint { margin-top: 14px; }
.wf-mission-search { padding: 6px; }
.wf-mission-search .btn { align-self: stretch; padding: 0 20px; border-radius: 9px; flex: none; }

/* ── Documents: the picture keeps to its corner, clear of the words ── */
.doc-page::before, .nf-page::before {
  background-size: min(44vw, 700px) auto; opacity: .8;
  -webkit-mask-image: linear-gradient(90deg, transparent 52%, #000 88%), linear-gradient(180deg, #000 26%, transparent 60%);
  mask-image: linear-gradient(90deg, transparent 52%, #000 88%), linear-gradient(180deg, #000 26%, transparent 60%);
}

/* ── Footer: the name, very large and very quiet ── */
.footer { position: relative; overflow: hidden; margin-top: 88px; }
.footer::after {
  content: ""; display: block; max-width: 1500px; margin: 4px auto 0; height: calc((min(100vw, 1500px) - 72px) / 8.18 + 6px); pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .012) 92%);
  -webkit-mask: url(assets/brand/solthar-wordmark.svg) center top / calc(100% - 72px) auto no-repeat;
          mask: url(assets/brand/solthar-wordmark.svg) center top / calc(100% - 72px) auto no-repeat;
}
.cmp-vs { background: var(--gold-fill); color: var(--ink); }

/* ── Guide pages: the same readable numbers as tool pages ── */
.wf-detail { max-width: 1100px; }
.wf-hero { background: var(--specular), var(--glare), var(--streak), linear-gradient(90deg, rgba(10, 12, 20, .975) 38%, rgba(10, 12, 20, .74) 62%, rgba(10, 12, 20, .18) 100%), var(--art) right center / cover no-repeat, #0A0C14 !important; }
.wf-scorecard { gap: 12px; }
.wf-scorecard > div { text-align: left; padding: 17px 18px 14px; border-radius: 13px; }
.wf-scorecard b { font-family: var(--font-display); font-weight: 600; color: var(--ice); font-size: clamp(18px, 1.8vw, 25px); letter-spacing: -.022em; line-height: 1.16; }
.wf-score-diff { font-size: clamp(18px, 1.8vw, 25px) !important; gap: 6px; }
.wf-scorecard small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; margin-top: 8px; color: var(--muted); }

/* ── Collections: one clean line per tool ── */
.collection-page { max-width: 1040px; }
.coll-item { padding: 18px 22px; gap: 18px; align-items: center; }
.coll-rank { font-size: 15px; min-width: 22px; }
.coll-item:nth-child(n) .coll-rank { color: var(--muted); }
.coll-item:nth-child(-n+3) .coll-rank { color: var(--cyber-yellow); }
.coll-item-side { flex-direction: row; align-items: center; gap: 18px; }
.coll-scores { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; white-space: nowrap; }
.coll-badges { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; max-width: 150px; }
.coll-visit { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
@media (max-width: 760px) {
  .coll-item-side { flex-wrap: wrap; gap: 10px 14px; }
  .coll-scores { flex-direction: row; gap: 10px; }
}

/* ── Small touches ── */
.btn:active, .tool-card .tool-open:active, .tool-card .tool-act:active, .chip:active { transform: scale(.975); transition-duration: .08s; }
.nav-link:not(.active)::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 1px; background: var(--neon-cyan);
  transform: scaleX(0); transform-origin: left; transition: transform .28s var(--ease); box-shadow: 0 0 8px rgba(37, 233, 255, .6);
}
.nav-link:not(.active):hover::after { transform: scaleX(1); }

/* ── Phones ── */
@media (max-width: 760px) {
  .hero-status { text-shadow: 0 1px 6px rgba(7, 8, 13, .95); }
  .lb td:nth-child(2) { min-width: 196px; }
  .m-chip small { max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 560px) {
  .wf-mission-search { flex-wrap: wrap; row-gap: 6px; }
  .wf-mission-search input { flex: 1 1 calc(100% - 52px); min-width: 0; }
  .wf-mission-search .btn { flex: 1 1 100%; min-height: 44px; }
}

/* ── Guide pages: no boxes inside boxes ── */
ul.wf-result, .wf-side-stack, .wf-side-note, .wf-swap { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; }
.wf-side-note { margin-top: 2px; }
ul.wf-result li { padding: 3px 0; }
.wf-panel .ai-score { font-size: 12.5px; }
.mc-pick .tool-logo { flex: none; }
@media (max-width: 560px) { .wf-mission-search .btn { justify-content: center; } }
@media (max-width: 1100px) { .wf-page { padding-top: 0; } }
.wf-more .post-more-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .wf-more .post-more-grid { grid-template-columns: minmax(0, 1fr); } }

/* Keyboard users get the same label; people who prefer stillness get no passes of light. */
.assistant-fab:focus-visible { width: 128px; }
.assistant-fab:focus-visible .fab-label { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tool-card::before, .guide-card::before, .news-card::before, .blog-mini::before, .blog-card::before, .coll-index-card::before, .wf-card::before, .cover-img, .assistant-fab, .nav-link::after { transition: none !important; }
  :is(.blog-mini, .blog-card, .blog-feature, .news-feature, .news-item, .latest-item):hover .cover-img { transform: none; }
}

/* ── Tool pages with fewer numbers still fill the row ── */
.tp-stats { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

/* ── Phones: tidy rows, nothing stranded, words clear of the pictures ── */
@media (max-width: 900px) {
  .tp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-stats > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .wf-scorecard > div:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .coll-item-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; width: 100%; }
  .coll-scores { grid-column: 1; justify-content: flex-start; align-items: center; text-align: left; }
  .coll-badges { grid-column: 1; justify-content: flex-start; max-width: none; }
  .coll-visit { grid-column: 2; grid-row: 1 / span 2; }
  .wf-hero { background: var(--specular), var(--glare), linear-gradient(90deg, rgba(10, 12, 20, .9), rgba(10, 12, 20, .68)), var(--art) right center / cover no-repeat, #0A0C14 !important; }
  .tp-hero { background: var(--specular), var(--glare), linear-gradient(90deg, rgba(10, 12, 20, .92), rgba(10, 12, 20, .66)), var(--art) right 35% / cover no-repeat, #0A0C14; }
}

/* Cards fade in rather than slide: nothing moves under the mouse as a page arrives.
   A quick click could start on Save and end on the card, opening the tool instead. */
@keyframes cardIn { from { opacity: 0; } to { opacity: 1; } }

/* ── Nothing jumps while a page arrives ──
   Lists are drawn a moment after first paint. Hold their space, so the footer and
   lower sections never flash mid-screen and leap away. :has() limits each rule to
   that first moment: a filter with no results must not leave a screenful of blank. */
main { min-height: 100vh; }
.feat-main #toolGrid:empty { min-height: 272px; }
#brGrid:empty:has(~ #brEmpty[hidden]) { min-height: 100vh; }
#wsSaved:empty:has(+ #wsSavedEmpty[hidden]) { min-height: 58px; }
.cmp-pickers .cbx { min-height: 52px; }
.br-count { min-height: 27px; line-height: 27px; }
/* Replaced by the glass cursor light in fx.js */
.cursor-glow { display: none; }

#rhPapers:empty { min-height: 100vh; }
.radar { max-width: 400px; }

/* ═══════════════════════════════════════════════════════════
   PICTURES ONLY WHERE THEY EARN IT
   Blog and news have pictures, and pick their own. The hero, the five tiles, the
   four featured tools and each section's header are fixed art. Everything people
   add to later (tools, guides, topics, collections) is drawn here from a colour
   and an icon, so a new one needs no image and nothing can repeat.
   ═══════════════════════════════════════════════════════════ */
.tool-ghost {
  position: absolute; top: 0; right: 0; width: 66%; height: 158px; z-index: 0; pointer-events: none; display: block; overflow: hidden; color: rgba(var(--cat, 37, 233, 255), .46);
  background-image: radial-gradient(rgba(var(--cat, 37, 233, 255), .3) 1px, transparent 1.4px); background-size: 15px 15px;
  -webkit-mask-image: radial-gradient(105% 105% at 100% 0, #000 12%, rgba(0, 0, 0, .34) 52%, transparent 78%);
          mask-image: radial-gradient(105% 105% at 100% 0, #000 12%, rgba(0, 0, 0, .34) 52%, transparent 78%);
  transition: color .35s, transform .7s var(--ease);
}
.tool-ghost svg { position: absolute; top: -12px; right: -14px; stroke-width: .62; }
:is(.tool-card, .cat-card):hover .tool-ghost { color: rgba(var(--cat, 37, 233, 255), .72); }
.tool-card > .tool-ghost { position: absolute; z-index: 0; }

/* Tool cards: colour and a mark, no picture */
.tool-card:not(.art-12):not(.art-13):not(.art-14):not(.art-15) {
  background: radial-gradient(82% 62% at 92% -6%, rgba(var(--cat, 37, 233, 255), .17), rgba(var(--cat, 37, 233, 255), 0) 72%), var(--tint);
  min-height: 246px;
}
.tool-card:not(.art-12):not(.art-13):not(.art-14):not(.art-15) .tool-head { margin-bottom: 18px; }
.tool-card .tool-cat { color: rgb(var(--cat, 37, 233, 255)); }
.tool-card:hover { border-color: rgba(var(--cat, 37, 233, 255), .46); box-shadow: 0 16px 44px rgba(0, 0, 0, .5), 0 0 28px rgba(var(--cat, 37, 233, 255), .12); }
.tool-card .tool-logo:has(.logo-img) { background: rgba(9, 11, 18, .72) !important; }

/* Topics */
.cat-card, .task-grid .cat-card {
  background: var(--specular), var(--glare), radial-gradient(70% 130% at 100% 0, rgba(var(--cat, 37, 233, 255), .16), rgba(var(--cat, 37, 233, 255), 0) 72%), var(--tint);
  background-size: auto; min-height: 92px;
}
.cat-card > .tool-ghost { width: 46%; height: 100%; }
.cat-card > .tool-ghost svg { top: -6px; right: -10px; }
.cat-card .cat-icon { color: rgb(var(--cat, 37, 233, 255)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 0 18px rgba(var(--cat, 37, 233, 255), .14); position: relative; z-index: 1; }
.cat-card .task-text { position: relative; z-index: 1; }

/* Guides: their own two colours along the top */
.guide-card { padding-top: 24px; }
.guide-card > .card-pic, .wf-card > .card-pic, .coll-bg { display: none; }
.guide-card, .wf-card {
  background: linear-gradient(90deg, var(--g1, #25E9FF), var(--g2, #A855F7)) top / 100% 2px no-repeat,
    radial-gradient(70% 70% at 100% 0, color-mix(in srgb, var(--g2, #A855F7) 15%, transparent), transparent 72%), var(--tint);
}
.wf-card-body { padding-top: 24px; }

/* Collections */
.coll-index-card {
  min-height: 218px; justify-content: space-between;
  background: linear-gradient(90deg, var(--g1, #25E9FF), var(--g2, #A855F7)) top / 100% 2px no-repeat,
    radial-gradient(80% 80% at 100% 0, color-mix(in srgb, var(--g1, #25E9FF) 16%, transparent), transparent 72%), var(--tint);
}
.coll-hero { background: var(--specular), var(--glare), radial-gradient(60% 120% at 100% 0, color-mix(in srgb, var(--g1, #25E9FF) 22%, transparent), transparent 70%), radial-gradient(50% 120% at 70% 100%, color-mix(in srgb, var(--g2, #A855F7) 14%, transparent), transparent 70%), var(--tint) !important; }

/* Guide and tool page headers */
.wf-hero { background: var(--specular), var(--glare), radial-gradient(60% 120% at 100% 0, color-mix(in srgb, var(--g1, #25E9FF) 22%, transparent), transparent 70%), radial-gradient(50% 120% at 72% 100%, color-mix(in srgb, var(--g2, #A855F7) 15%, transparent), transparent 70%), var(--tint) !important; }
.tp-hero { background: var(--specular), var(--glare), radial-gradient(55% 130% at 100% 0, rgba(var(--cat, 37, 233, 255), .2), rgba(var(--cat, 37, 233, 255), 0) 72%), var(--tint); }
.tp-hero > .tool-ghost { width: 46%; height: 100%; }
.tp-hero > *:not(.tool-ghost) { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .wf-hero { background: var(--specular), var(--glare), radial-gradient(90% 90% at 100% 0, color-mix(in srgb, var(--g1, #25E9FF) 22%, transparent), transparent 70%), var(--tint) !important; }
  .tp-hero { background: var(--specular), var(--glare), radial-gradient(90% 90% at 100% 0, rgba(var(--cat, 37, 233, 255), .2), rgba(var(--cat, 37, 233, 255), 0) 72%), var(--tint); }
}

/* Plain pages stay plain */
.doc-page::before, .nf-page::before, .mp-hero::before { display: none; }

/* Fixed art for each section */
.blog-page { --head-art: url(assets/art/cover-book.webp); }
.ws-page { --head-art: url(assets/art/cover-blocks.webp); }
.newsletter { background: var(--specular), var(--glare), var(--streak), linear-gradient(90deg, rgba(10, 12, 20, .96) 38%, rgba(10, 12, 20, .7) 66%, rgba(10, 12, 20, .35)), url(assets/art/cover-plane.webp) right center / cover no-repeat, #0A0C14; }

/* Contact: two by two, with no card left alone on a row */
.doc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px) { .doc-cards { grid-template-columns: minmax(0, 1fr); } }

/* Compare: "More comparisons" flashed above the fold, then jumped away when the result arrived */
.cmp-matchups-wrap:has(#cmpMatchups:empty) { visibility: hidden; }

/* ═══════════════════════════════════════════════════════════
   LAST PASS: tidy details, and phones that do not scroll forever
   ═══════════════════════════════════════════════════════════ */

/* One look for every dropdown and slider, in every browser */
select {
  -webkit-appearance: none; appearance: none; padding-right: 34px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23A7B0C4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px 12px !important;
}
input[type="range"] { -webkit-appearance: none; appearance: none; height: 24px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: rgba(167, 176, 196, .28); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(167, 176, 196, .28); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--neon-cyan); border: 3px solid #07080D; box-shadow: 0 0 0 1px rgba(37, 233, 255, .7), 0 0 12px rgba(37, 233, 255, .45); }
input[type="range"]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--neon-cyan); border: 3px solid #07080D; box-shadow: 0 0 0 1px rgba(37, 233, 255, .7), 0 0 12px rgba(37, 233, 255, .45); }
@media (pointer: coarse) { input[type="range"]::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; } }

/* Tool cards: the topic mark sits under the score, not behind it */
.tool-card > .tool-ghost {
  -webkit-mask-image: radial-gradient(120% 120% at 100% 34%, #000 26%, rgba(0, 0, 0, .42) 60%, transparent 84%);
          mask-image: radial-gradient(120% 120% at 100% 34%, #000 26%, rgba(0, 0, 0, .42) 60%, transparent 84%);
}
.tool-card > .tool-ghost svg { top: 50px; right: 18px; width: 70px; height: 70px; stroke-width: .8; }

/* Guide cards: a quiet action row with one small yellow button, like tool cards */
.wf-card .wf-actions { align-items: center; }
.wf-card .wf-act { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; min-height: 40px; padding: 0 14px; line-height: 1; }
.wf-card .wf-act.primary { order: 3; margin-left: auto; padding-inline: 20px; }

/* Model data note: an honest footnote, not an alarm */
.bench-warn, .bench-warn.standalone {
  color: var(--muted) !important; background: rgba(255, 255, 255, .025) !important; border: 1px solid var(--hairline) !important;
  border-left: 2px solid rgba(252, 238, 10, .55) !important; font-size: 13px; line-height: 1.55;
}

/* Benchmark key: two even rows, no card left alone */
@media (min-width: 761px) { .bench-key { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Compare: this row is not a winning cell */
.cmp-bestfor { margin-bottom: 34px; }

/* Story: source, topic and date read as one line */
.story-head .news-cat { margin-left: 0; }

/* Guides: hold the space for the chips so the page does not jump as it loads */
#wfQuick:empty { min-height: 38px; }
.wf-show-all { display: none; }

@media (max-width: 760px) {
  /* Swipe rows: one card and a peek of the next */
  #toolGrid, #guideGrid, #blogMiniGrid, #newsGrid, .cmp-matchups, .dna-grid {
    display: flex !important; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -16px; padding: 4px 16px 16px; scroll-padding-inline: 16px;
  }
  :is(#toolGrid, #guideGrid, #blogMiniGrid, #newsGrid, .cmp-matchups, .dna-grid)::-webkit-scrollbar { display: none; }
  :is(#toolGrid, #guideGrid, #blogMiniGrid, #newsGrid, .cmp-matchups, .dna-grid) > * {
    flex: 0 0 min(84%, 340px); min-width: 0; scroll-snap-align: start; opacity: 1 !important; transform: none !important; animation: none !important;
  }

  /* Homepage: topics two across, the three steps as short rows */
  .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .task-grid .cat-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; min-height: 0; }
  .how-steps { gap: 8px; }
  .how-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; padding: 14px 16px; }
  .how-n { display: block; width: auto; height: auto; grid-row: span 2; margin: 3px 0 0; }
  .how-n::after { display: none; }
  .how-steps h3 { margin: 0 0 3px; font-size: 16px; }
  .how-steps p { font-size: 14px; line-height: 1.5; }
  .hero-status { text-shadow: 0 1px 10px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .8); }

  /* Nova appears once you start scrolling */
  .assistant-fab { transition: opacity .25s, transform .25s; }
  .assistant-fab.tucked { opacity: 0; pointer-events: none; transform: translateY(8px) scale(.92); }
  .assistant-fab.tucked:focus-visible { opacity: 1; pointer-events: auto; transform: none; }

  /* Guides: short cards, chips in one swipe row, a few first */
  .wf-card .wf-reveal { display: none; }
  .wf-card .wf-pipe { flex-wrap: nowrap; gap: 6px; overflow: hidden; padding-block: 12px 2px; }
  .wf-card .wf-actions { margin-top: 6px; }
  .wf-card .wf-pipe-node { width: auto; flex: none; }
  .wf-card .wf-pipe-node small, .wf-card .wf-pipe-arrow { display: none; }
  .wf-quick, .wf-filters { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .wf-quick::-webkit-scrollbar, .wf-filters::-webkit-scrollbar { display: none; }
  .wf-quick > *, .wf-filters > * { flex: none; }
  .wf-toolbar { gap: 10px; }
  #wfGrid.collapsed .wf-card:nth-child(n+7) { display: none; }
  .wf-show-all { display: flex; margin: 16px auto 0; }
  .wf-show-all[hidden] { display: none; }

  /* Guide page: short numbers together, buttons on one line */
  .wf-scorecard { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 8px; }
  .wf-scorecard > * { grid-column: span 3; }
  .wf-scorecard > :nth-child(1) { grid-column: span 2; order: 1; }
  .wf-scorecard > :nth-child(2) { grid-column: span 2; order: 2; }
  .wf-scorecard > div:nth-child(5) { grid-column: span 2 !important; order: 3; }
  .wf-scorecard > :nth-child(3) { order: 4; }
  .wf-scorecard > :nth-child(4) { order: 5; }
  .wf-hero-actions .btn-lg { padding-inline: 16px; min-height: 46px; font-size: 14px; }

  /* Model DNA: all four numbers on one line */
  .intel-hero-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .intel-hero-stats small { font-size: 9.5px; letter-spacing: .06em; line-height: 1.4; }

  /* Compare: the two tools side by side */
  .cmp-head { position: relative; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .cmp-vs { position: absolute; left: 50%; top: 30px; transform: translateX(-50%) scale(.72); z-index: 2; margin: 0; }
  .cmp-head .cmp-side { padding: 16px 10px; min-width: 0; }
  .cmp-head .cmp-side-meta { flex-direction: column; align-items: center; gap: 4px; }
  .cmp-head .cmp-side-meta > * { white-space: nowrap; }

  /* Blog: one big story, then short rows like the news page */
  .blog-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 10px; }
  .blog-card { display: grid !important; grid-template-columns: 112px minmax(0, 1fr); height: auto; }
  .blog-card-art { aspect-ratio: auto !important; height: 100%; min-height: 104px; }
  .blog-card-art .cover-img { height: 100%; width: 100%; object-fit: cover; }
  .blog-card-body { padding: 12px 14px !important; gap: 5px; }
  .blog-card .blog-excerpt, .blog-card .blog-read-sm { display: none; }
  .blog-card-body h3 { font-size: 15px; line-height: 1.3; min-height: 0 !important; }
  .blog-card .blog-meta { font-size: 11.5px; gap: 5px; }
  .blog-card .blog-meta > :nth-last-child(-n+2) { display: none; }
}

/* Tool pages: score and price side by side */
.tp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

/* Ready-made article text, shown until the page's script draws the full design */
.static-page { max-width: 760px; margin: 32px auto 64px; line-height: 1.75; color: var(--ice); }
.static-page h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.12; margin: 10px 0 14px; }
.static-page h2 { font-size: 22px; margin: 30px 0 10px; }
.static-page p, .static-page li { color: #C7CEDD; }
.static-page a { color: var(--neon-cyan); }
.static-page table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.static-page th, .static-page td { border: 1px solid var(--hairline); padding: 8px 10px; text-align: left; }
/* Links for crawlers; people see the designed list the script draws, so nothing jumps. */
.static-list { display: none; }
.static-list a { color: var(--ice); }

/* Account button: a plain person icon, not a face (there are no accounts or photos on this site) */
.nav-user .nav-avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: rgba(26, 32, 48, .8); border: 1px solid rgba(255, 255, 255, .26); color: #D3D9E6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); transition: border-color .2s, color .2s;
}
.nav-user:hover .nav-avatar, .nav-user .drop-trigger:focus-visible .nav-avatar { border-color: var(--neon-cyan); color: var(--neon-cyan); }
/* The menu arrow turns over when the menu opens; the person icon must not */
.nav-item-drop.open .drop-trigger .nav-avatar svg { transform: none; }