/* FeatureHeld, employee demo · navy + cream + bronze */
:root {
  --navy: #0B1F3A;
  --navy-deep: #071526;
  --navy-mid: #16325A;
  --bronze: #B08D57;
  --bronze-light: #C9A96E;
  --bronze-dark: #8A6B3A;
  --cream: #F7F5F0;
  --cream-dark: #EDE9E0;
  --ink: #1A2332;
  --muted: #5A6575;
  --line: #D8D2C6;
  --white: #FFFFFF;
  --focus: #2B6CB0;
  --ok: #2F6B4F;
  --warn: #8A5A20;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 12px 40px rgba(11, 31, 58, 0.12);
  --header-h: 72px;
  --font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --max: 1100px;
  --narrow: 720px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg { display: block; max-width: 100%; }

a {
  color: var(--navy-mid);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
a:hover { color: var(--bronze-dark); }
a, button, label, select, input { touch-action: manipulation; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 1000;
  background: var(--navy);
  color: var(--white);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.container {
  width: min(100% - 2rem, var(--max));
  margin-inline: auto;
}
.container.narrow {
  width: min(100% - 2rem, var(--narrow));
}

/* Demo banner */
.demo-banner {
  background: var(--navy);
  color: var(--cream);
  font-size: 0.875rem;
  text-align: center;
  padding: 0.45rem 1rem;
  letter-spacing: 0.01em;
}
.demo-banner strong { color: var(--bronze-light); font-weight: 600; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 245, 240, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-h);
  gap: 1rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.logo:hover { color: var(--navy); }
.logo-mark { flex-shrink: 0; }
.logo-word { font-size: 1.15rem; }
.logo-sub {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--bronze-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: -2px;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  height: 2px;
  background: var(--navy);
  border-radius: 1px;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}
.site-nav a {
  display: inline-block;
  padding: 0.45rem 0.7rem;
  text-decoration: none;
  color: var(--navy-mid);
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.site-nav a:hover {
  background: var(--cream-dark);
  color: var(--navy);
}
.site-nav a[aria-current="page"] {
  background: var(--navy);
  color: var(--cream);
}
.site-nav a[aria-current="page"]:hover {
  background: var(--navy-mid);
  color: var(--cream);
}

main { flex: 1; }

/* Hero / page headers */
.page-hero {
  padding: 2.5rem 0 1.75rem;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--cream-dark) 0%, var(--cream) 100%);
}
.page-hero h1 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.65rem, 3vw, 2.15rem);
  line-height: 1.25;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.page-hero .lead {
  margin: 0;
  max-width: 42rem;
  color: var(--muted);
  font-size: 1.05rem;
}
.eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bronze-dark);
}

.section {
  padding: 2.25rem 0;
}
.section-label {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--bronze-dark);
}
.section h2 {
  margin: 0 0 0.75rem;
  color: var(--navy);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  letter-spacing: -0.02em;
}
.section-lead {
  margin: 0 0 1.25rem;
  color: var(--muted);
  max-width: 40rem;
}

/* Cards */
.card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow);
}
.card h3 {
  margin: 0 0 0.5rem;
  color: var(--navy);
  font-size: 1.1rem;
}
.card p { margin: 0 0 0.75rem; color: var(--muted); font-size: 1rem; }
.card p:last-child { margin-bottom: 0; }
.card-link {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--navy-mid);
  margin-top: 0.5rem;
  min-height: 44px;
  font-size: 1rem;
}
.card-link:hover { color: var(--bronze-dark); }
.card-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--cream-dark);
  display: grid;
  place-items: center;
  margin-bottom: 0.75rem;
  color: var(--bronze-dark);
  font-weight: 700;
  font-size: 0.85rem;
}

