/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — the single source of truth
   ═══════════════════════════════════════════════════════

   There used to be four :root blocks and four [data-theme="light"] blocks
   scattered through this file, each redefining the same tokens with different
   values. Because CSS is last-wins, the block at the top — the one with the
   tidy banner comment, the one anyone would naturally edit — had no effect at
   all: --bg was #0b1623 here, #0b1018 further down, and #0a0e1a further down
   still. Editing the top block changed nothing, so every fix became another
   override lower in the file. That is how this stylesheet reached 10,000 lines.

   These are the effective values, consolidated. Change a colour HERE. If a
   change appears to do nothing, do not add an override — something is wrong
   and adding one is how this happened last time.

   Two notes on colour choices that look arbitrary and are not:

   * --accent (#e67e22) is only 2.85:1 against white, so it is decorative only:
     borders, rules, gradients, glows, large display type. Anything carrying
     WHITE TEXT uses --accent-strong. Same split for red: --critical is a chip
     text colour, --critical-strong is the fill behind white text.
   * Severity colours are read against their own tinted chip background, not
     against --panel. Re-measure at the composited value.

   See CLAUDE.md and Docs/UI_UX_MAKEOVER_PLAN.md. */
:root {
  color-scheme: dark;
  --cobalt: #1A4579;
  --orange: #E67E22;
  --yellow: #F1C40F;
  --dgrey: #2C3E50;
  --bg: #0a0e1a;
  --bg-alt: #101722;
  --panel: #151f2c;
  --panel-hover: #1b2a3c;
  --topbar-bg: rgba(13, 19, 28, .92);
  --topbar-border: rgba(134, 166, 203, .18);
  --topbar-shadow: rgba(0, 0, 0, .28);
  --text: #eef4fb;
  --muted: #9aaec3;
  --line: rgba(143, 165, 190, .22);
  --accent: #e67e22;
  --accent-dark: #c96812;
  --accent-blue: #4b91dc;
  --warning: #F1C40F;  /* on chip tint: 7.63:1 */
  --warning-bg: rgba(241,196,15,.13);
  --success: #2ecc71;  /* 6.51 on --panel, 5.21 on the lightest raised surface a chip lands on (was #27ae60, which dropped to 3.81 on a .list-row) */
  --success-bg: rgba(39,174,96,.13);
  --low: #7fc144;  /* on chip tint: 6.14:1 */
  --low-bg: rgba(127,193,68,.12);
  --medium: #ef8f3f;  /* 6.86 on --panel, 5.45 on the lightest raised surface (was #E67E22: 4.64 there) */
  --medium-bg: rgba(230,126,34,.12);
  --critical: #f4756a;  /* 6.01 on --panel, 4.78 on the lightest raised surface a chip lands on (was #e74c3c: 3.90) */
  --critical-bg: rgba(231,76,60,.12);
  --muted-strong: #9aaec3;
  --accent-strong: #ad5a00;
  --accent-strong-hover: #8f4600;
  --critical-strong: #b3241a;
  --critical-strong-hover: #8f1810;
  --accent-text: #e67e22;
  --accent-text-hover: #f1c40f;
  --focus-ring: rgba(230, 126, 34, .28);
  --surface-soft: rgba(255, 255, 255, .035);
  --surface-strong: rgba(255, 255, 255, .07);
  --shadow-soft: 0 14px 34px rgba(0, 0, 0, .22);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .04), 0 12px 28px rgba(0, 0, 0, .26);
  --radius: 8px;
  --container: 1180px;
  --color-blue-50: #eef4fc;
  --color-blue-100: #d9e7f8;
  --color-blue-200: #b3cef1;
  --color-blue-300: #82afe6;
  --color-blue-400: #4b91dc;
  --color-blue-500: #2a6fc9;
  --color-blue-600: #1f5aa8;
  --color-blue-700: #1a4579;
  --color-blue-800: #163a63;
  --color-blue-900: #122e4e;
  --color-blue-950: #0a1a2e;
  --color-brand-gradient: linear-gradient(135deg, var(--color-blue-700) 0%, var(--color-blue-400) 55%, var(--orange) 130%);
  --color-glow-blue: rgba(75, 145, 220, .35);
  --color-glow-orange: rgba(230, 126, 34, .38);
  --surface-0: var(--bg);
  --surface-1: var(--panel);
  --surface-2: var(--panel-hover);
  --surface-3: var(--surface-strong, rgba(255, 255, 255, .07));
  --sev-critical: var(--critical);
  --sev-high: var(--critical);
  --sev-medium: var(--medium);
  --sev-low: var(--low);
  --sev-info: var(--muted);
  --text-xs: clamp(.72rem, .70rem + .10vw, .78rem);
  --text-sm: clamp(.82rem, .80rem + .10vw, .88rem);
  --text-base: clamp(.95rem, .92rem + .15vw, 1rem);
  --text-lg: clamp(1.05rem, 1.00rem + .25vw, 1.15rem);
  --text-xl: clamp(1.20rem, 1.10rem + .40vw, 1.40rem);
  --text-2xl: clamp(1.40rem, 1.25rem + .60vw, 1.75rem);
  --text-3xl: clamp(1.70rem, 1.40rem + 1.0vw, 2.10rem);
  --text-4xl: clamp(2.00rem, 1.60rem + 1.6vw, 2.60rem);
  --text-5xl: clamp(2.40rem, 1.80rem + 2.4vw, 3.25rem);
  --text-6xl: clamp(2.80rem, 2.00rem + 3.2vw, 4.00rem);
  --font-display: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --leading-tight: 1.1;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  --tracking-tight: -0.02em;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.18);
  --shadow-md: 0 8px 24px rgba(0,0,0,.24);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.32);
  --shadow-glow: 0 0 0 1px rgba(230,126,34,.15), 0 0 42px var(--color-glow-orange);
}

/* Light theme. Only the tokens that genuinely differ are redeclared; everything
   else inherits from :root above.

   Note this block must stay AFTER :root — they have equal specificity, so
   source order is the only thing making these win. */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f8fc;
  --bg-alt: #eef1f8;
  --panel: #ffffff;
  --panel-hover: #f1f5f9;
  --topbar-bg: rgba(255, 255, 255, .94);
  --topbar-border: rgba(24, 58, 93, .14);
  --topbar-shadow: rgba(21, 45, 74, .08);
  --text: #122033;
  --muted: #5c6f83;  /* 4.82 on --bg, 4.51 on --bg-alt, 5.18 on --panel */
  --line: rgba(26, 69, 121, .16);
  --accent-blue: #1f66b1;
  --warning: #7a5c00;  /* on chip tint: 5.60:1 (was #c8960a, 2.40:1) */
  --warning-bg: rgba(200,150,10,.12);
  --success: #12703d;  /* on chip tint: 5.39:1 (was #1a9150, 3.53:1) */
  --success-bg: rgba(26,145,80,.11);
  --low: #3d6b12;  /* on chip tint: 5.83:1 (was #7fc144, 2.01:1) */
  --low-bg: rgba(127,193,68,.12);
  --medium: #8a4600;  /* on chip tint: 6.33:1 (was #E67E22, 2.54:1) */
  --medium-bg: rgba(230,126,34,.12);
  --critical: #b3241a;  /* on chip tint: 5.81:1 (was #e74c3c, 3.37:1) */
  --critical-bg: rgba(231,76,60,.10);
  --muted-strong: #556676;  /* 5.04 on a severity chip, 4.87 on a trust badge */
  --accent-text: #9c5100;  /* 5.62 on --panel, 5.10 on an orange tile */
  --accent-text-hover: #8f4600;  /* 6.90 on --panel */
  --focus-ring: rgba(230, 126, 34, .22);
  --surface-soft: rgba(26, 69, 121, .045);
  --surface-strong: rgba(26, 69, 121, .075);
  --shadow-soft: 0 14px 34px rgba(25, 55, 95, .09);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .9), 0 12px 28px rgba(28, 59, 92, .10);
  --shadow-sm: 0 1px 2px rgba(15,40,80,.08);
  --shadow-md: 0 8px 24px rgba(15,40,80,.08);
  --shadow-lg: 0 24px 60px rgba(15,40,80,.12);
  --shadow-glow: 0 0 0 1px rgba(230,126,34,.12), 0 0 42px rgba(230,126,34,.22);
}


/* ═══════════════════════════════════════════════════════
   LIGHT THEME
═══════════════════════════════════════════════════════ */


[data-theme="light"] input {
  background: #ffffff;
  border-color: #bfcdd9;
  color: var(--text);
}

[data-theme="light"] input:focus {
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(26,69,121,.12);
}

[data-theme="light"] .panel {
  box-shadow: 0 1px 4px rgba(15,40,80,.06), 0 4px 16px rgba(15,40,80,.07);
  border-color: #d4dfe9;
}

[data-theme="light"] .list-row {
  background: #f8fafc;
  border-color: #d4dfe9;
}

[data-theme="light"] .list-row:hover {
  background: var(--panel-hover);
  border-color: var(--cobalt);
}

[data-theme="light"] .topbar {
  box-shadow: 0 1px 0 var(--topbar-border), 0 2px 12px var(--topbar-shadow);
}

[data-theme="light"] .button.secondary {
  background: rgba(26,69,121,.07);
  color: var(--cobalt);
  border-color: rgba(26,69,121,.25);
}

[data-theme="light"] .button.secondary:hover {
  background: rgba(26,69,121,.13);
}

[data-theme="light"] .stat-card {
  box-shadow: 0 1px 4px rgba(15,40,80,.06), 0 4px 16px rgba(15,40,80,.07);
  border-color: #d4dfe9;
}

[data-theme="light"] .data-table th {
  background: #f0f5fb;
}

[data-theme="light"] .data-table tbody tr:hover td {
  background: #edf2f9;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

body > main {
  flex: 1 0 auto;
}

body > footer {
  flex-shrink: 0;
}

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

/* ─── Top bar ─────────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--topbar-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

/* Single source of truth for the brand lockup. Heights are sized against the
   .topbar min-height (68px) to leave even optical clearance; the mobile
   override lives with the other <=640px rules further down. */
.brand-mark {
  height: 48px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 12px rgba(230, 126, 34, .18));
}

/* The wordmark is now one inline SVG that fills with currentColor, rather than
   two PNGs swapped by CSS. .brand-wordmark is the <span> wrapping it; the SVG
   inside takes its height and derives its own width from the viewBox, so the
   aspect ratio is preserved without width/height attributes. */
.brand-wordmark {
  display: inline-flex;
  align-items: center;
  height: 46px;
  flex-shrink: 0;
  /* Inherited by the SVG's fill="currentColor". The top bar's own colour is
     what makes the mark white on dark and cobalt on light. */
  color: var(--text);
}

[data-theme="light"] .brand-wordmark {
  color: var(--cobalt);
}

.brand-wordmark svg {
  height: 100%;
  width: auto;
  display: block;
}

/* `display: contents` so the <picture> wrapper does not become a flex item of
   .brand — the <img> inside stays the flex item, as it was when this was a bare
   <img> tag. Only the shield still needs this; the wordmark is an inline SVG
   now, so the two-variant swap rules that used to live here are gone. */
.brand-mark-pic {
  display: contents;
}

nav {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--muted);
}

nav form {
  margin: 0;
}

nav a {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: color .15s;
}

nav a:hover {
  color: var(--text);
}

.nav-meta {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -.01em;
}

.link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  transition: color .15s;
}

.link-button:hover {
  color: var(--accent-text);
}

/* ─── Theme toggle ────────────────────────────────────────────────────────── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  flex-shrink: 0;
}

.theme-toggle:hover {
  color: var(--accent-text);
  border-color: var(--orange);
  background: rgba(230,126,34,.08);
}

.text-link {
  /* --accent-text, not --orange: --orange is a fixed brand hex that is not
     theme-aware, and it measured 2.85:1 on a light panel (the :hover --yellow
     was worse, at 1.66:1). */
  color: var(--accent-text);
  font-weight: 700;
}

.text-link:hover {
  color: var(--accent-text-hover);
}

/* ─── Layout ──────────────────────────────────────────────────────────────── */
/* Every page-level container resolves to the same width so the top bar, the
   page content and the footer share one left/right edge. Overriding the width
   here (or anywhere else) re-introduces the misalignment — change --container
   instead. */
.shell {
  width: min(var(--container), calc(100% - clamp(28px, 5vw, 56px)));
  margin: 40px auto;
}

.page-head {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 6px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text);
}

h2 {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--text);
}

h3 {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text);
}

.eyebrow {
  margin-bottom: 8px;
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}


/* ─── Grid / Panel ────────────────────────────────────────────────────────── */
.grid {
  display: grid;
}


.narrow {
  max-width: 640px;
}

.panel {
  margin-bottom: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.25);
}

/* ─── Legal / prose pages (privacy, terms, cookie, DPA) ───────────────────── */
.prose {
  line-height: 1.7;
  color: var(--text);
}

.prose h2 {
  margin: 30px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 22px;
  line-height: 1.25;
}

.prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose h3 {
  margin: 22px 0 10px;
  font-size: 17px;
}

.prose p,
.prose li {
  color: var(--muted);
  line-height: 1.7;
}

.prose ul,
.prose ol {
  margin: 12px 0;
  padding-left: 22px;
}

.prose li + li {
  margin-top: 6px;
}

.legal-table {
  width: 100%;
  margin: 16px 0 8px;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  font-size: 14.5px;
}

.legal-table thead th {
  padding: 11px 14px;
  background: var(--surface-strong, rgba(255,255,255,.05));
  color: var(--text);
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.legal-table tbody td {
  padding: 11px 14px;
  color: var(--muted);
  vertical-align: top;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  line-height: 1.55;
}

.legal-table tbody td:last-child {
  border-right: 0;
}

.legal-table thead th + th {
  border-left: 1px solid var(--line);
}

.legal-table tbody tr:last-child td {
  border-bottom: 0;
}

.legal-table tbody tr:hover td {
  background: var(--surface-soft, rgba(255,255,255,.03));
}

/* ─── List rows ───────────────────────────────────────────────────────────── */
.list {
  display: grid;
}

.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color .12s, background .12s;
}


.list-row span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/* ─── Status / Severity badges ────────────────────────────────────────────── */
.status,
.severity {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(110,136,160,.15);
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: capitalize;
}

.status.success {
  background: var(--success-bg);
  color: var(--success);
}

.status.warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.status.danger {
  background: rgba(231, 76, 60, .13);
  /* Tokenised so it tracks the theme-specific critical colour rather than
     pinning the dark-theme red into light mode (3.24:1 there). */
  color: var(--critical);
}

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border: 0;
  background: var(--accent-strong);
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s;
}

