/* Ensure [hidden] always wins over class-level display rules */
[hidden] { display: none !important; }

/* Always reserve the scrollbar gutter so pages don't shift sideways when
   content height changes (e.g. toggling Find a Tool modes). */
html { scrollbar-gutter: stable; overflow-y: scroll; }

/* ── Theme variables ──
   NFX Mini Brand Style Guide: NFX Blue #030330, Off Blue #DEEFF5,
   Green #52A767, Midnight #010112, Yellow #FFF68F.
   Fonts: GT Alpina (serif) → free stand-in Newsreader; GT America Mono →
   free stand-in IBM Plex Mono. Swap the --font-* vars + @font-face when the
   licensed fonts are available. */
:root {
  --bg:               #030330;   /* NFX Blue — default dark background */
  --bg-alt:           #010112;   /* NFX Midnight — alternative dark background */
  --text:             #EAF3F8;   /* NFX Off Blue (brightened for legibility) */
  --text-bright:      #ffffff;
  --text-dim:         #cfe3ee;
  --text-muted:       #9fb8ca;   /* subheadings / secondary — kept legible on navy */
  --text-faint:       #6a8296;
  --nav-bg:           rgba(3, 3, 48, 0.9);
  --nav-border:       rgba(222, 239, 245, 0.12);
  --nav-link:         #b3c8d6;
  --nav-active-bg:    rgba(255, 246, 143, 0.16);
  --nav-active-text:  #ffffff;
  --accent:           #FFF68F;   /* NFX Yellow — primary accent (fills/pills/badges/borders/glows) */
  --accent-heading:   #52A767;   /* NFX Green — section headings/labels (style-guide green) */
  --accent-text:      #52A767;   /* NFX Green — secondary/accent TEXT (was NFX Yellow) */
  --accent-2:         #E9C84A;   /* amber — secondary accent */
  --on-accent:        #030330;   /* text color on accent-filled buttons */
  --accent-fill:      #FFF68F;   /* solid brand-yellow fill (pills/badges/primary buttons) */
  --on-fill:          #030330;   /* navy text on the yellow fill */
  --accent-border:    rgba(255, 246, 143, 0.5);
  --row-border:       rgba(222, 239, 245, 0.09);
  --meta-bg:          rgba(222, 239, 245, 0.05);
  --meta-border:      rgba(222, 239, 245, 0.11);
  --section-border:   rgba(222, 239, 245, 0.1);
  --dash-border:      rgba(222, 239, 245, 0.07);
  --hero-gradient:    linear-gradient(135deg, #ffffff 0%, #FFF68F 55%, #DEEFF5 100%);
  --font-display:     'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:        'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono:        'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

body.light {
  --bg:               #DCEBF2;   /* NFX Off Blue — light background */
  --bg-alt:           #ffffff;
  --text:             #0a1030;   /* near NFX Blue */
  --text-bright:      #010112;
  --text-dim:         #263056;
  --text-muted:       #556780;
  --text-faint:       #93a9ba;
  --nav-bg:           rgba(228, 240, 246, 0.94);
  --nav-border:       rgba(3, 3, 48, 0.12);
  --nav-link:         #4a5f74;
  --nav-active-bg:    rgba(3, 3, 48, 0.08);
  --nav-active-text:  #030330;
  --accent:           #030330;   /* true NFX Blue — interactive borders / focus / accent-on-tint text */
  --accent-heading:   #2d7d4e;   /* NFX Green, darkened for contrast on the off-blue bg — mirrors dark mode's green headings */
  --accent-text:      #2d7d4e;   /* NFX Green — secondary/accent text, consistent with dark mode */
  --accent-2:         #9a7b0f;   /* brand amber, darkened to stay legible as text on the light bg */
  --on-accent:        #FFF68F;   /* (legacy) yellow-on-navy; solid fills now use --accent-fill/--on-fill */
  --accent-fill:      #FFF68F;   /* NFX Yellow fills in light too — navy text, matching dark mode's yellow pop */
  --on-fill:          #030330;   /* navy text on the yellow fill */
  --accent-border:    rgba(3, 3, 48, 0.4);
  --row-border:       rgba(3, 3, 48, 0.09);
  --meta-bg:          #ffffff;   /* solid white cards for depth on the off-blue bg */
  --meta-border:      rgba(3, 3, 48, 0.1);
  --section-border:   rgba(3, 3, 48, 0.1);
  --dash-border:      rgba(3, 3, 48, 0.07);
  --hero-gradient:    linear-gradient(135deg, #030330 0%, #2d7d4e 55%, #E9C84A 100%);
}

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

body {
  font-family: var(--font-body);
  font-weight: 300;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  /* Sticky footer: column layout + main growing keeps the footer pinned to the
     bottom of the viewport on short pages (Discover, Compare, dashboard, About…)
     instead of floating mid-screen, while long pages just push it further down. */
  display: flex;
  flex-direction: column;
  transition: background 0.25s, color 0.25s;
}
main { flex: 1 0 auto; display: flex; flex-direction: column; }

/* ── NFX brand typography ──
   Display serif (GT Alpina → Newsreader) for headers/titles,
   mono (GT America Mono → IBM Plex Mono) for labels/buttons/bylines,
   serif body everywhere else. */
h1, h2, h3, h4,
.hero h1, .detail-name, .detail-headline, .section-title, .category-title,
.subcategory-title, .compare-section-heading, .dash-title, .dash-section-title,
.dev-title, .compare-tool-name, .rv-profile-hd, .rv-modal-hd h2, .dash-fav-name,
.row-name, .find-card-name {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -0.01em;
}

nav a, .nav-auth-btn, button,
.tag, .free-badge, .emerging-badge, .dev-badge, .dash-count,
.rv-handle, .rv-date, .rv-verified, .rv-profile-label, .profile-email-label,
.dash-type-badge, .dash-tier-badge, .compare-free-tag, .compare-rv-count,
.filter-btn, .sort-btn, .view-btn, .show-more-btn, .map-nav-select,
.detail-breadcrumb, .news-date {
  font-family: var(--font-mono);
}

/* ── Header / Nav ── */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--nav-border);
  padding: 0 2rem;
  transition: background 0.25s, border-color 0.25s;
}

nav {
  display: flex;
  align-items: center;
  height: 60px;
}

/* Theme toggle — left side */
.theme-toggle {
  background: var(--nav-active-bg);
  border: 1px solid var(--accent-border);
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 8px;
  color: var(--accent-text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
  flex-shrink: 0;
  margin-right: auto;
}

.theme-toggle:hover {
  color: var(--accent-text);
  background: var(--nav-active-bg);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 0.25rem;
  align-items: center;
}

nav ul li a {
  text-decoration: none;
  color: var(--nav-link);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}

nav ul li a:hover,
nav ul li a.active {
  color: var(--nav-active-text);
  background: var(--nav-active-bg);
}

/* ── Pages ── */
.page {
  display: none;
}
.page.active {
  display: block;
}

/* ── Hero ── */
/* No forced 100vh — the active homepage fills exactly the space above the footer
   (main is a flex column) so, when there's room, the whole page + footer fit in
   one viewport with no scroll. */
#page-home {
  display: none;
  align-items: center;
  justify-content: center;
}
#page-home.active {
  display: flex;
  flex: 1;
}

.hero {
  text-align: center;
  padding: 6rem 2rem 2rem;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  background: var(--hero-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto;
}

/* ── Placeholder pages ── */
.placeholder {
  min-height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1rem;
}
.placeholder.active {
  display: flex;
}

/* ── Hidden by filter ── */
.product-row.filtered-out         { display: none; }
.subcategory-section.filtered-out { display: none; }
.top-category-section.filtered-out { display: none; }
.col-wrapper.filtered-out          { display: none; }

/* ── Control bar ── */
.map-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 4.5rem 2rem 0;
  flex-wrap: wrap;
}

.expand-all-btn {
  background: none;
  border: 1px solid var(--accent-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--accent-heading);
  padding: 0.35rem 0.85rem;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.expand-all-btn:hover {
  background: var(--nav-active-bg);
}

.map-nav-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--meta-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  outline: none;
  padding: 0.35rem 1.8rem 0.35rem 0.75rem;
  transition: border-color 0.15s;
  white-space: nowrap;
  max-width: 200px;
}

body.light .map-nav-select {
  border-color: var(--meta-border);
  color: var(--text-primary);
}

.map-nav-select:focus { border-color: var(--accent); }

.map-nav-select option,
.map-nav-select optgroup { background: var(--body-bg); color: var(--text-primary); }


.search-input {
  background: var(--meta-bg);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  padding: 0.35rem 0.75rem;
  font-size: 0.78rem;
  color: var(--text);
  outline: none;
  width: 180px;
  transition: border-color 0.2s;
}

body.light .search-input {
  border-color: var(--meta-border);
}

.search-input::placeholder { color: var(--text-dim); }
body.light .search-input::placeholder { color: var(--text-muted); }
.search-input:focus         { border-color: var(--accent); }

.sort-btns {
  display: flex;
  gap: 0.25rem;
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 7px;
  padding: 0.2rem;
}