/* Callouts / fences */
.callout {
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  border: 1px solid var(--line);
  background: var(--white);
  margin: 1rem 0;
}
.callout strong { color: var(--navy); }
.callout-demo {
  border-left: 4px solid var(--bronze);
  background: #FBF8F1;
}
.callout-fence {
  border-left: 4px solid var(--navy);
  background: #EEF2F7;
}
.callout-warn {
  border-left: 4px solid var(--warn);
  background: #FBF6EE;
}
.callout p { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.95rem; }
.callout p:first-child { margin-top: 0; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.15rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.975rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  min-height: 44px;
  font-size: 1rem;
}
.btn-primary {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}
.btn-primary:hover {
  background: var(--navy-mid);
  border-color: var(--navy-mid);
  color: var(--cream);
}
.btn-secondary {
  background: var(--white);
  color: var(--navy);
  border-color: var(--bronze);
}
.btn-secondary:hover {
  background: var(--cream-dark);
  color: var(--navy);
}
.btn-ghost {
  background: transparent;
  color: var(--navy-mid);
  border-color: var(--line);
}
.btn-ghost:hover {
  border-color: var(--navy-mid);
  color: var(--navy);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

/* Home quick start */
.home-hero-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1.4fr 1fr;
  align-items: start;
}
@media (max-width: 800px) {
  .home-hero-grid { grid-template-columns: 1fr; }
}
.home-aside {
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
  box-shadow: var(--shadow);
}
.home-aside h2 {
  margin: 0 0 0.6rem;
  color: var(--bronze-light);
  font-size: 1.05rem;
}
.home-aside ul {
  margin: 0;
  padding-left: 1.1rem;
  color: rgba(247, 245, 240, 0.9);
  font-size: 0.92rem;
}
.home-aside li { margin-bottom: 0.4rem; }
.home-aside li strong { color: var(--white); }

/* Pulse */
.pulse-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.progress-track {
  flex: 1;
  height: 8px;
  background: var(--cream-dark);
  border-radius: 99px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--bronze-dark), var(--bronze-light));
  border-radius: 99px;
  transition: width 0.25s ease;
}
.progress-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy-mid);
  white-space: nowrap;
}

.pulse-item {
  display: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.pulse-item.active { display: block; }
.pulse-construct {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--bronze-dark);
  background: #F3EBDD;
  padding: 0.25rem 0.55rem;
  border-radius: 99px;
  margin-bottom: 0.75rem;
}
.pulse-item h2 {
  margin: 0 0 0.75rem;
  font-size: 1.2rem;
  color: var(--navy);
  line-height: 1.35;
}
.likert {
  display: grid;
  gap: 0.5rem;
  margin: 1.25rem 0;
}
.likert label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--cream);
  cursor: pointer;
  font-size: 1rem;
  min-height: 48px;
}
.likert label:hover { border-color: var(--bronze); background: #FBF8F1; }
.likert input {
  margin-top: 0.2rem;
  accent-color: var(--navy);
}
.likert label:has(input:checked) {
  border-color: var(--navy);
  background: #EEF2F7;
  box-shadow: inset 0 0 0 1px var(--navy);
}
.pulse-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.pulse-done {
  display: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
}
.pulse-done.visible { display: block; }
.score-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1rem 0;
}
.score-row-4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 720px) {
  .score-row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .score-row { grid-template-columns: 1fr; }
  .score-row-4 { grid-template-columns: 1fr 1fr; }
}
.score-pill {
  background: var(--cream-dark);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  text-align: center;
}
.score-pill .label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.score-pill .value {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin-top: 0.2rem;
}

