/* ============================================================
   Contactable — Digital RICA (RICA4U) page styles
   Loads on top of tokens.css + iip.css.
   Figma: Digital RICA • Desktop (node 10664-901), Dev-Ready file.
   ============================================================ */

/* ===== Hero (Header / 5) — periwinkle, composed subject on the right =====
   Background art is a transparent 1920x1080 PNG (man + SIM outline + phone);
   the purple is a flat CSS fill. Two per-band composites:
     - desktop  rica-hero.png        (subject on the right)
     - tablet/mobile rica-hero-mobile.png (subject centred)
   Each band positions the <img> with the exact Figma transform. */
.rica-hero {
  position: relative;
  /* no overflow:hidden here — it zeroes the aspect-ratio box's content-based
     min-height (content would overflow the box); __bg clips the art instead */
  /* Figma desktop frame 1440x668 — keep that proportion across the band.
     ⚠️ No min-height here: with aspect-ratio it transfers into a min-WIDTH
     (594x2.156=1280) and overflows narrower viewports. Content sets the floor. */
  aspect-ratio: 1440 / 668;
  display: flex;
  align-items: center;
  padding: 80px 0;
  background-color: var(--periwinkle);
}
.rica-hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rica-hero__bg img {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: auto; max-width: none;
}
.rica-hero__inner { position: relative; z-index: 1; width: 100%; }
.rica-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; max-width: 729px; }
.rica-hero__copy { display: flex; flex-direction: column; gap: 24px; }
.rica-hero__eyebrow { color: #fff; font-size: clamp(15px, 1.56vw, 20px); letter-spacing: 1px; }
.rica-hero__title {
  font-family: "Archivo Black", "Google Sans Flex", sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 5.86vw, 75px);
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.rica-hero__text { font-size: 18px; line-height: 1.5; color: #fff; margin: 0; max-width: 551px; }

/* ===== Stat strip (Layout / 195) — three metric cards ===== */
.rica-strip { background: #fff; padding: 90px 0 112px; }
.rica-strip__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.rica-strip__card {
  background: var(--soft-grey); border-radius: 15px; min-height: 187px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 24px 15px; text-align: center;
}
.rica-strip__num { font-size: clamp(40px, 4.7vw, 60px); font-weight: 700; line-height: 1.2; color: var(--periwinkle); }
.rica-strip__label { font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--deep-blue); }

/* ===== Why RICA4U (Layout / 195) — problem cards ===== */
.rica-why { background: #fff; padding: 0 0 112px; }
.rica-why__inner { display: flex; gap: 50px; align-items: stretch; }
.rica-why__main {
  flex: 1 0 0; min-width: 0;
  border: 1px solid var(--deep-blue); border-radius: 15px; padding: 30px;
  display: flex; flex-direction: column; gap: 32px;
}
.rica-why__copy { display: flex; flex-direction: column; gap: 24px; }
.rica-why__eyebrow { color: rgba(86,95,150,0.75); margin: 0; }
.rica-why__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-orange); margin: 0; text-wrap: wrap; }
.rica-why__text { display: flex; flex-direction: column; gap: 16px; }
.rica-why__text p { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 0; max-width: 518px; }
.rica-why__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: auto; }
.rica-why__actions > * { flex: none; }
.rica-why__side { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.rica-why-card {
  border: 1px solid var(--deep-blue); border-radius: 15px; padding: 30px;
  flex: 1 0 0; display: flex; flex-direction: column;
}
.rica-why-card__circle {
  width: 48px; height: 48px; border-radius: 50%; background: var(--deep-orange); flex: none; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
}
.rica-why-card__circle .material-symbols-rounded {
  font-size: 24px; color: #fff; font-weight: 300;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.rica-why-card__inner { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 24px; }
.rica-why-card__title { font-size: 28px; font-weight: 600; line-height: 1.4; color: var(--deep-blue); margin: 0; }
.rica-why-card__text { display: flex; flex-direction: column; gap: 16px; }
.rica-why-card__text p { font-size: 16px; line-height: 1.5; color: var(--deep-blue); margin: 0; }

/* ===== Why now (Layout / 237) — three reason cards ===== */
.rica-whynow { background: var(--soft-grey); padding: 112px 0; }
/* Narrower, fixed gutter (not the site's fluid --wrap-pad) so each card keeps enough
   width for its 28px title to stay on one line at 1280px, matching Figma (node 10670:923) —
   the default wrap-pad narrows these 3 cards enough to wrap "Enforcement is tightening"
   onto two lines, which then misaligns that card's icon/title against its siblings. */
.rica-whynow__inner { display: flex; flex-direction: column; align-items: center; gap: 80px; max-width: 1264px; padding-inline: 32px; }
.rica-whynow__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 768px; }
.rica-whynow__head .eyebrow { margin: 0; }
.rica-whynow__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-orange); margin: 0; text-wrap: wrap; }
.rica-whynow__sub { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.rica-whynow__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; width: 100%; align-items: stretch; }
/* Rows align across the three cards (icons on one line, headings on one line, body starts
   level): content is TOP-justified — Figma's justify-end let the differing body lengths
   push each card's icon/heading to a different height. */
