/* -- 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-ROI Calculator — spec-faithful CSS
   Page bg: var(--wp--preset--color--bg-light) (bg-light) throughout
   Palette:
     bg-light   var(--wp--preset--color--bg-light)
     cream      var(--wp--preset--color--cream)
     ink        var(--wp--preset--color--ink)
     accent     var(--wp--preset--color--accent) (copper/orange)
     muted      rgba(14,14,16,0.55)
   Fonts: Fraunces · IBM Plex Sans · JetBrains Mono
─────────────────────────────────────────────────────────────────────────── */

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

body.page-template-page-roi {
  background: var(--wp--preset--color--bg-light);
  color: var(--wp--preset--color--ink);
}

.roi-page {
  background: var(--wp--preset--color--bg-light);
  font-family: 'IBM Plex Sans', sans-serif;
}

/* ── Typography ── */
.roi-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;
}
.roi-kicker--lg { font-size: 12px; } /* section kicker — Figma 12px */
.roi-kicker--card { font-size: 11px; font-weight: 500; letter-spacing: 0.073em; color: rgba(14,14,16,0.5); } /* card-interior 11px */
.roi-kicker--15 { font-size: 11px; font-weight: 400; letter-spacing: 0.046em; } /* disclaimer/methodology kicker → 11px */

.roi-h1 {
  font-family: 'Fraunces', serif;
  font-size: 56px;
  font-weight: 400; line-height: 1.08;
  color: var(--wp--preset--color--ink); margin: 0;
}
.roi-h2 {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 400; line-height: 1.2;
  color: var(--wp--preset--color--ink); margin: 0;
}
.roi-body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px; line-height: 1.65;
  color: rgba(14,14,16,0.75); margin: 0;
}

/* ── Rail: content max 1280px centred, full-bleed section bg ── */
.roi-section,
.roi-header,
.roi-about,
.roi-inputs-section,
.roi-outputs-section,
.roi-sens-section,
.roi-example-section,
.roi-method-section,
.roi-faq,
.roi-disclaimer-section,
.roi-cta,
.roi-page .t2-crumb {
  padding-left:  max(80px, calc((100vw - 1280px) / 2));
  padding-right: max(80px, calc((100vw - 1280px) / 2));
}

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

/* ── SECTION 8.5: FAQ (accordion — same details/summary pattern as
   FaqAccordion.astro sitewide, converted from a static 2-col grid 17.07) ── */
.roi-faq { padding-top: 80px; padding-bottom: 80px; }
.roi-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. */
.roi-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;
}
.roi-faq__list {
  list-style: none; padding: 0; margin: 0; max-width: 1280px;
  border-top: 1px solid rgba(14,14,16,0.12);
}
.roi-faq__item { border-bottom: 1px solid rgba(14,14,16,0.12); }
.roi-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;
}
.roi-faq__q::-webkit-details-marker { display: none; }
.roi-faq__q:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.roi-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;
}
.roi-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;
}
.roi-faq__item[open] .roi-faq__icon { transform: rotate(45deg); }
.roi-faq__a { font-family: 'IBM Plex Sans', sans-serif; font-size: 15px; line-height: 1.7; color: rgba(14,14,16,0.75); margin: 0; padding: 0 0 20px 0; }
@media (max-width: 768px) { .roi-faq__h2 { font-size: 40px; } .roi-faq__qt { font-size: 20px; } }

/* ── SECTION 10: Talk-to-someone CTA — orange backing per Mikhail 16.07,
   rebuilt on the mort-cta pattern (was a plain centered link, no card) ── */
