/* Large type, strong contrast, big targets, one column by default. No web fonts: nothing to download. */
:root{--ink:#111827;--muted:#374151;--line:#9ca3af;--soft:#f3f4f6;--blue:#0b3d91;--blue-d:#072a66;--green:#14622f;--green-bg:#e7f6ec;--red:#a4161a;--red-bg:#fdecec;--amber:#7a4b00;--amber-bg:#fff4d6;--info-bg:#e8f0fd}
*{box-sizing:border-box}
html{font-size:20px;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:1rem/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow-wrap:break-word}
a{color:var(--blue);text-decoration:underline;text-underline-offset:.15em}
a:hover{color:var(--blue-d)}
:focus-visible{outline:4px solid #f59e0b;outline-offset:2px}
h1{font-size:2rem;line-height:1.2;margin:0 0 .6rem}
h2{font-size:1.45rem;line-height:1.25;margin:0 0 .6rem}
h3{font-size:1.15rem;margin:1rem 0 .3rem}
p{margin:0 0 1rem}
ul,ol{padding-left:1.4rem;margin:0 0 1rem}
li{margin-bottom:.4rem}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:.5rem 1rem;z-index:9}
.wrap{max-width:60rem;margin:0 auto;padding:0 1rem}
.top{border-bottom:3px solid var(--blue);background:#fff}
.top .wrap{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-top:.7rem;padding-bottom:.7rem}
.logo{font-weight:800;font-size:1.5rem;color:var(--blue);text-decoration:none}
.nav{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;align-items:center}
.nav a{padding:.45rem 0;font-weight:600}
.nav a.btn{padding:.35rem .9rem;color:#fff}
.nav a.on{color:var(--ink);text-decoration:none;border-bottom:3px solid var(--ink)}
.menu{flex:1 1 auto;min-width:0;margin:0}
.menu .nav{justify-content:flex-end}
.menu summary{display:none}
.side{background:var(--soft);border-bottom:1px solid var(--line)}
.side .nav{padding:.3rem 0}
main{padding:1.5rem 0 2.5rem;min-height:55vh}
.lead{font-size:1.2rem}
.muted{color:var(--muted)}
.hero{background:var(--info-bg);padding:2rem 0}
.hero h1{font-size:2.3rem}
.card{border:2px solid var(--line);border-radius:10px;padding:1.1rem;margin:0 0 1.2rem;background:#fff}
.grid{display:grid;gap:1rem;grid-template-columns:1fr;margin-bottom:1.2rem}
.grid>.card{margin:0}
.stat b{display:block;font-size:2rem;line-height:1.2}
.btn,button{display:inline-block;min-height:3rem;padding:.6rem 1.3rem;font:inherit;font-weight:700;border-radius:8px;border:2px solid var(--blue);background:#fff;color:var(--blue);cursor:pointer;text-decoration:none;text-align:center}
.btn:hover,button:hover{background:var(--info-bg);color:var(--blue-d)}
.primary{background:var(--blue);color:#fff}
.primary:hover{background:var(--blue-d);color:#fff}
.danger{border-color:var(--red);color:var(--red)}
.danger:hover{background:var(--red-bg);color:var(--red)}
.small{min-height:2.4rem;padding:.25rem .8rem}
button:disabled{opacity:.55;cursor:not-allowed}
.row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
.between{justify-content:space-between}
label{display:block;font-weight:700;margin:.8rem 0 .25rem}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{width:100%;min-height:3rem;padding:.55rem .7rem;font:inherit;color:inherit;background:#fff;border:2px solid #4b5563;border-radius:8px}
textarea{min-height:12rem}
textarea.raw{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;white-space:pre}
.hint{color:var(--muted);margin:.2rem 0 .5rem}
.check{display:grid;grid-template-columns:auto 1fr;gap:.8rem;font-weight:400;border:2px solid var(--line);border-radius:10px;padding:.9rem;margin:0 0 .8rem;cursor:pointer}
.check input,.tick{width:1.6rem;height:1.6rem;margin:.1rem 0 0;accent-color:var(--blue)}
.check b{overflow-wrap:anywhere}
.note{border-left:6px solid var(--blue);background:var(--info-bg);padding:.8rem 1rem;margin:0 0 1rem;border-radius:0 8px 8px 0}
.note.warn{border-color:var(--amber);background:var(--amber-bg)}
.note.bad{border-color:var(--red);background:var(--red-bg)}
.note.ok{border-color:var(--green);background:var(--green-bg)}
.pill{display:inline-block;padding:.05rem .6rem;border-radius:99px;font-weight:700;font-size:.85rem;border:2px solid currentColor;white-space:nowrap}
.p-ok{color:var(--green)}.p-bad{color:var(--red)}.p-warn{color:var(--amber)}.p-info{color:var(--blue)}.p-mute{color:var(--muted)}
.steps{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;list-style:none;padding:0;margin:0 0 1.2rem;color:var(--muted)}
.steps .on{color:var(--ink);font-weight:800;text-decoration:underline}
dl{margin:0 0 1rem}
dt{font-weight:700}
dd{margin:0 0 .6rem;overflow-wrap:anywhere}
pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--soft);padding:.8rem;border-radius:8px;font:.8rem/1.5 ui-monospace,Menlo,Consolas,monospace;max-height:26rem;overflow:auto;margin:.5rem 0 1rem}
details{margin:0 0 1rem}
summary{cursor:pointer;font-weight:700;padding:.5rem 0}
.scroll{overflow-x:auto;margin-bottom:1rem}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--soft)}
tbody a{font-weight:600}
.num{text-align:right;white-space:nowrap}
.bars{display:flex;align-items:flex-end;gap:2px;height:7rem;border-bottom:2px solid var(--ink);margin-bottom:.3rem}
.bars i{flex:1;background:var(--blue);min-height:1px;display:block}
.bars i.s{background:var(--line)}
.packs{display:grid;gap:1rem;grid-template-columns:1fr;margin-bottom:1.2rem}
.pack{border:2px solid var(--line);border-radius:10px;padding:1.1rem;display:flex;flex-direction:column;gap:.3rem}
.pack.best{border:4px solid var(--blue)}
.price{font-size:2.2rem;font-weight:800;line-height:1.1}
.pack form{margin-top:auto;padding-top:.6rem}
.pack button{width:100%}
.foot{background:var(--soft);border-top:3px solid var(--blue);padding:1.5rem 0}
.foot nav{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin-bottom:1rem}
.pay{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-bottom:.8rem}
.pay svg{display:block;height:2.2rem;width:auto;border-radius:5px}
.trap{position:absolute;left:-9999px;height:1px;overflow:hidden}
.js-only{display:none}
.js .js-only{display:inline-block}
@media(min-width:42rem){.grid{grid-template-columns:repeat(2,1fr)}.packs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:60rem){.packs{grid-template-columns:repeat(4,1fr)}.grid.g3{grid-template-columns:repeat(3,1fr)}}
@media(max-width:41.99rem){html{font-size:19px}h1,.hero h1{font-size:1.75rem}.btn,button{width:100%}.row .small{width:auto}}
.answer{border:3px solid var(--blue);border-radius:10px;padding:1rem 1.1rem;margin:0 0 1.2rem;font-size:1.1rem}
.answer p{margin:0}
.toc{background:var(--soft);border-radius:10px;padding:1rem 1.1rem;margin:0 0 1.2rem}
.toc h2{font-size:1.1rem;margin:0 0 .4rem}
.toc ul{margin:0}
article h2{margin-top:1.6rem}
/* Phones and tablets: logo on the left, Menu button on the right, links drop down below the header.
   The links stay hidden until app.js has closed the menu, so they never flash open while a page loads. */
@media(max-width:74.99rem){
.top .wrap{position:relative}
.menu{flex:0 0 auto}
.menu summary{display:flex;align-items:center;gap:.45rem;min-height:3rem;padding:.4rem 1rem;border:2px solid var(--blue);border-radius:8px;color:var(--blue);list-style:none;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu summary::before{content:"\2630"}
.menu[open] summary::before{content:"\2715"}
.menu:not(.ready) .nav{display:none}
.menu .nav{position:absolute;left:0;right:0;top:100%;z-index:20;background:#fff;border-bottom:3px solid var(--blue);box-shadow:0 8px 16px rgba(0,0,0,.2);flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:.3rem 1rem 1rem}
.menu .nav a{padding:.7rem .2rem;border-bottom:1px solid var(--line)}
.menu .nav a.on{border-bottom:1px solid var(--line);font-weight:800}
.menu .nav a.btn{margin-top:.8rem;padding:.6rem 1rem;border-bottom:0}
.menu .nav form{margin-top:.8rem}
.menu .nav form button{width:100%}
}
@media(max-width:25rem){.top .wrap{gap:.5rem}.logo{font-size:1.25rem}.menu summary{padding:.4rem .7rem}}
@media print{.top,.side,.foot{display:none}}