.rica-whynow-card {
  background: #fff; border-radius: 15px; min-height: 276px; padding: 36px 15px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 24px; text-align: center;
}
/* Per-icon heights from the Figma artwork (globe 55.5 · megaphone 50×42 · devices 62×46);
   margin-top pads each up to a shared 56px line so all icon BOTTOMS align. */
.rica-whynow-card__icon { width: auto; height: 56px; object-fit: contain; }
.rica-whynow-card:nth-child(2) .rica-whynow-card__icon { height: 42px; margin-top: 14px; }
.rica-whynow-card:nth-child(3) .rica-whynow-card__icon { height: 46px; margin-top: 10px; }
.rica-whynow-card__body { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.rica-whynow-card__title { font-size: 28px; font-weight: 600; line-height: 1.4; color: var(--periwinkle); margin: 0; }
.rica-whynow-card__text { font-size: 16px; line-height: 1.5; color: var(--deep-blue); margin: 0; max-width: 343px; }
.rica-whynow__sources { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 0; text-align: center; }

/* ===== Quote band 1 (CTA / 15) — dark photo ===== */
/* Ported verbatim from reusable-kyc `.rk-quote-band` (Figma CTA/15 11464-1871; tablet
   11629-1826; mobile 11629-1818) — same asset, per-band two-knob crop from Figma's
   recorded transforms (size <zoom>% auto + position x% y%; higher x = subject further left). */
.rica-quoteband {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  aspect-ratio: 1440 / 462; padding: 60px 0;
  background-color: #232a56;
  background-image: url("../assets/brand/rica-quote-bg.webp");
  background-repeat: no-repeat;
  background-size: 167.98% auto;      /* Figma: w 167.98% */
  background-position: 56% 36.3%;     /* Figma: left -38.07%, top -43.57% */
}
.rica-quoteband::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.4); z-index: 1; }
.rica-quoteband__inner { position: relative; z-index: 2; text-align: center; width: 100%; }
.rica-quoteband__quote { font-size: clamp(28px, 2.78vw, 40px); font-weight: 700; line-height: 1.3; color: #fff; margin: 0; } /* hits Figma 40px at the 1440 design width */
.rica-quoteband__author { font-size: 24px; font-weight: 600; line-height: 1.3; color: #fff; margin: 52px 0 0; }

/* ===== Meet RICA4U (Layout / 195) — image + copy ===== */
.rica-meet { background: #fff; padding: 112px 0; }
.rica-meet__inner { display: flex; gap: 80px; align-items: center; }
.rica-meet__img { flex: none; width: 561px; max-width: 45%; aspect-ratio: 561 / 599; border-radius: 15px; overflow: hidden; }
.rica-meet__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rica-meet__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.rica-meet__eyebrow { margin: 0; }
.rica-meet__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-orange); margin: 0; text-wrap: wrap; }
.rica-meet__body { display: flex; flex-direction: column; gap: 16px; }
.rica-meet__body p { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.rica-meet__body a { color: var(--deep-blue); text-decoration: underline; }
.rica-meet__list { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; }
.rica-meet__list li { font-size: 18px; line-height: 1.5; color: var(--deep-blue); }
.rica-meet__list a { color: var(--deep-blue); text-decoration: underline; }
.rica-meet__actions { display: flex; gap: 16px; align-items: center; margin-top: 8px; }

/* ===== How RICA4U works (Telco / Layout 495) — stepper + phone ===== */
.rica-flow { background: #fff; padding: 112px 0 89px; }
.rica-flow__inner { display: flex; flex-direction: column; align-items: center; }
.rica-flow__head { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; max-width: 768px; margin-bottom: 80px; }
.rica-flow__head .eyebrow { margin: 0 0 8px; }
.rica-flow__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-orange); margin: 0; }
.rica-flow__sub { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 0; max-width: 620px; }
.rica-flow__body { display: flex; gap: 80px; align-items: center; justify-content: center; width: 100%; }

/* Stepper. Sizes driven by three vars so a breakpoint only re-declares them and the
   circle, number, gap and the continuous connector line all track together. */
.rica-flow__steps {
  --circle: 86px; --num-size: 36px; --gap: 50px;
  position: relative; flex: 1 1 0; min-width: 0;
  list-style: none; margin: 0; padding: 0; max-width: 611px;
}
.rica-flow-step { position: relative; display: grid; grid-template-columns: var(--circle) 1fr; column-gap: var(--gap); padding: 24px 0; }
/* Connector line (Figma Line 4, 2px #6962F0): one segment per step joining its circle
   centre to the next circle's centre. The circle sits at the top of each (top-aligned) row
   at 24px + circle/2, and consecutive circle centres are exactly one step-height apart — so
   height:100% lands the segment precisely on the next circle. The last step has no segment,
   so the line never continues past step 5 no matter how tall that step's text is. */
.rica-flow-step:not(:last-child)::before {
  content: ""; position: absolute; z-index: 0;
  left: calc(var(--circle) / 2); transform: translateX(-50%);
  top: calc(24px + var(--circle) / 2); height: 100%;
  width: 2px; background: var(--periwinkle);
}
.rica-flow-step__num {
  width: var(--circle); height: var(--circle); border-radius: 50%; background: var(--periwinkle);
  color: #fff; font-size: var(--num-size); font-weight: 700; line-height: 1.1;
  display: grid; place-content: center; position: relative; z-index: 1;
}
.rica-flow-step__content { display: flex; flex-direction: column; gap: 16px; }
.rica-flow-step__title { font-size: 32px; font-weight: 600; line-height: 1.3; color: var(--deep-orange); margin: 0; }
.rica-flow-step__text { font-size: 16px; line-height: 1.5; color: var(--deep-blue); margin: 0; }
/* Phone mockup — the asset already has the tilt + soft shadow + white backdrop baked in
   (matches Figma imgLayout495); it blends into the white section. Do NOT add rotate() or
   drop-shadow() here — that double-tilts and traces the opaque rectangle as a "white card". */
.rica-flow__phone { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.rica-flow__phone img { width: 100%; max-width: 560px; height: auto; }
.rica-flow__note { font-size: 24px; font-weight: 700; line-height: 1.5; color: var(--periwinkle); text-align: center; margin: 69px 0 0; }

/* ===== Testimonial (Testimonial / 1) — soft grey + dark variant ===== */
.rica-quote { background: var(--soft-grey); padding: 112px 0; }
.rica-quote__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 1076px; margin: 0 auto; text-align: center; }
.rica-quote__text { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; line-height: 1.3; color: var(--periwinkle); margin: 0; }
.rica-quote__person { display: flex; flex-direction: column; align-items: center; }
.rica-quote__name { font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--deep-blue); }
.rica-quote__role { font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--deep-blue); }
.rica-quote--dark { background: var(--deep-blue); }
.rica-quote--dark .rica-quote__text { color: #fff; font-size: clamp(22px, 2.3vw, 28px); font-weight: 600; line-height: 1.4; }
.rica-quote--dark .rica-quote__name { color: var(--soft-grey); }
.rica-quote--dark .rica-quote__role { color: var(--soft-grey); }

/* ===== Built for your real customer base (Layout / 1) — purple photo ===== */
/* Box is ASPECT-LOCKED to the Figma frame (1440×716) so the recorded image transform below
   stays exact at every width — a content-padding height drifts the box aspect and the crop
   with it (the old bug). Content-height still wins as a minimum on narrow screens. */
/* NOTE: no overflow:hidden here — it would disable aspect-ratio's content-based minimum
   height (per css-sizing-4), collapsing the box below its content on phones. Nothing
   overflows: the bg layers are inset:0. */
.rica-audience { position: relative; display: grid; align-content: center; aspect-ratio: 1440/716; padding: 85px 0; background: var(--periwinkle); }
.rica-audience__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: url(../assets/brand/rica-audience-bg.webp);
  background-repeat: no-repeat;
  /* Exact Figma crop (node 11457:1837 img: w 125.68%, left 0%, top −42.32%) converted for the
     frame-aspect box: bottom-anchored, left-pinned. The min() freezes the rendered image at
     its native 2752px past ~2190px viewports so it never upscales/blurs on ultra-wides. */
  background-size: min(125.68%, 2752px) auto;
  background-position: 0% 100%;
}
/* 20% black wash for text contrast (Figma). Overridden to a deep-blue gradient on narrow. */
.rica-audience__bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.2); }
/* Copy pins to the LEFT gutter (not the centred .wrap) so it never drifts into the subjects on
   wide monitors — same pattern as the full-bleed hero. */
