/* ═══════════════════════════════════════════════════════════════════════════
   BA3 DESIGN SYSTEM (2026-05)
   Classroom palette + toolbox icons + chunky borders + offset shadows.
   New pages (home, login, signup) use these tokens via .ba3-* classes.
   Older pages (report, dashboard, audit) continue using the legacy peach
   tokens below until phase 2.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Classroom palette */
  --ba3-fill:      #FFD24D;  /* hero yellow */
  --ba3-accent:    #5247B8;  /* deep purple */
  --ba3-accent-d:  #3E33A0;
  --ba3-surface:   #FBF5E1;  /* cream paper */
  --ba3-surface-alt: #ffffff;
  --ba3-ink:       #1B1A17;  /* near-black */
  --ba3-line:      #1B1A17;  /* same as ink — chunky borders are the ink colour */
  --ba3-muted:     #5C5851;  /* secondary text */
  --ba3-cream-2:   #F4EDD8;  /* slightly darker surface */

  /* Status colours in BA3 palette */
  --ba3-good:      #2D7A4C;
  --ba3-warn:      #B8721F;
  --ba3-bad:       #C0392B;

  /* Typography pair — Hanken Grotesk for display, IBM Plex Sans for body */
  --ba3-display: "Hanken Grotesk", -apple-system, sans-serif;
  --ba3-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Chunky shadows — the 6px offset is iconic to the design */
  --ba3-shadow-card:    6px 6px 0 var(--ba3-line);
  --ba3-shadow-card-sm: 4px 4px 0 var(--ba3-line);
  --ba3-shadow-btn:     3px 3px 0 var(--ba3-line);

  /* Border weights */
  --ba3-border: 2px solid var(--ba3-line);
  --ba3-border-3: 3px solid var(--ba3-line);
}

/* Reset for BA3 pages */
body.ba3 {
  background: var(--ba3-surface);
  font-family: var(--ba3-body);
  color: var(--ba3-ink);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* ─── BA3 PRIMITIVES ─────────────────────────────────────────────────── */

/* The 1440-max page container */
.ba3-shell {
  max-width: 100%;
  margin: 0 auto;
  background: var(--ba3-surface);
  min-height: 100vh;
}

/* Top bar — logo, audience toggle, sign in */
.ba3-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 80px 0;
  gap: 24px;
}
.ba3-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ba3-ink);
}
.ba3-logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--ba3-accent);
  border: var(--ba3-border);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  font-family: var(--ba3-display);
}
.ba3-logo-text {
  font-family: var(--ba3-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* Audience toggle (Builder vs Homeowner) */
.ba3-toggle {
  display: inline-flex;
  background: #fff;
  border: var(--ba3-border);
  border-radius: 6px;
  padding: 4px;
  box-shadow: var(--ba3-shadow-btn);
  gap: 2px;
}
.ba3-toggle button {
  padding: 9px 16px;
  background: transparent;
  color: var(--ba3-ink);
  border: none;
  border-radius: 4px;
  font-family: var(--ba3-body);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.ba3-toggle button.on {
  background: var(--ba3-ink);
  color: #fff;
}

/* Primary CTA button — solid ink, chunky border, offset shadow */
.ba3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ba3-ink);
  color: #fff;
  border: var(--ba3-border);
  border-radius: 4px;
  padding: 12px 22px;
  font-family: var(--ba3-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--ba3-shadow-btn);
  transition: transform .12s, box-shadow .12s;
}
.ba3-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ba3-line);
}
.ba3-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ba3-line);
}
.ba3-btn.primary {
  background: var(--ba3-accent);
}
.ba3-btn.light {
  background: #fff;
  color: var(--ba3-ink);
}
.ba3-btn.fill {
  background: var(--ba3-fill);
  color: var(--ba3-ink);
}

/* Kicker — purple uppercase pill above a heading */
.ba3-kicker {
  display: inline-block;
  padding: 6px 14px;
  background: var(--ba3-accent);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--ba3-body);
  margin-bottom: 18px;
}

/* Pill — generic chunky tag */
.ba3-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border: var(--ba3-border);
  border-radius: 4px;
  font-family: var(--ba3-body);
  font-weight: 600;
  font-size: 13px;
}
.ba3-pill.fill { background: var(--ba3-fill); }
.ba3-pill.cream { background: var(--ba3-cream-2); }

/* Panel — the chunky bordered card with offset shadow */
.ba3-panel {
  background: #fff;
  border: var(--ba3-border);
  border-radius: 4px;
  padding: 28px 32px;
  box-shadow: var(--ba3-shadow-card);
}
.ba3-panel.fill { background: var(--ba3-fill); }
.ba3-panel.cream { background: var(--ba3-cream-2); }
.ba3-panel.small { padding: 18px 22px; box-shadow: var(--ba3-shadow-card-sm); }

/* Hero — big yellow band with bottom black border */
.ba3-hero {
  background: var(--ba3-fill);
  padding: 0 80px 80px;
  border-bottom: var(--ba3-border-3);
  position: relative;
  overflow: hidden;
}
.ba3-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  margin-top: 56px;
}
.ba3-h1 {
  font-family: var(--ba3-display);
  font-weight: 900;
  font-size: 76px;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ba3-ink);
  margin: 0 0 24px;
  text-transform: uppercase;
}
.ba3-h2 {
  font-family: var(--ba3-display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--ba3-ink);
  margin: 0 0 18px;
}
.ba3-h3 {
  font-family: var(--ba3-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ba3-ink);
  margin: 0 0 12px;
}
.ba3-lead {
  font-family: var(--ba3-body);
  font-size: 19px;
  line-height: 1.5;
  color: var(--ba3-muted);
  max-width: 560px;
  margin: 0 0 36px;
}
.ba3-body {
  font-family: var(--ba3-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ba3-ink);
}
.ba3-muted {
  color: var(--ba3-muted);
}

/* URL input with inline button — the classic "https://" prefix style */
.ba3-url-input {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #fff;
  border: var(--ba3-border);
  border-radius: 4px;
  padding: 6px;
  max-width: 600px;
  width: 100%;
  box-shadow: 4px 4px 0 var(--ba3-line);
  box-sizing: border-box;
}
.ba3-url-input .prefix {
  padding: 0 14px;
  display: flex;
  align-items: center;
  color: var(--ba3-muted);
  font-family: var(--ba3-body);
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
}
.ba3-url-input input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--ba3-body);
  font-size: 16px;
  color: var(--ba3-ink);
  padding: 12px 8px;
}
.ba3-url-input button {
  background: var(--ba3-accent);
  color: #fff;
  border: var(--ba3-border);
  border-radius: 4px;
  padding: 12px 20px;
  font-family: var(--ba3-body);
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.ba3-url-input button:hover {
  background: var(--ba3-accent-d);
}

/* Toolbox icon — circular icon container used throughout */
.ba3-tool-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: var(--ba3-border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  overflow: hidden;
}
.ba3-tool-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.ba3-tool-icon.lg {
  width: 72px;
  height: 72px;
}
.ba3-tool-icon.lg img {
  width: 46px;
  height: 46px;
}

/* Form fields (signup, login) */
.ba3-field { margin-bottom: 1.25rem; }
.ba3-field label {
  display: block;
  font-family: var(--ba3-body);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ba3-ink);
  margin-bottom: 6px;
}
.ba3-field input,
.ba3-field select,
.ba3-field textarea {
  width: 100%;
  background: #fff;
  border: var(--ba3-border);
  border-radius: 4px;
  padding: 13px 16px;
  font-family: var(--ba3-body);
  font-size: 15px;
  color: var(--ba3-ink);
  box-sizing: border-box;
}
.ba3-field input:focus,
.ba3-field select:focus,
.ba3-field textarea:focus {
  outline: none;
  box-shadow: 3px 3px 0 var(--ba3-line);
}
.ba3-field .hint {
  font-size: 12px;
  color: var(--ba3-muted);
  margin-top: 6px;
}

