/* ==========================================================================
   Per-country page — Hiring Cost Calculator (.rp-cp-calc)
   Slice 3 / Figma 617:15966. CC builds the markup + JS; Cowork owns this CSS.
   Scope: .rp-cp-calc and its BEM children:
     __inputs __field __label __salary __salary-input __currency __currency-select
     __toggle __toggle-btn(.is-active)
     __result __result-head __result-icon __result-title __result-sub
     __total __total-value __line __line-label __line-value
     __expand(.is-open) __expand-head __caret __breakdown __breakdown-list
       __breakdown-row __breakdown-label __breakdown-value __total-contrib
     __note __cta
   Period visibility is handled in JS via the `hidden` attribute on
   [data-period-show] / [data-period-text]; .rp-cp-calc[data-period] is available
   for any CSS-driven styling. Result card bg in Figma is #F0F4FE.
   ========================================================================== */

.rp-cp-calc { margin: 20px 0 32px; }

/* Stray country-code / currency data spans the JS reads — keep them out of view. */
.rp-cp-calc > span { display: none; }

/* ---- Inputs row ---- */
.rp-cp-calc__inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.rp-cp-calc__field { display: flex; flex-direction: column; gap: 8px; }
.rp-cp-calc__label { font-size: 14px; font-weight: 600; color: #021143; }
.rp-cp-calc__req { color: #114EF7; margin-inline-start: 2px; }

/* Salary input + currency select */
.rp-cp-calc__salary {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #E0E5F0;
  border-radius: 10px;
  overflow: hidden;
  background: #FFFFFF;
}
.rp-cp-calc__salary-input {
  border: 0;
  outline: 0;
  padding: 12px 14px;
  font-size: 16px;
  width: 210px;
  max-width: 100%;
  color: #021143;
  background: transparent;
}
.rp-cp-calc__currency {
  display: flex;
  align-items: center;
  border-inline-start: 1px solid #E0E5F0;
  background: #F7F9FF;
}
.rp-cp-calc__currency-select {
  border: 0;
  background: transparent;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: #021143;
  cursor: pointer;
}

/* Country select (standalone /cost-calculator only; the per-country calc has none) */
.rp-cp-calc__country {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #E0E5F0;
  border-radius: 10px;
  overflow: hidden;
  background: #FFFFFF;
}
.rp-cp-calc__country-select {
  border: 0;
  outline: 0;
  background: transparent;
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 500;
  color: #021143;
  cursor: pointer;
  width: 260px;
  max-width: 100%;
}

/* Error state (standalone calc): shown when the quote proxy fails */
.rp-cp-calc__error {
  margin: 14px 0 0;
  font-size: 14px;
  color: #B42318;
}

/* Monthly / Yearly toggle */
.rp-cp-calc__toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #EEF1FA;
  border-radius: 100px;
}
.rp-cp-calc__toggle-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 8px 22px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  color: #4C577A;
  transition: background .15s ease, color .15s ease;
}
.rp-cp-calc__toggle-btn.is-active { background: #114EF7; color: #FFFFFF; }

/* ---- Result card ---- */
.rp-cp-calc__result {
  background: #F0F4FE;
  border-radius: 16px;
  padding: 26px 28px;
}
.rp-cp-calc__result-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.rp-cp-calc__result-icon { display: inline-flex; color: #114EF7; }
.rp-cp-calc__result-icon svg { width: 22px; height: 22px; }
.rp-cp-calc__result-title { font-size: 17px; font-weight: 700; color: #114EF7; }
.rp-cp-calc__result-sub { margin: 0 0 16px; font-size: 14px; color: #6B7280; }

.rp-cp-calc__total { margin-bottom: 16px; }
.rp-cp-calc__total-value { font-size: 30px; font-weight: 700; color: #021143; }

.rp-cp-calc__line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #DCE3F4;
  font-size: 14px;
}
.rp-cp-calc__line-label { color: #6B7280; }
.rp-cp-calc__line-value { color: #021143; font-weight: 600; }

/* Expandable taxes & contributions */
.rp-cp-calc__expand { border-top: 1px solid #DCE3F4; }
.rp-cp-calc__expand-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 14px;
}
.rp-cp-calc__expand-head .rp-cp-calc__line-value { margin-inline-start: auto; }
.rp-cp-calc__caret {
  width: 16px;
  height: 16px;
  color: #6B7280;
  transition: transform .2s ease;
}
.rp-cp-calc__expand.is-open .rp-cp-calc__caret { transform: rotate(180deg); }
.rp-cp-calc__breakdown { padding: 2px 0 10px; }
.rp-cp-calc__breakdown-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
}
.rp-cp-calc__breakdown-label { color: #6B7280; }
.rp-cp-calc__breakdown-value { color: #021143; }
.rp-cp-calc__total-contrib {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #DCE3F4;
  font-size: 14px;
  font-weight: 700;
  color: #021143;
}
.rp-cp-calc__note { margin-top: 12px; font-size: 12px; color: #8388A1; }
.rp-cp-calc__cta {
  display: inline-block;
  margin-top: 16px;
  background: #114EF7;
  color: #FFFFFF;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 100px;
  text-decoration: none;
}
.rp-cp-calc__cta:hover { background: #0E45D6; }

@media (max-width: 700px) {
  .rp-cp-calc__inputs { flex-direction: column; align-items: stretch; }
  .rp-cp-calc__salary, .rp-cp-calc__salary-input { width: 100%; }
  .rp-cp-calc__country, .rp-cp-calc__country-select { width: 100%; }
  .rp-cp-calc__toggle { align-self: flex-start; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   Figma build 2026-07-21 — hero (frame 1743:22006) + results (frame 2119:76703).
   New class families rp-cch (hero) / rp-ccr (results); the rp-cp-calc__* rules
   above are DORMANT (v1 UI removed from the shortcode).
   ══════════════════════════════════════════════════════════════════════════════ */
.rp-cch {
  background: linear-gradient(180deg, #FFFFFF 0%, #E9EFFF 100%);
  border-radius: 0 0 40px 40px;
  padding: 72px 20px 56px;
  text-align: center;
}
.rp-cch__inner { max-width: 1140px; margin: 0 auto; }
.rp-cch__eyebrow {
  color: #114EF7; font-size: 13px; line-height: 18px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; margin: 0 0 12px;
}
.rp-cch__title {
  color: #15113B; font-size: 52px; line-height: 64px; font-weight: 700; margin: 0 0 16px;
}
.rp-cch__title-accent { color: #114EF7; }
.rp-cch__sub {
  color: #3F4765; font-size: 16px; line-height: 24px; max-width: 910px; margin: 0 auto 40px;
}
.rp-cch__card {
  background: #fff; border-radius: 20px; box-shadow: 0 24px 64px rgba(2, 17, 67, 0.10);
  max-width: 748px; margin: 0 auto 40px; padding: 35px; text-align: left;
}
.rp-cch__card-eyebrow {
  color: #8A91A8; font-size: 12px; line-height: 16px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; margin: 0 0 20px;
}
.rp-cch__label { color: #15113B; font-size: 18px; line-height: 25px; font-weight: 700; margin: 0 0 12px; }
.rp-cch__row { display: flex; gap: 20px; margin-bottom: 24px; }
.rp-cch__field {
  position: relative; display: flex; align-items: center;
  border: 1px solid #D9DEEC; border-radius: 10px; background: #fff; min-height: 56px;
}
.rp-cch__field--country { flex: 1 1 100%; }
.rp-cch__field--currency { flex: 0 0 232px; }
.rp-cch__field--salary { flex: 1 1 auto; }
.rp-cch__field select,
.rp-cch__field input {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  width: 100%; padding: 14px 40px 14px 16px; font-size: 16px; color: #15113B; outline: none;
}
.rp-cch__field input { padding-right: 16px; }
.rp-cch__field input.is-invalid { box-shadow: inset 0 0 0 1px #E5484D; border-radius: 10px; }
.rp-cch__field .rp-cp-calc__caret {
  position: absolute; right: 14px; pointer-events: none; color: #5A6079;
}
.rp-cch__btn {
  display: block; margin: 8px auto 12px; min-width: 348px; min-height: 50px;
  background: #114EF7; color: #fff; border: 0; border-radius: 10px;
  font-size: 16px; font-weight: 700; padding: 13px 32px; cursor: pointer;
  transition: background 0.15s ease;
}
.rp-cch__btn:hover { background: #0B3AC0; }
.rp-cch__btn:disabled { opacity: 0.6; cursor: default; }
.rp-cch__fine { color: #8A91A8; font-size: 13px; text-align: center; margin: 0; }
.rp-cch__error { color: #E5484D; font-size: 14px; text-align: center; margin: 12px 0 0; }
.rp-cch__badges { display: flex; justify-content: center; align-items: flex-end; gap: 18px; }
.rp-cch__badges img { width: 62px; height: auto; }
.rp-cch__badges img:nth-child(3) { width: auto; height: 84px; } /* center Leader taller, per frame */

/* <button> resets font-family to a UA system font (Arial), so the calc's buttons lost
   the site's Mulish. Force inherit on every CTA this page introduces. 2026-07-23. */
.rp-cch__btn, .rp-ccr__toggle-btn, .rp-ccr__gate-btn, .rp-ccr__share-form button,
.rp-ccr__btn-primary, .rp-ccr__btn-outline, .rp-ccm-cta__btn { font-family: inherit; }

/* ── Results (navy COST BREAKDOWN band) ── */
.rp-ccr { background: #061235; padding: 72px 20px 80px; }
.rp-ccr__inner { max-width: 1140px; margin: 0 auto; }
.rp-ccr__head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; gap: 16px; }
.rp-ccr__eyebrow {
  color: #F8C94A; font-size: 13px; line-height: 18px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; margin: 0 0 8px;
}
.rp-ccr__title { color: #fff; font-size: 40px; line-height: 48px; font-weight: 700; margin: 0; }
.rp-ccr__toggle { background: #fff; border-radius: 10px; padding: 4px; display: inline-flex; }
.rp-ccr__toggle-btn {
  border: 0; background: transparent; color: #5A6079; font-size: 14px; font-weight: 600;
  padding: 8px 20px; border-radius: 8px; cursor: pointer;
}
.rp-ccr__toggle-btn.is-active { background: #EDF1FB; color: #15113B; box-shadow: 0 1px 3px rgba(2,17,67,0.15); }
.rp-ccr__card { background: #fff; border-radius: 16px; overflow: hidden; }
.rp-ccr__card-head {
  display: flex; justify-content: space-between; align-items: center;
  background: #E8EEFE; padding: 18px 28px;
}
.rp-ccr__card-head-label {
  color: #3F4765; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
}
.rp-ccr__country { color: #15113B; font-size: 16px; font-weight: 700; }
.rp-ccr__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px; border-bottom: 1px solid #EDF0F7;
}
.rp-ccr__row-label { color: #15113B; font-size: 16px; font-weight: 600; }
.rp-ccr__row-value { color: #15113B; font-size: 16px; font-weight: 700; }
.rp-ccr__row--item { padding-left: 56px; }
.rp-ccr__row--item .rp-ccr__row-label { font-weight: 400; color: #3F4765; }
.rp-ccr__row--item .rp-ccr__row-value { font-weight: 600; }
.rp-ccr__group-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid #EDF0F7;
  padding: 18px 28px; cursor: pointer; color: #15113B; font-size: 16px; font-weight: 600;
  text-align: left;
}
.rp-ccr__group-head .rp-cp-calc__caret { transition: transform 0.15s ease; }
.rp-ccr__group-head.is-collapsed .rp-cp-calc__caret { transform: rotate(-90deg); }
.rp-ccr__total {
  display: flex; justify-content: space-between; align-items: center;
  background: #0B1E4B; color: #fff; padding: 20px 28px; font-size: 17px; font-weight: 700;
}
.rp-ccr__note {
  color: rgba(255, 255, 255, 0.65); font-size: 13px; line-height: 20px;
  margin: 20px 4px 0; max-width: 1100px;
}

@media (max-width: 767px) {
  .rp-cch { padding: 48px 16px 40px; border-radius: 0 0 24px 24px; }
  .rp-cch__title { font-size: 32px; line-height: 40px; }
  .rp-cch__card { padding: 24px 20px 20px; }
  .rp-cch__row { flex-wrap: wrap; }
  .rp-cch__field--currency { flex: 1 1 100%; }
  .rp-cch__btn { width: 100%; min-width: 0; }
  .rp-cch__badges { flex-wrap: wrap; gap: 10px; }
  .rp-ccr { padding: 48px 16px 56px; }
  .rp-ccr__head { flex-direction: column; align-items: flex-start; }
  .rp-ccr__title { font-size: 28px; line-height: 36px; }
  .rp-ccr__row, .rp-ccr__card-head, .rp-ccr__group-head, .rp-ccr__total { padding-left: 16px; padding-right: 16px; }
  .rp-ccr__row--item { padding-left: 32px; }
}

/* ── frame 1744:32494 corrections + bottom cards (2026-07-21) ── */
.rp-ccr__total { background: #114EF7; } /* frame: bright blue, not navy */
.rp-ccr__flag {
  width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
  margin-right: 10px; vertical-align: middle; display: inline-block;
}
.rp-ccr__country { display: inline-flex; align-items: center; }
.rp-ccr__group-head { justify-content: flex-start; }
.rp-ccr__group-head #rp-ccr-group-total { margin-left: auto; }
.rp-ccr__cards {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px;
}
.rp-ccr__cta-card { background: #DCE6FB; border-radius: 16px; padding: 32px 36px; }
.rp-ccr__share-card { background: #fff; border-radius: 16px; padding: 32px 36px; }
.rp-ccr__cta-title { color: #15113B; font-size: 22px; line-height: 30px; font-weight: 700; margin: 0 0 10px; }
.rp-ccr__cta-copy { color: #3F4765; font-size: 15px; line-height: 24px; margin: 0 0 20px; }
.rp-ccr__cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.rp-ccr__btn-primary {
  display: inline-block; background: #114EF7; color: #fff !important; border-radius: 8px;
  font-size: 15px; font-weight: 700; padding: 12px 22px; text-decoration: none;
}
.rp-ccr__btn-primary:hover { background: #0B3AC0; }
.rp-ccr__btn-outline {
  display: inline-block; background: transparent; color: #114EF7 !important;
  border: 1px solid #114EF7; border-radius: 8px; font-size: 15px; font-weight: 700;
  padding: 11px 22px; text-decoration: none;
}
.rp-ccr__share-form {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #D9DEEC; border-radius: 999px; padding: 6px 6px 6px 18px;
}
.rp-ccr__share-form input {
  border: 0; outline: none; flex: 1 1 auto; font-size: 15px; color: #15113B; background: transparent;
}
.rp-ccr__share-form button {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: #114EF7; color: #fff; border: 0; font-size: 18px; cursor: pointer;
}
@media (max-width: 767px) {
  .rp-ccr__cards { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .rp-ccr__cta-card, .rp-ccr__share-card { padding: 24px 20px; }
}

/* PDF "Download Report" button HIDDEN (2026-07-21, CC): the upstream
   prod-api .../export/pdf/ endpoint 302-redirects to app.remotepass.com and returns an
   HTML error page (not a PDF) for anonymous requests → the proxy correctly 502s, so the
   button would be dead. Hidden per Greg's "do not ship a dead button." Markup + proxy
   kept (ready for when the endpoint serves a real %PDF). ESCALATED to backend. */
.rp-ccr-download,
[class*="ccr"] a[href*="eor-quote-pdf"] { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════════
   §3–§7 /cost-calculator MARKETING sections (2026-07-21, frame 1743:22006).
   Page-scoped by the .rp-ccm block namespace (only this page emits it).
   ══════════════════════════════════════════════════════════════════════════════ */
.rp-ccm { width: 100%; padding: 72px 20px; }
.rp-ccm__container { max-width: 1180px; margin: 0 auto; }
.rp-ccm__container--narrow { max-width: 860px; }
.rp-ccm-blue { color: #114EF7; }

/* §3 One platform (frame 1743:22006 — real illustration panels) */
.rp-ccm-platform { background: #fff; text-align: center; }
/* §3/§4/§7 heading typography aligned to the donor rp-bc-hires__title/__sub COMPUTED
   values (measured on /remotepass-background-check): 40/48/700/-0.1px + sub 18/26/400.
   Colours differ per band (§3 dark, §4/§7 white via the overrides below). */
.rp-ccm-platform__h { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.1px; color: #021143; max-width: 780px; margin: 0 auto 16px; }
.rp-ccm-platform__sub { font-size: 18px; line-height: 26px; font-weight: 400; letter-spacing: -0.1px; color: #4A5878; max-width: 720px; margin: 0 auto 44px; }
.rp-ccm-platform__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; }
.rp-ccm-card { background: #fff; border: 1px solid #E6EAF4; border-radius: 12px; padding: 17px; }
/* The exported ccm-card*@2x.png IS the full 320×167 panel (tint #F0F4FE baked in, rounded
   white corners), so it renders full-width — no separate CSS panel bg. */
.rp-ccm-card__panel { border-radius: 12px; overflow: hidden; margin-bottom: 22px; }
.rp-ccm-card__panel img { display: block; width: 100%; height: auto; }
.rp-ccm-card__h { font-size: 20px; line-height: 23px; font-weight: 700; color: #061235; margin: 0 0 10px; }
.rp-ccm-card__p { font-size: 15px; line-height: 23px; color: #5A6079; margin: 0 0 6px; }

/* §4 What companies say (navy) — corrected copy + 64px avatars + big glyph */
.rp-ccm-quotes { background: #0A1E4A; text-align: center; }
.rp-ccm-quotes__h { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.1px; color: #fff; margin: 0 0 40px; }
/* qa-fixes' `.wp-block-group h2` (0,1,1) overrides the base margin to 16px; restore the
   frame's 40px heading→grid gap at (0,2,0). 2026-07-23. */
.rp-ccm-quotes .rp-ccm-quotes__h { margin-bottom: 40px; }
.rp-ccm-quotes__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; text-align: left; }
/* Card = frame node 1744:28540 (353.33×444): bg #FAFBFF, r16, pad 32/24; three stacked
   blocks (chip / glyph+quote / author) with the author pinned to the card bottom. */
.rp-ccm-quote { background: #FAFBFF; border-radius: 16px; padding: 32px 24px; margin: 0; display: flex; flex-direction: column; }
.rp-ccm-quote__chip { align-self: stretch; box-sizing: border-box; background: #E9F9EE; color: #007934; font-size: 13px; font-weight: 700; padding: 9px 8px; border-radius: 8px; line-height: 1.25; margin: 0 0 32px; }
.rp-ccm-quote__glyph { display: block; font-family: Georgia, 'Times New Roman', serif; font-size: 50px; line-height: 0.8; color: #0A1E4A; height: 34px; margin: 0; }
.rp-ccm-quote__text { font-size: 18px; line-height: 26px; color: #08080D; margin: 0; font-weight: 700; }
.rp-ccm-quote__by { display: flex; flex-direction: row; align-items: center; gap: 16px; margin-top: auto; padding-top: 32px; }
.rp-ccm-quote__avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 64px; }
.rp-ccm-quote__bytext { display: flex; flex-direction: column; gap: 4px; }
.rp-ccm-quote__name { font-size: 14px; font-weight: 700; color: #021143; }
.rp-ccm-quote__role { font-size: 13px; line-height: 16px; color: #67687F; opacity: 0.7; }

/* §5 Going deeper — reuses the rp-bc-hires component (donor CSS in background-check.css,
   enqueued on this page). These page-scoped overrides (cp-calc.css loads ONLY on
   /cost-calculator) rebuild the frame's icon tile and add the arrow link line — the donor
   page never sees them. Per frame nodes 1743:22224-22226 the exported SVG is a 27×27 GLYPH
   (no baked tile); the tile is a 48×48 #E4EBFE r12 container with the glyph centered. */
.rp-bc-hires .rp-bc-hires__card { display: flex; flex-direction: column; border-radius: 12px; text-decoration: none; }
.rp-bc-hires .rp-bc-hires__card:hover { text-decoration: none; }
.rp-bc-hires .rp-bc-hires__icon { width: 48px; height: 48px; background: #E4EBFE; border-radius: 12px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; }
.rp-bc-hires .rp-bc-hires__icon img { width: 27px; height: 27px; display: block; border-radius: 0; }
.rp-bc-hires .rp-bc-hires__card-link { margin-top: 14px; color: #114EF7; font-weight: 600; font-size: 14px; line-height: 20px; }

/* §7 Ready to make this hire? (blue CTA band — shapes composition + white button) */
.rp-ccm-cta { background: #fff; }
.rp-ccm-cta__band { position: relative; display: grid; grid-template-columns: 44% 56%; background: #114EF7; border-radius: 24px; overflow: hidden; min-height: 514px; }
.rp-ccm-cta__art { position: relative; }
.rp-ccm-cta__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.rp-ccm-cta__body { padding: 56px 60px; align-self: center; }
.rp-ccm-cta__h { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: -0.1px; color: #fff; margin: 0 0 16px; }
.rp-ccm-cta__p { font-size: 17px; line-height: 28px; color: rgba(255,255,255,.92); margin: 0 0 28px; max-width: 470px; }
.rp-ccm-cta__btns { display: flex; gap: 14px; flex-wrap: wrap; }
.rp-ccm-cta__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 26px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; }
.rp-ccm-cta__btn--primary { background: #fff; color: #0A1E4A; min-width: 255px; }
.rp-ccm-cta__btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.7); min-width: 193px; }

/* Mobile stacking */
@media (max-width: 900px) {
  .rp-ccm { padding: 52px 18px; }
  .rp-ccm-platform__grid, .rp-ccm-quotes__grid { grid-template-columns: 1fr; }
  .rp-ccm-platform__h, .rp-ccm-quotes__h, .rp-ccm-cta__h { font-size: 30px; line-height: 38px; }
  .rp-ccm-cta__band { grid-template-columns: 1fr; min-height: 0; }
  /* frame 2012:5341: media BANDED above the text, contained to a ~square so the shapes show
     whole (cover into 260px was a stretched thin slice); overflow-hidden clips the bleed. */
  .rp-ccm-cta__art { min-height: 0; aspect-ratio: 1 / 1; overflow: hidden; }
  .rp-ccm-cta__art img { object-position: center; }
  .rp-ccm-cta__body { padding: 32px 24px; }
  /* two CTAs stack full-width per the mobile frame */
  .rp-ccm-cta__btns { flex-direction: column; }
  .rp-ccm-cta__btn { width: 100%; min-width: 0; flex: 0 0 auto; }
}

/* ── Cowork pixel-pass fixes 2026-07-21 (CC's DOM pass couldn't see these) ──
   §4 + §7 headings/copy rendered DARK on dark bands — a global heading color
   rule out-specifies the section classes; repeat-class + !important wins. */
.rp-ccm-quotes h2.rp-ccm-quotes__h.rp-ccm-quotes__h { color: #fff !important; }
.rp-ccm-cta h2.rp-ccm-cta__h.rp-ccm-cta__h { color: #fff !important; }
.rp-ccm-cta p.rp-ccm-cta__p.rp-ccm-cta__p { color: rgba(255, 255, 255, 0.92) !important; }

/* ── RTL mirror for the AR cost calculator (2026-07-21) ── */
[dir="rtl"] .rp-cch__card { text-align: right; }
[dir="rtl"] .rp-cch__field select,
[dir="rtl"] .rp-cch__field input { padding: 14px 16px 14px 40px; }
[dir="rtl"] .rp-cch__field .rp-cp-calc__caret { right: auto; left: 14px; }
[dir="rtl"] .rp-ccr__flag { margin-right: 0; margin-left: 10px; }
[dir="rtl"] .rp-ccr__group-head { text-align: right; }
[dir="rtl"] .rp-ccr__group-head #rp-ccr-group-total { margin-left: 0; margin-right: auto; }
[dir="rtl"] .rp-ccr__row--item { padding-left: 28px; padding-right: 56px; }
[dir="rtl"] .rp-ccr__share-form { padding: 6px 18px 6px 6px; }
[dir="rtl"] .rp-ccr__share-form button { transform: scaleX(-1); }
/* §3–§7 marketing RTL (avatars/arrows flip automatically via flex + dir; these pin text edges) */
[dir="rtl"] .rp-ccm-platform__grid,
[dir="rtl"] .rp-ccm-quotes__grid { text-align: right; }
[dir="rtl"] .rp-ccm-quote__chip { align-self: stretch; text-align: right; }
[dir="rtl"] .rp-ccm-quote__glyph { text-align: right; }
[dir="rtl"] .rp-ccm-quote__bytext { text-align: right; }
[dir="rtl"] .rp-bc-hires .rp-bc-hires__card-link { text-align: right; }
[dir="rtl"] .rp-ccm-cta__p { max-width: 470px; }
@media (max-width: 767px) {
  [dir="rtl"] .rp-ccr__row--item { padding-right: 32px; padding-left: 16px; }
}

/* The page template wraps everything in main.wp-block-group, and qa-fixes-pages sets
   `.wp-block-group h2 { 1.75rem }` (0,1,1) — which out-specifies our (0,1,0) section-heading
   rules AND the reused rp-bc component titles (40/48 on the donor, where no wp-block-group
   wraps them), collapsing every §3–§7 heading to 28px. Restore the intended sizes at (0,2,0).
   (2026-07-21, component-reuse refactor.) */
.rp-ccm-platform .rp-ccm-platform__h,
.rp-ccm-quotes .rp-ccm-quotes__h,
.rp-ccm-cta .rp-ccm-cta__h,
.rp-bc-hires .rp-bc-hires__title,
.rp-bc-faq .rp-bc-faq__title { font-size: 40px; line-height: 48px; }
@media (max-width: 900px) {
  .rp-ccm-platform .rp-ccm-platform__h,
  .rp-ccm-quotes .rp-ccm-quotes__h,
  .rp-ccm-cta .rp-ccm-cta__h,
  .rp-bc-hires .rp-bc-hires__title,
  .rp-bc-faq .rp-bc-faq__title { font-size: 30px; line-height: 38px; }
}

/* ── Lead gate (frame 1744:30796, 2026-07-21): values blur + unlock card until
     the form submits. Labels/structure stay readable; only VALUES blur. ── */
.rp-ccr__card { position: relative; }
.rp-ccr.is-locked .rp-ccr__row-value,
.rp-ccr.is-locked #rp-ccr-group-total,
.rp-ccr.is-locked #rp-ccr-total {
  /* frame 1744:30796: locked values read as clearly-present-but-illegible soft blobs
     (6px, not 7px which was near-invisible). Colours unchanged — dark #15113B on the
     white rows, white on the blue total band. 2026-07-23. */
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}
/* Give the locked card room so the (taller) unlock gate card never clips top/bottom on
   SHORT tables (e.g. UAE, 3 rows). Frame 1744:30796. 2026-07-23. */
.rp-ccr.is-locked .rp-ccr__card { min-height: 600px; }
.rp-ccr.is-locked .rp-ccr__cards { display: none; }
/* frame 1744:30796: the whole cost-division table behind the gate is DIMMED ~50% (not just
   value-blurred) so the unlock card pops; the gate card itself stays full opacity. 2026-07-23. */
.rp-ccr.is-locked .rp-ccr__card > *:not(.rp-ccr__gate) { opacity: 0.5; }
.rp-ccr__gate {
  position: absolute; inset: 0; z-index: 5;
  display: none; /* visibility driven by .is-locked, NOT the hidden attribute —
                    an author display rule overrides [hidden] (the bug Greg caught:
                    gate stayed visible after unlock while hidden=true) */
  /* frame 1744:30796: the unlock card sits over the TOP of the table, not vertically
     centered — centering clipped its title on short tables. 2026-07-23. */
  align-items: flex-start; justify-content: center;
  padding: 28px 24px 24px;
}
.rp-ccr.is-locked .rp-ccr__gate { display: flex; }
.rp-ccr__gate-card {
  background: #fff; border-radius: 16px; box-shadow: 0 24px 64px rgba(2, 17, 67, 0.22);
  width: 440px; max-width: 100%; padding: 28px 30px 20px; text-align: left;
}
[dir="rtl"] .rp-ccr__gate-card { text-align: right; }
.rp-ccr__gate-lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px; background: #E8EEFE; margin-bottom: 14px;
}
.rp-ccr__gate-title { color: #15113B; font-size: 22px; line-height: 30px; font-weight: 700; margin: 0 0 8px; }
.rp-ccr__gate-sub { color: #5A6079; font-size: 15px; line-height: 23px; margin: 0 0 18px; }
.rp-ccr__gate-field {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #D9DEEC; border-radius: 10px; padding: 0 14px; margin-bottom: 12px;
  background: #fff;
}
.rp-ccr__gate-field input {
  border: 0; outline: none; flex: 1 1 auto; font-size: 15px; color: #15113B;
  padding: 13px 0; background: transparent;
}
.rp-ccr__gate-field input.is-invalid { box-shadow: none; }
.rp-ccr__gate-field:has(input.is-invalid) { border-color: #E5484D; }
.rp-ccr__gate-btn {
  width: 100%; background: #114EF7; color: #fff; border: 0; border-radius: 8px;
  font-size: 16px; font-weight: 700; padding: 14px; cursor: pointer; margin-top: 4px;
}
.rp-ccr__gate-btn:hover { background: #0B3AC0; }
.rp-ccr__gate-fine { color: #98A2B3; font-size: 12px; text-align: center; margin: 12px 0 0; }
@media (max-width: 767px) {
  .rp-ccr__gate { padding-top: 24px; }
  .rp-ccr__gate-card { padding: 22px 18px 16px; }
  /* The gate card stacks taller on narrow widths (~613px); give the locked card
     enough room so its bottom disclaimer isn't clipped by the card's overflow:hidden. */
  .rp-ccr.is-locked .rp-ccr__card { min-height: 660px; }
}

/* ============================================================================
   §RESULTS TEXT COLOURS + ICONS — Mo QA 2026-07-28, frame 1744:32494
   ---------------------------------------------------------------------------
   ROOT CAUSE (found via CDP CSS.getMatchedStylesForNode, not guesswork): the
   results block renders inside an FSE `.wp-block-group`, and qa-fixes-pages.min.css
   carries `.wp-block-group h1,.wp-block-group h2` {color:#15113B} + `.wp-block-group p`
   {color:#4A5568;font-size:1.0625rem}. Those are specificity (0,1,1) and beat this
   component's single-class (0,1,0) rules, which is why the ORIGINAL rules below
   (already correct: white title, gold eyebrow) never rendered:
     · "Employment cost"  → #15113B navy on the #061235 navy band = INVISIBLE
     · "COST BREAKDOWN"   → #4A5568 grey instead of gold
     · disclaimer note    → #4A5568 grey, 17px instead of 13px
   FIX: re-scope under .rp-ccr → (0,2,0), which outranks (0,1,1). No !important
   needed. Do NOT collapse these back to single-class selectors.

   Colours re-measured off the 1:1 frame export (not eyeballed):
     eyebrow gold  #FFDE6F   (was #F8C94A — frame is truth)
     title         #FFFFFF
     note + icons  #8695AA   (disclaimer text peak == icon fill; one token)
   Icons exported from Figma: info 1744:32564 (18×18), share 1744:32585 (19×19)
   in a 34×34 #E4EBFE tile per node 1744:32584.
   ============================================================================ */
.rp-ccr .rp-ccr__eyebrow { color: #FFDE6F; font-size: 13px; line-height: 18px; }
.rp-ccr .rp-ccr__title   { color: #fff; font-size: 40px; line-height: 48px; }
.rp-ccr .rp-ccr__note {
  color: #8695AA; font-size: 13px; line-height: 20px;
  display: flex; align-items: flex-start; gap: 10px;
}
.rp-ccr .rp-ccr__note-icon { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.rp-ccr .rp-ccr__share-title { display: flex; align-items: center; gap: 10px; }
.rp-ccr .rp-ccr__share-icon {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px;
  background: #E4EBFE; display: inline-flex; align-items: center; justify-content: center;
}
.rp-ccr .rp-ccr__share-icon img { width: 19px; height: 19px; display: block; }
/* RTL: NO rule needed, and deliberately none here. The AR page serves
   <html dir="rtl">, so `direction:rtl` inherits into these flex rows and the main
   axis already starts on the RIGHT — the icon (first DOM child) leads correctly on
   its own. An earlier draft added `flex-direction: row-reverse` here, which
   DOUBLE-reverses and pushes the icon back to the LEFT. Don't re-add it. This
   matches the rest of §RTL below, which flips explicit properties (margin/padding/
   text-align) and never reverses flex. */
@media (max-width: 767px) {
  .rp-ccr .rp-ccr__title { font-size: 28px; line-height: 36px; }
}

/* Auto-scroll clearance (Cowork pixel pass 2026-07-28): cost-calculator.js does
   section.scrollIntoView({block:'start'}) after a calculation, which parks the
   "COST BREAKDOWN" eyebrow UNDER the sticky header — measured eyebrow top 12px vs
   header bottom 80px, so the gold eyebrow was hidden at the exact moment the user
   lands on their result. scroll-margin-top offsets every scroll-into-view/anchor
   jump by the header height + breathing room. No JS change needed. */
.rp-ccr { scroll-margin-top: 104px; }