.button:hover {
  background: var(--accent-strong-hover);
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.button.secondary {
  border: 1px solid var(--cobalt);
  box-shadow: none;
}

.button.secondary:hover {
  transform: translateY(-1px);
}

.button:disabled,
.button.secondary:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

.button-small {
  padding: 0 13px;
  font-size: 13px;
}

/* ─── Forms ───────────────────────────────────────────────────────────────── */
.form {
  display: grid;
}

.alert {
  margin-bottom: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(231,76,60,.4);
  border-radius: 8px;
  background: rgba(231,76,60,.12);
  color: #f1948a;
  font-weight: 700;
}

label {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
}

input {
  width: 100%; 
  border: 1px solid var(--line);
  font: inherit;
  font-size: 14px;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
}
input[type="text"]{
   padding: 0 14px;
}

input:focus {
  outline: none;
}

input::placeholder {
  color: var(--muted);
}

/* ─── Findings ────────────────────────────────────────────────────────────── */
.findings {
  display: grid;
  gap: 14px;
}

.finding {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.finding-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.severity-low {
  background: var(--low-bg);
  color: var(--low);
}

.severity-medium {
  background: var(--medium-bg);
  color: var(--medium);
}

.severity-critical,
.severity-high {
  background: var(--critical-bg);
  color: var(--critical);
}

/* ─── Definition list ─────────────────────────────────────────────────────── */
dl {
  display: grid;
  gap: 8px 16px;
  margin: 16px 0 0;
}

dt {
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
}

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .topbar {
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 10px;
  }

  .topbar nav {
    gap: 10px;
    flex-wrap: wrap;
  }

  .brand-wordmark {
    height: 28px;
  }

  .brand-mark {
    height: 40px;
  }

  .shell {
    width: calc(100% - 24px);
    margin: 24px auto;
  }

  .page-head,
  .list-row,
  .finding-head {
    align-items: stretch;
    flex-direction: column;
  }

  .grid.two {
    grid-template-columns: 1fr;
  }

  dl {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   LANDING PAGE
══════════════════════════════════════════════════════════════════════════ */

/* ─── Shared landing layout ───────────────────────────────────────────────── */
.lp-section {
  padding: 80px 0;
}


.lp-section-inner {
  /* Width comes from the shared --container rule below (see "Layout"); only
     the centring belongs here. */
  margin: 0 auto;
}

.lp-section-title {
  margin-bottom: 10px;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
}

.lp-section-sub {
  margin-bottom: 48px;
  color: var(--muted);
  font-size: 16px;
  max-width: 560px;
}

/* ─── Hero ────────────────────────────────────────────────────────────────── */
.lp-hero {
  display: grid;
  align-items: center;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 80px 0 72px;
}

.lp-eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.lp-headline {
  margin: 0 0 20px;
  font-weight: 900;
  color: var(--text);
}

.lp-headline-accent {
  color: var(--accent-text);
}

.lp-subline {
  margin: 0 0 36px;
  font-size: 17px;
  line-height: 1.65;
}

.lp-hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.lp-cta-primary {
  min-height: 48px;
  padding: 0 28px;
  font-size: 16px;
}

.lp-cta-secondary {
  min-height: 48px;
  padding: 0 28px;
  font-size: 16px;
}

/* ─── Terminal visual ─────────────────────────────────────────────────────── */
.lp-terminal {
  border: 1px solid var(--line);
  overflow: hidden;
  font-family: "Fira Code", "Cascadia Code", "Consolas", monospace;
  font-size: 13px;
}

.lp-terminal-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #111e2e;
  border-bottom: 1px solid var(--line);
}

.lp-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.lp-dot-red    { background: #e74c3c; }
.lp-dot-yellow { background: #F1C40F; }
.lp-dot-green  { background: #2ecc71; }

.lp-terminal-title {
  margin-left: 6px;
  font-size: 12px;
  color: var(--muted);
  font-family: inherit;
}

.lp-terminal-body {
  padding: 20px 22px;
  line-height: 1.9;
}

.lt-line {
  margin: 0;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

.lt-ok   { color: var(--success); }
.lt-warn { color: var(--warning); }
.lt-crit { color: var(--critical); }
.lt-pass   { color: var(--success);  font-weight: 700; }
.lt-medium { color: var(--medium);   font-weight: 700; }
.lt-high   { color: var(--critical); font-weight: 700; }
.lt-low    { color: var(--low);      font-weight: 700; }
.lt-muted  { color: var(--muted); }

/* ─── Stats bar ───────────────────────────────────────────────────────────── */
.lp-stats {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lp-stats-inner {
  align-items: center;
  justify-content: center;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0;
  flex-wrap: wrap;
}

.lp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 48px;
}

.lp-stat-num {
  font-size: 36px;
  font-weight: 900;
  color: var(--accent-text);
  line-height: 1;
}

/* Modifier for a stat value that's a short phrase rather than a number
   (e.g. "Web + API + Cloud") — the default 36px number size wraps a phrase
   onto two lines and throws off vertical alignment with the other stats. */
.lp-stat-num-text {
  font-size: 20px;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
}

.lp-stat-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.lp-stat-divider {
  width: 1px;
  height: 48px;
  background: var(--line);
}

/* ─── Steps ───────────────────────────────────────────────────────────────── */
.lp-steps {
  align-items: stretch;
}

.lp-step {
  flex: 1;
  padding: 28px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.lp-step-arrow {
  align-items: center;
  padding: 28px 8px 0;
  color: var(--cobalt);
  font-size: 22px;
  font-weight: 900;
  flex-shrink: 0;
}

.lp-step-num {
  margin-bottom: 12px;
  font-weight: 900;
  line-height: 1;
}

.lp-step-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}

.lp-step-body {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* ─── Package cards ───────────────────────────────────────────────────────── */
.lp-packages {
  display: grid;
  gap: 16px;
}

.lp-pkg {
  position: relative;
  padding: 26px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.lp-pkg:hover {
  border-color: var(--cobalt);
  box-shadow: 0 4px 20px rgba(26,69,121,.2);
}

.lp-pkg-featured {
  border-color: var(--orange);
}

.lp-pkg-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(230,126,34,.15);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.lp-pkg-soon {
  background: rgba(111,143,168,.12);
  color: var(--muted);
}

.lp-pkg-icon {
  margin-bottom: 10px;
}

.lp-pkg-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}

.lp-pkg-desc {
  margin: 0 0 16px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

.lp-pkg-checks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.lp-pkg-checks li {
  font-size: 13px;
  color: var(--muted);
  padding-left: 18px;
  position: relative;
}

.lp-pkg-checks li::before {
  position: absolute;
  color: var(--accent-text);
  font-weight: 900;
}

/* ─── Safety section ──────────────────────────────────────────────────────── */
.lp-safety-inner {
  display: grid;
  align-items: center;
}

.lp-safety-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.lp-safety-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  color: var(--text);
}

.lp-safety-check {
  flex-shrink: 0;
  margin-top: 1px;
}

.lp-safety-findings {
  display: grid;
  gap: 14px;
}

.lp-finding-card {
  padding: 18px 20px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
}

.lp-fc-high   { border-left: 3px solid var(--critical); }
.lp-fc-medium { border-left: 3px solid var(--medium); }

.lp-fc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.lp-fc-sim {
  font-size: 11px;
  color: var(--muted);
  font-family: "Fira Code", "Cascadia Code", monospace;
}

.lp-fc-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.lp-fc-body {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.lp-fc-fix {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.lp-fc-fix code {
  font-family: "Fira Code", "Cascadia Code", monospace;
  font-size: 11px;
  background: rgba(26,69,121,.2);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--accent-blue);
}

/* ─── CTA band ────────────────────────────────────────────────────────────── */
.lp-cta-band {
  padding: 80px 0;
  text-align: center;
}


.lp-cta-band-title {
  margin: 0 0 14px;
  font-size: 36px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.2;
}

.lp-cta-band-sub {
  margin: 0 0 36px;
  font-size: 16px;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
}

.lp-cta-band .lp-hero-cta {
  justify-content: center;
}

.lp-cta-band .lp-cta-secondary {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.3);
  color: #ffffff;
}

.lp-cta-band .lp-cta-secondary:hover {
  background: rgba(255,255,255,.22);
}

/* ─── Landing responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lp-packages {
    grid-template-columns: repeat(2, 1fr);
  }

  .lp-steps {
    flex-direction: column;
  }

  .lp-step-arrow {
    transform: rotate(90deg);
    padding: 0 0 0 28px;
  }

  .lp-safety-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 700px) {
  .lp-hero {
    grid-template-columns: 1fr;
    padding: 40px 0 32px;
  }

  .lp-hero-visual {
    display: none;
  }

  .lp-headline {
    font-size: clamp(26px, 8vw, 40px);
  }

  .lp-subline {
    font-size: 15px;
    margin-bottom: 28px;
  }

  .lp-hero-cta {
    flex-direction: column;
    gap: 10px;
  }

  .lp-cta-primary,
  .lp-cta-secondary {
    width: 100%;
    min-height: 46px;
    font-size: 15px;
    justify-content: center;
  }

  .lp-section {
    padding: 48px 0;
  }

  .lp-section-title {
    font-size: 24px;
  }

  .lp-section-sub {
    font-size: 14px;
    margin-bottom: 32px;
  }

  .lp-packages {
    grid-template-columns: 1fr;
  }

  .lp-stats-inner {
    gap: 16px;
    padding: 24px 0;
  }

  .lp-stat-divider {
    display: none;
  }

  .lp-stat {
    padding: 0 20px;
  }

  .lp-stat-num {
    font-size: 28px;
  }

  .lp-steps {
    gap: 12px;
  }

  .lp-step {
    padding: 20px 18px;
  }

  .lp-step-arrow {
    display: none;
  }

  .lp-cta-band {
    padding: 48px 0;
  }

  .lp-cta-band-title {
    font-size: 26px;
  }

  .lp-cta-band .lp-hero-cta {
    flex-direction: column;
    align-items: stretch;
    padding: 0 16px;
  }
}

/* ─── Site footer ─────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  width: min(1100px, calc(100% - 48px));
  margin: 0 auto;
}

.footer-brand {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
}

.footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-nav a {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: color .15s;
}

.footer-nav a:hover {
  color: var(--text);
}

.footer-legal {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-align: right;
}

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

  .footer-legal {
    text-align: left;
  }
}


/* ─── Stat cards ──────────────────────────────────────────────────────────── */
.stat-card {
  /* Flex column, not block: the card's children are <span>s (see the KPI grid
     in dashboard.html), so under `display: block` they laid out inline and the
     value ran straight into its label — "1TARGETS" — with the `margin-bottom`
     on .stat-value silently inert, as vertical margins are on inline boxes.
     A column also gives the gap a single definition instead of per-child
     margins. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  text-decoration: none;
  color: inherit;
}

.stat-value {
  font-size: 38px;
  font-weight: 900;
  color: var(--text);
  line-height: 1;
  /* Spacing now comes from .stat-card's gap. */
}

.stat-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ─── Panel count ─────────────────────────────────────────────────────────── */
.panel-count {
  font-weight: 400;
  font-size: 15px;
  color: var(--muted);
}


.data-table {
  width: 100%;
  font-size: 13.5px;
}

.data-table th {
  padding: 9px 12px;
  text-align: left;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.data-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: middle;
  font-size: 13.5px;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}


.table-actions form {
  margin: 0;
}

/* ─── Admin responsive ────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  /* Hide wordmark on very small screens to keep the topbar tidy */
  .brand-wordmark {
    display: none;
  }

  .topbar {
    padding: 8px 12px;
  }

  .topbar nav {
    gap: 8px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   DNS VERIFICATION
══════════════════════════════════════════════════════════════════════════ */

.dns-record-box {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.dns-record-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0;
  border-bottom: 1px solid var(--line);
}

.dns-record-row:last-child {
  border-bottom: 0;
}

.dns-record-label {
  padding: 10px 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
}

.dns-record-value {
  padding: 10px 14px;
  font-family: ui-monospace, "Cascadia Code", "Fira Mono", monospace;
  font-size: 13px;
  color: var(--text);
  word-break: break-all;
  display: flex;
  align-items: center;
}

.dns-copy {
  cursor: pointer;
  user-select: all;
  transition: background .15s;
  position: relative;
}

.dns-copy:hover {
  background: var(--panel-hover);
}

.dns-copy::after {
  content: "Copy";
  position: absolute;
  right: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  font-family: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}

.dns-copy:hover::after {
  opacity: 1;
}

.dns-copy.dns-copied::after {
  content: "Copied!";
  color: var(--green, #4ade80);
  opacity: 1;
}

@media (max-width: 600px) {
  .dns-record-row {
    grid-template-columns: 1fr;
  }

  .dns-record-label {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 6px 12px;
  }
}

/* ==========================================================================
   Responsive visual refinement
   ========================================================================== */


html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(75, 145, 220, .09), transparent 330px),
    linear-gradient(90deg, rgba(230, 126, 34, .045), transparent 52%);
  background-attachment: fixed;
}

[data-theme="light"] body {
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(26, 69, 121, .06), transparent 310px),
    linear-gradient(90deg, rgba(230, 126, 34, .045), transparent 56%);
}

a,
button,
input {
  -webkit-tap-highlight-color: transparent;
}

/* Keyboard focus indicator.

   Previously this covered only a/button/input, which left <select>, <textarea>
   and the <summary> elements that open the Agency and Account nav menus with
   no visible focus at all — those menus were reachable by keyboard but you
   could not see where you were. [tabindex] picks up <main tabindex="-1">
   (the skip-link target) and any scripted focus holder.

   --focus-ring is a 28%-alpha orange, which is too faint on its own to meet
   the WCAG 2.2 3:1 non-text contrast requirement against every surface it can
   land on. It is used as the outer glow; the outline itself is solid
   --accent so the indicator is legible on both themes. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px var(--focus-ring);
}

/* <main tabindex="-1"> only exists so the skip link can move focus into it.
   It is not an interactive control, so drawing a focus box around the whole
   page after activating the skip link is noise — the scroll and the moved
   focus are the feedback. */
main:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Skip link: off-screen until focused, then pinned to the top-left above the
   sticky top bar (which sits at z-index 100). */
.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--accent-strong);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  transition: top .15s ease;
}

.skip-link:focus {
  top: 12px;
}

.topbar {
  min-height: 68px;
  padding: 0 clamp(16px, 4vw, 40px);
}

.brand {
  min-width: 0;
}

.topbar nav {
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.topbar nav a:not(.button),
.link-button,
.nav-meta {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border-radius: var(--radius);
  padding: 0 8px;
}

.topbar nav a:not(.button):hover,
.link-button:hover {
  background: var(--surface-strong);
}

.nav-meta {
  max-width: 220px;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-toggle {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.shell,
.lp-section-inner,
.lp-hero,
.lp-stats-inner,
.site-footer-inner {
  width: min(var(--container), calc(100% - clamp(28px, 5vw, 56px)));
}

.shell {
  margin-block: clamp(24px, 5vw, 48px);
}

.narrow {
  width: min(100%, 680px);
  margin-inline: auto;
}

.legal-page.narrow {
  width: min(var(--container), calc(100% - clamp(28px, 5vw, 56px)));
}

.legal-table {
  display: table;
}

@media (max-width: 640px) {
  .legal-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

.page-head {
  align-items: center;
  margin-bottom: clamp(18px, 3vw, 28px);
}

.page-head > div {
  min-width: 0;
}

h1 {
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 0;
}

h2,
h3,
.lp-headline,
.lp-section-title,
.lp-cta-band-title {
  letter-spacing: 0;
}

.muted,
.empty,
small {
  color: var(--muted);
}

.panel,
.stat-card,
.list-row,
.finding,
.lp-step,
.lp-pkg,
.lp-finding-card,
.dns-record-box {
  border-color: var(--line);
  border-radius: var(--radius);
}

.panel,
.stat-card,
.lp-step,
.lp-pkg,
.lp-finding-card {
  background: linear-gradient(180deg, var(--surface-soft), transparent 130px), var(--panel);
  box-shadow: var(--shadow-card);
}

.panel {
  padding: clamp(18px, 3vw, 28px);
}

.grid {
  gap: clamp(14px, 2.4vw, 22px);
}

.grid.two {
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}

.grid.four {
  grid-template-columns: repeat(4, minmax(170px, 1fr));
}

.list {
  gap: 12px;
}

.list-row {
  min-width: 0;
  padding: 15px 16px;
  background: var(--surface-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}

.list-row:hover {
  border-color: rgba(230, 126, 34, .55);
  background: var(--panel-hover);
}

.list-row strong,
.list-row small {
  overflow-wrap: anywhere;
}

.status,
.severity {
  border: 1px solid transparent;
  white-space: nowrap;
}

.status.success,
.severity-low {
  border-color: rgba(39, 174, 96, .25);
}

.status.warning,
.severity-medium {
  border-color: rgba(230, 126, 34, .28);
}

.severity-critical,
.severity-high {
  border-color: rgba(231, 76, 60, .28);
}

.button {
  gap: 8px;
  min-height: 42px;
  border-radius: var(--radius);
  box-shadow: 0 8px 18px rgba(230, 126, 34, .20);
  white-space: nowrap;
}

.button:hover {
  box-shadow: 0 10px 22px rgba(230, 126, 34, .27);
}

.button.secondary {
  background: var(--surface-strong);
  border-color: var(--line);
  color: var(--text);
}

.button.secondary:hover {
  border-color: rgba(230, 126, 34, .42);
  background: var(--surface-strong);
}

.button-small {
  min-height: 34px;
  padding-inline: 12px;
}

.form {
  gap: 14px;
}

label {
  color: var(--text);
}

input {
  border-radius: var(--radius);
  background: var(--surface-soft);
}

input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.alert,
.notice-banner {
  border-radius: var(--radius);
}

.finding {
  background: var(--surface-soft);
}

.finding p {
  color: var(--muted);
}

dl {
  grid-template-columns: minmax(120px, 170px) minmax(0, 1fr);
}

.table-scroll {
  margin-inline: calc(clamp(18px, 3vw, 28px) * -1);
  padding-inline: clamp(18px, 3vw, 28px);
  scrollbar-color: var(--muted) transparent;
}

.data-table {
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th {
  position: sticky;
  top: 0;
  background: var(--bg-alt);
}

.data-table th,
.data-table td {
  border-bottom-color: var(--line);
}

.data-table tbody tr:hover td {
  background: var(--surface-strong);
}

.table-actions > div {
  justify-content: flex-end;
}

.dns-record-box {
  background: var(--panel);
}

.dns-record-label {
  background: var(--surface-soft);
}

.dns-record-value {
  min-width: 0;
  background: transparent;
}

.dns-copy::after {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}

.site-footer {
  background: var(--topbar-bg);
  border-top-color: var(--topbar-border);
}

.footer-nav {
  row-gap: 8px;
}

.lp-hero {
  grid-template-columns: minmax(0, 1.03fr) minmax(360px, .97fr);
  gap: clamp(32px, 5vw, 64px);
  min-height: min(700px, calc(100vh - 68px));
  padding-block: clamp(48px, 7vw, 84px);
}


.lp-subline {
  max-width: 620px;
  color: var(--muted);
}

.lp-terminal {
  border-radius: var(--radius);
  background: #0d141d;
  box-shadow: var(--shadow-soft);
}

[data-theme="light"] .lp-terminal {
  background: #132033;
}

.lp-terminal-body {
  overflow-x: auto;
}

.lp-stats {
  background: var(--panel);
  border-color: var(--line);
}

.lp-stats-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 0;
}

.lp-stat {
  min-height: 94px;
  justify-content: center;
  padding-inline: 22px;
}

.lp-stat-divider {
  display: none;
}

.lp-section {
  padding-block: clamp(56px, 8vw, 88px);
}

.lp-section-alt {
  background: color-mix(in srgb, var(--bg-alt) 82%, transparent);
}

.lp-section-title {
  font-size: clamp(28px, 4vw, 38px);
}

.lp-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.lp-step-arrow {
  display: none;
}

.lp-step,
.lp-pkg,
.lp-finding-card {
  border-radius: var(--radius);
}


.lp-packages,
.pricing-grid {
  grid-template-columns: repeat(4, minmax(220px, 1fr));
}

.lp-pkg {
  min-width: 0;
}

.lp-pkg::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--line);
}

.lp-pkg-featured::before {
  background: var(--accent);
}

.lp-pkg-featured {
  box-shadow: 0 0 0 1px rgba(230, 126, 34, .45), var(--shadow-card);
}

.lp-pkg-checks li::before {
  content: "";
  top: .72em;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--orange);
}


.lp-cta-band {
  background:
    linear-gradient(135deg, rgba(230, 126, 34, .16), transparent 45%),
    linear-gradient(135deg, #183b64 0%, #101b2b 100%);
}

.pricing-card {
  display: flex;
  flex-direction: column;
}

.pricing-card form {
  margin: 0;
}

.pricing-current {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

.pricing-header {
  border-bottom: 1px solid var(--line);
}

.pricing-tier-name {
  margin: 0 0 4px;
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pricing-price {
  margin: 0;
}

.pricing-amount {
  color: var(--text);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.pricing-period {
  color: var(--muted);
  font-size: 14px;
}

.pricing-features {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pricing-features li {
  position: relative;
  padding-left: 20px;
  color: var(--text);
  font-size: 14px;
}

.pricing-features li::before {
  position: absolute;
}

.notice-banner {
  margin-bottom: 18px;
  padding: 14px 16px;
  color: var(--text);
}

.notice-warning {
  border-left-color: var(--warning);
}

.notice-error {
  border-left-color: var(--critical);
}

.notice-success {
  border-left-color: var(--success);
}

.notice-banner code {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-soft);
  padding: 1px 5px;
}

@media (max-width: 1080px) {
  .lp-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .lp-hero-visual {
    max-width: 680px;
  }

  .lp-steps,
  .lp-packages,
  .pricing-grid,
  .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    padding-block: 10px;
  }

  .topbar nav {
    justify-content: flex-start;
    width: 100%;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .topbar nav a:not(.button),
  .link-button,
  .nav-meta {
    flex: 0 0 auto;
  }

  .page-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-head .button,
  .page-head form,
  .page-head form .button {
    width: 100%;
  }

  .grid.two {
    grid-template-columns: 1fr;
  }

  .lp-safety-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 14px;
  }

  .brand-mark {
    height: 40px;
  }

  .brand-wordmark {
    display: block;
    height: 27px;
    max-width: 58vw;
  }

  .shell,
  .lp-section-inner,
  .lp-hero,
  .lp-stats-inner,
  .site-footer-inner {
    width: calc(100% - 28px);
  }

  .panel {
    padding: 18px;
  }

  .list-row,
  .finding-head,
  .lp-fc-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .button,
  .button-small,
  .lp-cta-primary,
  .lp-cta-secondary {
    width: 100%;
  }

  .topbar .button,
  .topbar .button-small {
    width: auto;
  }

  .lp-hero {
    padding-block: 40px;
  }

  .lp-hero-visual {
    display: block;
  }

  .lp-headline {
    font-size: clamp(32px, 10vw, 44px);
  }

  .lp-hero-cta,
  .lp-cta-band .lp-hero-cta {
    align-items: stretch;
    flex-direction: column;
  }

  .lp-stats-inner,
  .lp-steps,
  .lp-packages,
  .pricing-grid,
  .grid.four {
    grid-template-columns: 1fr;
  }

  .lp-stat {
    min-height: auto;
    padding-block: 18px;
    border-bottom: 1px solid var(--line);
  }

  .lp-stat:last-child {
    border-bottom: 0;
  }

  dl {
    grid-template-columns: 1fr;
  }

  .dns-copy::after {
    display: none;
  }

  .site-footer-inner {
    align-items: stretch;
  }

  .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .brand-wordmark {
    display: block;
    max-width: 68vw;
  }

  .topbar nav {
    gap: 6px;
  }

  .topbar nav a:not(.button),
  .link-button {
    padding-inline: 7px;
  }

  .stat-value,
  .lp-stat-num,
  .pricing-amount {
    font-size: 30px;
  }

  .lp-stat-num-text {
    font-size: 16px;
    white-space: normal;
  }
}

/* Keep shared pricing styles ahead of older page-level billing styles. */
.pricing-card {
  gap: 16px !important;
}

.pricing-header {
  padding-bottom: 14px !important;
}

.pricing-tier-name {
  font-size: 13px !important;
}

.pricing-features {
  display: grid !important;
  gap: 9px !important;
}

.pricing-features li::before {
  content: "" !important;
  top: .72em !important;
  left: 2px !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: var(--success) !important;
}

.notice-banner {
  border: 1px solid var(--line) !important;
  border-left-width: 4px !important;
  background: var(--panel) !important;
  box-shadow: var(--shadow-card) !important;
}

@media (max-width: 1080px) {
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

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

/* Mobile navbar and theme icon polish */
.theme-toggle {
  position: relative;
  overflow: hidden;
  border-color: rgba(96, 132, 170, .32);
  background: var(--surface-soft);
}

.theme-toggle .theme-icon {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 24px;
  height: 24px;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.theme-toggle .theme-icon::before,
.theme-toggle .theme-icon::after {
  content: "";
  position: absolute;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease, background .18s ease;
}

[data-theme="dark"] .theme-toggle .theme-icon::before {
  width: 12px;
  height: 12px;
  left: 6px;
  top: 6px;
  border-radius: 999px;
  background: var(--warning);
  box-shadow:
    0 -8px 0 -5px var(--warning),
    0 8px 0 -5px var(--warning),
    8px 0 0 -5px var(--warning),
    -8px 0 0 -5px var(--warning),
    6px 6px 0 -5px var(--warning),
    -6px -6px 0 -5px var(--warning),
    6px -6px 0 -5px var(--warning),
    -6px 6px 0 -5px var(--warning),
    0 0 0 4px rgba(241, 196, 15, .14);
}

[data-theme="dark"] .theme-toggle .theme-icon::after {
  opacity: 0;
}

[data-theme="light"] .theme-toggle .theme-icon::before {
  width: 17px;
  height: 17px;
  left: 3px;
  top: 3px;
  border-radius: 999px;
  background: var(--accent-blue);
  box-shadow: 0 0 0 4px rgba(42, 111, 201, .10);
}

[data-theme="light"] .theme-toggle .theme-icon::after {
  width: 17px;
  height: 17px;
  left: 9px;
  top: 1px;
  border-radius: 999px;
  background: var(--topbar-bg);
  box-shadow: -2px 2px 0 rgba(42, 111, 201, .10);
}

@media (max-width: 640px) {
  .topbar {
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px 14px;
  }

  .topbar .brand {
    padding-right: 52px;
  }

  .topbar .brand-mark {
    height: 36px;
  }

  .topbar .brand-wordmark {
    height: 25px;
    max-width: min(230px, calc(100vw - 116px));
  }

  .topbar .theme-toggle {
    position: absolute;
    top: 17px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--surface-strong);
  }

  .topbar nav {
    display: flex;
    width: 100%;
    gap: 8px;
    overflow: visible;
    padding: 2px 0 0;
  }

  .topbar nav a:not(.button),
  .topbar .link-button {
    min-height: 40px;
    padding-inline: 12px;
    border: 1px solid var(--line);
    background: var(--surface-soft);
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
  }

  .topbar nav .button-small {
    min-height: 40px;
    padding-inline: 16px;
    font-size: 14px;
  }
}

@media (max-width: 420px) {
  .topbar {
    padding-inline: 14px;
  }

  .topbar .theme-toggle {
    right: 14px;
  }

  .topbar nav {
    display: grid;
    grid-template-columns: minmax(84px, .8fr) minmax(0, 1.2fr);
  }

  .topbar nav a:not(.button),
  .topbar nav .button-small,
  .topbar .link-button {
    justify-content: center;
    width: 100%;
  }
}

/* ─── Nav dropdown (Agency tools / Account menu) ─────────────────────────── */
.nav-dropdown {
  position: relative;
}

.nav-dropdown > summary {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  list-style: none;
  transition: color .15s;
}

.nav-dropdown > summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown > summary::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: -2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s;
}

.nav-dropdown[open] > summary::after {
  margin-top: 2px;
  transform: rotate(-135deg);
}

.nav-dropdown > summary:hover {
  color: var(--text);
}

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 190px;
  padding: 8px;
  background: var(--topbar-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 36px rgba(0, 0, 0, .28);
}

.nav-dropdown-menu a,
.nav-dropdown-menu .link-button {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  transition: background .15s, color .15s;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu .link-button:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.nav-dropdown-menu form {
  width: 100%;
}

.nav-dropdown-meta {
  padding: 6px 10px 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

/* Mobile hamburger menu */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.topbar-plan-badge {
  font-size: .75rem;
}

.topbar-upgrade-link {
  font-size: .8rem;
  white-space: nowrap;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--text);
  cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}

.menu-toggle:hover {
  border-color: rgba(230, 126, 34, .42);
  background: var(--surface-strong);
}

.menu-toggle-line {
  position: absolute;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .18s ease, opacity .18s ease;
}

.menu-toggle-line:nth-child(1) {
  transform: translateY(-6px);
}

.menu-toggle-line:nth-child(3) {
  transform: translateY(6px);
}

.menu-toggle.is-open .menu-toggle-line:nth-child(1) {
  transform: rotate(45deg);
}

.menu-toggle.is-open .menu-toggle-line:nth-child(2) {
  opacity: 0;
}

.menu-toggle.is-open .menu-toggle-line:nth-child(3) {
  transform: rotate(-45deg);
}

@media (min-width: 641px) {
  .primary-nav {
    margin-left: auto;
  }
}

@media (max-width: 640px) {
  .topbar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 70px;
    padding: 12px 16px;
  }

  .topbar .brand {
    flex: 1 1 auto;
    padding-right: 0;
  }

  .topbar .brand-mark {
    height: 36px;
  }

  .topbar .brand-wordmark {
    height: 25px;
    max-width: min(230px, calc(100vw - 148px));
  }

  .topbar-actions {
    margin-left: auto;
    gap: 8px;
  }

  .topbar-plan-badge,
  .topbar-upgrade-link {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
    position: relative;
  }

  .topbar .theme-toggle {
    position: relative;
    top: auto;
    right: auto;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--surface-strong);
  }

  .topbar .primary-nav {
    position: absolute;
    top: calc(100% - 1px);
    left: 14px;
    right: 14px;
    display: none;
    width: auto;
    max-height: calc(100vh - 92px);
    margin: 0;
    padding: 12px;
    overflow: auto;
    grid-template-columns: 1fr;
    gap: 10px;
    border: 1px solid var(--topbar-border);
    border-radius: 0 0 12px 12px;
    background: var(--topbar-bg);
    box-shadow: 0 22px 42px rgba(0, 0, 0, .32);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .topbar .primary-nav.is-open {
    display: grid;
  }

  .topbar .primary-nav .nav-meta,
  .topbar .primary-nav a:not(.button),
  .topbar .primary-nav .link-button,
  .topbar .primary-nav .button,
  .topbar .primary-nav .button-small {
    justify-content: center;
    width: 100%;
    max-width: none;
    min-height: 44px;
    padding-inline: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
  }

  .topbar .primary-nav .nav-meta {
    justify-content: flex-start;
    overflow: hidden;
    color: var(--muted);
    text-align: left;
    text-overflow: ellipsis;
  }

  .topbar .primary-nav .button {
    background: var(--accent);
    border-color: transparent;
    color: #fff;
  }

  .topbar .primary-nav form {
    width: 100%;
  }

  .topbar .primary-nav .nav-dropdown > summary {
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding-inline: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-soft);
    color: var(--text);
    font-size: 14px;
    font-weight: 800;
  }

  .topbar .primary-nav .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    margin-top: 6px;
    background: transparent;
    border-color: transparent;
    padding: 0 0 0 10px;
  }
}

/* Landing content polish */
.lp-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.lp-trust-row span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.lp-proof-grid,
.lp-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.lp-proof-card,
.lp-faq-item {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-soft), transparent 130px), var(--panel);
  box-shadow: var(--shadow-card);
}

.lp-proof-kicker {
  margin: 0 0 12px;
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lp-proof-card h3,
.lp-faq-item h3 {
  margin-bottom: 10px;
}

.lp-proof-card p:last-child,
.lp-faq-item p {
  margin-bottom: 0;
  color: var(--muted);
}

.lp-faq-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lp-pkg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
}

.lp-safety-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 22px;
  border: 1px solid rgba(39, 174, 96, .28);
  border-radius: 999px;
  background: var(--success-bg);
  color: var(--success);
  font-size: 10px;
  font-weight: 900;
}

@media (max-width: 900px) {
  .lp-proof-grid {
    grid-template-columns: 1fr;
  }

  .lp-faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .lp-trust-row {
    gap: 8px;
  }

  .lp-trust-row span {
    width: 100%;
    justify-content: center;
  }

  .lp-proof-card,
  .lp-faq-item {
    padding: 20px;
  }
}

/* Landing hero upgrade */
.lp-hero {
  position: relative;
}

.lp-hero::before {
  content: "";
  position: absolute;
  inset: 22px 0 auto 0;
  z-index: -1;
  border-radius: 999px;
}


.lp-headline-accent {
  display: inline;
}

.lp-report-preview {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background:
    linear-gradient(180deg, var(--surface-strong), transparent 170px),
    var(--panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .32);
}

.lp-report-preview::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--orange), var(--accent-blue));
}

.lp-report-head,
.lp-report-score,
.lp-report-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.lp-report-head {
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--line);
}