.roi-cta {
  padding-top: 80px; padding-bottom: 80px;
  background: var(--wp--preset--color--accent);
}
.roi-cta__kicker { margin-bottom: 16px; color: rgba(14,14,16,0.6); }
.roi-cta__h2 { font-size: 36px; color: var(--wp--preset--color--ink); margin: 0 0 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), button is bg-dark + white (not ink + cream). */
.roi-cta__body { font-size: 16px; color: var(--wp--preset--color--ink); max-width: 1050px; margin: 0 0 32px; }
.roi-btn.roi-cta__btn { background: var(--wp--preset--color--bg-dark); color: #FFFFFF; }
/* 24.07: bumped specificity (.roi-btn.roi-cta__btn, was .roi-cta__btn alone) — the later,
   more generic .roi-btn rule below shared the same specificity and won on source order,
   silently reverting this button back to the base orange-on-orange (invisible against
   .roi-cta's own orange section background) despite this override being correct/intentional. */
.roi-btn.roi-cta__btn:hover { background: #232b36; }
.roi-cta__related { margin: 20px 0 0; }
.roi-cta__related a {
  font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; font-weight: 500;
  color: rgba(14,14,16,0.65); text-decoration: underline;
}
.roi-cta__related a:hover { color: var(--wp--preset--color--ink); }

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

/* ── Breadcrumb (reuse shared t2-crumb on light bg) ── */
.roi-page .t2-crumb { background: var(--wp--preset--color--bg-light); }

/* ── SECTION 3: Page header ── */
.roi-header {
  padding-top: 80px;
  padding-bottom: 80px;
}
.roi-header__kicker { margin-bottom: 32px; }
.roi-header__sub {
  max-width: 1280px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 18px; line-height: 1.55;
  color: rgba(14,14,16,0.7); margin: 24px 0 0;
}

/* ── SECTION 4: Inputs panel ── */
.roi-inputs-section { padding-top: 0; padding-bottom: 40px; }

.roi-inputs-card {
  background: #FFFFFF;
  border-radius: 16px;
  overflow: hidden;
  padding: 32px 40px 40px;
}
.roi-inputs-card__kicker { margin-bottom: 12px; }
.roi-inputs-card__example-label {
  font-family: 'Fraunces', serif;
  font-size: 28px; font-weight: 400;
  color: var(--wp--preset--color--ink); margin: 0 0 40px;
}

/* 3-column field grid — condensed vertical layout (was 2-col/5 rows) */
.roi-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px 32px;
}

.roi-field {}
.roi-field__label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px; color: rgba(14,14,16,0.7);
  font-weight: 500;
  display: block; margin-bottom: 8px;
}
.roi-field__assumption {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px; font-style: italic;
  color: rgba(14,14,16,0.45);
  display: block; margin-bottom: 4px;
}
.roi-field__input {
  width: 100%; height: 56px;
  padding: 0 16px;
  background: #F8F7F4;
  border: none;
  border-radius: 12px;
  font-family: 'Fraunces', serif;
  font-size: 22px; font-weight: 300; color: var(--wp--preset--color--ink);
  outline: none; appearance: none;
  -webkit-appearance: none;
}
.roi-field__input:focus { border-color: var(--wp--preset--color--accent); }

/* Property-price up/down stepper (±100,000) — same pattern as
   .mort-stepper on /mortgage/, unified per Mikhail 17.07. */
.roi-field__stepper-wrap { position: relative; }
.roi-field__input--stepped { padding-right: 52px; }
/* Suppress the browser's own native number-input spinner — we render our
   own custom up/down buttons instead, and the two together looked doubled. */
.roi-field__input--stepped::-webkit-outer-spin-button,
.roi-field__input--stepped::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.roi-field__input--stepped[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.roi-stepper {
  position: absolute; top: 1px; right: 1px; bottom: 1px;
  width: 42px; display: flex; flex-direction: column;
  border-left: 1px solid rgba(14,14,16,0.20);
  border-radius: 0 11px 11px 0; overflow: hidden;
}
.roi-stepper__btn {
  flex: 1; display: flex; align-items: center; justify-content: center;
  border: none; background: #F8F7F4; cursor: pointer; padding: 0;
  transition: background 0.15s;
}
.roi-stepper__btn--up { border-bottom: 1px solid rgba(14,14,16,0.15); }
.roi-stepper__btn:hover { background: var(--wp--preset--color--accent); }
.roi-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;
}
.roi-stepper__btn--up .roi-stepper__icon { transform: rotate(180deg); }
.roi-stepper__btn:hover .roi-stepper__icon { opacity: 1; filter: brightness(0) invert(1); }

