.session-warning[hidden] { display: none; }
.session-warning {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  padding: 1rem; background: rgba(15, 23, 42, .72);
}
.session-warning__panel {
  width: min(32rem, 100%); padding: 1.5rem; border-radius: .75rem;
  background: #fff; color: #172033; box-shadow: 0 1rem 3rem rgba(0,0,0,.3);
}
.session-warning__panel:focus { outline: 3px solid #2563eb; outline-offset: 3px; }
.session-warning__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.session-warning__actions button { min-height: 44px; padding: .65rem 1rem; }
@media (prefers-reduced-motion: reduce) {
  .session-warning, .session-warning * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
/* ----------------------------------------------------------------------
   Provantis — Boardroom Navy theme
   Ivory canvas · slate-900 ink · muted gold accent · serif headlines
   Sharp corners, hairline rules, generous whitespace (JSE-annual-report feel)
   ---------------------------------------------------------------------- */

/* Global: no italic anywhere on the platform */
em, i, cite, dfn, var, address, blockquote { font-style: normal !important; }
* { font-style: normal !important; }

:root {
  /* Canvas */
  --bg-app: #fdfbf7;          /* warm ivory page bg */
  --canvas: #fdfbf7;          /* alias of --bg-app — used by templates for light text/bg on ink */
  --bg-soft: #f8f5ee;         /* slightly darker ivory for inset blocks */
  --surface: #ffffff;         /* card surface */
  --surface-rule: #f1ece1;    /* warm hairline (used inside ivory areas) */

  /* Ink */
  --ink: #0f172a;             /* slate-900 — primary text */
  --ink-2: #1e293b;            /* slate-800 — strong body */
  --muted: #475569;            /* slate-600 */
  --muted-2: #64748b;          /* slate-500 */
  --muted-3: #94a3b8;          /* slate-400 */

  /* Hairlines */
  --line: #e2e8f0;             /* slate-200 — primary hairline */
  --line-strong: #cbd5e1;      /* slate-300 — emphasis hairline */

  /* Accent (used sparingly) */
  --gold: #b8902a;             /* muted antique gold */
  --gold-ink: #8a681a;         /* darker gold for text on light bg — 4.8:1 on ivory (WCAG AA) */
  --gold-2: #d4af37;           /* highlight gold */
  --gold-soft: #fbf6e7;        /* gold tint for callouts */

  /* Status (kept restrained) */
  --good: #15803d;
  --good-soft: #ecfdf3;
  --warn: #b45309;
  --warn-soft: #fef3c7;
  --bad: #b91c1c;
  --bad-soft: #fef2f2;

  /* Geometry — sharp corners, almost no radius */
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;

  /* Shadow — almost none, only the faintest paper drop */
  --shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
  --shadow-soft: 0 1px 0 rgba(15, 23, 42, 0.04);

  /* Type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Playfair Display", "Cormorant Garamond", "Georgia", "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
::selection { background: var(--gold-2); color: white; }

h1, h2, h3, h4, .serif {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1 { font-size: 2.4rem; line-height: 1.1; }
h2 { font-size: 1.65rem; line-height: 1.2; }
h3 { font-size: 1.2rem; line-height: 1.3; }

.container { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 720px; }

/* -------------------------------------------------------------------------
   Eyebrow (serif italic, replaces the old purple pill)
   ------------------------------------------------------------------------- */
.soft-tag,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-serif);
  font-style: normal;
  color: var(--muted);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

/* utility colours */
.muted   { color: var(--muted); }
.muted-2 { color: var(--muted-2); }
.gold    { color: var(--gold-ink); }

/* accessibility helpers */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 10px 16px;
  font-size: 0.9rem; text-decoration: none;
}
.skip-link:focus { left: 0; }
.serif-italic { font-family: var(--font-serif); font-style: normal; color: var(--muted); }

/* -------------------------------------------------------------------------
   Page titles & section heads
   ------------------------------------------------------------------------- */
.page-title {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 2.2rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.section-head h2,
.section-head h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* -------------------------------------------------------------------------
   Cards & surfaces — flat, hairline, no shadow
   ------------------------------------------------------------------------- */
.card,
.auth-card,
.price-card,
.page-hero,
.hero,
.table-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card,
.auth-card,
.table-card { padding: 28px; }

/* -------------------------------------------------------------------------
   Buttons — solid navy primary, ghost outline, gold accent
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 0;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: #000; border-color: #000; color: #fff; transform: none; }
.btn.ghost {
  background: #fff;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn.ghost:hover { background: var(--bg-soft); color: var(--ink); border-color: var(--ink); }
.btn.dark { background: var(--ink); color: #fff; }
.btn.gold {
  background: #fff;
  border-color: var(--gold);
  color: var(--gold-ink);
}
.btn.gold:hover { background: var(--gold-ink); color: #fff; }
.btn.small { padding: 9px 14px; font-size: 0.85rem; }
.btn.full-width { display: block; width: 100%; text-align: center; }
.btn.is-busy,
.btn[disabled] {
  background: #6b7280;
  border-color: #6b7280;
  color: #fff;
  cursor: progress;
  opacity: 0.85;
  pointer-events: none;
}
.btn.ghost.is-busy,
.btn.ghost[disabled] {
  background: var(--bg-soft);
  border-color: #6b7280;
  color: #6b7280;
}

/* -------------------------------------------------------------------------
   Badges — flat squared, restrained colour
   ------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
}
.badge.low,    .badge.good     { background: var(--good-soft); color: var(--good); border-color: #bbf7d0; }
.badge.medium, .badge.warn     { background: var(--warn-soft); color: var(--warn); border-color: #fde68a; }
.badge.high,   .badge.bad      { background: var(--bad-soft);  color: var(--bad);  border-color: #fecaca; }
.badge.critical                { background: #fee2e2;          color: #991b1b;     border-color: #fca5a5; }
.badge.neutral                 { background: var(--bg-soft);   color: var(--muted); border-color: var(--line); }
.badge.gold {
  background: var(--gold-soft);
  color: var(--gold-ink);
  border-color: #ecd6a0;
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   Layout grids
   ------------------------------------------------------------------------- */
.grid { display: grid; gap: 24px; }
.grid.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cta-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   Marketing shell — ivory canvas, hairline header bar (no rounded chrome)
   ------------------------------------------------------------------------- */
.marketing-shell { min-height: 100vh; background: var(--bg-app); padding: 0; }
.marketing-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fdfbf7;
  border-bottom: 1px solid var(--line);
}
.nav-row {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 28px;
  gap: 16px;
  max-width: 1320px;
  margin: 0 auto;
}
.logo {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.logo::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 16px;
  background: var(--gold-2);
}
.nav-row nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  color: var(--muted);
  font-size: 0.92rem;
}
.nav-row nav a { white-space: nowrap; }
@media (min-width: 821px) and (max-width: 1180px) {
  .nav-row nav { gap: 12px; font-size: 0.85rem; }
}
.nav-row nav a:not(.btn) { transition: color 0.15s ease; }
.nav-row nav a:not(.btn):hover { color: var(--ink); }

/* -------------------------------------------------------------------------
   Walkthrough link — top-right, just under the navigation
   ------------------------------------------------------------------------- */
.walkthrough-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  margin-bottom: -8px;
}
.walkthrough-bar-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: .82rem;
  letter-spacing: .03em;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 8px 15px;
  border-radius: 0;
  background: var(--surface);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.walkthrough-bar-link:hover {
  color: var(--gold);
  border-color: var(--gold-2);
}
.walkthrough-bar-link .wb-play {
  color: var(--gold);
  font-size: .72rem;
  line-height: 1;
}

/* -------------------------------------------------------------------------
   Marketing hero
   ------------------------------------------------------------------------- */
.hero {
  margin: 36px auto 0;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 0;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold-2);
}
.hero h1 {
  margin: 14px 0 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 3.4rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.hero h1 .accent { color: var(--gold-ink); font-style: normal; font-weight: 500; }
.lead {
  margin-top: 22px;
  max-width: 640px;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.75;
}
.hero-panel {
  padding: 26px;
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
}
.hero-panel-grid {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 0;
  padding: 18px;
}
.kpi-mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,0.08); }
.kpi-mini-grid div {
  background: var(--ink);
  color: #fff;
  border-radius: 0;
  padding: 16px;
}
.kpi-mini-grid strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.85rem;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.score-ring {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 500;
  border: 4px solid var(--gold-2);
  box-shadow: inset 0 0 0 1px var(--surface), 0 0 0 1px var(--line);
}

/* -------------------------------------------------------------------------
   Trust grid (4-up tiles on marketing pages)
   ------------------------------------------------------------------------- */
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 32px; border: 1px solid var(--line); background: var(--surface); }
.trust-grid .mini-card {
  border: none;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 22px;
  background: var(--surface);
}
.trust-grid .mini-card:last-child { border-right: none; }

/* -------------------------------------------------------------------------
   Marketing band & page-hero
   ------------------------------------------------------------------------- */
