@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,500;9..144,600&display=swap');:root {
--ink:#133a36;--lime:#c9f36a;--cream:#f8f5ed;--coral:#f17158;--line:#d8ddd3;--serif:Fraunces,Georgia,serif;--sans:'DM Sans',Arial,sans-serif;--mono:'DM Mono',monospace}
* {
box-sizing:border-box}
body {
margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans)}
button {
font:inherit;cursor:pointer}
button,a {
transition:.2s ease}
button:hover {
transform:translateY(-2px)}
.shell {
min-height:100vh}
.nav {
height:86px;max-width:1180px;margin:auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center}
.brand {
display:flex;align-items:center;gap:9px;border:0;background:none;padding:0;font-size:17px;font-weight:700;letter-spacing:-.75px;color:var(--ink)}
.logo {
width:27px;height:27px}
.mono,.eyebrow {
font:12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#59716b}
.nav button:last-child {
border:0;background:none;color:var(--ink);font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.nav-note {
font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#59716b}
.hero {
max-width:1180px;margin:28px auto 0;padding:26px 24px 0;display:grid;grid-template-columns:1.1fr .9fr;gap:55px;align-items:center}
.hero h1 {
font-size:clamp(49px,6.8vw,86px);line-height:.94;letter-spacing:-.065em;margin:0}
.hero h1 em,.how em {
font:500 1em var(--serif);color:var(--coral)}
.lead {
font-size:19px;line-height:1.55;max-width:540px;margin:28px 0;color:#405955}
.primary,.secondary,.save {
min-height:56px;padding:0 22px;border-radius:7px;border:0;font-size:16px;font-weight:700}
.primary {
background:var(--ink);color:#fff}
.secondary {
background:transparent;border:1px solid var(--ink);color:var(--ink)}
.save {
background:var(--lime);color:var(--ink)}
.primary span,.secondary span,.save span {
margin-left:22px}
.fine {
font-size:13px;color:#607572;margin:15px 0}
.hero-art {
height:400px;position:relative;background:var(--ink);border-radius:10px;overflow:hidden}
.hero-ball {
position:absolute;z-index:2;width:120px;height:120px;left:62px;top:56px}
.hero-art p {
position:absolute;right:38px;top:46px;color:#fff;font-size:24px;line-height:.92;letter-spacing:-.06em;font-weight:700;z-index:3}
.hero-art p em {
font:500 1em var(--serif);color:var(--lime)}
.court {
position:absolute;inset:auto 0 0;height:165px;border-top:1px solid var(--lime)}
.court:before,.court:after {
content:'';position:absolute;top:0;height:100%;border-left:1px solid var(--lime)}
.court:before {
left:38%}
.court:after {
left:62%}
.court i {
position:absolute;left:0;right:0;top:51%;border-top:1px solid var(--lime)}
.court b {
position:absolute;z-index:2;top:-18px;bottom:-18px;left:50%;width:2px;background:#fff}
.court b:before,.court b:after {
content:'';position:absolute;left:-6px;width:14px;height:2px;background:#fff}
.court b:before {
top:0}
.court b:after {
bottom:0}
.promise {
background:var(--lime);margin-top:30px;padding:32px max(24px,calc((100vw - 1132px)/2));display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.promise div {
border-right:1px solid rgba(19,58,54,.25);display:grid;gap:2px}
.promise div:last-child {
border:0}
.promise strong {
font:30px var(--serif)}
.promise span {
font-size:13px}
.ad {
max-width:1080px;margin:30px auto;padding:0 24px}
.ad label {
display:block;margin-bottom:7px;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#7a8883}
.ad-box {
min-height:90px;border:1px dashed rgba(19,58,54,.28);border-radius:8px;background:rgba(233,239,226,.55);display:grid;place-content:center;text-align:center;color:#58706a}
.ad-box b {
color:var(--ink)}
.ad-box small {
margin-top:4px}
.how {
max-width:1000px;margin:105px auto 85px;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:70px;align-items:center}
.how h2 {
font-size:clamp(38px,5vw,58px);line-height:1;letter-spacing:-.055em;margin:0 0 25px}
.how>div>p:last-child {
font-size:18px;line-height:1.7;color:#536966;max-width:620px}
.ad-square {
margin:0;padding:0}
.ad-square .ad-box {
min-height:250px;aspect-ratio:1}
.disclaimer {
text-align:center;border-top:1px solid var(--line);max-width:1132px;margin:0 auto;padding:22px 0 30px;color:#768581;font-size:12px}
.quiz {
max-width:760px;margin:auto;padding:80px 24px}
.progress {
height:5px;background:#e6ebe2}
.progress i {
display:block;height:100%;background:var(--coral);transition:width .35s}
.quiz h1 {
font-size:clamp(35px,5vw,58px);line-height:1.05;letter-spacing:-.05em}
.answers {
display:grid;gap:11px}
.answer {
min-height:70px;border:1px solid var(--line);border-radius:8px;background:#fff;text-align:left;padding:12px 18px;display:flex;align-items:center;gap:16px;color:var(--ink)}
.answer:hover {
border-color:var(--ink);background:#fbfdf8}
.answer i {
width:29px;height:29px;border-radius:50%;background:#eaf0e8;display:grid;place-items:center;font:12px var(--mono);font-style:normal}
.result-hero {
text-align:center;max-width:780px;margin:35px auto 55px;padding:0 24px}
.ring {
margin:12px auto 18px;width:154px;height:154px;border:1px solid var(--ink);border-radius:50%;padding:10px;background:conic-gradient(var(--coral) var(--arc),var(--lime) 0);background-clip:content-box;display:grid;place-items:center}
.ring strong {
font:50px var(--serif);letter-spacing:-.06em}
.result-hero h1 {
font-size:43px;margin:auto}
.result-hero p {
max-width:630px;line-height:1.65;font-size:17px;color:#506762;margin:14px auto}
.grid {
max-width:1080px;margin:auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.panel {
border-radius:10px;padding:32px;background:#fff}
.panel h2,.plan h2 {
font-size:34px;letter-spacing:-.05em;margin:0 0 26px}
.panel h2 em {
font:500 1em var(--serif)}
.strengths h2 {
display:inline-block;position:relative}
.strengths h2:after {
content:'';height:9px;background:var(--lime);position:absolute;left:-4px;right:-4px;bottom:2px;z-index:0}
.strengths h2>* {
position:relative;z-index:1}
.copy {
color:#58706a;line-height:1.5;margin:-12px 0 22px}
.skill {
margin:16px 0}
.skill div {
display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px}
.skill b {
font:12px var(--mono);color:#56736c}
.skill i {
display:block;background:#edf0e8;height:7px;border-radius:10px}
.skill em {
display:block;height:100%;background:var(--lime);border-radius:10px}
.improve {
background:var(--ink);color:#fff}
.improve .eyebrow {
color:var(--lime)}
.improve .copy,.weak p {
color:#bfd0cc}
.weak {
display:flex;gap:13px;border-top:1px solid rgba(255,255,255,.18);padding:15px 0}
.weak>span {
color:var(--lime);font-size:19px}
.weak b {
font-size:15px}
.weak p {
margin:4px 0 0;font-size:13px;line-height:1.45}
.score-toggle {
margin-top:23px;border:1px solid var(--ink);background:transparent;color:var(--ink);border-radius:99px;padding:8px 12px;font-size:12px;font-weight:700}
.scorecard {
display:none;background:#e9efe2;border-radius:10px;margin-top:12px;padding:20px}
.scorecard.open {
display:block}
.scorecard h2 em {
font:italic 500 1em var(--serif);color:var(--coral)}
.score-list {
margin-top:16px}
.chip {
display:grid;grid-template-columns:1fr auto;gap:14px;padding:7px 0;border-bottom:1px solid rgba(19,58,54,.16)}
.chip b {
font:800 14px var(--mono);color:var(--coral)}
.plan {
max-width:1080px;margin:18px auto;padding:38px 33px;background:var(--coral);border-radius:10px}
.plan h2 em {
font:500 1em var(--serif);color:#fff}
.drills {
display:grid;grid-template-columns:1fr;gap:0}
.drill {
padding:23px 0}
.drill h3 {
margin:6px 0;color:#fff;font-size:21px}
.drill small,.drill .mono {
color:#68483e}
.drill p {
max-width:650px;line-height:1.52}
.drill button {
border:1px solid rgba(255,255,255,.85);background:transparent;color:#fff;border-radius:99px;padding:8px 12px;font-weight:700}
.actions {
max-width:1080px;margin:25px auto;padding:0 24px;display:grid;grid-template-columns:1fr 300px;gap:24px}
.action-buttons {
display:grid;gap:12px}
.actions .ad {
margin:0;padding:0}
.actions .ad-box {
min-height:250px;aspect-ratio:1}
.saved {
max-width:840px;margin:55px auto;padding:0 24px}
.saved h1 {
font-size:clamp(43px,6vw,67px);letter-spacing:-.06em}
.saved h1 em {
font:500 1em var(--serif);color:var(--coral)}
.saved-card {
display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 22px;background:#fff;border:1px solid var(--line);border-radius:8px;margin:11px 0}
.saved-level {
font:36px var(--serif)}
.saved-card p {
margin:4px 0;color:#6b7d78;font-size:13px}
.trash {
margin-left:12px;min-width:48px;border:1px solid var(--line);background:#fff;border-radius:6px;color:var(--ink);font-size:18px}
.hidden {
display:none!important}
@media(max-width:700px) {
.nav {
height:70px;padding:0 18px}
.hero {
display:block;padding:32px 24px 0}
.hero h1 {
font-size:53px}
.lead {
font-size:17px;margin:23px 0}
.primary {
width:100%}
.hero-art {
height:290px;margin-top:45px}
.hero-ball {
width:120px;height:120px;left:36px;top:35px}
.hero-art p {
right:25px;top:34px;font-size:20px}
.promise {
margin-top:24px;padding:26px 15px}
.how {
display:block;margin:70px auto 58px}
.how .ad {
margin-top:28px}
.ad-square .ad-box {
min-height:180px;aspect-ratio:auto}
.grid {
grid-template-columns:1fr;padding:0 16px}
.panel {
padding:26px 22px}
.plan {
margin:12px 16px;padding:27px 22px}
.actions {
grid-template-columns:1fr;padding:0 16px}
.actions .ad {
order:-1}
.actions .ad-box {
min-height:180px;aspect-ratio:auto}
.saved {
margin:35px auto}
.ad {
padding:0 16px}
.ad-box {
min-height:50px}
.ad-box small {
display:none}
}
@media(min-width:701px) and (max-width:980px) {
.hero-ball {
width:86px;height:86px;left:36px;top:45px}
.hero-art p {
right:24px;top:40px;font-size:20px}
}

/* Restores the results experience used by the live app. */
.ring {
position:relative;background:conic-gradient(from -30deg,var(--coral) 0 var(--arc),var(--lime) var(--arc) 100%);padding:9px;border:1px solid var(--ink);isolation:isolate;transition:background .06s linear}
.ring:before {
content:"";position:absolute;inset:9px;border-radius:50%;background:var(--cream);z-index:-1}
.ring strong {
position:relative;z-index:3;animation:rankSettle 2.2s cubic-bezier(.2,.8,.2,1)}
.rank-confetti {
position:absolute;z-index:4;inset:50%;width:1px;height:1px;pointer-events:none}
.confetti {
position:absolute;left:0;top:0;width:8px;height:14px;border-radius:2px;opacity:0;animation:confettiRain 2.7s cubic-bezier(.18,.84,.3,1) var(--delay) both}
.confetti.lime {
background:var(--lime)}
.confetti.coral {
background:var(--coral)}
.confetti.cream {
background:var(--cream);box-shadow:0 0 0 1px rgba(19,58,54,.15)}
.confetti.ink {
background:var(--ink)}
@keyframes rankSettle {
0% {
opacity:0;transform:scale(.65) rotate(-8deg)}
65% {
opacity:1;transform:scale(1.14) rotate(2deg)}
100% {
transform:scale(1) rotate(0)}
}
@keyframes confettiRain {
0% {
opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.3)}
18% {
opacity:1}
65% {
opacity:1;transform:rotate(var(--angle)) translateY(-108px) rotate(calc(var(--angle) * -1))}
100% {
opacity:0;transform:rotate(var(--angle)) translateY(-34px) rotate(calc(var(--angle) * -1))}
}

.plan {
position:relative;overflow:hidden;padding-top:40px}
.plan:before {
content:"3";display:block;margin:-14px 0 -6px;color:var(--cream);font:clamp(84px,11vw,132px)/.72 var(--serif);letter-spacing:-.1em}
.plan h2 {
font-size:clamp(30px,4vw,37px);margin-bottom:10px}
.plan h2 em {
position:relative;z-index:1}
.plan h2 em:after {
content:"";position:absolute;z-index:-1;left:-6px;right:-6px;bottom:2px;height:10px;background:rgba(19,58,54,.28);transform:rotate(1.5deg)}
.plan>.eyebrow {
color:#6b443a}
.drill {
position:relative;border:0!important;padding:23px 0 29px}
.drill h3 {
color:var(--cream)}
.drill-body {
max-height:1.52em;overflow:hidden;margin-bottom:0!important;mask-image:linear-gradient(to right,#000 85%,transparent)}
.drill.open .drill-body {
max-height:500px;mask-image:none;transition:max-height .38s cubic-bezier(.2,.8,.2,1)}
.see-more {
margin-top:14px;padding:8px 12px;border:1px solid rgba(248,245,237,.85);border-radius:99px;background:transparent;color:var(--cream);font-size:12px;line-height:1;font-weight:700}
.see-more:hover {
background:var(--cream);color:var(--coral)}
.drill-wave {
display:block;height:10px;margin-top:18px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 5 C4 2,8 2,12 5 S20 8,24 5 S32 2,36 5 S44 8,48 5' fill='none' stroke='%23133a36' stroke-opacity='.35' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:48px 10px}
.drill:last-child .drill-wave {
display:none}
@media(max-width:700px) {
.plan:before {
font-size:86px}
.ring {
width:135px;height:135px}
.ring strong {
font-size:44px}
}
@media(prefers-reduced-motion:reduce) {
.ring strong,.confetti {
animation:none}
.confetti {
display:none}
}

/* Static deployment visual-parity layer — mirrors the original site’s design tokens and component rhythm. */
:root {
--ink:#133a36;--lime:#c9f36a;--cream:#f8f5ed;--coral:#f17158;--muted:#607572;--line:#d8ddd3;--serif:"Fraunces",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;--mono:"DM Mono",monospace}
body {
color:var(--ink);font-family:var(--sans);letter-spacing:0}
.nav {
max-width:1180px;height:86px;padding:0 24px}
.brand {
gap:10px;font-size:17px;letter-spacing:-.75px}
.hero {
max-width:1180px;margin:28px auto 0;padding:26px 24px 0;gap:55px}
.hero h1 {
max-width:680px}
.lead {
font-size:19px;line-height:1.55}
.primary,.secondary,.save {
border-radius:7px;min-height:56px;font-size:16px}
.hero-art {
border-radius:10px}
.promise {
padding:32px max(24px,calc((100vw - 1132px)/2))}
.how {
margin:105px auto 85px}
.how h2 {
letter-spacing:-.055em}
.ad-box {
border-radius:8px}
.result-hero {
max-width:780px;margin:35px auto 55px}
.result-hero h1 {
font-size:43px;letter-spacing:-.05em}
.result-hero>p {
max-width:630px;line-height:1.65}
.grid {
max-width:1080px;gap:18px;padding:0 24px}
.panel {
border-radius:10px;padding:32px}
.panel h2 {
font-size:34px;letter-spacing:-.05em}
.strengths h2:after {
transform:rotate(-1.5deg)}
.skill {
margin:16px 0}
.skill div {
font-size:14px}
.skill b {
font:12px var(--mono)}
.score-toggle {
border:1px solid var(--ink);border-radius:99px;padding:8px 12px;background:transparent;color:var(--ink);font-size:12px}
.scorecard {
margin:12px 0 0;padding:20px;border-radius:10px;background:#e9efe2}
.scorecard h2 {
font-size:26px;letter-spacing:-.05em;margin:0}
.score-list {
margin-top:16px}
.chip {
padding:7px 0;align-items:baseline}
.chip b {
font:800 14px/1 var(--mono)}
.improve .eyebrow {
color:var(--lime)}
.improve h2 em {
color:var(--lime)}
.weak {
padding:15px 0}
.weak b {
font-size:15px}
.weak p {
font-size:13px}
.plan {
max-width:1080px;margin:18px auto;border-radius:10px;padding:38px 33px}
.plan>.eyebrow {
margin-bottom:8px}
.plan h2 {
letter-spacing:-.05em}
.plan>p {
max-width:630px;line-height:1.55}
.drill {
padding:23px 0 29px}
.drill .mono {
font:11px var(--mono);letter-spacing:.06em}
.drill h3 {
font-size:21px;letter-spacing:-.04em}
.actions {
max-width:1080px;margin:25px auto 0;gap:24px;padding:0 24px}
.saved {
max-width:840px;margin:55px auto;padding:0 24px}
.saved h1 {
line-height:.96;margin:0}
.saved-card {
border-radius:8px;padding:20px 22px}
.saved-card .primary {
min-height:42px;border-radius:6px;padding:12px 15px;font-size:14px}
.trash {
min-height:42px;border-radius:6px}
.hero-art,.panel,.plan,.saved-card,.ad-box {
box-shadow:none}
@media(min-width:701px) and (max-width:980px) {
.hero-ball {
width:86px;height:86px;left:36px;top:45px}
.hero-art p {
right:24px;top:40px;font-size:20px}
}
@media(max-width:700px) {
.nav {
height:70px;padding:0 18px}
.hero {
display:block;padding:32px 24px 0}
.hero h1 {
font-size:53px}
.lead {
font-size:17px;margin:23px 0}
.hero-art {
height:290px;margin-top:45px}
.hero-ball {
width:120px;height:120px;left:36px;top:35px}
.hero-art p {
right:25px;top:34px;font-size:20px}
.promise {
padding:26px 15px}
.how {
margin:70px auto 58px;padding:0 24px}
.grid {
grid-template-columns:1fr;padding:0 16px;gap:12px}
.panel {
padding:26px 22px}
.scorecard {
margin:12px 0 0;padding:19px}
.plan {
margin:12px 16px;padding:27px 22px}
.actions {
padding:0 16px;margin-top:18px;gap:18px}
.saved {
margin:35px auto;padding:0 24px}
.saved-card {
padding:17px}
.ad {
padding:0 16px}
}

/* Direct parity corrections for the original source layout. */
.hero h1 em {
font-family:var(--serif);font-style:italic;font-weight:500;color:var(--coral)}

.improve h2 {
position:relative;display:inline-block}
.improve h2:after {
content:"";position:absolute;left:0;right:1px;bottom:-5px;height:2px;background:var(--lime);transform:skewX(-20deg)}

.plan {
display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:center}
.plan>.eyebrow {
grid-column:1/-1;grid-row:1;margin:0 0 8px}
.plan:before {
grid-column:1;grid-row:2;display:block;margin:0;color:var(--cream);font:clamp(84px,11vw,132px)/.72 var(--serif);letter-spacing:-.1em;align-self:center}
.plan h2 {
grid-column:2;grid-row:2;align-self:center;margin:0}
.plan>p:not(.eyebrow) {
grid-column:1/-1;grid-row:3;margin:16px 0 0}
.drills {
grid-column:1/-1;grid-row:4;margin-top:18px}
.drills:before {
content:"";display:block;height:10px;margin:0 0 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 5 C4 2,8 2,12 5 S20 8,24 5 S32 2,36 5 S44 8,48 5' fill='none' stroke='%23133a36' stroke-opacity='.35' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:48px 10px}

@media(max-width:700px) {
.plan {
grid-template-columns:auto minmax(0,1fr);column-gap:13px}
.plan:before {
font-size:86px}
.plan h2 {
font-size:29px}
.plan>p:not(.eyebrow) {
margin-top:13px}
.drills {
margin-top:15px}
}

/* Source-to-static parity layer.  This deliberately maps the portable markup
   to the original site's visual system instead of introducing a second one. */
:root {
--ink:#133a36;--lime:#c9f36a;--cream:#f8f5ed;--coral:#f17158;--muted:#607572;--line:#d8ddd3;--serif:"Fraunces",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;--mono:"DM Mono",monospace}

body {
background:var(--cream);color:var(--ink);font-family:var(--sans)}
.shell {
min-height:100vh;overflow:hidden}
.shell .nav {
max-width:1180px;height:86px;margin:auto;padding:0 24px}
.shell .brand {
letter-spacing:-.5px}
.shell .hero h1 em {
font-family:var(--serif);font-style:italic;font-weight:500;color:var(--coral)}

/* Quiz: same centered question surface, progress treatment, and answer rhythm. */
.shell .progress {
height:5px;background:#e6ebe2}
.shell .progress>i {
height:100%;display:block;background:var(--coral);transition:width .35s ease}
.shell .quiz {
max-width:760px;margin:0 auto;padding:clamp(52px,10vh,110px) 24px 42px}
.shell .quiz h1 {
font-size:clamp(35px,5vw,58px);line-height:1.05;letter-spacing:-.065em;max-width:680px}
.shell .quiz .copy {
color:var(--muted);font-size:16px;margin:18px 0 34px}
.shell .answers {
display:grid;gap:11px}
.shell .answer {
min-height:70px;border:1px solid var(--line);border-radius:8px;background:#fff;text-align:left;display:flex;align-items:center;padding:12px 18px;gap:16px;font-size:16px;line-height:1.3;color:var(--ink);transition:border-color .15s,transform .15s,background-color .15s,box-shadow .2s}
.shell .answer>i {
width:29px;height:29px;flex:0 0 29px;border-radius:50%;background:#eaf0e8;display:grid;place-items:center;font:12px var(--mono);color:#46605b;font-style:normal}
.shell .answer:hover {
border-color:var(--ink);background:#fbfdf8;transform:translateX(3px)}
.shell .answer.is-selected {
border-color:var(--ink);
background:#edf3e5;
box-shadow:inset 3px 0 0 var(--lime);
}
.quiz-body.quiz-enter-forward {animation:quiz-enter-from-right .34s cubic-bezier(.22,.78,.26,1) both}
.quiz-body.quiz-enter-backward {animation:quiz-enter-from-left .34s cubic-bezier(.22,.78,.26,1) both}
.quiz-body.quiz-leave-left {animation:quiz-leave-to-left .30s cubic-bezier(.4,0,.6,.2) both;pointer-events:none}
.quiz-body.quiz-leave-right {animation:quiz-leave-to-right .30s cubic-bezier(.4,0,.6,.2) both;pointer-events:none}
@keyframes quiz-enter-from-right {from{opacity:0;transform:translateX(48px)}to{opacity:1;transform:translateX(0)}}
@keyframes quiz-enter-from-left {from{opacity:0;transform:translateX(-48px)}to{opacity:1;transform:translateX(0)}}
@keyframes quiz-leave-to-left {to{opacity:0;transform:translateX(-48px)}}
@keyframes quiz-leave-to-right {to{opacity:0;transform:translateX(48px)}}

/* Result cards: the two side-by-side panels share a matched height. */
.grid {
max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0 24px;align-items:stretch}
.grid>div {
display:flex;flex-direction:column}
.panel {
border-radius:10px;padding:32px;background:#fff}
.grid>div .strengths {
flex:1}

/* Pre-quiz checkpoint: gives each player a clear, calm moment before question one. */
.honesty-screen {
min-height:100vh;
display:grid;
place-items:center;
padding:24px;
background:var(--ink);
position:relative;
overflow:hidden;
}
.honesty-screen:before,.honesty-screen:after {
content:"";
position:absolute;
width:min(58vw,720px);
aspect-ratio:1;
border:1px solid rgba(201,243,106,.4);
border-radius:50%;
pointer-events:none;
}
.honesty-screen:before {right:-22vw;top:-24vw}
.honesty-screen:after {left:-30vw;bottom:-35vw}
.honesty-card {
position:relative;
z-index:1;
width:min(100%,720px);
padding:clamp(38px,8vw,76px);
border:1px solid rgba(248,245,237,.27);
border-radius:10px;
background:rgba(19,58,54,.72);
color:var(--cream);
box-shadow:0 24px 70px rgba(0,0,0,.18);
text-align:center;
animation:honesty-enter .48s cubic-bezier(.2,.8,.2,1) both;
}
.honesty-card .eyebrow {color:var(--lime);margin-bottom:24px}
.honesty-mark {
width:46px;
height:46px;
margin:0 auto 22px;
display:grid;
place-items:center;
border-radius:50%;
background:var(--lime);
color:var(--ink);
font:700 24px/1 var(--sans);
}
.honesty-card h1 {
margin:0;
font-size:clamp(58px,10vw,104px);
line-height:.9;
letter-spacing:-.075em;
}
.honesty-card h1 em {
display:inline-block;
position:relative;
z-index:0;
font-family:var(--serif);
font-style:italic;
font-weight:500;
color:var(--lime);
}
.honesty-card h1 em:after {
content:"";
position:absolute;
z-index:-1;
left:-4px;
right:-6px;
bottom:-2px;
height:9px;
background:var(--coral);
transform:rotate(1.5deg);
}
.honesty-card p:not(.eyebrow) {
max-width:520px;
margin:27px auto 32px;
font-size:clamp(18px,2.3vw,23px);
line-height:1.48;
color:#dbe6df;
}
.honesty-card .primary {min-width:min(100%,290px);background:var(--cream);color:var(--ink)}
.honesty-card .primary:hover {background:#fff;color:var(--coral)}
.honesty-card .text-link {
display:block;
margin:18px auto 0;
border:0;
background:transparent;
color:#c5d4d0;
font-size:13px;
text-decoration:underline;
text-underline-offset:4px;
}
.honesty-card .text-link:hover {color:var(--lime);transform:none}
.quiz-controls {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:24px;
}
.quiz-back,.quiz-next {
min-height:42px;
border-radius:6px;
padding:0 15px;
font-size:13px;
font-weight:700;
}
.quiz-back {border:1px solid var(--line);background:#fff;color:var(--ink)}
.quiz-back:disabled {opacity:.42;cursor:not-allowed;transform:none}
.quiz-next {margin-left:auto;border:0;background:var(--ink);color:#fff}
.quiz-next:hover {background:#0b2925}
@keyframes honesty-enter {
from {opacity:0;transform:translateY(18px) scale(.98)}
to {opacity:1;transform:none}
}
@media(max-width:700px) {
.honesty-screen {padding:16px}
.honesty-card {padding:46px 25px}
.honesty-card .primary {width:100%}
.quiz-controls {margin-top:20px}
}
@media(prefers-reduced-motion:reduce) {
.quiz-body.quiz-enter-forward,.quiz-body.quiz-enter-backward,.quiz-body.quiz-leave-left,.quiz-body.quiz-leave-right {animation:none}
}
body {overflow-x:hidden}

/* Quiz inventory: one unobtrusive banner after every second question. */
.quiz-banner {
max-width:760px;
margin:0 auto 38px;
padding:0 24px;
}
.quiz-banner .ad-box {
min-height:72px;
}
@media(max-width:700px) {
.quiz-banner {margin:0 auto 26px;padding:0 20px}
.quiz-banner .ad-box {min-height:54px}
}

/* Quiz pages are intentionally denser than the landing page. */
.quiz-screen .nav {
height:70px;
}
.quiz-screen .quiz {
padding:clamp(30px,5vh,64px) 24px 34px;
}
.quiz-screen .progress>i {
transition:width .55s cubic-bezier(.22,.78,.26,1);
will-change:width;
}
.quiz-top-controls {
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
margin-left:auto;
}
.quiz-top-controls .mono {
margin-right:4px;
white-space:nowrap;
}
.quiz-top-controls .quiz-back,.quiz-top-controls .quiz-next {
min-height:34px;
padding:0 11px;
font-size:12px;
white-space:nowrap;
}
.quiz-top-controls .quiz-back {background:transparent}
@media(max-width:700px) {
.quiz-screen .nav {height:62px;padding:0 16px}
.quiz-screen .brand {font-size:15px}
.quiz-screen .logo {width:24px;height:24px}
.quiz-screen .quiz {padding:34px 20px 27px}
.quiz-top-controls {gap:6px}
.quiz-top-controls .mono {font-size:10px;margin-right:1px}
.quiz-top-controls .quiz-back,.quiz-top-controls .quiz-next {min-height:32px;padding:0 8px;font-size:11px}
}

/* The two-line landing headline is deliberately compact. */
.hero h1 {line-height:.70}

/* Header controls use color, not vertical motion, as their hover feedback. */
.quiz-top-controls .quiz-back:hover {
transform:none;
color:var(--coral);
border-color:var(--coral);
}
.quiz-top-controls .quiz-next:hover {
transform:none;
background:var(--ink);
color:var(--coral);
}
.panel h2,.plan h2 {
font-size:28px;letter-spacing:-.05em;margin:0 0 26px}
.strengths h2 {
font-size:34px;position:relative;display:inline-block}
.strengths h2:after {
content:"";height:9px;background:var(--lime);position:absolute;left:-4px;right:-4px;bottom:2px;z-index:0;transform:rotate(-1.5deg)}
.strengths h2 em {
font-family:var(--serif);font-style:normal;position:relative;z-index:1}
.panel .copy {
line-height:1.5;margin:-12px 0 22px}
.strengths .copy {
color:#58706a}
.improve {
background:var(--ink);color:#fff}
.improve .eyebrow {
color:var(--lime)}
.improve h2 {
position:relative;display:inline-block}
.improve h2:after {
content:"";position:absolute;left:0;right:1px;bottom:-5px;height:2px;background:var(--lime);transform:skewX(-20deg)}
.improve .copy {
color:#bfd0cc}
.skill {
margin:16px 0}
.skill>div {
display:flex;justify-content:space-between;font-size:14px;margin-bottom:8px}
.skill b {
font:12px var(--mono);color:#56736c}
.skill>i {
display:block;background:#edf0e8;height:7px;border-radius:10px}
.skill>i>em {
display:block;height:100%;background:var(--lime);border-radius:10px}
.weak {
display:flex;gap:13px;border-top:1px solid rgba(255,255,255,.18);padding:15px 0}
.weak>span {
color:var(--lime);font-size:19px}
.weak b {
font-size:15px}
.weak p {
color:#bcd0cb;margin:4px 0 0;font-size:13px;line-height:1.45}

/* The original scorecard is compact, green-only, and sits directly under strengths. */
.scorecard {
background:#eaf0e3;border-radius:10px;margin-top:12px;padding:28px 30px;overflow:hidden}
.scorecard:not(.open) .score-list {
max-height:0;overflow:hidden}
.scorecard h2 {
font-size:30px;letter-spacing:-.05em;margin:0 0 22px}
.scorecard h2 em {
font-family:var(--serif);font-style:italic;font-weight:500;color:var(--coral)}
.score-list {
display:grid;transition:max-height .35s ease}
.chip {
display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:14px;padding:7px 0;border-bottom:1px solid rgba(19,58,54,.16);font-size:16px}
.chip:last-child {
border-bottom:0}
.chip b {
font:800 14px/1 var(--mono);color:var(--coral);white-space:nowrap}
.score-toggle {
margin-top:23px;border:1px solid var(--ink);border-radius:999px;background:transparent;color:var(--ink);font-weight:700;padding:10px 17px;transition:transform .2s ease,background-color .2s ease}

/* Practice plan retains its coral field, inline 3/title lockup, and repeat-safe waves. */
.plan {
max-width:1080px;margin:18px auto;padding:38px 33px;background:var(--coral);border-radius:10px;color:#1d3734;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:center}
.plan>.eyebrow {
grid-column:1/-1;grid-row:1;margin:0 0 8px;color:#35544f}
.plan:before {
content:"3";grid-column:1;grid-row:2;display:block;color:var(--cream);font:clamp(84px,11vw,132px)/.72 var(--serif);letter-spacing:-.1em;align-self:center}
.plan>h2 {
grid-column:2;grid-row:2;align-self:center;margin:0;font-size:37px}
.plan>h2 em {
font-family:var(--serif);font-style:normal;font-weight:500;color:var(--cream);position:relative}
.plan>h2 em:after {
content:"";position:absolute;z-index:0;background:rgba(19,58,54,.28);height:10px;bottom:2px;left:-6px;right:-6px;transform:rotate(1.5deg)}
.plan>h2 em {
isolation:isolate}
.plan>h2 em::first-line {
position:relative}
.plan>p:not(.eyebrow) {
grid-column:1/-1;grid-row:3;max-width:630px;line-height:1.55;margin:16px 0 0}
.drills {
grid-column:1/-1;grid-row:4;display:grid;grid-template-columns:1fr;margin-top:18px;padding-top:22px;position:relative;gap:28px}
.drills:before {
content:"";position:absolute;top:0;left:0;right:0;height:10px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 5 C4 2,8 2,12 5 S20 8,24 5 S32 2,36 5 S44 8,48 5' fill='none' stroke='%23133a36' stroke-opacity='.35' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:48px 10px}
.drill {
position:relative;background:transparent!important;border:0!important;border-radius:0!important;width:auto!important;height:auto!important;text-align:left!important;display:block!important;padding:0 0 14px!important;overflow:visible!important}
.drill .mono {
display:block}
.drill>span {
font:13px var(--mono);color:#7c5044}
.drill>p:first-of-type {
margin:17px 0 4px;font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#76564d}
.drill h3 {
margin:0 0 7px;color:var(--cream);font-size:21px;letter-spacing:-.04em}
.drill small {
font:11px var(--mono);color:#704d44}
.drill .drill-body {
max-height:25px;overflow:hidden;margin:18px 0 10px;line-height:1.55;transition:max-height .35s ease}
.drill.open .drill-body {
max-height:500px}
.drill-wave {
display:block;height:10px;margin-top:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='10' viewBox='0 0 48 10'%3E%3Cpath d='M0 5 C4 2,8 2,12 5 S20 8,24 5 S32 2,36 5 S44 8,48 5' fill='none' stroke='%23133a36' stroke-opacity='.35' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:repeat-x;background-size:48px 10px}
.see-more {
border:1px solid rgba(248,245,237,.85);border-radius:999px;background:transparent;color:var(--cream);font-weight:700;padding:9px 17px;transition:transform .2s ease,background-color .2s ease}
.see-more:hover {
background:rgba(248,245,237,.12);transform:translateY(-2px)}

@media(min-width:1280px) {
.drills {
grid-template-columns:repeat(3,minmax(0,1fr));column-gap:56px;row-gap:28px}
}
@media(max-width:700px) {
.shell .nav {
height:70px;padding:0 18px}
.shell .quiz {
padding:55px 20px 25px}
.shell .quiz h1 {
font-size:37px}
.grid {
grid-template-columns:1fr;padding:0 16px;gap:12px}
.panel {
padding:26px 22px}
.plan {
margin:12px 16px;padding:27px 22px;column-gap:13px}
.plan:before {
font-size:86px}
.plan>h2 {
font-size:29px}
.plan>p:not(.eyebrow) {
margin-top:13px}
.scorecard {
margin:12px 16px;padding:24px 22px}
.chip {
font-size:15px}
}

/* Static interaction parity: full drill instructions, gentle expansion, and a clean rain of confetti. */
.scorecard {
display:grid!important;max-height:0;margin:0!important;padding:0 30px!important;opacity:0;overflow:hidden;transition:max-height .46s cubic-bezier(.2,.8,.2,1),margin .46s cubic-bezier(.2,.8,.2,1),padding .46s cubic-bezier(.2,.8,.2,1),opacity .22s ease}
.scorecard.open {
max-height:980px;margin:12px 0 0!important;padding:28px 30px!important;opacity:1}
.scorecard .score-list {
max-height:none!important;overflow:visible!important}
.drill .drill-body {
max-height:1.55em;mask-image:linear-gradient(to right,#000 80%,transparent);transition:max-height .42s cubic-bezier(.2,.8,.2,1),margin .42s cubic-bezier(.2,.8,.2,1)}
.drill.open .drill-body {
max-height:420px;mask-image:none}
.see-more {
transition:transform .2s ease,background-color .2s ease,color .2s ease,border-color .2s ease}
.see-more:hover {
background:rgba(248,245,237,.16);border-color:var(--cream);color:var(--cream);transform:translateY(-2px)}
.confetti {
animation:confettiFall 3.8s cubic-bezier(.16,.64,.32,1) var(--delay) both}
@keyframes confettiFall {
0% {
opacity:0;transform:translate(var(--x),-86px) rotate(0) scale(.5)}
9% {
opacity:1}
78% {
opacity:1;transform:translate(calc(var(--x) * 1.16),118px) rotate(var(--r)) scale(1)}
100% {
opacity:0;transform:translate(calc(var(--x) * 1.28),166px) rotate(calc(var(--r) * 1.7)) scale(.78)}
}
@media(max-width:700px) {
.scorecard.open {
margin:12px 0 0!important;padding:24px 22px!important}
}

/* Each of the three drills closes with the same wavy divider. */
.drill:last-child .drill-wave {
display:block}

/* Quiet result celebration and actual height-based scorecard expansion. */
.confetti {
width:6px;height:10px;border-radius:1px;animation:confettiFall 2.7s ease-out var(--delay) both}
@keyframes confettiFall {
0% {opacity:0;transform:translate(var(--x),-58px) rotate(0) scale(.65)}
12% {opacity:1}
80% {opacity:1;transform:translate(calc(var(--x) * 1.08),76px) rotate(var(--r)) scale(1)}
100% {opacity:0;transform:translate(calc(var(--x) * 1.14),102px) rotate(calc(var(--r) * 1.5)) scale(.8)}
}
.scorecard {will-change:max-height;transition:max-height .48s cubic-bezier(.22,.8,.22,1),margin .48s cubic-bezier(.22,.8,.22,1),padding .48s cubic-bezier(.22,.8,.22,1),opacity .24s ease}
.save {transition:background-color .25s ease,color .25s ease,transform .2s ease}
.save.is-saved {background:var(--lime);color:var(--ink)}
.save:disabled {cursor:default;transform:none}

/* Natural, varied confetti: a brief burst, then a soft downward drift. */
.confetti {
width:8px;height:14px;border-radius:2px;animation:confettiBurst 3.1s cubic-bezier(.18,.76,.3,1) var(--delay) both}
@keyframes confettiBurst {
0% {opacity:0;transform:translate(0,0) rotate(0) scale(.35)}
12% {opacity:1}
38% {opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(var(--scale))}
82% {opacity:1;transform:translate(calc(var(--x) + var(--drift)),calc(var(--y) + 125px)) rotate(calc(var(--r) * 1.7)) scale(var(--scale))}
100% {opacity:0;transform:translate(calc(var(--x) + var(--drift)),calc(var(--y) + 168px)) rotate(calc(var(--r) * 2.2)) scale(calc(var(--scale) * .8))}
}
.nav button:last-child span {display:inline-grid;place-items:center;min-width:19px;height:19px;margin-left:6px;padding:0 5px;border-radius:50%;background:var(--lime);color:var(--ink);font:10px var(--mono);letter-spacing:0}

/* Keep the translucent accent fully below the serif text. */
.plan>h2 em:after {
bottom:-2px;
height:8px;
}

/* Keep the skewed accent behind—not over—the headline lettering. */
.plan>h2 em {
display:inline-block;
position:relative;
z-index:0;
isolation:isolate;
}
.plan>h2 em:after {
z-index:-1;
}

/* The full scorecard is never constrained to a content-height estimate. */
.scorecard {
max-height:0!important;
transform:translateY(-6px);
transition:max-height .5s cubic-bezier(.22,.8,.22,1),margin .5s cubic-bezier(.22,.8,.22,1),padding .5s cubic-bezier(.22,.8,.22,1),opacity .24s ease,transform .4s ease;
}
.scorecard.open {
max-height:5000px!important;
transform:translateY(0);
}

/* Saved-result deletion uses the same compact outlined control language. */
.saved-card .trash {
width:42px;
min-width:42px;
height:42px;
min-height:42px;
margin-left:12px;
padding:0;
display:inline-grid;
place-items:center;
border:1px solid var(--line);
border-radius:6px;
background:#fff;
color:var(--ink);
transition:background-color .2s ease,border-color .2s ease,transform .2s ease;
}
.saved-card .trash svg {
width:19px;
height:19px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
.saved-card .trash:hover {
background:#fbfdf8;
border-color:var(--ink);
transform:translateY(-2px);
}

/* Saved-card actions are a single aligned button row. */
.saved-card>div:last-child {
display:flex;
align-items:center;
gap:12px;
flex-wrap:nowrap;
}
.saved-card .primary,
.saved-card .trash {
height:48px;
min-height:48px;
margin:0;
}

/* Practice-plan button hover: cream fill with coral type. */
.see-more:hover {
background:var(--cream);
border-color:var(--cream);
color:var(--coral);
}

/* A quiet close to the results view. */
.result-footer {
max-width:1080px;
margin:42px auto 0;
padding:18px 24px 26px;
border-top:1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
color:#6b7d78;
font-size:12px;
}
.result-footer span {
color:var(--ink);
font-weight:700;
letter-spacing:-.3px;
}
.result-footer p {margin:0;}

/* Bring the second line of the hero headline into physical contact. */
.shell .hero h1 {line-height:.70!important;}
.shell .hero h1 em {display:inline-block;transform:translateY(-.10em);}
@media(max-width:700px) {
.result-footer {
margin-top:30px;
padding:16px 24px 24px;
align-items:flex-start;
flex-direction:column;
gap:5px;
}
}