/* AI-Ready Language Operations Maturity Check — component styles.
   Design tokens come from site/design-tokens.css (a local, self-contained
   copy of the Plunet design system tokens), imported separately in
   index.html. This file only adds layout and component rules on top. */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

h1, h2, h3, h4 {
  color: var(--text-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

p { margin: 0 0 var(--space-2); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--plunet-navy);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  z-index: 100;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

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

.eyebrow {
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-eyebrow);
  font-size: var(--text-caption);
  margin: 0 0 var(--space-1);
}

.site-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-default);
}
.site-header__logo { height: 28px; }

main {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-6) var(--space-3) var(--space-12);
}

.site-footer {
  color: var(--text-muted);
  font-size: var(--text-caption);
  padding: var(--space-4);
  border-top: 1px solid var(--border-default);
}
.site-footer__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.site-footer__logo { height: 20px; margin-bottom: var(--space-1); opacity: .85; }
.site-footer__tagline, .site-footer__copyright { margin: 0; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.site-footer__links .link { color: var(--text-muted); font-weight: var(--fw-regular); }
.site-footer__links .link:hover { color: var(--link); }

@media (max-width: 640px) {
  .site-footer__grid { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--fw-semibold);
  font-size: 1rem; /* minimum readable button size */
  border-radius: var(--radius-pill);
  padding: 13px 26px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn--primary { background: var(--plunet-cyan); color: #10324A; }
.btn--primary:hover { box-shadow: var(--shadow-lift); }
.btn--secondary { background: #fff; color: var(--plunet-navy); border: 1.5px solid #C7D2E4; }
.btn--large { padding: 16px 32px; font-size: var(--text-body); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.cta--disabled { opacity: .45; cursor: not-allowed; pointer-events: none; box-shadow: none; }

.link { color: var(--link); font-weight: var(--fw-semibold); text-decoration: none; }
.link:hover { text-decoration: underline; }
.link--button { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }

/* Intro — kept deliberately concise: the primary CTA must read as the
   strongest interactive element above the fold, and the meta items must
   read as plain information, never as buttons. */
.intro { max-width: none; }

.hero__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: var(--space-6); align-items: center; }
.hero__copy { max-width: 640px; }

/* Non-interactive, informational panel — a connected four-node "readiness
   map" rather than four separate CTA-style cards. Never competes with the
   primary CTA: no hover state, no clickable affordance, no scores. */
.hero__panel {
  background: var(--surface-section);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}
.hero__panel-eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--cyan-deep);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
}
.hero__panel-list { list-style: none; padding: 0; margin: 0; }
.hero__panel-list li {
  position: relative;
  padding-left: var(--space-4);
  padding-bottom: var(--space-3);
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--text-small);
}
.hero__panel-list li:last-child { padding-bottom: 0; }
.hero__panel-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 4px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--plunet-cyan);
}
.hero__panel-list li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 4px; top: 14px; bottom: -4px;
  width: 2px;
  background: var(--cyan-tint);
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__panel { padding: var(--space-3); margin-top: var(--space-2); }
  .hero__panel-list li { padding-bottom: var(--space-2); }
}

.intro__title { font-size: clamp(2.75rem, 5vw, 4rem); line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin-bottom: var(--space-2); }
.intro__supporting { color: var(--text-body); }

.intro__meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding: 0;
  margin: var(--space-2) 0 var(--space-4);
}
.intro__meta li {
  color: var(--text-muted);
  font-size: var(--text-small);
  font-weight: var(--fw-regular);
  position: relative;
  padding-left: var(--space-2);
}
.intro__meta li::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--muted);
}
.intro__meta li:first-child { padding-left: 0; }
.intro__meta li:first-child::before { display: none; }

.btn--hero { font-size: var(--text-body); padding: 18px 40px; }

.intro__trust-note { color: var(--text-muted); font-size: var(--text-small); margin-top: var(--space-2); max-width: 52ch; }

.session-banner {
  background: var(--surface-section);
  border-left: var(--accent-line) solid var(--plunet-cyan);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
}
.session-banner__title { font-weight: var(--fw-bold); color: var(--text-heading); margin-bottom: 4px; }
.session-banner__copy { color: var(--text-body); font-size: var(--text-small); }
.session-banner__actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); flex-wrap: wrap; }

@media (max-width: 640px) {
  .btn--hero { width: 100%; justify-content: center; }
}

/* Progress header — made slightly more prominent than a plain rule: a
   filled surface and a subtle shadow give it more visual weight without
   introducing a second persistent navigation control. */