.lp-report-head h2,
.lp-score-copy h3 {
  margin: 0;
}

.lp-report-label {
  margin: 0 0 4px;
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lp-report-score {
  align-items: center;
  padding: 24px;
}

.lp-score-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, var(--panel) 56%, transparent 58%),
    conic-gradient(var(--orange) 0 72%, var(--surface-strong) 72% 100%);
}

.lp-score-ring span {
  display: block;
  color: var(--text);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.lp-score-ring small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
}

.lp-score-copy p:last-child {
  margin: 8px 0 0;
  color: var(--muted);
}

.lp-report-list {
  display: grid;
  gap: 10px;
  padding: 0 24px 24px;
}

.lp-report-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.lp-report-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.lp-report-row small {
  grid-column: 2;
}

.lp-report-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.lp-report-footer span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.lp-packages {
  grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
}

.lp-pkg {
  display: grid;
  align-content: start;
}

.lp-pkg-desc,
.lp-pkg-checks li {
  overflow-wrap: anywhere;
}

@media (max-width: 1080px) {
  .lp-hero-visual {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .lp-hero::before {
    height: 280px;
    filter: blur(34px);
  }

  .lp-report-head,
  .lp-report-score,
  .lp-report-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .lp-report-head,
  .lp-report-score,
  .lp-report-list,
  .lp-report-footer {
    padding-inline: 18px;
  }

  .lp-report-row {
    grid-template-columns: 1fr;
  }

  .lp-report-row small {
    grid-column: auto;
  }
}

/* Pricing pages */
.pricing-page-head {
  align-items: flex-end;
}

.pricing-page-head > div:first-child {
  max-width: 760px;
}

.page-head-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.pricing-grid-public,
.pricing-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 28px;
}

.pricing-grid-public {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-card {
  min-width: 0;
}

.pricing-featured {
  border-color: rgba(230, 126, 34, .72);
  box-shadow: 0 0 0 1px rgba(230, 126, 34, .18), var(--shadow-card);
}

.pricing-summary {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.pricing-card .button,
.pricing-card form,
.pricing-card form .button,
.pricing-disabled-action {
  width: 100%;
}

.pricing-disabled-action {
  cursor: default;
  opacity: .72;
}

.pricing-proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
  margin-bottom: 28px;
}

.pricing-proof h2 {
  margin-bottom: 10px;
}

/* Agency client portfolio (roadmap item 12) */
.portfolio-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.portfolio-summary article {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.portfolio-summary strong {
  font-size: 1.5rem;
}

.portfolio-client {
  margin-bottom: 18px;
}

.portfolio-client-badges {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.portfolio-client-warnings {
  margin-top: 6px;
  font-size: 0.85rem;
}

.portfolio-unassigned {
  border-style: dashed;
}

.portfolio-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 12px;
}

.portfolio-table th,
.portfolio-table td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}

/* Compliance readiness pack (roadmap item 13) */
.compliance-pack-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.compliance-pack-tab {
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.86rem;
  color: var(--muted);
  text-decoration: none;
}

.compliance-pack-tab.is-active {
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.compliance-score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.compliance-score {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.compliance-score strong {
  font-size: 1.7rem;
  line-height: 1.1;
}

.compliance-scope-note {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.88rem;
}

.compliance-remediation {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.compliance-remediation li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.compliance-remediation p {
  margin: 4px 0 2px;
  font-size: 0.88rem;
}

.compliance-control-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.compliance-control-table th,
.compliance-control-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}

.compliance-status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.compliance-satisfied {
  background: rgba(58, 160, 106, 0.16);
  color: #3aa06a;
}

.compliance-at-risk {
  background: rgba(198, 40, 40, 0.16);
  color: #d05353;
}

.compliance-unassessed {
  background: rgba(122, 142, 163, 0.14);
  color: var(--muted);
}

.table-scroll {
  overflow-x: auto;
}

/* Consent-gated public scan (roadmap item 8) */
.free-scan-panel {
  max-width: 780px;
  margin-inline: auto;
}

.free-scan-form {
  margin-top: 16px;
  display: grid;
  gap: 14px;
  justify-items: start;
}

.free-scan-form .form-field {
  width: 100%;
  max-width: 420px;
}

.free-scan-note {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.free-scan-note h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.free-scan-methods {
  margin: 20px 0;
  padding-left: 20px;
  display: grid;
  gap: 20px;
}

.free-scan-methods h3 {
  font-size: 0.98rem;
  margin-bottom: 4px;
}

.free-scan-kv {
  display: grid;
  grid-template-columns: minmax(70px, auto) minmax(0, 1fr);
  gap: 4px 12px;
  margin: 8px 0 4px;
  font-size: 0.88rem;
}

.free-scan-kv dt {
  color: var(--muted);
}

.free-scan-kv dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.free-scan-severity {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.free-scan-findings {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
}

.free-scan-findings li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.free-scan-findings p {
  margin: 4px 0 0;
  font-size: 0.88rem;
}

.free-scan-upsell {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-alt, rgba(127, 127, 127, 0.06));
}

.free-scan-upsell h3 {
  font-size: 1.02rem;
  margin-bottom: 6px;
}

.free-scan-scope-note {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
}

/* Posture trend panel (roadmap item 7, step 3) */
.posture-trend-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.posture-trend-tab {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  color: var(--muted);
  text-decoration: none;
}

.posture-trend-tab.is-active {
  border-color: var(--accent, #2e6fb7);
  color: var(--accent, #2e6fb7);
  font-weight: 600;
}

.posture-trend-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  margin-top: 16px;
}

.posture-trend-chart svg {
  width: 100%;
  height: 80px;
  color: var(--accent, #2e6fb7);
  overflow: visible;
}

.posture-trend-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--muted);
}

.posture-trend-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.posture-trend-metrics article {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.posture-trend-metrics strong {
  font-size: 1.25rem;
}

@media (max-width: 760px) {
  .posture-trend-body {
    grid-template-columns: 1fr;
  }
}

/* Scan-over-scan change detection (roadmap item 7) */
.finding-change {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.finding-change-new {
  background: rgba(214, 138, 44, 0.16);
  border-color: rgba(214, 138, 44, 0.45);
  color: #d68a2c;
}

.finding-change-persisting {
  background: rgba(122, 142, 163, 0.14);
  border-color: rgba(122, 142, 163, 0.4);
  color: var(--muted);
}

.finding-change-resolved {
  background: rgba(58, 160, 106, 0.16);
  border-color: rgba(58, 160, 106, 0.45);
  color: #3aa06a;
}

.scan-diff-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.scan-diff-resolved {
  margin-top: 12px;
}

.scan-diff-resolved summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
}

.scan-diff-resolved ul {
  list-style: none;
  padding: 10px 0 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.scan-diff-resolved li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

/* Bundle value block — seven surfaces, one subscription (roadmap item 2) */
.pricing-bundle {
  margin-bottom: 28px;
}

.pricing-bundle-featured {
  border-color: rgba(230, 126, 34, .72);
  box-shadow: 0 0 0 1px rgba(230, 126, 34, .18), var(--shadow-card);
  background: linear-gradient(135deg, rgba(230, 126, 34, .08), transparent 55%);
}

.pricing-bundle h2 {
  margin-bottom: 10px;
}

.pricing-bundle-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.pricing-bundle-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.pricing-bundle-list strong {
  font-size: 0.95rem;
}

.pricing-bundle-list small {
  color: var(--muted);
  line-height: 1.45;
}

.pricing-faq {
  max-width: 860px;
  margin-inline: auto;
}

.pricing-faq dl {
  grid-template-columns: 1fr;
  gap: 16px;
}

.pricing-faq dt {
  margin-bottom: 4px;
}

.pricing-faq dd {
  color: var(--muted);
}

@media (max-width: 820px) {
  .pricing-page-head {
    align-items: flex-start;
  }

  .page-head-actions,
  .page-head-actions .button {
    width: 100%;
  }
}

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

/* Scan report summary */
.report-summary-grid {
  margin-bottom: 20px;
}

.severity-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.severity-summary-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.severity-summary-item strong {
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

@media (max-width: 900px) {
  .severity-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .severity-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* Scan report dashboard */
.report-page-head {
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 26px;
}

.report-title-block {
  min-width: 0;
}

.report-title-block h1 {
  max-width: 820px;
  overflow-wrap: anywhere;
}

.report-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 16px;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  min-width: min(100%, 360px);
}

.button-disabled {
  cursor: not-allowed;
  opacity: .58;
  box-shadow: none;
}

.report-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 18px;
  margin-bottom: 20px;
}

.report-score-panel,
.report-insight-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(230, 126, 34, .10), transparent 46%),
    var(--panel);
  box-shadow: var(--shadow-card);
}

.report-score-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 4vw, 34px);
}

.report-score-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  color: var(--text);
}

.report-score-value strong {
  font-size: clamp(52px, 9vw, 88px);
  line-height: .9;
}

.report-score-value span {
  color: var(--muted);
  font-weight: 800;
}

.report-grade-ring {
  place-items: center;
  flex: 0 0 auto;
  width: clamp(104px, 16vw, 142px);
  aspect-ratio: 1;
  border-right-color: var(--accent);
  border-bottom-color: var(--accent);
  border-radius: 50%;
  color: var(--text);
  font-size: clamp(42px, 7vw, 68px);
  font-weight: 900;
}

.report-insight-panel {
  display: grid;
  grid-template-columns: 1fr;
  padding: 8px;
}

.report-insight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 18px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.report-insight:last-child {
  border-bottom: 0;
}

.report-insight strong {
  color: var(--text);
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
  text-align: right;
  overflow-wrap: anywhere;
}

.report-insight strong.report-insight-text {
  font-size: clamp(14px, 1.6vw, 18px);
  max-width: 100%;
}

.report-insight small {
  color: var(--muted);
}

.report-panel {
  margin-top: 20px;
}

.scan-state-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
  margin-bottom: 22px;
  border-left: 5px solid var(--accent);
}

.scan-state-pending,
.scan-state-running {
  background:
    linear-gradient(135deg, rgba(230, 126, 34, .14), transparent 48%),
    var(--panel);
}

.scan-state-failed {
  border-left-color: #e74c3c;
}

.scan-state-panel h2 {
  margin: 0 0 8px;
  color: var(--text);
}

.scan-state-copy .muted {
  max-width: 740px;
}

.scan-progress-rail {
  position: relative;
  height: 8px;
  margin-top: 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
}

/* Indeterminate: a sliding bar, used only until the runner reports how many
   checks the package actually has. */
.scan-progress-rail span {
  position: absolute;
  inset: 1px auto 1px 1px;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), #f7c948);
  animation: scan-progress-slide 1.8s ease-in-out infinite alternate;
}

/* Determinate: width is the real completion fraction, so the bar stops
   sliding and starts meaning something. The transition smooths the step
   between checks — without it the bar jumps, which reads as glitchy on a
   package with few simulators. */
