/* ══════════════════════════════════════════════════════
   INBXR — Design System v5 · Clean Minimal Theme
   ══════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ───────────────────────────────── */
:root {
  /* Brand — blue from InbXr logo */
  --brand:        #2563eb;
  --brand-light:  #3b82f6;
  --brand-dark:   #1d4ed8;
  --brand-muted:  rgba(37,99,235,0.07);
  --brand-border: rgba(37,99,235,0.22);

  /* Navy — dark backgrounds for header + heroes */
  --navy:         #0c1a3a;
  --navy-light:   #152244;
  --navy-text:    rgba(255,255,255,0.85);

  /* Card / surface backgrounds */
  --card-bg:      #0f172a;
  --surface-1:    #ffffff;

  /* Accent — used in gradients alongside brand */
  --accent:       #1d4ed8;

  /* CTA — high-contrast green for action buttons */
  --cta:          #22c55e;
  --cta-dark:     #16a34a;
  --cta-glow:     rgba(34,197,94,0.35);

  /* Status */
  --green:        #059669;
  --green-muted:  rgba(5,150,105,0.08);
  --yellow:       #d97706;
  --yellow-muted: rgba(217,119,6,0.08);
  --red:          #dc2626;
  --red-muted:    rgba(220,38,38,0.06);
  --orange:       #ea580c;
  --orange-muted: rgba(234,88,12,0.07);
  --blue:         #3b82f6;
  --blue-muted:   rgba(59,130,246,0.07);

  /* Backgrounds — clean white surfaces */
  --bg-1: #ffffff;
  --bg-2: #f8fafc;
  --bg-3: #ffffff;
  --bg-4: #f1f5f9;
  --bg-5: #e2e8f0;

  /* Borders — clean gray */
  --border-1: #e2e8f0;
  --border-2: #cbd5e1;
  --border-3: #94a3b8;
  --border-focus: rgba(37,99,235,0.50);

  /* Text — dark navy hierarchy */
  --text-1: #0f172a;
  --text-2: #334155;
  --text-3: #64748b;
  --text-4: #94a3b8;

  /* Typography */
  --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'SFMono-Regular', Consolas, 'Courier New', monospace;

  /* Radius */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 20px;
  --r-full: 9999px;

  /* Shadows — more visible, modern depth */
  --shadow-1: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.06), 0 8px 16px rgba(0,0,0,0.06);
  --shadow-3: 0 4px 8px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.10);
  --shadow-glow: 0 0 0 3px rgba(37,99,235,0.18);

  /* Transitions */
  --ease: cubic-bezier(0.4,0,0.2,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);

  /* Layout */
  --sidebar-w: 460px;
  --header-h:  64px;

  /* Legacy aliases (keep JS-generated badge classes working) */
  --color-green:  var(--green);
  --color-yellow: var(--yellow);
  --color-red:    var(--red);
  --color-orange: var(--orange);
  --color-blue:   var(--blue);
  --bg-base:      var(--bg-1);
  --bg-surface:   var(--bg-2);
  --bg-card:      var(--bg-3);
  --bg-input:     var(--bg-4);
  --bg-hover:     var(--bg-5);
  --border:       var(--border-1);
  --border-subtle: var(--border-1);
  --text-primary:   var(--text-1);
  --text-secondary: var(--text-2);
  --text-hint:      var(--text-3);
  --brand-primary:  var(--brand);
  --radius-sm: var(--r-2);
  --radius-md: var(--r-3);
  --radius-lg: var(--r-4);
  --bg-body: var(--bg-1);
  --bg-card-alt: #f8fafc;
}

/* ── 2. RESET & BASE ────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  background: var(--bg-1);
  color: var(--text-1);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

input, select, textarea, button {
  font-family: inherit;
  font-size: inherit;
}

ul, ol { list-style: none; }
img { display: block; max-width: 100%; }

/* ── 3. UTILITIES ───────────────────────────────────── */
.hidden { display: none !important; }

/* ── 4. HEADER — Clean minimal ────────────────────────── */
/* ── Embedded mode (inside dashboard iframe) ─────────── */
.embedded .site-header,
.embedded footer,
.embedded .admin-toolbar,
.embedded .sender-hero,
.embedded .tool-hero,
.embedded .et-homepage-hero,
.embedded .et-final-cta,
.embedded .lp-section,
.embedded .et-comparison,
.embedded .et-value-strip,
.embedded .et-how,
.embedded .et-safe-approach,
.embedded .et-tools-strip,
.embedded .back-link,
.embedded .fw-hero { display: none !important; }
.embedded .auth-page { padding: 20px; background: #fff; }
.embedded .auth-card { max-width: none; box-shadow: none; border: none; background: #fff; }
/* ── Framework Lab — embedded light theme ─────────── */
.embedded body,
.embedded .fw-lab { background: #fff; color: var(--text-1); }

/* Decision tree */
.embedded .fw-decision {
  background: #fff; border: 1px solid var(--border-1); border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.embedded .fw-section-title { color: var(--text-1); }
.embedded .fw-section-subtitle { color: var(--text-3); }
.embedded .fw-decision__question { color: var(--text-1); }
.embedded .fw-decision__opt {
  background: #fff; border: 1px solid var(--border-1); color: var(--text-1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.embedded .fw-decision__opt:hover {
  border-color: var(--brand); background: rgba(37,99,235,0.03);
  box-shadow: 0 2px 8px rgba(37,99,235,0.08);
  transform: translateY(-1px);
}
.embedded .fw-decision__opt strong { color: var(--text-1); }
.embedded .fw-decision__opt span { color: var(--text-3); }
.embedded .fw-decision__result h3 { color: var(--text-1); }
.embedded .fw-decision__rec {
  background: #fff; border: 1px solid var(--border-1); color: var(--text-1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.embedded .fw-decision__rec:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(37,99,235,0.08); }
.embedded .fw-decision__rec p { color: var(--text-3); }

/* Tabs */
.embedded .fw-tabs { border-color: var(--border-1); }
.embedded .fw-tab { color: var(--text-3); }
.embedded .fw-tab:hover { color: var(--text-1); background: var(--bg-2); }
.embedded .fw-tab--active { color: var(--brand); background: rgba(37,99,235,0.06); border-bottom-color: var(--brand); }

/* Framework cards */
.embedded .fw-card {
  background: #fff; border: 1px solid var(--border-1); color: var(--text-1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.embedded .fw-card:hover {
  border-color: var(--brand); transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(37,99,235,0.10);
}
.embedded .fw-card__name { color: var(--text-1); }
.embedded .fw-card__desc { color: var(--text-3); }
.embedded .fw-card__pill { background: var(--bg-2); color: var(--text-2); }

/* Favorites link */
.embedded .fw-fav-toggle { color: var(--text-3); }
.embedded .fw-fav-toggle:hover { color: var(--brand); }

/* Modal */
.embedded .fw-modal-overlay { background: rgba(0,0,0,0.3); }
.embedded .fw-modal {
  background: #fff; border: 1px solid var(--border-1); color: var(--text-1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.embedded .fw-modal__desc { color: var(--text-2); }
.embedded .fw-modal__section h3 { color: var(--text-1); }
.embedded .fw-modal__section p { color: var(--text-2); }
.embedded .fw-modal__example { background: var(--bg-2); color: var(--text-2); border: 1px solid var(--border-1); }
.embedded .fw-modal__close { color: var(--text-3); }
.embedded .fw-modal__close:hover { color: var(--text-1); }
.embedded .fw-modal__step { background: var(--bg-2); border-color: var(--border-1); }
.embedded .fw-modal__step-key { background: var(--brand); color: #fff; }
.embedded .fw-modal__step-label { color: var(--text-1); }
.embedded .fw-modal__step-desc { color: var(--text-2); }

/* Builder */
.embedded .fw-builder { background: #fff; border: 1px solid var(--border-1); color: var(--text-1); }
.embedded .fw-builder input,
.embedded .fw-builder textarea { background: #fff; border-color: var(--border-1); color: var(--text-1); }

/* Upsell */
.embedded .fw-upsell { background: var(--bg-2); border-color: var(--border-1); color: var(--text-1); }
.embedded .fw-upsell p { color: var(--text-2); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.header-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.logo-img {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-link {
  display: inline-block;
  padding: 7px 15px;
  border-radius: var(--r-2);
  font-size: 0.83rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  transition: color 0.2s var(--ease), background 0.2s var(--ease);
  border: none;
  position: relative;
}

.nav-link:hover {
  color: #ffffff;
  background: rgba(255,255,255,0.08);
}

.nav-link--active {
  color: #fff;
  font-weight: 600;
  background: var(--brand);
  border-radius: var(--r-full);
}
.nav-link--active:hover {
  background: var(--brand-dark);
  color: #fff;
}

.nav-link--featured {
  /* no special styling — green pill comes from --active */
  position: relative;
}
.nav-link--featured::before { display: none; }
.nav-link--featured.nav-link--active {
  background: var(--brand);
  color: #fff;
}

/* ── Nav dropdown ── */
.nav-dropdown {
  position: relative;
}
.nav-link--dropdown {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 15px; border-radius: var(--r-2);
  font-size: 0.83rem; font-weight: 500;
  color: rgba(255,255,255,0.7);
  background: none; border: none;
  cursor: pointer; transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.nav-link--dropdown:hover { color: #ffffff; background: rgba(255,255,255,0.08); }
.nav-link--dropdown.nav-link--active { color: #fff; background: var(--brand); font-weight: 600; border-radius: var(--r-full); }
.nav-link--dropdown svg { width: 10px; height: 10px; transition: transform 0.2s var(--ease); }
.nav-dropdown:hover .nav-link--dropdown svg { transform: rotate(180deg); }

.nav-dropdown__menu {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  min-width: 200px; padding: 6px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3); box-shadow: var(--shadow-3);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  transform: translateX(-50%) translateY(-4px);
  z-index: 120;
}
.nav-dropdown:hover .nav-dropdown__menu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown__link {
  display: block; padding: 9px 14px; border-radius: var(--r-2);
  font-size: 0.82rem; font-weight: 500; color: var(--text-2);
  text-decoration: none; transition: all 0.15s var(--ease);
  white-space: nowrap;
}
.nav-dropdown__link:hover { color: var(--text-1); background: var(--bg-2); }
.nav-dropdown__link--active { color: var(--brand-dark); background: var(--brand-muted); font-weight: 600; }
.nav-dropdown__divider { height: 1px; background: var(--border-1, #e2e8f0); margin: 4px 10px; }
.nav-dropdown__link--all { color: var(--brand); font-weight: 600; }
.nav-dropdown__link--all:hover { color: var(--brand-dark); background: var(--brand-muted); }
.nav-dropdown__menu--grouped { min-width: 240px; padding: 8px 6px; }
.nav-dropdown__group-label {
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  padding: 10px 14px 4px;
  margin-top: 2px;
}
.nav-dropdown__menu--grouped .nav-dropdown__group-label:first-child { margin-top: 0; padding-top: 4px; }

/* ── Mobile nav toggle ── */
.nav-toggle {
  display: none;
  background: none; border: none; cursor: pointer;
  width: 28px; height: 20px; position: relative;
  flex-direction: column; justify-content: space-between;
  padding: 0; z-index: 110;
}
.nav-toggle span {
  display: block; width: 100%; height: 2px; background: rgba(255,255,255,0.7);
  border-radius: 2px; transition: all 0.3s var(--ease);
  transform-origin: center;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); background: #fff; }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); background: #fff; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: fixed; top: 0; right: 0;
    width: 280px; height: 100vh;
    background: var(--navy);
    flex-direction: column; align-items: stretch;
    padding: 80px 24px 32px; gap: 4px;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease);
    box-shadow: -4px 0 24px rgba(0,0,0,0.3);
    z-index: 105;
    overflow-y: auto;
    border-left: 1px solid rgba(255,255,255,0.06);
  }
  .site-nav.open { transform: translateX(0); }
  .site-nav .nav-link {
    display: block; padding: 12px 16px;
    border-radius: var(--r-3); font-size: 0.92rem;
    color: rgba(255,255,255,0.7);
  }
  .site-nav .nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }
  .site-nav .nav-link--active { background: var(--brand); color: #fff; border-radius: var(--r-full); }
  /* Flatten dropdown on mobile */
  .nav-dropdown { position: static; }
  .nav-link--dropdown { display: none; }
  .nav-dropdown__menu {
    position: static; opacity: 1; visibility: visible; pointer-events: auto;
    transform: none; background: none; border: none; box-shadow: none;
    min-width: 0; padding: 0;
  }
  .nav-dropdown__link {
    display: block; padding: 12px 16px; border-radius: var(--r-3);
    font-size: 0.92rem; color: rgba(255,255,255,0.7);
  }
  .nav-dropdown__link:hover { background: rgba(255,255,255,0.08); color: #fff; }
  .nav-dropdown__link--active { background: rgba(255,255,255,0.12); color: #fff; }
}

/* ── 5. INDEX HERO ──────────────────────────────────── */
.tool-hero {
  padding: 88px 24px 72px;
  text-align: center;
  background: var(--navy);
  border-bottom: none;
  position: relative;
}

.tool-hero__inner {
  max-width: 740px;
  margin: 0 auto;
}

.tool-hero__eyebrow {
  display: block;
  width: fit-content;
  margin: 0 auto 24px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-muted);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-full);
  padding: 6px 16px;
}

.tool-hero__h1 {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.06;
  margin-bottom: 18px;
  color: #ffffff;
}

.tool-hero__p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.85);
  margin-bottom: 30px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Hero CTA row ── */
.hero-cta-row {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; margin-bottom: 28px;
}
.hero-cta-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 40px; border-radius: var(--r-full);
  background: var(--cta);
  color: #fff !important; font-size: 1rem; font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px var(--cta-glow);
  transition: all 0.3s ease; letter-spacing: -0.01em;
}
.hero-cta-primary:hover {
  background: var(--cta-dark);
  transform: scale(1.03);
  box-shadow: 0 6px 20px var(--cta-glow);
}
.hero-cta-primary svg { flex-shrink: 0; }
.hero-cta-sub {
  font-size: 0.78rem; color: rgba(255,255,255,0.8); opacity: 1;
  max-width: 480px; line-height: 1.5;
}

/* ── Hero comparison banner ── */
.hero-compare {
  margin-bottom: 28px; padding: 18px 24px; border-radius: var(--r-3);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: none;
  max-width: 440px; margin-left: auto; margin-right: auto;
}
.hero-compare__vs {
  display: block; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.8); opacity: 1; margin-bottom: 12px; text-align: center;
}
.hero-compare__items { display: flex; gap: 12px; justify-content: center; }
.hero-compare__item {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 20px; border-radius: 8px; flex: 1; text-align: center;
}
.hero-compare__item--them {
  background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.15);
}
.hero-compare__item--us {
  background: rgba(37,99,235,0.06); border: 1px solid rgba(37,99,235,0.2);
}
.hero-compare__label { font-size: 0.72rem; color: rgba(255,255,255,0.75); font-weight: 500; }
.hero-compare__item--them .hero-compare__price {
  font-size: 1.1rem; font-weight: 800; color: var(--color-red, #ef4444);
  text-decoration: line-through; text-decoration-color: rgba(239,68,68,0.4);
}
.hero-compare__item--us .hero-compare__price {
  font-size: 1.1rem; font-weight: 800; color: var(--color-green, #22c55e);
}

@media (max-width: 500px) {
  .hero-cta-primary { padding: 12px 24px; font-size: 0.9rem; }
  .hero-compare__items { flex-direction: column; }
}

/* ── Hero Checks Grid (Email Test hero) ── */
.hero-checks {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 6px 48px;
  margin: 10px auto 0;
  text-align: left;
}
.hero-checks__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.hero-checks__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(37,99,235,0.15);
  color: var(--brand-light);
  font-size: 0.65rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.hero-checks__item strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.hero-checks__item span {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.3;
}
.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px auto 0;
  padding: 16px 36px;
  background: var(--brand);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: inherit;
  border: none;
  border-radius: var(--r-full);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(37,99,235,0.35);
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  animation: ctaPulse 2.5s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(37,99,235,0.35); }
  50% { box-shadow: 0 4px 32px rgba(37,99,235,0.55); }
}
.hero-cta-btn:hover {
  background: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(37,99,235,0.45);
  animation: none;
}
.hero-cta-btn svg { flex-shrink: 0; }
.hero-assurance {
  margin: 10px 0 4px;
  font-size: 0.88rem;
  color: #86efac;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-assurance::before {
  content: "\2713";
  font-weight: 900;
  color: #22c55e;
}
.et-homepage-hero .hero-assurance { text-align: left; }
.hero-trust-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 10px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.75);
  max-width: 480px;
}
.hero-trust-bar > svg { color: rgba(255,255,255,0.55); }
.hero-trust-bar > span { flex: 1; }
.hero-trust-bar strong { color: #fff; font-weight: 800; }
.hero-trust-bar a {
  color: #86efac;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.76rem;
}
.hero-trust-bar a:hover { color: #bbf7d0; }
.et-homepage-hero .hero-trust-bar { text-align: left; }
.hero-price-anchor {
  margin: 6px auto 0;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  text-align: center;
}
.hero-price-anchor strong {
  color: var(--brand-light);
  font-weight: 700;
}

/* Social proof bar */
.hero-social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 20px auto 0;
  padding: 12px 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  max-width: 480px;
}
.hero-social-proof__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hero-social-proof__stat strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
}
.hero-social-proof__stat span {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}
.hero-social-proof__divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.1);
}
@media (max-width: 600px) {
  .hero-checks { grid-template-columns: 1fr; gap: 12px; }
  .hero-social-proof { gap: 12px; padding: 10px 16px; }
  .hero-social-proof__stat strong { font-size: 0.8rem; }
}

.tool-hero__features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}

.feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-full);
  padding: 7px 16px;
  transition: all 0.25s var(--ease);
}

.feature-chip:hover {
  border-color: rgba(37,99,235,0.4);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: none;
}

.tool-hero__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.75);
}

.tool-hero__trust-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
}

/* ── 5a. LANDING PAGE MARKETING SECTIONS ───────────── */
.lp-section {
  padding: 80px 24px;
}
.lp-section:nth-child(odd) {
  background: var(--bg-1);
}
.lp-section:nth-child(even) {
  background: var(--bg-2);
}
.lp-container {
  max-width: 960px;
  margin: 0 auto;
}
.lp-eyebrow {
  display: block;
  width: fit-content;
  margin: 0 auto 16px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-muted);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-full);
  padding: 5px 14px;
}
.lp-heading {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text-1);
  text-align: center;
  margin: 0 0 16px;
}
.lp-subheading {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--text-2);
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}
.lp-closer {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
  text-align: center;
  margin-top: 40px;
}

/* Problem section */
.lp-problem__body {
  max-width: 640px;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--text-2);
}
.lp-problem__body p {
  margin: 0 0 16px;
}
.lp-problem__body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.lp-problem__body ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 6px;
  color: var(--text-2);
}
.lp-problem__body ul li::before {
  content: '\2013';
  position: absolute;
  left: 0;
  color: var(--text-4);
}

/* Problem cards (agency vs marketer) */
.lp-problem-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 680px;
  margin: 0 auto;
}
.lp-problem-card {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: 24px;
  text-align: left;
}
.lp-problem-card__label {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 8px;
}
.lp-problem-card__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}
@media (max-width: 600px) {
  .lp-problem-cards { grid-template-columns: 1fr; }
}

/* Value prop cards */
.lp-cards {
  display: grid;
  gap: 24px;
  margin-top: 40px;
}
.lp-cards--3 { grid-template-columns: repeat(3, 1fr); }
.lp-cards--2 { grid-template-columns: repeat(2, 1fr); }
.lp-card {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: 32px 28px;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.lp-card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.lp-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2);
  background: var(--brand-muted);
  color: var(--brand);
  margin-bottom: 18px;
}
.lp-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 10px;
}
.lp-card__body {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0;
}

/* Benefits section */
.lp-benefits__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 40px;
}
.lp-benefits__col {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--text-2);
}
.lp-benefits__col p {
  margin: 0 0 14px;
}
.lp-benefits__col ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.lp-benefits__col ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 5px;
}
.lp-benefits__col ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  opacity: 0.4;
}
.lp-benefits__fragments li::before {
  background: var(--red) !important;
  opacity: 0.5 !important;
}
.lp-highlight {
  font-weight: 600;
  color: var(--text-1);
}

/* Audience cards */
.lp-card--audience {
  border-left: 3px solid var(--brand);
}

/* Feature grid */
.lp-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.lp-feature {
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: 24px;
  transition: box-shadow 0.2s var(--ease);
}
.lp-feature:hover {
  box-shadow: var(--shadow-2);
}
.lp-feature__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2);
  background: var(--brand-muted);
  color: var(--brand);
  margin-bottom: 14px;
}
.lp-feature__title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 8px;
}
.lp-feature__body {
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text-2);
  margin: 0;
}

/* Landing page responsive */
@media (max-width: 768px) {
  .lp-section { padding: 56px 20px; }
  .lp-heading { font-size: 1.65rem; }
  .lp-cards--3,
  .lp-cards--2,
  .lp-feature-grid { grid-template-columns: 1fr; }
  .lp-benefits__grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ── 5b. GENERIC HERO BAND (Email Verifier etc.) ──── */
.hero-band {
  background: var(--navy);
  padding: 72px 24px 56px;
  text-align: center;
}

.hero-inner {
  max-width: 680px;
  margin: 0 auto;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--brand);
  background: var(--brand-muted);
  padding: 5px 14px;
  border-radius: var(--r-full);
  margin-bottom: 18px;
}

.hero-heading {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 16px;
}

.hero-description {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--navy-text);
  max-width: 640px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .hero-band { padding: 44px 20px 36px; }
  .hero-heading { font-size: 1.65rem; }
}

/* ── 6. SENDER HERO ─────────────────────────────────── */
.sender-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.sender-hero {
  padding: 72px 24px 56px;
  text-align: center;
  background: var(--navy);
  border-bottom: none;
  position: relative;
}

/* Upgraded homepage hero */
.et-homepage-hero {
  padding: 36px 24px 28px;
  background: var(--navy);
}
.et-homepage-hero .sender-hero__inner {
  max-width: 720px;
}
/* ── Homepage hero split layout ─────────────────── */
.hero-split {
  display: flex;
  align-items: center;
  gap: 48px;
  text-align: left;
}
.hero-split__copy {
  flex: 1;
  min-width: 0;
}
.hero-split__visual {
  flex: 0 0 320px;
}
.et-homepage-hero .sender-hero__inner {
  max-width: 960px;
}
.et-homepage-hero .sender-hero__title {
  font-size: 4rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  margin-bottom: 6px;
  line-height: 1.05;
  color: #fff;
}
.et-homepage-hero .sender-hero__eyebrow {
  margin-bottom: 12px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  display: inline-block;
}
/* Answer line sitting right under the H1. Softer than the H1, stronger than the body sub. */
.sender-hero__answer {
  font-size: 1.5rem;
  font-weight: 700;
  color: #16a34a;
  margin: 0 0 18px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.et-homepage-hero .sender-hero__answer {
  font-size: 1.8rem;
}
@media (max-width: 720px) {
  .et-homepage-hero .sender-hero__answer { font-size: 1.3rem; }
  .sender-hero__answer { font-size: 1.2rem; }
}
.sender-hero__claim {
  font-size: 1.3rem;
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  margin: 0 0 14px;
  letter-spacing: -0.01em;
  line-height: 1.45;
}
.sender-hero__claim em {
  font-style: italic;
  color: var(--cta);
}
.et-homepage-hero .sender-hero__sub {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.75);
  margin-bottom: 24px;
  line-height: 1.6;
}
.et-homepage-hero .sender-hero__sub strong {
  color: rgba(255,255,255,0.85);
}
.et-homepage-hero .hero-cta-btn {
  margin: 0;
}
.et-homepage-hero .hero-price-anchor {
  text-align: left;
}

/* ── Mock UI card ──────────────────────────────── */
.hero-mock {
  background: #0b1328;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.04);
  animation: heroMockFloat 4s ease-in-out infinite;
}
@keyframes heroMockFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.hero-mock__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.hero-mock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.hero-mock__dot--red { background: #ef4444; }
.hero-mock__dot--yellow { background: #f59e0b; }
.hero-mock__dot--green { background: #22c55e; }
.hero-mock__tab {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin-left: 8px;
}
.hero-mock__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-mock__row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-mock__label {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  min-width: 72px;
  flex-shrink: 0;
}
.hero-mock__grade {
  font-size: 1.6rem;
  font-weight: 900;
  line-height: 1;
}
.hero-mock__grade--a { color: #22c55e; }
.hero-mock__bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
}
.hero-mock__bar-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 3px;
  transition: width 1.5s ease;
}
.hero-mock__bar--green .hero-mock__bar-fill,
.hero-mock__bar-fill--green {
  background: #22c55e;
}
.hero-mock__val {
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  min-width: 40px;
  text-align: right;
}
.hero-mock__val small { font-weight: 500; color: rgba(255,255,255,0.7); }
.hero-mock__val--green { color: #22c55e; }
.hero-mock__divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 2px 0;
}
.hero-mock__badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  background: rgba(37,99,235,0.15);
  color: var(--brand-light);
  border-radius: 999px;
}
.hero-mock__checks {
  display: flex;
  gap: 6px;
}
.hero-mock__check {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}
.hero-mock__check--pass {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
}
.hero-mock__row--ai {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-light);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Bad report styles */
.hero-mock__grade--d { color: #ef4444; }
.hero-mock__bar--red .hero-mock__bar-fill,
.hero-mock__bar-fill--red { background: #ef4444; }
.hero-mock__val--red { color: #ef4444; }
.hero-mock__badge--none {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
}
.hero-mock__check--fail {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
}
.hero-mock__row--issues {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #ef4444;
  font-size: 0.72rem;
  font-weight: 600;
}

/* ── Hero 4-act cinema ─────────────────────────── */
.hero-cinema {
  position: relative;
}
.hero-act {
  display: none;
  animation: actIn 0.45s ease;
  position: relative;
}
.hero-act--active {
  display: block;
}
@keyframes actIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Act captions */
.hero-act__caption {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 600;
  margin: 12px 0 0;
  letter-spacing: 0.02em;
}
.hero-act__caption--red { color: #ef4444; }
.hero-act__caption--green { color: #22c55e; }

/* Transition buttons (acts 1 & 2) */
.hero-act__transition {
  position: absolute;
  inset: 0;
  bottom: 28px; /* leave room for caption */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  border-radius: 14px;
}
.hero-act__transition--visible {
  opacity: 1;
}
.hero-act__transition::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(11,19,40,0.7);
  backdrop-filter: blur(3px);
  border-radius: 14px;
}
.hero-act__trans-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: var(--brand);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(37,99,235,0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 2;
  white-space: nowrap;
}
.hero-act__trans-btn--green {
  background: var(--cta);
  box-shadow: 0 4px 20px rgba(34,197,94,0.3);
}
.hero-act__transition--clicked .hero-act__trans-btn {
  transform: scale(0.93);
  box-shadow: 0 2px 8px rgba(37,99,235,0.15);
}
.hero-act__trans-cursor {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  margin-left: 50px;
  margin-top: 18px;
  opacity: 0;
  transition: opacity 0.3s 0.1s, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate(25px, 15px);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.hero-act__transition--visible .hero-act__trans-cursor {
  opacity: 1;
  transform: translate(0, 0);
}
.hero-act__transition--clicked .hero-act__trans-cursor {
  transform: translate(-2px, 2px);
}

/* Act dot indicators */
.hero-cinema__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.hero-cinema__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.15);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.hero-cinema__dot--active {
  background: var(--brand-light);
  transform: scale(1.3);
}

/* Glow effects per act */
.hero-mock--spam-glow {
  box-shadow: 0 24px 48px rgba(0,0,0,0.4), 0 0 30px rgba(239,68,68,0.08);
}
.hero-mock--red-glow {
  box-shadow: 0 24px 48px rgba(0,0,0,0.4), 0 0 30px rgba(239,68,68,0.1);
}
.hero-mock--green-glow {
  box-shadow: 0 24px 48px rgba(0,0,0,0.4), 0 0 30px rgba(34,197,94,0.1);
}
.hero-mock--primary-glow {
  box-shadow: 0 24px 48px rgba(0,0,0,0.4), 0 0 30px rgba(37,99,235,0.1);
}

/* Spam-specific styles */
.gmail-tab--spam { color: #ef4444; }
.gmail-tab--spam.gmail-tab--active { border-bottom-color: #ef4444; color: #ef4444; }
.gmail-row--spam-landing {
  animation: gmailLand 0.7s ease 0.3s both;
  background: rgba(239,68,68,0.06);
  border-left: 3px solid #ef4444;
}
.gmail-row__sender--spam { color: rgba(255,255,255,0.75); font-weight: 600; }
.gmail-row__subject--spam { color: rgba(255,255,255,0.8); }
.gmail-row__badge-spam {
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  background: #ef4444;
  color: #fff;
  border-radius: 4px;
  flex-shrink: 0;
  animation: badgePop 0.3s ease 0.8s both;
}
.gmail-avatar--red { background: #ef4444; color: #fff; }
.gmail-avatar--red-dim { background: rgba(239,68,68,0.15); color: #ef4444; font-size: 0.7rem; font-weight: 800; }
.gmail-row--spam-other { opacity: 0.4; }

/* ── Gmail mock ───────────────────────────────── */
.hero-mock--gmail .hero-mock__body { padding: 0; }
.gmail-tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.gmail-tab {
  padding: 9px 16px;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  gap: 5px;
  border-bottom: 2px solid transparent;
}
.gmail-tab--active {
  color: var(--brand-light);
  border-bottom-color: var(--brand-light);
}
.gmail-inbox {
  display: flex;
  flex-direction: column;
}
.gmail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
}
.gmail-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.gmail-avatar--blue { background: rgba(37,99,235,0.2); color: var(--brand-light); }
.gmail-avatar--green { background: #22c55e; color: #fff; }
.gmail-avatar--purple { background: rgba(124,58,237,0.2); color: #a78bfa; }
.gmail-row__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gmail-row__sender {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gmail-row__subject {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gmail-row__time {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.75);
  flex-shrink: 0;
}

/* Landing email — the animated row */
.gmail-row--landing {
  animation: gmailLand 0.8s ease 0.6s both;
  background: rgba(37,99,235,0.06);
  border-left: 3px solid var(--brand-light);
}
@keyframes gmailLand {
  0% { opacity: 0; transform: translateY(-20px) scale(0.97); }
  60% { opacity: 1; transform: translateY(3px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.gmail-row__sender--new {
  color: #fff;
  font-weight: 700;
}
.gmail-row__subject--new {
  color: rgba(255,255,255,0.7);
  font-weight: 600;
}
.gmail-row__time--new {
  color: var(--brand-light);
  font-weight: 600;
}
.gmail-row__badge-primary {
  position: absolute;
  right: 10px;
  top: -6px;
  font-size: 0.55rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  background: #22c55e;
  color: #fff;
  border-radius: 4px;
  animation: badgePop 0.3s ease 1.2s both;
}
@keyframes badgePop {
  0% { opacity: 0; transform: scale(0.5); }
  70% { transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

/* Existing rows fade in subtly */
.gmail-row--existing {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .hero-split {
    flex-direction: column;
    text-align: center;
    gap: 32px;
  }
  .hero-split__visual {
    flex: none;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .et-homepage-hero .sender-hero__title { font-size: 2.8rem; }
  .sender-hero__claim { font-size: 1.1rem; }
  .sender-hero__claim br { display: none; }
  .et-homepage-hero .hero-cta-btn { margin: 0 auto; }
  .et-homepage-hero .hero-price-anchor { text-align: center; }
}

.sender-hero__inner {
  max-width: 660px;
  margin: 0 auto;
}

.sender-hero__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-muted);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-full);
  padding: 6px 16px;
  margin-bottom: 24px;
}

.sender-hero__title {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  margin-bottom: 16px;
  color: #ffffff;
}

.sender-hero__sub {
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--navy-text);
  max-width: 640px;
  margin: 0 auto 36px;
}

.sender-hero__stats {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: none;
}

.hero-stat {
  padding: 16px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-stat + .hero-stat {
  border-left: 1px solid rgba(255,255,255,0.10);
}

.hero-stat__num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--brand-light);
  line-height: 1;
}

.hero-stat__label {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.sender-hero__details {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  max-width: 820px;
  margin: 36px auto 0;
  text-align: left;
}

.hero-detail {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--r-3);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: none;
  transition: all 0.3s var(--ease);
}

.hero-detail:hover {
  border-color: rgba(255,255,255,0.20);
  box-shadow: none;
  transform: translateY(-1px);
}

.hero-detail strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
}

.hero-detail span {
  font-size: 0.78rem;
  color: var(--navy-text);
  line-height: 1.6;
}

/* ── 7. MAIN LAYOUT ─────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--header-h));
  align-items: start;
}

.panel { overflow: hidden; }

.panel--form {
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  border-right: 1px solid var(--border-1);
  background: var(--bg-2);
  padding: 24px 24px 40px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}

.panel--form::-webkit-scrollbar { width: 5px; }
.panel--form::-webkit-scrollbar-track { background: transparent; }
.panel--form::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-full); }

.panel--results {
  min-height: calc(100vh - var(--header-h));
  background: var(--bg-1);
  padding: 24px 28px 56px;
}

.panel-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-1);
  margin-bottom: 20px;
}

/* ── 8. TABS (Compose / Settings) ───────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-4);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: 3px;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}

.tab:hover { color: var(--text-1); }

.tab.active {
  background: #fff;
  color: var(--text-1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(37,99,235,0.07);
  font-weight: 600;
}

.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── 9. FORM SECTIONS, LABELS, INPUTS ───────────────── */
.form-section {
  margin-bottom: 22px;
}

.section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section-label::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 12px;
  background: linear-gradient(180deg, var(--brand), var(--accent));
  border-radius: var(--r-full);
  flex-shrink: 0;
}

.field {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 6px;
}

.required { color: var(--red); font-weight: 600; }
.optional { font-size: 0.72rem; color: var(--text-3); font-weight: 400; }

input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-3);
  color: var(--text-1);
  padding: 10px 14px;
  font-size: 0.85rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

input[type="text"]:hover,
input[type="email"]:hover,
select:hover {
  border-color: var(--border-3);
}

input[type="text"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.10), 0 1px 3px rgba(37,99,235,0.07);
  background: #fff;
}

input::placeholder, textarea::placeholder {
  color: var(--text-4);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

.field-hint {
  font-size: 0.72rem;
  color: var(--text-3);
  line-height: 1.4;
}

.char-counter {
  font-size: 0.72rem;
  color: var(--text-3);
}

/* ── 10. MODE SWITCHER ──────────────────────────────── */
.input-mode-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-4);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: 3px;
  margin-bottom: 10px;
}

.input-mode-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 7px 8px;
  border-radius: var(--r-2);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.input-mode-tab:hover { color: var(--text-1); }

.input-mode-tab.active {
  background: #fff;
  color: var(--text-1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.imt-icon { font-size: 0.88rem; display: inline-flex; align-items: center; }
.imt-icon svg { width: 14px; height: 14px; }
.imt-label { white-space: nowrap; }

.body-mode-panel { display: none; }
.body-mode-panel.active { display: flex; flex-direction: column; gap: 0; }

/* ── 11. BODY EDITOR ────────────────────────────────── */
.body-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-bottom: none;
  border-radius: var(--r-3) var(--r-3) 0 0;
}

.paste-hint {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.73rem;
  color: var(--text-3);
}

.paste-hint__icon { font-size: 0.9rem; display: inline-flex; align-items: center; }
.paste-hint__icon svg { width: 14px; height: 14px; }

.body-clear-btn {
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  color: var(--text-3);
  font-size: 0.72rem;
  padding: 3px 10px;
  cursor: pointer;
  transition: all 0.15s var(--ease);
  flex-shrink: 0;
}

.body-clear-btn:hover {
  border-color: var(--border-3);
  color: var(--text-1);
}

.body-editor {
  min-height: 160px;
  max-height: 340px;
  overflow-y: auto;
  background: #fff;
  border: 1.5px solid var(--border-2);
  border-top: none;
  padding: 12px 14px;
  font-size: 0.83rem;
  line-height: 1.7;
  color: var(--text-1);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  word-break: break-word;
}

.body-editor:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}

.body-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-4);
  pointer-events: none;
  display: block;
}

.body-editor a { color: var(--brand); text-decoration: underline; }

.body-statusbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-top: none;
  border-radius: 0 0 var(--r-3) var(--r-3);
}

.link-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--brand);
  background: var(--brand-muted);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-full);
  padding: 2px 8px;
}

.link-badge__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}

