/* Echo-Factory HIPAA Scanner — visual system */
:root {
  --ef-charcoal: #33404F;
  --ef-charcoal-deep: #2A3340;
  --ef-charcoal-soft: #374050;
  --ef-ink: #020101;
  --ef-red: #FA5247;
  --ef-red-deep: #EA4E39;
  --ef-lime: #DFF581;
  --ef-lime-soft: #ecf8b5;
  /* "Surf" — EF's secondary brand color, the mint/teal in their footer.
     Calmer than red, better fit for utility CTAs like Export PDF. */
  --ef-surf: #7CE8CC;
  --ef-surf-deep: #5FCCB1;
  --ef-paper: #F7F6F2;
  --ef-paper-warm: #FBFAF6;
  --ef-rule: rgba(255,255,255,0.12);
  --ef-rule-dark: rgba(0,0,0,0.08);

  --risk-critical: #C62828;
  --risk-high: #FA5247;
  --risk-medium: #E89923;
  --risk-low: #4C6D7F;
  --risk-unknown: #7D6CB1;
  --risk-safe: #3FA66B;

  --font-display: 'Red Hat Display', system-ui, sans-serif;
  --font-text: 'Red Hat Text', system-ui, sans-serif;
  --font-num: 'Figtree', system-ui, sans-serif;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-text);
  color: var(--ef-paper);
  background: var(--ef-charcoal);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

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

/* ---------- Header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 56px);
  border-bottom: 1px solid var(--ef-rule);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 30px; }
.brand-divider {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1;
  color: rgba(255,255,255,.35);
}
.brand-tool {
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px; letter-spacing: .02em;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}
.site-nav { display: flex; gap: 28px; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .01em; }
.site-nav a { text-decoration: none; opacity: .85; }
.site-nav a:hover { opacity: 1; color: var(--ef-lime); }
/* Nav "Talk to us" — EF "surf" mint, charcoal text. Calmer than the primary
   lime CTA, fits a utility/secondary nav action. */
.nav-cta {
  background: var(--ef-surf);
  color: var(--ef-charcoal-deep) !important;
  padding: 10px 18px;
  border-radius: 0;
  opacity: 1 !important;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 1.2;
  transition: background .15s ease;
}
.nav-cta:hover { background: var(--ef-surf-deep); color: var(--ef-charcoal-deep) !important; }

/* Phone-sized screens: hide secondary nav link, tighten everything around the
   logo so the brand and the Talk-to-us CTA fit comfortably on one line. */
@media (max-width: 600px) {
  .site-header { padding: 14px 16px; }
  .brand img { height: 22px; }
  .site-nav { gap: 12px; font-size: 12px; }
  .site-nav a:not(.nav-cta) { display: none; }
  .nav-cta { padding: 7px 12px; font-size: 12px; }
  .brand-divider, .brand-tool { display: none; }
}

/* ---------- Main ---------- */
main { flex: 1; }

/* ---------- Hero ---------- */
/* Background uses the actual Echo-Factory homepage bg (subtle navy +
   topographic waves) instead of my earlier lime/red gradient approximation.
   The dark navy fallback keeps text readable if the image is slow to load. */
.hero {
  padding: clamp(48px, 8vw, 96px) clamp(20px, 4vw, 56px) clamp(48px, 6vw, 80px);
  background:
    linear-gradient(rgba(20, 30, 45, 0.20), rgba(20, 30, 45, 0.20)),
    url('/img/ef-bg.jpg') center / cover no-repeat,
    var(--ef-charcoal-deep);
}
.hero-inner { max-width: 1080px; margin: 0 auto; }
.eyebrow {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ef-lime);
  background: rgba(223,245,129,.08);
  border: 1px solid rgba(223,245,129,.28);
  padding: 6px 12px; border-radius: 999px;
  /* Explicit margins so the box sits the same whether tagged p, h1, or h2 —
     browser-default heading margins would otherwise shift it. */
  margin: 0 0 18px;
}
/* The visual "headline" — semantically an h2 since the page's h1 is the
   eyebrow ("HIPAA Site Scanner") for SEO. Class selector instead of tag so
   the visual hierarchy is independent of the semantic one. */
.hero .hero-headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.04;
  letter-spacing: -.015em;
  margin: 0 0 18px;
  max-width: 18ch;
  /* Reserve space for the longest possible 3-line layout so the form below
     doesn't bounce when "hospital" swaps to "medical group". 3 lines × line-height. */
  min-height: calc(3em * 1.04);
}
.hero .hero-headline .hl {
  color: var(--ef-lime);
  background: linear-gradient(180deg, transparent 60%, rgba(250,82,71,0.22) 60%);
  padding: 0 4px;
}

/* Rotating words — fade in/out without reflowing the rest of the headline. */
.rotate-word {
  display: inline-block;
  position: relative;
  transition: opacity .28s ease, transform .28s ease;
  will-change: opacity, transform;
  white-space: nowrap;
  /* No min-width: words shrink/grow naturally so punctuation hugs the word.
     Vertical space reserved on the H1 itself. */
}
.rotate-word.is-fading {
  opacity: 0;
  transform: translateY(-4px);
}
/* Both rotating words get lime accent; the target also gets the red underline */
#rotate-org { color: var(--ef-lime); font-style: normal; }
@media (prefers-reduced-motion: reduce) {
  .rotate-word { transition: none; transform: none !important; }
}
.hero .lede {
  font-size: clamp(16px, 1.6vw, 19px);
  max-width: 60ch;
  opacity: .88;
  margin: 0 0 32px;
}

