/* ── VARIABLES ────────────────────────────────────────────────── */
:root {
  /* Surface / background */
  --bg:           #ffffff;
  --surface:      #f8f7f4;
  --surface-2:    #f0ede8;
  --border:       #e8e2d6;

  /* Brand anchors */
  --navy:         #1a1a2e;          /* dominant dark */
  --navy-mid:     #2d2d4a;          /* hover / secondary dark */
  --gold:         #E05500;          /* corporate orange — decorative/large use */
  --gold-text:    #C04A00;          /* orange text on white — WCAG AA 4.9:1 */
  --gold-dim:     rgba(224,85,0,0.08);
  --gold-border:  rgba(224,85,0,0.22);

  /* Legacy aliases — keep old names so existing selectors don't break */
  --gold-light:   #3d3d6a;
  --sky:          #E05500;          /* orange — old sky refs */
  --sky-dim:      rgba(224,85,0,0.08);
  --accent-gold:  #C04A00;
  --accent-gold-dim: rgba(224,85,0,0.08);

  /* Text */
  --text:         #141420;
  --text-muted:   #5c5c72;
  --text-dim:     #9b9baf;

  /* Geometry */
  --radius:       8px;
  --radius-lg:    14px;
  --transition:   0.24s cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows */
  --shadow-sm:    0 1px 4px rgba(20,20,46,0.06);
  --shadow:       0 4px 20px rgba(20,20,46,0.09), 0 1px 6px rgba(20,20,46,0.04);
  --shadow-lg:    0 16px 48px rgba(20,20,46,0.12), 0 4px 14px rgba(20,20,46,0.06);

  /* Typography */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-display: 'Merriweather', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Roboto Mono', monospace;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
textarea, input { font: inherit; }

/* ── TYPOGRAPHY UTILITIES ────────────────────────────────────── */
.gold         { color: var(--gold-text); }
.hero .gold   { color: var(--gold); }

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  line-height: 1;
}

.logo-balance {
  color: var(--navy);
}

.logo-pi {
  color: var(--gold-text);
  margin-left: 0.05em;
}

.logo .gold {
  color: var(--gold-text);
}

/* ── BUTTONS ──────────────────────────────────────────────────── */
.btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: var(--navy);
  color: #ffffff;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-gold:hover {
  background: var(--navy-mid);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(20,20,46,0.22);
}
.btn-gold:active { transform: translateY(0); box-shadow: none; }
.btn-gold:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.btn-gold.btn-lg {
  padding: 13px 28px;
  font-size: 0.9375rem;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  padding: 13px 28px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--text-muted);
  letter-spacing: 0.01em;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); background: rgba(20,20,46,0.04); }
.btn-ghost:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* Orange/white "FREE Report Sample" download CTA — same footprint as
   .btn-gold.btn-lg so it sits flush alongside the primary CTA it pairs with. */
.btn-sample {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 28px;
  background: var(--gold);
  color: #ffffff;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-sample:hover {
  background: var(--gold-text);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(224,85,0,0.3);
}
.btn-sample:active { transform: translateY(0); box-shadow: none; }
.btn-sample:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* Disabled paid-service CTA */
.svc-cta-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(0.4);
  user-select: none;
}

/* ── Nav — Points link ────────────────────────────────────────────────────
   No badge chip (no background/border) — plain nav link distinguished only
   by font color. Referrals intentionally has NO color override — it must
   look exactly like every other menu item (Home, Services, etc). ── */
a.nav-points-text { color: var(--gold-text); font-weight: 600; }

/* Dimmed, non-clickable Shared Matters/Referrals/Points placeholders shown
   to guests in the header nav — same visual language as the disabled
   paid-service CTA. */
.nav-link--disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
  user-select: none;
}

/* ── Data-sharing consent widget ───────────────────────────────────────────── */
.data-consent-widget {
  margin-top: 16px;
  padding: 16px 18px;
  background: rgba(91,190,245,0.04);
  border: 1px solid rgba(91,190,245,0.18);
  border-radius: 10px;
  font-size: 0.82rem;
  max-width: 680px;
}
.dcw-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
}
.dcw-checkbox {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--gold);
  cursor: pointer;
}
.dcw-text {
  color: var(--text-muted);
  line-height: 1.55;
}
.dcw-text a { color: var(--gold); text-decoration: underline; }
.dcw-points-note {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--gold);
  opacity: 0.85;
}
.dcw-feedback {
  margin-top: 8px;
  font-size: 0.8rem;
  color: #f87171;
}
.dcw-confirmed {
  color: #1a3a6e;
  font-size: 0.88rem;
  line-height: 1.6;
  padding: 6px 0;
}

.dcw-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 16px;
}

.dcw-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.dcw-end-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 24px;
  background: #1a3a6e;
  color: #ffffff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  letter-spacing: 0.01em;
}
.dcw-end-btn:hover:not(:disabled) {
  background: #2a5298;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26,58,110,0.2);
}
.dcw-end-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ── NAV ──────────────────────────────────────────────────────── */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* Must always outrank the chat overlay (z-index 500) — the header stays
     visible and clickable above the chat window whenever it's open. */
  z-index: 600;
  transition: background 0.4s ease, box-shadow 0.4s ease;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
#nav.scrolled {
  background: rgba(255,255,255,0.96);
  box-shadow: 0 1px 0 rgba(0,0,0,0.07), 0 2px 12px rgba(0,0,0,0.04);
}
/* backdrop-filter on #nav creates a new containing block for its
   position:fixed .nav-links child, clipping the mobile menu overlay
   to the navbar's own box instead of the viewport — disable it
   while the mobile menu is open so .nav-links can fill the screen. */
#nav:has(.nav-links.is-open) {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* .nav-links z-index is scoped to #nav's own stacking context, so #nav
     itself must outrank other z-indexed elements (e.g. sticky page tab
     bars, the chat overlay) while the mobile menu is open, or they paint
     on top of it. */
  z-index: 600;
}

.nav-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 22px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: nowrap;
}

.nav-link {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color var(--transition);
}
.nav-link:hover { color: var(--navy); }
.nav-link.active { color: var(--gold-text); font-weight: 600; }
.nav-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }

/* Logged-in user pill */
.nav-user {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.875rem;
}
.nav-user-name {
  color: var(--text);
  font-weight: 500;
}
.nav-logout-btn {
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 500;
  transition: color var(--transition);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-logout-btn:hover { color: #f87171; }

/* ── Nav — Profile dropdown ───────────────────────────────────────
   Desktop: hover/focus-within reveals the menu, positioned under the
   trigger. Mobile behavior is overridden in the MOBILE NAV block below,
   where it renders inline and always expanded. ── */
/* padding-bottom + equal negative margin-bottom extends .nav-profile's own
   hoverable border-box 10px past its visible content, closing the dead
   zone between the trigger and the menu below it — without this, the
   cursor stops matching :hover the instant it leaves the trigger to
   travel down to the menu, so the menu closes before it can be reached.
   The negative margin cancels the padding's effect on layout (row height,
   sibling spacing), so nothing else shifts. Because the menu is
   position: absolute against this now-taller padding box, top: 100%
   already lands it 10px below the trigger — no separate margin-top
   needed on the menu itself for the visual gap. */
.nav-profile {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: -10px;
}
.nav-profile-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  z-index: 610;
}
.nav-profile:hover .nav-profile-menu,
.nav-profile:focus-within .nav-profile-menu {
  display: flex;
}
.nav-profile-menu .nav-link {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius);
}
.nav-profile-menu .nav-link:hover { background: var(--surface); color: var(--navy); }

/* ── HERO ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 108px 48px 64px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

/* Split layout with hero image */
.hero--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
  padding-left: 0;
  padding-right: 0;
}
.hero--split .hero-content {
  padding-left: 48px;
  padding-right: 32px;
}
.hero-image-panel {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 48px 0 0;
  position: relative;
}
.hero-img {
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}
@media (max-width: 860px) {
  .hero--split {
    grid-template-columns: 1fr;
    padding-left: 24px;
    padding-right: 24px;
    min-height: 0;
  }
  .hero--split .hero-content { padding-left: 0; padding-right: 0; }
  .hero-image-panel {
    min-height: 220px;
    height: 220px;
    order: -1;
    margin: 0 -24px;
    padding: 0;
    overflow: hidden;
  }
  .hero-img { height: 100%; max-height: none; border-radius: 0; }
}