.paste-success {
  font-size: 0.72rem;
  color: var(--green);
  font-weight: 500;
  animation: fadeSlideIn 0.2s var(--ease) both;
}

/* ── 12. HTML TEXTAREA ──────────────────────────────── */
.html-source-textarea {
  min-height: 180px;
  max-height: 360px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  color: #166534;
  background: #fafdf7;
  border: 1.5px solid var(--border-2);
  border-top: none;
  border-radius: 0 0 var(--r-3) var(--r-3);
  resize: none;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.html-source-textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}

/* ── 13. FILE UPLOAD ────────────────────────────────── */
.upload-zone {
  border: 2px dashed var(--border-2);
  border-radius: var(--r-3);
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: all 0.2s var(--ease);
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: var(--brand);
  background: var(--brand-muted);
}

.upload-zone__icon { font-size: 2rem; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; }
.upload-zone__icon svg { width: 32px; height: 32px; color: var(--brand); }
.upload-zone__title { font-size: 0.88rem; font-weight: 600; color: var(--text-1); margin-bottom: 6px; }
.upload-zone__sub { font-size: 0.78rem; color: var(--text-3); }

.upload-browse-btn {
  background: none;
  border: none;
  color: var(--brand);
  cursor: pointer;
  font-size: inherit;
  text-decoration: underline;
  padding: 0;
}

.upload-formats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.uf-chip {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-4);
  border: 1px solid var(--border-1);
  border-radius: var(--r-1);
  padding: 2px 8px;
  font-family: var(--font-mono);
}

.upload-preview {
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upload-preview__file { display: flex; align-items: center; gap: 12px; }
.upload-preview__icon { font-size: 1.5rem; flex-shrink: 0; display: inline-flex; align-items: center; }
.upload-preview__icon svg { width: 20px; height: 20px; color: var(--brand); }
.upload-preview__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.upload-preview__name { font-size: 0.85rem; font-weight: 600; color: var(--text-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-preview__meta { font-size: 0.72rem; color: var(--text-3); }

.upload-remove-btn {
  background: none;
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  color: var(--text-3);
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.75rem;
  transition: all 0.15s var(--ease);
  flex-shrink: 0;
}

.upload-remove-btn:hover { border-color: var(--red); color: var(--red); }

.upload-parsed { display: flex; flex-direction: column; gap: 4px; }
.upload-parsed__row { font-size: 0.75rem; color: var(--text-2); padding: 4px 0; border-top: 1px solid var(--border-1); }

.upload-error {
  font-size: 0.78rem;
  color: var(--red);
  background: var(--red-muted);
  border: 1px solid rgba(220,38,38,0.15);
  border-radius: var(--r-2);
  padding: 8px 12px;
}

.upload-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--text-2);
  padding: 12px 0;
}

/* ── 14. TOGGLE SWITCHES ────────────────────────────── */
.toggle-group { display: flex; flex-direction: column; gap: 10px; }

.toggle-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  transition: border-color 0.15s var(--ease);
}

.toggle-label:hover { border-color: var(--border-3); }
.toggle-label input { position: absolute; opacity: 0; width: 0; height: 0; }

.toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--bg-5);
  border: 1px solid var(--border-2);
  border-radius: var(--r-full);
  flex-shrink: 0;
  transition: background 0.2s var(--ease), border-color 0.2s;
  margin-top: 1px;
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  transition: transform 0.2s var(--ease);
}

.toggle-label input:checked ~ .toggle-track { background: var(--brand); border-color: var(--brand); }
.toggle-label input:checked ~ .toggle-track .toggle-thumb { transform: translateX(16px); }

.toggle-text { display: flex; flex-direction: column; gap: 2px; }
.toggle-text strong { font-size: 0.83rem; font-weight: 600; color: var(--text-1); }
.toggle-text small { font-size: 0.72rem; color: var(--text-3); }

/* ── 15. BUTTONS ────────────────────────────────────── */
.btn-analyze {
  width: 100%;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--r-full);
  padding: 14px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 14px rgba(37,99,235,0.30);
  margin-top: 4px;
  position: relative;
}

.btn-analyze:hover {
  background: var(--brand-dark);
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(37,99,235,0.40);
}

.btn-analyze:active { transform: scale(0.98); }
.btn-analyze:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-text { pointer-events: none; }

.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-1);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ── 16. EMPTY STATE ────────────────────────────────── */
.empty-state {
  max-width: 520px;
  margin: 48px auto 0;
  text-align: center;
}

.empty-logo {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-light) 60%, #93c5fd 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0.20;
  margin-bottom: 28px;
}

.empty-state h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-1);
  margin-bottom: 10px;
}

.empty-state > p {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 32px;
}

.empty-state-upsell { margin-bottom: 24px; }
.empty-upsell-link {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 18px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(37,99,235,0.07), rgba(37,99,235,0.05));
  border: 1px solid var(--brand-border);
  color: var(--text-2) !important; font-size: 0.82rem; line-height: 1.5;
  text-decoration: none; text-align: left;
  transition: all 0.2s;
}
.empty-upsell-link:hover {
  border-color: rgba(37,99,235,0.35);
  background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(37,99,235,0.08));
}
.empty-upsell-link svg { flex-shrink: 0; margin-top: 2px; color: var(--brand); }
.empty-upsell-link strong { color: var(--brand); }

.empty-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.empty-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: 14px 16px;
  transition: border-color 0.2s var(--ease);
}

.empty-feature:hover { border-color: var(--brand-border); }

.empty-feature__icon {
  width: 34px;
  height: 34px;
  background: var(--brand-muted);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand);
}

.empty-feature__icon svg { width: 16px; height: 16px; }

.empty-feature > div { display: flex; flex-direction: column; gap: 3px; }
.empty-feature strong { font-size: 0.85rem; font-weight: 600; color: var(--text-1); }
.empty-feature span { font-size: 0.78rem; color: var(--text-3); line-height: 1.4; }

.empty-checklist {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}
.empty-checklist li {
  font-size: 0.82rem;
  color: var(--text-2);
  padding: 8px 12px;
  background: var(--bg-2);
  border-radius: var(--r-2);
  border: 1px solid var(--border-1);
}

.results-content.fade-in { animation: fadeSlideUp 0.4s var(--ease) both; }
.results-content.fade-in .score-row { animation: fadeSlideUp 0.4s 0.05s var(--ease) both; }
.results-content.fade-in .module-block:first-of-type { animation: fadeSlideUp 0.4s 0.15s var(--ease) both; }
.results-content.fade-in .module-block:last-of-type { animation: fadeSlideUp 0.4s 0.25s var(--ease) both; }

/* ── 17. META BAR ───────────────────────────────────── */
.meta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.73rem;
  color: var(--text-2);
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-full);
  padding: 4px 10px;
}

.meta-chip strong { color: var(--text-1); font-weight: 600; }

/* ── 18. SCORE ROW & CARDS ──────────────────────────── */
.score-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.score-card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-4);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.3s var(--ease);
  box-shadow: var(--shadow-1);
}

.score-card:hover {
  border-color: var(--brand-border);
  box-shadow: var(--shadow-2);
  transform: translateY(-3px);
}

.score-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.score-card__icon {
  width: 30px;
  height: 30px;
  background: var(--brand-muted);
  border-radius: var(--r-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}

.score-card__icon svg { width: 15px; height: 15px; }

.score-card__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

.score-card__gauge-wrap { display: flex; justify-content: center; }

/* ── 19. SVG GAUGES — with glow effect ──────────────── */
.gauge {
  width: 130px;
  height: 76px;
  overflow: visible;
}

.gauge-bg {
  fill: none;
  stroke: var(--bg-4);
  stroke-width: 10;
  stroke-linecap: round;
}

.gauge-fill {
  fill: none;
  stroke: var(--brand);
  stroke-width: 10;
  stroke-linecap: round;
  stroke-dasharray: 0 173;
  transition: stroke-dasharray 1.1s cubic-bezier(0.34,1.56,0.64,1), stroke 0.4s var(--ease);
  /* clean — no glow */
}

.gauge-num {
  fill: var(--text-1);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-anchor: middle;
  dominant-baseline: auto;
}

.gauge-label-top {
  fill: var(--text-3);
  font-family: var(--font);
  font-size: 9px;
  font-weight: 500;
  text-anchor: middle;
}

/* ── 20. SCORE BADGES ───────────────────────────────── */
.score-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: var(--r-full);
  align-self: flex-start;
}

.score-card__summary {
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1.5;
}

.badge--green  { background: var(--green-muted);  color: var(--green); }
.badge--blue   { background: var(--blue-muted);   color: var(--blue); }
.badge--yellow { background: var(--yellow-muted); color: var(--yellow); }
.badge--orange { background: var(--orange-muted); color: var(--orange); }
.badge--red    { background: var(--red-muted);    color: var(--red); }

/* ── 21. MODULE BLOCKS ──────────────────────────────── */
.module-block {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-4);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--shadow-1);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.module-block:hover {
  border-color: rgba(37,99,235,0.10);
  box-shadow: var(--shadow-2);
}

.module-header {
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border-1);
}

.module-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.module-title svg { width: 16px; height: 16px; color: var(--brand); flex-shrink: 0; }

/* ── 22. CATEGORY BARS ──────────────────────────────── */
.category-list {
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--border-1);
}

.category-item {
  display: grid;
  grid-template-columns: 140px 1fr 48px;
  align-items: center;
  gap: 12px;
}

.category-item__label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-track {
  height: 6px;
  background: var(--bg-4);
  border-radius: var(--r-full);
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--brand), var(--accent));
  transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  box-shadow: var(--shadow-glow);
}

/* Shimmer on progress bars */
.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent 0%, var(--bg-2) 50%, transparent 100%);
  animation: shimmer 2.5s ease-in-out infinite;
}

.category-item__score {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-3);
  text-align: right;
  white-space: nowrap;
}

/* ── 23. ACCORDION ──────────────────────────────────── */
.accordion-section { border-top: 1px solid var(--border-1); }

.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  padding-left: 24px;
  background: none;
  border: none;
  color: var(--text-1);
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s var(--ease);
  position: relative;
}

.accordion-trigger::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--brand);
  border-radius: var(--r-full);
  transition: height 0.2s var(--ease);
}

.accordion-trigger:hover { background: var(--bg-2); }
.accordion-trigger:hover::before { height: 20px; }
.accordion-trigger span:first-child { flex: 1; }

.badge-count {
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  padding: 0 6px;
  background: var(--bg-4);
  color: var(--text-3);
  transition: all 0.15s;
}

.badge-count.has-items { background: var(--red-muted); color: var(--red); }

.accordion-arrow {
  font-size: 0.65rem;
  color: var(--text-3);
  transition: transform 0.2s var(--ease);
  flex-shrink: 0;
}

.accordion-trigger.open .accordion-arrow { transform: rotate(180deg); }

.accordion-body { display: none; }
.accordion-body.open { display: block; }

/* ── 24. FLAG LISTS ─────────────────────────────────── */
.flag-list {
  padding: 10px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.flag-item {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.flag-item--high   { border-left: 3px solid var(--red); }
.flag-item--medium { border-left: 3px solid var(--yellow); }
.flag-item--low    { border-left: 3px solid var(--blue); }

.flag-item__meta { display: flex; align-items: center; gap: 8px; }

.severity-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.severity-dot--high   { background: var(--red); }
.severity-dot--medium { background: var(--yellow); }
.severity-dot--low    { background: var(--blue); }

.flag-item__cat { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.flag-item__text { font-size: 0.8rem; color: var(--text-1); font-weight: 500; line-height: 1.4; }
.flag-item__rec { font-size: 0.75rem; color: var(--text-2); line-height: 1.4; }

/* One-Click Fix Button */
.fix-btn {
  margin-left: auto;
  padding: 2px 10px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid var(--color-blue);
  color: var(--color-blue);
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.fix-btn:hover {
  background: var(--color-blue);
  color: #fff;
}
.fix-btn:disabled {
  border-color: var(--color-green);
  color: var(--color-green);
  cursor: default;
  opacity: 0.8;
}
.flag-item--fixed {
  opacity: 0.5;
  border-left-color: var(--color-green) !important;
}
.flag-item--fixed .flag-item__text {
  text-decoration: line-through;
}

/* Body editor highlight flash */
@keyframes fixHighlight {
  0%, 100% { box-shadow: none; }
  50% { box-shadow: 0 0 0 3px var(--color-blue); }
}
.fix-highlight {
  animation: fixHighlight 0.5s ease 3;
}

/* ── 25. RECOMMENDATIONS ────────────────────────────── */
.rec-list {
  padding: 10px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rec-item {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-3);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rec-item__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.rec-item__cat {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  background: var(--brand-muted);
  border-radius: var(--r-full);
  padding: 2px 8px;
}

.rec-item__issue { font-size: 0.78rem; font-weight: 600; color: var(--text-1); }
.rec-item__text { font-size: 0.78rem; color: var(--text-2); line-height: 1.55; }

.copy-btn {
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  color: var(--text-3);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 9px;
  cursor: pointer;
  transition: all 0.15s var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}

.copy-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ── 26. STRENGTHS & WEAKNESSES ─────────────────────── */
.strengths-weaknesses-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }

.sw-box { padding: 14px 20px; }
.sw-box--strength { border-right: 1px solid var(--border-1); }

.sw-box h4 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; color: var(--text-2); }
.sw-box--strength h4 { color: var(--green); }
.sw-box--weakness h4 { color: var(--yellow); }

.sw-box ul { display: flex; flex-direction: column; gap: 6px; }

.sw-box li { font-size: 0.78rem; color: var(--text-2); padding-left: 14px; position: relative; line-height: 1.4; }
.sw-box--strength li::before { content: '\2713'; position: absolute; left: 0; color: var(--green); font-size: 0.7rem; }
.sw-box--weakness li::before { content: '\2013'; position: absolute; left: 0; color: var(--yellow); font-size: 0.85rem; top: -1px; }

.sw-empty { font-size: 0.75rem; color: var(--text-4); font-style: italic; padding: 4px 0; }

/* ── 27. REWRITE SUGGESTIONS ────────────────────────── */
.rewrite-block { padding: 14px 20px; border-top: 1px solid var(--border-1); }
.rewrite-original { font-size: 0.75rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }
.rewrite-tip { font-size: 0.78rem; color: var(--text-2); line-height: 1.55; margin-bottom: 10px; }

.subject-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }

.subject-suggestion {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s;
  font-size: 0.82rem;
  color: var(--text-1);
  text-align: left;
}

.subject-suggestion:hover { border-color: var(--brand-border); background: rgba(37,99,235,0.04); }
.copy-icon { font-size: 0.8rem; flex-shrink: 0; }

.cta-examples { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

.cta-example {
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  padding: 8px 12px;
  font-size: 0.82rem;
  color: var(--text-1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 0.15s var(--ease), background 0.15s;
}

.cta-example:hover { border-color: var(--brand-border); background: rgba(37,99,235,0.04); }

.no-rewrites {
  font-size: 0.8rem;
  color: var(--green);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── 28. LOADING SPINNER ────────────────────────────── */
.sender-loading {
  text-align: center;
  padding: 60px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.loading-ring {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(37,99,235,0.12);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  box-shadow: 0 0 24px rgba(37,99,235,0.10);
}

.loading-msg { font-size: 0.92rem; font-weight: 600; color: var(--text-1); }
.loading-sub { font-size: 0.78rem; color: var(--text-3); }

/* ── 29. SENDER MAIN LAYOUT ─────────────────────────── */
.sender-main {
  flex: 1;
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
  padding: 36px 24px 72px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── 30. SENDER FORM CARD ───────────────────────────── */
.sender-form-card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-4);
  padding: 28px 32px 32px;
  box-shadow: var(--shadow-2);
}

.sender-fields {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 22px;
}

.sender-field--primary { grid-column: 1 / -1; }

.domain-input-wrap { position: relative; display: flex; align-items: center; }

.domain-input-at {
  position: absolute;
  left: 13px;
  color: var(--text-3);
  font-size: 0.95rem;
  pointer-events: none;
  z-index: 1;
}

.domain-input-wrap input { padding-left: 28px; }
.sender-submit { width: 100%; }

/* ── 31. COMBINED CARD ──────────────────────────────── */
.sender-results .combined-card,
.combined-card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-top: 3px solid var(--brand);
  border-radius: var(--r-3);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  box-shadow: var(--shadow-1);
}

.combined-card__left { flex: 1; min-width: 0; }

.combined-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.combined-badge {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-1);
  margin-bottom: 8px;
}

.combined-summary { font-size: 0.82rem; color: var(--text-2); line-height: 1.55; }

.combined-gauges { display: flex; gap: 16px; flex-shrink: 0; }

.mini-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.mini-gauge-wrap .gauge { width: 96px; height: 58px; }
.mini-gauge-label { font-size: 0.68rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.mini-gauge-badge { font-size: 0.68rem; font-weight: 700; padding: 2px 9px; border-radius: var(--r-full); background: var(--bg-4); color: var(--text-2); }

/* ── 32. SENDER SECTIONS ────────────────────────────── */
.sender-section { display: flex; flex-direction: column; gap: 12px; }

.sender-section__title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.dnsbl-summary {
  font-size: 0.73rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-full);
  padding: 2px 10px;
}

/* ── 33. AUTH GRID ──────────────────────────────────── */
.auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.auth-card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-1);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s;
}

.auth-card:hover { box-shadow: var(--shadow-2); }

.auth-card--pass    { border-left: 3px solid var(--green); }
.auth-card--warning { border-left: 3px solid var(--yellow); }
.auth-card--warn    { border-left: 3px solid var(--yellow); }
.auth-card--fail    { border-left: 3px solid var(--red); }
.auth-card--missing { border-left: 3px solid var(--text-4); }
.auth-card--na      { border-left: 3px solid var(--text-4); }

.auth-card__header { display: flex; align-items: center; gap: 10px; }

.auth-status-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
}

.auth-status-icon--pass    { background: var(--green-muted);  color: var(--green); }
.auth-status-icon--warning { background: var(--yellow-muted); color: var(--yellow); }
.auth-status-icon--fail    { background: var(--red-muted);    color: var(--red); }
.auth-status-icon--missing { background: var(--red-muted);    color: var(--red); }
.auth-status-icon--info    { background: var(--blue-muted);   color: var(--blue); }

.auth-card__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.auth-card__name { font-size: 0.88rem; font-weight: 700; color: var(--text-1); }
.auth-card__status { font-size: 0.72rem; color: var(--text-3); }
.auth-card__score { font-size: 0.75rem; font-weight: 700; color: var(--text-3); flex-shrink: 0; }

.auth-detail-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.73rem;
  color: var(--brand);
  padding: 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
}

.auth-detail-toggle:hover { text-decoration: underline; }

.auth-detail {
  background: var(--bg-2);
  border-radius: var(--r-2);
  padding: 10px 12px;
  margin-top: 2px;
}

.auth-record-code { display: block; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-2); word-break: break-all; white-space: pre-wrap; line-height: 1.6; }
.auth-selector-note { display: block; font-size: 0.7rem; color: var(--text-3); margin-top: 5px; }

.auth-issues { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; }
.auth-issues li { font-size: 0.75rem; color: var(--yellow); padding-left: 16px; position: relative; line-height: 1.4; }
.auth-issues li::before { content: '\26A0'; position: absolute; left: 0; font-size: 0.65rem; top: 1px; }

.auth-bimi-note { font-size: 0.73rem; color: var(--text-3); line-height: 1.5; }

/* ── 34. DNSBL TABLE ────────────────────────────────── */
.dnsbl-table-wrap {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}

.dnsbl-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }

.dnsbl-table thead th {
  background: var(--bg-2);
  color: var(--text-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.66rem;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-1);
}

.dnsbl-table tbody tr { border-bottom: 1px solid var(--border-1); transition: background 0.15s var(--ease); }
.dnsbl-table tbody tr:last-child { border-bottom: none; }
.dnsbl-table tbody tr:hover { background: rgba(37,99,235,0.04); }
.dnsbl-table tbody td { padding: 9px 14px; color: var(--text-1); vertical-align: middle; }

.dnsbl-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 0.73rem; }
.dnsbl-status--listed { color: var(--red); }
.dnsbl-status--clean  { color: var(--green); }
.dnsbl-status--error  { color: var(--text-4); }
.dnsbl-row--listed { background: rgba(220,38,38,0.04); }
.dnsbl-row--listed:hover { background: rgba(220,38,38,0.07); }

.dnsbl-name { display: block; font-weight: 600; color: var(--text-1); font-size: 0.8rem; }
.dnsbl-zone { display: block; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-3); margin-top: 2px; }
.dnsbl-info-cell { font-size: 0.73rem; color: var(--text-3); max-width: 200px; line-height: 1.4; }
.dnsbl-action-cell { white-space: nowrap; }
.delist-btn { display: inline-block; padding: 4px 10px; background: rgba(239,68,68,0.1); color: #ef4444; border-radius: 999px; font-size: 0.7rem; font-weight: 600; text-decoration: none; transition: background 0.15s; }
.delist-btn:hover { background: rgba(239,68,68,0.2); }

/* Bulk Domain Checker */
.bulk-domain-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.bulk-domain-card { border: 1px solid var(--border-1); border-radius: 12px; transition: border-color 0.15s; }
.bulk-domain-card:hover { border-color: var(--brand); }
.dnsbl-reason { font-size: 0.72rem; color: var(--text-3); display: block; margin-top: 3px; }
.dnsbl-error { font-size: 0.68rem; color: var(--text-4); display: block; }

.type-pill {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--bg-4);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.weight-pill {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.weight-pill--critical { background: var(--red-muted);    color: var(--red); }
.weight-pill--major    { background: var(--orange-muted); color: var(--orange); }
.weight-pill--moderate { background: var(--yellow-muted); color: var(--yellow); }
.weight-pill--minor    { background: var(--blue-muted);   color: var(--blue); }

.dnsbl-clean-badge { font-size: 0.7rem; font-weight: 700; color: var(--green); background: var(--green-muted); padding: 2px 9px; border-radius: var(--r-full); }
.dnsbl-listed-badge { font-size: 0.7rem; font-weight: 700; color: var(--red); background: var(--red-muted); padding: 2px 9px; border-radius: var(--r-full); }

/* ── 35. REPUTATION SIGNALS ─────────────────────────── */
.rep-signals { display: flex; flex-direction: column; gap: 8px; }

.rep-signal-row {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: var(--shadow-1);
  transition: border-color 0.2s var(--ease);
}

.rep-signal-row:hover { border-color: rgba(37,99,235,0.10); }

.rep-signal-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}

.rep-signal-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rep-signal-label { font-size: 0.75rem; font-weight: 600; color: var(--text-2); }
.rep-signal-value { font-size: 0.82rem; color: var(--text-1); word-break: break-all; }
.rep-signal-note { font-size: 0.72rem; color: var(--text-3); font-style: italic; line-height: 1.4; }

.rep-signal-row__badge { font-size: 0.68rem; font-weight: 700; padding: 2px 9px; border-radius: var(--r-full); }
.rep-signal-row__badge--pass { background: var(--green-muted);  color: var(--green); }
.rep-signal-row__badge--warn { background: var(--yellow-muted); color: var(--yellow); }
.rep-signal-row__badge--fail { background: var(--red-muted);    color: var(--red); }
.rep-signal-row__badge--na   { background: var(--bg-4);          color: var(--text-4); }

/* ── 36. SENDER MISC ────────────────────────────────── */
.sender-error {
  background: var(--red-muted);
  border: 1px solid rgba(220,38,38,0.2);
  border-radius: var(--r-3);
  padding: 14px 18px;
  color: var(--red);
  font-size: 0.83rem;
  text-align: center;
}

.run-again-btn {
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: var(--r-2);
  color: var(--text-2);
  cursor: pointer;
  font-size: 0.82rem;
  padding: 9px 20px;
  transition: all 0.15s var(--ease);
}

.run-again-btn:hover { border-color: var(--brand); color: var(--brand); }

/* ── 37. FOOTER ─────────────────────────────────────── */
.site-footer {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 36px 28px;
  text-align: center;
  background: var(--navy);
  position: relative;
}

.site-footer p {
  font-size: 0.73rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

/* ── 38. ANIMATIONS ─────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeSlideIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.20); } 50% { box-shadow: 0 0 0 8px rgba(37,99,235,0); } }
@keyframes typewriterBlink { 0%,100% { border-color: var(--brand); } 50% { border-color: transparent; } }

.fade-in { animation: fadeIn 0.3s var(--ease) both; }

/* ── Typewriter effect ── */
.typewriter {
  display: inline;
  border-right: 2px solid var(--brand);
  animation: typewriterBlink 0.75s step-end infinite;
  white-space: nowrap;
  overflow: hidden;
}
.typewriter--done {
  border-right-color: transparent;
  animation: none;
}

/* ── 39. BACKDROP-FILTER FALLBACK ──────────────────── */
/* v5: No backdrop-filter used — fallback not needed */

/* ── 40. RESPONSIVE ─────────────────────────────────── */
@media (max-width: 1000px) { :root { --sidebar-w: 400px; } }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .panel--form { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border-1); }
  .score-row { grid-template-columns: 1fr 1fr; }
  .category-item { grid-template-columns: 120px 1fr 44px; }
  .tool-hero__h1 { font-size: 2.1rem; }
}

@media (max-width: 640px) {
  .tool-hero { padding: 44px 20px 36px; }
  .tool-hero__h1 { font-size: 1.65rem; }
  .sender-hero__title { font-size: 1.65rem; }
  .sender-hero__details { grid-template-columns: 1fr; }
  .sender-hero__stats { flex-direction: column; }
  .hero-stat + .hero-stat { border-left: none; border-top: 1px solid rgba(255,255,255,0.10); }
  .score-row { grid-template-columns: 1fr; }
  .strengths-weaknesses-row { grid-template-columns: 1fr; }
  .sw-box--strength { border-right: none; border-bottom: 1px solid var(--border-1); }
  .sender-fields { grid-template-columns: 1fr; }
  .sender-field--primary { grid-column: 1; }
  .combined-card { flex-direction: column; align-items: flex-start; gap: 20px; }
  .combined-gauges { width: 100%; justify-content: space-around; }
  .auth-grid { grid-template-columns: 1fr; }
  .dnsbl-table thead th:nth-child(3), .dnsbl-table tbody td:nth-child(3) { display: none; }
  .header-inner { padding: 0 16px; }
  .panel--form { padding: 16px 16px 32px; }
  .panel--results { padding: 16px 16px 40px; }
  .sender-form-card { padding: 20px; }
}

/* ══════════════════════════════════════════════════════
   SENDER REPUTATION (inline in email analyzer results)
   ══════════════════════════════════════════════════════ */

.srep-overview {
  display: flex;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 20px;
}
.srep-combined {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 28px;
  border: 2px solid var(--border-1);
  border-radius: var(--r-3);
  background: #fff;
  min-width: 130px;
}
.srep-combined__score {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
}
.srep-combined__label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 10px;
  border-radius: var(--r-pill);
}
.srep-combined__domain {
  font-size: 0.75rem;
  color: var(--text-3);
  margin-top: 4px;
}
.srep-gauges {
  display: flex;
  gap: 12px;
  flex: 1;
}
.srep-gauge-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  background: var(--bg-2);
}
.srep-gauge-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.srep-gauge-score {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}
.srep-gauge-score small {
  font-size: 0.55em;
  opacity: 0.5;
}
.srep-gauge-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  padding: 1px 8px;
  border-radius: var(--r-pill);
}

/* Auth grid */
.srep-auth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
.srep-auth-card {
  padding: 14px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  background: var(--bg-2);
}
.srep-auth-card--pass   { border-left: 3px solid var(--color-green); }
.srep-auth-card--warning { border-left: 3px solid var(--color-yellow); }
.srep-auth-card--fail,
.srep-auth-card--missing { border-left: 3px solid var(--color-red); }
.srep-auth-card--info   { border-left: 3px solid var(--color-blue); }

.srep-auth-card__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.srep-auth-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.srep-auth-icon--pass    { background: rgba(37,99,235,0.12); color: var(--color-green); }
.srep-auth-icon--warning { background: rgba(234,179,8,0.12);  color: var(--color-yellow); }
.srep-auth-icon--fail,
.srep-auth-icon--missing { background: rgba(239,68,68,0.12);  color: var(--color-red); }
.srep-auth-icon--info    { background: rgba(59,130,246,0.12); color: var(--color-blue); }

.srep-auth-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-1);
}
.srep-auth-score {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-3);
}
.srep-auth-status {
  font-size: 0.7rem;
  color: var(--text-3);
  display: block;
  margin-bottom: 4px;
}
.srep-auth-issues {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
}
.srep-auth-issues li {
  font-size: 0.72rem;
  color: var(--text-2);
  padding: 2px 0;
  padding-left: 10px;
  position: relative;
}
.srep-auth-issues li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--text-hint);
}

/* Blocklist results */
.srep-bl-clean {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--r-2);
  background: rgba(37,99,235,0.06);
  border: 1px solid rgba(37,99,235,0.15);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-green);
  margin-bottom: 16px;
}
.srep-bl-clean__icon {
  font-size: 1rem;
}
.srep-bl-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--r-2);
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.15);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-red);
  margin-bottom: 10px;
}
.srep-bl-alert__icon {
  font-size: 1rem;
}
.srep-bl-listed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.srep-bl-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  font-size: 0.78rem;
}
.srep-bl-name {
  font-weight: 600;
  color: var(--text-1);
}
.srep-bl-zone {
  color: var(--text-3);
  font-size: 0.72rem;
}
.srep-bl-reason {
  color: var(--text-2);
  font-size: 0.7rem;
  margin-left: auto;
}
.srep-bl-delist {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
  margin-left: auto;
  white-space: nowrap;
}
.srep-bl-delist:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .srep-overview { flex-direction: column; }
  .srep-gauges { flex-direction: row; }
  .srep-auth-grid { grid-template-columns: 1fr 1fr; }
}


/* ══════════════════════════════════════════════════════
   INBOX PLACEMENT TEST PAGE
   ══════════════════════════════════════════════════════ */

.placement-container {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* ── Step indicator ──────────────────────────────── */
.placement-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
}
.placement-step {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.35;
  transition: opacity 0.3s;
}
.placement-step.active { opacity: 1; }
.placement-step.completed .placement-step__num {
  background: var(--color-green);
  color: #fff;
}
.placement-step__num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--bg-3);
  color: var(--text-2);
  transition: background 0.3s, color 0.3s;
}
.placement-step.active .placement-step__num {
  background: var(--brand);
  color: #fff;
}
.placement-step__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
}
.placement-step__line {
  width: 40px;
  height: 2px;
  background: var(--border-1);
  margin: 0 8px;
}

/* ── Panels ──────────────────────────────────────── */
.placement-panel.hidden { display: none; }

.placement-card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-4);
  padding: 28px 32px;
  box-shadow: var(--shadow-2);
  text-align: center;
}
.placement-card__icon {
  margin-bottom: 8px;
}
.placement-card__icon svg {
  width: 36px;
  height: 36px;
  color: var(--brand);
}
.placement-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 6px;
}
.placement-card__desc {
  font-size: 0.84rem;
  color: var(--text-2);
  max-width: 520px;
  margin: 0 auto 16px;
  line-height: 1.55;
}

/* ── How it works steps ──────────────────────────── */
.placement-how {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  text-align: left;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}
.placement-how--compact {
  gap: 6px;
  margin-bottom: 16px;
}
.placement-how__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--text-2);
}
.placement-how__num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--brand);
  font-weight: 700;
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Token box ───────────────────────────────────── */
.placement-token-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--bg-2);
  border: 2px dashed var(--brand);
  border-radius: var(--r-3);
  margin: 0 auto 24px;
  max-width: 480px;
}
.placement-token-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  white-space: nowrap;
}
.placement-token-value {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brand);
  flex: 1;
  text-align: center;
  user-select: all;
}
.placement-token-copy {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand);
  background: rgba(37,99,235,0.07);
  border: 1px solid rgba(37,99,235,0.20);
  border-radius: var(--r-2);
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.15s;
}
.placement-token-copy:hover {
  background: rgba(37,99,235,0.12);
}

/* ── Seed list ───────────────────────────────────── */
.placement-seed-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  text-align: left;
}
.placement-seed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
}
.placement-seed__provider {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 100px;
}
.placement-seed__icon svg {
  width: 18px;
  height: 18px;
  color: var(--text-3);
}
.placement-seed__label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-1);
}
.placement-seed__email {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}
.placement-seed__email code {
  font-size: 0.78rem;
  color: var(--text-2);
  background: var(--bg-1);
  padding: 2px 8px;
  border-radius: var(--r-1);
}
.placement-seed__copy {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: 1px solid var(--border-1);
  border-radius: var(--r-1);
  padding: 3px 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.placement-seed__copy:hover {
  border-color: var(--brand);
}

.placement-seed__copy--primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  padding: 6px 18px;
  font-size: 0.78rem;
}

.placement-seed__copy--primary:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

.placement-seed__copy-group {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
}

.placement-seed--all {
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: rgba(37,99,235,0.04);
  border-color: rgba(37,99,235,0.12);
}

.placement-seed--all__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.placement-seed--all__label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-1);
}

.placement-seed--all__count {
  font-size: 0.72rem;
  color: var(--text-3);
}

.placement-seed--all__preview {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  padding: 10px 12px;
  overflow-x: auto;
}

.placement-seed--all__text {
  font-size: 0.78rem;
  color: var(--text-2);
  word-break: break-all;
  line-height: 1.6;
}

/* ── ESP Selector ────────────────────────────────── */
.esp-selector {
  text-align: left;
  margin-bottom: 16px;
}

.esp-selector__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 6px;
}

.esp-selector__dropdown {
  width: 100%;
  background: #fff;
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-3);
  color: var(--text-1);
  padding: 10px 14px;
  font-size: 0.85rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  outline: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  -webkit-appearance: none;
  appearance: none;
}

.esp-selector__dropdown:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}

/* ── ESP Instructions ────────────────────────────── */
.esp-instructions {
  text-align: left;
  background: rgba(37,99,235,0.04);
  border: 1px solid rgba(37,99,235,0.10);
  border-radius: var(--r-3);
  padding: 16px;
  margin-bottom: 16px;
}

.esp-instructions__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.esp-instructions__icon {
  width: 28px;
  height: 28px;
  background: var(--brand-muted);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.esp-instructions__name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-1);
}

.esp-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
}

.esp-step__num {
  min-width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}

.esp-step__text {
  font-size: 0.8rem;
  color: var(--text-2);
  line-height: 1.5;
}

.esp-step__text strong {
  color: var(--text-1);
  font-weight: 600;
}

/* ── Tip box ─────────────────────────────────────── */
.placement-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 16px;
  background: rgba(37,99,235,0.04);
  border: 1px solid rgba(37,99,235,0.10);
  border-radius: var(--r-2);
  font-size: 0.78rem;
  color: var(--text-2);
  text-align: left;
  margin-bottom: 24px;
  line-height: 1.5;
}
.placement-tip svg { flex-shrink: 0; color: var(--brand); margin-top: 1px; }

/* ── Back / action buttons ───────────────────────── */
.placement-back-btn {
  display: inline-block;
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}
.placement-back-btn:hover { color: var(--brand); }

.placement-actions {
  text-align: center;
  margin-top: 24px;
}
.placement-recheck-btn {
  max-width: 400px;
  margin: 0 auto;
}

/* ── Results summary card ────────────────────────── */
.placement-summary-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: #fff;
  border: 2px solid var(--border-1);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-2);
  margin-bottom: 24px;
}
.placement-summary-icon {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}
.placement-summary-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.placement-summary-score {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1;
}
.placement-summary-text {
  font-size: 0.85rem;
  color: var(--text-2);
}
.placement-summary-token {
  font-size: 0.7rem;
  color: var(--text-hint);
  font-family: monospace;
}

/* ── Results grid ────────────────────────────────── */
.placement-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.placement-result-card {
  padding: 20px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  background: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
}
.placement-result-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}
.placement-result-card--inbox   { border-top: 3px solid var(--color-green); }
.placement-result-card--spam    { border-top: 3px solid var(--color-red); }
.placement-result-card--trash   { border-top: 3px solid var(--color-orange); }
.placement-result-card--notfound { border-top: 3px solid var(--color-yellow); }