.progress-header {
  position: sticky;
  top: 0;
  background: var(--surface-section);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-sm);
  z-index: 10;
  margin-top: var(--space-4);
}
.progress-header__row { display: flex; justify-content: space-between; font-size: 1.0625rem; font-weight: var(--fw-bold); color: var(--text-heading); }
.progress-header__row--mobile { display: none; }
.progress-bar { height: 10px; background: var(--surface-muted); border-radius: var(--radius-pill); overflow: hidden; margin-top: var(--space-2); }
.progress-bar__fill { height: 100%; background: var(--plunet-cyan); width: 0%; transition: width .3s ease; }

/* Mobile: a single compact bar — question count + section name share one
   line (the section name truncates instead of wrapping to a second line),
   a thin progress bar directly beneath. About half the height of the
   desktop header, and no separate "mobile section" line to scroll past. */
@media (max-width: 640px) {
  .progress-header {
    padding: 10px var(--space-2);
    margin-top: var(--space-1);
  }
  .progress-header__row--desktop { display: none; }
  .progress-header__row--mobile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    font-size: 0.8125rem;
  }
  #progress-question-label-mobile { flex-shrink: 0; font-weight: var(--fw-bold); color: var(--text-heading); }
  .progress-header__mobile-section {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
    color: var(--text-muted);
    font-weight: var(--fw-regular);
  }
  .progress-bar { height: 5px; margin-top: 6px; }
}

/* Question stack.
   IMPORTANT: like .modal-overlay below, display must default to "none" and
   only switch to "flex" via :not([hidden]) — a bare "display: flex" here
   would override the browser's built-in "[hidden] { display: none }" rule
   regardless of the hidden attribute, making the (empty) container render
   on every page load. */
.question-stack { display: none; margin-top: var(--space-4); flex-direction: column; gap: var(--space-2); }
.question-stack:not([hidden]) { display: flex; }

.q-card, .milestone-card {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3);
}

.q-card--active { border-top: var(--accent-line) solid var(--plunet-cyan); }
.q-card__eyebrow { text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-eyebrow); font-weight: var(--fw-semibold); font-size: var(--text-caption); }
.q-card__title { font-size: var(--text-h3); }
.q-card__question { font-weight: var(--fw-medium); color: var(--text-heading); }
.q-card__hint { color: var(--text-muted); font-size: var(--text-small); }

.q-card__options { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0; }
.answer-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.answer-card:hover { border-color: var(--plunet-cyan); }
.answer-card:has(input:checked) { border-color: var(--plunet-cyan); background: var(--surface-accent); }
.answer-card input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--cyan-deep); flex-shrink: 0; }
.answer-card__text { display: flex; flex-direction: column; gap: 2px; }
.answer-card__label { font-weight: var(--fw-semibold); color: var(--text-heading); }
.answer-card__description { color: var(--text-body); font-size: var(--text-small); }

/* The single active-question button. Its label is set in JS depending on
   context ("Continue" for questions 1-11, "Show my result" only on
   question 12, "Update answer" while editing) — disabled until an answer
   is selected, and never advances anything by itself. */
.q-card__continue { margin-top: var(--space-3); }

.q-card--answered, .milestone-card--done {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px var(--space-3); /* slightly more compact than an active card */
  animation: card-settle .25s ease;
}
.reduced-motion .q-card--answered, .reduced-motion .milestone-card--done { animation: none; }
@keyframes card-settle {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.q-card__check {
  color: #fff;
  background: var(--cat-green);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.q-card__answered-title { font-weight: var(--fw-semibold); color: var(--text-heading); font-size: 1.0625rem; }
.q-card__answered-label { color: var(--text-body); flex: 1; }
.milestone-card__done-headline { font-weight: var(--fw-semibold); color: var(--text-heading); }

/* Section-completion milestone — a genuine "active" state requiring its
   own explicit Continue click, exactly like a question, so the user
   always controls when the next section begins. */
.milestone-card--active { text-align: left; background: var(--surface-section); }
.milestone-card__headline { font-size: var(--text-h3); }
.milestone-card__progress { color: var(--cyan-deep); font-weight: var(--fw-semibold); font-size: var(--text-small); }
.milestone-card__next-intro { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-default); }
.milestone-card__cta { margin-top: var(--space-2); }

/* Stack review accordion (shown once the assessment is completed) */
.stack-review { margin-top: var(--space-2); }
.stack-review__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.stack-review__status { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold); color: var(--text-heading); }
.stack-review__label { color: var(--link); font-weight: var(--fw-semibold); font-size: var(--text-small); }