/* Error box */
.ba3-err {
  background: #FEE7E5;
  border: 2px solid var(--ba3-bad);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ba3-bad);
  margin-bottom: 1rem;
  display: none;
}
.ba3-err.on { display: block; }

/* Footer */
.ba3-footer {
  border-top: var(--ba3-border-3);
  background: var(--ba3-surface);
  padding: 40px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.ba3-footer .copy {
  font-family: var(--ba3-body);
  font-size: 13px;
  color: var(--ba3-muted);
}
.ba3-footer .links {
  display: flex;
  gap: 24px;
}
.ba3-footer .links a {
  font-family: var(--ba3-body);
  font-size: 13px;
  color: var(--ba3-ink);
  text-decoration: none;
  font-weight: 600;
}
.ba3-footer .links a:hover { text-decoration: underline; }

/* Mobile responsive — single column, scaled headings */
@media (max-width: 880px) {
  .ba3-nav { padding: 20px 24px 0; flex-wrap: wrap; }
  .ba3-hero { padding: 0 24px 56px; }
  .ba3-hero-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .ba3-h1 { font-size: 44px; line-height: 1; }
  .ba3-h2 { font-size: 32px; }
  .ba3-h3 { font-size: 20px; }
  .ba3-footer { padding: 24px; }
  .ba3-panel { padding: 20px 22px; box-shadow: var(--ba3-shadow-card-sm); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY CSS BELOW — keep all existing classes working for non-BA3 pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   BuilderAudit — Cream, Peach & Sky Blue palette (2026)
   All typography Inter variable font.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Backgrounds — cream, warm neutrals */
  --bg:    #f2ead9;   /* slightly lighter than user cream for main surface */
  --bg2:   #e6dbc9;   /* user's cream — surface depth */
  --bg3:   #d9ccb5;   /* deeper cream for cards/contrast */
  --bg4:   #fbf7ed;   /* very light for "paper" surfaces */
  --white: #ffffff;

  /* Foregrounds — warm plum-brown (softer than charcoal, still readable) */
  --fg:    #3a2e33;   /* deep warm plum — body text + headings */
  --fg-d:  #2a2023;   /* for surfaces that need to be slightly darker */
  --fg2:   #6b5a5f;   /* muted warm mauve-brown for secondary text */
  --fg3:   #9b8a90;   /* light taupe-rose for tertiary / labels */
  --fg4:   #c4b5ba;   /* faintest — disabled state */

  /* Primary — pastel peach */
  --peach:   #dea6af;
  --peach-d: #c88691;   /* darker for hover */
  --peach-b: rgba(222,166,175,0.18);
  --peach-c: rgba(222,166,175,0.10);
  --peach-e: rgba(222,166,175,0.05);

  /* Secondary — sky blue */
  --sky:   #8cbcd0;
  --sky-d: #6fa2b8;
  --sky-b: rgba(140,188,208,0.18);
  --sky-c: rgba(140,188,208,0.10);

  /* Status — tuned to sit in the warm palette */
  --red:    #c44f4f;   /* warm rust-red */
  --red-b:  rgba(196,79,79,0.12);
  --red-c:  rgba(196,79,79,0.06);
  --grn:    #6b8e6f;   /* sage-green */
  --grn-b:  rgba(107,142,111,0.14);
  --grn-c:  rgba(107,142,111,0.06);
  --warn:   #c8924c;   /* burnt honey */
  --warn-b: rgba(200,146,76,0.15);
  --warn-c: rgba(200,146,76,0.06);

  /* Borders & shadows */
  --brd:    rgba(58,46,51,0.10);
  --brd2:   rgba(58,46,51,0.16);
  --brd3:   rgba(58,46,51,0.24);
  --shadow:  0 4px 24px rgba(58,46,51,0.08);
  --shadow2: 0 16px 56px rgba(58,46,51,0.12);
  --shadow3: 0 32px 80px rgba(58,46,51,0.18);
  /* 3D button shadows */
  --btn-shadow:       0 1px 0 rgba(255,255,255,0.35) inset, 0 -2px 0 rgba(58,46,51,0.12) inset, 0 6px 14px -2px rgba(58,46,51,0.18), 0 2px 4px rgba(58,46,51,0.12);
  --btn-shadow-hover: 0 1px 0 rgba(255,255,255,0.5)  inset, 0 -2px 0 rgba(58,46,51,0.15) inset, 0 12px 22px -4px rgba(58,46,51,0.28), 0 4px 8px rgba(58,46,51,0.15);
  --btn-shadow-active:0 1px 2px rgba(58,46,51,0.25) inset, 0 -1px 0 rgba(255,255,255,0.1) inset, 0 1px 2px rgba(58,46,51,0.1);

  /* Font — Inter everywhere */
  --font: 'Inter', system-ui, -apple-system, sans-serif;

  /* Legacy aliases so old markup keeps working */
  --ink: var(--fg);
  --slate-deep: var(--fg2);
  --slate-text: var(--fg2);
  --slate: var(--fg3);
  --mist: var(--bg2);
  --ice: var(--brd);
  --snow: var(--bg);
  --frost: var(--bg2);
  --azure: var(--peach);
  --azure-deep: var(--peach-d);
  --azure-tint: var(--peach-b);
  --coral: var(--peach);
  --purp: var(--peach);
  --purp-d: var(--peach-d);
  --purp-b: var(--peach-b);
  --purp-c: var(--peach-c);
  --red-signal: var(--red);
  --red-ink: #8a3535;
  --red-tint: var(--red-b);
  --orange-deep: var(--warn);
  --orange-tint: var(--warn-b);
  --amber: var(--warn);
  --amber-tint: var(--warn-b);
  --green: var(--grn);
  --green-light: var(--grn-b);
}

/* Universal box-sizing + Inter everywhere */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: var(--font);
}
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-feature-settings: 'cv11', 'ss01';
}
a { color: inherit; }
input, button, textarea, select { font-family: var(--font); }
code, pre, kbd, samp { font-family: ui-monospace, 'SF Mono', Menlo, monospace; }

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER (shared)
   ═══════════════════════════════════════════════════════════════════════════ */
header {
  background: var(--bg);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-bottom: 1px solid var(--brd);
  position: relative;
}
.logo {
  font-size: 18px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -.03em;
  line-height: 1;
  flex-shrink: 0;
  text-decoration: none;
}
.logo em { font-style: normal; color: var(--peach-d); font-weight: 800; }
.tagline {
  font-size: 13px;
  color: var(--fg2);
  margin: 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--brd);
  line-height: 1.4;
  max-width: 340px;
  flex: 1;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.user-menu a, .user-menu button {
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all .2s;
  cursor: pointer;
  border: none;
  letter-spacing: -.005em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}
.user-menu-login {
  color: var(--fg);
  background: transparent;
  border: 1px solid var(--brd2);
}
.user-menu-login:hover { background: var(--bg2); }
.user-menu-signup {
  background: linear-gradient(180deg, #e5b2ba 0%, var(--peach) 50%, #d195a0 100%);
  color: var(--fg);
  box-shadow: var(--btn-shadow), 0 4px 14px rgba(222,166,175,0.35);
}
.user-menu-signup:hover {
  background: linear-gradient(180deg, #edbcc4 0%, #dca6af 50%, #c88691 100%);
  color: var(--fg);
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover), 0 10px 22px rgba(200,134,145,0.45);
}
.user-menu-signup:active { transform: translateY(1px); box-shadow: var(--btn-shadow-active); }
.user-menu-dashboard {
  background: var(--fg);
  color: #fff;
}
.user-menu-dashboard:hover { background: #443b33; transform: translateY(-1px); }
.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--peach);
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-left: -4px;
}

