/* GovMath theme: claret brand, neutral reading palette and the Axis Bank
   type scale. Loaded last on every page, after the generated colour swaps
   (govmath-neutral.css, govmath-claret.css). Rules are scoped to
   .gm-neutral, which wraps each page's main content. */

/* ── Neutral reading palette  ─────────────
   Neutral greys and white instead of pink-tinted panels, as on Axis Bank
   and the GOV.UK Design System. Wine stays for buttons, links and
   selected states. Colour swaps are generated into govmath-neutral.css;
   these rules set the surfaces and type. */
.gm-neutral .calculator {
  background: #f3f5f8;
}
.gm-neutral .result.ax-chartpanel {
  background: #fff;
  border: 1px solid #dfe3e8;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}
.gm-neutral .number,
.gm-neutral .ax-select-toggle {
  background: #fff;
  border: 1px solid #9aa1a9;
  border-radius: 8px;
  min-height: 44px;
}
.gm-neutral .number:focus-within,
.gm-neutral .ax-select-toggle:focus-visible,
.gm-neutral .ax-select-toggle[aria-expanded="true"] {
  border-color: #510b38;
  box-shadow: 0 0 0 2px rgba(81, 11, 56, 0.25);
  outline: none;
}
.gm-neutral .gm-radio {
  border-color: #c4cad1;
}
.gm-neutral .moreoptions {
  border-color: #dfe3e8;
}
.gm-neutral .facts > div {
  background: #fff;
  border: 1px solid #dfe3e8;
  border-top: 3px solid #510b38;
}
.gm-neutral .facts span {
  color: #5c6066;
  font-size: 14px;
}
.gm-neutral .facts b {
  color: #282828;
}
.gm-neutral .resultcard {
  border-color: #dfe3e8;
}
.gm-neutral .resultcard > p,
.gm-neutral .loan-summary,
.gm-neutral .intro > p:last-child {
  color: #5c6066;
}
.gm-neutral .gm-insight {
  background: #f3f5f8;
}
.gm-neutral .ax-assumptions {
  background: #f3f5f8;
  border-color: #dfe3e8;
}
.gm-neutral .gm-statement th,
.gm-neutral .gm-statement tr[data-kind="total"] td {
  background: #f3f5f8;
  color: #282828;
}
.gm-neutral .g-section p,
.gm-neutral .g-section li,
.gm-neutral .q-faqBody {
  color: #3d4248;
}
.gm-neutral .guide-nav {
  border-color: #dfe3e8;
}
.gm-neutral .q-relatedCard {
  border-color: #dfe3e8;
}
.gm-neutral .q-relatedCard:hover {
  background: #f3f5f8;
}

/* ── Guide, FAQs and section headings  ───────── */
/* Section headings across the page share one pattern: eyebrow, then title. */
.gm-neutral .fullfaq .q-kicker,
.gm-neutral .section > .eyebrow,
.gm-neutral .sectionheading .eyebrow {
  display: block;
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wine);
}

/* Guide intro: a clear start to the reading part of the page. */
.gm-neutral .guideintro {
  background: #f3f5f8;
  border: 1px solid #dfe3e8;
  border-left: 4px solid var(--wine);
  border-radius: 12px;
}

/* In-guide navigation */
.gm-neutral .guide-nav {
  background: #fff;
  border: 1px solid #dfe3e8;
}
.gm-neutral .guide-nav a {
  color: #3d4248;
  font-size: 14px;
  border-radius: 6px;
  padding: 6px 8px;
  margin: 0 -8px;
}
.gm-neutral .guide-nav a:hover {
  background: #f3f5f8;
  color: var(--wine);
}

/* Each guide section opens with a numbered marker and a clear title. */
.gm-neutral .g-section {
  padding: 8px 0 40px;
  margin: 0 0 40px;
  border-bottom: 1px solid #dfe3e8;
}
.gm-neutral .g-sectionHead {
  gap: 12px;
  margin-bottom: 10px;
  color: #5c6066;
  letter-spacing: 1.2px;
}
.gm-neutral .g-num {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: var(--wine);
  color: #fff;
  font-size: 14px;
  letter-spacing: 0;
}
.gm-neutral .g-section h2 {
  font-size: 27px;
  line-height: 1.25;
  color: #1f2328;
  margin-bottom: 16px;
}
.gm-neutral .g-section h3 {
  color: #1f2328;
}
.gm-neutral .g-section > p,
.gm-neutral .g-section > ul,
.gm-neutral .g-section > ol {
  max-width: 72ch;
}

/* Tables: a grey header row, plain rows, light striping. */
.gm-neutral .g-tableWrap {
  border-color: #dfe3e8;
}
.gm-neutral .g-tableWrap caption {
  background: #fff;
  color: #1f2328;
  border-bottom: 1px solid #dfe3e8;
}
.gm-neutral .g-table thead th {
  background: #f3f5f8;
  color: #1f2328;
}
.gm-neutral .g-table tbody th,
.gm-neutral .g-table tbody td {
  background: #fff;
}
.gm-neutral .g-table tbody tr:nth-child(even) th,
.gm-neutral .g-table tbody tr:nth-child(even) td {
  background: #f9fafb;
}
.gm-neutral .g-table tbody th {
  font-weight: 700;
  color: #1f2328;
}

