:root {
  --navy: #286b35;
  --navy-2: #1d5428;
  --teal: #168bb2;
  --teal-soft: #e4f3f7;
  --coral: #f39a22;
  --coral-soft: #fff3e3;
  --yellow: #ffd73b;
  --yellow-soft: #fff9dd;
  --green: #2d9a51;
  --green-soft: #e7f5e9;
  --orange: #df8125;
  --red: #c85f4f;
  --ink: #2c4030;
  --muted: #64736a;
  --line: #dbe8dc;
  --paper: #fffefb;
  --cream: #f4f8f1;
  --shadow: 0 16px 48px rgba(40, 107, 53, .11);
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--cream);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-anchor: none; }
body { margin: 0; min-width: 320px; background: var(--cream); overflow-x: hidden; overflow-anchor: none; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: var(--teal); }
.site-shell { min-height: 100vh; }
#app { overflow-anchor: none; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:20px; max-width:1240px; margin:0 auto; padding:22px 28px 10px; }
.brand { display:flex; align-items:center; gap:11px; color:var(--navy); text-decoration:none; font-weight:700; letter-spacing:.01em; }
.brand-logo { display:block; width:190px; height:auto; max-height:58px; object-fit:contain; object-position:left center; }
.brand-context small { display:block; color:var(--muted); font-size:11px; font-weight:500; margin-top:1px; }
.container { max-width:1240px; margin:0 auto; padding:20px 28px 58px; }
.hero { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(330px, .95fr); gap:54px; align-items:center; max-width:1120px; margin:32px auto 0; }
.eyebrow { color:var(--teal); text-transform:uppercase; letter-spacing:.13em; font-size:12px; font-weight:700; margin:0 0 13px; }
h1, h2, h3 { color:var(--navy); margin:0; line-height:1.12; }
h1, h2 { font-family:Fraunces, Georgia, serif; }
h1 { font-size:clamp(36px, 5.5vw, 66px); max-width:650px; letter-spacing:-.03em; }
h2 { font-size:clamp(28px, 3.3vw, 42px); letter-spacing:-.02em; }
h3 { font-size:19px; }
.lede { font-size:18px; line-height:1.65; color:#4a5e68; max-width:650px; margin:22px 0; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:25px; }
.hero-note { color:var(--muted); font-size:13px; display:flex; gap:8px; align-items:center; }
.hero-note strong { color:var(--navy); }
.art { background:linear-gradient(145deg,#e0f1ee,#fbf5e8); border-radius:40px; padding:12px; box-shadow:var(--shadow); border:1px solid rgba(45,129,125,.12); }
.art svg { display:block; width:100%; height:auto; }
.info-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; max-width:1120px; margin:50px auto 0; }
.info-card { background:rgba(255,253,249,.76); border:1px solid var(--line); border-radius:18px; padding:20px; }
.info-card .icon { font-size:22px; }
.info-card h3 { margin-top:10px; font-size:16px; }
.info-card p { color:var(--muted); font-size:14px; line-height:1.55; margin:8px 0 0; }
.profile-card, .panel { background:var(--paper); border:1px solid var(--line); border-radius:24px; box-shadow:var(--shadow); }
.profile-card { max-width:720px; margin:40px auto 0; padding:30px; }
.profile-card h2 { font-size:28px; }
.profile-card p { color:var(--muted); line-height:1.6; }
.saved-progress { max-width:720px; margin:30px auto 0; padding:24px 27px; border-left:4px solid var(--teal); }
.saved-progress h2 { font-size:26px; }
.saved-progress p { color:var(--muted); line-height:1.55; }
.saved-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.profile-options { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:24px 0; }
.profile-option { position:relative; }
.profile-option input { position:absolute; opacity:0; pointer-events:none; }
.profile-option label { display:block; border:1px solid var(--line); border-radius:15px; padding:17px 18px; font-weight:600; color:var(--navy); transition:.18s ease; }
.profile-option label:hover { border-color:var(--teal); transform:translateY(-1px); }
.profile-option input:checked + label { background:var(--teal-soft); border-color:var(--teal); box-shadow:0 0 0 3px rgba(45,129,125,.12); }
.button { border:0; border-radius:12px; padding:13px 19px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform:translateY(-1px); }
.button-primary { background:var(--navy); color:#fff; box-shadow:0 8px 20px rgba(21,59,89,.2); }
.button-primary:hover { background:var(--navy-2); }
.button-secondary { background:#fff; color:var(--navy); border:1px solid var(--line); }
.button-secondary:hover { border-color:var(--teal); }
.button-soft { background:var(--teal-soft); color:var(--teal); }
.button-quiet { background:transparent; color:var(--teal); padding-left:8px; padding-right:8px; }
.button:disabled { opacity:.48; cursor:not-allowed; transform:none; }
.helper { font-size:13px; color:var(--muted); }

.test-layout { display:grid; grid-template-columns:260px minmax(0,1fr); gap:28px; align-items:start; max-width:1180px; margin:12px auto 0; }
.sidebar { position:sticky; top:18px; padding:19px; }
.side-title { font-weight:700; color:var(--navy); margin-bottom:10px; }
.block-nav { display:grid; gap:5px; }
.block-link { text-align:left; border:0; border-radius:11px; background:transparent; padding:10px 10px; color:var(--muted); display:flex; align-items:flex-start; gap:9px; line-height:1.25; font-size:12px; }
.block-link:hover { background:var(--teal-soft); color:var(--navy); }
.block-link.active { background:var(--navy); color:#fff; }
.block-link.done:not(.active) { color:var(--teal); }
.block-link.pending:not(.active) { color:var(--orange); }
.block-num { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; flex:none; background:#edf2f3; color:var(--navy); font-size:11px; font-weight:700; }
.active .block-num { background:rgba(255,255,255,.18); color:#fff; }
.block-link-text { flex:1; }
.block-count { display:block; font-size:10px; margin-top:3px; opacity:.72; }
.main-panel { min-width:0; }
.progress-wrap { margin-bottom:15px; }
.progress-meta { display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--muted); margin-bottom:8px; }
.progress-meta strong { color:var(--navy); }
.progress-track { height:8px; background:#e3e9e9; border-radius:99px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--teal),#6eb09b); border-radius:99px; transition:width .25s ease; }
.question-panel { padding:32px; min-width:0; overflow:hidden; }
.block-heading { font-family:Fraunces,Georgia,serif; color:var(--navy); font-size:clamp(28px,3.6vw,43px); letter-spacing:-.02em; margin:0; }
.block-intro { color:var(--muted); line-height:1.55; margin:10px 0 0; }
.question-stack { display:grid; gap:20px; margin-top:25px; min-width:0; }
.question-card { border:1px solid var(--line); border-radius:18px; padding:22px; background:#fff; scroll-margin-top:18px; min-width:0; }
.question-card .question-kicker { margin-bottom:9px; }
.question-card .question-text { font-family:Fraunces,Georgia,serif; font-size:clamp(21px,2.4vw,29px); line-height:1.25; overflow-wrap:break-word; }
.question-card .options { margin-top:18px; }
.question-pending { color:var(--muted); font-size:12px; margin:12px 0 0; }
.question-kicker { color:var(--teal); font-size:13px; font-weight:700; margin:0 0 14px; }
.question-text { font-family:Fraunces,Georgia,serif; color:var(--navy); font-size:clamp(24px,3vw,36px); line-height:1.23; letter-spacing:-.015em; margin:0; }
.options { display:grid; gap:11px; margin-top:27px; }
.option { text-align:left; display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:13px; border:1px solid var(--line); border-radius:15px; padding:14px 16px; background:#fff; color:var(--ink); line-height:1.42; transition:.18s ease; min-width:0; width:100%; }
.option > span:last-child { min-width:0; overflow-wrap:break-word; }
.option:hover { border-color:var(--teal); box-shadow:0 4px 14px rgba(45,129,125,.10); }
.option.selected { border-color:var(--teal); background:var(--teal-soft); box-shadow:0 0 0 3px rgba(45,129,125,.12); }
.option-letter { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#eff3f3; color:var(--navy); font-weight:700; font-size:13px; }
.selected .option-letter { background:var(--teal); color:#fff; }
.micro { margin-top:20px; border-left:4px solid var(--yellow); background:var(--yellow-soft); border-radius:0 12px 12px 0; padding:14px 16px; color:#675521; font-size:14px; line-height:1.55; }
.micro strong { display:block; color:#70590e; margin-bottom:3px; }
.question-footer { display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-top:30px; padding-top:19px; border-top:1px solid var(--line); }
.footer-next, .pause-test-button { width:100%; }
.pause-test-button { background:var(--teal-soft); color:var(--teal); border:1px solid rgba(22,139,178,.25); }
.pause-test-button:hover { background:#d5edf3; }
.pause-test-helper { text-align:center; font-size:12px; margin-top:-3px; }
.footer-previous, .footer-skip { align-self:flex-start; }
.test-toolbar { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; }
.test-toolbar .button { padding:9px 13px; font-size:13px; }

.review-panel { padding:32px; }
.review-intro { color:var(--muted); line-height:1.6; max-width:740px; }
.pending-alert { display:flex; gap:13px; align-items:flex-start; padding:16px; border:1px solid #f0d68d; background:var(--yellow-soft); border-radius:15px; margin:24px 0; color:#66541d; }
.pending-alert .alert-icon { font-size:21px; }
.review-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:24px; }
.review-block { border:1px solid var(--line); border-radius:15px; padding:15px; background:#fff; }
.review-block-head { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.review-block h3 { font-size:16px; }
.review-block small { color:var(--muted); }
.review-block ul { padding-left:20px; color:var(--orange); font-size:13px; line-height:1.55; margin-bottom:0; }
.review-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:29px; }

.results-head { display:flex; justify-content:space-between; gap:22px; align-items:flex-end; margin-bottom:22px; }
.results-head p { max-width:630px; color:var(--muted); line-height:1.6; margin:10px 0 0; }
.results-actions { display:flex; flex-wrap:wrap; gap:8px; flex:none; }
.score-hero { display:grid; grid-template-columns:190px minmax(0,1fr); gap:27px; align-items:center; padding:30px; margin-bottom:20px; }
.score-ring { width:168px; height:168px; border-radius:50%; background:conic-gradient(var(--teal) calc(var(--score) * 1%), #e3eceb 0); display:grid; place-items:center; position:relative; }
.score-ring::after { content:""; position:absolute; inset:12px; border-radius:50%; background:var(--paper); }
.score-ring-inner { position:relative; z-index:1; text-align:center; color:var(--navy); }
.score-number { display:block; font-family:Fraunces,Georgia,serif; font-size:45px; line-height:1; }
.score-out { font-size:13px; color:var(--muted); }
.level-pill { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; border-radius:99px; padding:8px 12px; }
.level-pill::before { content:""; width:9px; height:9px; border-radius:50%; background:currentColor; }
.level-red { color:var(--red); background:#fbeceb; }
.level-orange { color:#b36d23; background:#fff0de; }
.level-yellow { color:#927414; background:var(--yellow-soft); }
.level-green-light { color:#3c8062; background:#e9f5ed; }
.level-green { color:#277651; background:#def2e6; }
.score-explain { font-size:13px; color:var(--muted); line-height:1.55; margin-top:14px; }
.results-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.section-panel { padding:25px; }
.section-panel h3 { margin-bottom:15px; }
.section-panel p { color:var(--muted); line-height:1.6; margin:8px 0; }
.block-results { display:grid; gap:12px; }
.block-result { border:1px solid var(--line); border-radius:14px; padding:13px 14px; }
.block-result-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.block-result-name { font-weight:700; color:var(--navy); font-size:14px; line-height:1.3; }
.block-result-score { font-family:Fraunces,Georgia,serif; color:var(--teal); font-size:21px; white-space:nowrap; }
.block-result-meta { color:var(--muted); font-size:11px; margin-top:3px; }
.mini-track { height:7px; border-radius:99px; background:#e7eded; overflow:hidden; margin-top:10px; }
.mini-fill { height:100%; border-radius:99px; background:var(--teal); }
.insight-list { display:grid; gap:10px; padding:0; margin:0; list-style:none; }
.insight-list li { padding-left:20px; position:relative; line-height:1.48; color:#4b6069; font-size:14px; }
.insight-list li::before { content:""; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:50%; background:var(--coral); }
.insight-list.green li::before { background:var(--green); }
.insight-list.yellow li::before { background:var(--yellow); }
.recommendation { display:grid; grid-template-columns:34px 1fr; gap:11px; align-items:start; padding:12px 0; border-top:1px solid var(--line); }
.recommendation:first-child { border-top:0; padding-top:0; }
.rec-num { width:28px; height:28px; display:grid; place-items:center; background:var(--coral-soft); color:var(--coral); border-radius:50%; font-weight:700; }
.recommendation strong { color:var(--navy); display:block; font-size:14px; margin-bottom:3px; }
.recommendation span { color:var(--muted); font-size:13px; line-height:1.45; }
.qa-list { display:grid; gap:10px; }
.qa-item { border-top:1px solid var(--line); padding-top:12px; }
.qa-item:first-child { border-top:0; padding-top:0; }
.qa-question { color:var(--navy); font-weight:700; font-size:13px; line-height:1.4; }
.qa-answer { color:var(--muted); font-size:13px; line-height:1.45; margin-top:4px; }
.qa-answer strong { color:var(--teal); }
.source-row { display:flex; flex-wrap:wrap; gap:13px; font-size:13px; color:var(--muted); margin-top:18px; }
.subscribe { background:linear-gradient(135deg,#286b35,#168bb2); color:#fff; padding:34px; border-radius:21px; box-shadow:0 14px 30px rgba(40,107,53,.17); }
.subscribe-kicker { color:var(--yellow); text-transform:uppercase; letter-spacing:.12em; font-size:11px; font-weight:700; margin:0 0 8px !important; }
.subscribe h3 { color:#fff; margin-bottom:7px; }
.subscribe p { color:rgba(255,255,255,.82); margin:0 0 16px; line-height:1.55; }
.subscribe .subscribe-soft { color:rgba(255,255,255,.72); font-size:13px; max-width:700px; }
.subscribe .button { background:#fff; color:var(--navy); }
.subscribe-link { position:relative; z-index:2; pointer-events:auto; }
.subscribe-url { margin:14px 0 0 !important; font-size:12px !important; overflow-wrap:anywhere; }
.subscribe-url a { color:#fff; text-decoration:underline; }
.share-link { margin-left:10px; background:transparent !important; color:#fff !important; border:1px solid rgba(255,255,255,.65); }
.block-heading, .question-text, .qa-question { overflow-wrap:break-word; }
.wide { grid-column:1 / -1; }
.fine-print { font-size:12px; color:var(--muted); margin-top:20px; line-height:1.5; }
.no-score { color:var(--muted); font-size:13px; }
.back-to-top { margin-top:25px; display:inline-flex; }

@media (max-width: 900px) {
  .hero { grid-template-columns:1fr; gap:28px; margin-top:18px; }
  .art { max-width:560px; margin:0 auto; order:-1; }
  .info-grid { grid-template-columns:1fr; }
  .test-layout { grid-template-columns:1fr; }
  .sidebar { position:static; padding:15px; }
  .block-nav { display:flex; overflow-x:auto; padding-bottom:2px; }
  .block-link { min-width:165px; }
  .results-head { display:block; }
  .results-actions { margin-top:16px; }
}

@media (max-width: 620px) {
  .topbar { padding:14px 16px 4px; display:block; }
  .brand-logo { width:160px; }
  .brand-context small { margin-top:4px; }
  .topbar > .helper { display:block; margin-top:8px; font-size:11px; }
  html, body, #app { max-width:100%; overflow-x:hidden; }
  .container { width:100%; min-width:0; padding:13px 17px 42px; }
  .hero { margin-top:14px; }
  h1 { font-size:39px; }
  .lede { font-size:16px; }
  .profile-card, .question-panel, .review-panel, .score-hero, .section-panel { padding:21px; border-radius:18px; }
  .saved-progress { padding:21px; border-radius:18px; }
  .question-panel { padding:14px; }
  .question-card { padding:16px; border-radius:15px; }
  .profile-options { grid-template-columns:1fr; }
  .test-toolbar { align-items:stretch; flex-direction:column; }
  .test-toolbar .helper { max-width:none; }
  .test-toolbar .button { width:100%; }
  .block-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; overflow:visible; margin-right:0; padding-right:0; }
  .block-link { min-width:0; }
  .question-text { font-size:27px; }
  .question-card .question-text { font-size:23px; }
  .option { grid-template-columns:30px minmax(0,1fr); padding:12px; }
  .option-letter { width:27px; height:27px; }
  .question-footer { align-items:stretch; flex-direction:column; }
  .question-footer .button { width:100%; }
  .pause-test-row { align-items:stretch; flex-direction:column; gap:8px; }
  .pause-test-button { width:100%; }
  .review-grid, .results-grid { grid-template-columns:1fr; }
  .results-actions .button { width:100%; }
  .saved-actions .button { width:100%; }
  .score-hero { grid-template-columns:1fr; text-align:center; justify-items:center; }
  .score-explain { text-align:left; }
  .subscribe { padding:23px; }
  .subscribe .button { width:100%; }
  .subscribe .share-link { margin-left:0; margin-top:10px; }
  .subscribe-url { overflow-wrap:anywhere; }
}

@media print {
  body { background:#fff; }
  .topbar, .results-actions, .back-to-top { display:none !important; }
  .container { padding:0; max-width:none; }
  .results-grid { display:block; }
  .section-panel, .score-hero, .subscribe { box-shadow:none; border:1px solid #ddd; margin:0 0 15px; break-inside:avoid; }
  .score-ring { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  a { color:#000; text-decoration:none; }
}