@media (max-width: 900px) {
  header { padding: 1rem 1.25rem; }
  .tagline { font-size: 12px; max-width: 220px; padding-left: 1rem; }
}
@media (max-width: 640px) {
  header { flex-wrap: wrap; gap: 12px; padding: 1rem; justify-content: center; }
  .tagline { display: none; }
  .user-menu { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HERO (on audit page)
   ═══════════════════════════════════════════════════════════════════════════ */
.hero {
  padding: 4rem 1.5rem 5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}
.hero::before {
  content: '';
  position: absolute;
  top: -20%; left: -20%; width: 140%; height: 140%;
  background:
    radial-gradient(ellipse 40% 30% at 30% 40%, var(--peach-b), transparent 55%),
    radial-gradient(ellipse 35% 28% at 70% 60%, var(--sky-b), transparent 55%);
  animation: heroGradient 20s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heroGradient {
  0% { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-3%, -2%) rotate(6deg); }
}
.hero h1 {
  font-size: 54px;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.02;
  color: var(--fg);
  margin-bottom: 16px;
  position: relative;
  max-width: 720px;
  margin-inline: auto;
}
.hero h1 em { font-style: normal; color: var(--peach-d); font-weight: 800; }
.hero p {
  font-size: 17px;
  color: var(--fg2);
  line-height: 1.55;
  max-width: 560px;
  margin: 0 auto 2rem;
  position: relative;
}

.input-row {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  gap: 10px;
  position: relative;
}
.input-row input {
  flex: 1;
  padding: 14px 18px;
  border: 1.5px solid var(--brd2);
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  background: #fff;
  color: var(--fg);
  transition: border-color .2s;
}
.input-row input:focus { border-color: var(--peach); }
.input-row button {
  padding: 14px 26px;
  background: linear-gradient(180deg, #e5b2ba 0%, var(--peach) 50%, #d195a0 100%);
  color: var(--fg);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: -.005em;
  transition: transform .15s cubic-bezier(.4,0,.2,1), box-shadow .2s, background .2s;
  box-shadow: var(--btn-shadow), 0 4px 18px rgba(222,166,175,0.35);
  position: relative;
}
.input-row button:hover {
  background: linear-gradient(180deg, #edbcc4 0%, #dca6af 50%, #c88691 100%);
  color: var(--fg);
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover), 0 14px 26px rgba(200,134,145,0.45);
}
.input-row button:active { transform: translateY(1px); box-shadow: var(--btn-shadow-active); }
.input-row button:disabled { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   SCAN STAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.scan-stage {
  display: none;
  max-width: 560px;
  margin: 3rem auto 0;
  padding: 3rem 2rem 2.5rem;
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 20px;
  text-align: center;
  box-shadow: var(--shadow);
}
.scan-stage.active { display: block; }
.scan-core { position: relative; width: 120px; height: 120px; margin: 0 auto 1.5rem; }
.scan-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--peach);
  animation: scanRing 2s linear infinite;
}
.scan-ring-2 { inset: 12px; border-top-color: var(--sky); animation-duration: 3s; animation-direction: reverse; }
.scan-ring-3 { inset: 24px; border-top-color: var(--warn); animation-duration: 4s; }
@keyframes scanRing { to { transform: rotate(360deg); } }
.scan-center {
  position: absolute;
  inset: 44px;
  width: 32px;
  height: 32px;
  background: var(--peach);
  color: var(--fg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 0 24px rgba(222,166,175,0.6);
}
.scan-phase {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--peach-d);
  font-weight: 700;
  margin-bottom: 6px;
}
.scan-message {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -.01em;
  margin-bottom: 1.75rem;
  min-height: 22px;
}
.scan-timeline { display: flex; gap: 8px; max-width: 320px; margin: 0 auto 8px; }
.scan-tl-step {
  flex: 1;
  height: 3px;
  background: var(--bg3);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.scan-tl-step.active::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--peach);
  animation: scanFill 2s ease-in-out infinite;
}
.scan-tl-step.done { background: var(--grn); }
@keyframes scanFill { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } }
.scan-tl-labels {
  display: flex; gap: 8px;
  max-width: 320px; margin: 0 auto;
  font-size: 10px;
  color: var(--fg3);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.scan-tl-label { flex: 1; text-align: center; }
.scan-tl-label.active { color: var(--peach-d); }
.scan-tl-label.done { color: var(--grn); }

.error-card {
  background: var(--red-b);
  border-left: 3px solid var(--red);
  padding: 14px 18px;
  border-radius: 10px;
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
}

/* Blocked-site card — shown when a website blocks our crawler */
.blocked-card {
  max-width: 540px;
  margin: 2rem auto;
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 20px;
  padding: 2.25rem 2rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.blocked-icon {
  font-size: 42px;
  color: var(--peach-d);
  margin-bottom: .5rem;
  line-height: 1;
}
.blocked-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--fg);
  letter-spacing: -.01em;
  margin-bottom: .75rem;
}
.blocked-message {
  font-size: 15px;
  color: var(--fg2);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.blocked-suggestion {
  font-size: 13px;
  color: var(--fg3);
  line-height: 1.55;
  background: var(--bg);
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 1.25rem;
  text-align: left;
}
.blocked-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.blocked-btn-primary, .blocked-btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.blocked-btn-primary {
  background: var(--peach-d);
  color: #fff;
  box-shadow: 0 2px 0 rgba(58,46,51,.12);
}
.blocked-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(58,46,51,.12); }
.blocked-btn-secondary {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--brd);
}
.blocked-btn-secondary:hover { background: var(--bg2); }

/* ═══════════════════════════════════════════════════════════════════════════
   REPORT LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */
.report-nav {
  background: rgba(242, 234, 217, 0.92);
  border-bottom: 1px solid var(--brd);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(24px);
}
.report-nav-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.report-back {
  font-size: 13px;
  color: var(--fg2);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500;
  transition: color .2s;
}
.report-back:hover { color: var(--fg); }
.report-domain { font-size: 14px; color: var(--fg); font-weight: 700; letter-spacing: -.01em; }
.report-domain-meta { font-size: 12px; color: var(--fg3); margin-top: 1px; }
.report-score-chip {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(180deg, #4a3d43 0%, #3a2e33 100%);
  border-radius: 99px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 -1px 0 rgba(0,0,0,0.2) inset, 0 2px 6px rgba(58,46,51,0.2);
}
.score-chip-num { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.score-chip-label { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.reanalyze-btn {
  margin-left: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  background: linear-gradient(180deg, #e5b2ba 0%, var(--peach) 50%, #d195a0 100%);
  color: var(--fg);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform .15s, box-shadow .2s, background .2s;
  box-shadow: var(--btn-shadow);
}
.reanalyze-btn:hover { background: linear-gradient(180deg, #edbcc4 0%, #dca6af 50%, #c88691 100%); color: var(--fg); transform: translateY(-2px); box-shadow: var(--btn-shadow-hover), 0 8px 16px rgba(200,134,145,0.4); }
.reanalyze-btn:active { transform: translateY(1px); box-shadow: var(--btn-shadow-active); }
.reanalyze-btn:disabled { opacity: .5; cursor: not-allowed; }

.report-layout {
  max-width: 1180px; margin: 0 auto;
  padding: 2.5rem 1.5rem 6rem;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  align-items: start;
}
.report-layout > .side-nav { position: sticky; top: 80px; }
.report-main { min-width: 0; }

.side-nav {
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 16px;
  padding: .75rem;
  box-shadow: var(--shadow);
}
.side-nav-title {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg3);
  font-weight: 700;
  padding: 8px 12px 6px;
}
.side-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px;
  text-decoration: none;
  color: var(--fg2);
  font-size: 14px;
  border-radius: 10px;
  transition: all .15s;
  font-weight: 500;
}
.side-nav a:hover { background: var(--bg2); color: var(--fg); }
.side-nav a.active { background: var(--peach-b); color: var(--fg); font-weight: 700; }
.side-nav-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.side-nav-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 99px;
  background: var(--red-b);
  color: var(--red);
  font-weight: 700;
}
.side-nav-badge.ok { background: var(--grn-b); color: var(--grn); }

@media (max-width: 900px) {
  .report-layout { grid-template-columns: 1fr; }
  .report-layout > .side-nav { position: static; }
  .side-nav { display: flex; flex-wrap: wrap; padding: .5rem; gap: 2px; }
  .side-nav-title { display: none; }
  .side-nav a { font-size: 12px; padding: 6px 10px; }
  .side-nav-badge { display: none; }
}

.sp-header { margin-bottom: 1.75rem; }
.sp-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--peach-d);
  font-weight: 700;
  margin-bottom: 8px;
}
.sp-title {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  color: var(--fg);
  margin-bottom: 10px;
}
.sp-sub { font-size: 16px; color: var(--fg2); line-height: 1.55; max-width: 620px; }
.section-divider { height: 1px; background: var(--brd); margin: 2rem 0; }

/* Score band */
.score-band {
  background: linear-gradient(165deg, #4a3d43 0%, #3a2e33 50%, #2e2327 100%);
  border-radius: 20px;
  padding: 2rem 2.25rem;
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: center;
  box-shadow: var(--shadow2), 0 1px 0 rgba(255,255,255,0.06) inset;
  position: relative;
  overflow: hidden;
}
.score-band::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 50% at 20% 50%, rgba(222,166,175,0.28), transparent 55%),
    radial-gradient(ellipse 40% 50% at 80% 50%, rgba(140,188,208,0.2), transparent 55%);
  pointer-events: none;
}
.score-band > * { position: relative; z-index: 1; }

