/* ============================================================
   Contactable — Identity Reauthentication page styles
   Loads on top of tokens.css + iip.css.
   Figma: Re-authentication • Desktop (node 10561-483)
   ============================================================ */

/* ===== Hero (Header / 5) — light, network diagram right ===== */
.ra-hero {
  position: relative;
  overflow: hidden;
  min-height: 668px;
  display: flex;
  align-items: center;
  padding: 80px 0;
  background-color: #f2f2f2;
}
.ra-hero__bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Sized by section height (native aspect) and right-anchored so the diagram fills
   the section vertically and is clipped at the bottom edge, bleeding off the right. */
.ra-hero__bg img {
  position: absolute;
  left: auto; right: -6%;
  top: 50%; transform: translateY(-50%);
  height: 108%; width: auto; max-width: none;
}
.ra-hero__inner { position: relative; z-index: 1; width: 100%;
  /* hero copy aligns to the nav gutter, like the other capability heroes */
  padding-left: clamp(24px, 6vw, 88px); }
.ra-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; max-width: 560px; }
.ra-hero__copy { display: flex; flex-direction: column; gap: 24px; }
.ra-hero__eyebrow { color: var(--deep-blue); font-size: clamp(15px, 1.56vw, 20px); } /* hero-eyebrow size, matches cap-hero__eyebrow */
.ra-hero__title {
  font-family: "Archivo Black", "Google Sans Flex", sans-serif;
  font-weight: 400;
  font-size: 75px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--deep-blue);
  margin: 0;
  text-wrap: wrap;
}
.ra-hero__text { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 0; max-width: 551px; }

/* ===== The Problem (Layout / 195) ===== */
/* Problem — shared cap-challenge template (capability.css); only diffs here */
/* ≥901 only: below that the shared template shows the full photo at natural aspect */
@media (min-width: 901px) {
  .ra-problem__img-wrap { aspect-ratio: 496 / 529; }    /* Figma image box for this page */
}
.ra-problem__img { object-position: center bottom; }    /* keep the face low in the crop */
.ra-problem__copy .eyebrow { margin: 0; }
.ra-problem__dot {
  width: 48px; height: 48px; border-radius: 50%; background: var(--deep-orange); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.ra-problem__dot .material-symbols-rounded {
  color: #fff; font-size: 26px;
  font-weight: 400;   /* font-weight drives the weight (variable font); fvs 'wght' alone renders 400 */
  font-variation-settings: 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ===== Reusable capability band (Layout / 1) ===== */
.ra-band { position: relative; overflow: hidden; padding: 88px 0 112px; aspect-ratio: 1440/716; background-color: #f04e2c; } /* Figma frame 11078-1822 is 1440×716 with ~300px of artwork below the button; aspect keeps the bg crop true at every desktop width */
.ra-band__bg { position: absolute; inset: 0; pointer-events: none; }
.ra-band__bg picture { position: absolute; inset: 0; display: block; }
.ra-band__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.ra-band__inner { position: relative; z-index: 1; }
.ra-band__content { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; max-width: 636px; }
.ra-band__copy { display: flex; flex-direction: column; gap: 16px; }
.ra-band__copy .eyebrow { margin: 0; }
.ra-band__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; max-width: 540px; } /* 636×(40.8/48) — keeps Figma's break after "don't" at the scaled size */
.ra-band__text { font-size: 18px; line-height: 1.5; color: #fff; margin: 0; margin-top: 8px; } /* copy gap 16 + 8 = Figma's 24 heading→body */

/* ===== How it works (Layout / 399) ===== */
.ra-how { background: #fff; padding: 104px 0 112px; }
.ra-how__inner { display: flex; flex-direction: column; gap: 48px; }
.ra-how__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.ra-how__head-copy { display: flex; flex-direction: column; gap: 15px; max-width: 451px; }
.ra-how__head-copy .eyebrow { margin: 0; }
.ra-how__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; }
.ra-how__text { font-size: 18px; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.ra-how__actions { display: flex; align-items: center; gap: 24px; flex: none; }
.ra-how__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.ra-step {
  border: 2px solid #8087b0;
  border-radius: 15px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ra-step__icon {
  width: 82px; height: 82px; border-radius: 50%;
  background: var(--deep-orange);
  display: flex; align-items: center; justify-content: center;
}
.ra-step__icon .material-symbols-rounded { color: #fff; font-size: 40px; font-weight: 300; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48; }
.ra-step__title { font-size: 30px; font-weight: 600; line-height: 1.3; color: var(--deep-blue); margin: 0; }
.ra-step__text { font-size: 16px; line-height: 1.5; color: var(--deep-blue); margin: 0; }

/* ===== Testimonial (Testimonial / 1) ===== */
.ra-quote { background: var(--soft-grey); padding: 112px 0; }
.ra-quote__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 1076px; margin: 0 auto; text-align: center; }
.ra-quote__logo { height: 48px; width: auto; }
.ra-quote__text { font-size: 32px; font-weight: 600; line-height: 1.3; color: var(--periwinkle); margin: 0; }
.ra-quote__person { display: flex; flex-direction: column; }
.ra-quote__role { font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--deep-blue); }

/* ===== Final CTA band (CTA / 15) — reuses .final ===== */
.ra-final { padding: 112px 64px; }

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

/* --- Hero --- */
@media (max-width: 1100px) {
  .ra-hero__bg img { right: -28%; height: 90%; width: auto; opacity: 0.35; }
  .ra-hero__title { font-size: clamp(44px, 7vw, 75px); }
}
@media (max-width: 640px) {
  .ra-hero { padding: 64px 0; min-height: 0; }
  .ra-hero__text { font-size: 16px; }
}

/* --- Band --- */
@media (max-width: 900px) {
  /* Figma iPad node 11629-1790: heading 36 w390, body w347, ~200px of artwork below the button */
  .ra-band { padding: 56px 0 200px; aspect-ratio: auto; }
  .ra-band__heading { font-size: calc(36px * var(--heading-scale)); max-width: 332px; } /* 390×(30.6/36) — keeps Figma's break after "you" at the scaled size */
  .ra-band__content { max-width: 390px; }
  .ra-band__text { max-width: 350px; }
  .ra-band__bg img { object-position: right bottom; }
}
@media (max-width: 640px) {
  /* Figma mobile node 11629-1783: heading 28, body w326, ~240px of artwork below the button */
  .ra-band { padding: 56px 0 240px; }
  .ra-band__heading { font-size: 28px; }
  .ra-band__text { max-width: 330px; }
  .ra-band__bg img { object-position: center bottom; }
}

/* --- How it works --- */
@media (max-width: 1100px) { .ra-how__row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .ra-how { padding: 80px 0; }
  .ra-how__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .ra-step { min-height: 0; }
}
@media (max-width: 560px) { .ra-how__row { grid-template-columns: 1fr; } }

/* --- Testimonial --- */
@media (max-width: 900px) {
  .ra-quote { padding: 80px 0; }
  .ra-quote__text { font-size: clamp(22px, 4.5vw, 32px); }
}

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