.placement-result__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.placement-result__provider-icon svg {
  width: 22px;
  height: 22px;
  color: var(--text-3);
}
.placement-result__provider-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-1);
  display: block;
}
.placement-result__email {
  font-size: 0.68rem;
  color: var(--text-hint);
  display: block;
}

.placement-result__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.placement-result__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
}
.placement-result__icon--inbox   { background: rgba(37,99,235,0.12); color: var(--color-green); }
.placement-result__icon--spam    { background: rgba(239,68,68,0.12); color: var(--color-red); }
.placement-result__icon--trash   { background: rgba(249,115,22,0.12); color: var(--color-orange); }
.placement-result__icon--notfound { background: rgba(234,179,8,0.12); color: var(--color-yellow); }

.placement-result__label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-1);
}

.placement-tab-badge {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-3);
  color: var(--text-2);
}
.placement-tab-badge--primary    { background: rgba(37,99,235,0.1); color: var(--color-green); }
.placement-tab-badge--promotions { background: rgba(234,179,8,0.1); color: var(--color-yellow); }
.placement-tab-badge--social     { background: rgba(59,130,246,0.1); color: var(--color-blue); }
.placement-tab-badge--updates    { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.placement-tab-badge--forums     { background: rgba(107,114,128,0.1); color: #6b7280; }

.placement-result__folder {
  font-size: 0.7rem;
  color: var(--text-hint);
  display: block;
}
.placement-result__error {
  font-size: 0.7rem;
  color: var(--color-red);
  display: block;
  margin-top: 4px;
}
.placement-result__timing {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--text-hint);
  font-family: monospace;
}

/* Card entrance animation */
.placement-result-card--animate {
  animation: placementCardIn 0.35s ease-out both;
}
@keyframes placementCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Summary label */
.placement-summary-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}

/* ── Error toast ─────────────────────────────────── */
.placement-error {
  background: var(--red-muted, rgba(239,68,68,0.08));
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--r-2);
  color: var(--color-red);
  font-size: 0.8rem;
  padding: 10px 14px;
  margin-bottom: 16px;
  text-align: left;
}

@media (max-width: 600px) {
  .placement-container { padding: 0 12px 40px; }
  .placement-card { padding: 24px 16px; }
  .placement-steps { gap: 0; }
  .placement-step__label { display: none; }
  .placement-step__line { width: 24px; }
  .placement-token-box { flex-direction: column; gap: 8px; }
  .placement-seed { flex-direction: column; align-items: flex-start; gap: 8px; }
  .placement-seed__email { justify-content: flex-start; }
  .placement-results-grid { grid-template-columns: 1fr; }
  .placement-summary-card { flex-direction: column; text-align: center; }
}

/* ── Placement recommendations ───────────────────── */
.placement-recs {
  margin-top: 24px;
}
.placement-recs__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 12px;
}
.placement-rec {
  padding: 18px 20px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  background: #fff;
  margin-bottom: 10px;
}
.placement-rec--critical { border-left: 3px solid var(--color-red); }
.placement-rec--warning  { border-left: 3px solid var(--color-orange); }
.placement-rec--info     { border-left: 3px solid var(--color-blue); }
.placement-rec--pass     { border-left: 3px solid var(--color-green); }

.placement-rec__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.placement-rec__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
}
.placement-rec__icon--critical { background: rgba(239,68,68,0.12); color: var(--color-red); }
.placement-rec__icon--warning  { background: rgba(249,115,22,0.12); color: var(--color-orange); }
.placement-rec__icon--info     { background: rgba(59,130,246,0.12); color: var(--color-blue); }
.placement-rec__icon--pass     { background: rgba(37,99,235,0.12); color: var(--color-green); }

.placement-rec__titles {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.placement-rec__severity {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
}
.placement-rec__title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-1);
}
.placement-rec__text {
  font-size: 0.82rem;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 10px;
}
.placement-rec__actions {
  list-style: none;
  padding: 0;
  margin: 0;
}
.placement-rec__actions li {
  font-size: 0.78rem;
  color: var(--text-2);
  padding: 4px 0 4px 18px;
  position: relative;
  line-height: 1.5;
}
.placement-rec__actions li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--text-hint);
}

/* ══════════════════════════════════════════════════════
   READABILITY MODULE
   ══════════════════════════════════════════════════════ */

/* ── Overview row ─────────────────────────────────── */
.read-overview {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
}
.read-score-ring {
  flex-shrink: 0;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid var(--color-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
}
.read-score-num {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}
.read-score-of {
  font-size: 0.7rem;
  color: var(--text-hint);
  margin-top: 2px;
}
.read-overview-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.read-label {
  display: inline-block;
  width: fit-content;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.read-grade,
.read-fog {
  font-size: 0.82rem;
  color: var(--text-2);
}
.read-grade strong,
.read-fog strong {
  color: var(--text-1);
  font-weight: 600;
}
.read-summary {
  font-size: 0.82rem;
  color: var(--text-2);
  margin: 4px 0 0;
  line-height: 1.5;
}

/* ── Stats grid ───────────────────────────────────── */
.read-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 0 0 16px;
}
.read-stat-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.read-stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-1);
}
.read-stat-label {
  font-size: 0.68rem;
  color: var(--text-hint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
}

/* ── Issues ───────────────────────────────────────── */
.read-issues {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 12px;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 600px) {
  .read-overview {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  .read-overview-info { align-items: center; }
  .read-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ══════════════════════════════════════════════════════
   DNS RECORD GENERATOR
   ══════════════════════════════════════════════════════ */
.dns-section {
  padding: 16px 0;
}
.dns-section__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 4px;
}
.dns-section__subtitle {
  font-size: 0.78rem;
  color: var(--text-hint);
  margin: 0 0 16px;
}

/* ── Suggestion card ──────────────────────────────── */
.dns-suggestion {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.dns-suggestion__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.dns-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dns-badge--spf   { background: rgba(59,130,246,0.12); color: #3b82f6; }
.dns-badge--dkim  { background: rgba(139,92,246,0.12);  color: #8b5cf6; }
.dns-badge--dmarc { background: rgba(5,150,105,0.12);   color: #059669; }

.dns-action-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-hint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.dns-suggestion__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-1);
}
.dns-suggestion__desc {
  font-size: 0.8rem;
  color: var(--text-2);
  margin: 0 0 10px;
  line-height: 1.5;
}
.dns-suggestion__explain {
  font-size: 0.75rem;
  color: var(--text-hint);
  margin: 0 0 12px;
  line-height: 1.5;
  font-style: italic;
}

/* ── Record display ───────────────────────────────── */
.dns-record-block {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin: 10px 0;
}
.dns-record-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.dns-record-row + .dns-record-row {
  border-top: 1px solid var(--border-1);
}
.dns-record-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-hint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 50px;
  flex-shrink: 0;
}
.dns-record-value {
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--text-1);
  background: var(--bg-2);
  padding: 4px 8px;
  border-radius: 4px;
  word-break: break-all;
  flex: 1;
}
.dns-record-value--main {
  background: rgba(37,99,235,0.07);
  border: 1px solid rgba(37,99,235,0.12);
  color: var(--brand-light);
  font-size: 0.82rem;
  padding: 8px 10px;
}
.dns-record-value--old {
  text-decoration: line-through;
  opacity: 0.6;
}
.dns-copy-btn {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.dns-copy-btn:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ── Current record ───────────────────────────────── */
.dns-current {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: rgba(220,38,38,0.05);
  border: 1px solid rgba(220,38,38,0.12);
  border-radius: 6px;
  flex-wrap: wrap;
}

/* ── DKIM instructions ────────────────────────────── */
.dns-instructions {
  margin: 10px 0;
}
.dns-instructions h5 {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
  margin: 0 0 8px;
}
.dns-steps {
  margin: 0;
  padding: 0 0 0 20px;
}
.dns-steps li {
  font-size: 0.78rem;
  color: var(--text-2);
  padding: 4px 0;
  line-height: 1.5;
}
.dns-steps li::marker {
  color: var(--brand);
  font-weight: 600;
}

/* ── Warnings ─────────────────────────────────────── */
.dns-warnings {
  margin-top: 10px;
}
.dns-warning {
  font-size: 0.75rem;
  color: var(--color-yellow, #d97706);
  padding: 6px 10px;
  background: rgba(217,119,6,0.06);
  border-left: 3px solid rgba(217,119,6,0.3);
  border-radius: 0 4px 4px 0;
  margin-bottom: 4px;
  line-height: 1.5;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 600px) {
  .dns-record-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .dns-record-value { width: 100%; }
}

/* ══════════════════════════════════════════════════════
   BIMI VALIDATION MODULE
   ══════════════════════════════════════════════════════ */

/* ── Overview ─────────────────────────────────────── */
.bimi-overview {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
}
.bimi-score-ring {
  flex-shrink: 0;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 4px solid var(--color-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
}
.bimi-score-num {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
}
.bimi-score-of {
  font-size: 0.68rem;
  color: var(--text-hint);
  margin-top: 2px;
}
.bimi-overview-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bimi-status-badge {
  display: inline-block;
  width: fit-content;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.bimi-status-badge--pass    { background: rgba(5,150,105,0.1);  color: var(--color-green); }
.bimi-status-badge--partial { background: rgba(217,119,6,0.1);  color: var(--color-yellow); }
.bimi-status-badge--invalid { background: rgba(234,88,12,0.1);  color: var(--color-orange); }
.bimi-status-badge--missing { background: rgba(220,38,38,0.08); color: var(--color-red); }

.bimi-domain {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-1);
}
.bimi-dns-host {
  font-size: 0.75rem;
  color: var(--text-hint);
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.bimi-timing {
  font-size: 0.68rem;
  color: var(--text-hint);
}

/* ── Details grid ─────────────────────────────────── */
.bimi-details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 0 16px;
}
.bimi-detail-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bimi-detail-card--pass { border-left: 3px solid var(--color-green); }
.bimi-detail-card--fail { border-left: 3px solid var(--color-red); }
.bimi-detail-card--warn { border-left: 3px solid var(--color-yellow); }
.bimi-detail-card--info { border-left: 3px solid var(--color-blue); }

.bimi-detail-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bimi-detail-icon {
  font-size: 0.82rem;
  font-weight: 700;
}
.bimi-detail-icon--pass { color: var(--color-green); }
.bimi-detail-icon--fail { color: var(--color-red); }
.bimi-detail-icon--warn { color: var(--color-yellow); }
.bimi-detail-icon--info { color: var(--color-blue); }

.bimi-detail-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-hint);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.bimi-detail-value {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-1);
}
.bimi-detail-info {
  font-size: 0.72rem;
  color: var(--text-2);
  line-height: 1.4;
  word-break: break-all;
}

/* ── Issues ───────────────────────────────────────── */
.bimi-issues {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 12px;
}

/* ── Recommendation steps ─────────────────────────── */
.bimi-rec-steps {
  margin: 8px 0 0;
  padding: 0 0 0 20px;
}
.bimi-rec-steps li {
  font-size: 0.78rem;
  color: var(--text-2);
  padding: 3px 0;
  line-height: 1.5;
}
.bimi-rec-steps li::marker {
  color: var(--brand);
  font-weight: 600;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 600px) {
  .bimi-overview {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  .bimi-overview-info { align-items: center; }
  .bimi-details-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════
   LINK & IMAGE VALIDATION MODULE
   ══════════════════════════════════════════════════════ */

/* ── Overview ─────────────────────────────────────── */
.li-overview {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
}
.li-score-ring {
  flex-shrink: 0;
  width: 86px;
  height: 86px;
  border-radius: 50%;
  border: 4px solid var(--color-blue);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface-1);
}
.li-score-num { font-size: 1.7rem; font-weight: 700; line-height: 1; }
.li-score-of  { font-size: 0.68rem; color: var(--text-hint); margin-top: 2px; }

.li-overview-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.li-label {
  display: inline-block;
  width: fit-content;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.li-stat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.li-chip {
  font-size: 0.75rem;
  color: var(--text-2);
  background: var(--surface-1);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 4px;
}
.li-chip strong { color: var(--text-1); margin-right: 3px; }
.li-chip-bad { color: var(--color-red); font-weight: 600; margin-left: 4px; }
.li-chip--warn {
  background: rgba(217,119,6,0.06);
  border-color: rgba(217,119,6,0.2);
  color: var(--color-yellow);
}
.li-timing {
  font-size: 0.68rem;
  color: var(--text-hint);
}

/* ── Issues ───────────────────────────────────────── */
.li-issues {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 0 12px;
}

/* ── Detail rows (links & images) ─────────────────── */
.li-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-1);
  transition: background 0.15s;
}
.li-detail-row:hover {
  background: var(--bg-2);
}
.li-detail-row:last-child { border-bottom: none; }

.li-detail-status {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 700;
}
.li-detail-status--ok        { background: rgba(5,150,105,0.12);  color: var(--color-green); }
.li-detail-status--redirect  { background: rgba(59,130,246,0.12); color: var(--color-blue); }
.li-detail-status--shortener { background: rgba(217,119,6,0.12);  color: var(--color-yellow); }
.li-detail-status--suspicious{ background: rgba(220,38,38,0.12);  color: var(--color-red); }
.li-detail-status--broken    { background: rgba(220,38,38,0.12);  color: var(--color-red); }
.li-detail-status--error     { background: rgba(156,163,175,0.12);color: var(--text-hint); }
.li-detail-status--oversized { background: rgba(217,119,6,0.12);  color: var(--color-yellow); }

.li-detail-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.li-detail-url {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  color: var(--text-1);
  word-break: break-all;
}
.li-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.li-meta-tag {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-2);
  color: var(--text-hint);
}
.li-meta-tag--warn {
  background: rgba(217,119,6,0.08);
  color: var(--color-yellow);
}
.li-meta-tag--text {
  color: var(--text-2);
  font-style: italic;
}
.li-detail-final {
  font-size: 0.68rem;
  color: var(--text-hint);
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.li-detail-timing {
  flex-shrink: 0;
  font-size: 0.65rem;
  color: var(--text-hint);
  padding-top: 3px;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 600px) {
  .li-overview {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
  .li-overview-info { align-items: center; }
  .li-stat-chips { justify-content: center; }
}

/* ══════════════════════════════════════════════════════
   AI REWRITE ENGINE
   ══════════════════════════════════════════════════════ */
.ai-powered-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--brand-muted);
  color: var(--brand-dark);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ── Controls ─────────────────────────────────────── */
.ai-controls {
  padding: 12px 0;
}
.ai-tone-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ai-tone-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-2);
}
.ai-tone-select {
  font-size: 0.82rem;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  color: var(--text-1);
  cursor: pointer;
}
.btn-ai-rewrite {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}
.btn-ai-rewrite:hover { opacity: 0.9; }
.btn-ai-rewrite:active { transform: scale(0.98); }
.btn-ai-rewrite:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ai-primary {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 16px; border-radius: 8px; border: 1px solid #8b5cf6;
  background: rgba(139,92,246,0.06); color: #8b5cf6;
  font-size: 0.78rem; font-weight: 600; cursor: pointer;
  transition: all 0.15s;
}
.btn-ai-primary:hover { background: #8b5cf6; color: #fff; }
.btn-ai-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Error ────────────────────────────────────────── */
.ai-error {
  padding: 10px 14px;
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.15);
  border-radius: 8px;
  color: var(--color-red);
  font-size: 0.82rem;
  margin: 8px 0;
}

/* ── Content blocks ───────────────────────────────── */
.ai-block {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-1);
}
.ai-block:last-child { border-bottom: none; }

.ai-block__title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-2);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ── Suggestions (subject lines, preheader) ───────── */
.ai-suggestions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ai-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 0.85rem;
  color: var(--text-1);
}
.ai-suggestion:hover {
  border-color: var(--brand);
  background: rgba(37,99,235,0.04);
}
.ai-copy-icon {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-hint);
  flex-shrink: 0;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.ai-suggestion:hover .ai-copy-icon {
  color: var(--brand);
  border-color: var(--brand);
}

/* ── Text blocks (opening, body, closing) ─────────── */
.ai-text-block {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  position: relative;
}
.ai-text-block p {
  font-size: 0.85rem;
  color: var(--text-1);
  line-height: 1.7;
  margin: 0 0 12px;
}
.ai-text-block p:last-of-type { margin-bottom: 8px; }

.ai-text-block--body {
  max-height: 400px;
  overflow-y: auto;
  border-left: 3px solid var(--brand);
}

/* ── CTA grid ─────────────────────────────────────── */
.ai-cta-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-cta-example {
  padding: 8px 18px;
  border-radius: 6px;
  border: 1px solid var(--brand-border);
  background: rgba(37,99,235,0.07);
  color: var(--brand-light);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.ai-cta-example:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ── Tips ──────────────────────────────────────────── */
.ai-tips-list {
  margin: 0;
  padding: 0 0 0 20px;
}
.ai-tips-list li {
  font-size: 0.8rem;
  color: var(--text-2);
  padding: 4px 0;
  line-height: 1.6;
}
.ai-tips-list li::marker {
  color: var(--brand);
  font-weight: 600;
}

/* ── Meta ──────────────────────────────────────────── */
.ai-meta {
  font-size: 0.68rem;
  color: var(--text-hint);
  padding: 10px 0 0;
  text-align: right;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 600px) {
  .ai-tone-selector { flex-direction: column; align-items: stretch; }
  .btn-ai-rewrite { width: 100%; justify-content: center; }
  .ai-cta-grid { flex-direction: column; }
}

/* ══════════════════════════════════════════════════════
   PRE-SEND AUDIT CHECKLIST
   ══════════════════════════════════════════════════════ */

/* ── Banner (top of results) ──────────────────────── */
.audit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background: var(--surface-1);
  margin-bottom: 16px;
}
.audit-banner__left {
  display: flex;
  align-items: center;
  gap: 14px;
}
.audit-banner__icon {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}
.audit-banner__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.audit-banner__label {
  font-size: 1rem;
  font-weight: 700;
}
.audit-banner__summary {
  font-size: 0.78rem;
  color: var(--text-2);
}
.audit-banner__right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.audit-banner__pct {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
}
.audit-banner__counts {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.audit-count {
  font-size: 0.68rem;
  font-weight: 600;
}
.audit-count--pass { color: var(--color-green); }
.audit-count--warn { color: var(--color-yellow); }
.audit-count--fail { color: var(--color-red); }

/* ── Category sections ────────────────────────────── */
.audit-category {
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}
.audit-category--pass {
  border-color: rgba(5,150,105,0.2);
}
.audit-category__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-1);
}
.audit-category__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--text-hint);
}
.audit-category__icon svg {
  width: 18px;
  height: 18px;
}
.audit-category__name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-1);
  flex: 1;
}
.audit-category__score {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-hint);
}

/* ── Individual checks ────────────────────────────── */
.audit-checks {
  padding: 4px 0;
}
.audit-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-1);
}
.audit-check:last-child { border-bottom: none; }

.audit-check__icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  flex-shrink: 0;
}
.audit-check__icon--pass { background: rgba(5,150,105,0.12);  color: var(--color-green); }
.audit-check__icon--warn { background: rgba(217,119,6,0.12);  color: var(--color-yellow); }
.audit-check__icon--fail { background: rgba(220,38,38,0.12);  color: var(--color-red); }
.audit-check__icon--info { background: rgba(59,130,246,0.12); color: var(--color-blue); }

.audit-check__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-1);
  min-width: 100px;
  flex-shrink: 0;
}
.audit-check__detail {
  font-size: 0.75rem;
  color: var(--text-2);
  flex: 1;
}

/* Pass rows are subtler */
.audit-check--pass .audit-check__label { color: var(--text-2); }
.audit-check--pass .audit-check__detail { color: var(--text-hint); }

/* Fail rows stand out */
.audit-check--fail {
  background: rgba(220,38,38,0.03);
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 600px) {
  .audit-banner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  .audit-banner__left { flex-direction: column; }
  .audit-banner__right { flex-direction: column; align-items: center; }
  .audit-check {
    flex-wrap: wrap;
  }
  .audit-check__label { min-width: unset; }
}

/* ══════════════════════════════════════════════════════
   UX POLISH — Analysis Progress, Results Nav, Collapse
   ══════════════════════════════════════════════════════ */

/* ── Analysis Progress Overlay ──────────────────────── */
.analysis-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
}

.ap-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.ap-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid rgba(37,99,235,0.12);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.ap-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-1);
}

.ap-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 240px;
}

.ap-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--text-3);
  padding: 6px 12px;
  border-radius: var(--r-2);
  transition: all 0.3s var(--ease);
}

.ap-step.active {
  color: var(--brand);
  font-weight: 600;
}

.ap-step.done {
  color: var(--green);
}

.ap-step__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-5);
  flex-shrink: 0;
  transition: all 0.3s var(--ease);
}

.ap-step.active .ap-step__dot {
  background: var(--brand);
  box-shadow: 0 0 8px rgba(37,99,235,0.35);
  animation: pulse 1.2s ease-in-out infinite;
}

.ap-step.done .ap-step__dot {
  background: var(--green);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* ── Results Navigation Bar ─────────────────────────── */
.results-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin: 0 -28px 16px;
  padding-left: 28px;
  padding-right: 28px;
  background: rgba(248,250,252,0.92);
  border-bottom: 1px solid var(--border-1);
}

.results-nav__inner {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.results-nav__inner::-webkit-scrollbar { display: none; }

.rnav-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-3);
  border-radius: var(--r-full);
  white-space: nowrap;
  transition: all 0.15s var(--ease);
  cursor: pointer;
  text-decoration: none;
}

.rnav-link:hover {
  color: var(--text-1);
  background: var(--bg-4);
}

.rnav-link.active {
  color: var(--brand-dark);
  background: var(--brand-muted);
  font-weight: 600;
  border: 1px solid var(--brand-border);
}

.rnav-link.rnav-hidden { display: none; }

.results-nav__export {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-muted);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-full);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s var(--ease);
  flex-shrink: 0;
}

.results-nav__export svg { width: 13px; height: 13px; }

.results-nav__export:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

/* ── Module Collapse ────────────────────────────────── */
.module-header.collapsible {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  transition: background 0.15s var(--ease);
}

.module-header.collapsible:hover {
  background: var(--bg-2);
}

.module-collapse-icon {
  font-size: 0.6rem;
  color: var(--text-3);
  transition: transform 0.25s var(--ease);
  flex-shrink: 0;
}

.module-block.collapsed .module-collapse-icon {
  transform: rotate(-90deg);
}

.module-block.collapsed .module-body,
.module-block.collapsed .category-list,
.module-block.collapsed .accordion-section,
.module-block.collapsed .strengths-weaknesses-row,
.module-block.collapsed .readability-overview,
.module-block.collapsed .readability-stats,
.module-block.collapsed .readability-issues,
.module-block.collapsed .ai-controls,
.module-block.collapsed #aiRewriteContent,
.module-block.collapsed #aiRewriteError,
.module-block.collapsed #linkImageOverview,
.module-block.collapsed #linkImageIssues,
.module-block.collapsed #bimiOverview,
.module-block.collapsed #bimiDetails,
.module-block.collapsed #bimiIssues,
.module-block.collapsed .sender-rep-overview,
.module-block.collapsed .sender-rep-auth,
.module-block.collapsed .sender-rep-blocklists,
.module-block.collapsed .dns-suggestions,
.module-block.collapsed #auditChecklist,
.module-block.collapsed .bench-grid,
.module-block.collapsed .ip-body {
  display: none !important;
}

.module-block.collapsed .module-header {
  border-bottom: none;
}

/* ══════════════════════════════════════════════════════
   INDUSTRY BENCHMARKS
   ══════════════════════════════════════════════════════ */

/* Inline benchmark indicator on score cards */
.score-card__bench {
  margin-top: 8px;
  min-height: 20px;
}
.bench-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface-2);
}
.bench-inline__arrow {
  font-weight: 700;
  font-size: 0.85rem;
}
.bench-inline__text {
  flex: 1;
  color: var(--text-secondary);
}
.bench-inline__pct {
  font-weight: 600;
  white-space: nowrap;
}
.bench-inline.bench-good .bench-inline__arrow,
.bench-inline.bench-good .bench-inline__pct { color: var(--color-green); }
.bench-inline.bench-bad .bench-inline__arrow,
.bench-inline.bench-bad .bench-inline__pct { color: var(--color-red); }
.bench-inline.bench-neutral .bench-inline__arrow,
.bench-inline.bench-neutral .bench-inline__pct { color: var(--color-blue); }

/* Full benchmark module */
.bench-grid {
  padding: 16px 20px 20px;
}
.bench-header {
  margin-bottom: 14px;
}
.bench-header__industry {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.bench-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.bench-card {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
}
.bench-card--good {
  border-color: var(--color-green);
  border-style: dashed;
}
.bench-card--warn {
  border-color: var(--color-yellow);
  border-style: dashed;
}
.bench-card__title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}
.bench-card__values {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.bench-card__yours {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.bench-card__vs {
  font-size: 0.78rem;
  color: var(--text-hint);
}
.bench-card__bar-wrap {
  height: 6px;
  background: var(--surface-3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.bench-card__bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}
.bench-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bench-card__pct {
  font-size: 0.78rem;
  font-weight: 600;
}
.bench-card__diff {
  font-size: 0.75rem;
  color: var(--text-hint);
}
.bench-card__range {
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.bench-card--good .bench-card__range { color: var(--color-green); }
.bench-card--warn .bench-card__range { color: var(--color-yellow); }

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

/* ══════════════════════════════════════════════════════
   INBOX CLIENT PREVIEWS
   ══════════════════════════════════════════════════════ */
.ip-body {
  padding: 16px 20px 20px;
}
.ip-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}
.ip-tab {
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.ip-tab.active {
  background: var(--text-primary);
  color: var(--surface-1);
  border-color: var(--text-primary);
}
.ip-note {
  font-size: 0.72rem;
  color: var(--text-hint);
  margin-top: 12px;
  text-align: center;
}

/* Shared client styles */
.ip-client {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Gmail ── */
.ip-gmail__toolbar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #e0e0e0;
  background: #f6f8fc;
}
.ip-gmail__tab {
  padding: 10px 20px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #5f6368;
  cursor: default;
}
.ip-gmail__tab--active {
  color: #1a73e8;
  border-bottom: 3px solid #1a73e8;
  font-weight: 600;
}
.ip-gmail__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid #f1f3f4;
  background: #fff;
  min-height: 40px;
}
.ip-gmail__row--unread {
  background: #f2f6fc;
}
.ip-gmail__row--read {
  opacity: 0.6;
}
.ip-gmail__check, .ip-gmail__star {
  color: #c4c7cc;
  font-size: 1rem;
  flex-shrink: 0;
}
.ip-gmail__sender {
  font-size: 0.82rem;
  font-weight: 700;
  color: #202124;
  min-width: 120px;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}
.ip-gmail__row--read .ip-gmail__sender {
  font-weight: 400;
}
.ip-gmail__content {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  color: #202124;
}
.ip-gmail__subject {
  font-weight: 700;
}
.ip-gmail__row--read .ip-gmail__subject {
  font-weight: 400;
}
.ip-gmail__preheader {
  color: #5f6368;
  font-weight: 400;
}
.ip-gmail__time {
  font-size: 0.72rem;
  color: #5f6368;
  flex-shrink: 0;
  white-space: nowrap;
}
.ip-gmail__row--unread .ip-gmail__time {
  font-weight: 700;
  color: #202124;
}

/* ── Outlook ── */
.ip-outlook__toolbar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #edebe9;
  background: #f3f2f1;
}
.ip-outlook__tab {
  padding: 10px 20px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #605e5c;
  cursor: default;
}
.ip-outlook__tab--active {
  color: #0078d4;
  border-bottom: 3px solid #0078d4;
  font-weight: 600;
}
.ip-outlook__row {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #edebe9;
  background: #fff;
  align-items: flex-start;
}
.ip-outlook__row--unread {
  border-left: 3px solid #0078d4;
}
.ip-outlook__row--read {
  opacity: 0.6;
}
.ip-outlook__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0078d4;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 600;
  flex-shrink: 0;
}
.ip-outlook__row--read .ip-outlook__avatar {
  background: #a19f9d;
}
.ip-outlook__body {
  flex: 1;
  overflow: hidden;
}
.ip-outlook__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.ip-outlook__sender {
  font-size: 0.82rem;
  font-weight: 600;
  color: #323130;
}
.ip-outlook__row--read .ip-outlook__sender {
  font-weight: 400;
}
.ip-outlook__time {
  font-size: 0.72rem;
  color: #a19f9d;
}
.ip-outlook__subject {
  font-size: 0.8rem;
  font-weight: 600;
  color: #323130;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ip-outlook__row--read .ip-outlook__subject {
  font-weight: 400;
}
.ip-outlook__preheader {
  font-size: 0.75rem;
  color: #a19f9d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

/* ── Apple Mail ── */
.ip-apple__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: #f9f9f9;
  border-bottom: 1px solid #d1d1d6;
}
.ip-apple__count {
  font-size: 0.78rem;
  font-weight: 600;
  color: #007aff;
}
.ip-apple__filter {
  font-size: 0.78rem;
  color: #007aff;
}
.ip-apple__row {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e5ea;
  background: #fff;
  align-items: flex-start;
}
.ip-apple__row--read {
  opacity: 0.6;
}
.ip-apple__blue-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #007aff;
  margin-top: 5px;
  flex-shrink: 0;
}
.ip-apple__body {
  flex: 1;
  overflow: hidden;
}
.ip-apple__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.ip-apple__sender {
  font-size: 0.85rem;
  font-weight: 700;
  color: #000;
}
.ip-apple__row--read .ip-apple__sender {
  font-weight: 400;
}
.ip-apple__date {
  font-size: 0.72rem;
  color: #8e8e93;
}
.ip-apple__subject {
  font-size: 0.8rem;
  font-weight: 600;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ip-apple__row--read .ip-apple__subject {
  font-weight: 400;
}
.ip-apple__preheader {
  font-size: 0.75rem;
  color: #8e8e93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* ── Mobile ── */
.ip-mobile {
  max-width: 375px;
  margin: 0 auto;
  border-radius: 20px;
  background: #000;
  padding: 0;
  overflow: hidden;
}
.ip-mobile__status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  background: #000;
}
.ip-mobile__notch {
  width: 80px;
  height: 18px;
  background: #1c1c1e;
  border-radius: 0 0 12px 12px;
}
.ip-mobile__icons {
  display: flex;
  gap: 4px;
  color: #fff;
}
.ip-mobile__icons svg {
  width: 14px;
  height: 14px;
}
.ip-mobile__header {
  padding: 4px 20px 10px;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  background: #000;
}
.ip-mobile__row {
  padding: 12px 20px;
  border-bottom: 1px solid #38383a;
  background: #1c1c1e;
}
.ip-mobile__row--read {
  opacity: 0.6;
}
.ip-mobile__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.ip-mobile__sender {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}
.ip-mobile__row--read .ip-mobile__sender {
  font-weight: 400;
}
.ip-mobile__time {
  font-size: 0.72rem;
  color: #8e8e93;
}
.ip-mobile__subject {
  font-size: 0.8rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ip-mobile__preheader {
  font-size: 0.75rem;
  color: #8e8e93;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

@media (max-width: 600px) {
  .ip-tabs {
    flex-wrap: wrap;
  }
  .ip-gmail__sender {
    min-width: 80px;
    max-width: 100px;
  }
}

/* ══════════════════════════════════════════════════════
   EMAIL RENDERING PREVIEW
   ══════════════════════════════════════════════════════ */

.ep-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-2);
}

.ep-viewport-tabs, .ep-client-tabs {
  display: flex;
  gap: 2px;
  background: var(--bg-4);
  border-radius: var(--r-2);
  padding: 2px;
}

.ep-viewport-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-3);
  background: none;
  border: none;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}

.ep-viewport-btn svg { width: 14px; height: 14px; }

.ep-viewport-btn.active {
  background: #fff;
  color: var(--text-1);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.ep-client-btn {
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-3);
  background: none;
  border: none;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}

.ep-client-btn.active {
  background: #fff;
  color: var(--text-1);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.ep-frame-wrap {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: var(--bg-2);
  min-height: 300px;
}

.ep-frame-chrome {
  background: #fff;
  border: 1px solid var(--border-2);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  transition: width 0.4s var(--ease);
  width: 100%;
  max-width: 640px;
}

.ep-frame-chrome--mobile {
  max-width: 375px;
}

.ep-chrome-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-1);
}

.ep-chrome-dots {
  display: flex;
  gap: 5px;
}

.ep-chrome-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-5);
}

.ep-chrome-title {
  font-size: 0.7rem;
  color: var(--text-3);
  font-weight: 500;
}

.ep-iframe {
  width: 100%;
  min-height: 400px;
  border: none;
  display: block;
  background: #fff;
}

.ep-iframe--dark {
  filter: none;
}

/* Dark mode simulation wrapper */
.ep-dark-wrapper {
  background: #1a1a1a;
  color: #e0e0e0;
}

/* ══════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ══════════════════════════════════════════════════════ */

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

  .panel--form {
    position: relative;
    top: auto;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-1);
  }

  .panel--results {
    min-height: auto;
    padding: 16px 16px 40px;
  }

  .results-nav {
    margin: 0 -16px 12px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .score-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .strengths-weaknesses-row {
    grid-template-columns: 1fr;
  }

  .sw-box--strength {
    border-right: none;
    border-bottom: 1px solid var(--border-1);
  }

  .category-item {
    grid-template-columns: 100px 1fr 40px;
    gap: 8px;
  }
}

@media (max-width: 600px) {
  html { font-size: 14px; }

  .tool-hero { padding: 48px 16px 36px; }
  .tool-hero__h1 { font-size: 1.8rem; }
  .tool-hero__features { gap: 6px; }
  .feature-chip { padding: 5px 10px; font-size: 0.72rem; }

  .panel--form { padding: 16px 16px 32px; }

  .results-nav__inner { gap: 1px; }
  .rnav-link { padding: 4px 8px; font-size: 0.68rem; }
  .results-nav__export span { display: none; }

  .meta-bar { gap: 4px; }
  .meta-chip { padding: 3px 8px; font-size: 0.68rem; }

  .ep-toolbar { flex-direction: column; gap: 8px; }
  .ep-frame-chrome { max-width: 100%; }
}

/* ══════════════════════════════════════════════════════
   SUBJECT LINE A/B SCORER
   ══════════════════════════════════════════════════════ */

.subject-page { min-height: 100vh; display: flex; flex-direction: column; }

.ss-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

/* ── Input Panel ─────────────────────────────────────── */
.ss-panel-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 6px;
}

.ss-panel-desc {
  font-size: 0.85rem;
  color: var(--text-2);
  margin-bottom: 20px;
}

.ss-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.ss-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-3);
  padding: 4px 14px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.ss-input-row:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}

.ss-input-row--new {
  animation: fadeSlideUp 0.3s var(--ease) both;
}

.ss-input-label {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--brand);
  min-width: 20px;
  text-align: center;
}

.ss-input {
  flex: 1;
  border: none;
  background: none;
  padding: 10px 0;
  font-size: 0.88rem;
  color: var(--text-1);
  outline: none;
}

.ss-input::placeholder { color: var(--text-4); }

.ss-char-count {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-3);
  min-width: 20px;
  text-align: right;
}

.ss-remove-btn {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--r-1);
  transition: color 0.15s, background 0.15s;
}

.ss-remove-btn:hover { color: var(--red); background: var(--red-muted); }

/* ── Actions ─────────────────────────────────────────── */
.ss-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.ss-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-muted);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all 0.15s var(--ease);
}

.ss-add-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.ss-add-hint { font-size: 0.72rem; color: var(--text-3); }

.ss-options {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.ss-option { display: flex; flex-direction: column; gap: 4px; }

.ss-option-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-2);
}

.ss-option-select {
  background: #fff;
  border: 1.5px solid var(--border-2);
  border-radius: var(--r-2);
  padding: 6px 28px 6px 10px;
  font-size: 0.82rem;
  color: var(--text-1);
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.ss-option-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}

@keyframes ss-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

.ss-shake { animation: ss-shake 0.4s ease; }

/* ── Winner Banner ───────────────────────────────────── */
.ss-winner-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(5,150,105,0.08) 0%, rgba(37,99,235,0.07) 100%);
  border: 1px solid rgba(5,150,105,0.2);
  border-radius: var(--r-4);
  margin-bottom: 24px;
}

.ss-winner-crown {
  color: var(--green);
  flex-shrink: 0;
}