/* Pulse finish score bars (CSS only, no chart lib) */
.score-chart {
  margin: 0.25rem 0 0.5rem;
  padding: 1rem 1.1rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.score-chart-title {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  color: var(--navy);
}
.score-chart-hint { margin: 0.35rem 0 0; }
.score-bar-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
  font-size: 0.9rem;
}
.score-bar-row:last-child { margin-bottom: 0; }
.score-bar-label {
  font-weight: 700;
  color: var(--navy-mid);
}
.score-bar {
  height: 18px;
  background: var(--cream-dark);
  border: 1px solid var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.score-bar-fill {
  display: block;
  height: 100%;
  border-radius: 99px;
  min-width: 0;
  transition: width 0.35s ease;
}
.score-bar-fill.tone-overall { background: var(--navy); }
.score-bar-fill.tone-features { background: var(--navy-mid); }
.score-bar-fill.tone-perception { background: var(--bronze-dark); }
.score-bar-fill.tone-access { background: var(--bronze); }
.score-bar-val {
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  min-width: 3.75rem;
  text-align: right;
}
@media (max-width: 560px) {
  .score-bar-row { grid-template-columns: 5.25rem 1fr; }
  .score-bar-val { grid-column: 2; justify-self: end; font-size: 0.85rem; }
}

/* Plan features */
.fact-grid {
  display: grid;
  gap: 1rem;
}
.fact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow);
}
.fact-card h3 {
  margin: 0 0 0.35rem;
  color: var(--navy);
  font-size: 1.15rem;
}
.fact-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ok);
  background: #E5F0EA;
  padding: 0.2rem 0.5rem;
  border-radius: 99px;
  margin-bottom: 0.65rem;
}
.fact-body {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
}
.fact-meta {
  margin: 0.65rem 0 0;
  font-size: 0.875rem;
  color: var(--muted);
}
.vesting-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.75rem;
  font-size: 0.95rem;
}
.vesting-table th,
.vesting-table td {
  border: 1px solid var(--line);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.vesting-table th {
  background: var(--cream-dark);
  color: var(--navy);
}

/* Gap report */
.rate-banner {
  background: var(--navy);
  color: var(--cream);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow);
}
.rate-banner h2 {
  margin: 0 0 0.35rem;
  color: var(--bronze-light);
  font-size: 1.05rem;
}
.rate-banner .rate-num {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--white);
}
.rate-banner p {
  margin: 0.5rem 0 0;
  color: rgba(247, 245, 240, 0.88);
  font-size: 0.95rem;
}
.gap-table-wrap {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.gap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 560px;
}
.gap-table th,
.gap-table td {
  padding: 0.85rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.gap-table th {
  background: var(--cream-dark);
  color: var(--navy);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gap-table tr:last-child td { border-bottom: none; }
.gap-status {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 99px;
}
.gap-status.aligned { background: #E5F0EA; color: var(--ok); }
.gap-status.gap { background: #F8EBD8; color: var(--warn); }
.gap-status.unknown { background: var(--cream-dark); color: var(--muted); }

/* Learn */
.lesson-list {
  display: grid;
  gap: 1rem;
}
.lesson {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem;
  box-shadow: var(--shadow);
}
.lesson h3 {
  margin: 0 0 0.5rem;
  color: var(--navy);
}
.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}
.chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.5rem;
  border-radius: 99px;
  background: var(--cream-dark);
  color: var(--navy-mid);
}
.chip.feature { background: #F3EBDD; color: var(--bronze-dark); }
.personalize {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.3rem;
  margin-bottom: 1.25rem;
}
.personalize label {
  display: block;
  font-weight: 700;
  color: var(--navy);
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}
.personalize select {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  font-size: 1rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--cream);
  color: var(--ink);
  margin-bottom: 0.85rem;
}
.personalize-note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Adviser */
.adviser-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  max-width: 40rem;
}
.adviser-card h2 {
  margin: 0 0 0.5rem;
  color: var(--navy);
}
.refuse-box {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  background: #EEF2F7;
  border-left: 4px solid var(--navy);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.refuse-box h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: var(--navy);
}
.refuse-box ul {
  margin: 0.4rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.chat-stub {
  margin-top: 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.chat-log {
  background: var(--cream);
  padding: 1rem;
  min-height: 120px;
  max-height: 240px;
  overflow-y: auto;
  font-size: 0.95rem;
}
.chat-msg {
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-sm);
}
.chat-msg.bot {
  background: var(--white);
  border: 1px solid var(--line);
}
.chat-msg.user {
  background: #EEF2F7;
  border: 1px solid #C5D4E8;
}
.chat-msg .who {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}
.chat-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  background: var(--white);
  border-top: 1px solid var(--line);
}
.chat-form input[type="text"] {
  flex: 1;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 1rem;
  background: var(--cream);
}

/* Footer */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  background: var(--navy-deep);
  color: rgba(247, 245, 240, 0.85);
  padding: 1.75rem 0;
  font-size: 0.9rem;
}
.site-footer a { color: var(--bronze-light); }
.site-footer a:hover { color: var(--cream); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: flex-start;
}
.footer-inner p { margin: 0 0 0.4rem; }
.footer-fences {
  max-width: 36rem;
  color: rgba(247, 245, 240, 0.7);
  font-size: 0.82rem;
}