/* ---------- Form ---------- */
.scan-form {
  display: flex; gap: 10px; flex-wrap: wrap;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ef-rule);
  padding: 8px;
  border-radius: var(--radius-lg);
  max-width: 720px;
  box-shadow: 0 24px 60px -30px rgba(0,0,0,.45);
}
.scan-form input {
  flex: 1; min-width: 240px;
  padding: 18px 20px;
  font-size: 18px;
  font-family: var(--font-text);
  background: transparent;
  border: 0;
  color: var(--ef-paper);
  outline: none;
}
.scan-form input::placeholder { color: rgba(255,255,255,0.4); }
.scan-form button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 24px;
  font-family: var(--font-display);
  font-weight: 700; font-size: 16px;
  background: var(--ef-red);
  color: #fff;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .12s ease, transform .12s ease;
}
.scan-form button:hover { background: var(--ef-red-deep); }
.scan-form button:active { transform: translateY(1px); }
.scan-form button[disabled] { opacity: .7; cursor: progress; }
.btn-spinner {
  display: none; width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.scan-form button[data-loading="true"] .btn-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.fineprint { font-size: 13px; opacity: .55; margin: 14px 0 0; }

.hero-bullets {
  list-style: none; padding: 0; margin: 56px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 18px;
}
.hero-bullets li {
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  background: rgba(255,255,255,0.025);
  font-size: 14px;
  opacity: .9;
}
.hero-bullets strong {
  font-family: var(--font-display); font-weight: 700;
  color: var(--ef-lime);
  display: block; margin-bottom: 4px;
}

/* ---------- Loading ---------- */
.loading-card {
  max-width: 720px; margin: 60px auto; padding: 36px 32px;
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.04);
}
.loading-step-row {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 8px;
}
.loading-card h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  margin: 0;
}
.loading-subtitle {
  font-size: 14px;
  line-height: 1.45;
  color: rgba(255,255,255,.7);
  margin: 8px 0 14px 38px;
  max-width: 60ch;
  /* Reserve space for two lines of subtitle so the card doesn't grow/shrink as
     we move between phases with different-length copy. */
  min-height: calc(1.45em * 2);
}
.loading-url-line {
  font-size: 13px; color: rgba(255,255,255,.55);
  margin: 0 0 22px 38px;
}
.loading-url-line #loading-url { color: var(--ef-lime); word-break: break-all; font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; }

.loading-anim {
  display: inline-flex; gap: 6px;
}
.loading-anim span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ef-red); opacity: .35;
  animation: bounce 1.1s infinite ease-in-out;
}
.loading-anim span:nth-child(2) { animation-delay: .15s; background: var(--ef-lime); }
.loading-anim span:nth-child(3) { animation-delay: .3s; background: var(--ef-paper); }
@keyframes bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40% { transform: translateY(-10px); opacity: 1; }
}

/* Phase progress bar — six segments that fill as the scan advances. */
.phase-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.phase-seg {
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
  transition: background .2s ease;
}
.phase-seg.is-done { background: var(--ef-red); }
.phase-seg.is-active {
  background: rgba(250,82,71,0.25);
}
.phase-seg.is-active::after {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 30%;
  background: var(--ef-red);
  animation: phaseSlide 1.4s linear infinite;
}
@keyframes phaseSlide {
  0%   { left: -30%; }
  100% { left: 100%; }
}

.phase-meta {
  display: flex; align-items: center; gap: 10px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.phase-meta em { font-style: normal; color: var(--ef-lime); font-weight: 600; }
.phase-meta-divider { opacity: .4; }
.phase-pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ef-red);
  animation: pulse 1.4s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% { opacity: .4; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.3); }
}

/* ---------- Results (dense + EF visual personality) ---------- */
#view-results {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px);
  background: var(--ef-charcoal-deep);
  color: var(--ef-paper);
  position: relative;
  overflow: hidden;
}
/* Subtle topographic wave pattern on the page background — same motif as the
   "Have a project to discuss?" panel on the EF homepage. Sits behind everything
   at low opacity so it reads as texture, not pattern. */
#view-results::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='%23DFF581' stroke-width='0.7' opacity='0.18'><path d='M0,560 C260,490 520,650 800,580 C1080,510 1340,650 1600,580'/><path d='M0,620 C260,550 520,710 800,640 C1080,570 1340,710 1600,640'/><path d='M0,680 C260,610 520,770 800,700 C1080,630 1340,770 1600,700'/><path d='M0,740 C260,670 520,830 800,760 C1080,690 1340,830 1600,760'/></g><g fill='none' stroke='%23FA5247' stroke-width='0.6' opacity='0.12'><path d='M0,180 C300,120 580,260 860,200 C1140,140 1380,260 1600,200'/><path d='M0,240 C300,180 580,320 860,260 C1140,200 1380,320 1600,260'/></g></svg>");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}
.results-inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 1; }