/* ---------------------------------------------------------------------
   Mobile: an app-like question flow, not a scaled-down desktop layout.
   The desktop card/spacing scale above comes from a design system built
   for large surfaces (18px body text, 8/16/24/32px spacing units) — left
   untouched here. On a ~390px-wide phone that scale reads as oversized and
   causes exactly the "too much scrolling, cards too tall, header too
   tall" complaints, so this block redefines the question flow's density,
   typography, and button reachability for small viewports specifically.
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .question-stack { gap: 10px; margin-top: var(--space-2); }

  .q-card, .milestone-card { padding: 14px; border-radius: var(--radius-sm); }

  /* The active card is scrolled to sit just below the sticky header (see
     app.js: scrollBlock 'start' on mobile) — scroll-margin-top keeps the
     header from covering its top edge when that scroll lands. */
  .q-card--active, .milestone-card--active { scroll-margin-top: 64px; }

  .q-card__eyebrow { font-size: 11px; }
  .q-card__title { font-size: 1.0625rem; margin-bottom: 4px; }
  .q-card__question { font-size: 0.9375rem; line-height: 1.35; margin-bottom: 4px; }
  .q-card__hint { font-size: 0.8125rem; line-height: 1.3; margin-bottom: 0; }

  /* Compact answer options — the whole point is fitting 2-3 on screen at
     once alongside the question text and the Continue button. */
  .q-card__options { gap: 8px; margin: 10px 0; }
  .answer-card { padding: 10px 12px; gap: 10px; border-radius: var(--radius-sm); }
  .answer-card input { width: 20px; height: 20px; margin-top: 2px; }
  .answer-card__text { gap: 1px; }
  .answer-card__label { font-size: 0.9375rem; line-height: 1.25; }
  .answer-card__description { font-size: 0.8125rem; line-height: 1.3; }

  /* The active-question/milestone button becomes a full-width bar pinned
     to the bottom of the screen — always reachable in one thumb's reach,
     regardless of how long the question/hint text runs. .question-stack
     gets matching bottom padding (scoped there, not on all of `main`, so
     the hero/result screens don't carry unused empty space) so its last
     card is never hidden behind the bar. */
  .q-card__continue, .milestone-card__cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    margin: 0;
    width: 100%;
    justify-content: center;
    border-radius: 0;
    padding: 14px var(--space-2);
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgba(22, 26, 94, 0.12);
  }
  .question-stack { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }

  /* Answered/done rows stay clearly secondary to the active card: smaller
     type, tighter padding, no shadow — they're history, not the focus. */
  .q-card--answered, .milestone-card--done {
    padding: 10px 12px;
    box-shadow: none;
    border-color: var(--border-default);
  }
  .q-card__answered-title { font-size: 0.875rem; }
  .q-card__answered-label { font-size: 0.8125rem; }
  .milestone-card__done-headline { font-size: 0.8125rem; }
  .q-card__check { width: 18px; height: 18px; font-size: 11px; }

  .milestone-card__headline { font-size: 1.0625rem; }
  .milestone-card__copy { font-size: 0.875rem; line-height: 1.35; }
  .milestone-card__progress { font-size: 0.8125rem; }
  .milestone-card__next-intro { margin-top: var(--space-2); padding-top: var(--space-2); }
  .milestone-card__next-headline { font-size: 1rem; }
  .milestone-card__next-copy { font-size: 0.875rem; line-height: 1.35; }
}

/* Reduced motion */
.reduced-motion * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }

/* Result transition */
.result-transition { text-align: center; padding: var(--space-8) 0; }
.result-transition__label { font-size: var(--text-h3); color: var(--text-heading); font-weight: var(--fw-semibold); }

/* Result workspace — deliberately a different visual system from the
   question stack: a "report" of stacked panels with generous spacing and
   alternating surfaces, so the result reads as the main event rather than
   another survey section.
   IMPORTANT: same [hidden] cascade rule as .question-stack / .modal-overlay
   — display must default to "none" and only switch to "flex" via
   :not([hidden]), or this renders (empty) on every page load regardless of
   the hidden attribute. */
.result-workspace { display: none; margin-top: var(--space-6); flex-direction: column; gap: var(--space-6); }
.result-workspace:not([hidden]) { display: flex; }

.result-panel {
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}

