/* ============================================================
   Contactable — Fraud & Risk Detection page styles
   Loads on top of tokens.css + iip.css + capability.css.
   The shared archetypes (hero, challenge, verify tabs) now use the
   cap-* classes in capability.css. This file holds only fraud-specific
   overrides and the sections unique to this page
   (solution cards, beyond, stats, faq, final).
   Section headings use the unified clamp (matches the cap-* archetypes).
   ============================================================ */

/* ===== Hero — orbit line-art background (cap-hero owns the layout) =====
   Dev-Ready node 10773-1979: full-frame composed asset, width-fill cover,
   shifted 1.97vw right; y pins the top crop to Figma's -66px-at-1440
   fraction at every width. Verified by landmark fractions, Δ ≤ 0.2%/band. */
.fraud-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url(../assets/brand/fraud-hero-bg.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  /* x = Figma's 1.97vw + a 40px user-requested nudge right (more air
     between the copy and the orbit). KNOB: the +40px. */
  background-position: calc(1.97vw + 40px) -4.58vw;
}
/* Very wide (≥1600): freeze the render so the orbit stops growing. */
@media (min-width: 1600px) {
  /* pin to the RIGHT edge when frozen (keeping the node's 31px right
     bleed) — a left pin let the orbit crowd the copy and left a dead strip
     on the right as the viewport grew past 1600. */
  .fraud-hero__bg { background-size: min(100%, 1600px) auto; background-position: right -71px top -73px; }
}

/* ===== Challenge — homepage "problem" approach: image left aligned from the
   eyebrow top down to the bottom of the copy; the two items sit in a
   full-width row below (the cap-challenge platform-grid default). The image
   stretches to the copy height with object-fit: cover, so it fills the box
   with NO distortion (only the crop changes). ===== */
/* Full 1536×1024 source photo (Dev-Ready node 10970:2209): box is always
   narrower-aspect than the 3:2 photo, so cover fills the height and crops
   the sides — centre X reproduces the Figma framing. */
.fraud-challenge__img { object-position: center; }
@media (min-width: 901px) {
  .fraud-challenge__img-wrap { align-self: stretch; aspect-ratio: auto; }
}

/* ===== Verify — grey band; cap-tabs/cap-pane own most of the layout ===== */
.fraud-verify { background: #f2f2f2; padding: 75px 0 106px; }
/* (Tab pills: shared cap-tabs template now does auto-width centred wrapping pills —
   the old local override was removed as redundant.) */
/* Top-align + left-align the pane copy at ≥901 (long content = icon shouldn't
   float mid-height). Row at full desktop; stacked only in the 901–1100 band.
   ≤900 keeps the cap default (centred mobile). */
@media (min-width: 901px) {
  .fraud-pane { align-items: flex-start; }
  .fraud-pane__content { align-items: flex-start; text-align: left; }
  .fraud-pane__body ul { display: block; }
}

/* ===== Solution Cards (bespoke) ===== */
.fraud-solution {
  background: #fff;
  padding: 104px 0 112px;
}
.fraud-solution__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 52px;
}
.fraud-solution__head {
  max-width: 768px;
  text-align: center;
}
.fraud-solution__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale));
  line-height: 1.1;
  color: #f54c2c;
  margin: 0;
}
.fraud-solution__cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  width: 100%;
}
.fraud-card {
  border: 2px solid #8087b0;
  border-radius: 15px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 407px;
  min-width: 0;   /* let grid tracks shrink so 4 cards fit (long headings otherwise widen them) */
}
.fraud-card__icon {
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: #f54c2c;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.fraud-card__icon .material-symbols-rounded {
  font-size: 53px;
  font-weight: 100;   /* font-weight drives the weight (variable font); fvs 'wght' alone renders 400 */
  font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48;
}
.fraud-card__title {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: clamp(21px, 2.3vw, 30px);   /* scales down so 4 cards fit at ~1024 */
  line-height: 1.2;
  color: #0f1e6d;
  margin: 0;
}
.fraud-card__text {
  font-size: 16px;
  line-height: 1.5;
  color: #0f1e6d;
  margin: 16px 0 0;
}
.fraud-solution__actions {
  display: flex;
  gap: 16px;
  align-items: center;
}
.fraud-solution__actions .cx-btn {
  min-width: 216px;
  justify-content: center;
}

/* ===== Beyond Fraud (bespoke) ===== */
.fraud-beyond {
  background: #fff;
  padding: 112px 0;
}
.fraud-beyond__inner {
  display: flex;
  gap: 80px;
  align-items: center;
}
.fraud-beyond__content {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.fraud-beyond__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fraud-beyond__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale));
  line-height: 1.1;
  color: #f54c2c;
  margin: 0;
}
.fraud-beyond__text {
  font-size: 18px;
  line-height: 1.5;
  color: #0f1e6d;
  margin: 0;
}
.fraud-beyond__visual {
  flex: 1 0 0;
  min-width: 0;
  border-radius: 30px;
  overflow: hidden;
}
.fraud-beyond__video {
  width: 200%;
  height: auto;
  display: block;
  transform: translateX(-25%);
}