/* EF section eyebrow — italicized lime label, like the hero on EF case studies */
.ef-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 13px;
  color: var(--ef-lime);
  letter-spacing: .01em;
  margin: 0 0 6px;
}
/* Lime accent rule — sits under section headlines */
.ef-rule {
  display: block;
  width: 48px;
  height: 3px;
  background: var(--ef-lime);
  border: 0;
  margin: 12px 0 22px;
}

/* ---- Report hero: case-study energy, bigger title ---- */
.report-bar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 28px;
  padding: 26px 28px 30px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-md);
  margin-bottom: 22px;
  position: relative;
  overflow: hidden;
}
/* A whisper of the EF wave inside the hero block too */
.report-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 200' preserveAspectRatio='none'><g fill='none' stroke='%23DFF581' stroke-width='0.5' opacity='0.18'><path d='M0,120 C150,80 300,160 500,120 C650,80 750,150 800,120'/><path d='M0,150 C150,110 300,190 500,150 C650,110 750,180 800,150'/></g></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}
.report-bar > * { position: relative; z-index: 1; }
.report-bar-main { min-width: 0; flex: 1; }
.report-eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 14px;
  color: var(--ef-lime);
  letter-spacing: .01em;
  margin: 0 0 6px;
}
.report-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 12px; color: #fff;
  word-break: break-word;
}
/* Lime accent rule directly under the title — EF case-study signature */
.report-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: var(--ef-lime);
  margin-top: 16px;
}
.report-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 13px; opacity: .75;
}
.report-meta a {
  color: var(--ef-lime); text-decoration: none; word-break: break-all;
}
.report-meta a:hover { text-decoration: underline; }
.report-meta .dot { opacity: .4; }
.meta-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--ef-rule);
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.report-bar-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; align-self: flex-start; }
@media (max-width: 760px) {
  .report-bar { flex-direction: column; }
  .report-bar-actions { width: 100%; justify-content: flex-start; }
}
/* Action buttons — three weights, clearly differentiated by color and size.
   All adopt EF's flat web-button language: Red Hat Display 600, sharp corners. */
.btn-rescan, .btn-share, .btn-export, .btn-export-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 14px;
  padding: 11px 18px;
  border-radius: 0;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
  white-space: nowrap;
  line-height: 1.2;
}
.btn-rescan:active, .btn-share:active, .btn-export:active { transform: translateY(1px); }
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}
.btn-icon svg { display: block; }
.ef-spinner { animation: ef-spin 0.8s linear infinite; transform-origin: center; }
@keyframes ef-spin { to { transform: rotate(360deg); } }

/* "Go again" — outlined lime, fills on hover. Brand-highlight color. */
.btn-rescan {
  background: transparent;
  color: var(--ef-lime);
  border: 1px solid rgba(223,245,129,0.45);
}
.btn-rescan:hover {
  background: var(--ef-lime);
  color: var(--ef-charcoal-deep);
  border-color: var(--ef-lime);
}

/* Neutral — share link */
.btn-share {
  background: rgba(255,255,255,0.06);
  color: #fff;
  border: 1px solid var(--ef-rule);
}
.btn-share:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.25); }

/* Export PDF — EF "surf" mint, charcoal text. Utility action, not a warning. */
.btn-export {
  background: var(--ef-surf);
  color: var(--ef-charcoal-deep);
  border: 1px solid var(--ef-surf);
}
.btn-export:hover { background: var(--ef-surf-deep); border-color: var(--ef-surf-deep); }

