/* =========================================================
   ScanFixGrow Design Tokens
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  --pulse-50:  #FFF1EB; --pulse-100: #FFE0D2; --pulse-200: #FFC1A6;
  --pulse-300: #FF9F75; --pulse-400: #FF7C4A; --pulse-500: #FF5B2E;
  --pulse-600: #E84A1E; --pulse-700: #C13C16; --pulse-800: #8F2C0F; --pulse-900: #5C1D0A;
  --signal-500: #0B5FFF; --signal-600: #0048CC;
  --ink:       #0B0D12; --ink-2: #1A1F2B; --ink-3: #2A3140;
  --slate-700: #3B4254; --slate-600: #5A6478; --slate-500: #7A8497;
  --slate-400: #9CA4B5; --slate-300: #C2C8D2; --slate-200: #DCE0E7; --slate-100: #ECEEF2;
  --cloud:     #F6F7F9; --cloud-2: #FBFBFC; --white: #FFFFFF;
  --success:   #00A86B; --success-bg: #E5F7EE;
  --warning:   #FFB020; --warning-bg: #FFF4DC;
  --danger:    #E5484D; --danger-bg:  #FBE6E7;
  --fg-1: var(--ink); --fg-2: var(--slate-700); --fg-3: var(--slate-600);
  --fg-4: var(--slate-500); --fg-on-dark: var(--white); --fg-on-pulse: var(--white);
  --bg-1: var(--white); --bg-2: var(--cloud); --bg-3: var(--slate-100);
  --bg-dark: var(--ink); --bg-dark-2: var(--ink-2);
  --border: #E6E8EC; --border-strong: #D2D6DE; --border-dark: var(--ink-3);
  --accent: var(--pulse-500); --accent-hover: var(--pulse-600);
  --accent-press: var(--pulse-700); --accent-soft: var(--pulse-50);
  --link: var(--signal-500); --link-hover: var(--signal-600);
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(11 13 18/.06);
  --shadow-2: 0 6px 24px -8px rgb(11 13 18/.12);
  --shadow-3: 0 24px 60px -20px rgb(11 13 18/.22);
  --shadow-pulse: 0 12px 32px -8px rgb(255 91 46/.45);
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-sans: 'Geist', ui-sans-serif, system-ui, 'Helvetica Neue', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  /* Legacy compat aliases */
  --blue: var(--signal-500); --blue-dark: var(--signal-600);
  --blue-light: #ECF2FF; --blue-mid: #4A7CFF;
  --green: var(--success); --green-light: var(--success-bg);
  --amber: var(--warning); --amber-light: var(--warning-bg);
  --red: var(--danger); --red-light: var(--danger-bg);
  --gray-50:#F8F9FA;--gray-100:#F1F3F5;--gray-200:#E9ECEF;--gray-300:#DEE2E6;
  --gray-400:#CED4DA;--gray-500:#ADB5BD;--gray-600:#6C757D;--gray-700:#495057;
  --gray-800:#343A40;--gray-900:#212529;
  --sidebar-w: 230px; --topbar-h: 60px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); color: var(--fg-2); background: #fff; line-height: 1.6; font-size: 15px; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; font-family: var(--font-sans); }

/* ── Type classes ── */
.eyebrow { font-size:12px;font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:block; }
.h1 { font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4vw,52px);line-height:1.12;letter-spacing:-0.025em;color:var(--ink); }
.h2 { font-family:var(--font-display);font-weight:700;font-size:clamp(26px,3vw,40px);line-height:1.12;color:var(--ink); }
.h3 { font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.5vw,28px);line-height:1.3;color:var(--ink); }
.body-lg { font-size:18px;line-height:1.6;color:var(--fg-2); }

/* ── sfg-root ── */
.sfg-root { font-family:var(--font-sans);color:var(--fg-2);background:var(--bg-1); }

