/* Your Corner Advocate. Layout B2 (who-pays under the main button, example as message bubbles),
   picked 2026-11-13 in the design trial; tokens from drafts/2026-11-13-yla-campaign/design.md.
   Mobile-first; one accent; system body font. The only asset is the self-hosted display font (OFL, fonts/OFL.txt). */
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-next-700-latin.woff2) format("woff2")}
:root{--ink:#111;--bg:#fff;--accent:#0a4fd1;--soft:#f1f4fa;--fine:#333;--r:8px;
  --display:"Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;font:18px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--accent)}
a:focus-visible,.btn:focus-visible,.btn2:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* header: mark + wordmark on white */
.brand{max-width:38rem;margin:0 auto;padding:16px 1rem 8px;font:700 19px/1.3 var(--display)}
.brand a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:12px;min-height:44px}
.brand img{display:block;width:32px;height:32px}

main,footer{max-width:38rem;margin:0 auto;padding:0 1rem}
h1{font:700 28px/1.15 var(--display);margin:16px 0 16px}
h2{font-size:19px;line-height:1.3;margin:40px 0 8px}
.sub{margin:0 0 24px}
main p,main ul{margin:.6rem 0}
main ul{padding-left:1.25rem}

/* primary button, then the answer to "what's the catch" right under it */
.btn,.btn2{display:flex;align-items:center;justify-content:center;min-height:52px;width:100%;
  font-weight:700;font-size:18px;line-height:1.3;text-align:center;text-decoration:none;border-radius:var(--r)}
.btn{background:var(--accent);color:#fff;padding:12px 16px}
.btn2{background:var(--bg);color:var(--accent);border:2px solid var(--accent);padding:10px 8px;letter-spacing:-.01em}
.pays{background:var(--soft);border-radius:var(--r);padding:16px;margin-top:16px}
.pays h2{margin:0 0 8px}
.pays p{margin:0}

/* example as message bubbles */
.ex .me,.ex .gd{border-radius:var(--r);padding:12px 16px;margin:0 0 8px;max-width:19rem}
.ex .me{background:var(--accent);color:#fff;margin-left:auto}
.ex .gd{background:var(--soft)}

/* text block: number and its disclosure in one bordered box */
.sms{border:2px solid var(--ink);border-radius:var(--r);padding:16px;margin-top:40px}
.sms h2{margin:0 0 12px}
.sms p{margin:0}
.fine{font-size:14px;line-height:1.5;color:var(--fine);margin-top:16px!important}

/* how it works: plain ruled rows, no numbers */
ol{list-style:none;padding:0;margin:0;border-bottom:1px solid var(--ink)}
ol li{border-top:1px solid var(--ink);padding:16px 0;margin:0}
ul li{margin:.25rem 0}

footer{font-size:14px;line-height:1.5;color:var(--fine);padding-top:32px;padding-bottom:40px}
footer a{display:inline-block;padding:12px 0;margin-left:16px}
footer p{margin:.25rem 0}
footer p a{margin-left:0}
code{font-size:.85em;word-break:break-all}

/* desktop: the phone layout with more air */
@media (min-width:768px){
  .brand{padding-top:32px}
  h1{font-size:44px;margin-top:32px}
  .sub{font-size:19px}
}