/* ============================================================
   Contactable — PEP & AML Screening page styles
   Loads on top of tokens.css + iip.css.
   ============================================================ */

/* ===== Hero (light, network diagram right) =====
   Dev-Ready node 10796-1896: full-frame composed asset, width-fill cover,
   top crop pinned as a vw fraction (Figma's -21.6px at 1440) so it can't
   drift on wide screens. Verified by landmark fractions, Δ ≤ 0.1%/band. */
.aml-hero {
  position: relative;
  overflow: hidden;
  min-height: 668px;
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
}
.aml-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url(../assets/brand/aml-hero-bg.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  /* Bottom-anchored, solved through the two signed-off placements:
     1280 → the "perfect" height, 1470 (Mac) → 45px lower still.
     KNOB: the trailing px constant — LOWER it (e.g. -304px → -284px) to
     move the diagram DOWN everywhere, raise it to move up. */
  background-position: right calc(100% + 34.16vw - 304px);
}
/* Very wide (≥1600): freeze the render, stay right-pinned (243px = the
   formula above evaluated at 1600). */
@media (min-width: 1600px) {
  .aml-hero__bg { background-size: min(100%, 1600px) auto; background-position: right calc(100% + 243px); }
}
.aml-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);
}
.aml-hero__eyebrow {
  font-family: var(--font-brand);
  font-weight: 600;
  text-transform: uppercase;
  font-size: clamp(15px, 1.56vw, 20px);
  line-height: 1.5;
  letter-spacing: 1px;
  color: rgba(86, 95, 150, 0.75);
  margin: 0;
}
.aml-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: 560px;
}
.aml-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.aml-hero__title {
  font-family: var(--font-impact);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(34px, 5.86vw, 75px);
  line-height: 1.1;
  color: var(--deep-blue);
  margin: 0;
  /* Figma box is 1082 — wide enough that "screening," stays on line 1;
     viewport-capped so it never spills the gutter. */
  width: min(1082px, 100vw - 180px);
  max-width: none;
  text-wrap: wrap;
}
.aml-hero__text {
  font-size: 18px;
  line-height: 1.5;
  color: var(--deep-blue);
  max-width: 551px;
  margin: 0;
}

/* ===== Problem — shared cap-challenge template (capability.css).
   Only genuine per-page differences live here. ===== */
/* ≥901 only: below that the shared template shows the full photo at natural aspect */
@media (min-width: 901px) {
  .aml-problem__img-wrap { aspect-ratio: 496 / 529; }   /* Figma image box (shared default is 620/661) */
}

/* ===== Four Layers — purple band ===== */
.aml-layers {
  position: relative;
  overflow: hidden;
  padding: 85px 0;
  /* Design frame is 1440×716 (node 10326-65883); min-height holds the band's
     height so the height-locked bg zoom below renders at the design size.
     Not a photo crop — the art scales with the band height, so no drift. */
  min-height: 716px;
  /* #6c51ef = the 3D render's own field colour (sampled from the asset edge,
     per the Figma node fill) — NOT a brand token; must match the image or a
     seam shows where the art ends on mobile. */
  background: #6c51ef;
}
.aml-layers__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* -rot asset = original rotated 180° (Figma places the art flipped on both
     axes; the rotated copy's darker edge blends into #6c51ef with no seam).
     Height-locked zoom; hub circle pinned at ~31.7% across / 63.3% down at 1440.
     KNOBS: raise first % to move art right, second % to move it down. */
  background-image: url(../assets/brand/aml-layers-bg-rot.webp?v=3);
  background-repeat: no-repeat;
  background-size: auto 231.28%;
  background-position: 27.35% 35.6%;
}
.aml-layers .eyebrow { font-size: clamp(15px, 1.56vw, 20px); letter-spacing: 1px; }
.aml-layers__inner { position: relative; z-index: 1; }
.aml-layers__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: 636px;
}
.aml-layers__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.aml-layers__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.aml-layers__text {
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
  margin: 0;
}

