/* ============================================================
   DesignProLeads — "Field Report" theme
   ------------------------------------------------------------
   Palette sampled from the LIVE RBA-family sites (2026-07-28), not invented:
     #285968  Ron Blank        #004e1e  GreenCE (logo mark)
     #ae3036  CE Academy       #e87100  InfoSpec
     #e3dfd9  shared page ground · #222 ink · #555 muted · #ccc borders
   Blue / green / red are the data primaries. Orange + grey are the BACK TONE:
   orange is the only brand colour that fails 3:1 on the ground (2.33:1), so it
   never carries a data category on its own.

   LIGHT + DARK, defaulting to the operating-system setting. Dark variants hold
   every brand hue to within 0.3 degrees and move only lightness, so GreenCE
   green still reads as GreenCE green on a dark ground.

   Trailhead's teal #2d4d5d is gone. Separation from the staff app now comes from
   structure (Public Sans, generous tables, card surfaces), not hue.
   ============================================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Public Sans', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--c-ground);
  color: var(--c-ink);
  line-height: 1.55;
}

a { color: var(--c-blue-accent); text-decoration: none; }
a:hover { color: var(--c-blue-deep); }

/* Keyboard focus ring (WCAG 2.4.7 / 2.4.11).
   --c-focus is a dedicated token, NOT the accent: when the accent and the surface
   it sits on are the same family the ring silently drops to ~1:1 and vanishes.
   The dark nav strips override to a light ring below. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  border-radius: 1px;
}
/* Every focusable descendant of the dark appbar/drawer. .notif-trigger and
   .acct-item were missing here and would have inherited an invisible ring. */
.nav-primary-link:focus-visible,
.drawer-link:focus-visible,
.appbar-link:focus-visible,
.appbar-brand:focus-visible,
.acct-trigger:focus-visible,
.acct-item:focus-visible,
.notif-trigger:focus-visible,
.appbar-burger:focus-visible {
  outline-color: rgba(255, 255, 255, 0.92);
}

/* ---- Design tokens ---- */
:root {
  color-scheme: light dark;

  /* surfaces */
  --c-ground: #e3dfd9;
  --c-card: #ffffff;
  --c-surface-2: #f2f0ec;
  --c-border: #cccccc;
  --c-border-soft: #dedad4;
  --c-border-strong: #a9a29a;

  /* type */
  --c-ink: #222222;
  --c-ink-2: #3a3a3a;
  --c-muted: #555555;
  --c-muted-2: #7d766d;

  /* brand primaries */
  --c-blue: #285968;
  --c-blue-deep: #1c414c;
  --c-blue-accent: #2180b0;
  --c-green: #004e1e;
  --c-green-deep: #003614;
  --c-red: #ae3036;
  --c-red-deep: #8c2429;

  /* back tone */
  --c-orange: #e87100;
  --c-orange-deep: #b85a00;

  /* tints (backgrounds for status pills, callouts, table stripes) */
  --c-tint-blue: #e6eef1;
  --c-tint-green: #e6efe9;
  --c-tint-red: #f7e9ea;
  --c-tint-orange: #fdf0e3;

  --c-focus: #b85a00;
  --c-grid: rgba(34, 34, 34, 0.10);

  /* ---- legacy aliases — every name the rest of this stylesheet already uses.
     Kept so the sweep below is additive rather than a rename of 1189 call sites. */
  --c-teal: var(--c-blue);
  --c-teal-dark: var(--c-blue-deep);
  --c-copper: var(--c-orange);
  --c-copper-dark: var(--c-orange-deep);
  --c-bg: var(--c-ground);
  --c-silver: var(--c-surface-2);
  --c-silver-border: var(--c-border-strong);
  --c-steel: var(--c-border-soft);
  --c-steel-muted: var(--c-muted);
  --c-surface: var(--c-card);
  --c-text: var(--c-ink);
  --c-rule: var(--c-border);
  --c-rule-strong: var(--c-border-strong);
  --border: var(--c-border);
  --c-ok-bg: var(--c-green);  --c-ok-fg: #ffffff;  --c-ok-line: var(--c-green);
  --c-warn-bg: var(--c-tint-orange);  --c-warn-fg: var(--c-orange-deep);
  --c-danger: var(--c-red);  --c-danger-dark: var(--c-red-deep);

  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;
  --appbar-h: 56px;
  --radius: 5px;
}

/* Default follows the browser / OS setting — the user is never asked. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-ground: #1c1a18;
    --c-card: #26231f;
    --c-surface-2: #2f2b27;
    --c-border: #413b34;
    --c-border-soft: #35302b;
    --c-border-strong: #5a5249;
    --c-ink: #ece7e0;
    --c-ink-2: #d6d0c8;
    --c-muted: #a89f95;
    --c-muted-2: #7d766d;
    --c-blue: #6291a1;
    --c-blue-deep: #8bb3c0;
    --c-blue-accent: #5fa8cd;
    --c-green: #569862;
    --c-green-deep: #7fbc88;
    --c-red: #e3605e;
    --c-red-deep: #ef8a88;
    --c-orange: #e77000;
    --c-orange-deep: #f2953c;
    --c-tint-blue: #23343a;
    --c-tint-green: #24332a;
    --c-tint-red: #3a2626;
    --c-tint-orange: #38291a;
    --c-focus: #f2953c;
    --c-grid: rgba(236, 231, 224, 0.14);
    --c-ok-fg: #14120f;
  }
}
/* An explicit choice always beats the OS signal, in both directions. */
:root[data-theme="dark"] {
  --c-ground: #1c1a18;
  --c-card: #26231f;
  --c-surface-2: #2f2b27;
  --c-border: #413b34;
  --c-border-soft: #35302b;
  --c-border-strong: #5a5249;
  --c-ink: #ece7e0;
  --c-ink-2: #d6d0c8;
  --c-muted: #a89f95;
  --c-muted-2: #7d766d;
  --c-blue: #6291a1;
  --c-blue-deep: #8bb3c0;
  --c-blue-accent: #5fa8cd;
  --c-green: #569862;
  --c-green-deep: #7fbc88;
  --c-red: #e3605e;
  --c-red-deep: #ef8a88;
  --c-orange: #e77000;
  --c-orange-deep: #f2953c;
  --c-tint-blue: #23343a;
  --c-tint-green: #24332a;
  --c-tint-red: #3a2626;
  --c-tint-orange: #38291a;
  --c-focus: #f2953c;
  --c-grid: rgba(236, 231, 224, 0.14);
  --c-ok-fg: #14120f;
}

/* ---- Typography ---- */
h1, h2, h3, h4 { font-family: 'Public Sans', Arial, sans-serif; color: var(--c-ink); font-weight: 700; letter-spacing: normal; line-height: 1.2; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.125rem; }
p  { color: var(--c-muted); }

/* ---- Utility ---- */
.text-muted { color: var(--c-muted); }
.text-copper { color: var(--c-orange-deep); }
.copper-rule { border: none; border-top: 1px solid var(--c-orange); margin: 1.5rem 0; }


/* ── ai_usage.css contract ────────────────────────────────────────────────────
   ai_usage.css consumes 12 var(--aiu-*) tokens across 51 call sites and this
   project never defined ANY of them, so that page has been rendering with no
   colours at all. Bound to the Field Report palette here; it inherits dark mode
   for free because these resolve to tokens, not literals. */
:root {
  --aiu-bg:       var(--c-ground);
  --aiu-surface:  var(--c-card);
  --aiu-surface2: var(--c-surface-2);
  --aiu-text:     var(--c-ink);
  --aiu-muted:    var(--c-muted);
  --aiu-border:   var(--c-border);
  --aiu-accent:   var(--c-blue-accent);
  --aiu-accent2:  var(--c-green);
  --aiu-danger:   var(--c-red);
  --aiu-radius:   10px;
  --aiu-font:     'Public Sans', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --aiu-mono:     ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}



/* ============================================================
   Auth pages (login, register, verify)
   ============================================================ */

.auth-page {
  min-height: 100vh;
  background: var(--c-ground);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.auth-card {
  width: 100%;
  max-width: 420px;
}

.auth-wordmark {
  text-align: center;
  margin-bottom: 2.5rem;
}

.auth-wordmark .wm-name {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
  display: block;
}

.auth-wordmark .wm-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--c-blue);
  letter-spacing: 0.04em;
  display: block;
  margin-top: 0.2rem;
}

.auth-wordmark .wm-copper-bar {
  display: block;
  width: 32px;
  height: 2px;
  background: var(--c-orange);
  margin: 0.6rem auto 0;
}

.auth-heading {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--c-blue);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--c-orange);
}

.auth-error {
  background: var(--c-surface-2);
  border-left: 3px solid var(--c-orange);
  color: var(--c-orange);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  border-radius: 0 2px 2px 0;
}

.auth-success {
  background: var(--c-surface-2);
  border-left: 3px solid var(--c-green);
  color: var(--c-green);
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  margin-bottom: 1.25rem;
  border-radius: 0 2px 2px 0;
}

.auth-footer {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-border-soft);
  text-align: center;
  font-size: 0.875rem;
  color: var(--c-muted);
}

.auth-note {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--c-surface-2);
  border-left: 2px solid var(--c-blue);
  font-size: 0.8rem;
  color: var(--c-muted);
  border-radius: 0 2px 2px 0;
}


/* ============================================================
   Forms (shared across auth + portal + settings)
   ============================================================ */

.form-group {
  margin-bottom: 1.1rem;
}

.form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.35rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--c-border-strong);
  background: var(--c-card);
  color: var(--c-blue);
  font-size: 0.95rem;
  font-family: inherit;
  border-radius: 5px;
  transition: border-color 0.15s;
  outline: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--c-blue);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.12);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.checkbox-row, .radio-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.25rem;
}
.checkbox-label, .radio-label {
  display: flex; align-items: flex-start; gap: 0.4rem;
  font-size: 0.88rem; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--c-ink); cursor: pointer;
}
.checkbox-label input, .radio-label input { margin-top: 2px; flex-shrink: 0; }

.btn {
  display: inline-block;
  padding: 0.65rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  text-decoration: none;
}

.btn-primary {
  background: var(--c-blue);
  color: var(--c-card);
}
.btn-primary:hover { background: var(--c-blue); color: var(--c-card); }

.btn-copper {
  background: var(--c-orange);
  color: var(--c-card);
}
.btn-copper:hover { background: var(--c-orange-deep); color: var(--c-card); }

.btn-ghost {
  background: transparent;
  color: var(--c-blue);
  border: 1px solid var(--c-border-strong);
}
.btn-ghost:hover { border-color: var(--c-blue); color: var(--c-blue); }

.btn-sm { padding: 0.4rem 0.9rem; font-size: 0.78rem; }
.btn-full { width: 100%; text-align: center; display: block; }

.form-hint {
  font-size: 0.78rem;
  color: var(--c-muted);
  margin-top: 0.3rem;
}


/* ============================================================
   Portal shell — top app-bar + sidebar + content
   ============================================================ */

/* Centered app frame — caps the portal at 1350px with a teal frame matching the chrome */
body.portal { background: var(--c-teal-dark); }

.portal-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1350px;
  margin: 0 auto;
  background: var(--c-bg);
  box-shadow: 0 0 60px rgba(0,0,0,0.22);
}

/* Sticky nav block: app-bar + primary + secondary strips travel together. */
.portal-top { position: sticky; top: 0; z-index: 120; }

/* ── App-bar ── */
.appbar {
  height: var(--appbar-h);
  background: var(--c-teal);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem 0 0.5rem;
}

.appbar-left { display: flex; align-items: center; gap: 0.25rem; flex-shrink: 0; }

.appbar-burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  min-width: 44px;
  min-height: 44px;
}
.appbar-burger span { display: block; width: 20px; height: 2px; background: rgba(255,255,255,0.85); border-radius: 1px; }

.appbar-brand { display: flex; flex-direction: column; line-height: 1; text-decoration: none; padding: 0 0.5rem; }
.appbar-brand-name { font-size: 0.55rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.appbar-brand-prog { font-size: 1rem; font-weight: 800; color: var(--c-card); margin-top: 1px; }

.appbar-search { flex: 1; max-width: 420px; position: relative; }
.appbar-search input {
  width: 100%;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.1);
  color: var(--c-card);
  font-size: 0.85rem;
  font-family: inherit;
  border-radius: var(--radius);
  outline: none;
}
.appbar-search input::placeholder { color: rgba(255,255,255,0.55); }
.appbar-search input:focus { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.4); }

.appbar-search-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-silver-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  max-height: 360px;
  overflow-y: auto;
  z-index: 50;
}
.appbar-search-group {
  padding: 0.4rem 0.85rem 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.appbar-search-item {
  display: block;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  color: var(--c-text);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.appbar-search-item:hover,
.appbar-search-item.is-active { background: var(--c-silver); }

.appbar-right { display: flex; align-items: center; gap: 1rem; margin-left: auto; flex-shrink: 0; }

.appbar-link { font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.7); text-decoration: none; white-space: nowrap; }
.appbar-link:hover { color: var(--c-card); }

/* ── Account menu (native details/summary dropdown — no inline JS) ── */
.acct { position: relative; }
.acct > summary { list-style: none; cursor: pointer; }
.acct > summary::-webkit-details-marker { display: none; }
.acct > summary::marker { content: ""; }

.acct-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.4rem 0.25rem 0.3rem;
  border-radius: var(--radius);
}
.acct-trigger:hover { background: rgba(255,255,255,0.1); }