/* π watermark — removed per design update */
.hero-pi-mark { display: none; }

/* Suppress glow (legacy element) */
.hero-glow { display: none; }

.hero-content {
  position: relative;
  max-width: 600px;
  text-align: left;
}

.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
  border: 1px solid var(--gold-border);
  border-radius: 4px;
  padding: 5px 14px;
  margin-bottom: 28px;
  background: var(--gold-dim);
}

.hero-headline {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.5vw, 4.4rem);
  font-weight: 500;
  line-height: 1.08;
  color: var(--navy);
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}

.hero-slogan {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gold-text);
  margin: -10px 0 22px;
  letter-spacing: 0.01em;
}

.hero-sub {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text-muted);
  max-width: 560px;
  margin-bottom: 44px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-cta-btn {
  padding: 15px 32px;
  font-size: 0.9375rem;
}

.hero-trust {
  margin-top: 18px;
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.hero-scope-note {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-dim);
  letter-spacing: 0.02em;
  max-width: 480px;
}

.hero-scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 48px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--text-dim);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.scroll-line {
  width: 1px;
  height: 36px;
  background: linear-gradient(to bottom, var(--border), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .scroll-line { animation: scrollDrop 2s ease-in-out infinite; }
}
@keyframes scrollDrop {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: scaleY(1); transform-origin: top; }
}

/* ── SECTIONS ─────────────────────────────────────────────────── */
.section {
  padding: 120px 40px;
}
.section-dark {
  background: var(--surface);
}

.container {
  max-width: 1100px;
  margin: 0 auto;
}

.container--narrow {
  max-width: 700px;
}

.section-sub {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 40px;
  margin-top: -8px;
}

.section-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 56px;
}

/* ── PROBLEM SECTION ─────────────────────────────────────────── */
.problem-section {
  background: var(--surface);
}

.problem-title {
  margin-bottom: 48px;
}

.problem-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 48px;
}

.problem-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.55;
  transition: color var(--transition);
}

.problem-item:first-child {
  border-top: 1px solid var(--border);
}

.problem-check {
  color: var(--gold);
  font-size: 1rem;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 2px;
  transition: transform var(--transition);
}

.problem-item:hover .problem-check {
  transform: translateX(4px);
}

.problem-conclusion {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-muted);
  text-align: center;
  padding: 36px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.problem-conclusion strong,
.problem-conclusion em {
  color: var(--text);
  font-style: normal;
  font-weight: 500;
}

/* ── PILLARS ──────────────────────────────────────────────────── */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
}

.pillar {
  padding: 42px 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.pillar:hover {
  border-color: var(--gold-border);
  box-shadow: 0 8px 28px rgba(20,20,46,0.10);
  transform: translateY(-3px);
}

.pillar-icon {
  font-size: 1.4rem;
  color: var(--accent-gold);
  margin-bottom: 18px;
}

.pillar h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 10px;
}

.pillar p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ── FRAMEWORK GRID ───────────────────────────────────────────── */
.framework-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.framework-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.framework-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--gold-border);
}

.card-num {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 20px;
}

.framework-card h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--text);
  margin-bottom: 14px;
}

.framework-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 20px;
}

.card-tag {
  font-size: 0.72rem;
  color: var(--gold);
  letter-spacing: 0.04em;
}

/* ── BOSS FRAMEWORK ───────────────────────────────────────────── */
.boss-intro {
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: -36px;
  margin-bottom: 48px;
}

.boss-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 40px;
}

.boss-card {
  background: var(--surface);
  padding: 44px 40px;
  transition: background var(--transition);
  position: relative;
}

.boss-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
  opacity: 0;
  transition: opacity var(--transition);
}

.boss-card:hover { background: var(--surface-2); }
.boss-card:hover::before { opacity: 1; }

.boss-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.boss-num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.boss-layer-tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid rgba(91,190,245,0.2);
  border-radius: 100px;
  padding: 3px 10px;
}

.boss-card-title {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.2;
}

.boss-card-body {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: 20px;
}

.boss-card-tags {
  font-size: 0.72rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.boss-laws {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: var(--surface-2);
  border: 1px solid rgba(91,190,245,0.18);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
}

.boss-laws-icon {
  font-size: 1.4rem;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}

.boss-laws-text {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.8;
}

.boss-laws-text strong {
  color: var(--text);
  font-weight: 600;
}

.boss-laws-text em {
  color: var(--gold);
  font-style: normal;
}

/* ── STEPS ────────────────────────────────────────────────────── */
.steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 0 32px;
  padding: 36px 0;
  border-bottom: 1px solid var(--border);
}
.step:last-child { border-bottom: none; }

.step-num {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--border);
  padding-top: 2px;
  line-height: 1;
}

.step-body h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.step-body p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 560px;
}

/* ── SERVICES ────────────────────────────────────────────────── */
.services-row {
  display: grid;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;
}
.services-row--2 { grid-template-columns: 1fr 1fr; }
.services-row--3 { grid-template-columns: repeat(3, 1fr); }
.services-row--4 { grid-template-columns: repeat(4, 1fr); }

.svc-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: #ffffff;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.svc-card--free    { border-color: var(--gold-border); }
.svc-card--advisor { border-color: var(--border); }
.svc-card--premium { border-color: var(--border); }
.svc-card--engine  { border-color: var(--border); }
.svc-card--engine-b { border-color: rgba(20,20,46,0.30); }

.svc-card--free:hover    { border-color: var(--gold); box-shadow: 0 8px 32px rgba(201,168,76,0.14); }
.svc-card--advisor:hover { border-color: rgba(20,20,46,0.30); box-shadow: var(--shadow); }
.svc-card--premium:hover { border-color: rgba(20,20,46,0.22); box-shadow: var(--shadow); }
.svc-card--engine:hover  { border-color: rgba(20,20,46,0.30); box-shadow: var(--shadow); }
.svc-card--engine-b:hover { border-color: var(--navy); box-shadow: 0 8px 28px rgba(20,20,46,0.14); }

/* Selected state */
.svc-card--selected {
  border-color: #1a3a6e !important;
  box-shadow: 0 0 0 2px rgba(26,58,110,0.12), var(--shadow) !important;
}

/* Badge row — badge + selected tag side by side */
.svc-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.svc-badge-row .svc-badge {
  margin-bottom: 0;
}
.svc-badge--selected-tag {
  display: none; /* shown via JS when selected */
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 3px 10px;
  background: rgba(212,175,55,0.15);
  color: var(--gold);
  border: 1px solid rgba(212,175,55,0.4);
}

/* Aligned card layout — details list grows, header stays compact */
.svc-row-aligned {
  align-items: stretch;
}
.svc-row-aligned .svc-card {
  display: flex;
  flex-direction: column;
}
.svc-row-aligned .svc-card-top {
  flex-shrink: 0;
}
.svc-row-aligned .svc-details {
  flex: 1;
}
.svc-row-aligned .svc-name {
  margin-bottom: 8px;
}

.svc-card-top {
  background: var(--surface);
  padding: 32px 32px 24px;
  flex-shrink: 0;
}
.svc-card--free .svc-card-top     { background: var(--navy); }
.svc-card--advisor .svc-card-top  { background: var(--surface); }
.svc-card--engine .svc-card-top   { background: var(--surface); }
.svc-card--engine-b .svc-card-top { background: var(--navy); }