.scan-progress-rail.is-determinate span {
  animation: none;
  inset: 1px auto 1px 1px;
  width: 0;
  transition: width .45s ease;
}

.scan-progress-detail {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.scan-progress-detail strong {
  color: var(--text);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .scan-progress-rail.is-determinate span { transition: none; }
}

.scan-refresh-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

@keyframes scan-progress-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(165%);
  }
}

.scan-state-metrics,
.scan-outcome-grid {
  display: grid;
  gap: 12px;
}

.scan-state-metrics {
  grid-template-columns: 1fr;
}

.scan-outcome-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.scan-state-metric,
.scan-outcome-grid > div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.scan-state-metric {
  display: grid;
  grid-template-columns: minmax(96px, .44fr) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.scan-state-metrics strong,
.scan-outcome-grid strong {
  display: block;
  margin-top: 6px;
  color: var(--text);
  font-size: clamp(20px, 3vw, 34px);
  line-height: 1;
  overflow-wrap: anywhere;
}

.scan-state-metrics strong {
  margin-top: 0;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.16;
  overflow-wrap: normal;
  word-break: normal;
}

.scan-state-metrics small,
.scan-outcome-grid small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.passed-check-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.passed-check-list span {
  padding: 8px 10px;
  border: 1px solid rgba(46, 204, 113, .35);
  border-radius: var(--radius);
  background: rgba(46, 204, 113, .12);
  color: var(--success);
  font-size: 13px;
  font-weight: 800;
}

/* Skipped / inconclusive check chips */
.passed-check-list span.check-skipped {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-color: rgba(230, 162, 60, .4);
  background: rgba(230, 162, 60, .10);
  color: var(--warning, #e6a23c);
}

.check-skipped-reason {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

/* Inconclusive notice banner */
.inconclusive-notice {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(230, 162, 60, .4);
  border-radius: var(--radius);
  background: rgba(230, 162, 60, .08);
  color: var(--warning, #e6a23c);
}

.inconclusive-notice strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
}

.inconclusive-notice p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.panel-heading h2 {
  margin-bottom: 0;
}

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

.inline-form {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: min(100%, 520px);
}

.inline-form input {
  min-width: 0;
}

.api-gate {
  display: grid;
  gap: 10px;
  max-width: 760px;
  background:
    linear-gradient(135deg, rgba(230, 126, 34, .13), transparent 42%),
    var(--panel);
}

.api-gate h2,
.api-secret-panel h2 {
  margin-bottom: 4px;
}

.api-secret-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.api-key-create-form {
  display: grid;
  gap: 18px;
  margin-top: 16px;
  max-width: 640px;
}

.api-key-scopes {
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.api-key-scopes legend {
  padding: 0;
  margin-bottom: 2px;
  font-weight: 600;
  color: var(--text);
}

.api-key-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.api-key-scope-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

.api-key-scope-option:hover {
  border-color: rgba(230, 126, 34, .42);
  background: var(--surface-strong);
}

.api-key-scope-option input[type="checkbox"] {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  cursor: pointer;
}

.api-key-scope-option span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.api-key-scope-option strong {
  font: 700 13px/1.3 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.api-key-scope-option small {
  color: var(--muted);
}

.api-quickstart-example {
  margin: 14px 0 8px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--text);
  font: 500 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  overflow-x: auto;
  white-space: pre;
}

.api-scope-reference {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.api-scope-reference > div {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.api-scope-reference p {
  margin: 6px 0;
  color: var(--muted);
  font-size: 13px;
}

.api-scope-reference small {
  display: block;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.api-docs-note {
  margin-top: 16px;
}

.api-key-secret-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 420px;
  min-width: 0;
}

.api-key-secret {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid rgba(230, 126, 34, .36);
  border-radius: var(--radius);
  background: var(--surface-strong);
  color: var(--text);
  font: 700 14px/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;
}

.api-key-list {
  display: grid;
  gap: 12px;
}

.api-key-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.api-key-row > div:first-child {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.api-key-row strong,
.api-key-row small {
  overflow-wrap: anywhere;
}

.api-key-meta {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
}

.empty-state {
  margin-bottom: 0;
  color: var(--muted);
}

.severity-summary-list {
  display: grid;
  gap: 14px;
}

.severity-summary-row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.severity-summary-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.severity-summary-label strong {
  color: var(--text);
  font-size: 22px;
  line-height: 1;
}

.severity-bar {
  height: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
}

.severity-bar-fill {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
}

.severity-fill-critical { background: #7f1d1d; }
.severity-fill-high { background: #e74c3c; }
.severity-fill-medium { background: #e67e22; }
.severity-fill-low { background: #2f80ed; }
.severity-fill-informational { background: #64748b; }

.finding-report-card {
  position: relative;
  padding: clamp(18px, 3vw, 24px);
  border-left-width: 5px;
  background: var(--panel);
}

.finding-report-card.finding-critical { border-left-color: #7f1d1d; }
.finding-report-card.finding-high { border-left-color: #e74c3c; }
.finding-report-card.finding-medium { border-left-color: #e67e22; }
.finding-report-card.finding-low { border-left-color: #2f80ed; }
.finding-report-card.finding-informational { border-left-color: #64748b; }

.finding-report-card .finding-head {
  align-items: flex-start;
}

.finding-report-card h3 {
  margin-top: 4px;
}

.evidence-chip {
  display: inline-flex;
  max-width: 100%;
  margin: 0 6px 6px 0;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* PoC response-body excerpt: raw HTTP response text with no natural line
   breaks — without wrapping this overflows its container (and the sidebar
   next to it) instead of staying inside the finding card. */
.poc-excerpt {
  max-width: 100%;
  margin: 6px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow-x: auto;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.comparison-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.comparison-card strong {
  display: block;
  margin-top: 8px;
  color: var(--text);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
}

.comparison-card small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.comparison-improved {
  border-color: rgba(39, 174, 96, .30);
}

.comparison-improved strong {
  color: var(--success);
}

.comparison-regressed {
  border-color: rgba(231, 76, 60, .30);
}

.comparison-regressed strong {
  color: #e74c3c;
}

.comparison-unchanged strong {
  color: var(--muted);
}

.comparison-severity-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.comparison-severity-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.comparison-severity-list strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
}

@media (max-width: 980px) {
  .report-dashboard,
  .scan-state-panel,
  .scan-outcome-grid {
    grid-template-columns: 1fr;
  }

  .report-actions {
    justify-content: flex-start;
    width: 100%;
  }
}

@media (max-width: 640px) {
  .scan-state-metrics {
    grid-template-columns: 1fr;
  }

  .report-actions,
  .report-actions .button {
    width: 100%;
  }

  .report-score-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-grade-ring {
    width: 112px;
  }

  .panel-heading {
    flex-direction: column;
  }

  .inline-form,
  .api-secret-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .api-key-scope-grid {
    grid-template-columns: 1fr;
  }

  .inline-form,
  .inline-form .button {
    width: 100%;
  }

  .api-key-secret-row {
    flex-basis: auto;
    width: 100%;
  }

  .api-key-secret {
    flex-basis: auto;
    width: 100%;
  }

  .api-key-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .severity-summary-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .finding-report-card .finding-head {
    gap: 12px;
  }

  .comparison-grid,
  .comparison-severity-list {
    grid-template-columns: 1fr;
  }
}

/* Target history dashboard */
.target-page-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 18px;
  margin-bottom: 24px;
}

.target-title-block {
  min-width: 0;
}

.target-title-block h1 {
  max-width: 820px;
  overflow-wrap: anywhere;
}

.target-action-form {
  flex: 0 0 auto;
}

.target-action-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: none;
}

.target-action-group .target-action-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.target-action-group small {
  max-width: 290px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.scan-start-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.scan-start-notice h2 {
  margin: 4px 0 6px;
  font-size: clamp(22px, 3vw, 30px);
}

.scan-start-notice p:not(.eyebrow) {
  margin: 0;
  max-width: 760px;
  color: var(--muted);
}

.target-history-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 18px;
  margin-bottom: 20px;
}

.target-risk-card,
.target-history-metrics {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(47, 128, 237, .10), transparent 48%),
    var(--panel);
  box-shadow: var(--shadow-card);
}

.target-risk-card {
  padding: clamp(22px, 4vw, 34px);
}

.target-risk-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
  color: var(--text);
}

.target-risk-score strong {
  font-size: clamp(52px, 9vw, 84px);
  line-height: .9;
}

.target-risk-score span {
  color: var(--muted);
  font-weight: 800;
}

.target-risk-empty strong {
  color: var(--muted);
}

.target-history-metrics {
  display: grid;
  grid-template-columns: 1fr;
  padding: 8px;
}

.target-history-metrics > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 18px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.target-history-metrics > div:last-child {
  border-bottom: 0;
}

.target-history-metrics strong {
  color: var(--text);
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1;
  text-align: right;
}

.target-history-metrics small {
  color: var(--muted);
}

.trend-good {
  color: var(--success) !important;
}

.trend-bad {
  color: #e74c3c !important;
}

.target-history-panel,
.target-verification-panel {
  margin-top: 20px;
}

.target-history-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 16px;
}

.target-history-filters .form-field {
  min-width: 180px;
}

.target-history-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}

.target-history-pagination .is-disabled {
  opacity: .45;
  pointer-events: none;
}

.target-history-list {
  display: grid;
  gap: 12px;
}

.target-history-row {
  display: grid;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--text);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.target-history-row:hover {
  border-color: rgba(230, 126, 34, .42);
  background: var(--surface-strong);
  transform: translateY(-1px);
}

.target-history-main {
  display: grid;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.target-history-main strong,
.target-history-main small {
  display: block;
  overflow-wrap: anywhere;
}

.target-history-main small {
  margin-top: 4px;
  color: var(--muted);
}

.target-history-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.target-history-summary span {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.target-history-summary small,
.target-history-summary strong {
  display: block;
}

.target-history-summary small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.target-history-summary strong {
  margin-top: 4px;
  color: var(--text);
  font-size: 20px;
  line-height: 1;
}

.setup-instructions {
  display: grid;
  gap: 16px;
}

.qr-setup-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.qr-frame {
  display: grid;
  place-items: center;
  width: 244px;
  aspect-ratio: 1;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 36px rgba(15, 23, 42, .12);
}

.qr-frame img {
  display: block;
  width: 220px;
  height: 220px;
}

.qr-setup-card h2 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.2;
}

.manual-key-fallback {
  display: grid;
  gap: 8px;
}

.copy-box,
.copy-area {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.copy-box {
  padding: 14px 16px;
}

.copy-area {
  min-height: 108px;
  padding: 12px 14px;
  resize: vertical;
}

.content-hero {
  max-width: 980px;
  margin: 0 auto 34px;
  padding: clamp(28px, 5vw, 58px) 0 12px;
}

.content-hero h1 {
  max-width: 860px;
  margin: 0;
  color: var(--text);
  font-size: clamp(42px, 7vw, 72px);
  line-height: .98;
}

.content-hero p:not(.eyebrow) {
  max-width: 760px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.65;
}

.content-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 24px;
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}

.content-main,
.content-aside-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

.content-main {
  padding: clamp(24px, 4vw, 36px);
}

.content-section + .content-section {
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.content-section h2,
.content-aside-panel h2 {
  margin: 0 0 12px;
  color: var(--text);
  line-height: 1.15;
}

.content-section p,
.content-aside-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
}

.content-section p + p {
  margin-top: 14px;
}

.scanner-check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.scanner-check-list li {
  position: relative;
  padding-left: 24px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.scanner-check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-text);
  font-weight: 700;
}

@media (max-width: 640px) {
  .scanner-check-list {
    grid-template-columns: 1fr;
  }
}

.content-aside {
  position: sticky;
  top: 110px;
}

.content-aside-panel {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.content-aside-panel .button {
  width: 100%;
}

.content-aside-panel + .content-aside-panel {
  margin-top: 16px;
}

.content-note {
  max-width: 760px;
  margin: 18px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--line);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.compliance-control + .compliance-control {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.compliance-control-id {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 18px;
}

.compliance-check-list,
.compliance-nav-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.7;
}

.compliance-nav-list {
  list-style: none;
  padding-left: 0;
  display: grid;
  gap: 8px;
}

.compliance-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.compliance-card {
  display: grid;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  text-decoration: none;
  transition: border-color .15s ease, transform .15s ease;
}

.compliance-card:hover {
  border-color: var(--accent, #6c8cff);
  transform: translateY(-2px);
}

.compliance-card h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
}

.compliance-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 15px;
}

.compliance-card-meta {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}

.onboarding-panel {
  display: grid;
  gap: 18px;
  margin-bottom: 22px;
  padding: clamp(20px, 4vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(230, 126, 34, .14), transparent 48%),
    var(--panel);
  box-shadow: var(--shadow-card);
}

.onboarding-panel h2 {
  margin: 0;
  color: var(--text);
}

.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.onboarding-step {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.onboarding-step h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.onboarding-step p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.faq-list {
  display: grid;
  gap: 10px;
}

.faq-list details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.faq-list summary {
  cursor: pointer;
  padding: 14px 16px;
  color: var(--text);
  font-weight: 800;
}

.faq-list details p {
  padding: 0 16px 16px;
}

@media (max-width: 980px) {
  .content-page-grid {
    grid-template-columns: 1fr;
  }

  .content-aside {
    position: static;
  }

  .target-history-dashboard,
  .scan-state-panel,
  .target-history-row {
    grid-template-columns: 1fr;
  }

  .target-action-form,
  .target-action-form .button {
    width: 100%;
  }

  .target-action-group {
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr;
  }

  .scan-start-notice {
    align-items: stretch;
    flex-direction: column;
  }

  .scan-start-notice .button {
    width: 100%;
  }

  .scan-state-metric {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .target-action-group .target-action-form {
    min-width: 0;
  }
}

@media (max-width: 640px) {
  .qr-setup-card {
    grid-template-columns: 1fr;
  }

  .qr-frame {
    width: min(100%, 244px);
    justify-self: center;
  }

  .target-history-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .target-history-main {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════
   CONSENT MODAL
═══════════════════════════════════════════════════════ */

.consent-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(3px);
}

.consent-modal-backdrop.is-open {
  display: block;
}

.consent-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 560px;
  max-height: min(80vh, 800px);
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .55);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  animation: consent-modal-in .18s ease;
}

/* Wide variant: packages that have real fixed content alongside the
   checklist (an SBOM paste field, a mobile artifact upload, or the pentest
   engagement selector) used to stack that content directly above the
   checklist in the same 560px-wide column, pushing the checkboxes below the
   fold and forcing the whole modal to scroll as one unit. Above the 900px
   breakpoint this puts the fixed content and the checklist side by side
   instead, each scrolling independently — see .consent-modal-columns below. */
.consent-modal.consent-modal-wide {
  max-width: 880px;
}

.consent-modal-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 28px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 16px 24px 0;
}

.consent-modal-col-fixed {
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 4px;
}

.consent-modal-col-checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  min-height: 0;
  padding-bottom: 4px;
}

.consent-modal-col-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

@media (max-width: 900px) {
  .consent-modal-columns {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }

  .consent-modal-col-fixed,
  .consent-modal-col-checklist {
    overflow: visible;
  }
}

@keyframes consent-modal-in {
  from { opacity: 0; transform: translate(-50%, -50%) translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translate(-50%, -50%) translateY(0)    scale(1);   }
}

.consent-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 24px 0;
}

.consent-modal-header .eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent-text);
}

.consent-modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
}

.consent-modal-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
  padding: 0;
}

.consent-modal-close:hover {
  background: var(--panel-hover);
  color: var(--text);
}

.consent-modal-intro {
  margin: 16px 24px 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  flex-shrink: 0;
}

.consent-modal-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.consent-checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 16px 24px 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-bottom: 4px;
}

.consent-check-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  cursor: pointer;
}

.consent-check-row:hover {
  background: var(--panel-hover);
}

.consent-check-row.consent-error {
  border-color: var(--critical);
  background: var(--critical-bg);
}

/* Custom checkbox instead of accent-color: the native checked control's
   size and shape vary a lot by browser/OS (some render it as a large,
   heavily-bordered square), which looked inconsistent and oversized next
   to the row text. appearance:none + a hand-drawn tick keeps it identical
   everywhere.

   width/height alone aren't enough to guarantee 18px: a bare, unscoped
   `input { min-height: 44px }` rule elsewhere in this file (a different
   property, so it doesn't lose on specificity — the browser renders
   max(height, min-height)) previously inflated this exact checkbox to a
   44px blob. That rule has been scoped away from checkboxes, but this rule
   now also pins min-/max-width/height itself, at the same specificity as
   width/height, so no other same-or-lower-specificity rule — that one or a
   future one — can inflate either axis again. */
.consent-check-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  margin-top: 2px;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  cursor: pointer;
  position: relative;
  transition: background .15s ease, border-color .15s ease;
  padding: 5px 6px;
}

.consent-check-row input[type="checkbox"]:checked {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.consent-check-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  /* Centered by percentage + transform rather than fixed pixel offsets, so
     the tick stays visually centered in the box regardless of the box's
     exact rendered size. */
  left: 50%;
  top: 46%;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.consent-check-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.consent-check-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.consent-required-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--critical-bg);
  color: var(--critical);
  border: 1px solid currentColor;
  border-radius: 4px;
  padding: 1px 6px;
}

.consent-check-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.mobile-upload-field {
  margin-top: 1rem;
  margin-bottom: 1.25rem;
}

.mobile-upload-field input[type="file"] {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-soft, rgba(255,255,255,.03));
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.mobile-upload-field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-hover);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.mobile-upload-field input[type="file"]::file-selector-button:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}

.mobile-upload-field input[type="file"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mobile-file-chip {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft, rgba(255,255,255,.03));
  font-size: 13px;
  color: var(--text);
  word-break: break-word;
}

.mobile-file-error {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--critical);
  border-radius: 8px;
  background: var(--critical-bg);
  color: var(--critical);
  font-size: 13px;
  word-break: break-word;
}

.mobile-upload-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mobile-upload-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.mobile-upload-progress-bar {
  height: 100%;
  background: var(--orange);
  border-radius: 999px;
  transition: width .15s ease;
}

.mobile-upload-progress-label {
  margin: 0;
}

.consent-modal-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 24px 24px;
  border-top: 1px solid var(--line);
  margin-top: 0;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .consent-modal-actions {
    flex-direction: column-reverse;
  }

  .consent-modal-actions .button {
    width: 100%;
    text-align: center;
  }
}

/* ─── Auth probe credential fieldset ─────────────────────────────────────── */
.auth-probe-fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px 14px;
}
.auth-probe-fieldset legend {
  padding: 0 6px;
  font-size: 0.9rem;
}
/* Indented, hidden-until-checked credential block (target_detail's
   auth/cloud-posture consent reveals). display:none stays inline per the
   CLAUDE.md rule — target-detail.js toggles element.style.display directly,
   so it must not move into this class. */
.auth-probe-credset {
  margin: 12px 0 8px 24px;
}
.credset-subheading {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}
.textarea-mono {
  width: 100%;
  font-family: monospace;
  font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════════════════
   PRICING PAGE — enhanced plan cards + comparison table
══════════════════════════════════════════════════════════════════════════ */

/* ─── Plan card: limits block ─────────────────────────────────────────────── */
.pricing-limits {
  display: grid;
  gap: 6px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pricing-limit-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
}

.pricing-limit-val {
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
}

.pricing-limit-label {
  color: var(--muted);
}

/* ─── Plan card: packages block ───────────────────────────────────────────── */
.pricing-packages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pricing-packages-label {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.pricing-package-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.pricing-package-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
}

.pkg-check,
.pkg-cross {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  margin-top: 1px;
}

.pkg-check {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid rgba(39, 174, 96, .28);
}

.pkg-cross {
  background: var(--surface-soft);
  color: var(--muted);
  border: 1px solid var(--line);
}

.pkg-info {
  display: grid;
  gap: 1px;
}

.pkg-info strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.pkg-excluded .pkg-info strong {
  color: var(--muted);
}

.pkg-info small {
  font-size: 11px;
  color: var(--muted);
}

/* ─── Comparison section wrapper ──────────────────────────────────────────── */
.cmp-section {
  margin-bottom: 28px;
}

.cmp-header {
  margin-bottom: 20px;
}

.cmp-header h2 {
  margin-bottom: 6px;
}

/* ─── Comparison table scroll wrapper ─────────────────────────────────────── */
.cmp-scroll-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-soft), transparent 130px), var(--panel);
  box-shadow: var(--shadow-card);
  scrollbar-color: var(--muted) transparent;
}