.ss-winner-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ss-winner-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
}

.ss-winner-subject {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-1);
}

.ss-winner-copy {
  padding: 6px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--green);
  background: rgba(5,150,105,0.08);
  border: 1px solid rgba(5,150,105,0.2);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}

.ss-winner-copy:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* ── Result Cards ────────────────────────────────────── */
.ss-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ss-card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-4);
  padding: 20px 24px;
  box-shadow: var(--shadow-1);
  animation: fadeSlideUp 0.4s var(--ease) both;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ss-card:hover {
  border-color: rgba(37,99,235,0.12);
  box-shadow: var(--shadow-2);
}

.ss-card--winner {
  border-color: rgba(5,150,105,0.25);
  box-shadow: 0 4px 20px rgba(5,150,105,0.08);
}

.ss-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ss-card__rank {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ss-card__letter {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--brand);
  width: 32px;
  height: 32px;
  background: var(--brand-muted);
  border-radius: var(--r-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-card__badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: var(--r-full);
}

.ss-card__badge--green  { background: var(--green-muted);  color: var(--green); }
.ss-card__badge--blue   { background: var(--blue-muted);   color: var(--blue); }
.ss-card__badge--yellow { background: var(--yellow-muted); color: var(--yellow); }
.ss-card__badge--orange { background: var(--orange-muted); color: var(--orange); }
.ss-card__badge--red    { background: var(--red-muted);    color: var(--red); }

.ss-card__score-ring {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
}

.ss-card__score-ring--green  { background: var(--green-muted);  color: var(--green); }
.ss-card__score-ring--blue   { background: var(--blue-muted);   color: var(--blue); }
.ss-card__score-ring--yellow { background: var(--yellow-muted); color: var(--yellow); }
.ss-card__score-ring--orange { background: var(--orange-muted); color: var(--orange); }
.ss-card__score-ring--red    { background: var(--red-muted);    color: var(--red); }

.ss-card__score-num { font-size: 0.95rem; }

.ss-card__subject {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-1);
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 12px;
  line-height: 1.4;
}

.ss-card__grade {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.ss-grade {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
}

.ss-grade--green  { color: var(--green); }
.ss-grade--blue   { color: var(--blue); }
.ss-grade--yellow { color: var(--yellow); }
.ss-grade--orange { color: var(--orange); }
.ss-grade--red    { color: var(--red); }

.ss-card__total {
  font-size: 0.75rem;
  color: var(--text-3);
}

/* ── Dimension Bars ──────────────────────────────────── */
.ss-dims {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.ss-dim__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.ss-dim__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-2);
}

.ss-dim__score {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-3);
}

.ss-dim__bar-track {
  height: 5px;
  background: var(--bg-4);
  border-radius: var(--r-full);
  overflow: hidden;
}

.ss-dim__bar-fill {
  height: 100%;
  border-radius: var(--r-full);
  transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1);
}

.ss-dim__detail {
  font-size: 0.7rem;
  color: var(--text-3);
  margin-top: 2px;
}

/* ── Tips ─────────────────────────────────────────────── */
.ss-tips {
  background: rgba(217,119,6,0.04);
  border: 1px solid rgba(217,119,6,0.12);
  border-radius: var(--r-2);
  padding: 12px 14px;
  margin-bottom: 12px;
}

.ss-tips__title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yellow);
  display: block;
  margin-bottom: 6px;
}

.ss-tip {
  font-size: 0.78rem;
  color: var(--text-2);
  padding: 3px 0;
  padding-left: 14px;
  position: relative;
  line-height: 1.4;
}

.ss-tip::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--yellow);
}

/* ── Card Actions ────────────────────────────────────── */
.ss-card__actions {
  display: flex;
  gap: 8px;
}

.ss-copy-btn {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-muted);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-full);
  padding: 5px 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.ss-copy-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ── Use Winner Link ─────────────────────────────────── */
.ss-use-winner {
  text-align: center;
  margin-top: 24px;
}

.ss-use-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
  border-radius: var(--r-3);
  text-decoration: none;
  transition: all 0.2s var(--ease);
  box-shadow: 0 4px 16px rgba(37,99,235,0.20);
}

.ss-use-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,99,235,0.30);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 600px) {
  .ss-container { padding: 24px 16px 60px; }
  .ss-winner-banner { flex-direction: column; text-align: center; gap: 10px; }
  .ss-card { padding: 16px; }
  .ss-card__header { flex-wrap: wrap; gap: 8px; }
}

/* ══════════════════════════════════════════════════════
   DASHBOARD — Sidebar Layout
   ══════════════════════════════════════════════════════ */

.dashboard-page { min-height: 100vh; display: flex; flex-direction: column; background: #fff; }

/* ── Dashboard light theme overrides ── */
.dashboard-page .ob-card { background: #fff; border-color: var(--border-1); }
.dashboard-page .ob-card__title { color: var(--text-1); }
.dashboard-page .ob-card__dismiss { color: var(--text-4); }
.dashboard-page .ob-card__dismiss:hover { color: var(--text-2); }
.dashboard-page .ob-card__bar { background: var(--bg-4); }
.dashboard-page .ob-step { background: var(--bg-2); border-color: var(--border-1); }
.dashboard-page .ob-step--pending { border-color: var(--border-1); }
.dashboard-page .ob-step--pending:hover { background: rgba(37,99,235,0.04); border-color: var(--brand); }
.dashboard-page .ob-step__icon { background: var(--bg-4); color: var(--text-3); }
.dashboard-page .ob-step--done .ob-step__icon { background: rgba(21,193,130,0.1); color: #059669; }
.dashboard-page .ob-step--pending .ob-step__icon { color: var(--text-3); }
.dashboard-page .ob-step__body strong { color: var(--text-1); }
.dashboard-page .ob-step--done .ob-step__body strong { color: var(--text-4); }
.dashboard-page .ob-step__body p { color: var(--text-3); }
.dashboard-page .fu-hint { background: #fff; border-color: var(--border-1); box-shadow: var(--shadow-2); }
.dashboard-page .fu-hint p { color: var(--text-2); }
.dashboard-page .fu-hint__close { color: var(--text-3); border-color: var(--border-1); }
.dashboard-page .db-trend-summary { color: var(--text-3); }
.dashboard-page .db-trend-summary strong { color: var(--text-1); }
.dashboard-page .dash-trend-btn { background: var(--bg-2); border-color: var(--border-1); color: var(--text-3); }
.dashboard-page .dash-trend-btn:hover { background: var(--bg-4); color: var(--text-1); }
.dashboard-page .dash-trend-btn--active { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.3); color: #059669; }
.dashboard-page .db-chart__tooltip { background: #fff; border-color: var(--border-1); color: var(--text-1); box-shadow: var(--shadow-2); }
.dashboard-page .dash-domain-health-empty { color: var(--text-3); }
.dashboard-page .dash-domain-health-empty a { color: var(--brand); }
.dashboard-page .onboard-step__body h3 { color: var(--text-1); }
.dashboard-page .onboard-step__body p { color: var(--text-3); }
.dashboard-page .onboard-step { background: var(--bg-2); border-color: var(--border-1); }
.dashboard-page .onboard-step--active { background: rgba(37,99,235,0.04); border-color: var(--brand); }
.dashboard-page .onboard-step__num { background: var(--bg-4); color: var(--text-3); }
.dashboard-page .onboard-step--active .onboard-step__num { background: var(--brand); color: #fff; }

.dash {
  display: flex;
  flex: 1;
  min-height: calc(100vh - 60px);
}

/* ── Sidebar ─────────────────────────────────────────── */
.dash-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: var(--navy);
  border-right: none;
  padding: 20px 0;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto;
  z-index: 10;
}

.dash-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }

.dash-nav__heading {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.4);
  padding: 14px 12px 4px;
}

.dash-nav__heading:first-child { padding-top: 0; }
.dash-nav__heading--toggle {
  cursor: pointer; display: flex; align-items: center;
  user-select: none; transition: color 0.15s;
}
.dash-nav__heading--toggle:hover { color: rgba(255,255,255,0.7); }
.dash-nav__heading--toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.dash-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  text-decoration: none;
  border-radius: var(--r-2);
  transition: all 0.15s;
  border-left: 2px solid transparent;
  cursor: pointer;
}

.dash-nav__item:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.dash-nav__item--active {
  background: rgba(37,99,235,0.2);
  color: #fff;
  font-weight: 600;
  border-left-color: var(--brand);
}

.dash-nav__item svg { flex-shrink: 0; opacity: 0.6; stroke: currentColor; }
.dash-nav__item--active svg { opacity: 1; }

/* ── Main Area ───────────────────────────────────────── */
.dash-main {
  flex: 1;
  padding: 28px 32px 60px;
  max-width: 900px;
  min-width: 0;
  background: #fff;
  color: var(--text-1);
}

/* ── Tool iframe ──────────────────────────────────────── */
.dash-main:has(.dash-tool-frame) {
  padding: 0;
  max-width: none;
}
.dash-tool-frame {
  width: 100%;
  height: calc(100vh - 60px);
  border: none;
  display: block;
}

.dash-loading, .dash-loading-sm {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
.dash-loading-sm { padding: 20px 0; }

.dash-view__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 20px;
}

.dash-view__sub {
  font-size: 0.84rem;
  color: var(--text-2);
  margin: -12px 0 20px;
}

/* ── Cards ────────────────────────────────────────────── */
.dash-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.dash-card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-1);
}

.dash-card--wide { margin-bottom: 0; }

.dash-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dash-card__title {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 12px;
}

.dash-card__header .dash-card__title { margin-bottom: 0; }

/* ── Credits Bar ──────────────────────────────────────── */
.dash-credits {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: 14px 18px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-1);
}
.dash-credits__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.dash-credits__tier {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-muted);
  padding: 2px 10px;
  border-radius: var(--r-full);
}
.dash-credits__count {
  font-size: 0.78rem;
  color: var(--text-2);
  flex: 1;
}
.dash-credits__upgrade {
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--brand);
  padding: 4px 14px;
  border-radius: var(--r-full);
  text-decoration: none;
  transition: background 0.15s;
}
.dash-credits__upgrade:hover { background: var(--brand-dark); }
.dash-credits__bar-bg {
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
}
.dash-credits__bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s var(--ease);
  min-width: 2px;
}

/* ── Quick Actions ───────────────────────────────────── */
.dash-actions { margin-bottom: 20px; }
.dash-actions__title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 12px;
}
.dash-actions__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.dash-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 10px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}
.dash-action-card:hover {
  border-color: var(--brand-border);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
}
.dash-action-card svg { color: var(--brand); flex-shrink: 0; }
.dash-action-card strong {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.2;
}
.dash-action-card span {
  font-size: 0.68rem;
  color: var(--text-3);
  line-height: 1.35;
}

@media (max-width: 900px) {
  .dash-actions__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .dash-actions__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dash-action-card { padding: 12px 8px; }
  .dash-action-card span { display: none; }
}

/* ── New 3-step start card (replaces old 8-tile quick actions) ── */
.dash-start {
  background: linear-gradient(135deg, #f0f9ff 0%, #fff 100%);
  border: 1px solid #bae6fd;
  border-radius: 14px;
  padding: 24px 26px;
  margin-bottom: 24px;
}
.dash-start__header { margin-bottom: 18px; }
.dash-start__eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #0284c7;
  margin-bottom: 6px;
}
.dash-start__title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-1);
  margin: 0 0 4px;
}
.dash-start__sub { font-size: 0.86rem; color: var(--text-2); margin: 0; }
.dash-start__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.dash-start-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-1, #e2e8f0);
  border-radius: 12px;
  padding: 20px 20px 18px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.15s;
}
.dash-start-step:hover {
  border-color: var(--brand, #2563eb);
  box-shadow: 0 4px 14px rgba(37,99,235,0.08);
  transform: translateY(-2px);
}
.dash-start-step--primary {
  border-color: var(--brand, #2563eb);
  border-width: 2px;
  background: linear-gradient(180deg, #f0f9ff 0%, #fff 40%);
}
.dash-start-step--primary::before {
  content: "Start here";
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--brand, #2563eb);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 99px;
}
.dash-start-step__num {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 1.6rem;
  font-weight: 900;
  color: rgba(37,99,235,0.15);
  line-height: 1;
}
.dash-start-step__icon { color: var(--brand, #2563eb); margin-bottom: 4px; }
.dash-start-step__title {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1.3;
}
.dash-start-step__desc {
  font-size: 0.78rem;
  color: var(--text-2);
  line-height: 1.5;
  flex: 1;
}
.dash-start-step__cta {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand, #2563eb);
  margin-top: 4px;
}
@media (max-width: 860px) {
  .dash-start__grid { grid-template-columns: 1fr; }
}

/* ── Assistant Teaser (free users) ─────────────────── */
.dash-assistant-teaser {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(124,58,237,0.06) 0%, rgba(37,99,235,0.06) 100%);
  border: 1px solid rgba(124,58,237,0.18);
  border-radius: var(--r-3);
}
.dash-assistant-teaser__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-assistant-teaser__icon svg { stroke: #fff; }
.dash-assistant-teaser__content { flex: 1; }
.dash-assistant-teaser__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--text-1);
}
.dash-assistant-teaser__text {
  font-size: 0.82rem;
  color: var(--text-2);
  margin: 0 0 12px;
  line-height: 1.6;
}
.dash-assistant-teaser__cta {
  display: inline-block;
  padding: 8px 20px;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: var(--r-full);
  text-decoration: none;
  transition: filter 0.15s, transform 0.1s;
}
.dash-assistant-teaser__cta:hover { filter: brightness(1.15); transform: translateY(-1px); }
@media (max-width: 600px) {
  .dash-assistant-teaser { flex-direction: column; text-align: center; padding: 20px; }
  .dash-assistant-teaser__icon { width: 48px; height: 48px; }
}

.dash-empty-hint {
  font-size: 0.82rem;
  color: var(--text-3);
  text-align: center;
  padding: 16px;
}
.dash-empty-hint a { color: var(--brand); text-decoration: underline; }

/* ── Tool link ────────────────────────────────────────── */
.dash-tool-link {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--brand);
  margin-top: 8px;
  text-decoration: none;
}
.dash-tool-link:hover { text-decoration: underline; }

/* ── Breakdown bars ──────────────────────────────────── */
.dash-breakdown { display: flex; flex-direction: column; gap: 8px; }
.dash-breakdown__row { display: flex; align-items: center; gap: 10px; }
.dash-breakdown__label { font-size: 0.72rem; color: var(--text-2); width: 100px; flex-shrink: 0; text-align: right; }
.dash-breakdown__bar-bg { flex: 1; height: 8px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.dash-breakdown__bar { height: 100%; border-radius: 4px; transition: width 0.6s var(--ease); min-width: 4px; }
.dash-breakdown__count { font-size: 0.72rem; font-weight: 700; color: var(--text-1); width: 28px; }

/* ── Grade badges ────────────────────────────────────── */
.dash-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-2);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 800;
}
.dash-grade--green  { background: var(--green-muted);  color: var(--green); }
.dash-grade--blue   { background: var(--blue-muted);   color: var(--blue); }
.dash-grade--yellow { background: var(--yellow-muted); color: var(--yellow); }
.dash-grade--red    { background: var(--red-muted);    color: var(--red); }
.dash-grade--default { background: var(--bg-3); color: var(--text-3); }

/* ── Detail view ─────────────────────────────────────── */
.dash-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--brand);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
}
.dash-back-btn:hover { text-decoration: underline; }

.dash-detail-header { margin-bottom: 20px; }
.dash-detail-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.dash-detail-tool {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-muted);
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.dash-detail-grade {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.dash-detail-grade.dash-grade--green  { background: var(--green-muted);  color: var(--green); }
.dash-detail-grade.dash-grade--blue   { background: var(--blue-muted);   color: var(--blue); }
.dash-detail-grade.dash-grade--yellow { background: var(--yellow-muted); color: var(--yellow); }
.dash-detail-grade.dash-grade--red    { background: var(--red-muted);    color: var(--red); }
.dash-detail-score { font-size: 0.78rem; color: var(--text-2); }
.dash-detail-date  { font-size: 0.72rem; color: var(--text-3); }
.dash-detail-text  { font-size: 0.84rem; color: var(--text-2); line-height: 1.6; }

/* ── Auth table ──────────────────────────────────────── */
.dash-auth-table { display: flex; flex-direction: column; gap: 6px; }
.dash-auth-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-2);
  border-radius: var(--r-2);
  font-size: 0.8rem;
}
.dash-auth-name { font-weight: 700; color: var(--text-1); min-width: 60px; }
.dash-auth-status {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.dash-auth-status--green  { background: var(--green-muted);  color: var(--green); }
.dash-auth-status--yellow { background: var(--yellow-muted); color: var(--yellow); }
.dash-auth-status--red    { background: var(--red-muted);    color: var(--red); }
.dash-auth-detail { font-size: 0.72rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Placement detail ────────────────────────────────── */
.dash-detail-placement {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.84rem;
  color: var(--text-2);
}
.dash-detail-placement__badge {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 4px 14px;
  border-radius: var(--r-2);
}
.dash-placement--inbox     { background: var(--green-muted); color: var(--green); }
.dash-placement--spam      { background: var(--red-muted);   color: var(--red); }
.dash-placement--trash     { background: var(--red-muted);   color: var(--red); }
.dash-placement--not_found { background: var(--yellow-muted); color: var(--yellow); }
.dash-placement--unknown   { background: var(--bg-3); color: var(--text-3); }

.dash-placement-grid {
  display: flex;
  gap: 24px;
}
.dash-placement-stat { text-align: center; }
.dash-placement-stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.dash-placement-stat--green  { color: var(--green); }
.dash-placement-stat--red    { color: var(--red); }
.dash-placement-stat--yellow { color: var(--yellow); }
.dash-placement-stat__label {
  font-size: 0.72rem;
  color: var(--text-3);
  margin-top: 4px;
  display: block;
}

/* ── Subject detail ──────────────────────────────────── */
.dash-subject-list { display: flex; flex-direction: column; gap: 6px; }
.dash-subject-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-2);
  border-radius: var(--r-2);
}
.dash-subject-rank { font-size: 0.72rem; font-weight: 700; color: var(--text-3); min-width: 28px; }
.dash-subject-text { flex: 1; font-size: 0.82rem; color: var(--text-1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-subject-score { font-family: var(--font-display); font-size: 0.88rem; font-weight: 800; color: var(--text-1); }
.dash-subject-grade { width: 28px; }

/* ── Monitor list (blacklist, warmup) ────────────────── */
.dash-monitor-list { display: flex; flex-direction: column; gap: 6px; }
.dash-monitor-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
}
.dash-monitor-item__info { flex: 1; min-width: 0; }
.dash-monitor-item__info strong { display: block; font-size: 0.85rem; color: var(--text-1); }
.dash-monitor-item__info span { font-size: 0.72rem; color: var(--text-3); }
.dash-monitor-item__status {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.dash-monitor-item--green  { background: var(--green-muted);  color: var(--green); }
.dash-monitor-item--yellow { background: var(--yellow-muted); color: var(--yellow); }
.dash-monitor-item--red    { background: var(--red-muted);    color: var(--red); }
.dash-monitor-item--default { background: var(--bg-3); color: var(--text-3); }
.dash-monitor-item__date { font-size: 0.72rem; color: var(--text-3); }

/* ── Raw JSON ────────────────────────────────────────── */
.dash-accordion-trigger {
  background: none;
  border: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand);
  cursor: pointer;
  padding: 0;
}
.dash-accordion-trigger:hover { text-decoration: underline; }
.dash-raw-json {
  margin-top: 12px;
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--r-2);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--text-2);
  max-height: 400px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── Upgrade gate ────────────────────────────────────── */
/* ── Inline upgrade hint (for gated sections) ────────── */
.dash-upgrade-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--brand-muted);
  border: 1px solid var(--brand-border);
  border-radius: var(--r-3);
  font-size: 0.82rem;
  color: var(--text-2);
}
.dash-upgrade-inline svg { color: var(--brand); flex-shrink: 0; }
.dash-upgrade-inline strong { color: var(--brand); }
.dash-upgrade-inline a {
  margin-left: auto;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  white-space: nowrap;
}
.dash-upgrade-inline a:hover { text-decoration: underline; }

.dash-upgrade {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}
.dash-upgrade__icon { color: var(--brand); margin-bottom: 16px; }
.dash-upgrade h2 { font-size: 1.15rem; margin-bottom: 8px; }
.dash-upgrade p { font-size: 0.85rem; color: var(--text-2); margin-bottom: 24px; max-width: 400px; }

/* ── Mobile sidebar toggle ───────────────────────────── */
.dash-sidebar-toggle {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: var(--r-full);
  background: var(--brand);
  color: #fff;
  border: none;
  box-shadow: var(--shadow-3);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ── Recent list item overrides for new layout ───────── */
.db-recent-item {
  cursor: pointer;
}
.db-recent-item__tool {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  min-width: 100px;
  flex-shrink: 0;
}
.db-recent-item__tool-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Stats Row ───────────────────────────────────────── */
.db-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.db-stat-card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  padding: 18px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: var(--shadow-1);
}

.db-stat__num {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--brand-dark);
  line-height: 1;
}

.db-stat__num--small {
  font-size: 1rem;
  text-transform: capitalize;
}

.db-stat__label {
  font-size: 0.72rem;
  color: var(--text-3);
  font-weight: 500;
}

.db-trend {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--r-full);
  margin-left: 4px;
}

.db-trend--good { color: var(--green); background: var(--green-muted); }
.db-trend--bad  { color: var(--red);   background: var(--red-muted); }

/* ── Chart Card ──────────────────────────────────────── */
.db-chart-card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-4);
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-1);
}

.db-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.db-chart-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-1);
}

.db-chart-legend {
  display: flex;
  gap: 16px;
}

.db-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--text-3);
}

.db-legend-item i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

.db-chart {
  position: relative;
  min-height: 160px;
}

.db-chart__bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 150px;
  padding-left: 36px;
}

.db-chart__group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: fadeSlideUp 0.4s var(--ease) both;
}

.db-chart__bar-pair {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  height: 130px;
  width: 100%;
  max-width: 32px;
}

.db-chart__bar {
  flex: 1;
  min-height: 3px;
  border-radius: 2px 2px 0 0;
  transition: height 0.8s cubic-bezier(0.34,1.56,0.64,1);
}

.db-chart__bar--spam { background: var(--brand); opacity: 0.7; }
.db-chart__bar--copy { background: var(--green); opacity: 0.8; }
.db-chart__bar--score { background: var(--brand); opacity: 0.85; }

.db-chart__date {
  font-size: 0.58rem;
  color: var(--text-4);
  white-space: nowrap;
}

.db-chart__yaxis {
  position: absolute;
  left: 0;
  top: 0;
  height: 130px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 0;
}

.db-chart__yaxis span {
  font-size: 0.58rem;
  color: var(--text-4);
  line-height: 1;
}

/* ── Streak ──────────────────────────────────────────── */
.db-streak-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--r-3);
  margin-bottom: 24px;
  animation: fadeSlideUp 0.4s 0.1s var(--ease) both;
}

.db-streak-card--good   { background: rgba(37,99,235,0.07);  border: 1px solid rgba(37,99,235,0.12); }
.db-streak-card--pro    { background: rgba(5,150,105,0.06);   border: 1px solid rgba(5,150,105,0.15); }
.db-streak-card--master { background: rgba(168,85,247,0.06);  border: 1px solid rgba(168,85,247,0.15); }

.db-streak__icon { font-size: 1.5rem; }

.db-streak__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-streak__label {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-1);
}

.db-streak__detail {
  font-size: 0.78rem;
  color: var(--text-2);
}

/* ── Recent List ─────────────────────────────────────── */
.db-recent { margin-top: 0; }

.db-recent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.db-recent-title {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-1);
}

.db-clear-btn {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--red);
  background: var(--red-muted);
  border: 1px solid rgba(220,38,38,0.15);
  border-radius: var(--r-full);
  padding: 4px 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.db-clear-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }

.db-recent-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.db-recent-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  transition: border-color 0.15s, box-shadow 0.15s;
  animation: fadeSlideUp 0.3s var(--ease) both;
}

.db-recent-item:hover {
  border-color: rgba(37,99,235,0.12);
  box-shadow: var(--shadow-1);
}

.db-recent-item__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.db-recent-item__subject {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.db-recent-item__meta {
  font-size: 0.7rem;
  color: var(--text-3);
}

.db-recent-item__scores {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.db-recent-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  min-width: 44px;
}

.db-recent-score small {
  font-size: 0.58rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.db-recent-score--green  { color: var(--green); }
.db-recent-score--blue   { color: var(--blue); }
.db-recent-score--yellow { color: var(--yellow); }
.db-recent-score--red    { color: var(--red); }

.db-verdict {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: var(--r-full);
  white-space: nowrap;
}

.db-verdict--ready        { background: var(--green-muted);  color: var(--green); }
.db-verdict--mostly_ready { background: var(--blue-muted);   color: var(--blue); }
.db-verdict--review       { background: var(--yellow-muted); color: var(--yellow); }
.db-verdict--fix_needed   { background: var(--orange-muted); color: var(--orange); }
.db-verdict--not_ready    { background: var(--red-muted);    color: var(--red); }

.db-recent-item__rerun {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  color: var(--text-3);
  transition: all 0.15s;
  flex-shrink: 0;
}

.db-recent-item__rerun:hover {
  background: var(--brand-muted);
  color: var(--brand);
}

/* ── Dashboard Responsive ────────────────────────────── */
@media (max-width: 900px) {
  .dash-sidebar {
    position: fixed;
    left: -240px;
    top: 60px;
    height: calc(100vh - 60px);
    transition: left 0.25s var(--ease);
    box-shadow: var(--shadow-3);
    z-index: 200;
  }
  .dash-sidebar--open { left: 0; }
  .dash-sidebar-toggle { display: flex; }
  .dash-main { padding: 20px 16px 60px; }
  .dash-row { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .db-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .db-stat__num { font-size: 1.4rem; }
  .db-chart__bars { gap: 2px; }
  .db-recent-item { flex-wrap: wrap; }
  .db-recent-item__tool { min-width: auto; }
  .db-recent-item__scores { width: 100%; justify-content: flex-start; }
}

/* ══════════════════════════════════════════════════════
   SUPPORT / FAQ PAGE
   ══════════════════════════════════════════════════════ */

.support-page { padding: 0 0 80px; }
.support-container { max-width: 760px; margin: 0 auto; padding: 40px 24px; }

.support-header { text-align: center; margin-bottom: 40px; }
.support-header__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text-1);
  margin-bottom: 8px;
}
.support-header__sub {
  font-size: 0.9rem;
  color: var(--text-2);
}

/* ── FAQ ─────────────────────────────────────────────── */
.faq-section { margin-bottom: 32px; }
.faq-section__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-1);
}

.faq-item {
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  margin-bottom: 6px;
  overflow: hidden;
  background: #fff;
}

.faq-item__q {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-1);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
}
.faq-item__q::after {
  content: '+';
  margin-left: auto;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text-3);
  transition: transform 0.2s;
}
.faq-item--open .faq-item__q::after { content: '\2212'; }
.faq-item__q:hover { background: var(--bg-2); }

.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 18px;
}
.faq-item--open .faq-item__a {
  max-height: 300px;
  padding: 0 18px 14px;
}
.faq-item__a p {
  font-size: 0.84rem;
  color: var(--text-2);
  line-height: 1.65;
  margin: 0;
}
.faq-item__a a { color: var(--brand); text-decoration: underline; }

/* ── Agent Cards ─────────────────────────────────────── */
.support-agents {
  margin-top: 48px;
  text-align: center;
}
.support-agents__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 6px;
}
.support-agents__sub {
  font-size: 0.85rem;
  color: var(--text-2);
  margin-bottom: 20px;
}
.support-agents__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
}

.support-agent-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 24px 16px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-4);
  cursor: pointer;
  transition: all 0.2s;
}
.support-agent-card:hover {
  border-color: var(--brand-border);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.support-agent-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--brand-muted);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.support-agent-card__icon--sales {
  background: rgba(5,150,105,0.08);
  color: #059669;
}
.support-agent-card strong {
  font-size: 0.88rem;
  color: var(--text-1);
}
.support-agent-card span {
  font-size: 0.74rem;
  color: var(--text-3);
  line-height: 1.4;
}
.support-agent-card--locked {
  opacity: 0.55;
  cursor: default;
  pointer-events: none;
  position: relative;
}
.support-agent-card--locked .support-agent-card__upgrade {
  pointer-events: auto;
  display: inline-block;
  margin-top: 8px;
  padding: 6px 16px;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  opacity: 1;
}
.support-agent-card--locked .support-agent-card__upgrade:hover {
  filter: brightness(1.15);
}

@media (max-width: 500px) {
  .support-agents__grid { grid-template-columns: 1fr; }
}

/* ── Chat Panel (slide-in from right) ────────────────── */
.sc-panel {
  position: fixed;
  right: -420px;
  top: 0;
  width: 400px;
  height: 100vh;
  background: #fff;
  border-left: 1px solid var(--border-1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.1);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: right 0.3s var(--ease);
}
.sc-panel--open { right: 0; }

.sc-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--brand);
  color: #fff;
  flex-shrink: 0;
}
.sc-panel__header-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sc-panel__agent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}
.sc-panel__agent-name {
  font-size: 0.88rem;
  font-weight: 700;
}
.sc-panel__close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.sc-panel__close:hover { color: #fff; }

.sc-panel__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sc-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.84rem;
  line-height: 1.55;
  animation: fadeSlideUp 0.2s var(--ease) both;
}
.sc-msg code { background: rgba(0,0,0,0.06); padding: 1px 4px; border-radius: 3px; font-size: 0.8em; }

.sc-msg--user {
  align-self: flex-end;
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.sc-msg--assistant {
  align-self: flex-start;
  background: var(--bg-2);
  color: var(--text-1);
  border-bottom-left-radius: 4px;
}

/* Typing indicator */
.sc-typing {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}
.sc-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  animation: scBounce 1.4s infinite ease-in-out both;
}
.sc-typing span:nth-child(1) { animation-delay: -0.32s; }
.sc-typing span:nth-child(2) { animation-delay: -0.16s; }

@keyframes scBounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.sc-panel__input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-1);
  background: #fff;
  flex-shrink: 0;
}
.sc-panel__input input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-full);
  font-size: 0.84rem;
  outline: none;
  transition: border-color 0.15s;
}
.sc-panel__input input:focus { border-color: var(--brand); }

.sc-panel__send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.sc-panel__send:hover { background: var(--brand-dark); }

@media (max-width: 440px) {
  .sc-panel { width: 100%; right: -100%; }
}

/* ── Sidebar locked item + PRO badge ── */
.dash-nav__item--locked {
  opacity: 0.5;
}
.dash-nav__pro-badge {
  font-size: 0.6rem;
  font-weight: 700;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════════════
   EMAIL EXPERT ASSISTANT PANEL
   ══════════════════════════════════════════════════════ */
.ea-panel {
  position: fixed;
  right: -460px;
  top: 0;
  width: 440px;
  height: 100vh;
  background: #fff;
  border-left: 1px solid var(--border-1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  transition: right 0.3s var(--ease);
}
.ea-panel--open { right: 0; }

.ea-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: #fff;
  flex-shrink: 0;
}
.ea-panel__header-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ea-panel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  animation: eaPulse 2s infinite;
}
@keyframes eaPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.ea-panel__title {
  font-size: 0.92rem;
  font-weight: 700;
}
.ea-panel__badge {
  font-size: 0.6rem;
  font-weight: 700;
  background: rgba(255,255,255,0.2);
  padding: 2px 6px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.ea-panel__close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.ea-panel__close:hover { color: #fff; }

.ea-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-1);
  font-size: 0.72rem;
  color: var(--text-3);
  flex-shrink: 0;
}
.ea-counter a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.ea-counter a:hover { text-decoration: underline; }
.ea-counter--low {
  background: #fef3c7;
  color: #92400e;
}
.ea-counter--low a { color: #d97706; }

.ea-panel__messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ea-msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.84rem;
  line-height: 1.6;
  animation: fadeSlideUp 0.2s var(--ease) both;
}
.ea-msg code { background: rgba(0,0,0,0.06); padding: 1px 4px; border-radius: 3px; font-size: 0.8em; }
.ea-msg strong { font-weight: 600; }

.ea-msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.ea-msg--assistant {
  align-self: flex-start;
  background: var(--bg-2);
  color: var(--text-1);
  border-bottom-left-radius: 4px;
}

.ea-typing {
  display: flex;
  gap: 4px;
  padding: 4px 0;
}
.ea-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  animation: scBounce 1.4s infinite ease-in-out both;
}
.ea-typing span:nth-child(1) { animation-delay: -0.32s; }
.ea-typing span:nth-child(2) { animation-delay: -0.16s; }

.ea-panel__input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-1);
  background: #fff;
  flex-shrink: 0;
}
.ea-panel__input input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border-1);
  border-radius: var(--r-full);
  font-size: 0.84rem;
  outline: none;
  transition: border-color 0.15s;
}
.ea-panel__input input:focus { border-color: #7c3aed; }

.ea-panel__send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: filter 0.15s;
}
.ea-panel__send:hover { filter: brightness(1.15); }

@media (max-width: 480px) {
  .ea-panel { width: 100%; right: -100%; }
}

/* ══════════════════════════════════════════════════════
   EMAIL TEST PAGE
   ══════════════════════════════════════════════════════ */