.marketing-band {
  background: var(--ink);
  color: #fff;
  border-radius: 0;
  margin-top: 0;
  padding: 28px 28px;
  border-bottom: 3px solid var(--gold-2);
}
.page-hero {
  margin: 36px 28px;
  padding: 36px 36px 30px;
  position: relative;
}
/* When .page-hero is combined with .container (most marketing pages and
   /sentinel), the hero must follow the same horizontal rails as sibling
   .container blocks (max-width 1320, margin: 0 auto). Without this override,
   .page-hero's literal "margin: 36px 28px" forces the hero to sit 28px from
   the viewport while sibling sections centre on wide screens — producing the
   misaligned hero/section edges visible on /features, /home etc. */
.container.page-hero {
  margin-left: auto;
  margin-right: auto;
}
/* Inside the in-app shell, .page-content already provides 32px horizontal
   padding. Without this override, .page-hero's literal 28px horizontal
   margin pushes the hero 28px inward of every sibling .card on the page —
   visible as a stair-step left edge on Human risk, Reputation, Vendor
   register etc. Strip the horizontal margin so heroes share the same
   vertical rail as cards. */
.page-content > .page-hero,
.page-content .page-hero {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 24px;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--gold-2);
}
.page-hero h1,
.page-hero h2 {
  margin: 8px 0 12px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 2.2rem;
  letter-spacing: -0.01em;
}
.page-hero p,
.page-hero .muted { margin: 0; color: var(--muted); line-height: 1.75; max-width: 820px; font-size: 0.98rem; }
.page-hero.center { text-align: center; }
.page-hero.center > * { margin-left: auto; margin-right: auto; }

/* -------------------------------------------------------------------------
   Pricing
   ------------------------------------------------------------------------- */
.pricing-strip { margin: 28px auto; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; border: 1px solid var(--line); }
.price-card {
  padding: 0;
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.price-card-head {
  background: var(--ink);
  color: var(--canvas);
  text-align: center;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.price-card-head .head-tag {
  display: block;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  margin-bottom: 3px;
  color: var(--gold-2);
}
.price-card.emphasis .price-card-head { background: var(--gold-2); color: var(--ink); }
.price-card.emphasis .price-card-head .head-tag { color: var(--ink); }
.price-card-body {
  padding: 22px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.price-card-body .btn { margin-top: auto; }
.price-card:last-child { border-right: none; }
.price-card.emphasis { background: var(--bg-soft); }
.price {
  margin: 14px 0;
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.price span { font-size: 0.95rem; color: var(--muted); font-weight: 400; font-family: var(--font-sans); }

/* -------------------------------------------------------------------------
   Features list
   ------------------------------------------------------------------------- */
.feature-grid { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0,1fr)); border: 1px solid var(--line); background: var(--surface); }
.feature-card {
  padding: 28px;
  border: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
}
.feature-card:nth-child(2n) { border-right: none; }
.feature-card:nth-last-child(-n+2) { border-bottom: none; }
.feature-card h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.005em;
}
.check-list { list-style: none; padding: 0; margin: 16px 0 0; }
.check-list li { padding-left: 22px; position: relative; margin: 10px 0; color: var(--muted); line-height: 1.6; }
.check-list li::before { content: '—'; position: absolute; left: 0; color: var(--gold); font-weight: 500; }

/* -------------------------------------------------------------------------
   Auth pages
   ------------------------------------------------------------------------- */
.auth-card { margin: 56px auto 0; padding: 36px; max-width: 460px; position: relative; }
.auth-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold-2);
}
.auth-card h2 { margin: 0 0 8px; font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.005em; }
.auth-card p { margin: 0 0 22px; color: var(--muted); line-height: 1.6; }
.form-grid { display: grid; gap: 14px; }
.form-grid.two-col { grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-grid .full { grid-column: 1 / -1; }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 11px 14px;
  outline: none;
  background: #fff;
  color: var(--ink);
  font-size: 0.95rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Checkboxes and radios must not inherit the full-width text-input styling
   above — otherwise they expand to 100% of the parent and push adjacent
   labels off the form. Restore native sizing. */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
.field-label {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 8px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-sans);
}
.muted-line { margin-top: 18px; color: var(--muted); font-size: 0.95rem; }

/* -------------------------------------------------------------------------
   Two-factor authentication (TOTP)
   ------------------------------------------------------------------------- */
.mfa-card { max-width: 560px; }
.mfa-card .mfa-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.mfa-form { gap: 18px; }
.auth-alert {
  border: 1px solid #b91c1c;
  border-left: 3px solid #b91c1c;
  background: #fdf2f2;
  color: #7f1d1d;
  padding: 10px 14px;
  font-size: 0.93rem;
  margin: 0 0 18px;
}
.otp-inputs {
  display: flex; gap: 10px; justify-content: space-between;
  margin: 4px 0 4px;
}
.otp-digit {
  flex: 1 1 0;
  min-width: 0;
  max-width: 64px;
  height: 60px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: #fff;
  padding: 0;
  letter-spacing: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.otp-digit:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}
.otp-digit.filled {
  border-color: var(--ink);
  background: #fdfbf7;
}

.mfa-setup .mfa-steps {
  margin: 4px 0 22px;
  padding-left: 22px;
  color: var(--ink-2);
  line-height: 1.65;
}
.mfa-setup .mfa-steps li { margin-bottom: 6px; }
.mfa-pairing {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
  margin: 8px 0 4px;
}
.mfa-qr-frame {
  border: 1px solid var(--line-strong);
  padding: 10px;
  background: #fff;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mfa-qr-frame img { display: block; width: 100%; height: 100%; }
.mfa-secret-block { display: flex; flex-direction: column; gap: 8px; }
.mfa-secret {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  background: #fdfbf7;
  border: 1px solid var(--line);
  padding: 10px 12px;
  word-break: break-all;
  color: var(--ink);
}
.mfa-help { color: var(--muted); font-size: 0.85rem; line-height: 1.55; margin: 0; }
.mfa-reset-form { margin-top: 4px; }
.link-button {
  background: none; border: 0; padding: 0;
  color: var(--gold-ink); font-size: 0.85rem;
  text-decoration: underline; cursor: pointer;
  font-family: var(--font-sans);
}
.link-button:hover { color: var(--ink); }
.mfa-divider { height: 1px; background: var(--line); margin: 26px 0; }
.mfa-subhead {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.15rem; margin: 0 0 8px; letter-spacing: -0.005em;
}
.mfa-status {
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  background: var(--gold-soft);
  padding: 14px 16px;
  margin: 0 0 4px;
}
.mfa-status p { margin: 8px 0 0; color: var(--ink-2); font-size: 0.92rem; }
.mfa-status-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 0.85rem; }
.mfa-pill {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
  padding: 3px 10px;
}

@media (max-width: 600px) {
  .mfa-pairing { grid-template-columns: 1fr; }
  .mfa-qr-frame { margin: 0 auto; }
  .otp-digit { height: 54px; font-size: 1.3rem; }
}

