/* ==========================================================================
   Welliox - Theme A "Clinical Trust"  (tokens from design/.../welliox_assessment/DESIGN.md)
   Mobile-first. Breakpoints: tablet >= 768px, desktop >= 1200px (nav switches at 900px).
   Logical properties are used throughout so a dir="rtl" (Arabic) build mirrors correctly.
   No inline styles are used anywhere (strict CSP), so every dynamic look is a class here.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  --c-primary: #1B3A6B;
  --c-primary-700: #162E56;
  --c-primary-500: #2A4E8C;
  --c-green: #1B7A43;
  --c-green-300: #58D68D;
  --c-mint: #E8F8F0;

  --bg: #F8FAFC;
  --bg-alt: #F1F5F9;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --border: #E2E8F0;
  --border-strong: #CBD5E1;
  --text: #0F172A;
  --muted: #475569;
  --link: #1B3A6B;
  --focus: #2A4E8C;

  --btn-bg: #1B3A6B;
  --btn-bg-hover: #162E56;
  --btn-fg: #FFFFFF;

  --band-4: #1B7A43;   /* Flourishing   */
  --band-3: #2D5B9E;   /* Steady        */
  --band-2: #9A5B00;   /* Stretched     */
  --band-1: #B42318;   /* Needs support */
  --band-4-bg: #E8F8F0; --band-3-bg: #E8EFFA; --band-2-bg: #FFF4DD; --band-1-bg: #FDECEA;

  --support-bg: #F2F7FF; --support-border: #C9DAF5;

  --shadow-card: 0 2px 8px -2px rgba(27,58,107,.04), 0 4px 16px -4px rgba(27,58,107,.06);
  --shadow-hover: 0 8px 24px -4px rgba(27,58,107,.10), 0 4px 12px -2px rgba(27,58,107,.05);

  --r-sm: .5rem; --r-md: 1rem; --r-lg: 1.5rem; --r-pill: 9999px;
  --gutter: 1rem;
  --maxw: 1280px;
  --header-h: 64px;

  --font-head: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --c-primary: #8FB0EE; --c-primary-700: #AFC6F2; --c-primary-500: #6C93DB;
  --c-green: #58D68D; --c-green-300: #7BDA96; --c-mint: #0F2E26;
  --bg: #0B1220; --bg-alt: #0F182B; --surface: #121A2B; --surface-2: #0F182B;
  --border: #22304D; --border-strong: #31456D;
  --text: #E6EDF7; --muted: #A6B5CB; --link: #9DBBF2; --focus: #9DBBF2;
  --btn-bg: #3A62A8; --btn-bg-hover: #4A74BC; --btn-fg: #FFFFFF;
  --band-4: #5EEAB4; --band-3: #8FB0EE; --band-2: #FBBF24; --band-1: #FCA5A5;
  --band-4-bg: #0F2E26; --band-3-bg: #14243F; --band-2-bg: #33270B; --band-1-bg: #3A1517;
  --support-bg: #12213A; --support-border: #2A4272;
  --shadow-card: 0 2px 8px -2px rgba(0,0,0,.4); --shadow-hover: 0 8px 24px -4px rgba(0,0,0,.5);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-primary: #8FB0EE; --c-primary-700: #AFC6F2; --c-primary-500: #6C93DB;
    --c-green: #58D68D; --c-green-300: #7BDA96; --c-mint: #0F2E26;
    --bg: #0B1220; --bg-alt: #0F182B; --surface: #121A2B; --surface-2: #0F182B;
    --border: #22304D; --border-strong: #31456D;
    --text: #E6EDF7; --muted: #A6B5CB; --link: #9DBBF2; --focus: #9DBBF2;
    --btn-bg: #3A62A8; --btn-bg-hover: #4A74BC; --btn-fg: #FFFFFF;
    --band-4: #5EEAB4; --band-3: #8FB0EE; --band-2: #FBBF24; --band-1: #FCA5A5;
    --band-4-bg: #0F2E26; --band-3-bg: #14243F; --band-2-bg: #33270B; --band-1-bg: #3A1517;
    --support-bg: #12213A; --support-border: #2A4272;
    --shadow-card: 0 2px 8px -2px rgba(0,0,0,.4); --shadow-hover: 0 8px 24px -4px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}

