/* Learn MAIA — site.css
   Brand: Public Sans, flat solid fills only (NO gradients/glows), white-dominant, left-aligned. */

/* ---------- Fonts (self-hosted; no external CDN) ---------- */
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/PublicSans-Regular.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/PublicSans-Medium.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/PublicSans-Bold.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:900;font-display:swap;
  src:url("../fonts/PublicSans-Black.woff2") format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --blue:#205E8C; --cyan:#3DB8E6; --navy0:#0A1A2B; --navy1:#0F2C4A; --navy2:#123456;
  --white:#FFFFFF; --mist:#F4F7FA; --ink:#0E2033; --grey:#5B6B7A; --greyL:#9AAABB;
  --line:#E3E9EF;                 /* hairline on light */
  --line-navy:rgba(255,255,255,.14); /* hairline on navy */
  --maxw:1120px; --pad:24px;
  --font:"Public Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-weight:400;font-size:1.0625rem;line-height:1.62;
  color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
strong{font-weight:700}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* ---------- Type ---------- */
h1,h2,h3,h4{margin:0 0 .5em;font-weight:900;letter-spacing:-.02em;line-height:1.08;color:var(--ink)}
h1{font-size:clamp(2.3rem,5.2vw,3.9rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-top:0}
h3{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
p{margin:0 0 1.1em;max-width:66ch}
.lead{font-size:clamp(1.15rem,2vw,1.4rem);font-weight:500;color:var(--ink);line-height:1.5;max-width:60ch}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);
  margin:0 0 1rem}
