/* =========================================================================
   AgentSiteScore — Shared Components
   Top nav, sidebar, cards, stat tiles, buttons. Used by /home, /, report.
   ========================================================================= */

/* ================== TOP NAV ================== */
.topnav {
  height: var(--nav-h);
  background: var(--card);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 40;
}
.topnav-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 18px; color: var(--ink);
  flex-shrink: 0;
}
.topnav-brand .brand-mark {
  width: 28px; height: 28px;
  background: var(--brand);
  border-radius: 8px;
}
.topnav-search {
  position: relative;
  flex: 1;
  max-width: 720px;
}
.topnav-search input {
  width: 100%;
  height: 40px;
  padding: 0 44px 0 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: 14px;
  color: var(--ink);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.topnav-search input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--card);
}
.topnav-search .search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--muted-light); pointer-events: none;
}
.topnav-search .search-kbd {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--muted-light);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 6px; font-family: monospace;
  pointer-events: none;
}

.topnav-actions { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.topnav-hamburger {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  color: var(--ink);
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.topnav-hamburger:hover { background: var(--bg); }
.topnav-link {
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  transition: color var(--t-fast);
}
.topnav-link:hover { color: var(--ink); }

.btn-primary {
  background: var(--brand); color: #fff;
  font-weight: 700; font-size: 14px;
  padding: 9px 18px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--t-fast);
}
.btn-primary:hover { background: var(--brand-dark); }

.btn-ghost {
  background: var(--card); color: var(--ink-soft);
  font-weight: 600; font-size: 13px;
  padding: 8px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.btn-ghost:hover { background: var(--bg); border-color: var(--border-strong); }

.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-purple); color: #fff;
  font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
}
.user-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  min-width: 220px; padding: 8px;
  display: none; z-index: 60;
}
.user-menu.open { display: block; }
.user-menu-item {
  display: block; padding: 10px 12px;
  font-size: 14px; color: var(--ink);
  border-radius: 8px; cursor: pointer;
}
.user-menu-item:hover { background: var(--bg); }
.user-menu-divider { height: 1px; background: var(--border); margin: 6px 0; }

/* ================== APP SHELL ================== */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--nav-h));
}
.main-content {
  padding: 28px var(--content-pad-x) 80px;
  max-width: var(--content-max);
  width: 100%;
}

/* ================== LEFT SIDEBAR ================== */
.sidebar {
  background: var(--card);
  border-right: 1px solid var(--border);
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow-y: auto;
}
.sidebar-item {
  width: 48px;
  padding: 10px 4px;
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  text-align: center;
}
.sidebar-item i { font-size: 16px; }
.sidebar-item:hover { background: var(--bg); color: var(--ink); }
.sidebar-item.active { color: var(--brand); background: var(--brand-tint); }
.sidebar-divider {
  width: 32px; height: 1px;
  background: var(--border);
  margin: 10px 0;
}

/* ================== AGENTSCOREAI COPILOT STRIP ================== */
.copilot-strip {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.copilot-left { display: flex; align-items: center; gap: 14px; }
.copilot-badge {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--accent-purple);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.copilot-title {
  font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.ai-tag {
  font-size: 10px; font-weight: 800;
  color: var(--accent-purple);
  background: var(--accent-purple-tint);
  padding: 3px 8px; border-radius: var(--r-pill);
  letter-spacing: 0.05em;
}
.copilot-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* First-scan welcome banner — shown at top of /home when user has 0 scans */
#first-scan-banner {
  background: linear-gradient(135deg, var(--brand-tint) 0%, var(--accent-tint) 120%);
  border: 1px solid #bbf7d0;
  border-radius: var(--r-lg);
  padding: 16px 20px;
  margin-bottom: 16px;
}
#first-scan-banner .first-scan-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
#first-scan-banner .first-scan-text {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
}
#first-scan-banner .first-scan-text strong {
  font-size: 15px;
  color: var(--ink);
}
#first-scan-banner .first-scan-text span {
  color: var(--ink-soft);
}
#first-scan-banner .first-scan-cta {
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 768px) {
  #first-scan-banner { padding: 14px 16px; }
  #first-scan-banner .first-scan-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  #first-scan-banner .first-scan-cta {
    width: 100%;
    justify-content: center;
  }
}

