/* Three Statement, public pages.
   Colours and type are the app's own (site/app/css/app.css), so the pages and the
   product read as one thing: accent #1b2a4a, Bebas Neue for display, IBM Plex Sans
   for reading, black period bands, the gray year-end shade. Light only here, and
   every colour is written out rather than inherited from the browser.
   Scale follows the VA Disability Hack site: 17px body, 15px small print,
   44px tap targets in the nav, buttons at least 48px tall. */
:root{
  --ground:#e7e9eb; --surface:#ffffff; --surface-2:#f4f5f6; --panel:#eaecee;
  --ink:#141618; --ink-2:#51565b; --ink-3:#868b91;
  --line:#cfd3d7; --line-2:#e2e5e8; --line-strong:#b4b9be;
  --band:#0e1012; --band-ink:#ffffff;
  --shade:#c9cdd1; --shade-ink:#141618;
  --accent:#1b2a4a; --accent-ink:#ffffff; --accent-soft:#dfe5f0; --accent-line:#8e9cba;
  /* The app's navy reads at 11.7:1 against the page ground and 12.9:1 on white,
     both well past the 4.5:1 bar, so links use it as it is. */
  --accent-text:#1b2a4a;
  --bad:#c03a2b;
  --shadow:0 10px 30px rgba(20,22,24,.09);
  --display:"Bebas Neue","Oswald","Arial Narrow",Impact,sans-serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
p{margin:0}
a{color:var(--accent-text)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* skip link: off screen until it takes focus */
.skip{position:absolute;left:-9999px;top:0;z-index:100}
.skip:focus{left:12px;top:12px;display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border-radius:8px;background:var(--ink);color:var(--surface);text-decoration:none;font-weight:600}

/* type */
h1,h2,h3{font-family:var(--display);margin:0;line-height:1;letter-spacing:.012em;text-wrap:balance;color:var(--ink);font-weight:400}
h1{font-size:clamp(44px,8.2vw,86px);line-height:.94}
h2{font-size:clamp(32px,4.4vw,50px)}
h3{font-size:25px}
.eyebrow{font-family:var(--display);font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:0 0 8px;line-height:1.2}
.lede{font-size:19px;color:var(--ink);max-width:64ch;margin-top:14px}
.small{font-size:15px;color:var(--ink-2)}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);white-space:nowrap}
.brand svg{flex:none;display:block;color:var(--accent)}
.brand .name{font-family:var(--display);font-size:27px;line-height:1;letter-spacing:.045em}
.brand .name b{font-weight:400;color:var(--accent)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;align-items:center}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 11px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:500;font-size:16px}
.nav a:hover{background:var(--surface)}
.nav a.btn{font-size:15px;min-height:44px;padding:9px 15px;color:var(--accent-ink)}
.nav a.btn:hover{background:var(--accent)}
@media (max-width:700px){
  .nav{flex-wrap:wrap;row-gap:2px;gap:10px;padding:8px 0}
  .nav ul li.hide-sm{display:none}
  .nav a{padding:8px 9px;font-size:15px}
  .brand .name{font-size:23px}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:18px;min-height:48px;padding:12px 24px;border:1px solid var(--accent);border-radius:8px;text-decoration:none;background:var(--accent);color:var(--accent-ink);cursor:pointer;text-align:center}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{filter:none;border-color:var(--ink-3)}
.btn.wide{width:100%}

/* sections */
.sect{padding:64px 0 0}
.sect-head{position:relative;padding-top:18px}
.sect-head::before{content:"";position:absolute;left:0;top:0;width:64px;height:4px;background:var(--accent)}
@media (max-width:700px){.sect{padding-top:52px}}