/* Typography scale for the result experience. Hero/stage headline sizes are
   set directly on their own selectors (larger, most prominent); this covers
   the next two tiers used throughout the result panels. */
.result-panel h2,
.conversation-invite h2 {
  font-size: clamp(1.75rem, 2.5vw, 2rem);
  line-height: var(--lh-snug);
}
.conversation-step h3 {
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  line-height: var(--lh-snug);
}
.comparison-panel__interpretation,
.conversation-invite__main-copy {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
  max-width: 780px;
}

.result-panel--profile {
  background: var(--surface-dark);
  color: #fff;
  border: none;
  text-align: center;
  padding: 40px var(--space-4);
}
.result-panel--profile .eyebrow { color: var(--plunet-cyan); }
.profile-lead { color: rgba(255,255,255,0.85); font-size: var(--text-small); }
.profile-stage-name { color: #fff; font-size: clamp(2.5rem, 4vw, 3.5rem); line-height: var(--lh-tight); letter-spacing: var(--ls-display); margin: var(--space-1) 0; }
.profile-score { color: var(--plunet-cyan); font-weight: var(--fw-semibold); font-size: var(--text-small); }
.profile-scope-note { color: rgba(255,255,255,0.8); font-size: 1rem; max-width: 620px; margin: var(--space-3) auto 0; }

/* Maturity spectrum — nested inside the same dark result-hero panel as the
   profile, so the profile and spectrum read as one strong result section.
   The track itself sits on a light inset "shelf" for contrast/readability
   against the dark hero background. Desktop: a horizontal, connected
   four-stage track. Mobile: the same markup restyles into a vertical
   stepper via the media query below (no separate mobile-only DOM). */
.maturity-shelf {
  background: #fff;
  border-radius: var(--radius-card);
  padding: var(--space-4);
  margin-top: var(--space-4);
  text-align: left;
}

.maturity-track {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
}
.maturity-track__stage {
  flex: 1;
  position: relative;
  padding: var(--space-2) var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  border-top: 4px solid var(--border-default);
  text-align: center;
}
.maturity-track__stage--current {
  background: var(--surface-accent);
  border-top: 4px solid var(--plunet-navy);
}
/* One-time entrance for the current-stage marker on first reveal only —
   app.js/result-renderer.js only ever add "js-animate-marker" when the
   result is freshly shown, never on a live re-render while editing. */
.maturity-track__stage.js-animate-marker { animation: marker-settle .5s ease; }
.reduced-motion .maturity-track__stage.js-animate-marker { animation: none; }
@keyframes marker-settle {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
.maturity-track__number {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--surface-page);
  border: 1.5px solid var(--border-default);
  color: var(--text-muted);
  font-weight: var(--fw-bold);
  font-size: var(--text-small);
  margin-bottom: 6px;
}
.maturity-track__stage--current .maturity-track__number {
  background: var(--plunet-navy);
  border-color: var(--plunet-navy);
  color: #fff;
}
.maturity-track__name {
  display: block;
  font-weight: var(--fw-semibold);
  font-size: var(--text-small);
  color: var(--text-muted);
}
.maturity-track__stage--current .maturity-track__name { color: var(--text-heading); }
.maturity-track__descriptor {
  display: block;
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-top: 2px;
}
.maturity-track__stage--current .maturity-track__descriptor { color: var(--text-body); }
.maturity-track__current-label {
  display: block;
  margin-top: 4px;
  font-size: var(--text-caption);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--cyan-deep);
}

@media (max-width: 720px) {
  .maturity-track { flex-direction: column; }
  .maturity-track__stage { text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-2); border-top: none; border-left: 4px solid var(--border-default); padding: var(--space-2); }
  .maturity-track__stage--current { border-top: none; border-left: 4px solid var(--plunet-navy); }
  .maturity-track__number { margin-bottom: 0; flex-shrink: 0; }
  .maturity-track__name { display: inline; }
  .maturity-track__descriptor { display: inline; margin-top: 0; }
  .maturity-track__current-label { margin-top: 0; margin-left: auto; }
}

/* Concise current-stage guidance — two compact columns, directly beneath
   the spectrum. */
.stage-guidance__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.stage-guidance__label { font-weight: var(--fw-bold); color: var(--text-heading); font-size: 1.0625rem; margin-bottom: var(--space-2); }
.stage-guidance__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.stage-guidance__list li { position: relative; padding-left: var(--space-2); color: var(--text-body); }
.stage-guidance__list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--plunet-cyan); }