.svc-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 3px 11px;
  margin-bottom: 16px;
}
.svc-badge--free    { background: rgba(184,150,12,0.12); color: #d4af37; border: 1px solid rgba(184,150,12,0.30); }
.svc-badge--free-tag { background: rgba(52,211,153,0.15); color: #34d399; border: 1px solid rgba(52,211,153,0.4); }
.svc-badge--advisor { background: rgba(26,58,110,0.08); color: var(--gold-light); border: 1px solid rgba(26,58,110,0.22); }
.svc-badge--premium { background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid var(--border); }
.svc-badge--engine  { background: rgba(26,58,110,0.08); color: var(--gold-light); border: 1px solid rgba(26,58,110,0.22); }
.svc-badge--engine-b { background: rgba(184,150,12,0.12); color: #d4af37; border: 1px solid rgba(184,150,12,0.30); }

.svc-icon {
  font-size: 1.4rem;
  color: var(--gold);
  margin-bottom: 10px;
  opacity: 0.6;
}

.svc-name {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 4px;
  line-height: 1.1;
}

.svc-full-name {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 10px;
  line-height: 1.5;
}

.svc-tagline {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
}

/* Dark card top overrides — white text on navy */
.svc-card--free .svc-icon,
.svc-card--engine-b .svc-icon     { color: #d4af37; opacity: 1; }
.svc-card--free .svc-name,
.svc-card--engine-b .svc-name     { color: #ffffff; }
.svc-card--free .svc-full-name,
.svc-card--engine-b .svc-full-name { color: rgba(255,255,255,0.45); }
.svc-card--free .svc-tagline,
.svc-card--engine-b .svc-tagline  { color: rgba(255,255,255,0.65); }

/* New card text structure — overview (2 lines) + detail (3 lines) */
.svc-overview {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 6px;
}
.svc-overview:last-of-type {
  margin-bottom: 18px;
}
.svc-detail-line {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 5px;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}
.svc-detail-line:last-child {
  margin-bottom: 0;
}

.svc-details {
  list-style: none;
  padding: 20px 32px;
  flex: 1;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.svc-details li {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.svc-details li:last-child { border-bottom: none; }

.svc-detail-label {
  color: var(--text-dim);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.svc-detail-value {
  color: var(--text);
  text-align: left;
  font-size: 0.82rem;
}

/* Topics preview chips on BPI Advisor card */
.svc-topics-preview {
  background: var(--bg);
  padding: 14px 32px 20px;
  border-top: 1px solid var(--border);
}
.svc-audience-tag {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(20,20,46,0.06);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.svc-audience-tag--corp {
  background: var(--gold-dim);
  color: var(--gold-text);
  border-color: var(--gold-border);
}

.svc-tone-tag {
  font-size: 0.75rem;
  color: var(--gold-text);
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  padding: 7px 16px;
  margin: 0 20px 14px;
  line-height: 1.5;
}

.svc-topics-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}
.svc-topics-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.svc-topics-chips span {
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 3px 10px;
}

.svc-learn-more {
  display: block;
  text-align: center;
  margin: 0 20px 8px;
  font-size: 0.78rem;
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition);
}
.svc-learn-more:hover { color: var(--gold); }

.svc-cta {
  margin: 0 20px 28px;
  display: block;
  width: calc(100% - 40px);
  box-sizing: border-box;
  text-align: center;
  justify-content: center;
  white-space: nowrap;
  padding: 12px 16px;
  font-size: 0.88rem;
}

/* ── Contact form captcha ─────────────────────────────────────────── */
.contact-captcha {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.captcha-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.captcha-question {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 18px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.captcha-input {
  flex: 1;
  min-width: 140px;
  max-width: 220px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--transition);
  -moz-appearance: textfield;
}
.captcha-input::-webkit-inner-spin-button,
.captcha-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.captcha-input:focus { border-color: var(--gold); }
.captcha-hint {
  font-size: 0.78rem;
  color: #f87171;
  min-height: 1.2em;
}

.svc-note {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-top: 8px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}

@media (max-width: 1200px) {
  .services-row--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .services-row--2,
  .services-row--3,
  .services-row--4 { grid-template-columns: 1fr; }
}

/* ── AI AGENT SECTION ────────────────────────────────────────── */
.agent-section {
  background: linear-gradient(135deg, #f0f7fe 0%, #f8fafc 100%);
}

.agent-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.agent-text .section-label {
  margin-bottom: 20px;
}

.agent-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 28px;
}

.agent-body {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 20px;
}

.agent-body--em {
  color: var(--text);
  font-size: 0.95rem;
  border-left: 3px solid var(--sky);
  padding-left: 18px;
  margin-bottom: 36px;
}

.agent-cta {
  margin-top: 4px;
}

.agent-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.agent-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.agent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  flex-shrink: 0;
}

.agent-dot--active {
  background: #4ade80;
  box-shadow: 0 0 8px rgba(74, 222, 128, 0.5);
  animation: pulse 2.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px rgba(74,222,128,0.5); }
  50%       { opacity: 0.7; box-shadow: 0 0 14px rgba(74,222,128,0.8); }
}

.agent-online {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #4ade80;
  text-transform: uppercase;
}

.agent-capabilities {
  list-style: none;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.agent-capabilities li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.agent-capabilities li:last-child {
  border-bottom: none;
}

.agent-cap-icon {
  color: var(--gold);
  font-size: 0.7rem;
  flex-shrink: 0;
  margin-top: 4px;
}

.agent-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 28px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.agent-footer-tag {
  font-size: 0.7rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.agent-footer-tag:first-child::after {
  content: '·';
  margin-left: 8px;
  color: var(--border);
}

/* ── CTA STRIP ───────────────────────────────────────────────── */
.cta-strip {
  padding: 72px 48px;
  background: var(--navy);
  text-align: center;
}

.cta-strip h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.7rem);
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}

.cta-strip p {
  color: rgba(255,255,255,0.55);
  margin-bottom: 36px;
}

.cta-strip-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ── FOOTER ───────────────────────────────────────────────────── */
.footer {
  padding: 48px 40px;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-tag {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.04em;
}

/* Three columns — logo left, links centred, social icons right. A real
   grid (1fr auto 1fr) rather than flex + space-between, because the outer
   1fr tracks are computed equal by definition, so the auto-sized centre
   column (the links) always sits exactly in the middle of the page
   regardless of how uneven the logo and social-icon widths are — the same
   technique the tagline row uses to centre itself. The tagline itself
   ("behavioral intelligence | not general AI") sits below this whole row
   as its own full-width line (.footer-tag-row), directly above the
   copyright line. */
.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 24px;
  max-width: 1500px;
}

.footer-col { display: flex; align-items: center; min-width: 0; }
.footer-col-left   { justify-self: start; }
.footer-col-center { justify-self: center; }
.footer-col-right  { justify-self: end; }

.footer-tag-row {
  width: 100%;
  text-align: center;
  margin-top: 18px;
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}

.footer-social { flex-shrink: 0; }

/* line-height: 1 (not the inherited body line-height: 1.72) so this row's
   text sits in a tightly-fit line box, same as .logo's own line-height: 1 —
   otherwise the two end up centered by very different box heights (a 22px
   line box for 13px text vs a 20px box for 20px text), which is exact in
   this engine's rounding but can drift a couple of px in others, reading as
   "logo and links aren't quite on the same line." */
.footer-link {
  font-size: 0.82rem;
  line-height: 1;
  white-space: nowrap;
  color: rgba(255,255,255,0.55);
  transition: color var(--transition);
}

.footer-link:hover { color: var(--gold); }
.footer-link.active { color: var(--gold); font-weight: 600; }

.footer-copyright {
  width: 100%;
  text-align: center;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  letter-spacing: 0.03em;
}

/* Footer logo on dark bg — override to white */
.footer .logo-balance { color: rgba(255,255,255,0.85); }
.footer .logo-pi      { color: var(--gold); }

.chat-logo .logo-balance { color: rgba(255,255,255,0.85); }
.chat-logo .logo-pi      { color: var(--gold); }

.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.5);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.social-link:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--gold-dim);
}

/* ── Contact Form ─────────────────────────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.contact-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-field input,
.contact-field textarea {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
  transition: border-color var(--transition);
  outline: none;
}
.contact-field input:focus,
.contact-field textarea:focus {
  border-color: var(--gold);
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--text-dim);
}

.contact-footer {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.contact-submit {
  flex-shrink: 0;
}
.contact-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.contact-feedback {
  font-size: 0.85rem;
  line-height: 1.4;
}
.contact-feedback--ok   { color: #4ade80; }
.contact-feedback--err  { color: #f87171; }
.contact-feedback--warn {
  color: #b45309;
  background: rgba(251,191,36,0.14);
  border: 1px solid rgba(251,191,36,0.4);
  border-radius: var(--radius);
  padding: 10px 14px;
  line-height: 1.6;
}
.contact-feedback--warn:empty { display: none; }

/* ── CHAT OVERLAY ────────────────────────────────────────────── */
/* Starts below the fixed site header (~72px, see #nav) rather than at the
   very top of the viewport — the header must always stay visible and
   clickable above the chat, never covered by it. */
.chat-overlay {
  position: fixed;
  top: 73px;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg);
  z-index: 500;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
  pointer-events: none;
}
.chat-overlay.open {
  transform: translateY(0);
  pointer-events: all;
}

/* ── CHAT HEADER ─────────────────────────────────────────────── */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid var(--border);
  background: rgba(7,9,15,0.95);
  backdrop-filter: blur(12px);
  flex-shrink: 0;
  gap: 12px;
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

/* Same typography as the main nav .logo — only the colors differ, adapted
   for the chat header's dark background instead of the nav's light one. */
.chat-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
  flex-shrink: 0;
}

/* Tone selector */
.tone-selector {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tone-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-dim);
  flex-shrink: 0;
}
.tone-select {
  appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: 0.75rem;
  font-family: var(--font-body);
  font-weight: 500;
  padding: 4px 24px 4px 9px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition), color var(--transition);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a8999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
}
.tone-select:hover,
.tone-select:focus {
  border-color: var(--gold);
  color: var(--text);
}
.tone-select option {
  background: var(--surface);
  color: var(--text);
}