/* ================== AGENTSCOREAI RECS PANEL ================== */
.rec-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 20px 22px;
  margin-bottom: 16px;
  display: none;
}
.rec-panel.open { display: block; animation: recFadeIn 0.25s ease; }
@keyframes recFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rec-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.rec-panel-title {
  font-weight: 800;
  font-size: 15px;
  color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.rec-panel-meta { font-size: 11px; color: var(--muted); }
.rec-panel-close {
  color: var(--muted); cursor: pointer;
  padding: 6px 10px; border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.rec-panel-close:hover { background: var(--bg); color: var(--ink); }

.rec-list { display: flex; flex-direction: column; gap: 10px; }
.rec-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  align-items: start;
}
.rec-item:hover {
  border-color: var(--accent-purple);
  box-shadow: 0 4px 14px rgba(139,92,246,0.08);
}
.rec-impact {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, #a78bfa, var(--accent-purple));
  color: #fff;
  font-weight: 800; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rec-impact small { font-size: 9px; font-weight: 700; opacity: 0.85; letter-spacing: 0.06em; }
.rec-body { min-width: 0; }
.rec-title {
  font-weight: 700; font-size: 14px; color: var(--ink);
  margin-bottom: 4px;
}
.rec-why {
  font-size: 13px; color: var(--muted);
  line-height: 1.5; margin-bottom: 6px;
}
.rec-action {
  font-size: 12.5px; color: var(--ink-soft);
  background: var(--bg);
  border-left: 3px solid var(--accent-purple);
  padding: 8px 12px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.rec-section-chip {
  font-size: 10px; font-weight: 800;
  color: var(--accent-purple);
  background: var(--accent-purple-tint);
  padding: 4px 10px; border-radius: var(--r-pill);
  letter-spacing: 0.06em; text-transform: uppercase;
  flex-shrink: 0; align-self: start;
  white-space: nowrap;
}

/* Pro-upgrade teaser (shown when /api/agentscore_ai returns 402) */
.rec-teaser {
  padding: 28px 24px;
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
}
.rec-teaser-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  background: var(--accent-purple-tint);
  color: var(--accent-purple);
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 20px;
  margin-bottom: 14px;
}
.rec-teaser-title {
  font-size: 18px; font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
}
.rec-teaser-body {
  font-size: 14px; color: var(--muted);
  line-height: 1.55;
  margin-bottom: 16px;
}
.rec-teaser-perks {
  list-style: none;
  padding: 0; margin: 0 auto 20px;
  display: inline-flex; flex-direction: column;
  gap: 8px;
  text-align: left;
}
.rec-teaser-perks li {
  display: flex; align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-soft);
}
.rec-teaser-perks li i {
  color: var(--brand);
  font-size: 10px;
  padding: 4px;
  background: var(--brand-tint);
  border-radius: 50%;
  margin-top: 2px;
}
.rec-teaser-cta {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background var(--t-fast);
}
.rec-teaser-cta:hover { background: var(--brand-dark); }
.rec-teaser-fine {
  font-size: 12px;
  color: var(--muted-light);
  margin-top: 12px;
}

.rec-loading, .rec-error, .rec-empty {
  padding: 28px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.rec-loading .spinner {
  width: 24px; height: 24px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent-purple);
  border-radius: 50%;
  animation: recSpin 0.8s linear infinite;
  margin: 0 auto 10px;
}
@keyframes recSpin { to { transform: rotate(360deg); } }
.rec-error { color: var(--accent-red); }

.copilot-toggle-btn[data-open="true"] i.fa-chevron-down { transform: rotate(180deg); }
.copilot-toggle-btn i.fa-chevron-down { transition: transform var(--t-fast); }

@media (max-width: 768px) {
  .rec-item { grid-template-columns: 40px 1fr; grid-template-rows: auto auto; }
  .rec-section-chip { grid-column: 2; margin-top: 4px; }
  .rec-impact { width: 40px; height: 40px; font-size: 16px; }
}

/* ================== CATEGORY CARDS (6-up grid) ================== */
/* Wrapper provides a positioning context for the right-edge scroll
   affordance. On narrow viewports the .category-row switches to a
   horizontally-scrollable strip, and .category-row-hint fades in so
   the user knows there's more content off-screen. */
.category-row-wrap { position: relative; margin-bottom: 28px; }
.category-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.category-row-hint {
  display: none;
  position: absolute;
  top: -22px;
  right: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.9;
  transition: opacity var(--t-fast);
  pointer-events: none;
}
.cat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform 0.1s;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 148px;
}
.cat-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}
.cat-card .icon-wrap {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
  margin-bottom: 14px;
}
.cat-card .cat-title {
  font-weight: 700; font-size: 15px;
  color: var(--ink);
  margin-bottom: 6px;
}
.cat-card .cat-desc {
  font-size: 13px; color: var(--muted);
  line-height: 1.5;
}
.cat-card .for-you-tag {
  position: absolute; top: 14px; right: 14px;
  font-size: 10px; font-weight: 800;
  color: var(--accent-purple);
  background: var(--accent-purple-tint);
  padding: 3px 8px; border-radius: var(--r-pill);
  letter-spacing: 0.05em;
}

/* Tone-tinted icon wrappers */
.cat-card.tone-ai .icon-wrap     { background: var(--accent-purple-tint); color: var(--accent-purple); }
.cat-card.tone-amber .icon-wrap  { background: var(--accent-amber-tint); color: var(--accent-amber); }
.cat-card.tone-blue .icon-wrap   { background: var(--accent-tint); color: var(--accent); }
.cat-card.tone-green .icon-wrap  { background: var(--brand-tint); color: var(--brand); }
.cat-card.tone-indigo .icon-wrap { background: var(--accent-indigo-tint); color: var(--accent-indigo); }
.cat-card.tone-pink .icon-wrap   { background: var(--accent-pink-tint); color: var(--accent-pink); }

/* ================== FOLDERS / MY SITES ================== */
.folders-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.folders-title {
  font-size: 18px; font-weight: 800; color: var(--ink);
}
.folders-actions { display: flex; gap: 10px; }

.folder-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 18px 22px;
  margin-bottom: 12px;
  transition: box-shadow var(--t-fast);
}
.folder-card:hover { box-shadow: var(--shadow-md); }

.folder-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.folder-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.folder-globe {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.folder-site-name {
  font-weight: 600; color: var(--accent);
  font-size: 15px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.folder-site-name:hover { text-decoration: underline; }
.folder-site-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.folder-menu {
  color: var(--muted); cursor: pointer;
  padding: 6px; border-radius: var(--r-sm);
  transition: background var(--t-fast);
}
.folder-menu:hover { background: var(--bg); color: var(--ink); }

.folder-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  padding-top: 6px;
}
.stat-cell { display: flex; flex-direction: column; gap: 4px; }
.stat-label {
  font-size: 10px; font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stat-value {
  font-size: 22px; font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
}
.stat-value.muted { color: var(--muted-light); font-weight: 600; }
.stat-value.green { color: var(--brand); }
.stat-value.amber { color: var(--accent-amber); }
.stat-value.red   { color: var(--accent-red); }
.stat-value.blue  { color: var(--accent); }
.stat-sub { font-size: 11px; color: var(--muted); }
.info-tip { color: var(--muted-light); font-size: 10px; cursor: help; }

/* ================== EMPTY STATE ================== */
.empty-state {
  background: var(--card);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  padding: 48px 24px;
  text-align: center;
  color: var(--muted);
}
.empty-state i { font-size: 32px; color: var(--muted-light); display: block; margin-bottom: 12px; }
.empty-state .btn-primary { margin-top: 16px; }

/* ================== LEGAL PAGES (Terms, Privacy) ================== */
.legal-page {
  max-width: 760px;
  margin: 40px auto 60px;
  padding: 0 24px;
  color: var(--ink-soft);
  line-height: 1.65;
  font-size: 15px;
}
.legal-page h1 {
  font-size: 32px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.legal-page .legal-meta {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 28px;
}
.legal-page h2 {
  font-size: 20px; font-weight: 700;
  color: var(--ink);
  margin: 32px 0 10px;
}
.legal-page h3 {
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  margin: 20px 0 6px;
}
.legal-page p, .legal-page ul, .legal-page ol {
  margin: 0 0 14px;
}
.legal-page ul, .legal-page ol {
  padding-left: 22px;
}
.legal-page ul li, .legal-page ol li {
  margin-bottom: 6px;
}
.legal-page a {
  color: var(--accent);
  text-decoration: underline;
}
.legal-page a:hover { color: var(--brand); }
.legal-page code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 13px;
  color: var(--ink);
}
.legal-page address {
  font-style: normal;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 10px 0 18px;
}
.legal-page .legal-return {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
/* All-caps legal blocks (disclaimers, liability caps). Tighten letter-
   spacing and slightly smaller so they don't shout at the reader. */
.legal-page .legal-caps,
.legal-page .legal-caps li {
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ================== SITE FOOTER ================== */
.site-footer {
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 22px 24px;
  margin-top: 60px;
}
.site-footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--muted);
}
.site-footer-copyright { flex-shrink: 0; }
.site-footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.site-footer-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--t-fast);
}
.site-footer-links a:hover { color: var(--ink); }
@media (max-width: 640px) {
  .site-footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}

