/* -- Floating Action Button v2 (glow-pulse, 72/64px, badge) -- */
    /* Badge placeholder (hidden by default, for future AI-chat count) */
/* About page responsive — mobile only, desktop not touched */
/*# sourceURL=wp-img-auto-sizes-contain-inline-css */
/*# sourceURL=/wp-includes/css/dist/block-library/common.min.css */
/*# sourceURL=global-styles-inline-css */
    
/*# sourceURL=uaeprop-interactions-inline-css */
/* Contact page: ITI phone flag selector dark-mode override */
    /* input.is-invalid highlight */

    /* Contact page responsive — mobile only */
@font-face{ font-family:Fraunces;font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/fraunces-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2'); }
@font-face{ font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-sans-700-latin.woff2') format('woff2'); }
@font-face{ font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2'); }
/* ───────────────────────────────────────────────────────────────────────────
   P-Mortgage Calculator — spec-faithful CSS (DE-INVERTED 2026-06-06)
   Page bg: bg-light var(--wp--preset--color--bg-light)  (ONLY monthly-card + CTA remain dark var(--wp--preset--color--bg-dark))
   Palette: ink var(--wp--preset--color--ink) · cream var(--wp--preset--color--cream) · copper var(--wp--preset--color--accent) · bg-dark var(--wp--preset--color--bg-dark)
   Fonts: Fraunces · IBM Plex Sans · JetBrains Mono
─────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* Page-level LIGHT background — only monthly-card and CTA remain dark */
body.page-template-page-mortgage {
  background: var(--wp--preset--color--bg-light);
  color: var(--wp--preset--color--ink);
}
.mort-page {
  background: var(--wp--preset--color--bg-light);
  font-family: 'IBM Plex Sans', sans-serif;
}

/* ── Rail: content max 1280px centred, full-bleed section bg ── */
.mort-section,
.mort-header,
.mort-about,
.mort-help-link,
.mort-calc,
.mort-amort,
.mort-eligibility,
.mort-faq,
.mort-disclaimer,
.mort-cta,
.mort-page .t2-crumb {
  padding-left:  max(80px, calc((100vw - 1280px) / 2));
  padding-right: max(80px, calc((100vw - 1280px) / 2));
}

/* Breadcrumb: light page — use ink colours */
.mort-page .t2-crumb {
  border-bottom-color: rgba(14,14,16,0.12) !important;
  background: transparent;
}
.mort-page .t2-crumb a,
.mort-page .t2-crumb span,
.mort-page .t2-crumb li { color: rgba(14,14,16,0.55) !important; }
.mort-page .t2-crumb a:hover { color: var(--wp--preset--color--accent) !important; }

/* Typography */
.mort-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(14,14,16,0.6); display: block;
}
.mort-h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 400; line-height: 1.1;
  color: var(--wp--preset--color--ink); margin: 0;
}
.mort-h2 {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 400; line-height: 1.2;
  color: var(--wp--preset--color--ink); margin: 0;
}
/* CTA H2 — dark ink on the orange CTA background, 36px per Figma */
/* 19.08 (Phase 5b cleanup): font-size dropped — dead, shadowed by
   .t2-section-title's own !important rules. Kept color, still live. */
.mort-cta .mort-h2 {
  color: var(--wp--preset--color--ink);
}
.mort-h3 {
  font-family: 'Fraunces', serif;
  font-size: 24px; font-weight: 400;
  color: var(--wp--preset--color--ink); margin: 0;
}
.mort-body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 18px; line-height: 1.65;
  color: rgba(14,14,16,0.7); margin: 0;
}
/* On the orange CTA bg, body text is dark ink; 16px per Figma (base .mort-body = 18px) */
.mort-cta .mort-body {
  font-size: 16px;
  color: rgba(14,14,16,0.75);
}
.mort-body-dark {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px; line-height: 1.55;
  color: rgba(14,14,16,0.85); margin: 0;
}

/* Section wrapper */
.mort-section {
  padding-top: 80px; padding-bottom: 80px;
}

/* ── SECTION 3: Header ── */
.mort-header { padding-top: 80px; padding-bottom: 80px; }
.mort-header__kicker { margin-bottom: 32px; }
.mort-header__h1 { max-width: 1280px; margin-bottom: 24px; }
.mort-header__sub { max-width: 1280px; }

