/* Final, presentation-only rhythm for the top of every page family.
   Keep content, identity notices, pending states and control sizes intact. */
:root {
  --page-title-size:clamp(26px,2.5vw,34px);
  --public-title-size:clamp(30px,3.7vw,50px);
  --page-intro-space:clamp(16px,2vw,24px);
}

/* Shell: remove stacked blank space without compressing the navigation targets. */
.public-shell .product-public-header { min-height:72px; padding-block:12px 8px; gap:8px 24px; }
.public-shell .product-company-navigation { padding-top:4px; }
.public-shell .customer-navigation { gap:0 20px; padding-bottom:4px; }
.page-background > .journey-identity { padding-block:4px; gap:4px 20px; }
.page-background > .help-toolbar { padding-block:2px; }
.admin-shell .admin-toolbar { min-height:56px; padding-block:6px; margin-bottom:4px; }
body.admin-shell[data-page^="work-"] #main { padding-top:4px; }

/* Customer account, D/P/O details, calculator, confirmation and guide. */
body.public-shell .intro {
  padding:var(--page-intro-space);
  margin-block:12px 16px;
  gap:20px;
}
body.public-shell .intro h1 { font-size:var(--page-title-size); line-height:1.16; letter-spacing:-.035em; margin-block:0 10px; }
body.public-shell .intro .eyebrow { margin-bottom:6px; }
body.public-shell .intro .lead { font-size:16px; line-height:1.5; }
body.public-shell .calculator-portal-intro { margin-top:8px; padding:18px 22px; }
body.public-shell .calculator-portal-intro .intro-note { padding-left:20px; }
body.public-shell .calculator-portal-intro .intro-note p { margin-block:6px 8px; }
body.public-shell .confirmation.intro { padding-block:20px; }
body.public-shell .confirmation .success-mark { margin-block:4px 12px; }
.public-shell .login-panel { margin-top:12px; }
.public-shell .login-panel > h1 { font-size:var(--page-title-size); line-height:1.16; margin-bottom:12px; }

/* Working headers: all module lists, cards, editors and settings share one scale. */
body.admin-shell :is(.admin-intro,.intro,.work-heading,.production-heading,.finance-heading,.numbering-heading,.web-heading),
.public-shell .finance-heading {
  margin-block:10px 16px;
  padding-block:0;
  gap:12px 20px;
}
body.admin-shell .intro { padding:var(--page-intro-space); }
body.admin-shell[data-page="inquiries"] .intro { padding:0; }
body.admin-shell :is(.admin-intro,.intro,.work-heading,.production-heading,.finance-heading,.numbering-heading,.web-heading) h1,
.public-shell .finance-heading h1,
.admin-shell .admin-workbench .bench-heading h1 {
  font-size:var(--page-title-size);
  line-height:1.16;
  letter-spacing:-.035em;
  margin-block:4px 8px;
  overflow-wrap:anywhere;
}
body.admin-shell :is(.admin-intro,.intro,.work-heading,.production-heading,.finance-heading,.numbering-heading,.web-heading) .eyebrow,
.public-shell .finance-heading .eyebrow { margin-block:0 6px; }
body.admin-shell :is(.admin-intro,.intro,.work-heading,.production-heading,.finance-heading,.numbering-heading,.web-heading) .lead,
.public-shell .finance-heading .lead { font-size:15px; line-height:1.5; margin-bottom:0; }
.admin-shell .admin-workbench .bench-heading { padding-block:8px 12px; gap:12px 20px; }
.admin-shell .admin-workbench .bench-snapshot { margin-bottom:12px; }
.admin-shell .web-admin .web-tabs { margin-block:12px 20px; padding-bottom:10px; }

/* Marketing and CMS: no viewport-sized introduction before the useful content. */
.public-content .breadcrumbs { margin-block:4px 8px; }
.public-content .web-hero {
  margin-top:8px;
  padding:clamp(20px,2.5vw,36px);
  gap:clamp(20px,2.5vw,36px);
}
.public-content :is(.web-hero,.web-page-intro) h1 {
  font-size:var(--public-title-size);
  line-height:1.1;
  margin-block:8px 16px;
}
.public-content .web-hero .fine { margin-block:16px 6px; }
.public-content .web-hero .lead { font-size:18px; line-height:1.5; }
.public-content .web-hero .public-entry { padding:18px 20px; }
.public-content .web-hero .public-entry h2 { font-size:24px; margin-block:8px; }
.public-content .web-hero .public-entry p:not(.public-entry-label) { margin-bottom:12px; }
.public-content .web-page-intro { padding-block:4px 24px; }
.public-content .web-page-intro .lead { font-size:18px; line-height:1.5; }
.public-content :is(.web-editorial,.web-published-page) { margin-top:8px; }
.public-content .web-editorial-heading { padding-block:8px 24px; margin-bottom:24px; }
.public-content .web-editorial-heading .eyebrow,
.public-content .web-published-heading .eyebrow { margin-bottom:10px; }
.public-content .web-editorial-heading h1,
.public-content .web-published-heading h1 { font-size:var(--public-title-size); line-height:1.1; margin-bottom:16px; }
.public-content .web-editorial-heading .lead,
.public-content .web-published-heading .lead { font-size:18px; line-height:1.5; }
.public-content .web-published-hero { padding:clamp(20px,2.5vw,36px); gap:clamp(20px,2.5vw,36px); }
.public-content .web-published-heading .button { margin-top:18px; }
.public-content .web-published-media img { max-height:320px; }
.public-content .web-hero-image { margin-bottom:24px; }
.public-content .web-hero-image img { max-height:380px; object-fit:contain; }
.public-content .web-hero-image.web-portrait img { max-height:320px; }
.public-content .web-published-start { margin-block:24px; }
.public-content .web-section { margin-top:40px; }
.public-content .web-section-heading { margin-bottom:20px; }