/* Mobile nav */
@media (max-width: 1040px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    display: none;
    padding: 0.5rem 1rem 0.85rem;
  }
  .site-nav.open { display: block; }
  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
  }
  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.65rem 0.85rem;
    font-size: 1rem;
  }
}
@media (max-width: 640px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; min-height: 48px; }
  .card-grid { grid-template-columns: 1fr; }
  .chat-form { flex-direction: column; }
  .chat-form .btn { width: 100%; min-height: 48px; }
  .page-hero .lead,
  .section-lead,
  .home-aside ul,
  .fact-body,
  .callout p,
  .lesson p,
  .footer-fences,
  .site-footer {
    font-size: 1rem;
  }
  p, li, td, th { overflow-wrap: anywhere; }
}

/* ===== Guided flow v4 ===== */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none !important}
.hint{margin:0.5rem 0 0;font-size:0.92rem;color:var(--muted)}
.muted{color:var(--muted)}

/* 5-step progress bar */
.flow-steps{background:var(--white);border-bottom:1px solid var(--line)}
.flow-steps ol{display:grid;grid-template-columns:repeat(5,1fr);gap:0.25rem;list-style:none;margin:0 auto;padding:0.5rem 0;counter-reset:none}
.flow-steps li{position:relative;min-width:0}
.flow-steps li + li::before{content:"";position:absolute;top:22px;left:-50%;right:50%;height:2px;background:var(--line);z-index:0}
.flow-steps a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:0.2rem;min-height:48px;padding:0.15rem 0.1rem;text-decoration:none;color:var(--muted);font-weight:700;font-size:0.8rem;text-align:center;border-radius:var(--radius-sm)}
.flow-num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--cream-dark);color:var(--navy-mid);border:2px solid var(--line);font-size:0.85rem}
.flow-label{line-height:1.15;white-space:nowrap}
.flow-steps a.done .flow-num{background:var(--bronze);border-color:var(--bronze);color:var(--white)}
.flow-steps a.done{color:var(--navy-mid)}
.flow-steps a[aria-current="step"]{color:var(--navy)}
.flow-steps a[aria-current="step"] .flow-num{background:var(--navy);border-color:var(--navy);color:var(--cream);box-shadow:0 0 0 3px rgba(176,141,87,0.45)}
.flow-steps a:hover .flow-num{border-color:var(--bronze)}

/* Big buttons */
.btn-big{min-height:52px;font-size:1.05rem;padding:0.8rem 1.3rem}
.btn-block{width:100%}
.btn-start{display:flex;align-items:center;justify-content:center;gap:0.5rem;width:100%;max-width:26rem;min-height:60px;margin-top:1.25rem;padding:0.9rem 1.4rem;border-radius:var(--radius);background:var(--navy);color:var(--cream);border:2px solid var(--bronze);font-weight:800;font-size:1.25rem;text-decoration:none;box-shadow:var(--shadow)}
.btn-start:hover{background:var(--navy-mid);color:var(--cream)}
.next-step{padding:0.5rem 0 2.25rem}
.btn-next{display:flex;width:100%;min-height:60px;justify-content:center;align-items:center;gap:0.5rem;background:var(--navy);color:var(--cream);border:2px solid var(--bronze);border-radius:var(--radius);font-size:1.15rem;font-weight:800;box-shadow:var(--shadow);text-decoration:none;padding:0.85rem 1.2rem;text-align:center}
.btn-next:hover{background:var(--navy-mid);color:var(--cream)}
.next-note{margin:0.5rem 0 0;text-align:center;font-size:0.88rem;color:var(--muted)}