/* ── What You Get features grid ── */
.et-what-you-get { margin: 24px 0 8px; }
.et-what-you-get__title { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-hint); margin-bottom: 12px; }
.et-features-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.et-feature { display: flex; gap: 10px; padding: 12px; border-radius: 10px; background: var(--bg-card-alt, var(--bg-2)); border: 1px solid var(--border-subtle); }
.et-feature__icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(37,99,235,0.10); color: var(--color-blue); }
.et-feature__icon svg { width: 18px; height: 18px; }
.et-feature div { display: flex; flex-direction: column; gap: 2px; }
.et-feature strong { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
.et-feature span { font-size: 0.72rem; color: var(--text-secondary); line-height: 1.35; }
@media (max-width: 600px) { .et-features-grid { grid-template-columns: 1fr; } }

/* ── Email Test differentiator ── */
.et-differentiator {
  margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-subtle);
}
.et-differentiator__title {
  font-size: 0.82rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-hint); margin-bottom: 14px; text-align: center;
}
.et-diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.et-diff-item {
  padding: 16px; border-radius: 10px; border: 1px solid var(--border-subtle);
}
.et-diff-item--other {
  background: rgba(239,68,68,0.03); border-color: rgba(239,68,68,0.15);
}
.et-diff-item--inbxr {
  background: rgba(37,99,235,0.04); border-color: rgba(37,99,235,0.2);
}
.et-diff-item__head {
  display: block; font-size: 0.76rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; margin-bottom: 10px;
}
.et-diff-item--other .et-diff-item__head { color: var(--color-red, #ef4444); }
.et-diff-item--inbxr .et-diff-item__head { color: var(--color-green, #22c55e); }
.et-diff-item ul {
  margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 6px;
}
.et-diff-item li {
  font-size: 0.76rem; color: var(--text-secondary); line-height: 1.45;
}
.et-diff-item--other li { color: var(--text-hint); }
.et-diff-item--inbxr li { color: var(--text-primary); font-weight: 500; }
@media (max-width: 600px) { .et-diff-grid { grid-template-columns: 1fr; } }

/* ── Seed address box ── */
.et-seed-address { margin: 20px 0; }
.et-seed-address__label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.04em; }
.et-seed-address__box { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--bg-card-alt, var(--bg-2)); border: 1px solid var(--border-subtle); border-radius: 10px; }
.et-seed-address__icon { flex-shrink: 0; width: 28px; height: 28px; color: var(--color-blue); }
.et-seed-address__icon svg { width: 100%; height: 100%; }
.et-seed-address__email { font-size: 1rem; font-weight: 600; color: var(--text-primary); font-family: 'SF Mono', 'Fira Code', monospace; flex: 1; }

/* ── Step 2 compact send pair ── */
.et-step2-card { padding-top: 20px !important; }
.et-send-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 12px;
}
.et-send-pair__col { display: flex; flex-direction: column; gap: 6px; }
.et-send-pair__label {
  font-size: 0.76rem; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.et-send-pair__box {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg-card-alt, var(--bg-2));
  border: 1px solid var(--border-subtle); min-height: 48px;
}
.et-send-pair__value {
  font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
  font-family: 'SF Mono', 'Fira Code', monospace; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.et-send-pair__copy {
  flex-shrink: 0; padding: 5px 12px; font-size: 0.72rem; font-weight: 700;
  border: 1px solid var(--border-subtle); border-radius: 6px;
  background: var(--bg-card); color: var(--text-secondary);
  cursor: pointer; transition: all 0.15s;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.et-send-pair__copy:hover { color: var(--color-blue); border-color: var(--color-blue); }

/* ── Step 2 help toggle ── */
.et-step2-help { margin-top: 12px; border-top: 1px solid var(--border-subtle); padding-top: 4px; }
.et-step2-help__toggle {
  display: flex; align-items: center; gap: 6px; width: 100%;
  background: none; border: none; cursor: pointer; padding: 8px 0;
  font-size: 0.76rem; font-weight: 600; color: var(--text-hint);
  transition: color 0.15s;
}
.et-step2-help__toggle:hover { color: var(--text-secondary); }
.et-step2-help__toggle svg { flex-shrink: 0; color: var(--color-blue); }
.et-step2-help__arrow {
  margin-left: auto; font-size: 0.6rem; transition: transform 0.2s;
}
.et-step2-help__body { padding-bottom: 8px; }

@media (max-width: 600px) {
  .et-send-pair { grid-template-columns: 1fr; }
}

/* ── Not-found progressive messages ── */
.et-nf-tips {
  margin-top: 16px; padding: 16px 20px; border-radius: 10px;
  background: var(--bg-card-alt, var(--bg-2));
  border: 1px solid var(--border-subtle);
}
.et-nf-tips strong { display: block; font-size: 0.82rem; color: var(--text-primary); margin-bottom: 8px; }
.et-nf-tips ul { margin: 0; padding-left: 18px; }
.et-nf-tips li {
  font-size: 0.78rem; color: var(--text-secondary); line-height: 1.6;
  margin-bottom: 4px;
}
.et-nf-tips li:last-child { margin-bottom: 0; }
.et-nf-tips code { font-size: 0.76rem; color: var(--color-blue); background: rgba(37,99,235,0.07); padding: 1px 5px; border-radius: 3px; }
.et-nf-tips a { color: var(--color-blue); text-decoration: underline; }

.et-nf-recommend {
  display: flex; gap: 16px; margin-top: 20px; padding: 20px;
  border-radius: 12px; border: 1px solid rgba(37,99,235,0.25);
  background: rgba(37,99,235,0.04);
}
.et-nf-recommend__icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px;
  background: rgba(37,99,235,0.10); display: flex; align-items: center;
  justify-content: center; color: var(--color-blue);
}
.et-nf-recommend__body { display: flex; flex-direction: column; gap: 8px; }
.et-nf-recommend__body strong { font-size: 0.92rem; color: var(--text-primary); }
.et-nf-recommend__body p {
  font-size: 0.8rem; color: var(--text-secondary); line-height: 1.6; margin: 0;
}
.et-nf-recommend__body a { color: var(--color-blue); }
a.et-nf-recommend__btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px;
  border-radius: 8px; background: var(--color-blue); color: #fff !important;
  font-size: 0.82rem; font-weight: 700; text-decoration: none;
  transition: opacity 0.15s; align-self: flex-start;
}
.et-nf-recommend__btn:hover { opacity: 0.85; }

/* Scan complete flash */
.et-scan-flash {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; margin-bottom: 12px;
  border-radius: 8px;
  background: var(--brand-muted);
  border: 1px solid var(--brand-border);
  color: var(--brand);
  font-size: 0.82rem; font-weight: 600;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.3s, transform 0.3s;
}
.et-scan-flash--visible { opacity: 1; transform: translateY(0); }
.et-scan-flash svg { flex-shrink: 0; }

/* Next steps container */
.et-nf-next-steps { margin-top: 20px; }
.et-nf-next-steps__title {
  display: flex; align-items: center; gap: 8px;
  font-size: 1rem; font-weight: 700; color: var(--text-primary);
  margin-bottom: 16px;
}
.et-nf-next-steps__title svg { color: var(--brand); }

/* Primary recommend card — more prominent */
.et-nf-recommend--primary {
  border-color: var(--brand-border);
  background: var(--brand-muted);
}
.et-nf-recommend--primary .et-nf-recommend__icon {
  background: rgba(37,99,235,0.15);
  color: var(--brand);
}

/* Recommend card grid */
.et-nf-recommend-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 12px;
}
.et-nf-recommend-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--border-1);
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.et-nf-recommend-card:hover {
  border-color: var(--brand-border);
  box-shadow: 0 2px 8px rgba(37,99,235,0.08);
}
.et-nf-recommend-card__icon {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(37,99,235,0.08); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.et-nf-recommend-card strong {
  font-size: 0.85rem; color: var(--text-primary);
}
.et-nf-recommend-card span {
  font-size: 0.78rem; color: var(--text-3); line-height: 1.5;
}

@media (max-width: 600px) {
  .et-nf-recommend { flex-direction: column; }
  .et-nf-recommend-grid { grid-template-columns: 1fr; }
}

/* ── Token guide ── */
.et-token-guide { margin: 20px 0; padding: 20px; background: var(--bg-card-alt, var(--bg-2)); border: 1px solid var(--border-subtle); border-radius: 12px; }
.et-token-guide__title { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.et-token-guide__text { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 14px; }
.et-token-examples { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.et-token-example { padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border-subtle); display: flex; align-items: center; gap: 10px; }
.et-token-example code { font-size: 0.8rem; color: var(--text-secondary); flex: 1; }
.et-token-example--good { border-color: rgba(37,99,235,0.3); background: rgba(37,99,235,0.04); }
.et-token-example--ok { border-color: var(--brand-border); background: rgba(37,99,235,0.04); }
.et-token-example__badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 8px; border-radius: 4px; flex-shrink: 0; white-space: nowrap; }
.et-token-example--good .et-token-example__badge { background: rgba(37,99,235,0.15); color: var(--color-green); }
.et-token-example--ok .et-token-example__badge { background: rgba(37,99,235,0.10); color: var(--color-blue); }
.et-token-highlight { font-weight: 700; color: var(--color-blue); background: rgba(37,99,235,0.07); padding: 1px 4px; border-radius: 3px; }
.et-token-note { display: flex; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border-subtle); align-items: flex-start; }
.et-token-note:first-of-type { margin-top: 4px; }
.et-token-note svg { flex-shrink: 0; margin-top: 2px; color: var(--color-blue); }
.et-token-note div { display: flex; flex-direction: column; gap: 3px; }
.et-token-note strong { font-size: 0.8rem; font-weight: 700; color: var(--text-primary); }
.et-token-note span { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.5; }

/* ── Example subject ── */
.et-example { margin: 16px 0; padding: 12px 16px; background: rgba(37,99,235,0.07); border-radius: 8px; border-left: 3px solid var(--color-blue); }
.et-example__label { display: block; font-size: 0.72rem; color: var(--text-hint); margin-bottom: 4px; }
.et-example__text { font-size: 0.85rem; color: var(--text-primary); }

/* ── Report sections ── */
.et-section {
  margin-bottom: 24px; padding: 22px; background: #fff;
  border: 1px solid var(--border-1); border-radius: 16px;
  box-shadow: var(--shadow-1);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.et-section:hover { border-color: rgba(37,99,235,0.10); box-shadow: var(--shadow-2); }
.et-section__title { font-size: 1rem; font-weight: 700; color: var(--text-1); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.et-section__title svg { color: var(--accent); flex-shrink: 0; }
.et-section__sub { font-size: 0.78rem; color: var(--text-3); margin-bottom: 16px; }

/* ── Signals list (reuses rep-signal-row from sender page) ── */
.et-signals { display: flex; flex-direction: column; gap: 2px; }

/* ── Header grade cards ── */
.et-grades-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.et-grade-card {
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--border-1);
  background: #fff;
  transition: all 0.25s var(--ease);
  box-shadow: var(--shadow-1);
}
.et-grade-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-1); }
.et-grade-card--pass { border-left: 3px solid var(--color-green); }
.et-grade-card--warning { border-left: 3px solid var(--color-yellow); }
.et-grade-card--fail { border-left: 3px solid var(--color-red); }
.et-grade-card--info { border-left: 3px solid var(--color-blue); }
.et-grade-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.et-grade-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; }
.et-grade-icon--pass { background: rgba(37,99,235,0.15); color: var(--color-green); }
.et-grade-icon--warning { background: rgba(234,179,8,0.15); color: var(--color-yellow); }
.et-grade-icon--fail { background: rgba(239,68,68,0.15); color: var(--color-red); }
.et-grade-icon--info { background: rgba(37,99,235,0.12); color: var(--color-blue); }
.et-grade-label { font-weight: 700; font-size: 0.85rem; color: var(--text-primary); flex: 1; }
.et-grade-status { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-hint); }
.et-grade-verdict { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }
.et-grade-detail { font-size: 0.72rem; color: var(--text-hint); margin-top: 4px; }

/* ── Score cards ── */
.et-scores-row { display: flex; gap: 16px; flex-wrap: wrap; }
.et-score-card {
  flex: 1; min-width: 160px; padding: 22px; border-radius: 14px;
  border: 1px solid var(--border-1); border-top: 3px solid var(--accent);
  background: #fff;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: var(--shadow-1);
  transition: all 0.3s var(--ease);
}
.et-score-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  border-color: var(--brand-border);
}
.et-score-card__title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); font-weight: 600; }
.et-score-card__score { font-size: 2rem; font-weight: 800; line-height: 1; }
.et-score-card__score small { font-size: 0.9rem; font-weight: 400; opacity: 0.5; }
.et-score-card__label { font-size: 0.78rem; font-weight: 600; color: var(--text-2); }

/* ── Readability overview ── */
.et-readability-overview { display: flex; gap: 20px; align-items: flex-start; }
.et-readability-summary { flex: 1; }
.et-readability-summary p { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }

/* ── Routing hops ── */
.et-hops { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; }
.et-hop { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; background: var(--bg-card-alt, var(--bg-2)); font-size: 0.78rem; }
.et-hop__num { width: 22px; height: 22px; border-radius: 50%; background: rgba(37,99,235,0.10); color: var(--color-blue); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.7rem; flex-shrink: 0; }
.et-hop__encrypted { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; }
.et-hop__encrypted--yes { background: rgba(37,99,235,0.1); color: var(--color-green); }
.et-hop__encrypted--no { background: rgba(239,68,68,0.1); color: var(--color-red); }
.et-hop__detail { flex: 1; color: var(--text-secondary); }
.et-hop__ip { font-size: 0.72rem; color: var(--text-hint); font-family: 'SF Mono', 'Fira Code', monospace; }

/* ── Audit items ── */
.et-audit-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.et-audit-item:last-child { border-bottom: none; }
.et-audit-icon { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.et-audit-icon--pass { background: rgba(37,99,235,0.15); color: var(--color-green); }
.et-audit-icon--fail { background: rgba(239,68,68,0.15); color: var(--color-red); }
.et-audit-body { display: flex; flex-direction: column; gap: 2px; }
.et-audit-label { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); }
.et-audit-detail { font-size: 0.72rem; color: var(--text-hint); }

/* ── Raw headers ── */
.et-raw-headers { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; }
.et-raw-header { font-size: 0.72rem; padding: 4px 8px; background: var(--bg-card-alt, var(--bg-2)); border: 1px solid var(--border-subtle); border-radius: 6px; color: var(--text-secondary); }

/* ── Assessment summary ── */
.et-assessment-grade {
  display: flex; align-items: center; gap: 20px;
  padding: 22px 28px; border-radius: 16px; border-left: 5px solid;
  background: #fff;
  margin-bottom: 20px;
  box-shadow: var(--shadow-2);
}
.et-assessment-grade__letter {
  font-size: 3rem; font-weight: 900; line-height: 1;
  min-width: 60px; text-align: center;
}
.et-assessment-grade__body { display: flex; flex-direction: column; gap: 6px; }
.et-assessment-grade__label { font-size: 0.92rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; }
.et-assessment-grade__counts { display: flex; flex-wrap: wrap; gap: 8px; }
.et-count {
  font-size: 0.7rem; font-weight: 700; padding: 2px 8px;
  border-radius: 10px; text-transform: uppercase; letter-spacing: 0.03em;
}
.et-count--critical { background: rgba(239,68,68,0.15); color: var(--color-red); }
.et-count--warning { background: rgba(245,158,11,0.15); color: var(--color-yellow); }
.et-count--pass { background: rgba(37,99,235,0.15); color: var(--color-green); }
.et-count--info { background: rgba(59,130,246,0.15); color: var(--color-blue); }

.et-assessment-group { margin-bottom: 16px; }
.et-assessment-group__title {
  font-size: 0.82rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 8px 0 6px; margin-bottom: 4px;
  border-bottom: 2px solid var(--border-subtle);
}
.et-assessment-group__title--critical { color: var(--color-red); border-bottom-color: rgba(239,68,68,0.3); }
.et-assessment-group__title--warning { color: var(--color-yellow); border-bottom-color: rgba(245,158,11,0.3); }
.et-assessment-group__title--info { color: var(--color-blue); border-bottom-color: rgba(59,130,246,0.3); }
.et-assessment-group__title--pass { color: var(--color-green); border-bottom-color: rgba(37,99,235,0.3); }

.et-assessment-item {
  display: flex; gap: 12px; padding: 14px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.et-assessment-item:last-child { border-bottom: none; }
.et-assessment-item__icon {
  width: 26px; height: 26px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 0.8rem;
  font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.et-assessment-item__icon--critical { background: rgba(239,68,68,0.15); color: var(--color-red); }
.et-assessment-item__icon--warning { background: rgba(245,158,11,0.15); color: var(--color-yellow); }
.et-assessment-item__icon--info { background: rgba(59,130,246,0.15); color: var(--color-blue); }
.et-assessment-item__body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.et-assessment-item__head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.et-assessment-item__label {
  font-size: 0.82rem; font-weight: 700; color: var(--text-primary);
  background: var(--bg-2); padding: 1px 8px; border-radius: 4px;
}
.et-assessment-item__text { font-size: 0.8rem; color: var(--text-secondary); }
.et-assessment-item__fix {
  font-size: 0.76rem; color: var(--text-hint); line-height: 1.6;
  padding: 10px 14px; border-radius: 8px;
  background: var(--bg-card-alt, var(--bg-2));
  border-left: 3px solid var(--border-subtle);
}

.et-assessment-passing { display: flex; flex-direction: column; gap: 0; }
.et-assessment-pass-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 0; border-bottom: 1px solid var(--border-subtle);
  font-size: 0.78rem;
}
.et-assessment-pass-item:last-child { border-bottom: none; }
.et-assessment-pass-icon { color: var(--color-green); font-weight: 700; font-size: 0.85rem; flex-shrink: 0; }
.et-assessment-pass-label { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.et-assessment-pass-text { color: var(--text-secondary); }

@media (max-width: 700px) {
  .et-grades-grid { grid-template-columns: 1fr; }
  .et-scores-row { flex-direction: column; }
  .et-readability-overview { flex-direction: column; }
  .et-assessment-grade { flex-direction: column; text-align: center; padding: 16px; }
  .et-assessment-grade__counts { justify-content: center; }
  .et-assessment-item__head { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   MARKETING SECTIONS — Homepage landing page
   ═══════════════════════════════════════════════════════════════ */

/* ── Value Strip (3-column) ── */
.et-value-strip {
  padding: 72px 24px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(37,99,235,0.04) 0%, transparent 60%),
    var(--bg-1);
  border-top: 1px solid var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
.et-value-strip__inner {
  max-width: 1140px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.et-value-col {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 36px 28px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 16px; transition: all 0.3s var(--ease);
  box-shadow: var(--shadow-1);
}
.et-value-col:hover {
  border-color: var(--brand-border);
  box-shadow: var(--shadow-3);
  transform: translateY(-4px);
}
.et-value-col__icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(37,99,235,0.07));
  display: flex;
  align-items: center; justify-content: center;
  color: var(--accent); margin-bottom: 20px;
  transition: transform 0.3s var(--ease);
}
.et-value-col:hover .et-value-col__icon {
  transform: scale(1.08);
}
.et-value-col__title {
  font-size: 1.08rem; font-weight: 800; color: var(--text-1);
  margin: 0 0 10px; letter-spacing: -0.02em;
}
.et-value-col__text {
  font-size: 0.84rem; color: var(--text-2); line-height: 1.65;
  margin: 0;
}
@media (max-width: 900px) {
  .et-value-strip__inner { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
  .et-value-strip__inner { grid-template-columns: 1fr; gap: 16px; }
  .et-value-strip { padding: 48px 16px; }
}

/* ── How It Works (3-step) ── */
.et-how {
  padding: 32px 24px;
  background:
    radial-gradient(ellipse 50% 50% at 30% 50%, rgba(37,99,235,0.04) 0%, transparent 60%),
    var(--bg-2);
}
.et-how__inner {
  max-width: 800px; margin: 0 auto; text-align: center;
}
.et-how__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  color: rgba(255,255,255,0.7);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  font-family: inherit;
}
.et-how__toggle:hover {
  border-color: var(--brand);
  color: #fff;
  background: rgba(37,99,235,0.08);
}
.et-how__toggle-arrow {
  transition: transform 0.2s;
}
.et-how__toggle--open .et-how__toggle-arrow {
  transform: rotate(180deg);
}
.et-how__content {
  margin-top: 32px;
}
.et-how__title {
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 800; color: var(--text-1);
  margin: 0 0 8px; letter-spacing: -0.03em;
}
.et-how__sub {
  font-size: 0.95rem; color: var(--text-1); margin: 0 0 48px;
}
.et-how-steps {
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.et-how-step {
  display: flex; align-items: flex-start; gap: 20px;
  text-align: left; max-width: 520px; width: 100%;
}
.et-how-step__num {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: var(--navy);
  color: #fff; font-size: 1.1rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(12,26,58,0.25);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.et-how-step:hover .et-how-step__num {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(12,26,58,0.35);
}
.et-how-step__body h3 {
  font-size: 1rem; font-weight: 700; color: var(--text-1);
  margin: 0 0 6px;
}
.et-how-step__body p {
  font-size: 0.84rem; color: var(--text-1); line-height: 1.6;
  margin: 0;
}
.et-how-step__connector {
  width: 2px; height: 32px; margin: 0 0 0 21px;
  background: linear-gradient(to bottom, var(--navy), transparent);
  opacity: 0.25;
}
@media (max-width: 600px) {
  .et-how { padding: 48px 16px; }
  .et-how__title { font-size: 1.3rem; }
  .et-how-step { gap: 14px; }
  .et-how-step__num { width: 36px; height: 36px; font-size: 0.95rem; }
}

/* ── Comparison Table ── */
.et-comparison {
  padding: 80px 24px;
  background: var(--bg-1);
  border-top: 1px solid var(--border-1);
}
.et-comparison__inner {
  max-width: 960px; margin: 0 auto; text-align: center;
}
.et-comparison__title {
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 800; color: var(--text-1);
  margin: 0 0 8px; letter-spacing: -0.03em;
}
.et-comparison__sub {
  font-size: 0.95rem; color: var(--text-2); margin: 0 0 40px;
}
.et-comp-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: 16px; border: 1px solid var(--border-1);
  box-shadow: var(--shadow-2);
  background: #fff;
}
.et-comp-table {
  width: 100%; border-collapse: collapse; text-align: center;
  font-size: 0.84rem;
}
.et-comp-table thead {
  background: linear-gradient(135deg, rgba(37,99,235,0.07), rgba(37,99,235,0.04));
}
.et-comp-table th {
  padding: 16px 16px; font-weight: 700; color: var(--text-1);
  border-bottom: 1px solid var(--border-1);
  white-space: nowrap;
}
.et-comp-table th.et-comp-feature {
  text-align: left; min-width: 200px;
}
.et-comp-table th.et-comp-us {
  color: var(--accent); background: rgba(37,99,235,0.10);
}
.et-comp-table td {
  padding: 13px 16px; border-bottom: 1px solid var(--border-1);
  color: var(--text-2);
}
.et-comp-table td:first-child {
  text-align: left; font-weight: 600; color: var(--text-1);
}
.et-comp-table td.et-comp-us {
  background: rgba(37,99,235,0.04);
}
.et-comp-table tbody tr {
  transition: background 0.15s var(--ease);
}
.et-comp-table tbody tr:hover {
  background: rgba(37,99,235,0.04);
}
.et-comp-check {
  color: var(--green); font-weight: 700; font-size: 1.1rem;
}
.et-comp-x {
  color: var(--red); font-weight: 700; font-size: 1.1rem;
}
.et-comp-price-row td {
  padding: 16px; border-bottom: none;
}
.et-comp-price {
  font-weight: 800; font-size: 1rem; display: inline-block;
  padding: 6px 16px; border-radius: 8px;
}
.et-comp-price--free {
  color: var(--green);
  background: rgba(5,150,105,0.1);
}
.et-comp-price--paid {
  color: var(--text-3);
  background: var(--bg-4);
}
@media (max-width: 700px) {
  .et-comparison { padding: 48px 16px; }
  .et-comparison__title { font-size: 1.3rem; }
  .et-comp-table { font-size: 0.76rem; }
  .et-comp-table th, .et-comp-table td { padding: 10px 10px; }
}

/* ── Other Tools Strip ── */
.et-tools-strip {
  padding: 80px 24px;
  background:
    radial-gradient(ellipse 50% 40% at 70% 50%, rgba(37,99,235,0.04) 0%, transparent 60%),
    var(--bg-2);
  border-top: 1px solid var(--border-1);
}
.et-tools-strip__inner {
  max-width: 1080px; margin: 0 auto; text-align: center;
}
.et-tools-strip__title {
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 800; color: var(--text-1);
  margin: 0 0 8px; letter-spacing: -0.03em;
}
.et-tools-strip__sub {
  font-size: 0.95rem; color: var(--text-2); margin: 0 0 40px;
}
.et-tools-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px;
}
.et-tool-card {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 28px 16px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 14px; text-decoration: none;
  transition: all 0.3s var(--ease);
  box-shadow: var(--shadow-1);
}
.et-tool-card:hover {
  border-color: rgba(37,99,235,0.25);
  box-shadow: var(--shadow-3);
  transform: translateY(-4px);
}
.et-tool-card__icon {
  width: 44px; height: 44px; border-radius: 11px;
  background: linear-gradient(135deg, rgba(37,99,235,0.10), rgba(37,99,235,0.07));
  display: flex;
  align-items: center; justify-content: center;
  color: var(--accent); margin-bottom: 14px;
  transition: transform 0.3s var(--ease);
}
.et-tool-card:hover .et-tool-card__icon {
  transform: scale(1.1);
}
.et-tool-card__title {
  font-size: 0.92rem; font-weight: 700; color: var(--text-1);
  margin: 0 0 8px;
}
.et-tool-card__desc {
  font-size: 0.78rem; color: var(--text-2); line-height: 1.55;
  margin: 0;
}
@media (max-width: 900px) {
  .et-tools-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .et-tools-strip { padding: 48px 16px; }
  .et-tools-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .et-tool-card { padding: 20px 12px; }
}

/* ── Final CTA ── */
.et-final-cta {
  padding: 88px 24px;
  background:
    radial-gradient(ellipse 60% 50% at 50% 60%, rgba(37,99,235,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 30% 40%, rgba(37,99,235,0.04) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-1) 0%, rgba(37,99,235,0.04) 100%);
  border-top: 1px solid var(--border-1);
  text-align: center;
}
.et-final-cta__inner {
  max-width: 600px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.et-final-cta__title {
  font-family: var(--font-display);
  font-size: 1.9rem; font-weight: 800; color: var(--text-1);
  margin: 0; line-height: 1.15; letter-spacing: -0.03em;
}
.et-final-cta__sub {
  font-size: 1.05rem; color: var(--text-1); margin: 0;
}
a.et-final-cta__btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 40px; margin-top: 12px;
  border-radius: var(--r-full); font-size: 1rem; font-weight: 700;
  background: var(--brand);
  color: #fff !important; text-decoration: none;
  box-shadow: 0 4px 16px rgba(37,99,235,0.35);
  transition: all 0.25s var(--ease);
  position: relative;
}
a.et-final-cta__btn:hover {
  transform: translateY(-2px);
  background: var(--brand-dark);
  box-shadow: 0 8px 24px rgba(37,99,235,0.45);
}
a.et-final-cta__btn svg { flex-shrink: 0; }
.et-final-cta__note {
  margin-top: 12px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
}
@media (max-width: 600px) {
  .et-final-cta { padding: 56px 16px; }
  .et-final-cta__title { font-size: 1.35rem; }
  a.et-final-cta__btn { padding: 14px 28px; font-size: 0.92rem; }
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM ANIMATIONS — Skeleton Loading, Score Reveals, Stagger
   ═══════════════════════════════════════════════════════════════ */

/* ── Skeleton loading screen ── */
.et-skeleton {
  animation: et-fadeIn 0.3s ease;
}
.et-skeleton--fade {
  animation: et-fadeOut 0.3s ease forwards;
}
@keyframes et-fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes et-fadeOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }

.et-skeleton-progress {
  margin-bottom: 32px; padding: 28px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 14px;
}
.et-skeleton-progress__bar {
  height: 4px; border-radius: 4px;
  background: rgba(37,99,235,0.10); overflow: hidden;
  margin-bottom: 20px;
}
.et-skeleton-progress__fill {
  height: 100%; width: 12%;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.et-skeleton-progress__steps {
  display: flex; flex-direction: column; gap: 6px;
}
.et-skeleton-step {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px;
  font-size: 0.8rem; color: var(--text-hint);
  transition: all 0.3s ease;
}
.et-skeleton-step--active {
  color: var(--text-primary); background: rgba(37,99,235,0.07);
  font-weight: 600;
}
.et-skeleton-step--done {
  color: var(--text-secondary);
}
.et-skeleton-step__check {
  width: 20px; height: 20px; display: flex;
  align-items: center; justify-content: center;
  font-size: 0.75rem; flex-shrink: 0;
}
.et-skeleton-step--done .et-skeleton-step__check {
  color: var(--color-green); font-weight: 700;
}
.et-skeleton-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--brand-border);
  border-top-color: var(--brand);
  animation: et-spin 0.8s linear infinite;
  display: inline-block;
}
@keyframes et-spin { to { transform: rotate(360deg); } }

/* Skeleton placeholder cards */
.et-skeleton-cards { margin-top: 24px; }
.et-skeleton-card {
  padding: 20px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  margin-bottom: 12px;
}
.et-skeleton-card--wide { padding: 28px; }
.et-skeleton-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.et-skeleton-line {
  height: 14px; border-radius: 6px;
  background: linear-gradient(90deg,
    rgba(37,99,235,0.07) 25%,
    rgba(37,99,235,0.10) 50%,
    rgba(37,99,235,0.07) 75%);
  background-size: 200% 100%;
  animation: et-shimmer 1.5s ease infinite;
  margin-bottom: 10px;
}
.et-skeleton-line:last-child { margin-bottom: 0; }
.et-skeleton-line--lg { width: 80%; height: 18px; }
.et-skeleton-line--md { width: 60%; }
.et-skeleton-line--sm { width: 35%; height: 10px; }
@keyframes et-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (max-width: 600px) {
  .et-skeleton-grid { grid-template-columns: 1fr; }
  .et-skeleton-step { font-size: 0.74rem; padding: 6px 8px; }
}

/* ── Score card reveal animation ── */
.et-score-card--reveal {
  animation: et-cardReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes et-cardReveal {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: none; }
}

/* ── Card stagger reveal ── */
.et-card-reveal {
  animation: et-cardReveal 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Section slide-in reveal ── */
.et-section-reveal {
  animation: et-sectionReveal 0.5s ease both;
}
@keyframes et-sectionReveal {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ── Assessment grade letter pop ── */
.et-grade-pop {
  animation: et-gradePop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
}
@keyframes et-gradePop {
  0% { opacity: 0; transform: scale(0.3); }
  60% { transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════
   PRE-SEND CHECKLIST
   ═══════════════════════════════════════════════════════════════ */

/* ── Form fields ── */
.presend-fields {
  display: flex; flex-direction: column; gap: 16px;
  margin: 28px 0;
}
.presend-field {
  display: flex; flex-direction: column; gap: 6px;
}
.presend-field__label {
  font-size: 0.8rem; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.presend-field__req { color: var(--color-red); }
.presend-input {
  padding: 12px 16px; border-radius: 10px;
  background: var(--bg-card-alt, var(--bg-2));
  border: 1px solid var(--border-subtle);
  color: var(--text-primary); font-size: 0.9rem;
  font-family: inherit; transition: border-color 0.15s;
  width: 100%; box-sizing: border-box;
}
.presend-input:focus {
  outline: none; border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.10);
}
.presend-textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
select.presend-input { cursor: pointer; }
.presend-field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.presend-field--half { min-width: 0; }
@media (max-width: 600px) {
  .presend-field-row { grid-template-columns: 1fr; }
}

/* ── Loading screen ── */
.presend-loading {
  display: flex; flex-direction: column; align-items: center;
  padding: 48px 24px; text-align: center;
}
.presend-loading__ring {
  position: relative; width: 120px; height: 120px; margin-bottom: 24px;
}
.presend-loading__ring svg { transform: rotate(-90deg); }
.presend-loading__ring circle:last-child {
  transition: stroke-dashoffset 0.4s cubic-bezier(0.4,0,0.2,1);
}
.presend-loading__pct {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800; color: var(--text-primary);
}
.presend-loading__status {
  font-size: 0.95rem; font-weight: 600; color: var(--text-primary);
  margin-bottom: 24px;
}
.presend-loading__checks {
  display: flex; flex-direction: column; gap: 6px;
  max-width: 380px; width: 100%;
}
.presend-lcheck {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 8px; font-size: 0.8rem;
  color: var(--text-hint); animation: et-fadeIn 0.3s ease both;
  transition: all 0.3s ease;
}
.presend-lcheck--done { color: var(--text-secondary); }
.presend-lcheck__icon {
  width: 18px; height: 18px; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 0.75rem;
}
.presend-lcheck--done .presend-lcheck__icon {
  color: var(--color-green); font-weight: 700;
}
.presend-lcheck__label { flex: 1; text-align: left; }
.presend-lcheck__status {
  font-size: 0.72rem; font-weight: 600;
  color: var(--text-hint);
}
.presend-lcheck--done .presend-lcheck__status {
  color: var(--color-green);
}

/* ── Verdict card ── */
.presend-verdict-card {
  display: flex; align-items: center; gap: 20px;
  padding: 24px 28px; border-radius: 14px;
  background: var(--bg-card); border: 2px solid;
  margin-bottom: 28px;
}
.presend-verdict__badge {
  padding: 8px 18px; border-radius: 8px;
  font-size: 0.9rem; font-weight: 800;
  color: #fff; letter-spacing: 0.06em;
  text-transform: uppercase; flex-shrink: 0;
}
.presend-verdict__icon {
  font-size: 2rem; font-weight: 700; flex-shrink: 0;
}
.presend-verdict__body {
  display: flex; flex-direction: column; gap: 6px;
}
.presend-verdict__label {
  font-size: 0.95rem; font-weight: 700; color: var(--text-primary);
}
.presend-verdict__counts {
  display: flex; gap: 10px; flex-wrap: wrap;
}
@media (max-width: 600px) {
  .presend-verdict-card { flex-direction: column; text-align: center; padding: 20px; }
  .presend-verdict__counts { justify-content: center; }
}

/* ── Ring row (score gauges) ── */
.presend-ring-row {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
  margin-bottom: 28px;
}
.presend-ring-item {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 20px 8px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.presend-ring-gauge {
  position: relative; width: 72px; height: 72px; margin-bottom: 10px;
}
.presend-ring-gauge svg { transform: rotate(-90deg); }
.presend-ring-fill {
  transition: stroke-dashoffset 1s cubic-bezier(0.4,0,0.2,1);
}
.presend-ring-num {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 800; color: var(--text-primary);
}
.presend-ring-label {
  font-size: 0.72rem; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.presend-ring-detail {
  font-size: 0.72rem; font-weight: 600;
}
@media (max-width: 900px) {
  .presend-ring-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 500px) {
  .presend-ring-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .presend-ring-item { padding: 14px 6px; }
}

/* ── Checklist items ── */
.presend-checklist {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 28px;
}
.presend-check-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; border-radius: 10px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  transition: border-color 0.2s;
}
.presend-check-item--fail { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.03); }
.presend-check-item--warning { border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.03); }
.presend-check-icon {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; flex-shrink: 0;
}
.presend-check-icon--pass { background: rgba(37,99,235,0.12); color: var(--color-green); }
.presend-check-icon--info { background: rgba(37,99,235,0.10); color: var(--color-blue); }
.presend-check-icon--warning { background: rgba(245,158,11,0.12); color: var(--color-yellow); }
.presend-check-icon--fail { background: rgba(239,68,68,0.12); color: var(--color-red); }
.presend-check-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.presend-check-label { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); }
.presend-check-detail { font-size: 0.78rem; color: var(--text-secondary); }
.presend-check-score { font-size: 0.85rem; font-weight: 800; flex-shrink: 0; }

/* ── Subject comparison ── */
.presend-section-title {
  font-size: 1.1rem; font-weight: 800; color: var(--text-primary);
  margin: 0 0 16px;
}
.presend-subject-cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin-bottom: 28px;
}
.presend-subject-card {
  position: relative; padding: 20px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 12px; display: flex; flex-direction: column; gap: 10px;
}
.presend-subject-card--winner {
  border-color: rgba(37,99,235,0.4);
  box-shadow: 0 4px 16px rgba(37,99,235,0.08);
}
.presend-subject-badge {
  position: absolute; top: -8px; right: 12px;
  padding: 3px 10px; border-radius: 6px;
  background: var(--color-green); color: #fff;
  font-size: 0.65rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.presend-subject-text {
  font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
  line-height: 1.4; font-style: italic;
}
.presend-subject-score {
  font-size: 1.1rem; font-weight: 800; color: var(--text-primary);
}
.presend-subject-bar {
  height: 6px; border-radius: 6px;
  background: rgba(37,99,235,0.07); overflow: hidden;
}
.presend-subject-bar__fill {
  height: 100%; border-radius: 6px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
}
@media (max-width: 600px) {
  .presend-subject-cards { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   DOMAIN WATCHDOG
   ═══════════════════════════════════════════════════════════════ */
.wd-section-title {
  font-size: 1.1rem; font-weight: 800; color: var(--text-primary);
  margin: 28px 0 16px;
}
.wd-empty {
  text-align: center; padding: 40px 20px;
  color: var(--text-hint); font-size: 0.88rem;
}

/* ── Domain cards ── */
.wd-domain-grid {
  display: flex; flex-direction: column; gap: 10px;
}
.wd-domain-card {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  flex-wrap: wrap; gap: 12px;
}
.wd-domain-card__head { display: flex; flex-direction: column; gap: 2px; }
.wd-domain-card__name { font-size: 0.95rem; font-weight: 700; color: var(--text-primary); }
.wd-domain-card__date { font-size: 0.72rem; color: var(--text-hint); }
.wd-domain-card__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Buttons ── */
.wd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 7px; font-size: 0.76rem;
  font-weight: 700; cursor: pointer; border: 1px solid var(--border-subtle);
  background: var(--bg-card); color: var(--text-secondary);
  transition: all 0.15s; text-decoration: none;
}
.wd-btn:hover { border-color: var(--color-blue); color: var(--color-blue); }
.wd-btn--scan { background: rgba(37,99,235,0.07); color: var(--color-blue); border-color: var(--brand-border); }
.wd-btn--scan:hover { background: rgba(37,99,235,0.12); }
.wd-btn--remove { color: var(--text-hint); }
.wd-btn--remove:hover { color: var(--color-red); border-color: rgba(239,68,68,0.3); }
.wd-btn--link { color: var(--color-blue); text-decoration: none; }

/* ── Scan result ── */
.wd-result, .wd-history {
  padding: 28px; border-radius: 14px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  margin-top: 20px;
}
.wd-result__head, .wd-history__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.wd-result__domain { font-size: 1.1rem; font-weight: 800; color: var(--text-primary); margin: 0; }
.wd-result__time { font-size: 0.76rem; color: var(--text-hint); }
.wd-result__score-row {
  display: flex; align-items: center; gap: 24px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.wd-result__actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* ── Protocol badges ── */
.wd-protocol-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; flex: 1;
}
.wd-protocol {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 12px 8px;
  border: 1px solid; border-radius: 10px;
  background: var(--bg-card-alt, var(--bg-2));
}
.wd-protocol__icon { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.wd-protocol__label { font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.wd-protocol__status { font-size: 0.72rem; font-weight: 600; text-transform: capitalize; }

/* ── Alert / Clean badges ── */
.wd-alert, .wd-clean {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px;
  font-size: 0.84rem; font-weight: 600; margin-bottom: 16px;
}
.wd-alert { background: rgba(239,68,68,0.06); color: var(--color-red); border: 1px solid rgba(239,68,68,0.2); }
.wd-clean { background: rgba(37,99,235,0.06); color: var(--color-green); border: 1px solid rgba(37,99,235,0.2); }
.wd-alert__icon, .wd-clean__icon { font-size: 1rem; }

/* ── Changes ── */
.wd-changes { margin-top: 16px; }
.wd-changes__title {
  font-size: 0.8rem; font-weight: 700; color: var(--color-yellow);
  text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px;
}
.wd-change-item {
  padding: 8px 12px; font-size: 0.8rem; color: var(--text-primary);
  border-left: 3px solid var(--color-yellow);
  background: rgba(245,158,11,0.04); border-radius: 0 6px 6px 0;
  margin-bottom: 4px;
}

/* ── History ── */
.wd-trend { display: flex; align-items: center; gap: 6px; }
.wd-trend__icon { font-size: 1.2rem; font-weight: 700; }
.wd-trend__label { font-size: 0.82rem; font-weight: 700; }

.wd-sparkline-wrap { margin-bottom: 20px; }
.wd-sparkline { width: 100%; height: 55px; }
.wd-sparkline-labels {
  display: flex; justify-content: space-between;
  font-size: 0.65rem; color: var(--text-hint);
  margin-top: 4px;
}

.wd-history-list { display: flex; flex-direction: column; gap: 6px; }
.wd-history-item {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-radius: 8px;
  background: var(--bg-card-alt, var(--bg-2));
  border: 1px solid var(--border-subtle); font-size: 0.8rem;
}
.wd-history-item--latest { border-color: rgba(37,99,235,0.25); background: rgba(37,99,235,0.04); }
.wd-history-item__score { font-size: 1rem; font-weight: 800; min-width: 32px; text-align: center; }
.wd-history-item__protos { display: flex; gap: 6px; }
.wd-proto-badge {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  background: var(--bg-2);
}
.wd-history-item__bl { font-size: 0.72rem; color: var(--text-hint); }
.wd-history-item__changes {
  font-size: 0.68rem; font-weight: 600; color: var(--color-yellow);
  background: rgba(245,158,11,0.1); padding: 2px 8px; border-radius: 4px;
}
.wd-history-item__date { margin-left: auto; font-size: 0.7rem; color: var(--text-hint); }
.wd-loading {
  text-align: center; padding: 40px; color: var(--text-hint); font-size: 0.88rem;
}

@media (max-width: 600px) {
  .wd-domain-card { flex-direction: column; align-items: flex-start; }
  .wd-result__score-row { flex-direction: column; }
  .wd-protocol-grid { grid-template-columns: repeat(2, 1fr); }
  .wd-history-item { flex-wrap: wrap; }
}


/* ══════════════════════════════════════════════════════
   DNS GENERATOR TOOL
   ══════════════════════════════════════════════════════ */

/* ESP Chip Grid */
.dns-esp-grid {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px;
}
.dns-esp-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  cursor: pointer; transition: all 0.15s ease;
  font-size: 0.82rem; color: var(--text-secondary);
  user-select: none;
}
.dns-esp-chip:hover {
  background: var(--bg-4);
  border-color: var(--border-2);
}
.dns-esp-chip--active,
.dns-esp-chip:has(input:checked) {
  background: rgba(37,99,235,0.12);
  border-color: var(--color-blue);
  color: var(--text-primary);
}
.dns-esp-chip input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--color-blue);
  margin: 0; cursor: pointer;
}

/* Optional fields row */
.dns-optional-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 768px) {
  .dns-optional-row { grid-template-columns: 1fr; }
}

/* DNS Record Cards */
.dns-results { margin-top: 24px; }

.dns-record-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.dns-record-card__header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
}
.dns-record-card__type {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  background: rgba(37,99,235,0.12); color: var(--color-blue);
  letter-spacing: 0.03em;
}
.dns-record-card__host {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.82rem; color: var(--text-secondary);
  word-break: break-all;
}
.dns-record-card__label {
  font-size: 0.82rem; font-weight: 600; color: var(--text-primary);
  margin-left: auto;
}
.dns-record-card__value {
  padding: 14px 16px; margin: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.8rem; line-height: 1.6;
  color: var(--text-primary);
  white-space: pre-wrap; word-break: break-all;
  background: var(--bg-2);
}
.dns-record-card__note {
  padding: 10px 16px; margin: 0;
  font-size: 0.78rem; color: var(--text-hint);
  white-space: pre-wrap;
}
.dns-record-card__body {
  padding: 14px 16px;
}
.dns-record-card__instruction p {
  font-size: 0.82rem; color: var(--text-secondary);
  margin: 0 0 8px;
}
.dns-dkim-sub {
  margin-top: 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  overflow: hidden;
}
.dns-dkim-sub .dns-record-card__header {
  padding: 8px 12px;
}
.dns-dkim-sub .dns-record-card__value {
  padding: 10px 12px;
}

/* Copy button */
.dns-copy-btn {
  padding: 4px 12px; border-radius: 6px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-2);
  color: var(--text-secondary);
  font-size: 0.72rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s ease;
  white-space: nowrap;
}
.dns-copy-btn:hover {
  background: var(--bg-4);
  border-color: var(--border-2);
}
.dns-copy-btn--ok {
  background: rgba(37,99,235,0.15) !important;
  border-color: var(--color-green) !important;
  color: var(--color-green) !important;
}