.chat-header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.chat-service-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: rgba(91,190,245,0.12);
  color: var(--gold);
  border: 1px solid rgba(91,190,245,0.25);
  white-space: nowrap;
}

.usage-cost {
  font-size: 0.7rem;
  font-family: var(--font-body);
  color: var(--gold);
  opacity: 0.55;
  letter-spacing: 0.04em;
  min-width: 0;
  transition: opacity 0.3s ease;
}
.usage-cost:not(:empty) { opacity: 0.55; }

/* ── BPI Advisor option panels (on-card, outside chat) ───────────── */
.bpi-options {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
  flex: 1;
}

.bpi-opt {
  padding: 18px 28px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
  transition: background var(--transition);
}
.bpi-opt:last-child { border-bottom: none; }
.bpi-opt--highlight { background: var(--surface); }

.bpi-opt-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.bpi-opt-key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0;
  flex-shrink: 0;
  margin-top: 1px;
}
.bpi-opt-key--b {
  background: var(--gold-dim);
  border-color: rgba(91,190,245,0.3);
  color: var(--gold);
}

.bpi-opt-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.bpi-opt-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}
.bpi-opt-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.bpi-opt-topics {
  margin-top: 2px;
  margin-left: 42px;
}

.bpi-opt-cta {
  align-self: flex-start;
  margin-left: 42px;
  padding: 8px 18px;
  font-size: 0.82rem;
}

/* ── Topic selection grid ─────────────────────────────────────────── */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.topic-btn {
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
  line-height: 1.4;
}
.topic-btn:hover {
  border-color: var(--gold);
  color: var(--text);
  background: var(--surface-2);
}

/* ── Session timing block — injected into session summary ─────────── */
.session-timing-block {
  margin-bottom: 20px;
  border: 1px solid rgba(91, 190, 245, 0.25);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(91, 190, 245, 0.05);
}
.session-timing-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(91, 190, 245, 0.10);
  border-bottom: 1px solid rgba(91, 190, 245, 0.15);
}
.session-timing-icon {
  font-size: 1rem;
  color: var(--gold);
}
.session-timing-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold);
}
.session-timing-rows {
  padding: 4px 0;
}
.session-timing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.session-timing-row:last-child { border-bottom: none; }
.session-timing-row--total {
  background: rgba(91, 190, 245, 0.06);
}
.session-timing-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: 500;
}
.session-timing-value {
  font-size: 0.75rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.session-timing-value--dur {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.82rem;
}

.session-timer {
  font-size: 0.7rem;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
  transition: color 0.4s ease, background 0.4s ease, border-color 0.4s ease;
  display: none;
}
.session-timer.timer-green {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.10);
  border-color: rgba(74, 222, 128, 0.22);
}
.session-timer.timer-amber {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.22);
}
.session-timer.timer-red {
  color: #f87171;
  background: rgba(248, 113, 113, 0.10);
  border-color: rgba(248, 113, 113, 0.22);
}

.chat-status {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}
.chat-status.active { color: #4ade80; }
.chat-status.error  { color: #f87171; }

.chat-close {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  background: var(--gold);
  font-size: 0.85rem;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.chat-close:hover {
  border-color: var(--gold-text);
  color: #ffffff;
  background: var(--gold-text);
}

/* ── CHAT MESSAGES ───────────────────────────────────────────── */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 40px 0 20px;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.msg-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Assistant message */
.msg-assistant {
  margin-bottom: 36px;
  animation: msgFadeIn 0.3s ease;
}
.msg-assistant-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.msg-assistant-body {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text);
}

/* Markdown inside assistant messages */
.msg-assistant-body h1,
.msg-assistant-body h2,
.msg-assistant-body h3 {
  font-family: var(--font-display);
  color: var(--text);
  margin: 24px 0 10px;
  line-height: 1.3;
}
.msg-assistant-body h1 { font-size: 1.4rem; }
.msg-assistant-body h2 { font-size: 1.2rem; }
.msg-assistant-body h3 { font-size: 1rem; }

.msg-assistant-body p { margin-bottom: 14px; }
.msg-assistant-body p:last-child { margin-bottom: 0; }

.msg-assistant-body ul,
.msg-assistant-body ol {
  padding-left: 20px;
  margin-bottom: 14px;
}
.msg-assistant-body li { margin-bottom: 6px; }

.msg-assistant-body strong { color: var(--text); font-weight: 600; }
.msg-assistant-body em { color: var(--text-muted); }

.msg-assistant-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.875rem;
}
.msg-assistant-body th {
  text-align: left;
  padding: 10px 14px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.msg-assistant-body td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: top;
}
.msg-assistant-body tr:last-child td { border-bottom: none; }
.msg-assistant-body tr:hover td { background: var(--surface); }

.msg-assistant-body blockquote {
  border-left: 3px solid var(--gold);
  padding: 10px 18px;
  margin: 16px 0;
  color: var(--text-muted);
  font-style: italic;
  background: var(--gold-dim);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.msg-assistant-body code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--gold-light);
}

/* Streaming cursor */
.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--gold);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 0.8s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* User message */
.msg-user {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 28px;
  animation: msgFadeIn 0.25s ease;
}
.msg-user-bubble {
  max-width: 72%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
  padding: 14px 18px;
  font-size: 0.925rem;
  line-height: 1.7;
  color: var(--text);
}

/* Option buttons */
.msg-options {
  margin-bottom: 32px;
  animation: msgFadeIn 0.3s ease;
}
.msg-options-q {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.options-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}
.option-btn {
  width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  text-align: left;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
  cursor: pointer;
}
.option-btn:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
  color: var(--gold-light);
}
.option-btn.selected {
  border-color: var(--gold);
  background: var(--gold-dim);
  color: var(--gold);
}
.option-btn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.option-label { font-weight: 500; display: block; }
.option-desc  { font-size: 0.78rem; color: var(--text-muted); display: block; margin-top: 3px; }

.options-confirm {
  display: none;
  margin-top: 14px;
  padding: 10px 22px;
  background: var(--gold);
  color: #07090f;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background var(--transition);
}
.options-confirm.visible { display: inline-flex; }
.options-confirm:hover { background: var(--gold-light); }

