/* ADA Site Monitor theme layer (10-20-2026). Loads after site.css on every rendered page and
   skins it in the "Answer" look, inverted to a white page: white paper and navy ink, Inter +
   JetBrains Mono, 4px radius, blue for actions, green for verified states, numbered question
   headings with the ASM pulse animation and a Sources rail on the right. Content is untouched.
   Every color pair below was checked against WCAG 2.1 AA contrast before shipping. */
[hidden]{display:none!important}
:root{
  --paper:#FFFFFF;--paper-2:#F4F7FB;--surface:#FFFFFF;--field:#FFFFFF;
  --ink:#0B2447;--ink-2:#44546C;--hair:#D8DFE9;--hair-strong:#0B2447;
  --accent:#1D6FE0;--accent-text:#1A5FC4;--accent-deep:#174FA3;--on-accent:#FFFFFF;
  --ok:#0E9F6E;--ok-text:#0B7A55;--hl:#FFE34D;
  --f:"Inter","Instrument Sans","Helvetica Neue",Arial,system-ui,sans-serif;
  --fm:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(0.23,1,0.32,1);
  /* site.css names mapped onto the theme */
  --navy:var(--ink);--navy2:var(--ink-2);--coral:var(--accent);--coral-dk:var(--accent-text);
  --cream:var(--paper);--line:var(--hair);--ink2:var(--ink-2);--muted:var(--ink-2);
  --r:4px;--h:var(--f);--b:var(--f);--maxw:1280px;
  color-scheme:light
}

