/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

:root { --page-bg: #f9fafb; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color: #1a1a1a;
  background: var(--page-bg);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

/* 760px is a prose measure. It stays that way for results, blog posts and legal
   pages — long text is unreadable wider than this. But the header, footer and the
   landing sections get room to breathe, which is most of why the site read as
   cramped and dated. */
.container { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.site-header .container,
.site-footer .container,
.hero .container { max-width: 1080px; }

/* ─── Header ─────────────────────────────────────── */

.site-header {
  background: rgba(26, 26, 26, 0.96);
  color: #fff;
  padding: 14px 0;
  border-bottom: 3px solid #6366f1;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.site-header .container { display: flex; align-items: center; gap: 16px; }
.logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo img { display: block; height: 34px; width: auto; }
.logo:hover { opacity: 0.85; }
.tagline { font-size: 0.8rem; color: #9ca3af; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.site-nav a { color: #9ca3af; font-size: 0.85rem; text-decoration: none; transition: color 0.2s; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current] { color: #fff; }

/* Auth slot — swapped to Dashboard / Log out by header.js when signed in.
   Divided from the content links so "Sign up free" reads as an action, not a page. */
.nav-auth {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.nav-cta {
  background: #4f46e5;
  color: #fff !important;
  padding: 7px 14px;
  border-radius: 6px;
  font-weight: 600;
  transition: background 0.2s;
}
.nav-cta:hover { background: #4338ca; }

/* Below ~600px the full nav cannot sit beside the logo. Keep the two commercial
   items — Pricing and the signup CTA — and drop Blog/About, which appear in the
   footer of every page anyway. Losing the paid funnel to a cramped header is a
   worse trade than losing a blog link. */
@media (max-width: 600px) {
  .site-header .container { gap: 10px; }
  .site-nav { gap: 12px; }
  .site-nav > a[href="/blog/"],
  .site-nav > a[href="/about"] { display: none; }
  .nav-auth { padding-left: 12px; gap: 12px; }
  .nav-auth a:not(.nav-cta) { display: none; }   /* drop "Log in"; signup is the priority */
  .nav-cta { padding: 6px 12px; font-size: 0.8rem; }
}

/* Below ~380px, logo + "Pricing" + the signup CTA still overflow even after
   the 600px trim above. Pricing stays (it's the other commercial item the
   600px rule deliberately keeps) — tighten padding/gaps and shrink text
   instead of dropping it. */
@media (max-width: 380px) {
  .container { padding: 0 12px; }
  .site-header .container { gap: 6px; }
  .site-nav { gap: 8px; }
  .site-nav > a[href="/pricing"] { font-size: 0.78rem; }
  .logo img { height: 26px; }
  .nav-auth { padding-left: 8px; gap: 8px; }
  .nav-cta { padding: 5px 9px; font-size: 0.74rem; }
}

/* ─── Hero ───────────────────────────────────────── */

.hero { padding: 72px 0 80px; }

/* Pitch left, sample output right. Collapses to one column below 900px, where the
   demo card drops entirely — on a phone it would push the input box below the fold,
   and the input box is the whole point of the page. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 48px;
  align-items: center;
}
.hero-copy { min-width: 0; }

.hero-demo { min-width: 0; }
.demo-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.10), 0 2px 6px rgba(17, 24, 39, 0.05);
}
.demo-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid #f3f4f6;
}
.demo-url { font-size: 0.85rem; color: #6b7280; font-weight: 500; }
.demo-score {
  font-size: 1.5rem;
  font-weight: 800;
  color: #92400e;
  letter-spacing: -0.03em;
}
.demo-vitals { display: flex; gap: 8px; margin: 14px 0 16px; }
.demo-vital {
  flex: 1;
  text-align: center;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 4px;
}
.demo-vital span { display: block; font-size: 0.9rem; font-weight: 700; line-height: 1.2; }
.demo-vital small { display: block; font-size: 0.62rem; color: #6b7280; margin-top: 3px; letter-spacing: 0.05em; }
.dv-good { border-color: #86efac; } .dv-good span { color: #15803d; }
.dv-ok   { border-color: #fde68a; } .dv-ok   span { color: #92400e; }
.dv-poor { border-color: #fca5a5; } .dv-poor span { color: #991b1b; }

.demo-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; }
.demo-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dd-fail { background: #e53e3e; }
.dd-warn { background: #d97706; }
.demo-issue { font-size: 0.82rem; color: #374151; }

/* Social proof. Every claim here is one we can actually stand behind: the 793-site
   study is real and published, and Lighthouse really is the engine. */
.proof-band {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin-top: 56px;
  padding: 18px 0;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  font-size: 0.85rem;
  color: #6b7280;
}
.proof-band strong { color: #1a1a1a; font-weight: 700; }
.proof-band a { color: #4f46e5; text-decoration: none; }
.proof-band a:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-demo { display: none; }   /* never push the input below the fold */
  .proof-band { margin-top: 40px; gap: 8px 20px; font-size: 0.8rem; }
}

.hero h1 {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
}
@media (max-width: 600px) {
  .hero { padding: 48px 0 56px; }
  .hero h1 { font-size: 2rem; }
}
.hero h1 em { font-style: normal; color: #4f46e5; }
.hero h1 .h1-sub {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: normal;
  color: #6b7280;
  margin-top: 6px;
}

.subtitle {
  font-size: 1.05rem;
  color: #4b5563;
  max-width: 540px;
  margin-bottom: 36px;
}

.input-wrap { display: flex; gap: 8px; margin-bottom: 10px; }

#url-input {
  flex: 1;
  padding: 14px 18px;
  font-size: 1rem;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  transition: border-color 0.2s;
}
#url-input:focus { border-color: #2563eb; }

#analyze-btn {
  padding: 14px 24px;
  background: #4f46e5;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
#analyze-btn:hover { background: #4338ca; }
#analyze-btn:disabled { background: #9ca3af; cursor: not-allowed; }

.form-note { font-size: 0.82rem; color: #6b7280; }

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin-top: 12px;
  font-size: 0.8rem;
  color: #6b7280;
}
.trust-row span { white-space: nowrap; }

.hero-stats {
  font-size: 0.78rem;
  color: #9ca3af;
  margin-top: 10px;
}

/* ─── Loading ────────────────────────────────────── */

.loading { padding: 100px 0; text-align: center; color: #4b5563; }

.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 24px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-note { font-size: 0.85rem; color: #6b7280; margin-top: 8px; }

/* ─── Results ────────────────────────────────────── */

.results { padding: 48px 0 80px; }

.results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}

.site-label { font-size: 0.75rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em; display: block; }
.site-url { font-size: 1rem; color: #2563eb; text-decoration: none; font-weight: 500; }
.site-url:hover { text-decoration: underline; }

.score-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* ─── Score ring ─────────────────────────────────── */

.score-ring {
  --score: 0;
  --color: #e5e7eb;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: conic-gradient(var(--color) calc(var(--score) * 1%), #e5e7eb calc(var(--score) * 1%));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.score-ring::before {
  content: '';
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--page-bg);
}
.score-ring .score-value {
  position: relative;
  z-index: 1;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: #1a1a1a;
  letter-spacing: -0.03em;
}
.score-ring-label {
  position: relative;
  z-index: 1;
  font-size: 0.58rem;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}

/* ─── Real user scale ────────────────────────────── */

.real-user-badge { display: none; }

.real-user-scale { display: flex; align-items: center; gap: 6px; }
.rub-label { font-size: 0.72rem; color: #6b7280; font-weight: 500; white-space: nowrap; }
.rub-steps { display: flex; gap: 2px; }
.rub-step {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  background: #f3f4f6;
  color: #d1d5db;
}
.rub-step.rub-active.rub-good { background: #d1fae5; color: #065f46; }
.rub-step.rub-active.rub-ok   { background: #fef3c7; color: #92400e; }
.rub-step.rub-active.rub-poor { background: #fee2e2; color: #991b1b; }

/* Core Web Vitals */
.vitals-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.vital-card {
  flex: 1;
  min-width: 80px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.vital-value { display: block; font-size: 1rem; font-weight: 700; line-height: 1.2; }
.vital-label { display: block; font-size: 0.68rem; color: #6b7280; margin-top: 4px; line-height: 1.3; }
.metric-good  { border-color: #86efac; }
.metric-good .vital-value  { color: #15803d; }
.metric-ok    { border-color: #fde68a; }
.metric-ok .vital-value    { color: #92400e; }
.metric-poor  { border-color: #fca5a5; }
.metric-poor .vital-value  { color: #991b1b; }
.metric-na .vital-value    { color: #374151; }

.vital-status { display: block; font-size: 0.65rem; font-weight: 700; margin-top: 5px; text-transform: uppercase; letter-spacing: 0.05em; }
.vital-status-good { color: #15803d; }
.vital-status-ok   { color: #92400e; }
.vital-status-poor { color: #991b1b; }

/* ─── Insight summary ───────────────────────────── */

.insight-card {
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 24px;
  font-size: 0.92rem;
  line-height: 1.6;
}
.insight-poor { background: #fef2f2; border: 1.5px solid #fca5a5; }
.insight-warn { background: #fffbeb; border: 1.5px solid #fde68a; }
.insight-ok   { background: #f8fafc; border: 1.5px solid #e2e8f0; }
.insight-good { background: #f0fdf4; border: 1.5px solid #bbf7d0; color: #166534; }

.insight-headline { font-weight: 600; color: #1a1a1a; margin-bottom: 10px; }
.insight-poor .insight-headline { color: #991b1b; }
.insight-warn .insight-headline { color: #92400e; }

.insight-list { list-style: none; display: flex; flex-direction: column; gap: 6px; padding: 0; margin: 0; }
.insight-list li { padding-left: 18px; position: relative; color: #374151; }
.insight-list li::before { content: '→'; position: absolute; left: 0; color: #9ca3af; font-size: 0.85em; top: 1px; }
.insight-list strong { color: #1a1a1a; }

/* Summary card */
.summary-card {
  background: #fff;
  border: 2px solid #fecaca;
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 36px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(229,62,62,0.08);
}
.waste-number {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  color: #e53e3e;
  letter-spacing: -0.04em;
  line-height: 1;
}
.waste-label { display: block; font-size: 1rem; color: #6b7280; margin-top: 8px; }
.summary-meta { font-size: 0.88rem; color: #6b7280; margin-top: 10px; }

.no-waste {
  background: #f0fdf4;
  border: 2px solid #bbf7d0;
  border-radius: 12px;
  padding: 20px 28px;
  color: #166534;
  margin-bottom: 36px;
  font-size: 0.95rem;
}

/* Images table */
.images-section { margin-bottom: 48px; }
.images-section h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 16px; }

.effort-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 100px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.effort-easy { background: #d1fae5; color: #065f46; }
.effort-dev  { background: #fef3c7; color: #92400e; }

.count-badge {
  display: inline-block;
  background: #f3f4f6;
  color: #4b5563;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 100px;
  margin-left: 6px;
  vertical-align: middle;
}

.table-wrap { overflow-x: auto; border-radius: 10px; border: 1.5px solid #e5e7eb; }

.images-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; background: #fff; }
.images-table th {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1.5px solid #e5e7eb;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  font-weight: 600;
  background: #f9fafb;
}
.images-table td { padding: 10px 14px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.images-table tbody tr:last-child td { border-bottom: none; }

.col-filename { max-width: 280px; }
.filename { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #374151; font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace; font-size: 0.82rem; }
.col-size { color: #6b7280; white-space: nowrap; }
.savings-positive { color: #059669; font-weight: 600; white-space: nowrap; }

.pct-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.78rem; font-weight: 700; }
.pct-high { background: #fee2e2; color: #991b1b; }
.pct-med  { background: #fef3c7; color: #92400e; }
.pct-low  { background: #f3f4f6; color: #4b5563; }

.show-more-row td { text-align: center; padding: 14px; background: #f9fafb; }

/* ─── Other issues ──────────────────────────────── */

.other-issues { margin-bottom: 48px; }
.other-issues h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 16px; }

.issues-list { list-style: none; display: flex; flex-direction: column; gap: 2px; }

.issue-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-size: 0.88rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.issue-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.issue-fail .issue-dot { background: #e53e3e; }
.issue-warn .issue-dot { background: #d97706; }
.issue-title { flex: 1; color: #374151; font-weight: 500; }
.issue-value { color: #6b7280; white-space: nowrap; font-size: 0.82rem; }

.issue-item.has-hint { align-items: flex-start; }
.issue-item.has-hint .issue-dot { margin-top: 5px; }
.issue-body { flex: 1; min-width: 0; }
.issue-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.issue-title-row .issue-title { flex: 1; min-width: 0; }
.issue-title-row .issue-value { color: #6b7280; white-space: nowrap; font-size: 0.82rem; }

.issue-priority-badge {
  flex-shrink: 0;
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 100px;
  background: #fee2e2;
  color: #991b1b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.issue-hint {
  font-size: 0.78rem;
  color: #6b7280;
  line-height: 1.5;
  margin-top: 4px;
}

/* ─── Third-party scripts ───────────────────────── */

.third-party { margin-bottom: 48px; }
.third-party h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 16px; }

/* ─── CTA ────────────────────────────────────────── */

#cta-section { margin-bottom: 48px; }

.cta-card { border-radius: 12px; padding: 32px; }

.cta-wp {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border: 2px solid #86efac;
}
.cta-generic {
  background: #f8fafc;
  border: 2px solid #e2e8f0;
}

.cta-badge {
  display: inline-block;
  background: #fff;
  border: 1.5px solid #86efac;
  color: #166534;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.cta-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 10px; }
.cta-card p  { color: #4b5563; font-size: 0.95rem; margin-bottom: 16px; line-height: 1.6; }
.cta-card p:last-child { margin-bottom: 0; }
.cta-card a  { color: #2563eb; }

.btn-primary {
  display: inline-block;
  padding: 13px 24px;
  background: #15803d;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 10px;
}
.btn-primary:hover { background: #166534; color: #fff; text-decoration: none; }

.cta-note { font-size: 0.8rem; color: #6b7280; margin-top: 4px; margin-bottom: 0; }
.cta-note a { color: #2563eb; }

.cta-good {
  background: #f0fdf4;
  border: 2px solid #bbf7d0;
}
.cta-good h3 { color: #166534; }
.cta-good p  { color: #4b5563; margin-bottom: 10px; }
.cta-good p:last-child { margin-bottom: 0; }
.cta-good a  { color: #2563eb; }

.cta-secondary {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
  margin-top: 10px;
  font-size: 0.88rem;
  color: #4b5563;
  line-height: 1.6;
}
.cta-secondary p { margin: 0; }
.cta-secondary a { color: #2563eb; }

.cta-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

.btn-outline {
  display: inline-block;
  padding: 13px 24px;
  background: #fff;
  color: #374151;
  text-decoration: none;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.btn-outline:hover { border-color: #9ca3af; color: #1a1a1a; }

.affiliate-note {
  font-size: 0.72rem;
  color: #9ca3af;
  font-style: italic;
}

/* ─── Email capture ──────────────────────────────── */

.email-section {
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 28px 32px;
  margin-bottom: 32px;
}
.email-section h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.email-section > p { color: #4b5563; font-size: 0.9rem; margin-bottom: 16px; }

.email-form { display: flex; gap: 8px; }

#email-input {
  flex: 1;
  padding: 11px 16px;
  font-size: 0.95rem;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
}
#email-input:focus { border-color: #2563eb; }

#email-btn {
  padding: 11px 20px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
#email-btn:hover { background: #1d4ed8; }
#email-btn:disabled { background: #9ca3af; cursor: not-allowed; }

.email-sent  { font-size: 0.88rem; color: #059669; margin-top: 10px; }
.email-error { font-size: 0.88rem; color: #dc2626; margin-top: 10px; }

/* ─── Misc ───────────────────────────────────────── */

.btn-ghost {
  background: none;
  border: 1.5px solid #d1d5db;
  color: #4b5563;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-ghost:hover { border-color: #9ca3af; color: #1a1a1a; }

/* Destructive variant — reuses the existing semantic error red (#dc2626,
   already used by .dash-error/.auth-error/.email-error) rather than a new
   color, so a "Remove" action reads visually distinct from "Pause". */
.btn-ghost.btn-danger { border-color: #fca5a5; color: #dc2626; }
.btn-ghost.btn-danger:hover { border-color: #dc2626; color: #991b1b; background: #fef2f2; }

.rescan-wrap { text-align: center; padding-top: 8px; }

.error-section { padding: 100px 0; text-align: center; }
.error-msg { color: #dc2626; font-size: 1rem; margin-bottom: 20px; }

.hidden { display: none !important; }

/* ─── Landing content ────────────────────────────── */

/* Sits inside .hero .container (1080px, for the two-column hero grid above it), but
   prose reads badly at that width — measured ~1040px content width, well past a
   comfortable line length. Same 760px cap as .container's default (matches
   pricing.html's 3-column .pricing-grid, already proven at this width) so body copy
   here gets a real prose measure instead of inheriting the hero's wider one. */
.landing-content { max-width: 760px; margin: 64px auto 0; border-top: 1px solid #e5e7eb; padding-top: 48px; }

/* "What PageWeight checks" — was a 7-item prose bullet list, which is exactly the
   wall of text that made the page feel like a blog rather than a product. */
.check-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.check-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.check-card h3 { font-size: 0.9rem; font-weight: 700; margin-bottom: 6px; color: #1a1a1a; }
.check-card p  { font-size: 0.85rem; color: #6b7280; line-height: 1.55; margin: 0; }

@media (max-width: 900px) { .check-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .check-grid { grid-template-columns: 1fr; } }

/* FAQ accordion — native <details>, so no JS and nothing for the CSP to allow. */
details.faq-item {
  border-bottom: 1px solid #e5e7eb;
  padding: 14px 0;
}
details.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: #1a1a1a;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: '+';
  color: #9ca3af;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}
details.faq-item[open] summary::after { content: '\2013'; }   /* en dash */
details.faq-item summary:hover { color: #4f46e5; }
details.faq-item p {
  margin-top: 10px;
  color: #4b5563;
  font-size: 0.92rem;
  line-height: 1.7;
}

/* Plans teaser — the homepage's only path to the paid tier. Before this, nothing on
   the entire site linked to /pricing, so the plans were unreachable except by typing
   the URL. */
.plans-teaser {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 18px 0 14px;
}
.plan-teaser-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.plan-teaser-name { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; font-weight: 600; }
.plan-teaser-price { font-size: 1.35rem; font-weight: 800; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1.1; }
.plan-teaser-price span { font-size: 0.8rem; font-weight: 500; color: #6b7280; letter-spacing: 0; }
.plan-teaser-detail { font-size: 0.78rem; color: #6b7280; line-height: 1.45; }
.plans-teaser-foot { font-size: 0.88rem; }
.plans-teaser-foot a { color: #2563eb; text-decoration: none; font-weight: 500; }
.plans-teaser-foot a:hover { text-decoration: underline; }

/* Secondary path out of the post-scan CTA — the highest-intent moment on the site. */
.track-cta-plans { font-size: 0.82rem; color: #6b7280; margin-top: 10px; }
.track-cta-plans a { color: #2563eb; text-decoration: none; font-weight: 500; }
.track-cta-plans a:hover { text-decoration: underline; }
#track-cta-link { display: inline-block; text-decoration: none; text-align: center; }

@media (max-width: 600px) {
  .plans-teaser { grid-template-columns: 1fr; }
}

.lc-section { margin-bottom: 48px; }
.lc-section h2 { font-size: 1.15rem; font-weight: 700; margin-bottom: 14px; }
.lc-section p { color: #4b5563; font-size: 0.95rem; line-height: 1.7; margin-bottom: 12px; }
.lc-section p:last-child { margin-bottom: 0; }
.lc-section a { color: #2563eb; }



/* ─── Strategy toggle ────────────────────────────── */

.strategy-toggle {
  display: inline-flex;
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 6px;
}
.strategy-btn {
  background: none;
  border: none;
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s, color 0.15s;
}
.strategy-btn + .strategy-btn { border-left: 1.5px solid #e5e7eb; }
.strategy-btn-active { background: #2563eb; color: #fff; }
.strategy-btn:not(.strategy-btn-active):hover { background: #f3f4f6; color: #1a1a1a; }

/* ─── Top share ──────────────────────────────────── */

.share-top {
  text-align: center;
  margin-bottom: 20px;
}
.share-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 1.5px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.share-copy-btn::before { content: '🔗'; font-size: 0.8em; }
.share-copy-btn:hover { border-color: #2563eb; color: #2563eb; }

/* ─── Share row ──────────────────────────────────── */

.share-row { margin-top: 12px; font-size: 0.85rem; color: #6b7280; display: flex; align-items: center; gap: 8px; justify-content: center; }
.share-link { color: #2563eb; cursor: pointer; text-decoration: none; }
.share-link:hover { text-decoration: underline; }

/* ─── Badge embed panel ─────────────────────────── */

.badge-embed-preview { margin-bottom: 10px; line-height: 1; }
.badge-embed-code-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px 10px;
}
.badge-embed-code {
  flex: 1;
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  font-size: 0.78rem;
  color: #374151;
  word-break: break-all;
  white-space: normal;
}
.badge-copy-btn {
  flex-shrink: 0;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.badge-copy-btn:hover { background: #1d4ed8; }

/* ─── Issues show-more ───────────────────────────── */

.issue-show-more { list-style: none; padding: 6px 0 2px; }
.issue-show-more .btn-ghost { font-size: 0.82rem; padding: 4px 10px; }

/* ─── Content pages (about, blog) ────────────────── */

.content-page { padding: 60px 0 80px; }
.content-page h1 { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 20px; }
.content-page .lead { font-size: 1.05rem; color: #4b5563; line-height: 1.7; margin-bottom: 40px; border-bottom: 1px solid #e5e7eb; padding-bottom: 32px; }
.content-page h2 { font-size: 1.1rem; font-weight: 700; margin: 32px 0 12px; }
.content-page p { font-size: 0.95rem; color: #374151; line-height: 1.7; margin-bottom: 14px; }
.content-page ul { margin: 0 0 20px 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px; }
.content-page ul li { font-size: 0.92rem; color: #374151; line-height: 1.5; }
.content-page a { color: #2563eb; }
.back-link { margin-top: 40px; display: flex; gap: 12px; flex-wrap: wrap; }
.legal-updated { font-size: 0.82rem; color: #9ca3af; margin-top: 24px; }

/* ─── Blog post chrome (breadcrumb / comparison tables) ──── */

.blog-breadcrumb { font-size: 0.82rem; color: #9ca3af; margin-bottom: 16px; }
.blog-breadcrumb a { color: #6b7280; }

.blog-compare-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.blog-compare-table thead tr { border-bottom: 2px solid #e5e7eb; text-align: left; }
.blog-compare-table tbody tr { border-bottom: 1px solid #e5e7eb; }
.blog-compare-table tbody tr:last-child { border-bottom: none; }
.blog-compare-table th, .blog-compare-table td { padding: 8px 0; }
.blog-compare-table th:not(:last-child), .blog-compare-table td:not(:last-child) { padding: 8px 12px 8px 0; }
.ta-center { text-align: center; }

/* ─── Auth (login / signup) ──────────────────────── */

.auth-page { padding: 60px 0 100px; }
.auth-card {
  max-width: 380px;
  margin: 0 auto;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.auth-card h1 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px; }
.auth-sub { font-size: 0.9rem; color: #6b7280; margin-bottom: 24px; }

.auth-form { display: flex; flex-direction: column; gap: 4px; }
.auth-label { font-size: 0.82rem; font-weight: 600; color: #374151; margin-top: 14px; margin-bottom: 6px; }
.auth-label:first-child { margin-top: 0; }
.auth-input {
  width: 100%;
  padding: 12px 14px;
  font-size: 0.95rem;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  outline: none;
  background: #fff;
  transition: border-color 0.2s;
}
.auth-input:focus { border-color: #2563eb; }
.auth-hint { font-size: 0.78rem; color: #9ca3af; margin-top: 4px; }

.btn-auth {
  margin-top: 20px;
  width: 100%;
  padding: 13px 24px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-auth:hover { background: #1d4ed8; }
.btn-auth:disabled { background: #9ca3af; cursor: not-allowed; }

.auth-error { font-size: 0.85rem; color: #dc2626; margin-top: 12px; }
.auth-switch { font-size: 0.88rem; color: #6b7280; margin-top: 20px; text-align: center; }
.auth-switch a { color: #2563eb; }

/* ─── Dashboard ──────────────────────────────────── */

.dash-page { padding: 48px 0 100px; }
.dash-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.dash-header h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; }
.dash-logout { font-size: 0.85rem; color: #6b7280; background: none; border: none; cursor: pointer; text-decoration: underline; }
.dash-logout:hover { color: #1a1a1a; }

/* Portfolio-at-a-glance strip. Same card chrome as .check-card/.blog-card
   (1.5px border, 10px radius, light shadow) rather than a new component —
   built from data the page already fetches (/entitlements + /urls), no new
   endpoint. Empty until the first load resolves (dashboard.js guards on
   currentEnt being set), so there's nothing to flash before real numbers land. */
.dash-stats { display: flex; gap: 12px; margin: 16px 0 20px; flex-wrap: wrap; }
.dash-stat-tile {
  flex: 1;
  min-width: 130px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.dash-stat-value { display: block; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #1a1a1a; }
.dash-stat-value .dash-stat-unit { font-size: 1rem; font-weight: 600; color: #6b7280; }
.dash-stat-label { display: block; font-size: 0.78rem; color: #6b7280; margin-top: 4px; }

/* Same good/ok/poor/na thresholds as .score-pill's scoreClass(), just applied
   to plain text instead of a pill background — one score-color convention
   used consistently across the row pills and this summary strip. */
.dash-stat-value.stat-good { color: #065f46; }
.dash-stat-value.stat-ok   { color: #92400e; }
.dash-stat-value.stat-poor { color: #991b1b; }
.dash-stat-value.stat-na   { color: #6b7280; }

@media (max-width: 500px) { .dash-stats { flex-direction: column; } }

/* Same card chrome as .dash-stat-tile directly above it (white, 1.5px
   border, 10px radius, light shadow) — this was already a bordered box,
   just on a flat gray background with no shadow, so it read as a separate,
   less-finished component next to the stat strip rather than part of the
   same card system. */
.entitlement-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 20px 0 32px;
  font-size: 0.88rem;
  color: #4b5563;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.entitlement-banner strong { color: #1a1a1a; }
.entitlement-banner.at-limit { background: #fffbeb; border-color: #fde68a; }
.entitlement-upgrade { color: #2563eb; font-weight: 600; white-space: nowrap; }

/* Over-limit after a downgrade. Amber, not red: nothing is broken and nothing was
   deleted — but monitoring HAS stopped on some URLs, and the user must know. */
.over-limit-notice {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #92400e;
}
.over-limit-notice strong { color: #78350f; }
.over-limit-notice a { color: #4f46e5; font-weight: 600; }

/* A row that is listed but not being checked. Dimmed, and labelled — a URL that
   looks monitored while nothing watches it is the worst state to leave a user in. */
.url-row-dormant { opacity: 0.55; }
.url-cell-dormant {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #92400e;
  background: #fef3c7;
  border-radius: 100px;
  padding: 2px 8px;
  vertical-align: middle;
}

/* The only way out of a subscription. Shown to every paid user, always. */
.entitlement-billing {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}
.entitlement-billing:hover { border-color: #6366f1; color: #4f46e5; }
.entitlement-billing:disabled { opacity: 0.6; cursor: default; }

.add-url-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.add-url-form .auth-input { flex: 2; min-width: 220px; margin: 0; }
.add-url-form select.auth-input { flex: 0 0 120px; min-width: 100px; }
.add-url-form input[name="label"] { flex: 1; min-width: 140px; }
#add-url-btn { margin-top: 0; width: auto; padding: 12px 20px; }

.url-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; background: #fff; }
.url-table th {
  text-align: left; padding: 10px 14px; border-bottom: 1.5px solid #e5e7eb;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #6b7280; font-weight: 600; background: #f9fafb;
}
.url-table td { padding: 10px 14px; border-bottom: 1px solid #f3f4f6; vertical-align: middle; }
.url-table tbody tr:last-child td { border-bottom: none; }
.url-actions-cell { white-space: nowrap; }
.url-cell-main { display: flex; flex-direction: column; gap: 2px; }
.url-cell-label { font-weight: 600; color: #1a1a1a; }
.url-cell-link { font-size: 0.8rem; color: #6b7280; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.url-cell-link:hover { color: #2563eb; }

.score-pill { display: inline-block; font-size: 0.85rem; font-weight: 700; padding: 3px 10px; border-radius: 100px; }
.score-good { background: #d1fae5; color: #065f46; }
.score-ok   { background: #fef3c7; color: #92400e; }
.score-poor { background: #fee2e2; color: #991b1b; }
.score-na   { background: #f3f4f6; color: #6b7280; }

.url-empty { text-align: center; padding: 48px 24px; color: #6b7280; font-size: 0.92rem; }

/* Skeleton loading state — replaces the old plain "Loading…" text row.
   Shares .url-table's row/cell layout (desktop table row, mobile card via
   the tbody tr fallback above) so it needs no width rules of its own. */
.url-skeleton-row td { padding: 14px; }
.skeleton-bar {
  height: 20px;
  border-radius: 6px;
  /* #f3f4f6/#e5e7eb (the page's own light-gray tokens) looked nearly
     invisible against the #f9fafb page background — darkened one step so
     the shimmer actually reads as loading content, not blank space. */
  background: linear-gradient(90deg, #e5e7eb 25%, #d1d5db 37%, #e5e7eb 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-bar { animation: none; background: #e5e7eb; }
}

/* Below 600px, a 4-column table just scrolls horizontally (.table-wrap's
   overflow-x). This turns each real row (tr[data-id] — deliberately excludes
   the header-less .url-empty placeholder row, which has no data-id) into its
   own card instead: labels replace the now-hidden <th> headers via
   data-label + ::before, same card chrome as .check-card/.blog-card.

   The .history-row that follows each main row needs the SAME display:block —
   .url-table tr[data-id] only ever matched the main row, not this one (it has
   data-history-for, not data-id). Fixed 2026-07-26: this was shipped once
   without it, verified only by checking the History *button* click toggled
   the `hidden` class — not by checking what the resulting content actually
   rendered at. A tr left at its default display:table-row inside a
   display:block tbody, with its own td forced to display:block, collapsed to
   ~105px wide (measured) instead of the full card width — Chrome generates an
   anonymous table wrapper around the orphaned table-row, which is what a bug
   report described as history content "cropped/obscured on mobile." Any
   future row-level selector added here needs to cover .history-row too, not
   just tr[data-id] — they're siblings, not one matching the other. */
@media (max-width: 600px) {
  .table-wrap { border: none; padding: 0; overflow: visible; }
  .url-table, .url-table tbody { display: block; width: 100%; }
  .url-table thead { display: none; }
  /* General fallback so any row NOT covered by a more specific selector below
     (the "Loading…" and "No URLs tracked yet" placeholder rows, and the
     skeleton rows further down) still gets display:block instead of
     collapsing — this is the same bug class as the .history-row fix above,
     just for rows that have neither data-id nor .history-row. Found the same
     way: measured the "Loading…" row at 91px wide and "No URLs tracked yet"
     at 282px wide on a 375px viewport, both while investigating the
     .history-row report. tr[data-id]/.history-row below still apply their
     own (redundant but harmless) display:block plus their real styling.

     The row-level fallback alone wasn't enough — caught by measuring the new
     skeleton rows' .skeleton-bar at 0px wide despite their tr correctly
     measuring full width. The tr going display:block doesn't cascade to its
     td: with the tr fixed but its td left at the default display:table-cell,
     the td itself becomes an orphaned anonymous-table box and shrinks to its
     content's intrinsic width (28px, for an empty div with no explicit
     size) — same failure mode as the .history-row bug, one level down the
     tree. Needs its own fallback for the same reason .history-row needed its
     own explicit rule instead of inheriting one from tr[data-id]. */
  .url-table tbody tr { display: block; width: 100%; }
  .url-table tbody tr td { display: block; width: 100%; }
  .url-table tr[data-id] {
    display: block;
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  }
  .url-table tr[data-id] td { display: block; padding: 4px 0; border-bottom: none; }
  .url-table tr[data-id] td:first-child { padding-top: 0; }
  .url-table tr[data-id] td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    width: 96px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
  }
  .url-cell-link { max-width: 100%; }
  .url-actions-cell {
    white-space: normal;
    padding-top: 10px !important;
    margin-top: 6px;
    border-top: 1px solid #f3f4f6;
  }
  .url-table tr.history-row { display: block; margin-bottom: 12px; }
  .history-row td { display: block; padding: 0; border-bottom: none; }
  .history-panel { border: 1.5px solid #e5e7eb; border-radius: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
}
.dash-error { font-size: 0.85rem; color: #dc2626; margin-bottom: 16px; }

/* ─── History chart (M6) ─────────────────────────── */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.history-row td { padding: 0; border-bottom: 1px solid #f3f4f6; }
.history-panel { padding: 16px 20px 20px; background: #f9fafb; }
.history-empty { font-size: 0.85rem; color: #6b7280; padding: 12px 0; }

.print-only { display: none; }
.history-report-head h2 { font-size: 1.1rem; font-weight: 700; margin-bottom: 2px; }
.history-report-date { font-size: 0.8rem; color: #6b7280; margin-bottom: 10px; }

.history-narrative { font-size: 0.92rem; color: #374151; margin: 0 0 12px; }

.history-print-btn {
  font-size: 0.82rem; font-weight: 600; color: #4b5563; background: none;
  border: 1px solid #d1d5db; border-radius: 6px; padding: 4px 10px;
  cursor: pointer; float: right; margin-bottom: 10px; margin-left: 8px;
}
.history-print-btn:hover { background: #f3f4f6; }

.history-print-hint { font-size: 0.75rem; color: #6b7280; clear: both; margin: 0 0 10px; }

.history-diagnostics { margin: 4px 0 18px; clear: both; }
.history-diagnostics h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; }
.history-diagnostics-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.history-diagnostics-list li {
  font-size: 0.88rem; color: #374151; padding-left: 16px; position: relative;
}
.history-diagnostics-list li::before {
  content: '→'; position: absolute; left: 0; color: #9ca3af; font-size: 0.85em;
}

.history-filmstrip { margin: 4px 0 18px; }
.history-filmstrip h3 { font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; }
.history-filmstrip-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.history-filmstrip-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; flex-shrink: 0; }
.history-filmstrip-cell img {
  width: 64px; height: auto; border: 1px solid #e5e7eb; border-radius: 4px; display: block;
}
.history-filmstrip-cell span { font-size: 0.68rem; color: #9ca3af; }

.history-chart { position: relative; clear: both; }
.history-svg { width: 100%; height: 140px; display: block; overflow: visible; touch-action: none; }

/* Line/marker color follows the current score's status band — reusing this
   site's own already-shipped good/ok/poor colors (score-pill, vital cards),
   not a new palette. Text stays in ink regardless of band (mark specs). */
.history-good .history-line { stroke: #16a34a; }
.history-good .history-fill { fill: #16a34a; opacity: 0.1; }
.history-good .history-dot  { fill: #16a34a; }
.history-ok .history-line { stroke: #d97706; }
.history-ok .history-fill { fill: #d97706; opacity: 0.1; }
.history-ok .history-dot  { fill: #d97706; }
.history-poor .history-line { stroke: #dc2626; }
.history-poor .history-fill { fill: #dc2626; opacity: 0.1; }
.history-poor .history-dot  { fill: #dc2626; }

.history-line { stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.history-dot { stroke: #f9fafb; stroke-width: 2; }
.history-end-label { font-size: 13px; font-weight: 700; fill: #1a1a1a; font-family: -apple-system, "Segoe UI", sans-serif; }
.history-crosshair { stroke: #9ca3af; stroke-width: 1; pointer-events: none; }

.history-tooltip {
  position: absolute; top: 4px; pointer-events: none;
  background: #1a1a1a; color: #fff; font-size: 0.78rem;
  padding: 5px 10px; border-radius: 6px; white-space: nowrap;
  transform: translateY(-100%);
}
.history-tooltip strong { font-weight: 700; }

.history-toggle { background: none; border: none; color: #2563eb; font-size: 0.85rem; cursor: pointer; padding: 0; }
.history-toggle:hover { text-decoration: underline; }

/* ─── Pricing (M7) ───────────────────────────────── */

.pricing-page { padding: 56px 0 100px; }
.pricing-lead { font-size: 1.05rem; color: #4b5563; max-width: 560px; margin-bottom: 40px; }
.pricing-notice { font-size: 0.95rem; line-height: 1.55; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 14px 16px; max-width: 640px; margin: -20px 0 32px; }
.pricing-notice strong { color: #78350f; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.pricing-card { display: flex; flex-direction: column; }
.pricing-card h3 { display: flex; align-items: baseline; gap: 8px; }
.pricing-price { font-size: 1.8rem; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 4px; }
.pricing-price span { font-size: 0.85rem; font-weight: 500; color: #6b7280; }
.pricing-features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 16px 0 20px; flex: 1; }
.pricing-features li { font-size: 0.88rem; color: #374151; padding-left: 20px; position: relative; }
.pricing-features li::before { content: '✓'; position: absolute; left: 0; color: #059669; font-weight: 700; }
.pricing-card.featured { border: 2px solid #2563eb; box-shadow: 0 4px 16px rgba(37,99,235,0.12); }
.pricing-current { margin-top: 10px; font-size: 0.8rem; color: #059669; font-weight: 600; text-align: center; }
#free-cta { text-align: center; }
#solo-cta, #agency-cta { text-align: center; width: 100%; }
#upgrade-error { text-align: center; }

@media (max-width: 700px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

.blog-list { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; margin-bottom: 28px; }
.blog-card { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 20px 22px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: box-shadow 0.2s, transform 0.2s; }
.blog-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }
.blog-card h2 { font-size: 1rem; font-weight: 700; margin: 0 0 8px; }
.blog-card h2 a { color: #1a1a1a; text-decoration: none; }
.blog-card h2 a:hover { color: #2563eb; }
.blog-card p { font-size: 0.88rem; color: #6b7280; line-height: 1.5; margin: 0; }
.blog-note { font-size: 0.88rem; color: #9ca3af; }
.blog-note a { color: #2563eb; }

/* ─── Footer ─────────────────────────────────────── */

.site-footer {
  background: #1a1a1a;
  color: #9ca3af;
  padding: 20px 0;
  font-size: 0.82rem;
}
.site-footer a { color: #d1d5db; }
.site-footer a:hover { color: #fff; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 8px;
}
.footer-attr { color: #9ca3af; }
.footer-nav { display: flex; gap: 16px; }
.footer-nav a { color: #9ca3af; font-size: 0.82rem; }
.footer-nav a:hover { color: #fff; }
.footer-copy { font-size: 0.78rem; color: #9ca3af; }

@media (max-width: 600px) {
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ─── Comparison panel ───────────────────────────── */

.comp-panel {
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.comp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.comp-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
}
.comp-dismiss {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}
.comp-dismiss:hover { background: #f3f4f6; color: #374151; }
.comp-score-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}
.comp-score-before { font-size: 1.4rem; font-weight: 700; color: #9ca3af; }
.comp-arrow { color: #9ca3af; }
.comp-score-after { font-size: 1.4rem; font-weight: 700; color: #1a1a1a; }
.comp-delta {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
}
.comp-better { background: #d1fae5; color: #065f46; }
.comp-worse  { background: #fee2e2; color: #991b1b; }
.comp-neutral { background: #f3f4f6; color: #6b7280; }
.comp-vitals {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-bottom: 10px;
}
.comp-vitals th {
  padding: 3px 0 5px;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9ca3af;
  font-weight: 600;
  border-bottom: 1px solid #f3f4f6;
}
.comp-vitals th:not(:first-child) { text-align: right; }
.comp-vitals td { padding: 5px 0; }
.comp-vt-label { color: #6b7280; }
.comp-vt-before { text-align: right; color: #9ca3af; padding-right: 12px; }
.comp-vt-after { text-align: right; font-weight: 500; color: #374151; }
.comp-imp { color: #059669; font-size: 0.8em; }
.comp-wor { color: #dc2626; font-size: 0.8em; }
.comp-waste {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #f3f4f6;
  font-size: 0.82rem;
  flex-wrap: wrap;
}
.comp-waste .comp-vt-label { flex-shrink: 0; }

/* ─── Dark mode ──────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root { --page-bg: #111827; }

  body { color: #e5e7eb; }

  #url-input {
    background: #1f2937;
    border-color: #374151;
    color: #f3f4f6;
  }
  #url-input:focus { border-color: #3b82f6; }
  .subtitle { color: #9ca3af; }
  .hero-stats { color: #9ca3af; }

  .vital-card {
    background: #1f2937;
    border-color: #374151;
    box-shadow: none;
  }
  .metric-na .vital-value { color: #e5e7eb; }

  .insight-poor { background: #450a0a; border-color: #7f1d1d; }
  .insight-warn { background: #451a03; border-color: #78350f; }
  .insight-ok   { background: #1f2937; border-color: #374151; }
  .insight-good { background: #052e16; border-color: #166534; color: #86efac; }
  .insight-headline { color: #f3f4f6; }
  .insight-poor .insight-headline { color: #fca5a5; }
  .insight-warn .insight-headline { color: #fde68a; }
  .insight-list li { color: #d1d5db; }
  .insight-list strong { color: #f3f4f6; }

  .summary-card {
    background: #1f2937;
    border-color: #7f1d1d;
    box-shadow: none;
  }
  .no-waste { background: #052e16; border-color: #166534; color: #86efac; }

  .table-wrap { border-color: #374151; }
  .images-table { background: #1f2937; }
  .images-table th { background: #111827; color: #9ca3af; border-bottom-color: #374151; }
  .images-table td { border-bottom-color: #374151; }
  .filename { color: #d1d5db; }
  .show-more-row td { background: #1f2937; }

  .issue-item { background: #1f2937; border-color: #374151; box-shadow: none; }
  .issue-title { color: #e5e7eb; }
  .issue-priority-badge { background: #7f1d1d; color: #fca5a5; }
  .issue-hint { color: #9ca3af; }
  .badge-embed-code-wrap { background: #111827; border-color: #374151; }
  .badge-embed-code { color: #d1d5db; }

  .cta-wp { background: linear-gradient(135deg, #052e16 0%, #14532d 100%); border-color: #166534; }
  .cta-generic { background: #1f2937; border-color: #374151; }
  .cta-card p { color: #9ca3af; }
  .cta-badge { background: #111827; }

  .email-section { background: #1f2937; border-color: #374151; }
  .email-section h3 { color: #f3f4f6; }
  .email-section > p { color: #9ca3af; }
  #email-input { background: #111827; border-color: #374151; color: #f3f4f6; }

  .btn-ghost { border-color: #374151; color: #9ca3af; }
  .btn-ghost:hover { border-color: #6b7280; color: #e5e7eb; }
  .btn-ghost.btn-danger { border-color: #7f1d1d; color: #f87171; }
  .btn-ghost.btn-danger:hover { border-color: #f87171; color: #fca5a5; background: none; }

  .landing-content { border-top-color: #374151; }
  .lc-section p { color: #9ca3af; }
  .lc-section a { color: #60a5fa; }
  .score-ring .score-value { color: #f3f4f6; }
  .score-ring-label { color: #9ca3af; }
  .rub-step { background: #1f2937; color: #9ca3af; }

  .content-page h1, .content-page h2, .content-page h3 { color: #f3f4f6; }
  .content-page p, .content-page li { color: #9ca3af; }
  .content-page a { color: #60a5fa; }
  .content-page .lead { color: #d1d5db; border-bottom-color: #374151; }

  .auth-card { background: #1f2937; border-color: #374151; box-shadow: none; }
  .auth-card h1 { color: #f3f4f6; }
  .auth-sub { color: #9ca3af; }
  .auth-label { color: #d1d5db; }
  .auth-input { background: #111827; border-color: #374151; color: #f3f4f6; }
  .auth-input:focus { border-color: #3b82f6; }
  .auth-hint { color: #6b7280; }
  .auth-switch { color: #9ca3af; }
  .auth-switch a { color: #60a5fa; }

  .dash-header h1 { color: #f3f4f6; }
  .dash-logout { color: #9ca3af; }
  .dash-logout:hover { color: #f3f4f6; }
  .dash-stat-tile { background: #1f2937; border-color: #374151; box-shadow: none; }
  .dash-stat-value { color: #f3f4f6; }
  .dash-stat-value.stat-good { color: #6ee7b7; }
  .dash-stat-value.stat-ok   { color: #fcd34d; }
  .dash-stat-value.stat-poor { color: #fca5a5; }
  .dash-stat-value.stat-na   { color: #9ca3af; }
  .dash-stat-label { color: #9ca3af; }
  .entitlement-banner { background: #1f2937; border-color: #374151; color: #9ca3af; box-shadow: none; }
  .entitlement-banner strong { color: #f3f4f6; }
  .entitlement-banner.at-limit { background: #451a03; border-color: #78350f; }
  .entitlement-upgrade { color: #60a5fa; }
  .entitlement-billing { border-color: #374151; color: #9ca3af; }
  .entitlement-billing:hover { border-color: #6366f1; color: #818cf8; }
  .over-limit-notice { background: #2b2413; border-color: #57451c; color: #fcd34d; }
  .over-limit-notice strong { color: #fde68a; }
  .over-limit-notice a { color: #818cf8; }
  .url-cell-dormant { background: #57451c; color: #fcd34d; }
  .url-table { background: #1f2937; }
  .url-table th { background: #111827; color: #9ca3af; border-bottom-color: #374151; }
  .url-table td { border-bottom-color: #374151; }
  .url-cell-label { color: #f3f4f6; }
  .url-cell-link { color: #9ca3af; }
  .url-empty { color: #9ca3af; }
  .skeleton-bar { background: linear-gradient(90deg, #1f2937 25%, #374151 37%, #1f2937 63%); background-size: 400% 100%; }
  @media (prefers-reduced-motion: reduce) { .skeleton-bar { background: #374151; } }

  @media (max-width: 600px) {
    .url-table tr[data-id] { background: #1f2937; border-color: #374151; box-shadow: none; }
    .url-table tr[data-id] td[data-label]::before { color: #6b7280; }
    .url-actions-cell { border-top-color: #374151; }
    .history-panel { border-color: #374151; box-shadow: none; }
  }

  .history-row td { border-bottom-color: #374151; }
  .history-panel { background: #111827; }
  .history-empty { color: #9ca3af; }
  .history-dot { stroke: #111827; }
  .history-end-label { fill: #f3f4f6; }
  .history-crosshair { stroke: #6b7280; }
  .history-toggle { color: #60a5fa; }
  .history-narrative { color: #d1d5db; }
  .history-report-date { color: #9ca3af; }
  .history-print-btn { color: #d1d5db; border-color: #374151; }
  .history-print-btn:hover { background: #1f2937; }
  .history-print-hint { color: #9ca3af; }
  .history-diagnostics-list li { color: #d1d5db; }
  .history-filmstrip-cell img { border-color: #374151; }

  /* Hero demo card */
  .demo-card { background: #1f2937; border-color: #374151; box-shadow: 0 12px 32px rgba(0,0,0,0.35); }
  .demo-top { border-bottom-color: #374151; }
  .demo-url { color: #9ca3af; }
  .demo-score { color: #fbbf24; }
  .demo-vital { border-color: #374151; }
  .demo-vital small { color: #9ca3af; }
  .dv-good { border-color: #14532d; } .dv-good span { color: #4ade80; }
  .dv-ok   { border-color: #713f12; } .dv-ok   span { color: #fbbf24; }
  .dv-poor { border-color: #7f1d1d; } .dv-poor span { color: #fca5a5; }
  .demo-issue { color: #d1d5db; }

  /* Proof band */
  .proof-band { color: #9ca3af; border-color: #374151; }
  .proof-band strong { color: #f3f4f6; }
  .proof-band a { color: #818cf8; }

  /* Check cards */
  .check-card { background: #1f2937; border-color: #374151; box-shadow: none; }
  .check-card h3 { color: #f3f4f6; }
  .check-card p  { color: #9ca3af; }

  /* FAQ accordion */
  details.faq-item { border-bottom-color: #374151; }
  details.faq-item summary { color: #f3f4f6; }
  details.faq-item summary:hover { color: #818cf8; }
  details.faq-item summary::after { color: #6b7280; }
  details.faq-item p { color: #9ca3af; }

  .plan-teaser-card { background: #1f2937; border-color: #374151; box-shadow: none; }
  .plan-teaser-price { color: #f3f4f6; }
  .plan-teaser-name, .plan-teaser-detail { color: #9ca3af; }
  .plans-teaser-foot a, .track-cta-plans a { color: #818cf8; }
  .track-cta-plans { color: #9ca3af; }

  .pricing-lead { color: #9ca3af; }
  .pricing-notice { color: #fcd34d; background: #2b2413; border-color: #57451c; }
  .pricing-notice strong { color: #fde68a; }
  .pricing-price { color: #f3f4f6; }
  .pricing-price span { color: #9ca3af; }
  .pricing-features li { color: #d1d5db; }
  .pricing-card.featured { box-shadow: none; }
  .pricing-current { color: #6ee7b7; }

  .blog-card { background: #1f2937; border-color: #374151; box-shadow: none; }
  .blog-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.3); }
  .blog-card h2 a { color: #f3f4f6; }
  .blog-card p { color: #9ca3af; }

  .site-footer { background: #0d1117; }
  .footer-copy { color: #9ca3af; }

  .strategy-toggle { border-color: #374151; }
  .strategy-btn { color: #9ca3af; }
  .strategy-btn + .strategy-btn { border-left-color: #374151; }
  .strategy-btn:not(.strategy-btn-active):hover { background: #1f2937; color: #e5e7eb; }

  .share-copy-btn { border-color: #374151; color: #9ca3af; }
  .share-copy-btn:hover { border-color: #3b82f6; color: #60a5fa; }

  .comp-panel { background: #1f2937; border-color: #374151; box-shadow: none; }
  .comp-score-after { color: #f3f4f6; }
  .comp-dismiss:hover { background: #374151; color: #e5e7eb; }
  .comp-vitals th { border-bottom-color: #374151; }
  .comp-vt-after { color: #d1d5db; }
  .comp-waste { border-top-color: #374151; }
}

/* ─── Responsive ─────────────────────────────────── */

@media (max-width: 600px) {
  .hero { padding: 48px 0 56px; }
  .hero h1 { font-size: 1.75rem; }
  .input-wrap { flex-direction: column; }
  .email-form { flex-direction: column; }
  .summary-card { padding: 24px 20px; }
  .waste-number { font-size: 2.4rem; }
  .cta-card { padding: 24px 20px; }
  .email-section { padding: 20px; }
  .col-filename { max-width: 160px; }
}

/* ─── Print ──────────────────────────────────────────── */

@media print {
  /* Hide everything except the results content */
  .site-header,
  .hero,
  .landing-content,
  .loading,
  .error-section,
  .share-top,
  .comp-panel,
  .email-section,
  #cta-section,
  .rescan-wrap,
  .site-footer,
  #strategy-toggle,
  .effort-badge,
  .show-more-row,
  .issue-show-more,
  .dash-header,
  .entitlement-banner,
  .add-url-form,
  .url-table thead,
  #url-table tr[data-id],
  .history-toggle,
  .btn-ghost,
  .no-print { display: none !important; }

  .print-only { display: block; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .container { max-width: none; padding: 0 16px; }
  .results { padding: 16px 0 32px; }

  /* Force color printing for the score ring gradient */
  .score-ring { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Remove shadows and simplify borders */
  .vital-card,
  .issue-item,
  .insight-card,
  .summary-card,
  .comp-panel { box-shadow: none !important; }

  /* Allow vitals to wrap naturally on paper */
  .vitals-row { flex-wrap: wrap; gap: 6px; }
  .vital-card { flex: 1; min-width: 70px; }

  /* Don't break sections across pages */
  .images-section,
  .other-issues,
  .third-party,
  .insight-card,
  .vitals-row { page-break-inside: avoid; break-inside: avoid; }

  /* Show full filename column */
  .table-wrap { overflow: visible; }
  .col-filename { max-width: none; }

  /* Print footer attribution */
  body::after {
    content: 'Generated by pageweight.co · Powered by Google PageSpeed Insights';
    display: block;
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    font-size: 9pt;
    color: #9ca3af;
    text-align: center;
  }
}