/* BOSS IT "Describe Your Situation" — confirm-before-send preview. Dashed
   border keeps it visually distinct from an already-sent .msg-user bubble. */
.bp-confirm-block {
  margin-bottom: 32px;
  animation: msgFadeIn 0.3s ease;
}
.bp-confirm-label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.bp-confirm-text {
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  font-size: 0.925rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--surface-2);
  margin-bottom: 14px;
  white-space: pre-wrap;
}
.bp-confirm-grid { max-width: 360px; }

/* ── Full Assessment Form ─────────────────────────────────────── */
/* Fixed progress bar — sits above #chatMessages in the chat overlay */
/* ── BOSS IT report-generation progress bar ─────────────────── */
.boss-it-report-progress {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 8px 0;
}
.boss-it-rp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.boss-it-rp-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: bossItSpin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes bossItSpin {
  to { transform: rotate(360deg); }
}
.boss-it-rp-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.boss-it-rp-notice {
  font-size: .76rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  opacity: 0.75;
}
.boss-it-rp-track {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}
.boss-it-rp-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  transition: width 0.4s ease;
  width: 0%;
}
.boss-it-rp-pct {
  font-size: .78rem;
  color: var(--gold);
  font-weight: 700;
  letter-spacing: .04em;
}

.assessment-progress-fixed {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
  z-index: 30;
  flex-shrink: 0;
}

.msg-assessment {
  margin-bottom: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
}

/* ── BOSS IT "Upload a Document" widget ─────────────────────────────────── */
.msg-upload {
  margin-bottom: 28px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  max-width: 400px;
  animation: msgFadeIn 0.3s ease;
}

.upload-banner {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

.upload-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 16px;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
}
.upload-dropzone:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
}
.upload-dropzone-icon { font-size: 1.6rem; }
.upload-dropzone-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text);
}
.upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.upload-selected {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--gold-text);
  font-weight: 500;
}

.upload-error {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: var(--radius);
  color: #fca5a5;
  font-size: 0.8rem;
  line-height: 1.5;
}

.upload-progress {
  margin-top: 4px;
  padding: 14px;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
}

.upload-system-notice {
  margin-bottom: 20px;
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.assessment-banner {
  padding: 14px 18px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.assessment-scale-hint {
  color: var(--gold);
  font-weight: 500;
  white-space: nowrap;
}

.assessment-progress-wrap {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.assessment-progress-text {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 120px;
}

.assessment-progress-bar {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.assessment-progress-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.25s ease;
}

.assessment-dim {
  border-bottom: 1px solid var(--border);
}
.assessment-dim:last-of-type {
  border-bottom: none;
}

.assessment-dim-header {
  padding: 14px 18px 10px;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-bottom: 1px solid var(--border);
}

.assessment-dim-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
}

.assessment-dim-blurb {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}

.assessment-q-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(28, 44, 66, 0.5);
}
.assessment-q-row:last-of-type {
  border-bottom: none;
}

.assessment-q-num {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold);
  opacity: 0.6;
  padding-top: 2px;
}

.assessment-q-text {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.5;
  padding-top: 1px;
}

.assessment-rating-row {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.assessment-rating-btn {
  width: 48px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.assessment-rating-btn:hover:not(.disabled) {
  border-color: var(--gold);
  background: var(--gold-dim);
  color: var(--gold);
}
.assessment-rating-btn.selected {
  border-color: var(--gold);
  background: var(--gold);
  color: #07090f;
  font-weight: 700;
}
.assessment-rating-btn.disabled {
  pointer-events: none;
  opacity: 0.35;
}
.assessment-rating-btn.selected.disabled {
  opacity: 1;
}

/* Tone colouring on hover / selection */
.assessment-rating-btn[data-tone="low"]:hover:not(.disabled),
.assessment-rating-btn[data-tone="low"].selected {
  border-color: #f87171;
  background: rgba(248,113,113,0.15);
  color: #f87171;
}
.assessment-rating-btn[data-tone="low"].selected {
  background: #f87171;
  color: #07090f;
}
.assessment-rating-btn[data-tone="mid"]:hover:not(.disabled),
.assessment-rating-btn[data-tone="mid"].selected {
  border-color: #fbbf24;
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
}
.assessment-rating-btn[data-tone="mid"].selected {
  background: #fbbf24;
  color: #07090f;
}
.assessment-rating-btn[data-tone="high"]:hover:not(.disabled),
.assessment-rating-btn[data-tone="high"].selected {
  border-color: #4ade80;
  background: rgba(74,222,128,0.15);
  color: #4ade80;
}
.assessment-rating-btn[data-tone="high"].selected {
  background: #4ade80;
  color: #07090f;
}

/* P-layer header */
.assessment-player {
  border-bottom: 1px solid var(--border);
}
.assessment-player:last-of-type { border-bottom: none; }

.assessment-player-header {
  padding: 16px 18px 12px;
  background: rgba(91,190,245,0.04);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.assessment-player-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
}
.assessment-player-desc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Question body now stacks label + buttons + descriptor */
.assessment-q-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Rating descriptor line */
.assessment-rating-descriptor {
  font-size: 0.72rem;
  color: var(--text-dim);
  line-height: 1.4;
  min-height: 1em;
  font-style: italic;
  transition: color 0.15s;
}

/* Locked chat input after assessment submission */
.chat-input-locked {
  padding: 14px 18px;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: center;
  font-style: italic;
  border-top: 1px solid var(--border);
}

/* Result: notable patterns section title */
.result-dims-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}

.assessment-submit {
  display: block;
  width: calc(100% - 36px);
  margin: 16px 18px;
  padding: 13px 20px;
  background: var(--gold);
  color: #07090f;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-align: center;
  transition: background var(--transition), opacity var(--transition);
}
.assessment-submit:hover:not(:disabled) {
  background: var(--gold-light);
}
.assessment-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Section badge (e.g. "Section 1 of 3") */
.assessment-section-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(212,175,55,0.1);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 20px;
  padding: 2px 10px;
  margin-left: 10px;
  vertical-align: middle;
}