.rica-audience__inner { position: relative; z-index: 1; width: 100%; max-width: none; margin-inline: 0; padding-inline: clamp(24px, 6vw, 88px); }
.rica-audience__content { max-width: 636px; display: flex; flex-direction: column; gap: 24px; }
.rica-audience__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: #fff; margin: 0; text-wrap: wrap; }
.rica-audience__list { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 16px; }
.rica-audience__list li { font-size: 20px; line-height: 1.5; color: #fff; }
.rica-audience__list strong { font-weight: 700; }

/* ===== Stats (Stats / 55) — copy + circle ===== */
.rica-stats { background: #fff; padding: 112px 0 114px; }
.rica-stats__inner { display: flex; gap: 80px; align-items: center; justify-content: center; }
.rica-stats__copy { flex: 1 1 0; min-width: 0; max-width: 400px; display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.rica-stats__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-orange); margin: 0; }
.rica-stats__text { display: flex; flex-direction: column; gap: 16px; }
.rica-stats__text p { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.rica-stats__statwrap { flex: 1 1 0; min-width: 0; max-width: 470px; display: flex; justify-content: center; }
.rica-stats__circle {
  width: 100%; max-width: 470px; aspect-ratio: 1;  /* Figma 587 reduced 20% (user call) */ height: auto; border-radius: 50%;
  background: linear-gradient(90deg, #6962F0 0%, #7E3AED 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; gap: 2cqi;
  box-shadow: 0 30px 80px rgba(105,98,240,0.30);
  container-type: inline-size;  /* cqi below = % of the circle's own width */
}
.rica-stats__big { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
/* cqi ratios = Figma px / 587 circle, so type scales with the circle */
.rica-stats__1st { font-size: 23.85cqi; font-weight: 700; line-height: 1.1; }   /* 140 / 587 */
.rica-stats__to { font-size: 10.9cqi; font-weight: 700; line-height: 1.1; }     /* 64 / 587 */
.rica-stats__cap { font-size: 6.81cqi; font-weight: 600; line-height: 1.2; max-width: 71%; }  /* 40 / 587, 418 / 587 */

/* ===== Modern RICA advantage (Layout / 198) — five cards ===== */
.rica-adv { background: var(--soft-grey); padding: 75px 0; }
.rica-adv__inner { display: flex; flex-direction: column; gap: 32px; }
.rica-adv__head { display: flex; flex-direction: column; gap: 24px; }
.rica-adv__heading { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-orange); margin: 0; text-wrap: wrap; }
.rica-adv__sub { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.rica-adv__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }
.rica-adv-card {
  background: #fff; border-radius: 15px; padding: 15px 19px; min-height: 205px;
  display: flex; flex-direction: column; gap: 31px; justify-content: center;
  grid-column: span 2;
}
.rica-adv-card:nth-child(4), .rica-adv-card:nth-child(5) { grid-column: span 3; }
.rica-adv-card__head { display: flex; align-items: center; gap: 20px; }
.rica-adv-card__circle {
  width: 48px; height: 48px; border-radius: 50%; background: var(--deep-orange); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.rica-adv-card__circle .material-symbols-rounded { font-size: 28px; color: #fff; font-weight: 600; font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
.rica-adv-card__title { font-size: 24px; font-weight: 700; line-height: 1.3; color: var(--periwinkle); margin: 0; }
.rica-adv-card__text { font-size: 16px; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.rica-adv-card__text a { color: var(--deep-blue); text-decoration: underline; }

/* ===== Logo strip (Logo / 3) ===== */
.rica-logos { background: #fff; padding: 80px 0; }
.rica-logos__heading { font-size: 32px; font-weight: 600; line-height: 1.3; color: var(--deep-blue); text-align: center; margin: 0 auto 48px; max-width: 688px; }
.rica-logos__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 35px 48px; }
.rica-logos__row img { height: 48px; width: auto; object-fit: contain; }

/* ===== FAQ (FAQ / 1) — overrides on shared .faq ===== */
.rica-faq .faq-qtext { font-size: 28px; }
.rica-faq .faq-item { border-radius: 29px; }

/* ===== Final CTA (CTA / 15) — reuses .final ===== */
.rica-final { padding: 112px 64px; }
.rica-final__link { color: #fff; }
.rica-final__link:hover { color: #fff; opacity: 0.85; }
/* Figma (node 11467:2193) sizes the right column at a fixed 392px against a 1280px
   container (808:392 ≈ 2.06:1), not an even 1fr/1fr split — override just this page's
   instance rather than the shared .final__inner used on 11 other pages. */
@media (min-width: 901px) {
  .rica-final .final__inner { grid-template-columns: 2.06fr 1fr; }
}
/* Tablet (Figma node 13248:945, iPad Pro 11" 834×347): the two-column, left-aligned
   layout persists — it does NOT stack/centre like the shared .final ≤900 rule assumes.
   Measured column ratio from the Figma render ≈ 449:302 ≈ 1.49fr:1fr. */
@media (min-width: 641px) and (max-width: 900px) {
  .rica-final .final__inner { grid-template-columns: 1.49fr 1fr; gap: 29px; align-items: center; text-align: left; }
  .rica-final .final__right { align-items: flex-start; }
  .rica-final .final__right p { font-size: 18px; }
  .rica-final .final__actions { justify-content: flex-start; }
  .rica-final h2 { font-size: 36px; }
}

/* Mobile (Figma node 13248:937, 393×514): left-aligned single column (never centred),
   copy width capped to reproduce Figma's wrap, subject sits lower-right of frame. */
@media (max-width: 640px) {
  .rica-final .final__inner { text-align: left; }
  .rica-final .final__right { align-items: flex-start; }
  .rica-final .final__right p { font-size: 18px; max-width: 286px; }
  .rica-final .final__actions { justify-content: flex-start; }
  .rica-final h2 { font-size: clamp(28px, 8.65vw, 34px); }
  /* Figma's own image transform (node 13248:937): width/height % already encode
     the crop+zoom, left/top % place it — this photo is landscape (4096×1985)
     against a portrait mobile box, so plain object-fit:cover leaves almost no
     vertical pan room (height-constrained). Reproduce Figma's absolute values
     directly instead. */
  .rica-final .final__bg { width: 498.11%; height: 208.51%; left: -171.48%; top: -29.13%; right: auto; bottom: auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* --- Hero — per-band Figma image transforms --- */
/* Tablet (Figma 11629-1807, 834x462): centred art shifted right (left 26.03%,
   w 107.57%), copy top-left. */
@media (max-width: 1100px) {
  /* Figma frame 834x462; img transform left 26.03% / w 107.57%, art bottom
     flush with frame bottom → bottom-anchor so the subject never floats */
  /* ⚠️ no definite min-height with aspect-ratio (transfers to min-width and
     overflows); min-height:auto keeps the content-based floor */
  .rica-hero { aspect-ratio: 834 / 462; min-height: auto; align-items: flex-start; padding: 40px 0; }
  .rica-hero__bg img { left: 26.03%; top: auto; bottom: 0; width: 107.57%; }
  .rica-hero__content { max-width: 470px; }
  .rica-hero__eyebrow { font-size: 18px; letter-spacing: 0.9px; }
  .rica-hero__title { font-size: 48px; }
  .rica-hero__text { max-width: 392px; }
}
/* Narrow tablet: same art, pulled left so the phone in his hand clears the
   right edge (it grazes/clips at ~768 with the 834-frame offset) */
@media (max-width: 900px) {
  /* Solved from measured asset landmarks (man left = 0.268 x art width,
     phone right = 0.668): at 768 the man clears the 392px text column and
     the phone keeps ~20px off the right edge. KNOBS: bigger left = art
     further right; bigger width = larger subject. */
  /* Figma tablet leaves ~44px under the button (button bottom y418 in the
     462 frame); at these widths content fills the aspect box exactly, so
     the air must come from bottom padding (art is bottom-anchored and
     rides down with the taller box — nothing else moves) */
  .rica-hero { padding-bottom: 48px; }
  .rica-hero__bg img { left: 33%; width: 96.6%; }
  /* Figma tablet gutter is ~35px — the default --wrap-pad pushes the copy
     right into the subject; use the nav gutter so text clears the art */
  .rica-hero__inner { --wrap-pad: clamp(24px, 6vw, 88px); }
  /* Below ~740px the fixed 392px measure would run under the subject */
  .rica-hero__text { max-width: min(392px, 52vw); }
}
/* Mobile (Figma 11603-1726, 393x697): copy on top, centred art in lower ~63%
   (left -35.21%, top 37.18%, w 197.88%). */
@media (max-width: 640px) {
  /* Figma frame 393x697; art fills the lower band, bottom flush with the
     frame; button is pinned to the hero's bottom (Column h 607 in a 697 frame) */
  .rica-hero { aspect-ratio: auto; min-height: 697px; align-items: flex-start; padding: 48px 0; }
  /* Figma mobile gutter is 24px (body col 345 in a 393 frame) — the default
     --wrap-pad narrows the copy enough to wrap the body onto a 6th line,
     which pushes the text down into the subject's beanie */
  .rica-hero__inner { --wrap-pad: 24px; }
  .rica-hero__bg img { left: -35.21%; top: auto; bottom: 0; width: 197.88%; }
  .rica-hero__content { min-height: 601px; }
  .rica-hero__content .pill-btn { margin-top: auto; }
  .rica-hero__eyebrow { font-size: 16px; letter-spacing: 0.8px; }
  .rica-hero__title { font-size: 36px; }
  .rica-hero__text { font-size: 18px; max-width: 100%; }
}

/* --- Stat strip --- */
/* Stays 3-across through tablet; only stacks on phones (≤640). */
@media (max-width: 900px) {
  .rica-strip { padding: 64px 0 80px; }
  .rica-strip__inner { gap: 20px; }
  .rica-strip__card { min-height: 0; padding: 28px 16px; }
  .rica-strip__label { font-size: 18px; }
}
@media (max-width: 640px) {
  .rica-strip__inner { grid-template-columns: 1fr; }
  .rica-strip__card { padding: 32px 20px; }
  .rica-strip__label { font-size: 20px; }
}

/* --- Why RICA4U --- */
@media (max-width: 980px) {
  .rica-why { padding: 0 0 80px; }
  .rica-why__inner { flex-direction: column; }
}
/* Tablet: the two side cards sit left-right under the full-width main card, instead of
   stacking top-down. Reverts to a column below 640 where two columns get too narrow. */
@media (max-width: 980px) and (min-width: 641px) {
  .rica-why__side { flex-direction: row; align-items: stretch; }
  .rica-why-card { flex: 1 1 0; min-width: 0; }
}

/* --- Why now --- */
/* 2-up: two cards per row, third wraps and centres below (avoids cramped 3-across columns
   at tablet widths where each card would drop to ~260px). */
@media (max-width: 1100px) {
  .rica-whynow__row { display: flex; flex-wrap: wrap; justify-content: center; max-width: 720px; }
  .rica-whynow-card { flex: 1 1 320px; max-width: calc(50% - 16px); }
}
@media (max-width: 640px) {
  .rica-whynow__row { max-width: 400px; }
  .rica-whynow-card { flex-basis: 100%; max-width: 100%; }
}
@media (max-width: 900px) { .rica-whynow { padding: 80px 0; } .rica-whynow__inner { gap: 56px; } }

/* --- Quote band (ported from rk-quote-band) --- */
/* Freeze bg growth on very wide monitors */
@media (min-width: 1600px) {
  .rica-quoteband { background-size: min(167.98%, 2688px) auto; }
}
/* Tablet (Figma 11629-1826) */
@media (max-width: 1100px) {
  .rica-quoteband {
    aspect-ratio: 834 / 347;
    background-size: 179.15% auto;   /* Figma: w 179.15% */
    background-position: 52.6% 36.6%; /* Figma: left -41.64%, top -29.65% */
  }
  .rica-quoteband__quote { font-size: 32px; } /* Figma 36 × our narrower gutters — keeps the 3-line wrap */
  .rica-quoteband__author { font-size: 20px; margin-top: 60px; }
}
/* Mobile (Figma 11629-1818) */
@media (max-width: 640px) {
  .rica-quoteband {
    aspect-ratio: 393 / 396;
    background-size: 269.66% auto;   /* Figma: w 269.66% */
    background-position: 58.8% 0%;   /* Figma: left -99.75%, top 0 */
  }
  .rica-quoteband__quote { font-size: 30px; }
  .rica-quoteband__author { font-size: 18px; }
}

/* --- Meet RICA4U --- */
@media (max-width: 980px) {
  .rica-meet { padding: 80px 0; }
  .rica-meet__inner { flex-direction: column; align-items: stretch; gap: 40px; }
  .rica-meet__img { width: 100%; max-width: 561px; margin-inline: auto; }
}

/* --- How it works --- */
/* Tablet (Figma iPad 834): keep steps + phone side-by-side, smaller circles/titles.
   Both columns are flex:1 1 0, so the phone shrinks with its column — no tight cap needed. */
@media (max-width: 1100px) {
  .rica-flow__steps { --circle: 56px; --num-size: 24px; --gap: 24px; }
  .rica-flow-step__title { font-size: 30px; }
  .rica-flow__body { gap: 40px; }
  .rica-flow__phone img { max-width: 460px; }
  .rica-flow__note { font-size: 20px; }
}
/* Mobile: stack. Figma only specs the header at 393; steps first, phone below. */
@media (max-width: 768px) {
  .rica-flow { padding: 80px 0; }
  .rica-flow__head { margin-bottom: 56px; }
  .rica-flow__body { flex-direction: column; gap: 48px; }
  .rica-flow__steps { max-width: 560px; width: 100%; order: 1; }
  .rica-flow__phone { order: 0; }
  .rica-flow__phone img { max-width: 360px; }
  .rica-flow__note { margin-top: 56px; }
}
@media (max-width: 640px) {
  .rica-flow__steps { --circle: 48px; --num-size: 20px; --gap: 20px; }
  .rica-flow-step__title { font-size: 24px; }
  .rica-flow__phone img { max-width: 320px; }
}

/* --- Testimonials --- */
@media (max-width: 900px) {
  .rica-quote { padding: 80px 0; }
}

/* --- Audience --- */
/* 1001–1366: keep the desktop arrangement (people RIGHT, text LEFT on clear sky). The 636px
   copy column doesn't clear the subjects under the exact crop at these widths, so the copy
   narrows to 550px and the photo zooms (left-pinned, like desktop) until the redhead's face
   sits right of the text. Solved in Pillow against face landmarks (source x1050/2752);
   157% is the max zoom that keeps the braided woman's face inside the right edge.
   TUNE: size % (bigger = subjects larger + further right) · position Y (higher = lower). */
@media (max-width: 1366px) {
  .rica-audience__content { max-width: 550px; }
  .rica-audience__bg { background-size: 157% auto; background-position: 0% 78%; }
  .rica-audience__list li { font-size: 18px; }
}
/* ≤1000: the geometry stops working (clearing the text would crop the second woman's face),
   so the photo sits behind (cover) with a deep-blue wash on the left for readability. */
@media (max-width: 1000px) {
  .rica-audience__bg { background-size: cover; background-position: 60% 50%; }
  .rica-audience__bg::after { background: linear-gradient(90deg, rgba(15,30,109,0.82) 0%, rgba(15,30,109,0.48) 55%, rgba(15,30,109,0.28) 100%); }
}
@media (max-width: 900px) {
  .rica-audience { padding: 72px 0; }
  .rica-audience__bg { background-position: 62% 50%; }
  .rica-audience__bg::after { background: linear-gradient(90deg, rgba(15,30,109,0.85) 0%, rgba(15,30,109,0.58) 60%, rgba(15,30,109,0.40) 100%); }
}

/* --- Stats circle --- */
@media (max-width: 1100px) {
  .rica-stats { padding: 80px 0; }
  .rica-stats__statwrap { width: auto; flex: 1 1 0; }
  .rica-stats__circle { max-width: 336px; }  /* cqi type scales with it */
}
@media (max-width: 900px) {
  .rica-stats__inner { flex-direction: column; gap: 48px; align-items: center; text-align: center; }
  .rica-stats__copy { max-width: 560px; align-items: center; }
  .rica-stats__statwrap { order: -1; width: 100%; }
}
@media (max-width: 640px) {
  .rica-stats__circle { max-width: 240px; }
}

/* --- Modern RICA advantage --- */
@media (max-width: 1100px) {
  .rica-adv__grid { grid-template-columns: repeat(2, 1fr); }
  .rica-adv-card, .rica-adv-card:nth-child(4), .rica-adv-card:nth-child(5) { grid-column: auto; }
}
@media (max-width: 640px) {
  .rica-adv__grid { grid-template-columns: 1fr; }
  .rica-adv-card { min-height: 0; }
}

/* --- Logos --- */
@media (max-width: 640px) {
  .rica-logos { padding: 56px 0; }
  .rica-logos__row { gap: 28px 36px; }
  .rica-logos__row img { height: 38px; }
}

/* --- Final --- */
@media (max-width: 900px) { .rica-final { padding: 80px 28px; } }