/* Parent Dyslexia Screener (dyslexia-screener.html). Landing + in-page app. */
:root { --scr-rust:#A65A2A; --scr-cream:#F0E9DC; --scr-teal-deep:#16797C; }

body.scr-page { background:var(--navy); }
.scr-shell { max-width:1180px; margin:0 auto 32px; background:#fff; border-radius:12px; box-shadow:0 10px 40px rgba(16,21,39,.18); overflow:hidden; }
.scr-pad { padding:56px; }
@media (max-width:760px){ .scr-pad { padding:36px 20px; } .scr-shell { margin:0 10px 16px; border-radius:10px; } }

.scr-top { display:flex; align-items:center; justify-content:space-between; gap:14px; max-width:1180px; margin:0 auto; padding:22px 56px; background:var(--navy); }
.scr-top a.brand { display:flex; align-items:center; gap:12px; color:#fff; font-family:var(--font-head); font-weight:700; font-size:18px; }
.scr-top img { height:46px; width:auto; }
#scr-exit { display:none; background:transparent; color:#fff; border:0; font:700 14px var(--font-body); cursor:pointer; padding:8px 4px; text-decoration:underline; }
body.scr-active #scr-exit { display:inline-block; }
@media (max-width:760px){ .scr-top { padding:16px 20px; } .scr-top a.brand span { display:none; } }

/* ---- landing -------------------------------------------------------- */
body.scr-active .scr-landing { display:none; }
.scr-eyebrow { display:inline-block; font-size:14px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--gold-darker); }
.scr-hero { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.scr-hero h1 { font-family:var(--font-head); font-weight:700; font-size:50px; line-height:1.08; color:var(--navy); margin:12px 0 18px; }
.scr-hero p.sub { font-size:19px; line-height:1.65; color:#3d4250; margin-bottom:26px; }
.scr-hero img { width:100%; height:auto; border-radius:12px; box-shadow:0 16px 44px rgba(16,21,39,.22); display:block; }
.scr-facts { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; padding:0; list-style:none; }
.scr-facts li { background:var(--scr-cream); color:var(--navy); font-weight:700; font-size:14px; padding:9px 14px; border-radius:99px; }
@media (max-width:900px){ .scr-hero { grid-template-columns:1fr; gap:28px; } .scr-hero h1 { font-size:36px; } }

.scr-start { display:inline-flex; align-items:center; justify-content:center; background:var(--gold); color:var(--navy); font:700 16px var(--font-body); letter-spacing:.06em; text-transform:uppercase; padding:18px 38px; border:0; border-radius:12px; cursor:pointer; box-shadow:none; transition:transform .12s, background .2s; }
.scr-start:hover { background:var(--gold-dark); transform:translateY(-2px); }

.scr-notdx { background:var(--gold); color:var(--navy); }
.scr-notdx .scr-pad { display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:center; padding-top:40px; padding-bottom:40px; }
.scr-notdx .big { font-family:var(--font-head); font-weight:700; font-size:30px; line-height:1.15; max-width:340px; }
.scr-notdx p { font-size:17.5px; line-height:1.65; }
@media (max-width:760px){ .scr-notdx .scr-pad { grid-template-columns:1fr; gap:12px; } .scr-notdx .big { font-size:25px; } }

.scr-sec-h { font-family:var(--font-head); font-weight:700; font-size:34px; line-height:1.15; color:var(--navy); margin:8px 0 14px; }
.scr-sec-lead { font-size:17.5px; line-height:1.7; color:#3d4250; max-width:760px; margin-bottom:30px; }
.scr-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.scr-card { border-radius:14px; overflow:hidden; color:#fff; display:flex; flex-direction:column; }
.scr-card-media { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:#fff; }
.scr-card-body { padding:22px 24px 26px; }
.scr-card.c1 { background:var(--scr-teal-deep); } .scr-card.c2 { background:var(--navy); } .scr-card.c3 { background:var(--scr-rust); }
.scr-card h3 { font-family:var(--font-head); font-weight:700; font-size:21px; margin:0 0 8px; color:#fff; }
.scr-card p { font-size:15.5px; line-height:1.6; color:rgba(255,255,255,.9); }
@media (max-width:900px){ .scr-cards { grid-template-columns:1fr; } }

.scr-band-light { background:var(--scr-cream); }
.scr-how { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; }
.scr-how ol { list-style:none; padding:0; margin:0; counter-reset:how; }
.scr-how ol li { counter-increment:how; display:grid; grid-template-columns:52px 1fr; gap:14px; margin-bottom:22px; }
.scr-how ol li::before { content:counter(how); width:52px; height:52px; border-radius:50%; background:var(--navy); color:var(--gold); font:700 22px var(--font-head); display:flex; align-items:center; justify-content:center; }
.scr-how ol strong { display:block; font-family:var(--font-head); font-size:19px; color:var(--navy); margin-bottom:4px; }
.scr-how ol span { font-size:16px; line-height:1.6; color:#3d4250; }
.scr-need { background:#fff; border-radius:16px; padding:28px; box-shadow:0 8px 26px rgba(16,21,39,.08); }
.scr-need h3 { font-family:var(--font-head); font-weight:700; font-size:21px; color:var(--navy); margin-bottom:12px; }
.scr-need ul { list-style:none; padding:0; margin:0; }
.scr-need li { position:relative; padding-left:24px; margin-bottom:10px; font-size:16px; line-height:1.55; color:#3d4250; }
.scr-need li::before { content:''; position:absolute; left:0; top:8px; width:10px; height:10px; border-radius:50%; background:var(--gold); }
@media (max-width:900px){ .scr-how { grid-template-columns:1fr; } }

.scr-who { display:grid; grid-template-columns:200px 1fr; gap:36px; align-items:center; }
.scr-who img { width:200px; height:200px; object-fit:cover; border-radius:50%; box-shadow:0 10px 30px rgba(16,21,39,.18); }
.scr-who p { font-size:17px; line-height:1.7; color:#3d4250; }
@media (max-width:760px){ .scr-who { grid-template-columns:1fr; } .scr-who img { width:150px; height:150px; } }

.scr-faq .faq-item { background:var(--light-bg); border-radius:14px; padding:22px 24px; margin-bottom:14px; }
.scr-faq .faq-q { font-family:var(--font-head); font-weight:700; font-size:19px; color:var(--navy); margin-bottom:8px; }
.scr-faq .faq-a { font-size:16.5px; line-height:1.7; color:#3d4250; }

.scr-final { background:var(--navy); color:#fff; text-align:center; }
.scr-final h2 { font-family:var(--font-head); font-weight:700; font-size:36px; color:#fff; margin-bottom:12px; }
.scr-final p { font-size:17.5px; color:rgba(255,255,255,.85); margin:0 auto 26px; max-width:620px; line-height:1.6; }

.scr-foot { text-align:center; padding:28px 20px; font-size:13px; color:#8a909b; }
.scr-foot a { color:inherit; text-decoration:underline; }

/* ---- app -------------------------------------------------------------- */
#scr-app { display:none; }
#scr-app.on { display:block; }
.scr-progress { background:var(--scr-cream); padding:18px 56px; }
.scr-progress-label { font-weight:700; font-size:14px; color:var(--navy); letter-spacing:.04em; margin-bottom:8px; display:block; }
.scr-progress-track { height:12px; border-radius:99px; background:rgba(16,21,39,.12); overflow:hidden; }
#scr-progress-fill { display:block; height:100%; width:0; background:var(--gold); border-radius:99px; transition:width .35s; }
@media (max-width:760px){ .scr-progress { padding:14px 20px; } }

#scr-stage { max-width:820px; margin:0 auto; padding:44px 56px 56px; }
@media (max-width:760px){ #scr-stage { padding:28px 20px 40px; } }
#scr-stage h2 { font-family:var(--font-head); font-weight:700; font-size:34px; line-height:1.15; color:var(--navy); margin:8px 0 12px; outline:none; }
#scr-stage .scr-vh { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); margin:0; }
.scr-kicker { display:inline-block; font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-darker); }
.scr-lead { font-size:17.5px; line-height:1.65; color:#3d4250; margin-bottom:26px; }
.scr-count { font-size:15px; font-weight:700; color:var(--scr-teal-deep); margin:6px 0 16px; }

.scr-q { background:var(--light-bg); border-radius:14px; padding:20px 22px; margin-bottom:14px; }
.scr-q-text { font-size:17px; line-height:1.5; color:var(--navy); font-weight:700; margin-bottom:12px; display:flex; gap:12px; }
.scr-q-num { flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--navy); color:var(--gold); font-size:14px; display:flex; align-items:center; justify-content:center; }
.scr-q-help { font-size:15px; line-height:1.6; color:#5b616d; margin:-4px 0 12px; }
.scr-chips { display:flex; flex-wrap:wrap; gap:10px; }
.scr-chip-btn { background:#fff; color:var(--navy); border:0; border-radius:10px; padding:12px 18px; font:700 15px var(--font-body); cursor:pointer; box-shadow:none; transition:background .15s, transform .1s; }
.scr-chip-btn:hover { transform:translateY(-1px); }
.scr-chip-btn.on { background:var(--scr-teal-deep); color:#fff; }
.scr-chip-btn:focus-visible, .scr-next:focus-visible, .scr-back:focus-visible, .scr-alt:focus-visible, .scr-score2 button:focus-visible, .scr-score3 button:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }

.scr-nav { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-top:28px; }
.scr-nav-stack { flex-direction:column; align-items:stretch; }
.scr-next { background:var(--gold); color:var(--navy); border:0; border-radius:12px; padding:16px 28px; font:700 16px var(--font-body); cursor:pointer; box-shadow:none; }
.scr-next:hover { background:var(--gold-dark); }
.scr-next[disabled] { background:#e3e5e9; color:#8a909b; box-shadow:none; cursor:not-allowed; }
.scr-back { background:transparent; border:0; color:var(--navy); font:700 15px var(--font-body); padding:12px 4px; cursor:pointer; text-decoration:underline; }
.scr-alt { background:var(--navy); color:#fff; border:0; border-radius:12px; padding:15px 24px; font:700 15px var(--font-body); cursor:pointer; }
.scr-alt:hover { background:#1e2a4a; }
.scr-skip { display:block; margin:22px auto 0; background:transparent; border:0; color:#6b717c; font:500 14px var(--font-body); text-decoration:underline; cursor:pointer; }

.scr-tips { list-style:none; padding:0; margin:0 0 6px; }
.scr-tips li { background:var(--light-bg); border-radius:12px; padding:16px 18px 16px 48px; margin-bottom:10px; position:relative; font-size:16px; line-height:1.6; color:#3d4250; }
.scr-tips li::before { content:''; position:absolute; left:20px; top:23px; width:12px; height:12px; border-radius:50%; background:var(--gold); }
.scr-tips strong { color:var(--navy); }

.scr-say { background:var(--scr-teal-deep); color:#fff; border-radius:16px; padding:24px 26px; margin-bottom:18px; }
.scr-say-tag { display:inline-block; background:var(--gold); color:var(--navy); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; padding:5px 10px; border-radius:6px; }
.scr-say-text { font-family:var(--font-head); font-weight:700; font-size:24px; line-height:1.35; margin:12px 0 8px; }
.scr-say .scr-q-help { color:rgba(255,255,255,.85); margin:4px 0 8px; }
.scr-answer { font-size:16px; color:inherit; margin:8px 0 0; }
.scr-answer strong { color:var(--gold); }
.scr-answer-c { text-align:center; color:#3d4250; margin:-6px 0 18px; }
.scr-answer-c strong { color:var(--scr-teal-deep); }
.scr-hear { margin-top:14px; background:rgba(255,255,255,.16); color:#fff; border:0; border-radius:10px; padding:10px 14px; font:700 14px var(--font-body); cursor:pointer; }
.scr-hear[disabled] { opacity:.6; }

.scr-score2, .scr-score3 { display:grid; gap:12px; margin-top:8px; }
.scr-score2 { grid-template-columns:1fr 1fr; }
.scr-score3 { grid-template-columns:1fr 1fr 1fr; }
@media (max-width:600px){ .scr-score3 { grid-template-columns:1fr; } }
.scr-score2 button, .scr-score3 button { border:0; border-radius:14px; padding:18px 14px; font:700 16px var(--font-body); cursor:pointer; line-height:1.35; }
.scr-yes { background:var(--scr-teal-deep); color:#fff; }
.scr-slow { background:var(--gold); color:var(--navy); }
.scr-no { background:var(--navy); color:#fff; }
.scr-score2 kbd, .scr-score3 kbd { display:inline-block; margin-left:6px; font:700 12px var(--font-body); background:rgba(255,255,255,.22); border-radius:5px; padding:2px 6px; }
.scr-slow kbd { background:rgba(16,21,39,.12); }
@media (hover:none){ .scr-score2 kbd, .scr-score3 kbd { display:none; } }

.scr-word { background:var(--scr-cream); color:var(--navy); border-radius:18px; text-align:center; font-family:'Roboto', Arial, sans-serif; font-weight:500; font-size:clamp(56px, 13vw, 96px); letter-spacing:.03em; padding:48px 16px; margin:4px 0 22px; user-select:none; }

.scr-mode { margin-bottom:18px; }
.scr-mode .scr-q-help { margin:10px 0 0; }
.scr-ran-row { display:flex; gap:12px; margin:16px 0 12px; flex-wrap:wrap; }
.scr-ran-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:14px 10px; background:var(--scr-cream); padding:22px; border-radius:16px; justify-items:center; }
.scr-ran-dot { width:46px; height:46px; border-radius:50%; display:inline-block; box-shadow:0 2px 4px rgba(0,0,0,.18); }
.scr-say .scr-ran-dot { box-shadow:0 0 0 3px rgba(255,255,255,.85); }
.scr-ran-digit { font:700 40px/1 'Roboto', Arial, sans-serif; color:var(--navy); width:46px; text-align:center; }
.scr-say .scr-ran-digit { color:#fff; }
.scr-timer { text-align:center; font:700 22px var(--font-body); color:var(--scr-teal-deep); margin-bottom:14px; }
#scr-clock { font-size:34px; font-variant-numeric:tabular-nums; }

/* results */
.scr-disclaimer { background:var(--navy); color:#fff; border-radius:14px; padding:18px 22px; font-size:15.5px; line-height:1.6; margin-bottom:22px; }
.scr-disclaimer strong { color:var(--gold); }
.scr-disclaimer-end { margin-top:30px; }
.scr-band { border-radius:18px; padding:30px 28px; margin-bottom:30px; color:#fff; }
.scr-band.band-0 { background:var(--scr-teal-deep); }
.scr-band.band-1 { background:var(--gold); color:var(--navy); }
.scr-band.band-2 { background:var(--scr-rust); }
.scr-band h2 { color:inherit !important; font-size:32px !important; }
.scr-band p { font-size:17.5px; line-height:1.6; }
.scr-band-eyebrow { font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.9; }
.scr-band-partial { margin-top:10px; font-weight:700; }
.scr-h3 { font-family:var(--font-head); font-weight:700; font-size:24px; color:var(--navy); margin:30px 0 14px; }
.scr-areas { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:700px){ .scr-areas { grid-template-columns:1fr; } }
.scr-area { background:var(--light-bg); border-radius:14px; padding:18px 20px; }
.scr-area-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.scr-area-name { font-weight:700; color:var(--navy); font-size:16px; }
.scr-lvl { font-size:13px; font-weight:700; padding:5px 10px; border-radius:99px; white-space:nowrap; }
.scr-meter { height:12px; border-radius:99px; background:rgba(16,21,39,.10); overflow:hidden; margin-bottom:10px; }
.scr-meter span { display:block; height:100%; border-radius:99px; }
.lvl-0 .scr-lvl, .lvl-0 .scr-meter span { background:var(--scr-teal-deep); color:#fff; }
.lvl-1 .scr-lvl, .lvl-1 .scr-meter span { background:var(--gold); color:var(--navy); }
.lvl-2 .scr-lvl, .lvl-2 .scr-meter span { background:var(--scr-rust); color:#fff; }
.lvl-x .scr-lvl { background:#e3e5e9; color:#5b616d; }
.scr-area-note { font-size:14.5px; line-height:1.55; color:#5b616d; }
.scr-area-detail { color:var(--navy); font-weight:700; }
.scr-resume { background:var(--scr-cream); border-radius:14px; padding:20px 22px; margin-top:16px; }
.scr-resume p { margin-bottom:12px; color:var(--navy); font-size:16px; line-height:1.55; }
.scr-insights { list-style:none; padding:0; margin:0; }
.scr-insights li { background:var(--scr-cream); border-radius:12px; padding:14px 18px 14px 44px; margin-bottom:10px; position:relative; font-size:16px; line-height:1.6; color:#3d4250; }
.scr-insights li::before { content:''; position:absolute; left:18px; top:21px; width:11px; height:11px; border-radius:50%; background:var(--gold); }
.scr-steps { list-style:none; padding:0; margin:0; }
.scr-steps li { display:grid; grid-template-columns:64px 1fr; gap:14px; background:var(--light-bg); border-radius:14px; padding:18px 20px; margin-bottom:12px; }
.scr-step-num { font-family:var(--font-head); font-weight:700; font-size:34px; color:var(--gold-darker); line-height:1; }
.scr-steps strong { display:block; font-family:var(--font-head); font-size:18.5px; color:var(--navy); margin-bottom:4px; }
.scr-steps p { font-size:15.5px; line-height:1.6; color:#3d4250; }
.scr-letter textarea { width:100%; border:0; border-radius:12px; background:var(--scr-cream); padding:18px; font:15px/1.6 var(--font-body); color:var(--dark); resize:vertical; margin-bottom:12px; }
.scr-letter textarea:focus { outline:3px solid var(--gold); }
.scr-letter-actions { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
#scr-copied { font-weight:700; color:var(--scr-teal-deep); }

.scr-keep { display:grid; grid-template-columns:1.3fr 1fr; gap:16px; margin-top:34px; }
@media (max-width:760px){ .scr-keep { grid-template-columns:1fr; } }
.scr-keep-email { background:var(--gold); color:var(--navy); border-radius:16px; padding:26px; }
.scr-keep-print { background:var(--scr-cream); border-radius:16px; padding:26px; }
.scr-keep h3 { font-family:var(--font-head); font-weight:700; font-size:21px; margin-bottom:8px; color:var(--navy); }
.scr-keep p { font-size:15.5px; line-height:1.6; margin-bottom:14px; }
.scr-keep-print .scr-back { display:block; margin-top:10px; }
.scr-email { display:flex; flex-direction:column; gap:10px; }
.scr-email input { border:0; border-radius:10px; padding:15px 16px; font:15px var(--font-body); box-shadow:0 2px 6px rgba(16,21,39,.08); }
.scr-email input:focus { outline:2px solid var(--navy); }
.scr-email button { border:0; border-radius:10px; padding:16px; background:var(--navy); color:#fff; font:700 15px var(--font-body); letter-spacing:.06em; text-transform:uppercase; cursor:pointer; }
.scr-fine { font-size:13px !important; line-height:1.55 !important; margin:12px 0 0 !important; color:#4a3610; }
.scr-fine a { color:inherit; text-decoration:underline; }

.scr-cta { display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center; background:var(--navy); color:#fff; border-radius:18px; padding:28px; margin-top:30px; }
.scr-cta h3 { font-family:var(--font-head); font-weight:700; font-size:22px; color:#fff; margin:6px 0; }
.scr-cta p { color:rgba(255,255,255,.85); font-size:15.5px; }
.scr-cta-btn { background:var(--gold); color:var(--navy); font-weight:700; border-radius:12px; padding:15px 22px; white-space:nowrap; }
@media (max-width:700px){ .scr-cta { grid-template-columns:1fr; } }

/* print: results only */
@media print {
  body.scr-page { background:#fff; }
  .scr-shell { box-shadow:none; margin:0; border-radius:0; }
  .scr-top, .scr-progress, .scr-landing, .no-print, .scr-resume, .scr-letter-actions, .scr-foot, #ata-a11y-root { display:none !important; }
  #scr-stage { padding:0; max-width:none; }
  .scr-band, .scr-disclaimer, .scr-lvl, .scr-meter span { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .scr-letter textarea { height:auto; min-height:420px; }
  .scr-area, .scr-steps li { break-inside:avoid; }
}