/* -------------------------------------------------------------------------
   App shell — light sidebar with hairline divider
   ------------------------------------------------------------------------- */
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
  background: var(--bg-app);
}
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  padding: 0;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidebar-top { display: flex; flex-direction: column; gap: 0; }
.sidebar-brand {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  padding: 26px 24px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
/* Make the wordmark itself the focal point of the sidebar header.
   The image is the brand — let it breathe. */
.sidebar-brand .brand-mark {
  height: 38px;
  width: auto;
  display: block;
}
/* Drop the gold tick on the in-app sidebar — the bigger logo is now the
   visual anchor, the tick competes with it. */
.sidebar-brand::before { content: none; }
.sidebar-company {
  color: var(--ink);
  font-size: 0.95rem;
  padding: 0 24px;
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}
.sidebar-top > div:first-child { text-align: center; }
.plan-badge {
  display: inline-flex;
  margin: 10px auto 18px;
  background: var(--gold-soft);
  color: var(--gold-ink);
  padding: 4px 8px;
  border: 1px solid #ecd6a0;
  border-radius: 0;
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.plan-badge--super {
  background: var(--ink, #0f172a);
  color: #e7c873;
  border-color: var(--gold, #b08d3f);
}
.super-admin-flag {
  color: var(--gold, #b08d3f);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.sidebar-cta {
  margin: 0 16px 18px;
  display: flex;
}
.sidebar-cta .btn { width: 100%; }
.sidebar-section-label {
  padding: 10px 22px 6px;
  font-family: var(--font-serif);
  font-style: normal;
  color: var(--muted-2);
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}
.sidebar-section-label:first-child { border-top: none; margin-top: 0; }

.sidebar-nav { display: flex; flex-direction: column; gap: 0; padding: 0 0 12px; }
.sidebar-nav a {
  color: var(--muted);
  padding: 10px 22px;
  border-left: 2px solid transparent;
  border-radius: 0;
  font-size: 0.92rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.sidebar-nav a:hover {
  background: var(--bg-soft);
  color: var(--ink);
}
.sidebar-nav a.active {
  background: var(--bg-soft);
  color: var(--ink);
  border-left-color: var(--gold-2);
  font-weight: 500;
}
.sidebar-footer-card {
  background: var(--bg-soft);
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
  padding: 18px 22px;
  margin: 0;
}
.sidebar-footer-card strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 4px;
}
.sidebar-footer-card p {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0 0 12px;
}
.sidebar-legal {
  color: var(--muted-2);
  font-size: 0.75rem;
  padding: 14px 22px;
  line-height: 1.6;
  border-top: 1px solid var(--line);
  font-family: var(--font-serif);
  font-style: normal;
}

/* -------------------------------------------------------------------------
   Topbar — white, hairline, no blur
   ------------------------------------------------------------------------- */
.main-panel { min-width: 0; background: var(--bg-app); }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  backdrop-filter: none;
  padding: 22px 32px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* -------------------------------------------------------------------------
   SENTINEL floating launcher — Variant C (Floating Orb).
   Persistent bottom-right launcher on all in-app pages. Navy panel with
   gold hairline border, gold gradient orb with serif "S", and a soft
   pulse ring. Anchored to the viewport so it stays put as users scroll.
   ------------------------------------------------------------------------- */
.sentinel-launcher {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 60;
  display: inline-flex;
  align-items: stretch;
  background: var(--ink);
  color: #ffffff;
  border: 1px solid var(--gold-2);
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  line-height: 1.15;
  box-shadow: 0 12px 32px -8px rgba(15, 28, 46, 0.45);
  transition: box-shadow .15s ease, transform .15s ease, background-color .15s ease;
}
.sentinel-launcher:hover {
  background: #1d2a44;
  box-shadow: 0 16px 40px -8px rgba(15, 28, 46, 0.55);
  transform: translateY(-1px);
}
.sentinel-launcher-orb {
  position: relative;
  width: 40px;
  height: 40px;
  margin: 10px 0 10px 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.sentinel-launcher-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.4;
  animation: sentinel-launcher-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes sentinel-launcher-ping {
  0%   { transform: scale(1);    opacity: 0.45; }
  75%, 100% { transform: scale(1.7); opacity: 0; }
}
.sentinel-launcher-mark {
  position: relative;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
}
.sentinel-launcher-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px 20px 12px 14px;
}
.sentinel-launcher-brand {
  font-size: .78rem;
  letter-spacing: .14em;
  font-weight: 500;
  color: var(--gold);
  text-transform: uppercase;
}
.sentinel-launcher-sub {
  margin-top: 3px;
  font-size: .82rem;
  color: rgba(255, 255, 255, 0.85);
}
@media (max-width: 768px) {
  .sentinel-launcher { right: 16px; bottom: 16px; }
  .sentinel-launcher-text { display: none; }
  .sentinel-launcher-orb { margin: 8px 10px; }
}
.sentinel-launcher:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  box-shadow: 0 16px 40px -8px rgba(15, 28, 46, 0.55);
}
@media print {
  .sentinel-launcher { display: none !important; }
}
/* Bottom padding reserves space for the fixed SENTINEL launcher so it
   never occludes last-row CTAs / table controls on long pages. */
.page-content { padding: 32px 32px 120px; max-width: 1480px; }
@media (max-width: 768px) {
  .page-content { padding-bottom: 88px; }
}

/* -------------------------------------------------------------------------
   Executive cockpit — main dashboard 2-col layout (main + 340px right rail)
   Stacks on viewports < 1200px so the rail flows below the main column.
   ------------------------------------------------------------------------- */
.dashboard-cockpit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px;
  align-items: start;
}
.dashboard-cockpit-main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.dashboard-cockpit-main > * { margin: 0 !important; }
/* -------------------------------------------------------------------------
   Score hero (Dashboard)
   ------------------------------------------------------------------------- */
.score-hero {
  background: var(--surface);
  position: relative;
}
.score-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold-2);
}

/* -------------------------------------------------------------------------
   KPI grid — 4-up tiles, hairline dividers, big serif numbers
   ------------------------------------------------------------------------- */
.kpi-grid { display: grid; gap: 0; margin-top: 22px; border: 1px solid var(--line); background: var(--surface); }
.kpi-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-grid > div {
  background: var(--surface);
  border: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 22px 24px;
}
.kpi-grid > div:last-child { border-right: none; }
.kpi-grid.four > div:nth-child(4n) { border-right: none; }
.kpi-grid > div:nth-last-child(-n+4) { border-bottom: none; }
.kpi-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-family: var(--font-serif);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-style: normal;
}
.kpi-grid strong {
  display: block;
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.score-note {
  margin-top: 8px;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.score-note.good { color: var(--good); }
.score-note.warn { color: var(--warn); }
.score-note.bad  { color: var(--bad); }

.score-large {
  font-family: var(--font-serif);
  font-size: 4.2rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 14px;
  color: var(--ink);
  line-height: 1;
}
/* Breathing room above the priority-weights caption inside the score hero
   only — scoped so other .score-large usages (scan view, marketing, etc.)
   keep their existing tight stacking. */
.score-hero .score-large { margin-bottom: 18px; }

/* Inside the 4-up KPI strip the 4.2rem default is too large — long values
   like "Emerging" overflow the cell and the strip looks unprofessional.
   Scope a tighter, executive-grade size here without changing the
   score-hero usage. */
.kpi-grid .score-large,
.metric-box .score-large {
  font-size: 2rem;
  line-height: 1.1;
  margin-top: 8px;
  margin-bottom: 8px;
}
.kpi-grid .muted-2,
.metric-box .muted-2 {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}
.kpi-grid .muted,
.metric-box .muted {
  font-size: .8rem;
  line-height: 1.45;
}

/* Audit / cyber-audit "Score by category" matrix — fixed 6-column grid so
   Pass / Partial / Fail / N/A / Score line up across rows. */
.score-table .table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  gap: 16px;
  align-items: center;
  text-align: left;
}
.score-table .table-row > div { text-align: left; }
.score-table .table-row.table-head {
  background: var(--bg-soft);
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* -------------------------------------------------------------------------
   Tables / lists
   ------------------------------------------------------------------------- */
.table-like { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); }
.table-row,
.list-row,
.finding-card {
  border: none;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface);
}
.table-row:last-child,
.list-row:last-child { border-bottom: none; }
.table-row,
.list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
}
.table-row:hover,
.list-row:hover { background: var(--bg-soft); }
.list-row > div,
.table-row > div { display: flex; flex-direction: column; gap: 4px; }
.list-row strong,
.table-row strong { color: var(--ink); font-weight: 500; }
.list-row span,
.table-row span { color: var(--muted); font-size: 0.85rem; }

.benchmark-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.benchmark-row:last-child { border-bottom: none; }
.benchmark-row > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.benchmark-bars { display: flex; align-items: center; gap: 12px; min-width: 200px; }
.bar { width: 160px; height: 6px; background: var(--bg-soft); border-radius: 0; overflow: hidden; border: 1px solid var(--line); }
.bar span { display: block; height: 100%; background: var(--ink); border-radius: 0; }

/* -------------------------------------------------------------------------
   Boardroom pillars — 4-up roman-numeral feature strip (dashboard foot)
   ------------------------------------------------------------------------- */
.boardroom-pillars {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
}
.boardroom-pillar {
  position: relative;
  padding: 22px 24px 24px;
  border-right: 1px solid var(--line);
}
.boardroom-pillar:last-child { border-right: none; }
.boardroom-pillar::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--gold);
}
.bp-roman {
  font-family: var(--font-serif);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: .04em;
  margin-bottom: 14px;
}
.bp-eyebrow {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.bp-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 8px;
}
.bp-body {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Table grid (rich tables in scans/reports lists)
   ------------------------------------------------------------------------- */
.table-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.table-grid thead th {
  text-align: left;
  color: var(--muted);
  font-size: 0.7rem;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  background: var(--bg-soft);
}
.table-grid tbody td {
  padding: 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--ink);
  font-size: 0.93rem;
}
.table-grid tbody tr:hover { background: var(--bg-soft); }
.table-grid tbody tr:last-child td { border-bottom: none; }