/* Callouts read as tips (blue), distinct from steps and examples. */
.gm-neutral .g-callout,
.gm-neutral .g-note {
  background: #eef4fb;
  border-left: 4px solid #2a78d6;
  border-radius: 0 10px 10px 0;
}
.gm-neutral .g-calloutTitle {
  color: #1f2328;
}

/* Steps: numbered white cards with a claret edge. */
.gm-neutral .g-timeline li {
  background: #fff;
  border: 1px solid #dfe3e8;
  border-left: 4px solid var(--wine);
  border-radius: 0 10px 10px 0;
}
.gm-neutral .g-when {
  color: var(--wine);
}

/* Worked examples and key figures */
.gm-neutral .g-example {
  border-color: #dfe3e8;
  border-radius: 12px;
}
.gm-neutral .g-exampleHead {
  background: #f3f5f8;
  color: #1f2328;
}
.gm-neutral .g-exampleTotal {
  background: #fff;
  border-top: 2px solid var(--wine);
  color: var(--wine);
}
.gm-neutral .g-stat {
  background: #fff;
  border: 1px solid #dfe3e8;
  border-top: 3px solid var(--wine);
}
.gm-neutral .g-statValue {
  color: var(--wine);
}
.gm-neutral .g-compareCol {
  background: #fff;
  border: 1px solid #dfe3e8;
}

/* FAQs: one card per question. */
.gm-neutral .fullfaq {
  border-top: 0;
}
.gm-neutral .q-faqs {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}
.gm-neutral .q-faq {
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  padding: 0 20px;
}
.gm-neutral .q-faq summary {
  padding: 18px 40px 18px 0;
  border-bottom: 0;
  font-size: 16px;
  font-weight: 700;
  color: #1f2328;
}
.gm-neutral .q-faq summary:after {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f3f5f8;
  color: var(--wine);
  font-size: 20px;
  line-height: 1;
}
.gm-neutral .q-faq:hover {
  border-color: #c4cad1;
}
.gm-neutral .q-faq[open] {
  border-color: #c4cad1;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
}
.gm-neutral .q-faqBody {
  padding: 0 0 18px;
  border-top: 1px solid #eef0f3;
  padding-top: 14px;
}
.gm-neutral .q-note {
  background: #eef4fb;
  border-left: 4px solid #2a78d6;
  border-radius: 0 10px 10px 0;
}

/* ── Lato 500 and 600 (not served by Google Fonts) ───────────────── */
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/gm/fonts/lato-400.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/gm/fonts/lato-700.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/gm/fonts/lato-900.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/gm/fonts/lato-500.woff2") format("woff2");
}
@font-face {
  font-family: "Lato";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/gm/fonts/lato-600.woff2") format("woff2");
}

/* ── Type scale and spacing taken from Axis Bank's calculator pages ──
   Measured from axis.bank.in/calculators/personal-loan-emi-calculator:
   headings in Lato Medium, labels in Lato Bold, body 16/24 grey, figures
   in Lato Semibold; smaller sizes below 650px. */
