/* Repairs page specific styles (lean; builds on base.css) */
.section-spacing { margin-block: var(--space-48); }

.hero { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.18)), var(--color-surface-2); display: grid; align-items: center; }
.hero .btn + .btn { margin-left: var(--space-8); }

.before-after { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.before-after .before, .before-after .after { position: relative; overflow: hidden; border-radius: var(--radius-md); }
.before-after img { width: 100%; height: auto; display: block; }
.ba-label { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,0.55); border: 1px solid var(--color-border); padding: 2px 8px; border-radius: var(--radius-pill); font-size: var(--fs-200); }
.before-after figcaption { margin-top: var(--space-12); color: var(--gray-200); font-size: var(--fs-200); }

@media (max-width: 760px) { .before-after { grid-template-columns: 1fr; } }

.steps { counter-reset: step; display: grid; gap: var(--space-12); padding-left: 0; }
.steps > li { list-style: none; background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 12px 12px 44px; position: relative; box-shadow: var(--shadow-sm); }
.steps > li::before { counter-increment: step; content: counter(step); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--color-primary); color: #0b0c0e; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; box-shadow: var(--shadow-sm); }

.plans .price, .pricing .price { font-weight: 700; font-size: var(--fs-500); margin-top: var(--space-8); }
.muted { color: var(--gray-300); font-size: var(--fs-200); }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-16); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }

.faq details summary { cursor: pointer; font-weight: 600; }
.faq details[open] summary { color: var(--color-primary); }

.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
}

.grid-auto.plans,.grid-auto.pricing {
 grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}