.roi-inputs-card__btn-row { margin-top: 40px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.roi-inputs-card__pro-nudge { font-family: 'IBM Plex Sans', sans-serif; font-size: 14px; color: rgba(14,14,16,0.6); margin: 0; }
.roi-inputs-card__pro-nudge a { color: var(--wp--preset--color--accent); font-weight: 500; text-decoration: none; }
.roi-inputs-card__pro-nudge a:hover { text-decoration: underline; }
.roi-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wp--preset--color--accent); color: var(--wp--preset--color--ink);
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px; font-weight: 500;
  padding: 0 32px; height: 48px; min-width: 220px;
  border: none; cursor: pointer;
  border-radius: 999px; text-decoration: none;
  transition: background 0.15s;
}
.roi-btn:hover { background: #b8743e; }

/* ── SECTION 5: Outputs ── */
.roi-outputs-section { padding-top: 0; padding-bottom: 40px; }
.roi-outputs-section__kicker { margin-bottom: 48px; }

.roi-output-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px; /* T2 fix: Figma = 32px between KPI cards */
}
.roi-output-card {
  background: #FFFFFF;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  padding: 32px 24px 24px;
  min-height: 200px;
}
.roi-output-card__label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500; color: rgba(14,14,16,0.5);
  letter-spacing: 0.073em;
  display: block; margin-bottom: 24px;
  line-height: 1.4;
}
.roi-output-card__value {
  font-family: 'Fraunces', serif;
  font-size: 56px;
  font-weight: 300; line-height: 1;
  color: var(--wp--preset--color--ink);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  /* The sitewide `*{transition-duration:150ms}` reset (global.css) makes
     font-size changes animate — fitCardValue() (calculators.js) measures
     getBoundingClientRect() immediately after setting font-size, so it was
     reading a mid-transition, not-yet-settled width, giving inconsistent
     results across calls and letting the value overflow its card visually.
     Opting this element out of transitions makes JS-driven resizes apply
     instantly, so every measurement reflects the real final width. */
  transition: none;
}
.roi-output-card__value--accent { color: var(--wp--preset--color--accent); } /* Task3: brand copper (was #2E8C4D green, replaced per Mikhail) */
/* Total-return card holds a full AED amount — previously shrunk to 34px to
   avoid wrapping, which Mikhail rejected (16.07): keep the same 56px as the
   other 3 cards, and instead the JS formats the number compactly
   ("AED ~1.2M" via fmtMoneyCompact — see calculators.js) so it fits at
   full size; nowrap stays as a safety net. */
#roi-card-tr .roi-output-card__value { white-space: nowrap; }

/* ── SECTION 6: Sensitivity table ── */
.roi-sens-section { padding-top: 80px; padding-bottom: 80px; background: #FFFFFF; }
.roi-sens-section__kicker { margin-bottom: 12px; }
.roi-sens-section__h2 { margin: 0 0 40px; max-width: 1200px; }

.roi-sens-wrap { width: 100%; overflow-x: auto; }
/* Scroll-affordance hint — desktop table isn't scrollable, hint stays hidden;
   shown + styled only inside the ≤900px mobile block below. */
.roi-sens-hint { display: none; }

.roi-sens-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 700px;
  font-family: 'IBM Plex Sans', sans-serif;
}
.roi-sens-table th {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px; font-weight: 500;
  color: rgba(14,14,16,0.7);
  padding: 8px 12px;
  text-align: center;
}
.roi-sens-table th.roi-sens-col-label { text-align: left; }
.roi-sens-table td {
  padding: 4px 8px;
  text-align: center;
  vertical-align: middle;
}
.roi-sens-table td.roi-sens-row-label {
  font-size: 12px; color: rgba(14,14,16,0.7);
  text-align: left; padding-left: 0; white-space: nowrap;
}
.roi-sens-cell {
  display: flex; align-items: center; justify-content: center;
  height: 36px; border-radius: 4px;
  font-size: 14px; font-weight: 400;
  color: var(--wp--preset--color--ink);
  font-family: 'Fraunces', serif;
}

/* ── SECTION 7: Worked example ── */
.roi-example-section { padding-top: 80px; padding-bottom: 80px; }
.roi-example-section__kicker { margin-bottom: 12px; }
.roi-example-section__h2 { margin: 0 0 40px; max-width: 1120px; }

.roi-example-table { width: 100%; border-collapse: collapse; }
.roi-example-table tr {
  border-top: 1px solid rgba(14,14,16,0.10);
}
.roi-example-table tr:last-child { border-bottom: 1px solid rgba(14,14,16,0.10); }
.roi-example-table td {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px; line-height: 1.5;
  padding: 12px 0; color: rgba(14,14,16,0.75);
}
.roi-example-table td:first-child { padding-right: 20px; }
.roi-example-table td:last-child {
  text-align: right; white-space: nowrap;
  color: var(--wp--preset--color--ink);
}
.roi-example-table tr.roi-example--bold td {
  font-weight: 600; color: var(--wp--preset--color--ink);
}
.roi-example-table tr.roi-example--bold td:last-child { color: var(--wp--preset--color--ink); }

/* ── SECTION 8: Methodology ── */
/* padding-top restored to the sitewide 80px/80px canon 17.07 — the earlier
   padding-top:0 ("T6 fix: Figma = full-bleed white section") collapsed the
   gap to the previous white section down to 0, making the bordered card
   look like it starts flush against the table above it. */