.muted{color:var(--grey)}
.small{font-size:.9rem}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section{padding-block:clamp(48px,7vw,88px)}
.section-tight{padding-block:clamp(32px,4vw,52px)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* Navy full-bleed band (~20% of the page, per brand) */
.band-navy{background:var(--navy0);color:#DCE6F0}
.band-navy h1,.band-navy h2,.band-navy h3{color:#fff}
.band-navy .lead{color:#DCE6F0}
.band-navy .eyebrow{color:var(--cyan)}
.band-navy .muted{color:#BFCDDC}
.band-navy a{color:var(--cyan)}
.band-navy .rule{background:var(--line-navy)}
.band-mist{background:var(--mist)}

/* ---------- Header ---------- */
.site-header{border-bottom:1px solid var(--line);background:var(--white)}
.site-header .wrap{display:flex;align-items:center;gap:24px;min-height:66px}
.brand{display:flex;align-items:center;gap:11px;color:var(--blue);flex:0 0 auto}
.brand:hover{text-decoration:none}
.brand .mark{width:27px;height:26px;background:var(--blue);
  -webkit-mask:url(../img/mark.svg) center/contain no-repeat;mask:url(../img/mark.svg) center/contain no-repeat}
.brand .wordmark{width:128px;height:15px;background:var(--ink);
  -webkit-mask:url(../img/wordmark.svg) center/contain no-repeat;mask:url(../img/wordmark.svg) center/contain no-repeat}
.nav{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.nav a{color:var(--grey);font-weight:500;font-size:.95rem}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a[aria-current="page"]{color:var(--ink);font-weight:700}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(56px,9vw,110px)}
.hero h1{max-width:16ch}
.hero .lead{margin-top:.4em}
.kicker{color:var(--blue)}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-weight:700;font-size:1rem;padding:13px 22px;border:2px solid var(--blue);
  background:var(--blue);color:#fff;border-radius:2px;cursor:pointer;transition:background .12s,border-color .12s}
.btn:hover{background:#1a4f78;border-color:#1a4f78;text-decoration:none}
.btn-ghost{background:transparent;color:var(--blue)}
.btn-ghost:hover{background:var(--mist);color:var(--blue)}
.band-navy .btn{background:var(--cyan);border-color:var(--cyan);color:var(--navy0)}
.band-navy .btn:hover{background:#31a9d6;border-color:#31a9d6}
.band-navy .btn-ghost{background:transparent;color:#fff;border-color:var(--line-navy)}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.6em}

/* ---------- Grids / cards ---------- */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{border:1px solid var(--line);background:var(--white);padding:26px;border-radius:3px}
.band-navy .card{background:var(--navy1);border-color:var(--line-navy)}
.card h3{margin-bottom:.35em}
.card p:last-child{margin-bottom:0}
a.card{color:inherit;display:block;transition:border-color .12s}
a.card:hover{border-color:var(--blue);text-decoration:none}
a.card .go{color:var(--blue);font-weight:700;font-size:.92rem}

/* fear → answer block */
.qa{border-left:3px solid var(--cyan);padding:2px 0 2px 20px;margin:0 0 26px}
.qa .q{font-weight:700;color:var(--ink);font-size:1.15rem;margin:0 0 .3em}
.qa .a{color:var(--grey);margin:0}

/* ---------- Panels: neutral proof / rule (NO stack, NO engine names) ---------- */
.panel{border:1px solid var(--line);border-radius:3px;background:var(--mist);padding:18px 20px;
  font-family:var(--mono);font-size:.92rem;line-height:1.55;color:var(--ink);overflow-x:auto}
.panel .cap{font-family:var(--font);font-size:.78rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grey);margin:0 0 10px}
.band-navy .panel{background:var(--navy1);border-color:var(--line-navy);color:#DCE6F0}

/* ---------- Neural-net line motif (flat: hairline + square nodes) ---------- */
.motif{display:flex;align-items:center;gap:0;margin:6px 0 26px;height:9px}
.motif i{width:7px;height:7px;background:var(--cyan);transform:rotate(45deg);flex:0 0 auto}
.motif span{height:1px;background:var(--line);flex:1 1 auto}
.band-navy .motif span{background:var(--line-navy)}

/* ---------- Ledger verdict (a stamped decision, not a form alert) ---------- */
.verdict{font-family:var(--font);font-weight:600;padding:13px 18px;margin-top:16px;border-radius:3px;
  background:var(--white);border:1px solid var(--line);border-left:4px solid var(--greyL);color:var(--ink)}
.verdict.ok{border-left-color:#2E7D46;color:#1E5E34}
.verdict.reject{border-left-color:#B23A3A;color:#8E2B2B}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy0);color:var(--greyL);padding-block:40px;font-size:.92rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center}
.site-footer a{color:#C9D6E4}
.site-footer .brand .wordmark{background:#fff}
.site-footer .brand .mark{background:var(--cyan)}
.site-footer .nav a[aria-current="page"]{color:#fff} /* current link stays visible on navy */
.site-footer .foot-note{margin-left:auto;color:var(--greyL)}

/* ---------- Utility ---------- */
.stack>*+*{margin-top:1.1em}
/* center-narrow keeps the SAME left spine as .wrap; it only caps the text measure */
.center-narrow{max-width:1120px}
.center-narrow h2{max-width:24ch}
.center-narrow p,.center-narrow .lead{max-width:64ch}
ul.clean{list-style:none;padding:0;margin:0 0 1.1em}
ul.clean li{position:relative;padding-left:24px;margin-bottom:.6em;color:var(--grey)}
ul.clean li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:2px;background:var(--cyan)}
ul.no li{color:var(--grey)}
ul.no li::before{background:var(--greyL)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;position:fixed;background:#fff;padding:10px 16px;border:2px solid var(--blue);z-index:10}

@media (max-width:640px){
  .site-header .wrap{flex-wrap:wrap;min-height:0;padding-block:12px;gap:12px}
  .nav{margin-left:0;width:100%;gap:14px}
}

/* ---------- "Challenge the judgment" demo ---------- */
.jhead{margin-bottom:14px}
.jline{margin:.2em 0 1em;color:var(--ink)}
.entry{margin:2px 0 2px}
.entry .ln{display:flex;gap:12px;padding:4px 0}
.entry .acct{flex:1 1 auto}
.entry .amt{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
.jbtns{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.jbtn{font:inherit;font-weight:600;font-size:.94rem;background:var(--white);border:1px solid var(--line);
  border-radius:2px;padding:10px 15px;cursor:pointer;color:var(--ink);transition:border-color .12s,background .12s}
.jbtn:hover{border-color:var(--blue)}
.jbtn[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#fff}
.jpanel{min-height:118px}
.deriv-plain{list-style:none;margin:0;padding:0}
.deriv-plain li{position:relative;padding:5px 0 5px 22px;color:var(--ink);font-size:.98rem;line-height:1.5}
.deriv-plain li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:2px;background:var(--cyan)}
.evrow{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line)}
.evrow:last-child{border-bottom:0}
.evrow .claim{color:var(--ink);font-weight:500}
.evrow .src{color:var(--grey);font-family:var(--mono);font-size:.84rem}