.acct-avatar {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-copper);
  color: var(--c-card);
  font-size: 0.72rem;
  font-weight: 800;
  border-radius: 50%;
  flex-shrink: 0;
}
.acct-id { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.acct-name { font-size: 0.8rem; font-weight: 600; color: var(--c-card); white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.acct-role { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.acct-caret { color: rgba(255,255,255,0.7); font-size: 0.7rem; }

.acct-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: var(--c-card);
  border: 1px solid var(--c-rule);
  border-top: 2px solid var(--c-copper);
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  z-index: 200;
  padding: 0.4rem 0;
}
.acct-head { padding: 0.85rem 1rem; border-bottom: 1px solid var(--c-rule); }
.acct-head-name { font-size: 0.9rem; font-weight: 700; color: var(--c-teal); }
.acct-head-email { font-size: 0.78rem; color: var(--c-muted); margin: 2px 0 0.5rem; word-break: break-all; }
.acct-item { display: block; padding: 0.55rem 1rem; font-size: 0.85rem; color: var(--c-text); text-decoration: none; }
.acct-item:hover { background: var(--c-surface-2); color: var(--c-teal); }
.acct-divider { height: 1px; background: var(--c-rule); margin: 0.4rem 0; }
.acct-signout { color: var(--c-red-deep); }
.acct-signout:hover { color: var(--c-red-deep); background: var(--c-surface-2); }

/* ── Primary nav (top-level areas) ── */
.navbar-primary {
  background: var(--c-teal-dark);
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 1rem;
  height: 46px;
}
.nav-primary-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 1rem;
  color: rgba(255,255,255,0.78);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.12s, border-color 0.12s;
}
.nav-primary-link:hover { color: var(--c-card); }
.nav-primary-link.active { color: var(--c-card); border-bottom-color: var(--c-copper); }
.nav-primary-link.is-admin { margin-left: auto; color: var(--c-orange); }
.nav-primary-link.is-admin.active { color: var(--c-card); border-bottom-color: var(--c-copper); }
.nav-pico { width: 14px; height: 14px; opacity: 0.85; flex-shrink: 0; }

/* ── Secondary nav (active area's sub-sections) ── */
.navbar-secondary {
  background: var(--c-card);
  border-bottom: 1px solid var(--c-silver-border);
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 1.25rem;
  height: 44px;
  overflow-x: auto;
}
.navbar-secondary-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-steel-muted);
  margin-right: 0.5rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-secondary-link {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.8rem;
  color: var(--c-muted);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
}
.nav-secondary-link:hover { color: var(--c-teal-dark); background: var(--c-silver); }
.nav-secondary-link.active { color: var(--c-teal-dark); background: var(--c-silver); box-shadow: inset 0 -2px 0 var(--c-copper); }

.nav-badge { font-size: 0.65rem; font-weight: 700; line-height: 15px; min-width: 15px; padding: 0 4px; border-radius: 8px; background: var(--c-copper); color: var(--c-card); text-align: center; margin-left: 0.4rem; flex-shrink: 0; }

/* ── Mobile nav drawer (hidden on desktop; toggled by the burger) ── */
.portal-drawer { display: none; }
.nav-overlay { display: none; }
.drawer-nav { padding: 0.75rem 0 2rem; }
.drawer-group { padding: 0.25rem 0 0.6rem; }
.drawer-group.is-admin { margin-top: 0.4rem; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 0.7rem; }
.drawer-group-label {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); padding: 0.5rem 1.4rem 0.35rem;
}
.drawer-link {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  color: rgba(255,255,255,0.82); font-size: 0.9rem; font-weight: 500;
  text-decoration: none; border-left: 3px solid transparent;
}
.drawer-link:hover { background: rgba(255,255,255,0.07); color: var(--c-card); }
.drawer-link.active { background: rgba(255,255,255,0.12); color: var(--c-card); border-left-color: var(--c-copper); }

/* ── Main content ── */
.portal-main { display: flex; flex-direction: column; min-width: 0; background: var(--c-bg); }

.portal-pagehead {
  background: var(--c-card);
  border-bottom: 1px solid var(--c-border-soft);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.portal-pagehead h1 { font-size: 1.2rem; font-weight: 700; color: var(--c-teal); }
.portal-pagehead-actions { display: flex; gap: 0.5rem; align-items: center; }

.portal-content { padding: 2rem; flex: 1; min-width: 0; }

.portal-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 1.25rem;
}

.page-intro {
  font-size: 0.9rem;
  color: var(--c-muted);
  margin: -0.25rem 0 1.5rem;
  max-width: 760px;
  line-height: 1.6;
}

/* ── Portal mobile ── */
@media (max-width: 860px) {
  .appbar-burger { display: flex; }
  .appbar-search { display: none; }
  .appbar-link { display: none; }
  .acct-id { display: none; }
  .navbar-primary, .navbar-secondary { display: none; }
  .portal-drawer {
    display: block;
    position: fixed;
    top: var(--appbar-h);
    left: 0;
    width: 264px;
    max-width: 82vw;
    height: calc(100vh - var(--appbar-h));
    background: var(--c-teal);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.2s ease;
    z-index: 115;
    overflow-y: auto;
  }
  .portal-shell.nav-open .portal-drawer { transform: translateX(0); visibility: visible; }
  .portal-shell.nav-open .nav-overlay {
    display: block;
    position: fixed;
    inset: var(--appbar-h) 0 0 0;
    background: var(--c-border-soft);
    z-index: 110;
  }
  .portal-pagehead { padding: 0.85rem 1.25rem; }
  .portal-content { padding: 1.25rem; }
  .form-row { grid-template-columns: 1fr; }
}

/* Info cards — thin ruled, no shadows */
.info-card {
  background: var(--c-card);
  border: 1px solid var(--c-border-soft);
  border-top: 2px solid var(--c-blue);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

.info-card h3 { margin-bottom: 0.5rem; }
.info-card p  { font-size: 0.9rem; }

/* Stat strip */
.stat-strip {
  display: flex;
  gap: 0;
  background: var(--c-card);
  border: 1px solid var(--c-border-soft);
  margin-bottom: 1.5rem;
}

.stat-item {
  flex: 1;
  padding: 1.25rem 1.5rem;
  border-right: 1px solid var(--c-border-soft);
}
.stat-item:last-child { border-right: none; }

.stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--c-blue);
  line-height: 1;
}

.stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 0.25rem;
}

/* Section grid */
.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-soft);
  margin-bottom: 1.5rem;
}

.section-tile {
  background: var(--c-card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  transition: background 0.12s;
}
.section-tile:hover { background: var(--c-border-soft); }

.tile-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.tile-desc { font-size: 0.85rem; color: var(--c-muted); }


/* ============================================================
   Tables
   ============================================================ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--c-card);
  font-size: 0.875rem;
}

.data-table th {
  text-align: left;
  padding: 0.6rem 0.85rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  border-bottom: 2px solid var(--c-border);
  background: var(--c-surface-2);
}

.data-table td {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--c-border-soft);
  color: var(--c-blue);
  vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--c-surface-2); }

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 5px;
}

.badge-internal { background: var(--c-blue); color: var(--c-card); }
.badge-external { background: var(--c-orange); color: var(--c-ink); }
.badge-admin    { background: var(--c-blue); color: var(--c-card); }
.badge-manager  { background: var(--c-muted); color: var(--c-card); }
.badge-rep      { background: var(--c-border-soft); color: var(--c-blue); }
.badge-prospect { background: var(--c-orange); color: var(--c-ink); }


/* ============================================================
   Alert banners
   ============================================================ */

.alert {
  padding: 0.85rem 1.25rem;
  background: var(--c-card);
  border: 1px solid var(--c-border-strong);
  border-left: 5px solid var(--c-muted);
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  border-radius: 0 5px 5px 0;
  color: var(--c-ink);
}

.alert-success { border-left-color: var(--c-green); }
.alert-error   { border-left-color: var(--c-red); }
.alert-info    { border-left-color: var(--c-blue-accent); }
.alert-warning { border-left-color: var(--c-orange); }


/* ============================================================
   Settings page
   ============================================================ */

.settings-section {
  background: var(--c-card);
  border: 1px solid var(--c-border-soft);
  border-top: 2px solid var(--c-blue);
  padding: 1.5rem 2rem;
  margin-bottom: 1.25rem;
}

.settings-section h3 {
  margin-bottom: 0.25rem;
}

.settings-section .section-desc {
  font-size: 0.85rem;
  color: var(--c-muted);
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--c-border-soft);
}


/* ============================================================
   Error pages
   ============================================================ */

.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

.error-code {
  font-size: 5rem;
  font-weight: 900;
  color: var(--c-border-soft);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.error-page h2 {
  margin-bottom: 0.75rem;
}

.error-page p {
  max-width: 420px;
  margin: 0 auto 1.5rem;
}


/* ============================================================
   Coming-soon section placeholder
   ============================================================ */

.coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  min-height: 50vh;
}

.coming-soon .cs-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.75rem;
}

.coming-soon h2 {
  margin-bottom: 0.75rem;
}

.coming-soon p {
  max-width: 400px;
  font-size: 0.9rem;
}

.cs-copper-bar {
  width: 32px;
  height: 2px;
  background: var(--c-orange);
  margin: 1rem auto 0;
}


/* ============================================================
   Phase 2 — Filter bar
   ============================================================ */

.filter-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.filter-search {
  flex: 1;
  min-width: 180px;
  max-width: 320px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--c-border-strong);
  background: var(--c-card);
  color: var(--c-blue);
  font-size: 0.875rem;
  font-family: inherit;
  border-radius: 5px;
  outline: none;
}
.filter-search:focus { border-color: var(--c-blue); box-shadow: 0 0 0 2px rgba(0,0,0,0.1); }

.filter-select {
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--c-border-strong);
  background: var(--c-card);
  color: var(--c-blue);
  font-size: 0.875rem;
  font-family: inherit;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
}
.filter-select:focus { border-color: var(--c-blue); }

.inline-select {
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--c-border);
  background: var(--c-card);
  color: var(--c-blue);
  font-size: 0.8rem;
  font-family: inherit;
  border-radius: 5px;
  outline: none;
}


/* ============================================================
   Phase 2 — Tab row
   ============================================================ */

.tab-row {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--c-border-soft);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.tab-link {
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  text-decoration: none;
  transition: color 0.12s, border-color 0.12s;
}
.tab-link:hover { color: var(--c-blue); }
.tab-link.active { color: var(--c-orange); border-bottom-color: var(--c-orange); }


/* ============================================================
   Phase 2 — Tags
   ============================================================ */

.tag-pill {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 5px;
  background: var(--c-surface-2);
  color: var(--c-blue);
  margin: 1px 2px 1px 0;
}

.tag-program {
  background: var(--c-surface-2);
  color: var(--c-orange);
}


/* ============================================================
   Phase 2 — Status badges
   ============================================================ */

.btn-danger {
  background: var(--c-surface-2);
  color: var(--c-red-deep);
  border: 1px solid var(--c-border-soft);
}
.btn-danger:hover { background: var(--c-surface-2); color: var(--c-red-deep); }

/* Lead statuses */
.lead-status-new        { background: var(--c-surface-2); color: var(--c-blue); }
.lead-status-contacted  { background: var(--c-surface-2); color: var(--c-blue); }
.lead-status-qualified  { background: var(--c-surface-2); color: var(--c-orange); }
.lead-status-closed_won { background: var(--c-surface-2); color: var(--c-green); }
.lead-status-closed_lost{ background: var(--c-surface-2); color: var(--c-muted); }
.lead-status-archived   { background: var(--c-surface-2); color: var(--c-muted); }

/* Client statuses */
.client-status-active      { background: var(--c-surface-2); color: var(--c-green); }
.client-status-renewal_due { background: var(--c-surface-2); color: var(--c-orange); }
.client-status-churned     { background: var(--c-surface-2); color: var(--c-muted); }

/* Lead message row */
.lead-message-row td { padding-top: 0 !important; border-top: none !important; }


/* ============================================================
   Phase 2 — Table wrapper (horizontal scroll on narrow screens)
   ============================================================ */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.file-link {
  color: var(--c-blue);
  font-weight: 600;
  text-decoration: none;
}
.file-link:hover { color: var(--c-orange); text-decoration: underline; }


/* ============================================================
   Phase 2 — Modal
   ============================================================ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--c-muted-2);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal-box {
  background: var(--c-card);
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  border-top: 3px solid var(--c-orange);
}

.modal-box--wide { max-width: 900px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--c-border-soft);
}

.modal-header h3 { margin: 0; }

.modal-close {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--c-muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 5px;
  line-height: 1;
}
.modal-close:hover { background: var(--c-surface-2); color: var(--c-blue); }

.modal-box form { padding: 1.5rem; }


/* ============================================================
   Phase 2 — Upload form extras
   ============================================================ */

