:root {
  /* Plans By City identity. Deliberately distinct from the sister sites:
     coveragebycounty is blue (#1b6ca8), plansbystate is teal (#4338ca).
     This one is indigo, with a rose accent reserved for the network warnings
     that are the whole point of the site. */
  --primary:      #4338ca;   /* indigo 700 - actions, links, brand */
  --primary-dark: #312e81;   /* indigo 900 - headers, dark bands */
  --primary-soft: #eef2ff;   /* cool tint band */

  --accent:       #be123c;   /* rose 700 - used for the no-PPO warnings */
  --accent-dark:  #9f1239;
  --accent-soft:  #fff1f2;   /* warm tint band */

  --good:  #15803d;          /* cheapest / positive */
  --warn:  #b45309;
  --bad:   #b91c1c;          /* most expensive */

  --bg:      #f8f8fc;
  --surface: #ffffff;
  --text:    #17241f;        /* near-black, green-biased */
  --muted:   #5b6f6b;
  --border:  #c9ded9;
}

html { scrollbar-gutter: stable; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

header {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  padding: 48px 0 36px;
  text-align: center;
}

header h1 {
  margin: 0 0 8px;
  font-size: 2rem;
}

.site-nav {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 6px 16px;
  flex-wrap: wrap;
}

.site-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  opacity: 0.85;
  padding: 3px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}

.site-nav a:hover {
  opacity: 1;
  border-bottom-color: rgba(255,255,255,0.6);
}

footer .site-nav a {
  color: var(--primary);
}

footer .site-nav {
  margin-bottom: 12px;
}

.subtitle {
  margin: 0;
  font-size: 1.1rem;
  opacity: 0.9;
}

main {
  padding: 40px 20px;
}

.intro, .trust {
  margin-bottom: 36px;
}

h2 {
  color: var(--primary-dark);
}

.form-section {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 28px;
}

#eligibility-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-row {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}

.form-row.half,
.form-row-phone,
.form-row-zip {
  grid-column: span 1;
}

label {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="date"] {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.checkbox-row {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
}

.checkbox-row input {
  margin-top: 4px;
}

.checkbox-row label {
  font-weight: 400;
  font-size: 0.72rem;
  color: #6b7280;
  line-height: 1.4;
}

button[type="submit"] {
  flex: 1 1 100%;
  grid-column: 1 / -1;
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

button[type="submit"]:hover {
  background: var(--primary-dark);
}

ul {
  padding-left: 20px;
}

footer {
  text-align: center;
  padding: 24px 0;
  color: #6b7280;
  font-size: 0.9rem;
}

footer a {
  color: var(--primary);
}

.disclaimer {
  font-size: 0.78rem;
  color: #6b7280;
  max-width: 640px;
  margin: 0 auto 14px;
  line-height: 1.5;
}

.trust-badge {
  display: inline-block;
  margin: 14px auto 0;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}

.call-link {
  margin: 12px 0 0;
  font-size: 0.95rem;
}

.call-link a {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
}

.call-link-alt {
  text-align: center;
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: #6b7280;
}

.call-link-alt a {
  color: var(--primary);
  font-weight: 600;
}

#estimator-form input[type="number"] {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 1rem;
  width: 100%;
  margin-bottom: 16px;
}

#estimate-btn {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s ease;
}

#estimate-btn:hover {
  background: var(--primary-dark);
}