/* Tucked-away JSON export for developers — same flat geometry, smaller */
.btn-export-secondary {
  background: transparent;
  color: rgba(255,255,255,0.45);
  border: 1px solid var(--ef-rule);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 11px 14px;
  border-radius: 0;
}
.btn-export-secondary:hover { color: #fff; border-color: rgba(255,255,255,0.3); }

/* ---- Score block: grade as a lime hero, four small stats beneath ---- */
.score-block {
  display: grid;
  grid-template-columns: minmax(280px, 1.05fr) 1.95fr;
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 760px) {
  .score-block { grid-template-columns: 1fr; }
}

/* The grade "moment" — a single lime block with charcoal text. Most EF thing
   we can do at this position: bright color slab, oversized numeral, italic caption. */
.grade-hero {
  background: var(--ef-lime);
  color: var(--ef-charcoal-deep);
  border-radius: var(--radius-md);
  padding: 26px 28px;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 200px;
}
.grade-hero::after {
  /* topographic whisper inside the lime block */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'><g fill='none' stroke='%232A3340' stroke-width='0.8' opacity='0.18'><path d='M0,140 C150,100 300,170 460,130 C540,110 580,140 600,130'/><path d='M0,170 C150,130 300,200 460,160 C540,140 580,170 600,160'/></g></svg>");
  background-size: 100% 100%;
  pointer-events: none;
}
.grade-hero > * { position: relative; z-index: 1; }
.grade-hero-eyebrow {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: 13px; letter-spacing: .02em;
  color: var(--ef-charcoal-deep); opacity: .75;
}
.grade-hero-letter {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(72px, 11vw, 120px);
  line-height: .9;
  letter-spacing: -.03em;
  margin: 6px 0 4px;
  color: var(--ef-charcoal-deep);
}
.grade-hero-letter.grade-A { color: #2D5C3D; }
.grade-hero-letter.grade-B { color: #4A6A1F; }
.grade-hero-letter.grade-C { color: #8A5A0E; }
.grade-hero-letter.grade-D { color: var(--ef-red-deep); }
.grade-hero-letter.grade-F { color: var(--risk-critical); }
.grade-hero-score {
  font-family: var(--font-num); font-weight: 800;
  font-size: 22px;
  color: var(--ef-charcoal-deep);
}
.grade-hero-score em {
  font-style: italic; font-weight: 500; font-size: 14px; opacity: .7;
  margin-left: 4px;
}

/* Four secondary stats as a compact 2x2 (or 4x1 at desktop width) */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 760px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-md);
  padding: 18px 18px 16px;
  position: relative;
  overflow: hidden;
}
.stat-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--risk-low);
}
.stat-bar.bar-critical { background: var(--risk-critical); }
.stat-bar.bar-high { background: var(--risk-high); }
.stat-bar.bar-medium { background: var(--risk-medium); }
.stat-bar.bar-low { background: var(--risk-low); }
.stat-value {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(36px, 4.5vw, 56px); line-height: .95;
  letter-spacing: -.01em;
  color: #fff;
}
.stat-value-num.has-risk-critical { color: var(--risk-critical); }
.stat-value-num.has-risk-high     { color: var(--risk-high); }
.stat-value-num.has-risk-medium   { color: var(--risk-medium); }
.stat-label {
  margin-top: 8px;
  font-family: var(--font-display); font-weight: 500;
  font-style: italic;
  font-size: 14px;
  color: rgba(255,255,255,.7);
  letter-spacing: 0;
  text-transform: none;
}

/* ---- Verdict band: pull-quote treatment, EF case-study energy ---- */
.verdict-band {
  background: rgba(223,245,129,0.06);
  border-left: 4px solid var(--ef-lime);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 18px 22px 18px 26px;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.45;
  color: rgba(255,255,255,.92);
  margin-bottom: 22px;
  max-width: 70ch;
}

/* ---- Settlement alert: top-line "this matters in the real world" callout ----
   Data-box style: numeric stat grid up top, supporting bullet points below.
   Sits between the verdict band and the risk distribution. Rendered only when
   detected vendors have at least one case in the settlements rollup; otherwise
   silently omitted. Amber-tone matches the per-vendor litigation chips. */
.settlement-alert {
  background: rgba(244, 199, 120, 0.06);
  border: 1px solid rgba(244, 199, 120, 0.32);
  border-left: 4px solid #F4C778;
  border-radius: var(--radius-md);
  padding: 18px 22px 16px;
  margin-bottom: 22px;
}
.settlement-alert-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.settlement-alert-icon {
  font-size: 18px;
  line-height: 1;
  color: #F4C778;
  flex: 0 0 auto;
}
.settlement-alert-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #F4C778;
  flex: 0 0 auto;
}
.settlement-alert-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  line-height: 1.45;
  flex: 1 1 280px;
  min-width: 0;
}

.settlement-alert-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(244, 199, 120, 0.18);
  border: 1px solid rgba(244, 199, 120, 0.18);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 14px;
}
.settlement-stat {
  background: rgba(0, 0, 0, 0.25);
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.settlement-stat-value {
  font-family: var(--font-num);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.05;
  color: #F4C778;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.settlement-stat-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}

.settlement-alert-points {
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settlement-alert-points li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
}
.settlement-alert-points li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #F4C778;
}
.settlement-alert-points li strong {
  color: rgba(255,255,255,.95);
  font-weight: 700;
}

.settlement-alert-note {
  font-size: 11.5px;
  color: rgba(255,255,255,.45);
  font-style: italic;
  margin: 0;
}

@media (max-width: 760px) {
  .settlement-alert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .settlement-alert-grid { grid-template-columns: 1fr; }
}

/* ---- Risk distribution bar ---- */
.dist-block {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin-bottom: 22px;
}
.dist-label {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: 13px;
  color: var(--ef-lime);
  margin-bottom: 10px;
}
.dist-bar {
  display: flex; height: 14px; width: 100%; border-radius: 7px; overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.dist-seg { display: block; height: 100%; }
.seg-critical { background: var(--risk-critical); }
.seg-high     { background: var(--risk-high); }
.seg-medium   { background: var(--risk-medium); }
.seg-low      { background: var(--risk-low); }
.seg-unknown  { background: var(--risk-unknown); }
.seg-safe     { background: var(--risk-safe); }

.dist-legend {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: 13px;
  color: rgba(255,255,255,.85);
}
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-item.is-zero { opacity: .35; }
.legend-item em {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  color: var(--ef-lime);
  margin-left: 2px;
}
.legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* ---- Tabs ---- */
.tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--ef-rule);
  margin-bottom: 14px;
}
.tab {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: .04em;
  padding: 10px 16px;
  background: transparent; color: rgba(255,255,255,.6);
  border: 0; border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}