/* ================== PRICING PAGE ================== */
.pricing-hero {
  text-align: center;
  max-width: 760px;
  margin: 40px auto 0;
  padding: 0 20px;
}
.pricing-eyebrow {
  font-size: 12px; font-weight: 800;
  color: var(--brand);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.pricing-title {
  font-size: 40px; font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
  margin: 0 0 14px;
}
.pricing-sub {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1100px;
  margin: 48px auto 60px;
  padding: 0 20px;
}
.price-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card.featured {
  border-color: var(--brand);
  box-shadow: 0 12px 32px rgba(16,185,129,0.12);
  transform: translateY(-6px);
}
.price-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  font-size: 11px; font-weight: 800;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.price-tier {
  font-size: 14px; font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.price-amount {
  display: flex; align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.price-amount .dollar {
  font-size: 22px; font-weight: 700;
  color: var(--ink);
  align-self: flex-start;
  margin-top: 8px;
}
.price-amount .number {
  font-size: 54px; font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
.price-amount .cents {
  font-size: 18px; font-weight: 600;
  color: var(--muted);
}
.price-amount .period {
  font-size: 14px; font-weight: 600;
  color: var(--muted);
  margin-left: 2px;
}
.price-tagline {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 20px;
  min-height: 42px;
  line-height: 1.45;
}
.price-features {
  list-style: none;
  padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column;
  gap: 12px;
}
.price-features li {
  display: flex; align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.45;
}
.price-features li i.fa-check {
  color: var(--brand);
  font-size: 12px;
  padding: 4px;
  background: var(--brand-tint);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}
.price-features li.dim {
  color: var(--muted-light);
}
.price-features li.dim i.fa-minus {
  color: var(--muted-light);
  font-size: 12px;
  padding: 4px;
  background: var(--bg);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}
.price-cta {
  margin-top: auto;
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 18px;
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  border: 1px solid transparent;
}
.price-cta.primary { background: var(--brand); color: #fff; }
.price-cta.primary:hover { background: var(--brand-dark); }
.price-cta.ghost {
  background: var(--card);
  color: var(--ink);
  border-color: var(--border-strong);
}
.price-cta.ghost:hover { background: var(--bg); }
.price-cta.disabled {
  background: var(--bg);
  color: var(--muted);
  cursor: default;
}
.price-fine {
  font-size: 12px;
  color: var(--muted-light);
  margin-top: 10px;
  text-align: center;
}

.pricing-faq {
  max-width: 820px;
  margin: 20px auto 80px;
  padding: 0 20px;
}
.pricing-faq h2 {
  font-size: 24px; font-weight: 800;
  color: var(--ink);
  text-align: center;
  margin: 0 0 28px;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 18px 22px;
  margin-bottom: 10px;
}
.faq-q {
  font-weight: 700;
  color: var(--ink);
  font-size: 15px;
  margin: 0 0 6px;
}
.faq-a {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: 1fr; max-width: 480px; }
  .price-card.featured { transform: none; }
  .pricing-title { font-size: 32px; }
}
@media (max-width: 560px) {
  .pricing-hero { margin-top: 24px; }
  .pricing-eyebrow { font-size: 11px; }
  .pricing-title { font-size: 26px; }
  .pricing-sub { font-size: 15px; }
  .pricing-grid { margin: 32px auto 40px; gap: 14px; padding: 0 16px; }
  .price-card { padding: 24px 20px; }
  .price-amount .number { font-size: 44px; }
  .price-tagline { min-height: 0; font-size: 13px; }
  .price-features li { font-size: 13px; }
  .pricing-faq { margin: 10px auto 40px; padding: 0 16px; }
  .pricing-faq h2 { font-size: 20px; }
  .faq-item { padding: 14px 16px; }
}

/* ================== RESPONSIVE ================== */
/* Any viewport narrower than where the full 6-card row fits naturally
   gets a horizontal scroll strip with a right-edge fade + "scroll for
   more" hint. QA requested 1280px; 1100px matches our existing layout
   token and the point at which the grid cards start getting cramped. */
@media (max-width: 1100px) {
  .folder-stats { grid-template-columns: repeat(3, 1fr); gap: 14px; }

  /* Right-edge fade gradient so users can tell the strip extends off-
     screen. The .is-end modifier (toggled from home.js) hides the
     gradient once the user has scrolled all the way. */
  .category-row-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 72px;
    background: linear-gradient(to right, rgba(245,246,250,0), var(--bg) 80%);
    pointer-events: none;
    transition: opacity var(--t-fast);
  }
  .category-row-wrap.is-end::after { opacity: 0; }
  .category-row-hint { display: block; }
  .category-row-wrap.is-end .category-row-hint { opacity: 0; }

  .category-row {
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }
  .cat-card { scroll-snap-align: start; min-height: 140px; }
}
@media (max-width: 768px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main-content { padding: 20px 16px 60px; }
  .topnav { padding: 0 12px; gap: 12px; }
  .topnav-search { display: none; }
  .folder-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  /* Tile strip: show 1 card + peek of next so scrollability is obvious
     without having to swipe blindly. 86% with horizontal padding inside
     the strip means the next card just peeks past the right edge. */
  .category-row {
    grid-auto-columns: 86%;
    scroll-padding-left: 16px;
  }
  .cat-card {
    padding: 16px;
    min-height: 130px;
  }
  .cat-card .cat-title { font-size: 15px; margin-bottom: 4px; }
  .cat-card .cat-desc {
    font-size: 12.5px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  /* Fix Queue banner: stack badge/title/button vertically on mobile so
     the "Open" button doesn't get pushed off-screen and long titles
     don't wrap weirdly. */
  .copilot-strip {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
    gap: 12px;
  }
  .copilot-left {
    gap: 12px;
    min-width: 0; /* allow children to shrink below their intrinsic width */
  }
  /* The unnamed text-column div inside copilot-left (between badge and
     button) has no class; target it via its position as the last flex
     child of copilot-left. Without min-width:0 here, long descriptions
     force the banner to overflow the viewport. */
  .copilot-left > div:last-child { min-width: 0; flex: 1; }
  .copilot-badge { width: 36px; height: 36px; flex-shrink: 0; }
  .copilot-title {
    flex-wrap: wrap;
    font-size: 15px;
    gap: 6px;
  }
  .copilot-title,
  .copilot-desc,
  .copilot-sub {
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }
  .ai-tag { font-size: 9px; padding: 2px 6px; }
  .copilot-sub, .copilot-desc { font-size: 12px; }
  .copilot-toggle-btn { width: 100%; justify-content: center; }

  /* Folder cards: tighter layout, smaller label font, hide the
     last-scanned subtitle if cramped. */
  .folder-card { padding: 14px 16px; }
  .folder-head { margin-bottom: 10px; }
  .folder-site-name { font-size: 14px; }
  .folder-site-sub { font-size: 11px; }
  .stat-label { font-size: 9px; }
  .stat-value { font-size: 18px; }
  .stat-sub { font-size: 10px; }

  /* Recommendations panel: tighter padding, smaller text */
  .rec-panel { padding: 16px 18px; }
  .rec-panel-title { font-size: 13px; }
  .rec-item { grid-template-columns: 44px 1fr; padding: 12px 14px; }
  .rec-section-chip { display: none; }
  .rec-impact { width: 40px; height: 40px; font-size: 15px; }
  .rec-title { font-size: 13px; }
  .rec-why { font-size: 12px; }
  .rec-action { font-size: 11.5px; padding: 6px 10px; }

  /* Welcome heading + subtitle tighter */
  .main-content h1 { font-size: 20px !important; }

  /* Mobile nav: hide the actions row by default, show a hamburger that
     toggles body.topnav-mobile-open to reveal a drawer of links below
     the top bar. */
  .topnav-hamburger { display: inline-flex; margin-left: auto; }
  .topnav-actions {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    padding: 14px 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    box-shadow: var(--shadow-md);
    z-index: 40;
  }
  body.topnav-mobile-open .topnav-actions { display: flex; }
  .topnav-actions .btn-primary,
  .topnav-actions .topnav-link {
    padding: 12px 14px;
    border-radius: var(--r-md);
    width: 100%;
    justify-content: flex-start;
  }
  .topnav-actions .topnav-link:hover { background: var(--bg); }
  #avatar-wrap { align-self: flex-start; }
  #user-menu { position: static; display: block; box-shadow: none; border: none; padding: 0; min-width: 0; margin-top: 4px; }

  /* ---- Mobile overflow guards ----
     These prevent horizontal viewport scroll on /home. Without them a
     single oversized child (long title, an intrinsic-width flex child
     that didn't get min-width:0, etc.) can force the whole page to
     scroll sideways, which shows up as "cards clipped off the right
     edge, Open button cut in half." Defense in depth:
       - html/body: last line of defense, hide any stray overflow
       - .main-content: explicit width clamp so padding calculations
         never exceed viewport
       - cards: box-sizing border-box + max-width 100% so padding
         doesn't push them wider than their parent */
  html, body { overflow-x: hidden; max-width: 100vw; }
  .app-shell { max-width: 100vw; overflow-x: hidden; }
  .main-content { max-width: 100vw; box-sizing: border-box; overflow-x: hidden; }
  .copilot-strip,
  .rec-panel,
  .folder-card,
  .folders-header {
    box-sizing: border-box;
    max-width: 100%;
  }
  /* Scan History header: title + action buttons stack on narrow phones
     so "All reports" and "Scan new site" don't get pushed off-screen. */
  .folders-header { flex-wrap: wrap; gap: 10px; }
  .folders-actions { flex-wrap: wrap; }
  .folders-actions .btn-ghost { font-size: 12px; padding: 6px 10px; }
}

/* =========================================================================
   DARK-THEME PRIMITIVES (landing-v2 vocabulary, site-wide)
   Scoped under `.theme-dark` so any page can opt in by wrapping content
   in <div class="theme-dark">…</div>. Tokens come from tokens.css :root.

   Used on:
     - `/`          (homepage hero — applied via .landing-v2, which pulls
                     these same values; step 2 consolidates)
     - `/` #report  (scan results dashboard, step 3)
     - `/sample`    (fabricated sample report, step 4)
     - `/home`      (member dashboard, step 5)
     - `/dashboard` (Pro analytics, step 6)
     - Pricing + methodology mild-hero bands (step 7, 8)
     - Error pages (step 9)
   ========================================================================= */

.theme-dark {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  color: var(--v2-text);
  background: var(--v2-bg-dark);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.theme-dark * { box-sizing: border-box; }
.theme-dark a { color: inherit; }

/* ---- Badge (violet pulse) ---- */
.theme-dark .lp-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--v2-violet-soft); color: var(--v2-violet);
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid rgba(167, 139, 250, 0.3);
}
.theme-dark .lp-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--v2-violet);
  animation: v2pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 10px var(--v2-violet);
}

/* ---- Button / CTA ---- */
.theme-dark .lp-cta {
  background: var(--v2-green); color: var(--v2-bg-dark); border: none;
  padding: 14px 22px; border-radius: 10px;
  font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap;
  font-family: inherit; letter-spacing: -0.01em;
  transition: all 0.15s;
  box-shadow: 0 4px 20px rgba(16, 217, 160, 0.3);
}
.theme-dark .lp-cta:hover {
  background: var(--v2-green-hover); transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(16, 217, 160, 0.45);
}
.theme-dark .lp-cta.big { padding: 16px 28px; font-size: 16px; }
.theme-dark .lp-cta:disabled { opacity: 0.7; cursor: wait; }

/* ---- Form (input + CTA pair) ---- */
.theme-dark .lp-form {
  display: flex; gap: 8px; max-width: 520px;
  padding: 6px; background: var(--v2-card); border: 1px solid var(--v2-border);
  border-radius: 14px; transition: border-color 0.2s, box-shadow 0.2s;
}
.theme-dark .lp-form:focus-within {
  border-color: var(--v2-green);
  box-shadow: 0 0 0 4px rgba(16, 217, 160, 0.15);
}
.theme-dark .lp-input {
  flex: 1; padding: 14px 14px; border: none; background: transparent;
  font-size: 15px; color: var(--v2-text); font-family: inherit; min-width: 0;
  outline: none;
}
.theme-dark .lp-input::placeholder { color: var(--v2-dim); }

/* ---- Trust triad ---- */
.theme-dark .lp-trust {
  display: flex; gap: 20px; font-size: 13px; color: var(--v2-muted);
  flex-wrap: wrap;
}
.theme-dark .lp-trust span { display: flex; align-items: center; gap: 6px; }
.theme-dark .lp-trust span::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%2310d9a0' d='M6.5 10.5L3.5 7.5l1-1 2 2 4.5-4.5 1 1z'/></svg>");
  background-size: contain;
}