/* Error pages use the same header class outside the marketing wrapper. */
.public-shell #main > .web-page-intro { padding-block:16px 24px; }
.public-shell #main > .web-page-intro h1 { font-size:var(--page-title-size); line-height:1.16; margin-block:8px 14px; }

@media(max-width:640px) {
  :root { --public-title-size:clamp(29px,7.5vw,38px); --page-title-size:clamp(25px,6.5vw,30px); }
  .public-shell .product-public-header { padding-block:10px 6px; gap:6px; }
  .public-shell .customer-navigation { gap:0 16px; }
  .page-background > .journey-identity { padding-block:4px; gap:0 16px; }
  body.public-shell .intro { padding:16px; margin-block:8px 14px; gap:14px; }
  body.public-shell .calculator-portal-intro .intro-note { padding:12px 0 0; }
  body.admin-shell :is(.admin-intro,.intro,.work-heading,.production-heading,.finance-heading,.numbering-heading,.web-heading) { margin-block:8px 14px; gap:10px; }
  .public-content .web-hero { padding:20px 18px; gap:20px; }
  .public-content .web-published-hero { padding:20px; gap:20px; }
  .public-content .web-published-media img { max-height:220px; }
  .public-content .web-hero-image img,
  .public-content .web-hero-image.web-portrait img { max-height:280px; }
  .public-content .web-editorial-heading { padding-block:4px 18px; margin-bottom:20px; }
  .public-content .web-page-intro { padding-bottom:20px; }
  .public-content .web-section { margin-top:28px; }
}

