/* ============================================================
   Contactable — ID Verification page styles
   Loads on top of tokens.css + iip.css (shared chrome/components).
   Page-specific sections only; shared classes (.nav, .banner,
   .footer, .cx-btn, .wrap, .eyebrow, .reveal) come from iip.css.
   ============================================================ */

/* ===== Hero (Header / 5) ===== */
.idv-hero {
  position: relative;
  overflow: hidden;
  min-height: 668px;
  display: flex;
  align-items: center;
  background: #f2f2f2;
}
.idv-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(../assets/brand/idv-hero-fingerprint.webp);
  background-repeat: no-repeat;
  /* Dev-Ready node 10206-65495: the asset is composed at the full frame
     width (fingerprint in its right half), rendered as width-fill cover —
     100% auto + vertical centre reproduces Figma exactly at 1440
     (outer arc at 51% across, strokes bleeding to the bottom edge).
     Verified by landmark fractions, Δ < 0.1%. */
  background-size: 100% auto;
  background-position: right center;
}
.idv-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Pull the copy left of the standard site gutter (--wrap-pad).
     KNOB: lower the max to shift further left, raise to shift right. */
  padding-left: clamp(24px, 6vw, 88px);
}
.idv-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: 560px;
}
.idv-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.idv-hero__eyebrow {
  font-family: var(--font-brand);
  font-weight: 600;
  text-transform: uppercase;
  /* Figma: 20px, reaches its max at ~1280px */
  font-size: clamp(15px, 1.56vw, 20px);
  line-height: 1.5;
  letter-spacing: 1px;
  color: rgba(86, 95, 150, 0.75);
  margin: 0;
}
.idv-hero__title {
  font-family: var(--font-impact);
  font-weight: 400;
  text-transform: uppercase;
  /* Figma: 75px Archivo Black; vw slope reaches 75px at ~1280px */
  font-size: clamp(34px, 5.86vw, 75px);
  line-height: 1.1;
  color: var(--deep-blue);
  margin: 0;
  /* Title overflows its 560px column (matches Figma); cap to the
     viewport so it never spills past the gutter just above 900px. */
  width: min(765px, 100vw - 180px);
  max-width: none;
  text-wrap: wrap;
}
.idv-hero__text {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.5;
  color: var(--deep-blue);
  max-width: 551px;
  margin: 0;
}

/* The Challenge section now uses the shared .cap-challenge archetype
   (css/capability.css). No idv-specific overrides needed. */

/* ===== The Insight (Layout / 19) ===== */
.idv-insight {
  background: #f2f2f2;
  padding: 112px 0;              /* equal top/bottom — gap above eyebrow = gap below button */
}
.idv-insight__inner {
  display: flex;
  gap: 80px;
  align-items: flex-start;       /* stagger columns instead of centering */
  width: 100%;
}
.idv-insight__left {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.idv-insight__right {
  margin-top: 180px;             /* right column sits lower than the left */
}
.idv-insight__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  /* unified section-heading size (fluid, matches challenge/verify/stats) */
  font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale));
  line-height: 1.1;
  color: #8087b0;
  margin: 0;
  max-width: 354px;
}
.idv-insight__right {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.idv-insight__text {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
  color: #0f1e6d;
  margin: 0;
}


/* ===== Testimonial — Lightstone logo (Figma 10729-2022) ===== */
/* Logo box is 164×72 in Figma (wordmark + tagline) — taller than the
   shared 41px .hp-quote__logo tuned for the GoTyme wordmark. */
.idv-quote__logo { height: 60px; }

/* ===== Final CTA — taller banner (IDV only) ===== */
.final { padding-top: 148px; padding-bottom: 148px; }

/* ============================================================
   Responsive — grouped by section, largest → smallest
   ============================================================ */
/* Very wide (≥1600): freeze the background's rendered size so the
   fingerprint stops growing/blurring on wide monitors; stays right-pinned. */
@media (min-width: 1600px) {
  .idv-hero__bg { background-size: min(100%, 1600px) auto; }
}

/* Tablet-wide (nav collapses at 1100): hero keeps the side-by-side
   layout but drops the tall fixed height so content hugs the top
   instead of floating in the vertical centre. */
@media (max-width: 1100px) {
  .idv-hero { min-height: 0; align-items: flex-start; padding: 88px 0; }
  .idv-hero__text { max-width: 430px; }
}

@media (max-width: 900px) {
  /* Hero — single column; copy stacked top-left, fingerprint shrunk
     into the bottom-right corner (matches the tablet/mobile design).
     Bottom padding reserves the corner space for the pattern. */
  .idv-hero { min-height: 0; padding: 56px 0 80px; }
  /* narrower text frees the right side so the pattern can sit higher.
     Cap the pattern box's bottom to the section's bottom padding — which
     sits exactly at the button's baseline — then anchor the image to that
     bottom edge so the fingerprint's bottom lines up with the button. */
  .idv-hero__bg { opacity: 0.9; background-size: 76% auto; background-position: right bottom; bottom: 80px; }
  .idv-hero__title { width: auto; max-width: 100%; font-size: clamp(26px, 7.6vw, 44px); }
  .idv-hero__text { max-width: 380px; }

  /* Insight — stack the two columns, drop the staggered offset */
  .idv-insight { padding: 72px 0; }
  .idv-insight__inner { flex-direction: column; gap: 32px; align-items: center; }
  .idv-insight__left,
  .idv-insight__right { align-items: center; text-align: center; }
  .idv-insight__right { margin-top: 0; }
  .idv-insight__heading { max-width: none; }
  .idv-insight__text { font-size: 22px; }


  /* Final CTA */
  .final { padding-top: 96px; padding-bottom: 96px; }
}
@media (max-width: 640px) {
  /* Hero — mobile design (Figma 11434-2714): 18px full-width body,
     16px eyebrow, 28px title, and a large, faint fingerprint that
     bleeds off the bottom-right corner behind the copy. */
  .idv-hero { padding: 48px 0 96px; }
  .idv-hero__eyebrow { font-size: 16px; color: #8087b0; letter-spacing: 0.8px; }
  .idv-hero__title { font-size: 28px; }
  .idv-hero__text { max-width: none; font-size: 18px; }
  /* Dev-Ready mobile node 11434-2714: full-strength MIRRORED fingerprint
     band overlapping the button and bleeding off the bottom-right.
     Converted from the node's recorded image transform (box = 393×534):
     rendered width 188% of viewport, left edge +6.02vw, bottom bleeding
     46.3vw below the section. Verified by landmark fractions, Δ < 0.1%.
     KNOBS: 188% = arch size; 6.02vw = left inset; 46.3vw = bottom bleed. */
  .idv-hero__bg {
    background-image: url(../assets/brand/idv-hero-fingerprint-mobile.webp);
    background-size: 188% auto;
    background-position: 6.02vw calc(100% + 46.3vw);
    bottom: 0;
    opacity: 1;
  }
  .idv-insight__text { font-size: 20px; }
}