/* ===== One platform (image left, content right) ===== */
.aml-platform {
  background: #fff;
  padding: 75px 0;
}
.aml-platform__inner {
  display: flex;
  gap: 80px;
  align-items: center;
}
.aml-platform__img-wrap {
  /* Box + bleed are baked into the asset itself (rounded box in the middle,
     head/feet on transparent bg above/below) — don't clip, let it overflow. */
  position: relative;
  width: 530px;
  flex-shrink: 0;
}
.aml-platform__img {
  width: 100%;
  height: auto;
  display: block;
}
.aml-platform__content {
  flex: 1 0 0;
  min-width: 0;
}
.aml-platform__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.aml-platform__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  color: #f54c2c;
  margin: 0;
}
.aml-platform__text {
  font-size: 16px;
  line-height: 1.5;
  color: #0f1e6d;
  margin: 0;
}
.aml-platform__points {
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aml-platform__points li {
  font-size: 16px;
  line-height: 1.5;
  color: #0f1e6d;
}
.aml-platform__points strong { font-weight: 700; }

/* ===== Screening Layers / Tabs ===== */
.aml-verify {
  background: #fff;
  padding: 89px 0 79px;
}
.aml-verify__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
.aml-verify__head {
  max-width: 768px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.aml-verify__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); /* unified section-heading clamp */
  line-height: 1.1;
  color: var(--deep-orange);
  margin: 0;
}
.aml-verify__text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #0f1e6d;
  margin: 0;
}
/* Tabs + panes now come from the shared cap-tabs/cap-pane template in
   capability.css (markup carries both class sets; aml-* remain as JS hooks). */

/* ===== Mid CTA — orange band (CTA / 15, node 10970-2587) ===== */
.aml-cta-mid {
  position: relative;
  overflow: hidden;
  padding: 89px 0 96px;
  /* Design frame 1440×687; min-height holds the band so the width-locked
     art keeps the design's proportions. */
  min-height: 687px;
  background: linear-gradient(90deg, var(--bright-orange), var(--deep-orange));
}
.aml-cta-mid__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* Square 4096 line-art overlay, width-locked. Desktop design uses the art
     flipped vertically — scaleY(-1) on this empty div does that, so the
     position below is in PRE-FLIP space (63.6% painted = 36.4% on screen).
     Converted from the Figma image transform (132.45% wide, left -29.45%).
     KNOBS: raise first % to move art right; LOWER second % to move it down
     (inverted by the flip). */
  background-image: url(../assets/brand/aml-cta-mid-lines.webp);
  background-repeat: no-repeat;
  background-size: 132.45% auto;
  background-position: 90.75% 63.6%;
  transform: scaleY(-1);
}
.aml-cta-mid__inner { position: relative; z-index: 1; }
.aml-cta-mid__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  /* right-pinned at the full Figma copy width (615px) so the body wraps on
     the design's words (same convention as the Four Layers band) */
  margin-left: auto;
  max-width: 615px;
}
.aml-cta-mid__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  color: #fff;
  margin: 0;
  max-width: 552px;
  text-wrap: wrap; /* balance would even out the design's greedy line breaks */
}
.aml-cta-mid__text {
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
  margin: 0;
}
.aml-cta-mid__content .pill-btn { margin-top: 16px; } /* 24 gap + 16 = Figma's 40px */