.tab em {
  font-family: var(--font-num); font-weight: 700; font-style: normal;
  font-size: 12px; opacity: .75;
  margin-left: 6px;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
}
.tab.is-active {
  color: #fff;
  border-bottom-color: var(--ef-red);
}
.tab.is-active em { background: var(--ef-red); color: #fff; opacity: 1; }
.tab:hover { color: #fff; }

/* ---- Filter bar ---- */
.filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.filter-bar select {
  font-family: var(--font-text); font-size: 13px;
  padding: 7px 30px 7px 12px;
  background: rgba(255,255,255,0.04) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path fill='%23ffffff88' d='M2 4l4 4 4-4z'/></svg>") no-repeat right 10px center;
  background-size: 10px;
  color: #fff;
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-sm);
  appearance: none; -webkit-appearance: none;
  cursor: pointer;
}
.filter-bar select:focus { outline: 2px solid var(--ef-red); outline-offset: 1px; }
.filter-count {
  font-family: var(--font-display); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
  margin-left: auto;
}

/* ---- Finding rows (collapsed list) ---- */
.finding-list { display: flex; flex-direction: column; gap: 6px; }
.finding-row {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ef-rule);
  border-left: 3px solid var(--risk-low);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.finding-row[data-level="critical"] { border-left-color: var(--risk-critical); }
.finding-row[data-level="high"]     { border-left-color: var(--risk-high); }
.finding-row[data-level="medium"]   { border-left-color: var(--risk-medium); }
.finding-row[data-level="low"]      { border-left-color: var(--risk-low); }
.finding-row[data-level="unknown"]  { border-left-color: var(--risk-unknown); }
.finding-row[data-level="safe"]     { border-left-color: var(--risk-safe); }

.finding-row > summary {
  display: grid;
  grid-template-columns: 80px minmax(0,1fr) auto auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
}
.finding-row > summary::-webkit-details-marker { display: none; }
.finding-row > summary:hover { background: rgba(255,255,255,0.04); }

.row-name { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.row-vendor {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; gap: 8px;
}
.row-count {
  font-family: var(--font-num); font-weight: 700;
  font-size: 11px;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,.75);
  letter-spacing: .02em;
}
.row-domain {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px; color: rgba(255,255,255,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-cat {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,.7);
  white-space: nowrap;
}
.row-chev {
  font-size: 14px; color: rgba(255,255,255,.45);
  transition: transform .15s ease;
}
.finding-row[open] > summary .row-chev { transform: rotate(180deg); }

.row-body {
  padding: 4px 18px 18px 110px;
  border-top: 1px solid var(--ef-rule);
  font-size: 14px; line-height: 1.55;
  background: rgba(0,0,0,0.18);
}
.row-body p { margin: 10px 0 0; max-width: 70ch; }
.row-body .label {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ef-lime);
  margin-right: 8px;
}
.finding-url {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--ef-rule);
  padding: 8px 10px; border-radius: var(--radius-sm);
  word-break: break-all;
  margin-top: 12px;
  color: rgba(255,255,255,.7);
}