/* hero: headline, two sentences, one button, one line. Nothing else above the fold. */
.hero{padding:44px 0 8px;max-width:940px}
.hero::before{content:"";display:block;width:72px;height:5px;background:var(--accent);margin-bottom:22px}
.hero h1{margin-bottom:20px}
.hero .lede{font-size:19px;color:var(--ink);max-width:58ch;margin:0 0 24px}
.hero .btn{margin:0 0 14px}
.hero .price{font-size:17px;color:var(--ink-2);margin:0;max-width:48ch}
@media (max-width:700px){
  .hero{padding:20px 0 24px}
  /* .fold is the landing hero only. It owns the whole first screen, so nothing
     from the next section can appear above the fold. 100lvh is the tall state,
     the one with the browser bar hidden, which is the worst case for this rule.
     92px is a little less than the nav, so the model section starts just past
     the fold either way. */
  .hero.fold{min-height:calc(100vh - 92px);min-height:calc(100lvh - 92px);display:flex;flex-direction:column;align-items:flex-start}
  .hero::before{margin-bottom:16px}
  .hero h1{font-size:41px;margin-bottom:18px}
  .hero .lede{font-size:17px;margin-bottom:20px}
  .hero .btn{width:100%}
}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:22px 24px}
.card h3{margin-bottom:8px}
.card p{color:var(--ink-2);font-size:17px}
.card p + p{margin-top:10px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px}
@media (max-width:900px){.grid3,.grid2{grid-template-columns:1fr}}

