/* ============ INSURANCE PAGE (extends styles.css) ============ */
/* Hero, insurance checker, and FAQ all use shared components from styles.css
   (.fullhero--small, .insurance/.insurance__inner, .faq-grid/.faq-item). */

/* ---- understanding your bill (image + text river) ---- */
.bill-section{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.river{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.river__media img{width:100%;border-radius:var(--radius);display:block}
.river__copy h2{max-width:14ch;margin-bottom:1.2rem}
.river__copy p{margin-bottom:1rem}
.river__copy .btn{margin-top:.4rem}

/* ---- price table (visually continues the bill section) ---- */
.price-section{padding-top:clamp(1.5rem,3vw,2.5rem)}
.price{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.price__copy h2{max-width:20ch;margin-bottom:1rem}
.price__fine{font-size:.82rem;color:var(--muted)}
.bill-table{width:100%;max-width:28rem;border-collapse:collapse;background:rgba(239,237,233,.6);border:none;border-radius:var(--radius);overflow:hidden}
.bill-table thead tr{border:none}
.bill-table th,.bill-table td{text-align:left;padding:.5rem;font-size:.96rem;border:none;border-bottom:1px solid var(--line)}
.bill-table th{color:var(--ink);font-weight:500}
.bill-table th:first-child,.bill-table td:first-child{padding-left:1.5rem}
.bill-table th:last-child,.bill-table td:last-child{padding-right:1.5rem}
.bill-table thead tr th{padding-top:1.5rem}
.bill-table tbody tr:last-child td{border-bottom:none;padding-bottom:1.5rem}
.bill-table td:last-child{color:var(--ink);font-weight:500}

@media(max-width:900px){
  .river{grid-template-columns:1fr}
  .price{grid-template-columns:1fr}
}