.gm-neutral {
  --axis-ink: #282828;
  --axis-body: #6e6e6e;
  letter-spacing: 0.16px;
}
.gm-neutral .crumb {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.32px;
  color: var(--axis-ink);
}
.gm-neutral .intro h1 {
  font-size: 40px;
  line-height: 44px;
  font-weight: 500;
  color: var(--axis-ink);
  margin-bottom: 12px;
}
.gm-neutral .intro > p:last-child {
  font-size: 16px;
  line-height: 24px;
  color: var(--axis-body);
}
/* Section titles */
.gm-neutral .section h2,
.gm-neutral .sectionheading h2,
.gm-neutral .guideintro h2,
.gm-neutral .q-explainerTitle {
  font-size: 36px;
  line-height: 42px;
  font-weight: 500;
  color: var(--axis-ink);
  letter-spacing: 0;
}
.gm-neutral .guideintro > p:last-child,
.gm-neutral .section > p:not(.eyebrow) {
  font-size: 16px;
  line-height: 24px;
  color: var(--axis-body);
}
/* Calculator */
.gm-neutral .calculator {
  background: #f1f4f7;
  padding: 40px 60px;
  border-radius: 16px;
}
.gm-neutral .result.ax-chartpanel {
  border: 0;
  box-shadow: none;
  border-radius: 16px;
  padding: 32px 24px;
}
.gm-neutral.gm-neutral .labelrow label,
.gm-neutral .gm-clear .gm-label,
.gm-neutral .gm-clear .ax-select-field label,
.gm-neutral .gm-clear .gm-switchrow label {
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--axis-ink);
  letter-spacing: 0.16px;
}
.gm-neutral .number input,
.gm-neutral .ax-select-toggle,
.gm-neutral .gm-radio {
  font-size: 16px;
  color: var(--axis-ink);
}
.gm-neutral .endpoints {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.32px;
  color: var(--axis-body);
}
.gm-neutral .footnote,
.gm-neutral .gm-clear .moreoptions > summary > span {
  font-size: 14px;
  line-height: 20px;
  color: var(--axis-body);
}
.gm-neutral .resultlabel {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.24px;
  color: var(--axis-body);
}
.gm-neutral .ax-paymentstrip span {
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
  color: var(--axis-ink);
}
.gm-neutral .ax-paymentstrip strong {
  font-size: 28px;
  line-height: 32px;
  font-weight: 700;
  margin: 8px 0 4px;
}
.gm-neutral .ax-paymentstrip small,
.gm-neutral .loan-summary {
  font-size: 14px;
  line-height: 20px;
  color: var(--axis-body);
}
.gm-neutral .circle span {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.24px;
  color: var(--axis-body);
}
.gm-neutral .circle strong {
  font-size: 26px;
  line-height: 36px;
  font-weight: 600;
  color: var(--axis-ink);
}
.gm-neutral .ax-chartlegend > div > span {
  font-size: 14px;
  line-height: 20px;
  color: var(--axis-body);
}
.gm-neutral .ax-chartlegend b {
  font-size: 22px;
  font-weight: 600;
  color: var(--axis-ink);
}
.gm-neutral .button,
.gm-neutral .bank-calculate {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.24px;
  border-radius: 8px;
  padding: 12px 24px;
  min-height: 48px;
}
/* Results in detail */
.gm-neutral .facts span {
  font-size: 14px;
  line-height: 20px;
  color: var(--axis-body);
}
.gm-neutral .facts b {
  font-size: 26px;
  line-height: 36px;
  font-weight: 600;
}
.gm-neutral .resultcard h3 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
}
.gm-neutral .resultcard > p,
.gm-neutral .gm-insight div {
  font-size: 16px;
  line-height: 24px;
  color: var(--axis-body);
}
.gm-neutral .gm-insight h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}
/* Guide */
.gm-neutral .g-section h2 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  color: var(--axis-ink);
}
.gm-neutral .g-section h3 {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
}
.gm-neutral .g-section p,
.gm-neutral .g-section li {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.16px;
  color: var(--axis-body);
}
.gm-neutral .g-section li {
  margin-bottom: 8px;
}
.gm-neutral .g-section strong {
  color: var(--axis-ink);
}
.gm-neutral .g-section a {
  color: var(--wine);
}
/* Tables: claret header row, as on Axis's amortisation table */
.gm-neutral .g-table thead th,
.gm-neutral .gm-statement th {
  background: var(--wine);
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.24px;
}
.gm-neutral .g-table td,
.gm-neutral .g-table tbody th,
.gm-neutral .gm-statement td {
  font-size: 16px;
  line-height: 24px;
  color: var(--axis-ink);
  border-color: #e2e2e2;
}
.gm-neutral .g-table td,
.gm-neutral .g-table th {
  padding: 16px 20px;
}
/* FAQs: grey band, numbered white cards, as on Axis */
.gm-neutral .fullfaq {
  background: #f1f4f7;
  border-radius: 16px;
  padding: 40px;
  margin: 40px 0;
}
.gm-neutral .fullfaq > div:first-child {
  text-align: center;
}
.gm-neutral .q-faqs {
  counter-reset: faq;
  margin-top: 24px;
  gap: 12px;
}
.gm-neutral .q-faq {
  border: 0;
  border-radius: 8px;
  padding: 0 32px;
}
.gm-neutral .q-faq summary {
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--axis-ink);
  padding: 22px 44px 22px 0;
}
.gm-neutral .q-faq summary > span:first-child::before {
  counter-increment: faq;
  content: counter(faq) ". ";
}
.gm-neutral .q-faqBody {
  border-top: 0;
  padding: 0 0 22px;
}
.gm-neutral .q-faqBody p {
  font-size: 16px;
  line-height: 24px;
  color: var(--axis-body);
}
.gm-neutral .q-note {
  background: #fff;
  border-radius: 8px;
}
@media (max-width: 650px) {
  .gm-neutral .intro h1 {
    font-size: 28px;
    line-height: 36px;
  }
  .gm-neutral .intro > p:last-child,
  .gm-neutral .guideintro > p:last-child,
  .gm-neutral .section > p:not(.eyebrow),
  .gm-neutral .g-section p,
  .gm-neutral .g-section li,
  .gm-neutral .q-faqBody p,
  .gm-neutral .resultcard > p,
  .gm-neutral .gm-insight div {
    font-size: 14px;
    line-height: 20px;
  }
  .gm-neutral .section h2,
  .gm-neutral .sectionheading h2,
  .gm-neutral .guideintro h2,
  .gm-neutral .q-explainerTitle {
    font-size: 24px;
    line-height: 32px;
  }
  .gm-neutral .g-section h2 {
    font-size: 20px;
    line-height: 32px;
  }
  .gm-neutral .calculator {
    padding: 24px 16px;
  }
  .gm-neutral .result.ax-chartpanel {
    padding: 24px 12px;
  }
  .gm-neutral.gm-neutral .labelrow label,
  .gm-neutral .gm-clear .gm-label,
  .gm-neutral .gm-clear .ax-select-field label,
  .gm-neutral .gm-clear .gm-switchrow label {
    font-size: 14px;
    line-height: 20px;
  }
  .gm-neutral .endpoints {
    font-size: 12px;
  }
  .gm-neutral .ax-paymentstrip span {
    font-size: 16px;
    line-height: 26px;
  }
  .gm-neutral .ax-paymentstrip strong,
  .gm-neutral .circle strong,
  .gm-neutral .facts b {
    font-size: 20px;
    line-height: 26px;
  }
  .gm-neutral .q-faq summary {
    font-size: 16px;
    line-height: 20px;
  }
  .gm-neutral .q-faq {
    padding: 0 16px;
  }
  .gm-neutral .fullfaq {
    padding: 24px 16px;
  }
}

/* ── Chart palette on the package's own charts ─────────────
   Kept apart from the claret brand colour: blue for what you keep or
   repay, orange for tax or interest, grey for the comparison line. The
   salary and mortgage scripts draw with the same colours. */