/* Home flow cards */
.flow-cards{list-style:none;padding:0;margin:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* Pulse intro + forms */
.pulse-intro,.handoff-card,.empty-state,.parse-stage,.parse-done,.gap-summary{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.35rem;box-shadow:var(--shadow);margin-bottom:1.25rem}
.pulse-intro h2,.handoff-card h2,.empty-state h2,.parse-stage h2,.parse-done h2{margin:0 0 0.35rem;color:var(--navy);font-size:1.25rem}
.pulse-intro label,.handoff-card > label{display:block;font-weight:700;color:var(--navy);font-size:0.95rem;margin:0.9rem 0 0.35rem}
.pulse-intro input[type="text"],.pulse-intro select,.handoff-card input[type="text"],.handoff-card select,.handoff-card textarea{width:100%;min-height:48px;padding:0.6rem 0.75rem;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:1rem;background:var(--cream);color:var(--ink)}
.handoff-card textarea{min-height:150px;resize:vertical;line-height:1.45}
.handoff-card h3{margin:1.2rem 0 0.4rem;color:var(--navy);font-size:1.05rem}
.field-hint{margin:0.35rem 0 0;font-size:0.88rem;color:var(--muted)}
.pulse-sample-highlight{box-shadow:0 0 0 3px rgba(176,141,87,0.5)}
.pulse-need{margin:0;color:var(--warn);font-weight:700}
.empty-state{border-left:4px solid var(--bronze)}
.empty-state.compact{box-shadow:none}

/* Parse */
.parse-steps{list-style:none;margin:1rem 0;padding:0;display:grid;gap:0.5rem}
.parse-line{display:flex;align-items:center;gap:0.65rem;min-height:36px;color:var(--muted);opacity:0.45;transition:opacity 0.2s ease}
.parse-line.active{opacity:1;color:var(--navy);font-weight:600}
.parse-line.done{opacity:1;color:var(--ok);font-weight:600}
.parse-dot{flex:0 0 18px;width:18px;height:18px;border-radius:50%;border:2px solid var(--line);background:var(--cream)}
.parse-line.active .parse-dot{border-color:var(--bronze);border-top-color:transparent;animation:fh-spin 0.7s linear infinite}
.parse-line.done .parse-dot{border-color:var(--ok);background:var(--ok);animation:none}
@keyframes fh-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.parse-line.active .parse-dot{animation:none}}
.parse-done{border-left:4px solid var(--ok)}
.parse-done h2:focus{outline:none}