.file-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0;
  font-size: 0.875rem;
  color: var(--c-blue);
  font-family: inherit;
}

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.35rem 0;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--c-blue);
  cursor: pointer;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--c-orange);
}


/* ============================================================
   Phase 2 — Onboarding stages
   ============================================================ */

.onboarding-stage {
  background: var(--c-card);
  border: 1px solid var(--c-border-soft);
  border-left: 3px solid var(--c-orange);
  margin-bottom: 1.25rem;
  padding: 1.5rem;
}

.stage-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.stage-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: var(--c-blue);
  color: var(--c-card);
  font-size: 0.85rem;
  font-weight: 800;
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.stage-header h3 { margin-bottom: 0.2rem; }
.stage-header p  { font-size: 0.875rem; margin: 0; }

.stage-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stage-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-orange);
  flex-shrink: 0;
  margin-top: 0.4rem;
}

.step-dot.step-internal {
  background: var(--c-blue);
}

.step-link {
  display: inline-block;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--c-orange);
  text-decoration: none;
}
.step-link:hover { text-decoration: underline; }


/* ============================================================
   Phase 3 — Public site
   ============================================================ */

.pub-body { background: var(--c-ground); }

/* ─── Public nav ─── */

.pub-nav {
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border-strong);
  position: sticky;
  top: 0;
  z-index: 100;
}

.pub-nav-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.pub-logo {
  text-decoration: none;
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}

.pub-logo-img {
  height: 26px;
  width: auto;
  display: block;
}

.pub-logo-prog {
  font-family: 'Public Sans', Arial, sans-serif;
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--c-orange);
  letter-spacing: 0.02em;
  padding-top: 3px;
  border-top: 1px solid var(--c-orange);
  margin-top: 4px;
  white-space: nowrap;
}

.pub-nav-links {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.pub-nav-links a {
  padding: 0.4rem 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--c-muted);
  text-decoration: none;
  border-radius: 5px;
  transition: color 0.12s;
}
.pub-nav-links a:hover { color: var(--c-blue); }
.pub-nav-links a.active { color: var(--c-blue); }

.nav-cta { margin-left: 0.5rem; }

/* Hamburger */
.pub-menu-btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  min-width: 44px;
  min-height: 44px;
}
.pub-menu-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-blue);
  border-radius: 1px;
}

/* Mobile drawer */
.pub-mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-border-strong);
  padding: 0.5rem 0 1rem;
}
.pub-mobile-nav.open { display: flex; }
.pub-mobile-nav a {
  padding: 0.65rem 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-blue);
  text-decoration: none;
  border-bottom: 1px solid var(--c-border-soft);
}
.pub-mobile-nav a:hover { background: var(--c-border-soft); }
.pub-mobile-nav a.active { color: var(--c-teal); background: var(--c-steel); box-shadow: inset 3px 0 0 var(--c-copper); }
.pub-mobile-cta {
  margin: 0.5rem 2rem 0;
  padding: 0.6rem 1.25rem !important;
  background: var(--c-orange) !important;
  color: var(--c-card) !important;
  font-weight: 700 !important;
  text-align: center;
  border: none !important;
  border-radius: 5px !important;
}
.pub-mobile-portal {
  border-top: 2px solid var(--c-border-soft) !important;
  color: var(--c-muted) !important;
  font-size: 0.8rem !important;
}
.pub-mobile-label {
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-muted); padding: 0.6rem 2rem 0.25rem;
}

/* ─── Public second-layer (contextual) nav ─── */
.pub-subnav {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-silver-border);
}
.pub-subnav-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 46px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow-x: auto;
}
.pub-subnav-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-steel-muted); margin-right: 0.6rem; white-space: nowrap; flex-shrink: 0;
}
.pub-subnav-inner a {
  padding: 0.4rem 0.8rem; font-size: 0.82rem; font-weight: 600;
  color: var(--c-muted); text-decoration: none; border-radius: var(--radius); white-space: nowrap;
}
.pub-subnav-inner a:hover { color: var(--c-teal); background: var(--c-silver); }
.pub-subnav-inner a.active { color: var(--c-teal); background: var(--c-silver); box-shadow: inset 0 -2px 0 var(--c-copper); }


/* ─── Hero ─── */

.hero {
  background: var(--c-ground);
  color: var(--c-blue);
  padding: 5.5rem 2rem 4.5rem;
  text-align: center;
  border-bottom: 1px solid var(--c-border);
}

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

.hero-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 1.5rem;
}

.hero-headline {
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--c-blue);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.hero-word {
  color: var(--c-orange);
  display: inline;
  transition: opacity 0.28s ease;
}
.hero-word.fading { opacity: 0; }

.hero-sub {
  font-size: 1.05rem;
  color: var(--c-muted);
  max-width: 580px;
  margin: 1.4rem auto 2rem;
  line-height: 1.65;
}

.hero-ctas {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.hero-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-ground);
  transition: background 0.3s;
  cursor: pointer;
  border: none;
  padding: 0;
}
.hero-dot.active { background: var(--c-orange); }
.hero-dot:hover  { background: var(--c-orange); }


/* ─── Buttons (public additions) ─── */

.btn-outline-white {
  background: transparent;
  color: var(--c-card);
  border: 1.5px solid rgba(255,255,255,0.45);
  border-radius: 5px;
  padding: 0.55rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: border-color 0.15s;
}
.btn-outline-white:hover { border-color: var(--c-card); color: var(--c-card); }

.btn-white {
  background: var(--c-card);
  color: var(--c-orange);
  border-radius: 5px;
  padding: 0.55rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 0.12s;
}
.btn-white:hover { background: var(--c-surface-2); color: var(--c-orange); }

.btn-full { width: 100%; text-align: center; }


/* ─── Shared public section ─── */

.pub-section {
  padding: 4.5rem 2rem;
  background: var(--c-ground);
}

.pub-section-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.pub-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 0.75rem;
}

.pub-section h2 {
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  font-weight: 800;
  color: var(--c-blue);
  letter-spacing: -0.02em;
  margin-bottom: 0.85rem;
  line-height: 1.2;
}

.pub-section p {
  color: var(--c-muted);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 720px;
}

.pub-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: var(--c-blue);
  line-height: 1.5;
}

.feature-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c-orange);
  flex-shrink: 0;
  margin-top: 0.45rem;
}


/* ─── Programs strip (home) ─── */

.prog-strip {
  background: var(--c-card);
  padding: 4rem 2rem;
  border-top: 1px solid var(--c-border-soft);
  border-bottom: 1px solid var(--c-border-soft);
}

.prog-strip-hd {
  max-width: 1140px;
  margin: 0 auto 2.25rem;
}

.prog-strip-hd h2 {
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  font-weight: 800;
  color: var(--c-blue);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.prog-strip-sub {
  font-size: 0.95rem;
  color: var(--c-muted);
  max-width: 560px;
}

.prog-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-soft);
}

.prog-tile {
  background: var(--c-card);
  padding: 2rem 1.75rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border-top: 3px solid transparent;
  transition: background 0.12s, border-top-color 0.12s;
}
.prog-tile:hover { background: var(--c-border-soft); border-top-color: var(--c-orange); }

.prog-tile-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.prog-tile-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--c-blue);
  line-height: 1.25;
}

.prog-tile-desc {
  font-size: 0.875rem;
  color: var(--c-muted);
  line-height: 1.6;
  flex: 1;
}

.prog-tile-arrow {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-orange);
  margin-top: 0.5rem;
}


/* ─── Credit types strip ─── */

.credit-strip {
  background: var(--c-surface-2);
  padding: 2rem 2rem;
  border-top: 1px solid var(--c-border-strong);
  border-bottom: 1px solid var(--c-border-strong);
}

.credit-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.credit-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 0.85rem;
}

.credit-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.credit-pill {
  padding: 0.4rem 0.95rem;
  background: var(--c-tint-blue);
  border: 1px solid var(--c-border-strong);
  border-radius: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--c-blue-deep);
  letter-spacing: 0.04em;
  white-space: nowrap;
}


/* ─── Proof strip ─── */

.proof-strip {
  background: var(--c-border-soft);
  padding: 3rem 2rem;
}

.proof-grid {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--c-border);
}

.proof-item {
  padding: 1.75rem;
  border-right: 1px solid var(--c-border-soft);
}
.proof-item:last-child { border-right: none; }

.proof-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--c-blue);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.proof-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 0.35rem;
}


/* ─── Testimonials (home) ─── */

.testimonials {
  padding: 4.5rem 2rem;
  background: var(--c-card);
}

.testimonials-inner {
  max-width: 1140px;
  margin: 0 auto;
}

.testimonials .pub-section-label { color: var(--c-orange); }

.testimonials h2 {
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  font-weight: 800;
  color: var(--c-blue);
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
  line-height: 1.2;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.testimonial-card {
  margin: 0;
  padding: 1.75rem;
  background: var(--c-ground);
  border-top: 2px solid var(--c-orange);
  display: flex;
  flex-direction: column;
}

.testimonial-card blockquote {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--c-blue);
  flex: 1;
}

.testimonial-card figcaption {
  margin-top: 1.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}


/* ─── Resource services (home) ─── */

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 2rem;
}

.resource-item {
  padding: 1.5rem;
  border: 1px solid var(--c-border-soft);
  border-top: 2px solid var(--c-orange);
  background: var(--c-card);
}

.resource-item h3 {
  font-size: 0.95rem;
  color: var(--c-blue);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.resource-item p {
  font-size: 0.865rem;
  color: var(--c-muted);
  line-height: 1.55;
  max-width: none;
}


/* ─── CTA section ─── */

.cta-section {
  background: var(--c-blue);
  padding: 4.5rem 2rem;
  text-align: center;
}

.cta-section h2 {
  color: var(--c-card);
  font-size: clamp(1.4rem, 2.8vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
}

.cta-section p {
  color: rgba(255,255,255,0.82);
  max-width: 500px;
  margin: 0 auto 2rem;
  font-size: 1rem;
  line-height: 1.6;
}

.cta-btns {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}


/* ─── Footer ─── */

.pub-footer {
  background: var(--c-blue);
  color: rgba(255,255,255,0.5);
  padding: 2.5rem 2rem;
}

.pub-footer-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pub-footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pub-footer-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
}

.pub-footer-location {
  font-size: 0.8rem;
}

.pub-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 1rem;
}

.pub-footer-links a {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.12s;
}
.pub-footer-links a:hover { color: var(--c-orange); }

.pub-footer-legal {
  font-size: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 0.75rem;
}
.pub-footer-legal a {
  color: rgba(255,255,255,0.5);
  text-decoration: none;
}
.pub-footer-legal a:hover { color: var(--c-orange); }


/* ─── Interior page hero ─── */

.page-hero {
  background: var(--c-blue);
  padding: 4rem 2rem 3.5rem;
}

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

.page-hero-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 0.85rem;
}

.page-hero h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: var(--c-card);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 0.85rem;
}

.page-hero-sub {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.68);
  max-width: 620px;
  line-height: 1.65;
  margin-bottom: 1.75rem;
}


/* ─── Spec Shaman aside ─── */

.spec-shaman-aside {
  display: flex;
  align-items: flex-start;
  padding-top: 0.5rem;
}

.spec-shaman-card {
  background: var(--c-blue);
  color: var(--c-card);
  padding: 2rem 2rem 2.25rem;
  border-left: 4px solid var(--c-orange);
  width: 100%;
}

.spec-shaman-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 0.75rem;
}

.spec-shaman-desc {
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.88);
  margin: 0;
}

/* ─── ASP stat column ─── */

.asp-stat-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--c-border-soft);
}

.asp-stat-box {
  background: var(--c-card);
  padding: 1.5rem 1.75rem;
  border-left: 3px solid var(--c-orange);
}

.asp-stat-val {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--c-blue);
  letter-spacing: -0.02em;
}

.asp-stat-lbl {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 0.25rem;
}

.audience-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}


/* ─── CE formats grid ─── */

.ce-formats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-soft);
  margin-top: 2rem;
}

.ce-format-card {
  background: var(--c-card);
  padding: 1.75rem;
  border-top: 3px solid transparent;
  transition: border-top-color 0.12s;
}
.ce-format-card:hover { border-top-color: var(--c-orange); }

.ce-format-num {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: var(--c-orange);
  margin-bottom: 0.5rem;
}

.ce-format-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-blue);
  margin-bottom: 0.5rem;
}

.ce-format-card p {
  font-size: 0.875rem;
  color: var(--c-muted);
  line-height: 1.55;
  max-width: none;
}


/* ─── Package cards ─── */

.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-soft);
}

.package-card {
  background: var(--c-card);
  padding: 1.75rem;
  border-top: 3px solid var(--c-orange);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.package-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-blue);
}

.package-desc {
  font-size: 0.875rem;
  color: var(--c-muted);
  line-height: 1.55;
  flex: 1;
  margin: 0;
}


/* ─── About page ─── */

.about-fact-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--c-border-soft);
}

