/* Benefits Insider additions on top of wp.css (the stylesheet carried over from WordPress). Keep this file small. */

/* Larger text (top-bar "A A" toggle). Scales the whole page like browser zoom, so the px-based theme CSS grows too. */
html.bi-text-large body { zoom: 1.15; }
.fs-toggle { cursor: pointer; }



/* ---- Site header (src/theme/header.html): topic bar + Menu drawer. Replaced the WordPress navigation block on Nov 12, 2026. */
.bi-hdr, .bi-hdr *, .bi-drawer, .bi-drawer * { box-sizing: border-box; }
.bi-hdr { font-family: Inter, -apple-system, "Segoe UI", sans-serif; position: relative; z-index: 50; }
.bi-hdr a { text-decoration: none; }
.bi-announce { background: #ffde59; color: #034186; text-align: center; font-weight: 700; font-size: 1.05rem; padding: 16px 16px; line-height: 1.35; } /* taller bar, Kwame Nov 12 */
.bi-announce a { color: #034186; text-decoration: underline; }
.bi-main { background: #fff; border-bottom: 1px solid #e5e7eb; }
.bi-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.bi-main .bi-wrap { display: flex; align-items: center; gap: 16px; min-height: 116px; padding-top: 10px; padding-bottom: 10px; }
.bi-brand { display: flex; align-items: center; gap: 12px; color: #030712; margin-right: auto; }
.bi-brand img { width: 190px; height: auto; display: block; } /* logo only: the name is in the logo (Kwame Nov 12) */
.bi-tools { display: flex; align-items: center; gap: 18px; }
.bi-size { display: flex; align-items: center; gap: 2px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 3px; }
.bi-size .fs-toggle { all: unset; cursor: pointer; font-family: Lora, serif; font-weight: 700; color: #030712; min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 1rem; }
.bi-size .fs-toggle.big { font-size: 1.35rem; }
.bi-size .fs-toggle[aria-pressed="true"] { background: #dbe5f1; color: #034186; }
.bi-size .fs-toggle:focus-visible { outline: 3px solid #2f6ba5; outline-offset: 1px; }
.bi-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 10px; font-weight: 700; font-size: 1.05rem; white-space: nowrap; cursor: pointer; border: 0; font-family: inherit; line-height: 1; }
.bi-btn:focus-visible { outline: 3px solid #2f6ba5; outline-offset: 2px; }
.bi-btn svg { width: 22px; height: 22px; flex: none; }
.bi-search { background: transparent; color: #030712; }
.bi-search:hover { background: #f6f8fa; }
.bi-book { background: #034186; color: #fff !important; border-radius: 999px; padding: 0 24px; }
.bi-book:hover { background: #02336a; }
.bi-menu { background: transparent; color: #030712; border: 2px solid #030712; }
.bi-menu:hover { background: #030712; color: #fff; }
.bi-topics { background: #022a57; }
.bi-topics ul { list-style: none; margin: 0 auto; padding: 0 24px; max-width: 1200px; display: flex; align-items: stretch; gap: 4px; }
.bi-topics a { display: block; color: #fff; font-weight: 700; font-size: 1.125rem; padding: 19px 18px 16px; border-bottom: 4px solid transparent; }
.bi-topics a:hover { background: rgba(255,255,255,.1); color: #ffde59; }
.bi-topics a[aria-current="page"] { border-bottom-color: #ffde59; color: #ffde59; }
.bi-topics a:focus-visible { outline: 3px solid #ffde59; outline-offset: -3px; }
.bi-topics .bi-topics-cta { margin-left: auto; }
.bi-topics .bi-topics-cta a { color: #dbe5f1; font-weight: 600; font-size: 1rem; }
.bi-soon { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,222,89,.2); color: #ffde59; border-radius: 4px; padding: 2px 5px; margin-left: 6px; vertical-align: 2px; }

/* drawer */
.bi-scrim { position: fixed; inset: 0; background: rgba(3,7,18,.55); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 90; }
.bi-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100vw); background: #fff; z-index: 100; transform: translateX(100%); transition: transform .25s ease; display: flex; flex-direction: column; font-family: Inter, -apple-system, "Segoe UI", sans-serif; box-shadow: -12px 0 40px rgba(3,7,18,.2); visibility: hidden; }
html.bi-open .bi-scrim { opacity: 1; pointer-events: auto; }
html.bi-open .bi-drawer { transform: none; visibility: visible; }
html.bi-open { overflow: hidden; }
.bi-drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; }
.bi-drawer-top strong { font-family: Lora, serif; font-size: 1.5rem; color: #030712; }
.bi-close { background: #f6f8fa; color: #030712; }
.bi-close:hover { background: #e5e7eb; }
.bi-drawer-body { overflow-y: auto; padding: 8px 20px 28px; flex: 1; }
.bi-drawer h3 { font-family: Inter, sans-serif; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #636363; margin: 22px 0 6px; }
.bi-drawer ul { list-style: none; margin: 0; padding: 0; }
.bi-drawer li a { display: flex; align-items: center; justify-content: space-between; padding: 13px 4px; font-size: 1.15rem; font-weight: 600; color: #030712; text-decoration: none; border-bottom: 1px solid #f0f2f5; }
.bi-drawer li a:hover { color: #034186; background: #f6f8fa; }
.bi-drawer li a small { font-weight: 500; font-size: .9rem; color: #636363; }
.bi-drawer li a:focus-visible { outline: 3px solid #2f6ba5; outline-offset: -3px; }
.bi-drawer-topics { display: none; }
.bi-drawer-topics ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bi-drawer-topics li a { justify-content: center; text-align: center; background: #034186; color: #fff; border: 0; border-radius: 10px; min-height: 56px; padding: 10px; }
.bi-drawer-topics li a:hover { background: #02336a; color: #ffde59; }
.bi-drawer-topics li:first-child { grid-column: 1 / -1; }
.bi-drawer-book { display: none; margin-top: 16px; }
.bi-drawer-book a { display: flex; justify-content: center; align-items: center; min-height: 56px; border-radius: 999px; background: #ffde59; color: #030712; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.bi-drawer-foot { margin-top: 26px; padding: 16px; background: #f6f8fa; border-radius: 12px; font-size: 1rem; color: #030712; line-height: 1.45; }
.bi-drawer-foot a { color: #034186; font-weight: 700; }

/* tablet: topics stay in the bar; brand name shrinks */
@media (max-width: 1080px) {
  .bi-topics a { padding: 18px 12px 15px; font-size: 1.05rem; }
  .bi-topics .bi-topics-cta { display: none; }
}
/* phone: topics move to the top of the menu as big buttons */
@media (max-width: 720px) {
  .bi-announce { font-size: .95rem; padding: 12px 12px; }
  .bi-main .bi-wrap { min-height: 84px; padding: 6px 14px; gap: 6px; }
  .bi-brand img { width: 136px; }
  .bi-size, .bi-book, .bi-search .bi-label { display: none; }
  .bi-search { padding: 0 12px; }
  /* topics stay visible: one swipeable row, with a fade on the right as a "there's more" hint */
  .bi-topics { position: relative; }
  .bi-topics::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; background: linear-gradient(90deg, rgba(2,42,87,0), #022a57); pointer-events: none; }
  .bi-topics ul { overflow-x: auto; gap: 0; padding: 0 28px 0 6px; scrollbar-width: none; }
  .bi-topics ul::-webkit-scrollbar { display: none; }
  .bi-topics li { flex: none; }
  .bi-topics a { padding: 13px 11px 10px; font-size: 1.02rem; white-space: nowrap; }
  .bi-soon { display: none; }
  .bi-drawer-topics, .bi-drawer-book { display: block; }
}

/* Large text zooms the page 1.15x, which would also scale the drawer's 100vw width past the screen edge. */
html.bi-text-large .bi-drawer { width: min(440px, calc(100vw / 1.15)); }

/* ---- Home page "Browse by topic" (src/pages/home/content.html, #topics). Redesigned Nov 12, 2026:
   a tinted full-width band, content lined up with the header (1152px), larger type, a navy title block per topic. */
.topics-band { background: #eef3f9; }
.topics-band h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.9rem) !important; }
.tb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 36px !important; }
.tb-card { background: #fff; border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(3,7,18,.06), 0 10px 30px rgba(3,65,134,.10); border: 1px solid #dbe5f1; }
.tb-top { display: flex; gap: 16px; align-items: flex-start; background: #034186; color: #fff; padding: 26px 26px 24px; }
.tb-card.tb-med .tb-top { background: #02336a; }
.tb-card.tb-snap .tb-top { background: #022a57; }
.tb-ico { flex: none; width: 52px; height: 52px; padding: 8px; border-radius: 14px; background: rgba(255,255,255,.12); color: #fff; }
.tb-ico .acc { stroke: #ffde59; }
.tb-top h3 { font-family: Lora, serif; font-size: 1.75rem; line-height: 1.15; color: #fff; margin: 2px 0 8px; }
.tb-top p { font-size: 1.0625rem; line-height: 1.45; color: #dbe5f1; margin: 0; }
.tb-qs { list-style: none; margin: 0; padding: 10px 14px 0; flex: 1; }
.tb-qs li { border-bottom: 1px solid #e5e7eb; }
.tb-qs li:last-child { border-bottom: 0; }
.tb-qs a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 12px; font-size: 1.1875rem; font-weight: 600; line-height: 1.35; color: #030712; text-decoration: none; border-radius: 10px; }
.tb-qs a:hover { background: #f6f8fa; color: #034186; }
.tb-arrow { flex: none; color: #034186; font-weight: 700; transition: transform .15s; }
.tb-qs a:hover .tb-arrow { transform: translateX(3px); }
.tb-btn { display: flex; align-items: center; justify-content: center; margin: 14px 26px 26px; min-height: 56px; padding: 0 18px; border-radius: 999px; background: #ffde59; color: #030712 !important; font-weight: 700; font-size: 1.125rem; text-decoration: none !important; text-align: center; }
.tb-btn:hover { background: #ffd22e; }
.tb-qs a:focus-visible, .tb-btn:focus-visible { outline: 3px solid #2f6ba5; outline-offset: 2px; }
@media (max-width: 1000px) { .tb-grid { grid-template-columns: 1fr; max-width: 640px; margin-left: auto !important; margin-right: auto !important; } }
@media (max-width: 720px) { .tb-top { padding: 22px 20px 20px; } .tb-btn { margin: 12px 20px 22px; } }
/* line the three cards up row by row: title blocks, question lists and buttons start at the same height */
@supports (grid-template-rows: subgrid) {
  .tb-grid { grid-template-rows: auto 1fr auto; }
  .tb-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; }
}
@media (max-width: 1000px) { .tb-grid { grid-template-rows: none; } .tb-card { grid-row: auto; grid-template-rows: auto 1fr auto; } }

/* ---- Home page: every section lines up with the header (Kwame, Nov 12, 2026). The header's content is 1152px wide
   with 24px side padding (14px on phones), so the home page uses the same numbers for WordPress's layout widths.
   Home only: on article pages the shared content width is also the reading width, which must stay narrow. */
body.home {
  --wp--style--global--content-size: 1152px;
  --wp--style--global--wide-size: 1152px;
  --wp--style--root--padding-left: 24px;
  --wp--style--root--padding-right: 24px;
}
body.home .wp-block-cover.alignfull { padding-left: var(--wp--style--root--padding-left) !important; padding-right: var(--wp--style--root--padding-right) !important; }
body.home .has-global-padding > .alignfull { margin-left: calc(-1 * var(--wp--style--root--padding-left)) !important; margin-right: calc(-1 * var(--wp--style--root--padding-right)) !important; }
@media (max-width: 720px) { body.home { --wp--style--root--padding-left: 14px; --wp--style--root--padding-right: 14px; } }
body.home .is-layout-constrained > :not(.alignfull):not(.alignleft):not(.alignright):not([class*="mw-"]) { max-width: 1152px; }
body.home .is-layout-constrained > .alignwide { max-width: 1152px; }
/* narrow text blocks keep their reading width but start at the section's left edge, like the heading above them */
body.home .is-layout-constrained > .mw-300 { max-width: 300px; }
body.home .is-layout-constrained > .mw-640 { max-width: 640px; }
body.home .is-layout-constrained > .mw-820 { max-width: 820px; }
body.home .is-layout-constrained > [class*="mw-"]:not(.has-text-align-center):not(:has(> .has-text-align-center)) { margin-left: max(0px, calc((100% - 1152px) / 2)) !important; margin-right: auto !important; }

/* ---- Home page type: nothing a reader needs is smaller than 17px (Kwame, Nov 12, 2026: "the font size is too small"). */
body.home .eyebrow { font-size: 15px; }
body.home .steplinks { margin-top: 14px; }
body.home .steplinks li { margin-bottom: 10px; }
body.home .steplinks a { font-size: 17px; line-height: 1.35; }
body.home .action-card p, body.home .card > p, body.home .tool-card p, body.home .standard p { font-size: 17px; line-height: 1.5; }
body.home .standard h3, body.home .tool-card h3, body.home .action-card h3 { font-size: 21px; }
body.home .tool-card .tag, body.home .action-card .rec { font-size: 14px; }
body.home .trial-note { font-size: 16px; }
body.home .wp-block-cover .wp-block-column p.has-mist-color { font-size: 18px !important; }

/* ---- /book "What's inside": the 7 decisions as a compact numbered list beside the book (Kwame, Nov 12, 2026,
   replaced the .grid.decisions cards). Reading text kept at 17px. */
.decisions-compact { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: center; margin-top: 28px; }
.decisions-compact .dc-book { margin: 0; }
.decisions-compact .dc-book img { display: block; width: 100%; height: auto; }
.decisions-compact .dc-book a { display: block; margin-top: 6px; text-align: center; font-weight: 700; color: #034186; text-decoration: none; font-size: 17px; }
.decisions-compact .dc-book a:hover { text-decoration: underline; }
.decisions-compact ol { list-style: none; margin: 0; padding: 0; counter-reset: dc; border-top: 1px solid #e5e7eb; }
.decisions-compact li { counter-increment: dc; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 13px 0; margin: 0; border-bottom: 1px solid #e5e7eb; }
.decisions-compact li::before { content: counter(dc); grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: #ffde59; color: #030712; font-weight: 800; font-size: 17px; display: grid; place-items: center; margin-top: 2px; }
.decisions-compact h3 { font-family: Lora, serif; font-size: 20px; line-height: 1.25; color: #034186; margin: 0; }
.decisions-compact p { margin: 2px 0 0; font-size: 17px; line-height: 1.45; color: #3f4652; }
@media (max-width: 820px) {
  .decisions-compact { grid-template-columns: 1fr; gap: 20px; }
  .decisions-compact .dc-book { max-width: 180px; margin: 0 auto; }
  .decisions-compact h3 { font-size: 18px; }
}

/* ---- The book cover wherever the book is promoted (Kwame's rule: anywhere the book is promoted shows the cover). Nov 12, 2026. */
/* compact book strip: cover thumbnail + title + "Get the book" (author bios, the /guides CTA) */
.book-strip { display: inline-flex; align-items: center; gap: 16px; margin-top: 22px; padding: 10px 20px 10px 10px; border: 1px solid #dbe5f1; border-radius: 14px; background: #fff; color: #030712; text-decoration: none !important; max-width: 520px; }
.book-strip:hover { border-color: #2f6ba5; }
.book-strip .bs-cover { width: 96px; height: auto; flex: none; }
.book-strip .bs-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.book-strip .bs-kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #2f6ba5; }
.book-strip b { font-family: Lora, serif; font-size: 20px; color: #034186; }
.book-strip .bs-sub { font-size: 16px; color: #3f4652; }
.book-strip .bs-go { font-size: 17px; font-weight: 700; color: #034186; margin-top: 4px; }
.book-strip.on-navy { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); margin: 8px 0 18px; }
.book-strip.on-navy .bs-kicker { color: #ffde59; }
.book-strip.on-navy b, .book-strip.on-navy .bs-go { color: #fff; }
.book-strip.on-navy .bs-sub { color: #dbe5f1; }
/* navy CTA bands: the cover sits first in the band */
.band-split > .band-cover { flex: 0 0 170px; display: block; line-height: 0; }
.band-split > .band-cover img { width: 170px; height: auto; }
@media (max-width: 781px) { .band-split > .band-cover { flex-basis: auto; } .band-split > .band-cover img { width: 140px; } }
/* cards */
.qcard.qcard-book { display: flex; gap: 16px; align-items: center; }
.qcard.qcard-book .qc-cover { width: 110px; height: auto; flex: none; margin: -8px 0 -8px -10px; }
.card.card-book .cb-cover { display: block; width: 120px; height: auto; margin: -6px 0 6px -8px; }
@media (min-width: 1000px) {
  .band-split:has(> .band-cover) { flex-wrap: nowrap; align-items: center; gap: 36px; }
  .band-split:has(> .band-cover) > .mw-640 { flex: 1 1 auto; }
  .band-split:has(> .band-cover) > .wp-block-buttons { flex: none; flex-direction: column; align-items: stretch; }
}
.book-strip { margin-bottom: 20px; }

/* ---- The Daily 3 signup is gold everywhere (Kwame, Nov 12, 2026: "Yes, make it gold").
   .d3-gold on the signup card (home .newsletter, /guides .capture, /newsletter .nlform); .d3-band on the /articles band.
   The beehiiv form is a cross-origin iframe with its own white background, so it sits in a deliberate white panel. */
.d3-gold { background: #ffde59 !important; border-color: #ffde59 !important; border-radius: 14px; box-shadow: 0 10px 28px rgba(3,7,18,.12); }
.d3-gold.on-navy { box-shadow: 0 16px 36px rgba(0,0,0,.32); }
.d3-gold .eyebrow { color: #034186 !important; }
.d3-gold h2, .d3-gold h3, .d3-gold p:not(.eyebrow) { color: #030712 !important; }
/* Slimmed Nov 12 (Kwame, "quick fix"): a thin white strip hugging the field, no shadow. Full fix = set the form background in beehiiv, then drop this panel. */
.d3-gold .beehiiv-embed { background: #fff; border-radius: 10px; padding: 4px 0; max-width: 480px !important; width: 100%; margin: 20px auto 0 !important; box-shadow: none; box-sizing: border-box; overflow: hidden; }
.d3-band .wp-block-cover__background { background-color: #ffde59 !important; opacity: 1 !important; }
.d3-band h2 { color: #030712 !important; }
.d3-band .lede { color: #3f4652 !important; }
.d3-band .wp-block-button__link { background-color: #034186 !important; color: #fff !important; }

/* ---- Home hero photo (src/pages/home/content.html, .hero-photo). Kwame, Nov 12, 2026: once the columns stack, the photo was
   still floated right with no space above it, so it sat off center and touched the buttons. Center it with room above. */
@media (max-width: 781px) {
  .hero-photo { float: none !important; display: block !important; margin: 44px auto 0 !important; width: min(300px, 78vw); max-width: 300px; }
  .hero-photo img { width: 100%; height: auto; }
}

/* ---- Footer social row (src/theme/footer.html, .bi-social). Kwame, Nov 12, 2026. 48px tap targets for older hands. */
.bi-social { margin: 36px 0 28px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.14); text-align: center; font-family: Inter, -apple-system, "Segoe UI", sans-serif; }
.bi-social p { margin: 0 0 14px; font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #ffde59; }
.bi-social ul { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 640px; }
.bi-social li { margin: 0; padding: 0; }
.bi-social a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.22); color: #fff; text-decoration: none; transition: background .15s, color .15s; }
.bi-social a:hover { background: #ffde59; border-color: #ffde59; color: #030712; }
.bi-social a:focus-visible { outline: 3px solid #ffde59; outline-offset: 3px; }
.bi-social svg { width: 22px; height: 22px; display: block; }
@media (max-width: 420px) { .bi-social ul { gap: 10px; max-width: 260px; } }

/* ---- Footer menu lists: no bullet dots, flush left (Kwame, Nov 12, 2026). */
footer .wp-block-list { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; }
footer .wp-block-list li { list-style: none !important; padding-left: 0 !important; }
footer .wp-block-list li::marker { content: none; }

/* ---- New hub guide pages (src/new-pages/, Nov 12, 2026): Medicaid and Disability hubs. Shared reading layout and callouts.
   Senior-first: 19px body, 1.6 line height, one idea per block, every figure dated. */
.bi-guide { max-width: 780px; margin-left: auto !important; margin-right: auto !important; font-family: Inter, -apple-system, "Segoe UI", sans-serif; color: #030712; font-size: 19px; line-height: 1.6; padding: 8px 0 56px; }
.bi-guide h1 { font-family: Lora, Georgia, serif; font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); line-height: 1.15; margin: 8px 0 14px; color: #030712; }
.bi-guide h2 { font-family: Lora, Georgia, serif; font-size: clamp(1.45rem, 1.3rem + .6vw, 1.8rem); line-height: 1.25; margin: 40px 0 12px; color: #034186; }
.bi-guide h3 { font-family: Inter, sans-serif; font-size: 1.1rem; font-weight: 800; margin: 26px 0 8px; color: #030712; }
.bi-guide p, .bi-guide li { font-size: 19px; line-height: 1.6; }
.bi-guide p { margin: 0 0 16px; }
.bi-guide ul, .bi-guide ol { margin: 0 0 18px; padding-left: 1.3em; }
.bi-guide li { margin: 0 0 8px; }
.bi-guide a { color: #034186; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.bi-guide .lede { font-size: 21px; color: #3f4652; margin-bottom: 22px; }
.bi-crumbs { font-size: 15px !important; color: #3f4652; margin: 18px 0 0 !important; }
.bi-crumbs a { color: #034186; font-weight: 600; text-decoration: none !important; }
.bi-answer { background: #eef3f9; border-left: 6px solid #034186; border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 22px 0 26px; }
.bi-answer > b:first-child, .bi-note > b:first-child, .bi-warn > b:first-child { display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.bi-answer > b:first-child { color: #034186; }
.bi-answer p:last-child, .bi-note p:last-child, .bi-warn p:last-child { margin-bottom: 0; }
.bi-note { background: #fff8d6; border-left: 6px solid #e0b800; border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 22px 0; }
.bi-note > b:first-child { color: #6b5600; }
.bi-warn { background: #fdf0f2; border-left: 6px solid #9b1b30; border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 22px 0; }
.bi-warn > b:first-child { color: #9b1b30; }
.bi-steps { counter-reset: st; list-style: none; padding-left: 0 !important; }
.bi-steps > li { counter-increment: st; position: relative; padding-left: 52px; margin-bottom: 16px; }
.bi-steps > li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: #ffde59; color: #030712; font-weight: 800; display: grid; place-items: center; font-size: 17px; }
.bi-tablewrap { overflow-x: auto; margin: 18px 0 24px; border: 1px solid #d6dbe2; border-radius: 12px; }
.bi-table { width: 100%; border-collapse: collapse; font-size: 17px; }
.bi-table th, .bi-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
.bi-table th { background: #f6f8fa; font-weight: 800; color: #030712; }
.bi-table tr:last-child td { border-bottom: 0; }
.bi-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 18px 0 26px; }
.bi-cards a { display: block; border: 1px solid #d6dbe2; border-radius: 14px; padding: 18px 18px 16px; text-decoration: none !important; color: #030712; background: #fff; box-shadow: 0 1px 2px rgba(3,7,18,.05); }
.bi-cards a:hover { border-color: #034186; box-shadow: 0 6px 18px rgba(3,65,134,.12); }
.bi-cards a b { display: block; font-family: Lora, Georgia, serif; font-size: 20px; color: #034186; margin-bottom: 4px; }
.bi-cards a span { display: block; font-size: 16px; font-weight: 400; color: #3f4652; line-height: 1.45; }
.bi-next { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid #e5e7eb; margin-top: 36px; padding-top: 20px; }
.bi-next a { font-size: 17px; }
.bi-sources { margin-top: 32px; padding: 16px 18px; background: #f6f8fa; border-radius: 12px; font-size: 15px !important; color: #3f4652; line-height: 1.5; }
.bi-sources p, .bi-sources li { font-size: 15px !important; }
.bi-sources b { color: #030712; }
.bi-disclaimer { font-size: 14px !important; color: #636363; margin-top: 16px !important; }
.bi-tool-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; background: #034186; color: #fff; border-radius: 14px; padding: 20px 22px; margin: 26px 0; }
.bi-tool-cta p { margin: 0 !important; color: #fff; font-size: 18px; }
.bi-tool-cta p b { color: #ffde59; }
.bi-tool-cta a { background: #ffde59; color: #030712 !important; text-decoration: none !important; font-weight: 800; border-radius: 999px; padding: 12px 22px; white-space: nowrap; }
@media (max-width: 640px) {
  .bi-guide, .bi-guide p, .bi-guide li { font-size: 18px; }
  .bi-table { font-size: 16px; }
  .bi-answer, .bi-note, .bi-warn { padding: 16px 16px; }
}
/* Medicaid state picker and state cards (/medicaid/states/, generated by _build/gen_medicaid_states.py) */
.bi-state-pick { background: #034186; color: #fff; border-radius: 14px; padding: 18px 20px; margin: 10px 0 24px; }
.bi-state-pick label { display: block; font-weight: 800; font-size: 18px; margin-bottom: 8px; }
.bi-state-pick select { width: 100%; max-width: 420px; font-size: 19px; padding: 12px 14px; border-radius: 10px; border: 0; font-family: inherit; }
.bi-states { margin: 18px 0 30px; border-top: 1px solid #e5e7eb; }
.bi-state { border-bottom: 1px solid #e5e7eb; scroll-margin-top: 16px; }
.bi-state summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 6px; font-size: 20px; font-weight: 700; color: #030712; }
.bi-state summary::-webkit-details-marker { display: none; }
.bi-state summary::after { content: "+"; font-size: 26px; color: #034186; line-height: 1; margin-left: 8px; }
.bi-state[open] summary::after { content: "−"; }
.bi-state summary small { margin-left: auto; font-size: 14px; font-weight: 600; color: #3f4652; background: #eef3f9; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.bi-state summary:hover { color: #034186; }
.bi-state-table th { width: 42%; background: #f6f8fa; font-weight: 700; font-size: 16px; }
.bi-state-table td { font-size: 17px; }
.bi-state-note { font-size: 17px !important; background: #fff8d6; border-radius: 10px; padding: 12px 14px; }
@media (max-width: 640px) { .bi-state-table th, .bi-state-table td { display: block; width: auto; } .bi-state-table th { border-bottom: 0; padding-bottom: 2px; } }

/* ---- Medicare Navigator plan pages mounted at /medicare/plan/ (Nov 12, 2026). The Navigator's own .plan-page rule sets the
   side padding to 0, so on screens under 1,020px the text touched the edge (also true on medicare.benefitsinsider.co). */
.plan-page.wrap { padding-left: 20px; padding-right: 20px; }

/* ---- Section menu under the topic bar (Medicare, Nov 12, 2026; _build/build.py medicare_subnav()). */
.bi-subnav { background: #fff; border-bottom: 1px solid #d6dbe2; box-shadow: 0 2px 6px rgba(3,7,18,.04); }
.bi-subnav ul { list-style: none; margin: 0 auto; padding: 0 24px; max-width: 1200px; display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.bi-subnav ul::-webkit-scrollbar { display: none; }
.bi-subnav li { flex: none; margin: 0; padding: 0; }
.bi-subnav .bi-subnav-title { display: flex; align-items: center; padding: 0 14px 0 0; font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #636363; }
.bi-subnav a { display: block; padding: 14px 14px 11px; font-size: 1.05rem; font-weight: 700; color: #034186; text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.bi-subnav a:hover { background: #f6f8fa; }
.bi-subnav a[aria-current="page"] { border-bottom-color: #ffde59; color: #030712; }
.bi-subnav a:focus-visible { outline: 3px solid #2f6ba5; outline-offset: -3px; }
@media (max-width: 720px) {
  .bi-subnav ul { padding: 0 8px; }
  .bi-subnav .bi-subnav-title { display: none; }
  .bi-subnav a { padding: 12px 10px 9px; font-size: .98rem; }
}
@media (max-width: 720px) {
  .bi-subnav { position: relative; }
  .bi-subnav::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff); pointer-events: none; }
}
/* The section's main call to action inside its menu (SNAP: the estimator) */
.bi-subnav .bi-subnav-cta { display: flex; align-items: center; padding: 0 6px; }
.bi-subnav .bi-subnav-cta a { background: #ffde59; color: #030712; border-radius: 999px; padding: 8px 16px; border-bottom: 0; }
.bi-subnav .bi-subnav-cta a:hover { background: #f5cf36; }
.bi-subnav .bi-subnav-cta a[aria-current="page"] { box-shadow: inset 0 0 0 2px #030712; }

/* ---- Partner block inside a guide page (Chapter on /medicaid/medicare-help/, Nov 12, 2026). Logo + phone + link always together. */
.bi-partner { border: 2px solid #034186; border-radius: 16px; padding: 20px 22px; margin: 26px 0; background: #fff; }
.bi-partner-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.bi-partner-top img { height: 34px; width: auto; display: block; }
.bi-partner-tag { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #636363; }
.bi-partner p { margin: 0 0 12px !important; }
.bi-partner-cta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 4px 0 12px; }
.bi-partner-cta a.btn { background: #034186; color: #fff !important; text-decoration: none !important; font-weight: 800; border-radius: 999px; padding: 12px 22px; }
.bi-partner-cta a.tel { font-size: 20px; font-weight: 800; color: #034186; text-decoration: none !important; }
.bi-partner .fine { font-size: 15px !important; color: #3f4652; margin: 0 !important; }

/* =====================================================================================================================
   Page design system (design/DESIGN-RULES.md, Nov 12, 2026). "No page is just a stack of boxes."
   Paper-collage art + line icons, torn-paper band edges, gold underline under headings, one gold marker word per hero.
   ===================================================================================================================== */
.bi-band { position: relative; padding: 64px 0 72px; }
.bi-band-in { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.bi-band.navy { background: #034186; color: #fff; }
.bi-band.deep { background: #022a57; color: #fff; }
.bi-band.pale { background: #eef3f9; }
.bi-band.white { background: #fff; }
.bi-band.navy h1, .bi-band.navy h2, .bi-band.navy h3, .bi-band.deep h1, .bi-band.deep h2, .bi-band.deep h3 { color: #fff; }
.bi-band.navy p, .bi-band.deep p { color: #dbe5f1; }

/* Torn-paper bottom edge: the next band's color, torn. Add .tear-white / .tear-pale / .tear-navy to the band ABOVE the edge. */
.bi-band[class*="tear-"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V24.3 L0 24.3 L4.8 18.8 L8.5 21.4 L15.5 10.3 L22.9 12.6 L25.9 19.7 L30.2 21.5 L34.0 20.2 L42.8 16.4 L50.2 20.0 L57.8 24.8 L63.1 11.0 L68.4 17.6 L73.0 13.2 L80.9 12.1 L86.9 21.9 L95.4 20.1 L98.7 13.8 L109.2 20.5 L115.4 21.0 L120.4 16.7 L130.5 14.8 L137.6 16.7 L145.6 19.5 L151.7 22.0 L161.6 10.1 L168.9 13.2 L175.4 15.4 L180.5 16.0 L190.4 13.6 L194.7 19.2 L201.9 10.0 L212.3 20.5 L215.8 20.5 L222.7 10.8 L226.7 15.7 L236.7 15.1 L245.5 12.4 L253.7 15.3 L258.5 14.1 L263.3 10.9 L273.5 26.7 L281.9 12.6 L289.4 15.7 L294.0 11.2 L300.7 18.7 L304.5 14.8 L309.5 12.3 L314.7 13.0 L324.6 27.6 L334.3 21.6 L338.6 15.8 L342.1 14.5 L351.4 15.5 L362.3 16.7 L367.7 21.6 L376.7 10.7 L386.5 11.9 L391.0 17.1 L394.9 20.7 L402.9 15.0 L413.4 12.5 L419.5 18.1 L428.6 10.9 L439.5 10.9 L450.0 20.6 L454.3 20.0 L465.2 27.8 L470.6 18.0 L474.5 11.3 L482.3 18.6 L487.4 15.9 L491.2 15.1 L500.3 17.6 L507.7 20.6 L517.8 20.8 L525.5 11.8 L535.7 19.6 L540.3 22.7 L550.4 14.9 L560.9 20.4 L570.9 10.3 L581.4 19.6 L586.5 29.7 L596.4 12.7 L601.8 19.5 L606.3 13.9 L611.6 17.7 L618.9 32.1 L623.3 21.6 L629.8 18.7 L636.9 14.6 L645.5 10.0 L654.3 18.9 L657.8 18.0 L667.6 18.6 L673.9 14.8 L680.3 21.3 L688.2 13.6 L693.5 15.2 L700.2 15.3 L710.4 19.6 L717.5 17.6 L726.5 18.1 L729.7 12.9 L733.3 15.0 L741.9 15.9 L744.9 19.0 L751.3 12.1 L754.7 13.0 L764.2 18.0 L774.8 20.7 L781.8 20.0 L790.7 15.7 L798.8 19.2 L804.0 10.9 L809.6 16.5 L818.1 25.9 L825.5 15.0 L835.7 17.0 L844.9 21.7 L853.9 20.2 L862.9 16.6 L867.6 22.2 L876.0 14.9 L880.1 24.8 L887.6 10.3 L894.3 10.6 L899.9 19.1 L909.5 18.1 L916.9 22.0 L926.1 17.8 L930.7 10.2 L939.1 16.8 L948.2 12.0 L952.1 19.8 L955.3 13.7 L961.5 27.7 L969.5 11.2 L977.3 11.5 L983.1 15.1 L988.8 20.2 L999.5 17.6 L1006.0 18.8 L1015.5 16.5 L1024.3 13.2 L1028.0 20.6 L1035.9 24.7 L1040.3 12.5 L1050.4 18.4 L1061.0 11.0 L1070.0 18.3 L1079.4 11.1 L1084.8 17.0 L1091.2 19.0 L1096.4 13.0 L1100.4 16.4 L1105.1 15.8 L1112.3 19.6 L1117.1 20.4 L1122.3 21.7 L1126.3 20.4 L1133.9 15.6 L1137.3 21.3 L1143.5 10.9 L1147.7 16.8 L1151.7 19.2 L1156.5 16.3 L1166.3 21.9 L1174.2 18.9 L1178.9 17.9 L1182.5 10.0 L1187.8 12.8 L1194.5 18.2 L1200 16V40Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V24.3 L0 24.3 L4.8 18.8 L8.5 21.4 L15.5 10.3 L22.9 12.6 L25.9 19.7 L30.2 21.5 L34.0 20.2 L42.8 16.4 L50.2 20.0 L57.8 24.8 L63.1 11.0 L68.4 17.6 L73.0 13.2 L80.9 12.1 L86.9 21.9 L95.4 20.1 L98.7 13.8 L109.2 20.5 L115.4 21.0 L120.4 16.7 L130.5 14.8 L137.6 16.7 L145.6 19.5 L151.7 22.0 L161.6 10.1 L168.9 13.2 L175.4 15.4 L180.5 16.0 L190.4 13.6 L194.7 19.2 L201.9 10.0 L212.3 20.5 L215.8 20.5 L222.7 10.8 L226.7 15.7 L236.7 15.1 L245.5 12.4 L253.7 15.3 L258.5 14.1 L263.3 10.9 L273.5 26.7 L281.9 12.6 L289.4 15.7 L294.0 11.2 L300.7 18.7 L304.5 14.8 L309.5 12.3 L314.7 13.0 L324.6 27.6 L334.3 21.6 L338.6 15.8 L342.1 14.5 L351.4 15.5 L362.3 16.7 L367.7 21.6 L376.7 10.7 L386.5 11.9 L391.0 17.1 L394.9 20.7 L402.9 15.0 L413.4 12.5 L419.5 18.1 L428.6 10.9 L439.5 10.9 L450.0 20.6 L454.3 20.0 L465.2 27.8 L470.6 18.0 L474.5 11.3 L482.3 18.6 L487.4 15.9 L491.2 15.1 L500.3 17.6 L507.7 20.6 L517.8 20.8 L525.5 11.8 L535.7 19.6 L540.3 22.7 L550.4 14.9 L560.9 20.4 L570.9 10.3 L581.4 19.6 L586.5 29.7 L596.4 12.7 L601.8 19.5 L606.3 13.9 L611.6 17.7 L618.9 32.1 L623.3 21.6 L629.8 18.7 L636.9 14.6 L645.5 10.0 L654.3 18.9 L657.8 18.0 L667.6 18.6 L673.9 14.8 L680.3 21.3 L688.2 13.6 L693.5 15.2 L700.2 15.3 L710.4 19.6 L717.5 17.6 L726.5 18.1 L729.7 12.9 L733.3 15.0 L741.9 15.9 L744.9 19.0 L751.3 12.1 L754.7 13.0 L764.2 18.0 L774.8 20.7 L781.8 20.0 L790.7 15.7 L798.8 19.2 L804.0 10.9 L809.6 16.5 L818.1 25.9 L825.5 15.0 L835.7 17.0 L844.9 21.7 L853.9 20.2 L862.9 16.6 L867.6 22.2 L876.0 14.9 L880.1 24.8 L887.6 10.3 L894.3 10.6 L899.9 19.1 L909.5 18.1 L916.9 22.0 L926.1 17.8 L930.7 10.2 L939.1 16.8 L948.2 12.0 L952.1 19.8 L955.3 13.7 L961.5 27.7 L969.5 11.2 L977.3 11.5 L983.1 15.1 L988.8 20.2 L999.5 17.6 L1006.0 18.8 L1015.5 16.5 L1024.3 13.2 L1028.0 20.6 L1035.9 24.7 L1040.3 12.5 L1050.4 18.4 L1061.0 11.0 L1070.0 18.3 L1079.4 11.1 L1084.8 17.0 L1091.2 19.0 L1096.4 13.0 L1100.4 16.4 L1105.1 15.8 L1112.3 19.6 L1117.1 20.4 L1122.3 21.7 L1126.3 20.4 L1133.9 15.6 L1137.3 21.3 L1143.5 10.9 L1147.7 16.8 L1151.7 19.2 L1156.5 16.3 L1166.3 21.9 L1174.2 18.9 L1178.9 17.9 L1182.5 10.0 L1187.8 12.8 L1194.5 18.2 L1200 16V40Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.bi-band.tear-white::after { background: #fff; }
.bi-band.tear-pale::after { background: #eef3f9; }
.bi-band.tear-navy::after { background: #034186; }
.bi-band.tear-deep::after { background: #022a57; }

/* Headings: Lora, with the short gold underline (Ramsey's orange bar, in our gold) */
.bi-h { font-family: Lora, Georgia, serif !important; font-weight: 700; line-height: 1.15; color: #030712; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem) !important; margin: 0 0 14px !important; }
.bi-h::after { content: ""; display: block; width: 72px; height: 5px; border-radius: 3px; background: #ffde59; margin-top: 14px; }
.bi-h.center { text-align: center; }
.bi-h.center::after { margin-left: auto; margin-right: auto; }
.bi-band.white .bi-h::after, .bi-band.pale .bi-h::after { background: #f2c500; }
.bi-eyebrow { font-family: Inter, sans-serif; font-size: 14px !important; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #2f6ba5; margin: 0 0 10px !important; }
.bi-band.navy .bi-eyebrow, .bi-band.deep .bi-eyebrow { color: #ffde59; }
.bi-lede { font-size: 20px !important; line-height: 1.55; color: #3f4652; max-width: 760px; }
.bi-h.center + .bi-lede, .bi-lede.center { margin-left: auto; margin-right: auto; text-align: center; }

/* One hero word on a gold marker stroke */
.bi-mark { position: relative; white-space: nowrap; z-index: 0; color: inherit; padding: 0 .12em; }
.bi-mark::before { content: ""; position: absolute; z-index: -1; left: -.14em; right: -.14em; top: .14em; bottom: -.06em; transform: rotate(-1.2deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'%3E%3Cpath fill='%23FFDE59' d='M4 14c22-6 51-8 77-7 30 1 61-3 92-1 10 1 19 3 23 7 3 6 0 12-2 17-34 3-69 1-103 2-28 1-57 4-84 0C3 31 0 25 1 20c0-2 1-5 3-6Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.bi-band.navy .bi-mark, .bi-band.deep .bi-mark { color: #030712; }

/* Hero: text + collage art, on navy with a torn bottom edge */
.bi-hero2 { padding: 56px 0 84px; }
.bi-hero2 .bi-band-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.bi-hero2 h1 { font-family: Lora, Georgia, serif !important; font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.6rem) !important; line-height: 1.08; margin: 0 0 18px !important; color: #fff; }
.bi-hero2 .bi-lede { color: #dbe5f1; }
.bi-hero2 .bi-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.bi-btn-gold, .bi-btn-line { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 800; font-size: 18px; text-decoration: none !important; }
.bi-btn-gold { background: #ffde59; color: #030712 !important; }
.bi-btn-gold:hover { background: #f5cf36; }
.bi-btn-line { border: 2px solid currentColor; color: #fff !important; }
.bi-band.white .bi-btn-line, .bi-band.pale .bi-btn-line { color: #034186 !important; }

/* Collage art in a torn paper frame */
.bi-art { position: relative; margin: 0; }
.bi-art::before { content: ""; position: absolute; inset: -14px -16px -16px -12px; background: #fff; transform: rotate(-2.2deg); border-radius: 4px;
  box-shadow: 0 14px 30px rgba(3,7,18,.18); }
.bi-art img { position: relative; display: block; width: 100%; height: auto; border-radius: 4px; }
.bi-art.gold::before { background: #ffde59; transform: rotate(2deg); }
.bi-art.pale::before { background: #dbe5f1; transform: rotate(1.6deg); box-shadow: none; }
.bi-art figcaption { position: relative; font-size: 14px; color: #636363; margin-top: 18px; }

/* Picture + text rows, alternating sides */
.bi-zz { display: grid; gap: 72px; margin-top: 40px; }
.bi-zz-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.bi-zz-row:nth-child(even) .bi-art { order: 2; }
.bi-zz-row h3 { font-family: Lora, Georgia, serif !important; font-size: clamp(1.5rem, 1.25rem + .8vw, 2rem) !important; line-height: 1.2; margin: 0 0 12px !important; color: #034186; }
.bi-zz-row p { font-size: 19px; line-height: 1.6; color: #3f4652; margin: 0 0 16px; }
.bi-zz-row .bi-kicker { display: inline-block; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #2f6ba5; margin-bottom: 8px; }
.bi-more { font-weight: 800; font-size: 18px; color: #034186; text-decoration: none; border-bottom: 3px solid #ffde59; padding-bottom: 2px; }
.bi-more:hover { color: #022a57; }

/* Icon row: big line icons in pale circles, no card borders */
.bi-iconrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 36px 32px; margin-top: 36px; }
.bi-iconrow > div { text-align: left; }
.bi-ic { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: #dbe5f1; color: #034186; margin-bottom: 14px; }
.bi-band.pale .bi-ic { background: #fff; }
.bi-ic .acc { stroke: #e0b800; }
.bi-iconrow h3 { font-family: Lora, Georgia, serif !important; font-size: 22px !important; color: #030712; margin: 0 0 8px !important; }
.bi-iconrow p { font-size: 18px; line-height: 1.55; color: #3f4652; margin: 0 0 10px; }

/* Numbered path (decisions, steps): color-stepped badges, a dotted line joining them, no boxes */
.bi-path { list-style: none; margin: 36px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 56px; counter-reset: bp; }
.bi-path li { counter-increment: bp; position: relative; padding: 4px 0 26px 76px; min-height: 64px; }
.bi-path li::before { content: counter(bp); position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font: 800 24px/1 Inter, sans-serif; color: #030712; background: #ffde59; box-shadow: 0 0 0 5px #fff8d6; }
.bi-path li:nth-child(n+3)::before { background: #f5cf36; }
.bi-path li:nth-child(n+5)::before { background: #2f6ba5; color: #fff; box-shadow: 0 0 0 5px #dbe5f1; }
.bi-path li:nth-child(n+7)::before { background: #034186; color: #fff; box-shadow: 0 0 0 5px #dbe5f1; }
.bi-path h3 { font-family: Lora, Georgia, serif !important; font-size: 22px !important; margin: 0 0 4px !important; }
.bi-path h3 a { color: #034186; text-decoration: none; }
.bi-path h3 a:hover { text-decoration: underline; }
.bi-path p { font-size: 18px; line-height: 1.5; color: #3f4652; margin: 0; }

/* Big numbers row (verified figures only, each with its year) */
.bi-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px; margin-top: 30px; text-align: center; }
.bi-stats b { display: block; font-family: Lora, Georgia, serif; font-size: clamp(2.2rem, 1.8rem + 1.5vw, 3.2rem); line-height: 1; color: #034186; }
.bi-stats span { display: block; margin-top: 10px; font-size: 17px; line-height: 1.4; color: #3f4652; }
.bi-band.navy .bi-stats b, .bi-band.deep .bi-stats b { color: #ffde59; }
.bi-band.navy .bi-stats span, .bi-band.deep .bi-stats span { color: #dbe5f1; }
.bi-stats-src { text-align: center; font-size: 14px !important; color: #636363; margin-top: 18px !important; }

/* "Your guide" strip: Kwame's photo with a name tag */
.bi-guide-strip { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: center; }
.bi-guide-photo { position: relative; }
.bi-guide-photo::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; background: #ffde59; border-radius: 50%; }
.bi-guide-photo img { position: relative; width: 220px; height: 220px; border-radius: 50%; object-fit: cover; display: block; }
.bi-nametag { position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); background: #fff; border-radius: 10px; box-shadow: 0 6px 18px rgba(3,7,18,.16);
  padding: 8px 14px; white-space: nowrap; text-align: center; font-size: 14px; line-height: 1.25; color: #3f4652; }
.bi-nametag b { display: block; color: #030712; font-size: 15px; }
.bi-guide-strip blockquote { margin: 0; font-family: Lora, Georgia, serif; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem); line-height: 1.4; color: #030712; }
.bi-guide-strip cite { display: block; margin-top: 14px; font-style: normal; font-size: 16px; color: #3f4652; }

/* Link columns: a plain list with arrows (the tools index pattern) */
.bi-linkcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 40px; margin-top: 30px; }
.bi-linkcols h3 { font-family: Inter, sans-serif !important; font-size: 18px !important; font-weight: 800; color: #030712; margin: 0 0 10px !important; display: flex; align-items: center; gap: 10px; }
.bi-linkcols h3 .ico { color: #034186; }
.bi-linkcols h3 .ico .acc { stroke: #e0b800; }
.bi-linkcols ul { list-style: none; margin: 0; padding: 0; }
.bi-linkcols li { margin: 0 0 10px; }
.bi-linkcols a { font-size: 18px; color: #034186; font-weight: 600; text-decoration: none; }
.bi-linkcols a::after { content: " →"; }
.bi-linkcols a:hover { text-decoration: underline; }

/* Inline state picker inside a band */
.bi-pick { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; align-items: center; }
.bi-pick select { min-height: 54px; font-size: 19px; padding: 0 14px; border-radius: 10px; border: 2px solid #034186; min-width: 260px; font-family: inherit; background: #fff; }

@media (max-width: 860px) {
  .bi-hero2 .bi-band-in, .bi-zz-row, .bi-guide-strip { grid-template-columns: 1fr; gap: 34px; }
  .bi-zz-row:nth-child(even) .bi-art { order: 0; }
  .bi-hero2 .bi-art { max-width: 520px; }
  .bi-path { grid-template-columns: 1fr; }
  .bi-guide-photo { justify-self: center; }
  .bi-band { padding: 48px 0 58px; }
  .bi-zz { gap: 52px; }
}
@media (max-width: 520px) {
  .bi-band-in { padding: 0 18px; }
  .bi-guide-photo img { width: 180px; height: 180px; }
  .bi-guide-strip { grid-template-columns: 1fr; }
}

/* ---- 404 (src/theme/404.html), Nov 12, 2026: the Ramsey pattern in our colors */
.bi-404 .bi-band { padding: 56px 0 72px; }
.bi-404-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px; align-items: center; }
.bi-404-num { margin: 0 0 6px !important; font-family: Inter, sans-serif; font-weight: 900; font-size: clamp(5rem, 3.5rem + 6vw, 9rem); line-height: 1; color: #034186; letter-spacing: -.02em; }
.bi-404-num .bi-mark::before { top: auto; height: .55em; bottom: .08em; }
.bi-404 h1 { font-family: Lora, Georgia, serif !important; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem) !important; margin: 0 0 12px !important; color: #030712; }
.bi-404-search { display: flex; gap: 10px; max-width: 520px; margin: 22px 0 18px; }
.bi-404-search input { flex: 1; min-height: 54px; font-size: 19px; padding: 0 16px; border: 2px solid #034186; border-radius: 12px; font-family: inherit; }
.bi-404-search button { min-height: 54px; padding: 0 22px; border: 0; border-radius: 12px; background: #034186; color: #fff; font-weight: 800; font-size: 18px; cursor: pointer; font-family: inherit; }
.bi-404-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.bi-404-links a { font-weight: 700; font-size: 18px; color: #034186; text-decoration: none; border-bottom: 3px solid #ffde59; }
.bi-404-face { position: relative; margin: 0; justify-self: center; }
.bi-404-face::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; background: #ffde59; border-radius: 50%; }
.bi-404-face img { position: relative; width: 260px; height: 260px; border-radius: 50%; object-fit: cover; display: block; }
.bi-bubble { position: absolute; top: -18px; right: -60px; background: #fff; border: 2px solid #034186; border-radius: 18px; padding: 12px 16px; max-width: 210px;
  font: 700 18px/1.3 Lora, Georgia, serif; color: #030712; box-shadow: 0 8px 20px rgba(3,7,18,.12); transform: rotate(2deg); }
.bi-bubble::after { content: ""; position: absolute; left: 26px; bottom: -12px; width: 20px; height: 20px; background: #fff; border-right: 2px solid #034186; border-bottom: 2px solid #034186; transform: rotate(45deg); }
@media (max-width: 860px) {
  .bi-404-in { grid-template-columns: 1fr; }
  .bi-404-face { order: -1; }
  .bi-404-face img { width: 180px; height: 180px; }
  .bi-bubble { right: -110px; top: -6px; font-size: 16px; max-width: 170px; }
}
@media (max-width: 420px) { .bi-bubble { right: -70px; max-width: 140px; } }
.bi-404-in > div { min-width: 0; }
.bi-404-search input { min-width: 0; width: 100%; }
@media (max-width: 420px) { .bi-404-search { flex-wrap: wrap; } .bi-404-search button { width: 100%; } }

/* One footer color everywhere (Kwame, Nov 12, 2026: "main page is black"). The site footer is ink #030712; the mounted
   Medicare Navigator and the SNAP Resource Center (which loads this stylesheet through /_partials/snap-header.html) had navy. */
body footer:not(.wp-block-template-part) { background: #030712 !important; }
footer.bg-navy { border-top: 0 !important; }

/* ---- Halftone collage, the carousel grammar on the web (Kwame, Nov 12, 2026: "the design is not just paper cuts and
   objects... gray and faded colors bring texture and depth"). Three layers, same as carousels/_system/build.py:
   torn tint block (lane 100) with a white grid · small torn scrap (lane 300) · gray halftone cut-out from
   carousels/_system/collage (copied to /assets/img/collage/). Topic lanes match the carousels. */
.bi-collage { --l100: #E4EDF9; --l200: #BBD2EF; --l300: #6E9BD6; position: relative; margin: 0; aspect-ratio: 4 / 3; width: 100%; }
.bi-collage.lane-ss { --l100: #E4EDF9; --l200: #BBD2EF; --l300: #6E9BD6; }   /* Social Security, Disability: Ledger Blue */
.bi-collage.lane-mc { --l100: #DDF0EE; --l200: #ABDCD7; --l300: #55B5AC; }   /* Medicare, Medicaid: Vital Teal */
.bi-collage.lane-sn { --l100: #E4F2DC; --l200: #C0DFAF; --l300: #86C168; }   /* SNAP: Harvest Green */
.bi-collage.lane-mn { --l100: #FFF1D6; --l200: #FCDCA2; --l300: #F5B84E; }   /* Money: Signal Gold */
.bi-collage.lane-lf { --l100: #EFE7F7; --l200: #D6C4E9; --l300: #A886CC; }   /* Life: Plum */
.bi-collage .tc-block { position: absolute; left: 12%; top: 8%; width: 76%; height: 80%; background: var(--l100); transform: rotate(-2deg); overflow: hidden;
  clip-path: polygon(2% 3%, 12% 0%, 26% 2%, 41% 1%, 55% 3%, 70% 0%, 84% 2%, 97% 1%, 100% 14%, 98% 28%, 100% 43%, 97% 57%, 100% 71%, 98% 85%, 100% 97%, 86% 100%, 71% 98%, 56% 100%, 42% 98%, 27% 100%, 13% 98%, 0% 100%, 2% 86%, 0% 71%, 3% 57%, 1% 42%, 3% 28%, 0% 14%); }
.bi-collage .tc-block::before { content: ""; position: absolute; inset: 0; opacity: .75;
  background: repeating-linear-gradient(0deg, transparent 0 44px, #fff 44px 46px), repeating-linear-gradient(90deg, transparent 0 44px, #fff 44px 46px); }
.bi-collage .tc-scrap { position: absolute; left: 4%; top: 14%; width: 15%; height: 12%; background: var(--l300); transform: rotate(8deg);
  clip-path: polygon(2% 3%, 26% 2%, 55% 3%, 84% 2%, 100% 14%, 98% 43%, 100% 71%, 100% 97%, 71% 98%, 42% 98%, 13% 98%, 0% 100%, 2% 86%, 1% 42%, 0% 14%); }
.bi-collage img { position: absolute; left: 50%; top: 50%; height: 80%; width: auto; max-width: 74%; object-fit: contain; transform: translate(-46%, -50%) rotate(-3deg); }
.bi-collage.wide img { height: auto; width: 74%; max-height: 70%; }            /* long props: hospital bed, stamp, door */
.bi-collage.flip .tc-block { left: 12%; transform: rotate(2deg); }
.bi-collage.flip .tc-scrap { left: auto; right: 4%; top: auto; bottom: 14%; transform: rotate(-7deg); }
.bi-collage.flip img { transform: translate(-54%, -50%) rotate(3deg); }

/* One faint, large halftone object behind a band for depth (use once per page) */
.bi-band { overflow: hidden; }
.bi-band > .bi-band-in { position: relative; z-index: 1; }
.bi-ghost { position: absolute; z-index: 0; right: -60px; top: 50%; width: 460px; max-width: 46%; opacity: .07; transform: translateY(-50%) rotate(-8deg); pointer-events: none; }
.bi-ghost.left { right: auto; left: -60px; transform: translateY(-50%) rotate(7deg); }
@media (max-width: 860px) { .bi-ghost { width: 300px; max-width: 70%; opacity: .05; } }