.gm-neutral .principal-dot,
.gm-neutral .chartlegend span:first-child i {
  background: #2a78d6;
}
.gm-neutral .interest-dot,
.gm-neutral .chartlegend span:nth-child(2) i {
  background: #eb6834;
}
.gm-neutral .chartlegend span:nth-child(3) i {
  background: #9aa1a9;
}

/* ── Salary and mortgage pages: form title hidden, tabs as radios ──
   The package's tabs above the form became a radio group inside it, like
   every other calculator. The buttons keep the package's data attributes,
   so its scripts still switch them (class "selected", aria-pressed). */
.gm-neutral .formheading.gm-notitle {
  justify-content: flex-end;
  margin-bottom: 8px;
}
.gm-neutral .gm-pkgradios {
  border: 0;
  padding: 0;
  margin: 0 0 26px;
  min-width: 0;
}
.gm-neutral .gm-pkgradios > legend {
  padding: 0;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--axis-ink, #282828);
}
.gm-neutral .gm-pkgradios .gm-radios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.gm-neutral .gm-pkgradios .gm-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px 11px 12px;
  border: 1px solid #c4cad1;
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  line-height: 22px;
  color: var(--axis-ink, #282828);
  text-align: left;
  cursor: pointer;
}
.gm-neutral .gm-pkgradios .gm-radio::before {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid #9aa1a9;
  border-radius: 50%;
  box-sizing: border-box;
  background: #fff;
}
.gm-neutral .gm-pkgradios .gm-radio.selected {
  border-color: #510b38;
  box-shadow: 0 0 0 1px #510b38;
}
.gm-neutral .gm-pkgradios .gm-radio.selected::before {
  border-color: #510b38;
  background: #510b38;
  box-shadow: inset 0 0 0 3px #fff;
}
.gm-neutral .gm-pkgradios .gm-radio.selected span {
  font-weight: 700;
  color: #510b38;
}
.gm-neutral .gm-pkgradios .gm-radio:focus-visible {
  outline: 2px solid #8b2058;
  outline-offset: 2px;
}
@media (max-width: 650px) {
  .gm-neutral .gm-pkgradios .gm-radio {
    flex: 1 1 auto;
  }
}

/* ── Trust line under each calculator's title ────────────────
   Who checks the page, when it last changed, and links to its official
   sources and to "How we check our figures". */
.gm-neutral .intro .gm-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 0;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: #5c6066;
  max-width: none;
}
.gm-neutral .gm-trust > span:not(.gm-trust-mark) + span::before {
  content: "·";
  margin: 0 10px;
  color: #9aa1a9;
}
.gm-neutral .gm-trust-mark {
  position: relative;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border-radius: 50%;
  background: #510b38;
}
.gm-neutral .gm-trust-mark::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.gm-neutral .gm-trust a {
  color: #510b38;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gm-neutral .gm-trust a:hover {
  color: #73164c;
}
@media (max-width: 650px) {
  /* On phones the items wrap, so spacing replaces the dots. */
  .gm-neutral .intro .gm-trust {
    gap: 6px 16px;
  }
  .gm-neutral .gm-trust > span:not(.gm-trust-mark) + span::before {
    content: none;
  }
  .gm-neutral .gm-trust-mark {
    margin-right: -8px;
  }
}

/* ── Calculator search in the header ─────────────────────────
   axis.js already searches /gm/catalog.json as you type; this box gives it
   the #tool-search input and #tool-search-results list it looks for.
   Desktop: in place of the old "Browse calculators" button. Phones: a full
   row under the logo and Menu button. */
.header .gm-headsearch {
  position: relative;
  flex: 0 1 260px;
  max-width: 260px;
  height: 46px;
  padding: 0 14px;
  gap: 10px;
  border: 1px solid #9aa1a9;
  border-radius: 8px;
  box-shadow: none;
  background: #fff;
  color: #5c6066;
}
.header .gm-headsearch:focus-within {
  border-color: #510b38;
  outline: 2px solid #510b38;
  outline-offset: 1px;
}
.header .gm-headsearch svg {
  flex: 0 0 auto;
}
.header .gm-headsearch input {
  font-size: 15px;
  color: #282828;
  background: transparent;
}
.header .gm-headsearch input::placeholder {
  color: #6e6e6e;
}
.header .gm-headsearch input::-webkit-search-cancel-button {
  cursor: pointer;
}
.header .gm-headsearch .ax-search-results {
  top: 52px;
  min-width: 300px;
  right: 0;
  left: auto;
  width: max(100%, 320px);
}
.header .gm-headsearch .ax-search-results a {
  color: #282828;
}
.header .gm-headsearch .ax-search-results a:hover,
.header .gm-headsearch .ax-search-results a:focus {
  background: #f1f4f7;
  color: #510b38;
  outline: none;
}
@media (max-width: 1100px) {
  .header .gm-headsearch {
    flex-basis: 210px;
  }
}
@media (max-width: 850px) {
  .reference-header .header:has(.gm-headsearch),
  .header:has(.gm-headsearch) {
    flex-wrap: wrap;
    height: auto;
    row-gap: 10px;
    padding-bottom: 12px;
  }
  .header .gm-headsearch {
    display: flex;
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }
  .header .gm-headsearch .ax-search-results {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
  }
}