/* ---- Card (generic dark panel) ---- */
.theme-dark .lp-card {
  background: var(--v2-card); border: 1px solid var(--v2-border);
  border-radius: 16px;
}
.theme-dark .lp-card-hi {
  background: var(--v2-card-hi); border: 1px solid var(--v2-border);
  border-radius: 12px;
}

/* ---- Dashboard panel (the hero-preview card — reused on #report) ---- */
.theme-dark .lp-dashboard {
  background: var(--v2-card); border: 1px solid var(--v2-border); border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.6), 0 0 60px rgba(167, 139, 250, 0.08);
  position: relative;
}
.theme-dark .lp-dash-head {
  display: flex; align-items: center; gap: 8px; padding: 14px 18px;
  border-bottom: 1px solid var(--v2-border); background: var(--v2-card-hi);
}
.theme-dark .lp-dash-dot { width: 10px; height: 10px; border-radius: 50%; }
.theme-dark .lp-dash-dot.r { background: #ff5f56; }
.theme-dark .lp-dash-dot.y { background: #ffbd2e; }
.theme-dark .lp-dash-dot.g { background: #27c93f; }
.theme-dark .lp-dash-url {
  margin-left: 16px; font-size: 12px; color: var(--v2-muted);
  font-family: "SF Mono", Consolas, monospace;
  display: flex; align-items: center; gap: 6px;
}
.theme-dark .lp-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--v2-green);
  animation: v2pulse 1.6s ease-in-out infinite;
}
.theme-dark .lp-dash-body { padding: 28px 24px; }

/* ---- Gold score ring (large — hero + report heads) ---- */
.theme-dark .lp-ring-wrap { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.theme-dark .lp-ring-svg { transform: rotate(-90deg); }
.theme-dark .lp-ring-bg { stroke: var(--v2-border); }
.theme-dark .lp-ring-fg {
  stroke: var(--v2-gold);
  stroke-dasharray: 339.3;
  stroke-dashoffset: 339.3;
  animation: v2fillRing 2s ease-out 0.3s forwards;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.5));
}
.theme-dark .lp-ring-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 700; color: var(--v2-gold);
  font-variant-numeric: tabular-nums;
}