.ring-wrap { width: 112px; height: 112px; position: relative; flex-shrink: 0; }
.ring-wrap svg { width: 112px; height: 112px; }
.ring-num {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
}
.score-hl {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 6px;
}
.score-sub { font-size: 15px; line-height: 1.55; color: var(--bg2); }
.ai-voice {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bg2);
  font-style: italic;
  padding-left: 14px;
  border-left: 3px solid var(--peach);
  margin-top: 10px;
}

/* Trust breakpoint cards */
.bp-list { display: flex; flex-direction: column; gap: 10px; }
.bp-card {
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  transition: all .25s;
  box-shadow: 0 1px 2px rgba(42,36,31,.03);
}
.bp-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brd2); }
.bp-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bp-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dot-critical { background: var(--red); box-shadow: 0 0 8px var(--red); }
.dot-high { background: var(--warn); }
.dot-medium { background: var(--fg3); }
.dot-low { background: var(--grn); }
.bp-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; flex: 1; line-height: 1.3; color: var(--fg); }
.bp-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  flex-shrink: 0;
}
.pill-critical { background: var(--red-b); color: var(--red); }
.pill-high { background: var(--warn-b); color: var(--warn); }
.pill-medium { background: var(--sky-b); color: var(--sky-d); }
.pill-low { background: var(--grn-b); color: var(--grn); }
.bp-reaction {
  font-size: 15px;
  line-height: 1.6;
  padding: 12px 16px;
  background: var(--bg);
  border-left: 3px solid var(--peach);
  border-radius: 8px;
  font-style: italic;
  color: var(--fg2);
  margin-bottom: 10px;
}
.bp-reaction::before { content: '\201C'; color: var(--peach-d); font-weight: 700; font-style: normal; margin-right: 2px; }
.bp-reaction::after { content: '\201D'; color: var(--peach-d); font-weight: 700; font-style: normal; margin-left: 2px; }
.bp-evidence { font-size: 13px; color: var(--fg2); margin-bottom: 8px; line-height: 1.55; }
.bp-evidence b { color: var(--fg); }
.bp-fix { font-size: 13px; color: var(--grn); font-weight: 600; line-height: 1.55; }
.bp-fix::before { content: 'Fix \2192  '; font-weight: 700; }

/* Journey cards */
.journey-list { display: flex; flex-direction: column; gap: 10px; }
.j-card {
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  display: flex; gap: 18px; align-items: flex-start;
  transition: all .25s;
}
.j-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.j-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--peach);
  color: var(--fg);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.j-stage {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--fg3);
  font-weight: 700;
  margin-bottom: 6px;
}
.j-thought { font-size: 17px; line-height: 1.65; color: var(--fg); font-style: italic; }

/* Trust questions */
.tq-list { display: flex; flex-direction: column; gap: 8px; }
.tq-row {
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
  display: flex; align-items: center; gap: 20px;
  transition: all .25s;
}
.tq-row:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.tq-q { font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--fg); flex: 1; }
.tq-exp { font-size: 13px; color: var(--fg2); margin-top: 6px; line-height: 1.5; font-weight: 400; }
.tq-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.tq-score { font-size: 28px; font-weight: 800; letter-spacing: -.02em; min-width: 44px; text-align: right; }
.tq-track { width: 80px; height: 5px; background: var(--bg3); border-radius: 99px; overflow: hidden; }
.tq-fill { height: 5px; border-radius: 99px; transition: width 1s cubic-bezier(.4,0,.2,1); }
.c-g, .f-g { color: var(--grn); } .f-g { background: var(--grn); }
.c-a, .f-a { color: var(--warn); } .f-a { background: var(--warn); }
.c-r, .f-r { color: var(--red); } .f-r { background: var(--red); }

/* Live feed */
.feed-list { display: flex; flex-direction: column; gap: 6px; }
.fi {
  display: flex; align-items: center; gap: 12px;
  padding: .85rem 1.1rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--brd);
}
.fi-msg { font-size: 14px; line-height: 1.45; font-weight: 500; }

/* Business snapshot */
.bs-header {
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 20px;
  padding: 2rem 2.25rem;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.bs-company {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.15;
  color: var(--fg);
}
.bs-oneliner { font-size: 17px; line-height: 1.5; color: var(--fg2); margin: 6px 0 18px; }
.bs-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-chip {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 99px;
  border: 1px solid var(--brd);
  background: var(--bg);
  color: var(--fg2);
}
.bs-chip b { color: var(--fg); font-weight: 700; }

.bs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.bs-card {
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 1px 2px rgba(42,36,31,.03);
  transition: all .25s;
}
.bs-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.bs-card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 14px;
}
.bs-card-icon {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--peach-b);
  color: var(--peach-d);
  border-radius: 6px;
  font-size: 12px;
}
.bs-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-pill {
  font-size: 13px;
  padding: 5px 12px;
  font-weight: 500;
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--brd);
}
.bs-pill-accred { background: var(--grn-b); color: var(--grn); border-color: transparent; }
.bs-pill-award { background: var(--warn-b); color: var(--warn); border-color: transparent; }
.bs-empty { font-size: 13px; color: var(--fg3); font-style: italic; }
.bs-item { font-size: 14px; color: var(--fg2); padding: 6px 0; line-height: 1.55; }
.bs-item + .bs-item { border-top: 1px dashed var(--brd); }
.bs-team-item { font-size: 14px; padding: 8px 0; color: var(--fg); font-weight: 500; }
.bs-team-role { font-size: 12px; color: var(--fg3); font-weight: 400; margin-top: 1px; }
.bs-list { display: flex; flex-direction: column; gap: 0; }

.bs-gaps {
  background: var(--red-b);
  border-left: 3px solid var(--red);
  padding: 1.5rem 1.75rem;
  border-radius: 16px;
  margin-top: 12px;
}
.bs-gaps-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 10px;
}
.bs-gap-item { font-size: 14px; padding: 6px 0; line-height: 1.55; color: var(--red); }
.bs-gap-item + .bs-gap-item { border-top: 1px dashed rgba(196,79,79,0.2); }

