/* Calculator pages put their working controls ahead of decorative spacing.
   Shared control sizes, backgrounds, header effects and print styles stay intact. */
@media screen {
  .public-calculator-layout .site-header-surface {
    --logo-width: 56px;
    --logo-height: 48px;
    --logo-shrink-width: 8px;
    --logo-shrink-height: 8px;
    --brand-size: 27px;
    --brand-shrink: 2px;
    --menu-padding: 8px;
    --padding-shrink: 0px;
  }
  .public-calculator-layout .site-header-space { height: 64px; }
  .public-calculator-layout .public-breadcrumbs.wrap { padding-top: 8px; }
  .public-calculator-layout :is(.calculator-page.wrap, .calculator-hero.wrap, .loan-shell.wrap, .practical-page.wrap, .tools-hub.wrap) {
    padding-top: 16px;
    padding-bottom: 32px;
  }
  .public-calculator-layout :is(.calculator-intro, .loan-intro, .practical-intro) {
    max-width: none;
    margin: 0 0 16px;
    padding: 0;
  }
  .public-calculator-layout :is(.calculator-intro, .loan-intro, .practical-intro) > .eyebrow,
  .public-calculator-layout .tools-hub > .eyebrow {
    margin: 0 0 8px;
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: 1.2px;
  }
  .public-calculator-layout :is(.calculator-intro, .loan-intro, .practical-intro) > h1,
  .public-calculator-layout .tools-hub > h1 {
    margin: 0 0 12px;
    font-size: clamp(26px, 3vw, 36px);
    line-height: 1.2;
    letter-spacing: -.7px;
  }
  .public-calculator-layout .public-brand-surface :is(.calculator-intro, .loan-intro, .practical-intro) > .lead,
  .public-calculator-layout .tools-hub > .lead {
    max-width: none;
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
  }
  /* Keep the original document and print order. The non-interactive overview
     follows the working form visually; keyboard order of actions is unchanged. */
  .public-calculator-layout :is(.calculator-page.wrap, .calculator-hero.wrap, .loan-shell.wrap, .practical-page.wrap) {
    display: flex;
    flex-direction: column;
  }
  .public-calculator-layout :is(.calculator-page.wrap, .calculator-hero.wrap, .loan-shell.wrap, .practical-page.wrap) > * { order: 4; }
  .public-calculator-layout :is(.calculator-intro, .loan-intro, .practical-intro) { display: contents; }
  .public-calculator-layout :is(.calculator-intro, .loan-intro, .practical-intro) > .eyebrow { order: 0; }
  .public-calculator-layout :is(.calculator-intro, .loan-intro, .practical-intro) > :is(h1, h2) { order: 1; margin-bottom: 16px; }
  .public-calculator-layout :is(.calculator-intro, .loan-intro, .practical-intro) > :is(.lead, .loan-note, .loan-privacy) { order: 3; margin-top: 16px; }
  .public-calculator-layout :is(.calculator-page.wrap, .calculator-hero.wrap, .loan-shell.wrap) > :is(.calculator-board, .loan-board, .receipt-layout, .contract-layout),
  .public-calculator-layout .practical-page.wrap > .practical-calculator:first-of-type,
  .public-calculator-layout #receipt-preset-note { order: 2; }
  .public-calculator-layout .household-live-hint { margin-bottom: 16px; }
  .public-calculator-layout .practical-calculator[data-practical] { display: flex; flex-direction: column; }
  .public-calculator-layout .practical-calculator[data-practical] > * { order: 4; }
  .public-calculator-layout .practical-calculator[data-practical] > :is(h2, .practical-example-note) { order: 0; }
  .public-calculator-layout .practical-calculator[data-practical] > form { order: 1; }
  .public-calculator-layout .practical-calculator[data-practical] > .practical-output { order: 2; }
  .public-calculator-layout .practical-calculator[data-practical] > .practical-use-note { order: 3; }
  .public-calculator-layout .tools-hub .tools-categories { gap: 8px 16px; margin: 12px 0 20px; }
  .public-calculator-layout .tools-hub .tools-group { margin-top: 24px; }
  .public-calculator-layout .tools-hub .tools-group > h2 { margin-bottom: 16px; }
  .public-calculator-layout .practical-page > .practical-calculator:first-of-type { margin-top: 0; padding: 20px; }
  .public-calculator-layout .practical-page > .practical-calculator > h2 { font-size: 20px; line-height: 1.4; margin-bottom: 12px; }
  .public-calculator-layout .practical-page > .practical-calculator > .small-note { font-size: 13px; line-height: 1.5; margin: 0 0 16px; }
  .public-calculator-layout .subscription-page > .practical-calculator > p { font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
  .public-calculator-layout .loan-board > .loan-result { order: 0; }
}
@media screen and (max-width: 700px) {
  .public-calculator-layout .site-header-surface { --logo-width: 48px; --logo-height: 40px; --brand-size: 25px; }
  .public-calculator-layout .public-breadcrumbs { font-size: 12px; }
  .public-calculator-layout .public-breadcrumbs [aria-current="page"],
  .public-calculator-layout .public-breadcrumbs [aria-hidden="true"]:has(+ [aria-current="page"]) { display: none; }
  .public-calculator-layout :is(.calculator-intro, .loan-intro, .practical-intro) > h1 { font-size: 26px; }
}

@media screen and (max-width: 480px) {
  .public-calculator-layout .site-header-surface { --menu-padding: 4px; }
  .public-calculator-layout .site-header-space { height: 56px; }
  .public-calculator-layout .public-breadcrumbs.wrap { padding-top: 4px; }
  .public-calculator-layout :is(.calculator-intro, .loan-intro, .practical-intro) > h1 { font-size: 24px; }
  .public-calculator-layout .practical-page > .practical-calculator > h2 { font-size: 18px; line-height: 1.35; }
}