/* Build Your Plan: the calculator page. On theme.css's tokens and v3.css's
   pieces; the calculator's own hooks are styled here, not renamed. */
body:has(.byp) { background:var(--v3-page, #f4f6f8) }
.byp { padding-bottom:48px }
.byp > .wrap + .wrap { margin-top:24px }
.byp__open { padding-top:28px; padding-bottom:4px }
.byp__open h1 { font-size:clamp(1.9rem, 3.2vw, 2.7rem); line-height:1.12; margin:12px 0 10px; max-width:22ch }
.byp__lede { color:var(--muted); max-width:62ch; margin:0 }
.byp__ticks { list-style:none; display:flex; flex-wrap:wrap; gap:8px 22px; margin:14px 0 0; padding:0; font-size:.92rem; color:var(--v3-green, #1f7a4d); font-weight:700 }
.byp__ticks li { display:inline-flex; align-items:center; gap:8px }
.byp__ticks li::before { content:''; width:10px; height:5px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg) translateY(-2px) }

.byp__plan.plan { grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:24px }
.byp__steps { display:flex; flex-direction:column; gap:16px }
.byp__step, .byp__how { background:#fff; border:1px solid var(--hair); border-radius:var(--v3-r, 14px); padding:20px }
.byp__how { background:var(--sky); border-color:var(--sky-line) }
.byp__h { font-family:var(--fb); font-size:1.1rem; font-weight:800; margin:0 0 14px; display:flex; align-items:center; gap:10px; color:var(--navy) }
.byp__h--sm { font-size:1rem; margin-bottom:8px }
.byp__n { width:28px; height:28px; border-radius:50%; background:var(--blue); color:#fff; display:inline-grid; place-items:center; font-size:.9rem; flex:none }
.byp__tests { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:10px }
.byp__test, .byp__opt { border:1px solid var(--hair); background:#fff; border-radius:10px; color:var(--navy); cursor:pointer; text-align:left; font:inherit }
.byp__test { display:flex; flex-direction:column; align-items:center; padding:12px 4px; min-height:64px }
.byp__test b { font-size:1.3rem }
.byp__test small, .byp__opt small { font-size:.78rem; color:var(--muted) }
.byp__test[aria-pressed="true"], .byp__opt[aria-pressed="true"] { border:2px solid var(--blue); background:var(--sky) }
.byp__test[aria-pressed="true"] { background:var(--blue); color:#fff }
.byp__test[aria-pressed="true"] small { color:#fff }
.byp__note { font-size:.86rem; color:var(--muted); margin:10px 0 0 }
.byp__opts { display:flex; flex-direction:column; gap:10px }
.byp__opts--3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)) }
.byp__opt { padding:12px 14px; display:flex; flex-direction:column; gap:2px; min-height:56px }
.byp__opt--row { flex-direction:row; align-items:center; justify-content:space-between; gap:12px; padding-left:44px; position:relative }
.byp__opt--row::before { content:''; position:absolute; left:14px; top:50%; width:18px; height:18px; margin-top:-9px; border:2px solid var(--hair); border-radius:4px; background:#fff }
.byp__opt--row[aria-pressed="true"]::before { background:var(--blue); border-color:var(--blue); box-shadow:inset 0 0 0 3px #fff }
.byp__opt--row span { display:flex; flex-direction:column }
.byp__opt em { font-style:normal; font-weight:800; color:var(--blue); white-space:nowrap }
.byp__math { text-align:left; margin:0; font-size:.92rem }

.byp__receipt { position:sticky; top:150px; border:2px solid var(--blue) }
.byp__receipt .receipt__h { padding:18px 20px }
.byp__receipt .receipt__b { padding:6px 20px 20px }
.byp__receipt .rline { padding:12px 0 }
.byp__receipt .rline > span, .byp__receipt .rline b { font-size:1.05rem }
.byp__receipt .rline em { font-size:.85rem; margin-top:4px }
.byp__receipt .rtotal span { font-size:1.15rem }
.byp__receipt .rtotal b { font-size:1.9rem }
.byp__receipt .receipt__note { font-size:.86rem }
.byp .btn { min-height:48px; padding:10px 22px; font-size:1rem }
.byp__alt { margin:14px 0 0; color:var(--muted) }

.byp__works h2 { font-size:clamp(1.4rem, 2.2vw, 1.9rem); margin:4px 0 14px }
.byp__cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px }
.byp__cards > div { background:#fff; border:1px solid var(--hair); border-radius:var(--v3-r, 14px); padding:18px }
.byp__cards b { display:block; margin-bottom:4px }
.byp__cards p { margin:0; color:var(--muted) }
.byp__num { display:block; font-weight:800; color:var(--blue); font-size:1.3rem; margin-bottom:6px }
.byp__faq h2 { font-size:clamp(1.4rem, 2.2vw, 1.9rem); margin:4px 0 14px }
.byp__faq .faq { padding:0; max-width:none }
.byp__faq .faq summary { font-size:1.08rem; padding:16px 20px }
.byp__faq .faq p { font-size:1rem; padding:0 20px 16px; margin-top:0 }
.byp__help { background:var(--navy-deep); color:#fff; border-radius:var(--v3-r, 14px); padding:22px 26px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap }
.byp__help p { margin:4px 0 0; opacity:.92; max-width:60ch }
.byp__help-btns { display:flex; gap:10px; flex-wrap:wrap }
.byp__bar { display:none }

@media (max-width:1100px) {
  .byp__plan.plan { grid-template-columns:minmax(0, 1fr) }
  .byp__receipt { position:static }
}
@media (max-width:700px) {
  .byp__tests { grid-template-columns:repeat(3, minmax(0, 1fr)) }
  .byp__opts--3 { grid-template-columns:minmax(0, 1fr) }
  .byp__cards { grid-template-columns:minmax(0, 1fr) }
  .byp__help-btns .btn { flex:1 1 100% }
  .byp__bar:not([hidden]) { display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50; background:#fff; border-top:1px solid var(--hair); padding:10px 16px; justify-content:space-between; align-items:center; gap:12px; box-shadow:0 -6px 20px rgba(0,0,0,.08) }
  .byp { padding-bottom:90px }
}