/* Medicare Decoder : design system
   Direction: marked-up document. Warm paper, ink, one highlighter accent.
   Type: Fraunces (display/serif voice) + Public Sans (body/UI) + IBM Plex Mono (jargon chips). */

/* ---------- Fonts ---------- */
@font-face { font-family:'Fraunces'; src:url('fonts/fraunces-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('fonts/fraunces-latin-400-italic.woff2') format('woff2'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('fonts/fraunces-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Fraunces'; src:url('fonts/fraunces-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Public Sans'; src:url('fonts/public-sans-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Public Sans'; src:url('fonts/public-sans-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Public Sans'; src:url('fonts/public-sans-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Plex Mono'; src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }

/* ---------- Tokens ---------- */
:root{
  --paper:#FAF6EC;
  --paper-2:#F2ECDD;        /* raised surface on paper */
  --card:#FFFDF7;           /* card surface */
  --ink:#20303D;            /* primary text, deep blue-ink */
  --ink-2:#5A6873;          /* secondary text */
  --ink-3:#5F6C79;          /* tertiary / hints */
  --line:#E4DCC8;           /* borders on paper */
  --line-ink:#33475A;       /* borders on ink */
  --mark:#FFD64A;           /* the highlighter. One accent, all the work. */
  --mark-soft:#FFF0B8;
  --good:#25714F;
  --good-soft:#E4F0E7;
  --warn:#A8562B;
  --warn-soft:#F8E9DC;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Public Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono:'Plex Mono', 'SF Mono', Consolas, monospace;
  --r:12px;                 /* radius system: 12 cards, 999 pills */
  --shadow-rest:0 1px 2px rgba(32,48,61,.05);
  --shadow-raise:0 6px 20px rgba(32,48,61,.08), 0 2px 6px rgba(32,48,61,.05);
  --sect:clamp(72px, 9vw, 116px);   /* one section-padding token */
  --headgap:clamp(36px, 4.5vw, 56px); /* header block → content gap */
  --container:1120px;
  --t-fast:150ms; --t-base:260ms;
  --ease-out:cubic-bezier(.22,.7,.35,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:var(--ink); text-decoration-color:rgba(32,48,61,.35); text-underline-offset:3px; transition:text-decoration-color var(--t-fast) var(--ease-out); }
a:hover{ text-decoration-color:var(--ink); }
:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--mark); color:var(--ink); }

h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.12; margin:0; letter-spacing:-0.01em; text-wrap:balance; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

/* ---------- Layout primitives ---------- */
section, footer, header.band{ width:100%; }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.sect{ padding-block:var(--sect); }
.sec-head{ max-width:640px; margin-bottom:var(--headgap); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.kicker{
  font-family:var(--mono); font-size:13px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-2); margin:0 0 14px;
}
.sec-head h2{ font-size:clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom:16px; }
.sec-head .lede{ color:var(--ink-2); font-size:1.06rem; }

/* Ink band variant */
.band-ink{ background:var(--ink); color:var(--paper); }
.band-ink .kicker{ color:#9FB0BE; }
.band-ink a{ color:var(--paper); text-decoration-color:rgba(250,246,236,.4); }
.band-ink a:hover{ text-decoration-color:var(--paper); }
.band-ink :focus-visible{ outline-color:var(--mark); }

/* ---------- The signature: highlighter swipe ---------- */
.hl{
  background-image:linear-gradient(100deg, rgba(255,214,74,0) 1.2%, var(--mark) 3.4%, var(--mark) 96.4%, rgba(255,214,74,0) 98.6%);
  background-repeat:no-repeat; background-size:100% 62%; background-position:0 68%;
  border-radius:2px; padding:0 .12em; margin:0 -.06em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.band-ink .hl{ color:var(--ink); background-size:100% 74%; background-position:0 60%; }
/* animated draw for the hero only */
.hl-draw{ background-size:0% 62%; }
.hl-draw.on{ transition:background-size 650ms var(--ease-out) 250ms; background-size:100% 62%; }

/* jargon chip: how the government says it */
.gov{
  font-family:var(--mono); font-size:.82em; font-weight:500; letter-spacing:.02em;
  background:var(--paper-2); border:1px solid var(--line); border-radius:6px;
  padding:.14em .5em; white-space:nowrap; color:var(--ink-2);
}
.band-ink .gov{ background:#2B3F50; border-color:var(--line-ink); color:#C3CFD9; }

/* margin note: the smart friend's pencil note */
.note{
  font-family:var(--serif); font-style:italic; font-size:1.02rem; color:var(--ink-2);
  border-left:3px solid var(--mark); padding-left:16px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-weight:700; font-size:1.02rem; line-height:1;
  padding:18px 30px; border-radius:var(--r); border:2px solid transparent;
  cursor:pointer; text-decoration:none; min-height:56px;
  transition:transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.btn-primary{ background:var(--mark); color:var(--ink); box-shadow:var(--shadow-rest); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow-raise); background:#FFDD66; }
.btn-primary:active{ transform:translateY(0); box-shadow:var(--shadow-rest); background:#F2C838; }
.btn-secondary{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-secondary:hover{ background:var(--ink); color:var(--paper); }
.btn-secondary:active{ background:#33475A; }
.band-ink .btn-secondary{ color:var(--paper); border-color:var(--paper); }
.band-ink .btn-secondary:hover{ background:var(--paper); color:var(--ink); }
.btn-quiet{ background:none; border:none; color:var(--ink-2); font-weight:500; padding:14px 18px; min-height:48px; cursor:pointer; font-size:1rem; border-radius:10px; }
.btn-quiet:hover{ color:var(--ink); background:var(--paper-2); }
.btn[disabled]{ opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-block{ width:100%; }

/* ---------- Nav ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(250,246,236,.92);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:14px; }
.logo{ display:flex; align-items:center; gap:11px; text-decoration:none; font-family:var(--serif); font-weight:700; font-size:1.28rem; letter-spacing:-.01em; }
.logo svg{ flex:0 0 auto; }
.nav-links{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.nav-links a{ text-decoration:none; font-weight:500; font-size:.98rem; color:var(--ink-2); padding:10px 14px; border-radius:10px; }
.nav-links a:hover{ color:var(--ink); background:var(--paper-2); }
.nav-links a[aria-current="page"]{ color:var(--ink); font-weight:700; background:var(--paper-2); }
.nav-cta{ margin-left:6px; }
.nav .btn{ padding:12px 20px; min-height:46px; font-size:.95rem; }
.nav-toggle{ display:none; background:none; border:none; padding:10px; cursor:pointer; border-radius:10px; }
.nav-toggle:hover{ background:var(--paper-2); }

@media (max-width:820px){
  .nav-toggle{ display:block; }
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--paper); border-bottom:1px solid var(--line); padding:12px 16px 18px;
    box-shadow:var(--shadow-raise);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:14px 16px; font-size:1.05rem; }
  .nav-cta{ margin:8px 0 0; }
  .nav-cta .btn{ width:100%; }
}

/* ---------- Cards ---------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:32px; box-shadow:var(--shadow-rest);
}

/* ---------- Footer ---------- */
.footer{ background:var(--ink); color:#B8C4CE; font-size:.95rem; border-top:1px solid var(--line-ink); }
.footer .container{ padding-block:56px 40px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; margin-bottom:40px; }
.footer h4{ color:var(--paper); font-family:var(--sans); font-size:.85rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; }
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:10px; }
.footer a{ color:#B8C4CE; text-decoration:none; }
.footer a:hover{ color:var(--paper); text-decoration:underline; text-decoration-color:var(--mark); }
.footer .logo{ color:var(--paper); margin-bottom:14px; }
.footer-legal{ border-top:1px solid var(--line-ink); padding-top:24px; font-size:.85rem; color:#8B99A5; line-height:1.7; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }

/* ---------- Motion prefs ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .hl-draw{ background-size:100% 62%; }
}