html{scroll-behavior:smooth;scroll-padding-top:104px}
body{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--f);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:var(--accent-text)}
img{border-radius:4px}
h1,h2,h3,h4{font-family:var(--f);font-weight:700;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
h4{color:var(--ink)}
p,li,dd,small{text-wrap:pretty}
.lead{color:var(--ink-2);font-size:1.15rem;max-width:58ch}
.muted{color:var(--ink-2)}
.eyebrow,.kt-h,.rel h3,.soft,.snip .lbl,.tag,.pill,.legal-hero .eyebrow,.sc-head{letter-spacing:normal}
.eyebrow{font:500 12px/1.2 var(--fm);text-transform:uppercase;color:var(--accent-text)}
.price,.sn,.rail .n,.m-src .n{font-variant-numeric:tabular-nums}

/* yellow highlighter for the key items on every page */
.hl,mark.hl{background:var(--hl);color:var(--ink);padding:0 .18em;border-radius:3px;font-weight:600}

/* skip link */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:100;border-radius:0 0 4px 0}
.skip:focus{left:0}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:var(--paper);border-bottom:1px solid var(--hair)}
.nav .in{max-width:1280px;margin-inline:auto;padding-inline:max(16px,3vw);height:84px;display:flex;align-items:center;gap:24px}
.home{display:flex;align-items:center;gap:12px;min-height:44px;flex:none;text-decoration:none;color:var(--ink)}
.nav .logo,.foot .logo{display:block;overflow:visible}
.nav .logo{width:46px;height:46px;flex:none}
.wordmark{display:flex;align-items:baseline;gap:7px;font-family:var(--f);white-space:nowrap}
.wordmark .w1{font-weight:900;font-size:1.32rem;letter-spacing:.01em;color:var(--ink)}
.wordmark .w2{font-weight:600;font-size:1.32rem;letter-spacing:.02em;color:#15223B}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0;font-size:14.5px}
.nav ul a{color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;transition:color .15s ease}
.nav ul a[aria-current]{color:var(--ink);font-weight:600}
@media (hover:hover) and (pointer:fine){.nav ul a:hover{color:var(--ink)}}
.menu-btn{display:none;margin-left:auto;min-height:44px;min-width:44px;padding:0 10px;background:transparent;border:1px solid var(--hair);border-radius:4px;color:var(--ink);font:500 13px var(--fm);cursor:pointer}

/* ASM animated logo: blue pulse draws in from the left, green dot pops, ring keeps rippling */
.asm-mark .a-stroke{stroke:var(--ink)}
.asm-mark .pulse{stroke:var(--accent)}
.asm-mark .dot{fill:var(--ok)}
.asm-mark .ring{stroke:var(--ok)}
@media (prefers-reduced-motion:no-preference){
  .asm-mark .pulse{stroke-dasharray:714;stroke-dashoffset:714;animation:asm-draw 1.3s cubic-bezier(.25,.8,.3,1) .25s forwards}
  .asm-mark .dot{opacity:0;transform-origin:625px 505px;animation:asm-pop .45s cubic-bezier(.3,1.6,.5,1) 1.5s forwards}
  .asm-mark .ring{opacity:0;transform-origin:625px 505px;animation:asm-ripple 2.6s ease-out 2s infinite}
  @keyframes asm-draw{to{stroke-dashoffset:0}}
  @keyframes asm-pop{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
  @keyframes asm-ripple{0%{opacity:.8;transform:scale(.4)}70%{opacity:0;transform:scale(2.4)}100%{opacity:0;transform:scale(2.4)}}
  .home:hover .asm-mark .pulse,.home:focus-visible .asm-mark .pulse{animation:asm-draw2 1s cubic-bezier(.25,.8,.3,1) forwards}
  @keyframes asm-draw2{from{stroke-dashoffset:714}to{stroke-dashoffset:0}}
}
@media (prefers-reduced-motion:reduce){.asm-mark .pulse,.asm-mark .dot{opacity:1}.asm-mark .ring{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:4px;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);font:600 15px/1.2 var(--f);text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .16s var(--ease),background-color .2s ease}
.btn:active{transform:scale(.97)}
.btn:focus-visible{outline-color:var(--ink)}
.btn-coral{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-navy{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--hair)}
@media (hover:hover) and (pointer:fine){
  .btn:hover,.btn-coral:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
  .btn-navy:hover{background:#1A3560;border-color:#1A3560}
  .btn-ghost:hover{background:var(--surface);border-color:var(--ink)}
}
.nav .btn{display:inline-block;line-height:42px;flex:none}
.link{color:var(--accent-text)}

/* page frame: answer column left, Sources rail on the RIGHT */
.frame{max-width:1280px;margin-inline:auto;padding-inline:max(16px,3vw);display:grid;grid-template-columns:minmax(0,1fr) 248px;column-gap:clamp(32px,5vw,80px);align-items:start}
.frame.one{grid-template-columns:minmax(0,1fr)}
.frame > .body{min-width:0}
.side{min-width:0;padding-top:clamp(40px,6vw,72px);align-self:stretch}
.side > .side-mark{display:block;width:100%;max-width:190px;margin:0 0 28px auto;overflow:visible}
.lab{font:500 12px/1 var(--fm);text-transform:uppercase;color:var(--ink-2)}
.rail{min-width:0;position:sticky;top:calc(env(safe-area-inset-top,0px) + 108px);display:grid;gap:14px;padding-bottom:40px}
.rail ol,.m-src ol{list-style:none;margin:0;padding:0;display:grid}
.rail li,.m-src li{margin:0}
.rail li a,.m-src li a{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:baseline;padding:6px 0;color:var(--ink-2);text-decoration:none;font-size:13.5px;line-height:1.35;transition:color .15s ease}
.rail li a .n,.m-src li a .n{font:500 11.5px/1 var(--fm);color:var(--accent-text);border:1px solid var(--hair);border-radius:3px;padding:4px 0 3px;text-align:center;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.rail li a.on{color:var(--ink)}
.rail li a.on .n{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (hover:hover) and (pointer:fine){.rail li a:hover{color:var(--ink)}}
.rail .btn{justify-self:start;margin-top:6px;font-size:14px}
.m-src{display:none}

/* content: flatten the old full-width bands into one answer column */
.body .wrap{max-width:none;margin:0;padding-left:0;padding-right:0}
.body section.wrap,.body .band,.body .kt{padding-top:clamp(36px,5vw,60px);padding-bottom:clamp(36px,5vw,60px);background:transparent;border-top:1px solid var(--hair);color:inherit}
.body > section:first-child,.body > .ans-first{border-top:0}
.body .band.navy,.body .band.cta{background:transparent;color:var(--ink)}
.band.navy h2,.band.navy h3,.band.cta h2{color:var(--ink)}
.band.navy a{color:var(--accent-text)}
.band.cta .score-form label{color:var(--ink)}
.band .incl-grid>div,.band .tool{background:var(--paper-2)}
.band.navy .door{background:var(--surface);border-color:var(--hair);color:var(--ink)}
.band.navy .door h3{color:var(--ink)}.band.navy .door p{color:var(--ink-2)}
.promises dt{color:var(--ink);font-family:var(--f)}.promises dd{color:var(--ink-2)}
.timeline li{border-top-color:var(--hair)}
.timeline strong,.timeline.dark strong{color:var(--ink);font:500 12px/1.5 var(--fm);text-transform:uppercase}

/* hero */
.body .hero-sub{padding-top:clamp(40px,6vw,72px);gap:clamp(28px,4vw,56px)}
.body .hero-sub h1{font-size:clamp(2.1rem,3.6vw,3.2rem);line-height:1.05;margin-bottom:.45em}
.body .hero-sub.one h1{font-size:clamp(2.3rem,4.6vw,3.7rem);line-height:1.04}
.ans-head{display:flex;align-items:center;gap:10px;min-height:44px;border-bottom:1px solid var(--hair);margin:0 0 22px}
.ans-head .mark{width:26px;height:17px;display:block;flex:none;overflow:visible}
.ans-head .mark .p{stroke:var(--accent);fill:none}
.ans-head .mark .d{fill:var(--ok)}

/* numbered question headings with the ASM pulse animation */
.body h2{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15}
.body h2[id]{scroll-margin-top:104px}
.body h2.qn{display:flex;align-items:center;gap:14px;padding:14px 18px;min-height:64px;background:var(--field);border:1.5px solid var(--hair-strong);border-radius:4px;font-size:clamp(1.22rem,2.2vw,1.7rem);line-height:1.2;margin:0 0 24px;position:relative;overflow:hidden}
.body h2.qn::before{content:attr(data-n);content:attr(data-n) / "";flex:none;font-family:inherit;font-size:1em;font-weight:700;color:var(--accent-text);border:2px solid currentColor;border-radius:4px;padding:.14em .3em .08em;min-width:1.4em;text-align:center;line-height:1}
.qn-anim{flex:none;margin-left:auto;width:96px;height:30px;display:block;overflow:visible}
.qn-anim .qp{stroke:var(--accent);stroke-width:7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.qn-anim .qd{fill:var(--ok)}
.qn-anim .qr{stroke:var(--ok);stroke-width:3;fill:none}
@media (prefers-reduced-motion:no-preference){
  /* The blue pulse line LEADS and drags the title text out behind it. The line's left edge and
     the revealed-text edge are locked: both run the same duration/delay/easing, so the line sits
     exactly at the edge of the revealed text the whole way and never overlaps it. --qdrag (line
     travel = text-left to line-rest) and --qtw (text width, the initial hide) are measured per
     heading by asm-reveal.js. The line starts at the text's left edge; the text is fully hidden;
     as the line moves right the text reveals behind it; the line parks on the right, then the
     green dot pops and keeps a soft ripple. The badge pulses slowly while the line travels. The
     hidden/transform states only exist once asm-reveal.js tags a heading (.anim), so crawlers,
     no-JS and reduced-motion visitors always see the full heading. */
  h2.qn.anim .qn-anim{transform:translateX(calc(-1 * var(--qdrag,0px)))}
  h2.qn.anim .qt{clip-path:inset(-20% var(--qtw,100%) -20% 0)}
  .qn-anim .qd,.qn-anim .qr{opacity:0}
  h2.qn.go .qn-anim{animation:asm-qdrag 3s cubic-bezier(.33,.66,.3,1) .15s forwards}
  h2.qn.go .qt{animation:asm-qdragtext 3s cubic-bezier(.33,.66,.3,1) .15s forwards}
  h2.qn.go::before{animation:asm-npulse 1.5s ease-in-out .15s 2}
  h2.qn.go .qn-anim .qd{transform-origin:86px 15px;animation:asm-qpop .45s cubic-bezier(.3,1.6,.5,1) 3.25s forwards}
  h2.qn.go .qn-anim .qr{transform-origin:86px 15px;animation:asm-qripple 2.6s ease-out 3.7s infinite}
  @keyframes asm-qdrag{from{transform:translateX(calc(-1 * var(--qdrag,0px)))}to{transform:translateX(0)}}
  @keyframes asm-qdragtext{from{clip-path:inset(-20% var(--qtw,100%) -20% 0)}to{clip-path:inset(-20% calc(var(--qtw,100%) - var(--qdrag,0px)) -20% 0)}}
  @keyframes asm-npulse{
    0%{transform:scale(1);color:var(--accent-text);box-shadow:0 0 0 0 rgba(29,111,224,0)}
    50%{transform:scale(1.16);color:var(--accent);box-shadow:0 0 0 6px rgba(29,111,224,.18)}
    100%{transform:scale(1);color:var(--accent-text);box-shadow:0 0 0 0 rgba(29,111,224,0)}
  }
  @keyframes asm-qpop{0%{opacity:0;transform:scale(.2)}70%{opacity:1;transform:scale(1.3)}100%{opacity:1;transform:scale(1)}}
  @keyframes asm-qripple{0%{opacity:.8;transform:scale(.4)}70%{opacity:0;transform:scale(2.6)}100%{opacity:0;transform:scale(2.6)}}
}
@media (prefers-reduced-motion:reduce){.qn-anim .qd{opacity:1}.qn-anim .qr{display:none}}

/* cards, lists, tables */
.incl-grid>div,.plan,.q,.author,.eight li,.tool,.tapp .pane,.hero-card,.door,.cmp{background:var(--surface);border-color:var(--hair);border-radius:4px;box-shadow:none}
.incl-grid>div,.plan,.q,.author,.tool,.door{border:1px solid var(--hair)}
.plan.pop{border:2px solid var(--accent)}
.tag{font:500 11px/1 var(--fm);text-transform:uppercase;border-radius:3px;background:var(--accent)}
.price{font-family:var(--f);font-weight:700;color:var(--ink)}.price span{color:var(--ink-2);font-family:var(--f)}
.eight li::before{background:var(--ink);color:#fff;font:500 12px var(--fm);border-radius:3px}
.eight li.ok::before{background:var(--ok);color:#0B2447}.eight li.no::before{background:var(--accent);color:#fff}
.terms li::before{border-radius:3px;font:500 12px var(--fm);background:var(--accent)}
.ticks li::before{color:var(--ok-text)}
.ticks.x li::before{color:var(--accent-text)}
.cmp{border:1px solid var(--hair)}
.cmp th,.cmp td{border-bottom-color:var(--hair)}
.cmp thead th{background:var(--paper-2);color:var(--ink);font:500 12px/1.4 var(--fm);text-transform:uppercase}
.cmp tbody th{color:var(--ink)}
.tscroll{border-radius:4px}
.q button{color:var(--ink);font-family:var(--f)}
.q button::after{color:var(--accent-text)}
.q .a{color:var(--ink-2)}
.proof-list li{border-left-color:var(--accent)}
.sc-head{font:500 12px var(--fm);text-transform:uppercase;color:var(--ink-2)}.sc-head strong{color:var(--accent-text)}
.dial b{background:var(--surface);color:var(--ink)}
.door{color:var(--ink)}.door p{color:var(--ink-2)}
.asm-figure{margin:0 0 2.25rem}
.asm-figure img{width:100%;height:auto;display:block;border:1px solid var(--hair);border-radius:4px}
.serp-example figcaption{color:var(--ink-2)}
.body .asm-figure figcaption{color:var(--ink-2);font-size:.85rem;line-height:1.5;padding-top:10px;text-align:center}

/* key takeaways */
.body .kt{background:transparent}
.kt-h{font:500 12px/1 var(--fm);text-transform:uppercase;color:var(--accent-text)}
.kt-list li{color:var(--ink-2);border-left-color:var(--hair)}
.kt-list strong{color:var(--ink)}

/* forms */
.fld label{color:var(--ink-2)}
.fld .hint,.counter{color:var(--ink-2)}
.fld input,.fld select,.fld textarea,.row2 input{background:var(--field);color:var(--ink);border-color:var(--hair);border-radius:4px}
.fld textarea{font-family:var(--fm)}
.score-form input,.score-form.big input[type=email]{background:var(--field);color:var(--ink);border:1.5px solid var(--hair-strong);border-radius:4px}
.score-form input::placeholder{color:var(--ink-2)}
.score-form small{color:var(--ink-2)}
.pill.ok{background:#D9F3E7;color:#0B5A40}
.pill.warn{background:#FEF3C7;color:#92400E}
.pill.bad{background:#FFE4E6;color:#9F1239}
.s-out.good{background:#EDFAF4;color:#0B5A40;border-color:#BBE9D4}
.s-out.bad{background:#FFF1F2;color:#9F1239;border-color:#FECDD3}

/* legal pages */
.legal-hero{background:transparent;color:var(--ink);padding:clamp(40px,6vw,72px) 0 clamp(28px,4vw,48px);border-bottom:1px solid var(--hair)}
.legal-hero h1{color:var(--ink);font-size:clamp(2.1rem,3.6vw,3.2rem);line-height:1.05}
.legal-hero .eyebrow{color:var(--accent-text)}
.legal-hero .lead,.legal-hero .muted{color:var(--ink-2)}
.legal-toc strong{font:500 12px var(--fm);text-transform:uppercase;color:var(--ink-2)}
.legal-toc a{color:var(--ink-2)}
.legal-toc a:hover{color:var(--ink)}
.body .legal a{color:var(--accent-text)}

/* related pages */
.body .rel{background:transparent;border-top:1px solid var(--hair);padding:clamp(36px,5vw,52px) 0 clamp(28px,4vw,40px)}
.rel h2{font-size:1.3rem}
.rel h3{font:500 12px/1.3 var(--fm);text-transform:uppercase;color:var(--accent-text)}
.rel a{color:var(--ink-2);text-decoration-color:var(--hair)}
.rel a:hover{color:var(--ink);text-decoration-color:var(--accent)}

/* 'In detail' continuation subheading; not numbered, not in the rail */
h2.more,h3.more{font:600 12px/1 var(--fm);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:26px 0 10px;padding-top:12px;border-top:1px solid var(--hair)}

/* footer */
footer.foot{color:var(--ink-2);font-size:13px;background:var(--paper-2);padding-block:24px 28px;margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--hair)}
.foot .wrap{max-width:1280px;margin-inline:auto;padding-inline:max(16px,3vw)}
.foot h4{font:500 12px var(--fm);text-transform:uppercase;color:var(--ink);margin:0 0 6px}
.foot ul{list-style:none;margin:0;padding:0;display:grid}
.foot a{text-decoration:none;color:var(--ink-2);line-height:2.2}
.foot a:hover{color:var(--ink);text-decoration:underline}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid var(--hair);padding-top:24px}
.foot .brand-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:var(--ink)}
.foot .logo{width:40px;height:40px}
.foot .wordmark .w1,.foot .wordmark .w2{font-size:1.05rem}
.foot p,.foot address{max-width:40ch;line-height:1.6;margin:0}
.foot address{font-style:normal;margin-top:12px;display:grid}
.foot .legal{max-width:none;margin-top:28px;padding-top:16px;border-top:1px solid var(--hair);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12.5px}
.foot .legal nav{display:flex;gap:14px;flex-wrap:wrap}
.foot .legal a{line-height:1.6}

/* responsive */
@media (max-width:1180px){.nav ul{gap:16px;font-size:14px}}
@media (max-width:1080px){
  .frame{grid-template-columns:minmax(0,1fr)}
  .side{display:none}
  .m-src{display:block;border:1px solid var(--hair);border-radius:4px;background:var(--surface);margin:0 0 8px}
  .m-src summary{list-style:none;cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font:500 12px var(--fm);text-transform:uppercase;color:var(--ink-2)}
  .m-src summary::-webkit-details-marker{display:none}
  .m-src summary::after{content:"+";font-size:18px;color:var(--accent-text)}
  .m-src[open] summary::after{content:"\2212"}
  .m-src ol{padding:0 16px 10px}
  .m-src li a{min-height:44px;align-items:center}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-grid > div:first-child{grid-column:1 / -1}
  .foot-grid > div:first-child p{max-width:none}
}
@media (max-width:980px){
  .nav ul{display:none}
  .menu-btn{display:inline-flex;align-items:center}
  .nav .btn{margin-left:0}
  .nav.open ul{display:grid;position:absolute;top:84px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--hair);padding:8px max(16px,3vw) 18px;gap:0;font-size:17px}
  .nav.open ul a{display:flex;color:var(--ink)}
}
@media (max-width:860px){
  .foot a,.foot .legal a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;line-height:1.25}
}
@media (max-width:640px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid > div:nth-child(2){grid-column:1 / -1}
  .nav .in{gap:10px;height:72px}
  .nav .logo{width:38px;height:38px}
  .nav.open ul{top:72px}
  .nav .btn{padding:0 12px;font-size:14px}
  .body .btn{white-space:normal;text-align:center;line-height:1.25;padding-top:10px;padding-bottom:10px}
  .body h2.qn{padding:12px 14px;gap:10px}
  .qn-anim{width:64px;height:22px}
}
@media (max-width:520px){.nav .btn .long{display:none}}
@media (max-width:479px){.wordmark .w2{display:none}}
@media (max-width:360px){.wordmark .w1{font-size:1.1rem}.nav .btn{padding:0 10px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}