/* ══════════════════════════════════════════════════════
   BIMI CHECKER TOOL
   ══════════════════════════════════════════════════════ */

.bimi-overview {
  display: flex; gap: 24px; align-items: center;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}
.bimi-overview__left {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  min-width: 160px;
}
.bimi-overview__right {
  flex: 1; display: flex; justify-content: center; align-items: center;
}

.bimi-status-badge {
  display: inline-block;
  padding: 6px 20px; border-radius: 20px;
  font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}

.bimi-score {
  text-align: center;
}
.bimi-score__num {
  font-size: 2.4rem; font-weight: 800;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--text-primary);
}
.bimi-score__max {
  font-size: 1rem; font-weight: 400;
  color: var(--text-hint);
}

.bimi-logo-preview {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--bg-2);
  border: 2px solid var(--border-subtle);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.bimi-logo-preview__img {
  width: 100%; height: 100%; object-fit: contain;
}
.bimi-logo-preview__placeholder {
  font-size: 0.72rem; color: var(--text-hint);
  text-align: center; padding: 12px;
}

/* Check rows */
.bimi-checks {
  display: flex; flex-direction: column; gap: 8px;
}
.bimi-check-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}
.bimi-check-icon {
  font-size: 1rem; font-weight: 700; flex-shrink: 0;
  width: 22px; text-align: center;
}
.bimi-check-icon--pass { color: var(--color-green); }
.bimi-check-icon--fail { color: var(--color-red); }
.bimi-check-label {
  font-size: 0.82rem; font-weight: 600; color: var(--text-primary);
  min-width: 200px;
}
.bimi-check-detail {
  font-size: 0.78rem; color: var(--text-secondary);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  word-break: break-all;
}

/* Issues */
.bimi-issues {
  display: flex; flex-direction: column; gap: 6px;
}
.bimi-issue {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px;
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.15);
  border-radius: 8px;
  font-size: 0.82rem; color: var(--text-secondary);
}
.bimi-issue__icon {
  color: var(--color-orange); flex-shrink: 0;
}

@media (max-width: 600px) {
  .bimi-overview { flex-direction: column; }
  .bimi-check-row { flex-wrap: wrap; }
  .bimi-check-label { min-width: auto; }
}

/* ══════════════════════════════════════════════════════
   BLACKLIST MONITOR
   ══════════════════════════════════════════════════════ */

.blm-domain-count {
  text-align: center; padding: 8px 0 16px;
  font-size: 0.85rem; color: var(--text-secondary);
}

.blm-domains__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 0 16px; gap: 12px;
}
.blm-domains__header .sender-section__title { margin: 0; }
.blm-scan-all { padding: 8px 20px !important; font-size: 0.85rem !important; }

.blm-domain-list {
  display: flex; flex-direction: column; gap: 12px;
}

.blm-domain-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color 0.2s;
}
.blm-domain-card:hover { border-color: var(--accent); }

.blm-domain-card__main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

.blm-domain-card__info {
  display: flex; flex-direction: column; gap: 2px;
}
.blm-domain-card__name {
  font-weight: 700; font-size: 1.05rem; color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.blm-domain-card__ip {
  font-size: 0.82rem; color: var(--text-secondary); font-family: monospace;
}

.blm-domain-card__status {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.blm-domain-card__lists,
.blm-domain-card__date {
  font-size: 0.82rem; color: var(--text-secondary);
}

.blm-domain-card__actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}

.blm-btn {
  padding: 6px 16px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-primary);
  font-size: 0.82rem; font-weight: 500; cursor: pointer;
  transition: all 0.15s;
}
.blm-btn:hover { border-color: var(--accent); background: rgba(37,99,235,0.07); }
.blm-btn--scan { color: var(--accent); border-color: var(--accent); }
.blm-btn--scan:hover { background: var(--accent); color: #fff; }
.blm-btn--detail { color: var(--text-secondary); }
.blm-btn--remove { color: var(--color-red); border-color: rgba(239,68,68,0.3); }
.blm-btn--remove:hover { background: rgba(239,68,68,0.08); }

.blm-status {
  display: inline-block; padding: 4px 12px; border-radius: 20px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
}
.blm-status--clean {
  background: rgba(16,185,129,0.1); color: var(--color-green);
  border: 1px solid rgba(16,185,129,0.2);
}
.blm-status--listed {
  background: rgba(239,68,68,0.1); color: var(--color-red);
  border: 1px solid rgba(239,68,68,0.2);
}
.blm-status--pending {
  background: rgba(156,163,175,0.1); color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* Detail view */
.blm-detail__back {
  background: none; border: none; color: var(--accent);
  font-size: 0.9rem; cursor: pointer; padding: 8px 0 16px;
  font-weight: 500;
}
.blm-detail__back:hover { text-decoration: underline; }

.blm-detail__summary {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; padding: 20px 0;
}
.blm-detail__meta {
  font-size: 0.85rem; color: var(--text-secondary);
}

/* History dots */
.blm-history {
  padding: 16px 0;
}
.blm-history-dots {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
}
.blm-dot {
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-block; cursor: default;
  transition: transform 0.15s;
}
.blm-dot:hover { transform: scale(1.3); }
.blm-dot--clean { background: var(--color-green); }
.blm-dot--listed { background: var(--color-red); }

.blm-history-legend {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 8px 0; font-size: 0.8rem; color: var(--text-secondary);
}
.blm-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
.blm-legend-dot--clean { background: var(--color-green); }
.blm-legend-dot--listed { background: var(--color-red); }

/* Pro upsell banner */
.blm-pro-banner {
  max-width: 720px; margin: 32px auto 40px; padding: 0 20px;
}
.blm-pro-banner__inner {
  display: flex; align-items: center; gap: 12px; justify-content: center;
  padding: 14px 24px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(37,99,235,0.07) 0%, rgba(168,85,247,0.06) 100%);
  border: 1px solid rgba(37,99,235,0.12);
}
.blm-pro-banner__icon { font-size: 1.2rem; }
.blm-pro-banner__text {
  font-size: 0.88rem; color: var(--text-secondary);
  font-weight: 500;
}

@media (max-width: 600px) {
  .blm-domain-card { padding: 14px 16px; }
  .blm-domain-card__main { flex-direction: column; align-items: flex-start; }
  .blm-pro-banner__inner { flex-direction: column; text-align: center; }
}


/* ══════════════════════════════════════════════════════
   WARM-UP TRACKER
   ══════════════════════════════════════════════════════ */

.warmup-views { max-width: 820px; margin: 0 auto; }

.warmup-form-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 1.1rem; margin: 0 0 16px;
  color: var(--text-primary);
}

.warmup-campaigns { padding-top: 8px; }
.warmup-campaign-list {
  display: flex; flex-direction: column; gap: 12px;
}

.warmup-campaign-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color 0.2s;
}
.warmup-campaign-card:hover { border-color: var(--accent); }

.warmup-campaign-card__main {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}

.warmup-campaign-card__info {
  display: flex; flex-direction: column; gap: 2px;
}
.warmup-campaign-card__domain {
  font-weight: 700; font-size: 1.05rem; color: var(--text-primary);
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.warmup-campaign-card__esp {
  font-size: 0.82rem; color: var(--text-secondary);
  text-transform: capitalize;
}

.warmup-campaign-card__stats {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.warmup-campaign-card__metric {
  font-size: 0.85rem; color: var(--text-secondary);
  font-weight: 500;
}
.warmup-campaign-card__trend {
  font-size: 0.8rem; color: var(--accent); font-weight: 600;
}

.warmup-campaign-card__actions {
  display: flex; gap: 8px; flex-wrap: wrap;
}

.warmup-status {
  display: inline-block; padding: 4px 12px; border-radius: 20px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  text-transform: capitalize;
}
.warmup-status--active {
  background: rgba(16,185,129,0.1); color: var(--color-green);
  border: 1px solid rgba(16,185,129,0.2);
}
.warmup-status--paused {
  background: rgba(245,158,11,0.1); color: var(--color-yellow);
  border: 1px solid rgba(245,158,11,0.2);
}
.warmup-status--completed {
  background: rgba(37,99,235,0.10); color: var(--accent);
  border: 1px solid var(--brand-border);
}

/* Detail header */
.warmup-detail-header { padding-bottom: 16px; }
.warmup-detail-header__top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.warmup-detail-header__top .sender-section__title { margin: 0; }
.warmup-detail-header__meta {
  display: flex; gap: 20px; flex-wrap: wrap;
  font-size: 0.85rem; color: var(--text-secondary); padding-top: 6px;
}

/* Schedule guide */
.warmup-schedule {
  display: flex; flex-direction: column; gap: 4px;
}
.warmup-schedule__row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border);
  transition: all 0.2s;
}
.warmup-schedule__tip {
  flex-basis: 100%; font-size: 0.74rem; color: var(--text-3); line-height: 1.4; padding-left: 2px;
}
.warmup-schedule__row--active {
  border-color: var(--accent);
  background: rgba(37,99,235,0.07);
  box-shadow: inset 3px 0 0 var(--accent);
}
.warmup-schedule__label {
  font-weight: 600; font-size: 0.9rem; color: var(--text-primary);
}
.warmup-schedule__vol {
  font-weight: 500; font-size: 0.88rem; color: var(--text-secondary);
  font-family: monospace;
}

/* Health badge */
.warmup-health { padding: 12px 0 8px; text-align: center; }
.warmup-health-badge {
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 16px 32px; border-radius: 12px; gap: 4px;
}
.warmup-health__label {
  font-weight: 700; font-size: 1.1rem;
}
.warmup-health__sub {
  font-size: 0.85rem; opacity: 0.8;
}
.warmup-health--good {
  background: rgba(16,185,129,0.08); color: var(--color-green);
  border: 1px solid rgba(16,185,129,0.2);
}
.warmup-health--ahead {
  background: rgba(37,99,235,0.07); color: var(--accent);
  border: 1px solid var(--brand-border);
}
.warmup-health--warning {
  background: rgba(245,158,11,0.08); color: var(--color-yellow);
  border: 1px solid rgba(245,158,11,0.2);
}
.warmup-health--behind {
  background: rgba(239,68,68,0.08); color: var(--color-red);
  border: 1px solid rgba(239,68,68,0.2);
}
.warmup-health--neutral {
  background: rgba(156,163,175,0.08); color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* Bar chart */
.warmup-chart { padding: 8px 0; }
.warmup-bar-chart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 160px; padding: 0 4px;
  border-bottom: 1px solid var(--border);
}
.warmup-bar-col {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  height: 100%; justify-content: flex-end; min-width: 0;
}
.warmup-bar {
  width: 100%; max-width: 28px; min-width: 4px;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(37,99,235,0.5) 100%);
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}
.warmup-bar-label {
  font-size: 0.65rem; color: var(--text-secondary);
  padding-top: 4px; text-align: center;
}

/* Tips */
.warmup-tips__list {
  display: flex; flex-direction: column; gap: 10px;
}
.warmup-tip {
  padding: 14px 18px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 0.88rem; color: var(--text-secondary);
  line-height: 1.5;
}
.warmup-tip strong {
  color: var(--text-primary); display: block; margin-bottom: 2px;
}

@media (max-width: 600px) {
  .warmup-campaign-card { padding: 14px 16px; }
  .warmup-campaign-card__main { flex-direction: column; align-items: flex-start; }
  .warmup-detail-header__top { flex-direction: column; }
  .warmup-bar-chart { height: 120px; }
}

/* ══════════════════════════════════════════════════════
   FULL AUDIT — Severity Bar, ESP Badge, Fix Cards
   ══════════════════════════════════════════════════════ */

/* Severity summary bar */
.fa-severity-bar {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 12px 16px;
  background: var(--bg-2); border-radius: var(--radius-2);
  border: 1px solid var(--border-1);
}
.fa-sev {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.78rem; font-weight: 700;
  padding: 4px 10px; border-radius: 20px;
}
.fa-sev--critical { background: rgba(220,38,38,0.08); color: var(--color-red); }
.fa-sev--warning  { background: rgba(217,119,6,0.08); color: var(--color-yellow); }
.fa-sev--pass     { background: rgba(5,150,105,0.08); color: var(--color-green); }
.fa-sev--info     { background: rgba(59,130,246,0.08); color: var(--color-blue); }

/* ESP detection badge */
.fa-esp-badge {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; margin-bottom: 16px;
  background: #fff; border: 1px solid var(--border-1);
  border-left: 3px solid var(--brand); border-radius: var(--radius-2);
}
.fa-esp-icon {
  font-size: 1.3rem; line-height: 1;
}
.fa-esp-text {
  font-size: 0.85rem; color: var(--text-primary);
}
.fa-esp-text strong {
  font-weight: 700;
}
.fa-esp-text small {
  display: block; font-size: 0.72rem; color: var(--text-hint); margin-top: 2px;
  font-family: 'SF Mono','Fira Code',monospace;
}

/* Fix record cards */
.fa-fix-card {
  background: #fff; border: 1px solid var(--border-1);
  border-radius: var(--radius-2); padding: 20px;
  margin-bottom: 12px;
  animation: fadeSlideUp 0.3s ease both;
}
.fa-fix-header {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.fa-fix-action {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; letter-spacing: 0.04em;
}
.fa-fix-action--red    { background: rgba(220,38,38,0.08); color: var(--color-red); }
.fa-fix-action--orange { background: rgba(217,119,6,0.08); color: var(--color-orange, #d97706); }
.fa-fix-action--yellow { background: rgba(217,119,6,0.08); color: var(--color-yellow); }
.fa-fix-action--blue   { background: rgba(59,130,246,0.08); color: var(--color-blue); }
.fa-fix-title {
  font-size: 0.92rem; font-weight: 700; color: var(--text-primary);
  margin: 0;
}
.fa-fix-esp {
  font-size: 0.68rem; font-weight: 600; color: var(--brand);
  padding: 2px 8px; background: rgba(37,99,235,0.08);
  border-radius: 4px;
}
.fa-fix-desc {
  font-size: 0.82rem; color: var(--text-secondary); margin: 0 0 14px;
  line-height: 1.5;
}

/* DNS record block */
.fa-fix-record {
  background: var(--bg-2); border: 1px solid var(--border-1);
  border-radius: var(--radius-1); overflow: hidden;
}
.fa-fix-record-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-1);
  font-size: 0.75rem;
}
.fa-fix-label {
  color: var(--text-hint); font-weight: 600;
}
.fa-fix-host, .fa-fix-type {
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: 0.75rem; color: var(--text-primary);
  background: rgba(0,0,0,0.04); padding: 2px 6px;
  border-radius: 3px;
}
.fa-fix-record-value {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 12px;
}
.fa-fix-code {
  flex: 1; margin: 0; padding: 0;
  font-family: 'SF Mono','Fira Code',monospace;
  font-size: 0.78rem; line-height: 1.6;
  color: var(--text-primary); word-break: break-all;
  white-space: pre-wrap; background: none;
}
.fa-copy-btn {
  flex-shrink: 0;
  padding: 5px 12px;
  font-size: 0.72rem; font-weight: 700;
  color: var(--brand); background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 4px; cursor: pointer;
  transition: all 0.15s ease;
}
.fa-copy-btn:hover {
  background: rgba(37,99,235,0.15);
}
.fa-copy-btn--copied {
  color: var(--color-green); background: rgba(5,150,105,0.12);
  border-color: rgba(5,150,105,0.3);
}

/* Instructions */
.fa-fix-instructions {
  margin-top: 12px; font-size: 0.8rem; color: var(--text-secondary);
  line-height: 1.6;
}
.fa-fix-instructions strong {
  color: var(--text-primary); font-size: 0.78rem;
}
.fa-fix-instructions ol {
  margin: 6px 0 0 0; padding-left: 20px;
}
.fa-fix-instructions li {
  margin-bottom: 4px;
}

/* Warnings */
.fa-fix-warnings {
  margin-top: 12px;
}
.fa-fix-warning {
  font-size: 0.75rem; color: var(--color-yellow);
  margin: 0 0 4px; line-height: 1.5;
}

/* Section subtitle */
.sender-section__sub {
  font-size: 0.8rem; color: var(--text-hint);
  margin: -4px 0 12px;
}

/* Full Audit CTA (embedded in Email Test results) */
.fa-cta-card {
  display: flex; align-items: center; gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(3,160,113,0.08));
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: var(--radius-2);
  margin-bottom: 16px;
}
.fa-cta-body { flex: 1; }
.fa-cta-title {
  font-size: 1rem; font-weight: 700; color: var(--text-primary);
  margin: 0 0 4px;
}
.fa-cta-desc {
  font-size: 0.82rem; color: var(--text-secondary);
  margin: 0; line-height: 1.5;
}
.fa-cta-desc strong {
  color: var(--brand); font-weight: 700;
}
.fa-cta-btn {
  flex-shrink: 0; white-space: nowrap; width: auto; max-width: 220px;
}
.fa-cta-inline-results {
  margin-top: 4px;
}
.fa-cta-loading {
  display: flex; flex-direction: column; align-items: center;
  padding: 32px 0; gap: 12px;
}

/* Mobile fixes */
@media (max-width: 600px) {
  .fa-fix-record-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .fa-fix-record-value { flex-direction: column; }
  .fa-copy-btn { align-self: flex-end; }
  .fa-fix-header { flex-direction: column; align-items: flex-start; }
  .fa-cta-card { flex-direction: column; text-align: center; }
  .fa-cta-btn { width: 100%; }
}


/* ══════════════════════════════════════════════════════
   EMAIL VERIFIER
   ══════════════════════════════════════════════════════ */