.about-fact {
  background: var(--c-card);
  padding: 1.25rem 1.5rem;
  border-left: 3px solid var(--c-orange);
}

.about-fact-val {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--c-blue);
  letter-spacing: -0.01em;
}

.about-fact-lbl {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 0.2rem;
}

.family-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.family-item {
  padding: 1.25rem 1.5rem;
  background: var(--c-card);
  border-top: 2px solid var(--c-orange);
  border: 1px solid var(--c-border-soft);
  border-top: 2px solid var(--c-orange);
}

.family-link {
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-blue);
  text-decoration: none;
}
.family-link:hover { color: var(--c-orange); text-decoration: underline; }

.family-desc {
  font-size: 0.875rem;
  color: var(--c-muted);
  line-height: 1.55;
  margin-top: 0.4rem;
}


/* ─── Schedules page ─── */

.schedule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-soft);
}

.schedule-block {
  background: var(--c-card);
  padding: 1.75rem;
}

.schedule-block-head {
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--c-border-soft);
}

.schedule-tour-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-orange);
}


/* ─── Contact page ─── */

.contact-page {
  max-width: 1140px;
  margin: 0 auto;
  padding: 4rem 2rem;
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 4rem;
  align-items: start;
}

.contact-page .pub-section-label { margin-bottom: 0.5rem; }

.contact-page h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-blue);
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

.contact-process {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.process-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.process-num {
  width: 1.75rem;
  height: 1.75rem;
  background: var(--c-orange);
  color: var(--c-card);
  font-size: 0.75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.process-step h4 {
  font-size: 0.95rem;
  color: var(--c-blue);
  margin-bottom: 0.2rem;
  font-weight: 700;
}

.process-step p {
  font-size: 0.875rem;
  color: var(--c-muted);
  margin: 0;
  max-width: none;
  line-height: 1.55;
}

.contact-sidebar-aside {
  margin-top: 2.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--c-card);
  border-left: 3px solid var(--c-orange);
  border: 1px solid var(--c-border-soft);
  border-left: 3px solid var(--c-orange);
  font-size: 0.9rem;
  color: var(--c-blue);
}

.contact-form-box {
  background: var(--c-card);
  padding: 2rem;
  border-top: 3px solid var(--c-orange);
  border: 1px solid var(--c-border-soft);
  border-top: 3px solid var(--c-orange);
}

.contact-form-box .form-group { margin-bottom: 1rem; }

.contact-success {
  background: var(--c-card);
  padding: 2.5rem 2rem;
  border-top: 3px solid var(--c-blue);
  text-align: center;
}

.contact-success-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--c-blue);
  color: var(--c-card);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.contact-success h3 {
  font-size: 1.2rem;
  color: var(--c-blue);
  margin-bottom: 0.5rem;
}

.contact-success p {
  font-size: 0.9rem;
  color: var(--c-muted);
  max-width: 340px;
  margin: 0 auto;
}

.req { color: var(--c-orange); }


/* ─── Responsive ─── */

@media (max-width: 900px) {
  .pub-nav-links { display: none; }
  .pub-menu-btn  { display: flex; }
  .pub-subnav    { display: none; }
  .proof-grid    { grid-template-columns: repeat(2, 1fr); }
  .proof-item    { border-bottom: 1px solid rgba(255,255,255,0.08); }
  .proof-item:nth-child(even) { border-right: none; }
  .pub-two-col   { grid-template-columns: 1fr; gap: 2rem; }
  .prog-grid     { grid-template-columns: 1fr; }
  .schedule-grid { grid-template-columns: 1fr; }
  .contact-page  { grid-template-columns: 1fr; gap: 2.5rem; }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .hero { padding: 3.5rem 1.25rem 3rem; }
  .page-hero { padding: 3rem 1.25rem 2.5rem; }
  .pub-section { padding: 3rem 1.25rem; }
  .proof-grid  { grid-template-columns: 1fr; }
  .proof-item  { border-right: none; }
  .prog-strip  { padding: 3rem 1.25rem; }
  .cta-section { padding: 3rem 1.25rem; }
  .contact-page { padding: 2.5rem 1.25rem; }
  .testimonials { padding: 3rem 1.25rem; }
  .testimonial-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   Phase 4 — Prospect self-serve
   ============================================================ */

/* ─── Prospect nav ─── */

.prospect-body { background: var(--c-ground); min-height: 100vh; }

.prospect-nav {
  background: var(--c-blue);
  position: sticky;
  top: 0;
  z-index: 100;
}

.prospect-nav-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.prospect-logo {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 0;
}

.prospect-logo-name {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.prospect-logo-prog {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--c-card);
  margin-top: 1px;
}

.prospect-logo-bar {
  width: 18px;
  height: 2px;
  background: var(--c-orange);
  margin-top: 3px;
}

.prospect-nav-links {
  display: flex;
  align-items: center;
  gap: 0.1rem;
}

.prospect-nav-links a {
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  border-radius: 5px;
  transition: color 0.12s;
}
.prospect-nav-links a:hover { color: var(--c-card); }
.prospect-nav-links a.active { color: var(--c-card); }

.prospect-user-email {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  margin-left: 0.5rem;
  padding: 0 0.5rem;
  border-left: 1px solid rgba(255,255,255,0.15);
}

.prospect-signout {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45) !important;
  margin-left: 0.25rem;
}
.prospect-signout:hover { color: rgba(255,255,255,0.8) !important; }


/* ─── Prospect layout ─── */

.prospect-main {
  padding: 3rem 2rem 4rem;
}

.prospect-inner {
  max-width: 820px;
  margin: 0 auto;
}

.prospect-footer {
  background: var(--c-blue);
  padding: 1.25rem 2rem;
}

.prospect-footer-inner {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  gap: 1.5rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
}

.prospect-footer-inner a {
  color: rgba(255,255,255,0.4);
  text-decoration: none;
}
.prospect-footer-inner a:hover { color: var(--c-orange); }


/* ─── Prospect page head ─── */

.prospect-page-head {
  margin-bottom: 2rem;
}

.prospect-eyebrow {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 0.4rem;
}

.prospect-page-head h1 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--c-blue);
  letter-spacing: -0.02em;
}

.prospect-copper-bar {
  width: 32px;
  height: 2px;
  background: var(--c-orange);
  margin-top: 0.6rem;
}


/* ─── Quick action tiles ─── */

.prospect-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-soft);
  margin-bottom: 2rem;
}

.prospect-action-tile {
  background: var(--c-card);
  padding: 1.5rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border-top: 3px solid transparent;
  transition: background 0.12s, border-top-color 0.12s;
}
.prospect-action-tile:hover { background: var(--c-border-soft); border-top-color: var(--c-orange); }

.prospect-action-icon {
  font-size: 0.8rem;
  color: var(--c-orange);
  margin-bottom: 0.25rem;
}

.prospect-action-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--c-blue);
}

.prospect-action-desc {
  font-size: 0.8rem;
  color: var(--c-muted);
  line-height: 1.5;
}


/* ─── Prospect section ─── */

.prospect-section {
  background: var(--c-card);
  border: 1px solid var(--c-border-soft);
  border-top: 2px solid var(--c-orange);
  margin-bottom: 1.5rem;
  padding: 1.5rem;
}

.prospect-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--c-border-soft);
}

.prospect-section-head h2 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--c-blue);
  margin: 0;
}

.prospect-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.prospect-table th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-border-soft);
}

.prospect-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--c-border-soft);
  vertical-align: middle;
}

.prospect-table tr:last-child td { border-bottom: none; }

.prospect-empty {
  padding: 2rem 0;
  text-align: center;
  color: var(--c-muted);
  font-size: 0.875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.prospect-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.prospect-detail-table tr { border-bottom: 1px solid var(--c-border-soft); }
.prospect-detail-table tr:last-child { border-bottom: none; }
.prospect-detail-table td { padding: 0.55rem 0; }

.detail-label {
  width: 140px;
  color: var(--c-muted);
  font-size: 0.82rem;
}

.prospect-note {
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--c-muted);
  line-height: 1.55;
  border-top: 1px solid var(--c-border-soft);
  padding-top: 0.85rem;
}


/* ─── Prospect form card ─── */

.prospect-form-card {
  background: var(--c-card);
  border: 1px solid var(--c-border-soft);
  border-top: 2px solid var(--c-orange);
  padding: 2rem;
}


/* ─── Request type tiles ─── */

.request-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-soft);
  margin-top: 0.5rem;
}

.request-type-tile {
  background: var(--c-card);
  padding: 1rem 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-top: 2px solid transparent;
  transition: background 0.1s, border-top-color 0.1s;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-blue);
  font-size: 0.875rem;
}

.request-type-tile input[type=radio] {
  width: auto;
  margin: 0;
  accent-color: var(--c-orange);
  flex-shrink: 0;
}

.request-type-tile:hover { background: var(--c-surface-2); }
.request-type-tile.selected { border-top-color: var(--c-orange); background: var(--c-border-soft); }

.request-type-name { font-weight: 600; color: var(--c-blue); }

.form-hint {
  font-size: 0.78rem;
  color: var(--c-muted);
  margin-top: 0.35rem;
}


/* ─── Request status badges (shared: prospect + portal) ─── */

.req-status {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 5px;
}

.req-status-pending   { background: var(--c-orange); color: var(--c-ink); }
.req-status-reviewing { background: var(--c-blue-accent); color: var(--c-card); }
.req-status-scheduled { background: var(--c-green); color: var(--c-card); }
.req-status-completed { background: var(--c-blue); color: var(--c-card); }
.req-status-declined  { background: var(--c-red); color: var(--c-card); }


/* ─── Portal requests page extras ─── */

.req-message-row td {
  background: var(--c-surface-2);
}

.empty-state {
  padding: 3rem 2rem;
  text-align: center;
  color: var(--c-muted);
  font-size: 0.9rem;
}


/* ─── Responsive (prospect) ─── */

@media (max-width: 720px) {
  .prospect-actions { grid-template-columns: 1fr; }
  .prospect-nav-links { gap: 0; }
  .prospect-user-email { display: none; }
  .request-type-grid { grid-template-columns: 1fr; }
}


/* ─── Terms page ─── */

.terms-body h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-blue);
  margin: 2rem 0 .5rem;
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--c-border);
}
.terms-body h2:first-child { margin-top: 0; }
.terms-body p { margin-bottom: 1rem; line-height: 1.7; }
.terms-body a { color: var(--c-blue); text-decoration: underline; }


/* ─── Analytics page ─── */

.analytics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
}
.analytics-section-label {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-muted);
  margin-bottom: 1rem;
  font-weight: 600;
}
.analytics-note {
  margin-top: 2rem;
  font-size: .78rem;
  color: var(--c-muted);
}

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

/* ── User detail page ─────────────────────────────────────────────── */
.user-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--c-card);
  border-left: 3px solid var(--c-orange);
  flex-wrap: wrap;
}
.caps-warn {
  display: none;
  font-size: 0.75rem;
  color: var(--c-copper);
  margin-top: 0.3rem;
}


/* ============================================================
   Status badges (account state) + internal marker
   ============================================================ */

.badge-active  { background: var(--c-ok-bg); color: var(--c-ok-fg); }
.badge-blocked { background: var(--c-red); color: var(--c-card); }
.badge-warn    { background: var(--c-warn-bg); color: var(--c-warn-fg); }

.risk-badge {
  display: inline-block; margin-left: 0.4rem;
  padding: 0.1rem 0.4rem; border-radius: 3px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.risk-badge--overdue { background: var(--c-red); color: var(--c-card); }
.risk-badge--soon    { background: var(--c-orange); color: var(--c-ink); }

/* Internal-only document marker */
.internal-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  background: var(--c-teal);
  color: var(--c-card);
  vertical-align: middle;
}
.shareable-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
  background: var(--c-ok-bg);
  color: var(--c-ok-fg);
  vertical-align: middle;
}


/* ============================================================
   Admin area distinction
   ============================================================ */

.portal-pagehead.is-admin { border-top: 2px solid var(--c-copper); }
.admin-pill {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.12rem 0.5rem;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* Was copper-on-copper: 1.00:1, an invisible label on every admin page. The
     orange identity now lives in the tint + border; the text uses ink so 0.58rem
     type is actually legible (14.2:1 light, 11.4:1 dark). */
  color: var(--c-ink);
  background: var(--c-warn-bg);
  border: 1px solid var(--c-orange);
  border-radius: var(--radius);
  vertical-align: middle;
}
.crumb {
  font-size: 0.78rem;
  color: var(--c-muted);
  margin: -0.5rem 0 1.25rem;
}
.crumb a { color: var(--c-muted); }
.crumb a:hover { color: var(--c-copper); }


/* ============================================================
   Dashboard — overview, queues, activity
   ============================================================ */

.dash-greeting { margin-bottom: 0.35rem; }
.dash-greeting h2 { font-size: 1.4rem; color: var(--c-teal); }
.dash-sub { font-size: 0.9rem; color: var(--c-muted); margin-bottom: 1.75rem; max-width: 720px; }