@media (min-width: 768px)  { :root { --gutter: 2rem; --header-h: 68px; } }
@media (min-width: 1200px) { :root { --gutter: 3rem; } }

/* ---- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1rem/1.6 var(--font-body);
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { flex: 1 0 auto; outline: none; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .5em; color: var(--text); }
h1 { font-size: clamp(2rem, 5vw + .5rem, 3rem); font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 2.4vw + .6rem, 2.25rem); font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--c-green-300); color: #00210d; }
small { font-size: .875rem; }
.muted { color: var(--muted); }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; inset-inline-start: 1rem; top: -4rem; z-index: 100; background: var(--btn-bg); color: var(--btn-fg); padding: .75rem 1rem; border-radius: var(--r-sm); text-decoration: none; }
.skip-link:focus { top: 1rem; }
.eyebrow { display: inline-block; font: 600 .8125rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--c-green); margin-bottom: .75rem; }
.lead { font-size: 1.125rem; color: var(--muted); max-width: 60ch; }

/* ---- 3. Buttons --------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .65rem 1.25rem;
  border-radius: var(--r-sm); border: 1.5px solid transparent; font: 600 .9375rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s; text-align: center; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--btn-bg-hover); box-shadow: var(--shadow-hover); }
.btn-accent { background: linear-gradient(135deg, #1E7A44, #23874D); color: #fff; }
.btn-accent:hover { box-shadow: var(--shadow-hover); filter: brightness(1.05); }
.btn-outline { background: transparent; color: var(--c-primary); border-color: var(--c-primary); }
.btn-outline:hover { background: var(--bg-alt); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--bg-alt); }
.btn-sm { min-height: 40px; padding: .5rem 1rem; font-size: .875rem; }
.btn-lg { min-height: 52px; padding: .85rem 1.75rem; font-size: 1.0625rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-sm); border: 0; background: transparent; color: var(--text); cursor: pointer; }
.icon-btn:hover { background: var(--bg-alt); }
.icon-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-sun { display: none; }
:root[data-theme="dark"] .ic-sun { display: block; } :root[data-theme="dark"] .ic-moon { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ic-sun { display: block; } :root:not([data-theme="light"]) .ic-moon { display: none; } }

/* ---- 4. Announcement + Header ------------------------------------------- */
.announce { background: var(--c-primary-700); color: #fff; font-size: .875rem; }
:root[data-theme="dark"] .announce { background: #162E56; }
.announce-inner { display: flex; flex-wrap: wrap; gap: .25rem .75rem; justify-content: center; padding-block: .5rem; text-align: center; }
.announce a { color: #fff; font-weight: 600; }

.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--c-primary); }
.brand-name { font: 800 1.5rem/1 var(--font-head); letter-spacing: -.02em; color: var(--c-primary); }
.brand-mark { display: block; }
.header-actions, .nav-actions { display: flex; align-items: center; gap: .5rem; }

.nav-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; color: var(--text); border-radius: var(--r-sm); cursor: pointer; }
.nav-toggle svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-toggle .nt-close { display: none; }
.nav-toggle[aria-expanded="true"] .nt-open { display: none; } .nav-toggle[aria-expanded="true"] .nt-close { display: inline; }
.js .nav-toggle { display: inline-grid; place-items: center; }

.site-nav { flex-basis: 100%; padding-bottom: .75rem; }
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }
.nav-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .25rem; }
.nav-link { display: block; padding: .75rem .5rem; border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-weight: 500; }
.nav-link:hover { background: var(--bg-alt); }
.nav-link.is-active { color: var(--c-primary); font-weight: 700; background: var(--bg-alt); }
.nav-actions { flex-wrap: wrap; }
.nav-actions .btn-primary { flex: 1; }