/* ── Buttons ── */
.sfg-btn {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-sans);font-weight:600;font-size:15px;line-height:1;
  padding:14px 22px;border-radius:var(--radius-sm);border:1px solid transparent;
  cursor:pointer;transition:all 140ms ease;white-space:nowrap;
}
.sfg-btn:active { transform:translateY(1px); }
.sfg-btn--primary { background:var(--accent);color:#fff;box-shadow:var(--shadow-pulse); }
.sfg-btn--primary:hover { background:var(--accent-hover); }
.sfg-btn--ghost { background:transparent;color:var(--ink);border-color:var(--border-strong); }
.sfg-btn--ghost:hover { background:var(--cloud);border-color:var(--ink); }
.sfg-btn--dark { background:var(--ink);color:#fff; }
.sfg-btn--dark:hover { background:var(--ink-2); }
.sfg-btn--sm { font-size:14px;padding:10px 16px; }
.sfg-btn--lg { font-size:16px;padding:16px 26px; }

/* ── Cards ── */
.sfg-card {
  background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-1);padding:24px;
  transition:box-shadow 200ms ease,border-color 200ms ease;
}
.sfg-card:hover { box-shadow:var(--shadow-2);border-color:var(--border-strong); }

/* ── Pills ── */
.sfg-pill {
  display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;
  letter-spacing:0.02em;padding:6px 12px;border-radius:var(--radius-pill);
  background:var(--accent-soft);color:var(--pulse-700);border:1px solid var(--pulse-100);
}
.sfg-pill--neutral { background:var(--bg-3);color:var(--fg-1);border-color:var(--border); }
.sfg-pill--success { background:var(--success-bg);color:#057A4F;border-color:#B7E6D0; }
.sfg-pill--danger  { background:var(--danger-bg);color:#B7282C;border-color:#F4C8CA; }
.sfg-pill--warning { background:var(--warning-bg);color:#7A4900;border-color:#FAC775; }

/* ── NAV ── */
.sfg-nav {
  position:sticky;top:0;z-index:100;height:72px;
  background:transparent;border-bottom:1px solid transparent;
  transition:all 200ms ease;
}
.sfg-nav-inner {
  max-width:1240px;margin:0 auto;height:100%;
  display:flex;align-items:center;justify-content:space-between;padding:0 32px;
}
.sfg-wordmark {
  display:flex;align-items:center;gap:10px;text-decoration:none;
  font-family:var(--font-display);font-weight:700;font-size:20px;
  letter-spacing:-0.03em;color:var(--ink);
}
.sfg-mark {
  width:26px;height:26px;background:var(--accent);border-radius:6px;
  transform:rotate(45deg);position:relative;flex-shrink:0;
}
.sfg-mark::after {
  content:'';position:absolute;inset:6px;background:#fff;border-radius:2px;
}
.sfg-nav-links { display:flex;gap:28px; }
.sfg-nav-links a { font-size:14px;font-weight:500;color:var(--fg-2);transition:color 140ms; }
.sfg-nav-links a:hover { color:var(--ink); }

/* ── HERO ── */
.sfg-hero { position:relative;overflow:hidden;padding-top:0; }
.sfg-hero-bg { position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none; }
.sfg-hero-content {
  position:relative;z-index:1;max-width:1240px;margin:0 auto;
  padding:72px 32px 96px;text-align:center;
}
.sfg-hero-title {
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(48px,7vw,84px);line-height:1.04;
  letter-spacing:-0.03em;color:var(--ink);
  max-width:980px;margin:0 auto 24px;
}
.sfg-hero-sub {
  font-size:20px;line-height:1.6;color:var(--fg-2);
  max-width:640px;margin:0 auto 36px;
}
.sfg-scan-form {
  max-width:560px;margin:0 auto 18px;
  display:flex;align-items:stretch;
  background:#fff;border:1px solid var(--border-strong);
  border-radius:10px;overflow:hidden;box-shadow:var(--shadow-1);
}
.sfg-scan-prefix {
  padding:0 16px;display:flex;align-items:center;gap:8px;
  background:var(--cloud);border-right:1px solid var(--border);
  color:var(--fg-3);font-family:var(--font-mono);font-size:14px;white-space:nowrap;
}
.sfg-scan-form input {
  flex:1;border:0;padding:16px 14px;font-family:var(--font-sans);
  font-size:16px;color:var(--fg-1);outline:none;min-width:0;
}
.sfg-scan-form .sfg-btn { border-radius:0;padding:0 24px; }

/* ── MOCKUP ── */
.sfg-mockup {
  margin-top:64px;max-width:1100px;margin-left:auto;margin-right:auto;
  background:#fff;border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow-3);overflow:hidden;text-align:left;
}
.sfg-mockup-chrome {
  display:flex;align-items:center;gap:10px;padding:14px 18px;
  background:var(--cloud);border-bottom:1px solid var(--border);
}
.sfg-mockup-dots { display:flex;gap:6px; }
.sfg-mockup-dots span { width:11px;height:11px;border-radius:50%;display:block; }
.sfg-mockup-url {
  margin-left:16px;padding:5px 12px;background:#fff;border-radius:6px;
  border:1px solid var(--border);font-family:var(--font-mono);font-size:12px;color:var(--fg-3);
}
.sfg-mockup-body { display:grid;grid-template-columns:220px 1fr;min-height:380px; }
.sfg-mockup-sidebar { background:var(--cloud-2);border-right:1px solid var(--border);padding:18px; }
.sfg-mock-section-label { font-size:11px;font-weight:600;color:var(--fg-3);letter-spacing:0.06em;margin-bottom:10px; }
.sfg-mock-item {
  padding:8px 10px;border-radius:6px;margin-bottom:4px;
  font-size:13px;color:var(--fg-2);font-weight:500;font-family:var(--font-mono);cursor:default;
}
.sfg-mock-item--active { background:var(--accent-soft);color:var(--pulse-700);font-weight:600; }
.sfg-mock-item--tool { display:flex;align-items:center;gap:8px;font-family:var(--font-sans); }
.sfg-mock-item--active-tool { background:var(--bg-3);color:var(--ink); }
.sfg-mockup-main { padding:24px; }
.sfg-score-tile { border:1px solid var(--border);border-radius:8px;padding:12px 14px; }
.sfg-score-tile-label { font-size:11px;color:var(--fg-3);margin-bottom:4px; }
.sfg-score-tile-val { font-family:var(--font-display);font-weight:700;font-size:28px;letter-spacing:-0.02em;line-height:1; }

/* ── LOGOBAR ── */
.sfg-logobar { border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--cloud-2); }
.sfg-logobar-inner { max-width:1240px;margin:0 auto;padding:28px 32px;text-align:center; }
.sfg-logos { display:flex;justify-content:space-between;align-items:center;gap:32px;opacity:0.65;flex-wrap:wrap;justify-content:center; }
.sfg-logos span { font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--fg-3);letter-spacing:-0.02em; }

/* ── SECTION ── */
.sfg-section { padding:96px 0; }
.sfg-container { max-width:1240px;margin:0 auto;padding:0 32px; }
.sfg-section-header { text-align:center;margin-bottom:56px;max-width:720px;margin-left:auto;margin-right:auto; }

/* ── FEATURES ── */
.sfg-features-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:16px; }
.sfg-feature-card { padding:24px; }
.sfg-feat-icon {
  width:40px;height:40px;border-radius:8px;background:var(--accent-soft);
  color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.sfg-feature-card h3 { font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ink);margin:0 0 8px;letter-spacing:-0.01em; }
.sfg-feature-card p { font-size:14px;color:var(--fg-3);line-height:1.55;margin:0; }

/* ── STATS ── */
.sfg-stats { background:var(--ink);color:#fff;padding:80px 0; }
.sfg-stats-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:24px; }
.sfg-stat-num { font-family:var(--font-display);font-weight:700;font-size:56px;color:var(--accent);letter-spacing:-0.03em;line-height:1; }
.sfg-stat-label { font-size:14px;color:rgba(255,255,255,0.65);margin-top:10px; }

/* ── PRICING ── */
.sfg-billing-toggle {
  display:inline-flex;margin-top:28px;padding:4px;
  background:#fff;border:1px solid var(--border);border-radius:999px;
}
.sfg-bill-btn {
  padding:8px 18px;border-radius:999px;border:0;cursor:pointer;
  background:transparent;color:var(--fg-2);font-weight:600;font-size:13px;font-family:var(--font-sans);
  transition:all 140ms;
}
.sfg-bill-btn--active { background:var(--ink);color:#fff; }
.sfg-pricing-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px; }
.sfg-pricing-card {
  background:#fff;border:1.5px solid var(--border);border-radius:14px;
  padding:28px;box-shadow:var(--shadow-1);position:relative;
}
.sfg-pricing-card--featured { border-color:var(--accent);box-shadow:var(--shadow-2); }
.sfg-most-popular {
  position:absolute;top:-14px;left:28px;
  background:var(--accent);color:#fff;font-size:12px;font-weight:600;
  padding:4px 14px;border-radius:999px;
}
.sfg-plan-name { font-size:13px;font-weight:600;color:var(--fg-3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px; }
.sfg-plan-price { display:flex;align-items:baseline;gap:6px;margin-bottom:8px; }
.sfg-plan-price span:first-child { font-family:var(--font-display);font-weight:700;font-size:52px;color:var(--ink);letter-spacing:-0.03em;line-height:1; }
.sfg-plan-period { font-size:14px;color:var(--fg-3); }
.sfg-plan-blurb { font-size:14px;color:var(--fg-3);margin-bottom:20px; }
.sfg-plan-features { list-style:none;display:flex;flex-direction:column;gap:10px; }
.sfg-plan-features li { display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--fg-2); }
.sfg-check { color:var(--success);font-weight:700;flex-shrink:0; }

/* ── TESTIMONIAL ── */
.sfg-quote {
  font-family:var(--font-display);font-weight:600;font-size:clamp(22px,3vw,36px);
  letter-spacing:-0.025em;line-height:1.2;color:var(--ink);margin-bottom:32px;
}

/* ── CTA BANNER ── */
.sfg-cta-banner {
  max-width:1100px;margin:0 auto;border-radius:20px;padding:72px 48px;
  background:linear-gradient(135deg,#FF5B2E 0%,#E84A1E 100%);
  color:#fff;text-align:center;position:relative;overflow:hidden;
}
.sfg-cta-glow {
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 20% 20%,rgba(255,255,255,0.18),transparent 40%),
             radial-gradient(circle at 80% 60%,rgba(255,255,255,0.12),transparent 40%);
}
.sfg-cta-title {
  font-family:var(--font-display);font-weight:700;font-size:clamp(32px,5vw,56px);
  letter-spacing:-0.03em;line-height:1.05;margin:0 0 20px;
}

/* ── FOOTER ── */
.sfg-footer { background:var(--ink);color:rgba(255,255,255,0.7);padding:64px 32px 32px; }
.sfg-footer-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:48px; }
.sfg-footer-heading { font-size:13px;font-weight:600;color:#fff;margin-bottom:14px; }
.sfg-footer a { display:block;font-size:14px;color:rgba(255,255,255,0.65);margin-bottom:10px;transition:color 140ms; }
.sfg-footer a:hover { color:#fff; }
.sfg-footer-bottom {
  border-top:1px solid var(--ink-3);padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;font-size:13px;
}

/* ═══ DASHBOARD STYLES ═══ */
#dashboard-page { display:flex;min-height:100vh;background:var(--cloud); }

.sidebar {
  width:var(--sidebar-w);background:#fff;border-right:1px solid var(--border);
  display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100%;
  overflow-y:auto;z-index:50;
}
.sidebar-logo {
  font-family:var(--font-display);font-size:18px;font-weight:700;
  padding:20px 18px;border-bottom:1px solid var(--border);margin-bottom:8px;
  display:flex;align-items:center;gap:8px;letter-spacing:-0.02em;color:var(--ink);
}
.nav-section-label { font-size:10px;font-weight:600;letter-spacing:0.1em;color:var(--fg-4);padding:10px 18px 4px; }
.nav-item {
  display:flex;align-items:center;gap:10px;padding:9px 18px;
  font-size:13.5px;color:var(--fg-3);cursor:pointer;
  border-left:3px solid transparent;transition:all 120ms;
}
.nav-item:hover { background:var(--cloud);color:var(--ink); }
.nav-item.active { background:var(--accent-soft);color:var(--accent);font-weight:600;border-left-color:var(--accent); }
.nav-icon { font-size:13px;width:18px;text-align:center; }
.sidebar-footer { margin-top:auto;padding:16px;border-top:1px solid var(--border); }
.plan-badge-side { font-size:11px;font-weight:600;color:var(--fg-4);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px; }
.btn-upgrade {
  width:100%;padding:9px;background:linear-gradient(135deg,var(--accent),#C13C16);
  color:#fff;border:none;border-radius:var(--radius-md);font-size:13px;font-weight:600;margin-bottom:10px;
}
.back-link { font-size:12px;color:var(--fg-4);cursor:pointer;text-align:center; }
.back-link:hover { color:var(--accent); }

.main-area { margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column; }
.topbar {
  height:var(--topbar-h);background:#fff;border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 24px;gap:16px;
  position:sticky;top:0;z-index:40;
}
.search-domain-bar {
  flex:1;display:flex;align-items:center;background:var(--cloud);
  border:1.5px solid var(--border-strong);border-radius:var(--radius-md);
  padding:0 12px;gap:8px;max-width:600px;
}
.search-domain-bar input { flex:1;border:none;background:transparent;font-size:14px;color:var(--ink);outline:none;padding:8px 0;font-family:var(--font-sans); }
.search-icon { font-size:14px;color:var(--fg-4); }
.btn-analyze {
  padding:6px 16px;background:var(--accent);color:#fff;border:none;
  border-radius:var(--radius-sm);font-size:13px;font-weight:600;white-space:nowrap;transition:background 140ms;
}
.btn-analyze:hover { background:var(--accent-hover); }
.topbar-right { display:flex;align-items:center;gap:12px;margin-left:auto; }
.project-badge { font-size:12px;color:var(--fg-3);background:var(--cloud);padding:5px 12px;border-radius:var(--radius-sm); }
.user-avatar {
  width:34px;height:34px;background:linear-gradient(135deg,var(--accent),#C13C16);
  color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
}
.content-area { padding:28px;flex:1; }

/* ── Dashboard components ── */
.page-header { margin-bottom:24px; }
.page-title { font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink);margin-bottom:4px; }
.page-sub { font-size:13px;color:var(--fg-3); }

.metric-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px; }
.metric-card { background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);padding:16px 18px; }
.metric-label { font-size:12px;color:var(--fg-3);margin-bottom:6px;font-weight:500; }
.metric-val { font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink); }
.metric-change { display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:2px 7px;border-radius:999px;margin-top:5px;font-weight:500; }
.change-up { background:var(--success-bg);color:#057A4F; }
.change-down { background:var(--danger-bg);color:#B7282C; }
.change-neutral { background:var(--bg-3);color:var(--fg-3); }

.card { background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 24px;margin-bottom:18px; }
.card-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.card-title { font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--ink); }
.card-sub { font-size:12px;color:var(--fg-3);margin-top:2px; }
.two-col { display:grid;grid-template-columns:1fr 1fr;gap:18px; }
.three-col { display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px; }

.btn-sm { padding:5px 12px;font-size:12px;font-weight:500;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);background:transparent;color:var(--fg-2);transition:all 120ms; }
.btn-sm:hover { background:var(--cloud); }
.btn-sm-primary { background:var(--accent);color:#fff;border-color:var(--accent); }
.btn-sm-primary:hover { background:var(--accent-hover); }

.progress-bar { height:6px;background:var(--border);border-radius:999px;overflow:hidden; }
.progress-fill { height:100%;border-radius:999px;transition:width 1s ease; }
.fill-green { background:var(--success); }
.fill-amber { background:var(--warning); }
.fill-red { background:var(--danger); }
.fill-blue { background:var(--signal-500); }

.pill { display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600; }
.pill-green { background:var(--success-bg);color:#057A4F; }
.pill-amber { background:var(--warning-bg);color:#7A4900; }
.pill-red { background:var(--danger-bg);color:#B7282C; }
.pill-blue { background:#ECF2FF;color:var(--signal-600); }
.pill-purple { background:#EEEDFE;color:#534AB7; }
.pill-gray { background:var(--bg-3);color:var(--fg-3); }

.data-table { width:100%;border-collapse:collapse;font-size:13px; }
.data-table th { text-align:left;padding:8px 10px;font-size:11px;font-weight:600;color:var(--fg-3);text-transform:uppercase;letter-spacing:0.06em;border-bottom:1.5px solid var(--border); }
.data-table td { padding:9px 10px;border-bottom:1px solid var(--slate-100);color:var(--fg-2); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:var(--cloud); }
.td-link { color:var(--link); }
.td-mono { font-family:var(--font-mono);font-size:12px; }

.tab-bar { display:flex;gap:0;border-bottom:1.5px solid var(--border);margin-bottom:20px; }
.tab { padding:9px 16px;font-size:13px;font-weight:500;color:var(--fg-3);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;transition:all 120ms; }
.tab:hover { color:var(--ink); }
.tab.active { color:var(--accent);border-bottom-color:var(--accent); }

.issue-item { display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--slate-100);cursor:pointer;transition:background 120ms; }
.issue-item:hover { background:var(--cloud);margin:0 -24px;padding:11px 24px; }
.issue-item:last-child { border-bottom:none; }
.issue-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px; }
.dot-red { background:var(--danger); }
.dot-amber { background:var(--warning); }
.dot-green { background:var(--success); }
.issue-main { font-size:13px;color:var(--ink);flex:1;font-weight:500; }
.issue-detail { font-size:12px;color:var(--fg-3);margin-top:2px; }
.issue-count { font-size:13px;font-weight:700;margin-left:auto;padding-left:12px; }

.health-ring-circle { transition:stroke-dashoffset 1.3s ease; }
.score-chip { display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;font-size:14px;font-weight:700;flex-shrink:0; }
.score-good { background:var(--success-bg);color:#057A4F; }
.score-ok { background:var(--warning-bg);color:#7A4900; }
.score-bad { background:var(--danger-bg);color:#B7282C; }

.filter-bar { display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap; }
.filter-pill { padding:5px 14px;border-radius:999px;font-size:12px;font-weight:500;cursor:pointer;border:1.5px solid var(--border);color:var(--fg-3);background:#fff;transition:all 120ms; }
.filter-pill:hover { border-color:var(--accent);color:var(--accent); }
.filter-pill.active { background:var(--accent);color:#fff;border-color:var(--accent); }

.page-type { font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--radius-sm); }
.type-home { background:var(--pulse-50);color:var(--pulse-700); }
.type-product { background:#ECF2FF;color:var(--signal-600); }
.type-blog { background:var(--success-bg);color:#057A4F; }
.type-category { background:var(--warning-bg);color:#7A4900; }
.type-landing { background:#fbeaf0;color:#993556; }
.type-other { background:var(--bg-3);color:var(--fg-3); }

.rank-change-up { color:var(--success);font-weight:600; }
.rank-change-down { color:var(--danger);font-weight:600; }
.rank-change-same { color:var(--fg-4); }
.sparkline { display:inline-flex;align-items:flex-end;gap:2px;height:24px; }
.spark-bar { width:4px;border-radius:1px; }

.gap-row { display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--slate-100);font-size:13px;align-items:center; }
.gap-header { font-size:11px;color:var(--fg-3);font-weight:600;text-transform:uppercase;letter-spacing:0.05em; }
.kd-bar { width:60px;height:6px;background:var(--border);border-radius:999px;overflow:hidden; }

.ai-box { background:linear-gradient(135deg,#fff8f5 0%,#fff1ec 100%);border:1.5px solid var(--pulse-200);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:18px; }
.ai-box-header { display:flex;align-items:center;gap:8px;margin-bottom:10px; }
.ai-badge { font-size:11px;font-weight:700;background:var(--accent);color:#fff;padding:2px 8px;border-radius:999px;letter-spacing:0.05em; }
.ai-box-title { font-size:14px;font-weight:600;color:var(--ink); }
.ai-box-body { font-size:13px;color:var(--fg-2);line-height:1.7; }

@media (max-width:1100px) {
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .two-col,.three-col { grid-template-columns:1fr; }
  .sfg-features-grid { grid-template-columns:repeat(2,1fr); }
  .sfg-stats-grid { grid-template-columns:repeat(2,1fr); }
  .sfg-pricing-grid { grid-template-columns:1fr; }
  .sfg-footer-grid { grid-template-columns:1fr 1fr; }
  .sfg-mockup-body { grid-template-columns:1fr; }
  .sfg-mockup-sidebar { display:none; }
}
@media (max-width:768px) {
  .sfg-nav-links { display:none; }
  .sidebar { transform:translateX(-100%); }
  .main-area { margin-left:0; }
  .sfg-features-grid { grid-template-columns:1fr; }
  .sfg-hero-content { padding:48px 20px 64px; }
  .sfg-scan-form { flex-direction:column;border-radius:var(--radius-md); }
  .sfg-scan-form .sfg-btn { border-radius:var(--radius-sm);margin:8px;padding:14px; }
  .sfg-scan-prefix { border-right:none;border-bottom:1px solid var(--border);justify-content:center;padding:12px; }
  .sfg-cta-banner { padding:48px 24px; }
}

/* ── FOOTER FULL 5-COLUMN ── */
.sfg-footer-grid-full {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 48px;
}
.sfg-footer-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sfg-footer-list li a {
  font-size: 14px;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 140ms;
}
.sfg-footer-list li a:hover { color: #fff; }

@media (max-width: 1100px) {
  .sfg-footer-grid-full {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .sfg-footer-grid-full {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── DASHBOARD TOP NAV ── */
.dash-topnav {
  height: 48px;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--ink-3);
  position: sticky;
  top: 0;
  z-index: 45;
}
.dash-topnav-links {
  display: flex;
  gap: 24px;
}
.dash-topnav-links a {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 140ms;
}
.dash-topnav-links a:hover { color: #fff; }

/* ── DASHBOARD FOOTER ── */
.dash-footer {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: 20px 24px;
  margin-top: auto;
}
.dash-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* Fix main-area to be flex column so footer sticks to bottom */
.main-area {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content-area {
  flex: 1;
}

/* Sidebar logo hover */
.sidebar-logo:hover {
  background: var(--cloud);
}

/* ── SMART NAV AUTH AREA ── */
.nav-auth-area {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Login button in nav - ghost style */
.nav-login-btn {
  background: transparent !important;
  color: var(--fg-1) !important;
  border: 1.5px solid var(--border-strong) !important;
  box-shadow: none !important;
}
.nav-login-btn:hover {
  background: var(--cloud) !important;
}

/* Signup button - orange primary */
.nav-signup-btn {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-pulse) !important;
}
.nav-signup-btn:hover {
  background: var(--accent-hover) !important;
}

/* Logged-in user pill */
.nav-user-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  background: var(--cloud);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  transition: all 140ms;
}
.nav-user-pill:hover {
  border-color: var(--border-strong);
  background: var(--slate-100);
}
.nav-user-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.nav-user-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.nav-plan-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nav-plan-free  { background: var(--slate1); color: var(--slate6); }
.nav-plan-pro   { background: var(--accent-soft); color: var(--pulse-700); }
.nav-plan-agency{ background: #f0e8ff; color: #6d28d9; }