@media (max-width: 640px) {
  .stage-guidance__grid { grid-template-columns: 1fr; gap: var(--space-3); }
}

.maturity-directional-note { color: var(--text-muted); font-size: var(--text-small); font-style: italic; margin: var(--space-3) 0 0; max-width: 780px; }

.dimension-bars { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); }
.dimension-bar__head { display: flex; justify-content: space-between; font-weight: var(--fw-semibold); color: var(--text-heading); font-size: var(--text-small); margin-bottom: 4px; }
.dimension-bar__track { height: 10px; background: var(--surface-muted); border-radius: var(--radius-pill); overflow: hidden; }
/* Width is set via JS: from 0% to its target on first reveal (so this
   transition plays once), or directly to target on a live re-render. */
.dimension-bar__fill { height: 100%; background: var(--plunet-cyan); transition: width .6s ease; }
.reduced-motion .dimension-bar__fill { transition: none; }

/* Comparison panel — merges the former separate "established" / "explore
   further" / "topics to explore" sections into one coherent two-column
   container. Differentiated by icon, eyebrow label, border accent, and a
   subtle tint — never by color alone, and never red/green traffic-light
   semantics. Both .comparison-panel__grid and .balanced-panel__grid are
   toggled via the [hidden] attribute at runtime, so — same rule as
   .question-stack/.result-workspace/.modal-overlay above — display must
   default to none and only switch on via :not([hidden]). */