/* Dashboard header row: greeting on the left, compact Quick-links tile top-right (T-081) */
.dash-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.dash-top .dash-greeting { margin-bottom: 0; }
.dash-quicktile { flex: 0 0 auto; min-width: 240px; max-width: 340px; background: var(--c-card); border: 1px solid var(--c-rule); border-radius: 8px; padding: 0.7rem 0.95rem; }
.dash-quicktile h5 { margin: 0 0 0.55rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); font-weight: 700; }
@media (max-width: 720px) { .dash-quicktile { max-width: none; width: 100%; } }

.dash-onboard-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--c-surface-2); border: 1px solid var(--c-orange); border-left: 4px solid var(--c-copper);
  border-radius: 4px; padding: 0.9rem 1.25rem; margin-bottom: 1.25rem;
}
.dash-onboard-body { font-size: 0.9rem; color: var(--c-ink); }
@media (max-width: 600px) { .dash-onboard-banner { flex-direction: column; align-items: flex-start; } }

/* Stat strip — each stat is a link */
.stat-strip .stat-item { text-decoration: none; display: block; transition: background 0.12s; }
a.stat-item:hover { background: var(--c-surface-2); }
.stat-sub { font-size: 0.72rem; color: var(--c-muted); margin-top: 0.25rem; }

.dash-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .dash-cols { grid-template-columns: minmax(0, 1fr); } }

.dash-panel {
  background: var(--c-card);
  border: 1px solid var(--c-rule);
  border-top: 2px solid var(--c-teal);
}
.dash-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--c-rule);
}
.dash-panel-head h3 { font-size: 0.95rem; color: var(--c-teal); }
.dash-panel-head a { font-size: 0.78rem; font-weight: 600; }

.dash-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.25rem;
  border-bottom: 1px solid var(--c-rule);
  text-decoration: none;
  color: var(--c-text);
}
.dash-row:last-child { border-bottom: none; }
.dash-row:hover { background: var(--c-surface-2); }
.dash-row-main { min-width: 0; }
.dash-row-title { font-size: 0.875rem; font-weight: 600; color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-row-sub { font-size: 0.78rem; color: var(--c-muted); margin-top: 1px; }
.dash-row-meta { font-size: 0.72rem; color: var(--c-muted); white-space: nowrap; flex-shrink: 0; }

.dash-empty { padding: 1.5rem 1.25rem; font-size: 0.85rem; color: var(--c-muted); text-align: center; }

/* Quick links row */
.quick-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.quick-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  background: var(--c-card);
  border: 1px solid var(--c-rule-strong);
  border-radius: var(--radius);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-teal);
  text-decoration: none;
}
.quick-link:hover { border-color: var(--c-copper); color: var(--c-copper); }


/* ============================================================
   Library — grouped, document-context surfacing
   ============================================================ */

.lib-group { margin-bottom: 2rem; }
.lib-group-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--c-rule);
}
.lib-group-head h3 { font-size: 0.95rem; color: var(--c-teal); }
.lib-group-head .count { font-size: 0.75rem; color: var(--c-muted); }

.lib-doc-name { font-weight: 600; }
.lib-doc-desc { font-size: 0.82rem; color: var(--c-muted); margin-top: 3px; line-height: 1.5; max-width: 640px; }

/* Catalog-preview empty state (greyed expected docs) */
.lib-preview-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px dashed var(--c-rule);
  opacity: 0.65;
}
.lib-preview-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-rule-strong); margin-top: 0.4rem; flex-shrink: 0; }


/* Shared section heading used by the settings page and several portal forms.
   (The standalone Settings chrome was retired — Site Settings now lives inside
   the portal shell under the Admin area.) */
.settings-h2 { font-size: 1.3rem; color: var(--c-teal); margin-bottom: 0.5rem; }

/* Project Log (admin) */
/* .log-view: never a nested scroll window — flows with the page, browser scrolls. */
.log-view {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  line-height: 1.55;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  padding: 1rem 1.1rem;
}
.log-line { white-space: pre-wrap; word-break: break-word; min-height: 0.55rem; }

/* ============================================================
   DesignProLeads Academy — curriculum styles
   ============================================================ */

/* ── Curriculum home ────────────────────────────────────────── */
.acad-certified-banner {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--c-blue); color: var(--c-card);
  padding: 0.75rem 1.1rem; border-radius: 8px;
  font-size: 0.9rem; margin-bottom: 1.5rem;
}
.acad-cert-icon { width: 18px; height: 18px; flex-shrink: 0; }
.acad-cert-link { color: var(--c-orange); margin-left: auto; white-space: nowrap; }
.acad-cert-link:hover { color: var(--c-card); }

.acad-progress-wrap { margin-bottom: 1.25rem; }
.acad-progress-meta {
  display: flex; justify-content: space-between;
  font-size: 0.82rem; color: var(--c-muted); margin-bottom: 0.35rem;
}
.acad-progress-label { font-weight: 600; }
.acad-progress-bar-bg {
  height: 8px; background: var(--c-border-soft); border-radius: 4px; overflow: hidden;
}
.acad-progress-bar-fill {
  height: 100%; background: var(--c-orange); border-radius: 4px;
  transition: width 0.4s ease;
}

.acad-resume-row { margin-bottom: 1.75rem; }

.acad-track-card {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: 10px;
  overflow: hidden; margin-bottom: 1.5rem;
}
.acad-track-header {
  padding: 1.25rem 1.5rem 1rem; border-bottom: 1px solid var(--c-border-soft);
}
.acad-track-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--c-orange); margin-bottom: 0.35rem;
}
.acad-track-title {
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 1.4rem; color: var(--c-blue); margin-bottom: 0.4rem;
}
.acad-track-sub { font-size: 0.88rem; color: var(--c-muted); }

.acad-lesson-list { list-style: none; }
.acad-lesson-row {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--c-border-soft);
}
.acad-lesson-row:last-child { border-bottom: none; }
.acad-lesson-row.active { background: var(--c-ground); }

.acad-lesson-status { flex-shrink: 0; }
.acad-status-icon { width: 22px; height: 22px; display: block; }

.acad-lesson-info { flex: 1; min-width: 0; }
.acad-lesson-num { display: block; font-size: 0.72rem; color: var(--c-muted); }
.acad-lesson-name { font-weight: 600; font-size: 0.92rem; color: var(--c-blue); }
.acad-lesson-tag {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--c-surface-2); color: var(--c-muted);
  padding: 1px 7px; border-radius: 10px; margin-left: 0.4rem; vertical-align: middle;
}
.acad-lesson-action { flex-shrink: 0; }
.acad-action-link { font-size: 0.85rem; color: var(--c-blue); }
.acad-action-link:hover { color: var(--c-orange); }
.acad-action-locked { font-size: 0.78rem; color: var(--c-muted-2); }

.acad-docs-section {
  border: 1px solid var(--c-border); border-radius: 8px;
  background: var(--c-ground); margin-bottom: 2rem;
}
.acad-docs-summary {
  padding: 0.85rem 1.1rem; cursor: pointer; font-weight: 600;
  font-size: 0.88rem; color: var(--c-blue); list-style: none;
}
.acad-docs-summary::-webkit-details-marker { display: none; }
.acad-docs-summary::before { content: '▸ '; color: var(--c-orange); }
details[open] .acad-docs-summary::before { content: '▾ '; }
.acad-docs-body { padding: 0 1.1rem 0.5rem; font-size: 0.875rem; color: var(--c-muted); }
.acad-docs-list {
  list-style: none; padding: 0 1.1rem 1rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.4rem;
}
.acad-docs-list li { font-size: 0.875rem; }

.program-compare-wrap { overflow-x: auto; padding: 0 1.1rem 1.1rem; }
.program-compare-table {
  width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.program-compare-table th,
.program-compare-table td {
  padding: 0.45rem 0.75rem; border: 1px solid var(--c-border); text-align: left; vertical-align: top;
}
.program-compare-table thead th { background: var(--c-surface-2); font-weight: 700; font-size: 0.8rem; }
.program-compare-table tbody tr:nth-child(even) td { background: var(--c-card); }
.program-compare-attr { width: 18%; font-weight: 600; color: var(--c-blue); white-space: nowrap; }
.program-compare-asp { width: 41%; }
.program-compare-ce { width: 41%; }
.program-compare-table thead .program-compare-asp { color: var(--c-blue); }
.program-compare-table thead .program-compare-ce { color: var(--c-muted); }

/* ── Lesson page ─────────────────────────────────────────────── */
.lesson-breadcrumb {
  font-size: 0.8rem; color: var(--c-muted);
  display: flex; align-items: center; gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.lesson-breadcrumb a { color: var(--c-blue); }
.lesson-breadcrumb a:hover { color: var(--c-orange); }

.lesson-flash { margin-bottom: 1.25rem; }

.lesson-wrap {
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: 10px; overflow: hidden; max-width: 820px;
}

.lesson-header {
  padding: 1.5rem 1.75rem 1.25rem;
  border-bottom: 1px solid var(--c-border-soft);
  position: relative;
}
.lesson-track-badge {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--c-orange); margin-bottom: 0.5rem;
}
.lesson-title {
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 1.75rem; color: var(--c-blue); font-weight: 700;
}
.lesson-done-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--c-surface-2); color: var(--c-green);
  font-size: 0.78rem; font-weight: 600;
  padding: 2px 10px; border-radius: 10px;
  margin-top: 0.5rem;
}

.lesson-body { padding: 1.75rem; }

.lesson-section { margin-bottom: 2rem; }
.lesson-section h2 {
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 1.2rem; color: var(--c-blue);
  margin-bottom: 0.65rem; font-weight: 700;
}
.lesson-section p { font-size: 0.925rem; color: var(--c-ink); margin-bottom: 0.8rem; line-height: 1.65; }
.lesson-section-label {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-orange); margin-bottom: 0.3rem;
}
.lesson-section-warn .lesson-section-label { color: var(--c-orange-deep); }

.key-facts-box {
  background: var(--c-surface-2); border-left: 4px solid var(--c-blue);
  border-radius: 0 8px 8px 0; padding: 1rem 1.25rem;
  margin: 0 1.75rem 2rem;
}
.key-facts-heading {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--c-blue); margin-bottom: 0.6rem;
}
.key-facts-list { list-style: none; }
.key-facts-list li {
  font-size: 0.9rem; color: var(--c-blue); padding: 0.25rem 0;
  padding-left: 1rem; position: relative;
}
.key-facts-list li::before {
  content: '·'; position: absolute; left: 0;
  color: var(--c-orange); font-weight: 700;
}

.how-to-say-it {
  background: var(--c-ground); border: 1px solid var(--c-border);
  border-radius: 8px; padding: 1rem 1.25rem; margin-top: 0.5rem;
}
.how-to-say-it-warn { border-color: var(--c-orange); background: var(--c-surface-2); }
.hts-prompt { font-size: 0.82rem; color: var(--c-muted); margin-bottom: 0.5rem; }
.hts-quote {
  font-size: 0.93rem; color: var(--c-blue); line-height: 1.65;
  border-left: 3px solid var(--c-blue); padding-left: 0.85rem;
  margin: 0 0 0.65rem; font-style: italic;
}
.hts-quote-primary { border-left-color: var(--c-orange); font-style: normal; font-weight: 600; }
.hts-note { font-size: 0.8rem; color: var(--c-muted); border-top: 1px solid var(--c-border); padding-top: 0.6rem; }

/* ── ASP meeting anatomy timeline ───────────────────────────── */
.asp-timeline { margin: 0.5rem 0 1.5rem; }
.asp-tl-bar {
  display: flex; height: 44px; border-radius: 6px; overflow: hidden;
  margin-bottom: 0.35rem;
}
.asp-tl-seg {
  position: relative; cursor: default; transition: filter 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.asp-tl-seg:hover, .asp-tl-seg:focus { filter: brightness(1.1); outline: none; }
.asp-tl-intro  { background: var(--c-border-soft); }
.asp-tl-p1     { background: var(--c-blue); }
.asp-tl-p2     { background: var(--c-blue); }
.asp-tl-p3     { background: var(--c-blue); }
.asp-tl-p4     { background: var(--c-blue); }
.asp-tl-close  { background: var(--c-orange); }

.asp-tl-labels,
.asp-tl-durations {
  display: flex; gap: 2px;
}
.asp-tl-labels span { font-size: 0.72rem; font-weight: 700; color: var(--c-blue); text-align: center; }
.asp-tl-durations span { font-size: 0.68rem; color: var(--c-muted); text-align: center; }
.asp-tl-caption { font-size: 0.78rem; color: var(--c-muted); margin-top: 0.5rem; font-style: italic; }

.asp-tl-tip {
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--c-blue); color: var(--c-card);
  font-size: 0.75rem; white-space: nowrap;
  padding: 3px 8px; border-radius: 4px; pointer-events: none;
  opacity: 0; transition: opacity 0.15s; z-index: 10;
}
.asp-tl-tip.visible { opacity: 1; }

/* ── Regions grid ───────────────────────────────────────────── */
.region-grid {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 1rem;
}
.region-chip {
  background: var(--c-surface-2); border: 1px solid var(--c-border-strong);
  color: var(--c-blue); font-size: 0.85rem; font-weight: 600;
  padding: 0.3rem 0.85rem; border-radius: 20px;
}

