:root {
  --page-accent: var(--mint);
  --page-accent-dark: var(--mint-dark);
  --page-accent-soft: var(--mint-soft);
}

body[data-page="professionals"] {
  --page-accent: #19b88d;
  --page-accent-dark: #08765d;
  --page-accent-soft: #dff7ee;
}

body[data-page="employers"] {
  --page-accent: #4f7df3;
  --page-accent-dark: #2754bc;
  --page-accent-soft: #e7efff;
}

.nav-current {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

.audience-hero {
  min-height: 760px;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 72px;
  align-items: center;
  padding-block: 86px 100px;
}

.audience-hero-copy { max-width: 610px; }
.audience-hero h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(54px, 6.2vw, 86px);
  font-weight: 600;
}
.audience-hero .hero-lede { max-width: 590px; }
.audience-hero .eyebrow { color: var(--page-accent-dark); }
.audience-hero .status-dot { background: var(--page-accent); }

.page-stage {
  position: relative;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: rgba(255,255,255,.56);
  box-shadow: 0 34px 90px rgba(15,25,28,.12);
}
.page-stage::before {
  content: "";
  position: absolute;
  inset: -70px -50px auto auto;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--page-accent) 24%, transparent), transparent 70%);
  pointer-events: none;
}

.ui-window {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(16,22,26,.14);
  border-radius: 23px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(17,35,39,.12);
}
.ui-toolbar {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 17px;
  border-bottom: 1px solid var(--line);
  background: #f8f9f6;
  font-size: 10px;
  color: var(--ink-faint);
}
.ui-toolbar strong { color: var(--ink); font-size: 11px; }
.ui-toolbar .toolbar-spacer { flex: 1; }
.ui-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--page-accent-soft);
  color: var(--page-accent-dark);
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.ui-body { padding: 24px; }

.profile-mini-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 28px;
  border-radius: 18px;
  background: var(--dark);
  color: #fff;
}
.profile-mini-hero h3 { margin: 10px 0 6px; font-size: 31px; }
.profile-mini-hero p { margin: 0; color: rgba(255,255,255,.7); font-size: 12px; }
.profile-mini-photo {
  width: 82px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--page-accent), #477df0);
  font-weight: 800;
}

.mini-proof-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-top: 14px;
}
.mini-proof-grid article {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fafbf9;
}
.mini-proof-grid strong,
.mini-proof-grid span { display: block; }
.mini-proof-grid strong { font-size: 11px; }
.mini-proof-grid span { margin-top: 5px; color: var(--ink-faint); font-size: 8px; }

.privacy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.privacy-row span {
  padding: 7px 9px;
  border-radius: 999px;
  background: #f0f3ef;
  color: var(--ink-soft);
  font-size: 8px;
  font-weight: 700;
}

