:root {
  --navy: #0b274f;
  --navy-2: #123d63;
  --teal: #078b89;
  --teal-dark: #056d6c;
  --green: #2fb878;
  --sand: #e8d8b8;
  --ice: #f4f8fa;
  --ink: #17212b;
  --muted: #697985;
  --line: #dfe7e9;
  --danger: #bf3f4a;
  --warning: #c98716;
  --surface: #fff;
  --radius: 18px;
  --shadow: 0 18px 50px rgba(11, 31, 51, .08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgba(15, 163, 166, .38); outline-offset: 3px; }
.skip-link { position: fixed; inset-block-start: 10px; inset-inline-start: 10px; transform: translateY(-160%); z-index: 9999; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip-link:focus { transform: translateY(0); }
.brand { color: inherit; }
.nav-glyph { min-width: 25px; height: 25px; display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: 8px; font: 600 10px/1 "Space Grotesk", sans-serif; opacity: .75; }
.nav-item.active .nav-glyph { color: var(--teal); opacity: 1; }
.menu-button { display: none; border: 1px solid var(--line); background: #fff; color: var(--navy); padding: 8px 11px; border-radius: 10px; }
.notification-button { position: relative; }
.notification-button span { position: absolute; inset-block-start: -6px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding-inline: 4px; border-radius: 9px; background: var(--danger); color: #fff; font: 700 10px/18px "Space Grotesk", sans-serif; text-align: center; }
.user-chip { border: 0; background: transparent; }
.mobile-nav { display: none; }

.loading-page, .route-state { min-height: 55vh; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 42px 20px; }
.spinner { width: 34px; height: 34px; border: 3px solid var(--line); border-block-start-color: var(--teal); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.page { display: grid; gap: 22px; }
.page-heading { align-items: flex-end; }
.page-heading h1 { line-height: 1.2; }
.page-heading-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.page-heading .eyebrow { text-transform: none; letter-spacing: 0; }
.research-notice { display: flex; align-items: flex-start; gap: 12px; background: #fff9eb; border: 1px solid #f0dfae; color: #6f5419; border-radius: 14px; padding: 14px 16px; line-height: 1.7; }
.research-notice strong { color: #553d0e; }

.card-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.card, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: 0 8px 30px rgba(11,31,51,.035); }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }
.metric-card small, .metric-card span { color: var(--muted); }
.metric-card strong { display: block; margin-block: 10px 4px; color: var(--navy); font: 700 clamp(30px,4vw,46px)/1 "Space Grotesk", sans-serif; }
.metric-card strong em { font: 500 15px/1 inherit; color: var(--muted); font-style: normal; }
.metric-card.teal { color: #fff; border-color: var(--navy); background: linear-gradient(140deg, var(--navy), #10364c); }
.metric-card.teal strong, .metric-card.teal small, .metric-card.teal span { color: #fff; }
.metric-card.teal strong { color: #45d0bd; }
.card-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-block-end: 18px; }
.card-title h2, .card-title h3 { margin: 0; }
.card-title p { margin: 5px 0 0; color: var(--muted); }

.status-badge { display: inline-flex; align-items: center; gap: 7px; width: fit-content; border-radius: 999px; padding: 6px 10px; background: #edf7f7; color: var(--teal-dark); font-size: 12px; font-weight: 700; }
.status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-badge.warning { color: #8b5d0b; background: #fff4d9; }
.status-badge.danger { color: #a42d38; background: #feeaec; }
.status-badge.neutral { color: #5c6a73; background: #edf1f3; }

.button, .primary-button, .secondary-button, .danger-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 16px; border-radius: 12px; border: 1px solid transparent; cursor: pointer; font-weight: 700; transition: .18s ease; }
.primary-button { background: var(--navy); color: #fff; }
.primary-button:hover { background: var(--navy-2); transform: translateY(-1px); }
.secondary-button { border-color: var(--line); background: #fff; color: var(--navy); }
.secondary-button:hover { border-color: var(--teal); color: var(--teal-dark); }
.danger-button { border-color: #f1c6cb; background: #fff5f6; color: var(--danger); }
button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: .5; transform: none; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field > span, .field > label { font-weight: 700; color: var(--navy); }
.field small { color: var(--muted); }
.input, .select, .textarea, .field input, .field select, .field textarea { width: 100%; border: 1px solid #cfdadd; background: #fff; color: var(--ink); padding: 11px 13px; min-height: 44px; border-radius: 11px; transition: .18s; }
.field textarea, .textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--teal); outline: 3px solid rgba(15,163,166,.12); }
.checkbox-field { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; line-height: 1.6; }
.checkbox-field input { width: 18px; height: 18px; margin-block-start: 3px; accent-color: var(--teal); }
.form-error { padding: 11px 13px; border-radius: 10px; background: #fff0f1; color: #9e2c36; border: 1px solid #f2c7cc; }
.form-success { padding: 11px 13px; border-radius: 10px; background: #edf9f4; color: #157a52; border: 1px solid #c7ebdc; }

.auth-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(320px, .82fr) minmax(440px, 1.18fr); background: var(--ice); }
.auth-brand { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; color: #fff; background: var(--navy); padding: clamp(34px,6vw,76px); }
.auth-brand::before, .auth-brand::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(69,208,189,.18); }
.auth-brand::before { width: 440px; height: 440px; inset-inline-end: -190px; inset-block-start: -170px; }
.auth-brand::after { width: 250px; height: 250px; inset-inline-start: -100px; inset-block-end: -90px; }
.auth-logo { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; font-size: 22px; font-weight: 800; }
.auth-logo span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; color: var(--navy); background: #45d0bd; }
.auth-copy { position: relative; z-index: 1; max-width: 560px; }
.auth-copy h1 { font-size: clamp(42px,7vw,76px); line-height: 1.05; margin: 0 0 22px; }
.auth-copy h1 i { color: #45d0bd; font-style: normal; }
.auth-copy p { color: #c3d0d7; font-size: 18px; line-height: 1.8; }
.auth-features { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-block-start: 30px; }
.auth-features span { padding: 13px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; color: #d9e6e8; font-size: 13px; }
.auth-panel { display: grid; place-items: center; padding: 32px; }
.auth-box { width: min(100%, 520px); background: #fff; border: 1px solid var(--line); border-radius: 26px; padding: clamp(24px,5vw,44px); box-shadow: var(--shadow); }
.auth-box h2 { margin: 0 0 8px; font-size: 28px; color: var(--navy); }
.auth-box > p { color: var(--muted); margin: 0 0 24px; line-height: 1.7; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--ice); border-radius: 12px; margin-block-end: 22px; }
.auth-tabs button { border: 0; background: transparent; border-radius: 9px; padding: 9px; color: var(--muted); cursor: pointer; }
.auth-tabs button.active { background: #fff; color: var(--navy); box-shadow: 0 2px 10px rgba(11,31,51,.08); font-weight: 700; }
.demo-access { margin-block-start: 18px; padding: 13px; background: #f7fafb; border: 1px dashed #cbdadd; border-radius: 12px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.demo-access code { color: var(--navy); direction: ltr; unicode-bidi: isolate; }

.data-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.table-scroll { max-width: 100%; overflow: auto; }
.data-table__row { display: grid; grid-template-columns: var(--table-columns, repeat(4, minmax(130px,1fr))); gap: 12px; align-items: center; min-width: var(--table-min, 650px); padding: 13px 15px; border-block-end: 1px solid #edf1f2; }
.data-table__row:last-child { border-block-end: 0; }
.data-table__row.header { background: #f5f8f9; color: var(--muted); font-size: 12px; font-weight: 700; }
.data-table__row:not(.header):hover { background: #fbfdfd; }
.data-table__row strong { color: var(--navy); }
.data-table__row small { display: block; color: var(--muted); margin-block-start: 3px; }
.empty-state { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 44px 22px; border: 1px dashed #cddadd; border-radius: var(--radius); background: #fbfdfd; }
.empty-state b { font-size: 20px; color: var(--navy); }
.empty-state p { max-width: 560px; margin: 0; color: var(--muted); line-height: 1.7; }

.score-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: center; }
.score-ring { --score: 0; width: 190px; aspect-ratio: 1; margin: auto; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--teal) calc(var(--score) * 1%), #e6edef 0); position: relative; }
.score-ring::before { content: ""; position: absolute; inset: 15px; border-radius: 50%; background: #fff; }
.score-ring > div { position: relative; text-align: center; }
.score-ring strong { display: block; color: var(--navy); font: 700 48px/1 "Space Grotesk", sans-serif; }
.score-ring small { color: var(--muted); }
.dimension-list { display: grid; gap: 12px; }
.dimension-line { display: grid; grid-template-columns: minmax(180px,1fr) 3fr 54px; gap: 12px; align-items: center; }
.dimension-line a { color: var(--navy); font-weight: 700; }
.dimension-track { height: 9px; background: #e8eef0; border-radius: 9px; overflow: hidden; }
.dimension-track i { display: block; width: var(--score,0%); height: 100%; background: linear-gradient(90deg,var(--teal),#45d0bd); border-radius: inherit; }
.dimension-line b { color: var(--teal-dark); font: 700 14px/1 "Space Grotesk", sans-serif; text-align: end; }
.trend-chart { min-height: 240px; display: flex; gap: 14px; align-items: flex-end; padding: 26px 10px 0; border-block-end: 1px solid var(--line); }
.trend-column { flex: 1; min-width: 42px; display: grid; grid-template-rows: 1fr auto; align-items: end; gap: 8px; height: 210px; text-align: center; color: var(--muted); font-size: 11px; }
.trend-column i { display: block; width: min(50px,75%); height: calc(var(--score,0) * 1%); min-height: 3px; margin-inline: auto; border-radius: 10px 10px 3px 3px; background: linear-gradient(var(--teal),#49cab8); }

.assessment-header { position: sticky; top: 0; z-index: 5; background: rgba(244,248,250,.94); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 15px; padding: 14px 16px; }
.progress-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.progress-track { height: 8px; background: #dfe8eb; border-radius: 8px; overflow: hidden; margin-block-start: 10px; }
.progress-track span { display: block; width: var(--progress,0%); height: 100%; background: var(--teal); transition: width .25s; }
.save-state { color: var(--muted); font-size: 13px; }
.assessment-section { display: grid; gap: 16px; }
.assessment-section > header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; }
.assessment-section > header h2 { margin: 0; color: var(--navy); }
.assessment-section > header p { margin: 5px 0 0; color: var(--muted); }
.question-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin: 0; min-inline-size: 0; }
.question-card > legend { width: 100%; padding: 0; }
.question-card[disabled] { opacity: .74; }
.question-card:focus-within { border-color: #75c9ca; box-shadow: 0 0 0 3px rgba(15,163,166,.08); }
.question-title { display: flex; gap: 10px; align-items: flex-start; line-height: 1.75; }
.question-title code { direction: ltr; color: var(--teal-dark); background: #eff8f8; border-radius: 7px; padding: 4px 7px; font-size: 11px; white-space: nowrap; }
.required-mark { color: var(--danger); }
.choice-scale { display: grid; grid-template-columns: repeat(var(--choice-count,5), minmax(0,1fr)); gap: 8px; margin-block-start: 14px; }
.choice-scale label { position: relative; cursor: pointer; }
.choice-scale input { position: absolute; opacity: 0; pointer-events: none; }
.choice-scale span { min-height: 48px; display: grid; place-items: center; border: 1px solid #d3dfe1; border-radius: 11px; background: #fbfdfd; color: var(--muted); font-weight: 700; transition: .16s; }
.choice-scale input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 5px 15px rgba(11,31,51,.18); }
.choice-scale input:focus-visible + span { outline: 3px solid rgba(15,163,166,.35); }
.answer-field { margin-block-start: 14px; }
.answer-field textarea { resize: vertical; min-height: 110px; }
.missing-control { margin-block-start: 10px; }
.missing-control summary { color: var(--muted); font-size: 12px; cursor: pointer; }
.missing-options { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 8px; }
.missing-options button { border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); padding: 5px 9px; font-size: 11px; cursor: pointer; }

.diagnosis-card { border-inline-start: 4px solid var(--warning); }
.diagnosis-card.high { border-inline-start-color: var(--danger); }
.diagnosis-card h3 { margin: 8px 0; color: var(--navy); }
.diagnosis-card p { color: var(--muted); line-height: 1.7; }
.evidence-list { display: flex; flex-wrap: wrap; gap: 7px; }
.evidence-list span { background: #f0f5f6; border-radius: 8px; padding: 6px 8px; font-size: 12px; }
.roadmap-board { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: start; }
.roadmap-column { background: #f4f8f9; border-radius: 16px; padding: 14px; min-height: 220px; }
.roadmap-column h2 { color: var(--navy); font-size: 17px; margin: 4px 0 14px; }
.roadmap-item { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 14px; margin-block-end: 10px; }
.roadmap-item h3 { margin: 0 0 7px; font-size: 15px; color: var(--navy); }
.roadmap-item p { margin: 0 0 10px; color: var(--muted); line-height: 1.6; font-size: 13px; }
.roadmap-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 11px; }

.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.filter-bar .field { min-width: 170px; flex: 1; }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); }
.pill-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pill-list span { padding: 7px 10px; border-radius: 10px; background: #eff5f6; color: var(--navy); font-size: 12px; }

dialog { width: min(92vw, 620px); max-height: 86vh; border: 0; border-radius: 22px; padding: 24px; box-shadow: 0 30px 100px rgba(11,31,51,.28); color: var(--ink); }
dialog::backdrop { background: rgba(5,19,31,.58); backdrop-filter: blur(3px); }
.dialog-close { margin-block-start: 18px; border: 0; background: #edf2f3; color: var(--navy); border-radius: 10px; padding: 8px 13px; cursor: pointer; }
#dialog-content h2 { margin-block-start: 0; color: var(--navy); }
#toast:empty { display: none; }
.toast { z-index: 100; }

.is-guest .sidebar, .is-guest .topbar, .is-guest .footer, .is-guest + .mobile-nav { display: none; }
.is-guest .main-content { margin: 0; padding: 0; }
.is-guest #app-view { padding: 0; }
.is-guest .main-content > #app-view { width: 100%; max-width: none; margin: 0; }

.large { min-height: 52px; padding: 13px 22px; border-radius: 14px; font-size: 14px; }
.public-nav { position: sticky; inset-block-start: 0; z-index: 30; min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px clamp(22px,6vw,88px); background: rgba(255,255,255,.94); border-block-end: 1px solid rgba(11,39,79,.1); backdrop-filter: blur(16px); }
.public-brand { display: flex; align-items: center; gap: 12px; color: var(--navy); }
.public-brand > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(145deg,var(--teal),#37c9bd); color: #fff; font-size: 23px; font-weight: 800; box-shadow: 0 8px 24px rgba(7,139,137,.24); }
.public-brand b { font-size: 16px; }
.public-nav > div { display: flex; align-items: center; gap: 18px; }
.public-nav > div > a:not(.primary-button):not(.secondary-button) { color: #536778; font-size: 13px; font-weight: 600; }
.landing-page, .participant-start-page, .public-result-page { min-height: 100vh; background: #f7fafc; color: var(--ink); }
.landing-page main, .participant-start-page main, .public-result-page main { width: min(1180px,calc(100% - 44px)); margin-inline: auto; }
.landing-alert { display: flex; justify-content: center; gap: 10px; padding: 10px 22px; background: #fff5d9; border-block-end: 1px solid #efdca4; color: #725718; font-size: 13px; }
.landing-hero { min-height: 650px; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(34px,6vw,80px); align-items: center; padding-block: 76px 86px; }
.hero-copy .eyebrow, .section-intro > span, .report-preview > div > span, .landing-cta > span, .start-heading > div > span, .result-hero > span { color: var(--teal-dark); font-weight: 800; letter-spacing: .02em; }
.hero-copy h1 { max-width: 680px; margin: 18px 0 24px; color: var(--navy); font-size: clamp(43px,5.4vw,72px); line-height: 1.13; letter-spacing: -.035em; }
.hero-copy h1 i { color: var(--teal); font-style: normal; }
.hero-copy > p { max-width: 670px; color: #5a6d7e; font-size: 18px; line-height: 1.9; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 30px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 38px; }
.hero-proof span { display: flex; align-items: center; gap: 7px; padding-inline-end: 16px; border-inline-end: 1px solid #d6e0e6; color: #637482; font-size: 13px; }
.hero-proof b { color: var(--navy); font: 700 22px/1 "Space Grotesk",sans-serif; }
.hero-model { position: relative; display: grid; gap: 12px; padding: 28px; border: 1px solid rgba(11,39,79,.12); border-radius: 32px; background: linear-gradient(145deg,#fff,#edf7f8); box-shadow: 0 30px 80px rgba(11,39,79,.12); overflow: hidden; }
.hero-model::before { content:""; position: absolute; width: 210px; height: 210px; border-radius: 50%; inset-block-start: -110px; inset-inline-end: -80px; background: rgba(7,139,137,.1); }
.hero-model > p { margin: 5px 0 0; text-align: center; color: #6a7c89; font-size: 12px; }
.model-column { position: relative; display: grid; gap: 5px; padding: 21px; border: 1px solid #d8e3e9; border-radius: 18px; background: #fff; }
.model-column small { color: #758691; }
.model-column b { color: var(--navy); font-size: 20px; }
.model-column strong { color: #526774; font-size: 13px; }
.model-column.mcm { background: var(--navy); border-color: var(--navy); }
.model-column.mcm small, .model-column.mcm strong { color: #c8d8e7; }
.model-column.mcm b { color: #5ee1d3; font: 700 34px/1 "Space Grotesk",sans-serif; }
.model-column.smce { border-color: rgba(7,139,137,.45); }
.model-column.smce b { color: var(--teal); font: 700 31px/1 "Space Grotesk",sans-serif; }
.model-arrow { justify-self: center; color: var(--navy); font-size: 24px; transform: rotate(90deg); }
.model-arrow.teal { color: var(--teal); }
.landing-section { padding-block: 94px; }
.section-intro { max-width: 760px; margin-block-end: 40px; }
.section-intro h2, .report-preview h2, .landing-cta h2 { margin: 12px 0 14px; color: var(--navy); font-size: clamp(30px,4vw,46px); line-height: 1.3; }
.section-intro p, .report-preview p { color: #647684; font-size: 16px; line-height: 1.9; }
.value-section { border-block: 1px solid #e3eaee; }
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.value-grid article { padding: 30px; border: 1px solid #dde6eb; border-radius: 22px; background: #fff; }
.value-grid article > b { color: var(--teal); font: 700 13px/1 "Space Grotesk",sans-serif; }
.value-grid h3 { margin: 28px 0 10px; color: var(--navy); font-size: 22px; }
.value-grid p { color: #6a7b87; line-height: 1.8; }
.model-section { width: 100vw; margin-inline: calc(50% - 50vw); padding-inline: max(22px,calc((100vw - 1180px)/2)); background: var(--navy); color: #fff; }
.model-section .section-intro h2 { color: #fff; }
.model-section .section-intro > span { color: #64e3d5; }
.model-section .section-intro p { color: #bdcfdd; }
.construct-grid { display: grid; grid-template-columns: 1fr 150px 1fr; gap: 22px; align-items: center; }
.construct-card { padding: 27px; border: 1px solid rgba(255,255,255,.15); border-radius: 24px; background: rgba(255,255,255,.06); }
.construct-card.teal { background: rgba(7,139,137,.15); border-color: rgba(85,225,211,.35); }
.construct-card header { display: flex; align-items: center; gap: 13px; margin-block-end: 18px; }
.construct-card header span { direction: ltr; color: #65e3d5; font: 700 18px/1 "Space Grotesk",sans-serif; }
.construct-card h3 { font-size: 20px; }
.construct-card ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.construct-card li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.07); color: #d6e2ec; }
.construct-card li i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: rgba(89,224,211,.16); color: #66e4d6; font: normal 700 11px/1 "Space Grotesk",sans-serif; }
.effect-card { display: grid; justify-items: center; gap: 12px; text-align: center; color: #d7e3eb; }
.effect-card > span { color: #61e1d3; font-size: 45px; }
.effect-card small { color: #9fb4c4; line-height: 1.6; }
.maturity-stages { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.maturity-stages > div { position: relative; display: grid; align-content: center; gap: 9px; min-height: 122px; padding: 20px; border: 1px solid #dce5ea; border-radius: 18px; background: #fff; }
.maturity-stages > div::after { content:"←"; position:absolute; inset-inline-end:-17px; inset-block-start:47px; z-index:2; color:var(--teal); font-size:18px; }
.maturity-stages > div:last-child::after { display:none; }
.maturity-stages b { color: var(--teal); font: 700 25px/1 "Space Grotesk",sans-serif; }
.maturity-stages span { color: var(--navy); font-weight: 800; }
.maturity-stages.compact > div { min-height: 88px; padding: 15px; }
.maturity-stages.compact > div::after { inset-block-start:34px; }
.maturity-stages > div.active { color:#fff; background:linear-gradient(145deg,var(--teal-dark),var(--teal)); border-color:var(--teal); box-shadow:0 14px 32px rgba(7,139,137,.2); }
.maturity-stages > div.active b, .maturity-stages > div.active span { color:#fff; }
.report-preview { display: grid; grid-template-columns: 1fr .8fr; gap: 70px; align-items: center; }
.preview-card { padding: 27px; border-radius: 26px; background: #fff; box-shadow: 0 24px 70px rgba(11,39,79,.13); border: 1px solid #dce6eb; }
.preview-card header { display: flex; justify-content: space-between; gap: 15px; color: #697b88; font-size: 12px; }
.preview-card header b { color: var(--teal-dark); }
.preview-score { display: flex; align-items: baseline; gap: 5px; margin-block: 25px; }
.preview-score strong { color: var(--navy); font: 700 62px/1 "Space Grotesk",sans-serif; }
.preview-score small { color:#84929c; }
.preview-bars { display: grid; gap: 13px; }
.preview-bars > div { display: grid; grid-template-columns: 65px 1fr 30px; gap: 10px; align-items: center; font-size: 11px; color:#697b88; }
.preview-bars i { height: 8px; overflow:hidden; border-radius:8px; background:#e7edef; }
.preview-bars i b { display:block; width:var(--score); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--navy),var(--teal)); }
.preview-bars em { font:normal 700 11px/1 "Space Grotesk",sans-serif; color:var(--navy); }
.landing-cta { width: 100vw; margin-inline: calc(50% - 50vw); padding: 88px max(22px,calc((100vw - 900px)/2)); text-align:center; background:linear-gradient(135deg,var(--teal-dark),#095f78); color:#fff; }
.landing-cta > span, .landing-cta h2, .landing-cta p { color:#fff; }
.landing-cta p { margin-block-end:26px; opacity:.86; }
.primary-button.light { background:#fff; color:var(--navy); }
.public-footer { min-height:100px; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:24px; padding:28px; color:#93a5b3; background:#071b36; font-size:12px; }
.public-footer b { color:#fff; }
.public-footer a { color:#63e1d3; }

.participant-start-page main, .public-result-page main { padding-block: 54px 90px; }
.start-heading { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:end; margin-block-end:34px; }
.start-heading h1, .result-hero h1 { margin:12px 0; color:var(--navy); font-size:clamp(34px,5vw,54px); line-height:1.25; }
.start-heading p { max-width:760px; color:#657684; line-height:1.8; }
.start-meta { display:grid; gap:7px; min-width:210px; padding:20px; border-radius:18px; color:#667784; background:#edf5f6; }
.start-meta b { color:var(--navy); }
.direct-form { display:grid; gap:22px; margin-block-start:22px; }
.direct-form .panel { padding:clamp(22px,4vw,38px); border-radius:24px; }
.form-section-title { display:flex; align-items:flex-start; gap:16px; margin-block-end:28px; }
.form-section-title > b { display:grid; place-items:center; width:42px; height:42px; border-radius:13px; color:#fff; background:var(--navy); font:700 12px/1 "Space Grotesk",sans-serif; }
.form-section-title h2 { margin:0 0 6px; color:var(--navy); font-size:22px; }
.form-section-title p { color:#73838e; }
.context-likert-grid { display:grid; gap:14px; }
.context-likert { min-width:0; margin:0; padding:18px; border:1px solid #dce5e8; border-radius:17px; }
.context-likert legend { padding-inline:7px; color:var(--navy); font-weight:700; line-height:1.7; }
.context-likert > div { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-block-start:10px; }
.context-likert label { position:relative; cursor:pointer; }
.context-likert input { position:absolute; opacity:0; }
.context-likert span { min-height:50px; display:grid; place-items:center; padding:7px; text-align:center; border:1px solid #d8e1e5; border-radius:11px; color:#657580; background:#f9fbfc; font-size:12px; font-weight:700; }
.context-likert input:checked + span { color:#fff; background:var(--navy); border-color:var(--navy); }
.context-likert input:focus-visible + span { outline:3px solid rgba(7,139,137,.3); }
.consent-panel { display:grid; gap:8px; }
.consent-panel .large { margin-block-start:12px; }
.submit-panel { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.submit-panel p { color:#667782; }
.participant-measure { width:min(1120px,calc(100% - 36px)); margin-inline:auto; padding-block:35px 80px; }
.choice-scale.labelled span { min-height:62px; padding:8px 6px; text-align:center; font-size:12px; line-height:1.45; }

.result-hero { padding:42px; margin-block-end:22px; border-radius:28px; color:#fff; background:linear-gradient(135deg,var(--navy),#0d5471); overflow:hidden; }
.result-hero > span, .result-hero h1 { color:#fff; }
.result-hero h1 i { color:#67e3d5; font-style:normal; }
.result-hero > p { max-width:820px; color:#d0dde7; line-height:1.8; }
.result-score-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-block-start:30px; }
.result-score-cards article { padding:18px; border:1px solid rgba(255,255,255,.16); border-radius:16px; background:rgba(255,255,255,.08); }
.result-score-cards small, .result-score-cards span { color:#c7d7e2; }
.result-score-cards strong { display:block; margin-block:8px 3px; color:#fff; font:700 36px/1 "Space Grotesk",sans-serif; }
.relationship-visual { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-block:24px; text-align:center; }
.relationship-visual b { padding:22px; border-radius:16px; color:#fff; background:var(--navy); font:700 23px/1 "Space Grotesk",sans-serif; }
.relationship-visual b:last-child { background:var(--teal); }
.relationship-visual span { color:var(--teal-dark); font-weight:700; }
.public-result-actions { justify-content:center; margin-block-start:28px; }
.maturity-panel .level-score { direction:ltr; color:var(--teal-dark); font:700 24px/1 "Space Grotesk",sans-serif; }
.relationship-card { display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:center; color:#fff; background:linear-gradient(135deg,var(--navy),#104969); border:0; }
.relationship-card h2 { margin:8px 0 13px; color:#fff; font:700 33px/1 "Space Grotesk",sans-serif; direction:ltr; text-align:right; }
.relationship-card h2 span { color:#5ce0d2; }
.relationship-card p, .relationship-card small { color:#c5d6e2; }
.relationship-gap { display:grid; gap:10px; padding:20px; border-radius:17px; background:rgba(255,255,255,.09); }
.relationship-gap strong { color:#66e3d5; font:700 38px/1 "Space Grotesk",sans-serif; }
.relationship-gap span { color:#fff; line-height:1.7; }
.classification-boundary { margin-block-start:18px; color:#7a5b1d; background:#fff6df; border-radius:11px; padding:12px; }
.dimension-line.navy .dimension-track i { background:linear-gradient(90deg,var(--navy),#2e628b); }
.export-summary ul { margin:12px 0 0; padding-inline-start:22px; color:#667681; line-height:2; }

@media print {
  .public-nav, .public-result-actions { display:none !important; }
  .public-result-page main { width:100%; padding:0; }
  .public-result-page { background:#fff; }
  .card, .panel, .result-hero { break-inside:avoid; box-shadow:none; }
}

@media (max-width: 1100px) {
  .span-3 { grid-column: span 6; }
  .span-4 { grid-column: span 6; }
  .span-5, .span-7 { grid-column: span 12; }
  .roadmap-board { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(86vw,300px); height: 100dvh; padding: 24px 18px 96px; display: flex; overflow-y: auto; transform: translateX(110%); visibility: hidden; pointer-events: none; transition: transform .25s ease, visibility .25s ease; z-index: 50; box-shadow: -20px 0 60px rgba(11,31,51,.18); }
  .sidebar.open { transform: translateX(0); visibility: visible; pointer-events: auto; }
  .sidebar .workspace-label, .sidebar .org-switcher, .sidebar .sidebar-rule, .sidebar .sidebar-bottom { display: flex; }
  .sidebar .workspace-label { display: block; }
  .sidebar .main-nav { display: grid; overflow: visible; }
  .sidebar .nav-item, .sidebar .nav-item:not(.active) { display: flex; }
  .main-content { margin-inline-start: 0 !important; }
  .menu-button { display: inline-flex; }
  .topbar { padding-inline: 18px; }
  #app-view { padding-inline: 18px; }
  .mobile-nav { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; display: grid; grid-template-columns: repeat(5,1fr); gap: 2px; background: #fff; border-block-start: 1px solid var(--line); padding: 7px max(7px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left)); }
  .mobile-nav a, .mobile-nav button { border: 0; background: transparent; color: var(--muted); text-align: center; padding: 7px 2px; font-size: 11px; }
  .footer { padding-block-end: 82px; }
  .auth-layout { grid-template-columns: 1fr; }
  .auth-brand { min-height: 390px; }
  .auth-features { grid-template-columns: 1fr 1fr; }
  .span-6 { grid-column: span 12; }
}

@media (max-width: 680px) {
  .card-grid { display: grid; grid-template-columns: 1fr; }
  .span-3, .span-4, .span-5, .span-6, .span-7, .span-8, .span-12 { grid-column: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: 1; }
  .page-heading { align-items: stretch; }
  .page-heading-actions, .page-heading-actions .button, .page-heading-actions button { width: 100%; }
  .score-layout { grid-template-columns: 1fr; }
  .dimension-line { grid-template-columns: 1fr 48px; }
  .dimension-track { grid-column: 1 / -1; grid-row: 2; }
  .choice-scale { gap: 5px; }
  .choice-scale span { min-height: 44px; }
  .auth-panel { padding: 16px; }
  .auth-brand { padding: 28px 22px; min-height: 350px; }
  .auth-features { grid-template-columns: 1fr; }
  .auth-copy h1 { font-size: 44px; }
  .user-chip > span:nth-child(2) { display: none; }
  .breadcrumb > span, .breadcrumb > b { display: none; }
  .toast { inset-inline: 12px; width: auto; text-align: center; bottom: calc(78px + env(safe-area-inset-bottom)); transform: translateY(20px); }
  .toast.show { transform: translateY(0); }
}

@media (max-width: 900px) {
  .public-nav { padding-inline:18px; }
  .public-nav > div > a:not(.primary-button), .public-nav > div > .secondary-button { display:none; }
  .landing-hero, .report-preview, .construct-grid, .start-heading, .relationship-card { grid-template-columns:1fr; }
  .landing-hero { padding-block:55px; }
  .hero-model { max-width:620px; }
  .effect-card { grid-template-columns:auto auto; justify-content:center; }
  .effect-card small { grid-column:1 / -1; }
  .value-grid { grid-template-columns:1fr; }
  .maturity-stages { grid-template-columns:1fr; }
  .maturity-stages > div { min-height:72px; }
  .maturity-stages > div::after { content:"↓"; inset-inline-end:50%; inset-block-start:auto; inset-block-end:-19px; }
  .context-likert > div { grid-template-columns:1fr 1fr; }
  .result-score-cards { grid-template-columns:1fr; }
}

@media (max-width: 560px) {
  .public-brand b { max-width:150px; font-size:12px; }
  .public-nav .primary-button { min-height:40px; padding:8px 10px; font-size:11px; }
  .landing-page main, .participant-start-page main, .public-result-page main { width:min(100% - 28px,1180px); }
  .hero-copy h1 { font-size:39px; }
  .hero-copy > p { font-size:16px; }
  .landing-section { padding-block:66px; }
  .model-section, .landing-cta { padding-inline:20px; }
  .context-likert > div, .choice-scale.labelled { grid-template-columns:1fr !important; }
  .context-likert span, .choice-scale.labelled span { min-height:44px; }
  .submit-panel { align-items:stretch; flex-direction:column; }
  .submit-panel .primary-button { width:100%; }
  .result-hero { padding:25px; }
  .relationship-visual { grid-template-columns:1fr; }
  .relationship-visual span { transform:rotate(90deg); margin-block:8px; }
}