/* Shared page geometry: broad content, compact sections, readable forms. */
:root{
  --site-content-max:1440px;
  --site-content-wide:1600px;
  --site-gutter:clamp(16px,2.2vw,32px);
  --site-section-space:clamp(18px,2vw,28px);
}
.wrap{width:100%;max-width:var(--site-content-max);margin-inline:auto;padding-inline:var(--site-gutter)}
#app .wrap{max-width:var(--site-content-max)}
.wrap>.wrap{padding-inline:0}
header.top>.wrap{max-width:var(--site-content-max);gap:clamp(8px,1vw,14px)}
section.block{padding-block:var(--site-section-space)}
section.block.tight{padding-block:16px}
section.block h2{margin-bottom:16px}
#app>.wrap:not(.hero){padding-top:18px;padding-bottom:24px}
#app :is(.famhero,.rehero,.profhero,.shhero,.dochero,.sxhero){padding-block:22px 18px}
#app :is(.famhero,.rehero,.profhero,.shhero,.dochero,.sxhero) h1{
  font-size:clamp(1.75rem,2.8vw,2.35rem);line-height:1.12;margin:4px 0 10px;
}
#app :is(.famhero,.rehero,.profhero,.shhero,.dochero,.sxhero) .lede{
  max-width:76ch;font-size:1rem;line-height:1.5;margin:6px 0 12px;
}
#app .pagehead{gap:12px;padding-block:12px;margin-bottom:12px}
#app .pagehead h1{font-size:clamp(1.7rem,2.6vw,2.25rem);line-height:1.15}
#app .pagehead :is(p,.lede){margin-block:6px}
#app .slimhead{padding-block:10px}
#app .filters{padding-top:10px;gap:8px}
#app .chips{margin-top:8px;gap:6px}
#app .empty{padding:22px 18px}
#app :is(h1,h2,h3){scroll-margin-top:82px}
#app :is(.hint,.lede,.empty){overflow-wrap:break-word}
body>footer{padding-block:20px}
body>footer>.wrap{max-width:var(--site-content-max)}
body>footer .footcols{margin-block:14px;padding-block:12px;gap:16px 24px}
/* General guide prices stay grouped instead of forming a long single column. */
.prcategories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}
.prcategory{min-width:0;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.prcategory .prcat{margin:0 0 10px;font-size:1.05rem}
.prcategory .prgrid{grid-template-columns:1fr;gap:6px;margin:0}
.prcategory .prrow{min-width:0;padding:10px 12px;gap:10px;align-items:start}
.prcategory .prrow>span{min-width:0;overflow-wrap:break-word}
.prcategory .prrow>b{flex:none;white-space:normal;text-align:right}
/* Wide price pages pair the explanation with the search instead of leaving half a hero empty. */
@media(min-width:1100px){
  .prhero>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"eyebrow search" "heading search" "intro suggestions";column-gap:32px;row-gap:4px;align-items:center}
  .prhero .eyebrow{grid-area:eyebrow;margin:0 0 4px}
  #app .prhero h1{grid-area:heading;margin:0 0 8px}
  #app .prhero .lede{grid-area:intro;margin:0;max-width:64ch}
  .prhero .plsearch{grid-area:search;width:100%;max-width:none;margin:0;align-self:center}
  .prhero .plsugg{grid-area:suggestions;margin:0;gap:6px}
}
@media(min-width:1700px){
  #app :is(.browse,.rebody0,.mpbody,.sx-page).wrap{max-width:var(--site-content-wide)}
}
@media(max-width:1000px){.prcategories{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  :root{--site-gutter:16px;--site-section-space:18px}
  #app :is(.famhero,.rehero,.profhero,.shhero,.dochero,.sxhero){padding-block:18px 14px}
  #app :is(.famhero,.rehero,.profhero,.shhero,.dochero,.sxhero) .lede{font-size:.95rem}
  #app>.wrap:not(.hero){padding-top:14px;padding-bottom:18px}
  #app .pagehead{align-items:start;flex-wrap:wrap;padding-block:8px}
  #app .empty{padding:18px 14px}
  .prcategories{grid-template-columns:1fr;gap:10px}
  .prcategory{padding:14px}
  #app :is(.btn,.chip,.prrow){min-height:44px}
  body>footer .footcols{gap:14px}
}
@media(max-width:480px){header.top>.wrap{gap:4px}}
@media(max-width:360px){:root{--site-gutter:12px}}