.role-card h3 { margin: 9px 0 5px; font-size: 27px; }
.role-card > p { margin: 0; color: var(--ink-faint); font-size: 11px; }
.role-summary {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 9px;
  margin-top: 18px;
}
.role-summary div {
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.role-summary strong,
.role-summary span { display: block; }
.role-summary strong { font-size: 18px; }
.role-summary span { margin-top: 5px; color: var(--ink-faint); font-size: 8px; }
.role-summary .supported { background: #effaf6; }
.role-summary .uncertain { background: #fff8ea; }
.role-summary .missing { background: #f4f5f3; }

.evidence-stack { margin-top: 17px; }
.evidence-stack article {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  align-items: start;
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.evidence-stack b { font-size: 11px; }
.evidence-stack p { margin: 3px 0 0; color: var(--ink-faint); font-size: 9px; }
.evidence-state {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--page-accent-soft);
  color: var(--page-accent-dark);
  font-size: 9px;
  font-weight: 800;
}
.evidence-source { color: var(--ink-faint); font-size: 8px; }

.audience-principles {
  border-block: 1px solid var(--line);
  background: rgba(255,255,255,.46);
}
.audience-principles-grid {
  min-height: 106px;
  display: grid;
  grid-template-columns: repeat(4,1fr);
  align-items: center;
}
.audience-principles-grid div {
  min-height: 48px;
  padding: 0 24px;
  border-right: 1px solid var(--line);
}
.audience-principles-grid div:first-child { padding-left: 0; }
.audience-principles-grid div:last-child { border-right: 0; }
.audience-principles-grid span,
.audience-principles-grid strong { display: block; }
.audience-principles-grid span {
  color: var(--page-accent-dark);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 9px;
  font-weight: 800;
}
.audience-principles-grid strong { margin-top: 7px; font-size: 13px; }

.story-intro {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: 90px;
  align-items: end;
  margin-bottom: 64px;
}
.story-intro h2 {
  margin: 0;
  font-size: clamp(42px,5vw,68px);
  font-weight: 600;
}
.story-intro > p { margin: 0; color: var(--ink-soft); font-size: 17px; line-height: 1.7; }

.story-flow { display: grid; gap: 28px; }
.story-step {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 70px;
  align-items: center;
  min-height: 590px;
  padding: 66px;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: #eef2ec;
  overflow: hidden;
}
.story-step:nth-child(even) { background: #eef2f8; }
.story-step:nth-child(even) .story-copy { order: 2; }
.story-step:nth-child(even) .story-visual { order: 1; }
.story-number {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}
.story-copy h3 { margin: 27px 0 17px; font-size: 39px; font-weight: 600; }
.story-copy > p { color: var(--ink-soft); font-size: 15px; line-height: 1.7; }
.story-copy .check-list { margin-top: 25px; }
.story-copy .check-list li::before { color: var(--page-accent-dark); background: var(--page-accent-soft); }

.story-visual {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(16,22,26,.1);
  border-radius: 24px;
  background: rgba(255,255,255,.62);
}

.interview-chat { display: grid; gap: 11px; }
.chat-bubble {
  max-width: 88%;
  padding: 13px 15px;
  border-radius: 15px;
  font-size: 10px;
  line-height: 1.5;
}
.chat-bubble.system { background: #f1f4f0; color: var(--ink-soft); }
.chat-bubble.user { justify-self: end; background: var(--dark); color: #fff; }
.chat-actions { display: flex; gap: 7px; flex-wrap: wrap; }
.chat-actions span {
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-soft);
  font-size: 8px;
}

.case-card {
  padding: 22px;
  border-radius: 17px;
  background: #fff;
  border: 1px solid var(--line);
}
.case-card + .case-card { margin-top: 10px; }
.case-card small { color: var(--page-accent-dark); text-transform: uppercase; letter-spacing: .09em; font-size: 8px; font-weight: 800; }
.case-card h4 { margin: 9px 0 8px; font-size: 19px; }
.case-card p { margin: 0; color: var(--ink-faint); font-size: 9px; }
.case-metrics { display: flex; gap: 8px; margin-top: 15px; }
.case-metrics span { padding: 7px 9px; border-radius: 9px; background: var(--page-accent-soft); color: var(--page-accent-dark); font-size: 8px; font-weight: 700; }

.access-settings { display: grid; gap: 11px; }
.setting-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}
.setting-row strong { display: block; font-size: 11px; }
.setting-row p { margin: 4px 0 0; color: var(--ink-faint); font-size: 9px; }
.toggle {
  width: 34px;
  height: 19px;
  padding: 3px;
  border-radius: 999px;
  background: var(--page-accent);
}
.toggle::after {
  content: "";
  display: block;
  width: 13px;
  height: 13px;
  margin-left: auto;
  border-radius: 50%;
  background: #fff;
}
.setting-select { padding: 7px 9px; border-radius: 9px; background: #f1f3f0; font-size: 8px; font-weight: 700; }

.share-card {
  padding: 28px;
  border-radius: 18px;
  background: var(--dark);
  color: #fff;
}
.share-card small { color: color-mix(in srgb, var(--page-accent) 72%, white); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.share-card h4 { margin: 11px 0 7px; font-size: 26px; }
.share-card p { margin: 0; color: rgba(255,255,255,.65); font-size: 10px; }
.share-link {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  background: rgba(255,255,255,.07);
  font-size: 9px;
}

.employer-compare { display: grid; gap: 10px; }
.compare-person {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}
.compare-head { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.compare-head strong { font-size: 11px; }
.compare-head span { color: var(--ink-faint); font-size: 8px; }
.compare-bars { display: grid; gap: 7px; margin-top: 13px; }
.compare-bar { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 9px; font-size: 8px; color: var(--ink-faint); }
.compare-track { height: 6px; border-radius: 999px; background: #edf0ec; overflow: hidden; }
.compare-fill { height: 100%; border-radius: inherit; background: var(--page-accent); }
.compare-fill.w78 { width: 78%; }
.compare-fill.w66 { width: 66%; }
.compare-fill.w51 { width: 51%; }
.compare-fill.w42 { width: 42%; }

.decision-record { display: grid; gap: 10px; }
.decision-event {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
}
.event-dot { width: 11px; height: 11px; margin-top: 3px; border-radius: 50%; background: var(--page-accent); box-shadow: 0 0 0 5px var(--page-accent-soft); }
.decision-event strong { display: block; font-size: 10px; }
.decision-event p { margin: 4px 0 0; color: var(--ink-faint); font-size: 8px; }

.use-case-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.use-case-card {
  min-height: 320px;
  padding: 31px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.65);
}
.use-case-card span { color: var(--page-accent-dark); font-size: 10px; font-weight: 800; }
.use-case-card h3 { margin: 105px 0 14px; font-size: 28px; }
.use-case-card p { margin: 0; color: var(--ink-soft); font-size: 13px; }

.status-band {
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 85px;
  padding: 70px;
  border-radius: 32px;
  background: var(--dark);
  color: #fff;
}
.status-band h2 { margin: 0; font-size: clamp(40px,5vw,62px); }
.status-band > div > p { color: rgba(255,255,255,.65); }
.status-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; }
.status-cards article { padding: 24px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.06); }
.status-cards strong { display: block; font-size: 12px; }
.status-cards p { margin: 11px 0 0; color: rgba(255,255,255,.62); font-size: 10px; }

.page-cta {
  padding: 86px;
  border-radius: 32px;
  text-align: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--page-accent) 30%, #112224), #0e171b 65%);
  color: #fff;
}
.page-cta h2 { max-width: 900px; margin: 0 auto; font-size: clamp(42px,5vw,66px); }
.page-cta p { max-width: 680px; margin: 23px auto 0; color: rgba(255,255,255,.66); font-size: 17px; }
.page-cta .cta-actions { margin-top: 32px; }

@media (max-width: 1040px) {
  .audience-hero { grid-template-columns: 1fr; min-height: auto; }
  .page-stage { max-width: 780px; width: 100%; margin-inline: auto; }
  .story-intro, .status-band { grid-template-columns: 1fr; gap: 45px; }
  .story-step { grid-template-columns: 1fr; min-height: auto; }
  .story-step:nth-child(even) .story-copy,
  .story-step:nth-child(even) .story-visual { order: initial; }
  .audience-principles-grid { grid-template-columns: repeat(2,1fr); padding-block: 12px; }
  .audience-principles-grid div:nth-child(2) { border-right: 0; }
  .use-case-grid { grid-template-columns: 1fr; }
  .use-case-card { min-height: 240px; }
  .use-case-card h3 { margin-top: 65px; }
}

@media (max-width: 760px) {
  .audience-hero { padding-block: 55px 72px; gap: 42px; }
  .audience-hero h1 { font-size: clamp(48px,15vw,67px); }
  .page-stage { padding: 10px; border-radius: 22px; }
  .ui-body { padding: 15px; }
  .profile-mini-hero { padding: 20px; }
  .profile-mini-photo { width: 63px; height: 76px; }
  .mini-proof-grid, .role-summary { grid-template-columns: 1fr; }
  .audience-principles-grid { grid-template-columns: 1fr; }
  .audience-principles-grid div { padding: 16px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .audience-principles-grid div:last-child { border-bottom: 0; }
  .story-intro { margin-bottom: 42px; }
  .story-intro h2 { font-size: 40px; }
  .story-step { padding: 31px 20px; gap: 38px; border-radius: 24px; }
  .story-copy h3 { font-size: 31px; }
  .evidence-stack article { grid-template-columns: auto 1fr; }
  .evidence-source { display: none; }
  .status-band { padding: 42px 23px; }
  .status-cards { grid-template-columns: 1fr; }
  .page-cta { padding: 62px 24px; }
  .page-cta .cta-actions { flex-direction: column; }
}