/* Score meta — heading + sub text under the ring */
.theme-dark .lp-score-section {
  display: flex; align-items: center; gap: 24px;
}
.theme-dark .lp-score-meta h4 {
  font-size: 17px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em;
  color: #fff;
}
.theme-dark .lp-score-meta p { font-size: 13px; color: var(--v2-muted); line-height: 1.5; }
.theme-dark .lp-grade-tag {
  display: inline-block; background: var(--v2-gold-soft); color: var(--v2-gold);
  font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  letter-spacing: 0.05em; margin-bottom: 8px;
}

/* ---- AI callout (violet insight box) ---- */
.theme-dark .lp-ai-box {
  background: var(--v2-violet-soft); border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: 12px; padding: 14px 16px;
  position: relative;
}
.theme-dark .lp-ai-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--v2-violet); font-weight: 700; margin-bottom: 8px;
}
.theme-dark .lp-ai-tag::before { content: "✦"; font-size: 12px; }
/* Plain AI insight text (no typewriter — that's homepage-only) */
.theme-dark .lp-ai-text {
  font-size: 13.5px; color: var(--v2-text); line-height: 1.6;
}

/* ---- Bars (category-score fills) ---- */
.theme-dark .lp-bars { display: flex; flex-direction: column; gap: 10px; }
.theme-dark .lp-bar-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 12px; font-size: 13px;
}
.theme-dark .lp-bar-name {
  color: var(--v2-muted); display: flex; align-items: center; gap: 8px;
}
.theme-dark .lp-bar-dot { width: 7px; height: 7px; border-radius: 50%; }
.theme-dark .lp-bar-track {
  height: 6px; background: var(--v2-border); border-radius: 3px;
  overflow: hidden; grid-column: 1 / -1;
}
.theme-dark .lp-bar-fill {
  height: 100%; border-radius: 3px; width: 0;
  animation: v2fillBar 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
/* Helper modifiers so templates don't need inline styles */
.theme-dark .lp-bar-dot--red   { background: var(--v2-red); }
.theme-dark .lp-bar-dot--gold  { background: var(--v2-gold); }
.theme-dark .lp-bar-dot--green { background: var(--v2-green); }
.theme-dark .lp-bar-fill--red   { background: var(--v2-red); }
.theme-dark .lp-bar-fill--gold  { background: var(--v2-gold); }
.theme-dark .lp-bar-fill--green { background: var(--v2-green); }
.theme-dark .lp-bar-score--red   { color: var(--v2-red); }
.theme-dark .lp-bar-score--gold  { color: var(--v2-gold); }
.theme-dark .lp-bar-score--green { color: var(--v2-green); }

/* ---- Section base (dark) ---- */
.theme-dark .lp-section {
  max-width: 1100px; margin: 0 auto;
  padding: 80px 24px;
}
.theme-dark .lp-eyebrow {
  font-size: 12px; color: var(--v2-violet); text-transform: uppercase;
  letter-spacing: 2px; font-weight: 700; text-align: center; margin-bottom: 14px;
}
.theme-dark .lp-h1 {
  font-size: 58px; line-height: 1.02; font-weight: 700; letter-spacing: -0.03em;
  color: #fff;
}
.theme-dark .lp-h1 .red { color: var(--v2-red); position: relative; }
.theme-dark .lp-h2 {
  font-size: 44px; font-weight: 700; letter-spacing: -0.02em;
  text-align: center; margin-bottom: 16px; line-height: 1.1;
}
.theme-dark .lp-sub {
  font-size: 19px; color: var(--v2-muted);
  line-height: 1.55;
}
.theme-dark .lp-sub strong { color: var(--v2-text); font-weight: 600; }
.theme-dark .lp-section-sub {
  font-size: 17px; color: var(--v2-muted); text-align: center;
  margin-bottom: 48px; max-width: 560px; margin-left: auto; margin-right: auto;
  line-height: 1.55;
}

/* ---- Light-section variant (used inside .theme-dark pages for content
   slabs that need to feel editorial, e.g., FAQ on homepage, sample
   report card, legal blocks embedded in a dark shell) ---- */
.theme-dark .lp-section.light {
  background: #fff; color: #0f172a; max-width: 100%; padding: 80px 24px;
}
.theme-dark .lp-section.light .lp-inner { max-width: 1100px; margin: 0 auto; }
.theme-dark .lp-section.light .lp-eyebrow { color: #7c3aed; }
.theme-dark .lp-section.light .lp-section-sub { color: #64748b; }

/* ---- Report preview card (reused by /sample + #report hero) ---- */
.theme-dark .lp-report {
  border: 1px solid #e2e8f0; border-radius: 16px; overflow: hidden;
  background: #fff; max-width: 720px; margin: 0 auto;
  box-shadow: 0 20px 40px -20px rgba(15,23,42,0.15);
}
.theme-dark .lp-report-head {
  background: #0f172a; color: #fff; padding: 24px 28px;
  display: flex; align-items: center; gap: 20px;
}
.theme-dark .lp-report-head .lp-ring-wrap { width: 68px; height: 68px; }
.theme-dark .lp-report-head .lp-ring-num { font-size: 24px; }
.theme-dark .lp-report-title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.theme-dark .lp-report-subtitle { font-size: 13px; color: #a0a9c0; }
.theme-dark .lp-download-btn {
  margin-left: auto; font-size: 13px; color: #fff; font-weight: 600;
  padding: 10px 16px; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px;
  white-space: nowrap; background: rgba(255,255,255,0.08); text-decoration: none;
}
.theme-dark .lp-ai-summary {
  background: #faf5ff; padding: 20px 28px; border-bottom: 1px solid #e2e8f0;
  font-size: 14.5px; color: #3b0764; line-height: 1.7;
}
.theme-dark .lp-ai-summary-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
  color: #7c3aed; font-weight: 700; margin-bottom: 8px;
}
.theme-dark .lp-ai-summary-tag::before { content: "✦"; }

/* ---- Category card (reused by /sample + #report + homepage sample) ---- */
.theme-dark .lp-cat { padding: 20px 28px; border-bottom: 1px solid #f1f5f9; }
.theme-dark .lp-cat:last-child { border-bottom: none; }
.theme-dark .lp-cat-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.theme-dark .lp-cat-name { font-size: 14px; font-weight: 700; color: #0f172a; }
.theme-dark .lp-cat-score {
  font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 12px;
}
.theme-dark .lp-cat-bad  { background: #fee2e2; color: #991b1b; }
.theme-dark .lp-cat-warn { background: #fef3c7; color: #92400e; }
.theme-dark .lp-cat-ok   { background: #d1fae5; color: #065f46; }
.theme-dark .lp-cat-bar {
  height: 6px; background: #f1f5f9; border-radius: 3px;
  overflow: hidden; margin-bottom: 12px;
}
.theme-dark .lp-cat-bar-fill { height: 100%; border-radius: 3px; }
.theme-dark .lp-cat-find {
  font-size: 13.5px; color: #475569; display: flex; gap: 10px;
  align-items: flex-start; line-height: 1.6;
}
.theme-dark .lp-cat-dot {
  flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px;
}
.theme-dark .lp-fix {
  display: block; color: #5b21b6; font-size: 12.5px; margin-top: 8px;
  background: #faf5ff; padding: 10px 12px; border-radius: 8px; font-weight: 500;
}
.theme-dark .lp-fix::before {
  content: "✦ AI fix · "; font-weight: 700; font-size: 11px;
  letter-spacing: 0.5px; text-transform: uppercase;
}

/* ---- Sample-link (small footer link under a report card) ---- */
.theme-dark .lp-sample-link { text-align: center; margin-top: 20px; font-size: 14px; }
.theme-dark .lp-sample-link a {
  color: #7c3aed; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(124,58,237,0.3); padding-bottom: 1px;
}
.theme-dark .lp-sample-link a:hover { border-bottom-color: #7c3aed; }

/* ---- Mini-testimonial (reusable on /pricing, /home) ---- */
.theme-dark .lp-mini-testi {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; background: var(--v2-card); border: 1px solid var(--v2-border);
  border-radius: 12px; max-width: 520px;
}
.theme-dark .lp-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #f472b6, #a78bfa);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: var(--v2-text);
}
.theme-dark .lp-mini-testi-text {
  font-size: 13px; color: var(--v2-muted); line-height: 1.5;
}
.theme-dark .lp-mini-testi-text strong { color: var(--v2-text); font-weight: 600; }
.theme-dark .lp-stars {
  color: var(--v2-gold); letter-spacing: 2px; font-size: 12px;
  display: block; margin-bottom: 2px;
}

/* ---- Dark nav (reusable — the homepage's .lp-nav, applied site-wide) ---- */
.lp-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(10, 14, 39, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--v2-border);
  transition: transform 300ms ease-out, opacity 250ms ease-out;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}
.lp-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1200px; margin: 0 auto; padding: 14px 24px;
}
.lp-logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 17px; letter-spacing: -0.01em;
  color: #fff; text-decoration: none;
}
.lp-logo-sq {
  width: 22px; height: 22px; background: var(--v2-green); border-radius: 6px;
  box-shadow: 0 0 20px rgba(16, 217, 160, 0.4);
}
.lp-nav-links { display: flex; gap: 28px; font-size: 14px; color: var(--v2-muted); }
.lp-nav-links a { color: inherit; text-decoration: none; transition: color 0.15s; }
.lp-nav-links a:hover { color: #fff; }
.lp-nav-cta {
  background: var(--v2-green); color: var(--v2-bg-dark); border: none;
  padding: 9px 18px; border-radius: 8px; font-weight: 600; font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none; display: inline-flex; align-items: center;
  transition: background 0.15s, transform 0.15s;
}
.lp-nav-cta:hover { background: var(--v2-green-hover); transform: translateY(-1px); }
@media (max-width: 900px) {
  .lp-nav-links { display: none; }
}

/* ---- Dark footer (reusable on any dark page) ---- */
.lp-footer {
  padding: 32px 24px; border-top: 1px solid var(--v2-border);
  display: flex; justify-content: space-between;
  max-width: 1200px; margin: 0 auto;
  font-size: 12px; color: var(--v2-dim); flex-wrap: wrap; gap: 12px;
  background: var(--v2-bg-dark);
}
.lp-footer-links { display: flex; gap: 22px; }
.lp-footer-links a { color: inherit; text-decoration: none; }
.lp-footer-links a:hover { color: var(--v2-muted); }

/* ---- Reduced motion (applies to any .theme-dark or .lp-* primitive) ---- */
@media (prefers-reduced-motion: reduce) {
  .theme-dark *, .theme-dark *::before, .theme-dark *::after,
  .lp-nav, .lp-pulse, .lp-live-dot,
  .lp-ring-fg, .lp-bar-fill {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Keep end-state visible: ring at final fill, bars at final width, logs at opacity 1. */
  .theme-dark .lp-ring-fg { stroke-dashoffset: 94.9 !important; }
  .theme-dark .lp-report-head .lp-ring-fg { stroke-dashoffset: 52.8 !important; }
  .theme-dark .lp-bar-fill { width: var(--v2-w) !important; }
}

/* =========================================================================
   DARK SKIN for shared chrome (topnav, sidebar, site-footer, buttons)
   when a page opts in via <body class="theme-dark">. Implements Option Y
   (dark nav everywhere). Pages that don't opt in keep the existing light
   chrome unchanged.
   ========================================================================= */
body.theme-dark { background: var(--v2-bg-dark); color: var(--v2-text); }

/* Shared .topnav (_topnav.html) — dark variant */
body.theme-dark .topnav {
  background: rgba(10, 14, 39, 0.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--v2-border);
}
body.theme-dark .topnav-brand { color: var(--v2-text); }
body.theme-dark .topnav-brand .brand-mark { background: var(--v2-green); }
body.theme-dark .topnav-search input {
  background: var(--v2-card); color: var(--v2-text);
  border-color: var(--v2-border);
}
body.theme-dark .topnav-search input::placeholder { color: var(--v2-dim); }
body.theme-dark .topnav-search input:focus {
  border-color: var(--v2-green); background: var(--v2-card);
  box-shadow: 0 0 0 3px rgba(16, 217, 160, 0.15);
}
body.theme-dark .topnav-search .search-icon { color: var(--v2-muted); }
body.theme-dark .topnav-search .search-kbd {
  color: var(--v2-dim); background: var(--v2-card-hi);
  border-color: var(--v2-border);
}
body.theme-dark .topnav-link { color: var(--v2-muted); }
body.theme-dark .topnav-link:hover { color: var(--v2-text); }
body.theme-dark .topnav-hamburger { color: var(--v2-text); }
body.theme-dark .topnav-hamburger:hover { background: var(--v2-card-hi); }

/* Shared .sidebar (_sidebar.html) — dark variant */
body.theme-dark .sidebar {
  background: var(--v2-card-hi);
  border-right: 1px solid var(--v2-border);
}
body.theme-dark .sidebar-item { color: var(--v2-muted); }
body.theme-dark .sidebar-item:hover {
  background: var(--v2-card); color: var(--v2-text);
}
body.theme-dark .sidebar-item.active {
  color: var(--v2-green); background: var(--v2-green-soft);
}
body.theme-dark .sidebar-divider { background: var(--v2-border); }

/* Shared .avatar + user menu (topnav right side) */
body.theme-dark .avatar { background: var(--v2-violet); color: var(--v2-text); }
body.theme-dark .user-menu {
  background: var(--v2-card); border-color: var(--v2-border);
  box-shadow: 0 10px 32px rgba(0,0,0,0.4);
}
body.theme-dark .user-menu-item { color: var(--v2-text); }
body.theme-dark .user-menu-item:hover { background: var(--v2-card-hi); }
body.theme-dark .user-menu-divider { background: var(--v2-border); }

/* Shared buttons — .btn-primary, .btn-ghost */
body.theme-dark .btn-primary {
  background: var(--v2-green); color: var(--v2-bg-dark);
}
body.theme-dark .btn-primary:hover { background: var(--v2-green-hover); }
body.theme-dark .btn-ghost {
  background: var(--v2-card);
  color: var(--v2-muted);
  border-color: var(--v2-border);
}
body.theme-dark .btn-ghost:hover {
  background: var(--v2-card-hi);
  color: var(--v2-text);
  border-color: var(--v2-violet);
}

/* Shared .site-footer (_footer.html) — dark variant */
body.theme-dark .site-footer {
  background: var(--v2-bg-dark);
  border-top: 1px solid var(--v2-border);
  color: var(--v2-dim);
}
body.theme-dark .site-footer-copyright,
body.theme-dark .site-footer-inner { color: var(--v2-dim); }
body.theme-dark .site-footer-links a { color: var(--v2-muted); }
body.theme-dark .site-footer-links a:hover { color: var(--v2-text); }

/* =========================================================================
   DARK SKIN for /home-specific components (copilot strip, rec panel,
   category cards, folder cards, empty state). Scoped under
   body.theme-dark so the existing light /home theme is unaffected if
   a page doesn't opt in.
   ========================================================================= */

/* Main content area — inherits body dark bg, just tighten text colors */
body.theme-dark .main-content { color: var(--v2-text); }
body.theme-dark .main-content h1 { color: var(--v2-text); }

/* Fix-Queue copilot strip (the violet-badged "Your Fix Queue" banner) */
body.theme-dark .copilot-strip {
  background: var(--v2-card);
  border-color: var(--v2-border);
}
body.theme-dark .copilot-badge {
  background: var(--v2-violet);
  color: var(--v2-text);
}
body.theme-dark .copilot-title { color: var(--v2-text); }
body.theme-dark .copilot-desc { color: var(--v2-muted) !important; }
body.theme-dark .copilot-sub { color: var(--v2-muted); }
body.theme-dark .ai-tag {
  color: var(--v2-violet);
  background: var(--v2-violet-soft);
}

/* First-scan welcome banner (shown when user has 0 scans yet) */
body.theme-dark #first-scan-banner {
  background:
    radial-gradient(ellipse at 10% 30%, rgba(16, 217, 160, 0.15), transparent 60%),
    radial-gradient(ellipse at 90% 80%, rgba(167, 139, 250, 0.15), transparent 60%),
    var(--v2-card);
  border-color: var(--v2-border);
}
body.theme-dark #first-scan-banner .first-scan-text,
body.theme-dark #first-scan-banner .first-scan-text strong { color: var(--v2-text); }
body.theme-dark #first-scan-banner .first-scan-text span { color: var(--v2-muted); }

/* AgentScoreAI recommendations panel (expands under the copilot strip) */
body.theme-dark .rec-panel {
  background: var(--v2-card);
  border-color: var(--v2-border);
}
body.theme-dark .rec-panel-header {
  border-bottom-color: var(--v2-border);
}
body.theme-dark .rec-panel-title { color: var(--v2-text); }
body.theme-dark .rec-panel-meta { color: var(--v2-muted); }
body.theme-dark .rec-panel-close { color: var(--v2-muted); }
body.theme-dark .rec-panel-close:hover {
  background: var(--v2-card-hi); color: var(--v2-text);
}
body.theme-dark .rec-loading { color: var(--v2-muted); }

/* Scan-source label ("Showing results for: <site>") */
body.theme-dark #scan-source-label { color: var(--v2-muted); }
body.theme-dark #scan-source-label strong { color: var(--v2-green); }

/* Category row (the 6 category tiles — AI / Reputation / SEO / Overview / Competitors / Social) */
body.theme-dark .category-row-hint {
  background: linear-gradient(to left, var(--v2-bg-dark), transparent);
  color: var(--v2-dim);
}
body.theme-dark .cat-card {
  background: var(--v2-card);
  border-color: var(--v2-border);
  color: var(--v2-text);
}
body.theme-dark .cat-card:hover {
  border-color: var(--v2-violet);
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.12);
  transform: translateY(-2px);
}
body.theme-dark .cat-card .cat-title { color: var(--v2-text); }
body.theme-dark .cat-card .cat-desc { color: var(--v2-muted); }

/* Category tile tint variants — remap the light *-tint tokens to the
   v2-soft equivalents so icons glow on dark bg */
body.theme-dark .cat-card.tone-ai .icon-wrap {
  background: var(--v2-violet-soft); color: var(--v2-violet);
}
body.theme-dark .cat-card.tone-amber .icon-wrap {
  background: var(--v2-gold-soft); color: var(--v2-gold);
}
body.theme-dark .cat-card.tone-blue .icon-wrap {
  background: rgba(59, 130, 246, 0.15); color: #60a5fa;
}
body.theme-dark .cat-card.tone-green .icon-wrap {
  background: var(--v2-green-soft); color: var(--v2-green);
}
body.theme-dark .cat-card.tone-indigo .icon-wrap {
  background: rgba(129, 140, 248, 0.15); color: #a5b4fc;
}
body.theme-dark .cat-card.tone-pink .icon-wrap {
  background: rgba(244, 114, 182, 0.15); color: #f472b6;
}
body.theme-dark .cat-card .for-you-tag {
  background: var(--v2-green-soft); color: var(--v2-green);
}

/* Scan History header + folder cards */
body.theme-dark .folders-header { color: var(--v2-text); }
body.theme-dark .folders-title { color: var(--v2-text); }

body.theme-dark .folder-card {
  background: var(--v2-card);
  border-color: var(--v2-border);
  color: var(--v2-text);
  box-shadow: none;
}
body.theme-dark .folder-card:hover {
  border-color: var(--v2-violet);
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.15);
}

/* Empty state (shown while folders are loading or user has 0 saved sites) */
body.theme-dark .empty-state {
  color: var(--v2-muted);
  background: var(--v2-card);
  border-color: var(--v2-border);
}
body.theme-dark .empty-state i { color: var(--v2-dim); }

/* =========================================================================
   DARK SKIN for /pricing (mild marketing hero + light cards treatment)
   Per step 7 of the theme rollout: the hero eyebrow/title/sub go dark,
   but the price cards stay LIGHT so $29 / $99 read as clean commerce
   not nightclub. FAQ becomes dark cards to match the rest of the shell.
   ========================================================================= */

/* Dark hero band — violet eyebrow, white title, muted sub */
body.theme-dark .pricing-hero {
  padding-top: 48px;
}
body.theme-dark .pricing-eyebrow { color: var(--v2-violet); }
body.theme-dark .pricing-title { color: var(--v2-text); letter-spacing: -0.02em; }
body.theme-dark .pricing-sub { color: var(--v2-muted); }

/* Price cards — stay LIGHT on the dark body (Stripe-style cutout cards).
   Shadows heavier so they lift visibly off the dark background. */
body.theme-dark .price-card {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #0f172a;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.6);
}
body.theme-dark .price-card.featured {
  border-color: var(--v2-green);
  box-shadow: 0 24px 48px -16px rgba(16, 217, 160, 0.35),
              0 0 0 1px rgba(16, 217, 160, 0.5);
}
body.theme-dark .price-badge {
  background: var(--v2-green); color: var(--v2-bg-dark);
}
body.theme-dark .price-tier { color: #64748b; }
body.theme-dark .price-amount .dollar,
body.theme-dark .price-amount .number { color: #0f172a; }
body.theme-dark .price-amount .period,
body.theme-dark .price-amount .cents { color: #64748b; }
body.theme-dark .price-tagline { color: #475569; }
body.theme-dark .price-features li { color: #334155; }
body.theme-dark .price-features li i.fa-check {
  color: var(--v2-green); background: var(--v2-green-soft);
}
body.theme-dark .price-features li.dim { color: #94a3b8; }
body.theme-dark .price-features li.dim i.fa-minus {
  color: #94a3b8; background: #f1f5f9;
}

/* CTA buttons — keep primary green, ghost reads as "outline" on white */
body.theme-dark .price-cta.primary {
  background: var(--v2-green); color: var(--v2-bg-dark);
}
body.theme-dark .price-cta.primary:hover { background: var(--v2-green-hover); }
body.theme-dark .price-cta.ghost {
  background: #ffffff; color: #0f172a;
  border-color: #d1d5db;
}
body.theme-dark .price-cta.ghost:hover { background: #f9fafb; }
body.theme-dark .price-fine { color: #94a3b8; }

/* Stripe disclaimer line (between grid and FAQ) — subtle on dark */
body.theme-dark .pricing-grid + p,
body.theme-dark .pricing-grid + p a {
  color: var(--v2-muted);
}
body.theme-dark .pricing-grid + p a:hover { color: var(--v2-green); }

/* FAQ — dark cards matching the homepage FAQ vocabulary */
body.theme-dark .pricing-faq h2 { color: var(--v2-text); }
body.theme-dark .faq-item {
  background: var(--v2-card);
  border-color: var(--v2-border);
}
body.theme-dark .faq-q { color: var(--v2-text); }
body.theme-dark .faq-a { color: var(--v2-muted); }
body.theme-dark .faq-a strong { color: var(--v2-text); }
body.theme-dark .faq-a a {
  color: var(--v2-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.theme-dark .faq-a a:hover { color: var(--v2-green-hover); }

/* =========================================================================
   DARK SKIN for /methodology (and any .legal-page that opts into
   theme-dark via body_class). Step 8 of the theme rollout.

   Long-form editorial content on a dark background. Soft contrast on
   body copy + white section headings so the article reads comfortably
   without feeling like a nightclub menu. Code blocks + inline anchors
   keep their utility color accents.
   ========================================================================= */

body.theme-dark .legal-page {
  color: #cbd5e1;   /* slightly brighter than --v2-muted for long-form readability */
  line-height: 1.7;
}
body.theme-dark .legal-page h1 { color: var(--v2-text); }
body.theme-dark .legal-page .legal-meta { color: var(--v2-muted); }
body.theme-dark .legal-page h2 {
  color: var(--v2-text);
  padding-top: 8px;
  border-top: 1px solid var(--v2-border);
  margin-top: 40px;
}
body.theme-dark .legal-page h2:first-of-type {
  border-top: none; padding-top: 0; margin-top: 32px;
}
body.theme-dark .legal-page h3 { color: var(--v2-text); }
body.theme-dark .legal-page strong { color: var(--v2-text); }
body.theme-dark .legal-page em { color: #e2e8f0; }

body.theme-dark .legal-page a {
  color: var(--v2-green);
  text-underline-offset: 2px;
}
body.theme-dark .legal-page a:hover { color: var(--v2-green-hover); }

body.theme-dark .legal-page code {
  background: var(--v2-bg-deeper);
  border-color: var(--v2-border);
  color: var(--v2-text);
}

body.theme-dark .legal-return a { color: var(--v2-muted); }
body.theme-dark .legal-return a:hover { color: var(--v2-green); }