/* /cost-calculator/uae — UAE gratuity & employee cost calculator (Mo 2026-10-12).
   Figma hX9SIfrIjOjYvFtmHBofSa 2935:4710. Markup parts/cost-calc-uae-body.html; scoped to .rpu.
   Content max 1200px; gutters 32 / 24 / 16. */
.rpu { --rpu-g: 32px; --rpu-navy: #021143; --rpu-blue: #114EF7; --rpu-text: #424652; font-family: Mulish, sans-serif; color: var(--rpu-navy); overflow-x: clip; }
@media screen and (max-width: 991px) { .rpu { --rpu-g: 24px; } }
@media screen and (max-width: 767px) { .rpu { --rpu-g: 16px; } }
.rpu *, .rpu *::before, .rpu *::after { box-sizing: border-box; }
:where(.rpu) p, :where(.rpu) h1, :where(.rpu) h2, :where(.rpu) h3, :where(.rpu) ul, :where(.rpu) figure, :where(.rpu) blockquote, :where(.rpu) fieldset { margin: 0; padding: 0; }
:where(.rpu) p { color: inherit; } /* :where() = 0 specificity, so every .rpu-* colour below wins */
:where(.rpu) h1, :where(.rpu) h2, :where(.rpu) h3 { font-family: Mulish, sans-serif; color: inherit; }
.rpu img { display: block; max-width: 100%; }
.rpu fieldset { border: 0; min-width: 0; }
.rpu-wrap { max-width: calc(1200px + 2 * var(--rpu-g)); margin: 0 auto; padding: 0 var(--rpu-g); }
.rpu-center { text-align: center; }
.rpu-blue { color: var(--rpu-blue); }
.rpu-gold { color: #FFDE6F; }
.rpu-h2 { font-size: 40px; line-height: 48px; font-weight: 700; color: #121212; }
.rpu-h2--navy { color: var(--rpu-navy); }
.rpu-h2--white { color: #fff; }
.rpu-lead { font-size: 19px; line-height: 28px; color: var(--rpu-text); }
.rpu-lead--white { color: #fff; }
.rpu-ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px; background: #E4EBFE; }
.rpu-ic--white { background: #fff; }
.rpu-ic img { width: 28px; height: 28px; }
.rpu-flag { display: inline-block; overflow: hidden; flex: 0 0 auto; }
.rpu-flag img { width: 100%; height: 100%; object-fit: cover; }
.rpu-flag--round { width: 32px; height: 32px; border-radius: 50%; }
.rpu-flag--pill { width: 36px; height: 24px; border-radius: 15px; }

/* ---------- §1 HERO + CALCULATOR ---------- */
.rpu-hero { background: linear-gradient(180deg, #fff 0%, #fff 30%, #E4EBFE 100%); border-radius: 0 0 40px 40px; padding: 48px 0 40px; text-align: center; margin-top: 16px; }
@media screen and (min-width: 1210px) { .rpu-hero { margin-top: -16px; } }
.rpu-eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--rpu-blue); }
.rpu-hero__h { margin-top: 8px !important; font-size: 53px; line-height: 64px; font-weight: 700; color: var(--rpu-navy); }
.rpu-hero__sub { margin: 16px auto 0 !important; max-width: 960px; font-size: 16px; line-height: 24px; color: #3F3F3F; }
.rpu-card { max-width: 940px; margin: 40px auto 0; background: #fff; border-radius: 24px; box-shadow: 0 24px 64px rgba(2, 17, 67, .12); overflow: hidden; text-align: left; }
.rpu-form { padding: 24px 56px; display: flex; flex-direction: column; gap: 14px; }
.rpu-card__brand { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.rpu-card__title { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--rpu-navy); }
.rpu-row { display: flex; gap: 14px; align-items: flex-start; }
.rpu-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rpu-field[hidden] { display: none; }
.rpu-field--salary { flex: 0 0 322px; }
.rpu-field--type { flex: 1 1 auto; }
.rpu-label { display: block; padding: 0; font-size: 14px; line-height: 22px; font-weight: 600; color: var(--rpu-navy); }
.rpu-input { position: relative; }
.rpu-input input { width: 100%; height: 56px; margin: 0; padding: 0 64px 0 17px; border: 1px solid #D0D1D4; border-radius: 8px; background: #fff; font: 700 20px/1 Mulish, sans-serif; color: var(--rpu-navy); box-shadow: none; -moz-appearance: textfield; }
.rpu-input input::-webkit-outer-spin-button, .rpu-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rpu-input input:focus { outline: none; border-color: var(--rpu-blue); box-shadow: 0 0 0 3px rgba(17, 78, 247, .15); }
.rpu-input__unit { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; line-height: 24px; font-weight: 700; color: #8695AA; pointer-events: none; }
.rpu-hint { font-size: 12px; line-height: 18px; color: #696969; }
.rpu-opts { display: flex; gap: 14px; }
.rpu-opts--loc { gap: 11px; }
.rpu-opt { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 12px; height: 56px; padding: 16px; margin: 0; border: 1px solid #E0E3EB; border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.rpu-opt--loc { gap: 8px; border-width: 1.2px; border-color: #EBEBEB; border-radius: 8px; }
.rpu-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rpu-opt img { width: 28px; height: 28px; flex: 0 0 28px; }
.rpu-opt__txt { flex: 1 1 auto; min-width: 0; font-size: 16px; line-height: 1.5; font-weight: 500; color: var(--rpu-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rpu-opt--loc .rpu-opt__txt { font-size: 14px; font-weight: 600; }
.rpu-opt__txt small { font-size: 12px; font-weight: 400; color: #939393; letter-spacing: .06px; }
.rpu-radio { display: none; flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; border: 6px solid var(--rpu-blue); background: #fff; }
.rpu-opt:has(input:checked) { border-color: var(--rpu-blue); background: #F0F4FE; }
.rpu-opt:has(input:checked) .rpu-radio { display: block; }
.rpu-opt:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(17, 78, 247, .25); }
.rpu-opt:hover { border-color: #91ADFB; }
.rpu-adv { border: 1px solid #EEEFF1; border-radius: 8px; }
.rpu-adv__sum { display: flex; align-items: center; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; font-size: 14px; line-height: 24px; font-weight: 600; color: var(--rpu-blue); }
.rpu-adv__sum::-webkit-details-marker { display: none; }
.rpu-adv__sum span { flex: 1 1 auto; }
.rpu-adv__caret { transition: transform .2s ease; }
.rpu-adv[open] .rpu-adv__caret { transform: rotate(180deg); }
.rpu-adv__body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 4px 14px 16px; }
.rpu-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px 26px; margin: 0; border: 0; border-radius: 4px; background: var(--rpu-blue); color: #fff; font: 700 16px/16px Mulish, sans-serif; cursor: pointer; transition: background-color .2s ease; }
.rpu-btn:hover, .rpu-btn:focus-visible { background: #0B3FD1; color: #fff; }
.rpu-btn img { width: 20px; height: 20px; }
.rpu-notes { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.rpu-note { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; line-height: 20px; color: #696969; text-align: center; }
.rpu-note img { flex: 0 0 auto; }
.rpu-res { background: #F0F4FE; padding: 32px 56px; display: flex; flex-direction: column; gap: 32px; }
.rpu-res__top { display: flex; gap: 24px; align-items: stretch; }
.rpu-res__main { flex: 1 1 auto; min-width: 0; }
.rpu-res__label { font-size: 16px; line-height: 24px; font-weight: 600; color: #545454; }
.rpu-res__total { margin-top: 10px !important; font-weight: 700; color: #000; }
.rpu-res__total [data-rpu-total] { font-size: 56px; line-height: 64px; }
.rpu-res__cur { font-size: 24px; line-height: 32px; margin-left: 2px; }
.rpu-bar { display: flex; gap: 2px; width: 331px; max-width: 100%; height: 10px; margin-top: 12px; border-radius: 999px; overflow: hidden; }
.rpu-bar__seg { display: block; height: 100%; transition: width .3s ease; }
.rpu-c-salary { background: #4A8BFF; }
.rpu-c-pension { background: #FFD52E; }
.rpu-c-eos { background: #75DE4A; }
.rpu-c-visa { background: #FF6B21; }
.rpu-res__pct { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 14px; border-radius: 16px; background: #fff; }
.rpu-res__pct-num { font-size: 32px; line-height: 40px; font-weight: 700; color: var(--rpu-navy); }
.rpu-res__pct-label { font-size: 14px; line-height: 22px; font-weight: 600; color: var(--rpu-navy); }
.rpu-lines { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.rpu-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0 9px; border-top: 1px solid #E2E2E2; font-size: 16px; line-height: 24px; color: var(--rpu-navy); }
.rpu-line[hidden] { display: none; }
.rpu-line:first-child { border-top: 0; padding-top: 9px; }
.rpu-line__k { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rpu-line__v { font-weight: 700; white-space: nowrap; }
.rpu-sw { flex: 0 0 16px; width: 16px; height: 16px; border-radius: 2px; }
.rpu-lines .rpu-c-salary { background: #7598FA; }
.rpu-lines .rpu-c-eos { background: #5F9876; }
.rpu-lines .rpu-c-visa { background: #FB5607; }
.rpu-line--total { margin-top: 2px; padding-top: 18px; border-top: 2px solid var(--rpu-navy); font-weight: 700; }
.rpu-insight { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border-radius: 14px; background: #fff; }
.rpu-insight__ic { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: var(--rpu-navy); display: flex; align-items: center; justify-content: center; }
.rpu-insight p { font-size: 12px; line-height: 1.35; color: var(--rpu-navy); }

/* ---------- §2 HOW EMPLOYER COSTS WORK ---------- */
.rpu-how { padding: 80px 0; }
.rpu-how__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.rpu-how__intro { display: flex; flex-direction: column; gap: 14px; padding-right: 24px; }
.rpu-tag { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 22px; font-weight: 700; color: var(--rpu-navy); }
.rpu-how__intro .rpu-lead { padding-top: 4px; }
.rpu-how__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rpu-hcard { display: flex; flex-direction: column; gap: 8px; padding: 29px; border: 1px solid #E2E2E2; border-radius: 12px; background: #fff; }
.rpu-hcard__top { display: flex; justify-content: space-between; align-items: flex-start; }
.rpu-hcard__n { font-size: 14px; line-height: 22px; font-weight: 700; color: #898C93; }
.rpu-hcard__h { padding-top: 12px !important; font-size: 20px; line-height: 28px; font-weight: 700; color: var(--rpu-navy); }
.rpu-hcard p { font-size: 16px; line-height: 24px; color: var(--rpu-text); }
.rpu-hcard--blue { background: var(--rpu-blue); border-color: var(--rpu-blue); color: #fff; }
.rpu-hcard--blue .rpu-hcard__n { color: #E4EBFE; }
.rpu-hcard--blue .rpu-hcard__h, .rpu-hcard--blue p { color: #fff; }

/* ---------- §3 JURISDICTIONS (navy) ---------- */
.rpu-juris { background: var(--rpu-navy); padding: 96px 0; }
.rpu-juris .rpu-h2 { font-size: 44px; line-height: 1.2; }
.rpu-juris .rpu-lead { max-width: 780px; margin: 16px auto 0 !important; font-size: 20px; line-height: 28px; }
.rpu-table-wrap { max-width: 1150px; margin: 32px auto 0; background: #fff; border-radius: 12px; overflow-x: auto; }
.rpu-table { width: 100%; min-width: 720px; margin: 0; border-collapse: collapse; text-align: left; }
.rpu-table th, .rpu-table td { padding: 20px; border: 0; border-top: 1px solid #EBEBEB; font-size: 15px; line-height: 24px; vertical-align: middle; background: transparent; }
.rpu-table thead th { border-top: 0; font-size: 16px; font-weight: 700; color: var(--rpu-navy); }
.rpu-table tbody th { font-weight: 600; color: var(--rpu-navy); }
.rpu-table td { color: var(--rpu-text); }
.rpu-foot-note { display: flex; align-items: center; gap: 10px; max-width: 1150px; margin: 20px auto 0 !important; font-size: 14px; line-height: 22px; color: #fff; }
.rpu-foot-note img { filter: brightness(0) invert(1); flex: 0 0 auto; }

/* ---------- §4 WORKED EXAMPLE ---------- */
.rpu-example { background: #F0F4FE; padding: 96px 0; }
.rpu-example .rpu-lead { margin-top: 16px !important; font-size: 20px; }
.rpu-example__grid { display: flex; gap: 48px; align-items: flex-start; margin-top: 48px; }
.rpu-xtable-wrap { flex: 0 0 693px; max-width: 100%; border: 1px solid #ADC2FC; border-radius: 12px; background: #fff; overflow: hidden; }
.rpu-xtable { width: 100%; margin: 0; border-collapse: collapse; }
.rpu-xtable th, .rpu-xtable td { padding: 16px 20px; border: 0; border-bottom: 1px solid #EEEFF1; font-size: 15px; line-height: 24px; background: transparent; text-align: center; }
.rpu-xtable th[scope="row"] { text-align: left; font-weight: 400; color: var(--rpu-text); }
.rpu-xtable td { width: 198px; font-weight: 600; color: var(--rpu-navy); }
.rpu-xtable thead th { padding: 20px; border-bottom-color: #EBEBEB; font-size: 16px; font-weight: 700; color: var(--rpu-navy); text-align: left; }
.rpu-xtable thead th + th { text-align: center; }
.rpu-xth { display: inline-flex; align-items: center; gap: 10px; }
.rpu-xtable td.rpu-dash { color: #8695AA; }
.rpu-xtable tfoot th, .rpu-xtable tfoot th[scope="row"], .rpu-xtable tfoot td { padding: 20px; border: 0; background: var(--rpu-navy); font-size: 16px; font-weight: 700; color: #fff; }
.rpu-xtable tfoot th[scope="row"] { text-align: left; }
.rpu-xtable tfoot td { color: #F3E09B; }
.rpu-xtable tbody tr:last-child th, .rpu-xtable tbody tr:last-child td { border-bottom: 0; }
.rpu-example__note { flex: 1 1 auto; min-width: 0; padding-left: 23px; border-left: 3px solid var(--rpu-blue); display: flex; flex-direction: column; gap: 16px; }
.rpu-example__h { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--rpu-navy); }
.rpu-example__note p { font-size: 14px; line-height: 22px; color: var(--rpu-text); }

/* ---------- §5 OTHER OBLIGATIONS ---------- */
.rpu-oblig { padding: 80px 0; }
.rpu-oblig .rpu-lead { margin-top: 16px !important; }
.rpu-oblig__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.rpu-ocard { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px; border: 1px solid #E4EBFE; border-radius: 12px; background: #fff; text-align: center; }
.rpu-ocard__h { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--rpu-navy); }
.rpu-ocard p { margin-top: -2px !important; font-size: 14px; line-height: 22px; color: var(--rpu-text); }

/* ---------- §6 BUILT FOR THE REGION (navy) ---------- */
.rpu-quotes { background: var(--rpu-navy); padding: 96px 0; }
.rpu-quotes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.rpu-quote { display: flex; flex-direction: column; gap: 18px; padding: 32px; border-radius: 12px; background: #fff; }
.rpu-quote--soft { background: #FAFBFF; border-radius: 16px; padding: 32px 24px; }
.rpu-quote--blue { background: var(--rpu-blue); color: #fff; }
.rpu-chip { display: block; padding: 9px 8px; border-radius: 8px; background: #E9F9EE; font-size: 13px; line-height: normal; font-weight: 700; color: #007934; }
.rpu-quote__glyph { width: 57px; height: 40px; }
.rpu-quote__text { flex: 1 1 auto; font-size: 18px; line-height: 26px; font-weight: 700; color: #08080D; border: 0; }
.rpu-quote__by { display: flex; align-items: center; gap: 12px; padding-top: 19px; border-top: 1px solid #EBEBEB; }
.rpu-quote__by--plain { border-top: 0; padding-top: 0; gap: 16px; }
.rpu-quote__by img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 64px; }
.rpu-quote__by > span:last-child { display: flex; flex-direction: column; font-size: 14px; line-height: 22px; color: #696969; }
.rpu-quote__by strong { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--rpu-navy); }
.rpu-quote__h { font-size: 20px; line-height: 28px; font-weight: 700; color: #fff; }
.rpu-quote__p { flex: 1 1 auto; font-size: 16px; line-height: 24px; color: #fff; }
.rpu-quote__by--blue { border-top-color: #fff; }
.rpu-quote__by--blue strong { color: #fff; }
.rpu-quote__by--blue > span:last-child { color: #E4EBFE; }
.rpu-rp-ic { display: flex; align-items: center; justify-content: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #fff; }
.rpu-rp-ic img { width: 14px; height: 14px; }

/* ---------- §7 CTA BAND ---------- */
.rpu-cta { padding: 80px 0; }
.rpu-cta__band { display: flex; align-items: center; gap: 32px; padding: 0 120px 0 0; border-radius: 56px; background: var(--rpu-blue); overflow: hidden; min-height: 514px; }
.rpu-cta__art { flex: 0 0 545px; align-self: stretch; display: flex; align-items: flex-end; }
.rpu-cta__art img { width: 545px; height: auto; }
.rpu-cta__body { flex: 1 1 auto; max-width: 478px; display: flex; flex-direction: column; gap: 16px; color: #fff; }
.rpu-cta__h { font-size: 40px; line-height: 48px; font-weight: 700; color: #fff; }
.rpu-cta__p { font-size: 20px; line-height: 28px; color: #fff; }
.rpu-cta__btns { display: flex; gap: 24px; margin-top: 16px; }
.rpu-cta__btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 16px 24px; border-radius: 4px; font-size: 14px; line-height: 22px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .2s ease; }
.rpu .rpu-cta__btn--white, .rpu .rpu-cta__btn--white:hover, .rpu .rpu-cta__btn--white:visited { flex: 0 0 255px; background: #fff; color: var(--rpu-navy); text-decoration: none; }
.rpu .rpu-cta__btn--white:hover { background: #E6ECFE; }
.rpu .rpu-cta__btn--ghost, .rpu .rpu-cta__btn--ghost:hover, .rpu .rpu-cta__btn--ghost:visited { flex: 0 0 193px; border: 1px solid #fff; color: #fff; text-decoration: none; }
.rpu .rpu-cta__btn--ghost:hover { background: rgba(255, 255, 255, .12); }

/* ---------- RESPONSIVE ---------- */
@media screen and (max-width: 1209px) {
  .rpu-cta__band { padding: 0 48px 0 0; }
  .rpu-cta__art { flex-basis: 420px; }
  .rpu-cta__art img { width: 420px; }
  .rpu-cta__btn--white, .rpu .rpu-cta__btn--white { flex-basis: auto; }
  .rpu .rpu-cta__btn--ghost { flex-basis: auto; }
  .rpu-example__grid { flex-direction: column; gap: 32px; }
  .rpu-xtable-wrap { flex: 0 0 auto; width: 100%; }
  .rpu-oblig__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media screen and (max-width: 991px) {
  .rpu-hero { padding: 40px 0 32px; border-radius: 0 0 32px 32px; }
  .rpu-hero__h { font-size: 40px; line-height: 48px; }
  .rpu-br { display: none; }
  .rpu-form { padding: 24px; }
  .rpu-res { padding: 24px; }
  .rpu-row { flex-direction: column; }
  .rpu-field--salary, .rpu-field--type { flex: 0 0 auto; width: 100%; }
  .rpu-opts--loc { display: grid; grid-template-columns: 1fr 1fr; }
  .rpu-how { padding: 56px 0; }
  .rpu-how__grid { grid-template-columns: 1fr; gap: 32px; }
  .rpu-how__intro { padding-right: 0; }
  .rpu-h2, .rpu-juris .rpu-h2 { font-size: 32px; line-height: 40px; }
  .rpu-lead, .rpu-juris .rpu-lead, .rpu-example .rpu-lead { font-size: 17px; line-height: 26px; }
  .rpu-juris, .rpu-example, .rpu-quotes { padding: 64px 0; }
  .rpu-oblig { padding: 56px 0; }
  .rpu-quotes__grid { grid-template-columns: 1fr; }
  .rpu-cta { padding: 56px 0; }
  .rpu-cta__band { flex-direction: column; align-items: stretch; padding: 0; gap: 0; border-radius: 32px; min-height: 0; }
  .rpu-cta__art { flex: 0 0 auto; justify-content: center; }
  .rpu-cta__art img { width: min(420px, 100%); }
  .rpu-cta__body { max-width: none; padding: 32px 24px 40px; }
  .rpu-cta__h { font-size: 32px; line-height: 40px; }
  .rpu-cta__p { font-size: 17px; line-height: 26px; }
}
@media screen and (max-width: 767px) {
  .rpu-hero__h { font-size: 32px; line-height: 40px; }
  .rpu-hero__sub { font-size: 15px; }
  .rpu-card { margin-top: 28px; border-radius: 20px; }
  .rpu-form, .rpu-res { padding: 20px 16px; }
  .rpu-card__brand { gap: 12px; margin-bottom: 8px; }
  .rpu-card__title { font-size: 17px; line-height: 24px; }
  .rpu-opts--type { flex-direction: column; gap: 10px; }
  .rpu-opt { flex: 0 0 auto; }
  .rpu-opts--loc { grid-template-columns: 1fr; gap: 10px; }
  .rpu-adv__body { grid-template-columns: 1fr; }
  .rpu-note { align-items: flex-start; text-align: left; justify-content: flex-start; }
  .rpu-res { gap: 24px; }
  .rpu-res__top { flex-direction: column; gap: 16px; }
  .rpu-res__total [data-rpu-total] { font-size: 44px; line-height: 52px; }
  .rpu-res__pct { flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 10px; }
  .rpu-res__pct-num { font-size: 26px; line-height: 32px; }
  .rpu-line { font-size: 15px; }
  .rpu-how__cards, .rpu-oblig__grid { grid-template-columns: 1fr; }
  .rpu-hcard { padding: 24px; }
  .rpu-xtable th, .rpu-xtable td, .rpu-xtable thead th, .rpu-xtable tfoot th, .rpu-xtable tfoot td { padding: 12px 10px; font-size: 13px; line-height: 20px; }
  .rpu-xtable td { width: auto; }
  .rpu-xth { flex-direction: column; gap: 4px; }
  .rpu-quote { padding: 24px; }
  .rpu-cta__btns { flex-direction: column; gap: 12px; }
  .rpu .rpu-cta__btn--white, .rpu .rpu-cta__btn--ghost { flex-basis: auto; width: 100%; }
}

/* ---------- Type scale aligned with /cost-calculator (Mo 2026-10-12) ----------
   Measured on /cost-calculator at 1440: eyebrow 17px/700 uppercase 2px tracking · H1 44px/1.3 ·
   intro + section leads 17px/1.75 · section H2 40/48 · form labels 17px/700 · CTA copy 17px/1.75,
   CTA buttons 15px · FAQ lead 17px/1.75 (500). */
.rpu-eyebrow { font-size: 17px; line-height: 1.75; }
.rpu-hero__h { font-size: 44px; line-height: 1.3; letter-spacing: -0.1px; }
.rpu-hero__sub, .rpu-lead, .rpu-juris .rpu-lead, .rpu-example .rpu-lead, .rpu-cta__p { font-size: 17px; line-height: 1.75; }
.rpu-juris .rpu-h2 { font-size: 40px; line-height: 48px; }
.rpu-label { font-size: 17px; line-height: 1.5; font-weight: 700; }
.rpu-hcard p, .rpu-quote__p { font-size: 16px; line-height: 1.6; }
.rpu .rpu-cta__btn { font-size: 15px; line-height: 18px; }
.rpu .rp-bc-faq__lead { font-size: 17px; line-height: 1.75; }
.rpu-label { line-height: 1.75; }
@media screen and (max-width: 991px) { /* /cost-calculator at 768–990: H1 32/1.3, H2 stays 40/48 */
  .rpu-hero__h { font-size: 32px; line-height: 1.3; }
  .rpu-h2, .rpu-juris .rpu-h2 { font-size: 40px; line-height: 48px; }
  .rpu-cta__h { font-size: 40px; line-height: 48px; }
}
@media screen and (max-width: 860px) { .rpu-cta__h { font-size: 30px; line-height: 38px; } }
@media screen and (max-width: 767px) { /* /cost-calculator at 390: eyebrow/labels/body 16px/1.75, H1 24/1.3, H2 28/36 */
  .rpu-eyebrow { font-size: 16px; }
  .rpu-hero__h { font-size: 24px; line-height: 1.3; }
  .rpu-hero__sub, .rpu-lead, .rpu-juris .rpu-lead, .rpu-example .rpu-lead, .rpu-cta__p, .rpu .rp-bc-faq__lead { font-size: 16px; line-height: 1.75; }
  .rpu-h2, .rpu-juris .rpu-h2 { font-size: 28px; line-height: 36px; }
  .rpu-cta__h { font-size: 30px; line-height: 38px; }
  .rpu-label { font-size: 16px; line-height: 1.75; }
}

/* ---------- Advanced panel, expanded state (Figma 2989:26556) ---------- */
.rpu-adv[open] { background: #F0F4FE; border-color: #F6F6F6; padding: 8px 0 16px; }
.rpu-adv__minus { display: none; flex: 0 0 auto !important; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--rpu-blue); padding: 0 4px; }
.rpu-adv[open] .rpu-adv__minus { display: inline; }
.rpu-adv[open] .rpu-adv__caret { display: none; }
.rpu-adv__body { gap: 16px; padding: 4px 14px 0; }
.rpu-adv__label { display: block; font-size: 14px; line-height: 22px; font-weight: 600; color: var(--rpu-navy); }
.rpu-adv__input { width: 100%; height: 44px; margin: 0; padding: 11px 14px; border: 1px solid #D0D1D4; border-radius: 8px; background: #fff; font: 400 16px/22px Mulish, sans-serif; color: var(--rpu-navy); box-shadow: none; -moz-appearance: textfield; }
.rpu-adv__input::-webkit-outer-spin-button, .rpu-adv__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rpu-adv__input:focus { outline: none; border-color: var(--rpu-blue); box-shadow: 0 0 0 3px rgba(17, 78, 247, .15); }
.rpu-adv__body .rpu-field { gap: 8px; }

/* Calculator card follows the Figma frame exactly (Mo 2026-10-12): field labels 14px/22 semibold,
   Advanced panel open by default. (Page-level type scale above still matches /cost-calculator.) */
.rpu-card .rpu-label { font-size: 14px; line-height: 22px; font-weight: 600; }
.rpu-input input { line-height: 54px; }

/* §2 "How employer costs work" — centred heading + lead over a single row of four cards
   (Mo 2026-10-12, replaces the left-intro / 2x2 layout). */
.rpu-how__grid { display: block; }
.rpu-how__intro { padding-right: 0; align-items: center; text-align: center; gap: 16px; }
.rpu-how__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 32px; align-items: stretch; }
.rpu-hcard { padding: 28px; }
@media screen and (max-width: 1209px) { .rpu-how__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 767px) { .rpu-how__cards { grid-template-columns: 1fr; } .rpu-hcard { padding: 24px; } }

/* Calculator field labels: same spacing under every label (Mo 2026-10-12). A <legend> is not a flex
   item of its <fieldset>, so the field's flex gap never applied to "Employee type" / "Where in the UAE?"
   and their tiles sat 8px higher than the salary input. Spacing now lives on the label itself. */
.rpu-form .rpu-field { gap: 0; }
.rpu-form .rpu-label, .rpu-form .rpu-adv__label { margin: 0 0 10px; padding: 0; float: none; width: 100%; }
.rpu-row { align-items: flex-start; }

/* Location tiles: icon is light blue when idle and turns brand blue when the tile is selected
   (Figma active state). Icons are inline SVG with fill="currentColor". */
.rpu-loc-ic { width: 28px; height: 28px; flex: 0 0 28px; color: #91ADFB; transition: color .15s ease; }
.rpu-opt--loc:hover .rpu-loc-ic { color: #7598FA; }
.rpu-opt--loc:has(input:checked) .rpu-loc-ic { color: var(--rpu-blue); }

/* Results panel is hidden until the first "Calculate cost of employment" click (Mo 2026-10-12). */
.rpu-res[hidden] { display: none !important; }
.rpu--calculated .rpu-res { animation: rpu-reveal .35s ease both; }
@keyframes rpu-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rpu--calculated .rpu-res { animation: none; } }

/* §2 cards: all white by default; the blue treatment is the HOVER state (Mo 2026-10-12). */
.rpu-hcard { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.rpu-hcard .rpu-ic { transition: background-color .2s ease; }
.rpu-hcard:hover { background: var(--rpu-blue); border-color: var(--rpu-blue); }
.rpu-hcard:hover .rpu-hcard__h, .rpu-hcard:hover p { color: #fff; }
.rpu-hcard:hover .rpu-hcard__n { color: #E4EBFE; }
.rpu-hcard:hover .rpu-ic { background: #fff; }
@media (prefers-reduced-motion: reduce) { .rpu-hcard, .rpu-hcard .rpu-ic { transition: none; } }

/* Jurisdiction info line: the DIFC / free-zone notes run to two lines — keep them readable and centred. */
.rpu-note[data-rpu-juris-note] { max-width: 760px; margin: 0 auto !important; align-items: flex-start; }
.rpu-note[data-rpu-juris-note] img { margin-top: 1px; }

/* §2 card icons: dark (inactive) → brand blue on card hover (Mo 2026-10-12). Inline SVG, currentColor. */
.rpu-hc-ic { width: 28px; height: 28px; color: #000; transition: color .2s ease; }
.rpu-hcard:hover .rpu-hc-ic { color: var(--rpu-blue); }

/* Advanced toggle: no focus outline on click, no text selection on double-click (Mo 2026-10-12). */
.rpu-adv, .rpu-adv__sum { outline: none; }
.rpu-adv__sum:focus, .rpu-adv__sum:focus-visible { outline: none; box-shadow: none; }
.rpu-adv__sum { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

/* Calculate button arrow points DOWN to the results (Figma rotates the arrow-circle icon 90°). */
.rpu-btn img { transform: rotate(90deg); }

/* §2 card hover — smoother motion (Mo 2026-10-12): one eased .35s transition for fill, border,
   text and icon together, plus a 4px lift and soft shadow, so the switch to blue reads as a glide. */
.rpu-hcard { transition: background-color .35s cubic-bezier(.4,0,.2,1), border-color .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1); will-change: transform; }
.rpu-hcard .rpu-hcard__h, .rpu-hcard p, .rpu-hcard .rpu-hcard__n, .rpu-hcard .rpu-hc-ic, .rpu-hcard .rpu-ic { transition: color .35s cubic-bezier(.4,0,.2,1), background-color .35s cubic-bezier(.4,0,.2,1); }
.rpu-hcard:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(17, 78, 247, .18); }
@media (prefers-reduced-motion: reduce) { .rpu-hcard, .rpu-hcard * { transition: none !important; } .rpu-hcard:hover { transform: none; } }

/* "RemotePass · MENA depth built in" pin: the avatar rule (.rpu-quote__by img = 64px round, cover)
   was also hitting this icon and blowing it up/cropping it. Keep it a 14px pin in the 40px circle. */
.rpu .rpu-quote__by .rpu-rp-ic img { width: 14px; height: 14px; flex: 0 0 auto; border-radius: 0; object-fit: contain; }

/* Hero supporting text toned down (Mo 2026-10-12) — H1 unchanged. Eyebrow 14px, intro 16px/1.6. */
.rpu-hero .rpu-eyebrow { font-size: 14px; line-height: 22px; letter-spacing: 2px; }
.rpu-hero .rpu-hero__sub { font-size: 16px; line-height: 1.6; }
@media screen and (max-width: 767px) {
  .rpu-hero .rpu-eyebrow { font-size: 12px; line-height: 18px; letter-spacing: 1.5px; }
  .rpu-hero .rpu-hero__sub { font-size: 15px; }
}

/* ---------- /cost-calculator/ksa variant (.rpu--ksa, Figma 2899:5944) ---------- */
.rpu--ksa .rpu-hero__h { max-width: 760px; margin-left: auto !important; margin-right: auto !important; }
.rpu--ksa .rpu-opts--type .rpu-opt__txt { white-space: nowrap; }
.rpu--ksa .rpu-adv__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.rpu--ksa .rpu-oblig__lead { max-width: 560px; margin-left: auto !important; margin-right: auto !important; }
.rpu--ksa .rpu-oblig .rpu-ic img { filter: none; }
.rpu-xth--muted { font-weight: 400 !important; font-size: 14px !important; color: #424652 !important; }
.rpu-xth__tile { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 22px; border-radius: 4px; background: #E4EBFE; }
.rpu-xrow { display: inline-flex; align-items: center; gap: 10px; }
.rpu-xrow img { flex: 0 0 auto; }
@media screen and (max-width: 767px) {
  .rpu--ksa .rpu-adv__body { grid-template-columns: 1fr; }
  .rpu--ksa .rpu-opts--type .rpu-opt__txt { white-space: normal; }
}
/* KSA employee-type tiles hold longer labels ("Non-Saudi (expat)"): size them to their text (Figma
   widths ~135 / 180 / 118) and give the salary field a little less, so nothing is clipped. */
.rpu--ksa .rpu-field--salary { flex: 0 0 262px; }
.rpu--ksa .rpu-opts--type { gap: 12px; }
.rpu--ksa .rpu-opts--type .rpu-opt { flex: 1 1 auto; padding: 16px 14px; gap: 10px; }
.rpu--ksa .rpu-opts--type .rpu-opt__txt { overflow: visible; text-overflow: clip; }
@media screen and (max-width: 991px) { .rpu--ksa .rpu-field--salary { flex: 0 0 auto; } }

/* 2026-10-14 (Mo): KSA "Home country" dropdown for GCC nationals — same look as the Advanced inputs. */
.rpu-field--gcc { max-width: 322px; }
.rpu-select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5' stroke='%23114EF7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center; }
@media (max-width: 991px) { .rpu-field--gcc { max-width: none; } }

/* ── Lead gate modal (Mo 2026-10-16) — same card as the /cost-calculator gate (cp-calc.css
   .rp-ccr__gate-card), shown as a modal. UAE now, KSA later (.rpu shared). ─────────────── */
html.rpu-gate-open { overflow: hidden; }
.rpu-gate[hidden] { display: none !important; }
.rpu-gate { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.rpu-gate__overlay { position: absolute; inset: 0; background: rgba(2, 17, 67, .55); }
.rpu-gate__card { position: relative; width: 440px; max-width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; background: #fff; border-radius: 16px; box-shadow: 0 24px 64px rgba(2, 17, 67, .22); padding: 28px 30px 20px; text-align: left; font-family: Mulish, sans-serif; }
.rpu-gate__close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #98A2B3; cursor: pointer; padding: 0; }
.rpu-gate__close:hover, .rpu-gate__close:focus-visible { background: #F0F4FE; color: #15113B; }
.rpu-gate__lock { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: #E8EEFE; margin-bottom: 14px; }
.rpu .rpu-gate__title { color: #15113B; font-size: 22px; line-height: 30px; font-weight: 700; margin: 0 0 8px; }
.rpu .rpu-gate__sub { color: #5A6079; font-size: 15px; line-height: 23px; margin: 0 0 18px; }
.rpu-gate__field { display: flex; align-items: center; gap: 10px; border: 1px solid #D9DEEC; border-radius: 10px; padding: 0 14px; margin: 0 0 12px; background: #fff; }
.rpu-gate__field svg { flex: 0 0 18px; }
.rpu-gate__field input { border: 0; outline: none; flex: 1 1 auto; min-width: 0; font: 400 15px/21px Mulish, sans-serif; color: #15113B; padding: 13px 0; background: transparent; box-shadow: none; }
.rpu-gate__field input::placeholder { color: #8A8FA3; }
.rpu-gate__field:focus-within { border-color: #114EF7; }
.rpu-gate__field:has(input.is-invalid) { border-color: #E5484D; }
.rpu .rpu-gate__field input.is-invalid { border: 0 !important; }
.rpu-gate__btn { width: 100%; background: #114EF7; color: #fff; border: 0; border-radius: 8px; font: 700 16px/22px Mulish, sans-serif; padding: 14px; cursor: pointer; margin-top: 4px; }
.rpu-gate__btn:hover, .rpu-gate__btn:focus-visible { background: #0B3AC0; }
.rpu-gate__btn:disabled { opacity: .6; cursor: progress; }
.rpu .rpu-gate__fine { color: #98A2B3; font-size: 12px; line-height: 18px; text-align: center; margin: 12px 0 0; }
.rpu input.is-invalid { border-color: #D92D20 !important; }
@media (max-width: 479px) {
  .rpu-gate__card { padding: 22px 18px 16px; }
}

/* ── AR twin (/ar/uae-employee-cost-calculator, .rpu--ar, Mo 2026-10-16) ─────────────────────
   Root carries dir="rtl". Only the physical left/right rules above need mirroring; flex/grid rows
   already follow the writing direction. Font stays as the EN component (Mulish/Almarai fallback
   comes from the global html[dir=rtl] rules). EN is untouched (every selector is .rpu--ar). */
.rpu--ar .rpu-card, .rpu--ar .rpu-table, .rpu--ar .rpu-gate__card { text-align: right; }
.rpu--ar .rpu-input input { padding: 0 17px 0 64px; direction: ltr; text-align: right; }
.rpu--ar .rpu-input__unit { right: auto; left: 16px; }
.rpu--ar .rpu-res__cur { margin-left: 0; margin-right: 6px; }
.rpu--ar .rpu-xtable th[scope="row"], .rpu--ar .rpu-xtable thead th, .rpu--ar .rpu-xtable tfoot th[scope="row"] { text-align: right; }
.rpu--ar .rpu-xtable thead th + th { text-align: center; }
.rpu--ar .rpu-example__note { padding-left: 0; border-left: 0; padding-right: 23px; border-right: 3px solid var(--rpu-blue); }
.rpu--ar .rpu-select { padding-right: 14px; padding-left: 40px; background-position: left 12px center; }
/* Almarai (AR font) has a deeper descent than Mulish: the 44px controls with 11px padding + 22px line-height
   clipped the bottom of Arabic text (Mo 2026-10-16). No vertical padding, text centred on the full line. */
.rpu--ar .rpu-adv__input, .rpu--ar .rpu-select { padding-top: 0; padding-bottom: 0; line-height: 42px; }
.rpu--ar .rpu-gate__close { right: auto; left: 12px; }
.rpu--ar .rpu-gate__field input[type="email"] { text-align: right; }
.rpu--ar .rpu-opt__txt { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.35; }
.rpu--ar .rpu-opt { height: auto; min-height: 56px; }
/* AR location tiles (Mo 2026-10-16): FIXED height so selecting one (radio dot appears) never changes the
   row height. Name 13px, the "(DIFC) – دبي" part on its own small line; all states fit inside 64px. */
.rpu--ar .rpu-opts--loc .rpu-opt { height: 64px; min-height: 0; padding: 6px 12px; gap: 8px; }
.rpu--ar .rpu-opts--loc .rpu-opt__txt { font-size: 13px; line-height: 1.3; white-space: normal; overflow: hidden; }
.rpu--ar .rpu-opts--loc .rpu-opt__txt small { display: block; font-size: 11px; line-height: 1.3; }
.rpu--ar .rpu-opts--loc .rpu-opt img, .rpu--ar .rpu-opts--loc .rpu-loc-ic { width: 24px; height: 24px; flex: 0 0 24px; }
@media screen and (max-width: 767px) { .rpu--ar .rpu-opts--loc .rpu-opt { height: 56px; } .rpu--ar .rpu-opts--loc .rpu-opt__txt { font-size: 14px; } .rpu--ar .rpu-opts--loc .rpu-opt__txt small { display: inline; } }
@media screen and (max-width: 767px) {
  .rpu--ar .rpu-note { text-align: right; }
}
/* AR employee-type tiles (Mo 2026-10-16): salary + type on ONE row like EN, NO truncation. Smaller
   font (13px) + tighter padding/gap so the labels fit; only the long GCC label may take 2 lines, still
   inside the 56px tile height (same as the salary input). Salary 262px (as KSA) for extra room. */
.rpu--ar .rpu-field--salary { flex: 0 0 262px; }
.rpu--ar .rpu-opts--type { gap: 10px; }
.rpu--ar .rpu-opts--type .rpu-opt { flex: 1 1 0; height: 56px; min-height: 0; padding: 6px 12px; gap: 8px; } /* equal widths (KSA EN sizes by content) */
.rpu--ar .rpu-opts--type .rpu-opt__txt { white-space: normal; overflow: visible; text-overflow: clip; font-size: 13px; line-height: 1.3; }
@media screen and (max-width: 991px) { .rpu--ar .rpu-field--salary { flex: 0 0 auto; } }
@media screen and (max-width: 767px) { .rpu--ar .rpu-opts--type .rpu-opt { flex: 0 0 auto; padding: 6px 16px; } .rpu--ar .rpu-opts--type .rpu-opt__txt { font-size: 16px; } }
/* CTA band: EN pads the right (art flush left). AR mirrors: padding on the left, art flush right and
   flipped so its shapes meet the band edge as in EN. */
.rpu--ar .rpu-cta__band { padding: 0 0 0 120px; }
.rpu--ar .rpu-cta__art img { transform: scaleX(-1); }
@media screen and (max-width: 1209px) { .rpu--ar .rpu-cta__band { padding: 0 0 0 48px; } }
@media screen and (max-width: 991px) { .rpu--ar .rpu-cta__band { padding: 0; } }
/* 2026-10-20 (ops): longer jurisdiction labels ("Free zone – Dubai (DIFC, DWTC…)") — two lines like the AR twin, the
   small hint on its own line, so nothing is cut off with an ellipsis. Mobile (1 column) keeps one line. */
.rpu-opts--loc .rpu-opt { height: 64px; min-height: 0; padding-top: 6px; padding-bottom: 6px; }
.rpu-opts--loc .rpu-opt__txt { white-space: normal; overflow: hidden; text-overflow: clip; line-height: 1.3; }
.rpu-opts--loc .rpu-opt__txt small { display: block; line-height: 1.3; }
@media screen and (max-width: 767px) { .rpu-opts--loc .rpu-opt { height: 56px; } .rpu-opts--loc .rpu-opt__txt small { display: inline; } }