/* BNH widgets only; site shell, headings and CTA cards inherit CozyCalcs styles. */
.bnh-hero { margin:1.4rem 0 2rem; }
.bnh-hero img { display:block; width:100%; height:auto; border-radius:18px; }
.bnh-hero figcaption {font-size:.8rem; opacity:.72; padding-top:.5rem}
.bnh-widget {--bnh-orange:#e97531;--bnh-deep:#55335f;--bnh-pale:#f8f1ec; margin:1.5rem 0 1.9rem; padding:1.2rem; border-radius:18px; background:var(--card,#fff);border:1px solid rgba(120,95,110,.23)}
.bnh-widget h3{margin:0 0 .4rem;font-size:1.15rem}
.bnh-widget-intro{margin:.2rem 0 1rem}
.bnh-fundsbar{display:flex;overflow:hidden;border-radius:999px;height:24px;width:100%;background:#e8dee9;box-shadow:inset 0 0 0 1px rgba(70,35,60,.15)}
.bnh-frozen{width:47.6190476%;background:var(--bnh-orange)}
.bnh-remaining{width:52.3809524%;background:var(--bnh-deep)}
.bnh-legend{display:flex;flex-wrap:wrap;gap:.45rem 1rem;font-size:.83rem;margin:.65rem 0 1rem}
.bnh-legend span{display:inline-flex;align-items:center;gap:.35rem}
.bnh-swatch{display:inline-block;width:10px;height:10px;border-radius:100%}
.bnh-orange{background:var(--bnh-orange)}.bnh-plum{background:var(--bnh-deep)}
.bnh-choices{display:flex;gap:.45rem;flex-wrap:wrap;margin:1rem 0}
.bnh-choices button{border:1.5px solid #bcadb9;background:transparent;color:inherit;border-radius:999px;padding:.6rem .8rem;font:inherit;font-size:.9rem;line-height:1.2;cursor:pointer;min-height:42px}
.bnh-choices button[aria-pressed="true"]{background:var(--bnh-deep);color:#fff;border-color:var(--bnh-deep)}
.bnh-choices button:focus-visible{outline:3px solid var(--bnh-orange);outline-offset:3px}
.bnh-response,.bnh-custody-result{margin:.5rem 0;padding:.8rem .95rem;background:#faf4f0;color:#302132;border-left:4px solid var(--bnh-orange);border-radius:10px;min-height:3.6rem}
.bnh-custody-result p{margin:.35rem 0 0}
.bnh-note{font-size:.83rem;line-height:1.5;opacity:.86;margin:.8rem 0 0}
@media(max-width:440px){.bnh-widget{padding:.9rem}.bnh-choices button{flex:1 1 calc(50% - .5rem);font-size:.85rem}.bnh-legend{display:block}.bnh-legend span{margin:.15rem .5rem .15rem 0}}
@media(prefers-reduced-motion:reduce){.bnh-widget *{transition:none!important;animation:none!important}}

/* The foot of the article: "Explore all calculators" and "More from the blog" share one row under
   the two cards, with the reference article's exact 10px gap. The site's .btn-row already gives each
   button an equal flex share; without this the row sits flush against the cards. */
.post-page .post-more-actions { margin-top: 10px; }

/* The site's own scheme switch: theme.js writes data-scheme="dark" on <html> when the device asks
   for dark or the visitor picks it, so a system-dark reader gets these panels dark too instead of a
   white box holding pale text. data-theme is kept for an explicit "dark" choice. */
html[data-scheme="dark"] .bnh-widget, html[data-theme="dark"] .bnh-widget {background:var(--card,#261f2d);border-color:var(--border,#57465e)}
html[data-scheme="dark"] .bnh-response, html[data-scheme="dark"] .bnh-custody-result, html[data-theme="dark"] .bnh-response, html[data-theme="dark"] .bnh-custody-result {background:var(--accent,#392e3d);color:var(--text,#f9f3f5)}