/* Image verification */
.iv-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.iv-stat {
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  text-align: center;
}
.iv-num { font-size: 38px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.iv-num-bad { color: var(--red); }
.iv-num-warn { color: var(--warn); }
.iv-num-good { color: var(--grn); }
.iv-lbl {
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg3);
  margin-top: 4px;
}
.iv-none {
  background: var(--grn-b);
  border: 1px solid rgba(107,142,111,0.25);
  border-radius: 16px;
  padding: 2rem 1.75rem;
  text-align: center;
}
.iv-none-icon {
  width: 48px; height: 48px;
  margin: 0 auto 12px;
  background: var(--grn);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
}
.iv-none-text { font-size: 18px; font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.iv-none-sub { font-size: 14px; color: var(--fg2); }

.iv-list { display: flex; flex-direction: column; gap: 10px; }
.iv-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 16px;
  padding: 0;
  position: relative;
  transition: all .25s;
}
.iv-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.iv-card.overridden { opacity: .55; filter: grayscale(.3); }
.iv-thumb {
  background: var(--bg2);
  position: relative;
  overflow: hidden;
  aspect-ratio: 1;
  width: 120px;
  height: 120px;
  border-right: 1px solid var(--brd);
  flex-shrink: 0;
}
.iv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iv-thumb-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--fg3); font-size: 24px;
  background: var(--bg2);
}
.iv-thumb-overlay {
  position: absolute;
  top: 6px; left: 6px;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.iv-thumb-overlay.stock { background: var(--red); color: #fff; }
.iv-thumb-overlay.dup { background: var(--warn); color: #fff; }
.iv-body { padding: 1rem 1.25rem; min-width: 0; overflow: hidden; }
.iv-body * { max-width: 100%; }
.iv-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.iv-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 99px;
  text-transform: uppercase;
}
.ivb-stock { background: var(--red-b); color: var(--red); }
.ivb-dup { background: var(--warn-b); color: var(--warn); }
.iv-source { font-size: 13px; color: var(--fg2); margin-bottom: 8px; line-height: 1.5; word-break: break-word; }
.iv-source b { color: var(--fg); }
.iv-url {
  font-size: 11px; color: var(--fg3);
  word-break: break-all; overflow-wrap: anywhere;
  font-family: ui-monospace, monospace;
  margin-bottom: 8px;
}
.iv-matches {
  margin-top: 8px; padding: 8px 10px;
  background: var(--bg);
  border-radius: 6px;
  border-left: 2px solid var(--warn);
}
.iv-matches-title {
  font-size: 10px; font-weight: 700;
  color: var(--fg2);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.iv-match-link {
  display: block;
  font-size: 12px;
  color: var(--sky-d);
  text-decoration: none;
  padding: 3px 0;
  font-family: ui-monospace, monospace;
  word-break: break-all;
}
.iv-match-link:hover { color: var(--peach-d); text-decoration: underline; }
.iv-impact {
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg2);
  line-height: 1.55;
  margin-top: 8px;
}
.iv-view-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  color: var(--fg3);
  text-decoration: none;
  padding: 2px 8px;
  background: var(--bg2);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
}
.iv-override { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--brd); }
.iv-override-label { font-size: 13px; color: var(--fg2); flex: 1; line-height: 1.45; min-width: 0; }
.iv-override-label b { color: var(--fg); font-weight: 700; }
.iv-toggle {
  position: relative;
  width: 40px; height: 22px;
  background: var(--fg3);
  border-radius: 99px;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
  border: none;
  padding: 0;
}
.iv-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.iv-toggle.on { background: var(--grn); }
.iv-toggle.on::after { transform: translateX(18px); }

@media (max-width: 640px) {
  .iv-card { grid-template-columns: 1fr; }
  .iv-thumb { aspect-ratio: 16/9; width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--brd); }
  .iv-body { padding: 1rem 1.25rem; }
}

.iv-lightbox {
  position: fixed; inset: 0;
  background: rgba(42,36,31,.9);
  display: none; align-items: center; justify-content: center;
  z-index: 100;
  padding: 2rem;
  cursor: zoom-out;
}
.iv-lightbox.on { display: flex; }
.iv-lightbox img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.iv-lightbox-caption {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  padding: .75rem 1.25rem;
  border-radius: 10px;
  font-size: 13px;
  color: var(--fg);
}
.iv-lightbox-close {
  position: absolute;
  top: 1.5rem; right: 1.5rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* Gap card */
.gap-card {
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 18px;
  padding: 2rem 2.25rem;
  box-shadow: var(--shadow);
}
.gap-summary { font-size: 16px; color: var(--fg); line-height: 1.55; margin-bottom: 1.5rem; }
.gap-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.gap-col-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 12px;
}
.gc-bad .gap-col-head { color: var(--red); }
.gc-good .gap-col-head { color: var(--grn); }
.gap-item {
  display: flex; gap: 10px;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg2);
}
.gap-item + .gap-item { border-top: 1px dashed var(--brd); }
.gi-icon { flex-shrink: 0; font-weight: 700; font-size: 11px; }
.gc-bad .gi-icon { color: var(--red); }
.gc-good .gi-icon { color: var(--grn); }

@media (max-width: 640px) { .gap-cols { grid-template-columns: 1fr; } }

/* Action plan */
.actions-wrap {
  background: linear-gradient(165deg, #4a3d43 0%, #3a2e33 50%, #2e2327 100%);
  border-radius: 20px;
  padding: 2rem 2.25rem;
  box-shadow: var(--shadow2), 0 1px 0 rgba(255,255,255,0.06) inset;
  position: relative;
  overflow: hidden;
}
.actions-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(222,166,175,0.28), transparent 55%),
    radial-gradient(ellipse 35% 30% at 20% 100%, rgba(140,188,208,0.18), transparent 60%);
  pointer-events: none;
}
.actions-wrap > * { position: relative; z-index: 1; }
.actions-head {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--peach);
  margin-bottom: 1.25rem;
}
.action-row {
  display: flex;
  gap: 16px;
  padding: 1rem 0;
  align-items: flex-start;
  border-top: 1px solid rgba(255,255,255,.06);
}
.action-row:first-child { border-top: none; padding-top: 0; }
.a-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--peach);
  color: var(--fg);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  flex-shrink: 0;
}
.a-text { font-size: 15px; line-height: 1.55; color: #fff; }

/* Lock screen */
.lock-screen {
  max-width: 520px;
  margin: 4rem auto;
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 20px;
  padding: 2.5rem 2.25rem;
  text-align: center;
  box-shadow: var(--shadow2);
}
.lock-preview { margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--brd); }
.lock-score { font-size: 64px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: 8px; color: var(--peach-d); }
.lock-company { font-size: 18px; font-weight: 700; margin-bottom: 4px; color: var(--fg); }
.lock-url { font-size: 12px; color: var(--fg3); font-family: ui-monospace, monospace; }
.lock-headline { font-size: 20px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.02em; color: var(--fg); }
.lock-sub { font-size: 14px; color: var(--fg2); line-height: 1.6; margin-bottom: 1.5rem; }
.lock-input {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--brd2);
  border-radius: 10px;
  font-size: 15px;
  outline: none;
  transition: border-color .2s;
  margin-bottom: 10px;
  box-sizing: border-box;
}
.lock-input:focus { border-color: var(--peach); }
.lock-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(180deg, #e5b2ba 0%, var(--peach) 50%, #d195a0 100%);
  color: var(--fg);
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--btn-shadow), 0 4px 18px rgba(222,166,175,0.35);
  transition: transform .15s, box-shadow .2s, background .2s;
}
.lock-btn:hover { background: linear-gradient(180deg, #edbcc4 0%, #dca6af 50%, #c88691 100%); color: var(--fg); transform: translateY(-2px); box-shadow: var(--btn-shadow-hover), 0 12px 24px rgba(200,134,145,0.45); }
.lock-btn:active { transform: translateY(1px); box-shadow: var(--btn-shadow-active); }
.lock-fineprint { font-size: 12px; color: var(--fg3); margin-top: 12px; line-height: 1.5; }

/* Re-analyse overlay */
.reanalyze-overlay {
  position: fixed;
  inset: 0;
  background: rgba(42,36,31,.85);
  display: none;
  align-items: center; justify-content: center;
  z-index: 200;
  backdrop-filter: blur(4px);
}
.reanalyze-overlay.on { display: flex; }
.reanalyze-box {
  background: var(--fg);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  text-align: center;
  max-width: 420px;
  border: 1px solid rgba(255,255,255,.1);
}
.reanalyze-box .scan-core { width: 80px; height: 80px; margin: 0 auto 1.5rem; }
.reanalyze-title { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 8px; letter-spacing: -.01em; }
.reanalyze-msg { font-size: 14px; color: var(--bg2); line-height: 1.5; }

/* Debounced update banner */
.update-banner {
  display: none;
  background: var(--peach-b);
  border-bottom: 1px solid var(--brd);
  padding: 10px 1.5rem;
  font-size: 13px;
  color: var(--peach-d);
  text-align: center;
  position: sticky;
  top: 60px;
  z-index: 49;
  backdrop-filter: blur(6px);
}
.update-banner.show { display: flex; align-items: center; justify-content: center; gap: 8px; }
.update-banner.success { background: var(--grn-b); color: var(--grn); }
.update-banner.error { background: var(--red-b); color: var(--red); }
.update-banner .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pulseDot 1.2s ease-in-out infinite; }
@keyframes pulseDot { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.15); } }
.update-banner .spinner-mini {
  width: 12px; height: 12px;
  border: 1.5px solid var(--peach-c);
  border-top-color: var(--peach);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.update-banner button {
  background: none; border: none; color: currentColor;
  font-size: 12px; font-weight: 700; cursor: pointer;
  padding: 2px 8px; margin-left: 4px;
  text-decoration: underline; opacity: .8;
}

.score-adjusting { animation: scoreAdjust .6s ease; }
@keyframes scoreAdjust { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.score-chip-delta {
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 99px;
  margin-left: 4px;
  background: var(--grn-b); color: #fff;
  opacity: 0; transition: opacity .3s;
}
.score-chip-delta.show { opacity: 1; }

/* Service cards */
.service-offer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--peach-d);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--brd);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all .2s;
}
.service-offer:hover {
  background: var(--peach-b);
  border-color: var(--peach);
  color: var(--fg);
  transform: translateY(-1px);
}
.service-offer::after { content: '\2192'; font-weight: 700; }