/* Mega menus list every calculator in a topic (up to 25), so desktop uses three tighter columns. */
@media (min-width: 1151px) {
  .ax-mega-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 14px 26px;
  }
  .ax-mega-links a {
    padding: 8px 0;
  }
}

/* Logo: the SumAtlas mark and wordmark (October 2026), about 3.35 times as wide
   as it is tall. Header 56px tall (48px on phones), footer 52px; the width
   follows the image. */
.logo img{width:auto!important;object-fit:contain}
.reference-header .header .logo img{height:56px!important}
footer .logo img{height:52px!important}
@media (max-width:550px){.reference-header .header .logo img{height:48px!important}}

/* ── One-row header (October 2026, owner's request) ──────────────
   No claret strip and no Home/Calculators/Guides/About links: headerHtml()
   in src/gm/catalog.ts moves the topic menus into the logo row, between the
   logo and the search box. Mega menus still open full width under the
   header (.ax-header is their positioned parent). Below 1360px the menus
   take a second row; at 850px and below the Menu button shows them. From
   1360px the header row is 1340px wide (wider than the page's 1200px) so the
   logo, menus, search and country menu fit on one line. */
@media (min-width: 1360px) {
  .reference-header .header {
    max-width: 1340px;
  }
}
.reference-header,
.gm-neutral .reference-header {
  border-top: 0;
}
.reference-header .header {
  height: auto;
  min-height: 96px;
  gap: 18px;
}
.reference-header .header .logo {
  width: auto;
}
.reference-header .header .ax-navigation {
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-top: 0;
  justify-content: center;
  gap: 0;
  font-size: inherit;
  font-weight: inherit;
  background: transparent;
}
.reference-header .header .ax-navbutton {
  min-height: 100%;
  padding: 0 7px;
  font-size: 15px;
  font-weight: 500;
}
.reference-header .header .gm-headsearch {
  flex: 0 0 200px;
  max-width: 200px;
}
@media (min-width: 851px) and (max-width: 1359px) {
  .reference-header .header {
    flex-wrap: wrap;
    row-gap: 0;
    padding-bottom: 0;
  }
  .reference-header .header .gm-headsearch {
    flex-basis: 260px;
    max-width: 260px;
    margin-left: auto;
  }
  .reference-header .header .ax-navigation {
    order: 5;
    flex: 1 1 100%;
    justify-content: space-between;
    border-top: 1px solid #dfe3e8;
  }
  .reference-header .header .ax-navbutton {
    min-height: 46px;
    padding: 0 8px;
  }
}
@media (max-width: 850px) {
  /* The package hid its old header links (.header nav) on phones; the topic
     menus are a nav inside .header now, so the Menu button must show them. */
  .reference-header .header .ax-navigation.mobile-open {
    display: block;
  }
  .reference-header .header .ax-navigation {
    order: 5;
    flex: 1 1 100%;
    padding: 0;
  }
  .reference-header .header .gm-headsearch {
    flex: 1 1 100%;
    max-width: none;
  }
  .reference-header .header .ax-navbutton {
    min-height: 0;
    padding: 13px 4px;
    font-size: 16px;
  }
}

/* ── Claret heroes (October 2026, owner's request) ────────────────
   The home hero and the topic and content-page heroes use the brand claret,
   so the white header and menus stand apart from the page's opening. */
.gm-neutral .hero,
.hero {
  background: #8c1d40;
  border-bottom: 0;
  color: #fff;
}
.hero .herocopy h1 {
  color: #fff;
}
.hero .herocopy h1 em {
  color: #f1f4f7;
  text-decoration: underline;
  text-decoration-color: #eda100;
  text-decoration-thickness: 4px;
  text-underline-offset: 8px;
}
.hero .herocopy > p:not(.eyebrow),
.hero .heronote {
  color: #f1f4f7;
}
.hero .button.herobutton {
  background: #fff;
  color: #8c1d40 !important;
}
.hero .button.herobutton:hover,
.hero .button.herobutton:focus-visible {
  background: #f1f4f7;
  color: #6e1632 !important;
}
.hero .button.herobutton:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
/* No picture (owner's request, 7 October 2026): the hero is text only. */
.hero .herogrid {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding-top: 64px;
  padding-bottom: 64px;
}
.hero .herocopy {
  max-width: 720px;
}
@media (max-width: 700px) {
  .hero .herogrid {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
.categoryhero {
  background: #8c1d40;
  color: #fff;
}
.categoryhero h1 {
  color: #fff;
}
.categoryhero > p:not(.eyebrow),
.categoryhero > p:last-child,
.categoryhero .gm-meta,
.categoryhero .gm-meta * {
  color: #f1f4f7;
}
.categoryhero a {
  color: #fff;
}
/* "View all calculators" in each mega menu: room for its label. */
.ax-mega-title .button {
  display: inline-block;
  padding: 11px 16px;
  white-space: nowrap;
}

/* ── Country menu (October 2026, owner's request) ────────────────
   BookMyShow-style location picker after the search box: a pin, the
   country's short name and a chevron; the list opens under it on the right.
   CountrySwitch.tsx picks the country (the page's section, else the
   visitor's choice, else where they are browsing from, else the UK). */
.gm-country {
  position: relative;
  flex: 0 0 auto;
}
.gm-country-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 46px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #282828;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.gm-country-btn svg {
  color: #8c1d40;
}
.gm-country-btn:hover,
.gm-country-btn[aria-expanded="true"] {
  background: #f1f4f7;
}
.gm-country-btn:focus-visible {
  outline: 2px solid #8c1d40;
  outline-offset: 2px;
}
.gm-country-btn .chevron {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin: -3px 0 0 2px;
}
.gm-country-btn[aria-expanded="true"] .chevron {
  transform: rotate(225deg);
  margin-top: 3px;
}
.gm-country-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  width: 260px;
  padding: 12px;
  background: #fff;
  border: 1px solid #dfe3e8;
  border-radius: 10px;
  box-shadow: 0 12px 28px #0000001f;
}
.gm-country-list[hidden] {
  display: none;
}
.gm-country-note {
  margin: 0 4px 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #6e6e6e;
}
.gm-country-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.gm-country-list a,
.gm-country-list span {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 6px;
  font-size: 15px;
  color: #282828;
  text-decoration: none;
}
.gm-country-list a:hover,
.gm-country-list a:focus-visible {
  background: #f1f4f7;
  color: #8c1d40;
  outline: none;
}
.gm-country-list [aria-current="true"] {
  font-weight: 700;
  color: #8c1d40;
}
.gm-country-list [aria-current="true"]::before {
  content: "";
  order: 2;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8c1d40;
}
.gm-country-list span[aria-disabled] {
  color: #6e6e6e;
  cursor: default;
}
.gm-country-list small {
  margin-left: auto;
  font-size: 12px;
  color: #6e6e6e;
}
@media (min-width: 851px) and (max-width: 1359px) {
  .reference-header .header .gm-country {
    order: 3;
  }
}
@media (max-width: 850px) {
  .reference-header .header .gm-country {
    order: 1;
    margin-left: auto;
  }
  .reference-header .header .ax-mobile-toggle {
    order: 2;
  }
  .gm-country-btn {
    height: 44px;
    padding: 0 8px;
  }
}
@media (max-width: 550px) {
  .reference-header .header {
    column-gap: 8px;
  }
  .gm-country-btn {
    gap: 4px;
    padding: 0 6px;
    font-size: 14px;
  }
  .gm-country-btn .chevron {
    display: none;
  }
  .reference-header .header .logo img {
    height: 44px !important;
  }
}