/* ── 4-phase track ──────────────────────────────────────────── */
.phase-track {
  display: flex; align-items: flex-start; gap: 0.5rem;
  flex-wrap: wrap; margin: 1rem 0 1.5rem;
}
.phase-step {
  flex: 1; min-width: 150px;
  background: var(--c-ground); border: 1px solid var(--c-border);
  border-radius: 8px; padding: 0.85rem;
}
.phase-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-blue); color: var(--c-card);
  font-size: 0.85rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.5rem;
}
.phase-name { font-weight: 700; font-size: 0.88rem; color: var(--c-blue); margin-bottom: 0.25rem; }
.phase-desc { font-size: 0.82rem; color: var(--c-muted); line-height: 1.5; }
.phase-arrow {
  font-size: 1.1rem; color: var(--c-muted-2); padding-top: 1rem; flex-shrink: 0;
  align-self: center;
}

/* ── Sample lead report callout ─────────────────────────────── */
.sample-report-callout {
  border: 1px solid var(--c-border); border-radius: 8px;
  overflow: hidden; margin: 0.5rem 0 1.5rem;
}
.src-header {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--c-surface-2); padding: 0.6rem 1rem;
  font-size: 0.82rem; font-weight: 600; color: var(--c-blue);
  border-bottom: 1px solid var(--c-border);
}
.src-icon { width: 16px; height: 16px; color: var(--c-blue); }
.src-body { padding: 0.5rem 0; }
.src-row {
  display: grid; grid-template-columns: 2fr 1.5fr 1.5fr 1fr;
  gap: 0.5rem; padding: 0.4rem 1rem; font-size: 0.83rem;
}
.src-row-header {
  background: var(--c-ground); font-weight: 700; color: var(--c-muted);
  font-size: 0.75rem; border-bottom: 1px solid var(--c-border-soft);
}
.src-note {
  font-size: 0.78rem; color: var(--c-muted); padding: 0.6rem 1rem;
  border-top: 1px solid var(--c-border-soft); margin: 0;
}

/* ── Internal banner ────────────────────────────────────────── */
.internal-banner {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--c-surface-2); border: 1px solid var(--c-orange);
  border-radius: 8px; padding: 0.7rem 1rem;
  font-size: 0.85rem; color: var(--c-orange); margin-bottom: 1.5rem;
}
.internal-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Pricing table ──────────────────────────────────────────── */
.pricing-table-wrap { overflow-x: auto; margin: 0.75rem 0 1.5rem; }
.pricing-table {
  width: 100%; border-collapse: collapse; font-size: 0.875rem;
}
.pricing-table th {
  background: var(--c-surface-2); color: var(--c-blue); font-size: 0.78rem;
  font-weight: 700; text-align: left; padding: 0.55rem 0.85rem;
  border-bottom: 2px solid var(--c-border-strong);
}
.pricing-table td { padding: 0.55rem 0.85rem; border-bottom: 1px solid var(--c-border-soft); }
.pricing-table tr:hover td { background: var(--c-ground); }
.pricing-table tfoot td {
  background: var(--c-ground); font-size: 0.82rem; color: var(--c-muted);
  border-top: 2px solid var(--c-border); border-bottom: none;
}
.pricing-footer { padding: 0.6rem 0.85rem; }
.tier-badge {
  font-size: 0.72rem; font-weight: 700; background: var(--c-surface-2);
  color: var(--c-muted); padding: 1px 7px; border-radius: 10px;
}

/* ── Scenario card ──────────────────────────────────────────── */
.scenario-card {
  border: 1px solid var(--c-blue); border-radius: 8px; overflow: hidden;
  margin: 0.75rem 0 1.5rem;
}
.scenario-card-header {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--c-blue); padding: 0.65rem 1rem;
  color: var(--c-card);
}
.scenario-icon { width: 16px; height: 16px; }
.scenario-card-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; }
.scenario-card-body { padding: 0.75rem 1rem; }
.scenario-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.85rem; }
.scenario-dl dt { font-size: 0.78rem; font-weight: 700; color: var(--c-muted); align-self: start; }
.scenario-dl dd { font-size: 0.875rem; color: var(--c-blue); line-height: 1.55; }
.scenario-tasks { padding-left: 1.25rem; }
.scenario-tasks li { font-size: 0.9rem; color: var(--c-blue); margin-bottom: 0.4rem; line-height: 1.55; }

/* ── Knowledge check ────────────────────────────────────────── */
.know-check {
  border-top: 2px solid var(--c-border); padding: 1.75rem;
  background: var(--c-ground);
}
.know-check-heading {
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 1.2rem; color: var(--c-blue); margin-bottom: 0.3rem;
}
.know-check-sub { font-size: 0.82rem; color: var(--c-muted); margin-bottom: 1.25rem; }

.check-fieldset {
  border: none; margin-bottom: 1.5rem;
}
.check-question {
  font-size: 0.93rem; font-weight: 700; color: var(--c-blue);
  margin-bottom: 0.75rem; line-height: 1.5;
}
.check-option {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.5rem 0.75rem; border-radius: 6px; cursor: pointer;
  font-size: 0.88rem; color: var(--c-blue); margin-bottom: 0.25rem;
  border: 1px solid transparent; transition: background 0.1s, border-color 0.1s;
}
.check-option:hover { background: var(--c-surface-2); border-color: var(--c-border-strong); }
.check-option input[type="radio"] { margin-top: 2px; flex-shrink: 0; accent-color: var(--c-blue); }
.check-opt-text { line-height: 1.5; }

.know-check-footer { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.know-check-attempts { font-size: 0.8rem; color: var(--c-muted); }

/* ── Lesson nav ─────────────────────────────────────────────── */
.lesson-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.75rem; border-top: 1px solid var(--c-border-soft);
  flex-wrap: wrap; gap: 0.5rem;
}
.lesson-nav-prev { font-size: 0.88rem; color: var(--c-blue); }
.lesson-nav-prev:hover { color: var(--c-orange); }
.lesson-nav-next { margin-left: auto; }

/* Floating "take the check" anchor — JS-injected */
.lesson-check-anchor {
  text-align: center; padding: 1rem 1.75rem 0;
}

/* ── Certificate ────────────────────────────────────────────── */
.cert-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: 0.5rem;
}
.cert-wrap {
  max-width: 740px; margin: 0 auto;
}
.cert-border {
  border: 6px double var(--c-blue); border-radius: 4px;
  padding: 3rem 3.5rem; background: var(--c-card);
  text-align: center;
}
.cert-header { margin-bottom: 2rem; }
.cert-logo { height: 36px; width: auto; margin-bottom: 0.85rem; }
.cert-academy-name {
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 1.1rem; font-style: italic; color: var(--c-orange);
  letter-spacing: 0.04em;
}

.cert-body { margin-bottom: 2.5rem; }
.cert-presents { font-size: 0.9rem; color: var(--c-muted); margin-bottom: 0.4rem; }
.cert-name {
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 2.2rem; color: var(--c-blue); font-weight: 700;
  margin-bottom: 0.5rem; line-height: 1.2;
}
.cert-has-completed { font-size: 0.9rem; color: var(--c-muted); margin-bottom: 0.75rem; }
.cert-program {
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 1.4rem; color: var(--c-blue); font-weight: 700;
  margin-bottom: 1rem; line-height: 1.3;
}
.cert-program-sub { font-size: 1rem; font-weight: 400; font-style: italic; }
.cert-body-text {
  font-size: 0.85rem; color: var(--c-muted); max-width: 480px;
  margin: 0 auto; line-height: 1.65;
}

.cert-footer {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-top: 2rem; border-top: 1px solid var(--c-border);
}
.cert-sig-line {
  width: 180px; border-bottom: 1px solid var(--c-blue); margin-bottom: 0.4rem;
}
.cert-sig-label { font-size: 0.78rem; color: var(--c-muted); }
.cert-date { font-size: 0.95rem; font-weight: 700; color: var(--c-blue); }
.cert-date-label { font-size: 0.78rem; color: var(--c-muted); }

/* ── Print styles ────────────────────────────────────────────── */
@media print {
  .no-print,
  .portal-top,
  .portal-drawer,
  .nav-overlay,
  .portal-pagehead,
  .lesson-breadcrumb,
  .lesson-flash,
  .know-check,
  .lesson-nav,
  .lesson-check-anchor,
  .acad-docs-section { display: none !important; }

  body, .portal-main, .portal-content {
    background: var(--c-card) !important;
    padding: 0 !important; margin: 0 !important;
  }
  .cert-wrap { max-width: 100%; margin: 0; }
  .cert-border { border: 4px double var(--c-blue); padding: 2cm 2.5cm; }
  .cert-name { font-size: 2rem; }
}

/* ── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 600px) {
  .phase-track { flex-direction: column; }
  .phase-arrow { display: none; }
  .asp-tl-labels span,
  .asp-tl-durations span { font-size: 0.6rem; }
  .src-row { grid-template-columns: 1fr 1fr; }
  .src-row > span:nth-child(3),
  .src-row > span:nth-child(4) { display: none; }
  .cert-border { padding: 1.5rem; }
  .cert-footer { flex-direction: column; gap: 1rem; align-items: flex-start; }
  .scenario-dl { grid-template-columns: 1fr; }
  .scenario-dl dt { margin-top: 0.5rem; }
}


/* ─── Interior page hero — V2 light style ─── */

.page-hero {
  background: var(--c-ground);
  border-bottom: 1px solid var(--c-border-soft);
  padding: 4rem 2rem 3.5rem;
}

.page-hero h1 {
  color: var(--c-blue);
}

.page-hero-sub {
  color: var(--c-muted);
}


/* ─── Package comparison table ─── */

.package-features {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.package-features li {
  font-size: 0.85rem;
  color: var(--c-muted);
  padding-left: 1.1rem;
  position: relative;
}

.package-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--c-orange);
  font-weight: 700;
}

.pkg-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pkg-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 560px;
}

.pkg-compare-table thead th {
  background: var(--c-blue);
  color: var(--c-card);
  padding: 0.65rem 1rem;
  text-align: left;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.pkg-compare-table thead th:first-child {
  background: var(--c-blue);
}

.pkg-compare-table tbody tr:nth-child(even) td { background: var(--c-ground); }
.pkg-compare-table tbody tr:hover td { background: var(--c-surface-2); }

.pkg-compare-table td {
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--c-border-soft);
  color: var(--c-muted);
}

.pkg-compare-table td:first-child {
  font-weight: 600;
  color: var(--c-blue);
}

.pkg-compare-table .pkg-check {
  color: var(--c-blue);
  font-weight: 600;
}


/* ─── Battlecards ─── */

.bcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 1.25rem;
}

.bcard {
  background: var(--c-card);
  border: 1px solid var(--c-border-soft);
  border-top: 3px solid var(--c-blue);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bcard-cat {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 5px;
  margin-bottom: 0.85rem;
  width: fit-content;
}

.bcard-cat--roi         { background: var(--c-orange); color: var(--c-ink); }
.bcard-cat--quality     { background: var(--c-border-soft);    color: var(--c-blue); }
.bcard-cat--timing      { background: var(--c-green); color: var(--c-card); }
.bcard-cat--reach       { background: var(--c-blue-accent);  color: var(--c-card); }
.bcard-cat--competitive { background: var(--c-blue);   color: var(--c-card); }

.bcard-objection {
  font-style: italic;
  font-size: 1rem;
  color: var(--c-blue);
  margin: 0 0 1.1rem;
  padding: 0.75rem 1rem;
  background: var(--c-ground);
  border-left: 3px solid var(--c-orange);
  line-height: 1.5;
}

.bcard-section {
  margin-bottom: 0.85rem;
}

.bcard-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 0.3rem;
}

.bcard-section p {
  font-size: 0.88rem;
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0;
  max-width: none;
}

.bcard-proof {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--c-border-soft);
  font-size: 0.82rem;
  color: var(--c-muted);
  line-height: 1.55;
}

.bcard-proof-label {
  font-weight: 700;
  color: var(--c-blue);
}


/* ─── Subscription tiers ─── */

.tier-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.tier-summary-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.85rem 1.25rem;
  background: var(--c-card);
  border: 1px solid var(--c-border-soft);
  border-top: 3px solid var(--c-blue);
  text-decoration: none;
  color: inherit;
  min-width: 7rem;
  transition: border-color 0.15s, background 0.15s;
}

.tier-summary-card:hover { border-top-color: var(--c-orange); background: var(--c-surface-2); }
.tier-summary-card.active { border-top-color: var(--c-orange); background: var(--c-surface-2); }
.tier-summary-card--none { border-top-color: var(--c-border-strong); }
.tier-summary-card--all  { border-top-color: var(--c-blue); background: var(--c-ground); }

.tier-summary-count {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-blue);
  letter-spacing: -0.02em;
  line-height: 1;
}

.tier-summary-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-top: 0.35rem;
  text-align: center;
}

.tier-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  background: var(--c-surface-2);
  color: var(--c-blue);
  border-radius: 5px;
  white-space: nowrap;
}