/* the three panes: statement chrome, no invented figures */
.link3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:30px}
@media (max-width:860px){.link3{grid-template-columns:1fr}}
.pane{background:var(--surface);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pane .pband{background:var(--band);color:var(--band-ink);font-family:var(--display);font-size:19px;letter-spacing:.08em;text-align:center;padding:8px 10px;line-height:1.15}
.pane ul{list-style:none;margin:0;padding:10px 16px 14px;font-size:16px;color:var(--ink-2)}
.pane li{padding:6px 0;border-bottom:1px solid var(--line-2)}
.pane li:last-child{border-bottom:0}
.pane li.lead{color:var(--ink);font-weight:600}
.pane li.chk{display:flex;justify-content:space-between;gap:12px;background:var(--shade);color:var(--shade-ink);font-weight:600;margin:10px -16px -14px;padding:8px 16px;border-bottom:0}
.pane li.chk .dash{font-family:var(--mono)}
.links{display:grid;gap:10px;margin-top:18px}
.links p{font-size:17px;color:var(--ink)}
.links b{font-weight:600}
.links .to{color:var(--accent-text);font-weight:600;padding:0 6px}

/* numbered steps */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px}
@media (max-width:900px){.steps{grid-template-columns:1fr}}
.step{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:20px 22px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.step .k{counter-increment:s;font-family:var(--display);font-size:36px;line-height:.9;color:var(--accent);font-variant-numeric:tabular-nums;min-width:38px}
.step .k::before{content:counter(s,decimal-leading-zero)}
.step h3{margin-bottom:6px;font-size:23px}
.step p{color:var(--ink-2);font-size:17px}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px;align-items:start}
@media (max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:0;overflow:hidden;display:flex;flex-direction:column}
.tier .tband{background:var(--band);color:var(--band-ink);font-family:var(--display);font-size:22px;letter-spacing:.09em;text-align:center;padding:9px 10px;line-height:1.15}
.tier.pick{border-color:var(--accent)}
.tier.pick .tband{background:var(--accent);color:var(--accent-ink)}
.tier .body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.tier .price{font-family:var(--display);font-size:44px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.tier .price span{font-family:var(--sans);font-size:17px;font-weight:500;color:var(--ink-2);letter-spacing:0}
.tier .alt{font-size:15px;color:var(--ink-2);margin-top:6px}
.tier ul{list-style:none;margin:16px 0 20px;padding:0;font-size:16px;color:var(--ink-2)}
.tier li{padding:6px 0 6px 24px;position:relative;border-bottom:1px solid var(--line-2)}
.tier li:last-child{border-bottom:0}
.tier li::before{content:"";position:absolute;left:2px;top:14px;width:10px;height:2px;background:var(--accent)}
.tier li.soon::before{background:var(--ink-3)}
.tier li.soon{color:var(--ink-2)}
.tier .buys{margin-top:auto;display:grid;gap:8px}
.note{font-size:15px;color:var(--ink-2);max-width:70ch;margin-top:18px}

/* comparison table: band header, one shaded column, the way a year end reads on a statement */
.tblwrap{overflow-x:auto;margin-top:28px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
table.cmp{border-collapse:collapse;width:100%;min-width:560px;font-size:16px}
table.cmp th,table.cmp td{padding:9px 12px;text-align:center;border-bottom:1px solid var(--line-2)}
table.cmp th.lbl,table.cmp td.lbl{text-align:left;min-width:220px;color:var(--ink)}
table.cmp thead th{background:var(--band);color:var(--band-ink);font-family:var(--display);font-size:19px;letter-spacing:.07em;font-weight:400;border-bottom:0}
table.cmp thead th.ye{background:var(--shade);color:var(--shade-ink)}
table.cmp td.ye{background:var(--shade);color:var(--shade-ink)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:0}
table.cmp .no{color:var(--ink-2);font-family:var(--mono)}
table.cmp .yes{color:var(--accent-text);font-weight:600}
/* The shaded column says yes in ink, so the mark reads the same weight as the shade. */
table.cmp td.ye.yes{color:var(--shade-ink)}

/* questions */
.qa{margin-top:26px;display:grid;gap:14px}
.qa a.q{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px 20px;min-height:56px;text-decoration:none;color:var(--ink);font-weight:500;font-size:17px}
.qa a.q:hover{border-color:var(--accent-line)}
.qa a.q span.go{color:var(--accent-text);font-weight:600;flex:none}

/* long documents: terms, privacy, questions */
main.doc{max-width:660px;margin:0 auto;padding:44px 20px 60px}
main.doc h1{font-size:clamp(38px,7vw,60px);margin-bottom:16px}
main.doc h2{font-family:var(--sans);font-weight:600;font-size:22px;line-height:1.3;letter-spacing:0;margin:32px 0 8px}
main.doc p,main.doc li{font-size:17px;margin:0 0 12px}
main.doc ul{padding-left:22px}
main.doc .updated{font-size:15px;color:var(--ink-2);margin-top:26px}
main.doc .intro{color:var(--ink);margin-bottom:6px}
/* The early link on a guide: one sentence and one link, straight after the
   opening names the problem. Quieter than the button further down, so the page
   still reads as an article. */
main p.early{font-size:17px;color:var(--ink);background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:12px 16px;margin:14px 0 10px;max-width:64ch}
main p.early a{font-weight:600}

/* footer */
footer{border-top:1px solid var(--line);margin-top:76px;padding:32px 0 56px;color:var(--ink-2);font-size:15px}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:start}
@media (max-width:720px){footer .cols{grid-template-columns:1fr}}
footer a{color:inherit}
footer .disclaimer{max-width:68ch;margin-bottom:10px}

/* 404: short page, so the footer is pushed to the bottom of the window */
body.short{min-height:100vh;display:flex;flex-direction:column}
body.short main{flex:1 0 auto}
main.mini{max-width:560px;margin:0 auto;padding:72px 20px 40px}
main.mini h1{margin-bottom:14px}
main.mini p{color:var(--ink-2);margin-bottom:24px}

/* Guides index on the home page. Cards, but quieter than the pricing cards:
   these are a list of doors, not a decision. */
.guides{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.guides .guide{display:grid;gap:4px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink)}
.guides .guide:hover{border-color:var(--accent-line)}
.guides .guide b{font-size:17px}
.guides .guide span{font-size:15px;color:var(--muted)}

/* The way back, above the account facts. */
.backlink{margin:0 0 20px}