/* ── Compact home and topic pages (October 2026, owner's request) ──
   Less empty space on the country home pages (/uk, /us) and the topic pages
   that share their cards, without smaller body text. */
.hero .herogrid {
  padding-top: 36px;
  padding-bottom: 36px;
}
.hero .herocopy h1 {
  font-size: 38px;
  margin: 0 0 12px;
}
.hero .herocopy > p:not(.eyebrow) {
  margin-bottom: 18px;
}
.hero .heronote {
  margin-top: 12px;
}
.popularsection {
  padding: 28px 0;
}
.headingrow {
  margin-bottom: 16px;
}
.popularcard {
  padding: 16px 18px;
}
.popularcard h3 {
  margin: 10px 0 4px;
}
.popularcard p {
  margin: 0 0 10px;
}
.browse {
  padding: 28px 0 36px;
}
.categoryjump {
  margin: 0 0 18px;
}
.categorygrid {
  gap: 16px;
}
.categorycard {
  padding: 18px 20px;
}
.categorycard > p {
  margin: 8px 0 10px;
}
.toollist {
  margin-bottom: 14px;
}
.toollist a {
  padding: 7px 4px;
}
@media (min-width: 1100px) {
  .categorygrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .fullcategory {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.categoryhero {
  padding: 24px 28px;
  margin: 4px 0 16px;
}
.categoryhero h1 {
  font-size: 30px;
  margin-bottom: 8px;
}
.crumb {
  padding: 14px 0;
}
.fullcategory {
  gap: 14px;
  margin: 16px 0;
}
.categorytool {
  padding: 16px 18px;
  gap: 14px;
}
.gm-neutral .categorytool h2,
.categorytool h2 {
  font-size: 19px;
  line-height: 1.35;
  margin: 0 0 4px;
}
.categorytool p {
  font-size: 15px;
  margin: 0 0 8px;
}
.gm-neutral .section:has(> .fullcategory),
.gm-neutral .section:has(.fullcategory) {
  padding: 24px 0;
}
.gm-neutral .sectionheading h2 {
  font-size: 28px;
  line-height: 34px;
}
.sectionheading .eyebrow {
  margin-bottom: 4px;
}
.section:has(.fullcategory) .sectionheading + p {
  margin: 6px 0 0;
}
@media (max-width: 700px) {
  .hero .herogrid {
    padding-top: 26px;
    padding-bottom: 26px;
  }
  .hero .herocopy h1 {
    font-size: 32px;
  }
  .popularsection,
  .browse {
    padding: 22px 0;
  }
  .categorycard {
    padding: 16px;
  }
  .toollist a {
    padding: 9px 4px;
  }
  .categoryhero {
    padding: 20px 18px;
  }
  .categoryhero h1 {
    font-size: 26px;
  }
  .categorytool {
    padding: 14px;
  }
  .gm-neutral .sectionheading h2 {
    font-size: 23px;
    line-height: 29px;
  }
}

/* ── Compact calculator, guide and content pages (8 October 2026) ──
   Owner's request: compact every page, smaller headings where it helps,
   body text kept at 16px for reading. */
.gm-neutral .crumb {
  padding: 10px 0;
}
.gm-neutral .intro {
  padding: 6px 0 16px;
}
.gm-neutral .intro h1 {
  font-size: 34px;
  line-height: 40px;
  margin: 0 0 8px;
}
.gm-neutral .gm-trust {
  margin-top: 10px;
}
.gm-neutral .sectionnav {
  margin-bottom: 18px;
}
.gm-neutral .sectionnav a {
  padding: 10px 0;
}
/* Calculator */
.gm-neutral .calculator {
  padding: 26px 32px;
}
.gm-neutral .calcgrid {
  gap: 32px;
}
.gm-neutral .field {
  margin-bottom: 18px;
}
.gm-neutral .labelrow {
  margin-bottom: 8px;
}
.gm-neutral .labelrow label {
  font-size: 16px;
}
.gm-neutral .result {
  padding: 22px 22px;
}
.gm-neutral .ax-paymentstrip {
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.gm-neutral .circle {
  width: 190px;
  height: 190px;
  margin: 12px auto 16px;
}
.gm-neutral .circle strong {
  font-size: 28px;
}
.gm-neutral .bank-calculate {
  margin-top: 10px;
}
/* Results in detail */
.gm-neutral #results {
  padding: 26px 0;
}
.gm-neutral #results h2 {
  font-size: 26px;
  line-height: 32px;
}
.gm-neutral .resultgrid {
  margin: 14px 0;
  gap: 14px;
}
.gm-neutral .resultgrid > * {
  padding: 18px 20px;
}
.gm-neutral .facts {
  margin: 14px 0;
}
.gm-neutral .facts > * {
  padding: 14px 16px;
}
.gm-neutral details.ax-assumptions {
  padding: 12px 16px;
  margin: 14px 0;
}
.gm-neutral table th,
.gm-neutral table td {
  padding: 8px 12px;
}
/* Guide */
.gm-neutral .guideintro {
  padding: 22px 26px;
  margin: 8px 0 22px;
}
.gm-neutral .guideintro h2,
.gm-neutral .fullfaq h2,
.gm-neutral .section h2,
.gm-neutral .sectionheading h2,
.gm-neutral .q-explainerTitle {
  font-size: 28px;
  line-height: 34px;
}
.gm-neutral .g-section {
  padding: 4px 0 22px;
  margin: 0 0 22px;
}
.gm-neutral .g-sectionHead {
  margin-bottom: 6px;
}
.gm-neutral .g-section h2 {
  font-size: 22px;
  line-height: 28px;
  margin: 0 0 10px;
}
.gm-neutral .g-section > p,
.gm-neutral .g-section > ul,
.gm-neutral .g-section > ol {
  max-width: 84ch;
}
.gm-neutral .g-section p {
  margin-bottom: 12px;
}
.gm-neutral .g-article ul li {
  margin-bottom: 4px;
}
.gm-neutral .g-article table td,
.gm-neutral .g-article table th {
  padding: 9px 14px;
}
.gm-neutral .guide-nav {
  padding: 14px 16px;
}
.gm-neutral .g-callout,
.gm-neutral .callout {
  padding: 12px 16px;
  margin: 14px 0;
}
.gm-neutral .g-stats > *,
.gm-neutral .g-compare > *,
.gm-neutral .g-cards > * {
  padding: 14px;
}
.gm-neutral .g-worked,
.gm-neutral .g-example {
  margin: 14px 0;
}
/* FAQ and related */
.gm-neutral .fullfaq {
  padding: 26px 28px;
  margin: 26px 0;
}
.gm-neutral .q-faq details,
.gm-neutral .q-faq > * {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 17px;
}
.gm-neutral .relatedgrid {
  margin-top: 14px;
  gap: 14px;
}
.gm-neutral .q-relatedCard {
  padding: 16px 18px;
}
footer {
  padding: 22px 0 18px;
}
@media (max-width: 700px) {
  .gm-neutral .intro h1 {
    font-size: 28px;
    line-height: 34px;
  }
  .gm-neutral .calculator {
    padding: 18px 14px;
  }
  .gm-neutral .result {
    padding: 16px 14px;
  }
  .gm-neutral .guideintro h2,
  .gm-neutral .fullfaq h2,
  .gm-neutral .section h2,
  .gm-neutral .sectionheading h2 {
    font-size: 23px;
    line-height: 29px;
  }
  .gm-neutral .g-section h2 {
    font-size: 20px;
    line-height: 26px;
  }
  .gm-neutral .guideintro,
  .gm-neutral .fullfaq {
    padding: 18px 16px;
  }
  .gm-neutral .q-faq details,
  .gm-neutral .q-faq > * {
    font-size: 16px;
  }
}
/* Long card lists (all calculators, guides, topic pages): the whole card is
   the link, so the "Open calculator" label goes, and wide screens get four
   columns. */
.categorytool .openlabel {
  display: none;
}
.categorytool p {
  margin-bottom: 0;
}
@media (min-width: 1240px) {
  .fullcategory {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.gm-neutral .gm-cards {
  gap: 14px;
}
.gm-neutral .gm-cards > * {
  padding: 16px 18px;
}
.gm-neutral .categorytool h3 {
  font-size: 18px;
  line-height: 1.35;
  margin: 0 0 4px;
}
.gm-neutral .gm-countryheading {
  margin-top: 28px;
  padding-top: 16px;
}

/* ── Calculator form rows (8 October 2026, owner's request) ─────────
   Every input is one row: the label on the left, its value on the right,
   with a thin rule between fields so each one reads as its own line.
   Sliders sit tight under their row; end values are small and muted. */
.gm-neutral .gm-clear .field,
.gm-neutral .gm-clear .ax-select-field {
  margin: 0;
  padding: 12px 0;
  border-bottom: 1px solid #e4e8ec;
}
.gm-neutral .gm-clear .moreoptions .field:last-child,
.gm-neutral .gm-clear .moreoptions .ax-select-field:last-child {
  border-bottom: 0;
}
.gm-neutral .gm-clear .labelrow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
}
.gm-neutral .gm-clear .labelrow > .gm-labelwrap {
  flex: 1 1 auto;
  min-width: 0;
}
.gm-neutral.gm-neutral .gm-clear .labelrow label,
.gm-neutral .gm-clear .gm-label,
.gm-neutral .gm-clear .ax-select-field label,
.gm-neutral .gm-clear .gm-switchrow label {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
}
.gm-neutral .gm-clear .gm-aside {
  font-size: 13px;
  font-weight: 400;
}
.gm-neutral .gm-clear .number,
.gm-neutral .gm-clear .labelrow > .number {
  flex: 0 0 auto;
  width: 150px;
  min-height: 38px;
  padding: 6px 10px;
}
.gm-neutral .gm-clear .number input {
  font-size: 15px;
}
.gm-neutral .gm-clear input[type="range"] {
  margin: 12px 0 4px;
}
.gm-neutral .gm-clear .endpoints {
  font-size: 12px;
  line-height: 14px;
  letter-spacing: 0;
}
.gm-neutral .gm-clear .field .chips {
  margin: 10px 0 0;
}
/* Dropdowns */
.gm-neutral .gm-clear .ax-select-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 56%);
  align-items: center;
  gap: 12px;
}
.gm-neutral .gm-clear .ax-select-field .gm-labelwrap {
  margin: 0;
}
.gm-neutral .gm-clear .ax-select-toggle {
  min-height: 38px;
  font-size: 15px;
  padding-top: 6px;
  padding-bottom: 6px;
}
/* Radio choices: label left, options right (they wrap under each other if
   there is not room). */