/* Category label above each question text */
.assessment-q-cat {
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

/* Section area — wraps the currently visible P-layer */
.assessment-section-area {
  min-height: 40px;
}

/* Nav bar (Back / Next / Submit row) */
.assessment-nav-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.assessment-nav-btn {
  padding: 10px 22px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background var(--transition), opacity var(--transition);
}

.assessment-nav-back {
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.assessment-nav-back:hover {
  background: var(--surface-2);
  color: var(--text);
}

.assessment-nav-next {
  background: var(--gold);
  color: #07090f;
}
.assessment-nav-next:hover:not(:disabled) {
  background: var(--gold-light);
}
.assessment-nav-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Typing indicator */
.msg-typing {
  margin-bottom: 28px;
  animation: msgFadeIn 0.25s ease;
}
.typing-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 4px 0;
}
.typing-dots span {
  width: 7px;
  height: 7px;
  background: var(--text-dim);
  border-radius: 50%;
  animation: typingBounce 1.2s ease-in-out infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes typingBounce {
  0%, 80%, 100% { transform: translateY(0);    opacity: 0.4; }
  40%            { transform: translateY(-6px); opacity: 1; }
}

/* Error message */
/* ── Specialist referral card ──────────────────────────────────── */
.referral-card {
  margin-bottom: 20px;
  padding: 22px 24px;
  background: var(--surface-2);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  max-width: 480px;
}
.referral-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.referral-card-icon { color: var(--gold); font-size: 1rem; }
.referral-card-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.referral-card-name {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.referral-card-role {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.referral-card-reason {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.referral-card-consent {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.referral-card-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.referral-btn-yes {
  padding: 9px 18px;
  font-size: 0.875rem;
}
.referral-btn-no {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 9px 4px;
  transition: color var(--transition);
}
.referral-btn-no:hover { color: var(--text); }
.referral-card-feedback {
  margin-top: 12px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.msg-error {
  margin-bottom: 20px;
  padding: 14px 18px;
  background: rgba(248,113,113,0.08);
  border: 1px solid rgba(248,113,113,0.25);
  border-radius: var(--radius);
  color: #fca5a5;
  font-size: 0.875rem;
  animation: msgFadeIn 0.3s ease;
}

/* Divider between sessions */
.msg-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0;
  color: var(--text-dim);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.msg-divider::before, .msg-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

@keyframes msgFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── CHAT INPUT ───────────────────────────────────────────────── */
.chat-input-area {
  flex-shrink: 0;
  padding: 16px 28px 24px;
  border-top: 1px solid var(--border);
  background: rgba(7,9,15,0.95);
  backdrop-filter: blur(12px);
}

.chat-input-wrap {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 10px 10px 18px;
  transition: border-color var(--transition);
}
.chat-input-wrap:focus-within {
  border-color: rgba(91,190,245,0.4);
}

.chat-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 0.925rem;
  line-height: 1.6;
  resize: none;
  max-height: 160px;
  overflow-y: auto;
  padding: 4px 0;
}
.chat-input::placeholder { color: var(--text-dim); }
.chat-input:disabled { cursor: not-allowed; opacity: 0.5; }
.chat-input::-webkit-scrollbar { width: 3px; }
.chat-input::-webkit-scrollbar-thumb { background: var(--border); }

.chat-send {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--gold);
  color: #07090f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), opacity var(--transition);
}
.chat-send:hover { background: var(--gold-light); }
.chat-send:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── EXPERT SELECTION ────────────────────────────────────────── */
.expert-select { margin-bottom: 8px; }

.expert-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
  max-width: 560px;
}

.expert-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.expert-card:hover {
  border-color: var(--gold);
  background: var(--gold-dim);
  transform: translateY(-2px);
}

.expert-card-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  display: block;
}

.expert-card-role {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-bottom: 4px;
}

.expert-card-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  display: block;
}

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

/* ── ASSESSMENT RESULT PANEL ─────────────────────────────────── */
.msg-result {
  margin-bottom: 28px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  animation: msgFadeIn 0.3s ease;
}

.result-header {
  padding: 24px 24px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.result-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.result-overall-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 6px;
}

.result-score-num {
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--text);
}

.result-score-denom {
  font-size: 1.2rem;
  color: var(--text-muted);
  font-weight: 300;
}

.result-band-label {
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 14px;
  line-height: 1.3;
}

.result-overall-bar {
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.result-overall-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1.1s cubic-bezier(0.4,0,0.2,1);
}

/* Dimension rows */
.result-dims { padding: 0 24px; }

.result-dim {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.result-dim:last-child { border-bottom: none; }

.result-dim-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.result-dim-name {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.result-dim-score {
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.result-dim-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 10px;
  overflow: hidden;
}

.result-dim-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1s cubic-bezier(0.4,0,0.2,1) 0.15s;
}

/* Sub-category tags (kept for expert cards reuse) */
.people-tag  { background: rgba(167,139,250,0.12); color: #a78bfa; }
.product-tag { background: rgba(96,165,250,0.12);  color: #60a5fa; }
.process-tag { background: rgba(52,211,153,0.12);  color: #34d399; }

/* PPP summary section */
.result-ppp {
  padding: 20px 24px 24px;
  border-top: 1px solid var(--border);
}

.result-ppp-title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.result-ppp-subtitle {
  font-size: 0.62rem;
  color: var(--text-muted);
  opacity: 0.7;
  margin-bottom: 14px;
}

.result-ppp-row {
  display: grid;
  grid-template-columns: 60px 1fr 44px;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.result-ppp-row:last-child { margin-bottom: 0; }

.result-ppp-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  text-align: center;
}

.result-ppp-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.result-ppp-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1s cubic-bezier(0.4,0,0.2,1) 0.3s;
}

.result-ppp-val {
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ── REGISTER PAGE ───────────────────────────────────────────── */
.register-page { min-height: 100vh; display: flex; flex-direction: column; }

.register-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 20px 60px;
}

.register-card {
  width: 100%;
  max-width: 640px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px;
}

.register-header {
  margin-bottom: 32px;
  text-align: center;
}
.register-header h1 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--text);
  margin-bottom: 8px;
}
.register-header p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Phone field */
.phone-field {
  display: grid;
  grid-template-columns: 165px 1fr;
  gap: 10px;
}
.phone-code-select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 28px 12px 12px;
  color: var(--text);
  font-size: 0.9rem;
  font-family: var(--font-body);
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237a8999' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.phone-code-select:focus { border-color: var(--gold); }

/* Password field */
.password-field {
  position: relative;
}
.password-field input {
  width: 100%;
  padding-right: 58px !important;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 58px 12px 14px;
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition);
}
.password-field input:focus { border-color: var(--gold); }
.password-field input::placeholder { color: var(--text-dim); }
.password-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition);
  background: none;
  border: none;
  font-family: var(--font-body);
  letter-spacing: 0.04em;
}
.password-toggle:hover { color: var(--gold); }

/* Strength bar */
.password-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.strength-bar {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.strength-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--gold);
  transition: width 0.3s ease, background 0.3s ease;
}
.strength-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 72px;
  text-align: right;
}

/* Password rules checklist */
.password-rules {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 10px;
}
.password-rules li {
  font-size: 0.78rem;
  color: var(--text-dim);
  padding-left: 18px;
  position: relative;
  transition: color 0.2s;
}
.password-rules li::before {
  content: '○';
  position: absolute;
  left: 0;
  transition: color 0.2s;
}
.password-rules li.rule-pass { color: #4ade80; }
.password-rules li.rule-pass::before { content: '●'; color: #4ade80; }

/* Register submit */
/* Consent checkboxes */
.consent-block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.consent-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}
.consent-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--gold);
  cursor: pointer;
}
.consent-text {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.consent-text a {
  color: var(--gold);
  text-decoration: underline;
}
.consent-row.consent-error .consent-text {
  color: #f87171;
}

.register-submit {
  width: 100%;
  justify-content: center;
  margin-top: 8px;
}
.register-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}
.register-signin {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 14px;
}
.register-signin a { color: var(--gold); transition: color var(--transition); }
.register-signin a:hover { color: var(--gold-light); }

/* Success state */
.register-success { text-align: center; padding: 24px 0; }
.success-icon {
  width: 56px;
  height: 56px;
  background: rgba(74,222,128,0.08);
  border: 1px solid rgba(74,222,128,0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #4ade80;
  margin: 0 auto 18px;
}
.register-success h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.register-success p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }
.register-success a { color: var(--gold); }
.register-success a:hover { color: var(--gold-light); }
.register-success a.btn-gold  { color: #ffffff; }
.register-success a.btn-ghost { color: var(--text-muted); }
.register-success a.btn-gold:hover  { color: #ffffff; }
.register-success a.btn-ghost:hover { color: var(--navy); }

/* ── ANIMATION SYSTEM ────────────────────────────────────────── */

/* Hero cascade — starts hidden via animation-fill-mode: both */
.hero-label,
.hero-headline,
.hero-slogan,
.hero-sub,
.hero-actions,
.hero-trust,
.hero-scope-note,
.hero-scroll-hint {
  animation: heroReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero-label       { animation-delay: 60ms; }
.hero-headline    { animation-delay: 200ms; }
.hero-slogan      { animation-delay: 280ms; }
.hero-sub         { animation-delay: 350ms; }
.hero-actions     { animation-delay: 500ms; }
.hero-trust       { animation-delay: 560ms; }
.hero-scope-note  { animation-delay: 620ms; }
.hero-scroll-hint { animation-delay: 700ms; }

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll-reveal base state */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity  0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--rv-delay, 0ms),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) var(--rv-delay, 0ms);
}

/* Default: fade + rise */
[data-reveal="fade"]  { transform: translateY(20px); }
[data-reveal="label"] { transform: translateY(10px); }
[data-reveal="title"] { transform: translateY(16px); }

