/*
 * Service page frame (v3 page briefs): pale opening section, a sticky jump bar
 * under the header, white section cards on the grey page. The same frame and
 * values as the other service pages, on theme.css tokens and v3.css parts.
 */
body:has(.pg3) { background:var(--v3-page) }
.pg3 [id] { scroll-margin-top:calc(var(--pg3-top, 140px) + 60px) }
.pg3-hero { background:linear-gradient(135deg, var(--sky), #fff); color:var(--navy); border-bottom:1px solid var(--sky-line); padding:28px 0 26px }
.pg3-hero__row { display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr); gap:32px; align-items:center }
.pg3-hero h1 { font-size:clamp(1.9rem, 3.4vw, 2.9rem); line-height:1.12; margin:12px 0 10px }
.pg3-lede { margin:0 0 10px; max-width:62ch; color:var(--muted) }
.pg3-crumbs { font-size:.86rem; margin-bottom:12px; color:var(--muted) }
.pg3-crumbs a { color:var(--blue) }
.pg3-crumbs span { color:var(--navy); font-weight:700 }
.pg3-pill { display:inline-block; background:var(--navy-deep); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-radius:99px; padding:4px 12px }
.pg3-hero .v3btns .btn { min-height:46px; padding:10px 22px; font-size:.98rem }

.pg3-jump { background:#fff; border-bottom:1px solid var(--hair); position:sticky; top:var(--pg3-top, 0); z-index:50 }
.pg3-jump__row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding-top:8px; padding-bottom:8px }
.pg3-jump__links { display:flex; gap:4px 18px; overflow-x:auto; scrollbar-width:none; font-size:.9rem; font-weight:700 }
.pg3-jump__links::-webkit-scrollbar { display:none }
.pg3-jump__links a { color:var(--navy); white-space:nowrap; padding:8px 0 }
.pg3-jump__links a:hover { color:var(--blue) }
.pg3-jump .btn { min-height:40px; padding:8px 18px; white-space:nowrap }

.pg3-body { display:flex; flex-direction:column; gap:24px; padding-top:24px; padding-bottom:40px }
.pg3-h2 { font-size:clamp(1.4rem, 2.1vw, 1.9rem); margin:4px 0 8px }
.pg3-sub { color:var(--muted); margin:0 0 16px; max-width:72ch }
.pg3-navy { background:var(--navy-deep); color:#fff; border-radius:var(--v3-r); padding:24px }
.pg3-navy .pg3-h2, .pg3-navy b { color:#fff }
.pg3-faq details { border-top:1px solid var(--hair) }
.pg3-faq details:last-child { border-bottom:1px solid var(--hair) }
.pg3-faq summary { cursor:pointer; list-style:none; padding:14px 34px 14px 0; font-weight:700; color:var(--navy); position:relative; min-height:44px }
.pg3-faq summary::-webkit-details-marker { display:none }
.pg3-faq summary::after { content:'+'; position:absolute; right:4px; top:12px; color:var(--blue); font-weight:800; font-size:1.2rem }
.pg3-faq details[open] summary::after { content:'−' }
.pg3-faq details p { margin:0 0 14px; color:var(--muted); max-width:75ch }
.pg3 .v3sec .btn--sm { min-height:44px; padding:8px 18px; font-size:.95rem; white-space:nowrap }
.pg3-disclaimer { font-size:.86rem; color:var(--muted); border-top:1px solid var(--hair); padding-top:14px; margin:0 }

@media (max-width:1100px) {
  .pg3-hero__row { grid-template-columns:minmax(0, 1fr) }
}
@media (max-width:700px) {
  .pg3-jump__links { display:none }
  .pg3-jump__row { justify-content:flex-end }
  .pg3-hero .v3btns .btn { flex:1 1 100% }
  .pg3 .v3sec { padding:16px }
}

/* ── Meter & Supply Help ─────────────────────────────────────────────── */

/* The one green button, the brief's "Book Meter & Supply Help", in the
   site's own green. White on it is 5.6:1. */
.btn.msh-green { background:var(--v3-green); color:#fff; border-color:var(--v3-green) }
.btn.msh-green:hover { background:#18633e; border-color:#18633e; color:#fff }
.btn { white-space:nowrap }

.msh-subhead { font-family:var(--fd); font-weight:700; font-size:1.15rem; color:var(--navy); margin:0 0 12px }
.msh-ask { font-weight:700; color:var(--blue); align-self:center; padding:10px 0 }
.msh-note { font-style:italic; font-size:.9rem; color:var(--muted); margin:14px 0 0; max-width:62ch }

.msh-points { background:#fff; border:1px solid var(--hair); border-radius:var(--v3-r); padding:18px 20px }
.msh-points h2 { font-size:1.15rem; margin:0 0 6px }
.msh-points ul { list-style:none; margin:0; padding:0 }
.msh-points li + li { border-top:1px solid var(--hair) }
.msh-points a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; color:var(--navy); text-decoration:none; min-height:44px }
.msh-points a:hover b { color:var(--blue) }
.msh-points small { display:block; color:var(--muted); font-size:.84rem }
.msh-points em { font-style:normal; font-weight:800; color:var(--blue); white-space:nowrap }

.msh-recog { font-weight:700; color:var(--navy); margin:0 0 10px }
.msh-quotes { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px }
.msh-quotes li { background:var(--mist); border-radius:10px; padding:12px 14px; color:var(--navy) }
.msh-good { margin:16px 0 0; color:var(--muted); max-width:75ch }
.msh-good b { display:block; color:var(--v3-green); font-size:1.08rem; margin-bottom:2px }

.msh-band { display:grid; grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); gap:28px; align-items:center }
.msh-band p { margin:0 0 10px; opacity:.92; max-width:68ch }
.msh-band__side { background:rgba(255,255,255,.1); border-radius:12px; padding:18px }
.msh-band__side p { opacity:1 }

.msh-cards { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; margin-top:8px }
.msh-card { border:1px solid var(--hair); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:2px; color:var(--navy) }
.msh-card--navy { border:2px solid var(--navy-deep) }
.msh-card--green { border:2px solid var(--v3-green); background:#f3faf6 }
.msh-card h3 { font-size:1.2rem; margin:4px 0 6px }
.msh-card p { margin:0 0 10px; color:var(--muted) }
.msh-card__k { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blue) }
.msh-card--green .msh-card__k { color:var(--v3-green) }
.msh-card__lead { font-weight:700; color:var(--navy) !important }
.msh-card__sub { font-weight:700; color:var(--navy) !important; margin-bottom:0 !important }
.msh-card__note { font-size:.92rem }
.msh-card__note b { color:var(--navy) }
.msh-card__btn { margin-top:auto; align-self:flex-start; min-height:46px }
.msh-price { margin:2px 0 10px !important; color:var(--muted) }
.msh-price b { font-family:var(--fd); font-size:1.8rem; color:var(--navy); margin-right:4px }

.msh-ticks { list-style:none; margin:4px 0 12px; padding:0 }
.msh-ticks li { position:relative; padding:4px 0 4px 26px; font-size:.94rem; color:var(--navy) }
.msh-ticks li::before { content:''; position:absolute; left:6px; top:9px; width:8px; height:5px; border-left:2px solid var(--v3-green); border-bottom:2px solid var(--v3-green); transform:rotate(-45deg) }

.msh-plan { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:28px; align-items:start }
.msh-plan p { color:var(--muted); max-width:62ch; margin:0 0 10px }
.msh-plan__card { border:2px solid var(--blue); border-radius:12px; padding:20px; display:flex; flex-direction:column }
.msh-plan__card p { margin:0 0 8px }
.msh-later { border:1px dashed var(--hair); border-radius:10px; padding:10px 14px; margin:0 0 12px; background:var(--mist) }
.msh-later span { font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.msh-later ul { margin:4px 0 0; padding-left:18px; color:var(--muted); font-size:.92rem }
.msh-muted { color:var(--muted); font-size:.9rem; margin:10px 0 0 }

/* Help Me Choose: the table, and the form beside it. */
.msh-choose { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:24px; align-items:start; margin-top:8px }
.msh-sit .v3table { font-size:.92rem }
.msh-sit td { padding:10px 12px }
.msh-sit td a { font-weight:700; white-space:nowrap }
.msh-sit tr.is-match td { background:var(--sky) }
.msh-form-wrap { background:var(--mist); border:1px solid var(--hair); border-radius:12px; padding:20px }
.msh-form h3 { font-size:1.2rem; margin:0 0 10px }
.msh-pills { border:0; margin:0 0 14px; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.msh-pills legend { font-weight:700; color:var(--navy); margin-bottom:8px; padding:0 }
.msh-pills label { position:relative }
.msh-pills input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer }
.msh-pills span { display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border:1px solid var(--hair); border-radius:99px; background:#fff; color:var(--navy); font-weight:700; font-size:.92rem; white-space:nowrap; cursor:pointer }
.msh-pills input:checked + span { background:var(--blue); border-color:var(--blue); color:#fff }
.msh-pills input:focus-visible + span { outline:3px solid var(--blue); outline-offset:2px }
.msh-field { margin:0 0 12px }
.msh-field label { display:block; font-weight:700; color:var(--navy); margin-bottom:6px }
.msh-field label small { font-weight:400; color:var(--muted) }
.msh-field input, .msh-field textarea { width:100%; border:1px solid var(--hair); border-radius:8px; padding:10px 12px; min-height:46px; background:#fff; color:var(--navy); font:inherit }
.msh-field [aria-invalid="true"] { border-color:var(--coral) }
.msh-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px }
.msh-suggest:empty { display:none }
.msh-suggest { background:#fff; border:1px solid var(--sky-line); border-left:4px solid var(--blue); border-radius:10px; padding:12px 14px; margin:0 0 14px }
.msh-suggest span { display:block; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blue) }
.msh-suggest b { display:block; color:var(--navy); font-size:1.05rem; margin:2px 0 }
.msh-suggest p { margin:4px 0 0; font-size:.9rem; color:var(--muted) }
.msh-suggest a { font-weight:700 }
.msh-errs { background:var(--coral-soft); border:1px solid #f3c9c9; border-radius:10px; padding:10px 14px; margin:0 0 14px; color:var(--navy); font-size:.92rem }
.msh-errs ul { margin:0; padding-left:18px }
.msh-errs a { color:var(--navy); text-decoration:underline }
.msh-send { margin-top:14px; min-height:48px; width:100% }
.msh-fail:empty { display:none }
.msh-fail { margin:10px 0 0; color:var(--coral); font-weight:700; font-size:.92rem }
.msh-done { text-align:left }
.msh-done p { color:var(--muted); margin:0 0 12px }
.msh-done__t { font-family:var(--fd); font-weight:700; font-size:1.25rem; color:var(--navy) !important; display:flex; gap:10px; align-items:center }
.msh-tick { flex:none; width:28px; height:28px; border-radius:50%; background:var(--v3-green); position:relative }
.msh-tick::after { content:''; position:absolute; left:9px; top:8px; width:10px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) }

.msh-steps { list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px }
.msh-steps li { display:flex; gap:12px; border-top:1px solid var(--hair); padding-top:14px }
.msh-steps__n { font-family:var(--fd); font-size:1.6rem; font-weight:700; color:var(--blue); line-height:1 }
.msh-steps b { color:var(--navy) }
.msh-steps p { margin:6px 0 0; font-size:.9rem; color:var(--muted) }
.msh-after { display:flex; justify-content:space-between; align-items:center; gap:12px 20px; flex-wrap:wrap; margin-top:18px; padding-top:14px; border-top:1px solid var(--hair) }
.msh-after p { margin:0; color:var(--navy); font-weight:700 }

.msh-family { display:grid; grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr); gap:28px; align-items:start }
.msh-family p { color:var(--muted); max-width:66ch; margin:0 0 10px }
.msh-consent { background:#fff8e6; border:1px solid #f2d58f; border-radius:10px; padding:12px 14px; color:var(--navy) !important; font-size:.94rem }
.msh-family__qs { background:var(--mist); border-radius:12px; padding:18px 20px }
.msh-family__qs p { margin:0 0 8px; color:var(--navy) }
.msh-family__qs ul { list-style:none; margin:0; padding:0 }
.msh-family__qs li { position:relative; padding:8px 0 8px 34px; color:var(--navy); border-top:1px solid var(--hair) }
.msh-family__qs li::before { content:'?'; position:absolute; left:0; top:7px; width:24px; height:24px; border-radius:50%; background:var(--sky); color:var(--blue); font-weight:800; font-size:.85rem; display:grid; place-items:center }

.msh-who { display:flex; gap:28px; align-items:center }
.msh-who img { flex:none; width:120px; height:120px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,.3) }
.msh-who p { margin:0 0 10px; opacity:.92; max-width:72ch }

.msh-control { list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px }
.msh-control li { position:relative; border:1px solid var(--hair); border-radius:12px; padding:14px 14px 14px 44px; color:var(--navy) }
.msh-control li::before { content:''; position:absolute; left:12px; top:15px; width:22px; height:22px; border-radius:50%; background:#e6f4ec }
.msh-control li::after { content:''; position:absolute; left:19px; top:21px; width:8px; height:5px; border-left:2px solid var(--v3-green); border-bottom:2px solid var(--v3-green); transform:rotate(-45deg) }

/* Closing band: navy into the darker blue, so white text keeps 4.5:1 across it. */
.msh-close { background:linear-gradient(135deg, var(--navy-deep), var(--blue-dark)); color:#fff; border-radius:var(--v3-r); padding:28px; display:flex; justify-content:space-between; align-items:center; gap:20px 32px; flex-wrap:wrap }
.msh-close h2 { color:#fff; font-size:clamp(1.4rem, 2.1vw, 1.9rem); margin:0 0 10px }
.msh-close ul { list-style:none; margin:0 0 10px; padding:0 }
.msh-close li { opacity:.95; padding:2px 0 }
.msh-close p { margin:0 }
.msh-close__b { display:flex; flex-direction:column; gap:10px; align-items:flex-start }
.msh-close__b .btn { min-height:46px }
.msh-close__ask { color:#fff; text-decoration:underline; font-weight:700; padding:6px 0 }

@media (max-width:1100px) {
  .msh-steps { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  .msh-quotes { grid-template-columns:repeat(2, minmax(0, 1fr)) }
}
@media (max-width:900px) {
  .msh-band, .msh-cards, .msh-plan, .msh-choose, .msh-family { grid-template-columns:minmax(0, 1fr) }
  .msh-card__btn, .msh-after .btn, .msh-close__b .btn, .msh-band__side .btn, .msh-family .btn { align-self:stretch; width:100% }
}
@media (max-width:700px) {
  .msh-quotes, .msh-steps, .msh-row { grid-template-columns:minmax(0, 1fr) }
  .msh-who { flex-direction:column; align-items:flex-start }
  .msh-close { padding:20px }
  .msh-close__b { width:100% }
  .msh-sit td a { white-space:normal }
  .msh-sit .v3table { min-width:0 }
  .msh-card__btn, .btn { white-space:normal }
}

/* The plan button keeps its price beside the label where there is room; on a
   phone the price is already printed on the card above it, and the label must
   not wrap. */
@media (max-width: 520px) { .msh-wide { display: none } }
.msh-card__btn { gap: 0 }
/* A long label on a full width button: a little smaller on the narrowest
   phones rather than wrapping onto two lines. */
.msh-nowrap { white-space: nowrap }
@media (max-width: 420px) { .msh-nowrap { font-size: .9rem; padding-left: 14px; padding-right: 14px } }