/* Gap cards */
.gap-summary-big{margin:0 0 0.35rem;font-size:1.2rem;color:var(--navy)}
.gap-summary p{margin:0.25rem 0 0}
.gap-list{display:grid;gap:1rem}
.gap-card{background:var(--white);border:1px solid var(--line);border-left:5px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.25rem;box-shadow:var(--shadow)}
.gap-card.size-large{border-left-color:var(--warn)}
.gap-card.size-medium{border-left-color:var(--bronze)}
.gap-card.size-small{border-left-color:var(--bronze-light)}
.gap-card.size-none{border-left-color:var(--ok)}
.gap-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.4rem 0.75rem;margin-bottom:0.5rem}
.gap-head h3{margin:0;color:var(--navy);font-size:1.15rem}
.gap-dl{margin:0}
.gap-dl dt{font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--bronze-dark);margin-top:0.55rem}
.gap-dl dd{margin:0.15rem 0 0}
.gap-size-chart{margin-top:1rem;padding:1rem 1.1rem;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-sm)}
.gap-size-chart-title{margin:0 0 0.25rem;font-size:1rem;color:var(--navy)}
.gap-size-chart-hint{margin:0 0 0.75rem}
.gap-size-row{display:grid;grid-template-columns:5.5rem 1fr auto;align-items:center;gap:0.55rem;margin-bottom:0.5rem;font-size:0.9rem}
.gap-size-row:last-child{margin-bottom:0}
.gap-size-label{font-weight:700;color:var(--navy-mid)}
.gap-size-bar{height:16px;background:var(--cream-dark);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.gap-size-fill{display:block;height:100%;border-radius:99px;min-width:0}
.gap-size-fill.size-large{background:var(--warn)}
.gap-size-fill.size-medium{background:var(--bronze)}
.gap-size-fill.size-small{background:var(--bronze-light)}
.gap-size-fill.size-none{background:var(--ok)}
.gap-size-count{font-weight:700;color:var(--navy);white-space:nowrap;min-width:4.5rem;text-align:right}

.gap-compare{margin-top:0.9rem;padding:0.85rem 0.95rem;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius-sm)}
.gap-compare-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0.35rem 0.75rem;margin-bottom:0.65rem}
.gap-compare-title{font-weight:700;color:var(--navy);font-size:0.95rem}
.gap-compare-legend{font-size:0.8rem;color:var(--muted);display:inline-flex;align-items:center;gap:0.35rem;flex-wrap:wrap}
.gap-compare-legend .leg{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:middle}
.gap-compare-legend .leg-perc{background:var(--navy-mid)}
.gap-compare-legend .leg-act{background:var(--ok);margin-left:0.35rem}
.gap-compare-scale{display:flex;justify-content:space-between;font-size:0.72rem;color:var(--muted);margin-top:0.35rem;padding-left:5.5rem}