.estimator-result-box {
  margin-top: 20px;
  padding: 18px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.estimator-note {
  margin-top: 16px;
  color: #6b7280;
  font-size: 0.9rem;
}

/* CTA box — content pages */
.cta-box {
  margin: 40px 0 32px;
  padding: 28px 24px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-radius: 10px;
  text-align: center;
  color: #fff;
}

.cta-headline {
  margin: 0 0 16px;
  font-size: 1.2rem;
  font-weight: 600;
}

.cta-btn {
  display: inline-block;
  background: #fff;
  color: var(--primary-dark);
  font-weight: 700;
  font-size: 1rem;
  padding: 13px 28px;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.cta-btn:hover {
  opacity: 0.9;
}

.cta-sub {
  margin: 14px 0 0;
  font-size: 0.88rem;
  opacity: 0.85;
}

.cta-sub a {
  color: #fff;
  font-weight: 600;
}

/* Related articles */
.related-articles {
  margin: 0 0 32px;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.related-articles h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.related-articles ul {
  margin: 0;
  padding-left: 18px;
}

.related-articles li {
  margin-bottom: 6px;
}

.related-articles a {
  color: var(--primary);
  text-decoration: none;
}

.related-articles a:hover {
  text-decoration: underline;
}

.form-trust-row {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  color: #6b7280;
  margin: 0;
}

.estimator-teaser {
  margin-top: 20px;
  text-align: center;
  font-size: 0.95rem;
  color: #4b5563;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.estimator-teaser a {
  color: var(--primary);
  text-decoration: none;
}

.estimator-teaser a:hover {
  text-decoration: underline;
}

/* County grid — compact multi-column list on state pages */
.county-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 12px;
  padding-left: 0;
  list-style: none;
  margin: 8px 0 24px;
}

.county-grid li {
  margin: 0;
}

.county-grid a {
  font-size: 0.88rem;
  color: var(--primary);
  text-decoration: none;
  display: block;
  padding: 3px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.county-grid a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .county-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- ZIP-first lead widget ---- */
.zip-lead{border:1px solid var(--border,#d7e8e4);border-radius:12px;padding:26px;margin:32px 0;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.zip-lead h2{margin:0 0 6px;font-size:1.35rem}
.zl-sub{margin:0 0 16px;color:#5b6f6b;font-size:.94rem}
.zl-row{display:flex;gap:10px;flex-wrap:wrap}
.zl-row input{flex:1 1 190px;min-width:150px;padding:14px 16px;font-size:1.05rem;border:1px solid #b6d6cf;border-radius:8px}
.zl-btn{background:#4338ca;color:#fff;border:0;border-radius:8px;padding:14px 26px;font-size:1rem;font-weight:700;cursor:pointer;white-space:nowrap}
.zl-btn:hover{background:#3730a3}
.zl-btn-full{width:100%;margin-top:14px;padding:16px}
.zl-trust{margin:14px 0 0;font-size:.8rem;color:#6b7280}
.zl-err{color:#dc2626;font-size:.86rem;margin:10px 0 0}
.zl-ok{background:#eef2ff;border:1px solid #c7d2fe;color:#065f46;padding:10px 14px;border-radius:8px;font-size:.92rem;margin:0 0 14px}
.zl-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.zl-grid{grid-template-columns:1fr}}
.zl-grid label{display:block;font-size:.85rem;font-weight:600;margin:0 0 5px}
.zl-grid input{width:100%;padding:12px 14px;font-size:1rem;border:1px solid #b6d6cf;border-radius:8px;box-sizing:border-box}
.zl-locked{background:#eef2ff;color:#44605c}
.zl-consent{display:flex;gap:9px;align-items:flex-start;margin:16px 0 0;font-size:.85rem}
.zl-back{text-align:center;margin:12px 0 0;font-size:.85rem}


/* ---- Layout modernization (2026-07-28): wider canvas, non-linear content ---- */
/* Keep prose at a readable measure even though the container is wider */
.intro article > p,
.intro article > ul,
.intro article > ol,
.intro > article > p { max-width: 74ch; }

/* Tables and data use the full width */
.intro table, table.benefit-table, .table-wrap { max-width: 100%; width: 100%; }

/* Link lists become multi-column instead of one long stack */
.related-articles ul,
.county-grid,
.state-links,
.related-resources ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 4px 24px;
  list-style: none;
  padding-left: 0;
}
.related-articles ul li,
.county-grid li,
.state-links li,
.related-resources ul li { padding: 3px 0; font-size: .92rem; }

/* Section cards so the page reads as blocks, not one column of text */
.intro > article {
  background: #fff;
  border: 1px solid var(--border, #d7e8e4);
  border-radius: 12px;
  padding: 26px 30px;
  margin-bottom: 22px;
}
.answer-lead {
  background: #effcf9;
  border-left: 4px solid var(--primary, #4338ca);
  border-radius: 8px;
  padding: 16px 20px;
  max-width: none !important;
}

@media (max-width: 760px) {
  .intro > article { padding: 20px 18px; }
  .related-articles ul, .county-grid, .state-links, .related-resources ul {
    grid-template-columns: 1fr;
  }
}

/* ---- content links ----
   The stylesheet had no general anchor rule, so links inside .hero/.sec
   fell back to the browser default (#0000EE). Scoped to content sections so
   .site-nav, footer nav and .cta-button keep their own colours. */
.hero a:not(.cta-button),
.sec a:not(.cta-button),
main a:not(.cta-button) {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.hero a:not(.cta-button):hover,
.sec a:not(.cta-button):hover,
main a:not(.cta-button):hover {
  color: var(--primary-dark);
}
.sec-dark a:not(.cta-button),
.sec-dark a:not(.cta-button):hover {
  color: #c7d2fe;
}

/* ---- primary call to action ----
   Warm, because the page is teal: isolation from surroundings drives clicks far
   more than hue does, and a teal button on a teal page is camouflage. */
.cta-button {
  display: inline-block;
  background: var(--accent);
  color: #fff !important;
  text-decoration: none !important;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.02rem;
  border: 0;
  cursor: pointer;
  transition: background .15s ease;
}
.cta-button:hover { background: var(--accent-dark); color: #fff !important; }

/* ---- lead form ---- */
.lead-form { max-width: 640px; }
.lead-form .lf-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.lead-form .lf-row > div { flex: 1 1 200px; }
.lead-form label { display: block; font-size: .85rem; font-weight: 600; margin: 0 0 5px; }
.lead-form input, .lead-form select {
  width: 100%; padding: 12px 14px; font-size: 1rem;
  border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box;
  background: #fff; color: var(--text);
}
.lead-form input:focus, .lead-form select:focus {
  outline: 2px solid var(--primary); outline-offset: 1px; border-color: var(--primary);
}
.lf-consent { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; font-size: .84rem; color: #4b5563; }
.lf-consent input { width: auto; flex: 0 0 auto; margin-top: 3px; }
.lf-note { font-size: .8rem; color: #6b7280; margin-top: 10px; }

/* ================= homepage ================= */
.hero-lead { padding: 46px 0 40px; }
.hero-lead h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); line-height: 1.18; margin: 0 0 14px; text-wrap: balance; }
.hero-lead .lede { font-size: 1.1rem; max-width: 60ch; margin: 0 0 22px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn-ghost {
  display: inline-block; padding: 13px 26px; border-radius: 8px; font-weight: 700;
  border: 2px solid currentColor; text-decoration: none !important;
}
.hero-trust { margin-top: 18px; font-size: .88rem; opacity: .92; }

/* audience segmentation */
.seg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin: 1.5rem 0; }
.seg-card {
  display: block; padding: 22px; border: 1px solid var(--border); border-radius: 12px;
  background: #fff; text-decoration: none !important; color: var(--text) !important;
  transition: border-color .15s ease, transform .15s ease;
}
.seg-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.seg-card strong { display: block; font-size: 1.05rem; margin-bottom: 6px; color: var(--primary); }
.seg-card span { font-size: .9rem; color: #4b5563; }

/* stat strip */
.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; margin: 1.2rem 0; }
.stat-strip div { text-align: center; }
.stat-strip b { display: block; font-size: 1.9rem; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.stat-strip span { font-size: .86rem; color: #4b5563; }
.sec-dark .stat-strip b { color: #c7d2fe; }
.sec-dark .stat-strip span { color: #d7e8e4; }

/* enrollment timeline */
.tl { list-style: none; padding: 0; margin: 1.4rem 0; border-left: 3px solid var(--border); }
.tl li { position: relative; padding: 0 0 22px 24px; }
.tl li::before {
  content: ""; position: absolute; left: -8px; top: 5px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--primary); border: 3px solid #fff;
}
.tl .tl-date { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--primary); margin-bottom: 3px; }
.tl strong { display: block; margin-bottom: 3px; }
.tl p { margin: 0; font-size: .92rem; color: #4b5563; }
@media (max-width: 560px) { .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions a { text-align: center; } }

/* ================= section layout system =================
   .hero / .sec / .sec-alt / .sec-dark are used by every generated page but
   had no base rules, so the whole site rendered as one flat white column. */
.hero { padding: 40px 0; background: var(--bg); }
.hero h2 { margin-top: 0; }

.sec { padding: 44px 0; }
.sec > .container > h2:first-child { margin-top: 0; }
.sec h2 { font-size: 1.6rem; margin: 0 0 .6rem; text-wrap: balance; }
.sec h3 { font-size: 1.08rem; margin: 1.4rem 0 .3rem; }

.sec-alt { background: #eef2ff; }

.sec-dark {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff;
}
.sec-dark h2, .sec-dark h3, .sec-dark strong { color: #fff; }
.sec-dark p, .sec-dark li { color: #e6f5f2; }
.sec-dark em { color: #c9e9e3; }

/* tables inherit the band they sit in */
.sec-alt table tbody tr:nth-child(odd) { background: rgba(255,255,255,.55); }
.sec table tbody tr:nth-child(odd) { background: #f7f7fd; }
.sec table tbody td { border-bottom: 1px solid var(--border); }

/* readable measure for prose, full width for tables */
.sec > .container > p,
.sec > .container > ul,
.hero > .container > p { max-width: 72ch; }

/* ================= ZIP-first funnel ================= */
.zipbox { max-width: 620px; margin: 0 0 8px; }
.zip-row { display: flex; gap: 10px; align-items: stretch; }
.zip-row input {
  flex: 1 1 auto; min-width: 0; font-size: 1.5rem; font-weight: 700;
  letter-spacing: .12em; text-align: center; padding: 18px 16px;
  border: 2px solid var(--border); border-radius: 10px; background: #fff; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.zip-row input::placeholder { font-weight: 500; letter-spacing: .08em; color: #9aa8a5; }
.zip-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(154,52,18,.16); }
.zip-row button { flex: 0 0 auto; font-size: 1.05rem; padding: 18px 30px; }
.zip-hint { font-size: .85rem; color: #4b5563; margin: 10px 0 0; }
.zip-err { color: #dc2626; font-size: .88rem; margin: 8px 0 0; font-weight: 600; }

#step1.done .zip-row input { font-size: 1.15rem; padding: 12px 14px; }
#step1.done .zip-row button { display: none; }
#step1.done .zip-hint { display: none; }

.zip-result {
  border: 1px solid var(--primary); border-left: 5px solid var(--primary);
  border-radius: 10px; padding: 18px 20px; margin: 18px 0 4px; background: #f2fbf9;
}
.zip-result .zr-head { margin: 0 0 6px; font-weight: 800; font-size: 1.12rem; color: var(--primary-dark); }
.zip-result .zr-body { margin: 0 0 8px; font-size: .97rem; }
.zip-result .zr-note { margin: 0; font-size: .9rem; color: #4b5563; }

.step2 { margin-top: 20px; animation: pbsIn .28s ease both; }
@keyframes pbsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .step2 { animation: none; } }
.step2 h3 { margin: 0 0 4px; font-size: 1.2rem; }
.step2 .s2-sub { margin: 0 0 16px; font-size: .93rem; color: #4b5563; }

@media (max-width: 560px) {
  .zip-row { flex-direction: column; }
  .zip-row button { width: 100%; }
}

/* ---- result card: county first, price de-emphasised, help up front ---- */
.zip-result { padding: 22px 24px; background: #fff; border-left-width: 4px; }
.zip-result .zr-head { margin: 0 0 2px; font-size: 1.22rem; font-weight: 800; color: var(--primary-dark); }
.zip-result .zr-meta { margin: 0 0 14px; font-size: .82rem; color: #6b7280; }
.zip-result .zr-lead {
  margin: 2px 0 12px;
  font-size: clamp(1.28rem, 3.1vw, 1.6rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--accent-dark);
  text-wrap: balance;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent-soft);
}
.zip-result .zr-body { margin: 0 0 10px; font-size: .95rem; color: #374151; }
.zip-result .zr-price { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.zip-result .zr-qual { color: #6b7280; font-size: .88em; }
.zip-result .zr-note { margin: 0; font-size: .88rem; color: var(--primary); font-weight: 600; }

/* ---- three-up trust row ---- */
.three-up { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.three-up b { display: block; color: var(--primary); font-size: 1rem; margin-bottom: 6px; }
.three-up p { margin: 0; font-size: .93rem; color: #4b5563; }

/* tighter hero for the ZIP-first layout */
.hero-lead { padding: 52px 0 44px; }
.hero-lead .lede { font-size: 1.06rem; margin-bottom: 26px; }
.lead-form .lf-why { display: block; margin-top: 5px; font-size: .78rem; color: #6b7280; }

/* ================= two-tone system ================= */
/* Warm band, alternating with the cool one so the page has rhythm. */
.sec-warm { background: var(--accent-soft); }
.sec-warm table tbody tr:nth-child(odd) { background: rgba(255,255,255,.6); }

/* Accent rule above a section heading - warm, small, never shouty. */
.sec-warm > .container > h2::before,
.eyebrow-accent::before {
  content: ""; display: block; width: 42px; height: 3px;
  background: var(--accent); border-radius: 2px; margin-bottom: 14px;
}

/* The reassurance line is the one warm thing in the result card. */
.zip-result { border-left-color: var(--primary); }

/* Semantic colour in ranking tables: cheapest reads green, priciest red.
   Applied by class from the builder, never by row position. */
td .v-good { color: var(--good); font-weight: 700; }
td .v-bad  { color: var(--bad);  font-weight: 700; }

/* Secondary action picks up the accent so it reads as a different kind of act. */
.btn-ghost { color: var(--primary-dark); border-color: var(--primary); }
.btn-ghost:hover { background: var(--primary); color: #fff !important; border-color: var(--primary); }

/* Muted text now uses the token rather than scattered greys. */
.zip-result .zr-meta, .three-up p, .lf-note, .lead-form .lf-why { color: var(--muted); }

/* Dark band gets a warm highlight so it isn't monochrome either. */
.sec-dark .stat-strip div:nth-child(2) b { color: #fcd9a4; }

/* "do not" carries the whole sentence - underline it deliberately, thick and
   offset so it reads as emphasis rather than as a link. */
.zip-result .zr-lead u {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}

/* ================= compare picker ================= */
.vs-picker { max-width: 720px; }
.vs-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.vs-row > div:not(.vs-word) { flex: 1 1 220px; }
.vs-row label { display: block; font-size: .85rem; font-weight: 600; margin: 0 0 5px; }
.vs-row select {
  width: 100%; padding: 13px 14px; font-size: 1rem; background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; box-sizing: border-box;
}
.vs-row select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(154,52,18,.16); }
.vs-word { flex: 0 0 auto; padding-bottom: 13px; font-weight: 800; color: var(--muted); font-size: 1.05rem; }
.vs-err { color: #b91c1c; font-size: .88rem; font-weight: 600; margin: 10px 0 0; }
.vs-picker .cta-button { margin-top: 18px; }
.vs-picker .cta-button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

details summary { cursor: pointer; font-weight: 600; color: var(--primary); }
details summary:hover { color: var(--primary-dark); }

@media (max-width: 560px) { .vs-word { display: none; } }

/* ================= brand / logo ================= */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  text-decoration: none !important;
  color: #fff !important;
  transition: opacity .15s ease;
}
.brand:hover { opacity: .85; }
.brand-mark { width: 30px; height: 30px; fill: currentColor; flex: 0 0 auto; }
.brand-name {
  font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap;
}
.brand-name b { font-weight: 400; opacity: .7; margin: 0 1px; }

/* ---- navigation: bigger type, full contrast, real tap targets ---- */
.site-nav { margin-top: 20px; gap: 4px 8px; }
.site-nav a {
  font-size: 0.95rem;
  opacity: 1;
  padding: 9px 12px;
  border-radius: 7px;
  border-bottom: 0;
  transition: background .15s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible { background: rgba(255,255,255,.16); border-bottom: 0; }
footer .site-nav a:hover,
footer .site-nav a:focus-visible { background: rgba(0,0,0,.06); }

@media (max-width: 560px) {
  .site-nav a { font-size: .9rem; padding: 9px 10px; }
  .brand-name { font-size: .98rem; }
}

/* ============ header: logo far left | title centre | search far right ======
   Nav sits on its own full-width row underneath, as one long line. */
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
header { padding: 0; text-align: center; }
.header-row {
  /* Grid, not flex: the two 1fr side columns are forced to equal width, so the
     centre column lands on the true page centre. With flex, the middle item
     centres in the leftover space and drifts by half the difference between
     the logo and the search box - which put the title 50px off the nav below. */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding-top: 22px; padding-bottom: 20px;
}
.header-row .brand { margin: 0; justify-self: start; }
.header-row .site-search { justify-self: end; }
/* Nudge the search box past the container's inner padding so it sits closer to
   the page edge. Wide screens only - the container has room to spare there. */
@media (min-width: 1000px) {
  .header-row .site-search { margin-right: -14px; }
}
.header-center { min-width: 0; text-align: center; }
.header-center h1 { margin: 0 0 6px; font-size: clamp(1.4rem, 2.9vw, 2rem); line-height: 1.15; }
.header-center .subtitle { margin: 0 auto; font-size: .97rem; max-width: 52ch; }
.header-center .trust-badge { margin: 11px auto 0; }

/* full-width nav strip, one long row */
.header-navbar { border-top: 1px solid rgba(255,255,255,.18); }
.header-navbar .site-nav {
  /* 'safe center' centres when it fits but falls back to flex-start when the
     row overflows - plain 'center' clips the first item out of reach. */
  margin: 0; justify-content: flex-start; justify-content: safe center;
  flex-wrap: nowrap;
  overflow-x: auto; gap: 2px; padding: 4px 0;
  scrollbar-width: none;
}
.header-navbar .site-nav::-webkit-scrollbar { display: none; }
.header-navbar .site-nav a { font-size: .87rem; padding: 10px 11px; flex: 0 0 auto; }

.site-search { position: relative; width: 240px; }
.search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: rgba(255,255,255,.75); pointer-events: none;
}
.site-search input {
  width: 100%; padding: 9px 12px 9px 34px; font-size: .92rem;
  color: #fff; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28); border-radius: 8px;
  box-sizing: border-box; -webkit-appearance: none;
}
.site-search input::placeholder { color: rgba(255,255,255,.72); }
.site-search input:focus {
  outline: none; background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.65); box-shadow: 0 0 0 3px rgba(255,255,255,.14);
}
.site-search input::-webkit-search-cancel-button { filter: invert(1); opacity:.6; }
.search-results {
  position: absolute; top: calc(100% + 7px); right: 0; width: min(400px, 88vw);
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.17); overflow: hidden; z-index: 60;
  max-height: 62vh; overflow-y: auto; text-align: left;
}
.sr-item {
  display: block; padding: 11px 14px; font-size: .9rem; line-height: 1.35;
  color: var(--text) !important; text-decoration: none !important;
  border-bottom: 1px solid var(--primary-soft);
}
.sr-item:last-child { border-bottom: 0; }
.sr-item:hover, .sr-item.is-active { background: var(--primary-soft); }
.sr-empty { margin: 0; padding: 14px; font-size: .88rem; color: var(--muted); }

@media (max-width: 820px) {
  .header-row { grid-template-columns: 1fr auto; gap: 14px 12px; }
  .header-row .brand { grid-column: 1; }
  .header-row .site-search { grid-column: 2; width: 180px; }
  .header-center { grid-column: 1 / -1; text-align: left; }
  .header-center .subtitle, .header-center .trust-badge { margin-left: 0; }
  .header-navbar .site-nav { justify-content: flex-start; }
  .search-results { right: auto; left: 0; }
}
.search-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.search-chip {
  font-size: .84rem; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: #fff; color: var(--primary-dark) !important;
  text-decoration: none !important; cursor: pointer;
}
.search-chip:hover { border-color: var(--primary); background: var(--primary-soft); }

@media (max-width: 860px) {
  .header-row { flex-direction: column; gap: 18px; }
  .header-right { align-items: flex-start; width: 100%; max-width: none; }
  .header-right .site-nav { justify-content: flex-start; }
  .site-search { width: 100%; max-width: 340px; }
  .search-results { right: auto; left: 0; }
}

}
.nl { color: var(--accent); font-weight: 700; }

/* ── Wage benchmark / subsidy cliff block (2026-08-03) ──────────────────────
   The chart carries real per-occupation data, so it is styled as a figure
   rather than decoration: the cliff is the reference line, the current state
   is emphasised, and bars above the cliff take the semantic "expensive" hue. */
.wage-figures {
  display: grid; gap: .75rem; margin: 1.25rem 0 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.wage-figures > div {
  background: var(--primary-soft); border-radius: 8px; padding: .9rem 1rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.wf-n {
  font-size: 1.6rem; font-weight: 700; line-height: 1.1;
  color: var(--primary-dark); font-variant-numeric: tabular-nums;
}
.wf-k { font-size: .82rem; color: #4b5563; }

.wage-verdict {
  font-weight: 600; border-left: 4px solid var(--primary);
  padding: .6rem 0 .6rem .9rem; margin: 1rem 0;
}
.wage-verdict.is-over  { border-left-color: var(--bad); }
.wage-verdict.is-under { border-left-color: var(--good); }

.wage-chart { width: 100%; height: auto; margin: 1.4rem 0 .5rem; font-size: 11px; }
.wage-chart .wc-bar    { fill: #94a3b8; }
.wage-chart .wc-over   { fill: var(--bad); opacity: .75; }
.wage-chart .wc-cur    { fill: var(--primary); }
.wage-chart .wc-st     { fill: #475569; text-anchor: end; }
.wage-chart .wc-stcur  { fill: var(--primary-dark); font-weight: 700; }
.wage-chart .wc-val    { fill: #475569; font-variant-numeric: tabular-nums; }
.wage-chart .wc-cliff  { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.wage-chart .wc-clifflab { fill: var(--accent); font-weight: 700; }

.wage-note {
  font-size: .92rem; color: #4b5563; margin: .9rem 0;
  padding-left: .9rem; border-left: 2px solid #e2e8f0;
}
.wage-src { margin-top: 1.2rem; font-size: .9rem; }
.wage-src summary { cursor: pointer; font-weight: 600; color: var(--primary); }
.wage-src ol { margin: .7rem 0 0; padding-left: 1.2rem; line-height: 1.65; }
.wage-src li { margin-bottom: .5rem; color: #4b5563; }
.wage-src cite { font-style: italic; }

@media (max-width: 560px) {
  .wage-chart { font-size: 13px; }
  .wf-n { font-size: 1.35rem; }
}

/* ZIP match in the search dropdown (2026-08-04). Typing a 5-digit ZIP resolves
   to a county or state instead of returning nothing. */
.sr-item.sr-zip { display: block; line-height: 1.35; }
.sr-item.sr-zip .sr-sub {
  display: block;
  font-size: .82rem;
  opacity: .75;
  margin-top: 2px;
  font-weight: 400;
}

/* ============ brand mark rebalance (2026-08-09) ============
   Matches coveragebycounty.com. The 30px mark read small against the header
   title; scaled up and set on a contained plate so it carries equal weight. */
.brand { gap: 13px; align-items: center; }
.brand-mark {
  width: 46px; height: 46px;
  padding: 8px; border-radius: 12px;
  background: rgba(255,255,255,.13);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.brand:hover .brand-mark {
  background: rgba(255,255,255,.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
  transform: rotate(-4deg) scale(1.04);
}
.brand-name { font-size: 1.22rem; letter-spacing: -.02em; line-height: 1.1; }
.brand-name b { opacity: .62; }
.brand-mark rect { transition: opacity .5s ease, y .5s ease, height .5s ease; }
.brand:hover .brand-mark rect { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .brand-mark, .brand-mark rect, .brand:hover .brand-mark { transition: none; transform: none; }
}
@media (max-width: 700px) {
  .brand-mark { width: 38px; height: 38px; padding: 6px; border-radius: 10px; }
  .brand-name { font-size: 1.05rem; }
}

/* ============ animated bar mark (2026-08-09) ============
   Hover-driven, matching coveragebycounty. An on-load animation replayed on
   every refresh and every click-through, which got old fast -- the motion
   now only happens on deliberate interaction.

   The bars still grow left to right: staggered transition-delays make them
   rise in sequence, and each lifts slightly more than the one before it.
   Resting state is the plain full-height bar, so nothing here can leave the
   mark blank if transitions never run. */
.brand-mark rect {
  transform-box: fill-box;
  transform-origin: bottom;
  transition: transform .3s cubic-bezier(.22,.9,.28,1), opacity .3s ease;
}
.brand-mark rect:nth-of-type(1) { transition-delay: 0s; }
.brand-mark rect:nth-of-type(2) { transition-delay: .06s; }
.brand-mark rect:nth-of-type(3) { transition-delay: .12s; }

.brand:hover .brand-mark { transform: scale(1.03); }
.brand:hover .brand-mark rect { opacity: 1; }
.brand:hover .brand-mark rect:nth-of-type(1) { transform: scaleY(1.10); }
.brand:hover .brand-mark rect:nth-of-type(2) { transform: scaleY(1.17); }
.brand:hover .brand-mark rect:nth-of-type(3) { transform: scaleY(1.24); }

@media (prefers-reduced-motion: reduce) {
  .brand-mark rect,
  .brand:hover .brand-mark rect:nth-of-type(1),
  .brand:hover .brand-mark rect:nth-of-type(2),
  .brand:hover .brand-mark rect:nth-of-type(3),
  .brand:hover .brand-mark { transform: none; transition: opacity .2s ease; }
}

/* ============================================================
   Plans By City brand mark: a skyline that rises on hover.
   Bars sit at full height at rest -- never animate FROM zero, or the
   logo can render blank if the transition is interrupted (that bug
   shipped on plansbystate once already).
   ============================================================ */
.brand-mark rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .30s cubic-bezier(.34, 1.4, .64, 1), opacity .30s ease;
}
.brand:hover .brand-mark rect,
.brand:focus-visible .brand-mark rect { opacity: 1; }

.brand:hover .brand-mark rect:nth-of-type(1),
.brand:focus-visible .brand-mark rect:nth-of-type(1) { transform: scaleY(1.30); transition-delay: 0ms; }
.brand:hover .brand-mark rect:nth-of-type(2),
.brand:focus-visible .brand-mark rect:nth-of-type(2) { transform: scaleY(1.16); transition-delay: 45ms; }
.brand:hover .brand-mark rect:nth-of-type(3),
.brand:focus-visible .brand-mark rect:nth-of-type(3) { transform: scaleY(1.34); transition-delay: 90ms; }
.brand:hover .brand-mark rect:nth-of-type(4),
.brand:focus-visible .brand-mark rect:nth-of-type(4) { transform: scaleY(1.12); transition-delay: 135ms; }
.brand:hover .brand-mark rect:nth-of-type(5),
.brand:focus-visible .brand-mark rect:nth-of-type(5) { transform: scaleY(1.24); transition-delay: 180ms; }

/* the lit windows blink on as the skyline rises */
.brand-mark circle { opacity: .35; transition: opacity .3s ease; }
.brand:hover .brand-mark circle { opacity: .95; transition-delay: 200ms; }

@media (prefers-reduced-motion: reduce) {
  .brand-mark rect,
  .brand-mark circle,
  .brand:hover .brand-mark rect,
  .brand:hover .brand-mark circle { transition: none; transform: none; }
}

/* ==========================================================================
   Visual system, added 2026-08-16.
   The subject is city hospital networks, so the page furniture borrows from
   the skyline logo: flat blocks, tabular figures, severity carried by ground
   colour rather than by a decorative rail.
   ========================================================================== */

/* --- Stat band ----------------------------------------------------------- */
.statband {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #dcdcea;
  border: 1px solid #dcdcea;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 0 26px;
}
@media (max-width: 640px) { .statband { grid-template-columns: repeat(2, 1fr); } }
.statband .st { background: #fff; padding: 15px 16px 14px; }
.statband .st-n {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--primary-dark);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.statband .st-l {
  display: block;
  margin-top: 5px;
  font-size: .74rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 600;
}
.statband .st-bad  { background: #fff5f6; }
.statband .st-bad  .st-n { color: var(--accent-dark); }
.statband .st-good { background: #f2fbf5; }
.statband .st-good .st-n { color: #15803d; }

/* --- Callouts ------------------------------------------------------------ */
.callout {
  border-radius: 10px;
  padding: 16px 18px 15px;
  margin: 18px 0;
  font-size: .96rem;
}
.callout > :first-child { margin-top: 0; }
.callout > :last-child  { margin-bottom: 0; }
.callout .co-tag {
  display: inline-block;
  margin: 0 0 8px;
  padding: 3px 9px;
  border-radius: 4px;
  font-size: .69rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.callout-warn { background: #fff5f6; border: 1px solid #fbcfd6; }
.callout-warn .co-tag { background: var(--accent); color: #fff; }
.callout-good { background: #f2fbf5; border: 1px solid #b7e4c7; }
.callout-good .co-tag { background: #15803d; color: #fff; }
.callout-note { background: var(--primary-soft); border: 1px solid #c7d2fe; }
.callout-note .co-tag { background: var(--primary); color: #fff; }

/* --- Numbered procedure -------------------------------------------------- */
/* Numbered because the verification steps are a real sequence: you cannot ring
   the hospital until you have the plan name off the listing. */
ol.steps { list-style: none; margin: 18px 0; padding: 0; counter-reset: step; }
ol.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 44px;
  margin: 0 0 16px;
  font-size: .96rem;
}
ol.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: -1px;
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
}
ol.steps li:last-child { margin-bottom: 0; }

/* --- Card grid ----------------------------------------------------------- */
.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 14px;
  margin: 20px 0;
}
.pcard {
  display: block;
  background: #fff;
  border: 1px solid #e2e2ef;
  border-radius: 10px;
  padding: 16px 17px;
  text-decoration: none;
  color: inherit;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.pcard:hover {
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(49, 46, 129, .10);
  transform: translateY(-2px);
}
.pcard .pc-t {
  display: block;
  font-weight: 700;
  color: var(--primary-dark);
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.pcard:hover .pc-t { color: var(--primary); }
.pcard .pc-d { display: block; font-size: .89rem; color: #5b6273; line-height: 1.5; }
.pcard .pc-flag {
  display: inline-block;
  margin-top: 9px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #fff5f6;
  color: var(--accent-dark);
}
.pcard .pc-flag.ok { background: #f2fbf5; color: #15803d; }

/* --- Section rhythm ------------------------------------------------------ */
.sec h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 9px;
  border-radius: 2px;
  background: var(--primary);
  opacity: .8;
}
.hero h2::after, .sec-dark h2::after { display: none; }

/* --- Sticky mobile CTA --------------------------------------------------- */
.zl-sticky {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--primary-dark);
  box-shadow: 0 -3px 14px rgba(0,0,0,.18);
}
.zl-sticky-txt { flex: 1; color: #fff; font-size: .86rem; line-height: 1.3; }
.zl-sticky-btn {
  flex: 0 0 auto;
  background: #fff;
  color: var(--primary-dark);
  font-weight: 700;
  font-size: .9rem;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 720px) { .zl-sticky { display: flex; } body { padding-bottom: 62px; } }
@media (prefers-reduced-motion: reduce) {
  .pcard { transition: none; }
  .pcard:hover { transform: none; }
}

/* Whole-card links: the site-wide underline rule reaches the inner spans. */
.pcard, .pcard:hover, .pcard * { text-decoration: none; }