.roi-method-section { padding-top: 80px; padding-bottom: 80px; background: #ffffff; }
.roi-method-card {
  background: #FFFFFF;
  border: 1px solid rgba(14,14,16,0.15);
  border-radius: 16px;
  overflow: hidden;
  padding: 32px;
}
.roi-method-card__kicker { margin-bottom: 16px; }
.roi-method-card__body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px; line-height: 1.55;
  color: rgba(14,14,16,0.85);
  max-width: 1216px; margin: 0;
}

/* ── SECTION 9: Disclaimer ── */
.roi-disclaimer-section { padding-top: 24px; padding-bottom: 24px; }
.roi-disclaimer-section__kicker { margin-bottom: 8px; }
.roi-disclaimer-section__body {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px; color: var(--wp--preset--color--ink);
  max-width: 1280px; margin: 0;
}

/* ── MOBILE DESIGN (real reflow, not just a shrink — per
   specs/MOBILE_DESIGN_CANON_20260817.md). Two tiers: ≤960px covers the
   tablet-down-to-large-phone reflow (fields go single column, vertical
   rhythm compresses, the stepper touch-target fix applies), ≤480px tightens
   side padding for the primary 390px target per the canon's spacing scale
   (24px at 481-960, 20px at 390). ── */
/* 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 .roi-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) {
  .roi-header,
  .roi-about,
  .roi-inputs-section,
  .roi-outputs-section,
  .roi-sens-section,
  .roi-example-section,
  .roi-method-section,
  .roi-faq,
  .roi-disclaimer-section,
  .roi-cta,
  .roi-section,
  .roi-page .t2-crumb {
    padding-left: 48px;
    padding-right: 48px;
  }
}
@media (max-width: 960px) {
  .roi-header,
  .roi-about,
  .roi-inputs-section,
  .roi-outputs-section,
  .roi-sens-section,
  .roi-example-section,
  .roi-method-section,
  .roi-faq,
  .roi-disclaimer-section,
  .roi-cta,
  .roi-section,
  .roi-page .t2-crumb {
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Vertical rhythm: desktop's 80px section padding is generous whitespace
     that reads as excessive empty scrolling on a narrow screen — compress
     to the canon's 48-64px band. */
  .roi-header,
  .roi-sens-section,
  .roi-example-section,
  .roi-method-section,
  .roi-faq,
  .roi-cta,
  .roi-section { padding-top: 56px; padding-bottom: 56px; }
  .roi-about { padding-bottom: 32px; }
  .roi-inputs-section,
  .roi-outputs-section { padding-bottom: 32px; }
  .roi-disclaimer-section { padding-top: 20px; padding-bottom: 20px; }

  /* ── Inputs card: the card's own 40px side padding compounded with the
     20px section padding above was leaving ~270px of usable width at
     390px (390 − 2×20 − 2×40) — cut the card's internal padding down so
     the field grid actually has room to breathe on a real phone. */
  .roi-inputs-card { padding: 24px 20px 28px; border-radius: 16px; }
  .roi-inputs-card__example-label { font-size: 24px; margin-bottom: 24px; }
  .roi-fields-grid { grid-template-columns: 1fr; gap: 16px; }

  /* ── Stepper touch targets — the documented WCAG gap. Desktop's stacked
     up/down pair measures 41×27-28px per button (verified live at 500px
     viewport, 09.08's partial fix only widened it to ~42px, height was
     never addressed). Real mobile redesign, not just "make it bigger in
     place": flip from a vertical pair overlaid on the input's right edge
     into a horizontal [－ input ＋] row — the standard mobile
     quantity-stepper pattern, and the only way to hit 44×44 without
     bloating the input's own height. `.roi-stepper`'s column wrapper is
     promoted to `display:contents` so its two buttons become direct flex
     children of the input row and can be pulled to opposite sides of the
     input via `order` — no HTML/JS changes needed, calculators.js binds
     the buttons by class + data-step-target, unaffected by the box
     generation change. */
  .roi-field__stepper-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .roi-field__input--stepped {
    padding-right: 16px; /* no longer reserving space for an overlaid stepper */
    order: 2;
    flex: 1;
    min-width: 0;
  }
  .roi-stepper {
    display: contents; /* un-groups the up/down pair so each can flank the input */
  }
  .roi-stepper__btn {
    position: static;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(14,14,16,0.16);
    border-radius: 12px;
    background: #F8F7F4;
  }
  .roi-stepper__btn--down { order: 1; } /* decrease, left of the input */
  .roi-stepper__btn--up { order: 3; border-bottom: none; } /* increase, right of the input */
  .roi-stepper__icon { width: 12px; height: 8px; }

  /* Recalculate CTA + pro-nudge: stack full-width, primary action first —
     the inline flex-wrap row on desktop was cramped and low-contrast at
     390px, and a full-width primary button is a more generous tap target
     for the page's key interaction. */
  .roi-inputs-card__btn-row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    margin-top: 32px;
  }
  #roi-calc-btn { width: 100%; height: 52px; }
  .roi-inputs-card__pro-nudge { text-align: center; }

  /* ── Output cards: 2-col stat grid already matches the canon's 16px
     mobile card-gap (untouched) — tighten the card's own padding/
     min-height so the 4 KPI cards don't waste vertical space at 390-430px.
     Value font-size is deliberately left alone: calculators.js's
     fitCardValue() hardcodes BASE_SIZE=56 and writes an inline
     font-size on #roi-out-tr on every recalc, which would silently
     clobber any CSS override here for that one card — not worth a JS
     change (calculators.js is shared with /mortgage/) for a value that
     already auto-shrinks to fit its card. */
  .roi-output-cards { grid-template-columns: 1fr 1fr; gap: 16px; }
  .roi-output-card { padding: 20px 16px 16px; min-height: 132px; }
  .roi-output-card__label { margin-bottom: 16px; }

  /* ── Sensitivity table: this one genuinely needs to preserve
     column-by-column comparison (5 appreciation scenarios side by side) —
     canon's option (b), horizontal scroll WITH a visible affordance, not
     a card-per-row rebuild that would lose the at-a-glance comparison.
     `.roi-sens-wrap` already has overflow-x:auto; add the edge-fade cue
     plus a short explicit hint (below) so the scrollability isn't silent. */
  .roi-sens-wrap {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }
  /* RTL: the table inherits the page's rtl direction and mirrors (column 1
     renders on the right), so the hidden overflow columns sit at the
     physical LEFT edge instead — same bug class found+fixed live on
     /ar/faq/'s TOC pills and /ar/mortgage/'s amort chart 18.08. Live-
     verified here too: scrollWidth 700 vs clientWidth 350 with
     scrollLeft reachable only via negative values (Chrome's RTL
     convention), confirming the hidden columns are on the left. */
  html[dir="rtl"] .roi-sens-wrap {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
  }
  .roi-sens-hint {
    display: block;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 12px; color: rgba(14,14,16,0.5);
    margin: 10px 0 0;
  }

  /* ── Worked-example table: long line-item labels (e.g. "Mortgage
     payments (25y, 4.5%, AED 1.480M loan)") were fighting a nowrap value
     column for the same ~340px row width on a real phone — break out of
     table layout and stack label above value per row instead of
     squeezing both onto one line. */
  .roi-example-table,
  .roi-example-table tbody { display: block; }
  .roi-example-table tr { display: flex; flex-direction: column; padding: 10px 0; }
  .roi-example-table td { padding: 0; }
  .roi-example-table td:first-child { padding-right: 0; padding-bottom: 3px; }
  .roi-example-table td:last-child { text-align: left; white-space: normal; }

  .roi-method-card { padding: 20px; }

  /* CTA: full-width button = an easier thumb-tap for the page's primary
     conversion action, matching the canon's "generous touch target"
     direction. */
  .roi-btn.roi-cta__btn { width: 100%; }
}

@media (max-width: 480px) {
  .roi-header,
  .roi-about,
  .roi-inputs-section,
  .roi-outputs-section,
  .roi-sens-section,
  .roi-example-section,
  .roi-method-section,
  .roi-faq,
  .roi-disclaimer-section,
  .roi-cta,
  .roi-section,
  .roi-page .t2-crumb {
    padding-left: 20px;
    padding-right: 20px;
  }
  .roi-inputs-card { padding: 20px 16px 24px; }
}

/* Output cards: 2x2 works fine down to ~430px (each cell has plenty of
   room for a short value like "14.3%"), but a real phone at 390px is
   tighter and the 4th card ("AED ~1.2M" total return) needs more width to
   stay comfortably nowrap without leaning entirely on the JS auto-shrink
   — single column below 540px, unchanged from the pre-existing behavior. */
@media (max-width: 540px) {
  .roi-output-cards { grid-template-columns: 1fr; }
}
@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 ── */