:root {
  color-scheme: light;
  --ink: #172329;
  --muted: #68777d;
  --surface: #ffffff;
  --page: #f4fbfb;
  --brand: #08a6b5;
  --brand-dark: #078898;
  --line: #dce8ea;
  --inclusion: #3eaa63;
  --inclusion-soft: #e3f6e9;
  --learning: #328ed0;
  --learning-soft: #e4f2fd;
  --participation: #d4a72d;
  --participation-soft: #fff4d5;
  --change: #db665a;
  --change-soft: #fee8e5;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--page); }
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); }
button { font: inherit; }

.app-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 20px max(26px, env(safe-area-inset-bottom));
}

.screen { min-height: calc(100vh - 44px); min-height: calc(100dvh - 44px); display: flex; flex-direction: column; }
.welcome { text-align: center; }
.intro-picture { display: block; width: min(100%, 295px); max-height: 390px; object-fit: contain; margin: 0 auto 20px; border-radius: 18px; box-shadow: 0 14px 36px #2440481c; }
.intro-stage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 7px; width: min(100%, 295px); height: min(76vw, 295px); margin: 0 auto 20px; padding: 7px; border-radius: 24px; background: var(--surface); box-shadow: 0 14px 36px #2440481c; overflow: hidden; }
.intro-stage-grid img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; border-radius: 17px; }
h1 { margin: 0; font-size: clamp(28px, 7vw, 38px); line-height: 1.08; letter-spacing: -.03em; }
.intro { max-width: 410px; margin: 16px auto 24px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.meta { display: inline-flex; gap: 8px; margin-bottom: 24px; padding: 9px 13px; border-radius: 12px; background: var(--surface); color: var(--muted); font-size: 13px; box-shadow: 0 7px 24px #2440480b; }

.stage-inclusion { background: var(--inclusion-soft); color: #227b43; }
.stage-learning { background: var(--learning-soft); color: #176ca8; }
.stage-participation { background: var(--participation-soft); color: #8a6612; }
.stage-change { background: var(--change-soft); color: #a43e34; }

.primary { width: 100%; border: 0; border-radius: 16px; padding: 16px 20px; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: white; font-weight: 800; font-size: 17px; cursor: pointer; box-shadow: 0 10px 24px #0789992d; }
.primary:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.privacy { margin: 14px 12px 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.legal-notice { margin-top: 14px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: #ffffffa6; color: var(--muted); text-align: left; font-size: 10px; line-height: 1.45; }
.legal-notice b, .legal-notice span { display: block; }
.legal-notice b { margin-bottom: 5px; color: var(--ink); font-size: 10.5px; }

.stage-cover { text-align: center; gap: 14px; }
.cover-top { display: flex; align-items: center; gap: 12px; text-align: left; }
.cover-counter { color: var(--muted); font-size: 13px; font-weight: 750; }
.stage-picture { display: block; width: min(100%, 330px); height: min(48vh, 430px); object-fit: cover; margin: 2px auto 4px; border-radius: 28px; box-shadow: 0 16px 42px #24404820; }
.stage-picture-learning { object-position: 50% 35%; }
.stage-cover .stage-label { align-self: center; }
.stage-cover h1 { font-size: clamp(28px, 7vw, 36px); }
.cover-prompt { margin: -2px 0 5px; color: var(--muted); font-size: 16px; line-height: 1.4; }
.stage-cover .primary { margin-top: auto; }

.instructions-screen { gap: 14px; }
.instructions-screen > .back { align-self: flex-start; margin-bottom: 4px; }
.instructions-screen h1 { max-width: 430px; margin-bottom: 4px; }
.assessment-guide { display: grid; gap: 11px; margin: 8px 0 12px; }
.assessment-guide > div { display: grid; grid-template-columns: 34px 1fr; gap: 11px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 24px #2440480a; }
.assessment-guide b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #dff3f1; color: var(--brand-dark); }
.assessment-guide p { margin: 3px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.assessment-guide strong { color: var(--ink); }
.instructions-screen .primary { margin-top: auto; }

.question-screen { gap: 18px; }
.question-top { display: flex; align-items: center; gap: 12px; }
.back { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font-size: 25px; cursor: pointer; }
.progress-wrap { flex: 1; }
.progress-meta { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.progress { height: 8px; border-radius: 20px; background: var(--line); overflow: hidden; }
.progress > div { height: 100%; border-radius: inherit; transition: width .2s ease, background .2s ease; }
.stage-label { align-self: flex-start; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.25; font-weight: 800; }
.prompt { color: var(--muted); font-size: 14px; line-height: 1.35; font-weight: 650; margin-top: -7px; }
.question-text { margin: 0; font-size: clamp(22px, 5.7vw, 29px); line-height: 1.3; letter-spacing: -.015em; text-wrap: balance; }
.question-picture-frame { position: relative; width: 100%; height: clamp(220px, 36vh, 380px); overflow: hidden; border-radius: 22px; background-position: center; background-size: cover; box-shadow: 0 12px 30px #2440481c; isolation: isolate; }
.question-picture-frame::before { content: ""; position: absolute; inset: -18px; z-index: -1; background: inherit; filter: blur(16px) saturate(.75); transform: scale(1.12); opacity: .58; }
.question-picture-frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #f6fbfb52; }
.question-picture { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.question-picture-q1,
.question-picture-q2,
.question-picture-q3,
.question-picture-q4,
.question-picture-q5,
.question-picture-q6,
.question-picture-q7,
.question-picture-q8,
.question-picture-q9,
.question-picture-q10,
.question-picture-q11,
.question-picture-q12 { object-fit: cover; }
.question-picture-frame-q1,
.question-picture-frame-q2,
.question-picture-frame-q3,
.question-picture-frame-q4,
.question-picture-frame-q5,
.question-picture-frame-q6,
.question-picture-frame-q7,
.question-picture-frame-q8,
.question-picture-frame-q9,
.question-picture-frame-q10,
.question-picture-frame-q11,
.question-picture-frame-q12 { background-image: none !important; background-color: #edf4f4; }
.question-picture-frame-q1::before,
.question-picture-frame-q2::before,
.question-picture-frame-q3::before,
.question-picture-frame-q4::before,
.question-picture-frame-q5::before,
.question-picture-frame-q6::before,
.question-picture-frame-q7::before,
.question-picture-frame-q8::before,
.question-picture-frame-q9::before,
.question-picture-frame-q10::before,
.question-picture-frame-q11::before,
.question-picture-frame-q12::before,
.question-picture-frame-q1::after,
.question-picture-frame-q2::after,
.question-picture-frame-q3::after,
.question-picture-frame-q4::after,
.question-picture-frame-q5::after,
.question-picture-frame-q6::after,
.question-picture-frame-q7::after,
.question-picture-frame-q8::after,
.question-picture-frame-q9::after,
.question-picture-frame-q10::after,
.question-picture-frame-q11::after,
.question-picture-frame-q12::after { display: none; }
.question-picture-q1 { object-position: 50% 30%; }
.question-picture-q2 { object-position: 50% 48%; }
.question-picture-q3 { object-position: 50% 30%; }
.question-picture-q4 { object-position: 50% 58%; }
.question-picture-q5 { object-position: 50% 28%; }
.question-picture-q6 { object-position: 50% 50%; }
.question-picture-q7 { object-position: 50% 40%; }
.question-picture-q8 { object-position: 50% 30%; }
.question-picture-q9 { object-position: 50% 61%; }
.question-picture-q10 { object-position: 50% 52%; }
.question-picture-q11 { object-position: 50% 70%; }
.question-picture-q12 { object-position: 50% 45%; }
.question-picture-q13,
.question-picture-q15,
.question-picture-q16 { object-fit: cover; object-position: center; }
.question-picture-frame-q13,
.question-picture-frame-q15,
.question-picture-frame-q16 { background-image: none !important; background-color: #edf4f4; }
.question-picture-frame-q13::before,
.question-picture-frame-q13::after,
.question-picture-frame-q15::before,
.question-picture-frame-q15::after,
.question-picture-frame-q16::before,
.question-picture-frame-q16::after { display: none; }
/* Show every question image in full: no cropping and no blurred duplicate background. */
.question-picture-frame {
  width: min(78%, 360px);
  height: min(52vh, 450px);
  min-height: 320px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 48% / 18%;
  background: #edf4f4 !important;
}
.question-picture-frame::before,
.question-picture-frame::after { display: none; }
.question-picture {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  border-radius: 42% / 14%;
  object-fit: contain !important;
  object-position: center !important;
}
/* The final four film stills are landscape frames. Give them a wider canvas so
   their visible area matches the portrait stills without cropping the image. */
.question-picture-frame-change {
  width: min(100%, 440px);
}
.question-picture-change {
  width: 100%;
}
/* The Ocean's and Back to the Future sequences are naturally darker. */
.question-picture-participation {
  filter: brightness(1.12) saturate(.96);
}
.question-picture-change {
  filter: brightness(1.16) saturate(.96);
}
.answer-panel { margin-top: auto; padding-top: 4px; }
.scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 3px; width: 100%; }
.score { min-width: 0; height: 43px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 780; cursor: pointer; }
.score.selected { color: white; border-color: transparent; transform: translateY(-2px); }
.scale-anchors { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 9px 0 24px; color: var(--muted); font-size: 11px; line-height: 1.25; }
.scale-anchors span:first-child { text-align: left; }
.scale-anchors span:last-child { text-align: right; }
.scale-anchors b { color: var(--ink); font-size: 12px; }
.resume-note { text-align: center; margin-top: 10px; color: var(--muted); font-size: 12px; }

.complete-icon { width: 82px; height: 82px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; background: var(--inclusion-soft); color: var(--inclusion); font-size: 43px; font-weight: 900; }
.secondary { margin-top: 12px; width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 15px; background: var(--surface); color: var(--ink); font-weight: 700; cursor: pointer; }

.result-screen { gap: 16px; padding-bottom: 18px; }
.result-header { display: flex; align-items: center; gap: 14px; text-align: left; }
.result-header .complete-icon { flex: 0 0 58px; width: 58px; height: 58px; margin: 0; font-size: 30px; }
.result-header h1 { font-size: clamp(24px, 6vw, 31px); }
.eyebrow, .recommendation-kicker { margin-bottom: 5px; color: var(--brand-dark); font-size: 11px; font-weight: 900; letter-spacing: .1em; }
.overall-card, .result-panel, .insight-card, .recommendation-card { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 34px #2440480c; }
.overall-card { display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: 22px; }
.overall-ring { flex: 0 0 116px; width: 116px; height: 116px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--brand) var(--score), #dce9ea 0); position: relative; }
.overall-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--surface); }
.overall-ring > div { position: relative; display: grid; text-align: center; }
.overall-ring strong { color: var(--brand-dark); font-size: 29px; line-height: 1; }
.overall-ring span { margin-top: 5px; color: var(--muted); font-size: 10px; }
.overall-copy b { font-size: 18px; }
.overall-copy p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.result-panel { padding: 18px; border-radius: 22px; }
.result-panel h2, .recommendation-card h2 { margin: 0 0 14px; font-size: 20px; }
.radar { display: block; width: min(100%, 380px); margin: 0 auto; overflow: visible; }
.radar-grid polygon, .radar-grid line { fill: none; stroke: #d9e5e7; stroke-width: 1; }
.radar-shape { fill: #08a6b533; stroke: var(--brand); stroke-width: 3; stroke-linejoin: round; }
.radar text { fill: var(--muted); font-size: 11px; font-weight: 700; }
.dot { stroke: white; stroke-width: 2; }.dot-inclusion{fill:var(--inclusion)}.dot-learning{fill:var(--learning)}.dot-participation{fill:var(--participation)}.dot-change{fill:var(--change)}
.result-row { margin: 14px 0; }
.result-row-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 750; }
.result-row-head b { font-size: 15px; }
.result-track { height: 9px; margin-top: 7px; overflow: hidden; border-radius: 8px; background: #e3edef; }
.result-track div { height: 100%; border-radius: inherit; }
.result-level { margin-top: 4px; color: var(--muted); font-size: 11px; }
.result-intro { margin: -4px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.result-explanation .result-row { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.result-explanation .result-row:last-child { padding-bottom: 0; border-bottom: 0; }
.stage-definition { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.insight-grid { display: grid; gap: 10px; }
.insight-card { padding: 17px; border-radius: 19px; }
.insight-card span { font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.strength-card span { color: var(--inclusion); }.focus-card span { color: var(--change); }
.insight-card h3 { margin: 8px 0; font-size: 17px; }
.insight-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.recommendation-card { padding: 20px; border-radius: 22px; }
.recommendation-card ol { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.recommendation-card li { counter-increment: steps; position: relative; margin: 12px 0; padding-left: 38px; color: var(--ink); font-size: 14px; line-height: 1.45; }
.recommendation-card li::before { content: counter(steps); position: absolute; left: 0; top: -2px; width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; background: #ffffffbb; font-weight: 900; }
.team-question { margin-top: 18px; padding: 14px; border-radius: 14px; background: #ffffffa6; }
.team-question b { font-size: 12px; }.team-question p { margin: 7px 0 0; font-size: 14px; line-height: 1.45; font-weight: 700; }
.result-disclaimer { margin: 4px 8px; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.4; }
.result-screen .legal-notice { margin-top: 0; }
.result-link { display: block; text-align: center; text-decoration: none; }
.text-button { border: 0; padding: 12px; background: transparent; color: var(--brand-dark); font-weight: 750; cursor: pointer; }

@media (min-width: 460px) { .insight-grid { grid-template-columns: 1fr 1fr; } }

@media (min-width: 600px) {
  body { padding: 24px 0; }
  .app-shell { min-height: calc(100vh - 48px); background: var(--surface); border-radius: 28px; box-shadow: 0 24px 70px #24404818; }
  .screen { min-height: calc(100vh - 96px); min-height: calc(100dvh - 96px); }
}

@media (max-height: 760px) {
  .app-shell {
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .screen { min-height: calc(100vh - 20px); min-height: calc(100dvh - 20px); }
  .stage-picture { height: 310px; }
  .question-screen { gap: 10px; }
  .question-top { gap: 10px; }
  .question-top .back { flex-basis: 38px; width: 38px; height: 38px; font-size: 22px; }
  .progress-meta { margin-bottom: 5px; font-size: 12px; }
  .progress { height: 6px; }
  .question-text { font-size: 20px; line-height: 1.24; }
  .question-picture-frame { width: min(74%, 305px); height: 39vh; min-height: 240px; padding: 8px; border-radius: 48% / 18%; }
  .question-picture { max-height: 100%; }
  .question-picture-frame-change { width: min(100%, 410px); }
  .answer-panel { padding-top: 2px; }
  .score { height: 38px; }
  .scale-anchors { margin: 6px 0 10px; font-size: 10px; }
  .primary { padding-top: 12px; padding-bottom: 12px; }
  .resume-note { margin-top: 6px; font-size: 10px; }
}

@media (max-width: 350px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .scale { gap: 2px; }
  .score { height: 40px; font-size: 12px; border-radius: 7px; }
}