/* Alternatives pages. Sits on site-v2.css and uses the same type, color, and card language as /why/. */

.p-hero { padding: 152px 0 72px; }
.p-hero .kicker, .p-hero .crumbs { text-align: left; }
.crumbs { margin: 0; color: var(--dim); font-size: 14px; }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-hidden] { margin: 0 6px; text-decoration: none; }
.p-hero h1 { margin: 14px 0 0; font-size: clamp(36px, 4.8vw, 64px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 700; max-width: 18ch; }
.p-hero h1 span { color: var(--dim); }
.p-hero .lede { margin: 22px 0 0; color: var(--dim); font-size: 19px; line-height: 1.45; max-width: 58ch; }
.p-hero .cta-row { justify-content: flex-start; }
.l2 { display: block; font-style: italic; letter-spacing: -0.03em; }
@media (max-width: 900px) { .p-hero { padding: 112px 0 56px; } }
@media (max-width: 620px) { .p-hero h1 { font-size: clamp(32px, 9vw, 44px); } }

.prose { margin: 16px auto 0; max-width: 68ch; color: var(--dim); font-size: 17px; line-height: 1.5; }
.switch-sub a, .prose a, .reports a, .faq a, .cmp a, .sources a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.steps .step p { max-width: 34ch; }
.steps .step h3 { margin-top: 0; }
.warm .switch-sub a, .warm .prose a, .warm .reports a, .warm .faq a, .warm .cmp a, .warm .sources a { color: var(--accent); }

.reports { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.reports li { padding: 18px 20px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(35,31,32,0.08); color: #231f20; font-size: 16px; line-height: 1.45; }
.reports li span { display: block; margin-top: 8px; color: #686164; font-size: 14px; }

.cmp-wrap { margin: 28px 0 0; max-width: 920px; overflow-x: auto; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(35,31,32,0.08); }
.cmp { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; min-width: 620px; }
.cmp th, .cmp td { padding: 16px 20px; border-bottom: 1px solid #f0eeea; vertical-align: top; }
.cmp tr:last-child td { border-bottom: 0; }
.cmp thead th { font-size: 13px; font-weight: 600; color: #686164; }
.cmp thead th:last-child { color: #231f20; }
.cmp tbody th { font-weight: 650; width: 22%; color: #231f20; }
.cmp td { color: #686164; }
.cmp td:last-child { color: #231f20; background: #faf8f4; }
.cmp caption { caption-side: bottom; padding: 14px 20px 16px; text-align: left; color: #686164; font-size: 13px; }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; perspective: none; }
.fact, a.fact { display: block; position: relative; padding: 24px; border-radius: 18px; border: 0; background: #fff; box-shadow: 0 0 0 1px rgba(35,31,32,0.08); text-align: left; color: #231f20; transform: none; overflow: visible; }
.fact::before, a.fact::before { display: none; }
.fact:hover, a.fact:hover { border-color: transparent; box-shadow: 0 0 0 1px rgba(35,31,32,0.16); }
.fact h3, a.fact h3 { margin: 0; font-size: 18px; letter-spacing: -0.02em; font-weight: 650; }
.fact p, a.fact p { margin: 8px 0 0; color: #686164; font-size: 15px; line-height: 1.45; }
.fact .more, a.fact .more { display: inline-block; margin-top: 14px; color: var(--accent); font-weight: 650; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }

.faq { display: grid; gap: 12px; margin-top: 28px; }
.faq article { padding: 20px 22px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(35,31,32,0.08); text-align: left; }
.faq h3 { margin: 0; font-size: 18px; letter-spacing: -0.02em; font-weight: 650; }
.faq p { margin: 8px 0 0; color: #686164; font-size: 15.5px; line-height: 1.5; }

.sources { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; text-align: left; }
.sources li { font-size: 15px; line-height: 1.4; }
.checked { margin: 22px 0 0; color: var(--dim); font-size: 14px; }

@media (max-width: 900px) { .facts { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .cmp { min-width: 0; font-size: 13.5px; } .cmp th, .cmp td { padding: 12px 10px; } }