/* ── SECTION 3.5: How it works (SEO/GEO body text) ── */
.mort-about {
  padding-top: 0; padding-bottom: 40px;
}
.mort-about__kicker { margin-bottom: 16px; }
.mort-about__h2 { font-size: 28px; margin-bottom: 20px; max-width: 1280px; }
.mort-about__body { max-width: 1280px; margin-bottom: 16px; }
.mort-about__body:last-child { margin-bottom: 0; }

.mort-help-link {
  padding-top: 0;
  padding-bottom: 40px;
}
.mort-help-link__box {
  align-items: center;
  background: #FFFFFF;
  border: 1px solid rgba(14,14,16,0.10);
  border-radius: 8px;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  max-width: 1280px;
  padding: 20px 24px;
}
.mort-help-link__box span {
  color: rgba(14,14,16,0.78);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}
.mort-help-link__box a {
  color: var(--wp--preset--color--accent);
  flex-shrink: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}
.mort-help-link__box a:hover { text-decoration: underline; }

/* ── SECTION 4: Calculator ── */
.mort-calc {
  padding-top: 80px; padding-bottom: 80px;
  border-top: 1px solid rgba(14,14,16,0.12);
}
.mort-calc__panels {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* Input panel */
.mort-calc__inputs {
  flex: 0 0 760px;
  max-width: 760px;
  background: #FFFFFF;
  padding: 32px;
  border-radius: 16px;
}
.mort-calc__inputs-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(14,14,16,0.5); display: block;
  margin-bottom: 32px;
}
.mort-field { margin-bottom: 28px; }
.mort-field:last-child { margin-bottom: 0; }
.mort-field__label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px; font-weight: 500; color: rgba(14,14,16,0.7);
  display: block; margin-bottom: 6px;
}
.mort-field__input,
.mort-field__select {
  width: 100%; height: 40px;
  padding: 0 12px;
  background: #F8F7F4;
  border: 1px solid rgba(14,14,16,0.20);
  border-radius: 8px;
  font-family: 'Fraunces', serif;
  font-size: 18px; color: var(--wp--preset--color--ink);
  outline: none; appearance: none;
}
.mort-field__select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%230e0e10' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 6px;
  padding-right: 34px;
}
.mort-field__input:focus,
.mort-field__select:focus { border-color: var(--wp--preset--color--accent); }

/* Property-price up/down stepper (±100,000) */
.mort-field__stepper-wrap { position: relative; }
.mort-field__input--stepped { padding-right: 40px; }
/* Suppress the browser's own native number-input spinner — we render our
   own custom up/down buttons instead, and the two together looked doubled. */
.mort-field__input--stepped::-webkit-outer-spin-button,
.mort-field__input--stepped::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mort-field__input--stepped[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.mort-stepper {
  position: absolute; top: 1px; right: 1px; bottom: 1px;
  width: 30px; display: flex; flex-direction: column;
  border-left: 1px solid rgba(14,14,16,0.20);
  border-radius: 0 7px 7px 0; overflow: hidden;
}
.mort-stepper__btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  border: none; background: #F8F7F4; cursor: pointer; padding: 0;
  transition: background 0.15s;
}
.mort-stepper__btn--up { border-bottom: 1px solid rgba(14,14,16,0.15); }
.mort-stepper__btn:hover { background: var(--wp--preset--color--accent); }
.mort-stepper__icon {
  display: inline-block; width: 8px; height: 5px; opacity: 0.55;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%230e0e10' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain; background-position: center;
}
.mort-stepper__btn--up .mort-stepper__icon { transform: rotate(180deg); }
.mort-stepper__btn:hover .mort-stepper__icon { opacity: 1; filter: brightness(0) invert(1); }