@media (min-width: 900px) {
  .header-inner { flex-wrap: nowrap; }
  .js .nav-toggle { display: none; }
  .site-nav, .js .site-nav { display: flex; flex-basis: auto; align-items: center; gap: 1.25rem; padding: 0; flex: 1; justify-content: flex-end; }
  .nav-list { display: flex; gap: .25rem; margin: 0; }
  .nav-link { padding: .5rem .75rem; }
  .nav-actions .btn-primary { flex: initial; }
}

/* ---- 5. Sections, cards, grids ------------------------------------------ */
.section { padding-block: 3.5rem; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 62ch; margin-bottom: 2rem; }
.section-head.center { margin-inline: auto; text-align: center; }
.grid { display: grid; gap: 1.25rem; }
.grid-areas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } .section { padding-block: 5rem; } }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1.5rem; box-shadow: var(--shadow-card); }
.card-link { text-decoration: none; color: inherit; display: block; transition: transform .15s, box-shadow .15s; }
.card-link:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.card h3 { margin-bottom: .35rem; }
.card p:last-child { margin-bottom: 0; }
.area-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 1rem; background: var(--c-mint); color: var(--c-green); }
.area-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: var(--r-pill); background: var(--c-mint); color: var(--c-green); font: 600 .8125rem/1.2 var(--font-body); }
.chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .chip { color: #7BDA96; }
.pill { display: inline-block; padding: .2rem .65rem; border-radius: var(--r-pill); font: 700 .75rem/1.4 var(--font-body); letter-spacing: .02em; background: var(--band-bg, var(--bg-alt)); color: var(--band, var(--text)); }

.band-4 { --band: var(--band-4); --band-bg: var(--band-4-bg); }
.band-3 { --band: var(--band-3); --band-bg: var(--band-3-bg); }
.band-2 { --band: var(--band-2); --band-bg: var(--band-2-bg); }
.band-1 { --band: var(--band-1); --band-bg: var(--band-1-bg); }

/* ---- 6. Hero ------------------------------------------------------------ */
.hero { padding-block: 2.5rem 3rem; background:
  radial-gradient(1200px 400px at 85% -10%, color-mix(in srgb, var(--c-green-300) 18%, transparent), transparent 60%),
  radial-gradient(900px 400px at -10% 0%, color-mix(in srgb, var(--c-primary-500) 14%, transparent), transparent 60%); }
.hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.hero h1 { margin-bottom: 1rem; }
.hero .lead { margin-bottom: 1.5rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-note { margin-top: 1rem; color: var(--muted); font-size: .875rem; }
@media (min-width: 900px) { .hero { padding-block: 4.5rem 5rem; } .hero-grid { grid-template-columns: 1.1fr .9fr; } }

.example-card { position: relative; padding: 1.5rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-hover); }
.example-tag { position: absolute; top: -.8rem; inset-inline-start: 1.25rem; background: var(--c-primary); color: #fff; padding: .25rem .75rem; border-radius: var(--r-pill); font: 700 .6875rem/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
:root[data-theme="dark"] .example-tag { background: #3A62A8; }
.example-body { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; }
.mini-rows { display: grid; gap: .6rem; }
.mini-row { display: grid; grid-template-columns: 5.2rem 1fr; gap: .6rem; align-items: center; font-size: .8125rem; color: var(--muted); }

/* ---- 7. Steps, FAQ ------------------------------------------------------ */
.steps { display: grid; gap: 1.25rem; counter-reset: step; padding: 0; list-style: none; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: 3.25rem; }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: 1.25rem; inset-inline-start: 1.5rem; width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: 50%; background: linear-gradient(135deg, #1E8449, #58D68D); color: #fff; font: 700 1rem/1 var(--font-head); }
.step { padding-inline: 1.5rem; }

.faq { display: grid; gap: .75rem; max-width: 820px; }
.faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.faq summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--c-green); }
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 1.25rem 1.1rem; color: var(--muted); }

.cta-band { background: linear-gradient(135deg, #162E56, #1B3A6B 55%, #1E6C4A); color: #fff; border-radius: var(--r-lg); padding: 2.25rem 1.5rem; text-align: center; }
.cta-band h2, .cta-band p { color: #fff; }
.cta-band p { opacity: .9; max-width: 56ch; margin-inline: auto; }
.cta-band .btn-light { background: #fff; color: #162E56; }
.cta-band .btn-light:hover { background: #E8F8F0; }

/* ---- 8. Footer ---------------------------------------------------------- */
.site-footer { margin-top: auto; background: var(--surface); border-top: 1px solid var(--border); padding-block: 2.5rem 1.5rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; }
.footer-brand { grid-column: 1 / -1; }
.footer-blurb { color: var(--muted); max-width: 42ch; margin-top: .75rem; font-size: .9375rem; }
.footer-title { font: 700 .8125rem/1 var(--font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .9rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.footer-col a { display: inline-block; padding: .4rem 0; color: var(--text); text-decoration: none; min-height: 32px; }
.footer-col a:hover { text-decoration: underline; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } .footer-brand { grid-column: auto; } }
.support-strip { margin-top: 2rem; padding: .9rem 1rem; border-radius: var(--r-sm); background: var(--support-bg); border: 1px solid var(--support-border); font-size: .875rem; color: var(--text); }
.footer-bottom { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; justify-content: space-between; color: var(--muted); }
.site-footer.is-focus { padding-block: 1rem; }
.site-footer.is-focus .footer-bottom { margin-top: 0; border-top: 0; padding-top: 0; }

/* ---- 9. Assessment wizard ---------------------------------------------- */
.layout-focus { background: var(--bg-alt); }
.check { padding-block: 1.5rem 3rem; }
.wizard { max-width: 820px; margin-inline: auto; }
.wizard-top { display: grid; gap: .6rem; margin-bottom: 1rem; }
.wizard-meta { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-size: .875rem; color: var(--muted); }
progress.bar { appearance: none; -webkit-appearance: none; width: 100%; height: 10px; border: 0; border-radius: var(--r-pill); background: var(--border); overflow: hidden; }
progress.bar::-webkit-progress-bar { background: var(--border); border-radius: var(--r-pill); }
progress.bar::-webkit-progress-value { background: linear-gradient(90deg, #1E8449, #58D68D); border-radius: var(--r-pill); transition: width .25s; }
progress.bar::-moz-progress-bar { background: linear-gradient(90deg, #1E8449, #58D68D); border-radius: var(--r-pill); }

.wizard-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 1.25rem; box-shadow: var(--shadow-card); }
@media (min-width: 768px) { .wizard-card { padding: 2rem 2.25rem; } }
.check-intro { margin-bottom: 1rem; }
.resume-note { display: none; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; background: var(--c-mint); color: var(--text); border-radius: var(--r-sm); padding: .6rem .9rem; margin-bottom: 1rem; font-size: .9rem; }
.resume-note.is-visible { display: flex; }
.link-btn { background: none; border: 0; padding: .25rem; font: inherit; color: var(--link); text-decoration: underline; cursor: pointer; min-height: 32px; }

fieldset.q { border: 0; margin: 0 0 2rem; padding: 0; min-width: 0; }
.js fieldset.q { display: none; margin: 0; }
.js fieldset.q.is-active { display: block; animation: slide-in .22s ease-out; }
@keyframes slide-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.q-domain { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: 1rem; }
.q-domain .chip { margin: 0; }
.q-domain small { color: var(--muted); }
.q-text { font: 600 clamp(1.25rem, 1.5vw + 1rem, 1.75rem)/1.35 var(--font-head); letter-spacing: -.01em; padding: 0; margin: 0 0 1.25rem; width: 100%; }

.answers { display: grid; gap: .6rem; }
.answer { position: relative; }
.answer input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.answer label { display: flex; align-items: center; gap: .85rem; min-height: 52px; padding: .75rem 1rem; border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface);
  font-weight: 500; cursor: pointer; transition: border-color .12s, background-color .12s, box-shadow .12s; }
.answer .num { flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: var(--bg-alt); color: var(--muted); font: 700 .875rem/1 var(--font-head); }
.answer input:hover + label { border-color: var(--c-primary-500); background: var(--bg-alt); }
.answer input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.answer input:checked + label { border-color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 9%, var(--surface)); box-shadow: inset 0 0 0 1px var(--c-primary); font-weight: 700; }
.answer input:checked + label .num { background: var(--btn-bg); color: #fff; }
@media (min-width: 700px) {
  .answers.scale { grid-template-columns: repeat(5, 1fr); gap: .5rem; }
  .answers.scale .answer label { flex-direction: column; justify-content: center; text-align: center; min-height: 96px; padding: .75rem .5rem; gap: .5rem; font-size: .9375rem; }
}

.ladder-intro { color: var(--muted); margin-bottom: 1.25rem; }
.ladder-anchor { display: flex; justify-content: space-between; gap: 1rem; font-size: .8125rem; color: var(--muted); margin: .25rem 0 .6rem; }
.answers.ladder { grid-template-columns: repeat(6, 1fr); gap: .4rem; }
.answers.ladder .answer label { justify-content: center; min-height: 52px; padding: .5rem 0; font: 700 1.125rem/1 var(--font-head); }
.answers.ladder .num { display: none; }
@media (min-width: 700px) { .answers.ladder { grid-template-columns: repeat(11, 1fr); } }

.wizard-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.js .wizard-nav-noscript { display: none; }
.noscript-submit { margin-top: 1.5rem; }
.js .noscript-submit { display: none; }
.js .final-step { display: none; }
.js .final-step.is-active { display: block; }
.final-step { text-align: center; padding: 1rem 0; }
.final-step .check-badge { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 1rem; background: var(--c-mint); color: var(--c-green); }
.final-step .check-badge svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.form-error { background: var(--band-1-bg); color: var(--band-1); padding: .85rem 1rem; border-radius: var(--r-sm); margin-bottom: 1rem; font-weight: 600; }

/* ---- 10. Results -------------------------------------------------------- */
.result { padding-block: 2rem 3.5rem; }
.result-hero { display: grid; gap: 1.5rem; align-items: center; padding: 1.5rem; }
@media (min-width: 768px) { .result-hero { grid-template-columns: auto 1fr; gap: 2.5rem; padding: 2rem 2.5rem; } }
.gauge { width: 200px; height: 200px; margin-inline: auto; display: block; }
.gauge-track { fill: none; stroke: var(--border); stroke-width: 12; }
.gauge-fg { fill: none; stroke: var(--band, var(--c-green)); stroke-width: 12; stroke-linecap: round; }
.gauge-num { font: 800 44px var(--font-head); fill: var(--text); text-anchor: middle; }
.gauge-sub { font: 600 11px var(--font-body); fill: var(--muted); text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; }
.result-band { font: 800 clamp(1.75rem, 3vw + .75rem, 2.5rem)/1.1 var(--font-head); color: var(--band); margin-bottom: .5rem; }
.result-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.result-section { margin-top: 1.5rem; }

.support-card { background: var(--support-bg); border: 1px solid var(--support-border); border-radius: var(--r-md); padding: 1.25rem 1.5rem; margin-top: 1.5rem; }
.support-card h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.support-card ul { margin: .5rem 0 .75rem; padding-inline-start: 1.25rem; }

.radar { width: 100%; max-width: 360px; height: auto; margin-inline: auto; display: block; }
.radar-grid { fill: none; stroke: var(--border); stroke-width: 1; }
.radar-axis { stroke: var(--border); stroke-width: 1; }
.radar-shape { fill: color-mix(in srgb, var(--c-green) 22%, transparent); stroke: var(--c-green); stroke-width: 2.5; stroke-linejoin: round; }
.radar-dot { fill: var(--surface); stroke: var(--c-green); stroke-width: 2.5; }
.radar-label { font: 600 12px var(--font-body); fill: var(--text); }
.radar-val { font: 700 11px var(--font-head); fill: var(--muted); }

.domain-list { display: grid; gap: 1rem; }
.domain-row { display: grid; gap: .35rem; }
.domain-row-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.domain-name { font-weight: 700; }
.domain-score { font: 800 1.25rem/1 var(--font-head); color: var(--band); }
.bar-svg { width: 100%; height: 10px; display: block; }
.bar-track { fill: var(--border); } .bar-fill { fill: var(--band, var(--c-green)); }
.domain-text { font-size: .9375rem; color: var(--muted); margin: 0; }

.ladder-svg { width: 100%; height: auto; display: block; }
.ladder-lab { font: 600 12px var(--font-body); fill: var(--text); }
.ladder-val { font: 800 16px var(--font-head); fill: var(--text); }
.ladder-bar-today { fill: var(--c-primary-500); } .ladder-bar-future { fill: var(--c-green); }
:root[data-theme="dark"] .ladder-bar-today { fill: #6C93DB; }

.sf-grid { display: grid; gap: 1.25rem; }
@media (min-width: 768px) { .sf-grid { grid-template-columns: 1fr 1fr; } }
.sf-card { border-inline-start: 6px solid var(--band, var(--c-green)); }
.sf-card .eyebrow { margin-bottom: .4rem; }
.action-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: act; }
.action-list li { position: relative; padding-inline-start: 3rem; counter-increment: act; }
.action-list li::before { content: counter(act); position: absolute; inset-inline-start: 0; top: 0; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--c-mint); color: var(--c-green); font: 800 1rem/1 var(--font-head); }
.action-list h3 { font-size: 1.0625rem; margin-bottom: .2rem; }
.action-list p { margin: 0; color: var(--muted); }
.fine-print { color: var(--muted); font-size: .875rem; margin-top: 2rem; max-width: 70ch; }
.toast { position: fixed; inset-inline: 1rem; bottom: 1rem; max-width: 420px; margin-inline: auto; background: var(--text); color: var(--bg); padding: .8rem 1rem; border-radius: var(--r-sm); text-align: center; z-index: 200; box-shadow: var(--shadow-hover); }
.toast[hidden] { display: none; }

/* ---- 11. Text pages ----------------------------------------------------- */
.page-head { padding-block: 2.5rem 1rem; }
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.5rem; margin-top: 2rem; }
.prose h3 { margin-top: 1.5rem; }
.prose ul { padding-inline-start: 1.25rem; }
.prose li { margin-bottom: .4rem; }
.draft-banner { background: var(--band-2-bg); color: var(--text); border: 1px solid var(--band-2); border-radius: var(--r-sm); padding: .75rem 1rem; margin-bottom: 1.5rem; font-size: .9375rem; }
.error-page { text-align: center; padding-block: 4rem; }

/* ---- 12. Motion, print -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@page { size: A4; margin: 12mm; }
@media print {
  :root { --bg: #fff; --surface: #fff; --bg-alt: #fff; --text: #000; --muted: #333; --border: #bbb; }
  .announce, .site-header, .site-footer, .result-actions, .skip-link, .toast, .no-print { display: none !important; }
  body { background: #fff; display: block; }
  .card, .support-card { box-shadow: none; break-inside: avoid; }
  .result { padding: 0; }
  a { color: #000; text-decoration: none; }
  .print-only { display: block !important; }
  .report-head.print-only { display: flex !important; }
  .report-foot-grid { display: grid !important; }
  .plan .card, .priority-list li, .week-list li, .sf-card, .result-hero, .support-card { break-inside: avoid; page-break-inside: avoid; }
  .grid-2, .sf-grid { display: block; }
  .grid-2 > *, .sf-grid > * { margin-bottom: .8rem; }
  .radar { max-width: 300px; }
  .gauge { width: 150px; height: 150px; }
  .band-4, .band-3, .band-2, .band-1, .gauge-fg, .radar-shape, .bar-fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.print-only { display: none; }

/* ---- 13. Additions: forms, notices, helpers ------------------------------ */
.wizard-nav { display: none; }
.js .wizard-nav { display: flex; }
.field { display: grid; gap: .35rem; margin-bottom: 1rem; max-width: 420px; }
.field label { font-weight: 600; font-size: .9375rem; }
.field-wide { max-width: 620px; }
.field textarea { min-height: 8rem; resize: vertical; }
.field input, .field select, .field textarea { min-height: 48px; padding: .6rem .85rem; border: 1.5px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font: inherit; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--c-primary); }
.notice { border-radius: var(--r-sm); padding: .9rem 1.1rem; margin-top: 1.25rem; }
.notice-ok { background: var(--band-4-bg); color: var(--text); border: 1px solid var(--band-4); }
.notice-warn { background: var(--band-2-bg); color: var(--text); border: 1px solid var(--band-2); }
.list-clean { list-style: none; margin: 0; display: grid; gap: .9rem; }
.mt-lg { margin-top: 2rem; }
.hero-note { font-size: .8125rem; color: var(--muted); margin: 1rem 0 0; }
.example-card .bar-svg { width: 100%; }

/* ---- 14. Example card layout fix ----------------------------------------- */
.example-body .gauge { width: 150px; height: 150px; }
.mini-rows { min-width: 0; }
.mini-row { grid-template-columns: 5.2rem minmax(60px, 1fr); }
.mini-row .bar-svg { min-width: 60px; width: 100%; }
@media (max-width: 519px) {
  .example-body { grid-template-columns: 1fr; justify-items: center; }
  .mini-rows { width: 100%; }
}

/* ---- 15. Improvement plan + printed report ------------------------------- */
.plan .section-head { margin-bottom: 1.25rem; }
.priority-list, .week-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.priority-list li { border-inline-start: 5px solid var(--band, var(--c-green)); padding-inline-start: .9rem; }
.priority-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.priority-list .domain-text { margin-top: .25rem; }
.week-list li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.week-tag { display: inline-block; min-width: 4.6rem; text-align: center; padding: .3rem .6rem; border-radius: var(--r-pill); background: var(--c-mint); color: var(--c-green); font: 700 .8125rem/1.3 var(--font-body); }
.week-list h4 { font: 700 1rem/1.3 var(--font-head); margin: 0 0 .2rem; }
.week-list p { margin: 0; color: var(--muted); font-size: .9375rem; }
.retake-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.retake-card h3 { margin-bottom: .25rem; }
.retake-card p { margin: 0; }

.report-head { align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 2px solid var(--c-primary); }
.report-head-meta { display: grid; text-align: end; font-size: .9rem; }
.report-foot { margin-top: 1.25rem; padding: 1rem 1.25rem; border: 1.5px solid var(--border-strong); border-radius: var(--r-md); break-inside: avoid; page-break-inside: avoid; }
.report-foot h2 { font-size: 1.25rem; margin-bottom: .5rem; }
.report-foot h3 { font-size: 1rem; margin: .75rem 0 .25rem; }
.report-foot p, .report-foot li { font-size: .875rem; margin-bottom: .4rem; }
.report-foot ul { margin: 0 0 .5rem; padding-inline-start: 1.1rem; }
.report-foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.report-disclaimer { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--border-strong); }

/* ---- 16. Saved / printed report (designed, with running header + footer) --- */
.print-running-header, .print-running-footer { display: none; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4; margin: 26mm 12mm 22mm; @bottom-right { content: "Page " counter(page) " of " counter(pages); font: 8pt Arial, sans-serif; color: #555; } }
  body { font-size: 10.5pt; line-height: 1.45; background: #fff; }
  .container { max-width: none; padding-inline: 0; }

  .print-running-header { position: fixed; top: -21mm; left: 0; right: 0; height: 15mm; display: flex !important; align-items: center; justify-content: space-between;
    border-bottom: 3px solid transparent; border-image: linear-gradient(90deg, #1B3A6B, #2D5B9E 55%, #58D68D) 1; }
  .print-running-header .brand-name { font-size: 18pt; color: #1B3A6B; }
  .print-running-meta { display: grid; text-align: right; font-size: 9pt; color: #333; }
  .print-running-footer { position: fixed; bottom: -18mm; left: 0; width: 74%; height: 13mm; display: flex !important; flex-direction: column; gap: .6mm; padding-top: 1.6mm;
    border-top: 1px solid #b8c2d0; font-size: 7.5pt; line-height: 1.3; color: #444; }

  .result { padding: 0; }
  .card, .support-card { border: 1px solid #cfd8e3; border-radius: 3mm; box-shadow: none; padding: 5mm; }
  .result-hero { background: #f3f7fc; border-color: #c4d3e6; }
  .result-section { margin-top: 5mm; }
  h2 { color: #1B3A6B; font-size: 14pt; margin-bottom: 2mm; }
  h3 { font-size: 11.5pt; }
  .eyebrow { color: #1E8449; }
  .gauge { width: 130px; height: 130px; }
  .gauge-num { font-size: 40px; }
  .result-band { font-size: 22pt; }
  .radar { max-width: 270px; }
  .plan .section-head { margin-bottom: 3mm; }
  .plan .lead { font-size: 10pt; }
  .week-tag { background: #e8f8f0; color: #14683a; }
  .report-foot { border: 1.5px solid #1B3A6B; background: #f7fafc; margin-top: 6mm; }
  .report-foot h2 { margin-top: 0; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }
  .no-print, .noprint { display: none !important; }
}

/* ---- 17. Blog ------------------------------------------------------------ */
.post-card { display: flex; flex-direction: column; gap: .5rem; }
.post-card .chip { align-self: flex-start; margin: 0; }
.post-card h3 { margin: 0; }
.post-card p { margin: 0; flex: 1; }
.post-meta { color: var(--muted); font-size: .8125rem; }
.breadcrumb { font-size: .875rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumb a { color: var(--muted); }
.article-head { margin-bottom: 1.5rem; }
.article-head .chip { margin-bottom: .75rem; }
.article-head h1 { font-size: clamp(1.75rem, 3.5vw + .5rem, 2.5rem); }
.article-body { max-width: 68ch; font-size: 1.0625rem; }
.article-body h2 { margin-top: 2rem; font-size: 1.5rem; }
.article-body p, .article-body li { line-height: 1.7; }
.article-cta { margin-top: 2.5rem; }
@media print { .article-cta, .breadcrumb { display: none; } }
.inline-form { display: inline; margin: 0; }
/* ---- 18. Opt-in checkbox ------------------------------------------------- */
.field-check { display: flex; gap: .75rem; align-items: flex-start; max-width: 620px; margin-bottom: 1rem; }
.field-check input { flex: none; width: 22px; height: 22px; margin-top: .15rem; accent-color: var(--c-primary); }
.field-check label { font-size: .9375rem; line-height: 1.5; }
/* ---- 19. Share panel ------------------------------------------------------ */
.share-panel h3 { margin-bottom: .75rem; }
.share-card-preview { display: block; width: 100%; max-width: 640px; height: auto; border-radius: var(--r-md); border: 1px solid var(--border); box-shadow: var(--shadow-card); margin-bottom: .5rem; }
.share-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.share-article { margin-top: 2rem; }
/* ---- 20. Ads (article pages only, when switched on) ---------------------- */
.ad-slot { margin: 2rem 0; text-align: center; }
.ad-label { margin: 0 0 .25rem; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media print { .ad-slot { display: none; } }
/* ---- 21. Article byline --------------------------------------------------- */
.byline { color: var(--muted); font-size: .9375rem; margin: .25rem 0 0; }
.byline a { color: var(--muted); }

/* admin statistics tables */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.data-table th, .data-table td { padding: .5rem .75rem; text-align: left; border-bottom: 1px solid var(--border); }
.data-table thead th { font-weight: 700; color: var(--text); background: var(--surface); }
.data-table tbody th { font-weight: 600; white-space: nowrap; }