.gap-bars{margin-top:0.2rem;display:grid;gap:0.55rem}
.gap-bars-strong{gap:0.65rem}
.gap-bar-row{display:grid;grid-template-columns:5.5rem 1fr auto;align-items:center;gap:0.5rem;font-size:0.88rem}
.gap-bar-label{font-weight:700;color:var(--navy-mid)}
.gap-bar{height:16px;background:var(--cream-dark);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.gap-bars-strong .gap-bar{height:18px}
.gap-bar-fill{display:block;height:100%;border-radius:99px;min-width:0}
.gap-bar-fill.perceived{background:var(--navy-mid)}
.gap-bar-fill.actual{background:var(--ok)}
.gap-bar-val{color:var(--muted);white-space:nowrap;font-weight:600}
.gap-size{margin:0.6rem 0 0;font-size:0.92rem;color:var(--muted)}

/* Teach */
.chip.gapchip{background:#F8EBD8;color:var(--warn)}
.chip.okchip{background:#E5F0EA;color:var(--ok)}
.lesson.emphasized{box-shadow:0 0 0 2px var(--bronze),var(--shadow)}
.lesson.is-done{background:#F6FAF7;border-color:#BFD8C9}
.lesson-done-btn{margin-top:0.5rem;min-height:48px;width:100%}
.lesson.is-done .lesson-done-btn{border-color:var(--ok);color:var(--ok)}
.teach-progress{margin:0.6rem 0 0;font-weight:700;color:var(--navy)}

/* Hand off */
.ho-gaps{margin:0;padding-left:1.25rem}
.ho-gaps li{margin-bottom:0.65rem}
.ho-line{display:block;font-size:0.95rem;color:var(--ink);margin-top:0.15rem}
.fence-list{margin:0.4rem 0 0;padding-left:1.2rem;color:var(--muted);font-size:0.95rem}
.consent{display:flex !important;gap:0.75rem;align-items:flex-start;margin:1.1rem 0 1rem !important;padding:0.85rem;border:2px solid var(--bronze);border-radius:var(--radius-sm);background:#FBF8F1;font-weight:600 !important;cursor:pointer;min-height:48px}
.consent input{flex:0 0 26px;width:26px;height:26px;margin:0.1rem 0 0;accent-color:var(--navy)}
#ho-reset-questions{margin-top:0.5rem}
.handoff-summary{background:var(--white);border:2px solid var(--navy);border-radius:var(--radius);padding:1.35rem 1.4rem;box-shadow:var(--shadow);margin-bottom:1.25rem}
.sum-head{border-bottom:2px solid var(--bronze);padding-bottom:0.75rem;margin-bottom:0.5rem}
.sum-head h2{margin:0.1rem 0 0.25rem;color:var(--navy);font-size:1.5rem}
.sum-head h2:focus{outline:none}
.sum-meta{margin:0.15rem 0 0;color:var(--muted);font-size:0.92rem}
.handoff-summary h3{margin:1.1rem 0 0.4rem;color:var(--navy);font-size:1.05rem}
.sum-gaps{margin:0;padding-left:1.25rem}
.sum-gaps li{margin-bottom:0.8rem}
.sum-gaps p{margin:0.15rem 0 0}
.sum-gap-name{margin:0 !important}
.sum-k{display:block;font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:var(--bronze-dark)}
.sum-qs{margin:0;padding-left:1.2rem}
.sum-qs li{margin-bottom:0.35rem}
.sum-fences{margin-top:1rem;padding:0.85rem 1rem;background:#EEF2F7;border-left:4px solid var(--navy);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.sum-fences h3{margin-top:0}
.sum-fences ul{margin:0;padding-left:1.2rem;font-size:0.95rem}
.sum-consent{margin:1rem 0 0;font-weight:700;color:var(--ok)}

@media (max-width: 640px){
  .flow-steps ol{width:100%;padding:0.4rem 0.25rem}
  .flow-steps a{font-size:0.72rem}
  .flow-num{width:28px;height:28px}
  .flow-steps li + li::before{top:21px}
  .btn-start{max-width:none}
  .gap-bar-row{grid-template-columns:4.75rem 1fr;}
  .gap-bar-val{grid-column:2}
  .gap-size-row{grid-template-columns:4.75rem 1fr;}
  .gap-size-count{grid-column:2;justify-self:end}
  .gap-compare-scale{padding-left:4.75rem}
  .handoff-summary,.handoff-card,.pulse-intro{padding:1.1rem 1rem}
}

@media print{
  @page{margin:14mm}
  .no-print,.demo-banner,.site-header,.site-footer,.flow-steps,.next-step,.skip-link{display:none !important}
  body{background:#fff;color:#000;display:block;font-size:11pt}
  .section{padding:0}
  .container,.container.narrow{width:100%;max-width:none}
  .handoff-summary{box-shadow:none;border:1px solid #444;padding:0.75rem 1rem}
  .gap-status{border:1px solid #888}
  .sum-fences{background:#f3f3f3;break-inside:avoid}
  .sum-gaps li{break-inside:avoid}
  a{color:#000;text-decoration:none}
}

/* SPD upload (Parse) */
.spd-upload{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.35rem;box-shadow:var(--shadow);margin-bottom:1.25rem}
.spd-upload h2{margin:0 0 0.35rem;color:var(--navy);font-size:1.25rem}
.spd-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.35rem;min-height:120px;margin:1rem 0 0.75rem;padding:1.25rem 1rem;border:2px dashed var(--bronze);border-radius:var(--radius);background:#FBF8F1;cursor:pointer;text-align:center;color:var(--navy);transition:border-color 0.15s ease,background 0.15s ease}
.spd-drop:hover,.spd-drop:focus{outline:none;border-color:var(--navy);background:#F3EBDD}
.spd-drop.is-drag{border-color:var(--navy);background:#F3EBDD;box-shadow:0 0 0 3px rgba(176,141,87,0.35)}
.spd-drop-title{margin:0;font-weight:800;font-size:1.05rem}
.spd-drop-meta{margin:0;font-size:0.88rem;color:var(--muted)}
.spd-upload-actions{margin-top:0.75rem;display:flex;flex-wrap:wrap;gap:0.65rem}
.spd-paste-wrap{margin-top:0.85rem}
.spd-paste-wrap label{display:block;font-weight:700;color:var(--navy);margin-bottom:0.35rem}
.spd-paste-wrap textarea{width:100%;min-height:140px;padding:0.65rem 0.75rem;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:1rem;background:var(--cream);color:var(--ink);resize:vertical}
.spd-paste-wrap .btn{margin-top:0.65rem;min-height:48px}

.parse-confirm{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--bronze);border-radius:var(--radius);padding:1.25rem 1.35rem;box-shadow:var(--shadow);margin-bottom:1.25rem}
.parse-confirm h2{margin:0 0 0.35rem;color:var(--navy);font-size:1.25rem}
.parse-confirm h2:focus{outline:none}
.parse-confirm-list{list-style:none;margin:1rem 0;padding:0;display:grid;gap:0.85rem}
.parse-confirm-item{padding:0.85rem;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--cream)}
.parse-confirm-label{display:flex;gap:0.75rem;align-items:flex-start;cursor:pointer;font-weight:600;color:var(--navy);min-height:48px}
.parse-confirm-label input{flex:0 0 26px;width:26px;height:26px;margin-top:0.15rem;accent-color:var(--navy)}
.parse-confirm-snip{display:block;font-style:normal;font-weight:400;color:var(--ink);margin-top:0.25rem;font-size:0.95rem}
.parse-confirm-edit{display:block;margin-top:0.65rem;font-size:0.88rem;font-weight:700;color:var(--bronze-dark)}
.parse-confirm-edit textarea{display:block;width:100%;margin-top:0.35rem;min-height:64px;padding:0.55rem 0.65rem;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:0.95rem;background:var(--white);color:var(--ink);resize:vertical}

/* Adviser booking */
.booking-card{background:var(--white);border:2px solid var(--bronze);border-radius:var(--radius);padding:1.25rem 1.35rem;box-shadow:var(--shadow);margin:1.25rem 0}
.booking-card h2{margin:0 0 0.35rem;color:var(--navy);font-size:1.25rem}
.booking-card h2:focus{outline:none}
.booking-card > label{display:block;font-weight:700;color:var(--navy);font-size:0.95rem;margin:0.9rem 0 0.35rem}
.booking-card textarea{width:100%;min-height:96px;padding:0.6rem 0.75rem;border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;font-size:1rem;background:var(--cream);color:var(--ink);resize:vertical}
.chip-fieldset{border:0;margin:1rem 0 0;padding:0}
.chip-fieldset legend{font-weight:700;color:var(--navy);font-size:0.95rem;margin-bottom:0.45rem;padding:0}
.chip-row{display:flex;flex-wrap:wrap;gap:0.5rem}
.chip-btn{min-height:48px;padding:0.55rem 1rem;border:2px solid var(--line);border-radius:999px;background:var(--cream);color:var(--navy);font:inherit;font-weight:700;font-size:0.95rem;cursor:pointer}
.chip-btn:hover{border-color:var(--bronze)}
.chip-btn.is-selected{background:var(--navy);border-color:var(--navy);color:var(--cream);box-shadow:0 0 0 3px rgba(176,141,87,0.35)}
#book-request{margin-top:1.1rem}
#book-actions{margin-top:0.75rem;display:flex;flex-wrap:wrap;gap:0.65rem}
#book-confirm{margin-top:0.85rem}
.btn-row{display:flex;flex-wrap:wrap;gap:0.65rem;align-items:center}

@media (max-width: 390px){
  .spd-upload,.parse-confirm,.booking-card{padding:1.1rem 1rem}
  .chip-btn{flex:1 1 calc(50% - 0.5rem);text-align:center}
  #book-actions .btn,#book-actions a.btn{width:100%;justify-content:center;text-align:center}
}