.instance-list {
  list-style: none; padding: 0; margin: 6px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.instance-list li {
  display: grid; grid-template-columns: 90px 1fr; gap: 12px; align-items: baseline;
  padding: 6px 10px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
}
.instance-list .inst-type {
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.instance-list .inst-url {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  word-break: break-all;
  color: rgba(255,255,255,.78);
}

/* Risk pill (used in summary row + cookie table) */
.risk-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #fff;
  text-align: center;
}
.risk-pill[data-level="critical"] { background: var(--risk-critical); }
.risk-pill[data-level="high"]     { background: var(--risk-high); }
.risk-pill[data-level="medium"]   { background: var(--risk-medium); }
.risk-pill[data-level="low"]      { background: var(--risk-low); }
.risk-pill[data-level="unknown"]  { background: var(--risk-unknown); }
.risk-pill[data-level="safe"]     { background: var(--risk-safe); }

.baa-flag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 8px; border-radius: 999px; font-size: 10px;
  font-family: var(--font-display); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,.75);
  border: 1px solid var(--ef-rule);
}
.baa-flag.baa-no  { color: #FF8077; border-color: rgba(250,82,71,.35); background: rgba(250,82,71,.10); }
.baa-flag.baa-yes { color: #8DDBA8; border-color: rgba(63,166,107,.35); background: rgba(63,166,107,.10); }

/* Litigation chip in the row summary. Amber border to read as "warning, but
   not as severe as critical risk-pill." Only rendered when the vendor has at
   least one settled or pending case. */
.settlement-flag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 10.5px; letter-spacing: .05em;
  color: #F4C778;
  background: rgba(244, 199, 120, 0.10);
  border: 1px solid rgba(244, 199, 120, 0.35);
  white-space: nowrap;
  cursor: help;
}
.settlement-flag .settlement-icon {
  font-size: 12px; line-height: 1;
  color: #F4C778;
}

/* Litigation history block inside the expanded row body. */
.litigation {
  margin-top: 14px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(244, 199, 120, 0.18);
  background: rgba(244, 199, 120, 0.04);
  border-radius: var(--radius-sm);
}
.litigation .lit-headline {
  margin: 0 !important;
  max-width: 75ch;
  color: rgba(255,255,255,.88);
}
.litigation .lit-headline .label { color: #F4C778; }
.litigation strong { color: #fff; font-weight: 700; }

.litigation-cases {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.litigation-cases li {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  padding: 7px 10px;
  background: rgba(0,0,0,0.22);
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.35;
}
.litigation-cases .lit-defendant {
  color: rgba(255,255,255,.92);
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
}
.litigation-cases .lit-amount {
  font-family: var(--font-num);
  color: #F4C778;
  font-weight: 700;
  font-size: 12px;
}
.litigation-cases .lit-amount-undisclosed {
  color: rgba(255,255,255,.45);
  font-weight: 500;
  font-style: italic;
}
.litigation-cases .lit-year {
  font-family: var(--font-num);
  color: rgba(255,255,255,.55);
  font-size: 11.5px;
}
.litigation-cases .lit-status {
  color: rgba(255,255,255,.7);
  font-size: 11.5px;
}
.litigation-cases .lit-tag {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px;
  color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ef-rule);
}
.litigation-cases .lit-source {
  color: rgba(255,255,255,.55);
  text-decoration: none;
  font-size: 12px;
  padding: 0 2px;
}
.litigation-cases .lit-source:hover { color: var(--ef-lime); }

.litigation-more {
  margin-top: 6px;
  font-size: 12.5px;
}
.litigation-more > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  color: rgba(255,255,255,.7);
  font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.litigation-more > summary::-webkit-details-marker { display: none; }
.litigation-more > summary::before { content: '▸'; font-size: 10px; transition: transform .15s ease; }
.litigation-more[open] > summary::before { transform: rotate(90deg); }
.litigation-more > summary:hover { color: #F4C778; }
.litigation-more .litigation-cases { margin-top: 4px; }

.litigation-pending li { border-color: rgba(244, 199, 120, 0.25); background: rgba(244, 199, 120, 0.04); }
.lit-pending-head { margin-top: 14px !important; }

@media (max-width: 760px) {
  /* Two-row layout on mobile so long vendor names (especially
     "Unknown third-party (some-long-domain.com)") get full width and can wrap. */
  .finding-row > summary {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 8px 10px;
    padding: 12px 14px;
  }
  .finding-row > summary > .risk-pill { grid-column: 1; grid-row: 1; }
  .finding-row > summary > .row-name   { grid-column: 1 / -1; grid-row: 2; }
  .finding-row > summary > .row-chev   { grid-column: 3; grid-row: 1; justify-self: end; }
  .row-cat, .baa-flag, .settlement-flag { display: none; }
  .row-vendor {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    flex-wrap: wrap;
    line-height: 1.25;
  }
  .row-domain {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-all;
  }
  .row-body { padding-left: 18px; }
}

/* ---- Generic data table (cookies, iframes, forms) ---- */
.data-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.data-table th, .data-table td {
  padding: 10px 14px; text-align: left;
  border-bottom: 1px solid var(--ef-rule);
}
.data-table th {
  background: rgba(255,255,255,0.04);
  font-family: var(--font-display); font-weight: 700;
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table .mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12px; }
.data-table .mono.break { word-break: break-all; max-width: 480px; }
.data-table .cell-class {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  white-space: nowrap;
}
.data-table .row-vendor-mini {
  font-family: var(--font-display); font-weight: 700;
  font-size: 12px; color: rgba(255,255,255,.9);
}
.data-table .dim { color: rgba(255,255,255,.35); }

.empty-state {
  padding: 28px; text-align: center;
  color: rgba(255,255,255,.55);
  border: 1px dashed var(--ef-rule);
  border-radius: var(--radius-sm);
  font-size: 14px;
}

.more-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin: 22px 0 10px;
}
.more-title em { font-style: normal; opacity: .55; margin-left: 6px; }
.more-caveat {
  margin: -4px 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.65);
  max-width: 75ch;
  font-style: italic;
}
.more-block { margin-top: 8px; }
.more-block summary {
  cursor: pointer;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.more-block pre {
  margin: 0; padding: 12px;
  font-size: 11.5px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--ef-rule); border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  overflow-x: auto;
  color: rgba(255,255,255,.75);
}

.results-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* ---------- Print stylesheet (used for "Export PDF" via Save As PDF) ---------- */
@media print {
  @page { size: letter; margin: 0.5in; }

  html, body {
    background: #fff !important;
    color: #1a1a1a !important;
    font-size: 11pt;
    line-height: 1.45;
  }

  /* Hide chrome that doesn't belong in a printed report */
  .site-header, .site-footer,
  #view-form, #view-loading, #view-error,
  .report-bar-actions, .results-actions,
  .filter-bar, .tabs,
  .ef-cta-banner { display: none !important; }

  /* Print-only header */
  .print-header {
    display: block !important;
    border-bottom: 2px solid var(--ef-charcoal);
    padding-bottom: 12pt;
    margin-bottom: 18pt;
  }
  .print-header .print-brand {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 11pt;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ef-red);
  }
  .print-header h1 {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22pt;
    margin: 4pt 0 0;
    color: var(--ef-charcoal-deep);
  }
  .print-header .print-meta { font-size: 9.5pt; color: #555; margin-top: 6pt; }

  #view-results {
    background: #fff !important;
    color: #1a1a1a !important;
    padding: 0 !important;
  }
  .results-inner { max-width: none; }

  /* Page top: scan summary */
  .report-bar {
    background: transparent;
    border: 0;
    padding: 0;
    margin-bottom: 8pt;
    page-break-inside: avoid;
  }
  .report-title { color: var(--ef-charcoal-deep) !important; font-size: 16pt; }
  .report-meta { color: #555 !important; }
  .report-meta a { color: var(--ef-red) !important; }
  .meta-badge {
    background: #f0f0f0 !important;
    border-color: #ccc !important;
    color: #555 !important;
  }

  /* Stat strip — keep but adjust for white bg */
  .stat-strip {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 6pt !important;
    margin-bottom: 10pt;
    page-break-inside: avoid;
  }
  .stat {
    background: #f9f9f5 !important;
    border: 1px solid #ddd !important;
    padding: 10pt !important;
  }
  .stat-value { color: var(--ef-charcoal-deep) !important; font-size: 22pt !important; }
  .stat-label { color: #555 !important; }

  /* Verdict band */
  .verdict-band {
    background: #fff8d6 !important;
    border: 1px solid #d4c97a !important;
    border-left: 3px solid var(--ef-red) !important;
    color: var(--ef-charcoal-deep) !important;
    page-break-inside: avoid;
  }

  /* Risk distribution bar */
  .dist-block {
    background: #fafafa !important;
    border: 1px solid #ddd !important;
    page-break-inside: avoid;
  }
  .dist-label { color: #555 !important; }
  .dist-bar { background: #e5e5e5 !important; }
  .legend-item { color: #333 !important; }

  /* Findings: force-expanded, high-contrast */
  .finding-list { gap: 4pt; }
  .finding-row {
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-left-width: 4px !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .finding-row > summary {
    background: #fafafa !important;
    cursor: default;
    list-style: none;
  }
  .finding-row > summary .row-chev { display: none !important; }
  .row-vendor { color: var(--ef-charcoal-deep) !important; }
  .row-domain { color: #666 !important; }
  .row-cat { background: #eee !important; color: #555 !important; }
  .row-body {
    background: #fcfcfc !important;
    color: #1a1a1a !important;
    border-top: 1px solid #ddd !important;
  }
  .row-body .label { color: var(--ef-red) !important; }
  .finding-url {
    background: #f4f4f4 !important;
    border-color: #ddd !important;
    color: #555 !important;
  }
  .instance-list li {
    background: #f7f7f7 !important;
    border-color: #ddd !important;
    color: #444 !important;
  }
  .instance-list .inst-type, .instance-list .inst-url { color: #444 !important; }

  .baa-flag {
    background: #fff !important;
    color: #555 !important;
    border-color: #ccc !important;
  }
  .baa-flag.baa-no { color: var(--risk-critical) !important; border-color: var(--risk-critical) !important; }
  .baa-flag.baa-yes { color: var(--risk-safe) !important; border-color: var(--risk-safe) !important; }

  /* Risk pills retain color on print */
  .risk-pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Section titles */
  .section-title, .more-title {
    color: var(--ef-charcoal-deep) !important;
    page-break-after: avoid;
  }

  /* Table styling for cookies / iframes */
  .data-table {
    background: #fff !important;
    border: 1px solid #ddd !important;
    page-break-inside: auto;
  }
  .data-table th {
    background: #f0f0f0 !important;
    color: #333 !important;
    border-color: #ddd !important;
  }
  .data-table td { border-color: #eee !important; color: #333 !important; }

  /* Ensure colors print */
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

  /* Footer for the printed PDF */
  .print-footer {
    display: block !important;
    margin-top: 24pt;
    padding-top: 8pt;
    border-top: 1px solid #ddd;
    font-size: 8.5pt;
    color: #777;
    text-align: center;
  }
  .print-footer strong { color: var(--ef-charcoal-deep); }
}

/* The print-only elements are hidden on screen */
.print-header, .print-footer { display: none; }
/* Primary CTA matches Echo-Factory's website button system:
   lime background, charcoal text, sharp corners, Red Hat Display 600. */
.btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  background: var(--ef-lime);
  color: var(--ef-charcoal-deep);
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, transform .08s ease;
}
.btn-primary:hover { background: var(--ef-lime-soft); }
.btn-primary:active { transform: translateY(1px); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  background: rgba(255,255,255,0.06); color: #fff;
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
}
.btn-secondary:hover { background: rgba(255,255,255,0.1); }

.ef-cta-banner {
  margin-top: 32px;
  padding: 24px 28px;
  border-radius: var(--radius-md);
  background:
    radial-gradient(ellipse at 90% 0%, rgba(223,245,129,0.08), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(250,82,71,0.06) 100%);
  border: 1px solid var(--ef-rule);
  color: #fff;
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
@media (max-width: 760px) { .ef-cta-banner { grid-template-columns: 1fr; } }
.ef-cta-banner h3 {
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  margin: 0 0 6px;
}
.ef-cta-banner p { margin: 0; opacity: .8; font-size: 14px; max-width: 60ch; }
.ef-cta-banner .lime { color: var(--ef-lime); }

/* ---------- Lead capture modal ---------- */
.lead-modal {
  position: fixed; inset: 0;
  background: rgba(15,20,28,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  align-items: center; justify-content: center;
  padding: 20px;
  animation: lead-fade-in .28s ease;
}
/* Only apply display:flex when the [hidden] attribute is NOT set, so
   modal.hidden = true / false from JS actually controls visibility. Without
   the :not([hidden]) scope, .lead-modal { display: flex } overrides the
   browser default [hidden] { display: none } and the modal stays visible. */
.lead-modal:not([hidden]) { display: flex; }
@keyframes lead-fade-in { from { opacity: 0; } to { opacity: 1; } }
.lead-modal-card {
  background: var(--ef-charcoal-deep);
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 460px;
  padding: clamp(28px, 4vw, 40px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  position: relative;
  overflow: hidden;
}
.lead-modal-card::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 400' preserveAspectRatio='none'><g fill='none' stroke='%23DFF581' stroke-width='0.6' opacity='0.18'><path d='M0,260 C150,210 300,310 460,260 C540,235 580,260 600,255'/><path d='M0,300 C150,250 300,350 460,300 C540,275 580,300 600,295'/></g></svg>");
  background-size: 100% 100%;
  pointer-events: none;
}
.lead-modal-card > * { position: relative; z-index: 1; }
.lead-modal-eyebrow {
  font-family: var(--font-display); font-weight: 500; font-style: italic;
  font-size: 13px; color: var(--ef-lime);
  margin: 0 0 6px;
}
.lead-modal-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: -.005em;
  line-height: 1.1;
  margin: 0 0 12px;
  color: #fff;
}
.lead-modal-lede {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
  margin: 0 0 22px;
  max-width: 38ch;
}
.lead-form { display: flex; flex-direction: column; gap: 14px; }
.lead-field { display: flex; flex-direction: column; gap: 6px; }
.lead-field-label {
  font-family: var(--font-display); font-weight: 600;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.lead-field input {
  font-family: var(--font-text);
  font-size: 15px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-sm);
  color: #fff;
  transition: border-color .12s ease, background .12s ease;
}
.lead-field input:focus {
  outline: none;
  border-color: var(--ef-lime);
  background: rgba(255,255,255,0.09);
}
.lead-field input::placeholder { color: rgba(255,255,255,0.35); }
#lead-submit {
  margin-top: 6px;
  align-self: flex-start;
  cursor: pointer;
}
.lead-error {
  margin: 0;
  color: #FF8077;
  font-size: 13px;
  font-weight: 500;
}

/* ---- Results disclaimer: low-priority "small print" without looking like an error ---- */
.results-disclaimer {
  margin-top: 24px;
  padding: 18px 22px 16px;
  /* Subtle inset, not a card. The narrower max-width signals "fine print" by virtue of being a different shape than the main column. */
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-md);
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.62);
  max-width: 78ch;
}
.results-disclaimer p { margin: 0 0 9px; }
.results-disclaimer p:last-child { margin-bottom: 0; }
.results-disclaimer a {
  color: var(--ef-lime);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.results-disclaimer a:hover { color: #fff; }
.results-disclaimer-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 8px !important;
}
.results-disclaimer-eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
}

/* ---------- Error ---------- */
.error-card {
  max-width: 520px; margin: 80px auto; padding: 36px 32px; text-align: center;
  border: 1px solid var(--ef-rule);
  border-radius: var(--radius-lg);
  background: rgba(250,82,71,0.08);
}
.error-card h2 { font-family: var(--font-display); margin: 0 0 8px; color: var(--ef-red); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ef-charcoal-deep);
  padding: 48px clamp(20px,4vw,56px) 24px;
  border-top: 1px solid var(--ef-rule);
}
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
}
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr; } }
.footer-logo { height: 26px; margin-bottom: 12px; }
.footer-logo-link { display: inline-block; }
.footer-tag { margin: 0; opacity: .7; max-width: 60ch; font-size: 14px; line-height: 1.55; }
.footer-links {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: flex; flex-wrap: wrap; gap: 6px 22px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
}
.footer-links a {
  color: var(--ef-lime);
  text-decoration: none;
  opacity: .9;
  transition: opacity .15s ease;
}
.footer-links a:hover { opacity: 1; text-decoration: underline; }
.footer-cta p { font-family: var(--font-display); font-weight: 700; margin: 0 0 8px; font-size: 14px; opacity: .8; }
.footer-fineprint {
  max-width: 1100px; margin: 24px auto 0;
  font-size: 12px; opacity: .5; padding-top: 16px;
  border-top: 1px solid var(--ef-rule);
}