.sort-btn {
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 0.25rem 0.65rem;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.sort-btn:hover { color: var(--text); background: var(--nav-active-bg); }

.sort-btn.active {
  background: var(--nav-active-bg);
  color: var(--accent-heading);
}

.view-btns {
  display: flex;
  gap: 0.25rem;
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 7px;
  padding: 0.2rem;
}

.view-btn {
  background: none;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  padding: 0.25rem 0.65rem;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.view-btn:hover { color: var(--text); background: var(--nav-active-bg); }

.view-btn.active {
  background: var(--nav-active-bg);
  color: var(--accent-text);
}

/* ── All-products flat grid ── */
.all-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 0.5rem;
  padding: 1rem 2rem 4rem;
}

/* ── Products page: category drill-down ── */
/* Picker: larger category boxes listing clickable subcategory subheadings. */
/* Masonry-style packing: each box fits its content height and shorter boxes
   (e.g. General Assistant, 1 subcategory) let the boxes below them rise up. */
.cat-pick-grid {
  column-count: 3;
  column-gap: 1rem;
  padding: 1.5rem 2rem 4rem;
}
@media (max-width: 760px) { .cat-pick-grid { column-count: 2; } }
@media (max-width: 500px) { .cat-pick-grid { column-count: 1; } }
.cat-pick {
  display: flex; flex-direction: column;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 1rem;
  background: var(--card);
  border: 1px solid var(--row-border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.cat-pick:hover { border-color: var(--accent); }
.cat-pick-head {
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 1.3rem 1.5rem 1rem;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; color: var(--text);
  border-bottom: 1px solid var(--row-border);
  transition: background 0.15s;
}
.cat-pick-head:hover { background: var(--nav-active-bg); }
.cat-pick-name { font-family: var(--font-display); font-weight: 300; font-size: 1.7rem; color: var(--accent-heading); letter-spacing: -0.01em; }
.cat-pick-count { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.cat-pick-subs { display: flex; flex-direction: column; padding: 0.4rem; gap: 0.1rem; }
.cat-pick-sub {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 0.9rem; color: var(--text);
  padding: 0.5rem 0.75rem; border-radius: 7px; transition: background 0.12s, color 0.12s;
}
.cat-pick-sub:hover { background: var(--nav-active-bg); color: var(--text-bright); }
.cps-count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }

.browse-head { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 2rem 0.25rem; flex-wrap: wrap; }
.browse-head .category-title { margin: 0; }
.browse-count { font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-muted); font-weight: 400; }
.browse-back {
  background: none; border: 1px solid var(--meta-border); border-radius: 7px;
  color: var(--text-muted); cursor: pointer; font-family: var(--font-mono);
  font-size: 0.82rem; padding: 0.4rem 0.85rem; transition: border-color 0.15s, color 0.15s;
}
.browse-back:hover { border-color: var(--accent); color: var(--text-bright); }

/* Category view: collapsible subcategory sections. */
.cat-body { padding: 0.5rem 2rem 4rem; }
/* Expand-all view: one section per category */
.cat-section { margin-bottom: 1.5rem; }
.cat-section .category-title { padding: 0.5rem 2rem 0; }
.cat-section .cat-body { padding-bottom: 1.5rem; }
.cat-jump { cursor: pointer; transition: color 0.15s; }
.cat-jump:hover { color: var(--accent-heading); }
.subcat-block { margin-top: 1rem; }
.subcat-toggle {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 0.5rem 0; color: var(--text-bright);
  font-family: var(--font-display); font-weight: 300; font-size: 1.15rem; letter-spacing: -0.01em;
  border-bottom: 1px solid var(--row-border);
}
.subcat-chev { display: inline-block; transition: transform 0.15s; color: var(--text-muted); font-size: 0.85rem; }
.subcat-block.collapsed .subcat-chev { transform: rotate(-90deg); }
.subcat-name { flex: 1; }
.subcat-count { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.subcat-block .prod-grid { margin-top: 0.85rem; }
.subcat-block.collapsed .prod-grid { display: none; }

/* Larger product cards (favicon + name + one-line description). */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.7rem;
  padding: 0.5rem 0 0;
}
.browse-head + .prod-grid { padding: 1rem 2rem 4rem; }
.prod-card {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.85rem 1rem;
  background: var(--card);
  border: 1px solid var(--row-border);
  border-radius: 11px;
  cursor: pointer; text-align: left;
  font-family: inherit; color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  min-width: 0;
}
.prod-card:hover { border-color: var(--accent); background: var(--nav-active-bg); transform: translateY(-2px); }
.pc-logo { width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto; object-fit: contain; }
.pc-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.pc-top { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.pc-name { font-family: var(--font-display); font-weight: 300; font-size: 1.05rem; color: var(--text-bright); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-free { font-family: var(--font-mono); font-size: 0.6rem; color: var(--accent-text); border: 1px solid var(--meta-border); border-radius: 4px; padding: 0.05rem 0.3rem; flex: 0 0 auto; }
.pc-desc { font-size: 0.8rem; color: var(--text-muted); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* NFX portfolio-company badge — visual-only, non-clickable. */
.nfx-badge {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  padding: 2px 8px; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.02em;
  border-radius: 999px; white-space: nowrap; vertical-align: middle;
  background: #0a0b23; color: #fff; border: 1px solid rgba(255,255,255,0.16);
  cursor: default; pointer-events: none; user-select: none;
}
.nfx-badge::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #c6f24e; }
.detail-name .nfx-badge { font-size: 0.7rem; vertical-align: middle; }

.all-product-card {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.65rem;
  background: var(--card);
  border: 1px solid var(--row-border);
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
  min-width: 0;
}

.all-product-card:hover {
  border-color: var(--accent);
  background: var(--nav-active-bg);
}

.apc-name {
  font-size: 0.8rem;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-btns {
  display: flex;
  gap: 0.4rem;
  margin-left: auto;
}

.filter-btn {
  background: none;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-dim);
  padding: 0.35rem 0.75rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

body.light .filter-btn {
  color: var(--text-muted);
  border-color: var(--row-border);
}

.filter-btn:hover { color: var(--text); border-color: var(--accent-border); }

.filter-count {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--accent-text, #52A767);
  white-space: nowrap;
  align-self: center;
}

.filter-btn[data-stage="Ideate"].active { color: #a78bfa; border-color: rgba(167,139,250,0.4); background: rgba(167,139,250,0.08); }
.filter-btn[data-stage="Plan"].active   { color: #38bdf8; border-color: rgba(56,189,248,0.4);  background: rgba(56,189,248,0.08); }
.filter-btn[data-stage="Build"].active  { color: #34d399; border-color: rgba(52,211,153,0.4);  background: rgba(52,211,153,0.08); }
.filter-btn[data-stage="Scale"].active    { color: #fb923c; border-color: rgba(251,146,60,0.4);  background: rgba(251,146,60,0.08); }
.filter-btn[data-stage="Emerging"].active { color: #38bdf8; border-color: rgba(56,189,248,0.4);  background: rgba(56,189,248,0.08); }

body.light .filter-btn[data-stage="Ideate"].active { color: #6d28d9; border-color: rgba(109,40,217,0.35); background: rgba(109,40,217,0.08); }
body.light .filter-btn[data-stage="Plan"].active   { color: #0284c7; border-color: rgba(2,132,199,0.35);  background: rgba(2,132,199,0.08); }
body.light .filter-btn[data-stage="Build"].active  { color: #059669; border-color: rgba(5,150,105,0.35);  background: rgba(5,150,105,0.08); }
body.light .filter-btn[data-stage="Scale"].active    { color: #c2410c; border-color: rgba(194,65,12,0.35);  background: rgba(194,65,12,0.08); }
body.light .filter-btn[data-stage="Emerging"].active { color: #0284c7; border-color: rgba(2,132,199,0.35);  background: rgba(2,132,199,0.08); }

/* NFX portfolio filter — set apart from the lifecycle stages, uses the NFX accent. */
.filter-nfx { margin-left: 0.4rem; font-weight: 700; letter-spacing: 0.04em; }
.filter-nfx::before {
  content: ""; display: inline-block; width: 1px; height: 0.9rem;
  background: var(--row-border, rgba(255,255,255,0.15));
  margin: 0 0.55rem 0 -0.15rem; vertical-align: middle;
}
.filter-nfx.active,
body.light .filter-nfx.active {
  color: var(--on-fill);
  background: var(--accent-fill);
  border-color: var(--accent);
}

/* ── Product Map ── */
#product-map {
  width: 100%;
  padding: 1.25rem 2rem 6rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.map-row {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
.map-row-4 { grid-template-columns: repeat(4, 1fr); }
.map-row-3 { grid-template-columns: repeat(3, 1fr); }
.map-row.filtered-out { display: none; }

.top-category-section {
  min-width: 0;
}

.category-title {
  font-size: 0.82rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-heading);
  border-bottom: 2px solid var(--accent-border);
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

/* Category-switch dropdown in the category view header */
.cat-switch { display: inline-flex; align-items: center; gap: 0.6rem; }
.cat-switch-select {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-heading);
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--accent-border);
  padding: 0 1.5rem 0.5rem 0.1rem;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2352A767' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.15rem center;
  background-size: 0.75rem;
}
.cat-switch-select:hover { color: var(--text-bright); }
.cat-switch-select option { color: var(--text); background: var(--bg); text-transform: none; letter-spacing: normal; }

.subcategory-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.subcategory-section {
  min-width: 0;
}

/* Two-column grid inside each expanded subcategory */
.product-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 0.4rem;
}

.subcategory-title {
  font-size: 0.67rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--row-border);
  padding-bottom: 0.3rem;
  margin-bottom: 0.4rem;
}

/* ── Row badges (Free / Emerging) ── */
.free-badge {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #34d399;
  border: 1px solid rgba(52,211,153,0.35);
  background: rgba(52,211,153,0.08);
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.emerging-badge {
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #38bdf8;
  border: 1px solid rgba(56,189,248,0.35);
  background: rgba(56,189,248,0.08);
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.trend-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

.trend-up {
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.35);
  background: rgba(52, 211, 153, 0.08);
}

.trend-down {
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(248, 113, 113, 0.08);
}

/* ── Mobile ── */
@media (max-width: 860px) {
  #product-map {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
    padding: 1rem 1rem 6rem;
  }
}
@media (max-width: 500px) {
  #product-map {
    grid-template-columns: 1fr;
  }
}

/* ── Product rows ── */
.product-list {
  display: flex;
  flex-direction: column;
}

.product-row {
  border-bottom: 1px solid var(--row-border);
}

.product-row-trigger {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  padding: 0.65rem 0;
  text-align: left;
  color: var(--text-dim);
  transition: color 0.15s;
}

.product-row-trigger:hover {
  color: var(--text);
}

.row-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
}

.row-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.row-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-row-trigger:hover .row-name {
  color: var(--text-bright);
}

.row-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

.row-chevron {
  font-size: 1rem;
  color: var(--text-muted);
  margin-left: auto;
  flex-shrink: 0;
}

.row-sub {
  font-size: 0.72rem;
  color: #9e9eb8;
}

body.light .row-sub {
  color: var(--text-muted);
}

.row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.1rem;
}

/* ── Show More ── */
.show-more-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--text-dim);
  padding: 0.4rem 0;
  transition: color 0.15s;
}
.show-more-btn:hover {
  color: var(--accent-text);
}

/* ── Tags ── */
.tag {
  font-size: 0.68rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid;
}

.tag-ideate  { color: #a78bfa; border-color: rgba(167,139,250,0.35); background: rgba(167,139,250,0.1); }
.tag-plan    { color: #38bdf8; border-color: rgba(56,189,248,0.35);  background: rgba(56,189,248,0.1); }
.tag-build   { color: #34d399; border-color: rgba(52,211,153,0.35);  background: rgba(52,211,153,0.1); }
.tag-scale   { color: #fb923c; border-color: rgba(251,146,60,0.35);  background: rgba(251,146,60,0.1); }
.tag-emerging{ color: #38bdf8; border-color: rgba(56,189,248,0.35);  background: rgba(56,189,248,0.1); }

body.light .tag-ideate  { color: #6d28d9; border-color: rgba(109,40,217,0.3); background: rgba(109,40,217,0.08); }
body.light .tag-plan    { color: #0284c7; border-color: rgba(2,132,199,0.3);  background: rgba(2,132,199,0.08); }
body.light .tag-build   { color: #059669; border-color: rgba(5,150,105,0.3);  background: rgba(5,150,105,0.08); }
body.light .tag-scale   { color: #c2410c; border-color: rgba(194,65,12,0.3);  background: rgba(194,65,12,0.08); }
body.light .tag-emerging{ color: #0284c7; border-color: rgba(2,132,199,0.3);  background: rgba(2,132,199,0.08); }

/* ── Emerging dot ── */
.emerging-dot {
  font-size: 0.6rem;
  color: #38bdf8;
  line-height: 1;
}

/* ── Product detail page ── */
#page-product-detail {
  padding: 5rem 3rem 6rem;
  max-width: 800px;
  margin: 0 auto;
}

.back-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.82rem;
  padding: 0;
  margin-bottom: 2rem;
  transition: color 0.15s;
}
.back-btn:hover {
  color: var(--accent-text);
}

.detail-hero {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.detail-hero-info {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.detail-breadcrumb {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.detail-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.detail-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
  flex-shrink: 0;
}

.detail-name {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--text-bright);
}

/* Title + save-heart on one row; the product name is a link to the tool's site. */
.detail-name-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.detail-name-link { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
.detail-name-link:hover .detail-name { text-decoration: underline; text-underline-offset: 3px; }
/* Visit-site link and the category › subcategory breadcrumb share one row. */
.detail-visit-row { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }

.detail-visit {
  font-size: 0.85rem;
  color: var(--accent-text);
  text-decoration: none;
}
.detail-visit:hover {
  text-decoration: underline;
}

.detail-meta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.75rem;
  padding: 1.25rem;
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 10px;
  transition: background 0.25s, border-color 0.25s;
}

.meta-item {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  font-size: 0.85rem;
}

.meta-label {
  color: var(--text-muted);
  min-width: 140px;
  flex-shrink: 0;
}

.meta-value {
  color: var(--text-dim);
}

.tags-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.detail-description {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.detail-sections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.detail-section {
  border: 1px solid var(--section-border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  transition: border-color 0.25s;
}

.placeholder-section {
  border-style: dashed;
  border-color: var(--dash-border);
}

.section-title {
  font-size: 0.8rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-heading);
  margin-bottom: 0.6rem;
}

.placeholder-text {
  font-size: 0.82rem;
  color: var(--text-faint);
  font-style: italic;
}

/* ── Detail headline (1-sentence summary above sections) ── */
.detail-headline {
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 1.75rem;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--accent-border);
  background: var(--meta-bg);
  border-radius: 0 8px 8px 0;
}

/* ── Detail page content ── */
.detail-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.detail-bullets li {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.6;
  padding-left: 1rem;
  position: relative;
}

.detail-bullets li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

.pricing-list li {
  font-size: 0.88rem;
  line-height: 1.6;
}

.detail-ext-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  color: var(--accent-text);
  text-decoration: none;
}
.detail-ext-link:hover { text-decoration: underline; }

.free-reason-line {
  font-size: 0.78rem;
  margin-top: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  line-height: 1.5;
}
.free-reason-line.free-yes {
  color: #34d399;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.2);
}
.free-reason-line.free-no {
  color: var(--text-muted);
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
}
/* Subtle "pricing last updated" stamp under the Pricing section / in Compare. */
.pricing-updated-note,
.compare-pricing-updated {
  font-size: 0.72rem;
  color: var(--text-muted);
  opacity: 0.8;
  margin-top: 0.55rem;
  font-style: italic;
  letter-spacing: 0.01em;
}
.compare-pricing-updated { margin-top: 0.5rem; }

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.news-list li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.news-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.news-list a {
  font-size: 0.85rem;
  color: #3b82f6;
  text-decoration: underline;
  line-height: 1.4;
}
.news-list a:hover {
  color: #60a5fa;
  text-decoration: underline;
}
.news-list span {
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* ── AI Agent panel ── */
#agent-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  transition: transform 0.15s, box-shadow 0.15s;
}
#agent-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}

#agent-panel {
  position: fixed;
  bottom: 5.5rem;
  right: 1.5rem;
  z-index: 199;
  width: 360px;
  max-height: 520px;
  background: var(--bg);
  border: 1px solid var(--nav-border);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 0.2s, transform 0.2s;
}
#agent-panel.agent-panel-closed {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

.agent-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem 0.6rem 0.75rem;
  border-bottom: 1px solid var(--nav-border);
  flex-shrink: 0;
}

.agent-tabs {
  display: flex;
  gap: 0.25rem;
}
.agent-tab {
  background: none;
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.agent-tab:hover {
  background: var(--nav-active-bg);
  color: var(--text);
}
.agent-tab.active {
  background: var(--nav-active-bg);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

#agent-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  line-height: 1;
}
#agent-close:hover { color: var(--text); }

#agent-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 80px;
}

.agent-msg {
  font-size: 0.82rem;
  line-height: 1.55;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 92%;
}
.agent-msg-user {
  background: var(--accent-fill);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 2px;
}
.agent-msg-assistant {
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 2px;
}

.agent-input-row {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid var(--nav-border);
  flex-shrink: 0;
}

#agent-input {
  flex: 1;
  resize: none;
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
  padding: 0.5rem 0.65rem;
  outline: none;
  transition: border-color 0.15s;
  line-height: 1.4;
}
#agent-input:focus { border-color: var(--accent-border); }
#agent-input::placeholder { color: var(--text-faint); }

#agent-send {
  background: var(--accent-fill);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  padding: 0.5rem 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s;
  flex-shrink: 0;
}
#agent-send:hover { opacity: 0.85; }
#agent-send:disabled { opacity: 0.4; cursor: not-allowed; }

.agent-pw-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.agent-pw-box {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem;
  width: 100%;
  max-width: 240px;
}
.agent-pw-box p {
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
}
.agent-pw-box input {
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.85rem;
  padding: 0.5rem 0.65rem;
  outline: none;
  font-family: inherit;
}
.agent-pw-box input:focus { border-color: var(--accent-border); }
.agent-pw-box button {
  background: var(--accent-fill);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.85rem;
  padding: 0.5rem;
  cursor: pointer;
  transition: opacity 0.15s;
}
.agent-pw-box button:hover { opacity: 0.85; }

@media (max-width: 420px) {
  #agent-panel { width: calc(100vw - 2rem); right: 1rem; }
}

/* ══════════════════════════════════════════════════════
   Compare Tool
   ══════════════════════════════════════════════════════ */

/* ── Page container ── */
#compare-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 4.5rem 2.5rem 6rem;
}

/* ── Header (centered hero, like Find a Tool) ── */
.compare-header {
  text-align: center;
  margin: 1rem auto 2rem;
}

.compare-title {
  font-size: 2.1rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--accent-heading);
  margin-bottom: 0.5rem;
}

.compare-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
}

/* Centered selection column */
.compare-select {
  max-width: 720px;
  margin: 0 auto;
}
.compare-select .compare-task-label { text-align: center; }
.compare-select .compare-task-section { margin-bottom: 1rem; }

/* Search + Compare button share one row so the similar-tools dropdown
   drops into empty space below instead of covering the chips/button. */
.compare-action-row {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
}

/* ── Search wrap ── */
.compare-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.compare-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 12px;
  padding: 0.95rem 1.25rem;
  font-size: 1.05rem;
  color: var(--text);
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}

.compare-search-input:focus {
  border-color: var(--accent-border);
}

.compare-search-input::placeholder {
  color: var(--text-muted);
}

.compare-search-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Dropdown ── (narrow + left-anchored so it drops into the empty space
   below the search rather than covering the chips + Compare button) */
.compare-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: auto;
  width: min(400px, 100%);
  background: var(--bg);
  border: 1px solid var(--meta-border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  z-index: 50;
  overflow: hidden;
}

body.light .compare-dropdown {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.compare-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  cursor: pointer;
  border-bottom: 1px solid var(--row-border);
  transition: background 0.12s;
}

.compare-dropdown-item:last-child {
  border-bottom: none;
}

.compare-dropdown-item:hover {
  background: var(--nav-active-bg);
}

.compare-dropdown-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

.compare-dropdown-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}

.compare-dropdown-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: auto;
}

.compare-dropdown-empty {
  padding: 0.75rem 0.9rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.compare-dropdown-hint {
  padding: 0.45rem 0.9rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  border-bottom: 1px solid var(--row-border);
  letter-spacing: 0.01em;
}

/* ── Chips ── */
.compare-chips-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 0;
  margin: 0;
  flex-wrap: wrap;
}
.compare-chips-row:has(.compare-chip) { margin: 0 0 1rem; }

.compare-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  flex: 0 1 auto;
}

.compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--meta-bg);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
  padding: 0.3rem 0.5rem 0.3rem 0.6rem;
  font-size: 0.82rem;
  color: var(--text-dim);
  transition: border-color 0.15s;
}

.compare-chip-logo {
  width: 16px;
  height: 16px;
  object-fit: contain;
  border-radius: 3px;
  flex-shrink: 0;
}

.compare-chip-name {
  font-weight: 500;
  color: var(--text);
}

.compare-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.1rem;
  border-radius: 50%;
  transition: color 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.compare-chip-remove:hover {
  color: var(--text);
}

.compare-clear-btn {
  background: none;
  border: 1px solid var(--row-border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}

.compare-clear-btn:hover {
  color: var(--text);
  border-color: var(--accent-border);
}

/* ── Options row ── */
.compare-options-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* ── Follow-up question ── */
.compare-followup-section {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--meta-bg);
  border: 1px solid var(--accent-border);
  border-radius: 12px;
}

/* ── Go deeper prompt ── */
.compare-deeper-prompt {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.compare-deeper-input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  background: var(--meta-bg);
  border: 1px solid var(--section-border);
  border-radius: 10px;
  color: var(--text);
  font-size: 0.875rem;
  font-family: inherit;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.compare-deeper-input:focus { border-color: var(--accent-border); }
.compare-deeper-input::placeholder { color: var(--text-faint); }

.compare-deeper-label {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

/* ── Go deeper thread (accumulated Q&A) ── */
.compare-deeper-thread {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.compare-deeper-thread:not(:empty) {
  margin-bottom: 1.25rem;
}

.compare-deeper-item {
  border-left: 3px solid var(--accent-border);
  padding-left: 1rem;
}

.compare-deeper-q {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--accent-text);
}

/* ── Go deeper header + Hide/Show toggle ── */
.compare-deeper-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.compare-deeper-header .compare-deeper-label {
  margin: 0;
}

.compare-deeper-toggle {
  flex-shrink: 0;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--meta-border);
  transition: color 0.15s, border-color 0.15s;
}
.compare-deeper-toggle:hover {
  color: var(--text);
  border-color: var(--accent-border);
}
.compare-deeper-toggle.is-collapsed {
  color: var(--accent-text);
  border-color: var(--accent-border);
  background: rgba(255, 246, 143, 0.1);
}

/* ── Suggested follow-up questions ── */
.compare-deeper-suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.5rem;
}

.compare-suggestion {
  text-align: left;
  padding: 0.5rem 0.8rem;
  border-radius: 9px;
  font-size: 0.78rem;
  line-height: 1.35;
  cursor: pointer;
  background: var(--meta-bg);
  color: var(--text-dim);
  border: 1px dashed var(--meta-border);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.compare-suggestion:hover {
  color: var(--text);
  border-color: var(--accent-border);
}
.compare-suggestion.is-active {
  color: var(--accent-text);
  border-style: solid;
  border-color: var(--accent-border);
  background: rgba(255, 246, 143, 0.1);
}

/* ── Transient notice popup ── */
.compare-notice {
  position: fixed;
  left: 50%;
  top: 1.5rem;
  transform: translateX(-50%) translateY(-6px);
  background: var(--bg-alt);
  color: var(--text-bright);
  padding: 0.85rem 1.3rem;
  border-radius: 11px;
  border: 1.5px solid var(--accent);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.45;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 5px rgba(255, 246, 143, 0.14);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 9999;
  pointer-events: none;
}
.compare-notice.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.compare-deeper-btns {
  display: flex;
  gap: 0.5rem;
}

.compare-deeper-yes,
.compare-deeper-no {
  padding: 0.4rem 1.1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}

.compare-deeper-yes {
  background: var(--accent-fill);
  color: #fff;
}

.compare-deeper-no {
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  color: var(--text-muted);
}

.compare-deeper-yes:hover { opacity: 0.85; }
.compare-deeper-no:hover  { color: var(--text); }

.compare-followup-label {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.compare-followup-row {
  display: flex;
  gap: 0.6rem;
}

.compare-followup-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--meta-border);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.compare-followup-input:focus {
  border-color: var(--accent-border);
}

.compare-followup-input::placeholder {
  color: var(--text-muted);
}

.compare-followup-btn {
  padding: 0.55rem 1.1rem;
  background: var(--accent-fill);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.compare-followup-btn:hover { opacity: 0.85; }
.compare-followup-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.compare-followup-status {
  margin-top: 0.65rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  min-height: 1.2em;
}

.compare-followup-status.compare-followup-loading { color: var(--accent-text); }
.compare-followup-status.compare-followup-error   { color: #e05555; }

.compare-followup-output {
  margin-top: 0.85rem;
}

.compare-followup-answer {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text);
  border-left: 3px solid var(--accent-border);
  padding-left: 1rem;
}

.compare-model-toggle {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
  align-self: flex-start;
}

.compare-model-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-dim);
  padding: 0.4rem 0.8rem;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

body.light .compare-model-btn {
  border-color: var(--row-border);
  color: var(--text-muted);
}

.compare-model-btn:hover {
  color: var(--text);
  border-color: var(--accent-border);
}

.compare-model-btn.active {
  background: var(--nav-active-bg);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

/* ── Hover tooltips ── */
.has-tooltip {
  position: relative;
}

.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid var(--meta-border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-dim);
  white-space: normal;
  width: 220px;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 100;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.has-tooltip:hover::after {
  opacity: 1;
}

#btn-haiku::after {
  left: 0;
  transform: none;
}

.compare-depth-toggle {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
  align-self: flex-start;
}

.compare-depth-btn {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-dim);
  padding: 0.4rem 0.8rem;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

body.light .compare-depth-btn {
  border-color: var(--row-border);
  color: var(--text-muted);
}

.compare-depth-btn:hover {
  color: var(--text);
  border-color: var(--accent-border);
}

.compare-depth-btn.active {
  background: var(--nav-active-bg);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

/* ── Run button ── */
.compare-run-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--accent-fill);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1.7rem;
  cursor: pointer;
  margin-bottom: 0;
  flex-shrink: 0;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.1s;
}

.compare-run-btn:hover:not(:disabled) {
  opacity: 0.88;
  transform: translateY(-1px);
}

.compare-run-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

/* Spinner SVG */
.compare-spinner-svg {
  animation: compare-spin 0.9s linear infinite;
  flex-shrink: 0;
}

@keyframes compare-spin {
  to { transform: rotate(360deg); }
}

/* ── Results area ── */
.compare-results {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ── Static table ── */
.compare-section-heading {
  font-size: 0.8rem;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-heading);
  margin-bottom: 0.75rem;
}

.compare-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  font-size: 0.85rem;
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 10px;
  overflow: hidden;
}

.compare-table thead tr {
  border-bottom: 1px solid var(--meta-border);
}

.compare-th-label {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.78rem;
  width: 140px;
  min-width: 120px;
  background: var(--meta-bg);
}

.compare-th-product {
  padding: 0.75rem 1rem;
  text-align: left;
  border-left: 1px solid var(--row-border);
}

.compare-th-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.compare-th-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 4px;
  flex-shrink: 0;
}

.compare-th-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-bright);
}