/* Verdict banner */
.ev-verdict {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border-1);
  background: #fff;
}
.ev-verdict__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  flex-shrink: 0;
  color: #fff;
}
.ev-verdict--valid  .ev-verdict__icon { background: #15c182; }
.ev-verdict--invalid .ev-verdict__icon { background: #e74c3c; }
.ev-verdict--risky  .ev-verdict__icon { background: #f0ad4e; }
.ev-verdict--unknown .ev-verdict__icon { background: #8b95a5; }

.ev-verdict__body { flex: 1; }
.ev-verdict__label {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-1);
}
.ev-verdict__detail {
  font-size: .875rem;
  color: var(--text-2);
  margin: 2px 0 0;
}
.ev-verdict__score {
  text-align: center;
  flex-shrink: 0;
}
.ev-verdict__score-num {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}
.ev-verdict__score-label {
  display: block;
  font-size: .75rem;
  color: var(--text-3);
}
.score--good { color: #15c182; }
.score--warn { color: #f0ad4e; }
.score--bad  { color: #e74c3c; }

/* Meta row */
.ev-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.ev-meta__item {
  flex: 1 1 160px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 10px;
  padding: 12px 16px;
}
.ev-meta__label {
  display: block;
  font-size: .75rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 2px;
}
.ev-meta__value {
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-1);
  word-break: break-all;
}

/* Check cards */
.ev-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.ev-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 10px;
  padding: 14px 16px;
}
.ev-check__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  color: #fff;
}
.ev-check--pass .ev-check__icon { background: #15c182; }
.ev-check--fail .ev-check__icon { background: #e74c3c; }
.ev-check--neutral .ev-check__icon { background: #8b95a5; }
.ev-check__body { flex: 1; }
.ev-check__label {
  font-weight: 600;
  font-size: .9rem;
  color: var(--text-1);
}
.ev-check__detail {
  display: block;
  font-size: .8rem;
  color: var(--text-2);
  margin-top: 2px;
}

/* Risk factors */
.ev-risks { display: flex; flex-direction: column; gap: 8px; }
.ev-risk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fff8f0;
  border: 1px solid #f0ad4e44;
  border-radius: 8px;
  font-size: .875rem;
  color: var(--text-1);
}
.ev-risk__icon { font-size: 18px; color: #f0ad4e; }

/* Mobile */
@media (max-width: 600px) {
  .ev-verdict { flex-direction: column; text-align: center; }
  .ev-meta { flex-direction: column; }
  .ev-checks { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════════════════
   NEXT STEPS — Cross-tool CTAs (shared across all tools)
   ══════════════════════════════════════════════════════ */

.et-next-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.et-next-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-1);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.et-next-step:hover {
  border-color: var(--brand);
  box-shadow: 0 2px 8px rgba(37,99,235,.12);
  transform: translateY(-1px);
}
.et-next-step__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  color: #fff;
}
.et-next-step--green .et-next-step__icon  { background: #15c182; }
.et-next-step--blue .et-next-step__icon   { background: #3b82f6; }
.et-next-step--orange .et-next-step__icon { background: #f0ad4e; }
.et-next-step--red .et-next-step__icon    { background: #e74c3c; }
.et-next-step--yellow .et-next-step__icon { background: #eab308; }

.et-next-step--green  { border-left: 3px solid #15c182; }
.et-next-step--blue   { border-left: 3px solid #3b82f6; }
.et-next-step--orange { border-left: 3px solid #f0ad4e; }
.et-next-step--red    { border-left: 3px solid #e74c3c; }
.et-next-step--yellow { border-left: 3px solid #eab308; }

.et-next-step__body { flex: 1; min-width: 0; }
.et-next-step__title {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 2px;
}
.et-next-step__desc {
  font-size: .82rem;
  color: var(--text-2);
  line-height: 1.4;
  margin: 0;
}
.et-next-step__btn {
  flex-shrink: 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--brand);
  white-space: nowrap;
}

/* Recommendation tool links */
.rec-item__tool-link {
  display: inline-block;
  margin-top: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.rec-item__tool-link:hover {
  text-decoration: underline;
}

/* Mobile */
@media (max-width: 600px) {
  .et-next-step { flex-direction: column; text-align: center; gap: 10px; }
  .et-next-step__btn { align-self: center; }
}

/* ══════════════════════════════════════════════════════
   AUTH & ACCOUNT PAGES
   ══════════════════════════════════════════════════════ */

/* Nav auth links */
.nav-spacer { flex: 1; }
.nav-link--user { display: inline-flex; align-items: center; gap: 5px; }
.nav-link--user svg { opacity: 0.7; }
.nav-link--cta {
  background: var(--brand);
  color: #fff !important;
  padding: 6px 16px;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: 0.82rem;
  transition: background 0.15s, transform 0.1s;
}
.nav-link--cta:hover { background: var(--brand-dark); transform: translateY(-1px); }

/* Auth page layout */
.auth-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: calc(100vh - 64px);
  padding: 60px 20px 80px;
  background: var(--bg-1);
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl, 16px);
  padding: 40px 36px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.auth-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 6px;
  text-align: center;
}
.auth-card__sub {
  font-size: 0.9rem;
  color: var(--text-3);
  text-align: center;
  margin: 0 0 28px;
}
.auth-card__footer {
  font-size: 0.85rem;
  color: var(--text-3);
  text-align: center;
  margin-top: 20px;
}
.auth-card__footer a { color: var(--brand); font-weight: 600; text-decoration: none; }
.auth-card__footer a:hover { text-decoration: underline; }

/* Auth form */
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-label { display: flex; flex-direction: column; gap: 4px; }
.auth-label span { font-size: 0.82rem; font-weight: 600; color: var(--text-2); }
.auth-label small { font-weight: 400; color: var(--text-4); }
.auth-label input {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
  font-size: 0.9rem;
  font-family: inherit;
  background: var(--bg-1);
  color: var(--text-1);
  transition: border-color 0.15s;
}
.auth-label input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

/* Auth buttons */
.auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: var(--r-full);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.auth-btn:hover { background: var(--brand-dark, #15803d); transform: translateY(-1px); }
.auth-btn--outline {
  background: transparent;
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.auth-btn--outline:hover { background: rgba(37,99,235,0.06); }
.auth-btn--danger { color: var(--red, #ef4444); border-color: var(--red, #ef4444); }
.auth-btn--danger:hover { background: rgba(239,68,68,0.06); }
.auth-btn--sm { padding: 6px 14px; font-size: 0.8rem; }
.auth-btn--featured { background: var(--brand); box-shadow: 0 4px 14px rgba(37,99,235,0.3); }

/* Auth alerts */
.auth-alert {
  padding: 10px 14px;
  border-radius: var(--r-md, 8px);
  font-size: 0.85rem;
  margin-bottom: 16px;
}
.auth-alert--error { background: rgba(239,68,68,0.08); color: var(--red, #ef4444); border: 1px solid rgba(239,68,68,0.2); }
.auth-alert--success { background: rgba(37,99,235,0.08); color: var(--brand); border: 1px solid rgba(37,99,235,0.2); }

/* Account page */
.account-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.account-section:first-of-type { margin-top: 24px; padding-top: 0; border-top: none; }
.account-section__title { font-size: 0.95rem; font-weight: 700; color: var(--text-1); margin: 0 0 14px; }
.account-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.account-label { font-size: 0.85rem; color: var(--text-3); }
.account-value { font-size: 0.85rem; font-weight: 600; color: var(--text-1); }
.account-tier { padding: 3px 10px; border-radius: var(--r-full); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.account-tier--free { background: rgba(100,116,139,0.1); color: var(--text-3); }
.account-tier--pro { background: rgba(37,99,235,0.1); color: var(--brand); }
.account-tier--agency { background: rgba(37,99,235,0.1); color: #6366f1; }
.account-tier--api { background: rgba(234,179,8,0.1); color: #ca8a04; }
.account-api-key { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.account-api-key code { font-size: 0.82rem; background: var(--bg-1); padding: 6px 12px; border-radius: var(--r-md, 8px); border: 1px solid var(--border); }
.account-upgrade {
  margin-top: 24px;
  padding: 20px;
  background: rgba(37,99,235,0.04);
  border: 1px solid rgba(37,99,235,0.15);
  border-radius: var(--r-lg, 12px);
  text-align: center;
}
.account-upgrade p { font-size: 0.88rem; color: var(--text-2); margin: 0 0 14px; }

/* Pricing page */
.pricing-title { font-size: 1.8rem; }
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.auth-card:has(.pricing-grid) { max-width: 880px; }
.pricing-card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg, 12px);
  padding: 28px 24px;
  background: var(--surface-1);
  position: relative;
  display: flex;
  flex-direction: column;
}
.pricing-card--featured { border-color: var(--brand); box-shadow: 0 4px 20px rgba(37,99,235,0.12); }
.pricing-card--current { border-color: var(--brand); }
.pricing-card__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--brand);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 12px;
  border-radius: var(--r-full);
}
.pricing-card__name { font-size: 1.1rem; font-weight: 700; color: var(--text-1); margin: 0 0 8px; }
.pricing-card__price { display: flex; align-items: baseline; gap: 2px; margin-bottom: 20px; }
.pricing-card__amount { font-size: 2rem; font-weight: 800; color: var(--text-1); }
.pricing-card__period { font-size: 0.85rem; color: var(--text-3); }
.pricing-card__features { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.pricing-card__features li {
  font-size: 0.82rem;
  color: var(--text-2);
  padding: 5px 0 5px 20px;
  position: relative;
}
.pricing-card__features li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--brand);
  font-weight: 700;
}
.pricing-card__action { text-align: center; }
.pricing-card__current-label { font-size: 0.82rem; font-weight: 600; color: var(--text-3); }
.pricing-card__reassure { font-size: 0.72rem; color: var(--text-3); margin: 10px 0 0; font-weight: 500; }
.pricing-card__desc { font-size: 0.82rem; color: var(--text-3); margin: 0 0 16px; line-height: 1.5; }
.pricing-card__feature--highlight {
  color: var(--text-1) !important;
  font-weight: 600;
}
.pricing-card__feature--highlight::before { color: #7c3aed !important; }
.pricing-card--featured .pricing-card__feature--highlight::before { color: #7c3aed !important; }
.pricing-card--featured .pricing-card__feature--highlight { color: var(--text-1) !important; }

/* ── Comparison Table ── */
.pricing-compare { margin-top: 40px; }
.pricing-compare__title { font-size: 1.15rem; font-weight: 700; text-align: center; margin: 0 0 20px; color: var(--text-1); }
.pricing-compare__table-wrap { overflow-x: auto; }
.pricing-compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.pricing-compare__table th,
.pricing-compare__table td {
  padding: 10px 14px;
  text-align: center;
  border-bottom: 1px solid var(--border-1);
}
.pricing-compare__table th:first-child,
.pricing-compare__table td:first-child { text-align: left; color: var(--text-2); }
.pricing-compare__table th { font-weight: 700; color: var(--text-1); font-size: 0.85rem; padding-bottom: 14px; }
.pricing-compare__th--featured { color: var(--brand) !important; }
.pricing-compare__section td {
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3) !important;
  padding-top: 18px;
  border-bottom: 2px solid var(--border-1);
}

.pricing-api-note {
  margin-top: 32px;
  padding: 24px;
  background: var(--bg-1);
  border-radius: var(--r-lg, 12px);
  text-align: center;
}
.pricing-api-note h3 { font-size: 1rem; color: var(--text-1); margin: 0 0 8px; }
.pricing-api-note p { font-size: 0.85rem; color: var(--text-3); margin: 0 0 16px; }

@media (max-width: 600px) {
  .auth-card { padding: 28px 20px; }
  .pricing-grid { grid-template-columns: 1fr; }
  .nav-link--cta { display: none; }
}

/* ── Bulk Verify ──────────────────────────────────────── */
.auth-card:has(.bulk-verify) { max-width: 800px; }

.bulk-upload-zone {
  border: 2px dashed var(--border-2);
  border-radius: var(--r-lg, 12px);
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: var(--bg-2);
}
.bulk-upload-zone:hover,
.bulk-upload-zone--hover {
  border-color: var(--brand);
  background: var(--brand-muted);
}
.bulk-upload-zone:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.bulk-progress {
  width: 100%;
  height: 12px;
  background: var(--bg-4);
  border-radius: 6px;
  overflow: hidden;
}
.bulk-progress__bar {
  height: 100%;
  background: var(--brand);
  border-radius: 6px;
  transition: width 0.4s ease;
  min-width: 0;
}

.bulk-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.bulk-summary__card {
  text-align: center;
  padding: 16px 8px;
  border-radius: var(--r-lg, 12px);
  border: 1px solid var(--border-1);
  background: var(--bg-1);
}
.bulk-summary__card--green  { border-color: var(--green);  background: var(--green-muted); }
.bulk-summary__card--red    { border-color: var(--red);    background: var(--red-muted); }
.bulk-summary__card--yellow { border-color: var(--yellow); background: var(--yellow-muted); }
.bulk-summary__card--muted  { border-color: var(--border-2); background: var(--bg-4); }
.bulk-summary__count {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
}
.bulk-summary__label {
  display: block;
  font-size: 0.78rem;
  color: var(--text-3);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.bulk-jobs-list {
  overflow-x: auto;
}
.bulk-jobs-list table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.bulk-jobs-list th {
  text-align: left;
  font-weight: 600;
  color: var(--text-3);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-bottom: 2px solid var(--border-1);
}
.bulk-jobs-list td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-1);
  color: var(--text-2);
}
.bulk-jobs-list tr:hover td {
  background: var(--bg-2);
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge--green  { background: var(--green-muted);  color: var(--green); }
.badge--red    { background: var(--red-muted);    color: var(--red); }
.badge--yellow { background: var(--yellow-muted); color: var(--yellow); }
.badge--muted  { background: var(--bg-4);         color: var(--text-3); }

.btn--small {
  padding: 4px 10px;
  font-size: 0.78rem;
}

@media (max-width: 600px) {
  .bulk-summary { grid-template-columns: repeat(2, 1fr); }
  .auth-card:has(.bulk-verify) { max-width: 100%; }
}

/* ── Cloud History ───────────────────────────────────── */
.auth-card:has(.history-table) { max-width: 900px; }

/* ── Domain Monitors ───────────────────────────────── */
.monitor-list { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.monitor-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-2);
  transition: border-color 0.15s;
}
.monitor-card:hover { border-color: var(--brand-border); }

.monitor-card__info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.monitor-card__status {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-3);
}
.monitor-card__status--clean  { background: var(--green, #22c55e); }
.monitor-card__status--listed { background: var(--red, #ef4444); }
.monitor-card__status--unknown { background: var(--text-3); }

.monitor-card__domain {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-1);
}
.monitor-card__meta {
  font-size: 0.82rem;
  color: var(--text-3);
}
.monitor-card__sub {
  font-size: 0.8rem;
  color: var(--text-3);
  margin-top: 2px;
}

.monitor-card__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.monitor-card__history {
  width: 100%;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 4px;
}

.monitor-add-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 16px 0 8px;
  flex-wrap: wrap;
}
.monitor-add-form .input {
  flex: 1;
  min-width: 140px;
}

.monitor-limit {
  font-size: 0.85rem;
  color: var(--text-3);
  margin: 0 0 4px;
}

/* ── Alert Bell ────────────────────────────────────── */
.alert-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.alert-bell__badge {
  position: absolute;
  top: -4px; right: -6px;
  background: var(--red, #ef4444);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

.alert-list {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 100;
  padding: 8px 0;
}
.alert-list__item {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 0.84rem;
  color: var(--text-2);
  cursor: pointer;
}
.alert-list__item:hover { background: var(--bg-2); }
.alert-list__item--unread { font-weight: 600; color: var(--text-1); }

/* ── Danger button ─────────────────────────────────── */
.btn--danger {
  background: var(--red-muted, rgba(239,68,68,0.08));
  color: var(--red, #ef4444);
  border: 1px solid transparent;
}
.btn--danger:hover {
  background: var(--red, #ef4444);
  color: #fff;
}

.btn--outline {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border);
}
.btn--outline:hover {
  border-color: var(--brand);
  color: var(--brand);
}

@media (max-width: 600px) {
  .auth-card:has(.monitors-page) { max-width: 100%; }
  .monitor-card { flex-direction: column; align-items: flex-start; }
  .monitor-card__actions { width: 100%; justify-content: flex-end; }
  .monitor-add-form { flex-direction: column; }
  .monitor-add-form .input { width: 100%; min-width: unset; }
}

/* ── BLOG ───────────────────────────────────────── */

/* Blog listing */
.blog-hero { background: #0c1a3a; padding: 60px 24px 40px; text-align: center; }
.blog-hero h1 { color: #fff; font-size: 2rem; margin: 0 0 8px; }
.blog-hero p { color: #94a3b8; font-size: 1.05rem; }

.blog-filters { display: flex; gap: 8px; padding: 20px 24px; max-width: 1200px; margin: 0 auto; flex-wrap: wrap; }
.blog-filter-pill { padding: 6px 16px; border-radius: 999px; border: 1px solid #e2e8f0; color: #64748b; font-size: 0.82rem; text-decoration: none; font-weight: 500; transition: all 0.2s; }
.blog-filter-pill:hover, .blog-filter-pill--active { background: #16a34a; color: #fff; border-color: #16a34a; }

.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; max-width: 1200px; margin: 0 auto; padding: 24px; }

.blog-card { display: block; text-decoration: none; color: inherit; background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; }
.blog-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }
.blog-card__image-link { display: block; text-decoration: none; }
.blog-card__image { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: linear-gradient(135deg, #0c1a3a 0%, #16a34a 100%); }

/* CSS blog card cover — fallback when Pillow image missing */
.blog-card__cover {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 ratio */
  background: linear-gradient(160deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  overflow: hidden;
}
.blog-card__cover-accent {
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: #15c182; z-index: 1;
}
.blog-card__cover-dots {
  position: absolute; top: 16px; right: 16px;
  width: 80px; height: 80px;
  background-image: radial-gradient(circle, rgba(21,193,130,0.18) 1.5px, transparent 1.5px);
  background-size: 14px 14px; z-index: 1;
}
.blog-card__cover-tag {
  position: absolute; top: 28px; left: 24px; z-index: 1;
  font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: #15c182; background: rgba(21,193,130,0.12); border: 1px solid rgba(21,193,130,0.25);
  padding: 3px 10px; border-radius: 999px;
}
.blog-card__cover-title {
  position: absolute; top: 56px; left: 24px; right: 24px; z-index: 1;
  font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.35;
  margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card__cover-brand {
  position: absolute; bottom: 16px; left: 24px; z-index: 1;
  font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.7);
  letter-spacing: -0.01em;
}
.blog-card__cover-check {
  color: #15c182; margin-left: 2px; font-size: 0.9rem;
}
.blog-card__cover-img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 3;
}
.blog-card__body { padding: 20px; }
.blog-card__category { display: inline-block; font-size: 0.7rem; font-weight: 600; color: #16a34a; background: #f0fdf4; padding: 2px 10px; border-radius: 999px; margin-bottom: 8px; }
.blog-card__title { font-size: 1.1rem; font-weight: 700; color: #0c1a3a; margin: 0 0 8px; line-height: 1.4; }
.blog-card__title a { color: inherit; text-decoration: none; }
.blog-card__excerpt { font-size: 0.88rem; color: #64748b; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-card__meta { display: flex; justify-content: space-between; font-size: 0.75rem; color: #94a3b8; margin-top: 16px; padding-top: 12px; border-top: 1px solid #f1f5f9; }

/* ── Guided Tour ──────────────────────────────────── */
.et-tour-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; padding: 0; border: none; background: none;
  color: var(--text-3, #94a3b8); font-size: 0.8rem; font-weight: 500;
  cursor: pointer; transition: color 0.15s;
}
.et-tour-trigger:hover { color: var(--brand, #2563eb); }
.et-tour-trigger svg { opacity: 0.7; }

.tour-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: fadeIn 0.2s ease;
}
.tour-overlay.hidden { display: none; }
.tour-modal {
  background: #fff; border-radius: 16px; max-width: 460px; width: 100%;
  padding: 32px 28px 24px; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.tour-close {
  position: absolute; top: 12px; right: 16px; background: none; border: none;
  font-size: 1.4rem; color: #94a3b8; cursor: pointer; line-height: 1;
}
.tour-close:hover { color: #334155; }

.tour-slide { text-align: center; }
.tour-slide__icon {
  width: 56px; height: 56px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.tour-slide__title {
  font-size: 1.15rem; font-weight: 700; color: #0f172a; margin: 0 0 8px;
}
.tour-slide__text {
  font-size: 0.88rem; color: #475569; line-height: 1.6; margin: 0 0 20px;
}
.tour-slide__visual {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px;
  padding: 16px; margin-bottom: 8px;
}

/* ── Tour animations ── */

/* Slide 1: Cursor click */
.tour-anim[data-anim="click"] { position: relative; overflow: hidden; }
.tour-anim-btn { display: inline-block; padding: 10px 24px; background: #2563eb; color: #fff; border-radius: 999px; font-size: 0.85rem; font-weight: 600; transition: transform 0.1s; }
.tour-cursor {
  position: absolute; bottom: 12px; right: 30%; opacity: 0;
  transition: transform 0.3s ease;
}
.tour-ripple {
  position: absolute; bottom: 24px; right: calc(30% + 4px);
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(37,99,235,0.3); opacity: 0;
  transform: scale(0);
}
.tour-anim--active .tour-cursor {
  animation: cursorMove 3s ease-in-out infinite;
}
.tour-anim--active .tour-ripple {
  animation: ripplePulse 3s ease-in-out infinite;
}
.tour-anim--active .tour-anim-btn {
  animation: btnPress 3s ease-in-out infinite;
}
@keyframes cursorMove {
  0%,20% { opacity: 0; transform: translate(40px, 20px); }
  40% { opacity: 1; transform: translate(0, 0); }
  50% { transform: translate(1px, 1px); }
  55% { transform: translate(0, 0); }
  80%,100% { opacity: 0; transform: translate(0, -10px); }
}
@keyframes ripplePulse {
  0%,48% { opacity: 0; transform: scale(0); }
  50% { opacity: 0.6; transform: scale(0.5); }
  65% { opacity: 0; transform: scale(2.5); }
  100% { opacity: 0; transform: scale(0); }
}
@keyframes btnPress {
  0%,48% { transform: scale(1); }
  50% { transform: scale(0.96); }
  55% { transform: scale(1.02); }
  60%,100% { transform: scale(1); }
}

/* Slide 2: Email compose + typewriter */
.tour-mock-compose {
  text-align: left; font-size: 0.8rem;
}
.tour-mock-compose__row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid #e2e8f0;
}
.tour-mock-compose__label { color: #94a3b8; font-weight: 600; width: 50px; flex-shrink: 0; }
.tour-mock-compose__field {
  color: #0f172a; font-family: 'Inter', sans-serif; min-height: 1.2em;
  border-right: 2px solid #2563eb; animation: blink 0.6s step-end infinite;
}
.tour-mock-compose__body {
  color: #64748b; padding: 10px 0; min-height: 1.4em; font-size: 0.78rem;
  border-right: 2px solid transparent;
}
.tour-mock-compose__send {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 14px; background: #2563eb; color: #fff;
  border-radius: 6px; font-size: 0.75rem; font-weight: 600;
  margin-top: 8px; opacity: 0;
}
.tour-anim--active .tour-mock-compose__send {
  animation: sendAppear 3.5s ease forwards;
}
@keyframes blink { 50% { border-color: transparent; } }
@keyframes sendAppear {
  0%,70% { opacity: 0; transform: translateY(4px); }
  80% { opacity: 1; transform: translateY(0); }
  90% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* Slide 3: Scan items appearing */
.tour-mock-scan { display: flex; flex-direction: column; gap: 6px; }
.tour-scan-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 10px; border-radius: 6px; background: #fff;
  border: 1px solid #e2e8f0; font-size: 0.78rem;
  opacity: 0; transform: translateX(-10px);
}
.tour-scan-label { color: #334155; font-weight: 500; }
.tour-scan-badge { padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; }
.tour-scan-badge--pass { background: #f0fdf4; color: #16a34a; }
.tour-scan-badge--fail { background: #fef2f2; color: #dc2626; }
.tour-scan-badge--warn { background: #fffbeb; color: #d97706; }
.tour-anim--active .tour-scan-item {
  animation: scanIn 0.4s ease forwards;
  animation-delay: calc(var(--d) * 0.35s);
}
.tour-scan-bar { height: 4px; border-radius: 2px; background: #e2e8f0; margin-top: 4px; overflow: hidden; }
.tour-scan-bar__fill { height: 100%; width: 0; background: #2563eb; border-radius: 2px; }
.tour-anim--active .tour-scan-bar__fill {
  animation: barFill 2s ease forwards 0.2s;
}
@keyframes scanIn {
  to { opacity: 1; transform: translateX(0); }
}
@keyframes barFill {
  to { width: 100%; }
}

/* Slide 4: Grade cards + score bars */
.tour-mock-report { display: flex; flex-direction: column; gap: 12px; }
.tour-grade-row { display: flex; gap: 10px; justify-content: center; }
.tour-grade-card {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  opacity: 0; transform: scale(0.5) rotateY(90deg);
}
.tour-grade-card__ltr {
  width: 40px; height: 40px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; color: #fff;
}
.tour-grade-card__name { font-size: 0.7rem; color: #64748b; font-weight: 600; }
.tour-anim--active .tour-grade-card {
  animation: gradeFlip 0.5s ease forwards;
  animation-delay: calc(var(--d) * 0.2s);
}
@keyframes gradeFlip {
  0% { opacity: 0; transform: scale(0.5) rotateY(90deg); }
  60% { transform: scale(1.1) rotateY(-5deg); }
  100% { opacity: 1; transform: scale(1) rotateY(0); }
}

.tour-score-row { display: flex; flex-direction: column; gap: 8px; }
.tour-score-bar {
  display: flex; align-items: center; gap: 8px; font-size: 0.75rem;
  opacity: 0;
}
.tour-score-bar__label { width: 70px; color: #64748b; font-weight: 600; flex-shrink: 0; }
.tour-score-bar__track { flex: 1; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.tour-score-bar__fill { height: 100%; width: 0; border-radius: 4px; }
.tour-score-bar__val { width: 45px; text-align: right; font-weight: 700; color: #0f172a; }
.tour-anim--active .tour-score-bar {
  animation: fadeIn 0.3s ease forwards;
  animation-delay: calc(var(--d) * 0.2s);
}
.tour-anim--active .tour-score-bar__fill {
  animation: scoreFill 0.8s ease forwards;
  animation-delay: calc(var(--d) * 0.2s + 0.3s);
}
@keyframes scoreFill { to { width: var(--w); } }

/* Nav */
.tour-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid #f1f5f9;
}
.tour-dots { display: flex; gap: 6px; }
.tour-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #e2e8f0;
  transition: background 0.2s;
}
.tour-dot--active { background: #2563eb; }
.tour-btns { display: flex; gap: 8px; }
.tour-btn {
  padding: 8px 20px; border-radius: 8px; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; border: none; transition: all 0.15s;
}
.tour-btn--back { background: #f1f5f9; color: #475569; }
.tour-btn--back:hover { background: #e2e8f0; }
.tour-btn--next { background: #2563eb; color: #fff; }
.tour-btn--next:hover { background: #1d4ed8; }
.tour-btn.hidden { display: none; }

@media (max-width: 500px) {
  .tour-modal { padding: 24px 20px 20px; }
  .tour-slide__title { font-size: 1rem; }
  .tour-mock-grades { gap: 8px; }
}

/* Single post */
.blog-post { max-width: 760px; margin: 0 auto; padding: 40px 24px 60px; }
.blog-breadcrumb { font-size: 0.8rem; color: #94a3b8; margin-bottom: 24px; }
.blog-breadcrumb a { color: #16a34a; text-decoration: none; }
.blog-post__category { display: inline-block; font-size: 0.72rem; font-weight: 600; color: #16a34a; background: #f0fdf4; padding: 3px 12px; border-radius: 999px; margin-bottom: 12px; }
.blog-post h1 { font-size: 2rem; color: #0c1a3a; line-height: 1.3; margin: 0 0 12px; }
.blog-post__meta { font-size: 0.85rem; color: #94a3b8; margin-bottom: 32px; }
.blog-post__featured { width: 100%; border-radius: 12px; margin-bottom: 32px; }
.blog-post__content h2 { font-size: 1.4rem; color: #0c1a3a; margin: 36px 0 12px; }
.blog-post__content h3 { font-size: 1.15rem; color: #0c1a3a; margin: 28px 0 8px; }
.blog-post__content p { font-size: 1rem; color: #334155; line-height: 1.8; margin: 0 0 16px; }
.blog-post__content ul, .blog-post__content ol { color: #334155; line-height: 1.8; margin: 0 0 16px; padding-left: 24px; }
.blog-post__content a { color: #16a34a; }
.blog-post__content img { max-width: 100%; border-radius: 8px; margin: 16px 0; }

/* Blog CTA blocks (inline in posts) */
.blog-cta { background: #f0fdf4; border-left: 4px solid #16a34a; border-radius: 0 8px 8px 0; padding: 20px 24px; margin: 28px 0; }
.blog-cta p { color: #334155; margin: 0 0 12px; font-size: 0.95rem; }
.blog-cta__btn { display: inline-block; background: #16a34a; color: #fff; padding: 10px 24px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.blog-cta__btn:hover { background: #15803d; }

/* FAQ section in posts */
.blog-faq { margin-top: 40px; padding-top: 32px; border-top: 1px solid #e2e8f0; }
.blog-faq h2 { font-size: 1.4rem; color: #0c1a3a; margin-bottom: 20px; }
.blog-faq__item { margin-bottom: 20px; }
.blog-faq__item h3 { font-size: 1rem; color: #0c1a3a; margin-bottom: 6px; }
.blog-faq__item p { font-size: 0.92rem; color: #64748b; line-height: 1.6; }

/* Related posts */
.blog-related { max-width: 1200px; margin: 0 auto; padding: 40px 24px 60px; border-top: 1px solid #e2e8f0; }
.blog-related h2 { font-size: 1.3rem; color: #0c1a3a; margin-bottom: 20px; }
.blog-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

/* Pagination */
.blog-pagination { display: flex; justify-content: center; gap: 12px; padding: 32px 24px; }
.blog-pagination a { padding: 8px 20px; border-radius: 8px; border: 1px solid #e2e8f0; color: #64748b; text-decoration: none; font-size: 0.88rem; }
.blog-pagination a:hover { border-color: #16a34a; color: #16a34a; }

/* Admin blog editor */
.blog-editor { display: grid; grid-template-columns: 1fr 360px; gap: 24px; padding: 24px; max-width: 1400px; margin: 0 auto; }
.blog-editor__main { display: flex; flex-direction: column; gap: 16px; }
.blog-editor__sidebar { display: flex; flex-direction: column; gap: 16px; }
.blog-editor__panel { background: #1e293b; border-radius: 12px; padding: 20px; border: 1px solid rgba(255,255,255,0.06); }
.blog-editor__panel h3 { color: #e2e8f0; font-size: 0.85rem; font-weight: 600; margin: 0 0 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.blog-editor__ai-panel { border: 1px solid rgba(22,163,74,0.3); background: rgba(22,163,74,0.05); }
.blog-editor input, .blog-editor textarea, .blog-editor select { width: 100%; background: #0f172a; border: 1px solid rgba(255,255,255,0.1); color: #e2e8f0; padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; font-family: inherit; }
.blog-editor textarea { resize: vertical; }
.blog-editor__content-area { min-height: 500px; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 0.85rem; line-height: 1.6; }
.blog-editor__title-input { font-size: 1.4rem; font-weight: 700; padding: 14px; }
.blog-editor__char-count { font-size: 0.72rem; color: #64748b; text-align: right; margin-top: 4px; }
.blog-editor__char-count--over { color: #ef4444; }
.blog-editor__actions { display: flex; gap: 12px; padding-top: 16px; }
.blog-editor__btn { padding: 10px 24px; border-radius: 8px; font-weight: 600; font-size: 0.88rem; cursor: pointer; border: none; }
.blog-editor__btn--publish { background: #16a34a; color: #fff; }
.blog-editor__btn--draft { background: transparent; color: #94a3b8; border: 1px solid rgba(255,255,255,0.1); }
.blog-editor__btn--delete { background: transparent; color: #ef4444; border: 1px solid rgba(239,68,68,0.3); margin-left: auto; }
.blog-editor__btn--ai { background: #16a34a; color: #fff; width: 100%; padding: 12px; }
.blog-editor__loading { text-align: center; color: #94a3b8; padding: 20px; display: none; }

@media (max-width: 1024px) {
  .blog-editor { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-post h1 { font-size: 1.5rem; }
  .blog-related__grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   ONBOARDING — Welcome Modal
   ══════════════════════════════════════════════════════ */
.onboard-overlay {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.7); backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease;
}
.onboard-overlay--exit { animation: fadeOut 0.3s ease forwards; }
.onboard-modal {
  background: var(--card-bg, #0f172a); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; padding: 36px; max-width: 520px; width: 92%;
  position: relative; animation: fadeSlideUp 0.4s ease;
}
.onboard-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; color: rgba(255,255,255,0.7);
  font-size: 1.4rem; cursor: pointer; line-height: 1;
}
.onboard-close:hover { color: #fff; }
.onboard-header { text-align: center; margin-bottom: 28px; }
.onboard-header h2 { font-size: 1.3rem; font-weight: 700; margin: 12px 0 6px; color: #fff; }
.onboard-header p { font-size: 0.88rem; color: rgba(255,255,255,0.75); margin: 0; }
.onboard-steps { display: flex; flex-direction: column; gap: 16px; }
.onboard-step {
  display: flex; gap: 14px; padding: 16px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02); transition: all 0.2s;
}
.onboard-step--active { border-color: rgba(21,193,130,0.3); background: rgba(21,193,130,0.05); }
.onboard-step__num {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 600;
}
.onboard-step--active .onboard-step__num { background: var(--brand, #15c182); color: #fff; }
.onboard-step__body h3 { font-size: 0.92rem; font-weight: 600; color: #fff; margin: 0 0 4px; }
.onboard-step__body p { font-size: 0.82rem; color: rgba(255,255,255,0.8); margin: 0; line-height: 1.5; }
.onboard-footer { text-align: center; margin-top: 24px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.onboard-skip {
  background: none; border: none; color: rgba(255,255,255,0.8);
  font-size: 0.82rem; cursor: pointer;
}
.onboard-skip:hover { color: rgba(255,255,255,0.75); }
.ob-welcome__cta {
  display: inline-block; padding: 12px 32px; border-radius: 10px;
  background: var(--brand, #15c182); color: #fff; font-weight: 700;
  font-size: 0.92rem; text-decoration: none; transition: transform 0.15s;
}
.ob-welcome__cta:hover { transform: scale(1.03); }
@keyframes fadeOut { to { opacity: 0; } }

/* ══════════════════════════════════════════════════════
   ONBOARDING — Getting Started Card (Dashboard)
   ══════════════════════════════════════════════════════ */
.ob-card {
  background: var(--card-bg, #0f172a); border: 1px solid rgba(21,193,130,0.2);
  border-radius: 16px; padding: 24px; margin-bottom: 20px;
  transition: opacity 0.3s;
}
.ob-card__header {
  display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px;
}
.ob-card__title {
  font-size: 1.05rem; font-weight: 700; color: #fff; margin: 0 0 2px;
}
.ob-card__progress {
  font-size: 0.78rem; color: var(--brand, #15c182); font-weight: 600;
}
.ob-card__dismiss {
  background: none; border: none; color: rgba(255,255,255,0.75);
  font-size: 1.3rem; cursor: pointer; line-height: 1; padding: 0;
}
.ob-card__dismiss:hover { color: rgba(255,255,255,0.75); }
.ob-card__bar {
  height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px;
  margin-bottom: 18px; overflow: hidden;
}
.ob-card__bar-fill {
  height: 100%; background: var(--brand, #15c182); border-radius: 3px;
  transition: width 0.6s ease;
}
.ob-card__steps { display: flex; flex-direction: column; gap: 10px; }

.ob-step {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02); transition: all 0.2s;
}
.ob-step--pending { border-color: rgba(255,255,255,0.08); }
.ob-step--pending:hover { border-color: rgba(21,193,130,0.25); background: rgba(21,193,130,0.03); }
.ob-step--done { opacity: 0.5; }
.ob-step__icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.75);
}
.ob-step--done .ob-step__icon {
  background: rgba(21,193,130,0.15); color: var(--brand, #15c182);
}
.ob-step--pending .ob-step__icon { color: rgba(255,255,255,0.75); }
.ob-step__body { flex: 1; min-width: 0; }
.ob-step__body strong {
  display: block; font-size: 0.88rem; font-weight: 600; color: #fff; margin-bottom: 2px;
}
.ob-step--done .ob-step__body strong { text-decoration: line-through; color: rgba(255,255,255,0.75); }
.ob-step__body p {
  font-size: 0.78rem; color: rgba(255,255,255,0.75); margin: 0; line-height: 1.4;
}
.ob-step__cta {
  flex-shrink: 0; font-size: 0.78rem; font-weight: 600;
  color: var(--brand, #15c182); text-decoration: none; white-space: nowrap;
}
.ob-step__cta:hover { text-decoration: underline; }

/* ── First-Use Hints ── */
.fu-hint {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%) translateY(-100%);
  background: var(--card-bg, #0f172a); border: 1px solid rgba(21,193,130,0.3);
  border-radius: 10px; padding: 14px 18px; z-index: 100;
  max-width: 320px; width: max-content;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  animation: fadeSlideUp 0.3s ease;
}
.fu-hint p { font-size: 0.82rem; color: rgba(255,255,255,0.7); margin: 0 0 10px; line-height: 1.5; }
.fu-hint__close {
  background: none; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; padding: 4px 14px; color: rgba(255,255,255,0.75);
  font-size: 0.75rem; cursor: pointer;
}
.fu-hint__close:hover { color: #fff; border-color: rgba(255,255,255,0.2); }

/* ══════════════════════════════════════════════════════
   DOMAIN HEALTH CARD (Dashboard)
   ══════════════════════════════════════════════════════ */
.dash-domain-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.dash-domain-card {
  border: 1px solid rgba(255,255,255,0.06); border-radius: 12px;
  padding: 16px; background: rgba(255,255,255,0.02);
}
.dash-domain-card__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.dash-domain-card__header strong { font-size: 0.88rem; color: #fff; }
.dash-domain-badge {
  font-size: 0.7rem; font-weight: 600; padding: 2px 8px;
  border-radius: 999px;
}
.dash-domain-score {
  display: flex; align-items: center; justify-content: center;
  gap: 0; position: relative; margin: 8px 0;
}
.dash-domain-ring { transform: rotate(-90deg); }
.dash-domain-pct {
  position: absolute; font-size: 0.95rem; font-weight: 700;
}
.dash-domain-meta {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 0.75rem; color: rgba(255,255,255,0.75);
}
.dash-domain-health-empty {
  text-align: center; padding: 20px;
  font-size: 0.85rem; color: rgba(255,255,255,0.75);
}
.dash-domain-health-empty a { color: #22c55e; }

/* ══════════════════════════════════════════════════════
   ENHANCED TREND CHART
   ══════════════════════════════════════════════════════ */
.db-trend-summary {
  display: flex; gap: 16px; align-items: center;
  margin-bottom: 10px; font-size: 0.8rem; color: rgba(255,255,255,0.75);
}
.db-trend-summary strong { color: #fff; }
.db-trend-diff { font-weight: 600; }
.dash-card__header--row {
  display: flex; align-items: center; justify-content: space-between;
}
.dash-trend-filters { display: flex; gap: 4px; }
.dash-trend-btn {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75); padding: 3px 10px; border-radius: 6px;
  font-size: 0.72rem; font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.dash-trend-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.dash-trend-btn--active {
  background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.3);
  color: #22c55e;
}
.db-chart__tooltip {
  display: none; position: absolute; bottom: 100%; left: 50%;
  transform: translateX(-50%); background: #1e293b; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px; padding: 4px 8px; font-size: 0.72rem; color: #fff;
  text-align: center; white-space: nowrap; pointer-events: none; z-index: 10;
}
.db-chart__group { position: relative; }
.db-chart__group:hover .db-chart__tooltip { display: block; }

/* ══════════════════════════════════════════════════════
   CONVERSION NUDGES (Free-to-Paid)
   ══════════════════════════════════════════════════════ */
.upgrade-nudge {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; margin: 24px 0;
  border-radius: 12px; border: 1px solid rgba(245,158,11,0.2);
  background: rgba(245,158,11,0.05);
  animation: fadeSlideUp 0.4s ease;
}
.upgrade-nudge__icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  background: rgba(245,158,11,0.12); display: flex; align-items: center;
  justify-content: center; color: #f59e0b;
}
.upgrade-nudge__body { flex: 1; }
.upgrade-nudge__title {
  font-size: 0.9rem; font-weight: 600; color: var(--text-1, #161e2e); margin: 0 0 4px;
}
.upgrade-nudge__text {
  font-size: 0.82rem; color: var(--text-2, #4b5563); margin: 0 0 10px; line-height: 1.5;
}
.upgrade-nudge__cta {
  display: inline-block; padding: 7px 18px; background: #f59e0b;
  color: #000; font-size: 0.82rem; font-weight: 600; border-radius: 999px;
  text-decoration: none; transition: background 0.15s;
}
.upgrade-nudge__cta:hover { background: #d97706; }

/* ── Move to Primary Card ────────────────────────── */
.mtp-card {
  border: 1px solid rgba(37,99,235,0.15); border-radius: 12px;
  background: #fff; overflow: hidden;
}
.mtp-header {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; background: rgba(37,99,235,0.04);
  border-bottom: 1px solid rgba(37,99,235,0.1);
}
.mtp-header__icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(37,99,235,0.08); display: flex; align-items: center;
  justify-content: center; color: #2563eb;
}
.mtp-header__title { font-size: 0.95rem; font-weight: 700; color: var(--text-1, #0f172a); margin: 0 0 2px; }
.mtp-header__desc { font-size: 0.82rem; color: var(--text-2, #475569); margin: 0; line-height: 1.5; }
.mtp-template { padding: 16px 20px; }
.mtp-template__header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px; font-size: 0.78rem; color: var(--text-3, #94a3b8); font-weight: 600;
}
.mtp-copy-btn {
  padding: 5px 14px; border-radius: 6px; border: 1px solid #2563eb;
  background: #fff; color: #2563eb; font-size: 0.75rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s;
}
.mtp-copy-btn:hover { background: #2563eb; color: #fff; }
.mtp-template__body {
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 14px 16px; font-size: 0.78rem; line-height: 1.6;
  color: var(--text-1, #0f172a); white-space: pre-wrap; word-wrap: break-word;
  font-family: 'Inter', sans-serif; max-height: 260px; overflow-y: auto;
}
.mtp-tips { padding: 14px 20px 18px; border-top: 1px solid #f1f5f9; }
.mtp-tips__title { font-size: 0.8rem; font-weight: 700; color: var(--text-1, #0f172a); margin: 0 0 8px; }
.mtp-tips__list { margin: 0; padding-left: 18px; font-size: 0.78rem; color: var(--text-2, #475569); line-height: 1.6; }
.mtp-tips__list li { margin-bottom: 4px; }

/* ── Primary Optimizer Card ───────────────────────── */
.po-card {
  border: 1px solid rgba(139,92,246,0.15); border-radius: 12px;
  background: #fff; overflow: hidden;
}
.po-header {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; background: rgba(139,92,246,0.04);
  border-bottom: 1px solid rgba(139,92,246,0.1);
}
.po-header__icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px;
  background: rgba(139,92,246,0.08); display: flex; align-items: center;
  justify-content: center; color: #8b5cf6;
}
.po-header__title { font-size: 0.95rem; font-weight: 700; color: var(--text-1, #0f172a); margin: 0 0 2px; }
.po-header__desc { font-size: 0.82rem; color: var(--text-2, #475569); margin: 0; line-height: 1.5; }
.po-action { padding: 16px 20px; }
.po-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; border-radius: 8px; border: none;
  background: #8b5cf6; color: #fff; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: all 0.15s; text-decoration: none;
}
.po-btn:hover { background: #7c3aed; }
.po-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.po-btn--upgrade { background: #f59e0b; }
.po-btn--upgrade:hover { background: #d97706; }
.po-results { padding: 0 20px 20px; }
.po-result-section { margin-bottom: 16px; }
.po-result-label {
  font-size: 0.75rem; font-weight: 700; color: var(--text-3, #94a3b8);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
  display: flex; align-items: center; justify-content: space-between;
}
.po-result-value {
  font-size: 0.88rem; color: var(--text-1, #0f172a); line-height: 1.5;
  padding: 10px 14px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.po-result-value--subject { font-weight: 600; }
.po-result-body {
  font-size: 0.82rem; color: var(--text-1, #0f172a); line-height: 1.7;
  padding: 14px 16px; background: #f8fafc; border: 1px solid #e2e8f0;
  border-radius: 8px; white-space: pre-wrap; word-wrap: break-word;
  font-family: 'Inter', sans-serif; max-height: 300px; overflow-y: auto;
}
.po-copy-btn { font-size: 0.7rem; }
.po-changes-list {
  margin: 0; padding-left: 18px; font-size: 0.82rem;
  color: var(--text-2, #475569); line-height: 1.7;
}
.po-changes-list li { margin-bottom: 4px; }
.po-diff-list { display: flex; flex-direction: column; gap: 8px; }
.po-diff {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 0.8rem; padding: 8px 12px; background: #f8fafc;
  border: 1px solid #e2e8f0; border-radius: 6px;
}
.po-diff__before { color: #dc2626; text-decoration: line-through; }
.po-diff__arrow { color: #94a3b8; flex-shrink: 0; }
.po-diff__after { color: #16a34a; font-weight: 600; }
.po-diff__reason { font-size: 0.72rem; color: #94a3b8; width: 100%; }

/* ── Safety Warning Card ─────────────────────────── */
.safety-card {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 20px; border-radius: 12px;
  border: 1px solid rgba(239,68,68,0.15);
  background: rgba(239,68,68,0.03);
}
.safety-card__icon {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px;
  background: rgba(239,68,68,0.08); display: flex; align-items: center;
  justify-content: center; color: #ef4444;
}
.safety-card__body { flex: 1; }
.safety-card__title { font-size: 0.9rem; font-weight: 700; color: var(--text-1, #0f172a); margin: 0 0 6px; }
.safety-card__text { font-size: 0.82rem; color: var(--text-2, #475569); margin: 0 0 10px; line-height: 1.6; }
.safety-card__list {
  margin: 0 0 12px; padding-left: 18px;
  font-size: 0.78rem; color: var(--text-2, #475569); line-height: 1.6;
}
.safety-card__list li { margin-bottom: 6px; }
.safety-card__footer {
  font-size: 0.8rem; color: var(--text-1, #0f172a); margin: 0;
  padding-top: 10px; border-top: 1px solid rgba(239,68,68,0.1); line-height: 1.5;
}
.safety-card__cta {
  font-size: 0.82rem; line-height: 1.6; margin: 0;
  padding: 12px 16px; border-radius: 8px;
  background: rgba(21,193,130,0.06); border: 1px solid rgba(21,193,130,0.15);
  color: var(--text-1, #0f172a);
}

/* ── Safe Approach Section (Homepage) ────────────── */
.et-safe-approach {
  padding: 64px 24px;
  background: #fafbfc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}
.et-safe-approach__inner {
  max-width: 900px; margin: 0 auto; text-align: center;
}
.et-safe-approach__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #ef4444;
  background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.15);
  padding: 5px 14px; border-radius: 999px; margin-bottom: 16px;
}
.et-safe-approach__title {
  font-size: 1.6rem; font-weight: 800; color: #0f172a;
  margin: 0 0 12px; line-height: 1.3;
}
.et-safe-approach__sub {
  font-size: 0.95rem; color: #475569; line-height: 1.7;
  max-width: 680px; margin: 0 auto 36px;
}
.et-safe-approach__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; text-align: left; margin-bottom: 32px;
}
.et-safe-risk {
  padding: 20px; border-radius: 12px; background: #fff;
  border: 1px solid #e2e8f0;
}
.et-safe-risk__icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(239,68,68,0.06); color: #ef4444;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.et-safe-risk h3 {
  font-size: 0.9rem; font-weight: 700; color: #0f172a;
  margin: 0 0 6px;
}
.et-safe-risk p {
  font-size: 0.82rem; color: #475569; line-height: 1.6; margin: 0;
}
.et-safe-approach__cta-box {
  display: flex; align-items: flex-start; gap: 16px; text-align: left;
  padding: 24px; border-radius: 12px;
  background: rgba(21,193,130,0.04);
  border: 1px solid rgba(21,193,130,0.2);
}
.et-safe-approach__cta-icon {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
  background: rgba(21,193,130,0.1); color: #15c182;
  display: flex; align-items: center; justify-content: center;
}
.et-safe-approach__cta-title {
  font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0 0 4px;
}
.et-safe-approach__cta-text {
  font-size: 0.88rem; color: #334155; line-height: 1.6; margin: 0;
}
@media (max-width: 600px) {
  .et-safe-approach__grid { grid-template-columns: 1fr; }
  .et-safe-approach__title { font-size: 1.3rem; }
  .et-safe-approach__cta-box { flex-direction: column; }
}

/* ── Email Preview (Feature 4) ───────────────────── */
.email-preview-section { margin: 24px 0; }
.email-preview-tabs {
  display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 0;
}
.email-preview-tab {
  padding: 10px 18px; font-size: 0.82rem; font-weight: 500;
  color: rgba(255,255,255,0.75); cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent;
  transition: all 0.15s;
}
.email-preview-tab:hover { color: rgba(255,255,255,0.8); }
.email-preview-tab--active {
  color: #22c55e; border-bottom-color: #22c55e;
}
.email-preview-frame {
  border: 1px solid rgba(255,255,255,0.08); border-top: none;
  border-radius: 0 0 12px 12px; background: #fff; overflow: hidden;
}
.email-preview-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0;
}
.email-preview-dots {
  display: flex; gap: 5px;
}
.email-preview-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.email-preview-dot--red { background: #ef4444; }
.email-preview-dot--yellow { background: #f59e0b; }
.email-preview-dot--green { background: #22c55e; }
.email-preview-from {
  font-size: 0.78rem; color: #64748b; margin-left: auto;
}
.email-preview-body {
  padding: 20px; color: #1e293b; font-size: 0.88rem; line-height: 1.6;
  max-height: 340px; overflow-y: auto;
}
.email-preview-body img { max-width: 100%; height: auto; }
.email-preview-provider-label {
  padding: 6px 14px; background: rgba(255,255,255,0.03); font-size: 0.75rem;
  color: rgba(255,255,255,0.7); border-bottom: 1px solid rgba(255,255,255,0.06);
}
.email-preview-warnings {
  display: flex; flex-direction: column; gap: 6px; margin-top: 12px;
}
.email-preview-warning {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: rgba(255,255,255,0.75);
  padding: 8px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
}
.email-preview-warning__icon { color: #f59e0b; font-size: 1rem; }

/* ── TOAST NOTIFICATIONS ─────────────────────────── */
.toast-container {
  position: fixed; top: 20px; right: 20px; z-index: 10000;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; max-width: 400px;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px;
  font-size: 0.88rem; line-height: 1.4; font-family: Inter, sans-serif;
  color: #fff; backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  animation: toastIn 0.3s ease-out;
  border: 1px solid rgba(255,255,255,0.08);
}
.toast--error   { background: rgba(220,38,38,0.92); }
.toast--success { background: rgba(22,163,74,0.92); }
.toast--warning { background: rgba(217,119,6,0.92); }
.toast--info    { background: rgba(37,99,235,0.92); }
.toast__icon { flex-shrink: 0; font-size: 1.1rem; }
.toast__msg  { flex: 1; }
.toast__close {
  flex-shrink: 0; background: none; border: none; color: rgba(255,255,255,0.75);
  font-size: 1.1rem; cursor: pointer; padding: 0 0 0 6px; line-height: 1;
}
.toast__close:hover { color: #fff; }
.toast--exit { animation: toastOut 0.25s ease-in forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(40px); } }

/* ══════════════════════════════════════════════════════
   HOW INBXR IS DIFFERENT — /how-inbxr-is-different
   ══════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────── */
.hd-hero {
  background: linear-gradient(135deg, #0c1a3a 0%, #152244 100%);
  padding: 100px 24px 72px;
  text-align: center;
}
.hd-hero__inner {
  max-width: 720px; margin: 0 auto;
}
.hd-hero__title {
  font-family: var(--font-display);
  font-size: 2.4rem; font-weight: 800; color: #fff;
  margin: 0 0 16px; letter-spacing: -0.03em; line-height: 1.15;
}
.hd-hero__sub {
  font-size: 1.15rem; color: rgba(255,255,255,0.7);
  line-height: 1.6; margin: 0;
}

/* ── Shared section headings ──────────────────────── */
.hd-section-title {
  font-family: var(--font-display);
  font-size: 1.7rem; font-weight: 800; color: var(--text-1);
  margin: 0 0 8px; letter-spacing: -0.03em; line-height: 1.25;
}
.hd-section-sub {
  font-size: 0.95rem; color: var(--text-2); margin: 0 0 40px;
  line-height: 1.6;
}

/* ── The Problem ──────────────────────────────────── */
.hd-problem {
  padding: 80px 24px;
  background: var(--bg-1);
  text-align: center;
}
.hd-problem__inner {
  max-width: 960px; margin: 0 auto;
}
.hd-problem__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; text-align: left;
}
.hd-problem__card {
  padding: 28px; border-radius: 14px;
  background: var(--bg-2); border: 1px solid var(--border-1);
  transition: box-shadow 0.2s var(--ease);
}
.hd-problem__card:hover {
  box-shadow: var(--shadow-2);
}
.hd-problem__card--danger {
  border-color: rgba(239,68,68,0.25);
  background: rgba(239,68,68,0.03);
}
.hd-problem__price {
  display: inline-block;
  font-size: 0.75rem; font-weight: 700;
  padding: 4px 12px; border-radius: 999px;
  background: var(--bg-4); color: var(--text-3);
  margin-bottom: 12px;
}
.hd-problem__card--danger .hd-problem__price {
  background: rgba(239,68,68,0.08); color: #ef4444;
}
.hd-problem__name {
  font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 700; color: var(--text-1);
  margin: 0 0 8px;
}
.hd-problem__desc {
  font-size: 0.86rem; color: var(--text-2); line-height: 1.65; margin: 0;
}

/* ── INBXR's Approach — feature cards ─────────────── */
.hd-approach {
  padding: 80px 24px;
  background: #fafbfc;
  border-top: 1px solid var(--border-1);
  text-align: center;
}
.hd-approach__inner {
  max-width: 960px; margin: 0 auto;
}
.hd-approach__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; text-align: left;
}
.hd-feature {
  padding: 24px; border-radius: 14px;
  background: #fff; border: 1px solid var(--border-1);
  transition: box-shadow 0.2s var(--ease);
}
.hd-feature:hover {
  box-shadow: var(--shadow-2);
}
.hd-feature__icon {
  width: 44px; height: 44px; border-radius: 11px;
  background: rgba(21,193,130,0.08); color: #15c182;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.hd-feature h3 {
  font-family: var(--font-display);
  font-size: 0.95rem; font-weight: 700; color: var(--text-1);
  margin: 0 0 6px;
}
.hd-feature p {
  font-size: 0.84rem; color: var(--text-2); line-height: 1.65; margin: 0;
}

/* ── Comparison table ─────────────────────────────── */
.hd-compare {
  padding: 80px 24px;
  background: var(--bg-1);
  border-top: 1px solid var(--border-1);
  text-align: center;
}
.hd-compare__inner {
  max-width: 960px; margin: 0 auto;
}

/* ── Safety warning ───────────────────────────────── */
.hd-warning {
  padding: 80px 24px;
  background: #fafbfc;
  border-top: 1px solid var(--border-1);
  text-align: center;
}
.hd-warning__inner {
  max-width: 900px; margin: 0 auto;
}
.hd-warning__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: #ef4444;
  background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.15);
  padding: 5px 14px; border-radius: 999px; margin-bottom: 16px;
}
.hd-warning__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; text-align: left;
}
.hd-warning__card {
  padding: 22px; border-radius: 12px;
  background: #fff; border: 1px solid #e2e8f0;
}
.hd-warning__card-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(239,68,68,0.06); color: #ef4444;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.hd-warning__card h3 {
  font-size: 0.9rem; font-weight: 700; color: #0f172a;
  margin: 0 0 6px;
}
.hd-warning__card p {
  font-size: 0.82rem; color: #475569; line-height: 1.6; margin: 0;
}

/* ── CTA ──────────────────────────────────────────── */
.hd-cta {
  padding: 80px 24px;
  background: linear-gradient(135deg, #0c1a3a 0%, #152244 100%);
  text-align: center;
}
.hd-cta__inner {
  max-width: 600px; margin: 0 auto;
}
.hd-cta__title {
  font-family: var(--font-display);
  font-size: 1.8rem; font-weight: 800; color: #fff;
  margin: 0 0 12px; letter-spacing: -0.02em;
}
.hd-cta__sub {
  font-size: 0.95rem; color: rgba(255,255,255,0.8);
  line-height: 1.6; margin: 0 0 32px;
}
.hd-cta__btn {
  display: inline-block;
  padding: 16px 36px;
  background: #22c55e; color: #fff;
  font-weight: 700; font-size: 1rem;
  border-radius: 999px; text-decoration: none;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 24px rgba(34,197,94,0.35);
}
.hd-cta__btn:hover {
  background: #16a34a;
  box-shadow: 0 0 32px rgba(34,197,94,0.5);
}
.hd-cta__note {
  font-size: 0.8rem; color: rgba(255,255,255,0.75);
  margin: 16px 0 0;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 768px) {
  .hd-hero { padding: 80px 20px 56px; }
  .hd-hero__title { font-size: 1.7rem; }
  .hd-hero__sub { font-size: 1rem; }
  .hd-section-title { font-size: 1.35rem; }
  .hd-problem__grid { grid-template-columns: 1fr; }
  .hd-approach__grid { grid-template-columns: 1fr; }
  .hd-warning__grid { grid-template-columns: 1fr; }
  .hd-cta__title { font-size: 1.4rem; }
}
@media (max-width: 500px) {
  .hd-hero__title { font-size: 1.45rem; }
  .hd-problem, .hd-approach, .hd-compare, .hd-warning, .hd-cta { padding: 56px 16px; }
}

/* ══════════════════════════════════════════════════════
   HERO SUMMARY CARD — Results verdict at a glance
   ══════════════════════════════════════════════════════ */
.hero-summary {
  background: #fff;
  border: 1px solid var(--border-1);
  border-left: 4px solid var(--hero-color, var(--color-blue));
  border-radius: var(--radius-lg, 12px);
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-1);
  animation: heroReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes heroReveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-summary__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.hero-summary__verdict {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 240px;
}

.hero-summary__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--hero-color);
  font-size: 1.3rem;
  font-weight: 700;
}

.hero-summary__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-summary__title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.3;
}

.hero-summary__desc {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.5;
}

/* ── Score pills ──────────────────────────────────── */
.hero-summary__pills {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.hero-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 18px;
  background: var(--bg-2);
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-1);
  min-width: 90px;
}

.hero-pill__label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}

.hero-pill__value {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ── Top action item ─────────────────────────────── */
.hero-action {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md, 8px);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-1);
}

.hero-action--critical {
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.hero-action--warning {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.15);
}

.hero-action__icon {
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1.5;
}

.hero-action--critical .hero-action__icon { color: var(--color-red); }
.hero-action--warning .hero-action__icon { color: var(--color-yellow); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 640px) {
  .hero-summary { padding: 18px 18px; }
  .hero-summary__top { flex-direction: column; gap: 16px; }
  .hero-summary__pills { width: 100%; justify-content: space-between; }
  .hero-pill { flex: 1; min-width: 70px; padding: 8px 10px; }
  .hero-pill__value { font-size: 1rem; }
  .hero-summary__icon { width: 36px; height: 36px; font-size: 1.1rem; }
  .hero-summary__title { font-size: 1.05rem; }
}

/* ══════════════════════════════════════════════════════
   FRAMEWORK LAB
   ══════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────── */
.fw-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #1a2a5e 100%);
  padding: 64px 0 48px;
  text-align: center;
  color: var(--navy-text);
}
.fw-hero__badge {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(34,197,94,0.15);
  color: var(--cta);
  font-weight: 700;
  font-size: 0.8rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}
.fw-hero__title {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 12px;
}
.fw-hero__subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.7);
  max-width: 600px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

/* C3PO steps */
.fw-hero__c3po {
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px;
}
.fw-hero__c3po-label {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--cta);
  margin-bottom: 16px;
}
.fw-hero__steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.fw-hero__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 100px;
  max-width: 140px;
}
.fw-hero__step-key {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  border-radius: 50%;
}
.fw-hero__step-label {
  font-weight: 700;
  font-size: 0.85rem;
}
.fw-hero__step-desc {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.8);
  text-align: center;
  line-height: 1.4;
}
.fw-hero__step-arrow {
  color: rgba(255,255,255,0.75);
  font-size: 1.2rem;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .fw-hero__title { font-size: 1.8rem; }
  .fw-hero__steps { gap: 4px; }
  .fw-hero__step { min-width: 60px; max-width: 80px; }
  .fw-hero__step-desc { display: none; }
  .fw-hero__step-arrow { font-size: 1rem; }
}

/* ── Lab Section ──────────────────────────────────── */
.fw-lab { padding: 48px 0; }

.fw-section-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 8px;
}
.fw-section-subtitle {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  margin: 0 0 24px;
}

/* ── Decision Tree ────────────────────────────────── */
.fw-decision {
  background: var(--card-bg, #0f172a);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 40px;
}
.fw-decision__question {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.fw-decision__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.fw-decision__opt {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  color: inherit;
}
.fw-decision__opt:hover {
  border-color: var(--brand);
  background: rgba(37,99,235,0.08);
}
.fw-decision__opt strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 4px;
}
.fw-decision__opt span {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
}
.fw-decision__result h3 {
  margin: 0 0 16px;
  font-size: 1.1rem;
}
.fw-decision__recs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.fw-decision__rec {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.fw-decision__rec:hover { border-color: var(--brand); }
.fw-decision__rec p {
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
}

/* ── Tabs ─────────────────────────────────────────── */
.fw-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 8px;
}
.fw-tab {
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.fw-tab:hover { color: rgba(255,255,255,0.8); }
.fw-tab--active {
  color: #fff;
  background: rgba(37,99,235,0.15);
  border-bottom: 2px solid var(--brand);
}

/* ── Card Grid ────────────────────────────────────── */
.fw-grid, .fw-my-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}
.fw-card {
  background: var(--card-bg, #0f172a);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 20px;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s;
  position: relative;
}
.fw-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
}
.fw-card--locked { opacity: 0.85; }
.fw-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.fw-card__acronym {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 0.8rem;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.fw-card__acronym--custom {
  background: #7c3aed;
}
.fw-card__pill {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.8);
}
.fw-card__pill--custom {
  background: rgba(124,58,237,0.15);
  color: #a78bfa;
}
.fw-card__name {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.fw-card__desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
  margin: 0;
}
.fw-card__lock {
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 8px;
  background: rgba(245,158,11,0.2);
  color: #f59e0b;
  border-radius: 4px;
}
.fw-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.fw-card__edit, .fw-card__delete {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.fw-card__edit:hover { border-color: var(--brand); color: var(--brand); }
.fw-card__delete:hover { border-color: var(--red, #ef4444); color: var(--red, #ef4444); }
.fw-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: rgba(255,255,255,0.7);
  padding: 32px;
}

/* ── Modal ────────────────────────────────────────── */
.fw-modal-overlay, .fw-builder-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.fw-modal, .fw-builder {
  background: var(--card-bg, #0f172a);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
  color: #fff;
}
.fw-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: 1.5rem;
  cursor: pointer;
}
.fw-modal__header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.fw-modal__acronym {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  border-radius: 10px;
  flex-shrink: 0;
}
.fw-modal__name {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0;
}
.fw-modal__category {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}
.fw-modal__desc {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin: 0 0 24px;
}
.fw-modal__section {
  margin-bottom: 24px;
  position: relative;
}
.fw-modal__section h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 12px;
  color: rgba(255,255,255,0.85);
}
.fw-modal__section p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin: 0;
}
.fw-modal__example {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 16px;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.6;
  white-space: pre-wrap;
  font-family: inherit;
}
.fw-modal__actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* Steps */
.fw-modal__steps { display: flex; flex-direction: column; gap: 10px; }
.fw-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
}
.fw-step--locked { opacity: 0.6; }
.fw-step__key {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
  border-radius: 6px;
}
.fw-step__label {
  font-weight: 700;
  font-size: 0.85rem;
  min-width: 80px;
}
.fw-step__desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
}

/* Locked overlay */
.fw-locked-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: rgba(0,0,0,0.5);
  border-radius: 12px;
  margin-top: 12px;
}
.fw-locked-overlay p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
}
.fw-locked-overlay svg {
  color: #f59e0b;
}

/* ── Builder ──────────────────────────────────────── */
.fw-builder__title {
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 0 24px;
}
.fw-builder__field {
  margin-bottom: 20px;
}
.fw-builder__field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.fw-builder__hint {
  font-weight: 400;
  color: rgba(255,255,255,0.7);
}
.fw-builder__field input[type="text"],
.fw-builder__field textarea {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-size: 0.9rem;
  font-family: inherit;
}
.fw-builder__field input:focus,
.fw-builder__field textarea:focus {
  outline: none;
  border-color: var(--brand);
}
.fw-builder__steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.fw-builder__step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: grab;
}
.fw-builder__step--dragging { opacity: 0.5; }
.fw-builder__drag {
  cursor: grab;
  color: rgba(255,255,255,0.75);
  font-size: 0.9rem;
}
.fw-builder__step-key {
  width: 60px;
  flex-shrink: 0;
}
.fw-builder__step-label {
  width: 120px;
  flex-shrink: 0;
}
.fw-builder__step-desc { flex: 1; }
.fw-builder__step-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 4px;
}
.fw-builder__step-remove:hover { color: var(--red, #ef4444); }
.fw-builder__actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* ── Upsell ───────────────────────────────────────── */
.fw-upsell {
  background: rgba(245,158,11,0.06);
  border: 1px solid rgba(245,158,11,0.15);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
  margin-top: 24px;
}
.fw-upsell h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 8px;
}
.fw-upsell p {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.75);
  margin: 0 0 16px;
  line-height: 1.6;
}

/* ── Footer ───────────────────────────────────────── */
.fw-footer {
  padding: 48px 0;
}
.fw-footer__inner {
  text-align: center;
  background: var(--card-bg, #0f172a);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 48px 32px;
}
.fw-footer__inner h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0 0 8px;
}
.fw-footer__inner p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  margin: 0 0 24px;
}
.fw-footer__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

/* ── Framework Detection (Analyzer page) ──────────── */
.fw-detection {
  margin-bottom: 16px;
}
.fw-detection__card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(37,99,235,0.08);
  border: 1px solid rgba(37,99,235,0.2);
  border-radius: 12px;
}
.fw-detection__icon { font-size: 1.2rem; }
.fw-detection__info { flex: 1; }
.fw-detection__info strong { font-size: 0.9rem; }
.fw-detection__conf {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.75);
  margin-left: 6px;
}
.fw-detection__info p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
  margin: 2px 0 0;
}
.fw-detection__link {
  font-size: 0.82rem;
  color: var(--brand-light);
  text-decoration: none;
  white-space: nowrap;
}
.fw-detection__link:hover { text-decoration: underline; }

/* ── AI Framework Step Mapping ────────────────────── */
.ai-text-block--framework { padding: 0; }
.ai-fw-step {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ai-fw-step:last-child { border-bottom: none; }
.ai-fw-step__key {
  display: inline-block;
  padding: 2px 8px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 0.7rem;
  border-radius: 4px;
  margin-right: 8px;
}
.ai-fw-step__label {
  font-weight: 700;
  font-size: 0.85rem;
}
.ai-fw-step p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  margin: 6px 0 0;
}

/* ── "Test This Rewrite" button ───────────────────── */
.btn-ai-test-rewrite {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 18px;
  background: rgba(34,197,94,0.12);
  border: 1px solid rgba(34,197,94,0.3);
  color: var(--cta);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-ai-test-rewrite:hover {
  background: rgba(34,197,94,0.2);
}

/* ── Highlight pulse animation ────────────────────── */
@keyframes highlightPulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
.highlight-pulse {
  animation: highlightPulse 0.8s ease-out 3;
}

/* ── Button helpers ───────────────────────────────── */
.btn-cta--sm {
  padding: 8px 20px;
  font-size: 0.82rem;
}
.btn-secondary--sm {
  padding: 6px 14px;
  font-size: 0.78rem;
}

/* ══════════════════════════════════════════════════════
   FIX PLAN
   ══════════════════════════════════════════════════════ */
.fix-plan {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.fix-plan__step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.fix-plan__step:last-child { border-bottom: none; }
.fix-plan__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
  border-radius: 50%;
}
.fix-plan__body { flex: 1; min-width: 0; }
.fix-plan__action {
  font-size: 0.88rem;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.fix-plan__reason {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.5;
  margin: 0 0 8px;
}
.fix-plan__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fix-plan__impact {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 4px;
}
.fix-plan__impact--high {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
}
.fix-plan__impact--med {
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
}
.fix-plan__tool {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand-light);
  text-decoration: none;
}
.fix-plan__tool:hover { text-decoration: underline; }

/* ── Framework detection actions ──────────────── */
.fw-detection__actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.fw-detection__rewrite {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cta);
  text-decoration: none;
  white-space: nowrap;
}
.fw-detection__rewrite:hover { text-decoration: underline; }

/* ── AI Before/After view ─────────────────────── */
.ai-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ai-block__header .ai-block__title { margin: 0; }
.ai-toggle-original {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.75);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  font-family: inherit;
}
.ai-toggle-original:hover {
  border-color: var(--brand);
  color: var(--brand-light);
}
.ai-before-after {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ai-original {
  background: rgba(239,68,68,0.04);
  border: 1px solid rgba(239,68,68,0.12);
  border-radius: 10px;
  padding: 14px;
}
.ai-original__label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  background: rgba(239,68,68,0.12);
  color: #ef4444;
}
.ai-original__label--new {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
}
.ai-original__text {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
}
.ai-original__text p { margin: 0 0 8px; }

/* ── Subject scorer link in category ─────────── */
.subject-scorer-link {
  margin-top: 8px;
}
.subject-scorer-link a {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-light);
  text-decoration: none;
}
.subject-scorer-link a:hover { text-decoration: underline; }

/* ── Framework Favorites ─────────────────────────── */
.fw-card__fav {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: rgba(255,255,255,0.75);
  line-height: 1;
  padding: 4px;
  transition: color 0.2s, transform 0.15s;
  z-index: 2;
}
.fw-card__fav:hover {
  color: #ef4444;
  transform: scale(1.2);
}
.fw-card__fav--active {
  color: #ef4444;
}
.fw-card__fav--active:hover {
  color: rgba(255,255,255,0.75);
}
.fw-tab--fav {
  color: #ef4444 !important;
}

.auth-record-wrap { display: flex; align-items: flex-start; gap: 8px; }
.auth-record-wrap .auth-record-code { flex: 1; min-width: 0; }
.auth-record-wrap .fa-copy-btn { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════
   LAST SCAN CARD (Dashboard — all tiers)
   ══════════════════════════════════════════════════════ */
.dash-lastscan {
  display: flex; align-items: center; gap: 16px;
  padding: 4px 0;
}
.dash-lastscan__main { flex: 1; min-width: 0; }
.dash-lastscan__tool {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.03em; margin-bottom: 4px;
}
.dash-lastscan__tool-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.dash-lastscan__subject {
  font-size: 0.92rem; font-weight: 500; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-lastscan__time {
  font-size: 0.75rem; color: rgba(255,255,255,0.75); margin-top: 2px;
}
.dash-lastscan__scores {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.dash-lastscan__grade {
  font-size: 1.3rem; font-weight: 800; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
}
.dash-lastscan__score {
  font-size: 1.1rem; font-weight: 700; color: #fff;
}
.dash-lastscan__score small {
  font-size: 0.7rem; font-weight: 400; color: rgba(255,255,255,0.7);
}
.dash-lastscan__cta {
  flex-shrink: 0; font-size: 0.8rem; font-weight: 600;
  color: #22c55e; text-decoration: none;
  white-space: nowrap;
}
.dash-lastscan__cta:hover { text-decoration: underline; }
.dash-lastscan-empty {
  text-align: center; padding: 20px 16px;
  font-size: 0.85rem; color: rgba(255,255,255,0.75);
}
.dash-lastscan-empty svg {
  display: block; margin: 0 auto 8px;
  color: rgba(255,255,255,0.75);
}
.dash-lastscan-empty p { margin: 0 0 10px; }
.dash-lastscan-empty a {
  color: #22c55e; text-decoration: none; font-weight: 600;
}
.dash-lastscan-empty a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .dash-lastscan { flex-wrap: wrap; gap: 10px; }
  .dash-lastscan__scores { order: -1; width: 100%; }
  .dash-lastscan__cta { width: 100%; text-align: center;
    padding: 8px; border: 1px solid rgba(34,197,94,0.3);
    border-radius: 8px; margin-top: 4px;
  }
}


/* ══════════════════════════════════════════════════════
   EMAIL ME THIS REPORT
   ══════════════════════════════════════════════════════ */
.et-email-report {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 16px;
}
.et-email-report__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.et-email-report__trigger:hover {
  border-color: var(--cta);
  background: rgba(22,163,74,0.06);
}
.et-email-report__trigger svg {
  flex-shrink: 0;
  color: var(--cta);
}
.et-email-report__form {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.et-email-report__input {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--card);
  width: 240px;
  max-width: 100%;
  outline: none;
  transition: border-color 0.15s;
}
.et-email-report__input:focus {
  border-color: var(--cta);
}
.et-email-report__send {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--cta);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.et-email-report__send:hover { opacity: 0.9; }
.et-email-report__send:disabled { opacity: 0.5; cursor: default; }
.et-email-report__status {
  font-size: 0.8rem;
  min-height: 1.2em;
}
.et-email-report__status--success { color: var(--cta); }
.et-email-report__status--error { color: var(--color-red, #ef4444); }

@media (max-width: 640px) {
  .et-email-report { flex-direction: column; align-items: stretch; }
  .et-email-report__input { width: 100%; }
  .et-email-report__form { flex-direction: column; }
}


/* ══════════════════════════════════════════════════════
   INLINE UPGRADE MODAL
   ══════════════════════════════════════════════════════ */
.upgrade-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.upgrade-modal {
  background: var(--card-bg, #0f172a);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  max-width: 400px;
  width: 100%;
  padding: 36px 32px;
  text-align: center;
  position: relative;
  color: #fff;
}
.upgrade-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 1.4rem;
  cursor: pointer;
}
.upgrade-modal__icon {
  margin-bottom: 16px;
  color: #f59e0b;
}
.upgrade-modal__title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 8px;
}
.upgrade-modal__desc {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin: 0 0 20px;
}
.upgrade-modal__price {
  margin-bottom: 20px;
}
.upgrade-modal__amount {
  font-size: 2.2rem;
  font-weight: 900;
  color: #fff;
}
.upgrade-modal__period {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
}
.upgrade-modal__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background: var(--cta);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  font-family: inherit;
}
.upgrade-modal__cta:hover { opacity: 0.9; }
.upgrade-modal__cta:disabled { opacity: 0.5; cursor: default; }
.upgrade-modal__note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
  margin: 12px 0 0;
}
.upgrade-modal__compare {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--brand-light);
  margin-top: 8px;
  text-decoration: none;
}
.upgrade-modal__compare:hover { text-decoration: underline; }

/* ── Pricing Toggle ───────────────────────────────── */
.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}
.pricing-toggle__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: color 0.2s;
}
.pricing-toggle__label--active {
  color: #fff;
}
.pricing-toggle__save {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(34,197,94,0.15);
  color: #22c55e;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 999px;
  margin-left: 4px;
}
.pricing-toggle__switch {
  width: 44px;
  height: 24px;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  padding: 0;
}
.pricing-toggle__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.pricing-toggle__switch--on {
  background: var(--cta);
}
.pricing-toggle__switch--on::after {
  transform: translateX(20px);
}

/* ══════════════════════════════════════════════════════
   EMAIL GATE — Report gating for lead capture
   ══════════════════════════════════════════════════════ */
.et-gated-preview {
  position: relative;
  margin-top: 20px;
}
.et-gated-preview__blur {
  filter: blur(6px);
  -webkit-filter: blur(6px);
  pointer-events: none;
  user-select: none;
  opacity: 0.5;
}
.et-gated-preview__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 40px;
  z-index: 10;
}
.et-gate-card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 16px;
  padding: 36px 32px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.et-gate-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cta-light, rgba(21,193,130,0.1));
  color: var(--cta);
  margin-bottom: 16px;
}
.et-gate-card__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 8px;
}
.et-gate-card__sub {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0 0 20px;
}
.et-gate-card__form {
  display: flex;
  gap: 8px;
  max-width: 380px;
  margin: 0 auto;
}
.et-gate-card__input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--border-1);
  border-radius: 8px;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s;
}
.et-gate-card__input:focus {
  border-color: var(--cta);
}
.et-gate-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px;
  background: var(--cta);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s, opacity 0.15s;
}
.et-gate-card__btn:hover {
  transform: scale(1.03);
}
.et-gate-card__btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.et-gate-card__status {
  margin-top: 12px;
  font-size: 0.82rem;
  min-height: 1.2em;
}
.et-gate-card__status--error {
  color: var(--color-red);
}
.et-gate-card__status--success {
  color: var(--color-green);
  font-weight: 600;
}

/* Issue summary above the gate */
.gate-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  margin-top: 16px;
}
.gate-summary__score {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.gate-summary__number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--score-color);
  line-height: 1;
}
.gate-summary__label {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-3);
}
.gate-summary__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1);
  margin: 0 0 8px;
}
.gate-summary__pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gate-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.gate-pill--critical {
  background: rgba(239,68,68,0.1);
  color: #ef4444;
}
.gate-pill--warning {
  background: rgba(245,158,11,0.1);
  color: #f59e0b;
}
.gate-pill--good {
  background: rgba(34,197,94,0.1);
  color: #22c55e;
}

@media (max-width: 600px) {
  .et-gate-card {
    padding: 24px 16px;
    margin: 0 8px;
  }
  .et-gate-card__form {
    flex-direction: column;
  }
  .gate-summary {
    flex-direction: column;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════════
   SHARED SIGNAL RESULT COMPONENTS (signal-results.js)
   Used by homepage hero + /signal-score anonymous page.
   ══════════════════════════════════════════════════════ */

/* ── Signal cards ── */
.sig-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 22px 24px; margin-bottom: 16px; position: relative; }
.sig-card--domain { border-left: 4px solid #2563eb; }
.sig-card--quickwins { border-left: 4px solid #f59e0b; background: linear-gradient(135deg, #fffbeb 0%, #fff 40%); }
.sig-card--ghost { border-left: 4px solid #8b5cf6; background: linear-gradient(135deg, #faf5ff 0%, #fff 40%); }
.sig-card__label { display: inline-block; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; margin-bottom: 10px; }
.sig-card__label--amber { color: #d97706; }
.sig-card__label--purple { color: #7c3aed; }
.sig-card__h { font-size: 1.02rem; font-weight: 800; color: #0c1a3a; margin: 0 0 6px; line-height: 1.3; }
.sig-card__p { font-size: 0.82rem; color: #475569; margin: 0 0 14px; line-height: 1.55; }
.sig-card__cta { display: inline-block; padding: 10px 20px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; text-decoration: none; color: #fff; margin-top: 10px; }
.sig-card__cta--purple { background: #8b5cf6; }
.sig-card__cta--purple:hover { background: #7c3aed; }

/* ── Signal hero (score + grade) ── */
.sig-hero { display: flex; gap: 18px; align-items: center; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid #e5e7eb; flex-wrap: wrap; }
.sig-hero__num { font-size: 3.2rem; font-weight: 900; line-height: 1; }
.sig-hero__num--A, .sig-hero__num--B { color: #16a34a; }
.sig-hero__num--C { color: #d97706; }
.sig-hero__num--D, .sig-hero__num--F { color: #dc2626; }
.sig-hero__grade { font-size: 0.85rem; font-weight: 700; margin-top: 6px; }
.sig-hero__summary { flex: 1; min-width: 200px; }
.sig-hero__summary h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 4px; color: #0c1a3a; }
.sig-hero__summary p { font-size: 0.82rem; color: #475569; margin: 0; line-height: 1.45; }
.sig-hero__meta { font-size: 0.75rem; color: #94a3b8; }

/* ── Signal rows (visible + locked) ── */
.sig-signals { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
.sig-row { display: flex; justify-content: space-between; padding: 10px 14px; background: #f8fafc; border-radius: 8px; font-size: 0.88rem; }
.sig-row--locked { opacity: 0.55; }
.sig-row--purple { border-left: 3px solid #8b5cf6; }
.sig-row__name { color: #0c1a3a; font-weight: 600; }
.sig-row__val { font-weight: 800; }
.sig-row__val.is-good { color: #16a34a; }
.sig-row__val.is-warn { color: #d97706; }
.sig-row__val.is-bad { color: #dc2626; }
.sig-row__val--locked { font-size: 0.75rem; font-style: italic; font-weight: 500; color: #94a3b8; text-transform: uppercase; }

/* ── Auth pills ── */
.sig-auth-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.sig-auth-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.sig-pill-pass { background: rgba(22,163,74,0.1); color: #16a34a; }
.sig-pill-fail { background: rgba(220,38,38,0.1); color: #dc2626; }
.sig-pill-warn { background: rgba(217,119,6,0.1); color: #d97706; }

/* ── Quick wins ── */
.qw-list { display: flex; flex-direction: column; gap: 10px; }
.qw-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; background: #fff; }
.qw-item--urgent { border: 1px solid #fca5a5; background: #fef2f2; }
.qw-item--info { border: 1px solid #fde68a; background: #fffbeb; }
.qw-item__sev { flex-shrink: 0; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 4px; white-space: nowrap; margin-top: 2px; }
.qw-item--urgent .qw-item__sev { background: #dc2626; color: #fff; }
.qw-item--info .qw-item__sev { background: #d97706; color: #fff; }
.qw-item__body strong { display: block; font-size: 0.82rem; color: #0c1a3a; margin-bottom: 4px; }
.qw-item__body p { font-size: 0.78rem; color: #475569; margin: 0; line-height: 1.5; }

/* ── Final CTA ── */
.sig-final-cta { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); border-radius: 10px; padding: 24px; text-align: center; margin-top: 16px; }
.sig-final-cta h4 { font-size: 0.92rem; font-weight: 800; margin: 0 0 10px; color: #0c1a3a; }
.sig-final-cta p { font-size: 0.78rem; color: #475569; margin: 0 0 14px; line-height: 1.45; }
.sig-final-cta__btn { display: inline-block; background: #16a34a; color: #fff; padding: 12px 24px; border-radius: 999px; font-size: 0.88rem; font-weight: 700; text-decoration: none; }
.sig-final-cta__btn:hover { background: #15803d; }

/* ── Share button ── */
.sig-share { text-align: center; margin-top: 12px; }
.sig-share__btn { background: none; border: 1px solid #cbd5e1; color: #64748b; padding: 8px 18px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.sig-share__btn:hover { border-color: #94a3b8; color: #334155; }

/* ── CSV result signal cards ── */
.csv-signals { margin-top: 16px; }
.csv-sig { padding: 16px 18px; border-radius: 10px; margin-bottom: 10px; border: 1px solid; }
.csv-sig--good { background: rgba(22,163,74,0.06); border-color: #bbf7d0; }
.csv-sig--warn { background: rgba(217,119,6,0.06); border-color: #fde68a; }
.csv-sig--bad { background: rgba(220,38,38,0.06); border-color: #fca5a5; }
.csv-sig--locked { background: #f8fafc; border: 1px dashed #cbd5e1; opacity: 0.7; }
.csv-sig__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.csv-sig__head strong { font-size: 0.88rem; color: #0c1a3a; }
.csv-sig__score { font-size: 0.88rem; font-weight: 800; }
.csv-sig__score--good { color: #16a34a; }
.csv-sig__score--warn { color: #d97706; }
.csv-sig__score--bad { color: #dc2626; }
.csv-sig__pro { font-size: 0.72rem; font-weight: 700; color: #8b5cf6; background: rgba(139,92,246,0.1); padding: 2px 8px; border-radius: 4px; }
.csv-sig__explain { font-size: 0.82rem; color: #334155; margin: 0; line-height: 1.55; }
.csv-sig__explain a { color: #2563eb; font-weight: 600; }

/* ── Segment pills ── */
.seg-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 8px; }
.seg-pill { font-size: 0.78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; }
.seg-pill--green { background: rgba(22,163,74,0.1); color: #16a34a; }
.seg-pill--blue { background: rgba(37,99,235,0.1); color: #2563eb; }
.seg-pill--amber { background: rgba(217,119,6,0.1); color: #d97706; }
.seg-pill--red { background: rgba(220,38,38,0.1); color: #dc2626; }
.seg-warning { background: #fef2f2; border: 1px solid #fca5a5; border-radius: 10px; padding: 14px 18px; margin: 10px 0; font-size: 0.85rem; color: #991b1b; line-height: 1.55; }

@media (max-width: 680px) {
  .sig-hero__num { font-size: 2.4rem; }
  .sig-hero { gap: 12px; }
}