/* rp-howitworks — numbered steps. Scope: .rp-howitworks
   Structural layout by CC; Cowork refines to the CoR Figma (illustrations, spacing). */
/* Figma 16332:26762: 3 step cards 382x432, 24px gap. Each card = numbered badge
   (32x32 blue) + title + desc + a 382x212 decorative illustration banner below
   (greeting bubbles / chat). Illustrations are a CC asset lift (see cor-cc-illustrations.md). */
.rp-howitworks { padding: 80px 24px; }
.rp-hiw__heading {
  font-family: Mulish, -apple-system, sans-serif;
  font-size: 40px; line-height: 48px; font-weight: 700; color: #021143;
  text-align: center; max-width: 760px; margin: 0 auto 48px;
}
.rp-hiw__steps {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1200px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.rp-hiw__step {
  background: #fff; border: 1px solid #E3E8F1; border-radius: 16px; padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.rp-hiw__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: #114EF7; color: #fff; font-size: 16px; font-weight: 700; font-family: Mulish, sans-serif;
}
.rp-hiw__title {
  font-family: Mulish, sans-serif; font-size: 20px; line-height: 24px; font-weight: 700; color: #021143; margin: 0;
}
.rp-hiw__text {
  font-family: Mulish, sans-serif; font-size: 14px; line-height: 22px; font-weight: 400; color: #545454; margin: 0;
}
/* CC structural (Cowork refines): per-step decorative illustration banner at card bottom (382×212) */
.rp-hiw__illo { width: 100%; height: auto; display: block; border-radius: 12px; margin-top: auto; }
@media (max-width: 991px) { .rp-hiw__steps { grid-template-columns: 1fr; } .rp-hiw__heading { font-size: 28px; } }

/* CTA below the steps — Figma 16332:26762 "Book A 15-Min Demo →" (the logged
   "no CTA on How CoR works" issue). Centred blue button. */
.rp-howitworks__cta { display: flex; justify-content: center; margin-top: 48px; }
.rp-howitworks__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #114EF7; color: #fff; font-family: Mulish, sans-serif; font-size: 14px;
  line-height: 22px; font-weight: 700; padding: 17px 40px; border-radius: 8px; text-decoration: none;
}
.rp-howitworks__btn:hover { background: #0d3fd0; color: #fff; }
@media (max-width: 767px) { .rp-howitworks__cta { margin-top: 32px; } .rp-howitworks__btn { width: 100%; max-width: 320px; justify-content: center; } }

/* ============================================================
   --navy variant: navy media card + icon-rail step list.
   Figma frame 15924:18054 (Spend Cards "How it works"). This is a SECOND
   LAYOUT of the component (not a recolor of the CoR card-grid): white outer
   section, navy rounded card (radius 32) holding a 5-step icon-rail list on
   the left + a dashboard mockup on the right. It REUSES the component
   identity + the shared .rp-hiw__heading (overridden to white/left) but adds
   its own sub-elements (card, row, col-text, col-media, step, icon, steptext) so the
   base card-grid variant (.rp-hiw__steps grid / .rp-hiw__step cards) is left
   100% untouched. Per-frame exact dims live in the .rp-spend-howitworks scope
   below (same play as .rp-spend-avoid beside feature-split). RTL in -rtl.css.
   ============================================================ */
/* The section keeps the base .rp-howitworks padding of 80px 24px. At 1440 the 24px
   side padding plus the card auto-margins resolve to the Figma 120px horizontal inset
   (24 plus 96 equals 120); the 80px top/bottom gives page rhythm around the card (the
   Figma 497 frame is the card itself, so section padding is page integration). */
.rp-howitworks--navy .rp-hiw__card {
  width: min(1200px, calc(100% - 48px)); margin: 0 auto;
  background: #021143; border-radius: 32px; overflow: clip; padding: 48px;
}
.rp-howitworks--navy .rp-hiw__row { display: flex; align-items: center; gap: 48px; }
.rp-howitworks--navy .rp-hiw__col-text { flex: 1 1 auto; min-width: 0; }
.rp-howitworks--navy .rp-hiw__col-media { flex: 0 0 auto; }
.rp-howitworks--navy .rp-hiw__media { display: block; max-width: 100%; height: auto; }
/* heading — modifier override of the shared .rp-hiw__heading (white, left) */
.rp-howitworks--navy .rp-hiw__heading { color: #fff; text-align: left; max-width: none; margin: 0 0 24px; }
/* step list — vertical, with an icon rail + connector line */
.rp-howitworks--navy .rp-hiw__steps {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: flex; flex-direction: column; gap: 16px; position: relative;
}
.rp-howitworks--navy .rp-hiw__step {
  display: flex; flex-direction: row; align-items: center; gap: 16px;
  background: none; border: 0; border-radius: 0; padding: 0;
}
.rp-howitworks--navy .rp-hiw__steptext { flex: 1 1 auto; min-width: 0; }
.rp-howitworks--navy .rp-hiw__icon {
  position: relative; z-index: 1; flex: 0 0 40px; width: 40px; height: 40px;
  border-radius: 50%; background: #F0F4FE;
  display: inline-flex; align-items: center; justify-content: center;
}
.rp-howitworks--navy .rp-hiw__icon img { width: 24px; height: 24px; display: block; }
.rp-howitworks--navy .rp-hiw__steptext {
  font-family: Mulish, sans-serif; font-size: 20px; line-height: 28px; font-weight: 400;
  color: #fff; margin: 0; padding: 6px 0;
}
/* vertical connector line behind the icon rail (Figma "Line 29", #F0F4FE) —
   centred on the 40px icon column (x=20), 3px wide, spanning icon-centre→icon-centre */
.rp-howitworks--navy .rp-hiw__steps::before {
  content: ""; position: absolute; left: 18.5px; top: 20px; bottom: 20px;
  width: 3px; background: #F0F4FE; z-index: 0;
}
@media (max-width: 991px) {
  .rp-howitworks--navy .rp-hiw__row { flex-direction: column; align-items: stretch; gap: 32px; }
  .rp-howitworks--navy .rp-hiw__col-media { flex: 1 1 auto; }
  .rp-howitworks--navy .rp-hiw__media { width: 100%; margin: 0 auto; }
  .rp-howitworks--navy .rp-hiw__card { padding: 32px 24px; }
}

/* Spend frame scope (Figma 15924:18054) — exact metrics for /spend/:
   text col 478 / media col 489, row gap 80, card padding 48/76.5, media 489×401.
   Section scope (reusable shape lives in --navy above), NOT a page fork. */
.rp-spend-howitworks.rp-howitworks--navy .rp-hiw__card { padding: 48px 76.5px; }
.rp-spend-howitworks .rp-hiw__row { gap: 80px; }
.rp-spend-howitworks .rp-hiw__col-text { flex: 0 0 478px; max-width: 478px; }
.rp-spend-howitworks .rp-hiw__col-media { flex: 0 0 489px; }
.rp-spend-howitworks .rp-hiw__media { width: 489px; }
@media (max-width: 991px) {
  .rp-spend-howitworks.rp-howitworks--navy .rp-hiw__card { padding: 32px 24px; }
  .rp-spend-howitworks .rp-hiw__row { gap: 32px; }
  .rp-spend-howitworks .rp-hiw__col-text { flex: 1 1 auto; max-width: none; }
  .rp-spend-howitworks .rp-hiw__col-media { flex: 1 1 auto; }
  .rp-spend-howitworks .rp-hiw__media { width: 100%; max-width: 489px; }
}
/* B-S7: at 390 the card resolved to ~294px (24px section padding + the card's
   calc(100% - 48px) = 48px total gutter), squeezing the step text to ~190px.
   Trim the section side padding to 16px and let the navy card fill it → ~358px
   panel / 16px gutter, so steps stop wrapping to 3 lines. */
@media (max-width: 767px) {
  .rp-spend-howitworks.rp-howitworks { padding-left: 16px; padding-right: 16px; }
  .rp-spend-howitworks.rp-howitworks--navy .rp-hiw__card { width: 100%; }
}

/* ── EOR §1.5 Onboard (Figma 15233:19620) — base .rp-howitworks (3-card grid) + a 2nd
   heading line (span, not <br>, to keep sentence-case off "(no legal team required)") and a
   centred lead (with EOR-services link) + sub-lead above the steps. EOR rebuild §1.5 2026-06-29. */
/* FLAT WHITE section (#FFFFFF): the 3 step tiles are opaque white-bg mocks; a white section +
   white step cards mean the tiles blend with no visible edge (orchestrator blend gate). */
.rp-eor-onboard { background: #fff; }
/* Canonical step order (node 15233:19629): number icon → MOCK → title → description. The mock
   sits ABOVE the title, so drop the base `margin-top:auto` (which pinned it to the card bottom). */
.rp-eor-onboard .rp-hiw__illo { margin-top: 0; margin-bottom: 20px; }
/* Canonical: step 1 badge solid blue; steps 2 & 3 light-lavender with a blue number. */
.rp-eor-onboard .rp-hiw__step:not(:first-child) .rp-hiw__num { background: #EAF0FF; color: #114EF7; }
/* Figma §1.5 heading = H5 32/40 (build had H4 40/48 → wrapped to 3 lines); two-tone: navy line + blue sub. QA R1 #7. */
.rp-eor-onboard .rp-hiw__heading { margin-bottom: 16px; max-width: 900px; font-size: 32px; line-height: 40px; }
.rp-eor-onboard .rp-hiw__heading-sub { display: block; color: #114EF7; }
.rp-eor-onboard__lead {
  font-family: Mulish, -apple-system, sans-serif; font-size: 16px; line-height: 24px;
  color: #545454; text-align: center; max-width: 760px; margin: 0 auto 12px;
}
.rp-eor-onboard__sublead {
  font-family: Mulish, -apple-system, sans-serif; font-size: 16px; line-height: 24px;
  color: #545454; text-align: center; max-width: 760px; margin: 0 auto 48px;
}
.rp-eor-onboard__link { color: #114EF7; font-weight: 700; text-decoration: underline; }
.rp-eor-onboard__link:hover { color: #0d3fd0; }
@media (max-width: 991px) { .rp-eor-onboard__sublead { margin-bottom: 32px; } }