/* Shared spacing pass, September 12, 2026.
   Keep the existing colors, type, borders, radii and layouts.
   Related text: 16–24px. Component groups: 24–40px. New sections: 48–64px. */
:root {
  --space-copy: 1.25rem;
  --space-heading: 1.5rem;
  --space-group: 2rem;
  --space-block: clamp(2.5rem, 4vw, 3.5rem);
  --space-section: clamp(3.5rem, 6vw, 5rem);
  --space-card: clamp(1.5rem, 2.4vw, 2rem);
  --space-grid: 1.75rem;
}
main :where(h1, h2, h3) { margin-bottom: var(--space-heading); }
main p { margin-bottom: var(--space-copy); }
main :where(p, ul, ol):last-child { margin-bottom: 0; }
main :where(h1, h2, h3) + p { margin-top: 0; }
main :where(.wrap, .section-inner, .finder-shell) > :not(h1, h2, h3) + h2 {
  margin-top: var(--space-block);
}
main .section, main.approved-pack .section {
  padding-top: var(--space-section);
  padding-bottom: var(--space-section);
}
main .section-head { margin-bottom: 2.5rem; }
main .page-intro { padding-top: var(--space-section); padding-bottom: 3rem; }
main .page-intro h1 { margin-bottom: 1.75rem; }
main .page-intro p { margin-bottom: 0; }
main .home-hero { padding-top: var(--space-section); padding-bottom: var(--space-section); }
main .home-hero h1 { margin-bottom: 1.75rem; }
main .hero-badge { margin-bottom: 2rem; }
main .hero-buttons, main .cta-row { gap: 1.25rem; margin-top: 2rem; }
main .hero-buttons + .inline-help { margin-top: 1.75rem; }
main .hero-examples { gap: 1.5rem; }
main .hero-example { padding: 1.6rem 1.75rem; gap: 1.25rem; }
main .hero-example small { margin-top: .65rem; }
main .inline-help { margin-top: 2rem; line-height: 1.75; }
main .topics { gap: 1rem; margin-top: 2rem; }
main .topic-link { padding: .8rem 1.2rem; }
main .two-col { gap: 3rem; }
main :where(.category-grid, .product-grid, .tool-grid, .problem-grid, .review-steps) { gap: var(--space-grid); }
main :where(.category-card, .product-card, .purchase-panel, .evidence-sheet, .tool-card, .finder-result, .finder-form, .text-area, .empty) {
  padding: var(--space-card);
}
main .category-card h3, main .product-card h3, main .tool-card h3 { margin-top: 0; margin-bottom: 1.25rem; }
main .category-card .card-icon, main .product-card .card-icon { margin-bottom: 1.25rem; }
main .category-card .arrow-link { display: inline-block; margin-top: .75rem; }
main .product-card .product-meta { margin-bottom: .9rem; }
main .product-card p { margin-bottom: 1.5rem; }
main .product-card .compat { margin-bottom: .75rem; }
main .product-card .price-row { padding-top: 1.5rem; gap: 1rem; }
main .product-grid + .inline-help { margin-top: 2.5rem; }
main .filters { padding: var(--space-card); gap: 1.5rem; margin-top: 0; margin-bottom: 2.5rem; }
main .field label { margin-bottom: .75rem; }
main .search-line { gap: .75rem; }
main .result-heading { margin-bottom: 1.75rem; }
main .result-heading h2 { margin: 0; }
main .result-heading p { margin: 0; }
main .product-meta + h2 { margin-top: 1rem; }
main .two-col > div > ul { margin-top: 0; margin-bottom: 2rem; padding-left: 1.5rem; }
main .two-col > div > ul > li { margin-bottom: .8rem; }
main .two-col > div > .evidence-sheet { margin-top: 2rem; }
main .purchase-panel h2 { margin-bottom: 1.5rem; }
main .purchase-panel .price { margin-bottom: 1.5rem; }
main .purchase-panel label { margin-top: 1.5rem; margin-bottom: .8rem; }
main .purchase-panel .choice-note { margin-top: 1.25rem; margin-bottom: 1.25rem; }
main .purchase-panel .button { margin-top: 1.75rem; margin-bottom: 1.25rem; }
main .purchase-panel > a:not(.button), main .purchase-panel > p > a { line-height: 1.75; }
main .evidence-sheet h3 { margin-top: 0; margin-bottom: 1.25rem; }
main .evidence-sheet p + h3 { margin-top: 2rem; }
main .soft-note { padding: var(--space-card); }
main :where(.wrap, .finder-shell) > .soft-note { margin-top: var(--space-block); margin-bottom: var(--space-block); }
main .soft-note h2 { margin-bottom: 1.25rem; }
main .soft-note .button { margin-top: .75rem; }
main .comparison caption { padding: 1.5rem; }
main .comparison th, main .comparison td { padding: 1.5rem; line-height: 1.7; }
main .hero-buttons + .faq { margin-top: var(--space-section); }
main .faq { gap: 1.25rem; }
main .faq > h2 { margin-bottom: .75rem; }
main .faq summary { padding: 1.4rem 1.5rem; line-height: 1.55; }
main .faq details[open] summary { padding-bottom: 1.75rem; }
main .faq details p { margin: 0; padding: 0 1.5rem 1.5rem; line-height: 1.75; }
main .faq details ul { padding: 0 1.5rem 1.5rem 3rem; }
main .faq details li { margin-bottom: .9rem; line-height: 1.75; }
main .faq + .hero-buttons { margin-top: 2.5rem; }
main .finder-shell, main .access-preview { padding-top: var(--space-section); padding-bottom: var(--space-section); }
main .step-note { margin-bottom: 2rem; line-height: 1.8; }
main .problem-grid { margin-top: 0; margin-bottom: 2rem; }
main .problem-option { padding: 1.6rem; gap: 1.2rem; }
main .finder-form legend { margin-bottom: 1.5rem; line-height: 1.5; }
main .finder-form fieldset { margin-bottom: 2rem; }
main .radio-option { padding: .85rem .75rem; gap: 1rem; margin-bottom: .5rem; }
main .finder-form + .choice-note { margin-top: 1.75rem; }
main .finder-result { margin-top: 2rem; margin-bottom: var(--space-block); }
main .finder-result .product-meta { margin-bottom: 1rem; }
main .finder-result .button { margin-top: 1rem; }
main .tool-card h4 { margin-top: 1.5rem; margin-bottom: .75rem; }
main .tool-card p { margin-top: 0; margin-bottom: 1.25rem; }
main .tool-task-fit { padding: 1.25rem; margin: .75rem 0 2rem; }
main .tool-task-fit h4 { margin-top: 0; }
main .tool-task-fit p { margin-bottom: 0; }
main .tool-card .button { margin-top: auto; }
main .tool-next { margin-top: var(--space-block); }
main .tool-next + h2 { margin-top: var(--space-block); }
main .text-area label { margin-bottom: 1.25rem; }
main .text-area textarea { padding: 1.25rem; margin-bottom: 1.75rem; }
main .copy-status { margin-top: 1.25rem; }
main .order-line { padding: 1.25rem 0; margin-bottom: 1.5rem; }
main #confirmation:not(:empty) { margin-top: 1rem; margin-bottom: 1.5rem; }
main .bundle-items { margin-top: 1.5rem; margin-bottom: 2rem; }
main .bundle-items li { padding: 1.5rem 0; gap: 1.5rem; }
main .bundle-items li p { margin-top: .75rem; margin-bottom: 0; }
main .review-steps article { padding: var(--space-card); }
main .review-steps article > span { margin-bottom: 1.25rem; }
main .review-steps article .button { margin-top: .75rem; }
/* All eighteen pack pages share these rules; content and approved layout stay intact. */
main.approved-pack .guided-hero { padding-top: var(--space-section); padding-bottom: var(--space-section); }
main.approved-pack .eyebrow { margin-bottom: 1.5rem; }
main.approved-pack .guided-hero h1 { margin-bottom: 1.75rem; }
main.approved-pack .stat-row { margin: 2rem 0; gap: 1.25rem; }
main.approved-pack .cta-row + .fine-print { margin-top: 2rem; }
main.approved-pack .cards { gap: 2rem; }
main.approved-pack .outcome-strip .card-icon { margin-bottom: 1rem; }
main.approved-pack .card h3 { margin-bottom: 1rem; }
main.approved-pack .sample-list { margin-top: 2rem; gap: 1rem 2rem; }
main.approved-pack .sample-list + p { margin-top: 1.75rem; }
main.approved-pack .directory { gap: 1.25rem; }
main.approved-pack .directory summary { padding: 1.35rem 1.5rem; line-height: 1.5; }
main.approved-pack .prompt-list { padding: .5rem 1.5rem 1.75rem 3rem; gap: .9rem 2rem; }
main.approved-pack .offer-card { padding: var(--space-card); }
main.approved-pack .offer-card .kicker { margin-bottom: 1.5rem; }
main.approved-pack .offer-card h2 { margin-bottom: 1.5rem; }
main.approved-pack .offer-card .price { margin: 1.5rem 0; }
main.approved-pack .checklist { margin: 1.75rem 0 2rem; }
main.approved-pack .checklist li { padding-top: .55rem; padding-bottom: .55rem; }
main.approved-pack .educator-note { margin-top: 2rem; padding: 1.5rem; }
main.approved-pack .cta-band p + .button { margin-top: 1rem; }
.site-footer { padding-top: 3.5rem; padding-bottom: 3rem; }
.footer-inner { gap: 2.5rem; }
.footer-inner > div { gap: .85rem; }
.footer-inner > div > strong { margin-bottom: .5rem; }
.footer-inner .brand + p { margin-top: .75rem; }
.copyright { margin-top: 3rem; }
@media (max-width: 700px) {
  :root { --space-grid: 1.5rem; --space-heading: 1.25rem; }
  main .page-intro { padding-bottom: 2.5rem; }
  main .two-col { gap: 2.5rem; }
  main .hero-buttons, main .cta-row { gap: 1rem; }
  main .hero-example { padding: 1.4rem; gap: .9rem; }
  main .comparison th, main .comparison td { padding: 1rem; }
  main .comparison table { min-width: 480px; }
  main .faq summary { padding: 1.25rem; }
  main .faq details p { padding-left: 1.25rem; padding-right: 1.25rem; }
  main .faq details ul { padding-left: 2.75rem; padding-right: 1.25rem; }
  main.approved-pack .cards { gap: 1.75rem; }
}
@media (max-width: 440px) {
  main .topic-link { padding: .75rem 1rem; }
  main .product-card .price-row { flex-wrap: wrap; }
  main .problem-option { padding: 1.4rem; gap: 1rem; }
}