/* Shared spacing contract, loaded after every page stylesheet. New pages use
   .page-head and .section so the compact rhythm also applies to future routes. */
:root{
 --section-space:32px;
 --page-space:32px;
 --page-gap:20px;
 --page-head-top:8px;
 --page-head-bottom:20px;
 --page-title:clamp(30px,3vw,38px);
 --page-card-space:20px;
 --page-breadcrumb-space:12px;
}
@media screen{
 #main :is(.bread,.breadcrumbs){padding-block:var(--page-breadcrumb-space);margin-block:0}
 #main :is(.page-head,.directory-heading,.advice-hub-hero,.provider-hero){padding-block:var(--page-head-top) var(--page-head-bottom)}
 #main :is(.page-head,.directory-heading,.advice-hub-hero,.provider-hero) h1,
 #main :is(.prose,.blog-article,.advice-article,.legal-header)>h1{font-size:var(--page-title);line-height:1.16;letter-spacing:-.035em;margin:8px 0 10px}
 #main :is(.advice-article>header,.blog-article>header,.legal-header,.account-welcome) h1{font-size:var(--page-title);line-height:1.16;letter-spacing:-.035em;margin:8px 0 10px}
 #main>.wrap.section>h1{font-size:var(--page-title);line-height:1.16;letter-spacing:-.035em;margin:8px 0 10px}
 #main :is(.page-head,.directory-heading,.advice-hub-hero,.provider-hero) .eyebrow{margin-bottom:0}
 #main :is(.page-head,.directory-heading,.advice-hub-hero,.provider-hero)>p,
 #main .provider-hero>div>p{margin-block:0;line-height:1.65}
 #main .section{padding-block:var(--page-space)}
 #main .section-head{margin-bottom:16px;gap:16px}
 #main :is(.section-head,.seo-guide>header) h2{line-height:1.2}
 #main :is(.info-grid,.seo-guide-grid,.ai-benefit-grid,.business-tools-grid){gap:20px 28px}
 #main .info-grid{padding-block:24px}
 #main .info-grid :is(h2,h3){margin-bottom:10px}
 #main .info-grid p{margin-bottom:12px}
 #main .catalogue-layout{margin-bottom:var(--page-space)}
 #main .catalogue-top{margin-bottom:16px}
 #main .bottom-space{padding-bottom:var(--page-space)}
 #main .empty{padding:28px 20px}
 #main :is(.prose,.blog-article){padding-block:var(--page-head-top) var(--page-space)}
 #main :is(.prose,.blog-article) .lead{margin-bottom:20px;line-height:1.7}
 #main .prose h2{margin-top:24px;margin-bottom:10px}
 #main .prose p{margin-bottom:14px}
 #main :is(.blog-page,.rental-page,.urgent-page,.legal-page){padding-bottom:var(--page-space)}
 #main .blog-hero{padding:24px;margin-bottom:20px}
 #main .blog-hero h1{font-size:var(--page-title);margin:8px 0 10px;line-height:1.16}
 #main .blog-hero p{line-height:1.7}
 #main .blog-page .editorial-search{margin:16px 0 5px}
 #main :is(.blog-card,.advice-card,.ai-benefit-grid article){padding:var(--page-card-space)}
 #main :is(.blog-grid,.advice-card-grid){gap:18px}
 #main .blog-number{margin-bottom:12px}
 #main :is(.blog-card,.advice-card) h2{margin:10px 0}
 #main :is(.blog-card,.advice-card)>p{margin-bottom:16px;line-height:1.7}
 #main .blog-card .text-link{padding-top:12px}
 #main .blog-contents{margin-block:20px;padding:20px;gap:10px}
 #main .blog-article section{margin-top:24px}
 #main .blog-article h2{margin-bottom:10px}
 #main .blog-article :is(section p,li){line-height:1.75;margin-bottom:14px}
 #main .advice-article>header{padding-block:var(--page-head-top) var(--page-head-bottom)}
 #main .advice-lead{line-height:1.7}
 #main .advice-reading-layout{gap:28px}
 #main .advice-reading-layout aside nav{padding:20px;gap:10px}
 #main .advice-reading-layout article section{margin-bottom:24px}
 #main .advice-reading-layout article p{line-height:1.75}
 #main .advice-help{padding:24px;margin-block:var(--page-space)}
 #main .advice-related{padding-block:24px var(--page-space)}
 #main .editorial-search{padding:16px;gap:12px}
 #main .advice-next{padding-block:20px}
 #main .legal-header{padding-block:var(--page-head-top) var(--page-head-bottom)}
 #main .legal-version{margin-block:12px}
 #main .legal-actions{margin-block:16px;gap:12px}
 #main .legal-documents{padding-block:14px;margin-bottom:24px}
 #main .legal-layout{column-gap:28px}
 #main .legal-document section{margin-bottom:24px}
 #main .legal-document h2{margin-bottom:10px}
 #main .legal-document p{margin-bottom:14px;line-height:1.75}
 #main .seo-guide{padding-block:var(--page-space)}
 #main .seo-guide>header{margin-bottom:20px}
 #main .seo-guide>header h2{margin-block:8px}
 #main .seo-guide p{margin-bottom:12px;line-height:1.75}
 #main .seo-guide-grid h3{margin-bottom:10px}
 #main .seo-faq{margin-top:24px}
 #main .seo-faq h2{margin-bottom:14px}
 #main .seo-faq details{padding-block:14px}
 #main .seo-quick-links{margin-top:20px;gap:10px 20px}
 #main .faq{margin-block:24px var(--page-space)}
 #main .business-hero{padding-block:24px}
 #main .business-hero h1{font-size:var(--page-title);margin:8px 0 10px}
 #main :is(.ai-benefits-intro,.ad-pricing-intro){margin-bottom:20px;gap:24px}
 #main .ai-benefit-icon{margin-bottom:16px}
 #main .ai-benefit-grid p{margin-bottom:16px;line-height:1.75}
 #main .ad-pricing{margin-top:var(--page-space)}
 #main .ad-pricing-intro{margin-top:20px}
 #main .ad-pricing-notes{gap:24px;margin-top:24px}
 #main .click-pricing{padding:24px;margin-top:var(--page-space);gap:24px}
 #main :is(.rental-hero-copy,.rental-hero-aside,.plate-copy,.urgent-hero>div,.urgent-hero aside){padding:24px}
 #main :is(.rental-hero,.plate-hero,.urgent-hero) h1{font-size:var(--page-title);margin:8px 0 12px}
 #main :is(.rental-hero-actions,.urgent-hero-actions){margin-top:16px;gap:12px}
 #main .plate-hero{margin-block:8px 24px}
 #main .plate-results{padding-bottom:var(--page-space)}
 #main .plate-top{margin-bottom:24px;padding:20px}
 #main .plate-activity{margin-top:20px;padding-top:16px}
 #main .plate-top-inline{margin:0;padding:0}
 #main .provider-tabs{margin-bottom:16px}
 #main .provider-directory-note{padding-bottom:24px}
 #main .provider-ad-section{padding-block:24px var(--page-space)}
 #main .provider-brief{margin-bottom:20px}
 #main .detail-head{margin-block:8px 20px}
 #main .detail-layout{padding-bottom:var(--page-space)}
 #main .company-profile-body{padding-block:20px}
 #main .company-profile-header{margin-bottom:20px}
 #main .contact-layout{margin-bottom:var(--page-space);gap:24px}
 #main .contact-support{padding:20px;margin-block:20px}
 #main .account-entry{padding-block:20px 24px}
 #main .entry-benefits{margin-top:20px}
 #main .account-mail-page{padding-block:24px var(--page-space);min-height:0}
 #main .account-mail-page .account-auth-card{padding:24px}
 #main .account-mail-page h1{margin:8px 0 10px}
 #main .account-onboarding .onboarding-header{padding:20px;margin-bottom:20px}
 #main .account-onboarding-form{padding:20px}
 #main .onboarding-section{margin-bottom:20px;padding-bottom:20px}
 #main :is(.account-shell,.consumer-account){padding-block:20px var(--page-space)}
 #main :is(.account-layout,.consumer-layout){gap:24px}
 #main :is(.account-heading,.management-heading,.consumer-heading){padding-bottom:18px}
 #main :is(.account-panel,.consumer-panel){padding:20px;margin-bottom:16px}
 /* Homepage: preserve the search overlay while tightening the section rhythm. */
 #main .discovery-hero{padding-top:20px}
 #main .discovery-hero .hero-copy{padding-top:24px}
 #main .discovery-quick{padding-top:24px}
 #main .discovery-brands{margin-top:24px;padding-block:20px}
 #main .urgent-home{margin-block:var(--page-space) 24px}
 #main .rental-home-section{padding-block:8px var(--page-space)}
 #main .rental-home-banner{padding:24px}
 #main .home-ad{padding-block:8px var(--page-space)}
 #main .business-banner{padding-block:var(--page-space)}
 #main .business-tools-shell{gap:24px}
 #main .business-tools-intro{gap:24px}
 #main .business-tools-grid article{padding-block:16px}
 #main .business-tools-footer{margin-top:0}
 .footer{padding-top:var(--page-space)}
 .footer-top{padding-bottom:24px;row-gap:24px}
}
@media screen and (max-width:760px){
 :root{--section-space:24px;--page-space:24px;--page-gap:16px;--page-head-top:6px;--page-head-bottom:16px;--page-title:clamp(27px,7vw,32px);--page-card-space:18px;--page-breadcrumb-space:10px}
 #main .info-grid{padding-block:20px}
 #main :is(.info-grid,.seo-guide-grid,.ai-benefit-grid,.business-tools-grid){gap:20px}
 #main :is(.blog-hero,.rental-hero-copy,.rental-hero-aside,.plate-copy,.urgent-hero>div,.urgent-hero aside){padding:20px}
 #main :is(.advice-help,.click-pricing,.contact-support){padding:20px}
 #main :is(.account-layout,.consumer-layout){gap:18px}
 #main :is(.account-panel,.consumer-panel){padding:18px}
 #main .account-entry{padding-top:16px}
 #main .account-mail-page .account-auth-card{padding:20px}
 #main .rental-home-banner{padding:20px}
 #main .urgent-home{margin-bottom:16px}
 #main .rental-home-section{padding-top:8px}
}