/* ─── Comparison table ────────────────────────────────────────────────────── */
.cmp-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 13.5px;
}

.cmp-table thead th {
  padding: 16px 14px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .01em;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  white-space: nowrap;
}

.cmp-table thead th small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.cmp-feature-col {
  text-align: left !important;
  min-width: 200px;
  max-width: 280px;
}

.cmp-plan-col {
  min-width: 110px;
  width: 110px;
}

/* Featured (Team) column highlight */
.cmp-plan-featured {
  background: rgba(230, 126, 34, .05) !important;
}

thead .cmp-plan-featured {
  color: var(--accent-text) !important;
  background: rgba(230, 126, 34, .10) !important;
  border-bottom-color: rgba(230, 126, 34, .32) !important;
}

/* ─── Table body rows ─────────────────────────────────────────────────────── */
.cmp-table tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: middle;
  text-align: center;
  font-size: 13px;
}

.cmp-table tbody tr:last-child td {
  border-bottom: 0;
}

.cmp-table tbody tr:hover td {
  background: var(--surface-strong);
}

.cmp-table tbody tr:hover td.cmp-plan-featured {
  background: rgba(230, 126, 34, .10);
}

/* ─── Section header rows ─────────────────────────────────────────────────── */
.cmp-section-row td {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left !important;
  background: var(--surface-soft) !important;
  border-bottom: 1px solid var(--line);
}

/* ─── Package rows in comparison table ───────────────────────────────────── */
.cmp-pkg-row td.cmp-feature-col {
  text-align: left;
}

.cmp-pkg-row td.cmp-feature-col strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.cmp-checks-count {
  display: inline-block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

/* Collapsible check list inside comparison table */
.cmp-checks-detail {
  margin-top: 4px;
}

.cmp-checks-detail summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-blue);
  list-style: none;
  outline: none;
  user-select: none;
}

.cmp-checks-detail summary::-webkit-details-marker {
  display: none;
}

.cmp-checks-detail[open] summary {
  margin-bottom: 6px;
}

.cmp-checks-detail ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3px;
}

.cmp-checks-detail ul li {
  font-size: 11px;
  color: var(--muted);
  padding-left: 12px;
  position: relative;
}

.cmp-checks-detail ul li::before {
  content: "·";
  position: absolute;
  left: 3px;
  color: var(--accent-text);
  font-weight: 900;
}

/* ─── Check / cross symbols in comparison table ───────────────────────────── */
.cmp-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--success-bg);
  border: 1px solid rgba(39, 174, 96, .28);
  color: var(--success);
  font-size: 11px;
  font-weight: 900;
}

.cmp-cross {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.cmp-note {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}

/* ─── CTA row inside comparison table ─────────────────────────────────────── */
.cmp-cta-row td {
  padding: 14px !important;
  border-top: 1px solid var(--line);
  background: var(--surface-soft) !important;
  text-align: center;
}

.cmp-cta-row td.cmp-plan-featured {
  background: rgba(230, 126, 34, .07) !important;
}

.cmp-cta-row .button {
  width: 100%;
}

/* ─── Pricing FAQ grid ─────────────────────────────────────────────────────── */
.pricing-faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px;
  margin-top: 4px;
}

.pricing-faq-grid h3 {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
}

.pricing-faq-grid p {
  margin: 0;
  font-size: 13px;
}

/* ─── Pricing responsive ───────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .pricing-faq-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cmp-scroll-wrap {
    /* Full-bleed to the viewport edge. The pull must equal the container's own
       side gutter, which is half of `calc(100% - clamp(28px, 5vw, 56px))` — a
       hardcoded -18px overshot it by 4px at 390px and made /pricing scroll
       sideways on a phone. Deriving it from the same clamp keeps them in step
       if the gutter ever changes. */
    margin-inline: calc(clamp(28px, 5vw, 56px) / -2);
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  .cmp-plan-col {
    min-width: 88px;
    width: 88px;
  }

  .cmp-feature-col {
    min-width: 160px;
  }
}


/* --- Agency guide: code blocks --------------------------------------------- */
.code-block {
  background: #0a1520;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1rem;
  overflow-x: auto;
  color: #c9d9e8;
  font-family: "Fira Code", "Cascadia Code", "Consolas", monospace;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}
[data-theme="light"] .code-block {
  background: #1a2e48;
  border-color: #1c3050;
  color: #c9d9e8;
}
.code-block code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.guide-section code {
  background: rgba(26,69,121,.25);
  border: 1px solid rgba(26,69,121,.4);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: .85em;
  color: #7ec8e3;
  font-family: "Fira Code","Cascadia Code",monospace;
}
[data-theme="light"] .guide-section code {
  background: rgba(26,69,121,.10);
  border-color: rgba(26,69,121,.25);
  color: #1A4579;
}
.guide-section .code-block code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.method-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  font-family: "Fira Code","Cascadia Code",monospace;
  vertical-align: middle;
  margin-right: 4px;
}
.method-get    { background: rgba(39,174,96,.18);  color: #27ae60; border: 1px solid rgba(39,174,96,.3); }
.method-post   { background: rgba(42,111,201,.18); color: #4a9fe0; border: 1px solid rgba(42,111,201,.3); }
.method-patch  { background: rgba(241,196,15,.18); color: #e0b030; border: 1px solid rgba(241,196,15,.3); }
.method-delete { background: rgba(231,76,60,.18);  color: #e74c3c; border: 1px solid rgba(231,76,60,.3); }

/* --- Agency webhooks: event checkbox grid ---------------------------------- */
.webhook-events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .5rem .75rem;
  margin-top: .5rem;
}
.webhook-event-label {
  display: flex;
  align-items: center;
  gap: .55rem;
  cursor: pointer;
  padding: .4rem .65rem;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: rgba(26,69,121,.07);
  transition: background .15s, border-color .15s;
  user-select: none;
  min-height: 36px;
}
.webhook-event-label:hover {
  background: rgba(26,69,121,.15);
  border-color: rgba(42,111,201,.4);
}
/* Hide the real checkbox — we draw our own via ::before on the label */
.webhook-event-label input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* Custom checkbox box */
.webhook-event-label::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border: 2px solid var(--muted);
  border-radius: 3px;
  background: transparent;
  transition: background .15s, border-color .15s;
  box-sizing: border-box;
}
/* Checked state: filled box */
.webhook-event-label:has(input:checked)::before {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 10 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 8px;
}
.webhook-event-label:has(input:checked) {
  border-color: rgba(42,111,201,.5);
  background: rgba(42,111,201,.12);
}
.webhook-event-label code {
  font-size: 12px;
  color: var(--text);
  font-family: "Fira Code","Cascadia Code",monospace;
  line-height: 1.4;
}

/* ══════════════════════════════════════════════════════════════════════════
   SHARED COMPONENTS — reusable across pentest, agency, and other pages
══════════════════════════════════════════════════════════════════════════ */

/* ─── Guide page layout ───────────────────────────────────────────────────── */
.guide-section {
  margin-bottom: 2rem;
}
.guide-section h3 {
  margin-top: 1.5rem;
}
.guide-section h4 {
  margin-top: 1rem;
}
.guide-section .data-table {
  margin-top: 1rem;
}
.guide-section > ol,
.guide-section > ul {
  line-height: 2;
}
.guide-section .muted {
  margin-top: .75rem;
}
.guide-toc {
  margin-bottom: 2rem;
}
.guide-toc .eyebrow {
  margin-bottom: .5rem;
}
.guide-toc > ol {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 2;
}

/* ─── Section label (small uppercase muted heading) ──────────────────────── */
.section-label {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─── Form field container ────────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-bottom: 1.1rem;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.field:last-child { margin-bottom: 0; }
.field > label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
}
.field-hint {
  font-size: .75rem;
  color: var(--muted);
  margin-top: .1rem;
}

/* ─── Scrollable preformatted block ──────────────────────────────────────── */
.doc-pre {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-size: .78rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  max-height: 280px;
  overflow-y: auto;
  font-family: 'SF Mono', 'Fira Code', ui-monospace, monospace;
  margin-bottom: .75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* ─── Interactive checkbox card row ──────────────────────────────────────── */
.choice-row {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .85rem 1rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.choice-row:has(input:checked) {
  border-color: var(--accent-blue);
  background: rgba(42,111,201,.07);
}
.choice-row input[type="checkbox"],
.choice-row input[type="radio"] {
  width: 18px;
  min-height: 18px;
  flex-shrink: 0;
  margin-top: .1rem;
  accent-color: var(--accent-blue);
  cursor: pointer;
}
.choice-row-body { flex: 1; }
.choice-row-name {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.choice-row-desc {
  font-size: .78rem;
  color: var(--muted);
  margin-top: .2rem;
  line-height: 1.45;
}

/* ─── Info / warning banners ──────────────────────────────────────────────── */
.banner {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1rem 1.1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--text);
}
.banner-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: .05rem;
}
.banner-warning {
  background: var(--warning-bg);
  border-color: rgba(241,196,15,.3);
}
.banner-danger {
  background: rgba(231,76,60,.1);
  border-color: rgba(231,76,60,.35);
}
.banner-info {
  background: rgba(42,111,201,.07);
  border-color: rgba(42,111,201,.3);
}

/* ─── Form actions bar ────────────────────────────────────────────────────── */
.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* ─── Danger button variant ───────────────────────────────────────────────── */
.button-danger {
  /* --critical-strong, not --critical: see the token comment. --critical is
     tuned to be readable AS text on a tinted chip, so it is far too light to
     sit BEHIND white text. */
  background: var(--critical-strong);
  color: #fff;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 2px 10px rgba(231,76,60,.25);
}
.button-danger:hover {
  background: var(--critical-strong-hover);
  box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 4px 16px rgba(231,76,60,.35);
}

/* ─── Sidebar card ────────────────────────────────────────────────────────── */
.sidebar-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.4rem;
  margin-bottom: 1rem;
}
.sidebar-card > h3 {
  margin-top: 0;
  margin-bottom: .85rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.sidebar-card p,
.sidebar-card li {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.55;
}
.sidebar-card ul {
  padding-left: 1.1rem;
  margin: 0;
}
.sidebar-card li { margin-bottom: .35rem; }

/* ─── Sticky sidebar column ──────────────────────────────────────────────── */
.sticky-sidebar {
  position: sticky;
  top: 80px;
}

/* ─── Spacing utilities ───────────────────────────────────────────────────── */
.mt-2 { margin-top: 2rem; }
.mb-2 { margin-bottom: 2rem; }

/* ─── Inline form (delete/action forms that must not take block width) ────── */
.form-inline { display: inline; }

/* ─── Meta rows (detail view sidebar) ────────────────────────────────────── */
.meta-row {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--line);
}
.meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.meta-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
}
.meta-value {
  font-size: .85rem;
  color: var(--text);
  word-break: break-all;
}
.meta-value code {
  font-size: .8rem;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .1rem .35rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   UI/UX UPGRADE — Phase 1 (Design tokens) + Phase 2.1/2.2 (Nav + Hero)
   See UI_UX_IMPROVEMENT_PLAN.md
═══════════════════════════════════════════════════════════════════════════ */

/* ─── P1.1 Color palette / surfaces / glow ──────────────────────────────── */


/* P1.4 richer dark near-black bg / off-white light bg */


/* ─── P2.1 Announcement banner ──────────────────────────────────────────── */
.announcement-banner {
  position: relative;   /* positioning context for the dismiss button */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  /* Right padding leaves room for the dismiss button so long copy cannot run
     underneath it on a narrow viewport. */
  padding: 6px 44px 6px 16px;
  background: var(--color-blue-700);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .18);
  text-align: center;
}

.announcement-banner[hidden] { display: none; }

.announcement-dismiss {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 28px is below the 44px touch-target guidance, but this is a low-stakes
     dismiss sitting inside a 36px bar; the padding around it keeps the real
     hit area comfortable without making the bar taller. */
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: .75;
  transition: opacity .15s ease, background .15s ease;
}

.announcement-dismiss:hover {
  opacity: 1;
  background: rgba(255, 255, 255, .14);
}

.announcement-banner a {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
}

.announcement-banner a:hover {
  text-decoration: underline;
}

/* ─── P2.1 Topbar refinement (wider inner container, frosted glass, scroll shadow) ── */
.topbar {
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: transparent;
  box-shadow: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.topbar.is-scrolled {
  border-bottom-color: var(--topbar-border);
  box-shadow: 0 1px 0 var(--topbar-border), 0 10px 28px var(--topbar-shadow);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 68px;
}

@media (min-width: 641px) {
  .topbar {
    padding: 0;
  }

  .topbar-inner {
    /* Same width + gutter as .shell / .lp-section-inner / .site-footer-inner
       so the brand lines up with the page <h1> underneath it. */
    width: min(var(--container), calc(100% - clamp(28px, 5vw, 56px)));
    margin: 0 auto;
  }
}

.nav-cta {
  border-radius: 999px;
}

/* ─── P2.2 Hero spotlight glow + scroll reveal ──────────────────────────── */
.lp-hero::before {
  height: 420px;
  background: radial-gradient(60% 100% at 50% 0%, var(--color-glow-blue) 0%, transparent 70%),
              linear-gradient(90deg, rgba(230, 126, 34, .14), rgba(75, 145, 220, .12));
  filter: blur(56px);
  opacity: .8;
}

.reveal-on-scroll {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 3.1 — Dashboard
═══════════════════════════════════════════════════════════════════════════ */
.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.quick-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.quick-action:hover {
  border-color: var(--cobalt);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.quick-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-strong, rgba(255,255,255,.07));
  color: var(--accent-text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.dashboard-kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
}

.stat-card-accent {
  position: relative;
  border-left: 3px solid var(--line);
  transition: transform .15s ease, box-shadow .15s ease;
}

.stat-card-accent:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card-blue   { border-left-color: var(--color-blue-400); }
.stat-card-green  { border-left-color: var(--success); }
.stat-card-orange { border-left-color: var(--orange); }
.stat-card-cobalt { border-left-color: var(--cobalt); }

.target-list-row {
  align-items: center;
}

.target-list-row .target-row-lead {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.target-list-row .target-row-lead > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.domain-favicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  /* Not --color-brand-gradient: that ramp runs up to --color-blue-400 and on
     into orange, and the white initial sits over its midpoint, where white
     measures 3.29–3.60:1. This is the same hue family kept inside the dark end
     of the blue ramp, so the letter stays legible across the whole tile
     (6.80:1 at the lightest point). The full brand gradient is still the right
     choice for large decorative fills, where 3:1 is the applicable threshold. */
  background: linear-gradient(135deg, var(--color-blue-700), var(--color-blue-600));
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.empty-state-block {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 32px 16px;
  text-align: center;
}

.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--surface-strong, rgba(255,255,255,.07));
  color: var(--accent-text);
  font-size: 20px;
}

.empty-state-title {
  margin: 0;
  color: var(--text);
  font-weight: 800;
}

.empty-state-body {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  max-width: 320px;
}

/* ─── Nav tile grid (Agency dashboard tool links) ────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

/* Pentest engagement list (pentest_dashboard.html) — had no rule at all, so
   .card children stacked with zero gap between them, edge to edge. */
.scan-list {
  display: grid;
  gap: 16px;
}

/* Small action/status line under an engagement's status pill. */
.eng-meta-line {
  margin: 8px 0 0;
  font-size: 13px;
}

/* Checkbox/radio + label on one line (SMTP TLS/SSL toggles, etc). */
.inline-check-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}

.card {
  padding: 20px 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 4px 16px rgba(0,0,0,.25);
}

.card-link {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.card-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--cobalt);
}

.card-link h2 {
  margin: 0 0 6px;
  font-size: 18px;
}

.card-link p.muted {
  margin: 0;
  font-size: 13.5px;
}

.card-arrow {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  transition: transform .15s ease, color .15s ease;
}

.card-link:hover .card-arrow {
  transform: translateX(3px);
  color: var(--cobalt);
}

@media (max-width: 900px) {
  .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .dashboard-kpis {
    grid-template-columns: 1fr;
  }

  .quick-action {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 3.2 — Target detail (package cards, scan history, consent modal)
═══════════════════════════════════════════════════════════════════════════ */
.pkg-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 240px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.pkg-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--cobalt);
}

.pkg-card-title {
  margin: 0;
  color: var(--text);
  font-weight: 800;
  font-size: 14px;
}

.scanner-index-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.scanner-index-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.scanner-index-count {
  margin: 0;
  font-size: 12px;
}

@media (max-width: 900px) {
  .scanner-index-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.pkg-card-desc {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.pkg-card-badge {
  justify-self: start;
  align-self: flex-start;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.pkg-card-cta {
  margin-top: auto;
  padding-top: 4px;
  width: 100%;
}

/* Scan history row: icon + status + view-report button */
.target-history-row {
  grid-template-columns: minmax(220px, .8fr) minmax(380px, .95fr) auto;
}

.target-history-main {
  grid-template-columns: auto auto minmax(0, 1fr);
}

.history-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 900;
}

.history-status-completed {
  background: var(--success-bg);
  color: var(--success);
}

.history-status-failed {
  background: var(--critical-bg);
  color: var(--critical);
}

.history-status-pending,
.history-status-running {
  background: var(--warning-bg);
  color: var(--warning);
}

.target-history-view {
  justify-self: end;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .target-history-view {
    justify-self: start;
  }
}

/* Consent modal polish */
.consent-modal {
  border-radius: var(--radius-xl, 20px);
}

.consent-check-row {
  border-radius: var(--radius-md, 10px);
  transition: border-color .15s ease, background .15s ease;
}

.consent-check-row:hover {
  border-color: var(--cobalt);
}

.consent-modal-actions .button {
  min-height: 44px;
  font-size: 14px;
}

.consent-modal-actions .button:not(.secondary) {
  box-shadow: var(--shadow-glow);
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 3.3 — Scan detail / report page
═══════════════════════════════════════════════════════════════════════════ */

/* P3-9 pass-rate donut gauge (replaces plain border ring) */
.report-grade-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 18px;
  border: 0;
  background:
    radial-gradient(circle at center, var(--panel) 68%, transparent 70%),
    conic-gradient(var(--success) calc(var(--pass-rate, 0) * 1%), var(--surface-strong) 0);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: center;
}

.report-grade-ring-letter {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 900;
  line-height: 1;
  color: var(--text);
}

.report-grade-ring-pct {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* P3-12 passed checks: compact 2-column tick grid */
.passed-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.passed-check-grid span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.check-tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--success);
  color: var(--bg);
  font-size: 10px;
  font-weight: 900;
}

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

/* P3-10 collapsible finding cards */
.finding-report-card summary {
  list-style: none;
  cursor: pointer;
}

.finding-report-card summary::-webkit-details-marker {
  display: none;
}

.finding-report-card summary::after {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 9px;
  height: 9px;
  margin-left: 8px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.finding-report-card[open] summary::after {
  transform: rotate(-135deg);
}

.finding-report-card summary {
  display: flex;
}

.finding-head-badges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.cvss-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--critical-bg);
  color: var(--critical);
  font-size: 11px;
  font-weight: 800;
}