.compare-td-label {
  padding: 0.6rem 1rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  border-top: 1px solid var(--row-border);
  vertical-align: top;
  white-space: nowrap;
}

.compare-td {
  padding: 0.6rem 1rem;
  font-size: 0.84rem;
  color: var(--text-dim);
  border-top: 1px solid var(--row-border);
  border-left: 1px solid var(--row-border);
  vertical-align: top;
  line-height: 1.6;
}

.compare-yes {
  color: #34d399;
  font-weight: 600;
}

.compare-no {
  color: var(--text-muted);
}

.compare-use-case {
  display: block;
  font-size: 0.84rem;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ── Tool overview cards ── */
.compare-tool-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  /* Each card keeps its own height so expanding one card's pricing doesn't
     stretch its row-mates (and shove their free/pricing row down). */
  align-items: start;
}

.compare-tool-card {
  border: 1px solid var(--meta-border);
  background: var(--meta-bg);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.compare-tool-hd {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.compare-tool-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  border-radius: 5px;
  flex-shrink: 0;
}

.compare-tool-name {
  font-size: 0.98rem;
  font-weight: 300;
  color: var(--text-bright);
}
a.compare-tool-link { text-decoration: none; cursor: pointer; transition: color 0.15s; }
a.compare-tool-link:hover { color: var(--accent-heading); text-decoration: underline; }
.compare-tool-ext { font-size: 0.72em; color: var(--text-dim); vertical-align: 1px; }
a.compare-tool-link:hover .compare-tool-ext { color: var(--accent-heading); }

.compare-tool-desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-dim);
  margin: 0;
}

.compare-tool-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: auto;
}

.compare-free-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  user-select: none;
  outline: none;
}

.compare-free-tag.is-free {
  color: #34d399;
  background: rgba(52, 211, 153, 0.12);
  border-color: rgba(52, 211, 153, 0.3);
}

.compare-free-tag.is-paid {
  color: var(--text-muted);
  border-color: var(--meta-border);
}

.compare-free-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: 250px;
  max-width: 72vw;
  background: var(--bg);
  color: var(--text-dim);
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.5;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  z-index: 50;
}

.compare-free-tag:hover .compare-free-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.compare-pricing-toggle {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--meta-border);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.compare-pricing-toggle::after { content: ' ▸'; }

.compare-pricing-toggle:hover {
  color: var(--text);
  border-color: var(--accent-border);
}

.compare-pricing-toggle.is-on {
  color: var(--accent-text);
  border-color: var(--accent-border);
  background: rgba(255, 246, 143, 0.1);
}

.compare-pricing-toggle.is-on::after { content: ' ▾'; }

.compare-pricing-detail {
  border-top: 1px solid var(--row-border);
  padding-top: 0.6rem;
}

.compare-pricing-list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.compare-pricing-list li {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* ── AI section ── */
.compare-ai-section {
  border: 1px solid var(--section-border);
  border-radius: 10px;
  padding: 1.5rem;
  transition: border-color 0.25s;
}

.compare-ai-status {
  font-size: 0.88rem;
  color: var(--text-muted);
  min-height: 1.5rem;
}

.compare-ai-status.compare-ai-loading {
  color: var(--accent-text);
}

.compare-ai-status.compare-ai-error {
  color: #f87171;
}

/* ── AI markdown output ── */
.compare-ai-output {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.7;
}

/* ── AI section grid ── */
.compare-ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 1rem;
  align-items: start;
}

.compare-ai-card {
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 10px;
  padding: 1.1rem 1.3rem 1.2rem;
}

.compare-ai-output h1,
.compare-ai-output h2,
.compare-ai-output h3 {
  color: var(--text-bright);
  letter-spacing: -0.01em;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.compare-ai-output h2 {
  font-size: 0.95rem;
  font-weight: 300;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--section-border);
}

.compare-ai-output h3 {
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--accent-text);
}

.compare-ai-card h2,
.compare-ai-card h1,
.compare-ai-card h3 {
  margin-top: 0;
}

.compare-ai-output p {
  margin-bottom: 0.6rem;
}

.compare-ai-output ul {
  padding-left: 1.2rem;
  margin-bottom: 0.6rem;
}

.compare-ai-output li {
  margin-bottom: 0.25rem;
  line-height: 1.6;
}

.compare-ai-output strong {
  color: var(--text);
  font-weight: 600;
}

.compare-ai-output em {
  color: var(--text-muted);
  font-style: italic;
}

.compare-ai-output code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  color: var(--text);
}

/* ── Password overlay ── */
.compare-pw-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}

body.light .compare-pw-overlay {
  background: rgba(245, 244, 255, 0.7);
}

.compare-pw-box {
  background: var(--bg);
  border: 1px solid var(--meta-border);
  border-radius: 12px;
  padding: 1.75rem;
  width: 100%;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

.compare-pw-box p {
  font-size: 0.85rem;
  color: var(--text-dim);
  text-align: center;
}

.compare-pw-input {
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.88rem;
  padding: 0.55rem 0.75rem;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}

.compare-pw-input:focus {
  border-color: var(--accent-border);
}

.compare-pw-submit {
  background: var(--accent-fill);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.55rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

.compare-pw-submit:hover {
  opacity: 0.85;
}

/* ── Compare page responsive ── */
@media (max-width: 600px) {
  #compare-container {
    padding: 5rem 1rem 4rem;
  }

  .compare-options-row {
    flex-direction: column;
  }

  .compare-model-toggle {
    align-self: stretch;
  }

  .compare-model-btn {
    flex: 1;
    text-align: center;
  }
}

/* ── TASK-FIRST SECTION (delete this block to revert) ── */
.compare-task-section {
  margin-bottom: 1.5rem;
}

.compare-task-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin: 0 0 0.9rem 0;
}

.compare-task-groups {
  display: block;
}

.compare-task-select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--meta-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  border: 1px solid var(--row-border);
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  outline: none;
  padding: 0.55rem 2.2rem 0.55rem 0.9rem;
  width: 100%;
  max-width: 420px;
  transition: border-color 0.15s;
}

.compare-task-select:focus {
  border-color: var(--accent-border);
}

.compare-task-select option,
.compare-task-select optgroup {
  background: var(--body-bg);
  color: var(--text-primary);
}

/* Product cards for selected task */
.compare-task-products {
  margin-bottom: 1.5rem;
  padding: 1rem 1.1rem;
  background: var(--meta-bg);
  border: 1px solid var(--row-border);
  border-radius: 10px;
}

.compare-task-products-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
}

.compare-task-products-for {
  font-size: 0.85rem;
  color: var(--text-primary);
}

.compare-task-back {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0;
}

.compare-task-back:hover { color: var(--accent-text); }

.compare-task-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.6rem;
}

.compare-task-card {
  background: var(--card-bg, var(--body-bg));
  border: 1.5px solid var(--row-border);
  border-radius: 8px;
  cursor: pointer;
  padding: 0.65rem 0.7rem 0.55rem;
  transition: border-color 0.15s, background 0.15s;
}

.compare-task-card:hover {
  border-color: var(--accent);
}

.compare-task-card.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.compare-task-card-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.45rem;
  min-height: 20px;
}

.compare-task-card-logo {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  object-fit: contain;
}

.compare-task-card-logo-ph {
  width: 20px;
  height: 20px;
}

.compare-task-card-check {
  font-size: 0.75rem;
  color: var(--accent-text);
  font-weight: 700;
}

.compare-task-card-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.2;
  word-break: break-word;
}
/* ── END TASK-FIRST SECTION ── */

/* ══════════════════════════════════════════════════════
   News Tab
   ══════════════════════════════════════════════════════ */