.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 1.5rem 0; }
.service-card {
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all .25s;
  box-shadow: 0 1px 2px rgba(42,36,31,.03);
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow2);
  border-color: var(--peach-b);
}
.service-card-icon {
  width: 42px; height: 42px;
  border-radius: 10px;
  background: var(--peach-b);
  color: var(--peach-d);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
}
.service-card-title { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--fg); }
.service-card-body { font-size: 14px; line-height: 1.55; color: var(--fg2); flex: 1; }
.service-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--brd);
}
.service-card-price { font-size: 13px; font-weight: 700; color: var(--fg); }
.service-card-price span { color: var(--fg3); font-weight: 500; }
.service-card-btn {
  font-size: 13px; font-weight: 700;
  color: var(--fg);
  background: linear-gradient(180deg, #e5b2ba 0%, var(--peach) 50%, #d195a0 100%);
  border: none;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s;
  box-shadow: var(--btn-shadow), 0 4px 14px rgba(222,166,175,0.35);
}
.service-card-btn:hover {
  background: linear-gradient(180deg, #edbcc4 0%, #dca6af 50%, #c88691 100%);
  color: var(--fg);
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover), 0 10px 20px rgba(200,134,145,0.4);
}
.service-card-btn:active { transform: translateY(1px); box-shadow: var(--btn-shadow-active); }

/* Enquiry modal */
.enquiry-modal {
  position: fixed;
  inset: 0;
  background: rgba(42,36,31,.7);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 200;
  padding: 2rem;
  cursor: zoom-out;
}
.enquiry-modal.on { display: flex; }
.enquiry-box {
  background: #fff;
  border-radius: 20px;
  padding: 2rem 2.25rem;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  cursor: auto;
  box-shadow: 0 40px 80px -20px rgba(42,36,31,.4);
}
.enquiry-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--peach-d); font-weight: 700; margin-bottom: 6px; }
.enquiry-title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 8px; color: var(--fg); }
.enquiry-sub { font-size: 14px; color: var(--fg2); line-height: 1.55; margin-bottom: 1.25rem; }
.enquiry-price {
  background: var(--peach-b);
  color: var(--fg);
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 1.25rem;
}
.enquiry-price b { font-weight: 700; }
.enquiry-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 6px;
  display: block;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.enquiry-textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--brd2);
  border-radius: 10px;
  font-size: 14px;
  resize: vertical;
  min-height: 100px;
  outline: none;
  transition: border-color .2s;
  color: var(--fg);
  background: #fff;
  box-sizing: border-box;
}
.enquiry-textarea:focus { border-color: var(--peach); }
.enquiry-actions { display: flex; gap: 10px; margin-top: 1.25rem; }
.enquiry-submit {
  flex: 1;
  padding: 13px 20px;
  background: linear-gradient(180deg, #e5b2ba 0%, var(--peach) 50%, #d195a0 100%);
  color: var(--fg);
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s;
  box-shadow: var(--btn-shadow), 0 4px 14px rgba(222,166,175,0.35);
}
.enquiry-submit:hover { background: linear-gradient(180deg, #edbcc4 0%, #dca6af 50%, #c88691 100%); color: var(--fg); transform: translateY(-2px); box-shadow: var(--btn-shadow-hover), 0 12px 22px rgba(200,134,145,0.45); }
.enquiry-submit:active { transform: translateY(1px); box-shadow: var(--btn-shadow-active); }
.enquiry-submit:disabled { opacity: .5; cursor: not-allowed; }
.enquiry-cancel {
  padding: 13px 20px;
  background: #fff;
  color: var(--fg2);
  border: 1.5px solid var(--brd);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.enquiry-cancel:hover { background: var(--bg); }
.enquiry-login-prompt {
  background: var(--bg);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--fg2);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.enquiry-login-prompt a { color: var(--peach-d); font-weight: 700; text-decoration: none; }
.enquiry-success { text-align: center; padding: 1rem 0; }
.enquiry-success-icon {
  width: 56px; height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--grn-b);
  color: var(--grn);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800;
}

/* Dashboard enquiry rows */
.my-enquiries { margin-top: 2rem; }
.enq-row {
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 14px;
}
.enq-service { font-size: 14px; font-weight: 700; flex: 1; color: var(--fg); }
.enq-meta { font-size: 12px; color: var(--fg3); }
.enq-status {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 3px 10px; border-radius: 99px;
}
.enq-status.new { background: var(--peach-b); color: var(--peach-d); }
.enq-status.responded { background: var(--grn-b); color: var(--grn); }

/* Reveal animations */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.shown { opacity: 1; transform: translateY(0); }
.stagger.shown > * { opacity: 1; transform: translateY(0); }
.stagger > * { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1); }
.stagger.shown > *:nth-child(1) { transition-delay: .05s; }
.stagger.shown > *:nth-child(2) { transition-delay: .10s; }
.stagger.shown > *:nth-child(3) { transition-delay: .15s; }
.stagger.shown > *:nth-child(4) { transition-delay: .20s; }
.stagger.shown > *:nth-child(5) { transition-delay: .25s; }
.stagger.shown > *:nth-child(6) { transition-delay: .30s; }

main { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }

/* Tab bar */
.tab-bar {
  display: flex;
  padding: 5px;
  border-radius: 12px;
  gap: 4px;
  margin-bottom: 1.5rem;
  background: var(--bg2);
}
.tab {
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  color: var(--fg2);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .2s;
}
.tab.on { background: #fff; color: var(--fg); font-weight: 700; box-shadow: 0 1px 2px rgba(42,36,31,.06); }


/* ═══════════════════════════════════════════════════════════════════════════
   AURORA BACKGROUND (retinted to palette)
   ═══════════════════════════════════════════════════════════════════════════ */
.aurora-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.aurora-wrap::before,
.aurora-wrap::after {
  content: '';
  position: absolute;
  inset: -10%;
  will-change: transform;
  filter: blur(60px);
  opacity: 0.55;
  background-repeat: no-repeat;
}
.aurora-wrap::before {
  background-image:
    radial-gradient(ellipse 40% 35% at 18% 28%, var(--peach) 0%, transparent 55%),
    radial-gradient(ellipse 45% 40% at 78% 32%, var(--sky) 0%, transparent 55%),
    radial-gradient(ellipse 50% 35% at 48% 75%, var(--peach) 0%, transparent 55%);
  animation: auroraDrift1 22s ease-in-out infinite alternate;
}
.aurora-wrap::after {
  background-image:
    radial-gradient(ellipse 35% 30% at 70% 18%, var(--sky) 0%, transparent 55%),
    radial-gradient(ellipse 45% 38% at 25% 65%, var(--peach) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 85% 80%, var(--sky) 0%, transparent 55%);
  animation: auroraDrift2 28s ease-in-out infinite alternate-reverse;
  mix-blend-mode: normal;
  opacity: 0.45;
}
@keyframes auroraDrift1 {
  0%   { transform: translate3d(0%, 0%, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) rotate(8deg) scale(1.08); }
  100% { transform: translate3d(2%, -3%, 0) rotate(-6deg) scale(1.05); }
}
@keyframes auroraDrift2 {
  0%   { transform: translate3d(0%, 0%, 0) rotate(0deg) scale(1.02); }
  50%  { transform: translate3d(3%, -2%, 0) rotate(-5deg) scale(0.95); }
  100% { transform: translate3d(-2%, 3%, 0) rotate(7deg) scale(1.1); }
}

/* Soft radial mask so aurora fades out to the edges (looks more natural) */
.aurora-mask {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 0%,
    transparent 50%,
    var(--bg) 100%);
  pointer-events: none;
}

/* Disable aurora animation when the user prefers reduced motion, and on small screens for perf */
@media (prefers-reduced-motion: reduce) {
  .aurora-wrap::before, .aurora-wrap::after { animation: none; }
}
@media (max-width: 640px) {
  .aurora-wrap::before, .aurora-wrap::after {
    animation-duration: 40s; /* Slower on mobile to save battery */
    filter: blur(40px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTAINER SCROLL (3D tilting mockup reveal)
   ═══════════════════════════════════════════════════════════════════════════ */
.cs-wrap {
  min-height: 60rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 2rem;
  perspective: 1000px;
}
@media (min-width: 768px) {
  .cs-wrap { min-height: 80rem; padding: 5rem; }
}

.cs-inner {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
}

/* Title area — translates up slightly as you scroll in */
.cs-title {
  text-align: center;
  max-width: 64rem;
  margin: 0 auto 2rem;
  transform: translateY(var(--cs-translate, 0px));
  will-change: transform;
}

.cs-title h2 {
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.1;
  color: var(--fg);
  margin-bottom: 12px;
}
.cs-title h2 em { font-style: normal; color: var(--peach-d); font-weight: 800; }
.cs-title p {
  font-size: 17px;
  color: var(--fg2);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.55;
}

/* The tilting card — rotates flat as you scroll */
.cs-card {
  max-width: 64rem;
  margin: -3rem auto 0;
  height: 30rem;
  width: 100%;
  border: 4px solid #6C6C6C;
  padding: 8px;
  background: #222;
  border-radius: 30px;
  box-shadow:
    0 0 #0000004d,
    0 9px 20px #0000004a,
    0 37px 37px #00000042,
    0 84px 50px #00000026,
    0 149px 60px #0000000a,
    0 233px 65px #00000003;
  transform:
    rotateX(var(--cs-rotate, 20deg))
    scale(var(--cs-scale, 1.05));
  transform-origin: center top;
  transform-style: preserve-3d;
  will-change: transform;
}
@media (min-width: 768px) {
  .cs-card { height: 40rem; padding: 24px; }
}

/* Inner content (screenshot / demo) */
.cs-content {
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: #f5f5f5;
}
@media (min-width: 768px) {
  .cs-content { border-radius: 14px; padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-card { transform: rotateX(0deg) scale(1); }
  .cs-title { transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   TEXT EFFECT (blur-in, word-by-word, staggered)
   Applied automatically to <h1>, <h2>, .sp-title, .sec-title
   ═══════════════════════════════════════════════════════════════════════════ */

/* Only targets elements we mark with .te-ready — so pre-hydration text is invisible
   (otherwise flash of un-split content). JS adds .te-ready once it has wrapped each word. */
.te-pending { visibility: hidden; }
.te-ready { visibility: visible; }

.te-word {
  display: inline-block;
  white-space: pre;  /* preserve spaces inside split */
  opacity: 0;
  filter: blur(12px);
  transform: translateY(3px);
  transition: opacity .55s cubic-bezier(.2,.8,.2,1),
              filter   .55s cubic-bezier(.2,.8,.2,1),
              transform .55s cubic-bezier(.2,.8,.2,1);
  transition-delay: calc(var(--te-i, 0) * 55ms);
}
.te-in .te-word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Reduced motion: show instantly */
@media (prefers-reduced-motion: reduce) {
  .te-word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
  .te-pending { visibility: visible; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAV SIZE BUMP (~15%)
   ═══════════════════════════════════════════════════════════════════════════ */
/* These rules override the defaults declared earlier in the file */
.nav-logo { font-size: 18px !important; }
.nav-badge { font-size: 10px !important; padding: 3px 8px !important; }
.nav-links a { font-size: 15px !important; font-weight: 600 !important; }
nav.home-nav { padding: 22px 52px !important; }
nav.home-nav .nav-cta { font-size: 15px !important; padding: 12px 26px !important; border-radius: 12px !important; }

@media (max-width: 980px) {
  nav.home-nav { padding: 16px 24px !important; }
}
@media (max-width: 640px) {
  .nav-logo { font-size: 17px !important; }
  nav.home-nav .nav-cta { font-size: 14px !important; padding: 10px 20px !important; }
}

/* Ticker a bit bigger too */
.ticker-item { font-size: 13px !important; padding: 0 36px !important; }

/* App header (non-home pages) size bump — logo + buttons */
header .logo { font-size: 20px !important; }
header .tagline { font-size: 14px !important; }
header .user-menu a,
header .user-menu button {
  font-size: 14px !important;
  padding: 11px 20px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STEPPER (3-step progress indicator)
   ═══════════════════════════════════════════════════════════════════════════ */
.stepper-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.stepper-dots {
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
  padding: 8px;
}
.stepper-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg3);
  position: relative;
  z-index: 2;
  transition: background .3s;
}
.stepper-dot.reached { background: #fff; }
.stepper-fill {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  background: var(--grn);
  border-radius: 99px;
  z-index: 1;
  transition: width .6s cubic-bezier(.34, 1.56, .64, 1);
  box-shadow: 0 0 0 3px var(--grn-b);
}

.stepper-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  max-width: 360px;
}
.stepper-back {
  padding: 13px 20px;
  background: var(--bg2);
  color: var(--fg);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--brd);
  border-radius: 99px;
  cursor: pointer;
  transition: all .2s;
  width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 0;
  padding-right: 0;
}
.stepper-back.show {
  width: 84px;
  opacity: 1;
  padding-left: 20px;
  padding-right: 20px;
}
.stepper-back:hover { background: var(--bg3); }
.stepper-continue {
  flex: 1;
  padding: 13px 20px;
  background: linear-gradient(180deg, #e5b2ba 0%, var(--peach) 50%, #d195a0 100%);
  color: var(--fg);
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: 99px;
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s;
  box-shadow: var(--btn-shadow), 0 4px 14px rgba(222,166,175,0.35);
  letter-spacing: -.005em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.stepper-continue:hover:not(:disabled) {
  background: linear-gradient(180deg, #edbcc4 0%, #dca6af 50%, #c88691 100%);
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover), 0 12px 24px rgba(200,134,145,0.45);
}
.stepper-continue:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--btn-shadow-active); }
.stepper-continue:disabled { opacity: .55; cursor: not-allowed; filter: saturate(.7); }
.stepper-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  opacity: 0; transform: scale(0);
  transition: all .4s cubic-bezier(.34,1.56,.64,1);
}
.stepper-check.on { opacity: 1; transform: scale(1); }

/* Panel containing the step's fields — slides smoothly between steps */
.step-panels {
  position: relative;
  min-height: 320px;
  overflow: hidden;
}
.step-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .35s, transform .4s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.step-panel.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;  /* so height is natural */
}
.step-panel.prev { transform: translateX(-40px); }

.step-heading {
  text-align: center;
  margin-bottom: 1.25rem;
}
.step-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--peach-d);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.step-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--fg);
  margin-bottom: 6px;
  line-height: 1.2;
}
.step-sub {
  font-size: 14px;
  color: var(--fg2);
  line-height: 1.5;
  max-width: 380px;
  margin: 0 auto;
}

/* Review list (final step) */
.review-list {
  background: var(--bg);
  border: 1px solid var(--brd);
  border-radius: 14px;
  padding: .5rem 0;
}
.review-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 14px;
  gap: 12px;
}
.review-row + .review-row { border-top: 1px dashed var(--brd); }
.review-key { color: var(--fg3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.review-val { color: var(--fg); font-weight: 600; text-align: right; }
.review-val.empty { color: var(--fg3); font-weight: 400; font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════════
   SLIDE TABS (pill navigation with mix-blend cursor)
   ═══════════════════════════════════════════════════════════════════════════ */
.slide-tabs-wrap {
  position: relative;
  margin-bottom: 1.5rem;
  /* Horizontal scroll + fade masks */
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
  padding: 0 20px;
}
.slide-tabs-wrap::-webkit-scrollbar { display: none; }

.slide-tabs {
  position: relative;
  display: inline-flex;
  width: max-content;
  margin: 0 auto;
  background: #fff;
  border: 2px solid var(--fg);
  border-radius: 99px;
  padding: 4px;
  list-style: none;
  box-shadow: var(--shadow);
}

.slide-tab {
  position: relative;
  z-index: 10;
  cursor: pointer;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #fff;
  mix-blend-mode: difference;
  border: none;
  background: transparent;
  border-radius: 99px;
  white-space: nowrap;
  font-family: var(--font);
  transition: color .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.slide-tab .slide-tab-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(255,255,255,0.2);
  color: #fff;
  letter-spacing: .04em;
}
.slide-tab .slide-tab-badge.warn { background: rgba(200,146,76,0.6); }
.slide-tab .slide-tab-badge.bad { background: rgba(196,79,79,0.65); }

.slide-cursor {
  position: absolute;
  z-index: 1;
  top: 4px;
  bottom: 4px;
  background: var(--fg);
  border-radius: 99px;
  opacity: 0;
  pointer-events: none;
  transition:
    left .4s cubic-bezier(.34, 1.56, .64, 1),
    width .4s cubic-bezier(.34, 1.56, .64, 1),
    opacity .2s;
  will-change: left, width;
}
.slide-cursor.visible { opacity: 1; }

@media (max-width: 640px) {
  .slide-tab { padding: 9px 14px; font-size: 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   REPORT LAYOUT — SlideTabs variant (horizontal tabs, no sidebar)
   ═══════════════════════════════════════════════════════════════════════════ */
.report-layout-tabs {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.5rem 6rem;
}
.report-layout-tabs .slide-tabs-wrap {
  margin-bottom: 2rem;
}
.report-layout-tabs .report-main {
  min-width: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LOCK SCREEN — blurred fake report behind, signup modal in front
   ═══════════════════════════════════════════════════════════════════════════ */
.lock-stage {
  position: relative;
  min-height: 88vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The blurred background "report" — gives a sense of value behind the gate */
.lock-fakereport {
  position: absolute;
  inset: 0;
  padding: 2rem 1.5rem 4rem;
  max-width: 1100px;
  margin: 0 auto;
  filter: blur(7px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.fake-tabs {
  display: inline-flex;
  margin: 0 auto 2rem;
  background: #fff;
  border: 2px solid var(--fg);
  border-radius: 99px;
  padding: 4px;
  gap: 4px;
  box-shadow: var(--shadow);
}
.fake-tab {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg2);
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.fake-tab.fake-active { background: var(--fg); color: #fff; }
.fake-badge {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(196,79,79,0.4);
  color: #fff;
}
.fake-hero {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 20px;
  padding: 2rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.fake-score-ring {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: conic-gradient(currentColor 60%, var(--bg3) 0);
  position: relative;
}
.fake-score-ring::before {
  content: '';
  position: absolute;
  inset: 12px;
  background: #fff;
  border-radius: 50%;
}
.fake-score-num {
  position: relative;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--fg);
  z-index: 1;
}
.fake-score-ring.c-bad { color: var(--red); }
.fake-score-ring.c-warn { color: var(--peach-d); }
.fake-score-ring.c-ok { color: var(--grn); }
.fake-hero-text { flex: 1; }
.fake-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--peach-d);
  margin-bottom: 6px;
}
.fake-h1 {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--fg);
  margin-bottom: 8px;
  line-height: 1.2;
}
.fake-h-sub {
  font-size: 15px;
  color: var(--fg2);
  letter-spacing: .12em;
  font-family: monospace;
  /* Block-character look so it's clearly placeholder rather than real text */
}
.fake-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.fake-card {
  background: #fff;
  border: 1px solid var(--brd);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(58,46,51,.04);
}
.fake-card-h {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--peach-d);
  margin-bottom: 10px;
}
.fake-row {
  height: 9px;
  background: var(--bg3);
  border-radius: 99px;
  margin-bottom: 8px;
  width: 100%;
}
.fake-row:last-child { margin-bottom: 0; }

/* The signup overlay floats above */
.lock-overlay {
  position: relative;
  z-index: 10;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 4rem 1.5rem;
}
.lock-modal {
  background: #fff;
  border-radius: 24px;
  border: 1px solid var(--brd);
  padding: 2rem 2.25rem 2.25rem;
  max-width: 460px;
  width: 100%;
  box-shadow:
    0 1px 3px rgba(58,46,51,.05),
    0 8px 32px rgba(58,46,51,.18),
    0 24px 64px rgba(58,46,51,.12);
  text-align: left;
  position: relative;
  /* Scale-in entrance animation */
  animation: lockModalIn .6s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes lockModalIn {
  from { opacity: 0; transform: translateY(20px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.lock-modal-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--peach-d);
  margin-bottom: 14px;
}
.lock-modal-score-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--bg);
  border-radius: 14px;
  margin-bottom: 1.25rem;
}
.lock-modal-score {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
}
.lock-modal-score.c-bad { color: var(--red); }
.lock-modal-score.c-warn { color: var(--peach-d); }
.lock-modal-score.c-ok { color: var(--grn); }
.lock-modal-score-label { flex: 1; min-width: 0; }
.lock-modal-domain {
  font-weight: 700;
  font-size: 15px;
  color: var(--fg);
  margin-bottom: 2px;
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lock-modal-url {
  font-size: 12px;
  color: var(--fg3);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lock-modal-h {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--fg);
  margin-bottom: 14px;
  line-height: 1.25;
}
.lock-modal-list {
  list-style: none;
  margin: 0 0 1.5rem 0;
  padding: 0;
}
.lock-modal-list li {
  font-size: 14px;
  color: var(--fg2);
  line-height: 1.5;
  padding-left: 24px;
  position: relative;
  margin-bottom: 8px;
}
.lock-modal-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--peach-d);
}

/* The CTA — already styled via .lock-btn from earlier rebrand */
.lock-modal .lock-fineprint {
  text-align: center;
  margin-top: 14px;
  font-size: 12px;
  color: var(--fg3);
}
.lock-modal .lock-fineprint a { color: var(--peach-d); font-weight: 700; text-decoration: none; }

@media (max-width: 640px) {
  .lock-fakereport { display: none; }   /* on mobile just show the overlay clean */
  .lock-overlay { padding: 2rem 1rem; }
  .lock-modal { padding: 1.5rem 1.5rem 1.75rem; }
  .lock-modal-h { font-size: 19px; }
}