/* Down-payment %/AED mode toggle */
.mort-field__label-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.mort-field__label-row .mort-field__label { margin-bottom: 0; }
.mort-mode-toggle {
  display: inline-flex; background: #F8F7F4;
  border: 1px solid rgba(14,14,16,0.15);
  border-radius: 999px; padding: 2px; gap: 2px;
}
.mort-mode-toggle__btn {
  border: none; background: transparent; cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 11px; font-weight: 600;
  color: rgba(14,14,16,0.5); line-height: 1;
  padding: 4px 10px; border-radius: 999px;
  transition: background 0.15s, color 0.15s;
}
.mort-mode-toggle__btn.is-active { background: var(--wp--preset--color--accent); color: #FFFFFF; }
.mort-mode-toggle__btn:not(.is-active):hover { color: var(--wp--preset--color--ink); }

/* Output panel — DARK card per Figma 548:124 */
.mort-calc__output {
  flex: 1;
  min-width: 0;
  background: var(--wp--preset--color--bg-dark);
  padding: 32px;
  border-radius: 16px;
}
.mort-calc__output-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(247,237,217,0.5); display: block;
  margin-bottom: 16px;
}
.mort-monthly {
  font-family: 'Fraunces', serif;
  font-size: clamp(56px, 5.5vw, 80px);
  font-weight: 400; line-height: 1;
  color: var(--wp--preset--color--cream); margin-bottom: 32px;
}
.mort-output-row {
  display: flex; justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(247,237,217,0.15);
}
.mort-output-row:first-of-type { border-top: 1px solid rgba(247,237,217,0.15); }
.mort-output-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px; color: rgba(247,237,217,0.6);
}
.mort-output-value {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px; font-weight: 500;
  color: var(--wp--preset--color--cream); text-align: right;
}

/* ── SECTION 5: Amortization chart ── */
.mort-amort {
  padding-top: 80px; padding-bottom: 80px;
  border-top: 1px solid rgba(14,14,16,0.12);
}
.mort-amort__head { margin-bottom: 48px; }
.mort-amort__kicker { margin-bottom: 24px; }
.mort-chart-wrap {
  width: 100%; overflow-x: auto;
  /* 25.08 (Mikhail-reported: a white strip that scrolls WITH the chart
     content, not a fixed overlay — ruled out the bar's `title`-attribute
     tooltip as the cause, this was purely scroll-position-driven). Root
     cause: this container never had -webkit-overflow-scrolling:touch —
     without it, iOS Safari falls back to a slower, non-GPU-accelerated
     scroll path for overflow-x containers that's known to tear/blank
     during fast scroll. Same fix already proven elsewhere in this
     codebase for an identical horizontal-scroll pattern (see
     .wtbn-comm-wrap in global.css) — not independently reproducible in
     Chromium/Playwright (this is an iOS-Safari-specific rendering path),
     so this is the best-evidence fix rather than a live-verified one;
     needs Mikhail to confirm on his real device. */
  -webkit-overflow-scrolling: touch;
}
.mort-chart {
  display: flex; align-items: flex-end;
  gap: 8px; height: 220px;
  width: 100%; min-width: 700px;
}
.mort-bar-group {
  flex: 1; display: flex;
  flex-direction: column; align-items: center;
  height: 100%;
}
.mort-bar-inner {
  flex: 1; display: flex;
  flex-direction: column; justify-content: flex-end;
  width: 100%; gap: 0;
}
.mort-bar-principal {
  background: var(--wp--preset--color--success);
  width: 100%; min-height: 2px;
  border-radius: 0 0 4px 4px;
}
.mort-bar-interest {
  background: var(--wp--preset--color--accent);
  width: 100%; min-height: 2px;
  border-radius: 4px 4px 0 0;
}
.mort-bar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500; color: rgba(14,14,16,0.6);
  margin-top: 8px; text-align: center;
  letter-spacing: 0.04em;
}
.mort-chart-legend {
  display: flex; gap: 32px; margin-top: 24px;
  align-items: center;
}
.mort-legend-item {
  display: flex; align-items: center; gap: 8px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px; font-weight: 500; color: var(--wp--preset--color--ink);
}
.mort-legend-swatch {
  width: 12px; height: 12px; flex-shrink: 0;
}
/* Mobile-only scroll affordance for the horizontally-scrolling chart —
   see mobile @media block. Hidden on desktop where the chart fits. */
.mort-amort__scroll-hint {
  display: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: rgba(14,14,16,0.45);
  margin: 12px 0 0; text-align: center;
}

/* ── SECTION 6: Eligibility ── */
.mort-eligibility {
  padding-top: 80px; padding-bottom: 80px;
  border-top: 1px solid rgba(14,14,16,0.12);
}
.mort-elig-card {
  background: transparent;
  border: 1px solid rgba(14,14,16,0.15);
  border-radius: 16px;
  padding: 32px;
  max-width: 1280px;
}
.mort-elig-card__kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wp--preset--color--accent); display: block; margin-bottom: 16px;
}