#news-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem 6rem;
}

.news-header {
  margin-bottom: 2.5rem;
}

.news-title {
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--text-bright);
  margin-bottom: 0.4rem;
}

.news-subtitle {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
}

.news-card {
  display: flex;
  flex-direction: column;
  background: var(--meta-bg);
  border: 1px solid var(--row-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}

.news-card:hover {
  border-color: var(--accent-border);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(255, 246, 143, 0.1);
}

.news-card-img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
  background: var(--meta-bg);
}

.news-card-img-fallback {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.news-card-source-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
}

.news-card-body {
  padding: 1rem 1.1rem 0.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.news-card-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
}

.news-card-source {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.news-card-date {
  color: var(--text-muted);
}

.news-card-headline {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--text-bright);
  line-height: 1.4;
}

.news-card-note {
  font-size: 0.78rem;
  color: var(--accent-text);
  line-height: 1.4;
  padding: 0.4rem 0.6rem;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 6px;
  border-left: 2px solid var(--accent-border);
}

.news-card-excerpt {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card-footer {
  padding: 0.6rem 1.1rem 0.8rem;
  font-size: 0.75rem;
  color: var(--text-faint);
  font-weight: 500;
  transition: color 0.15s;
}

.news-card:hover .news-card-footer {
  color: var(--accent-text);
}

.news-summary {
  margin-top: 1.1rem;
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid var(--accent-border);
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 760px;
}

.news-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 3rem 0;
}

.news-refresh-note {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.72rem;
  margin-top: 2.5rem;
}

/* Skeleton loading */
.news-card-skeleton {
  pointer-events: none;
}

.skeleton-block {
  width: 100%;
  height: 180px;
  background: linear-gradient(90deg, var(--meta-bg) 25%, rgba(255,255,255,0.04) 50%, var(--meta-bg) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

.skeleton-line {
  height: 0.8rem;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--meta-bg) 25%, rgba(255,255,255,0.04) 50%, var(--meta-bg) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  width: 100%;
}

.skeleton-line-short { width: 40%; }
.skeleton-line-med   { width: 65%; }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Find a Tool ── */
/* Left-aligned with a comfortable gutter so results don't hug the very edge
   (but aren't centered either). */
#find-container {
  padding: 0 2.5rem 3rem;
}

.find-hero {
  text-align: center;
  padding: 5rem 0 1.5rem;
}

/* Clear single message when a search returns no matching tools at all. */
.find-noresults {
  text-align: center;
  max-width: 520px;
  margin: 2.5rem auto 0;
  padding: 1.75rem 1.5rem;
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 12px;
}
.find-noresults-icon { font-size: 1.7rem; display: block; margin-bottom: 0.6rem; }
.find-noresults-title { color: var(--text-bright); font-size: 1rem; font-weight: 600; margin: 0; }
.find-noresults-sub { color: var(--text-muted); font-size: 0.86rem; margin: 0.55rem 0 0; line-height: 1.5; }
.find-noresults-sub a { color: var(--accent-text); text-decoration: underline; cursor: pointer; }

/* Overview paragraph above the "By need" results (mirrors the Optimizer's profile). */
.find-summary {
  margin: 0 0 1.75rem;
  padding: 1.1rem 1.4rem;
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-left: 3px solid var(--accent-text);
  border-radius: 10px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--text);
}
.find-summary-list { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.45rem; }
.find-summary-list li { line-height: 1.5; }

/* Action row below the input: back/save on the LEFT, primary button on the RIGHT,
   same line (shared by By-Need and Early Stage Automation Ideator, above the disclaimer). */
.find-form-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 0.65rem; }
.find-actions-left { display: flex; gap: 0.6rem; }
.find-need-actions, .find-opt-actions { display: flex; gap: 0.6rem; }

.find-title {
  font-size: 2.1rem;
  font-weight: 300;
  color: var(--accent-heading);
  margin: 0 0 0.5rem;
}

.find-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  margin: 0 0 1.75rem;
}