/* ===== Stats ===== */
.aml-stats {
  background: #fff;
  padding: 112px 0;
}
.aml-stats__inner {
  display: flex;
  gap: 80px;
  align-items: center;
}
.aml-stats__copy {
  flex-shrink: 0;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.aml-stats__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.aml-stats__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  color: #f54c2c;
  margin: 0;
}
.aml-stats__text {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #0f1e6d;
  margin: 0;
}
.aml-stats__cluster {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aml-stats__circle {
  width: 100%;
  max-width: 378px;  /* Figma 472 reduced 20% (user call) */
  aspect-ratio: 1;
  height: auto;
  container-type: inline-size;  /* cqi below = % of the circle's own width */
  border-radius: 50%;
  background: linear-gradient(90deg, #6962f0 0%, #7e3aed 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 24px 80px rgba(104,97,231,0.35);
  flex-shrink: 0;
}
.aml-stats__num {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 31.78cqi;  /* 150 / 472 */
  line-height: 1.1;
  color: #fff;
}
.aml-stats__label {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 6.78cqi;  /* 32 / 472 */
  line-height: 1.2;
  color: #fff;
  text-align: center;
  max-width: 80%;
}

/* ===== Testimonial ===== */
.aml-quote {
  background: #f2f2f2;
  padding: 112px 0;
}
.aml-quote__inner {
  max-width: 1076px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}
.aml-quote__logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}
.aml-quote__text {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.3;
  color: #6962f0;
  margin: 0;
}
.aml-quote__person {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.aml-quote__name {
  font-weight: 600;
  font-size: 16px;
  color: #0f1e6d;
  line-height: 1.5;
}
.aml-quote__role {
  font-weight: 400;
  font-size: 16px;
  color: #0f1e6d;
  line-height: 1.5;
}

/* ===== Final CTA override ===== */
.aml-final .final__inner { grid-template-columns: 1fr 1fr; align-items: center; }
.aml-final h2 {
  font-family: var(--font-impact);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 45px;
  line-height: 1.1;
}

/* ============================================================
   Responsive — 900px and 640px
   ============================================================ */
/* Hero — tablet design (Dev-Ready node 13219-824, 834×534 frame) runs up
   to 1100 (the desktop composition doesn't fit 901–1100; nav collapses
   here too): hub left of centre, node squares right of the button,
   bleeding right and bottom.
   KNOBS: 122.47% = size; 5.51vw = left inset; 24.7vw = bottom bleed. */
@media (max-width: 1100px) {
  .aml-hero { min-height: 0; padding: 56px 0 72px; }
  .aml-hero__bg {
    background-image: url(../assets/brand/aml-hero-bg-mobile.webp);
    background-size: 122.47% auto;
    background-position: 5.51vw calc(100% + 24.7vw);
  }
  .aml-hero__title { font-size: 48px; width: min(758px, 100vw - 70px); }
  .aml-hero__eyebrow { font-size: 18px; letter-spacing: 0.9px; }
  .aml-hero__text { max-width: 392px; }

  /* Four Layers — tablet design (node 11628-1638, 834×587 frame).
     Applied from 1100 down: the desktop zoom pushes the node column
     off-screen in the 901–1100 gap, tablet crop fits it. */
  .aml-layers { padding: 64px 0; min-height: 587px; }
  .aml-layers__bg {
    background-size: auto 193.4%;
    /* hub ~22.2% across at 834; y lowered from the Figma 13.13% to add air
       between button and art (NOTE: lower % = art sits lower here) */
    background-position: 33.35% 9.5%;
  }
  .aml-layers .eyebrow { font-size: 16px; letter-spacing: 0.8px; }
  .aml-layers__heading { font-size: 36px; max-width: 390px; }
  .aml-layers__text { max-width: 347px; }

  /* Mid CTA — tablet design (node 11628-1599, 834×587 frame; art unflipped) */
  .aml-cta-mid { padding: 64px 0 78px; min-height: 587px; }
  .aml-cta-mid__bg {
    transform: none;
    background-size: 148.57% auto;
    background-position: 85.57% 22.77%;
  }
  .aml-cta-mid__content { max-width: 395px; }
  .aml-cta-mid__heading { font-size: 36px; }
  .aml-cta-mid__content .pill-btn { margin-top: 1px; } /* Figma column gap 25 */

  /* Stats — smaller circle in the 901–1100 band (472px crowds the copy) */
  .aml-stats__circle { max-width: 320px; }  /* cqi type scales with it */
}

@media (max-width: 900px) {
  /* Four Layers tablet rules live in the ≤1100 block (1024 uses the tablet crop) */
  .aml-layers__content { max-width: 100%; }

  .aml-platform { padding: 72px 0; }
  .aml-platform__inner { flex-direction: column; gap: 40px; align-items: center; }
  .aml-platform__img-wrap { width: 100%; max-width: 360px; }

  .aml-verify { padding: 72px 0; }
  /* tabs/pane responsive rules come from the shared cap-* template (capability.css) */

  /* Mid CTA tablet rules live in the ≤1100 block */

  .aml-stats { padding: 72px 0; }
  /* circle stacks FIRST, copy centred underneath (user-requested order) */
  .aml-stats__inner { flex-direction: column; gap: 48px; align-items: center; }
  .aml-stats__cluster { order: -1; width: 100%; }
  .aml-stats__copy { max-width: 100%; align-items: center; text-align: center; }
  .aml-stats__circle { max-width: 288px; }

  .aml-quote { padding: 72px 0; }
  .aml-quote__text { font-size: 26px; }

  .aml-layers__heading,
  .aml-platform__heading,
  .aml-verify__heading,
  .aml-cta-mid__heading,
  .aml-stats__heading { font-size: 36px; }

  .aml-final .final__inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* Hero — mobile design (Dev-Ready node 11598-1613, 393×534 frame):
     network band below the button, bleeding left/right/bottom. Bottom
     padding = the node's 54px button-to-frame-bottom distance so the
     bottom-anchored art tracks the button.
     KNOBS: 186.91% = size; -19.28vw = left bleed; 39.44vw = bottom bleed. */
  .aml-hero { padding: 48px 0 54px; }
  .aml-hero__bg {
    background-size: 186.91% auto;
    /* 45.5vw = Figma's 39.44vw bottom bleed + ~24px user drop at 393.
       KNOB: raise to move the band DOWN, lower to move up. */
    background-position: -19.28vw calc(100% + 45.5vw);
  }
  .aml-hero__title { font-size: 28px; width: auto; }
  .aml-hero__eyebrow { font-size: 16px; letter-spacing: 0.8px; }
  /* Figma mobile eyebrow drops the "Capabilities ·" prefix */
  .aml-hero__eyebrow-prefix { display: none; }
  .aml-hero__text { max-width: none; }

  .aml-layers__heading,
  .aml-platform__heading,
  .aml-verify__heading,
  .aml-cta-mid__heading,
  .aml-stats__heading { font-size: 30px; }

  /* Four Layers — mobile design (node 11628-1627, 393×610 frame) */
  .aml-layers { padding: 56px 0 50px; min-height: 610px; }
  .aml-layers__bg {
    background-size: auto 127.97%;
    background-position: 36.98% -53.9%; /* hub ~6.4% across / 75.9% down at 393 */
  }
  .aml-layers__content { gap: 48px; } /* larger body→button gap per mockup */
  .aml-layers__heading { font-size: 28px; max-width: none; }
  .aml-layers__text { max-width: 326px; }

  /* Mid CTA — mobile design (node 11621-2280, 393×648 frame): gradient
     flips vertical (red top → gold bottom), art in the bottom band. */
  .aml-cta-mid { padding: 69px 0 50px; min-height: 648px; background: linear-gradient(180deg, var(--deep-orange), var(--bright-orange)); }
  .aml-cta-mid__bg {
    background-size: 230.22% auto;
    background-position: 74.88% -52.53%;
  }
  .aml-cta-mid__content { margin-left: 0; max-width: 344px; }
  .aml-cta-mid__heading { font-size: 28px; line-height: 1.4; max-width: 329px; }
  .aml-cta-mid__text { max-width: 326px; }
  .aml-cta-mid__content .pill-btn { margin-top: 21px; } /* Figma column gap 45 */

  .aml-stats__circle { max-width: 224px; }
  .aml-quote__text { font-size: 22px; }
}