.tier-pill--none {
  background: var(--c-surface-2);
  color: var(--c-muted);
}

.tier-change-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.tier-select {
  font-size: 0.8rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--c-border);
  border-radius: 3px;
  background: var(--c-card);
  color: var(--c-blue);
  max-width: 180px;
}

.btn-xs {
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
}

@media (max-width: 700px) {
  .bcard-grid { grid-template-columns: 1fr; }
  .tier-summary-row { gap: 0.5rem; }
  .tier-summary-card { min-width: 5.5rem; padding: 0.65rem 0.85rem; }
  .pkg-compare-table { font-size: 0.8rem; }
}

/* ── Phase 19: Track 3 Renewal Playbook + Member Personalization ─────────── */

/* Track 3 progress bar variant */
.acad-progress-bar-fill--t3 { background: var(--c-orange); }

/* Renewal certified banner variant */
.acad-certified-banner--renewal { background: linear-gradient(135deg, var(--c-orange), var(--c-orange)); }

/* Track 3 card accent */
.acad-track-card--t3 { border-left: 3px solid var(--c-orange); }
.acad-track-label--t3 { background: var(--c-orange); }

/* Lesson track badge variant */
.lesson-track-badge--t3 {
  background: var(--c-surface-2);
  color: var(--c-orange);
  border: 1px solid var(--c-border-soft);
}

/* Renewal timeline */
.acad-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1.5rem 0;
  border-left: 2px solid var(--c-blue);
  padding-left: 0;
}
.acad-timeline-item {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0 1rem;
  margin-bottom: 1.25rem;
  padding-left: 1.25rem;
  position: relative;
}
.acad-timeline-item::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 0.65rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-blue);
}
.acad-timeline-marker {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  text-align: center;
  white-space: nowrap;
  height: fit-content;
  align-self: start;
}
.acad-timeline-marker--open { background: var(--c-border-soft); color: var(--c-blue); }
.acad-timeline-marker--deck { background: var(--c-orange); color: var(--c-ink); }
.acad-timeline-marker--close { background: var(--c-red); color: var(--c-card); }
.acad-timeline-content { font-size: 0.93rem; color: var(--c-blue); line-height: 1.55; padding-top: 0.2rem; }

/* Scope grid for lesson 3.3 */
.acad-scope-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.acad-scope-card {
  background: var(--c-ground);
  border: 1px solid var(--c-border-soft);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  font-size: 0.9rem;
  color: var(--c-blue);
}
.acad-scope-card p { margin: 0.4rem 0 0; }
.acad-scope-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.acad-scope-card--up { border-top: 3px solid var(--c-green); }
.acad-scope-card--up .acad-scope-label { color: var(--c-green); }
.acad-scope-card--same { border-top: 3px solid var(--c-blue); }
.acad-scope-card--same .acad-scope-label { color: var(--c-blue); }
.acad-scope-card--down { border-top: 3px solid var(--c-orange); }
.acad-scope-card--down .acad-scope-label { color: var(--c-orange); }
.acad-scope-action {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--c-muted);
  margin-top: 0.5rem !important;
}

/* Member program card */
.member-program-card {
  display: flex;
  gap: 2rem;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-blue);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.member-program-main { flex: 1; }
.member-program-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-blue);
  margin-bottom: 0.35rem;
}
.member-program-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-blue);
  line-height: 1.3;
}
.member-program-tier {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--c-surface-2);
  color: var(--c-orange);
  border: 1px solid var(--c-border-soft);
  border-radius: 20px;
  padding: 0.2rem 0.65rem;
}
.member-program-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  min-width: 14rem;
}
.member-program-meta-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.member-meta-label {
  font-size: 0.78rem;
  color: var(--c-muted);
  white-space: nowrap;
  min-width: 7rem;
}
.member-meta-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--c-blue);
}

@media (max-width: 640px) {
  .member-program-card { flex-direction: column; gap: 1rem; }
  .member-program-meta { min-width: 0; }
  .acad-timeline-item { grid-template-columns: 7rem 1fr; }
  .acad-scope-grid { grid-template-columns: 1fr; }
}

/* ── Phase 20: Renewal Pipeline + Lead Convert ───────────────────────────── */

/* Renewal summary strip */
.renewal-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.renewal-summary-card {
  flex: 1 1 100px;
  min-width: 80px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  text-align: center;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.renewal-summary-card:hover { border-color: var(--c-blue); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.renewal-summary-card.active { border-color: var(--c-blue); box-shadow: 0 0 0 2px rgba(0,0,0,0.2); }
.renewal-summary-count { font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--c-blue); }
.renewal-summary-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-muted); margin-top: 0.3rem; }
.renewal-summary-card--overdue .renewal-summary-count { color: var(--c-red-deep); }
.renewal-summary-card--overdue.active { border-color: var(--c-red); }
.renewal-summary-card--soon .renewal-summary-count { color: var(--c-orange); }
.renewal-summary-card--soon.active { border-color: var(--c-orange); }
.renewal-summary-card--upcoming .renewal-summary-count { color: var(--c-ink); }
.renewal-summary-card--upcoming.active { border-color: var(--c-muted); }
.renewal-summary-card--future .renewal-summary-count { color: var(--c-blue); }
.renewal-summary-card--none .renewal-summary-count { color: var(--c-muted); }

/* Renewal day badges */
.renewal-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 20px;
  white-space: nowrap;
}
.renewal-badge--overdue { background: var(--c-red); color: var(--c-card); }
.renewal-badge--soon    { background: var(--c-orange); color: var(--c-ink); }
.renewal-badge--upcoming { background: var(--c-green); color: var(--c-card); }
.renewal-badge--future  { background: var(--c-border-soft); color: var(--c-blue); }

/* Copper "Convert →" button */
.btn-copper {
  background: var(--c-orange);
  color: var(--c-card);
  border: none;
  border-radius: 5px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.btn-copper:hover { background: var(--c-orange); }
.btn-copper.btn-sm { font-size: 0.75rem; padding: 0.25rem 0.65rem; }

@media (max-width: 700px) {
  .renewal-summary-row { gap: 0.5rem; }
  .renewal-summary-card { min-width: 70px; padding: 0.6rem 0.75rem; }
}

/* ── Phase 21: Detail pages + note feed ─────────────────────────────────── */

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .detail-layout { grid-template-columns: 1fr; }
}

.detail-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-orange);
  padding: 1.25rem 1.5rem;
}
/* Contact-page cards (Person Research + Contact Info) used these previously-undefined
   classes and rendered unstyled; alias them to the detail-card look. */
.card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-orange);
  border-radius: 4px;
}
.card-body {
  padding: 1.25rem 1.5rem;
}
.detail-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.detail-card-head h2 {
  margin: 0;
  font-size: 1.25rem;
  color: var(--c-blue);
}

.detail-dl { margin: 0; }
.detail-dl-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.25rem 0.75rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--c-border-soft);
}
.detail-dl-row:last-child { border-bottom: none; }
.detail-dl-row dt {
  font-size: 0.8rem;
  color: var(--c-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding-top: 0.1rem;
}
.detail-dl-row dd { margin: 0; font-size: 0.9rem; color: var(--c-blue); }

.autosave-row dd input[type="text"],
.autosave-row dd input[type="email"],
.autosave-row dd input[type="date"],
.autosave-row dd select,
.autosave-row dd textarea {
  width: 100%;
  font-size: 0.9rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  font-family: inherit;
  color: var(--c-blue);
}
.autosave-row dd input:hover,
.autosave-row dd select:hover,
.autosave-row dd textarea:hover,
.autosave-row dd input:focus,
.autosave-row dd select:focus,
.autosave-row dd textarea:focus {
  border-color: var(--border, var(--c-border));
  background: var(--c-card);
}
.autosave-status {
  display: inline-block;
  font-size: 0.72rem;
  margin-left: 0.4rem;
  color: var(--c-muted);
}
.autosave-status--saving { color: var(--c-orange); }
.autosave-status--saved { color: var(--c-green); }
.autosave-status--error { color: var(--c-red); font-weight: 600; }
.autosave-status--dirty { color: var(--c-orange); }
.autosave-checkbox { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.875rem; cursor: pointer; }

.richtext-toolbar { display: flex; gap: 0.25rem; margin-bottom: 0.35rem; }
.richtext-toolbar button {
  border: 1px solid var(--border, var(--c-border));
  background: var(--c-card);
  border-radius: 3px;
  padding: 0.2rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
}
.richtext-toolbar button:hover { background: var(--c-surface-2); }
.richtext-editor {
  min-height: 100px;
  border: 1px solid var(--border, var(--c-border));
  border-radius: 4px;
  padding: 0.5rem 0.6rem;
  font-size: 0.9rem;
  background: var(--c-card);
}
.richtext-editor:focus { outline: 2px solid rgba(255,102,0,0.25); }

.edit-inline-details { margin-top: 1.25rem; border-top: 1px solid var(--c-ground); padding-top: 1rem; }
.edit-inline-details > summary { list-style: none; display: inline-block; }
.edit-inline-details > summary::-webkit-details-marker { display: none; }

/* Note feed */
.note-feed { display: flex; flex-direction: column; gap: 0.75rem; }
.note-entry {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
}
.note-entry-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}
.note-entry-who { font-weight: 600; color: var(--c-blue); font-size: 0.82rem; }
.note-entry-when { font-size: 0.78rem; }
.note-entry-body { color: var(--c-blue); white-space: pre-wrap; line-height: 1.5; }

.note-type-pill {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.45rem;
  border-radius: 5px;
}
.note-type-pill--note  { background: var(--c-border-soft); color: var(--c-ink); }
.note-type-pill--call  { background: var(--c-green); color: var(--c-card); }
.note-type-pill--email { background: var(--c-blue-accent); color: var(--c-card); }
.note-type-pill--meeting { background: var(--c-orange); color: var(--c-ink); }

.note-delete-btn {
  background: none;
  border: none;
  color: var(--c-muted);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0.1rem 0.3rem;
  line-height: 1;
}
.note-delete-btn:hover { color: var(--c-red); }

/* Note type radio row */
.note-type-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.note-type-option input[type="radio"] { display: none; }
.note-type-btn {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  font-size: 0.8rem;
  border: 1px solid var(--c-border-strong);
  cursor: pointer;
  border-radius: 5px;
  color: var(--c-muted);
  background: var(--c-surface-2);
  transition: all 0.12s;
}
.note-type-option input[type="radio"]:checked + .note-type-btn {
  background: var(--c-blue);
  color: var(--c-card);
  border-color: var(--c-blue);
}

/* Lead age badges */
.age-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--c-surface-2);
  color: var(--c-muted);
  margin-top: 2px;
}
.age-badge--warn {
  background: var(--c-surface-2);
  color: var(--c-orange);
}
.age-badge--stale {
  background: var(--c-surface-2);
  color: var(--c-red-deep);
}

/* Lead note count badge (activity indicator in list) */
.note-count-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0 5px;
  line-height: 16px;
  border-radius: 8px;
  background: var(--c-blue);
  color: var(--c-card);
  margin-left: 5px;
  vertical-align: middle;
}

/* My Pipeline stat strip (Phase 33) */
.my-leads-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; }
.my-leads-stat { display: flex; flex-direction: column; align-items: center; padding: 0.5rem 0.9rem; border: 1px solid var(--c-border); background: var(--c-card); text-decoration: none; min-width: 72px; }
.my-leads-stat:hover { border-color: var(--c-primary); }
.my-leads-stat--active { border-color: var(--c-primary); background: var(--c-primary); }
.my-leads-stat--active .my-leads-stat-n,
.my-leads-stat--active .my-leads-stat-label { color: var(--c-card); }
.my-leads-stat--zero { opacity: 0.45; }
.my-leads-stat-n { font-size: 1.35rem; font-weight: 700; color: var(--c-primary); line-height: 1; }
.my-leads-stat-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); margin-top: 2px; }