.table-card { padding: 0; }
.table-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 28px;
  border-bottom: 1px solid var(--line);
}
.table-card-head h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: -0.005em;
}
.table-toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar-chip {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 0;
  padding: 8px 12px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

/* -------------------------------------------------------------------------
   Findings details
   ------------------------------------------------------------------------- */
.finding-card {
  padding: 22px 24px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.finding-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.finding-card strong {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
}
.finding-card p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.75;
  font-size: 0.94rem;
}

/* -------------------------------------------------------------------------
   Compact metric grid (scan view)
   ------------------------------------------------------------------------- */
.metric-grid-compact {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0,1fr));
  border: 1px solid var(--line);
  margin-top: 22px;
}
.metric-box {
  border: none;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 18px 20px;
  background: var(--surface);
}
.metric-grid-compact > .metric-box:nth-child(3n) { border-right: none; }
.metric-grid-compact > .metric-box:nth-last-child(-n+3) { border-bottom: none; }
.metric-box span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-family: var(--font-serif);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.metric-box strong {
  display: block;
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* -------------------------------------------------------------------------
   Reports
   ------------------------------------------------------------------------- */
.report-cards { display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0,1fr)); border: 1px solid var(--line); }
.report-card {
  border: none;
  border-right: 1px solid var(--line);
  border-radius: 0;
  padding: 22px;
  background: var(--surface);
}
.report-card:last-child { border-right: none; }
.report-cover {
  min-height: 170px;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(0,0,0,0.18) 100%),
    var(--ink);
  margin-bottom: 16px;
  position: relative;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #f5efe1;
  overflow: hidden;
}
.report-cover::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold-2);
}
.report-cover::before {
  content: "";
  position: absolute;
  right: -40px; bottom: -40px;
  width: 140px; height: 140px;
  border: 1px solid rgba(212,175,55,0.18);
  border-radius: 50%;
  pointer-events: none;
}
.report-cover-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: 6px;
}
.report-cover-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.25;
  color: #fbf7eb;
  max-width: 90%;
}
.report-cover-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.report-cover-url {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: rgba(245,239,225,0.78);
  word-break: break-all;
}
.report-cover-score {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  line-height: 1;
  padding: 6px 10px;
  border: 1px solid rgba(212,175,55,0.45);
  background: rgba(0,0,0,0.22);
  white-space: nowrap;
}
.report-cover-score--strong { color: #d6f3da; border-color: rgba(120,200,140,0.55); }
.report-cover-score--fair   { color: #fbe6b2; border-color: rgba(212,175,55,0.55); }
.report-cover-score--weak   { color: #f7c9c9; border-color: rgba(220,120,120,0.55); }
.report-cover-score-suffix {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(245,239,225,0.6);
  margin-left: 2px;
}
.report-cover-foot {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(245,239,225,0.55);
  margin-top: 14px;
}
.report-actions { display: flex; gap: 10px; margin-top: 16px; }

/* MFA status badge in topbar (replaces the "2FA on" button styling) */
.mfa-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 0;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mfa-badge:hover { border-color: var(--gold-2); background: rgba(212,175,55,0.04); }
.mfa-badge-dot {
  width: 7px; height: 7px;
  background: #2f9e60;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(47,158,96,0.18);
}
.mfa-badge--on { color: var(--ink); }

/* MFA recovery codes panel — shown once at enrolment or regeneration. */
.recovery-panel {
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-2);
  background: #fbfaf4;
  padding: 18px 20px 16px;
  margin: 8px 0 4px;
}
.recovery-panel--fresh {
  background: linear-gradient(180deg, #fbf6e5 0%, #fbfaf4 100%);
}
.recovery-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.recovery-panel-flag {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #7a5a00;
  background: rgba(212,175,55,0.18);
  border: 1px solid rgba(212,175,55,0.45);
  padding: 3px 8px;
  white-space: nowrap;
}
.recovery-codes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px 24px;
  margin: 12px 0 0;
  padding: 0 0 0 22px;
  list-style: decimal;
}
.recovery-codes li { font-family: 'Inter', sans-serif; padding: 2px 0; }
.recovery-codes code {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  background: #fff;
  border: 1px solid var(--line);
  padding: 3px 8px;
  user-select: all;
}
@media (max-width: 640px) {
  .recovery-codes { grid-template-columns: 1fr; }
}

/* Sidebar tagline removed — the logo PNG already carries the tagline. */

/* -------------------------------------------------------------------------
   Footer strip
   ------------------------------------------------------------------------- */
.footer-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 0;
  border-radius: 0;
  background: var(--ink);
  color: #fff;
  padding: 0;
  border-top: 3px solid var(--gold-2);
}
.footer-strip .item {
  display: flex;
  gap: 14px;
  padding: 22px 22px;
  border-right: 1px solid rgba(255,255,255,0.08);
  align-items: flex-start;
}
.footer-strip .item:last-child { border-right: none; }
.footer-strip .item strong { font-family: var(--font-serif); font-weight: 500; color: #fff; }
.footer-strip .item .muted { color: rgba(255,255,255,0.6); font-size: 0.85rem; }
.footer-strip .icon {
  width: 36px;
  height: 36px;
  border-radius: 0;
  border: 1px solid rgba(255,255,255,0.16);
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Utility / scroll
   ------------------------------------------------------------------------- */
.compact-scroll { max-height: 520px; overflow: auto; padding-right: 8px; }
.notice-card {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--gold-2);
  background: var(--bg-soft);
  border-radius: 0;
  padding: 18px 20px;
  color: var(--muted);
  font-family: var(--font-serif);
  font-style: normal;
  line-height: 1.7;
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .pricing-strip,
  .footer-strip,
  .report-cards,
  .trust-grid,
  .boardroom-pillars,
  .kpi-grid.four,
  .metric-grid-compact { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .kpi-grid.four > div { border-right: 1px solid var(--line); }
  .kpi-grid.four > div:nth-child(2n) { border-right: none; }
  .boardroom-pillar:nth-child(2n),
  .trust-grid .mini-card:nth-child(2n) { border-right: none; }
  .feature-card:nth-child(2n) { border-right: none; }
  .hero { grid-template-columns: 1fr; padding: 36px; }
  .hero h1 { font-size: 2.6rem; }
}
@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--line); }
  .grid.two,
  .grid.three,
  .feature-grid { grid-template-columns: 1fr; }
  .form-grid.two-col { grid-template-columns: 1fr; }
  .pricing-strip { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
  .container { padding: 0 16px; }
  .marketing-shell { padding: 0; }
  .hero,
  .page-hero,
  .card,
  .auth-card,
  .table-card { padding: 22px; }
  .hero h1 { font-size: 2.2rem; }
  .nav-row { align-items: flex-start; }
  .nav-row nav { gap: 12px; }
  .trust-grid,
  .boardroom-pillars,
  .report-cards,
  .footer-strip,
  .metric-grid-compact,
  .kpi-grid.four { grid-template-columns: 1fr; }
  .kpi-grid.four > div { border-right: none; }
  .boardroom-pillar,
  .trust-grid .mini-card,
  .feature-card { border-right: none; }
}

/* ── Knowledge base + audit checklist ────────────────────────────────────── */
.kb-grid { display: grid; gap: 16px; }
.kb-tile { display:block; text-decoration:none; color:inherit; transition:border-color .2s; }
.kb-tile:hover { border-color: var(--accent); }
/* Stand-alone kb-tile (used inside boardroom-card signal breakdowns where
   each tile is a sub-panel, not its own .card). Adds the hairline border,
   surface fill and padding so tiles read as discrete cells instead of
   bleeding into the next. When .card is already applied (resources hub,
   marketing tiles) those declarations take precedence and we don't
   double-pad. */
.kb-tile:not(.card) {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 18px 20px;
  border-radius: var(--radius-lg);
}
.kb-tile:not(.card) .bc-eyebrow { margin-bottom: 8px; }
.kb-tile:not(.card) p { margin: 4px 0; }
.kb-tile:not(.card) p:first-of-type { margin-top: 0; }
.kb-tile h2 { margin: .5rem 0 .75rem; font-family: var(--font-serif); font-weight:500; }
.kb-tile-foot { margin-top: 1.25rem; color: var(--accent); font-weight: 500; letter-spacing:.02em; }

.regulator-card { margin-bottom: 1.5rem; }
.regulator-card-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:1rem; }
.regulator-card-head h2 { margin: .25rem 0 0; font-family: var(--font-serif); font-weight:500; }
.regulator-card-meta { display:flex; gap:.4rem; flex-wrap:wrap; }

.kb-deflist { display:grid; grid-template-columns: 180px 1fr; gap:.5rem 1.25rem; margin: 1rem 0 0; }
.kb-deflist dt { font-weight: 500; color: var(--ink); }
.kb-deflist dd { margin:0; color: var(--ink); }
@media (max-width: 720px) { .kb-deflist { grid-template-columns: 1fr; } .kb-deflist dt { color: var(--muted); font-size:.85rem; } }

.kb-list { margin: .5rem 0 0; padding-left: 1.25rem; }
.kb-list li { margin-bottom: .4rem; }
.kb-numbered { margin: .5rem 0 0; padding-left: 1.5rem; }
.kb-numbered li { margin-bottom: .5rem; }

.kb-table .table-row { display: grid; grid-template-columns: 140px 1fr 220px; align-items:flex-start; justify-content: stretch; gap: 24px; }
.kb-table.kb-table--two .table-row { grid-template-columns: 140px 1fr; }
.kb-table .table-row > div { text-align: left; }
.kb-table .table-row.table-head > div { text-align: left; }
.kb-table .table-row.table-head { background: var(--bg-soft); font-weight: 500; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color: var(--muted); }

.kb-form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.kb-form-actions.full { width: 100%; }

/* Stacked multi-card forms — used by Edit reputation signals and similar
   pages where each section is its own boardroom-card. Mirrors the
   `.dashboard-cockpit-main` flex+gap pattern so cards breathe consistently
   without each card needing its own margin-bottom. */
.stacked-form { display: flex; flex-direction: column; gap: 20px; }
.stacked-form > .card { margin: 0; }
.reputation-edit-form { display: flex; flex-direction: column; gap: 20px; }
.reputation-edit-form > .card { margin: 0; }
.reputation-edit-form .bc-head { margin-bottom: 18px; }
.reputation-edit-form .bc-lede { margin-top: 8px; }

