/* Pricing pages (pricing.html = four-way comparison, pricing-vs.html = Bry3D vs the alternatives).
   Tokens come from site.css; no new colours. Panels: surface + 1px border + 8px radius, no shadow. */

.pricing-head { padding-block: var(--space-16) var(--space-8); }
.pricing-head .display { max-width: 20ch; }
.pricing-head .lead { margin-top: var(--space-4); }

.interval { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-8); flex-wrap: wrap; }
.interval .chip { font-variant-numeric: tabular-nums; }

/* Plan cards */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); padding-bottom: var(--space-6); }
.plan {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    position: relative;
}
.plan.is-rec { border: 2px solid var(--blue); padding: calc(var(--space-8) - 1px) calc(var(--space-6) - 1px) calc(var(--space-6) - 1px); }
.plan-rec { position: absolute; top: -11px; left: var(--space-6); background: var(--blue); color: var(--on-blue); font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: var(--radius-sm); }
.plan h2 { font-size: 20px; letter-spacing: -0.015em; }
.plan-for { color: var(--muted); font-size: 14px; margin-top: var(--space-1); min-height: 2.9em; }
.plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: var(--space-6); font-variant-numeric: tabular-nums; }
.plan-price b { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.plan-price span { color: var(--muted); font-size: 15px; }
.plan-billed { font-size: 13px; color: var(--muted); margin-top: var(--space-2); min-height: 1.6em; font-variant-numeric: tabular-nums; }
.plan-day { font-size: 13px; color: var(--ink-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.plan .btn { margin-top: var(--space-6); width: 100%; }
.plan-list { list-style: none; margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--hairline); display: grid; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.plan-list .plan-list-h { font-weight: 600; color: var(--ink); }
.plan-list li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.plan-list li.plan-list-h { display: block; }
.plan-list svg { width: 18px; height: 18px; color: var(--blue); margin-top: 2px; }

.plans-note { color: var(--muted); font-size: 14px; padding-bottom: var(--space-16); }

/* Section scaffolding */
.p-section { padding-block: var(--space-16); border-top: 1px solid var(--border); }
.p-section > .wrap > .h2 { max-width: 24ch; }
.p-section > .wrap > .body-text { margin-top: var(--space-4); }

/* Comparison table */
.cmp-scroll { position: relative; margin-top: var(--space-8); overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); }
.cmp { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 14.5px; }
.cmp th, .cmp td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.cmp thead th { font-size: 13px; font-weight: 600; color: var(--ink); background: var(--ground); position: sticky; top: 0; vertical-align: bottom; }
.cmp thead th small { display: block; font-weight: 400; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.cmp tbody th { font-weight: 500; color: var(--ink); width: 30%; }
.cmp td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cmp .is-us { background: var(--blue-tint); }
.cmp thead th.is-us { color: var(--blue-ink); }
.cmp tr.cmp-group th { background: var(--surface); font-size: 12px; font-weight: 600; color: var(--muted); padding-top: 20px; }
.cmp tr.cmp-total th, .cmp tr.cmp-total td { font-weight: 600; color: var(--ink); border-top: 1px solid var(--border); }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.yes, .no, .part { display: inline-flex; align-items: center; gap: 6px; }
.yes svg, .no svg, .part svg { width: 16px; height: 16px; flex: none; }
.yes svg { color: var(--good); }
.no { color: var(--muted); }
.no svg { color: var(--dash); }
.part svg { color: var(--warn); }
.cmp-two { min-width: 520px; }
.cmp-two tbody th { width: 34%; }
.cmp-two td { width: 33%; }
.cmp-notes { margin-top: var(--space-4); font-size: 13px; color: var(--muted); max-width: 90ch; display: grid; gap: 4px; }

/* Promises (risk reversal) */
.promises { margin-top: var(--space-8); list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.promises h3 { font-size: 16px; }
.promises p { margin-top: var(--space-2); color: var(--ink-2); font-size: 15px; }

/* FAQ */
.faq { margin-top: var(--space-8); max-width: 820px; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 32px 18px 0; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 22px; font-weight: 400; color: var(--muted); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 18px; color: var(--ink-2); max-width: 70ch; }

@media (max-width: 960px) {
    .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
    .plan-for { min-height: 0; }
    .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .pricing-head { padding-block: var(--space-12) var(--space-6); }
    .promises { grid-template-columns: minmax(0, 1fr); }
    .p-section { padding-block: var(--space-12); }
}