.reference-chip {
  display: inline-flex;
  max-width: 100%;
  margin: 0 6px 6px 0;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--color-blue-400);
  font-size: 12px;
  overflow-wrap: anywhere;
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 3.4 — Auth pages (split-screen login / signup)
═══════════════════════════════════════════════════════════════════════════ */
.auth-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: calc(100vh - 68px);
}

.auth-split-brand {
  display: flex;
  align-items: center;
  padding: clamp(32px, 6vw, 80px);
  background: var(--bg);
  border-right: 1px solid var(--line);
  color: var(--text);
}

.auth-split-brand-inner {
  max-width: 440px;
}

.auth-split-brand .eyebrow {
  color: var(--accent-text);
}

/* .auth-split-headline is the strapline in the marketing panel. It is a <p>
   rather than a heading so it does not open the document outline at h2 ahead
   of the form's <h1> — it keeps the heading-sized styling regardless. The h2
   selector is retained for any auth-split page that still uses one. */
.auth-split-brand h2,
.auth-split-headline {
  margin: 0 0 14px;
  color: var(--text);
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
}

.auth-split-sub {
  margin: 0 0 24px;
  color: var(--muted);
  line-height: 1.6;
}

.auth-highlight-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.auth-highlight-list li {
  position: relative;
  padding-left: 26px;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
}

.auth-highlight-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-strong);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 900;
}

.auth-cat-list {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.auth-cat-list li {
  padding-left: 26px;
  position: relative;
}

.auth-cat-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--orange);
}

.auth-cat-name {
  display: block;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
}

.auth-cat-items {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.auth-split-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(24px, 6vw, 56px);
  background: var(--bg);
}

/* Pages with no .auth-split-brand sibling (check-your-email, forgot/reset
   password) still inherit .auth-split's two-column grid, so the lone
   .auth-split-form only ever fills the first 1fr track — leaving it pinned
   to the left half of the screen instead of centered. Span both tracks so
   this form's own justify-content:center centers it across the full width. */
.auth-split-form:only-child {
  grid-column: 1 / -1;
}

.auth-form-card {
  width: 100%;
  max-width: 400px;
}

.auth-form-card h1 {
  margin: 0 0 20px;
}

.auth-form {
  gap: 16px;
}

.form-field {
  display: grid;
  gap: 6px;
}

.form-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.form-checkbox-row input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.checkbox-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.auth-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 24px;
}

.auth-proof-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.auth-proof-num {
  color: var(--accent-text);
  font-weight: 700;
  font-size: 15px;
}

.auth-proof-label {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.auth-password-wrap {
  position: relative;
  display: flex;
}

.auth-password-wrap input {
  flex: 1 1 auto;
  padding-right: 56px;
}

.auth-password-toggle {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  padding: 4px 8px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}

.auth-password-toggle:hover {
  color: var(--accent-text);
}

.auth-caps-hint {
  margin: 6px 0 0;
  color: var(--warning);
  font-size: 12.5px;
  font-weight: 600;
}

.auth-password-meter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 8px;
}

.auth-password-meter-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-strong);
}

.auth-password-meter-bar.is-filled {
  background: var(--orange);
}

@media (max-width: 900px) {
  .auth-split {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .auth-split-brand {
    padding: 32px clamp(20px, 6vw, 40px);
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .auth-split-brand-inner {
    max-width: none;
  }

  .auth-proof-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* P3-15 taller inputs for easier tap targets. Excludes checkbox/radio:
   min-height still wins over a more-specific height:18px rule (different
   properties don't compete on specificity), which was inflating every
   custom appearance:none checkbox — e.g. consent-modal checkboxes — to a
   44px-tall blob instead of the intended 18px box. */
input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 44px;
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 3.5 — Pricing FAQ accordion
═══════════════════════════════════════════════════════════════════════════ */
.pricing-faq-accordion {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.pricing-faq-item {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-soft);
}

.pricing-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
}

.pricing-faq-item summary::-webkit-details-marker {
  display: none;
}

.pricing-faq-item summary h3 {
  margin: 0;
  font-size: 15px;
}

.pricing-faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .15s ease;
}

.pricing-faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.pricing-faq-item p {
  margin: 12px 0 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 3.6 — Global components (button variants, toasts, page transition)
═══════════════════════════════════════════════════════════════════════════ */

/* P3-20 button variants */
.button-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}

.button-outline:hover {
  background: var(--surface-strong, rgba(255,255,255,.07));
  border-color: var(--cobalt);
}

.button-ghost {
  background: transparent;
  color: var(--muted);
  border: 0;
  box-shadow: none;
}

.button-ghost:hover {
  background: var(--surface-soft, rgba(255,255,255,.035));
  color: var(--text);
  transform: none;
}

.button-outline:focus-visible,
.button-ghost:focus-visible {
  outline: 3px solid var(--focus-ring, rgba(230,126,34,.28));
  outline-offset: 2px;
}

/* P3-19 page fade-in on load */
main.shell,
main:not(.shell) {
  animation: page-fade-in .35s ease both;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  main.shell,
  main:not(.shell) {
    animation: none;
  }
}

/* GDPR cookie consent banner — fixed to the viewport bottom so it's visible
   immediately on load, not only after scrolling to the footer. */
.cookie-banner {
  display: flex;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  padding: 16px max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-right));
  background: var(--topbar-bg);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
}

.cookie-banner-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  width: min(var(--container), 100%);
  margin: 0 auto;
}

.cookie-banner-text {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .cookie-banner-inner {
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-banner-actions {
    justify-content: flex-end;
  }
}

/* P3-18 toast notifications */
.toast-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 500;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 40px));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  color: var(--text);
  font-size: 13px;
  animation: toast-in .2s ease both;
}

.toast-success { border-left: 3px solid var(--success); }
.toast-error   { border-left: 3px solid var(--critical); }
.toast-warning { border-left: 3px solid var(--warning); }
.toast-info    { border-left: 3px solid var(--color-blue-400); }

.toast-close {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.toast.is-leaving {
  animation: toast-out .18s ease both;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 4 — Cross-cutting polish
═══════════════════════════════════════════════════════════════════════════ */

/* P4-3 hover lift on interactive cards */
.panel,
.stat-card {
  transition: transform .15s ease, box-shadow .15s ease;
}

.panel:hover,
.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.lp-pkg {
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.lp-pkg:hover {
  transform: translateY(-3px);
}

/* P4-5 hero mockup: finding chips appear one by one on load */
.lp-report-row {
  opacity: 0;
  transform: translateY(8px);
  animation: chip-reveal .45s ease forwards;
}

.lp-report-row:nth-child(1) { animation-delay: .3s; }
.lp-report-row:nth-child(2) { animation-delay: .55s; }
.lp-report-row:nth-child(3) { animation-delay: .8s; }
.lp-report-row:nth-child(4) { animation-delay: 1.05s; }

@keyframes chip-reveal {
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-report-row {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* P4-2 mobile nav becomes a full-screen overlay drawer */
html.nav-drawer-open,
body.nav-drawer-open {
  overflow: hidden;
  height: 100%;
}

/* Scroll lock while a modal is open, set by window.bmModal (app.js).
   A class rather than an inline style on <body>: the consent dialogs used to
   write document.body.style.overflow directly from two places, which meant any
   close path that forgot to reset it left the page permanently unscrollable.
   Owned in one place now, applied and removed by open()/close(). */
html.bm-modal-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  /* .topbar's own backdrop-filter establishes a containing block for any
     position:fixed descendant (per spec), which would confine the "full
     screen" drawer to the topbar's own box instead of the viewport. Disable
     it at this breakpoint so .primary-nav's fixed positioning resolves
     against the viewport as intended; the drawer supplies its own blur. */
  .topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .topbar .primary-nav {
    position: fixed;
    z-index: 150;
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    max-height: none;
    margin: 0;
    padding: 96px 24px 32px;
    border: 0;
    border-radius: 0;
    background: var(--topbar-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    align-content: start;
    gap: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
  }

  .topbar .primary-nav.is-open {
    display: grid;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .22s ease, transform .22s ease;
  }

  .topbar .primary-nav a:not(.button),
  .topbar .primary-nav .button,
  .topbar .primary-nav .link-button,
  .topbar .primary-nav .nav-meta {
    min-height: 48px;
    font-size: 15px;
  }

  .topbar .primary-nav .nav-dropdown > summary {
    min-height: 48px;
    font-size: 15px;
  }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .topbar .primary-nav {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 2 (continued) — Trust logos, workflow timeline, comparison table,
   package tier borders, safety pattern background
═══════════════════════════════════════════════════════════════════════════ */

/* P2-9 trust logo placeholder row */
.lp-trust-logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.lp-trust-logos-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.lp-trust-logo-slot {
  width: 64px;
  height: 22px;
  border-radius: 4px;
  background: var(--surface-strong, rgba(255,255,255,.07));
  opacity: .6;
}

.lp-trust-badge {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-strong, rgba(255,255,255,.05));
  color: var(--muted-strong);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

/* P2-10 animated scan-progress rail on the hero mockup */
.lp-report-scan-rail {
  position: relative;
  height: 3px;
  overflow: hidden;
  background: var(--surface-soft);
}

.lp-report-scan-rail span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 32%;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  animation: report-scan-sweep 2.2s ease-in-out infinite;
}

@keyframes report-scan-sweep {
  0% { transform: translateX(-40%); }
  100% { transform: translateX(340%); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-report-scan-rail span {
    animation: none;
  }
}

/* P2-12 feature card icons + hover lift */
.lp-proof-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: var(--radius-md, 10px);
  font-size: 20px;
}

.lp-proof-icon-blue   { background: rgba(75, 145, 220, .14); }
.lp-proof-icon-orange { background: rgba(230, 126, 34, .14); }
.lp-proof-icon-green  { background: rgba(39, 174, 96, .14); }

.lp-proof-card {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.lp-proof-card:hover {
  transform: translateY(-3px);
  border-color: var(--cobalt);
  box-shadow: var(--shadow-md);
}

/* P2-13 workflow timeline: connecting line + circular step numbers */
.lp-steps {
  position: relative;
}

.lp-steps::before {
  content: "";
  position: absolute;
  top: 46px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, var(--cobalt), var(--orange));
  opacity: .35;
  z-index: 0;
}

.lp-step {
  position: relative;
  z-index: 1;
}

.lp-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-strong, rgba(255,255,255,.07));
  border: 1px solid var(--line);
  font-size: 15px;
  opacity: 1;
  color: var(--text);
}

@media (max-width: 900px) {
  .lp-steps::before {
    display: none;
  }
}

/* P2-14 comparison mini-table */
.lp-compare-table-wrap {
  margin-top: 36px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
}

.lp-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.lp-compare-table th,
.lp-compare-table td {
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}

.lp-compare-table thead th {
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.lp-compare-table tbody th {
  color: var(--text);
  font-weight: 800;
}

.lp-compare-table tbody tr:last-child th,
.lp-compare-table tbody tr:last-child td {
  border-bottom: 0;
}

.lp-compare-featured {
  background: rgba(230, 126, 34, .06);
}

/* P2-15 package cards: colored top border per tier */
.lp-pkg {
  border-top-width: 3px;
  border-top-style: solid;
}

.lp-pkg[data-tier="free"]       { border-top-color: var(--success); }
.lp-pkg[data-tier="developer"]  { border-top-color: var(--color-blue-400); }
.lp-pkg[data-tier="team"]       { border-top-color: var(--cobalt); }
.lp-pkg[data-tier="agency"]     { border-top-color: var(--orange); }
.lp-pkg[data-tier="enterprise"] { border-top-color: var(--critical); }

/* P2-16 pentest package: distinct featured/ribbon variant (not orange, to
   differentiate from the Basic Hygiene featured card) */
.lp-pkg-pentest.lp-pkg-featured {
  border-color: var(--critical);
  box-shadow: 0 0 0 1px var(--critical), 0 4px 24px rgba(231, 76, 60, .18);
}

.lp-pkg-pentest .lp-pkg-badge {
  background: rgba(231, 76, 60, .15);
  color: var(--critical);
}

.lp-pkg-pentest .lp-pkg-icon {
  background: rgba(231, 76, 60, .12);
  color: var(--critical);
}

/* P2-17 safety section: subtle dot-grid pattern on the dark panel */
#safety.lp-section-alt {
  position: relative;
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: center;
}

[data-theme="light"] #safety.lp-section-alt {
  background-image: radial-gradient(rgba(26, 69, 121, .12) 1px, transparent 1px);
}

/* P2-18 footer: 4-column layout with gradient separator + newsletter UI */
.site-footer {
  position: relative;
  padding: 40px 0 24px;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cobalt), var(--orange), transparent);
}

.site-footer-grid {
  display: grid;
  grid-template-columns: 1.3fr .9fr .9fr 1.3fr;
  gap: 28px;
  align-items: start;
}

.footer-col-title-spaced {
  margin-top: 24px;
}

.footer-col-title {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.footer-col-brand .footer-brand {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
}

.footer-tagline {
  margin: 0 0 16px;
  max-width: 280px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.footer-col .footer-nav,
.footer-col .footer-legal-nav {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.footer-social {
  display: flex;
  gap: 12px;
  margin: 0 0 16px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  transition: color .15s ease, background .15s ease;
}

.footer-social a:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--cobalt) 18%, transparent);
}

.footer-contact-link {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 700;
}

.footer-newsletter {
  display: flex;
  gap: 8px;
}

.footer-newsletter input {
  min-height: 38px;
  font-size: 13px;
}

.footer-newsletter .button {
  flex: 0 0 auto;
}

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

@media (max-width: 900px) {
  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

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

  .footer-tagline {
    max-width: none;
  }

  .footer-newsletter {
    flex-direction: column;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 3.3 (continued) — P3-11 sticky report sidebar
═══════════════════════════════════════════════════════════════════════════ */
.report-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 20px;
  align-items: start;
}

.report-main {
  min-width: 0;
}

.report-aside {
  position: sticky;
  top: 90px;
  display: grid;
  gap: 16px;
}

.report-aside-panel {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.report-aside-panel .button {
  width: 100%;
}

.report-aside-severity-list {
  display: grid;
  gap: 10px;
}

.report-aside-severity-row {
  display: grid;
  grid-template-columns: minmax(58px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.report-aside-severity-row strong {
  color: var(--text);
  font-size: 13px;
  text-align: right;
}

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

  .report-aside {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

/* ── Billing interval toggle + scan credit packs ─────────────────────────── */

.billing-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin: 1.5rem 0 2rem;
  text-align: center;
}

.billing-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.interval-switch {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-alt);
}

.interval-option {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.15rem;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}

.interval-option:hover { color: var(--text); }

.interval-option.is-active {
  background: var(--accent-strong);
  color: #fff;
}

.interval-save {
  padding: .1rem .45rem;
  border-radius: 999px;
  background: rgba(241,196,15,.18);
  color: var(--accent-text-hover);
  font-size: .72rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.interval-option.is-active .interval-save {
  background: rgba(255,255,255,.22);
  color: #fff;
}

.pricing-billed-note {
  margin: .15rem 0 0;
  font-size: .82rem;
}

.credit-packs { margin-top: 2rem; }

.credit-packs-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.credit-packs-head h2 { margin: 0 0 .35rem; }
.credit-packs-head p { margin: 0; max-width: 46ch; }

.credit-balance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .1rem;
  margin: 0;
}

.credit-balance-value {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent-text);
}

.credit-balance-label {
  font-size: .78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.credit-pack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.credit-pack {
  padding: 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-alt);
  text-align: center;
}

.credit-pack-scans {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

.credit-pack-price {
  margin: .3rem 0 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
}

.credit-pack-rate {
  margin: .1rem 0 .9rem;
  font-size: .8rem;
}

.credit-pack form { margin: 0; }
.credit-pack .button { width: 100%; }

.credit-pack-note {
  margin: 1.1rem 0 0;
  font-size: .85rem;
}

@media (max-width: 560px) {
  .credit-balance { align-items: flex-start; }
}

/* ─── Admin sidebar layout ───────────────────────────────────────────────── */
main.admin-shell {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin: 0;
}

.admin-sidebar {
  position: sticky;
  top: 0;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  width: 220px;
  flex-shrink: 0;
  box-sizing: border-box;
  min-height: calc(100vh - 62px);
  padding: 32px 20px;
  border-right: 1px solid var(--line);
  text-align: left;
}

.admin-sidebar .eyebrow {
  margin-bottom: 0;
  text-align: left;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.admin-nav a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.admin-nav a:hover {
  background: var(--panel-hover);
  color: var(--text);
}

.admin-nav a.active {
  border-left-color: var(--accent);
  background: rgba(230, 126, 34, .12);
  color: var(--accent-text);
}

.admin-content {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  width: min(1140px, 100%);
  margin: 0 auto;
  padding: 40px clamp(20px, 4vw, 48px);
}

/* Email configuration (admin_email_config.html) — vertical category tabs on
   the left, matching .admin-nav's own accent-border-on-active look, with the
   selected category's form on the right. */
.email-config-layout {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.email-config-tabs {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: 20px;
}

.email-config-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.email-config-tab:hover {
  background: var(--panel-hover);
  color: var(--text);
}

.email-config-tab.is-active {
  border-left-color: var(--accent);
  background: rgba(230, 126, 34, .12);
  color: var(--accent-text);
}

.email-config-tab-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.email-config-tab-icon .icon {
  width: 12px;
  height: 12px;
}

.email-config-tab-icon-ok {
  background: var(--success-bg);
  color: var(--success);
}

.email-config-tab-icon-off {
  background: rgba(110, 136, 160, .15);
  color: var(--muted);
}

.email-config-panels {
  flex: 1;
  min-width: 0;
}

@media (max-width: 780px) {
  .email-config-layout {
    flex-direction: column;
  }

  .email-config-tabs {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
  }

  .email-config-tab {
    border-left: none;
    border-bottom: 2px solid transparent;
    border-radius: 6px 6px 0 0;
  }

  .email-config-tab.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--accent);
  }
}

@media (max-width: 820px) {
  main.admin-shell {
    flex-direction: column;
  }

  .admin-sidebar {
    position: static;
    width: 100%;
    min-height: 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 20px;
  }

  .admin-nav {
    flex-direction: column;
  }

  .admin-nav a {
    padding: 8px 12px;
  }

  .admin-content {
    width: 100%;
    padding: 24px 20px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Global <select> styling — was previously unstyled (native browser chrome),
   the only form control without matching treatment. Appended last so it wins
   the cascade over the older, narrower `input { ... }` rules scattered above.
═══════════════════════════════════════════════════════════════════════════ */
select {
  width: 100%;
  min-height: 44px;
  padding: 0 36px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius, 8px);
  font: inherit;
  font-size: 14px;
  background-color: var(--surface-soft, var(--bg-alt));
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%238a93a6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

select:focus {
  outline: none;
  border-color: var(--accent, var(--cobalt));
  box-shadow: 0 0 0 4px var(--focus-ring, rgba(26,69,121,.25));
}

select:focus-visible {
  outline: 3px solid var(--focus-ring, rgba(26,69,121,.25));
  outline-offset: 2px;
}

select::-ms-expand {
  display: none;
}

select option {
  background: var(--bg-alt);
  color: var(--text);
}

/* Plan-pricing Monthly/Annual fields sit side by side in .grid.two, but their
   labels wrap to different line counts ("Monthly price" vs the longer
   "Annual price (optional — ...)"), which top-aligns the label text but pushes
   the shorter label's input higher than the taller label's input. Pin both
   inputs to the bottom of their cell instead, so the boxes line up regardless
   of label height. */
.plan-price-form .grid.two > div {
  display: flex;
  flex-direction: column;
}

.plan-price-form .grid.two > div > input,
.plan-price-form .grid.two > div > select {
  margin-top: auto;
}

/* Homepage: findings-count strip inside the hero report preview */
.lp-report-findings-count {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
  padding: 0 24px;
}

/* Homepage: note under the four "how it works" steps, and CTA under the
   compressed six coverage-area cards */
.lp-section-note {
  margin-top: 20px;
  font-size: 13px;
  color: var(--muted);
}

.lp-section-cta {
  margin-top: 28px;
  text-align: center;
}

#plan-availability .lp-section-cta {
  margin-top: 20px;
  text-align: right;
}

/* Homepage: two-card "continuous checks vs active validation" comparison,
   replacing the old BreakMesh-vs-pentest turnaround table */
.lp-compare-cards {
  margin-top: 40px;
}

.lp-compare-lead {
  text-align: center;
  font-size: 20px;
  margin: 0 0 20px;
}

.lp-compare-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.lp-compare-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  padding: 24px;
  background: var(--panel);
}

.lp-compare-card-featured {
  border-color: var(--critical);
  box-shadow: 0 0 0 1px var(--critical);
}

.lp-compare-card-list {
  margin: 12px 0 0;
  padding-left: 18px;
}

.lp-compare-card-list li {
  margin-bottom: 8px;
  font-size: 14px;
}

.lp-compare-card-cta {
  display: inline-block;
  margin-top: 16px;
  font-weight: 700;
  color: var(--critical);
  text-decoration: none;
}

.lp-compare-card-cta:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  .lp-compare-card-grid {
    grid-template-columns: 1fr;
  }
}

/* Scanner catalogue (/scanners) */
.page-breadcrumb {
  font-size: 12px;
  color: var(--muted);
  margin: 16px 0 4px;
}

.page-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.page-breadcrumb a:hover {
  text-decoration: underline;
}

.page-breadcrumb span:last-child {
  color: var(--text);
  font-weight: 600;
}

.scanner-metrics {
  margin-top: 24px;
  margin-bottom: 30px;
  border-radius: var(--radius-lg, 14px);
}

.scanner-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 4px;
}

.scanner-filter-btn {
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.scanner-filter-btn.is-active {
  background: var(--cobalt);
  border-color: var(--cobalt);
  color: #fff;
}

.scanner-group-title {
  margin: 28px 0 4px;
  font-size: 16px;
}

/* Unified package-card theme: same top accent bar + hover lift as the
   homepage's .lp-pkg cards, applied to the target-detail "run a scan" cards
   (.pkg-card) and the /scanners catalogue cards (.scanner-index-card) so all
   three surfaces read as one visual system. */
.pkg-card,
.scanner-index-card {
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.pkg-card::before,
.scanner-index-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--line);
}

.pkg-card:hover,
.scanner-index-card:hover {
  transform: translateY(-3px);
  border-color: var(--cobalt);
  box-shadow: 0 4px 20px rgba(26, 69, 121, .2);
}

.scanner-index-card-featured::before {
  background: var(--orange);
}

.scanner-index-card-featured {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange), 0 4px 24px rgba(230, 126, 34, .15);
}

.scanner-index-card-secondary {
  opacity: .85;
}

.scanner-card-cta {
  margin-top: auto;
  padding-top: 4px;
  width: 100%;
}

.pkg-card-badge-muted {
  background: var(--surface-soft);
  color: var(--muted);
}

.scanner-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.scanner-badge {
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
}

.scanner-auth-grid {
  grid-template-columns: repeat(5, 1fr);
  margin-top: 20px;
}

@media (max-width: 1000px) {
  .scanner-auth-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* Plan availability (pentest page): only 3 tiers, not the 5 the shared
   .scanner-auth-grid assumes — the unused 2 columns left the cards
   short of the container width and stranded the CTA link under the last
   card instead of centred below the row. min-width scoping keeps the
   .scanner-auth-grid mobile fallbacks (2-col at 1000px, 1-col at 600px)
   in charge below this. */
@media (min-width: 1000px) {
  #plan-availability .lp-compare-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.scanner-scope-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 24px;
}

.scanner-scope-col {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  padding: 20px;
}

.scanner-scope-heading {
  font-weight: 800;
  margin: 0 0 4px;
}

@media (max-width: 720px) {
  .scanner-scope-grid {
    grid-template-columns: 1fr;
  }
}

/* Pricing page (/pricing) */
.pricing-plan-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.pricing-differentiators {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pricing-differentiators li {
  font-size: 13px;
  color: var(--text);
  padding-left: 18px;
  position: relative;
}

.pricing-differentiators li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}

.pricing-run-example {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface-soft);
}

.pricing-run-example-title {
  margin: 0 0 4px;
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--muted);
}