/* Cards: fade + micro-scale */
[data-reveal="card"] { transform: translateY(20px) scale(0.98); }

/* Steps: slide from left */
[data-reveal="step"] { transform: translateX(-22px); }

/* Revealed state — same for all */
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Stagger delays */
[data-delay="1"] { --rv-delay:  80ms; }
[data-delay="2"] { --rv-delay: 160ms; }
[data-delay="3"] { --rv-delay: 240ms; }
[data-delay="4"] { --rv-delay: 320ms; }

/* Hero glow — second ambient layer for depth */
.hero-glow::after {
  content: '';
  position: absolute;
  inset: 15%;
  background: radial-gradient(ellipse, rgba(200,160,70,0.04) 0%, transparent 70%);
  animation: glowPulse 12s ease-in-out infinite reverse;
  pointer-events: none;
}

/* CTA strip sits on a navy background — invert to white/navy so it stays
   legible and matches the standard navy/white button everywhere else
   (a navy button on a navy section would be invisible). */
.cta-strip .btn-gold {
  background: #ffffff;
  color: var(--navy);
}
.cta-strip .btn-gold:hover {
  background: #f0ede8;
  color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

/* Pillar hover — lift */
.pillar {
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s ease;
}
.pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

/* Framework card hover — lift */
.framework-card {
  transition: background 0.25s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.framework-card:hover {
  transform: translateY(-3px);
}

/* Social icon hover — scale */
.social-link {
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.social-link:hover { transform: translateY(-2px) scale(1.08); }

/* Reduced motion — disable everything */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  .hero-label, .hero-headline, .hero-slogan, .hero-sub,
  .hero-actions, .hero-trust, .hero-scope-note, .hero-scroll-hint {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    will-change: auto !important;
  }
  .cta-strip .btn-gold { animation: none; }
  .hero-glow, .hero-glow::after { animation: none; }
}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Uniform CTA sizing on mobile — every primary call-to-action (not small
     utility controls like the password-visibility toggle, language switch,
     or nav hamburger) stretches to its container's full width and shares
     one fixed height, instead of each being sized ad hoc to its own label
     length. Flex-wrap containers (.hero-actions, .cta-strip-actions) then
     stack paired CTAs onto their own full-width lines automatically. */
  .btn-gold, .btn-ghost, .btn-sample {
    width: 100%;
    height: 48px;
    padding: 0 20px;
    box-sizing: border-box;
    justify-content: center;
  }

  /* Services page CTAs (.svc-detail-cta on the paid/free session buttons,
     .svc-cta on the human-led buttons) each carry their own display/width
     overrides from services.html and style.css that fight the uniform
     mobile button rule above — .svc-detail-cta forces inline-block and
     .svc-cta forces block + nowrap, so height/justify-content never take
     effect and long labels ("Request a Consultation") overflow instead of
     wrapping. Bring both back in line with every other mobile CTA.
     margin-left/right: 0 matters here — .svc-cta's own desktop rule sets
     margin: 0 20px 28px (it's normally inset from its card by 20px each
     side instead of being full-width), and width: 100% here is 100% of
     the card's content box already, so keeping the 20px side margins on
     top of a full-width box pushed the button 40px past its own card. */
  .svc-detail-cta, .svc-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 48px;
    margin-left: 0;
    margin-right: 0;
    white-space: normal;
    text-align: center;
  }

  .nav-inner { padding: 16px 20px; }
  .nav-links { gap: 16px; }
  .hero { padding: 100px 20px 60px; }
  .laws-body { font-size: 1rem; }
  .section { padding: 70px 20px; }
  .framework-grid { grid-template-columns: 1fr; gap: 1px; }
  .step { grid-template-columns: 44px 1fr; gap: 0 20px; }
  .step-num { font-size: 1.5rem; }
  .cta-strip { padding: 70px 20px; }
  .footer { padding: 28px 20px; }
  .footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    max-width: none;
  }
  .footer-col { justify-content: center; flex: none; width: 100%; }
  .footer-col-left   { order: 1; }
  .footer-col-center { order: 2; flex-wrap: wrap; flex-direction: column; align-items: center; }
  .footer-col-right  { order: 3; }
  .footer-links { flex-wrap: wrap; white-space: normal; justify-content: center; }
  .footer-social { justify-content: center; }
  .contact-row { grid-template-columns: 1fr; }
  .contact-footer { flex-direction: column; align-items: flex-start; }
  .assessment-q-row { grid-template-columns: 28px 1fr; }
  .assessment-rating-btn { width: 28px; height: 28px; font-size: 0.72rem; }
  .assessment-rating-row { grid-column: 1 / -1; padding-left: 38px; flex-wrap: wrap; }
  .chat-header { padding: 12px 14px; gap: 8px; }
  .chat-header-left { gap: 10px; }
  .chat-header-right { gap: 10px; }
  .chat-logo { font-size: 1rem; }
  .tone-label { display: none; }
  /* native <select> sizes itself to its widest <option> (e.g. "Thinking
     Partner") regardless of the current short selection — cap it so it
     doesn't blow out the header width on narrow screens. */
  .tone-select { max-width: 92px; font-size: 0.68rem; padding: 4px 18px 4px 7px; }
  .chat-status { display: none; }
  .msg-wrap { padding: 0 16px; }
  .chat-messages { padding: 28px 0 16px; }
  .chat-input-area { padding: 12px 16px 20px; }
  .msg-user-bubble { max-width: 90%; }
  .register-card { padding: 28px 20px; }
  .phone-field { grid-template-columns: 1fr; }
}

/* ── LAWS OF YOUNIVERSE ────────────────────────────────────────── */
.laws-body {
  font-size: 1.1rem;
  line-height: 1.9;
  color: var(--text-muted);
  max-width: 720px;
  margin: 2rem auto 0;
  text-align: center;
}

/* ── LANGUAGE TOGGLE ────────────────────────────────────────────── */
.btn-lang {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.btn-lang:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ── RTL SUPPORT ────────────────────────────────────────────────── */
:lang(ar) body,
:lang(ar) input,
:lang(ar) textarea,
:lang(ar) button {
  font-family: 'Cairo', system-ui, sans-serif;
}

:lang(ar) .section-title,
:lang(ar) .hero-headline {
  font-family: 'Cairo', system-ui, sans-serif;
  font-weight: 700;
}

[dir="rtl"] .hero-scroll-hint {
  left: auto;
  right: 2.5rem;
}

[dir="rtl"] .laws-body {
  text-align: center;
}

[dir="rtl"] .section-label {
  text-align: right;
}

[dir="rtl"] .section-title {
  text-align: right;
}

[dir="rtl"] .steps {
  text-align: right;
}

[dir="rtl"] .contact-form {
  text-align: right;
}

[dir="rtl"] .footer-inner {
  direction: rtl;
}

@media (max-width: 600px) {
  [dir="rtl"] .footer-inner {
    flex-direction: column;
    align-items: flex-end;
  }
}

/* ── Timer warning toast ─────────────────────────────────────────── */
.timer-warning-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 16px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fbbf24;
  font-size: 0.84rem;
  line-height: 1.5;
  animation: toastIn 0.3s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── IMAGE PLACEHOLDERS ─────────────────────────────────────────── */
.img-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--surface);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-dim);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 40px 24px;
  user-select: none;
}
.img-placeholder-icon {
  width: 40px;
  height: 40px;
  opacity: 0.35;
}
.img-placeholder-label {
  font-weight: 500;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.img-placeholder-hint {
  font-size: 0.72rem;
  color: var(--text-dim);
  max-width: 240px;
  line-height: 1.5;
}

/* Hero image placeholder */
.hero-img-placeholder {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 4/3;
}

/* About / wide placeholder */
.about-img-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  max-width: 600px;
}

/* ── SOUND TOGGLE ────────────────────────────────────────────────── */
.sound-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
  flex-shrink: 0;
}
.sound-toggle:hover {
  color: var(--navy);
  border-color: rgba(20,20,46,0.25);
  background: var(--surface);
}
.sound-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.sound-toggle[aria-pressed="true"] {
  color: var(--gold-text);
  border-color: var(--gold-border);
  background: var(--gold-dim);
}
.sound-toggle svg { width: 16px; height: 16px; }

