/* ============ Orthodontics hub page — page-specific styles ============ */

/* ---- options (Invisalign vs Braces, borderless items) ---- */
.ortho-options .section-head--center p{max-width:56ch;margin-top:.9rem;font-size:1.05rem}
.ortho-options-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3vw,2.5rem)}
.ortho-option{display:flex;flex-direction:column;gap:1rem}
.ortho-option__photo{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden}
.ortho-option__photo img{width:100%;height:100%;object-fit:cover}
.ortho-option h3{font-family:var(--sans);color:var(--ink);font-weight:500;font-size:1.5rem;margin:0}
.ortho-option p{font-size:1rem;margin:0}
.ortho-option__cta{margin-top:.4rem}

/* ---- comparison table (green-pale band, white card) ---- */
.ortho-compare-section{background:var(--green-pale);border-radius:28px}
.ortho-compare-section .wrap{max-width:80rem}
.ortho-compare-section h2{color:var(--green)}
.ortho-compare{overflow-x:auto;background:#fff;border-radius:1rem;padding:2rem}
.ortho-compare table{width:100%;border-collapse:collapse;min-width:640px}
.ortho-compare th,.ortho-compare td{padding:1rem;border-bottom:1px solid #ccc;vertical-align:top}
.ortho-compare thead th{font-family:var(--sans);color:var(--ink);font-weight:400;font-size:1.4rem;text-align:center;background:none;vertical-align:bottom}
.ortho-compare thead th:first-child{text-align:left}
.ortho-compare tbody th{font-family:var(--sans);font-weight:500;color:var(--ink);text-align:left;width:38%;padding-left:1.5rem}
.ortho-compare td{color:var(--muted);font-size:.98rem;text-align:center}
.ortho-compare td,.ortho-compare thead th+th{border-left:1px solid #ccc}
.ortho-compare tbody tr:last-child th,.ortho-compare tbody tr:last-child td{border-bottom:none}

/* ---- perks (2-col river: bullet list left, photo right) ---- */
.ortho-perks__inner{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.ortho-perks__copy ul{margin:1.6rem 0 2rem;padding-left:1.2rem;display:flex;flex-direction:column;gap:.8rem;color:var(--ink);font-size:1.05rem}
.ortho-perks__media img{width:100%;border-radius:var(--radius);object-fit:cover;aspect-ratio:4/3.2}

/* ---- affirm / payments (green-light band, white card right) ---- */
.ortho-pay__band{background:var(--green-light);border-radius:var(--radius);padding:clamp(2.2rem,4vw,3.6rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}
.ortho-pay__copy h2{color:var(--green-dk)}
.ortho-pay__copy h2 em{font-style:italic}
.ortho-pay__fine{font-size:.78rem;color:var(--green-dk);margin-top:1.4rem;max-width:52ch}
.ortho-pay__card{background:#fff;border-radius:1rem;max-width:32rem;width:100%;justify-self:end;overflow:hidden;display:flex;flex-direction:column}
.ortho-pay__card h3{font-family:var(--sans);color:var(--ink);font-weight:600;font-size:1.35rem;margin:1.8rem 1.8rem .9rem}
.ortho-pay__check{display:flex;align-items:center;gap:.6rem;color:var(--ink);font-size:1rem;margin:0 1.8rem 1.6rem}
.ortho-pay__check svg{flex:none;color:var(--green-dk)}
.ortho-pay__strip{background:#EFEDE9;padding:1rem 1.8rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.ortho-pay__strip span{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ortho-pay__strip strong{color:var(--ink);font-weight:600}

@media(max-width:900px){
  .ortho-options-grid,.ortho-perks__inner,.ortho-pay__band{grid-template-columns:1fr}
  .ortho-pay__card{justify-self:start}
}