@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/fonts/poppins-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/fonts/poppins-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/fonts/poppins-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}

:root{
  --cream:#fdfbf5;--paper:#fff;--ink:#1a1633;--muted:#5a5673;--line:#ebe6d8;--line2:#d9d3c2;
  --purple:#412a9c;--purple-d:#2f1d7a;--teal:#1b8fb0;--lav:#efecfb;--focus:#0b6fd6;
  --grad:linear-gradient(90deg,#3f2c9a,#1b8fb0);
  --ok:#0a7a5c;--ok-bg:#d9f5ec;--warn:#8a5200;--warn-bg:#fff1d3;--bad:#a01d4a;--bad-bg:#fde6ee;--info:#1d4f9c;--info-bg:#e2eefe;--green:#166a45;--green-bg:#dff5e8;
  --font:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --lh:1.6;--gap:1;
  --purple-l:var(--lav);--bg:var(--cream);--pink:#d02e72;--blue:#0099b5;--yellow:#fab73c;--mint:#40e0b0;
  --radius:20px;--shadow:0 1px 2px #1a163310,0 8px 24px #1a16330d;
}
html[data-font="easy"]{--font:"Atkinson Hyperlegible",system-ui,sans-serif}
html[data-space="wide"]{--lh:1.95}
html[data-space="wide"] body{letter-spacing:.02em;word-spacing:.08em}
html[data-contrast="high"]{--cream:#fff;--paper:#fff;--ink:#000;--muted:#1a1a1a;--line:#000;--line2:#000;--purple:#2a1a8c;--teal:#00566e;--lav:#fff;--grad:linear-gradient(90deg,#2a1a8c,#2a1a8c);--focus:#b30000}
html[data-contrast="high"] .card,html[data-contrast="high"] .bubble,html[data-contrast="high"] .panel{border:2px solid #000}
html[data-contrast="high"] a{text-decoration:underline}
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

*{box-sizing:border-box}
html{scroll-padding-top:150px}
body{margin:0;font:400 1rem/var(--lh) var(--font);color:var(--ink);background:var(--cream);min-height:100vh;display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font);font-weight:700;line-height:1.15;margin:0 0 .5em;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:var(--purple);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--ink);padding:10px 16px;border-radius:10px;z-index:99;border:2px solid var(--purple)}.skip:focus{left:8px}
[hidden]{display:none!important}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
svg.i{width:1.15em;height:1.15em;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.2em}

/* header */
.vh{background:var(--paper);box-shadow:0 1px 0 var(--line),0 6px 18px #1a16330a;position:sticky;top:0;z-index:30}
.vh .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:88px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.brand svg.logo{width:54px;height:54px;flex:none}
.brand .t{display:flex;flex-direction:column;line-height:1.1}
.brand .n{font-weight:700;font-size:1.55rem;display:flex;align-items:center;gap:10px;letter-spacing:-.02em}
.badge-v{font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--purple);background:var(--lav);border:1px solid #cfc8f2;border-radius:8px;padding:2px 9px}
.brand .tag{font-size:.68rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.nav{display:flex;align-items:center;gap:8px}
.nav a,.nav button{font:600 1.05rem var(--font);color:var(--muted);text-decoration:none;padding:10px 20px;border-radius:14px;border:1px solid transparent;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;min-height:48px}
.nav a[aria-current=page]{background:var(--lav);color:var(--purple);border-color:#e0dbf7}
.nav a:hover,.nav button:hover{color:var(--purple)}
.hbtns{display:flex;gap:10px;align-items:center}
.pillbtn{font:600 .95rem var(--font);color:var(--ink);background:#f4f2ee;border:1px solid var(--line2);border-radius:14px;padding:10px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;text-decoration:none;min-height:48px}
.pillbtn:hover{background:#ece9e2}
@media (max-width:900px){.vh .wrap{justify-content:center}.nav{order:3;width:100%;justify-content:center}}

/* accessibility panel */
.a11y{position:fixed;right:16px;top:140px;z-index:60;width:min(360px,calc(100vw - 32px));background:var(--paper);border:2px solid var(--purple);border-radius:18px;box-shadow:0 18px 50px #1a163344;padding:20px}
.a11y h2{font-size:1.15rem;display:flex;justify-content:space-between;align-items:center}
.a11y fieldset{border:0;padding:0;margin:14px 0 0}
.a11y legend{font-weight:600;font-size:.9rem;margin-bottom:6px;padding:0}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{flex:1 1 auto;font:500 .95rem var(--font);padding:10px 12px;border-radius:12px;border:2px solid var(--line2);background:#fff;color:var(--ink);cursor:pointer;min-height:44px}
.seg button[aria-pressed=true]{background:var(--purple);border-color:var(--purple);color:#fff}
html[data-contrast="high"] .seg button{border-color:#000}
.a11y .foot{display:flex;justify-content:space-between;gap:8px;margin-top:16px}

/* buttons */
.btn{font:600 1rem var(--font);border:2px solid transparent;border-radius:14px;padding:12px 22px;min-height:50px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.btn.primary{background:var(--grad);color:#fff}
.btn.primary:hover{box-shadow:0 8px 20px #3d2b9b40;transform:translateY(-1px)}
.btn.line{background:#fff;color:var(--ink);border-color:var(--line2)}
.btn.line:hover{border-color:var(--purple);color:var(--purple)}
.btn.soft{background:var(--lav);color:var(--purple)}
.btn.danger{background:#fff;color:var(--bad);border-color:var(--bad)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn.sm{padding:8px 14px;min-height:42px;font-size:.92rem}
html[data-contrast="high"] .btn.primary{background:#2a1a8c}


.btn.accent{background:var(--yellow);color:var(--ink)}
.btn.accent:hover{background:#ffc766;transform:translateY(-1px)}
.btn.line:hover,.btn.soft:hover{box-shadow:0 6px 16px #1a163322}
.btn:active{transform:none;box-shadow:none}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-contrast="high"] .grad{color:var(--purple);background:none}
select,input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],textarea{font:inherit;padding:12px 14px;border:2px solid var(--line2);border-radius:12px;background:#fff;color:var(--ink);min-height:48px;max-width:100%}
input:focus,textarea:focus,select:focus{border-color:var(--purple)}
.notice{background:var(--warn-bg);border:1px solid #ecc66f;border-radius:14px;padding:12px 16px;font-size:.95rem;margin:0 0 18px}
.notice.info{background:var(--info-bg);border-color:#b7d1f7}
.notice.bad{background:var(--bad-bg);border-color:#efb2c6}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.err{color:var(--bad);font-weight:600}

/* footer (the same on every page) */
.vf{background:var(--paper);border-top:1px solid var(--line);margin-top:56px;color:var(--muted);font-size:.92rem}
.vf .wrap{padding-top:28px;padding-bottom:28px;display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
.vf a{color:var(--ink)}

/* CLEAR Voices tab bar (switches between the apps, on every page) */
.hubbar{background:#1a1633;color:#fff;position:sticky;top:0;z-index:40}
.hubbar .hb-in{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;flex-wrap:wrap}
.hubbar .hb-brand{color:#fff;font-weight:700;font-size:.95rem;letter-spacing:.01em;padding:10px 0}
.hubbar .hb-tabs{display:flex;gap:4px;flex-wrap:wrap}
.hubbar .hb-tabs a{color:#cfc9f5;text-decoration:none;font-weight:600;font-size:.92rem;padding:11px 14px;border-bottom:3px solid transparent;min-height:44px;display:inline-flex;align-items:center}
.hubbar .hb-tabs a:hover{color:#fff}
.hubbar .hb-tabs a[aria-current=page]{color:#fff;border-bottom-color:#41e0b2}
.hubbar a:focus-visible{outline:3px solid #fff;outline-offset:-3px}
@media (max-width:700px){.hubbar{position:static}.a11y{top:60px}}
@media print{.hubbar{display:none!important}}

/* phones: compact header for every page */
@media (max-width:700px){
  .vh{position:static}
  .vh .wrap{min-height:0;gap:10px;justify-content:space-between;padding-top:10px;padding-bottom:10px}
  .brand svg.logo{width:42px;height:42px}.brand .n{font-size:1.3rem}.brand .tag{display:none}
  .nav{order:3;width:100%;justify-content:flex-start;gap:4px}
  .nav a{padding:8px 12px;min-height:44px;font-size:.95rem}
  .hbtns .pillbtn{padding:8px 12px;font-size:.88rem;min-height:44px}
}

/* the header sits under the tab bar only when there is one */
body:has(.hubbar) .vh{top:44px}
@media (max-width:700px){body:has(.hubbar) .vh{top:auto}}

/* the same landing hero on the hub, Voice and Awareness Card */
.hero{text-align:center;padding:72px 0 40px}
.hero h1{font-size:clamp(2.3rem,6vw,4.4rem);font-weight:700;line-height:1.02;letter-spacing:-.035em;max-width:16em;margin:0 auto .5em}
.hero p.lead{font-size:clamp(1.05rem,2.2vw,1.35rem);color:var(--muted);max-width:44em;margin:0 auto}
.herocta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:28px 0 0}
.goodto{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 44px;margin:44px 0 24px;color:var(--muted);text-align:center}
.goodto p{margin:0}.goodto strong{color:var(--ink)}
@media (max-width:700px){.hero{padding:36px 0 20px}.goodto{flex-direction:column;gap:6px}}

/* phones: keep the tab bar to one row and the header compact */
@media (max-width:700px){
  .hubbar .hb-brand{display:none}
  .hubbar .hb-in{justify-content:center;padding:0 8px}
  .hubbar .hb-tabs{width:100%;justify-content:space-around}
  .brand{gap:10px}
  .brand svg.logo{width:38px;height:38px}
  .brand .n{font-size:1.15rem;gap:8px}
  .hbtns .pillbtn{padding:6px 10px;font-size:.85rem}
}

/* phones: "About Us" moves from the header to the footer so the header stays on one line */
.sm-only{display:none}
@media (max-width:700px){.sm-only{display:inline}.vh .nav{display:none}}