.gm-neutral .gm-clear .gm-radiogroup {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}
.gm-neutral .gm-clear .gm-radiogroup > legend {
  float: left;
  margin: 0;
  padding: 0;
}
.gm-neutral .gm-clear .gm-radios {
  margin-left: auto;
  justify-content: flex-end;
  gap: 6px;
}
.gm-neutral .gm-clear .gm-radio {
  padding: 6px 11px 6px 9px;
  gap: 7px;
  font-size: 14px;
}
/* Switches: label left, switch right */
.gm-neutral .gm-clear .gm-switchrow {
  flex-wrap: nowrap;
  gap: 8px;
}
.gm-neutral .gm-clear .gm-switchrow .gm-switch {
  order: 3;
  margin-left: auto;
}
.gm-neutral .gm-clear .gm-switchrow label {
  order: 1;
}
.gm-neutral .gm-clear .gm-switchrow .gm-info {
  order: 2;
}
/* Date and text boxes */
.gm-neutral .gm-clear .field:has(> .gm-input) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 50%);
  align-items: center;
  gap: 12px;
}
.gm-neutral .gm-clear .field > .gm-input {
  width: 100%;
  min-height: 38px;
  font-size: 15px;
}
.gm-neutral .gm-clear .field > .hint {
  grid-column: 1 / -1;
}
/* More options and the button */
.gm-neutral .gm-clear .moreoptions > div {
  padding-top: 0;
}
.gm-neutral .gm-clear .bank-calculate {
  margin-top: 16px;
}
@media (max-width: 650px) {
  .gm-neutral .gm-clear .labelrow {
    flex-wrap: nowrap;
  }
  .gm-neutral .gm-clear .labelrow > .gm-labelwrap {
    flex: 1 1 auto;
  }
  .gm-neutral .gm-clear .number,
  .gm-neutral .gm-clear .labelrow > .number {
    width: 46%;
    max-width: 170px;
  }
  .gm-neutral .gm-clear .ax-select-field {
    grid-template-columns: minmax(0, 1fr) 54%;
  }
  .gm-neutral .gm-clear .gm-radio {
    flex: 0 1 auto;
  }
}
/* The (i) button follows the label text on the same line, even on phones. */
.gm-neutral .gm-clear .gm-labelwrap {
  display: block;
}
.gm-neutral .gm-clear .gm-labelwrap > label,
.gm-neutral .gm-clear .gm-labelwrap > .gm-label {
  display: inline;
}
.gm-neutral .gm-clear .gm-labelwrap > .gm-info {
  display: inline-flex;
  vertical-align: -3px;
  margin-left: 6px;
}
.gm-neutral .gm-clear .gm-labelwrap > .gm-aside {
  display: block;
  margin-top: 2px;
}
/* Four or more choices: the options take their own row under the label. */
.gm-neutral .gm-clear .gm-radiogroup:has(.gm-radio:nth-child(4)) > legend {
  float: none;
  width: 100%;
}
.gm-neutral .gm-clear .gm-radiogroup:has(.gm-radio:nth-child(4)) .gm-radios {
  width: 100%;
  margin-left: 0;
  justify-content: flex-start;
}
@media (max-width: 650px) {
  .gm-neutral .gm-clear .gm-radiogroup:has(.gm-radio:nth-child(3)) > legend {
    float: none;
    width: 100%;
  }
  .gm-neutral .gm-clear .gm-radiogroup:has(.gm-radio:nth-child(3)) .gm-radios {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}