/* Mobile: keep the actual task within reach below the shared navigation. */
@media(max-width:640px) {
  .public-shell .product-public-header { grid-template-columns:auto minmax(0,1fr); min-height:0; gap:4px 8px; padding-block:6px; }
  .product-public-header .brand { min-height:44px; gap:5px; font-size:19px; white-space:nowrap; }
  .product-public-header .brand-mark { width:24px; height:30px; }
  .product-public-header .product-public-actions { min-width:0; justify-content:flex-end; gap:6px; }
  .product-public-header .product-account-menu > summary { min-height:44px; padding:8px; gap:4px; font-size:12px; }
  .public-shell .product-public-header .public-calculator { min-height:44px; padding:8px 10px; font-size:12px; }
  .product-public-header .product-company-menu > summary { min-height:44px; padding:8px 10px; font-size:13px; }
  .public-shell .product-account-menu > nav { left:auto; right:0; }
  .public-shell .customer-navigation { flex-wrap:nowrap; justify-content:flex-start; gap:0 16px; min-width:0; padding-block:0 4px; overflow-x:auto; scroll-padding-inline:4px; scrollbar-width:thin; }
  .public-shell .customer-navigation a { flex:0 0 auto; min-height:44px; font-size:12px; padding-block:6px; }
  .page-background > .journey-identity { gap:0 12px; padding-block:2px; }
  .page-background .journey-identity-main { gap:2px; line-height:1.35; }
  .page-background .journey-identity-main strong { font-size:13px; }
  .page-background .journey-identity-main small { font-size:11px; line-height:1.4; }
  .page-background > .journey-identity nav { gap:0 14px; }
  .page-background > .journey-identity nav a { font-size:12px; }
  .page-background > .help-toolbar { flex-wrap:nowrap; justify-content:flex-start; gap:6px; padding-block:2px; }
  .page-background > .help-toolbar :is(.help-toggle,.screen-guide-toggle) { flex:0 1 auto; min-width:0; min-height:44px; padding:6px 9px; font-size:12px; line-height:1.25; }
  .admin-shell .admin-toolbar { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:6px; min-height:56px; padding-block:4px; margin-bottom:0; }
  .admin-shell .admin-toolbar > .button,
  .admin-shell .admin-toolbar .admin-quick-create > .button { min-height:44px; padding:8px; font-size:12px; }
  .page-background #main :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { font-size:16px; }

  .public-content .web-hero { padding:14px; gap:14px; margin-top:4px; }
  .public-content .web-hero h1 { font-size:28px; margin-block:6px 10px; }
  .public-content .web-hero .eyebrow { margin-block:0 6px; font-size:11px; }
  .public-content .web-hero .lead { font-size:15px; line-height:1.45; margin-block:0 10px; }
  .public-content .web-hero .fine { font-size:12px; line-height:1.4; margin-block:8px 0; }
  .public-content .web-hero-copy > .text-link { display:inline-flex; align-items:center; min-height:44px; margin:0; font-size:13px; }
  .public-content .web-hero .public-entry-options { gap:10px; }
  .public-content .web-hero .public-entry { padding:12px; }
  .public-content .web-hero .public-entry h2 { font-size:20px; margin-block:6px; }
  .public-content .web-hero .public-entry p:not(.public-entry-label) { font-size:13px; line-height:1.4; margin-block:0 8px; }
  .public-content .web-hero .public-entry .public-entry-label { font-size:11px; gap:8px; }
  .public-content .web-hero .public-entry .button { min-height:44px; padding:8px 12px; font-size:13px; }

  body.public-shell .calculator-portal-intro { padding:12px 14px; gap:8px; margin-block:4px 10px; }
  body.public-shell .calculator-portal-intro h1 { font-size:24px; margin-bottom:6px; }
  body.public-shell .calculator-portal-intro .lead { font-size:14px; line-height:1.45; margin:0; }
  body.public-shell .calculator-portal-intro .intro-note { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 12px; padding-top:8px; }
  body.public-shell .calculator-portal-intro .intro-note .mono { grid-column:1; font-size:11px; }
  body.public-shell .calculator-portal-intro .intro-note p { grid-column:1; margin:0; font-size:12px; line-height:1.4; }
  body.public-shell .calculator-portal-intro .intro-note .text-link { grid-column:2; grid-row:1/3; max-width:120px; min-height:44px; font-size:13px; white-space:normal; }
  .public-shell .calculator-steps { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin-bottom:10px; }
  .public-shell .calculator-steps li { display:block; padding:6px 4px; font-size:11px; line-height:1.35; overflow-wrap:anywhere; }
  .public-shell .calculator-steps li > span:first-child { width:18px; height:18px; margin:0 4px 2px 0; font-size:10px; }
  .public-shell .calculator-workspace { gap:12px; }
  .public-shell .calculator-workspace .panel { padding:14px; }
  .public-shell .calculator-workspace .section-heading { margin-bottom:8px; }
  .public-shell .calculator-workspace .summary h2 { margin-bottom:12px; }
  .public-shell .calculator-workspace .summary-line { padding-bottom:10px; }
  .public-shell .calculator-workspace .quantity-label { padding-block:10px; }
  .public-shell .calculator-workspace .price-box { padding:12px; }
}
@media(max-width:360px) {
  .product-public-header .brand { font-size:17px; gap:4px; }
  .product-public-header .brand-mark { width:22px; }
  .public-shell .product-public-header .public-calculator { padding-inline:8px; }
}

/* Admin chrome shares one utility row on wide screens; every control remains
   present in DOM order. The main content and any expanded help span both columns. */
@media(min-width:1000px) {
  .admin-shell .page-background { display:grid; grid-template-columns:minmax(0,1fr) auto; align-content:start; }
  .admin-shell .page-background > * { grid-column:1 / -1; }
  .admin-shell .page-background > .journey-identity { grid-column:1; min-width:0; }
  .admin-shell .page-background > .help-toolbar { grid-column:2; align-self:center; }
}
.admin-shell .admin-toolbar { padding-block:4px; }
body.admin-shell :is(.admin-intro,.intro,.work-heading,.production-heading,.finance-heading,.numbering-heading,.web-heading) { margin-block:6px 12px; }

/* Finance: remove stacked grid/heading/field margins, preserving the notice,
   empty live-message region and the existing input/button heights. */
.admin-shell .finance-workspace { gap:12px; }
.admin-shell .finance-workspace > .finance-heading { margin-block:6px 4px; }
.admin-shell .finance-workspace > .finance-notice { margin-block:0; padding-block:12px; }
.admin-shell .finance-workspace > #finance-message { margin-block:0; }
.admin-shell .finance-filters label,
.admin-shell .finance-filters :is(input,select) { margin-block:0; }
.admin-shell .finance-workspace > h3 { margin-block:4px 0; }

/* Shared admin utilities sit close to the context header, without shrinking targets. */
.admin-shell .page-background > :is(.journey-identity,.help-toolbar) { padding-block:0; }
body.admin-shell :is(.admin-intro,.intro,.work-heading,.production-heading,.finance-heading,.numbering-heading,.web-heading) { margin-block:4px 12px; }
body.admin-shell :is(.admin-intro,.intro,.work-heading,.production-heading,.finance-heading,.numbering-heading,.web-heading) h1 { font-size:clamp(26px,2.4vw,32px); }