/* ===== Stats (bespoke — single circle) ===== */
.fraud-stats {
  background: #f2f2f2;
  padding: 56px 0;
}
.fraud-stats__inner {
  display: flex;
  gap: 80px;
  align-items: center;
}
.fraud-stats__copy {
  flex-shrink: 0;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.fraud-stats__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fraud-stats__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale));
  line-height: 1.1;
  color: #f54c2c;
  margin: 0;
}
.fraud-stats__text {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #0f1e6d;
  margin: 0;
}
.fraud-stats__cluster {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fraud-stats__circle {
  width: 100%;
  max-width: 302px;  /* Figma 378 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(135deg, #6861e7 0%, #9b3ded 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 24px 80px rgba(104,97,231,0.35);
  flex-shrink: 0;
}
.fraud-stats__num {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 21.96cqi;  /* 83 / 378 */
  line-height: 1;
  color: #fff;
}
.fraud-stats__label {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 5.03cqi;  /* 19 / 378 */
  line-height: 1.2;
  color: #fff;
  text-align: center;
  max-width: 80%;
}

/* ===== FAQ — widen the shared component ~10% on this page (1060 → 1166) ===== */
.fraud-faq .faq__inner { max-width: 1166px; }
/* tighter purple-CTA subheading line-height (1.5 → 1.35) */
.fraud-faq .faq__cta-right p { line-height: 1.35; }

/* ===== Final CTA override ===== */
.fraud-final .final__inner { grid-template-columns: 3fr 2fr; }
/* Crop the faint light-blue top edge of the CTA background image (nudges it up
   so the seam-like line above the CTA disappears). */
.fraud-final .final__bg { top: -3%; height: 106%; }

/* Beyond — enlarge the orbit-diagram video on desktop.
   Single knob: width % = zoom (bigger = larger diagram, more edge crop). */
/* Full desktop (≥1101): shared cap-pane template already renders the glyph at
   188px in the 260px box (the Figma 188/260 proportion) — no override needed. */
/* Tablet band (~1024/1080): stack the box above the copy + shrink it ~20%
   (260 → 208). Glyph stays 72% of the box (≈150px). */
@media (min-width: 901px) and (max-width: 1100px) {
  .fraud-pane { flex-direction: column; gap: 32px; }
  .fraud-pane__icon { width: 208px; height: 208px; }
  .fraud-pane__icon .material-symbols-rounded { font-size: 150px; }
  /* tighten the 4-up solution cards so they all fit */
  .fraud-solution__cards { gap: 20px; }
  .fraud-card { padding: 18px; }
}
/* ≤900: shared cap-pane template sizes the glyph (94px in the 130px box);
   centre the solution-card content (icon, heading, text). */
@media (max-width: 900px) {
  .fraud-card { align-items: center; text-align: center; }
}

@media (min-width: 901px) {
  /* narrower copy column → subheading wraps shorter (away from the animation)
     AND the visual box widens, so the base 200%-centred diagram renders
     larger while staying fully visible (250% cropped the side pills). */
  .fraud-beyond__content { max-width: 400px; }
}

/* ============================================================
   Responsive — 900px and 640px (cap-* archetypes carry their own
   responsive in capability.css; the rules below are fraud-only).
   ============================================================ */
@media (max-width: 900px) {
  /* Hero — tablet design (Dev-Ready node 11614-2255, 834×534 frame):
     orbit sits right of the copy, bleeding off top/right/bottom.
     KNOBS: 141.56% = orbit size; 15.09vw = left inset; -4.98vw = top bleed. */
  .fraud-hero__bg {
    background-image: url(../assets/brand/fraud-hero-bg-tablet.webp);
    background-size: 141.56% auto;
    background-position: 15.09vw -4.98vw;
  }
  /* Figma tablet type: 48px title (639px box, overflows the 560 column),
     18px eyebrow, 392px body measure. */
  .fraud-hero__title { font-size: 48px; width: min(639px, 100vw - 70px); max-width: none; }
  .fraud-hero .cap-hero__eyebrow { font-size: 18px; letter-spacing: 0.9px; }
  /* Figma box is 392, but our rendered metrics fit one extra word at that
     width — 360 reproduces the node's exact line breaks. */
  .fraud-hero__text { max-width: 360px; }

  /* Verify — grey band padding (cap-pane handles icon + pane responsive) */
  .fraud-verify { padding: 72px 0; }

  .fraud-solution { padding: 72px 0 80px; }
  .fraud-solution__cards { grid-template-columns: 1fr 1fr; }
  .fraud-card { min-height: 0; }

  .fraud-beyond { padding: 72px 0; }
  .fraud-beyond__inner { flex-direction: column; gap: 40px; }
  .fraud-beyond__content { max-width: 100%; }
  .fraud-beyond__visual { width: 100%; height: 280px; }

  .fraud-stats { padding: 72px 0; }
  .fraud-stats__inner { flex-direction: column; gap: 48px; align-items: center; }
  .fraud-stats__copy { max-width: 100%; align-items: center; text-align: center; }
  .fraud-stats__cluster { order: -1; width: 100%; } /* circle first (stat-circle template) */
  .fraud-stats__circle { max-width: 240px; }  /* cqi type scales with it */

}
@media (max-width: 640px) {
  /* Hero — mobile design (Dev-Ready node 11598-1599, 393×534 frame): the
     orbit ROTATED 180° (baked into the -mobile asset), band below the
     button bleeding off right/bottom. Bottom padding = the node's 54px
     button-to-frame-bottom distance so the bottom-anchored art tracks the
     button regardless of content height.
     KNOBS: 171.43% = orbit size; 4.43vw = left inset; 35.47vw = bottom bleed. */
  .fraud-hero { padding: 48px 0 54px; }
  .fraud-hero__bg {
    background-image: url(../assets/brand/fraud-hero-bg-mobile.webp);
    background-size: 171.43% auto;
    background-position: 4.43vw calc(100% + 35.47vw);
  }
  .fraud-hero__title { font-size: 28px; width: auto; max-width: none; }
  .fraud-hero .cap-hero__eyebrow { font-size: 16px; letter-spacing: 0.8px; }
  .fraud-hero__text { max-width: 305px; }

  .fraud-solution__cards { grid-template-columns: 1fr; }
  .fraud-solution__actions { flex-wrap: wrap; }

  .fraud-stats__circle { max-width: 208px; }
}