/* /waverate/compare: spec sheets, one per service. Hairline rows like .terms, no card per service,
   so the page reads as a reference rather than a pitch. Uses site.css tokens only. */

.band.cmp-first { padding-top: 0; }
.cmp-us { display: grid; gap: 6px; border-color: var(--line-strong); }
.cmp-us .spec { margin-top: 10px; }
.cmp-ctas { margin-top: 22px; }
.cmp-side { display: grid; justify-items: center; align-self: center; }
.cmp-side .device { width: min(300px, 72vw); }
@media (max-width: 900px) { .cmp-side { display: none; } }

.cmp-intro { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }

.spec { display: grid; margin: 18px 0 0; }
.spec > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 4px 18px; padding: 13px 0; border-top: 1px solid var(--line); }
.spec > div:last-child { border-bottom: 1px solid var(--line); }
.spec dt { font: 600 .92rem/1.5 var(--display); color: var(--cream); }
.spec dd { margin: 0; color: var(--muted); font-size: .96rem; text-wrap: pretty; overflow-wrap: anywhere; }
@media (max-width: 560px) { .spec > div { grid-template-columns: minmax(0, 1fr); } }

.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 5vw, 56px) clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }
.svc { scroll-margin-top: 90px; }
.svc h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.svc h3 .chip { font-family: var(--body); letter-spacing: 0; }
.svc-what { margin-top: 8px; color: var(--muted); max-width: 52ch; }