.comparison-panel__grid,
.balanced-panel__grid { display: none; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.comparison-panel__grid:not([hidden]),
.balanced-panel__grid:not([hidden]) { display: grid; }

/* One-time entrance (fade + move up slightly) on first reveal only —
   result-renderer.js only adds "js-animate-in" when the result is freshly
   shown, never on a live re-render while editing an answer. */
.comparison-panel__grid.js-animate-in,
.balanced-panel__grid.js-animate-in { animation: section-fade-up .5s ease; }
.reduced-motion .comparison-panel__grid.js-animate-in,
.reduced-motion .balanced-panel__grid.js-animate-in { animation: none; }
@keyframes section-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.comparison-panel__col {
  border-radius: var(--radius-card);
  padding: 20px;
  position: relative;
}
.comparison-panel__col--established {
  background: #F1FAF5; /* fallback tint for browsers without color-mix() */
  background: color-mix(in srgb, var(--cat-green) 8%, #fff);
  border-top: var(--accent-line) solid var(--cat-green);
}
.comparison-panel__col--explore {
  background: #FDF6E8; /* fallback tint for browsers without color-mix() */
  background: color-mix(in srgb, var(--cat-amber) 12%, #fff);
  border-top: var(--accent-line) solid var(--cat-amber);
}
.comparison-panel__icon {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  margin-bottom: var(--space-2);
}
.comparison-panel__col--established .comparison-panel__icon { background: var(--cat-green); color: #fff; }
.comparison-panel__col--explore .comparison-panel__icon { background: var(--cat-amber); color: #10324A; }
.comparison-panel__eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  margin-bottom: 4px;
}
.comparison-panel__col--established .comparison-panel__eyebrow { color: #1F7A4D; }
.comparison-panel__col--explore .comparison-panel__eyebrow { color: #8A5B00; }
.comparison-panel__dimension { font-weight: var(--fw-bold); color: var(--text-heading); font-size: 1.1875rem; }
.comparison-panel__interpretation { color: var(--text-body); font-size: 1.0625rem; margin-bottom: var(--space-2); }
.comparison-panel__highlights { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.comparison-panel__highlights li {
  color: var(--text-heading);
  font-size: var(--text-small);
  font-weight: var(--fw-semibold);
  position: relative;
  padding-left: var(--space-2);
}
.comparison-panel__highlights li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
}

.balanced-panel h3 { font-size: clamp(1.75rem, 2.5vw, 2rem); }
.balanced-panel > p { max-width: 780px; }

/* Conversation: one centered CTA — the strongest conversion block after
   the result, but deliberately a single message with one main action, not
   a landing page with competing content. Everything sits in one centered
   column with a readable max width. */
.conversation-invite {
  background: var(--surface-dark);
  color: #fff;
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  /* Appears once after the result sequence above it — a single, short,
     non-looping entrance, not an attention-seeking or repeating effect. */
  animation: section-fade-up .35s ease;
}
.reduced-motion .conversation-invite { animation: none; }
.conversation-invite__inner { max-width: 760px; margin: 0 auto; }
.conversation-invite .eyebrow { color: var(--plunet-cyan); }
.conversation-invite h2 { color: #fff; margin-bottom: var(--space-2); }
.conversation-invite__main-copy { color: rgba(255,255,255,0.85); margin: 0 auto var(--space-4); }

.conversation-invite__cta {
  padding: 20px 44px;
}
.conversation-invite__cta:focus-visible { outline-color: #fff; }

@media (max-width: 640px) {
  .conversation-invite__cta { width: 100%; justify-content: center; }
}

.conversation-invite__benefits {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  padding: 0;
  margin: var(--space-4) 0 var(--space-3);
}
.conversation-invite__benefits li {
  color: rgba(255,255,255,0.75);
  font-size: var(--text-small);
  font-weight: var(--fw-medium);
}
.conversation-invite__benefits li:not(:last-child)::after {
  content: '\00b7';
  margin-left: var(--space-2);
  color: rgba(255,255,255,0.35);
}

.conversation-invite__credibility { font-size: var(--text-caption); color: rgba(255,255,255,0.55); margin-top: var(--space-2); margin-bottom: 0; }

/* Conversation: progressive two-step flow */
.conversation-flow {
  background: var(--surface-section);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  animation: conversation-flow-expand .25s ease;
}
.reduced-motion .conversation-flow { animation: none; }
@keyframes conversation-flow-expand {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.conversation-step__label {
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-eyebrow);
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
}
.conversation-step__actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }

.topic-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-3) 0; }
@media (max-width: 640px) { .topic-cards { grid-template-columns: 1fr; } }

.topic-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: #fff;
  border: 2px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: 16px var(--space-3);
  min-height: 56px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.topic-card:hover { border-color: var(--plunet-cyan); }
.topic-card:has(input:checked) {
  border-color: var(--plunet-cyan);
  background: var(--surface-accent);
  box-shadow: var(--shadow-soft);
}
.topic-card input {
  width: 22px; height: 22px;
  margin-top: 2px;
  accent-color: var(--cyan-deep);
  flex-shrink: 0;
}
.topic-card__content { display: flex; flex-direction: column; gap: 4px; }
.topic-card__label { display: block; font-weight: var(--fw-semibold); color: var(--text-heading); font-size: 1.0625rem; }
.topic-card:has(input:checked) .topic-card__label { color: var(--plunet-navy); }
.topic-card__suggested {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  color: #1A6E92;
  background: var(--cyan-tint);
  border-radius: 6px;
  padding: 3px 8px;
}
/* Subtle, one-shot feedback when a topic is selected — never a loop/pulse. */
.topic-card.js-animate-in { animation: topic-select-settle .3s ease; }
.reduced-motion .topic-card.js-animate-in { animation: none; }
@keyframes topic-select-settle {
  from { transform: scale(.97); }
  to { transform: scale(1); }
}

.selected-topics-summary { background: #fff; border-radius: var(--radius-card); padding: var(--space-3); margin: var(--space-3) 0; }
.selected-topics-summary__label { font-weight: var(--fw-semibold); color: var(--text-heading); font-size: var(--text-small); margin-bottom: var(--space-1); }
.selected-topics-list { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: flex; flex-direction: column; gap: 4px; }
.selected-topics-list li { color: var(--text-body); font-size: var(--text-small); }

/* The HubSpot embed renders inside here — deliberately no border/background
   of our own (no nested card): the surrounding .conversation-step already
   sits in the light-blue container, and HubSpot's own form styling inherits
   the page's font. Only spacing is ours. */
.contact-form-mount { margin-top: var(--space-3); }

.hubspot-loading { color: var(--text-muted); font-size: var(--text-small); font-style: italic; }

/* Honest status text for the two non-happy-paths: the dedicated form isn't
   configured in this environment, or the embed script failed to load
   (e.g. blocked by a browser extension). Plain text + one button — no
   fake form fields, no nested box. */
.contact-form-status { color: var(--text-body); font-size: var(--text-small); }
.contact-form-status--error { color: var(--text-heading); margin-bottom: var(--space-2); }

.result-review { display: flex; gap: var(--space-3); margin-top: var(--space-2); flex-wrap: wrap; justify-content: center; }

/* Modals.
   IMPORTANT: display must stay "none" by default and only switch to "flex"
   when the element is NOT [hidden]. Author CSS overrides the browser's
   built-in "[hidden] { display: none }" rule regardless of the attribute,
   so a bare ".modal-overlay { display: flex }" makes hidden="" modals
   render anyway — this previously caused both modals to appear on first
   paint. Always gate visual display through :not([hidden]). */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(22, 26, 94, 0.45);
  align-items: center; justify-content: center;
  z-index: 50;
  padding: var(--space-3);
}
.modal-overlay:not([hidden]) { display: flex; }
.modal { background: #fff; border-radius: var(--radius-card); padding: var(--space-4); max-width: 420px; box-shadow: var(--shadow-lift); }
.modal__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }

/* ---------------------------------------------------------------------
   Mobile: the remaining screens (hero, session banners, result, topic
   selection, contact form) get the same density pass as the question
   flow above — smaller headings, tighter padding, less whitespace between
   panels, so nothing here feels imported from a desktop/slide layout. */
@media (max-width: 640px) {
  .intro__title { font-size: clamp(1.75rem, 8vw, 2.25rem); margin-bottom: 6px; }
  .intro__supporting { font-size: 0.9375rem; }
  .intro__trust-note { font-size: 0.8125rem; }
  .intro__meta { margin: 6px 0 var(--space-2); }

  .session-banner { padding: var(--space-2); margin-bottom: var(--space-2); }
  .session-banner__title { font-size: 0.9375rem; }
  .session-banner__copy { font-size: 0.8125rem; }

  .result-transition { padding: var(--space-4) 0; }
  .result-transition__label { font-size: 1.125rem; }

  .result-workspace { margin-top: var(--space-3); gap: var(--space-3); }
  .result-panel { padding: var(--space-2); }
  .result-panel h2, .conversation-invite h2 { font-size: 1.375rem; }
  .result-panel--profile { padding: 24px var(--space-2); }
  .profile-stage-name { font-size: clamp(1.75rem, 9vw, 2.25rem); }
  .profile-scope-note { font-size: 0.875rem; }
  .maturity-shelf { padding: var(--space-2); margin-top: var(--space-2); }
  .stage-guidance__label { font-size: 0.9375rem; }
  .stage-guidance__list li, .maturity-directional-note { font-size: 0.875rem; }
  .comparison-panel__col { padding: 14px; }
  .comparison-panel__dimension { font-size: 1.0625rem; }
  .comparison-panel__interpretation { font-size: 0.9375rem; }
  .balanced-panel h3 { font-size: 1.375rem; }

  .conversation-invite { padding: var(--space-3) var(--space-2); }
  .conversation-invite__main-copy { font-size: 0.9375rem; margin-bottom: var(--space-2); }
  .conversation-invite__benefits { margin: var(--space-2) 0 var(--space-1); }

  .conversation-flow { padding: var(--space-2); }
  .conversation-step__label { font-size: 0.75rem; }
  .conversation-step h3 { font-size: 1.125rem; }
  .conversation-step__actions { margin-top: var(--space-2); }

  .topic-card { padding: 12px 14px; min-height: 44px; }
  .topic-card__label { font-size: 0.9375rem; }
  .selected-topics-summary { padding: var(--space-2); }
}

/* Responsive */
@media (max-width: 720px) {
  .dimension-bars { grid-template-columns: 1fr; }
  .comparison-panel__grid:not([hidden]),
  .balanced-panel__grid:not([hidden]) { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  main { padding: var(--space-1) var(--space-2) var(--space-4); }
}

/* ---------------------------------------------------------------------
   Print — a clean, standalone result report.
   .print-only content (the print header, print responses list, and print
   footer) is hidden on screen and only switched on inside @media print,
   following the exact same ":not([hidden])" gating already used above for
   .question-stack/.result-workspace/.modal-overlay — a bare "display:
   block" here would make it render on screen regardless of the [hidden]
   attribute on its sub-elements (e.g. the conditionally-shown website
   reference line).
   .no-print is the inverse: normal on-screen elements (navigation, the
   sticky progress header, the question stack, the CTA/topics/HubSpot
   conversation flow, the on-screen result-review buttons, modals) that
   must never appear on a printed page.
   --------------------------------------------------------------------- */
.print-only { display: none; }

@media print {
  @page {
    size: A4 portrait;
    margin: 16mm 14mm;
  }

  .no-print { display: none !important; }
  .print-only:not([hidden]) { display: block; }

  html, body {
    background: #fff !important;
    color: #10324A;
    font-size: 11pt;
    line-height: 1.45;
  }

  main { max-width: none; padding: 0; margin: 0; }

  a { color: #10324A; text-decoration: none; }

  h1, h2, h3, h4 { color: #10324A; break-after: avoid-page; }

  .result-workspace, .result-workspace:not([hidden]) { display: block; margin-top: 0; gap: 0; }

  /* Never rely on background color alone for meaning in print — every
     panel below keeps its border/icon/text label, only the fill changes
     from a solid/dark background to a plain outline. */
  .result-panel,
  .result-panel--profile,
  .maturity-track__stage,
  .comparison-panel__col--established,
  .comparison-panel__col--explore {
    background: #fff !important;
    color: #10324A !important;
    box-shadow: none !important;
    border: 1px solid #C7D2E4;
    border-radius: 0;
    margin-bottom: 10px;
  }

  .result-panel--profile .eyebrow,
  .result-panel--profile .profile-score,
  .result-panel--profile .profile-scope-note { color: #10324A !important; }

  .maturity-shelf { background: #fff !important; box-shadow: none; padding: 0; margin-top: 10px; }

  /* Maturity spectrum simplified to the same vertical stepper layout used
     on narrow screens — more reliable across page breaks than the
     four-column horizontal track. */
  .maturity-track { flex-direction: column; gap: 6px; }
  .maturity-track__stage {
    text-align: left; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
    border-top: none; border-left: 4px solid #C7D2E4; padding: 6px 8px; margin-bottom: 0;
  }
  .maturity-track__stage--current { border: none; border-left: 4px solid #10324A; }
  .maturity-track__number { margin-bottom: 0; flex-shrink: 0; background: #fff; border-color: #C7D2E4; color: #10324A; }
  .maturity-track__stage--current .maturity-track__number { background: #10324A !important; border-color: #10324A; color: #fff !important; }
  .maturity-track__name { display: inline; }
  .maturity-track__stage--current .maturity-track__name { color: #10324A !important; }
  .maturity-track__descriptor { display: inline; margin-top: 0; }
  .maturity-track__current-label { margin-top: 0; margin-left: auto; color: #10324A !important; }

  .comparison-panel__col--established { border-left: 4px solid #1F7A4D; }
  .comparison-panel__col--explore { border-left: 4px solid #8A5B00; }
  .comparison-panel__col--established .comparison-panel__icon,
  .comparison-panel__col--explore .comparison-panel__icon { background: none !important; border: 1px solid currentColor; color: #10324A !important; }
  .comparison-panel__col--established .comparison-panel__eyebrow,
  .comparison-panel__col--explore .comparison-panel__eyebrow,
  .comparison-panel__dimension,
  .comparison-panel__interpretation,
  .comparison-panel__highlights li { color: #10324A !important; }
  .comparison-panel__grid:not([hidden]),
  .balanced-panel__grid:not([hidden]) { display: grid; grid-template-columns: 1fr 1fr; }

  .dimension-bar__track { background: #E4E9F2 !important; border: 1px solid #C7D2E4; }
  .dimension-bar__fill { background: #10324A !important; }
  .dimension-bar__head { color: #10324A; }

  .result-panel,
  .maturity-track__stage,
  .comparison-panel__col,
  .print-responses__item {
    break-inside: avoid;
  }

  .print-header { text-align: center; margin-bottom: 14px; }
  .print-header__logo { height: 26px; margin-bottom: 8px; }
  .print-header h1 { font-size: 18pt; margin-bottom: 4px; }
  .print-header__subtitle { color: #4A5875; margin: 0; }
  .print-header__date { color: #4A5875; font-size: 9.5pt; margin: 2px 0 0; }

  .print-responses { margin-top: 6px; }
  .print-responses h2 { font-size: 14pt; }
  .print-responses__list { list-style: none; padding: 0; margin: 0; }
  .print-responses__item { padding: 6px 0; border-bottom: 1px solid #E4E9F2; }
  .print-responses__question { font-weight: 600; margin: 0 0 2px; }
  .print-responses__meta { color: #4A5875; margin: 0; font-size: 10pt; }

  .print-footer { margin-top: 14px; border-top: 1px solid #C7D2E4; padding-top: 10px; font-size: 9.5pt; color: #4A5875; }
  .print-footer p { max-width: none; overflow-wrap: break-word; word-break: break-word; }

  /* Any sticky/fixed positioning must never survive into print, even
     though every element that uses it is also .no-print above — this is
     deliberate defense-in-depth, not load-bearing on its own. */
  .progress-header, .q-card__continue, .milestone-card__cta { position: static !important; }
}