.autosave-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .02em;
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
}
.autosave-status::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--muted);
  border-radius: 50%;
}
.autosave-status--idle::before { background: #9ca3af; }
.autosave-status--dirty { color: #92400e; border-color: #fcd34d; background: #fffbeb; }
.autosave-status--dirty::before { background: #d97706; }
.autosave-status--saving { color: #1e3a8a; border-color: #bfdbfe; background: #eff6ff; }
.autosave-status--saving::before { background: #2563eb; animation: autosave-pulse 1s ease-in-out infinite; }
.autosave-status--saved { color: #065f46; border-color: #a7f3d0; background: #ecfdf5; }
.autosave-status--saved::before { background: #059669; }
.autosave-status--error { color: #991b1b; border-color: #fecaca; background: #fef2f2; }
.autosave-status--error::before { background: #dc2626; }
@keyframes autosave-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.kb-matrix .table-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; align-items:center; justify-content: stretch; gap: 16px; }
.kb-matrix .table-row > div { text-align: center; align-items: center; font-variant-numeric: tabular-nums; }
.kb-matrix .table-row > div:first-child { text-align: left; align-items: flex-start; }
.kb-matrix .table-row > div:last-child { font-weight: 500; }
.kb-matrix .table-row.table-head { background: var(--bg-soft); font-weight: 500; font-size:.85rem; letter-spacing:.04em; text-transform:uppercase; color: var(--muted); }
.kb-matrix .table-totals { border-top: 1px solid var(--ink); background: var(--bg-soft); }

.kb-cat-tile { display:block; text-decoration:none; color:inherit; transition:border-color .2s; }
.kb-cat-tile:hover { border-color: var(--accent); }
.kb-cat-tile h3 { margin: .5rem 0 .75rem; font-family: var(--font-serif); font-weight:500; }
.kb-cat-foot { margin-top: 1rem; display:flex; gap:.4rem; flex-wrap:wrap; }

.rule-row { margin-bottom: 1rem; }
.rule-row-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom: .5rem; }
.rule-row-head h3 { font-family: var(--font-serif); font-weight:500; font-size:1.15rem; margin:0; }

/* Audit checklist ──────────────────────────────────────────────────────── */
/* Vendor register --------------------------------------------------------- */
.vendor-head-actions { margin-top: 14px; }
.vendor-explainer .vendor-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0;
  margin-top: 18px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.vendor-pillar {
  padding: 18px 20px;
  border-right: 1px solid var(--line);
}
.vendor-pillar:last-child { border-right: none; }
.vp-eyebrow {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: .92rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.vp-body { font-size: .85rem; color: var(--muted); line-height: 1.45; margin: 0; }

.vendor-howto .vendor-steps {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0;
  border: 1px solid var(--line);
}
.vendor-steps li {
  display: flex; gap: 14px; padding: 18px 20px;
  border-right: 1px solid var(--line);
}
.vendor-steps li:last-child { border-right: none; }
.vendor-steps strong { font-family: var(--font-serif); font-weight: 500; font-size: 1rem; color: var(--ink); display: block; margin-bottom: 4px; }
.vendor-steps p { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.5; }
.vs-num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.1rem;
}

.vendor-concentration-list { margin: 14px 0 0; padding-left: 1.2rem; color: var(--ink); }
.vendor-concentration-list li { margin-bottom: 4px; }

.vendor-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.vendor-row strong { font-family: var(--font-serif); font-weight: 500; font-size: 1.05rem; color: var(--ink); display: block; margin-bottom: 4px; }
.vendor-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .85rem; }
.vendor-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .vendor-explainer .vendor-pillars { grid-template-columns: repeat(2, 1fr); }
  .vendor-pillar:nth-child(2n) { border-right: none; }
  .vendor-pillar:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .vendor-howto .vendor-steps { grid-template-columns: 1fr; }
  .vendor-steps li { border-right: none; border-bottom: 1px solid var(--line); }
  .vendor-steps li:last-child { border-bottom: none; }
}

/* Findings page filter row ------------------------------------------------ */
.findings-filter-row {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 16px 0 18px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.findings-filter-field { display: flex; flex-direction: column; gap: 4px; }
.findings-filter-grow { flex: 1; min-width: 220px; }
.findings-filter-label {
  font-size: .72rem; color: var(--muted);
  letter-spacing: .04em; text-transform: uppercase;
}
.findings-filter-row input,
.findings-filter-row select {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--line); background: var(--bg);
  font-size: .9rem;
}
.findings-filter-actions { display: flex; gap: 8px; align-items: center; }
.findings-evidence { font-size: .78rem; margin-top: 4px; max-width: 520px; }
.findings-section-ref { font-size: .74rem; }
.findings-actions-cell { white-space: nowrap; }
.findings-empty { padding: 36px; text-align: center; }
.apex-inline-form { display: inline; }

/* Audit / cyber-audit "take assessment" page head ------------------------- */
.audit-page-head {
  position: relative;
  padding: 24px 28px 22px;
  margin-bottom: 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
}
.audit-page-head--inprogress { border-left-color: var(--warn); }
.audit-page-head .bc-eyebrow { margin-bottom: 10px; }
.audit-page-title {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.15;
}
.audit-page-meta { color: var(--muted); margin: 0 0 12px; font-size: .92rem; }
.audit-page-meta strong { color: var(--ink); font-weight: 500; }

.audit-rule { padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
.audit-rule:last-child { border-bottom: 0; }
.audit-rule-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:.5rem; }
.audit-rule-head h4 { font-family: var(--font-serif); font-weight: 500; font-size:1.18rem; color: var(--ink); margin:0; line-height:1.3; }
.audit-rule-meta { display:flex; gap:.5rem; align-items:center; }
.audit-status-row { display:flex; gap:.5rem; flex-wrap:wrap; margin: .75rem 0 .5rem; }
.audit-status-row label { display:inline-flex; align-items:center; gap:.4rem; padding: .35rem .7rem; border:1px solid var(--line); cursor:pointer; font-size:.9rem; }
.audit-status-row label:hover { border-color: var(--accent); }
.audit-status-row input[type="radio"] { accent-color: var(--accent); }
.audit-evidence textarea { width:100%; min-height: 60px; padding:.5rem .75rem; border:1px solid var(--line); font-family: inherit; font-size:.9rem; resize: vertical; }
.audit-cat-block { margin-bottom: 24px; }

.audit-summary-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:1rem; margin-bottom:2rem; }
.audit-summary-grid .metric-box { padding:1.25rem; }

/* ── Knowledge base + audit utility classes (no inline styles) ─────────── */
.kb-mt-xs { margin-top: .25rem; }
.kb-mt-sm { margin-top: .5rem; }
.kb-mt    { margin-top: 1rem; }
.kb-mt-md { margin-top: 1.25rem; }
.kb-mt-lg { margin-top: 2rem; }
.kb-mt-xl { margin-top: 2.5rem; }
.kb-mb    { margin-bottom: 1rem; }
.kb-mb-lg { margin-bottom: 1.5rem; }
.kb-mb-xl { margin-bottom: 2rem; }

.kb-row-split { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.kb-row-center { display:flex; align-items:center; gap:1rem; }
.kb-row-actions { display:flex; gap:.5rem; }
.kb-grid-2 { grid-template-columns: 1fr 1fr; }
.kb-center { text-align: center; }

.kb-page-actions { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom: 1.5rem; }
.kb-page-actions h1 { margin: .25rem 0 .5rem; }

/* ----------------------------------------------------------------------
   Boardroom Card — unified card grammar across the platform.
   Apply `.boardroom-card` on top of any `.card` to get the gold-left-border
   treatment, then use the bc-* children for head/eyebrow/title/body/evidence/
   meta/actions. Variants: --empty (muted accent), --inprogress (amber accent).
   ---------------------------------------------------------------------- */
.boardroom-card { border-left: 3px solid var(--gold); }
.boardroom-card--empty     { border-left-color: var(--muted); }
.boardroom-card--inprogress { border-left-color: #b45309; }
.boardroom-card--accent     { border-left-color: var(--gold); }
.boardroom-card--accent .bc-eyebrow { color: var(--gold-deep, #8a6d1d); }
.boardroom-card--metric {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.boardroom-card--metric > :first-child { flex: 1; }
.bc-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 14px;
}
.bc-head > :first-child { flex: 1; min-width: 0; }
.bc-eyebrow {
  display: block;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-ink); font-weight: 500; margin: 0 0 8px;
}
.boardroom-card--empty .bc-eyebrow     { color: var(--muted); }
.boardroom-card--inprogress .bc-eyebrow { color: #b45309; }
.bc-title {
  font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.25;
  font-weight: 500; margin: 0; color: var(--ink);
}
.bc-title-sm { font-size: 1.15rem; }
.bc-citation, .bc-lede {
  font-size: 0.92rem; color: var(--muted); margin: 6px 0 0;
}
.bc-body { margin: 0 0 16px; }
.bc-body p {
  font-size: 0.95rem; line-height: 1.65; color: var(--ink); margin: 0 0 10px;
}
.bc-body p:last-child { margin-bottom: 0; }
.bc-evidence {
  background: #fafaf6; border: 1px solid var(--line);
  border-left: 2px solid var(--muted); padding: 14px 16px; margin-bottom: 16px;
}
.bc-evidence-label {
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted); font-weight: 500; margin-bottom: 6px;
}
.bc-evidence p {
  font-size: 0.85rem; line-height: 1.55; color: var(--ink); margin: 0;
}
.bc-meta {
  font-size: 0.78rem; color: var(--muted);
  display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px;
}
.bc-meta a { color: var(--muted); text-decoration: underline; }
.bc-actions {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding-top: 4px;
}
.bc-actions--tight { gap: 8px; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--hairline, rgba(0,0,0,.08)); }
.bc-actions--tight .btn.small { font-size: 0.78rem; padding: 6px 10px; }

/* Document Scan — in-progress status panel + button spinner ---------------- */
.ds-btn-spinner {
  display: none;
  width: 14px; height: 14px; margin-left: 10px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ds-spin 0.8s linear infinite;
  vertical-align: middle;
}
.btn.is-busy { cursor: progress; opacity: 0.9; }
.btn.is-busy .ds-btn-spinner { display: inline-block; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

.ds-status {
  display: flex; align-items: flex-start; gap: 16px;
  margin-top: 20px; padding: 18px 20px;
  background: rgba(190, 156, 80, 0.06);
  border: 1px solid var(--hairline, rgba(0,0,0,.08));
  border-left: 3px solid var(--gold);
}
.ds-status[hidden] { display: none; }
.ds-status-dot {
  flex: 0 0 auto; width: 12px; height: 12px; margin-top: 6px;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(190, 156, 80, 0.6);
  animation: ds-pulse 1.6s ease-out infinite;
}
.ds-status-body { flex: 1; }
.ds-status-body .bc-title { margin: 4px 0 6px; }
.ds-status-body .bc-lede  { margin: 0 0 8px; }
.ds-status-body .muted    { margin: 0; font-size: 0.82rem; }
@keyframes ds-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(190, 156, 80, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(190, 156, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(190, 156, 80, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ds-btn-spinner, .ds-status-dot { animation: none; }
}
.bc-sentinel-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; border: 1px solid var(--ink);
  padding: 10px 16px; font-family: inherit; font-size: 0.85rem;
  font-weight: 500; letter-spacing: 0.02em; cursor: pointer; text-decoration: none;
}
.bc-sentinel-btn:hover { background: #1e293b; color: #fff; }
.bc-sentinel-btn:focus-visible,
.bc-related-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.bc-sentinel-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: #fff; font-size: 12px; line-height: 1; flex-shrink: 0;
}
.bc-related-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--gold); padding: 2px 0; font-weight: 500;
}
.bc-related-link:hover { color: var(--gold); }
.bc-score-block { text-align: right; flex-shrink: 0; }
.bc-score-label {
  font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
}
.bc-score-value {
  font-family: var(--font-serif); font-size: 2rem; line-height: 1; color: var(--ink);
}

/* Findings section header on scans/view.html */
.findings-section { margin-top: 24px; }
.findings-section-head {
  font-family: var(--font-serif); font-size: 1.5rem; font-weight: 500;
  color: var(--ink); margin: 0 0 18px; padding: 0; border: none;
}

/* Audit checklist finalise row */
.audit-finalise-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; }

/* Boardroom: priority pill (uniform, not per-priority colour) */
.badge.priority { background: var(--bg-soft); color: var(--ink); border-color: var(--line); font-variant-caps: all-small-caps; letter-spacing:.05em; font-weight: 500; }

/* Audit status pill — gold accent for completed, neutral for in-progress */
.badge.complete { background: var(--bg-soft); color: var(--ink); border-color: var(--accent); }
.audit-evidence-required { margin: .5rem 0; }

/* ----------------------------------------------------------------------
   Wave 0b — Defensive disclaimer architecture
   Layer 1: global footer | Layer 2a: inline scan disclaimer | Layer 2b: results disclaimer
   ---------------------------------------------------------------------- */

.apex-footer { margin-top: 48px; padding: 36px 0 22px; background: var(--bg-soft, #f7f3eb); border-top: 1px solid var(--line, #e2e8f0); }
.apex-footer-rule { width: 36px; height: 2px; background: var(--accent, #d4af37); margin: 0 0 22px; }
.apex-footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line, #e2e8f0); }
.apex-footer-col-head { font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--ink, #0f172a); margin-bottom: 12px; }
.apex-footer-col a { display: block; color: var(--muted, #475569); font-family: 'Inter', sans-serif; font-size: .84rem; text-decoration: none; padding: 4px 0; transition: color .15s; }
.apex-footer-col a:hover { color: var(--gold, #b8902a); }
.apex-footer-entity { color: var(--muted, #475569); font-family: 'Inter', sans-serif; font-size: .8rem; line-height: 1.65; margin: 0; }
@media (max-width: 900px) { .apex-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (max-width: 520px) { .apex-footer-cols { grid-template-columns: 1fr; gap: 20px; } }
.apex-footer-legal { color: var(--muted, #64748b); font-size: .78rem; line-height: 1.55; max-width: 920px; margin: 0 0 10px; font-family: 'Inter', sans-serif; }
.apex-footer-legal strong { color: var(--ink, #0f172a); font-weight: 500; }
.apex-footer-meta { color: var(--muted, #64748b); font-size: .76rem; letter-spacing: .02em; font-family: 'Inter', sans-serif; }
.apex-footer-meta a { color: var(--ink, #0f172a); text-decoration: none; border-bottom: 1px solid var(--line, #e2e8f0); padding-bottom: 1px; }
.apex-footer-meta a:hover { border-bottom-color: var(--accent, #d4af37); }
.apex-footer-sep { margin: 0 8px; opacity: .6; }

.apex-scan-disclaimer { margin: 10px 0 0; font-size: .72rem; color: var(--muted, #64748b); font-family: 'Inter', sans-serif; line-height: 1.4; font-style: normal; }

.apex-results-disclaimer { margin: 0 0 22px; padding: 18px 22px; background: #fdfaf2; border: 1px solid var(--line, #e2e8f0); border-left: 2px solid var(--accent, #d4af37); }
.apex-results-disclaimer-eyebrow { font-family: var(--font-serif); font-style: normal; color: var(--ink, #0f172a); font-size: 1.05rem; font-weight: 500; margin-bottom: 10px; }
.apex-results-disclaimer p { margin: 0 0 10px; font-size: .98rem; line-height: 1.65; color: var(--ink, #0f172a); font-family: 'Inter', sans-serif; }
.apex-results-disclaimer p:last-child { margin-bottom: 0; }
.apex-results-disclaimer strong { color: var(--ink, #0f172a); font-weight: 500; }

/* -------------------------------------------------------------------------
   Brand mark — marketing topbar keeps the original Provantis logo PNG
   (with its baked-in tagline). The in-app sidebar uses the clean HTML/CSS
   wordmark below so the sidebar reads sharp at any size.
   ------------------------------------------------------------------------- */
.logo::before,
.sidebar-brand::before { display: none !important; content: none; }
.logo { gap: 0; padding: 10px 0; }
.logo .brand-mark { height: 160px; width: auto; max-width: 560px; display: block; }
.sidebar-brand { display: flex; justify-content: center; align-items: center; padding: 14px 0 16px; text-align: center; }

.wordmark {
  display: inline-block;
  font-family: var(--font-serif);
  font-weight: 900;
  font-style: normal;
  letter-spacing: 0.06em;
  line-height: 1;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold-2, #d4a84a);
  white-space: nowrap;
}
.sidebar-brand .wordmark { font-size: 1.8rem; color: var(--ink, #0b1f3a); border-bottom-color: var(--gold, #b8892b); }

@media (max-width: 900px) {
  .logo .brand-mark { height: 110px; max-width: 380px; }
}
@media (max-width: 600px) {
  .logo .brand-mark { height: 84px; max-width: 280px; }
}

/* -------------------------------------------------------------------------
   Flash messages — server flashes "success" / "error" / "danger" / "warn"
   / "info" categories rendered by partials/flash.html into div.flash-wrap.
   ------------------------------------------------------------------------- */
.flash-wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px 0; }
.flash-wrap:empty { display: none; }
.flash {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px; margin: 20px 0 4px;
  border-left: 3px solid var(--muted-3);
  background: var(--bg-soft); color: var(--ink);
  font-size: 0.9rem; line-height: 1.5;
}
.flash.success {
  border-left-color: var(--good); background: var(--good-soft);
  color: var(--good); font-weight: 500;
}
.flash.success::before {
  content: "\2713"; font-weight: 500; flex-shrink: 0; margin-top: 1px;
}
.flash.error, .flash.danger {
  border-left-color: var(--bad); background: var(--bad-soft); color: var(--bad);
}
.flash.warning, .flash.warn {
  border-left-color: var(--warn); background: var(--warn-soft); color: var(--warn);
}
.flash.info {
  border-left-color: var(--gold); background: var(--gold-soft); color: var(--ink);
}

/* -------------------------------------------------------------------------
   SAMPLE SCAN ribbon — appears at the top of any scan or dashboard tile
   that carries the auto-generated onboarding sample. Gold hairline framing,
   no decorative shadows — consistent with Boardroom Navy.
   ------------------------------------------------------------------------- */
.sample-ribbon {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 18px; margin: 0 0 18px;
  background: var(--gold-soft); border: 1px solid var(--gold);
  border-left: 3px solid var(--gold);
  font-size: .88rem; line-height: 1.5; color: var(--ink);
}
.sample-ribbon-label {
  font-family: var(--font-sans); font-weight: 500; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .12em;
  background: var(--gold); color: #ffffff;
  padding: 4px 10px; flex-shrink: 0;
}
.sample-ribbon-text { flex: 1; min-width: 220px; color: var(--ink); }
.sample-ribbon .btn { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   PROVANTIS — Marketing-page patch (mobile nav, trust band,
   how-it-works, SENTINEL showcase, scan tabs)
   ═══════════════════════════════════════════════════════════════ */

/* Mobile hamburger — hidden on desktop */
.nav-hamburger { display: none; background: none; border: 0; cursor: pointer; padding: 8px 4px; margin-left: auto; flex-shrink: 0; }
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--ink, #0f172a); margin: 5px 0; border-radius: 1px; transition: transform .25s ease, opacity .25s ease; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-hamburger { display: block; }
  .marketing-header .nav-row { flex-wrap: wrap; align-items: center; padding: .85rem 1.25rem; gap: 0; }
  .marketing-header nav { display: none; flex-direction: column; align-items: stretch; width: 100%; gap: 0; padding: .5rem 0 1rem; border-top: 1px solid rgba(0,0,0,.08); margin-top: .6rem; order: 3; }
  .marketing-header nav.nav-open { display: flex; }
  .marketing-header nav a { display: block; padding: .75rem 0; border-bottom: 1px solid rgba(0,0,0,.05); font-size: .95rem; width: 100%; }
  .marketing-header nav a:last-child { border-bottom: none; }
  .marketing-header nav .btn { margin-top: .65rem; width: 100%; text-align: center; padding: .7rem 1rem; display: block; }
  .container.hero { display: block !important; padding: 2rem 1.25rem; }
  form.scan-form { width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 600px) {
  .hero-panel { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Trust Signals — Boardroom Navy + gold translation of ts-* section.
   Numbers bar + 6 pillars + authorities + first-in-SA banner.
   ═══════════════════════════════════════════════════════════════════════ */

/* Numbers bar */
.ts-numbers-bar {
  background: #0f172a;
  border-top: 1px solid rgba(212,175,55,0.18);
  border-bottom: 1px solid rgba(212,175,55,0.18);
  padding: 1.5rem 0;
}
.ts-numbers-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; }
.ts-number-item { display: flex; flex-direction: column; align-items: center; padding: 0 1.75rem; }
.ts-num {
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 500;
  color: #d4af37;
  line-height: 1;
  letter-spacing: -0.01em;
}
.ts-num-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: 0.45rem;
  text-align: center;
  white-space: nowrap;
}
.ts-num-div { width: 1px; height: 36px; background: rgba(255,255,255,0.1); flex-shrink: 0; }

/* Main section */
.ts-section { background: #0f172a; padding: 5rem 0; position: relative; overflow: hidden; }
.ts-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(212,175,55,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.ts-section > .container { position: relative; }

/* Section header */
.ts-header { text-align: center; max-width: 720px; margin: 0 auto 3.5rem; }
.ts-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #d4af37;
  margin-bottom: 1rem;
}
.ts-title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.2;
  margin: 0 0 1.1rem;
  letter-spacing: -0.01em;
}
.ts-title-accent { color: #d4af37; }
.ts-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 0.98rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
  margin: 0;
}

/* Pillars grid */
.ts-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.ts-pillar {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 1.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color 0.25s, background 0.25s;
}
.ts-pillar:hover { border-color: rgba(212,175,55,0.35); background: rgba(212,175,55,0.04); }
.ts-pillar--featured {
  border-color: rgba(212,175,55,0.35);
  background: linear-gradient(135deg, rgba(212,175,55,0.06) 0%, rgba(255,255,255,0.02) 100%);
}
.ts-pillar--featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
}
.ts-pillar--boundary { border-color: rgba(184,144,42,0.3); background: rgba(184,144,42,0.04); }

.ts-pillar-icon {
  width: 42px;
  height: 42px;
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4af37;
  margin-bottom: 1rem;
}
.ts-pillar--boundary .ts-pillar-icon { background: rgba(184,144,42,0.12); border-color: rgba(184,144,42,0.3); color: #b8902a; }

.ts-pillar-title {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 500;
  color: #ffffff;
  margin: 0 0 0.65rem;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.ts-pillar-body {
  font-family: 'Inter', sans-serif;
  font-size: 0.84rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
  margin: 0 0 1rem;
}

.ts-pillar-authorities { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.ts-auth-badge {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  padding: 0.22rem 0.6rem;
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.3);
  color: #d4af37;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ts-pillar-tag { margin-top: auto; }
.ts-tag {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.25rem 0.7rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ts-not-list { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.ts-not-row {
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ts-not-row--yes { color: #d4af37; border-bottom: none; font-weight: 500; }
.ts-not-x { color: rgba(185,28,28,0.75); font-size: 0.85rem; font-weight: 500; width: 14px; text-align: center; }
.ts-not-check { color: #d4af37; font-weight: 500; width: 14px; text-align: center; }

.ts-doc-links { display: flex; flex-direction: column; gap: 4px; margin-top: auto; }
.ts-doc-link {
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  color: rgba(212,175,55,0.8);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: color 0.2s;
}
.ts-doc-link:hover { color: #d4af37; }
.ts-doc-link::before { content: '→'; font-size: 0.72rem; }

.ts-reg-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
  padding: 0.85rem 1rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
}
.ts-reg-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.45);
}
.ts-reg-number {
  font-family: 'Courier New', monospace;
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.06em;
}

/* Authorities row */
.ts-authorities {
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 1.75rem 1rem;
  margin: 2.5rem 0;
  text-align: center;
}
.ts-auth-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 1.5rem;
}
.ts-auth-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; }
.ts-auth-item { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 0 2rem; }
.ts-auth-logo-box {
  background: rgba(212,175,55,0.08);
  border: 1px solid rgba(212,175,55,0.3);
  padding: 0.5rem 1rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 0.95rem;
  color: #d4af37;
  letter-spacing: 0.06em;
  min-width: 60px;
  text-align: center;
}
.ts-auth-name {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.45);
  text-align: center;
  line-height: 1.4;
}
.ts-auth-divider { width: 1px; height: 50px; background: rgba(255,255,255,0.08); }

/* First-in-SA banner */
.ts-first-banner {
  background: linear-gradient(135deg, rgba(212,175,55,0.08) 0%, rgba(184,144,42,0.05) 50%, rgba(212,175,55,0.04) 100%);
  border: 1px solid rgba(212,175,55,0.3);
  padding: 2rem 2.25rem;
  margin-top: 2rem;
  position: relative;
  overflow: hidden;
}
.ts-first-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #d4af37, #b8902a);
}
.ts-first-inner { display: flex; align-items: flex-start; gap: 1.75rem; }
.ts-first-mark {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d4af37;
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.3);
  padding: 0.32rem 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.ts-first-text {
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
}
.ts-first-text strong {
  color: #ffffff;
  font-family: var(--font-serif);
  font-weight: 500;
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
}

/* Responsive */
@media (max-width: 1024px) {
  .ts-pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
  .ts-num-div { display: none; }
  .ts-numbers-inner { gap: 0.5rem 1.25rem; }
  .ts-num-label { white-space: normal; max-width: 130px; }
}
@media (max-width: 768px) {
  .ts-number-item { padding: 0.55rem 0.75rem; flex: 0 0 calc(50% - 1rem); }
  .ts-num { font-size: 1.55rem; }
  .ts-pillars { grid-template-columns: 1fr; }
  .ts-auth-row { gap: 1rem; }
  .ts-auth-item { padding: 0 0.75rem; }
  .ts-auth-divider { display: none; }
  .ts-first-inner { flex-direction: column; gap: 1rem; }
  .ts-section { padding: 3.5rem 0; }
}

/* How Provantis works — 4-step grid */
.how-it-works-section { padding: 64px 0 32px; }
.how-it-works-section h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: .35rem 0 .6rem; }
.how-it-works-section .lead { max-width: 640px; margin-bottom: 8px; }
.hiw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 28px 0 24px; }
.hiw-step { background: var(--surface, #fff); border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 0; padding: 22px; }
.hiw-num { font-size: 1.7rem; font-weight: 500; font-family: var(--font-serif); color: rgba(15,23,42,.55); line-height: 1; margin-bottom: 10px; }
.hiw-icon { color: var(--gold, #d4af37); margin-bottom: 10px; }
.hiw-title { font-weight: 500; font-size: .98rem; color: var(--ink, #0f172a); margin-bottom: 6px; line-height: 1.3; font-family: 'Inter', sans-serif; }
.hiw-desc { font-size: .86rem; color: var(--muted, #5a5a72); line-height: 1.6; font-family: 'Inter', sans-serif; }
.hiw-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* SENTINEL showcase */
.sentinel-showcase { background: #0f172a; padding: 64px 0; overflow: hidden; }
.sentinel-showcase .eyebrow { color: var(--gold, #d4af37); }
.sentinel-showcase h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.1rem); margin: .35rem 0 .85rem; }
.sentinel-showcase .lead { color: rgba(255,255,255,.7); max-width: 520px; margin-bottom: 24px; }
.sentinel-showcase .container { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sentinel-content { color: rgba(255,255,255,.7); }
.sentinel-features { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 16px; }
.sentinel-features li { display: flex; gap: 12px; align-items: flex-start; }
.sf-icon { color: var(--gold, #d4af37); font-size: .95rem; margin-top: 2px; flex-shrink: 0; }
.sentinel-features strong { color: #fff; font-size: .92rem; display: block; margin-bottom: 3px; font-family: 'Inter', sans-serif; }
.sentinel-features p { color: rgba(255,255,255,.6); font-size: .84rem; line-height: 1.55; margin: 0; font-family: 'Inter', sans-serif; }
.sentinel-window { background: #1a2236; border: 1px solid rgba(255,255,255,.1); border-radius: 0; overflow: hidden; }
.sw-header { background: #0f172a; padding: 10px 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.07); }
.sw-dot { width: 9px; height: 9px; border-radius: 50%; }
.sw-dot.r { background: #ff5f57; } .sw-dot.y { background: #febc2e; } .sw-dot.g { background: #28c840; }
.sw-title { font-size: .76rem; color: rgba(255,255,255,.55); margin-left: 6px; flex: 1; font-family: 'Inter', sans-serif; }
.sw-badge { font-size: .62rem; font-weight: 500; background: var(--gold, #d4af37); color: #0f172a; padding: 3px 8px; border-radius: 0; text-transform: uppercase; letter-spacing: .14em; }
.sw-messages { padding: 14px; display: flex; flex-direction: column; gap: 10px; max-height: 360px; overflow-y: auto; }
.sw-msg { border-radius: 0; padding: 10px 12px; font-size: .84rem; line-height: 1.55; font-family: 'Inter', sans-serif; }
.sw-msg.user { background: rgba(255,255,255,.06); color: rgba(255,255,255,.82); margin-left: 28px; }
.sw-msg.sentinel { background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.22); color: rgba(255,255,255,.78); }
.sw-msg-label { font-size: .66rem; font-weight: 500; color: var(--gold, #d4af37); text-transform: uppercase; letter-spacing: .14em; margin-bottom: 5px; }
.sw-citation { font-size: .72rem; color: rgba(255,255,255,.72); margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); }
.sw-disclaimer { font-size: .7rem; color: rgba(255,255,255,.45); margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.08); font-style: italic; }
.sw-msg strong { color: #fff; }
.sw-input { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid rgba(255,255,255,.07); }
.sw-input span { flex: 1; font-size: .8rem; color: rgba(255,255,255,.72); font-family: 'Inter', sans-serif; }
.sw-input button { background: var(--gold, #d4af37); border: 0; color: #0f172a; width: 28px; height: 28px; border-radius: 0; cursor: pointer; font-weight: 500; }
@media (max-width: 820px) { .sentinel-showcase .container { grid-template-columns: 1fr; gap: 28px; } .sentinel-demo { display: none; } }

/* Scan-form tabs (Cyber / POPIA / Conduct) */
.scan-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line, rgba(0,0,0,.1)); margin-bottom: 0; }
.scan-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; font-size: .82rem; font-weight: 500; color: var(--muted, #5a5a72); cursor: pointer; font-family: 'Inter', sans-serif; letter-spacing: .02em; text-transform: uppercase; transition: color .15s, border-color .15s; }
.scan-tab:hover { color: var(--ink, #0f172a); }
.scan-tab.active { color: var(--ink, #0f172a); border-bottom-color: var(--gold, #d4af37); }
.scan-pane { display: none; }
.scan-pane.active { display: block; }
@media (max-width: 600px) {
  .scan-tabs { flex-wrap: wrap; }
  .scan-tab { flex: 1 1 33%; padding: 10px 6px; font-size: .72rem; }
}

/* ── Password show/hide eye toggle ─────────────────────────── */
.pw-eye-wrap {
  position: relative;
  display: block;
  width: 100%;
}
/* Suppress the browser's built-in reveal eye (Edge) — it overlaps our toggle */
.pw-eye-wrap > input[type="password"]::-ms-reveal,
.pw-eye-wrap > input[type="password"]::-ms-clear { display: none; }
.pw-eye-wrap > input[type="password"],
.pw-eye-wrap > input[type="text"] {
  width: 100%;
  /* Extra right padding keeps text clear of the custom toggle button */
  padding-right: 68px;
}
.pw-eye-btn {
  position: absolute;
  top: 50%;
  /* Inset 26px from the right edge so a browser/extension-injected eye
     (anchored to the input's right border) can never overlap the custom toggle */
  right: 26px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: #64748b;
  border-radius: 0;
  transition: color .15s ease;
}
.pw-eye-btn:hover,
.pw-eye-btn:focus { color: #d4af37; outline: none; }
.pw-eye-btn:focus-visible { box-shadow: 0 0 0 1px #d4af37; }

/* ----------------------------------------------------------------------
   50-second walkthrough — modal overlay (homepage) + inline player
   (free-scan result pages). Self-contained; no external assets.
   ---------------------------------------------------------------------- */
.walkthrough-overlay { position:fixed; inset:0; background:rgba(15,23,42,.86); z-index:9999; display:flex; align-items:center; justify-content:center; padding:20px; }
.walkthrough-overlay[hidden] { display:none; }
.walkthrough-dialog { background:#fff; max-width:960px; width:100%; max-height:calc(100vh - 40px); overflow-y:auto; padding:22px 22px 18px; border:1px solid var(--line, #e2e8f0); position:relative; box-shadow:0 12px 40px rgba(0,0,0,.4); outline:none; }
.walkthrough-dialog:focus-visible { outline:2px solid var(--gold, #d4af37); outline-offset:-4px; }
.walkthrough-close { position:absolute; top:6px; right:10px; background:transparent; border:none; font-size:1.6rem; line-height:1; color:var(--muted, #64748b); cursor:pointer; padding:6px 10px; font-family:'Inter',sans-serif; }
.walkthrough-close:hover { color:var(--ink, #0f172a); }
.walkthrough-title { font-family: var(--font-serif); font-weight:500; font-size:1.2rem; margin:4px 0 14px; padding-right:32px; letter-spacing:-0.005em; }
.walkthrough-dialog video { width:100%; height:auto; display:block; background:#000; border:1px solid var(--line, #e2e8f0); }

.walkthrough-inline { padding:24px; }
.walkthrough-inline video { margin-top:4px; }

/* ---------- Guided walkthrough (tour.js) ---------- */
.tour-spotlight {
  position: fixed;
  z-index: 4000;
  pointer-events: none;
  border: 1px solid var(--gold, #b08d2e);
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.62);
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 3999;
  background: transparent;
}
.tour-card {
  position: fixed;
  z-index: 4001;
  background: var(--canvas, #faf7f0);
  border: 1px solid rgba(15, 23, 42, 0.25);
  border-top: 3px solid var(--gold, #b08d2e);
  padding: 18px 20px 14px;
  max-width: 380px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.35);
  transition: top .25s ease, left .25s ease;
}
.tour-eyebrow {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-deep, #8a6d1f);
  margin-bottom: 6px;
}
.tour-title {
  font-family: var(--font-serif);
  font-size: 19px;
  color: #0f172a;
  margin-bottom: 8px;
}
.tour-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: #334155;
  margin-bottom: 14px;
}
.tour-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.12);
  padding-top: 10px;
}
.tour-spacer { flex: 1; }
.tour-actions { display: flex; gap: 8px; }
.tour-skip {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12.5px;
  color: #64748b;
  cursor: pointer;
  text-decoration: underline;
}
.tour-skip:hover { color: #0f172a; }
body.tour-active { overflow-x: hidden; }

/* Getting started guide */
.gs-steps { margin: 8px 0 4px; padding-left: 0; list-style: none; display: grid; gap: 14px; }
.gs-steps li { font-size: 13.5px; line-height: 1.6; color: #334155; border-left: 2px solid var(--gold, #b08d2e); padding-left: 14px; }
.gs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 8px; }
.gs-item p { font-size: 13px; line-height: 1.55; color: #475569; margin: 4px 0 0; }
.gs-item strong a { color: #0f172a; }

/* ── Knowledge base search ─────────────────────────────────────────────── */
.kb-search { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.kb-search input[type="search"] {
  flex: 1 1 280px;
  padding: .6rem .9rem;
  border: 1px solid var(--border, #ccc);
  border-radius: 6px;
  font: inherit;
  background: var(--card-bg, #fff);
  color: inherit;
}
.kb-search-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.kb-search-list li { padding: .45rem 0; border-bottom: 1px solid var(--border, rgba(0,0,0,.08)); }
.kb-search-list li:last-child { border-bottom: none; }

/* ── Back-to-top button — canonical definition (shared across all surfaces)
   Uses hardcoded hex so it works whether or not a page loads a CSS-var sheet.
   Loaded via app.css (base.html) and also via the two standalone templates
   (dashboard/index.html, resources/rule_engine.html) which link app.css first.
   ─────────────────────────────────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  right: 28px;
  /* Sits above the SENTINEL launcher (bottom-right) so they never overlap */
  bottom: 104px;
  z-index: 60;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #101c2c;
  color: #b8902a;
  border: 1px solid #b8902a;
  border-radius: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .25s, visibility .25s, transform .25s, background .18s, color .18s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: #b8902a; color: #101c2c; }
.back-to-top:focus-visible { outline: 2px solid #b8902a; outline-offset: 3px; }
@media (max-width: 640px) { .back-to-top { right: 16px; bottom: 96px; width: 42px; height: 42px; } }