.pricing-run-example-math {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 700;
}

.pricing-wallet-table {
  margin-top: 16px;
}

.pricing-tax-note {
  font-size: 12px;
  margin-top: 8px;
}

.pricing-active-validation-grid {
  margin-top: 20px;
}

/* Sample reports list (/sample-report) */
.sample-report-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 20px;
}

.sample-report-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.6fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.sample-report-row:last-child {
  border-bottom: 0;
}

.sample-report-row-head {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding-top: 0;
}

.sample-report-pkg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sample-report-score {
  display: flex;
  align-items: center;
  gap: 10px;
}

.report-grade-ring.sample-report-ring {
  width: 56px;
  height: 56px;
  padding: 0;
  flex: 0 0 auto;
}

.sample-report-ring .report-grade-ring-letter {
  font-size: 20px;
}

.sample-report-ring .report-grade-ring-pct {
  font-size: 8px;
}

.sample-report-risk-level {
  font-size: 12px;
}

.sample-report-findings {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (max-width: 780px) {
  .sample-report-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .sample-report-row-head {
    display: none;
  }

  .sample-report-actions {
    margin-top: 4px;
  }
}

/* Homepage: Trust & Safety six-card grid (replaces the old checklist +
   finding-card pair) */
.lp-safety-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-content: start;
}

.lp-safety-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  padding: 20px;
  background: var(--panel);
}

.lp-safety-card h3,
.lp-safety-card h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.lp-safety-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 560px) {
  .lp-safety-cards {
    grid-template-columns: 1fr;
  }
}

/* Homepage: SOC 2 evidence panel */
.lp-soc2-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(240px, .8fr);
  gap: 40px;
  align-items: center;
  padding: clamp(24px, 4vw, 40px);
}

.lp-soc2-panel::before {
  content: "";
  position: absolute;
  top: -70px;
  right: -70px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(230, 126, 34, .22), transparent 70%);
  pointer-events: none;
}

.lp-soc2-categories {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-soc2-chip {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface-soft);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 860px) {
  .lp-soc2-panel {
    grid-template-columns: 1fr;
  }
}

/* ── Documentation portal (/docs) ───────────────────────────────────────────
   Single-page "app" shell: every .docs-page lives in the DOM, JS toggles
   which one is .is-active, and the hash (#scanner-safety, #cloud, ...) tracks
   the current page — matching Docs/contentchanges/docs-template.html. */
.docs-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr) 200px;
  gap: 28px;
  align-items: start;
  margin-top: 8px;
}

.docs-mobile-toggle {
  display: none;
  width: 100%;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  text-align: left;
}

.docs-sidebar {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  display: grid;
  gap: 20px;
  padding-right: 8px;
}

.docs-search input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--text);
  font-size: 13px;
}

.docs-nav-heading {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.docs-nav-group {
  display: grid;
  gap: 2px;
}

.docs-nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 2px 0 transparent;
}

.docs-nav-link:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.docs-nav-link.is-active {
  background: rgba(230, 126, 34, .08);
  color: var(--text);
  box-shadow: inset 2px 0 var(--orange);
}

.docs-main {
  min-width: 0;
}

.docs-page {
  display: none;
}

.docs-page.is-active {
  display: block;
}

.docs-breadcrumb {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 18px;
}

.docs-breadcrumb span {
  margin: 0 6px;
}

.docs-page h1 {
  margin: 0;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.docs-page h2 {
  margin-top: 44px;
  scroll-margin-top: 100px;
}

.docs-page h3 {
  margin-top: 26px;
  font-size: 17px;
  scroll-margin-top: 100px;
}

.docs-lede {
  margin: 14px 0 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

/* Summary / auth / package cards */
.docs-summary-grid,
.docs-auth-grid,
.docs-package-grid,
.docs-cards-3 {
  display: grid;
  gap: 12px;
  margin: 22px 0;
}

.docs-summary-grid,
.docs-package-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.docs-auth-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.docs-cards-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.docs-summary-card,
.docs-auth-card,
.docs-package,
.docs-mini-card {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  background: var(--panel);
}

.docs-summary-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  margin-bottom: 10px;
  border: 1px solid rgba(230, 126, 34, .3);
  border-radius: 8px;
  background: rgba(230, 126, 34, .1);
  color: var(--accent-text);
  font-size: 10px;
  font-weight: 900;
}

.docs-summary-card strong,
.docs-auth-card strong,
.docs-package strong,
.docs-mini-card strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}

.docs-summary-card span,
.docs-auth-card span,
.docs-package span,
.docs-mini-card span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

/* Callouts */
.docs-callout {
  display: flex;
  gap: 12px;
  margin: 20px 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface-soft);
}

.docs-callout-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 900;
}

.docs-callout strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}

.docs-callout p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.docs-callout-info { border-color: rgba(42, 111, 201, .28); }
.docs-callout-info .docs-callout-icon { color: var(--accent-blue); background: rgba(42, 111, 201, .12); }
.docs-callout-warn { border-color: rgba(230, 126, 34, .32); }
.docs-callout-warn .docs-callout-icon { color: var(--accent-text); background: rgba(230, 126, 34, .12); }
.docs-callout-danger { border-color: rgba(231, 76, 60, .3); }
.docs-callout-danger .docs-callout-icon { color: var(--critical); background: rgba(231, 76, 60, .12); }
.docs-callout-success { border-color: rgba(39, 174, 96, .3); }
.docs-callout-success .docs-callout-icon { color: var(--success); background: rgba(39, 174, 96, .12); }

/* Tables */
.docs-table-wrap {
  overflow-x: auto;
  margin: 18px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
}

.docs-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  font-size: 12.5px;
}

.docs-table th,
.docs-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.docs-table thead th {
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.docs-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Flow diagram */
.docs-flow {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}

.docs-flow-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface-soft);
}

.docs-flow-num {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px solid rgba(230, 126, 34, .28);
  background: rgba(230, 126, 34, .1);
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 900;
}

.docs-flow-row strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}

.docs-flow-row span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

/* Inline horizontal flow (short step chips) */
.docs-flow-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 20px 0;
}

.docs-flow-chip {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.docs-flow-arrow {
  color: var(--muted);
  font-weight: 900;
}

/* Prev/next */
.docs-next-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.docs-next-card {
  display: block;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  background: var(--panel);
  cursor: pointer;
  text-align: left;
}

.docs-next-card:hover {
  border-color: var(--accent-blue);
}

.docs-next-card:last-child {
  text-align: right;
}

.docs-next-card small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.docs-next-card strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text);
}

/* Right-hand "On this page" TOC */
.docs-toc {
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  font-size: 12px;
}

.docs-toc-heading {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}

.docs-toc a {
  display: block;
  padding: 4px 0;
  padding-left: 8px;
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
}

.docs-toc a.docs-toc-h3 {
  padding-left: 18px;
}

.docs-toc a:hover {
  color: var(--text);
}

.docs-toc-note {
  margin-top: 22px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}

@media (max-width: 1180px) {
  .docs-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .docs-toc {
    display: none;
  }
}

@media (max-width: 860px) {
  .docs-shell {
    grid-template-columns: 1fr;
  }

  .docs-mobile-toggle {
    display: block;
  }

  .docs-sidebar {
    position: static;
    max-height: none;
    display: none;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg, 14px);
    background: var(--panel);
    margin-bottom: 20px;
  }

  .docs-sidebar.is-open {
    display: grid;
  }

  .docs-summary-grid,
  .docs-package-grid,
  .docs-cards-3 {
    grid-template-columns: 1fr;
  }

  .docs-auth-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .docs-next-nav {
    grid-template-columns: 1fr;
  }
}

/* Package cards (homepage / scanners / target detail): flat at rest — no
   border, no top accent bar — and the orange "featured" look now appears
   only on hover, the same way on every card rather than being permanently
   on for one "featured" card. Placed last so it wins over the older
   always-on .lp-pkg-featured / .scanner-index-card-featured rules above. */
.lp-pkg,
.lp-pkg-featured,
.pkg-card,
.scanner-index-card,
.scanner-index-card-featured {
  border-color: transparent;
}

.lp-pkg::before,
.lp-pkg-featured::before,
.pkg-card::before,
.scanner-index-card::before,
.scanner-index-card-featured::before {
  background: transparent;
}

.lp-pkg:hover,
.lp-pkg-featured:hover,
.pkg-card:hover,
.scanner-index-card:hover,
.scanner-index-card-featured:hover {
  border-color: var(--orange);
  box-shadow: 0 4px 24px rgba(230, 126, 34, .18);
}

.lp-pkg:hover::before,
.lp-pkg-featured:hover::before,
.pkg-card:hover::before,
.scanner-index-card:hover::before,
.scanner-index-card-featured:hover::before {
  background: var(--orange);
}

/* ── Active Pentest page ─────────────────────────────────────────────── */

.pentest-automation-badge {
  display: inline-block;
  margin: 4px 0 10px;
  padding: 5px 12px;
  border: 1px solid var(--orange);
  border-radius: 999px;
  color: var(--accent-text);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.pentest-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 18px 0 8px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.pentest-subnav a {
  color: var(--muted);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.pentest-subnav a:hover {
  color: var(--accent-text);
}

.pentest-tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 18px;
}

.pentest-tier-card {
  padding: 24px;
}

.pentest-tier-label {
  margin: 0;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.pentest-tier-count {
  margin: 4px 0 10px;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
}

.pentest-tier-count span {
  display: block;
  margin-top: 4px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}

.pentest-probe-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.pentest-probe-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
}

.pentest-probe-name {
  color: var(--text);
}

.pentest-probe-tag {
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 600;
  white-space: nowrap;
}

.pentest-automation-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 20px;
}

.pentest-evidence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 18px;
  align-items: start;
}

.pentest-evidence-list li {
  margin-bottom: 8px;
}

.pentest-evidence-example {
  padding: 20px;
}

