/* The price guide and the comparison (costView.tsx): tables of figures that must read on a phone */
.cg{padding-bottom:clamp(60px,8vw,110px)}
.cg-lead{max-width:58ch}
.cg-sec{margin-top:clamp(40px,6vw,72px)}
.cg-h{font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;letter-spacing:-.015em;margin-bottom:12px;text-wrap:balance}
.cg-sub,.cg-p{color:var(--ink-soft);max-width:62ch;margin-bottom:22px}
.cg-note{font-size:14px;color:var(--ink-muted);max-width:70ch;margin-top:14px}
.cg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.cg-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.cg-table th,.cg-table td{text-align:left;vertical-align:top;padding:14px 18px;border-bottom:1px solid var(--line)}
.cg-table tbody tr:last-child th,.cg-table tbody tr:last-child td{border-bottom:0}
.cg-table thead th{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);background:var(--paper)}
.cg-table tbody th{font-weight:500;white-space:nowrap}
.cg-table td{white-space:nowrap}
.cg-n{white-space:nowrap}
.cg-table tr.is-key{background:var(--sage-wash)}
.cg-table a{color:var(--ink);border-bottom:1px solid var(--sage)}
.cg-compare td{white-space:normal;min-width:220px;color:var(--ink-soft)}
.cg-compare tbody th{white-space:normal;min-width:130px}
.cg-compare td:nth-child(2){color:var(--ink)}
.cg-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cg-cols-2{grid-template-columns:repeat(2,1fr)}
.cg-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px}
.cg-card h3{font-weight:500;font-size:1.02rem;margin-bottom:12px}
.cg-card ul,.cg-list{margin:0;padding-left:20px;color:var(--ink-soft)}
.cg-card li,.cg-list li{margin-bottom:8px}
.cg-card.is-out{background:transparent}
.cg-dl{display:grid;grid-template-columns:repeat(2,1fr);gap:0 32px;margin:0;max-width:980px}
.cg-dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.cg-dl dt{color:var(--ink-soft)}
.cg-dl dd{margin:0;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.cg-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
.cg-next .cg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:8px}
/* the price answer at the top of the FAQ page */
.cg-answer{margin:0 0 32px;padding:20px 22px;background:var(--sage-wash);border-radius:var(--r)}
.cg-answer h3{margin-top:0}
.cg-answer p:last-child{margin-bottom:0}
.cg-answer a{display:inline-flex;align-items:center;gap:6px}
.cg-answer svg{width:14px;height:14px}
@media (max-width:860px){
  .cg-cols,.cg-cols-2,.cg-two,.cg-dl{grid-template-columns:1fr}
  .cg-table th,.cg-table td{padding:12px 14px}
  .cg-table td,.cg-table tbody th{white-space:normal}
}
@media (max-width:640px){
  .cg-table th,.cg-table td{padding:12px 10px}
  .cg-table thead th{font-size:10px;letter-spacing:.06em;hyphens:auto;overflow-wrap:anywhere}
  /* the comparison as cards: the topic, then each side under its own name */
  .cg-compare thead{display:none}
  .cg-compare tr{display:block;padding:14px 16px;border-bottom:1px solid var(--line)}
  .cg-compare tbody tr:last-child{border-bottom:0}
  .cg-compare th,.cg-compare td{display:block;min-width:0;padding:0;border:0}
  .cg-compare tbody th{margin-bottom:8px}
  .cg-compare td+td{margin-top:8px}
  .cg-compare td::before{content:attr(data-col);display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:2px}
}