:root {
  /* Anchor: teal. Accent: warm amber, used sparingly so it always means
     something (help, savings, the thing you should read). Semantics are a
     separate axis from the accent so "cheap/expensive" never fights the brand. */
  --primary:      #1e40af;   /* teal 700  - actions, links, brand */
  --primary-dark: #1e3a8a;   /* teal 900  - headers, dark bands */
  --primary-soft: #eef2ff;   /* cool tint band */

  --accent:       #b45309;   /* burnt orange - 6.96:1 vs page, 7.31:1 white label */
  --accent-dark:  #92400e;
  --accent-soft:  #fff7ed;   /* warm tint band */

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

  --bg:      #f7f8fb;
  --surface: #ffffff;
  --text:    #1f2937;        /* near-black, green-biased */
  --muted:   #5b6472;
  --border:  #cdd5e1;
}

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:#5b6472;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:#1e40af;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:#115e59}
.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:#ecfdf5;border:1px solid #a7f3d0;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, #1e40af);
  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: #a7f3d0;
}

/* ---- 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: #a7f3d0; }
.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: #f6faf9; }
.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) {
  /* One column (2026-09-26). `1fr auto` with a fixed 180px search in column 2 was wider than a
     phone: a 1fr track will not shrink below the brand's min-content, so the header ran past the
     screen. The search sits on its own row under the title anyway; it gets that row, right-aligned. */
  .header-row { grid-template-columns: minmax(0, 1fr); gap: 14px 12px; }
  .header-row .brand { grid-column: 1; }
  .header-row .site-search { grid-column: 1 / -1; width: 100%; max-width: 180px; justify-self: end; }
  /* the box is right-aligned, so the dropdown opens leftwards onto the screen */
  .header-row .search-results { right: 0; left: auto; }
  .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; }
}


/* Medicare-age notice on the lead form. */
.zr-medicare{border:1px solid #bcd3d6;border-left:4px solid #2e7d8a;background:#f2f9fa;
  border-radius:6px;padding:16px 18px;margin:12px 0;display:flex;flex-direction:column;gap:9px}