/* Lead status history (Phase 31) */
.status-history { display: flex; flex-direction: column; gap: 0; }
.status-history-row { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.4rem 0; }
.status-history-row:not(:last-child) { border-bottom: 1px solid var(--c-border); }
.status-history-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-muted); border: 2px solid var(--c-border-strong); flex-shrink: 0; margin-top: 0.3rem; }
.status-history-body { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.status-history-arrow { color: var(--c-muted); font-size: 0.8rem; }
.status-history-meta { font-size: 0.78rem; margin-left: 0.25rem; }

/* ── Program reference charts — dashboard (Phase 47) ───────────────────── */
.dash-tabs { margin-top: 0.25rem; }
.prog-ref { margin-top: 0.25rem; }
.prog-ref-head { margin-bottom: 1.25rem; }
.prog-ref-head h3 { font-size: 1.15rem; color: var(--c-teal); }
.prog-ref-sub { font-size: 0.85rem; color: var(--c-muted); margin: 0.3rem 0 0; }
.prog-section { margin-bottom: 2rem; }
.prog-sec-title { font-size: 1.02rem; color: var(--c-teal); padding-bottom: 0.35rem; border-bottom: 1px solid var(--c-orange); }
.prog-sec-sub { font-size: 0.83rem; color: var(--c-muted); margin: 0.4rem 0 1rem; }
.pc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 1rem; }
.prog-card { background: var(--c-surface); border: 1px solid var(--c-rule); border-radius: var(--radius); padding: 1.1rem 1.2rem 0.9rem; }
.prog-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.prog-card-head h5 { font-size: 1rem; color: var(--c-teal); margin: 0; }
.prog-card-sub { color: var(--c-muted); font-size: 0.78rem; margin: 0.35rem 0 0.9rem; line-height: 1.35; }
.prog-chart { margin: 0.3rem 0 0.4rem; }
.prog-src { color: var(--c-muted); font-size: 0.7rem; font-style: italic; margin: 0.5rem 0 0; border-top: 1px solid var(--c-border-soft); padding-top: 0.5rem; }
.prog-pill { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: var(--c-surface-2); color: var(--c-orange); padding: 0.15rem 0.45rem; border-radius: 5px; }
.prog-pill-pub { background: var(--c-ok-bg); color: var(--c-ok-fg); }
.prog-asof { font-size: 0.65rem; color: var(--c-muted); font-style: italic; }
/* gauges (subscription plans) */
.pc-gauges { display: flex; gap: 0.5rem; justify-content: space-around; flex-wrap: wrap; }
.pc-gcell { text-align: center; flex: 1; min-width: 120px; }
.pc-gname { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-teal); margin-top: -0.4rem; }
.pc-gpips { margin: 0.35rem 0 0.15rem; display: flex; gap: 4px; justify-content: center; }
.pc-pip { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.pc-gwk { font-size: 0.7rem; color: var(--c-muted); }
/* donut / half-donut + legend */
.pc-donut-wrap { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
.pc-legend { display: flex; flex-direction: column; gap: 0.4rem; }
.pc-lrow { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; }
.pc-lsw { width: 11px; height: 11px; border-radius: 5px; flex: none; }
.pc-llab { color: var(--c-text); }
.pc-lval { color: var(--c-muted); font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 0.3rem; }
@media (max-width: 560px) { .pc-grid { grid-template-columns: 1fr; } }

/* ─── Analytics chart cards ─── */
.an-sections { margin-top: 1.75rem; }
.an-section { margin-bottom: 2.5rem; }
.an-sec-title {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--c-muted);
  font-weight: 700;
  margin: 0 0 1rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--c-border-soft);
}
.an-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1rem;
}
.an-card {
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem 0.9rem;
}
.an-card-title {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-muted);
  margin-bottom: .8rem;
}
.an-chart { overflow: hidden; }
@media (max-width: 760px) {
  .an-grid { grid-template-columns: 1fr; }
}

/* ─── ASP report page cards (replicates PDF layout) ─────────────────────── */

.asp-page-card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  margin-bottom: 2.5rem;
  font-family: Georgia, 'Times New Roman', serif;
}

.asp-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 1rem 0.45rem;
}

.asp-page-title {
  font-size: 0.72rem;
  color: var(--c-ink);
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.01em;
}

.asp-page-logo {
  height: 30px;
  width: auto;
}

.asp-page-rule {
  height: 0;
  border: none;
  border-top: 0.5px solid var(--c-border-strong);
  margin: 0;
}

.asp-page-body {
  display: grid;
  grid-template-columns: 63% 37%;
  min-height: 300px;
}

.asp-page-left {
  padding: 0.8rem 1rem 0.8rem 1rem;
  border-right: 1px solid var(--c-border-soft);
}

.asp-page-right {
  background: var(--c-surface-2);
  padding: 0.8rem 0.75rem;
}

/* Contact block */
.asp-contact-block {
  margin-bottom: 0.6rem;
}
.asp-contact-name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--c-ink);
  margin-bottom: 0.1rem;
  font-family: Arial, Helvetica, sans-serif;
}
.asp-contact-sub {
  font-size: 0.78rem;
  color: var(--c-muted);
  margin-bottom: 0.1rem;
  font-family: Arial, Helvetica, sans-serif;
}

/* Sections (used in both columns) */
.asp-section {
  margin-top: 0.55rem;
}
.asp-sec-head {
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--c-ink);
  margin-bottom: 0.2rem;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: none;
}
.asp-sec-body {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--c-ink);
  margin: 0;
}

/* Requests & Actions table */
.asp-req-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.76rem;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 0.2rem;
}
.asp-req-table td {
  border: 0.5px solid var(--c-border-strong);
  padding: 0.2rem 0.45rem;
  color: var(--c-ink);
  vertical-align: middle;
}
.asp-req-table td:first-child {
  width: 84%;
}
.asp-req-table td:last-child {
  width: 16%;
  text-align: center;
}

/* Firm panel (right column) */
.asp-firm-name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--c-ink);
  margin-bottom: 0.2rem;
  font-family: Arial, Helvetica, sans-serif;
}
.asp-firm-addr {
  font-size: 0.78rem;
  color: var(--c-ink);
  margin-bottom: 0.08rem;
  font-family: Arial, Helvetica, sans-serif;
}

/* ─── Programs overview page ─── */
.pub-prog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 1.5rem;
}
.pub-prog-card {
  background: var(--c-ground);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-orange);
  padding: 2rem 1.75rem 1.75rem;
}
.pub-prog-num {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 0.6rem;
}
.pub-prog-title {
  font-family: 'Public Sans', Arial, sans-serif;
  font-size: 1.35rem;
  color: var(--c-blue);
  margin: 0 0 0.1rem;
}
.pub-prog-abbr {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--c-muted);
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.pub-prog-desc {
  font-size: 0.9rem;
  color: var(--c-muted);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.pub-prog-list { margin-top: 0.5rem; }
@media (max-width: 680px) {
  .pub-prog-grid { grid-template-columns: 1fr; }
}

/* Lesson callout box */
.callout-box {
  background: var(--c-surface-2);
  border-left: 3px solid var(--c-orange);
  padding: 0.85rem 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--c-ink);
  border-radius: 0 2px 2px 0;
}

/* Footer */
.asp-page-footer {
  text-align: center;
  font-size: 0.68rem;
  color: var(--c-muted);
  padding: 0.3rem 0.5rem 0.45rem;
  font-family: Arial, Helvetica, sans-serif;
}

@media (max-width: 700px) {
  .asp-page-body { grid-template-columns: 1fr; }
  .asp-page-left  { border-right: none; border-bottom: 1px solid var(--c-border-soft); }
}


/* ============================================================
   Mobile & responsive audit fixes — 2026-06-24
   (a) Accessible skip-link (was unstyled → permanently visible)
   (b) iOS zoom-on-focus: lift form controls to 16px on small screens
   (c) Dashboard/analytics KPI strip wraps instead of overflowing
   (d) 44px tap targets on mobile nav surfaces
   ============================================================ */

/* (a) Skip-link — off-screen until keyboard focus, then pinned top-left */
.skip-link {
  position: absolute;
  left: -9999px;
  top: -100px;
  z-index: 1000;
  padding: 0.6rem 1rem;
  background: var(--c-teal);
  color: var(--c-card);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: 0 0 2px 0;
}
.skip-link:focus,
.skip-link:focus-visible { left: 0; top: 0; }

@media (max-width: 640px) {
  /* (b) <16px controls trigger iOS Safari auto-zoom on focus — lift them to 16px */
  input, select, textarea,
  .form-group input, .form-group select, .form-group textarea,
  .filter-search, .filter-select, .inline-select { font-size: 16px; }

  /* (c) KPI stat strip: flex row → 2-up grid with hairline dividers
     (matches the .section-grid / .prog-grid 1px-gap pattern already in use) */
  .stat-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--c-surface-2);
  }
  .stat-item { border-right: none; }

  /* (d) comfortable touch targets on the mobile nav surfaces */
  .pub-mobile-nav a { padding-top: 0.8rem; padding-bottom: 0.8rem; }
  .drawer-link { min-height: 44px; }
}


/* ============================================================
   CRM Advanced Lookup (Ledger #14)
   ============================================================ */

.crm-filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.crm-filter-form .filter-search { flex: 0 1 auto; min-width: 120px; }
.crm-filter-form .filter-select { max-width: 210px; }

.crm-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--c-muted);
  cursor: pointer;
  white-space: nowrap;
}

.alpha-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 1rem;
}
.alpha-bar a {
  display: inline-block;
  min-width: 1.7rem;
  padding: 0.25rem 0.4rem;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-blue);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  text-decoration: none;
}
.alpha-bar a:hover { background: var(--c-surface-2); }
.alpha-bar a.active { background: var(--c-blue); color: var(--c-card); border-color: var(--c-blue); }

.data-table th a.sort-link {
  color: inherit;
  text-decoration: none;
}
.data-table th a.sort-link:hover { color: var(--c-orange); }

.data-table td a.cell-filter {
  color: var(--c-blue);
  text-decoration: none;
  border-bottom: 1px dotted var(--c-border-strong);
}
.data-table td a.cell-filter:hover { color: var(--c-orange); border-bottom-color: var(--c-orange); }

/* Admin "view as user" banner (T-133) — deliberately high-contrast and sticky: an admin
   must never forget they are acting as someone else. */
.masq-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:1rem;
  flex-wrap:wrap;justify-content:center;background:var(--c-orange-deep);color:var(--c-card);
  padding:.5rem 1rem;font-size:.82rem;line-height:1.3;
  box-shadow:0 1px 6px rgba(0,0,0,.25);}
.masq-bar .masq-txt b{color:var(--c-tint-orange);}
.masq-bar .masq-form{margin:0;}
.masq-btn{background:var(--c-card);color:var(--c-orange-deep);border:0;border-radius:4px;padding:.25rem .7rem;
  font:inherit;font-size:.78rem;font-weight:700;cursor:pointer;}
.masq-btn:hover,.masq-btn:focus{background:var(--c-tint-orange);}

/* Attach an existing CRM contact to a company (T-137). */
.clink{border:1px solid var(--c-border-soft);border-radius:6px;padding:.75rem .9rem;margin-bottom:1.1rem;
  background:var(--c-surface-2);}
.clink-lbl{display:block;font-size:.75rem;font-weight:700;color:var(--c-blue);margin-bottom:.3rem;}
.clink-q{width:100%;max-width:420px;}
.clink-hint{font-size:.74rem;color:var(--c-muted);margin:.35rem 0 .5rem;}
.clink-results{max-height:16rem;overflow-y:auto;border:1px solid var(--c-border-soft);border-radius:4px;
  background:var(--c-card);}
.clink-results:empty{display:none;}
.clink-row{display:flex;flex-direction:column;gap:.1rem;padding:.45rem .6rem;cursor:pointer;
  border-bottom:1px solid var(--c-surface-2);}
.clink-row:last-child{border-bottom:0;}
.clink-row:hover,.clink-row:focus{background:var(--c-tint-blue);outline:none;}
.clink-row.on{background:var(--c-tint-blue);box-shadow:inset 3px 0 0 var(--c-orange);}
.clink-row.is-linked{cursor:default;opacity:.55;}
.clink-row.is-linked:hover{background:var(--c-card);}
.clink-name{font-size:.85rem;font-weight:600;color:var(--c-blue);}
.clink-meta{font-size:.75rem;color:var(--c-muted);}
.clink-already{font-size:.7rem;color:var(--c-orange-deep);font-style:italic;}
.clink-empty{font-size:.78rem;color:var(--c-muted);padding:.5rem .6rem;margin:0;}
.clink-form{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.6rem;}
.clink-chosen{font-size:.78rem;color:var(--c-blue);font-weight:600;}

/* Lead account-manager lock (T-138) — an inherited owner is shown, not editable. */
.am-select.is-locked{background:var(--c-surface-2);color:var(--c-muted);cursor:not-allowed;border-style:dashed;}
.am-locknote{display:block;font-size:.7rem;color:var(--c-orange-deep);margin-top:.15rem;line-height:1.25;}

/* Click-sortable course table headers (T-141). */
.csort-th{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.25rem;}
.csort-th:hover,.csort-th:focus{color:var(--c-blue-accent);text-decoration:underline;}
.csort-th.on{color:var(--c-blue);font-weight:700;}
.csort-ind{font-size:.62rem;line-height:1;color:var(--c-orange);}

/* ── Colour-theme control ─────────────────────────────────────────────────────
   The DEFAULT is the user's OS/browser setting and is pure CSS (see the
   prefers-color-scheme block at the top). This control only exists so a user can
   deliberately override that default; the choice rides in a cookie so the server
   stamps data-theme into the markup and an overridden theme never flashes. */
.theme-toggle {
  position: fixed; right: 16px; bottom: 16px; z-index: 60;
  display: flex; gap: 4px; padding: 4px;
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}
.theme-toggle button {
  font: 600 0.78rem 'Public Sans', Arial, sans-serif;
  border: 0; cursor: pointer; border-radius: 999px;
  padding: 0.4rem 0.8rem; background: transparent; color: var(--c-muted);
}
.theme-toggle button:hover { color: var(--c-ink); }
.theme-toggle button[aria-pressed="true"] { background: var(--c-blue); color: #fff; }
@media print { .theme-toggle { display: none; } }