/* ── SECTION 6.5: FAQ (accordion — same details/summary pattern as
   FaqAccordion.astro sitewide, converted from a static 2-col grid 17.07) ── */
.mort-faq {
  padding-top: 80px; padding-bottom: 80px;
  border-top: 1px solid rgba(14,14,16,0.12);
}
.mort-faq__kicker { margin-bottom: 16px; }
/* Type scale copied 1:1 from the sitewide FaqAccordion.astro etalon
   (.faqacc__title/__qt/__icon/__a) — Mikhail 17.07: don't invent sizes,
   use the reference's exact values. */
.mort-faq__h2 {
  margin: 0 0 32px; max-width: 1280px;
  font-family: 'Fraunces', serif; font-weight: 400; font-size: 64px;
  color: var(--wp--preset--color--ink); letter-spacing: -1.28px; line-height: 1.15;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}
.mort-faq__list {
  list-style: none; padding: 0; margin: 0; max-width: 1280px;
  border-top: 1px solid rgba(14,14,16,0.12);
}
.mort-faq__item { border-bottom: 1px solid rgba(14,14,16,0.12); }
.mort-faq__q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0; cursor: pointer; gap: 24px; list-style: none; -webkit-appearance: none;
  margin: 0;
}
.mort-faq__q::-webkit-details-marker { display: none; }
.mort-faq__q:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.mort-faq__qt {
  font-family: 'Fraunces', serif; font-weight: 400; font-size: 24px;
  color: var(--wp--preset--color--ink); line-height: 1.3;
  font-variation-settings: "SOFT" 0, "WONK" 1; flex: 1; margin: 0;
}
.mort-faq__icon {
  flex-shrink: 0; font-family: 'Fraunces', serif; font-weight: 300; font-size: 32px;
  color: var(--wp--preset--color--accent); line-height: 1; transition: transform 200ms ease; user-select: none;
}
.mort-faq__item[open] .mort-faq__icon { transform: rotate(45deg); }
.mort-faq__a {
  font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; line-height: 1.7;
  color: rgba(14,14,16,0.75); max-width: 100%; margin: 0; padding: 0 0 20px 0;
}
@media (max-width: 768px) { .mort-faq__h2 { font-size: 40px; } .mort-faq__qt { font-size: 20px; } }

/* ── SECTION 7: Disclaimer ── */
.mort-disclaimer {
  padding-top: 24px; padding-bottom: 24px;
  border-top: 1px solid rgba(14,14,16,0.08);
}
.mort-disclaimer p {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px; color: rgba(14,14,16,0.45);
  margin: 0 0 4px; line-height: 1.6;
  max-width: 1280px;
}

/* ── SECTION 8: Pre-approval CTA — orange backing per Mikhail 16.07 ── */
.mort-cta {
  padding-top: 80px; padding-bottom: 80px;
  border-top: none;
  background: var(--wp--preset--color--accent);
}
.mort-cta__h2 { margin-bottom: 24px; }
/* Colors matched to the sitewide .up-final-cta etalon (homepage) — Mikhail
   17.07: don't invent CTA colors, copy the reference exactly. Body text is
   full-opacity ink (not muted via .mort-body's default 0.7 alpha), button is
   bg-dark + white (not ink + cream). */