.zr-medicare .zr-head{font-weight:700;margin:0;color:#1d5560}
.zr-medicare .zr-body{margin:0;font-size:.94rem;line-height:1.55;color:#33474a}
.zr-medicare a{color:#1d5560;text-decoration:underline}

/* "How should I reach you?" and the client quote under the form (2026-09-29).
   Tap targets, not a select: same pattern as the coverage-scope question. */
.lf-reach { position: relative; border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.lf-reach legend { padding: 0; font-size: .85rem; font-weight: 600; margin: 0 0 7px; }
.lf-reach .lf-reach-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lead-form .lf-reach input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; pointer-events: none; }
.lead-form .lf-reach-row label { margin: 0; padding: 11px 6px; text-align: center; font-size: .92rem; font-weight: 500;
  border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text); cursor: pointer; }
.lead-form .lf-reach-row label:hover { border-color: var(--primary); }
.lead-form .lf-reach input[type="radio"]:checked + label { border-color: var(--primary-dark); background: var(--primary-soft);
  box-shadow: inset 0 0 0 1px var(--primary-dark); font-weight: 600; }
.lead-form .lf-reach input[type="radio"]:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; }
.lf-opt { font-weight: 400; color: var(--muted); }
.lf-review { max-width: 640px; margin: 18px 0 0; padding: 14px 16px; background: #fff; border: 1px solid var(--border); border-radius: 10px; }
.lf-review .lf-review-stars { margin: 0 0 4px; color: #b8730a; letter-spacing: 2px; }
.lf-review blockquote { margin: 0; padding: 0; border: 0; font-size: .93rem; line-height: 1.55; color: var(--text); font-style: normal; }
.lf-review figcaption { margin: 8px 0 0; font-size: .8rem; color: var(--muted); }

/* ==== PAPER & PEN redesign (2026-10-05) ====================================
   Generated by site-tools/redesign/apply_redesign.py from paper-layer.css.
   Edit the template there and re-run; this block is replaced between markers.
   Appended LAST so it overrides the older rules above at equal specificity.
   ========================================================================== */
@font-face { font-family: "Young Serif"; src: url("/fonts/young-serif-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/nunito-latin.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/fonts/nunito-italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/fonts/caveat-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --pp-ink: #111827; --pp-body: #1f2937; --pp-muted: #4d625d;
  --pp-brand: #1e40af; --pp-brand-dark: #1e3a8a; --pp-pen: #b45309; --pp-on-dark-pen: #f6c99c;
  --pp-cta: #b45309; --pp-cta-hover: #92400e; --pp-cta-ink: #ffffff; --pp-hl: #fcd9a4;
  --pp-paper: #f7f8fb; --pp-grid-img: linear-gradient(rgba(15, 118, 110, .085) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 118, 110, .045) 1px, transparent 1px); --pp-grid-size: 100% 32px, 180px 100%;
  --pp-tape: rgba(205, 232, 226, .88); --pp-tape-edge: rgba(15, 118, 110, .2); --pp-sticky: #fbe1c4; --pp-soft: #dcefea; --pp-warn-soft: #fff7ed;
  --pp-rule: rgba(13, 28, 24, .14); --pp-rule-strong: #9dbdb6; --pp-focus: rgba(15, 118, 110, .2); --pp-underline: rgba(15, 118, 110, .4);
  --pp-squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 10'%3E%3Cpath d='M2 6 C 14 2, 24 9, 36 5 S 58 2, 70 6 S 86 8, 90 4' fill='none' stroke='%239a3412' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --pp-rule-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7 C 180 3, 380 10, 600 6 S 1010 3, 1198 8' fill='none' stroke='%230d1c18' stroke-opacity='.55' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --pp-check-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M4 5 L 26 3.5 L 27 26 L 4.5 27.5 Z' fill='none' stroke='%230d1c18' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M7 15 L 13 22 L 29 1' fill='none' stroke='%239a3412' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pp-check-box: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath d='M4 5 L 26 3.5 L 27 26 L 4.5 27.5 Z' fill='none' stroke='%230d1c18' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pp-serif: "Young Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --pp-sans: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --pp-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --pp-wobble: 255px 16px 225px 16px / 16px 225px 16px 255px;
  --pp-wobble-2: 16px 225px 16px 255px / 255px 16px 225px 16px;
  --pp-sheet-shadow: 0 1px 2px rgba(20, 24, 40, .1), 0 16px 32px -22px rgba(20, 24, 40, .4);
  --pp-tilt: -0.6deg;
  --pp-tape-x: 50%;
  --pp-tape-r: -3deg;
  --pp-band: max(12px, calc((100% - 1240px) / 2));
}

/* ---------- paper, type, ink ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--pp-sans);
  color: var(--pp-body);
  background-color: var(--pp-paper);
  background-image: var(--pp-grid-img);
  background-size: var(--pp-grid-size);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: clip;
}
h1, h2, h3 { font-family: var(--pp-serif); font-weight: 400; color: var(--pp-ink); letter-spacing: -.005em; text-wrap: balance; }
h2 { line-height: 1.18; }
h3 { line-height: 1.25; }
h4, h5, h6 { font-family: var(--pp-sans); font-weight: 800; color: var(--pp-ink); }
strong, b { font-weight: 800; }
::selection { background: var(--pp-hl); color: var(--pp-ink); }

main a:not([class]), .sec a:not([class]), .hero a:not([class]), .intro a:not([class]), .related-articles a, .xref a, footer .disclaimer a {
  color: var(--pp-brand-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: var(--pp-underline);
  transition: color .15s ease, text-decoration-color .15s ease;
}
main a:not([class]):hover, .sec a:not([class]):hover, .hero a:not([class]):hover, .intro a:not([class]):hover, .related-articles a:hover {
  color: var(--pp-brand);
  text-decoration-color: currentColor;
}

/* ---------- header: logo + nav + search on top, the page title below on paper ---------- */
header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  padding: 0 max(16px, calc((100% - 1200px) / 2)) !important;
  background: transparent !important;
  color: var(--pp-ink) !important;
  text-align: left !important;
}
header > .header-row, header > .header-navbar, header > .header-navbar > .container { display: contents !important; }
header .brand {
  grid-column: 1; grid-row: 1;
  margin: 0 !important; padding: 16px 0 12px;
  color: var(--pp-brand) !important;
}
header .brand:hover { opacity: 1; }
header .brand-name { color: var(--pp-brand-dark); font-family: var(--pp-sans); font-weight: 800; font-size: 1.32rem; }
header .brand-name b { font-weight: 400; opacity: .7; }
header .brand-mark {
  width: 46px; height: 46px; padding: 6px;
  background: transparent !important; box-shadow: none !important; border-radius: 0;
  overflow: visible;
}
header .pp-head-cta { grid-column: 2; grid-row: 1; justify-self: end; }
header .site-search { grid-column: 3; grid-row: 1; width: 240px !important; max-width: none !important; margin: 0 !important; justify-self: end; align-self: center; }
header .site-search input {
  width: 100%;
  padding: 10px 14px 10px 38px !important;
  font: 600 .95rem var(--pp-sans) !important;
  color: var(--pp-ink) !important;
  background: #fff !important;
  border: 2px solid var(--pp-rule-strong) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
header .site-search input::placeholder { color: var(--pp-muted) !important; opacity: 1; }
header .site-search input:focus { border-color: var(--pp-brand) !important; box-shadow: 0 0 0 4px var(--pp-focus) !important; outline: none; }
header .site-search .search-icon { color: var(--pp-muted) !important; left: 13px !important; }
header .site-search input::-webkit-search-cancel-button { filter: none; }
header .search-chips .chips-label { color: var(--pp-muted); }
header .search-chip { background: #fff; border: 1.5px solid var(--pp-rule-strong); color: var(--pp-ink); }
header .search-chip:hover { background: var(--pp-hl); }

header .site-nav {
  grid-column: 1 / -1; grid-row: 2;
  margin: 0 !important; padding: 2px 0 6px !important;
  display: flex; flex-wrap: wrap !important; gap: 2px 4px !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}
header .site-nav a {
  color: var(--pp-ink) !important;
  font-weight: 700; font-size: .98rem !important;
  padding: 8px 12px !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: var(--pp-squiggle) !important;
  background-repeat: no-repeat !important;
  background-position: 12px calc(100% - 2px) !important;
  background-size: 0 7px !important;
  transition: background-size .35s ease !important;
}
header .site-nav a:hover, header .site-nav a:focus-visible { background-size: calc(100% - 24px) 7px !important; }
header::after {
  content: "";
  grid-column: 1 / -1; grid-row: 3;
  height: 12px;
  background: var(--pp-rule-svg) center / 100% 12px no-repeat;
}
header .header-center {
  grid-column: 1 / -1; grid-row: 4;
  position: relative;
  text-align: left !important;
  padding: clamp(26px, 5vw, 54px) 0 clamp(18px, 3vw, 34px);
  min-height: 0;
}
header .header-center h1 {
  margin: 0 !important;
  max-width: 21ch;
  font-family: var(--pp-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 4.6vw, 3.4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.012em !important;
  color: var(--pp-ink) !important;
  text-wrap: balance;
}
header .header-center .subtitle {
  margin: 24px 0 0 !important;
  max-width: 58ch !important;
  font-size: 1.16rem !important;
  line-height: 1.55 !important;
  color: var(--pp-body) !important;
  opacity: 1 !important;
}
header .header-center .call-link { margin: 14px 0 0 !important; font-size: 1rem !important; }
header .header-center .call-link a {
  display: inline-block;
  font-family: var(--pp-hand); font-weight: 700; font-size: 1.75rem; line-height: 1.1;
  color: var(--pp-pen) !important;
  text-decoration: none !important; border: 0 !important;
  transform: rotate(-1.5deg); transform-origin: left center;
}
header .header-center .call-link a:hover { transform: rotate(-1.5deg) scale(1.03); }
header .header-center .trust-badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 12px 0 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  font-size: .92rem !important; font-weight: 700; letter-spacing: .01em;
  color: var(--pp-muted) !important;
}
header .header-center .trust-badge::before {
  content: ""; width: 22px; height: 22px; flex: 0 0 22px;
  background: var(--pp-check-svg) center / contain no-repeat;
}
@media (min-width: 900px) {
  header .header-center { padding-right: 230px; }
}
@media (max-width: 899px) {
  header { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  header .site-search { width: min(190px, 46vw) !important; }
  header .pp-head-cta { display: none; }
  header .site-nav { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; margin: 0 -16px !important; padding: 0 16px 6px !important; }
  header .site-nav::-webkit-scrollbar { display: none; }
  header .site-nav a { flex: 0 0 auto; }
  header .brand-name { font-size: 1.12rem; }
  header .brand-mark { width: 40px; height: 40px; }
}
@media (max-width: 560px) {
  header .brand-name { font-size: 1.04rem; }
  header .site-search { width: 46px !important; }
  header .site-search input { padding: 10px 0 10px 40px !important; height: 46px; }
  header .site-search input::placeholder { color: transparent !important; }
  header .site-search:focus-within { position: absolute; top: 12px; right: 16px; width: calc(100% - 32px) !important; z-index: 30; }
  header .site-search:focus-within input { padding-right: 14px !important; }
  header .site-search:focus-within input::placeholder { color: var(--pp-muted) !important; }
  header .site-search .search-chips { display: none; }
}

/* ---------- hand-drawn buttons: the one loud colour on every page ---------- */
button[type="submit"], .cta-button, .zl-btn, .cta-btn, .inline-cta-btn, #estimate-btn, .zl-sticky-btn, .pp-btn, .bhero-cta.pp-btn {
  font-family: var(--pp-sans) !important;
  font-weight: 800 !important;
  background: var(--pp-cta) !important;
  color: var(--pp-cta-ink) !important;
  border: 2.5px solid var(--pp-ink) !important;
  border-radius: var(--pp-wobble) !important;
  box-shadow: 3px 4px 0 var(--pp-ink) !important;
  text-decoration: none !important;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
  cursor: pointer;
}
button[type="submit"]:hover, .cta-button:hover, .zl-btn:hover, .cta-btn:hover, .inline-cta-btn:hover, #estimate-btn:hover, .zl-sticky-btn:hover, .pp-btn:hover {
  background: var(--pp-cta-hover) !important;
  color: var(--pp-cta-ink) !important;
  opacity: 1 !important;
  animation: ppWiggle .45s ease;
}
button[type="submit"]:active, .cta-button:active, .zl-btn:active, .cta-btn:active, .inline-cta-btn:active, .pp-btn:active {
  transform: translate(3px, 4px) !important;
  box-shadow: 0 0 0 var(--pp-ink) !important;
}
.zl-btn, .cta-btn, .inline-cta-btn, .cta-button, .pp-btn { padding: 14px 26px !important; font-size: 1.04rem !important; }
.zl-btn-full { padding: 16px !important; font-size: 1.1rem !important; }
@keyframes ppWiggle { 0% { transform: rotate(0); } 30% { transform: rotate(-1.6deg); } 60% { transform: rotate(1.2deg); } 100% { transform: rotate(0); } }

/* ---------- inputs ---------- */
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"], select,
.zl-row input, .zl-grid input, .lead-form input, .lead-form select, .zip-row input {
  font-family: var(--pp-sans) !important;
  border: 2px solid var(--pp-rule-strong) !important;
  border-radius: 14px !important;
  background: #fff;
  color: var(--pp-ink);
}
input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="number"]:focus, select:focus,
.zl-row input:focus, .zl-grid input:focus, .lead-form input:focus, .lead-form select:focus, .zip-row input:focus {
  outline: none !important;
  border-color: var(--pp-brand) !important;
  box-shadow: 0 0 0 4px var(--pp-focus) !important;
}
.zl-locked { background: var(--pp-paper) !important; }
label { font-weight: 800; color: var(--pp-ink); }

/* ---------- the form card: an index card taped to the page ---------- */
.zip-lead, .form-section, .lead-form, .zipbox:not(.lead-form .zipbox), .cc-calc {
  position: relative;
  background: #fff !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: var(--pp-sheet-shadow) !important;
}
.zip-lead, .form-section, .lead-form { padding: 32px 30px 26px !important; transform: rotate(var(--pp-tilt)); }
.lead-form { max-width: 680px; }
.zip-lead::before, .form-section::before, .lead-form::before {
  content: ""; position: absolute; top: -14px; left: var(--pp-tape-x);
  width: 112px; height: 28px;
  transform: translateX(-50%) rotate(var(--pp-tape-r));
  background: var(--pp-tape);
  border: 1px solid var(--pp-tape-edge);
  pointer-events: none;
}
.zip-lead h2, .form-section h2, .step2 h3, .hero-lead .lead-form h3 { font-family: var(--pp-serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 1.9rem) !important; color: var(--pp-ink); }
.zl-sub, .s2-sub { color: var(--pp-body) !important; font-size: 1rem !important; }
.zl-trust, .form-trust-row, .zip-hint, .lf-note { color: var(--pp-muted) !important; }
.zl-ok, .zl-reveal, .zip-result {
  background: var(--pp-soft) !important;
  border: 0 !important; border-left: 0 !important;
  border-radius: 14px !important;
  color: var(--pp-ink) !important;
}
.zl-rev-head, .zip-result .zr-head { font-family: var(--pp-serif); font-weight: 400 !important; font-size: 1.3rem !important; color: var(--pp-ink) !important; }
.lf-reach .lf-reach-row label, .zl-scope label {
  border: 2px solid var(--pp-rule-strong) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  background: #fff !important;
}
.lead-form .lf-reach input[type="radio"]:checked + label, .zl-scope input:checked + label {
  background: var(--pp-brand) !important; border-color: var(--pp-brand) !important; color: #fff !important; box-shadow: none !important;
}
.lf-review, .lf-review:where(figure) {
  position: relative;
  max-width: 640px;
  margin: 30px 0 0 !important;
  padding: 26px 26px 20px !important;
  background: #fff !important; border: 0 !important; border-radius: 4px !important;
  box-shadow: var(--pp-sheet-shadow) !important;
  transform: rotate(calc(var(--pp-tilt) * -1.6));
}
.lf-review::before {
  content: ""; position: absolute; top: -12px; left: 34px; width: 92px; height: 24px;
  transform: rotate(-6deg); background: var(--pp-tape); border: 1px solid var(--pp-tape-edge);
}
.lf-review .lf-review-stars { color: var(--pp-pen) !important; }
.lf-review blockquote { font-family: var(--pp-serif) !important; font-size: 1.12rem !important; line-height: 1.5 !important; color: var(--pp-ink) !important; }
.lf-review figcaption { font-family: var(--pp-hand); font-size: 1.45rem !important; font-weight: 700; color: var(--pp-pen) !important; }

/* ---------- sheets of paper: content blocks ---------- */
.intro > article, .related-articles, .estimator-teaser, .bdetails, .estimator-result-box {
  position: relative;
  background: #fff !important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: var(--pp-sheet-shadow) !important;
}
.intro > article { padding: 34px clamp(20px, 3.4vw, 40px) 30px !important; margin-bottom: 34px !important; }
.intro > article::before {
  content: ""; position: absolute; top: -13px; left: 48px; width: 104px; height: 26px;
  transform: rotate(-4deg); background: var(--pp-tape); border: 1px solid var(--pp-tape-edge);
}
.intro > article:nth-of-type(even)::before { left: auto; right: 56px; transform: rotate(3deg); }
.intro > article > h2:first-child, .sec > .container > h2:first-child, .bsection-h, .related-articles + h2 {
  position: relative;
}
.intro > article > h2:first-child::after, .sec > .container > h2:first-child::after, .bsection-h::after {
  content: ""; display: block !important;
  width: 92px; height: 10px; margin-top: 8px;
  background: var(--pp-squiggle) left center / 92px 10px no-repeat !important;
  border-radius: 0 !important; opacity: 1 !important;
}
.sec-dark h2:first-child::after, .hero h2::after { display: none !important; }
.related-articles h3 {
  font-family: var(--pp-hand) !important;
  font-size: 1.85rem !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  color: var(--pp-pen) !important;
  transform: rotate(-1.5deg); transform-origin: left center;
  margin-bottom: 6px !important;
}
.related-articles { padding: 24px 28px !important; }
.city-stats { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.city-stats li { background: var(--pp-soft); border-radius: 999px; padding: 6px 14px; font-size: .95rem; }

/* notes that used to be "left-border cards" become sticky notes and pen-marked boxes */
.answer-lead {
  background: var(--pp-sticky) !important;
  border: 0 !important; border-left: 0 !important;
  border-radius: 2px !important;
  box-shadow: 0 12px 20px -16px rgba(20, 24, 40, .55);
  transform: rotate(-.35deg);
  padding: 20px 22px !important;
}
.xref, .disclosure, .wage-note, .wage-verdict, .zl-blocked, .zl-medicare, .zr-medicare, .carrier-alert, .callout {
  border: 2px dashed var(--pp-rule-strong) !important;
  border-left-width: 2px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, .85) !important;
}
.carrier-alert, .callout-warn, .wage-verdict.is-over { border-color: var(--pp-pen) !important; background: var(--pp-warn-soft) !important; position: relative; }
.carrier-alert::before, .callout-warn::before {
  content: "heads up!";
  display: block;
  font-family: var(--pp-hand); font-size: 1.6rem; font-weight: 700; line-height: 1;
  color: var(--pp-pen);
  transform: rotate(-2deg); transform-origin: left center;
  margin: 0 0 8px;
}
.callout .co-tag { border-radius: 999px !important; }
.callout-warn .co-tag { display: none; }

/* ---------- bands ---------- */
.sec-dark, .cta-box, .inline-cta, .bhero-link {
  background: var(--pp-brand-dark) !important;
  background-image: none !important;
  color: #fff;
}
.sec-dark { margin: 28px var(--pp-band); border-radius: 30px; padding: 52px 0 !important; }
.sec-dark .container { padding-inline: clamp(18px, 4vw, 44px); }
.sec-dark h2, .sec-dark h3, .cta-box .cta-headline, .inline-cta-head { font-family: var(--pp-serif); font-weight: 400 !important; color: #fff !important; }
.cta-box, .inline-cta { position: relative; border-radius: 28px !important; padding: 38px 28px 32px !important; }
.cta-box .cta-headline { font-size: clamp(1.4rem, 2.6vw, 1.9rem) !important; line-height: 1.2; text-wrap: balance; }
.cta-box::before, .inline-cta::before {
  content: "free \00B7  no account \00B7  about 30 seconds";
  display: block; margin: 0 0 10px;
  font-family: var(--pp-hand); font-size: 1.45rem; font-weight: 700; line-height: 1;
  color: var(--pp-on-dark-pen);
  transform: rotate(-1.5deg);
}
.cta-sub a, .sec-dark a:not(.cta-button) { color: #fff !important; }
.sec-alt, .sec-warm {
  position: relative;
  margin: 34px var(--pp-band);
  background: #fff !important;
  border-radius: 4px;
  box-shadow: var(--pp-sheet-shadow);
}
.sec-warm { background: var(--pp-sticky) !important; }
.sec-alt::before, .sec-warm::before {
  content: ""; position: absolute; top: -13px; left: 9%; width: 110px; height: 26px;
  transform: rotate(-3deg); background: var(--pp-tape); border: 1px solid var(--pp-tape-edge);
}
.sec-alt:nth-of-type(even)::before { left: auto; right: 9%; transform: rotate(4deg); }
.hero { background: transparent !important; }
.hc-check { background: transparent !important; border: 0 !important; }
.hc-check .hc-tag, .hc-tag {
  background: none !important; padding: 0 !important; border-radius: 0 !important;
  font-family: var(--pp-hand); font-size: 1.6rem !important; font-weight: 700 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--pp-pen) !important;
  transform: rotate(-2deg); transform-origin: left center;
}
.hc-steps li::before { border-radius: 50% 45% 55% 48% !important; border-color: var(--pp-pen) !important; color: var(--pp-pen) !important; font-family: var(--pp-hand); font-size: 1.1rem !important; }
ol.steps li::before { border-radius: 48% 52% 46% 54% !important; background: transparent !important; border: 2px solid var(--pp-pen); color: var(--pp-pen) !important; font-family: var(--pp-hand); font-size: 1.3rem !important; }

/* stat bands and cards */
.statband { background: transparent !important; border: 0 !important; gap: 14px !important; overflow: visible !important; }
.statband .st { background: #fff !important; border-radius: 6px; box-shadow: var(--pp-sheet-shadow); }
.statband .st:nth-child(odd) { transform: rotate(-.6deg); }
.statband .st:nth-child(even) { transform: rotate(.5deg); }
.statband .st-n, .stat-strip b, .stat .n, .wf-n { font-family: var(--pp-serif); font-weight: 400 !important; }
.statband .st-l { font-family: var(--pp-hand); font-size: 1.25rem !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 700 !important; color: var(--pp-muted) !important; }
.pcard, .seg-card, .bcard-link {
  border: 0 !important; border-radius: 22px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(20, 24, 40, .08) !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.pcard:hover, .seg-card:hover, .bcard-link:hover { transform: translateY(-3px) rotate(-.6deg) !important; box-shadow: 0 16px 26px -18px rgba(20, 24, 40, .5) !important; }
.pcard .pc-t, .seg-card strong, .bcard-title { font-family: var(--pp-serif); font-weight: 400 !important; color: var(--pp-ink) !important; font-size: 1.18rem !important; }
.bcard-cat, .bhero-flag { font-family: var(--pp-hand); font-size: 1.2rem !important; font-weight: 700; text-transform: none !important; letter-spacing: 0 !important; color: var(--pp-pen) !important; background: none !important; padding: 0 !important; }
.bhero-flag { color: var(--pp-on-dark-pen) !important; }
.bhero-link { border-radius: 28px !important; }
.bchip { border-radius: var(--pp-wobble) !important; border: 2px solid var(--pp-rule-strong) !important; background: #fff !important; font-weight: 700; }
.bchip:hover { background: var(--pp-hl) !important; color: var(--pp-ink) !important; }
.bchips { background: transparent !important; border: 0 !important; padding: 0 !important; }

/* tables */
.plan-tbl thead th, main table thead th, .sec table thead tr {
  background: var(--pp-brand-dark) !important; color: #fff !important;
  font-family: var(--pp-sans); font-weight: 800 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: .9rem !important;
}
.plan-tbl th, .plan-tbl td { border-color: var(--pp-rule) !important; }
main table, .plan-tbl { border-radius: 6px !important; box-shadow: var(--pp-sheet-shadow); border: 0 !important; }
main table td, .sec table tbody td { border-bottom: 1px dashed var(--pp-rule-strong) !important; }

/* FAQ */
.faq-item, details { border-bottom: 2px dashed var(--pp-rule) ; }
details summary { color: var(--pp-ink) !important; font-family: var(--pp-serif); font-weight: 400 !important; font-size: 1.1rem; padding: 12px 0; }
details summary:hover { color: var(--pp-brand) !important; }

/* sticky mobile bar */
.zl-sticky { background: var(--pp-brand-dark) !important; }
.zl-sticky-txt { font-weight: 700; }
.zl-sticky-btn { padding: 10px 16px !important; box-shadow: 2px 3px 0 #000 !important; border-color: #000 !important; }

/* footer: a hand-drawn rule, then plain small print */
footer {
  position: relative;
  text-align: left !important;
  padding: 26px max(16px, calc((100% - 1200px) / 2)) 40px !important;
  color: var(--pp-body) !important;
  background: transparent !important;
}
footer::before { content: ""; display: block; height: 12px; margin-bottom: 18px; background: var(--pp-rule-svg) center / 100% 12px no-repeat; }
footer .container { max-width: none; padding: 0; }
footer .site-nav, footer .foot-nav { justify-content: flex-start !important; margin-top: 0 !important; }
footer .site-nav a, footer .foot-nav a { color: var(--pp-brand-dark) !important; font-weight: 700; }
footer .disclaimer { max-width: 86ch !important; margin: 0 0 12px !important; font-size: .86rem !important; color: var(--pp-muted) !important; }

/* ---------- injected by paper.js (decoration only, aria-hidden) ---------- */
.pp-doodle {
  position: absolute; right: 0; top: 50%;
  width: 190px; height: 190px; margin-top: -95px;
  pointer-events: none;
}
.pp-doodle svg { width: 100%; height: 100%; overflow: visible; }
.pp-doodle .pp-ink { fill: none; stroke: var(--pp-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pp-doodle .pp-penline { fill: none; stroke: var(--pp-pen); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pp-doodle .pp-blob { fill: var(--pp-soft); }
.pp-doodle.pp-flip svg { transform: scaleX(-1); }
@media (max-width: 899px) { .pp-doodle { display: none; } }

.pp-note {
  display: block;
  margin: 12px 0 0;
  font-family: var(--pp-hand); font-weight: 700; font-size: 1.6rem; line-height: 1.1;
  color: var(--pp-pen);
  transform: rotate(var(--pp-note-r, -2deg)); transform-origin: left center;
}
@media (min-width: 900px) {
  header .header-center .pp-note {
    position: absolute; right: 0; top: calc(50% + 92px);
    width: 210px; margin: 0; text-align: center;
    transform-origin: center;
  }
}
.pp-sticky {
  position: relative;
  width: min(250px, 80%);
  margin: 18px 0 0 auto;
  padding: 16px 18px 18px;
  background: var(--pp-sticky);
  font-family: var(--pp-hand); font-size: 1.5rem; font-weight: 700; line-height: 1.12;
  color: var(--pp-ink);
  box-shadow: 0 12px 20px -14px rgba(20, 24, 40, .6);
  transform: rotate(var(--pp-sticky-r, 3deg));
  transition: transform .3s ease;
}
.pp-sticky:hover { transform: rotate(0deg) scale(1.03); }
@media (min-width: 900px) {
  .zip-lead > .pp-sticky-pin, .form-section > .pp-sticky-pin { position: absolute; top: -34px; right: -26px; width: 200px; margin: 0; z-index: 3; font-size: 1.38rem; }
  .zip-lead h2, .form-section h2 { padding-right: 160px; }
}
@media (min-width: 1040px) {
  .lead-form > .pp-sticky-pin { position: absolute; top: 18px; left: calc(100% + 30px); width: 210px; margin: 0; z-index: 3; font-size: 1.4rem; }
}
.pp-starthere {
  display: flex; align-items: center; gap: 6px;
  margin: -4px 0 10px;
  font-family: var(--pp-hand); font-weight: 700; font-size: 1.45rem; line-height: 1;
  color: var(--pp-pen);
}
.pp-starthere svg { width: 40px; height: 30px; }
.pp-obj { position: absolute; pointer-events: none; z-index: 2; }
.pp-head-cta { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px !important; font-size: 1rem !important; white-space: nowrap; }
.pp-hl {
  background-color: transparent;
  color: inherit;
  padding: 0 .12em;
  margin: 0 -.06em;
  background-image: linear-gradient(100deg, transparent .2em, var(--pp-hl) .35em, var(--pp-hl) calc(100% - .3em), transparent 100%);
  background-repeat: no-repeat;
  background-position: 0 72%;
  background-size: 0% 70%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size .9s cubic-bezier(.3, .8, .3, 1);
}
.pp-hl.pp-on { background-size: 100% 70%; }
.pp-circle { position: relative; white-space: nowrap; display: inline-block; }
.pp-circle > svg { position: absolute; left: -12%; top: -24%; width: 124%; height: 148%; overflow: visible; pointer-events: none; }
.pp-circle > svg path { fill: none; stroke: var(--pp-pen); stroke-width: 2.4; stroke-linecap: round; }
.pp-underline { position: relative; white-space: nowrap; }
.pp-underline > svg { position: absolute; left: -2%; bottom: -.32em; width: 104%; height: .42em; overflow: visible; pointer-events: none; }
.pp-underline > svg path { fill: none; stroke: var(--pp-pen); stroke-width: 5; stroke-linecap: round; }
.pp-draw path { stroke-dasharray: 1 1.2; stroke-dashoffset: 1.1; }
.pp-draw:not(.pp-on) path:not(.pp-blob) { opacity: 0; }
.pp-draw.pp-on path { animation: ppDraw 1.1s cubic-bezier(.45, .1, .3, 1) forwards; }
.pp-draw.pp-on path:nth-of-type(2) { animation-delay: .35s; }
.pp-draw.pp-on path:nth-of-type(3) { animation-delay: .6s; }
.pp-draw.pp-on path:nth-of-type(4) { animation-delay: .8s; }
.pp-draw.pp-on path:nth-of-type(n+5) { animation-delay: 1s; }
@keyframes ppDraw { to { stroke-dashoffset: 0; } }

/* scroll reveals (only when paper.js is running; it un-hides everything after 2s regardless) */
.pp-js .pp-rise { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .3, 1); }
.pp-js .pp-rise.pp-on { opacity: 1; transform: none; }
.pp-js .wage-chart .wc-bar, .pp-js .wage-chart .wc-over, .pp-js .wage-chart .wc-cur { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform 1s cubic-bezier(.2, .8, .3, 1); }
.pp-js .wage-chart.pp-on .wc-bar, .pp-js .wage-chart.pp-on .wc-over, .pp-js .wage-chart.pp-on .wc-cur { transform: scaleX(1); }

/* ---------- homepages (all three share these pieces, each in its own colours) ---------- */
header .header-center:has(.home-hero) { padding-right: 0 !important; padding-top: clamp(20px, 4vw, 44px); }
.home-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 40px 60px; align-items: start; }
.home-hero .hh-left { min-width: 0; display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }
.hh-kicker { margin: 0; font-family: var(--pp-hand); font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--pp-pen); transform: rotate(-2deg); transform-origin: left center; }
header .header-center .home-hero h1 { max-width: 15ch; font-size: clamp(2.3rem, 4.8vw, 3.9rem) !important; }
header .header-center .home-hero .subtitle { margin-top: 12px !important; font-size: 1.2rem !important; }
.hh-checks { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hh-checks li { display: flex; gap: 12px; align-items: flex-start; font-weight: 800; font-size: 1.08rem; color: var(--pp-ink); }
.hh-checks svg { flex: 0 0 26px; width: 26px; height: 26px; overflow: visible; }
.hh-checks .ck-box { fill: none; stroke: var(--pp-ink); stroke-width: 2; stroke-linejoin: round; }
.hh-checks .ck-tick { fill: none; stroke: var(--pp-pen); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.2; stroke-dashoffset: 1.1; animation: ppDraw .6s ease forwards; }
.hh-checks li:nth-child(1) .ck-tick { animation-delay: .9s; }
.hh-checks li:nth-child(2) .ck-tick { animation-delay: 1.25s; }
.hh-checks li:nth-child(3) .ck-tick { animation-delay: 1.6s; }
.hh-oep { margin: 0; font-size: .98rem; color: var(--pp-muted); }
.hh-oep strong { color: var(--pp-ink); font-variant-numeric: tabular-nums; }
.home-hero .trust-badge { margin-top: 0 !important; }
.hh-right { min-width: 0; display: flex; flex-direction: column; }
.home-hero .hero-card { position: relative; background: #fff; border-radius: 6px; padding: 30px 30px 24px; box-shadow: var(--pp-sheet-shadow); transform: rotate(-1deg); color: var(--pp-body); text-align: left; }
.home-hero .hero-card::before { content: ""; position: absolute; top: -15px; left: 50%; width: 116px; height: 30px; transform: translateX(-50%) rotate(3deg); background: var(--pp-tape); border: 1px solid var(--pp-tape-edge); }
.home-hero .hero-card h2, .home-hero .hero-card h3 { margin: 0; font-family: var(--pp-serif); font-weight: 400; font-size: 1.95rem; line-height: 1.15; color: var(--pp-ink); }
.hc-hand { margin: 2px 0 16px; font-family: var(--pp-hand); font-size: 1.5rem; font-weight: 700; color: var(--pp-pen); line-height: 1.1; }
.home-hero .zl-row { display: flex; gap: 10px; flex-wrap: wrap; }
.home-hero .zl-row input { flex: 1 1 170px; min-width: 0; height: 58px; padding: 0 16px; font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; }
.home-hero .zl-row .zl-btn { flex: 1 1 170px; height: 58px; }
.home-hero .form-sub { margin: 4px 0 14px; }
.home-hero #eligibility-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hh-sticky { align-self: flex-end; width: 240px; margin: -6px 8px 0 0; padding: 16px 18px 18px; background: var(--pp-sticky); font-family: var(--pp-hand); font-size: 1.45rem; font-weight: 700; line-height: 1.12; color: var(--pp-ink); box-shadow: 0 12px 20px -14px rgba(20, 24, 40, .55); transform: rotate(4deg); position: relative; z-index: 2; transition: transform .3s ease; }
.hh-sticky:hover { transform: rotate(0) scale(1.03); }
@media (max-width: 960px) {
  /* phones: headline, then the form straight away, then the supporting detail */
  .home-hero { display: flex; flex-direction: column; gap: 16px; }
  .home-hero .hh-left { display: contents; }
  .home-hero .hh-kicker { order: 1; }
  .home-hero h1 { order: 2; }
  .home-hero .hh-right { order: 3; margin: 10px 0 8px; }
  .home-hero .subtitle { order: 4; }
  .home-hero .hh-checks { order: 5; }
  .home-hero .hh-oep, .home-hero .call-link { order: 6; }
  .home-hero .trust-badge { order: 7; }
  .home-hero .hero-card, .home-hero .lead-form { transform: none; }
  .hh-sticky { transform: rotate(2deg); width: min(240px, 80%); }
}
@media (max-width: 560px) { .home-hero #eligibility-form { grid-template-columns: 1fr; } .home-hero .form-row.half, .home-hero .form-row-phone, .home-hero .form-row-zip { grid-column: 1 / -1 !important; } }

main.home, .home { padding: 0 !important; }
.home-sec { padding-block: clamp(44px, 7vw, 84px) 0; }
.home-last { padding-bottom: clamp(48px, 7vw, 88px); }
.home-wrap { max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }
.home-h2 { margin: 0; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.12; }
.home-h2-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 22px; margin-bottom: 32px; }
.hand { margin: 0; font-family: var(--pp-hand); font-weight: 700; font-size: 1.75rem; line-height: 1.1; color: var(--pp-pen); transform: rotate(-2deg); display: inline-block; }

.thread-row { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 56px; }
.thread-wrap { flex: 1 1 420px; max-width: 540px; min-width: 0; position: relative; padding: 20px 8px; }
.thread-blob { position: absolute; inset: -10px -20px; width: calc(100% + 40px); height: calc(100% + 20px); }
.thread-blob path { fill: var(--pp-soft); }
.thread { position: relative; margin: 0; background: #fff; border-radius: 28px; box-shadow: 0 2px 4px rgba(20, 24, 40, .06), 0 26px 48px -26px rgba(20, 24, 40, .45); overflow: hidden; }
.thread-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--pp-rule); }
.thread-av { flex: 0 0 46px; height: 46px; border-radius: 999px; background: var(--pp-brand); color: #fff; display: flex; align-items: center; justify-content: center; }
.thread-av svg { width: 25px; height: 24px; fill: currentColor; }
.thread-head div { display: flex; flex-direction: column; line-height: 1.3; }
.thread-head strong { font-size: 1.05rem; color: var(--pp-ink); }
.thread-head span { font-size: .88rem; color: var(--pp-muted); }
.thread-body { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 10px; font-size: 1rem; line-height: 1.45; }
.thread-body p { margin: 0; padding: 11px 15px; max-width: 82%; }
.thread-body .t-day { align-self: center; padding: 0; font-size: .82rem; font-weight: 700; color: var(--pp-muted); }
.t-me { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--pp-brand); color: #fff; }
.t-them { align-self: flex-start; border-radius: 20px 20px 20px 6px; background: #eceff3; color: var(--pp-ink); }
.thread figcaption { padding: 12px 20px 16px; border-top: 1px solid var(--pp-rule); font-size: .9rem; font-style: italic; color: var(--pp-muted); }
.pp-js .thread-body p:not(.t-day) { opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .45s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.pp-js .thread.pp-on .thread-body p { opacity: 1; transform: none; }
.thread.pp-on .thread-body p:nth-child(3) { transition-delay: .7s; }
.thread.pp-on .thread-body p:nth-child(4) { transition-delay: 1.4s; }
.thread.pp-on .thread-body p:nth-child(5) { transition-delay: 2.1s; }
.thread-notes { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.arrow-note { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--pp-hand); font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--pp-pen); }
.arrow-note span { display: inline-block; transform: rotate(-1.5deg); }
.arrow-note:nth-child(2) span { transform: rotate(1deg); }
.arrow-note svg { flex: 0 0 70px; width: 70px; height: 35px; }
.arrow-note svg path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.thread-notes .pp-btn, .home .pp-btn { align-self: flex-start; display: inline-flex; align-items: center; min-height: 56px; }

.dcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 22px; }
.dcard { background: #fff; border-radius: 24px; padding: 26px 28px; box-shadow: 0 1px 2px rgba(20, 24, 40, .08); display: flex; flex-direction: column; gap: 10px; transition: transform .2s ease, box-shadow .2s ease; }
.dcard:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 18px 28px -20px rgba(20, 24, 40, .5); }
.dcard svg { width: 74px; height: 74px; fill: none; stroke: var(--pp-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dcard svg .b { fill: var(--pp-soft); stroke: none; }
.dcard svg .p { stroke: var(--pp-pen); }
.dcard:hover svg { animation: ppWiggle .5s ease; }
.dcard h3 { margin: 0; font-size: 1.45rem; }
.dcard p { margin: 0; }
.dc-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: auto !important; padding-top: 6px; }
.dc-links a { font-weight: 800; }
.hand-sm { font-family: var(--pp-hand); font-size: 1.4rem; font-weight: 700; color: var(--pp-pen); transform: rotate(-3deg); display: inline-block; }

.hsteps { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 34px 52px; }
.hsteps li { display: flex; flex-direction: column; gap: 10px; }
.hs-n { position: relative; width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; font-family: var(--pp-hand); font-size: 2.6rem; font-weight: 700; color: var(--pp-pen); }
.hs-n svg { position: absolute; inset: 0; width: 66px; height: 66px; }
.hs-n svg path { fill: none; stroke: var(--pp-pen); stroke-width: 2.5; stroke-linecap: round; }
.hsteps h3 { margin: 0; font-family: var(--pp-sans); font-weight: 800; font-size: 1.25rem; }
.hsteps p { margin: 0; }

.cal-sheet { position: relative; background: #fff; border-radius: 6px; padding: clamp(24px, 4vw, 44px); box-shadow: var(--pp-sheet-shadow); }
.cal-sheet::before { content: ""; position: absolute; top: -14px; left: 60px; width: 110px; height: 28px; transform: rotate(-4deg); background: var(--pp-tape); border: 1px solid var(--pp-tape-edge); }
.cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 28px 40px; }
.cal-day { border-top: 3px solid var(--pp-brand); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.cd-d { margin: 0; font-family: var(--pp-serif); font-size: 3rem; line-height: 1; color: var(--pp-brand-dark); }
.cal-key .cd-d { align-self: flex-start; padding: 0 6px; background: linear-gradient(transparent 58%, var(--pp-hl) 58%); }
.cal-day h3 { margin: 0; font-family: var(--pp-sans); font-weight: 800; font-size: 1.15rem; }
.cal-day p:last-child { margin: 0; }

.scraps { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 44px 40px; margin-top: 8px; }
.scrap { position: relative; flex: 1 1 300px; min-width: 0; margin: 0; background: #fff; padding: 32px 28px 24px; box-shadow: var(--pp-sheet-shadow); display: flex; flex-direction: column; gap: 12px; }
.scrap::before { content: ""; position: absolute; top: -12px; left: 30px; width: 92px; height: 24px; transform: rotate(-6deg); background: var(--pp-tape); border: 1px solid var(--pp-tape-edge); }
.scrap:nth-child(1) { transform: rotate(-1.4deg); }
.scrap:nth-child(2) { transform: rotate(1.3deg); margin-top: 26px; }
.scrap:nth-child(3) { transform: rotate(-.7deg); }
.scrap-big { flex: 1 1 460px; }
.scrap blockquote { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--pp-ink); }
.scrap-big blockquote { font-family: var(--pp-serif); font-size: 1.55rem; line-height: 1.38; }
.scrap figcaption { font-family: var(--pp-hand); font-size: 1.6rem; font-weight: 700; color: var(--pp-pen); }
.more-line { margin: 34px 0 0; }
.more-line a { font-weight: 800; }

.carrier-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); column-gap: 56px; border-top: 2px solid var(--pp-ink); }
.carrier-list li { display: flex; flex-direction: column; gap: 4px; padding-block: 16px; border-bottom: 2px dashed var(--pp-rule); }
.carrier-list a, .carrier-list strong { font-family: var(--pp-serif); font-weight: 400; font-size: 1.3rem; color: var(--pp-ink); }
.carrier-list span { color: var(--pp-body); }

.libcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 28px 44px; }
.libcols nav { display: flex; flex-direction: column; gap: 8px; }
.libcols h3 { margin: 0 0 4px; font-family: var(--pp-hand); font-size: 1.7rem; font-weight: 700; color: var(--pp-pen); }
.libcols a { font-weight: 700; }
.full-lib { margin: 34px 0 0; padding: 22px 28px; background: #fff; border-radius: 4px; box-shadow: var(--pp-sheet-shadow); list-style: none; display: flex; flex-direction: column; gap: 8px; }
.full-lib a { font-weight: 800; }

.faq-wrap { display: flex; flex-wrap: wrap; gap: 28px 64px; }
.faq-wrap .home-h2 { flex: 1 1 280px; }
.faq-grid { flex: 999 1 600px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 30px 44px; }
.faq-grid h3 { margin: 0 0 6px; font-size: 1.4rem; }
.faq-grid p { margin: 0; }

.final-band { background: var(--pp-brand-dark); color: #fff; border-radius: 34px; padding: clamp(28px, 5vw, 60px); display: flex; flex-wrap: wrap; align-items: center; gap: 30px 60px; }
.fb-left { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.final-band .fb-hand { color: var(--pp-on-dark-pen); }
.final-band h2 { margin: 0; color: #fff; font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.08; }
.final-band p { margin: 0; color: rgba(255, 255, 255, .88); }
.final-band .fb-left a { color: #fff; font-weight: 800; }
.fb-form { flex: 1 1 400px; min-width: 0; background: #fff; color: var(--pp-ink); border-radius: 22px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.fb-form label { font-weight: 800; }
.fb-form .zl-row { display: flex; flex-wrap: wrap; gap: 10px; }
.fb-form .zl-row input { flex: 1 1 160px; min-width: 0; height: 56px; padding: 0 16px; font-size: 1.2rem; font-weight: 700; }
.fb-form .zl-btn { flex: 1 1 160px; height: 56px; }
.final-band .fb-fine { font-size: .88rem; color: var(--pp-muted); }

/* plansbystate homepage: the rate ledger, the receipt, three sticky notes, link chips */
.home-hero .lead-form { max-width: none; }
.lf-title { margin: 0; font-family: var(--pp-serif); font-weight: 400; font-size: 1.95rem; line-height: 1.15; color: var(--pp-ink); }
.ledger-sheet { position: relative; background: #fff; border-radius: 6px; padding: clamp(22px, 4vw, 44px); box-shadow: var(--pp-sheet-shadow); }
.ledger-sheet::before, .ledger-sheet::after { content: ""; position: absolute; top: -14px; width: 110px; height: 28px; background: var(--pp-tape); border: 1px solid var(--pp-tape-edge); }
.ledger-sheet::before { left: 60px; transform: rotate(-4deg); }
.ledger-sheet::after { right: 60px; transform: rotate(3deg); }
.ledger-lede { margin: 0 0 14px; max-width: 62ch; }
.ledger-key { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: .95rem; margin-bottom: 4px; }
.ledger-key span { display: inline-flex; align-items: center; gap: 8px; }
.ledger-key i { display: inline-block; width: 24px; height: 12px; border-radius: 3px; border: 1px solid var(--pp-brand); }
.lk-final { background: var(--pp-brand); }
.lk-req { background: color-mix(in srgb, var(--pp-brand) 28%, #fff); }
.ledger-scroll { overflow-x: auto; }
table.ledger { width: 100%; min-width: 860px; border-collapse: collapse; box-shadow: none !important; border-radius: 0 !important; font-size: .98rem; background: transparent; }
table.ledger thead th { background: none !important; color: var(--pp-muted) !important; font-size: .78rem !important; text-transform: uppercase !important; letter-spacing: .06em !important; font-weight: 800 !important; border-bottom: 2px solid var(--pp-ink) !important; padding: 46px 10px 8px; text-align: left; vertical-align: bottom; }
table.ledger td, table.ledger tbody th { padding: 9px 10px; border-bottom: 1px dashed var(--pp-rule-strong) !important; text-align: left; }
table.ledger tbody th { font-weight: 800; color: var(--pp-ink); }
table.ledger .num { text-align: right; font-variant-numeric: tabular-nums; }
table.ledger tbody tr:hover { background: color-mix(in srgb, var(--pp-hl) 35%, transparent); }
table.ledger { table-layout: fixed; }
table.ledger thead th:nth-child(1) { width: 44px; }
table.ledger thead th:nth-child(2) { width: 150px; }
table.ledger thead th:nth-child(4) { width: 84px; }
table.ledger thead th:nth-child(5) { width: 110px; }
table.ledger thead th:nth-child(6) { width: 240px; }
.lg-scale { position: relative; display: block; height: 18px; }
.lg-scale i { position: absolute; bottom: 0; transform: translateX(-50%); font-style: normal; font-weight: 700; text-transform: none; letter-spacing: 0; }
.lg-scale i:first-child { transform: none; }
.lg-scale i:nth-child(6) { transform: translateX(-100%); }
.lg-scale .lg-med { color: var(--pp-pen); }
.lg-med-note { position: absolute; left: 60%; bottom: 22px; white-space: nowrap; font-family: var(--pp-hand); font-size: 1.35rem; font-weight: 700; color: var(--pp-pen); text-transform: none; letter-spacing: 0; transform: translateX(-30%) rotate(-3deg); }
td.lg-bar { position: relative; }
.lg-fill { display: block; height: 14px; width: var(--w); border-radius: 0 4px 4px 0; border: 1px solid var(--pp-brand); background: var(--pp-brand); transition: width 1.1s cubic-bezier(.2, .8, .3, 1) var(--d, 0ms); }
tr.lg-r .lg-fill { background: color-mix(in srgb, var(--pp-brand) 28%, #fff); }
.pp-js .ledger:not(.pp-on) .lg-fill { width: 0; }
.lg-medline { position: absolute; left: calc(10px + (100% - 20px) * .6); top: 0; bottom: 0; width: 2px; background: var(--pp-pen); opacity: .45; }
.lg-f .lg-st { font-weight: 800; color: var(--pp-brand-dark); }
.lg-r .lg-st { color: var(--pp-muted); }
.ledger-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: 18px; font-size: .92rem; color: var(--pp-muted); }
.ledger-foot p { margin: 0; }
.ledger-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.cliff-row { display: flex; flex-wrap: wrap; align-items: center; gap: 40px 64px; }
.cliff-text { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cliff-text p { margin: 0; max-width: 66ch; }
.receipt { flex: 1 1 320px; min-width: 0; position: relative; margin: 0; background: #fff; padding: 30px 30px 22px; box-shadow: var(--pp-sheet-shadow); transform: rotate(1.5deg); display: flex; flex-direction: column; gap: 10px; }
.receipt::before { content: ""; position: absolute; top: -13px; left: 50%; width: 96px; height: 26px; transform: translateX(-50%) rotate(-4deg); background: var(--pp-tape); border: 1px solid var(--pp-tape-edge); }
.receipt figcaption { font-family: var(--pp-serif); font-size: 1.35rem; color: var(--pp-ink); }
.receipt dl { margin: 0; }
.receipt dl div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-block: 10px; border-bottom: 1px dashed var(--pp-rule-strong); }
.receipt .rc-total { border-bottom: 0; }
.receipt dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.receipt .rc-total strong { color: var(--pp-pen); font-size: 1.25rem; }
.receipt p { margin: 0; font-size: .88rem; color: var(--pp-muted); }
.three-notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 26px; }
.three-notes li { background: var(--pp-sticky); padding: 22px 22px 20px; box-shadow: 0 12px 20px -16px rgba(20, 24, 40, .55); transition: transform .3s ease; }
.three-notes li:nth-child(1) { transform: rotate(-1.2deg); }
.three-notes li:nth-child(2) { transform: rotate(.8deg); }
.three-notes li:nth-child(3) { transform: rotate(-.5deg); }
.three-notes li:hover { transform: rotate(0) scale(1.02); }
.three-notes h3 { margin: 0 0 6px; font-family: var(--pp-hand); font-size: 1.8rem; font-weight: 700; color: var(--pp-ink); }
.three-notes p { margin: 0; }
.dc-list { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.dc-list a { font-weight: 800; }
.search-chips-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 26px 0 0; }
.search-chips-row .search-chip { display: inline-block; padding: 6px 14px; border-radius: var(--pp-wobble); border: 2px solid var(--pp-rule-strong); background: #fff; color: var(--pp-ink); font-weight: 700; text-decoration: none; }
.search-chips-row .search-chip:hover { background: var(--pp-hl); }
.cal-sheet > p { max-width: 70ch; }
.small-print { font-size: .9rem; color: var(--pp-muted); }

/* plansbycity homepage: plan types, the five-step check, link cards */
.ppo-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px 44px; margin-top: 26px; }
.ppo-row .callout { flex: 999 1 440px; min-width: 0; margin: 0; }
.plantypes { flex: 1 1 380px; min-width: 0; position: relative; background: #fff; border-radius: 6px; padding: 28px 26px 18px; box-shadow: var(--pp-sheet-shadow); transform: rotate(1deg); }
.plantypes::before { content: ""; position: absolute; top: -13px; left: 50%; width: 96px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: var(--pp-tape); border: 1px solid var(--pp-tape-edge); }
.plantypes h3 { margin: 0 0 8px; font-size: 1.3rem; }
.plantypes ul { list-style: none; margin: 0; padding: 0; }
.plantypes li { display: grid; grid-template-columns: 32px 52px minmax(0, 1fr); gap: 10px; align-items: center; padding-block: 12px; border-top: 1px dashed var(--pp-rule-strong); }
.plantypes svg { width: 30px; height: 30px; }
.plantypes .pt-o { fill: none; stroke: var(--pp-pen); stroke-width: 2.3; stroke-linecap: round; }
.plantypes .pt-b { fill: none; stroke: var(--pp-brand); stroke-width: 2.3; stroke-linecap: round; }
.plantypes .pt-half { fill: var(--pp-brand); }
.check-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 34px 64px; }
.check-why { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.check-why p { margin: 0; }
.check-steps { flex: 1 1 460px; min-width: 0; }
.check-steps ol { list-style: none; margin: 10px 0 0; padding: 0; border-top: 2px solid var(--pp-ink); }
.check-steps li { position: relative; padding: 14px 0 14px 42px; border-bottom: 1px dashed var(--pp-rule-strong); }
.check-steps li::before { content: ""; position: absolute; left: 0; top: 15px; width: 24px; height: 24px; background: var(--pp-check-box) center / contain no-repeat; }
.skip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 18px 0 0; }
a.dcard-link { color: var(--pp-body); text-decoration: none !important; }
a.dcard-link h3 { color: var(--pp-ink); }
a.dcard-link:hover h3 { color: var(--pp-brand); }

/* private-plan estimate box (2026-10-05): age, spouse, kids, and the figure with its caveat */
.pe-box { margin: 14px 0 8px; padding: 16px 18px 14px; background: #fff; border: 2px dashed var(--pp-rule-strong); border-radius: 16px; }
.pe-box:empty { display: none; }
.pe-head { margin: 0 0 10px; font-family: var(--pp-hand); font-size: 1.55rem; font-weight: 700; line-height: 1; color: var(--pp-pen); transform: rotate(-1.5deg); transform-origin: left center; }
.pe-row, .zl-age { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.pe-l { display: flex; flex-direction: column; gap: 4px; margin: 0 !important; font-size: .9rem; font-weight: 800; color: var(--pp-ink); }
.pe-box .pe-l, .zl-age .pe-l { display: flex !important; flex-direction: column; }
.pe-box .pe-chk, .zl-age .pe-chk { display: inline-flex !important; }
.pe-box .pe-l[hidden], .zl-age .pe-l[hidden] { display: none !important; }
.pe-l input, .pe-l select, .zl-age .zl-age-in { width: 96px !important; height: 46px; padding: 0 12px !important; font-size: 1.1rem !important; }
.pe-chk { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; margin: 0 !important; font-weight: 800; color: var(--pp-ink); cursor: pointer; }
.pe-chk input { width: 20px; height: 20px; accent-color: var(--pp-brand); }
.pe-out, .zl-age-out:not([hidden]) { margin: 12px 0 2px; display: flex; flex-direction: column; gap: 6px; }
.pe-out[hidden] { display: none; }
.pe-fig { font-size: 1.18rem; line-height: 1.3; color: var(--pp-ink); }
.pe-fig strong { padding: 0 4px; background: linear-gradient(transparent 55%, var(--pp-hl) 55%); }
.pe-for { font-size: .95rem; color: var(--pp-body); }
.pe-next { font-weight: 800; color: var(--pp-brand-dark); }
.pe-cav { font-size: .8rem; line-height: 1.45; color: var(--pp-muted); }

/* ---------- the logos move ---------- */
/* PlansByState: the three bars grow one after another, left to right, like a signal getting stronger */
@keyframes ppGrow { 0% { transform: scaleY(.08); opacity: .25; } 70% { transform: scaleY(1.12); } 100% { transform: scaleY(1); } }
@keyframes ppGrowB { 0% { transform: scaleY(.08); opacity: .25; } 70% { transform: scaleY(1.12); } 100% { transform: scaleY(1); } }
header .brand-mark { transition: none !important; transform: none !important; }
header .brand-mark rect { transform-box: fill-box; transform-origin: 50% 100%; transition: none !important; animation: ppGrow .6s cubic-bezier(.3, 1.3, .5, 1) both; }
header .brand-mark rect:nth-of-type(1) { animation-delay: .3s; } header .brand-mark rect:nth-of-type(2) { animation-delay: .48s; } header .brand-mark rect:nth-of-type(3) { animation-delay: .66s; }
header .brand:hover .brand-mark rect, header .brand:focus-visible .brand-mark rect { animation-name: ppGrowB; }
header .brand:hover .brand-mark rect:nth-of-type(1) { animation-delay: 0s; } header .brand:hover .brand-mark rect:nth-of-type(2) { animation-delay: .14s; } header .brand:hover .brand-mark rect:nth-of-type(3) { animation-delay: .28s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .pp-js .pp-rise { opacity: 1; transform: none; }
  .pp-draw path { stroke-dashoffset: 0; }
  .pp-hl { background-size: 100% 70%; }
}
@media (max-width: 760px) {
  .zip-lead, .form-section, .lead-form, .lf-review, .answer-lead, .statband .st { transform: none !important; }
  .zip-lead, .form-section, .lead-form { padding: 28px 18px 22px !important; }
  .sec-dark, .sec-alt, .sec-warm { margin-inline: 8px; }
}
@media print {
  body { background: #fff; }
  .pp-doodle, .pp-sticky, .pp-obj, .pp-note, header::after { display: none !important; }
}
/* ==== END PAPER & PEN ==== */


/* ==== across-state-lines pages + cost-by-state tool (2026-10-25) ==== */
.sec .receipt { max-width: 560px; margin: 1.8rem 0 1.4rem; }
.sec .three-notes { margin: 2rem 0 1rem; }
.sec .scraps { margin: 2.2rem 0 1rem; }
.sec .stat-strip { margin: 1.6rem 0 1.2rem; }
.sec .three-up { margin: 1.2rem 0; }
.sec .three-up h3 { margin: 0 0 6px; font-family: var(--pp-serif); font-weight: 400; font-size: 1.2rem; color: var(--pp-ink); }
.vs-row input[type="number"], .vs-row input[type="text"] {
  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 input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(154,52,18,.16); }
.cbs-form { margin: 1.4rem 0 .4rem; }
.cbs-chk { display: flex; gap: 8px; align-items: center; font-weight: 600; padding-bottom: 13px; cursor: pointer; }
.cbs-msg { margin: 12px 0 0; font-size: .95rem; color: var(--muted); }
.cbs-chip { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: var(--pp-hl, #fde68a);
  color: var(--pp-ink, #111); font-size: .74rem; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.cbs-wrap.cbs-on .cbs-row { animation: cbs-in .45s ease both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes cbs-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cbs-wrap.cbs-on .cbs-row { animation: none; } }