.find-ai-form {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.find-ai-input {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem 1.25rem;
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 12px;
  font-size: 1.05rem;
  color: var(--text);
  font-family: inherit;
  resize: none;
  outline: none;
  transition: border-color 0.2s;
  line-height: 1.5;
}

.find-ai-input:focus { border-color: var(--accent-border); }
.find-ai-input::placeholder { color: var(--text-muted); }

.find-ai-btn {
  flex-shrink: 0;
  background: var(--accent-fill);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1.65rem;
  transition: opacity 0.15s;
}

.find-ai-btn:hover { opacity: 0.85; }
.find-ai-btn:disabled { opacity: 0.5; cursor: default; }

/* ── Discover Workflows form ── */
.find-wf-form {
  max-width: 720px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.find-wf-label {
  font-size: 0.9rem;
  color: var(--text-dim);
  font-weight: 500;
  margin-top: 0.5rem;
}
.find-wf-textarea { min-height: 3.2rem; }
/* The single brief box: both questions live here, so it needs room to hold two answers
   without the founder having to scroll inside a 3-line box while writing. */
.find-wf-brief {
  min-height: 11rem;
  line-height: 1.55;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  resize: vertical;
}
.find-wf-hint {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.find-wf-hint em { color: var(--text-dim); font-style: normal; font-weight: 600; }
.find-wf-row { display: flex; gap: 1.5rem; margin-top: 0.3rem; }
.find-wf-field { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.find-wf-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 1rem;
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 10px;
  font-size: 1rem;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}
.find-wf-input:focus { border-color: var(--accent-border); }
.find-wf-budget-val { color: var(--accent-heading); font-weight: 600; }
.find-wf-slider { width: 100%; accent-color: var(--accent); cursor: pointer; margin-top: 0.6rem; }
.find-wf-scale { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.1rem; }
.find-wf-form .find-form-actions { margin-top: 0.75rem; }

/* ── Workflow suites (results) ── */
.find-suite {
  max-width: 900px;
  margin: 0 auto 1.75rem;
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
}
.find-suite-hd { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.find-suite-num {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--on-fill); background: var(--accent-fill);
  padding: 0.18rem 0.55rem; border-radius: 6px; font-weight: 700;
}
.find-suite-name { font-family: var(--font-display); font-weight: 300; font-size: 1.5rem; color: var(--accent-heading); }
.find-suite-cost { margin-left: auto; font-size: 0.9rem; color: var(--text-dim); font-weight: 600; }
.find-suite-bullets { margin: 0 0 1rem; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.find-suite-bullets li { color: var(--text-dim); font-size: 0.95rem; line-height: 1.5; }
.find-suite-grid { margin-top: 0.25rem; }
.find-suite-integ {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: 0.85rem; line-height: 1.45; font-weight: 500;
  padding: 0.5rem 0.7rem; border-radius: 8px; margin: 0 0 0.85rem;
  border: 1px solid transparent;
}
.find-suite-integ-icon { flex: none; line-height: 1.4; }
.find-suite-integ.is-native {
  color: var(--accent-text, #52A767);
  background: rgba(82, 167, 103, 0.10);
  border-color: rgba(82, 167, 103, 0.28);
}
.find-suite-integ.is-effort {
  color: #f0b429;
  background: rgba(240, 180, 41, 0.10);
  border-color: rgba(240, 180, 41, 0.32);
}

/* ── Workflow Suite: "Setup & rollout" note ──
   Same disclosure pattern as the compare tool's "Pricing info" pill, with one addition:
   the effort chip is always visible on the closed toggle, so the headline answer reads
   at a glance and only the detail is behind the click. */
.find-suite-rollout-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  margin: 0 0 0.85rem;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--meta-border);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.find-suite-rollout-toggle::after { content: '▸'; }
.find-suite-rollout-toggle:hover { color: var(--text); border-color: var(--accent-border); }
.find-suite-rollout-toggle:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }
.find-suite-rollout-toggle.is-on {
  color: var(--accent-text);
  border-color: var(--accent-border);
  background: rgba(255, 246, 143, 0.1);
}
.find-suite-rollout-toggle.is-on::after { content: '▾'; }

.find-suite-rollout-chip {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.12rem 0.42rem;
  border-radius: 5px;
  border: 1px solid transparent;
}
.find-suite-rollout-chip.is-low      { color: #52A767; background: rgba(82, 167, 103, 0.12);  border-color: rgba(82, 167, 103, 0.30); }
.find-suite-rollout-chip.is-moderate { color: #f0b429; background: rgba(240, 180, 41, 0.12);  border-color: rgba(240, 180, 41, 0.32); }
.find-suite-rollout-chip.is-high     { color: #e8735a; background: rgba(232, 115, 90, 0.12);  border-color: rgba(232, 115, 90, 0.32); }

.find-suite-rollout {
  border-top: 1px solid var(--row-border);
  padding-top: 0.7rem;
  margin: -0.35rem 0 1rem;
}
.find-suite-rollout-list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.find-suite-rollout-list li { color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; }
.find-suite-rollout-list strong { color: var(--text-bright); font-weight: 600; }

/* ── Workflow Suite: "at a glance" chooser (one line per suite, at the top) ── */
.find-suite-summary {
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 14px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.6rem;
}
.find-suite-summary-title {
  font-family: var(--font-display); font-weight: 300; font-size: 1.2rem;
  color: var(--accent-heading); margin: 0 0 0.65rem;
}
.find-suite-summary ul {
  margin: 0; padding-left: 1.1rem;
  display: flex; flex-direction: column; gap: 0.55rem;
}
.find-suite-summary li { color: var(--text-dim); font-size: 0.95rem; line-height: 1.5; }
.find-suite-summary-name { font-weight: 600; color: var(--text-bright); }
.find-suite-summary-best { color: var(--accent-text, #52A767); font-weight: 500; }

@media (max-width: 560px) { .find-wf-row { flex-direction: column; gap: 0.75rem; } }

/* ── Workflow Suite: follow-up thread ── */
#find-wf-followup, #find-need-followup, #find-opt-followup {
  max-width: 820px;
  margin: 1.75rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--row-border, rgba(255,255,255,0.1));
}
.find-wf-followup-hd {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--accent-heading);
  margin-bottom: 0.9rem;
}
.find-wf-thread { display: flex; flex-direction: column; gap: 1.1rem; margin-bottom: 1rem; }
.find-wf-turn { display: flex; flex-direction: column; gap: 0.5rem; }
.find-wf-q-bubble {
  align-self: flex-end;
  max-width: 85%;
  background: rgba(82, 167, 103, 0.12);
  border: 1px solid rgba(82, 167, 103, 0.28);
  color: var(--text);
  border-radius: 12px 12px 2px 12px;
  padding: 0.55rem 0.8rem;
  font-size: 0.92rem;
  line-height: 1.45;
}
.find-wf-q-icon { color: var(--accent-text, #52A767); font-weight: 700; margin-right: 0.35rem; }
.find-wf-a-bubble {
  align-self: flex-start;
  max-width: 92%;
  background: var(--meta-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--meta-border, rgba(255,255,255,0.08));
  color: var(--text-dim);
  border-radius: 12px 12px 12px 2px;
  padding: 0.7rem 0.9rem;
  font-size: 0.93rem;
  line-height: 1.55;
}
.find-wf-a-bubble strong { color: var(--text); font-weight: 600; }
.find-wf-a-loading { color: var(--text-muted); font-style: italic; }
.find-wf-a-list { margin: 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: 0.4rem; }
.find-wf-a-list li { line-height: 1.5; }
.find-wf-a-p { margin: 0 0 0.5rem; }
.find-wf-a-p:last-child { margin-bottom: 0; }
.find-wf-a-list + .find-wf-a-p { margin-top: 0.5rem; }
.find-wf-ask { display: flex; gap: 0.6rem; align-items: stretch; }
.find-wf-ask-input {
  flex: 1;
  background: var(--meta-bg, rgba(255,255,255,0.04));
  border: 1px solid var(--accent-border, rgba(255,255,255,0.15));
  border-radius: 10px;
  color: var(--text);
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
  font-family: inherit;
}
.find-wf-ask-input:focus { outline: none; border-color: var(--accent-heading); }
.find-wf-ask-btn { flex: none; white-space: nowrap; }
.find-wf-ask-btn:disabled { opacity: 0.45; cursor: not-allowed; }

.find-results-top {
  margin-bottom: 1.5rem;
}

.find-results-back {
  background: none;
  border: 1px solid var(--meta-border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.3rem 0.75rem;
  transition: color 0.15s, border-color 0.15s;
}

.find-results-back:hover { color: var(--text); border-color: var(--accent-border); }

.find-tier {
  margin-bottom: 2rem;
}

.find-tier-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.find-tier-badge {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.24rem 0.7rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.find-tier-badge--1 {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent-text);
  border: 1px solid var(--accent-border);
}

.find-tier-badge--2 {
  background: color-mix(in srgb, #60a5fa 10%, transparent);
  color: #60a5fa;
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.find-tier-badge--3 {
  background: color-mix(in srgb, #f59e0b 10%, transparent);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.find-tier-label {
  font-size: 0.94rem;
  color: var(--text-muted);
}

.find-tier-empty {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 0;
}

.find-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 0.85rem;
}

.find-card {
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 12px;
  padding: 1.05rem 1.2rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.find-card:hover {
  border-color: var(--accent-border);
  background: var(--nav-active-bg);
}

/* Off-map tool card: named by the AI but not (yet) in our catalog — not clickable. */
.find-card--ext {
  cursor: default;
  border-style: dashed;
  opacity: 0.9;
}
.find-card--ext:hover {
  border-color: var(--meta-border);
  background: var(--meta-bg);
}
.find-card--ext .find-card-sub { font-style: italic; opacity: 0.75; }

.find-card-hd {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.4rem;
}

.find-card-logo {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  border-radius: 3px;
}

.find-card-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.find-card-name {
  font-size: 1rem;
  font-weight: 300;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.find-card-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.find-card-free {
  font-size: 0.68rem;
  font-weight: 600;
  color: #34d399;
  border: 1px solid rgba(52, 211, 153, 0.3);
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.find-card-tagline {
  font-size: 0.88rem;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0;
}

.find-empty {
  color: var(--text-muted);
  font-size: 0.85rem;
  grid-column: 1 / -1;
  padding: 2rem 0;
  text-align: center;
}

/* ── Auth modal ─────────────────────────────────────────────────────────── */
.auth-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
.auth-box {
  background: var(--bg);
  border: 1px solid var(--section-border);
  border-radius: 16px;
  padding: 2rem;
  width: 100%; max-width: 380px;
  position: relative;
  display: flex; flex-direction: column; gap: 0.75rem;
}
.auth-close {
  position: absolute; top: 0.75rem; right: 0.75rem;
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; line-height: 1;
  padding: 0.25rem 0.4rem; border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.auth-close:hover { color: var(--text); background: var(--meta-bg); }
.auth-heading { font-size: 1.25rem; font-weight: 600; color: var(--text-bright); }
.auth-tabs { display: flex; gap: 0.5rem; }
.auth-tab {
  flex: 1; padding: 0.4rem; border-radius: 8px;
  border: 1px solid var(--section-border);
  background: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.875rem;
  transition: all 0.15s;
}
.auth-tab.active {
  background: var(--nav-active-bg);
  border-color: var(--accent-border);
  color: var(--accent-text);
}
.auth-error {
  font-size: 0.8rem; color: #f87171;
  background: rgba(248,113,113,0.1);
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: 8px; padding: 0.5rem 0.75rem;
}
.auth-field {
  width: 100%; padding: 0.65rem 0.85rem;
  background: var(--meta-bg); border: 1px solid var(--section-border);
  border-radius: 10px; color: var(--text); font-size: 0.9rem;
  outline: none; transition: border-color 0.15s;
}
.auth-field:focus { border-color: var(--accent-border); }
.auth-primary-btn {
  padding: 0.65rem 1rem; border-radius: 10px;
  background: var(--accent-fill); border: none; cursor: pointer;
  color: #fff; font-size: 0.9rem; font-weight: 600;
  transition: opacity 0.15s;
}
.auth-primary-btn:hover { opacity: 0.85; }
.auth-primary-btn:disabled { opacity: 0.5; cursor: default; }

/* Quiet tertiary action — "Forgot your password?", "← Back to sign in". Styled to
   read as a link rather than a third button competing with the two real ones. */
.auth-forgot {
  background: none; border: none; padding: 0.15rem;
  color: var(--text-muted); font-size: 0.82rem;
  cursor: pointer; text-align: center;
  transition: color 0.15s;
}
.auth-forgot:hover { color: var(--text); text-decoration: underline; }
.auth-forgot[hidden] { display: none; }

/* Explanatory line under an auth heading. */
.auth-sub {
  color: var(--text-muted); font-size: 0.86rem;
  line-height: 1.6; margin-top: -0.25rem;
}

/* ── Nav auth button ────────────────────────────────────────────────────── */
.nav-auth-btn {
  margin-left: 1rem;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--accent-border);
  background: none; cursor: pointer;
  color: var(--accent-heading); font-size: 0.8rem;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.nav-auth-btn:hover { background: var(--nav-active-bg); }
.nav-auth-btn.signed-in { color: var(--text-dim); border-color: var(--section-border); }

/* ── Fav heart ──────────────────────────────────────────────────────────── */
.fav-heart {
  background: none; border: 1px solid var(--section-border);
  border-radius: 8px; cursor: pointer;
  color: var(--text-muted); font-size: 1.1rem;
  padding: 0.25rem 0.6rem; line-height: 1;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  margin-top: 0.5rem;
}
.fav-heart:hover { color: #f472b6; border-color: rgba(244,114,182,0.4); }
.fav-heart.fav-active { color: #f472b6; border-color: rgba(244,114,182,0.4); background: rgba(244,114,182,0.08); }

/* ── Find save button ───────────────────────────────────────────────────── */
.find-save-btn {
  padding: 0.4rem 0.9rem; border-radius: 8px;
  border: 1px solid var(--section-border);
  background: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.82rem;
  transition: all 0.15s;
}
.find-save-btn:hover { color: #f472b6; border-color: rgba(244,114,182,0.4); }
.find-save-btn:disabled { opacity: 0.6; cursor: default; }

/* ── Compare save button ────────────────────────────────────────────────── */
.compare-save-btn {
  margin-top: 1rem;
  padding: 0.45rem 1rem; border-radius: 8px;
  border: 1px solid var(--section-border);
  background: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.85rem;
  transition: all 0.15s;
}
.compare-save-btn:hover { color: #f472b6; border-color: rgba(244,114,182,0.4); }
.compare-save-btn:disabled { opacity: 0.6; cursor: default; }

/* ── Dev badge ──────────────────────────────────────────────────────────── */
/* --footer-lift is how far the site footer currently intrudes into the viewport; auth.js
   keeps it up to date on scroll and resize. Adding it to `bottom` is what keeps the badge
   fully clear of the social icons, which occupy this exact corner once the footer is in
   view — on a short page, without any scrolling at all. */
.dev-badge {
  position: fixed; bottom: calc(1.25rem + var(--footer-lift, 0px)); right: 1.25rem; z-index: 999;
  transition: bottom 0.12s ease-out;
  background: rgba(255, 246, 143,0.15);
  border: 1px solid var(--accent-border);
  color: var(--accent-text); font-size: 0.75rem; font-weight: 600;
  padding: 0.35rem 0.65rem; border-radius: 8px;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .dev-badge { transition: none; } }

/* ── Dashboard ──────────────────────────────────────────────────────────── */
.dashboard-container {
  max-width: 900px; margin: 0 auto;
  padding: 5rem 2rem 3rem;
}
.dash-title {
  font-size: 1.75rem; font-weight: 300;
  color: var(--text-bright); margin-bottom: 2rem;
}
.dash-section-title {
  font-size: 1.1rem; font-weight: 300;
  color: var(--text-dim); margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.dash-count {
  background: var(--meta-bg); border: 1px solid var(--section-border);
  border-radius: 99px; font-size: 0.75rem; font-weight: 500;
  color: var(--text-muted); padding: 0.1rem 0.55rem;
}
.dash-loading, .dash-empty-msg {
  color: var(--text-muted); font-size: 0.9rem; padding: 0.5rem 0;
}
.dash-empty-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  padding: 2rem 0;
}
.dash-empty-state p { color: var(--text-muted); }
.dash-favs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.6rem;
}
.dash-fav-card {
  background: var(--meta-bg); border: 1px solid var(--section-border);
  border-radius: 10px; padding: 0.65rem 0.75rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; transition: border-color 0.15s;
}
.dash-fav-card:hover { border-color: var(--accent-border); }
.dash-fav-inner {
  display: flex; align-items: center; gap: 0.5rem;
  flex: 1; min-width: 0;
}
.dash-fav-logo { width: 16px; height: 16px; border-radius: 3px; flex-shrink: 0; }
.dash-fav-name {
  font-size: 0.82rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-fav-remove {
  background: none; border: none; cursor: pointer;
  color: var(--text-faint); font-size: 0.75rem; padding: 0 0.1rem;
  transition: color 0.15s; flex-shrink: 0;
}
.dash-fav-remove:hover { color: #f87171; }
.dash-result-card {
  background: var(--meta-bg); border: 1px solid var(--section-border);
  border-radius: 12px; margin-bottom: 0.75rem; overflow: hidden;
}
.dash-result-hd {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--section-border);
}
.dash-type-badge {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 6px;
  flex-shrink: 0;
}
.dash-type-find    { background: rgba(56,189,248,0.15); color: #38bdf8; }
.dash-type-compare { background: rgba(255, 246, 143,0.15); color: var(--accent); }
.dash-result-title { flex: 1; font-size: 0.875rem; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-result-date  { font-size: 0.75rem; color: var(--text-muted); flex-shrink: 0; }
.dash-result-del {
  background: none; border: none; cursor: pointer;
  color: var(--text-faint); font-size: 0.8rem; padding: 0 0.1rem;
  transition: color 0.15s;
}
.dash-result-del:hover { color: #f87171; }
.dash-result-body { padding: 0.75rem 1rem; }
.dash-find-tier { margin-bottom: 0.6rem; }
.dash-tier-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  padding: 0.15rem 0.45rem; border-radius: 6px; margin-bottom: 0.35rem;
}
.dash-tier-badge--1 { background: rgba(255, 246, 143,0.15); color: var(--accent); }
.dash-tier-badge--2 { background: rgba(56,189,248,0.12); color: #38bdf8; }
.dash-tier-badge--3 { background: rgba(251,191,36,0.12); color: #fbbf24; }
.dash-find-names { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.dash-product-chip {
  background: var(--nav-active-bg); border: 1px solid var(--section-border);
  border-radius: 6px; padding: 0.2rem 0.6rem;
  font-size: 0.78rem; color: var(--text-dim); cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.dash-product-chip:hover { border-color: var(--accent-border); color: var(--accent-text); }
.dash-compare-body { font-size: 0.85rem; max-height: 300px; overflow-y: auto; }
.dash-compare-body h2 { font-size: 0.95rem; color: var(--text-dim); margin: 0.75rem 0 0.35rem; }
.dash-compare-body h3 { font-size: 0.85rem; color: var(--text-dim); margin: 0.5rem 0 0.2rem; }
.dash-compare-body p  { color: var(--text-muted); margin-bottom: 0.3rem; line-height: 1.5; }

/* ── Dev Panel ──────────────────────────────────────────────────────────── */
.dev-container {
  max-width: 960px; margin: 0 auto;
  padding: 5rem 2rem 3rem;
}
.dev-title {
  font-size: 1.5rem; font-weight: 300;
  color: var(--text-bright); margin-bottom: 1.5rem;
}
.dev-tabs {
  display: flex; gap: 0.5rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--section-border);
  padding-bottom: 0.75rem;
}
.dev-tab {
  padding: 0.4rem 1rem; border-radius: 8px;
  border: 1px solid transparent;
  background: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.875rem;
  transition: all 0.15s;
}
.dev-tab:hover { color: var(--text); }
.dev-tab.active {
  background: var(--nav-active-bg);
  border-color: var(--accent-border);
  color: var(--accent-text);
}
.dev-loading { color: var(--text-muted); font-size: 0.9rem; }
.dev-error   { color: #f87171; font-size: 0.9rem; }
.dev-pipeline-stats {
  /* Six figures now instead of five — wrap rather than overflow on narrow panels. */
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 0.75rem;
}
.dev-stat { font-size: 0.875rem; color: var(--text-muted); }
.dev-stat.approved strong { color: #4ade80; }
.dev-stat.static strong  { color: var(--accent-text); }
.dev-stat.flagged strong { color: #fbbf24; }

/* Clarifies what the totals do and don't include — hidden products are not
   pipeline candidates, and a confidence filter never changes the totals. */
.dev-pipe-note {
  font-size: 0.8125rem; color: var(--text-muted); opacity: 0.85;
  margin: 0 0 0.75rem; line-height: 1.5;
}
.dev-pipe-note strong { color: var(--text); }

/* Pipeline confidence filter + sort controls */
.dev-pipe-controls {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
  margin-bottom: 1rem;
}
.dev-pipe-controls-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-faint); margin-right: 0.35rem;
}
.dev-conf-chip {
  background: var(--meta-bg); border: 1px solid var(--meta-border);
  border-radius: 999px; color: var(--text-muted);
  font-size: 0.78rem; padding: 0.25rem 0.7rem; cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.dev-conf-chip:hover { color: var(--text); }
.dev-conf-chip.active {
  background: var(--accent-fill); color: var(--on-fill);
  border-color: var(--accent); font-weight: 600;
}
.dev-pipe-sort {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; color: var(--text-muted); margin-left: 0.5rem; cursor: pointer;
}
.dev-card-view {
  background: none; border: 1px solid var(--meta-border); border-radius: 6px;
  color: var(--text-muted); font-size: 0.76rem; padding: 0.3rem 0.6rem;
  cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s;
}
.dev-card-view:hover { color: var(--text); border-color: var(--accent-border); }
.dev-section-divider {
  font-size: 0.8rem; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin: 1.5rem 0 0.75rem;
}
.dev-section-divider.dev-section-flagged { color: #fbbf24; }
/* Flagged (couldn't-fully-verify) pipeline candidates */
.dev-pipeline-card.dev-card-flagged { border-color: rgba(251,191,36,0.45); }
.dev-card-flag {
  font-size: 0.78rem; color: #fbbf24;
  background: rgba(251,191,36,0.08);
  border-top: 1px solid rgba(251,191,36,0.25);
  padding: 0.4rem 0.85rem;
}
.dev-card-conf {
  font-family: var(--font-mono); font-size: 0.6rem; text-transform: uppercase;
  border-radius: 4px; padding: 0.05rem 0.3rem; vertical-align: middle;
}
.dev-conf-high   { color: #4ade80; border: 1px solid rgba(74,222,128,0.4); }
.dev-conf-medium { color: #fbbf24; border: 1px solid rgba(251,191,36,0.4); }
.dev-conf-low    { color: #f87171; border: 1px solid rgba(248,113,113,0.4); }
.dev-draft-note  { font-size: 0.72rem; color: #fbbf24; align-self: center; }
.dev-section-label {
  font-size: 0.8rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}
/* Pipeline cards */
.dev-pipeline-list { display: flex; flex-direction: column; gap: 0.5rem; }
.dev-pipeline-card {
  background: var(--meta-bg);
  border: 1px solid var(--section-border);
  border-radius: 10px; overflow: hidden;
  transition: border-color 0.15s;
}
.dev-pipeline-card.dev-card-approved { border-color: rgba(74,222,128,0.3); }
.dev-card-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.65rem 0.85rem; gap: 1rem;
}
.dev-card-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dev-card-name { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.dev-card-cat  { font-size: 0.75rem; color: var(--text-muted); }
.dev-card-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.dev-card-toggle {
  font-size: 0.75rem; color: var(--text-muted);
  background: none; border: none; cursor: pointer;
  padding: 0.25rem 0.5rem; border-radius: 6px;
  transition: color 0.15s;
}
.dev-card-toggle:hover { color: var(--text); }
.dev-approve-btn {
  font-size: 0.8rem; font-weight: 600; cursor: pointer;
  padding: 0.3rem 0.8rem; border-radius: 7px;
  background: rgba(74,222,128,0.15);
  border: 1px solid rgba(74,222,128,0.3);
  color: #4ade80; transition: opacity 0.15s;
}
.dev-approve-btn:hover  { opacity: 0.8; }
.dev-approve-btn:disabled { opacity: 0.5; cursor: default; }
.dev-approve-btn.approved { background: rgba(74,222,128,0.08); color: #4ade80; }
.dev-undo-btn {
  font-size: 0.75rem; cursor: pointer;
  padding: 0.3rem 0.65rem; border-radius: 7px;
  background: none; border: 1px solid var(--section-border);
  color: var(--text-muted); transition: color 0.15s;
}
.dev-undo-btn:hover { color: #f87171; border-color: rgba(248,113,113,0.3); }
/* Delete is the one irreversible action in the panel (Hide can be un-hidden, Approve
   undone). It sits quiet until hover so it can't be mistaken for the button next to it,
   then turns red — the same red Hide uses on hover, one step stronger. */
.dev-delete-btn {
  font-size: 0.75rem; cursor: pointer;
  padding: 0.3rem 0.65rem; border-radius: 7px;
  background: none; border: 1px solid var(--section-border);
  color: var(--text-muted); transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.dev-delete-btn:hover {
  color: #f87171; border-color: rgba(248,113,113,0.45); background: rgba(248,113,113,0.1);
}
.dev-delete-btn:disabled { opacity: 0.5; cursor: default; }
.dev-card-details {
  padding: 0.75rem 0.85rem;
  border-top: 1px solid var(--section-border);
  font-size: 0.83rem;
}
.dev-detail-summary { color: var(--text-muted); margin-bottom: 0.75rem; line-height: 1.5; }
.dev-detail-section { margin-bottom: 0.75rem; }
.dev-detail-section strong { color: var(--text-dim); display: block; margin-bottom: 0.25rem; }
.dev-detail-section ul { padding-left: 1.2rem; color: var(--text-muted); }
.dev-detail-section li { margin-bottom: 0.2rem; }
.dev-news-date { color: var(--text-faint); margin-right: 0.35rem; }
.dev-detail-link { font-size: 0.8rem; color: var(--accent-text); }
/* Trend dashboard */
.dev-trend-missing { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.dev-trend-chip {
  font-size: 0.75rem; padding: 0.2rem 0.55rem; border-radius: 6px;
}
.dev-trend-chip.missing { background: rgba(248,113,113,0.1); color: #f87171; border: 1px solid rgba(248,113,113,0.2); }
.dev-trend-table { border: 1px solid var(--section-border); border-radius: 10px; overflow: hidden; }
.dev-trend-header, .dev-trend-row {
  display: grid; grid-template-columns: 1fr 80px 1fr;
  padding: 0.5rem 0.85rem; gap: 1rem; align-items: center;
}
.dev-trend-header { background: var(--meta-bg); font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.dev-trend-row { border-top: 1px solid var(--section-border); font-size: 0.83rem; color: var(--text); }
.dev-trend-row:hover { background: var(--meta-bg); }
.dev-trend-val { font-weight: 600; font-size: 0.8rem; }
.dev-trend-val.positive { color: #4ade80; }
.dev-trend-val.negative { color: #f87171; }
.dev-trend-val.neutral  { color: var(--text-muted); }
.dev-trend-val.no-data  { color: var(--text-faint); }
.dev-trend-sub { font-size: 0.75rem; color: var(--text-muted); }
/* Users table */
.dev-user-table { border: 1px solid var(--section-border); border-radius: 10px; overflow: hidden; }
.dev-user-header, .dev-user-row {
  display: grid; grid-template-columns: 1fr 120px 90px;
  padding: 0.5rem 0.85rem; gap: 1rem; align-items: center;
}
.dev-user-header { background: var(--meta-bg); font-size: 0.75rem; color: var(--text-muted); font-weight: 600; }
.dev-user-row { border-top: 1px solid var(--section-border); font-size: 0.83rem; color: var(--text); }
.dev-user-row:hover { background: var(--meta-bg); }

/* ── Dev Products Editor ───────────────────────────────────────────────── */
.dev-prod-toolbar {
  display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.75rem;
}
.dev-prod-search {
  flex: 1; padding: 0.45rem 0.75rem;
  background: var(--meta-bg); border: 1px solid var(--section-border);
  border-radius: 8px; color: var(--text); font-size: 0.875rem;
}
.dev-changes-search {
  width: 100%; box-sizing: border-box; margin: 0.6rem 0 0.2rem;
  padding: 0.5rem 0.8rem;
  background: var(--meta-bg); border: 1px solid var(--section-border);
  border-radius: 8px; color: var(--text); font-size: 0.875rem;
}
.dev-changes-search:focus { outline: none; border-color: var(--accent-heading); }
.dev-orphan-notice {
  margin: 0.5rem 0 0.8rem; padding: 0.7rem 0.9rem; border-radius: 8px;
  background: rgba(240,180,41,0.08); border: 1px solid rgba(240,180,41,0.3);
  color: var(--text-dim); font-size: 0.82rem; line-height: 1.5;
}
.dev-orphan-notice strong { color: #e5a05a; }
.dev-orphan-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.dev-orphan-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.dev-orphan-item code { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text); }

/* AI Gaps tab */
.dev-gaps-followups { display: flex; flex-direction: column; gap: 0.35rem; }
.dev-gaps-fu { font-size: 0.85rem; color: var(--text-dim); line-height: 1.45; padding: 0.4rem 0.6rem; background: var(--meta-bg); border: 1px solid var(--meta-border); border-radius: 7px; }
.dev-gaps-fu-mode { font-family: var(--font-mono); font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-text, #52A767); margin-right: 0.5rem; }
.dev-gaps-summary { font-size: 0.95rem; color: var(--text); background: var(--brand-soft, rgba(82,167,103,0.1)); border-left: 3px solid var(--accent-heading); border-radius: 6px; padding: 0.7rem 0.9rem; margin: 0.8rem 0 1rem; }
.dev-gaps-card { background: var(--meta-bg); border: 1px solid var(--meta-border); border-radius: 10px; padding: 0.9rem 1.1rem; margin-bottom: 0.7rem; }
.dev-gaps-hd { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.dev-gaps-rank { font-family: var(--font-mono); font-weight: 700; color: var(--on-fill); background: var(--accent-fill); border-radius: 5px; padding: 0.1rem 0.5rem; font-size: 0.8rem; }
.dev-gaps-theme { font-family: var(--font-display); font-size: 1.15rem; color: var(--accent-heading); }
.dev-gaps-count { margin-left: auto; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); }
.dev-gaps-cause, .dev-gaps-fix { font-size: 0.88rem; color: var(--text-dim); line-height: 1.5; margin: 0.25rem 0; }
.dev-gaps-fix strong { color: var(--accent-text, #52A767); }
.dev-gaps-ex { margin: 0.45rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.2rem; }
.dev-gaps-ex li { font-size: 0.82rem; color: var(--text-muted); font-style: italic; }
.dev-card-hidden { border-left: 3px solid rgba(248,113,113,0.5); opacity: 0.85; }
.dev-card-hidden:hover { opacity: 1; }
.dev-apply-note { font-size: 0.82rem; color: #f0b429; background: rgba(240,180,41,0.1); border: 1px solid rgba(240,180,41,0.3); border-radius: 7px; padding: 0.5rem 0.7rem; margin: 0 0 0.6rem; line-height: 1.45; }
.dev-prod-search:focus { outline: none; border-color: var(--accent-border); }
.dev-prod-item { border: 1px solid var(--section-border); border-radius: 10px; margin-bottom: 0.4rem; overflow: hidden; }
.dev-prod-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 0.85rem; gap: 1rem;
}
.dev-prod-edit-area {
  border-top: 1px solid var(--section-border);
  padding: 0.75rem 0.85rem;
}
.dev-prod-textarea {
  width: 100%; min-height: 280px; max-height: 520px;
  background: var(--code-bg, #0d0d0d); color: #e2e8f0;
  border: 1px solid var(--section-border); border-radius: 8px;
  font-family: var(--font-mono); font-size: 0.78rem;
  line-height: 1.5; padding: 0.75rem; resize: vertical;
  box-sizing: border-box;
}
.dev-prod-textarea:focus { outline: none; border-color: var(--accent-border); }
/* Changes tab: interpreted-value preview before applying live */
.dev-apply-preview {
  margin-top: 0.7rem; padding: 0.7rem; border-radius: 8px;
  background: var(--meta-bg); border: 1px dashed var(--accent-border);
}
.dev-apply-textarea {
  width: 100%; min-height: 120px; max-height: 400px; box-sizing: border-box;
  background: var(--code-bg, #0d0d0d); color: #e2e8f0;
  border: 1px solid var(--section-border); border-radius: 8px;
  font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.5;
  padding: 0.6rem; resize: vertical; margin-top: 0.3rem;
}
.dev-apply-textarea:focus { outline: none; border-color: var(--accent-heading); }
.dev-prod-actions {
  display: flex; gap: 0.5rem; align-items: center; margin-top: 0.6rem; flex-wrap: wrap;
}
.dev-prod-status { font-size: 0.8rem; margin-left: 0.25rem; }
.dev-edited-badge {
  font-size: 0.65rem; font-weight: 600; color: var(--accent-text);
  background: rgba(255, 246, 143,0.12); border: 1px solid rgba(255, 246, 143,0.3);
  border-radius: 4px; padding: 0.1rem 0.35rem; margin-left: 0.35rem;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Reviews
   ═══════════════════════════════════════════════════════════════════════════ */

/* Google sign-in button + divider in the auth modal */
.auth-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; margin: 0.25rem 0 0; padding: 0.7rem 1rem;
  background: #fff; color: #1f1f1f; font-weight: 600; font-size: 0.95rem;
  border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.05s ease;
}
.auth-google-btn:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.18); }
.auth-google-btn:active { transform: translateY(1px); }
.auth-divider {
  display: flex; align-items: center; gap: 0.75rem;
  margin: 0.9rem 0 0.2rem; color: var(--text-muted); font-size: 0.8rem;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--meta-border);
}

/* ── Product-page reviews section ── */
.detail-reviews { margin-top: 2.5rem; }
.rv-section-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.rv-summary { display: flex; align-items: center; gap: 0.5rem; }
.rv-summary-avg .rv-star { font-size: 1rem; }
.rv-summary-num { font-weight: 700; color: var(--text-bright); }
.rv-summary-count, .rv-summary-empty { color: var(--text-muted); font-size: 0.9rem; }

.rv-star { color: var(--text-faint); }
.rv-star.is-on { color: #f5b301; }
.rv-stars-sm .rv-star { font-size: 0.85rem; }

.rv-loading, .rv-empty { color: var(--text-muted); font-size: 0.9rem; padding: 0.5rem 0; }

/* Write box */
.rv-write {
  background: var(--meta-bg); border: 1px solid var(--meta-border);
  border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1.5rem;
}
.rv-write-hd { font-weight: 600; color: var(--text-dim); margin-bottom: 0.6rem; }
.rv-star-input { display: flex; gap: 0.2rem; margin-bottom: 0.7rem; }
.rv-star-btn {
  background: none; border: none; cursor: pointer; padding: 0 0.05rem;
  font-size: 1.5rem; line-height: 1; color: var(--text-faint); transition: color 0.1s ease;
}
.rv-star-btn:hover, .rv-star-btn.is-on { color: #f5b301; }
.rv-textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: var(--bg); color: var(--text); border: 1px solid var(--meta-border);
  border-radius: 8px; padding: 0.65rem 0.8rem; font: inherit; font-size: 0.92rem;
}
.rv-textarea:focus { outline: none; border-color: var(--accent); }
.rv-write-ft {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.9rem;
  margin-top: 0.7rem;
}
.rv-write-error { color: #f87171; font-size: 0.85rem; margin-right: auto; }
.rv-submit, .rv-signin-btn {
  background: var(--accent-fill); color: var(--on-fill); border: none; border-radius: 8px;
  padding: 0.55rem 1.1rem; font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.rv-submit:disabled { opacity: 0.55; cursor: default; }
.rv-cancel {
  background: none; border: 1px solid var(--meta-border); border-radius: 8px;
  padding: 0.55rem 1rem; font-weight: 600; font-size: 0.9rem; cursor: pointer;
  color: var(--text-muted);
}
.rv-cancel:hover { color: var(--text-bright); border-color: var(--accent-border); }
.rv-signin-prompt { margin-bottom: 1.5rem; }

/* Review cards */
.rv-list { display: flex; flex-direction: column; gap: 0.9rem; }
.rv-card {
  border: 1px solid var(--meta-border); border-radius: 10px;
  padding: 0.85rem 1rem; background: var(--meta-bg);
}
.rv-card-hd { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.rv-handle { font-weight: 600; color: var(--accent-text); font-size: 0.9rem; }
.rv-verified {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; margin-left: -0.15rem; border-radius: 50%;
  background: var(--accent-fill); color: var(--on-fill); font-size: 0.6rem; font-weight: 700;
}

/* One-time nudge to pick a custom handle */
.rv-handle-nudge {
  display: flex; align-items: center; gap: 0.6rem; justify-content: space-between;
  background: rgba(255, 246, 143,0.1); border: 1px solid var(--accent-border);
  border-radius: 8px; padding: 0.55rem 0.8rem; margin-bottom: 1rem;
  font-size: 0.85rem; color: var(--text-dim);
}
.rv-nudge-link { color: var(--accent-text); cursor: pointer; text-decoration: underline; }
.rv-nudge-dismiss {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 0.85rem; line-height: 1; flex-shrink: 0;
}
.rv-nudge-dismiss:hover { color: var(--text-bright); }

/* Profile page */
.profile-container { max-width: 720px; margin: 0 auto; padding: 2rem 1.5rem; }
.profile-account {
  display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 1.5rem;
}
.profile-email-label { font-size: 0.8rem; color: var(--text-muted); }
.profile-email { font-size: 1.05rem; font-weight: 600; color: var(--text-bright); }
.profile-signout-btn {
  margin-top: 1.5rem; background: none; color: var(--text-dim);
  border: 1px solid var(--meta-border); border-radius: 8px;
  padding: 0.6rem 1.3rem; font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
.profile-signout-btn:hover { color: #f87171; border-color: #f87171; }

/* Public profile (handle editor) card */
.rv-profile-card {
  background: var(--meta-bg); border: 1px solid var(--meta-border);
  border-radius: 10px; padding: 1.1rem 1.2rem; margin-bottom: 2rem;
}
.rv-profile-hd { font-weight: 700; color: var(--text-bright); margin-bottom: 0.7rem; }
.rv-profile-label { display: block; font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.rv-profile-row { display: flex; align-items: center; gap: 0.4rem; }
.rv-profile-at { color: var(--text-muted); font-weight: 600; }
.rv-profile-input {
  flex: 1; max-width: 260px; background: var(--bg); color: var(--text);
  border: 1px solid var(--meta-border); border-radius: 8px;
  padding: 0.5rem 0.7rem; font: inherit; font-size: 0.9rem;
}
.rv-profile-input:focus { outline: none; border-color: var(--accent); }
.rv-profile-save {
  background: var(--accent-fill); color: var(--on-fill); border: none; border-radius: 8px;
  padding: 0.5rem 1rem; font-weight: 600; font-size: 0.88rem; cursor: pointer;
}
.rv-profile-save:disabled { opacity: 0.55; cursor: default; }
.rv-profile-msg { margin-top: 0.6rem; font-size: 0.85rem; }
.rv-profile-msg.is-ok { color: #4ade80; }
.rv-profile-msg.is-err { color: #f87171; }
.rv-profile-verified { margin-top: 0.7rem; font-size: 0.82rem; color: var(--text-dim); display: flex; align-items: center; gap: 0.4rem; }
.rv-profile-unverified { margin-top: 0.7rem; font-size: 0.82rem; color: var(--text-muted); }
.rv-date { color: var(--text-muted); font-size: 0.78rem; margin-left: auto; }
.rv-save {
  background: none; border: none; cursor: pointer; font-size: 1.1rem; line-height: 1;
  color: var(--text-faint); padding: 0 0.1rem; transition: color 0.12s ease, transform 0.05s ease;
}
.rv-save:hover { color: var(--accent-text); }
.rv-save.is-on { color: var(--accent-text); }
.rv-save:active { transform: scale(0.9); }
.rv-saved-product {
  color: var(--accent-text); font-size: 0.82rem; cursor: pointer; margin-left: auto;
}
.rv-saved-product:hover { text-decoration: underline; }
/* When the saved-product link is present it takes the right slot, so the
   save button sits just after it rather than the date pushing fully right. */
.rv-card-hd .rv-saved-product + .rv-save { margin-left: 0.4rem; }
.rv-body { margin: 0.5rem 0 0.7rem; color: var(--text-dim); line-height: 1.55; white-space: pre-wrap; }
.rv-card-ft { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rv-votes { display: flex; align-items: center; gap: 0.4rem; }
.rv-vote {
  background: none; border: 1px solid var(--meta-border); border-radius: 6px;
  width: 1.7rem; height: 1.7rem; cursor: pointer; color: var(--text-muted);
  font-size: 0.75rem; display: flex; align-items: center; justify-content: center;
  transition: all 0.12s ease;
}
.rv-vote:hover { color: var(--text-bright); border-color: var(--accent-border); }
.rv-up.is-on { color: #4ade80; border-color: #4ade80; }
.rv-down.is-on { color: #f87171; border-color: #f87171; }
.rv-score { min-width: 1.4rem; text-align: center; font-weight: 600; color: var(--text-dim); }
.rv-owner-actions { display: flex; gap: 0.5rem; }
.rv-edit, .rv-delete {
  background: none; border: none; cursor: pointer; font-size: 0.8rem;
  color: var(--text-muted); padding: 0.2rem 0.3rem;
}
.rv-edit:hover { color: var(--accent-text); }
.rv-delete:hover { color: #f87171; }

/* ── Compare-page integration ── */
.compare-rv-agg { margin: 0.1rem 0 0.5rem; font-size: 0.85rem; color: var(--text-dim); }
.compare-rv-agg .compare-rv-stars { color: #f5b301; }
.compare-rv-agg strong { color: var(--text-bright); }
.compare-rv-count { color: var(--text-muted); }
.compare-rv-none, .compare-rv-loading { color: var(--text-muted); font-size: 0.8rem; }
.compare-reviews-open {
  display: block; margin: 1rem auto 0; padding: 0.6rem 1.3rem;
  background: var(--meta-bg); color: var(--text-dim);
  border: 1px solid var(--accent-border); border-radius: 8px;
  font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: all 0.12s ease;
}
.compare-reviews-open:hover { color: var(--text-bright); border-color: var(--accent); }

/* ── Compare reviews modal ── */
.rv-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
}
.rv-modal-box {
  background: var(--bg); border: 1px solid var(--meta-border); border-radius: 14px;
  width: min(1100px, 100%); max-height: 85vh; display: flex; flex-direction: column;
  overflow: hidden;
}
.rv-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.4rem; border-bottom: 1px solid var(--meta-border);
}
.rv-modal-hd h2 { margin: 0; font-size: 1.15rem; color: var(--text-bright); }
.rv-modal-close {
  background: none; border: none; color: var(--text-muted); font-size: 1.2rem;
  cursor: pointer; line-height: 1;
}
.rv-modal-close:hover { color: var(--text-bright); }
.rv-modal-cols {
  display: flex; gap: 1px; background: var(--meta-border);
  overflow: auto; flex: 1;
}
.rv-modal-col {
  flex: 1 1 0; min-width: 240px; background: var(--bg);
  display: flex; flex-direction: column;
}
.rv-modal-col-hd {
  padding: 0.9rem 1rem; border-bottom: 1px solid var(--meta-border);
  position: sticky; top: 0; background: var(--bg); z-index: 1;
}
.rv-modal-col-name { font-weight: 700; color: var(--text-bright); display: block; margin-bottom: 0.3rem; }
.rv-modal-col-summary { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
.rv-modal-col-body { padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.8rem; overflow-y: auto; }
.rv-modal-col-body .rv-card { background: var(--meta-bg); }

@media (max-width: 640px) {
  .rv-modal-cols { flex-direction: column; }
  .rv-modal-col { min-width: 0; }
}

/* ── NFX brand: green (accent) CTAs use dark NFX-Blue text ──
   Matches the guide's dark-on-green buttons and improves contrast vs white. */
.auth-primary-btn, .auth-google-btn, .rv-submit, .rv-signin-btn, .rv-profile-save,
.compare-run-btn, .compare-deeper-yes, .compare-followup-btn, .compare-pw-submit,
.find-ai-btn, .agent-pw-box button, .compare-reviews-open:hover {
  color: var(--on-fill);
}
/* buttons/labels weight for the mono stand-in */
.nav-auth-btn, .rv-submit, .rv-profile-save, .compare-run-btn, .find-ai-btn,
.auth-primary-btn { font-weight: 500; letter-spacing: 0.01em; }

/* ── Light-mode depth: white cards get a soft shadow so they lift off the
   off-blue background (fixes the flat/boring look). ── */
body.light .rv-card,
body.light .rv-write,
body.light .rv-profile-card,
body.light .compare-tool-card,
body.light .compare-deeper-thread .compare-deeper-item,
body.light .dash-fav-card,
body.light .dash-result-card,
body.light .detail-section,
body.light .all-product-card,
body.light .agent-msg,
body.light .rv-modal-box {
  box-shadow: 0 2px 10px rgba(3, 3, 48, 0.08);
}
body.light .hero h1 { text-shadow: none; }

/* ── Confirmation popup (e.g. deleting a review) ── */
.rv-confirm-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(1, 1, 18, 0.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.rv-confirm-box {
  background: var(--bg-alt); border: 1px solid var(--meta-border);
  border-radius: 14px; padding: 1.5rem 1.6rem; max-width: 360px; width: 100%;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.rv-confirm-msg { margin: 0 0 1.2rem; color: var(--text); font-size: 0.98rem; line-height: 1.5; }
.rv-confirm-actions { display: flex; justify-content: flex-end; gap: 0.7rem; }
.rv-confirm-cancel {
  background: none; border: 1px solid var(--meta-border); border-radius: 8px;
  padding: 0.5rem 1.1rem; font-weight: 600; font-size: 0.9rem; cursor: pointer;
  color: var(--text-dim);
}
.rv-confirm-cancel:hover { color: var(--text-bright); border-color: var(--accent-border); }
.rv-confirm-ok {
  background: #f87171; border: none; border-radius: 8px;
  padding: 0.5rem 1.1rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; color: #fff;
}
.rv-confirm-ok:hover { background: #ef4444; }

/* ── NFX corner logo (official wordmark, inlined SVG, recolors via currentColor) ── */
/* Fixed to the bottom-left so it stays on screen down a long page, and lifted clear of
   the footer by the same mechanism as the dev badge — see liftCornerMarks() in auth.js.
   Where the badge rises to clear the footer's top edge, this one rises *into* the footer
   and stops on the social strip's centre line at the opposite edge, so the row reads as
   NFX at one end and its links at the other. The footer grid's first column is left
   empty precisely so that line is free.
   `left` matches the footer's own 2rem side padding, which is what makes the wordmark
   and the strip look like a mirrored pair rather than two unrelated corner items.
   --logo-base and --logo-h are declared in px because the lift maths reads them back
   out; keeping them here lets the breakpoint below move the logo without the JS ever
   needing to know a breakpoint exists. */
.nfx-logo {
  --logo-base: 16px; --logo-h: 24px;
  position: fixed; bottom: calc(var(--logo-base) + var(--logo-lift, 0px));
  left: 2rem; z-index: 999;   /* above .site-footer — it now shares that band by design */
  display: block; color: var(--text-muted);
  opacity: 0.38; transition: opacity 0.2s, color 0.2s, bottom 0.12s ease-out;
}
.nfx-logo svg { height: var(--logo-h); width: auto; display: block; }
.nfx-logo:hover { opacity: 0.95; color: var(--accent-text); }
@media (max-width: 640px) { .nfx-logo { --logo-base: 11px; --logo-h: 22px; left: 0.9rem; } }
@media (prefers-reduced-motion: reduce) { .nfx-logo { transition: opacity 0.2s, color 0.2s; } }

/* ── Site footer: primary newsletter CTA + NFX social links ── */
/* One row, three columns: pitch left, button centre, social tiles right.
   The 1fr/auto/1fr track sizing is what keeps the button on the page's true
   centre line — the two flexible tracks always resolve equal, so the button
   does not drift when the pitch wraps or a fourth icon is added. */
.site-footer {
  /* Below the two fixed corner marks (both z-index 999): the wordmark deliberately sits
     inside this band on the strip's line, and the dev badge rides just above it. */
  position: relative; z-index: 998;
  flex-shrink: 0;                      /* never compress in the flex column */
  margin-top: 3rem;
  padding: 1.15rem 2rem;
  border-top: 1px solid var(--section-border);
  background: var(--bg-alt);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem 1.5rem;
}
/* Explicit column placement, so column 1 stays empty and the CTA is genuinely in the
   middle track. Without this the two children would flow into columns 1 and 2 and the
   button would sit left of centre. */
.site-footer-cta {
  grid-column: 2; justify-self: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
}
/* Small enough to stay on one line at desktop widths, which is what keeps the stack
   (button + gap + pitch ≈ 52px) shorter than the 60px icon strip — the strip stays the
   tallest thing in the row, so the footer keeps the height it had when the pitch sat
   beside the button rather than beneath it. */
.site-footer-pitch { color: var(--text-muted); font-size: 0.72rem; line-height: 1.35; margin: 0; text-align: center; }
.site-footer .footer-social { grid-column: 3; justify-self: end; }
/* Below ~860px the three columns cannot sit side by side without the pitch
   wrapping to three lines, so collapse to the centred stack. */
@media (max-width: 860px) {
  .site-footer { grid-template-columns: 1fr; justify-items: center; gap: 0.9rem; }
  .site-footer-cta { grid-column: auto; }
  .site-footer .footer-social { grid-column: auto; justify-self: center; }
}
.subscribe-btn {
  display: inline-block; background: var(--accent-fill); color: var(--on-fill);
  font-weight: 600; font-size: 0.9rem; padding: 0.5rem 1.15rem; border-radius: 9px;
  text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 3px rgba(255, 246, 143, 0.14);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.subscribe-btn:hover { transform: translateY(-1px); box-shadow: 0 0 0 4px rgba(255, 246, 143, 0.24); }
/* Social tiles: a single strip of squares. Each tile carries a full border and the
   -1px pull collapses each shared edge into one line, so the run reads as a grid
   rather than as separate boxes. Hover raises z-index so the lifted border draws
   over its neighbour instead of being half-covered by it. */
.footer-social { display: flex; align-items: center; justify-content: center; }
.footer-social a {
  position: relative; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--section-border);
  color: var(--text-muted); text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.footer-social a + a { margin-left: -1px; }
.footer-social a:hover { z-index: 1; color: var(--text); background: var(--section-border); border-color: var(--text-muted); }
.footer-social a:focus-visible { z-index: 1; outline: 2px solid var(--accent-text); outline-offset: -1px; color: var(--text); }
.footer-social svg { width: 18px; height: 18px; display: block; }
@media (prefers-reduced-motion: reduce) { .footer-social a { transition: none; } }

.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.82rem; font-family: var(--font-mono); }
.footer-links a:hover { color: var(--accent-text); }

/* ── "NFX ▾" nav dropdown ── */
.nav-dropdown { position: relative; list-style: none; display: flex; align-items: center; margin: 0 0.5rem 0 0.85rem; }
.nav-dropdown-toggle {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--nav-link); font-family: var(--font-mono); font-size: inherit;
  display: inline-flex; align-items: center; gap: 0.28rem;
}
.nav-dropdown-toggle:hover, .nav-dropdown.open .nav-dropdown-toggle { color: var(--nav-active-text); }
.nav-dropdown-caret { font-size: 0.7em; transition: transform 0.15s ease; }
.nav-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 0; margin-top: 0.5rem;
  min-width: 250px; padding: 0.4rem;
  background: var(--bg-alt); border: 1px solid var(--nav-border); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  display: none; flex-direction: column; z-index: 200;
}
.nav-dropdown.open .nav-dropdown-menu { display: flex; }
.nav-dropdown-item {
  display: flex; flex-direction: column; padding: 0.55rem 0.7rem; border-radius: 8px;
  color: var(--text); text-decoration: none; font-size: 0.85rem; font-family: var(--font-mono);
}
.nav-dropdown-item:hover { background: var(--nav-active-bg); }
.nav-dropdown-cta { color: var(--accent-text); font-weight: 600; margin-bottom: 0.15rem; }
.nav-dropdown-desc { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; font-weight: 400; }

/* ── Newsletter modal (reuses .auth-overlay / .auth-box) ── */
.nl-box { text-align: center; }
.nl-pitch { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0.5rem 0 1.3rem; }
.nl-subscribe { display: block; text-align: center; text-decoration: none; }
.nl-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1.15rem; }
.nl-links a { color: var(--text-muted); text-decoration: none; font-size: 0.82rem; font-family: var(--font-mono); }
.nl-links a:hover { color: var(--accent-text); }
.nl-later { display: block; margin: 1rem auto 0; background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 0.85rem; }
.nl-later:hover { color: var(--text-muted); }

/* ── Dark/black product logos get a white tile so they're visible on the navy
   background. The .logo-tile class is added by logo-tiles.js only to logos
   detected as dark. Dark mode only — dark logos read fine on the light bg. ── */
body:not(.light) .logo-tile {
  background: #ffffff;
  border: 1px solid rgba(3, 3, 48, 0.1);
}
body:not(.light) .detail-logo.logo-tile { padding: 5px; }
body:not(.light) .nfx-sc-fav.logo-tile { padding: 3px; }
body:not(.light) .pc-logo.logo-tile { padding: 4px; }
body:not(.light) .compare-tool-logo.logo-tile,
body:not(.light) .find-card-logo.logo-tile { padding: 3px; }
body:not(.light) .row-logo.logo-tile,
body:not(.light) .compare-dropdown-logo.logo-tile,
body:not(.light) .compare-chip-logo.logo-tile { padding: 2px; }
body:not(.light) .compare-task-card-logo.logo-tile { padding: 3px; }

/* Lifecycle tag chips are display-only (like the Free badge) — not clickable. */

/* ── Suggest-a-tool CTA buttons ── */
.suggest-cta {
  background: var(--accent-fill); color: var(--on-fill); border: none; border-radius: 8px;
  padding: 0.5rem 0.9rem; font-family: var(--font-mono); font-weight: 500; font-size: 0.85rem;
  cursor: pointer; white-space: nowrap; transition: filter 0.12s;
}
.suggest-cta:hover { filter: brightness(1.08); }
.dash-suggest-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--meta-bg); border: 1px solid var(--accent-border); border-radius: 10px;
  padding: 0.8rem 1.1rem; margin-bottom: 2rem; color: var(--text-dim); font-size: 0.92rem;
}

/* ── Suggest-a-tool page ── */
.suggest-container { max-width: 720px; margin: 0 auto; padding: 5rem 1.5rem 4rem; }
.suggest-intro { color: var(--text-dim); line-height: 1.6; margin-bottom: 1.5rem; }
.suggest-intro .req, .suggest-label .req { color: var(--accent-text); font-weight: 700; }
.suggest-group {
  border: 1px solid var(--meta-border); border-radius: 12px; padding: 1.2rem 1.3rem 1.4rem;
  margin: 0 0 1.4rem; background: var(--meta-bg);
}
.suggest-group legend {
  padding: 0 0.5rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-text);
}
.suggest-label { display: block; margin-bottom: 1rem; color: var(--text-dim); font-size: 0.9rem; font-weight: 500; }
.suggest-label:last-child { margin-bottom: 0; }
.suggest-input {
  display: block; width: 100%; box-sizing: border-box; margin-top: 0.35rem;
  background: var(--bg); color: var(--text); border: 1px solid var(--meta-border);
  border-radius: 8px; padding: 0.6rem 0.75rem; font: inherit; font-size: 0.92rem; resize: vertical;
}
.suggest-input:focus { outline: none; border-color: var(--accent); }
.suggest-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.suggest-row .suggest-label { flex: 1 1 240px; }
.suggest-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; margin-top: 0.5rem; }
.suggest-check {
  display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 400;
  color: var(--text); cursor: pointer; font-size: 0.9rem;
}
.suggest-check input { accent-color: var(--accent); }
.suggest-footer { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; margin-top: 0.5rem; }
.suggest-error { color: #f87171; font-size: 0.85rem; margin-right: auto; }
.suggest-submit {
  background: var(--accent-fill); color: var(--on-fill); border: none; border-radius: 8px;
  padding: 0.7rem 1.4rem; font-weight: 600; font-size: 0.95rem; cursor: pointer;
}
.suggest-submit:disabled { opacity: 0.55; cursor: default; }
.suggest-done { text-align: center; padding: 3rem 1rem; }
.suggest-done-check {
  width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--accent-fill); color: var(--on-fill); font-size: 1.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.suggest-done h2 { font-family: var(--font-display); color: var(--text-bright); margin-bottom: 0.5rem; }
.suggest-done p { color: var(--text-dim); margin-bottom: 1.5rem; line-height: 1.6; }

/* ── Dev panel: suggestions inbox ── */
.dev-suggest-card {
  border: 1px solid var(--meta-border); border-radius: 10px; padding: 0.9rem 1.1rem;
  margin-bottom: 0.9rem; background: var(--meta-bg);
}
.dev-suggest-hd { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.dev-suggest-name { font-weight: 700; color: var(--text-bright); text-decoration: none; }
.dev-suggest-name:hover { color: var(--accent-text); }
.dev-suggest-cat { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); }
.dev-suggest-dismiss {
  margin-left: auto; background: none; border: 1px solid var(--meta-border); border-radius: 6px;
  color: var(--text-muted); font-size: 0.78rem; padding: 0.25rem 0.6rem; cursor: pointer;
}
.dev-suggest-dismiss:hover { color: #f87171; border-color: #f87171; }
.dev-suggest-summary { color: var(--text-dim); margin: 0.5rem 0 0.6rem; line-height: 1.5; }
.dev-suggest-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; align-items: center; }
.dev-suggest-chip {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted);
  border: 1px solid var(--meta-border); border-radius: 5px; padding: 0.1rem 0.4rem;
}
.dev-suggest-field { font-size: 0.85rem; color: var(--text-dim); margin: 0.3rem 0; line-height: 1.5; }
.dev-suggest-field strong { color: var(--text); }
.dev-suggest-by { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.6rem; }

/* ── Find a Tool: mode toggle + Early Stage Automation Ideator ── */
/* flex-wrap + justify-content because "Early Stage Automation Ideator" is a much wider
   label than the "Startup Optimizer" it replaced — without wrapping, the three pills
   overflow the pill container at tablet widths instead of stacking. */
.find-mode-toggle {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem;
  max-width: 100%; margin: 0 auto 1.25rem; padding: 0.3rem;
  background: var(--meta-bg); border: 1px solid var(--meta-border); border-radius: 999px;
}
.find-mode-btn {
  background: none; border: none; cursor: pointer; border-radius: 999px;
  padding: 0.55rem 1.25rem; font-family: var(--font-mono); font-size: 0.94rem; font-weight: 500;
  color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.4rem; transition: all 0.15s;
}
.find-mode-btn.active { background: var(--accent-fill); color: var(--on-fill); }
.find-mode-beta {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  background: rgba(255,246,143,0.2); color: var(--accent); border-radius: 4px; padding: 0.05rem 0.3rem;
}
.find-mode-btn.active .find-mode-beta { background: rgba(3,3,48,0.15); color: var(--on-fill); }
.find-disclaimer {
  max-width: 720px;
  margin: 0.9rem auto 0;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  text-align: left;
  background: var(--meta-bg);
  border: 1px solid var(--meta-border);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.find-disclaimer-icon { flex-shrink: 0; font-size: 0.95rem; line-height: 1.45; }

.find-opt-profile { margin-bottom: 2rem; }
.find-opt-profile-hd { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.find-opt-profile-hd a { color: var(--accent-text); }
.find-opt-thin { color: var(--accent-2); }
.find-opt-profile p { color: var(--text); font-size: 1.02rem; line-height: 1.6; }
.find-opt-loading { color: var(--text-dim); font-size: 0.95rem; padding: 1rem 0; }

.find-opt-flow { margin-bottom: 2rem; }
.find-opt-flow-hd { display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.8rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--section-border); }
.find-opt-flow-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: var(--text-bright); }
.find-opt-flow-why { color: var(--text-muted); font-size: 0.88rem; }

/* ============================================================
   RESPONSIVE LAYER — narrow desktop windows & phones
   (appended last so these win at matching breakpoints)
   ============================================================ */

/* Never let media overflow its container */
img, svg, video { max-width: 100%; }

/* ── Nav: compact, single-line, horizontally scrollable so links
      never overflow or wrap under the fixed 60px bar ── */
@media (max-width: 760px) {
  header { padding: 0 0.6rem; }
  nav { gap: 0.4rem; }
  .theme-toggle { margin-right: 0.35rem; }
  nav ul {
    flex: 1 1 auto; min-width: 0; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 0.05rem;
  }
  nav ul::-webkit-scrollbar { display: none; }
  nav ul li { flex: 0 0 auto; }
  nav ul li a { padding: 0.4rem 0.5rem; font-size: 0.8rem; white-space: nowrap; }
  .nav-auth-btn { flex: 0 0 auto; padding: 0.4rem 0.6rem; font-size: 0.78rem; }
}

/* ── General mobile: trim oversized padding, collapse wide grids ── */
@media (max-width: 640px) {
  .hero { padding: 4.75rem 1.1rem 1.5rem; }
  .map-controls { padding: 4.5rem 1rem 0; gap: 0.45rem; }

  /* Products toolbar: search takes its own full-width line */
  .map-controls #product-search { flex: 1 1 100%; order: 6; }
  .filter-btns { margin-left: 0; }
  .filter-count { width: 100%; order: 5; }
  .map-controls .suggest-cta { order: 4; }

  /* Grids whose min column is wider than a phone → single column */
  .compare-ai-grid, .news-grid { grid-template-columns: 1fr; }
  .prod-grid, .find-grid, .find-suite-grid { grid-template-columns: 1fr; }

  /* Section containers that hard-code side padding */
  #find-container, #compare-container,
  .dashboard-container, .profile-container, .suggest-container,
  .dev-container { padding-left: 1rem; padding-right: 1rem; }
  .detail-page { padding-left: 1rem; padding-right: 1rem; }

  /* Detail hero: keep logo small, let name/desc use the width */
  .detail-logo { width: 52px; height: 52px; }

  /* Three-way toggles (Discover modes) — shrink + allow scroll */
  .find-mode-toggle {
    display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none;
    margin: 0 0 1.1rem; align-self: center;
  }
  .find-mode-toggle::-webkit-scrollbar { display: none; }
  .find-mode-btn { flex: 0 0 auto; padding: 0.5rem 0.8rem; font-size: 0.82rem; }

  /* Compare search + button stack */
  .compare-action-row { flex-direction: column; align-items: stretch; }

  /* AI chat panel fits the screen */
  #agent-panel { width: min(360px, calc(100vw - 1.5rem)); right: 0.75rem; }

  /* Titles that could get oversized */
  .find-title, .compare-title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}

/* ── Small phones ── */
@media (max-width: 400px) {
  .hero h1 { font-size: clamp(1.7rem, 9vw, 2.4rem); }
  nav ul li a { padding: 0.4rem 0.42rem; font-size: 0.76rem; }
  .theme-toggle { padding: 0.3rem; }
  .find-mode-btn { padding: 0.45rem 0.6rem; font-size: 0.78rem; }
}

/* ── Discover: loading states ─────────────────────────────────────────────────
   The agent calls behind Discover routinely run 10–30s. They previously showed
   only static text ("Thinking…", "Designing your suite…"), which is
   indistinguishable from a hung request — the page looked broken precisely when
   it was working hardest.

   Reuses the compare-spin keyframe so both surfaces spin identically. */
.find-loading {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--text-dim);
  font-size: 0.95rem;
  padding: 1rem 0;
}
.find-loading-spinner {
  animation: compare-spin 0.9s linear infinite;
  flex-shrink: 0;
  color: var(--accent-text);
}
/* Respect a stated preference for less motion: keep the affordance, drop the
   spin, so the indicator is still visible without animating. */
@media (prefers-reduced-motion: reduce) {
  .find-loading-spinner { animation: none; opacity: 0.7; }
}

/* Appears only once a request passes the slow threshold, so a fast response
   never flashes reassurance text the user did not need. */
.find-loading-note {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  opacity: 0;
  animation: find-note-in 0.4s ease forwards;
}
@keyframes find-note-in { to { opacity: 1; } }

/* Inline spinner for the buttons, mirroring .compare-run-spinner. */
.find-btn-spinner {
  display: inline-block;
  vertical-align: -2px;
  margin-right: 0.4rem;
  animation: compare-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .find-btn-spinner { animation: none; }
}

/* Follow-up "Thinking…" bubbles get the same treatment. */
.find-wf-a-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Dev Panel · Reports tab ────────────────────────────────────────────────
   The agent run reports. Two views in one tab: a dense list, and a reader.

   The reader deliberately sets its own type scale rather than inheriting the
   panel's. Everything else in the Dev Panel is UI — cards, counts, buttons —
   but this is prose, several thousand words of it, and prose at the panel's
   0.875rem UI size with UI line-height is genuinely hard to read. */
.dev-report-filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin: 0 0 1rem;
}
.dev-report-chip {
  padding: 0.3rem 0.75rem; border-radius: 999px;
  border: 1px solid var(--section-border);
  background: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.8125rem;
  transition: all 0.15s;
}
.dev-report-chip:hover { color: var(--text); }
.dev-report-chip.active {
  background: var(--nav-active-bg);
  border-color: var(--accent-border);
  color: var(--accent-text);
}

.dev-report-list { display: flex; flex-direction: column; gap: 0.25rem; }
.dev-report-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  gap: 1rem; align-items: baseline;
  width: 100%; text-align: left;
  padding: 0.6rem 0.75rem; border-radius: 8px;
  border: 1px solid transparent;
  background: none; cursor: pointer;
  font-size: 0.875rem; color: var(--text);
  transition: all 0.15s;
}
.dev-report-row:hover {
  background: var(--nav-active-bg);
  border-color: var(--accent-border);
}
.dev-report-date  { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 0.8125rem; }
.dev-report-title { color: var(--text); }
.dev-report-meta  { color: var(--text-muted); font-size: 0.75rem; white-space: nowrap; }

.dev-report-back {
  margin-bottom: 1rem; padding: 0.35rem 0.8rem;
  border-radius: 8px; border: 1px solid var(--section-border);
  background: none; cursor: pointer;
  color: var(--text-muted); font-size: 0.8125rem;
}
.dev-report-back:hover { color: var(--accent-text); border-color: var(--accent-border); }

.dev-report-body {
  display: block; max-width: 62rem;
  font-size: 0.9375rem; line-height: 1.65; color: var(--text);
}
.dev-report-body h1 { font-size: 1.375rem; font-weight: 400; color: var(--text-bright); margin: 0 0 0.75rem; }
.dev-report-body h2 { font-size: 1.125rem; font-weight: 400; color: var(--text-bright); margin: 2rem 0 0.5rem;
                      padding-top: 0.75rem; border-top: 1px solid var(--section-border); }
.dev-report-body h3 { font-size: 1rem;     font-weight: 500; color: var(--accent-text); margin: 1.5rem 0 0.4rem; }
.dev-report-body h4,
.dev-report-body h5,
.dev-report-body h6 { font-size: 0.9375rem; font-weight: 600; color: var(--text-bright); margin: 1.25rem 0 0.35rem; }
.dev-report-body p  { margin: 0 0 0.85rem; }
.dev-report-body ul,
.dev-report-body ol { margin: 0 0 0.85rem; padding-left: 1.5rem; }
.dev-report-body li { margin-bottom: 0.3rem; }
.dev-report-body strong { color: var(--text-bright); font-weight: 600; }
.dev-report-body a { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--accent-border); }
.dev-report-body a:hover { border-bottom-color: var(--accent-text); }
.dev-report-body hr { border: 0; border-top: 1px solid var(--section-border); margin: 1.5rem 0; }
.dev-report-body blockquote {
  margin: 0 0 0.85rem; padding: 0.5rem 0 0.5rem 1rem;
  border-left: 2px solid var(--accent-border); color: var(--text-muted);
}
.dev-report-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125em; padding: 0.1em 0.35em; border-radius: 4px;
  background: var(--nav-active-bg); color: var(--accent-text);
  /* Product ids and long pricing strings must not push the panel sideways. */
  overflow-wrap: anywhere;
}

/* Reports carry real tables — 199 rows across the corpus — and some are wide.
   Scroll the table inside its own box rather than the whole page. */
.dev-report-tablewrap { overflow-x: auto; margin: 0 0 1rem; }
.dev-report-table { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
.dev-report-table th,
.dev-report-table td {
  text-align: left; vertical-align: top;
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--section-border);
}
.dev-report-table th { color: var(--text-bright); font-weight: 500; white-space: nowrap; }
.dev-report-table td { color: var(--text); }

@media (max-width: 700px) {
  .dev-report-row { grid-template-columns: 1fr; gap: 0.15rem; }
  .dev-report-meta { white-space: normal; }
}