/* site.css: the shared design system for every getinsuranceplans.us page.
   Owned by the web redesign chat. Other pages (SEO landing pages, legal pages) link this file and
   use only the classes below, so a restyle here restyles every page at once. Don't fork it; ask
   for a new component instead. Page-specific styles go in their own file after this one.

   Page skeleton:
     <header class="top"><a class="brand" href="/"><span class="mark" aria-hidden="true"></span><span>getinsuranceplans</span></a>
       <a class="top-link" href="/">See prices</a></header>
     <main class="wrap"> ... </main>
     <footer class="foot"><nav class="foot-links">...</nav><p>...</p></footer>

   Components:
     .wrap            centered page column (max 1160px)        .wrap.narrow  reading width (720px)
     .section         vertical block spacing                   .kick         small label above a heading
     .lede            intro paragraph under an h1              .muted        secondary text
     .card            white panel                              .prose        long-form text (headings, lists, links)
     .btn .primary / .ghost / .small    buttons or links styled as buttons
     .cta-band        full-width call to action: <div class="cta-band"><div><h2/><p/></div><a class="btn primary"/></div>
     .choice-grid > .choice.aca / .choice.hpg   the two plan types side by side (stacks on phones)
*/
:root {
  --ink: #0B2545;
  --ink-2: #3A4F6B;
  --muted: #6B7C93;
  --line: #DCE3EC;
  --bg: #F3F6FA;
  --card: #FFFFFF;
  --accent: #FF6B3D;
  --accent-dark: #E5532A;
  --aca: #1D5FD1;
  --aca-soft: #EAF1FD;
  --hpg: #0E8A7E;
  --hpg-soft: #E5F5F3;
  --warn: #C9431A;
  --warn-soft: #FFEDE5;
  --error: #C62828;
  --radius: 14px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
body { margin: 0; line-height: 1.5; }
h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.01em; font-family: var(--font-display); }
p { margin: 0; }
a { color: var(--aca); }
[hidden] { display: none !important; }

.top { display: flex; justify-content: space-between; align-items: center; max-width: 1160px; margin: 0 auto; padding: 18px 20px; }
.brand { display: flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; font-weight: 750; font-size: 18px; }
.brand svg { width: 30px; height: 30px; }
.brand .mark { width: 28px; height: 28px; border-radius: 8px; background: var(--ink); box-shadow: inset 0 0 0 8px var(--ink), inset 0 0 0 20px var(--accent); }
.top-link, .top-phone { font-weight: 650; color: var(--ink); }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px 48px; }
.wrap.narrow { max-width: 720px; }
.section { padding-top: 32px; padding-bottom: 32px; }
.kick { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-dark); margin-bottom: 10px; }
.lede { margin-top: 14px; font-size: 19px; color: var(--ink-2); max-width: 34em; }
.muted { color: var(--muted); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(11,37,69,.04), 0 8px 24px rgba(11,37,69,.06); }

.btn { display: inline-block; font: inherit; font-weight: 700; border-radius: 10px; padding: 13px 20px; cursor: pointer; border: 1px solid transparent; text-decoration: none; text-align: center; }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-dark); }
.btn.primary:disabled { opacity: .6; cursor: progress; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn.ghost:hover { border-color: var(--ink-2); }
.btn.small { padding: 9px 14px; font-size: 14px; }

.prose h1 { font-size: clamp(30px, 6vw, 44px); font-weight: 800; line-height: 1.1; margin: 4px 0 12px; }
.prose h2 { font-size: 22px; font-weight: 750; margin: 32px 0 8px; }
.prose h3 { font-size: 17px; font-weight: 700; margin: 18px 0 4px; }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p { margin-top: 10px; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose .lede { font-size: 18px; margin-top: 0; }

.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.cta-band h2 { font-size: 22px; }
.cta-band p { color: #C8D3E2; margin-top: 4px; }

.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.choice { background: var(--card); border-radius: var(--radius); padding: 20px; border-top: 5px solid var(--aca); }
.choice.hpg { border-top-color: var(--hpg); }
.choice h3 { font-size: 21px; margin: 4px 0 8px; }
.choice ul { padding-left: 18px; margin: 0; color: var(--ink-2); }

.foot { max-width: 1160px; margin: 0 auto; padding: 24px 20px 48px; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 12.5px; color: var(--muted); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 4px; font-size: 14px; }
.foot-links a { color: var(--ink); font-weight: 600; }

@media (max-width: 760px) {
  .choice-grid { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; align-items: stretch; }
}