.pentest-evidence-example-label {
  margin: 0 0 6px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.pentest-evidence-example-title {
  margin: 0;
  font-weight: 700;
}

@media (max-width: 860px) {
  .pentest-tiers {
    grid-template-columns: 1fr;
  }
  .pentest-automation-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pentest-evidence-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .pentest-automation-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Pricing: pay-as-you-go summary (moved above plan cards) ────────────── */

.pricing-payg {
  margin-bottom: 28px;
  border-color: rgba(230, 126, 34, .72);
  box-shadow: 0 0 0 1px rgba(230, 126, 34, .18), var(--shadow-card);
  background: linear-gradient(135deg, rgba(230, 126, 34, .08), transparent 55%);
}

.pricing-payg-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.pricing-payg-head h2 {
  margin: 4px 0 10px;
}

.pricing-payg-head p.muted {
  max-width: 640px;
  margin: 0;
}

.pricing-payg-cta {
  flex: none;
}

.pricing-payg-cta-group {
  display: flex;
  gap: 10px;
  flex: none;
}

.pricing-payg-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.pricing-payg-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.pricing-payg-stat-num {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--text);
}

.pricing-payg-stat-label {
  color: var(--muted);
  font-size: .78rem;
}

.pricing-payg-detail {
  margin-top: 16px;
}

.pricing-payg-detail summary {
  cursor: pointer;
  color: var(--accent-text);
  font-weight: 700;
  font-size: .88rem;
  list-style: none;
}

.pricing-payg-detail summary::-webkit-details-marker {
  display: none;
}

.pricing-payg-detail summary::before {
  content: "+ ";
}

.pricing-payg-detail[open] summary::before {
  content: "\2212 ";
}

.pricing-payg-detail .cmp-scroll-wrap {
  margin-top: 12px;
}

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

/* ── Dashboard redesign (plan badge, stat meta, activity feed, modals) ──── */

.dashboard-plan-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border: 1px solid rgba(37, 214, 149, .3);
  border-radius: 999px;
  background: rgba(37, 214, 149, .1);
  color: var(--success, #25d695);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  vertical-align: middle;
}

.dashboard-plan-meta {
  display: inline-block;
  margin-left: 10px;
  font-size: 13px;
  color: var(--muted);
  vertical-align: middle;
}
.dashboard-plan-meta-warning { color: var(--critical, #e05656); }

.stat-card-meta {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}

.stat-card-progress {
  display: block;
  width: 100%;
  height: 4px;
  margin-top: 6px;
  border-radius: 99px;
  background: var(--surface-strong);
  overflow: hidden;
}

.stat-card-progress span {
  display: block;
  height: 100%;
  background: var(--orange);
  border-radius: 99px;
}

.dashboard-recent {
  margin-top: 20px;
  padding: 0;
  overflow: hidden;
}

.dashboard-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}

.dashboard-recent-head strong {
  font-size: 13px;
}

.dashboard-activity-list {
  display: flex;
  flex-direction: column;
}

.dashboard-activity-row {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  transition: background .12s ease;
}

.dashboard-activity-row:last-child {
  border-bottom: 0;
}

.dashboard-activity-row:hover {
  background: var(--surface-soft);
}

.dashboard-activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
}

.dashboard-activity-dot-completed { background: var(--success, #25d695); }
.dashboard-activity-dot-running { background: var(--orange); }
.dashboard-activity-dot-pending { background: var(--accent-blue, #4aa3ff); }
.dashboard-activity-dot-failed { background: var(--critical, #ff6872); }

.dashboard-activity-text {
  display: block;
  min-width: 0;
}

.dashboard-activity-text strong {
  display: block;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-activity-text span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.dashboard-activity-time {
  flex: none;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.dashboard-workspace-note {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

/* Dashboard modals — Add target / Run assessment */

.dash-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 8, 15, .72);
  backdrop-filter: blur(6px);
}

.dash-overlay.is-open {
  display: flex;
}

.dash-modal {
  width: min(480px, 100%);
  padding: 0;
  overflow: hidden;
}

.dash-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}

.dash-modal-head h2 {
  margin: 0;
  font-size: 17px;
}

.dash-modal-close {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 16px;
  line-height: 1;
}

.dash-modal-body {
  padding: 20px;
  display: block;
}

.dash-notice {
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid rgba(230, 126, 34, .3);
  background: rgba(230, 126, 34, .08);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.dash-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

@media (max-width: 640px) {
  .dashboard-activity-row {
    grid-template-columns: 8px 1fr;
  }
  .dashboard-activity-time {
    grid-column: 2;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Homepage — Changes Before Live brief (structural/spacing/copy pass)
═══════════════════════════════════════════════════════════════════════════ */

/* 01 — Hero headline + CTA sizing */
.lp-headline {
  font-size: clamp(48px, 6vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 900px;
}

.lp-cta-primary,
.lp-cta-secondary {
  min-height: 46px;
  border-radius: 12px;
}

/* 02 — Hero proof mini-cards (replaces pill-badge trust row) */
.lp-proof-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.lp-proof-mini-card {
  padding: 15px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.lp-proof-mini-heading {
  margin: 0 0 4px;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.lp-proof-mini-sub {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* Full-width trust strip, moved below the hero */
.lp-trust-strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}

.lp-trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  padding: 20px 0;
}

.lp-trust-strip-label {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.lp-trust-strip-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lp-trust-strip .lp-trust-badge {
  font-size: 13px;
  font-weight: 700;
  /* --muted-strong, matching .lp-trust-badge above: this badge sits on a
     tinted surface, where plain --muted measures 4.06:1. This rule is more
     specific than the base .lp-trust-badge one, so it has to repeat the
     choice rather than inherit it. */
  color: var(--muted-strong);
}

@media (max-width: 720px) {
  .lp-trust-strip-inner {
    justify-content: flex-start;
  }
}

/* Compact finding rows with a single trailing action link */
.lp-report-row-link {
  grid-column: 2;
  color: var(--accent-text);
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
}

.lp-report-row-link:hover {
  text-decoration: underline;
}

/* 03/04/05 — stacked section headers: eyebrow, title, then supporting
   copy below (full width) — eyebrow / title / sub, top to bottom. */
.lp-split-head {
  margin-bottom: 38px;
}

.lp-split-head-title .lp-section-title {
  margin-bottom: 0;
}

.lp-split-head-sub {
  max-width: 640px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

/* 03 — numbered proof-card tiles (replace emoji icons) */
.lp-proof-num-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(230, 126, 34, .14);
  color: var(--accent-text);
  font-size: 15px;
  font-weight: 900;
}

#benefits .lp-proof-grid {
  gap: 18px;
}

#benefits .lp-proof-card {
  padding: 26px;
  border-radius: 22px;
}

/* 04 — square step numbers, no connector line, bordered note box */
.lp-steps-noconnector::before {
  display: none;
}

.lp-step-num-square {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(230, 126, 34, .14);
  border-color: transparent;
  color: var(--accent-text);
  font-weight: 900;
}

.lp-note-box {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
}

/* 05 — Standard vs Active Pentest comparison cards */
.lp-compare-card-label {
  margin: 0 0 6px;
  color: var(--accent-text);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lp-compare-card-title {
  margin: 0 0 12px;
  font-size: 19px;
}

.lp-compare-card-list-check {
  list-style: none;
  padding-left: 0;
}

.lp-compare-card-list-check li {
  position: relative;
  padding-left: 24px;
}

.lp-compare-card-list-check li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--success);
  font-weight: 900;
}

#depth .lp-compare-card-featured {
  border-color: rgba(255, 122, 26, .35);
  box-shadow: none;
  background: linear-gradient(135deg, rgba(255, 122, 26, .10), var(--panel) 60%);
}

.lp-compare-card-btn {
  margin-top: 18px;
}

/* 06 — Coverage grid: 3x2, no abbreviation tiles, neutral borders.
   Scoped to desktop widths — unscoped, this overrode the mobile
   .lp-packages column rules below (max-width: 900px / 700px), forcing a
   cramped 3-up grid on phones because it sits later in the cascade. */
@media (min-width: 900px) {
  .lp-packages-compact {
    grid-template-columns: repeat(3, 1fr);
  }
}

.lp-pkg-link {
  display: inline-block;
  margin-top: 14px;
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.lp-pkg-link:hover {
  text-decoration: underline;
}

#packages .lp-pkg,
#packages .lp-pkg-featured {
  border-color: var(--line);
  box-shadow: none;
}

#packages .lp-pkg:hover,
#packages .lp-pkg-featured:hover {
  border-color: var(--orange);
  box-shadow: 0 4px 24px rgba(230, 126, 34, .15);
}

/* 07 — Trust & Safety: two-column ratio + CTA.
   Scoped to desktop widths — unscoped, this overrode the mobile
   .lp-safety-inner single-column rule (max-width: 900px), forcing a
   320px-minimum second column on phones and making the text/cards
   overlap because it sits later in the cascade. */
@media (min-width: 900px) {
  .lp-safety-inner {
    grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr);
    gap: 38px;
  }
}

.lp-safety-cta {
  margin-top: 20px;
}

/* 08 — SOC 2 panel: subtle orange-tinted border */
.lp-soc2-panel {
  border-radius: 24px;
  border-color: rgba(255, 122, 26, .28);
  background: linear-gradient(135deg, rgba(255, 122, 26, .06), transparent 55%), var(--panel);
}

/* 10 — Final CTA: plain dark band (as before), text left / buttons right */
.lp-cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: min(1100px, calc(100% - 32px));
  margin: 0 auto;
  text-align: left;
}

.lp-cta-band-text {
  flex: 1 1 420px;
}

.lp-cta-band .eyebrow {
  color: var(--accent-text);
}

.lp-cta-band-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
}

@media (max-width: 860px) {
  .lp-cta-band-inner {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  .lp-cta-band-actions {
    justify-content: flex-start;
  }
}

/* 11 — Footer: bottom copyright row (moved out of the brand column) */
.footer-bottom {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.footer-bottom .footer-legal {
  text-align: center;
}

/* Chat widget: label hidden by default, revealed on hover/focus only */
.bm-chat-toggle-label {
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}

.bm-chat-widget:hover .bm-chat-toggle-label,
.bm-chat-widget:focus-within .bm-chat-toggle-label {
  opacity: 1;
  transform: translateY(0);
}

.bm-chat-widget.is-near-footer {
  bottom: 96px;
}

/* Scanner catalogue cards: bring look & feel in line with the homepage
   Coverage cards — neutral visible border by default, orange only on
   hover, larger/cleaner title and description, plain text-link CTA
   instead of a boxed secondary button. */
.scanner-index-grid .scanner-index-card {
  border-color: var(--line);
}

.scanner-index-grid .scanner-index-card-featured {
  box-shadow: none;
}

.scanner-index-grid .pkg-card-title {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--accent-text);
}

.scanner-index-grid .pkg-card-desc {
  font-size: 13.5px;
  line-height: 1.55;
}

.scanner-index-grid .scanner-index-count {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

.scanner-card-cta.lp-pkg-link {
  margin-top: auto;
  padding-top: 4px;
  width: auto;
}

/* .content-section p { color: var(--muted) } was winning on specificity over
   .lp-proof-kicker and .scanner-scope-heading (both bare-class rules on a
   <p>), washing every heading inside a .content-section out to the same
   gray as body text. Scope these back to their intended, higher-contrast
   colors so headings read distinctly from the muted copy beneath them. */
.content-section .lp-proof-kicker {
  color: var(--accent-text);
}

.content-section .scanner-scope-heading {
  color: var(--text);
  font-size: 15px;
}

/* .lp-cta-band was hardcoded to a dark navy gradient + white text in both
   themes, so it stayed dark after toggling to light theme while the rest of
   the page (including the footer right below it) switched — and its
   "Compare plans" button then lost contrast because the generic
   [data-theme="light"] .button.secondary rule (blue text on a near-white
   background) out-specifies .lp-cta-band .lp-cta-secondary's white-on-dark
   styling. Give the band its own light-theme treatment so the whole section
   — background, headline, copy and buttons — switches with the page. */
[data-theme="light"] .lp-cta-band {
  background: linear-gradient(135deg, rgba(230, 126, 34, .10), transparent 45%), linear-gradient(135deg, #e4edf9 0%, #f4f7fb 100%);
}

[data-theme="light"] .lp-cta-band-title {
  color: var(--text);
}

[data-theme="light"] .lp-cta-band-sub {
  color: var(--muted);
}

[data-theme="light"] .lp-cta-band .lp-cta-secondary {
  background: rgba(26, 69, 121, .07);
  border-color: rgba(26, 69, 121, .25);
  color: var(--cobalt);
}

[data-theme="light"] .lp-cta-band .lp-cta-secondary:hover {
  background: rgba(26, 69, 121, .13);
}

/* ═══════════════════════════════════════════════════════
   ICON SYSTEM (see templates/_icons.html)
   ═══════════════════════════════════════════════════════ */

/* Icons are stroke-drawn on a 24x24 grid and inherit currentColor, so they
   pick up whatever text colour their container sets and theme automatically.
   Sizing is in em by default so an icon scales with its container's font-size,
   matching how the Unicode glyphs these replaced behaved. */
.icon {
  flex: 0 0 auto;
  vertical-align: -0.125em;   /* optical baseline alignment next to text */
}

/* Circular icon chips (.quick-action-icon, .empty-state-icon, .check-tick,
   .history-status-icon) centre their content and previously sized the glyph
   via font-size. Give the SVG inside each one a size proportional to the chip
   rather than relying on the inherited font-size, which was tuned for glyphs
   with very different optical weights. */
.quick-action-icon .icon { width: 13px; height: 13px; }
.empty-state-icon .icon  { width: 22px; height: 22px; }
.check-tick .icon        { width: 11px; height: 11px; stroke-width: 3; }
.history-status-icon .icon { width: 15px; height: 15px; stroke-width: 2.5; }

/* The running state gets a slow spin. Purely decorative, and disabled under
   prefers-reduced-motion below. */
.history-status-running .icon {
  animation: icon-spin 2.4s linear infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .history-status-running .icon { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   SUPPORT / SALES CHAT WIDGET (MESH)
   ═══════════════════════════════════════════════════════ */

/* Moved here from an inline <style> block in base.html, which shipped ~30
   rules on every page render and sat outside the design system entirely.
   Two bugs came with it and are fixed below:

   1. It referenced var(--bg-elevated) and var(--text-primary) — neither token
      has ever existed in this stylesheet, so the hardcoded fallbacks (#101c2c
      and #eee) always won. The panel was therefore permanently dark, including
      in light theme, where dark-on-dark chrome sat against a white page.
   2. Its accent was #2563eb, a blue that appears nowhere else in the product
      and did not match --accent-blue.

   Both now use real tokens, so the widget themes with everything else. */

.bm-chat-widget {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: inherit;
}

.bm-chat-toggle-label {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
}

.bm-chat-widget[data-state="open"] .bm-chat-toggle-label { display: none; }
.bm-chat-widget[data-state="open"] .bm-chat-toggle { display: none; }
.bm-chat-widget[data-state="closed"] .bm-chat-panel { display: none; }

.bm-chat-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.bm-chat-toggle .icon { width: 26px; height: 26px; }

.bm-chat-panel {
  position: fixed;
  bottom: 88px;
  right: 20px;
  display: flex;
  flex-direction: column;
  width: 360px;
  max-width: calc(100vw - 40px);
  height: 480px;
  max-height: calc(100vh - 120px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.bm-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--accent-blue);
  color: #fff;
  font-weight: 600;
}

.bm-chat-header-sub { font-weight: 500; font-size: 12px; opacity: .8; }

.bm-chat-close {
  border: none;
  background: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.bm-chat-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow-y: auto;
}

.bm-chat-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.bm-chat-msg.user      { align-self: flex-end;   background: var(--accent-blue); color: #fff; }
.bm-chat-msg.assistant { align-self: flex-start; background: var(--surface-strong); }
.bm-chat-msg.error     { align-self: flex-start; background: var(--critical-bg); color: var(--critical); }

.bm-chat-msg p { margin: 0 0 8px; }
.bm-chat-msg p:last-child { margin-bottom: 0; }
.bm-chat-msg ol,
.bm-chat-msg ul { margin: 0 0 8px; padding-left: 20px; }
.bm-chat-msg li { margin-bottom: 4px; }
.bm-chat-msg li:last-child { margin-bottom: 0; }
.bm-chat-msg h1,
.bm-chat-msg h2,
.bm-chat-msg h3,
.bm-chat-msg h4,
.bm-chat-msg h5,
.bm-chat-msg h6 { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.bm-chat-msg code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface-strong);
  font-size: 13px;
}

.bm-chat-table-wrap { overflow-x: auto; margin: 0 0 8px; }
.bm-chat-table-wrap:last-child { margin-bottom: 0; }
.bm-chat-msg table { border-collapse: collapse; width: 100%; font-size: 13px; }
.bm-chat-msg th,
.bm-chat-msg td {
  padding: 4px 8px;
  border: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}
.bm-chat-msg th { background: var(--surface-soft); font-weight: 700; }

.bm-chat-ticket-card {
  align-self: stretch;
  padding: 10px 12px;
  border: 1px solid var(--accent-blue);
  border-radius: 10px;
  background: var(--surface-soft);
  font-size: 13px;
}

.bm-chat-ticket-title { font-weight: 600; margin-bottom: 4px; }
.bm-chat-ticket-note { color: var(--muted); }
.bm-chat-ticket-link { color: var(--accent-blue); text-decoration: underline; }

.bm-chat-typing { padding: 4px 16px; color: var(--muted); font-size: 12px; }

.bm-chat-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

.bm-chat-form input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: inherit;
}

/* Chromium computes an oversized flex-basis for the Send button here — it
   is itself a flex container (display: inline-flex from .button) with
   centered content, and that combination gets sized as if it should fill
   the row instead of shrinking to "Send", squeezing the input to a sliver.
   Pinning width: auto forces content-based sizing. */
.bm-chat-form .button {
  width: auto;
  flex: none;
}

/* ═══════════════════════════════════════════════════════
   BUTTON PENDING STATE (see app.js: submit-pending helper)
   ═══════════════════════════════════════════════════════ */

/* Applied to a submit button while its form is in flight. Before this, every
   form outside target_detail.html could be submitted repeatedly with no
   feedback — on a scan-start POST that meant real duplicated work.

   The spinner is a pseudo-element so no markup changes are needed, and the
   button keeps its original label (rather than swapping to "Saving…") so its
   width does not jump and reflow the row it sits in. */
.button.is-pending {
  position: relative;
  cursor: progress;
  pointer-events: none;   /* belt-and-braces; the handler also sets disabled */
  color: transparent !important;
}

.button.is-pending::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: button-spin .6s linear infinite;
}

/* Secondary/outline buttons draw the spinner in the text colour instead of
   white, since their background is not the accent fill. */
.button.secondary.is-pending::after,
.button.button-outline.is-pending::after,
.button.button-ghost.is-pending::after {
  border-color: var(--line);
  border-top-color: var(--text);
}

@keyframes button-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* Keep a static indicator rather than removing the affordance entirely —
     the point is to show the button is busy. */
  .button.is-pending::after { animation: none; opacity: .8; }
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════
   SKELETON LOADING PLACEHOLDERS
   ═══════════════════════════════════════════════════════ */

/* For content that arrives after first paint (a running scan's results, a
   list being refreshed). A skeleton holds the layout at roughly the size the
   real content will occupy, so the page does not jump when it lands — which
   is the actual purpose; a spinner alone still reflows on arrival.

   Usage: put .skeleton on a block and size it, or use one of the shape
   helpers. Always pair with aria-hidden on the placeholder and a polite live
   region for the real content, so a screen reader is not read a wall of
   decorative boxes. */
.skeleton {
  position: relative;
  border-radius: var(--radius);
  background: var(--surface-strong);
  overflow: hidden;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    var(--surface-soft),
    transparent
  );
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}

@keyframes skeleton-sweep {
  to { transform: translateX(100%); }
}

/* Shape helpers */
.skeleton-text {
  height: .8em;
  margin: .35em 0;
  border-radius: 4px;
}

.skeleton-text-sm   { width: 35%; }
.skeleton-text-md   { width: 60%; }
.skeleton-text-lg   { width: 85%; }

.skeleton-title {
  height: 1.4em;
  width: 45%;
  margin-bottom: .6em;
  border-radius: 4px;
}

.skeleton-circle {
  border-radius: 50%;
}

/* Composite: a placeholder that mirrors .stat-card's box so a loading KPI row
   keeps the same height and grid as the loaded one. */
.skeleton-stat-card {
  min-height: 118px;
  padding: 18px 20px;
}

/* Composite: mirrors .list-row. */
.skeleton-list-row {
  height: 62px;
  margin-bottom: 10px;
}

@media (prefers-reduced-motion: reduce) {
  /* Drop the sweep but keep the block visible — it is still communicating
     "content is loading here", which the shape alone conveys. */
  .skeleton::after { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   SPACING & DISPLAY UTILITIES
   ═══════════════════════════════════════════════════════ */

/* Replaces the most common inline style= attributes in the templates. There
   were 291 static inline declarations across 177 distinct values — mostly
   one-off margins written in a mix of px and rem — which put spacing decisions
   outside the design system entirely and made them impossible to adjust
   globally.

   These deliberately encode the EXACT values already in use rather than
   snapping them to a tidy scale: that keeps the migration provably
   zero-change (verified with scripts/css_snapshot.py). Normalising the odd
   values (0.4rem, 0.85rem …) is a design decision and is left for when the
   pages using them are next worked on.

   Scale, for new code: 4 / 8 / 12 / 16 / 20 / 24 / 32px. Prefer a component
   rule over a utility where the spacing belongs to the component. */

.u-m-0     { margin: 0; }
.u-mt-4    { margin-top: 4px; }
.u-mt-8    { margin-top: 8px; }
.u-mt-12   { margin-top: 12px; }
.u-mt-16   { margin-top: 16px; }
.u-mt-20   { margin-top: 20px; }
.u-mt-24   { margin-top: 24px; }
.u-mb-4    { margin-bottom: 4px; }
.u-mb-8    { margin-bottom: 8px; }
.u-mb-12   { margin-bottom: 12px; }
.u-mb-16   { margin-bottom: 16px; }
.u-mb-20   { margin-bottom: 20px; }
.u-mb-24   { margin-bottom: 24px; }
.u-mb-32   { margin-bottom: 32px; }
.u-my-0-16 { margin: 0 0 16px; }
.u-mx-auto { margin-left: auto; margin-right: auto; }

.u-hidden  { display: none; }
.u-block   { display: block; }
.u-inline-block { display: inline-block; }

.u-fs-12   { font-size: 12px; }
.u-fs-13   { font-size: 13px; }
.u-fs-14   { font-size: 14px; }
.u-fw-400  { font-weight: 400; }
.u-fw-600  { font-weight: 600; }
.u-muted   { color: var(--muted); }
.u-nowrap  { white-space: nowrap; }

/* ═══════════════════════════════════════════════════════
   LANDING — "WHAT ACTUALLY HAPPENS" SECTION
   ═══════════════════════════════════════════════════════ */

/* The plain-English explainer added below the hero. The site previously had no
   visible answer to "what is this?" — the clearest sentence about the product
   lived only in JSON-LD and og:description, i.e. was written for search engines
   and never shown to a visitor. See Docs/CONTENT_CLARITY_PLAN.md. */

.lp-plain-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.lp-plain-step {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

.lp-plain-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 0 12px;
  border-radius: 50%;
  background: var(--accent-strong);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.lp-plain-step h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.3;
}

.lp-plain-step p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

/* The worked example. Deliberately styled as a quieter card than the steps
   above it: it is illustration, not another step, and should not compete. */
.lp-plain-example {
  margin-top: 28px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.lp-plain-example-label {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.lp-plain-example-body {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.lp-plain-example-body h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-size: 17px;
  line-height: 1.3;
}

.lp-plain-example-body p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.lp-plain-example-body p:last-child { margin-bottom: 0; }

.lp-plain-example-body strong { color: var(--text); }

.lp-plain-example .text-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 14px;
}

@media (max-width: 900px) {
  .lp-plain-steps { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 640px) {
  /* The severity chip and the copy stop sitting side by side — at this width
     the chip squeezes the text into a very narrow column. */
  .lp-plain-example-body { flex-direction: column; gap: 12px; }
}

/* Technical package description, shown beneath the plain-English one on the
   scanners index. Quieter and smaller: it is the supporting detail for a reader
   who wants the specifics, not the primary explanation. */
.pkg-card-desc-technical {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12.5px;
  opacity: .85;
}

/* "What this means" — the plain-English consequence shown on each finding.
   Given a tinted panel so it reads as the explanation rather than more
   technical detail; see breakmesh/reports/impact.py for why it exists. */
.finding-impact {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

.finding-impact strong { color: var(--text); }