/* ── DATA / MONO NUMBERS ─────────────────────────────────────────── */
.mono, .score-num, .pts-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ── REVEAL ANIMATIONS (handled by existing block above) ─────────── */
/* Duplicate removed — see existing [data-reveal] block */

/* ── BOSS CARD LAYER TAG UPDATE ──────────────────────────────────── */
.boss-layer-tag {
  background: var(--gold-dim) !important;
  border-color: var(--gold-border) !important;
  color: var(--gold-text) !important;
}

/* ── PROBLEM ITEM CHECK ──────────────────────────────────────────── */
.problem-check { color: var(--gold-text) !important; }

/* ── SELECTED SERVICE CARD ───────────────────────────────────────── */
.svc-card--selected {
  border-color: var(--navy) !important;
  box-shadow: 0 0 0 2px rgba(20,20,46,0.10), var(--shadow) !important;
}

/* ── CARD NUMBER / LABEL ACCENTS ─────────────────────────────────── */
.card-num { color: var(--gold-text) !important; }
.card-tag  { color: var(--gold-text) !important; }

/* ── CONTACT FORM ────────────────────────────────────────────────── */
.captcha-input:focus { border-color: var(--navy) !important; }

/* ── SOUND TOGGLE — removed ──────────────────────────────────────── */
.sound-toggle { display: none !important; }

/* ── TEXT JUSTIFICATION ──────────────────────────────────────────── */
.hero-sub,
.section-sub,
.svc-tagline,
.svc-full-name,
.pillar-body,
.framework-card p,
.about-text,
.faq-answer,
.laws-body {
  text-align: justify;
}
/* Soft hyphenation only on wider text blocks */
.pillar-body,
.framework-card p,
.about-text,
.faq-answer,
.laws-body {
  hyphens: auto;
}

/* ── MOBILE — current page name next to the hamburger button ──────── */
.nav-mobile-bar { display: none; align-items: center; gap: 10px; }
.nav-page-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 38vw;
}

/* ── HAMBURGER MENU BUTTON ───────────────────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition), background var(--transition);
}
.nav-toggle:hover { border-color: rgba(20,20,46,0.25); background: var(--surface); }
.nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
  transform-origin: center;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── MOBILE NAV ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { padding: 110px 24px 80px; }
  .hero-scroll-hint { display: none; }
  .cta-strip { padding: 56px 24px; }

  .nav-inner { padding: 16px 20px; }
  .nav-mobile-bar { display: flex; }
  .nav-toggle { display: flex; }

  .nav-links {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 90px 28px 40px;
    gap: 4px;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    overflow-y: auto;
  }
  .nav-links.is-open { display: flex; }

  .nav-link {
    font-size: 1rem;
    padding: 12px 0;
    width: 100%;
    border-bottom: 1px solid var(--border);
    color: var(--text);
  }
  .nav-link:last-child { border-bottom: none; }

  /* Profile pill on mobile */
  .nav-user {
    width: 100%;
    justify-content: space-between;
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
  }
  .nav-links .nav-authed { display: flex !important; width: 100%; }

  /* Profile dropdown on mobile — no hover/click mechanics; renders as an
     always-expanded inline list under the "Profile" row, consistent with
     the rest of the collapsed menu. */
  .nav-profile { flex-direction: column; align-items: flex-start; }
  .nav-profile-menu {
    display: flex !important;
    position: static;
    /* Desktop centers the menu with left: 50%; transform: translateX(-50%).
       left has no effect once position is static, but transform still
       does — left unreset, it shifted the whole menu half its own width
       off to the left, clipping most of it off-screen. */
    left: auto;
    transform: none;
    margin-top: 0;
    padding: 0 0 0 14px;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  .nav-profile-menu .nav-link { border-bottom: 1px solid var(--border); }
  .nav-profile-menu .nav-link:last-child { border-bottom: none; }

  /* Section padding on mobile */
  .section { padding: 56px 20px; }
  .services-row--4,
  .services-row--3 { grid-template-columns: 1fr; }
  .svc-card { max-width: 100%; }
}

@media (max-width: 480px) {
  .hero { padding: 90px 20px 64px; }
  .hero-headline { font-size: 2rem; }
  .hero-label { font-size: 0.68rem; }
}

/* ── SHOW MORE / REPORT CHUNKING ─────────────────────────────────── */
.msg-assistant-body.is-collapsed {
  max-height: 420px;
  overflow: hidden;
  position: relative;
}
.msg-assistant-body.is-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.msg-show-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--gold-border);
  background: var(--gold-dim);
  color: var(--gold-text);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.msg-show-more:hover {
  background: rgba(224,85,0,0.14);
  border-color: var(--gold);
}
.msg-show-more-wrap {
  padding: 4px 0 12px;
}

.report-pdf-email-wrap {
  padding: 4px 0 12px;
}

/* Auto-send status — replaces the old click-to-send button; the report
   email now fires automatically as soon as the report is confirmed. */
.report-pdf-auto-status {
  font-size: 0.84rem;
  line-height: 1.6;
}
.report-pdf-status-text {
  color: var(--text-dim);
}
.report-pdf-status-error {
  color: #f87171;
}
.report-pdf-sent-summary {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(74,222,128,0.35);
  background: rgba(74,222,128,0.08);
  color: #15803d;
}
.report-pdf-retry-btn {
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border-color: rgba(248,113,113,0.4);
  color: #f87171;
}
.report-pdf-retry-btn:hover {
  background: rgba(248,113,113,0.08);
}

/* ── Screen report view — compact action-oriented report card ────────────── */

.screen-report {
  display: block;
}

.screen-report-section {
  border-top: 2px solid var(--gold);
  margin-top: 22px;
  padding-top: 12px;
}
.screen-report-section:first-child { margin-top: 0; }

.screen-report-heading {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 8px;
}

.screen-report-question {
  margin-bottom: 18px;
}
.screen-report-question-text {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--navy);
}

.screen-report-sv {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--navy);
}
.screen-report-sv p:last-child { margin-bottom: 0; }

/* Score block — two rows of colour-coded badges */
.bp-score-block { display: block; }
.bp-score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.bp-score-rowlabel {
  flex: 0 0 84px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}
.bp-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bp-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 78px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
}
.bp-badge-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.bp-badge-val {
  font-size: 1.02rem;
  font-weight: 700;
  margin-top: 1px;
}
.bp-score-strong   { background: #dcfce7; border-color: rgba(21,128,61,0.25);  color: #15803d; }
.bp-score-watch    { background: #fef3c7; border-color: rgba(180,83,9,0.25);   color: #b45309; }
.bp-score-critical { background: #fee2e2; border-color: rgba(185,28,28,0.25);  color: #b91c1c; }

.bp-score-callout {
  margin-top: 4px;
  padding: 10px 14px;
  background: var(--gold-dim);
  border-left: 3px solid var(--gold);
  font-size: 0.94rem;
  color: var(--navy);
}

.screen-report-actions ol,
.screen-report-actions ul {
  margin: 0;
  padding-left: 20px;
}
.screen-report-actions li { margin-bottom: 10px; }
.screen-report-actions li:last-child { margin-bottom: 0; }

.bp-exposure-flag {
  margin-top: 18px;
  padding: 10px 14px;
  background: #fdf3e7;
  border: 1px solid var(--gold);
  border-left: 4px solid var(--gold);
  font-size: 0.9rem;
  color: var(--navy);
}

.screen-report-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 2px solid var(--gold);
}
.bp-service-cta {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--gold-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.bp-screen-disclaimer {
  margin-top: 14px;
  font-size: 0.78rem;
  color: #5c5c72;
}

@media (max-width: 480px) {
  .bp-score-rowlabel { flex-basis: 100%; }
  .bp-badge { min-width: calc(33% - 8px); }
}