.mort-cta__body { max-width: 1050px; margin-bottom: 32px; color: var(--wp--preset--color--ink); }
.mort-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--wp--preset--color--bg-dark); color: #FFFFFF;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px; font-weight: 500;
  padding: 0 32px; height: 48px; min-width: 220px;
  border: none; border-radius: 999px; cursor: pointer; text-decoration: none;
}
.mort-btn:hover { background: #232b36; }

/* CTA now uses the sitewide LeadDialog (data-open-dialog) instead of a bespoke
   modal — see mortgage-body.html / calculators.js. */


/* NAV dark-override REMOVED 2026-06-07 — page is light, nav inherits global styles */
/* ── Mobile redesign (canon 2026-08-17) — real layout/spacing/touch-target
   decisions, not just a shrink. Two tiers: ≤960 (tablet-down, 24px rail),
   ≤480 (primary phone target, 20px rail + tighter vertical rhythm) — chosen
   so the mandatory 390/430/768 verification widths each land in the tier
   the design canon specifies (390→20px tier, 430 & 768→24px tier). ── */
/* 961-1439px tablet tier (25.08 sweep — Class B, missing-tablet-tier bug pattern per
   wiki/synthesis/2026-08-25_uaeprop_tablet_padding_bug_patterns.md): live-verified at
   1024px .mort-header was still 80px — the base rule's max(80px, calc(...)) formula is
   a floor, it never shrinks below 80px on its own, and this file's next tier was
   <=960px with nothing above it. 48px matches the sitewide tablet-padding canon.
   Side-padding only — desktop's vertical rhythm is not part of the confirmed bug here. */
@media (min-width:961px) and (max-width:1439px) {
  .mort-header, .mort-about, .mort-help-link, .mort-calc, .mort-amort,
  .mort-eligibility, .mort-faq, .mort-disclaimer, .mort-cta, .mort-section,
  .mort-page .t2-crumb {
    padding-left: 48px; padding-right: 48px;
  }
}
@media (max-width: 960px) {
  .mort-header, .mort-about, .mort-help-link, .mort-calc, .mort-amort,
  .mort-eligibility, .mort-faq, .mort-disclaimer, .mort-cta, .mort-section,
  .mort-page .t2-crumb {
    padding-left: 24px; padding-right: 24px;
  }

  /* Hero: desktop's 80px/80px reads as dead scroll on a small screen —
     compress so the H1 + sub land near the top of the fold. */
  .mort-header { padding-top: 48px; padding-bottom: 32px; }
  .mort-header__kicker { margin-bottom: 16px; }
  .mort-header__h1 { margin-bottom: 16px; }

  .mort-about { padding-bottom: 32px; }
  .mort-help-link { padding-bottom: 32px; }
  .mort-help-link__box {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  /* Broker-support link becomes a real tappable pill on mobile instead of
     an inline text link — matches the accent-pill CTA pattern used
     elsewhere on the page (.mort-btn / .up-mobile-menu__cta). */
  .mort-help-link__box a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 8px 18px;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--ink);
    border-radius: 999px; font-weight: 600;
  }
  .mort-help-link__box a:hover { text-decoration: none; background: #c07b48; }

  /* Calculator: already stacks input-panel-above-output (correct — output
     depends on input, keep that order) but compress panel/section padding
     and enlarge form controls for real touch use. */
  .mort-calc { padding-top: 48px; padding-bottom: 48px; }
  .mort-calc__panels { flex-direction: column; gap: 24px; }
  .mort-calc__inputs { flex: none; max-width: 100%; width: 100%; padding: 24px 20px; }
  /* 25.08 (Mikhail-reported, mobile): .mort-calc__panels' base align-items:
     flex-start (needed for the desktop 2-col row so neither panel stretches
     to match the other's height) means children shrink to content width
     once flex-direction switches to column here — .mort-calc__inputs already
     had its own width:100% above, .mort-calc__output (the dark MONTHLY
     card) didn't, so it rendered ~226px instead of full-width. */
  .mort-calc__output { padding: 24px 20px; flex: none; width: 100%; }
  .mort-monthly { margin-bottom: 24px; }
  .mort-field { margin-bottom: 24px; }
  .mort-field__input, .mort-field__select { height: 48px; font-size: 17px; }

  /* Stepper redesign — the desktop control is a 30px-wide box split into two
     ~19px-tall up/down buttons overlaid on the input (fails the 44×44
     touch-target rule badly). On mobile it becomes a real [-] [value] [+]
     row: unwrap the .mort-stepper grouping div with display:contents (JS
     binds by class/data-attribute via querySelectorAll, not DOM position —
     verified in calculators.js — so this is purely visual) and flex-order
     the decrement button before the input, increment after. */
  .mort-field__stepper-wrap { display: flex; align-items: stretch; gap: 8px; position: static; }
  .mort-field__input--stepped { flex: 1 1 auto; width: auto; padding-right: 12px; }
  .mort-stepper { display: contents; }
  .mort-stepper__btn {
    position: static; flex: none;
    width: 44px; height: 44px;
    border: 1px solid rgba(14,14,16,0.20) !important;
    border-radius: 8px; background: #F8F7F4;
  }
  .mort-stepper__btn--down { order: -1; }
  .mort-stepper__btn--up { order: 1; }
  .mort-stepper__icon { width: 10px; height: 7px; }

  /* Down-payment %/AED segmented toggle — 4px/11px padding is far under
     44px tall on desktop; give it a real tap height on mobile. */
  .mort-mode-toggle__btn {
    min-height: 44px; padding: 8px 16px; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* Amortization chart: it's a per-year bar chart, not a comparison table,
     so it keeps the horizontal-scroll pattern (each bar is chronological,
     not a row of independently-meaningful fields) rather than becoming
     stacked cards — but a silently-scrollable 700px-wide chart in a 390px
     viewport needs an explicit affordance per canon, not just hidden
     overflow. The visible text hint below (.mort-amort__scroll-hint,
     "Swipe to see the full loan term") already provides that affordance.
     25.08 (Mikhail-reported): a right-edge fade pseudo-element used to sit
     here too — `position:absolute` over the scrollable bars, so at every
     scroll position it washed out the last ~28px of whichever bar
     happened to be at the right edge, fading its real green/orange fill
     color toward the page's cream background. Present from page load
     (before any scroll) and pinned to the container edge rather than
     scrolling away, which is exactly what read as a persistent white/blur
     patch. Removed — the text hint alone is the affordance now. */
  .mort-amort { padding-top: 48px; padding-bottom: 48px; }
  .mort-amort__head { margin-bottom: 32px; }
  .mort-amort__scroll-hint { display: block; }

  .mort-eligibility { padding-top: 48px; padding-bottom: 48px; }
  .mort-elig-card { padding: 24px 20px; }

  .mort-faq { padding-top: 48px; padding-bottom: 48px; }
  .mort-faq__list { grid-template-columns: 1fr; }

  .mort-cta { padding-top: 48px; padding-bottom: 48px; }
}

/* Primary phone tier (390 is the design canon's main scrutiny width) —
   tighter rail + a touch more vertical compression than the 960px tier. */
@media (max-width: 480px) {
  .mort-header, .mort-about, .mort-help-link, .mort-calc, .mort-amort,
  .mort-eligibility, .mort-faq, .mort-disclaimer, .mort-cta, .mort-section,
  .mort-page .t2-crumb {
    padding-left: 20px; padding-right: 20px;
  }
  .mort-header { padding-top: 40px; padding-bottom: 28px; }
  .mort-calc { padding-top: 40px; padding-bottom: 40px; }
  .mort-amort { padding-top: 40px; padding-bottom: 40px; }
  .mort-eligibility { padding-top: 40px; padding-bottom: 40px; }
  .mort-faq { padding-top: 40px; padding-bottom: 40px; }
  .mort-cta { padding-top: 40px; padding-bottom: 40px; }
  /* AED figure can run to 6-7 digits — 56px floor risks overflowing the
     narrower ~310px-wide output card at this width; give it its own clamp. */
  .mort-monthly { font-size: clamp(40px, 12vw, 56px); }
}
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display:swap;
 }

/* ── Outer shell ── */

/* ── Logo (left) ── */

/* ── Nav wrapper — centered via flex grow trick ── */

/* ── Nav item gap: 28px between items (half each side = 14px) ── */

/* ── Top-level links / buttons ── */

/* chevron icon */

/* ── Dropdown panel ── */

/* ── Emirates flyout arrow ── */

/* ── Emirates sub-dropdown (flies right) ── */

/* ── Right side: lang switcher + CTA ── */

/* Language switcher */

/* CTA pill — edits4: enlarged to match removed float-btn (h:56px, 16px, 500) */

/* ── Mobile hamburger ── */

/* ── Mobile menu panel ── */

/* ── Responsive breakpoint ── */
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibm-plex-sans-500-latin.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display:swap;
 }
@font-face{ 
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  font-weight: 400 500; font-style: normal; font-display:swap;
 }

/* ── Top row: brand left + columns right ── */

/* ── Brand block (left ~44%) ── */

/* ── 5 columns (right ~56%) — Wave-G: right-align cols block to rail edge ── */
/* Wave-G: gap handles spacing, no margin-left needed */

/* ── Bottom bar ── */

/* Lang switcher in footer bottom bar */

/* ── Responsive ── */