/* ============================================================
   Contactable — KYC use-case page styles (/use-cases/kyc/)
   Loads on top of tokens.css + iip.css (shared chrome/components).
   Page-specific overrides only; shared classes (.nav, .banner,
   .footer, .final, .pill-btn, .eyebrow, .reveal) come from iip.css.
   Built bottom-up from Figma — sections are appended as they land.
   ============================================================ */

/* ===== Hero (01 Hero) — Figma node 12350-712, frame 1440×635 =====
   Two background layers, both exported from the node:
   • kyc-hero-gradient.webp — the blurred gradient, pre-MIRRORED (Figma renders
     the source with a negative width). Soft blur, so `cover` + one position
     is enough at every width; ≥1600 freezes it so it stops scaling.
   • kyc-hero-illustration.webp — the ID-card + targets line art, cropped to
     its artwork bounds (transparent). Placed as an absolute box so it can
     carry Figma's 80% opacity. KNOBS (all % of the section): left 55% =
     card position, width 54% = size (capped at 864px ≥1600), top 8%.
     Figma: card left edge at 791/1440 (55%), art top at 51/635 (8%),
     right-hand target bleeds off the right edge, bottom target off the bottom. */
.kyc-hero {
  position: relative;
  overflow: hidden;
  min-height: 635px;
  display: flex;
  align-items: center;
  padding: 104px 0 112px;
  color: #fff;
  background-color: var(--deep-blue);
  background-image: url("../assets/brand/kyc-hero-gradient.webp?v=2");
  background-size: cover;
  background-position: 50% 58%;
  background-repeat: no-repeat;
}
.kyc-hero__art {
  position: absolute;
  z-index: 0;
  left: 55%;
  top: 8%;
  width: min(54%, 864px);
  aspect-ratio: 1800 / 1559;
  background-image: url("../assets/brand/kyc-hero-illustration.webp");
  background-size: 100% auto;
  background-repeat: no-repeat;
  opacity: 0.8;
  pointer-events: none;
}
/* Copy aligns to the nav-logo gutter (same clamp as .nav__inner / .ab-hero__inner),
   not the centred .wrap — Figma puts it hard-left of the illustration. */
.kyc-hero__inner { position: relative; z-index: 1; width: 100%; max-width: none; padding-inline: clamp(24px, 6vw, 88px); }
.kyc-hero__content { display: flex; flex-direction: column; align-items: flex-start; max-width: 640px; }
.kyc-hero__eyebrow {
  font-family: var(--font-brand); font-weight: 700; font-size: 22px; line-height: 1.3;
  text-transform: uppercase; color: #fff; margin: 0 0 8px;
}
.kyc-hero__title {
  font-family: var(--font-impact); font-weight: 400;
  font-size: clamp(34px, 5.86vw, 75px); line-height: 1.1;
  text-transform: uppercase; color: #fff; margin: 0 0 28px; text-wrap: wrap;
}
.kyc-hero__text { font-size: 18px; font-weight: 600; line-height: 1.5; color: #fff; opacity: 0.88; margin: 0; max-width: 520px; }
.kyc-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 24px; }
.kyc-hero__actions > * { flex: none; }
/* Figma UI/Button: 15px / 700, 28px side padding (cx-btn already 48px tall, 28px padding) */
.kyc-hero__actions .cx-btn { font-size: 15px; font-weight: 700; }
.kyc-hero__actions .cx-btn--secondary.cx-btn--dark { border-color: #fff; }

/* ===== What is KYC — three cards (Layout / 237) — Figma node 12350-776 =====
   Soft-grey band, three equal white cards (Figma 412px tall, content
   bottom-aligned inside), Material Symbols outline icons at wght 100
   (the approved thin icon weight), periwinkle H5 titles, deep-blue body. */
.kyc-what { background: var(--soft-grey); padding: 78px 0; }
.kyc-what__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; align-items: stretch; }
.kyc-what__card {
  min-width: 0; min-height: 412px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px;
  padding: 15px; background: #fff; border-radius: 15px; text-align: center;
}
.kyc-what__icon {
  display: block; width: 84px; height: 84px; font-size: 84px; line-height: 1;
  color: var(--deep-orange);
  font-weight: 100; font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 48;
}
.kyc-what__content { display: flex; flex-direction: column; align-items: center; gap: 24px; min-height: 295px; width: 100%; }
.kyc-what__title { font-size: 28px; font-weight: 600; line-height: 1.4; color: var(--periwinkle); margin: 0; max-width: 280px; text-wrap: balance; }
.kyc-what__text { font-size: 16px; line-height: 1.5; color: var(--deep-blue); margin: 0; max-width: 300px; }

/* ===== Industries (Layout / 399) — Figma node 10970-2934 =====
   White band: left-aligned head (eyebrow / 48px deep-blue heading / 17px body,
   gap 15), then FIVE equal outline cards (2px #8087b0, radius 15, 243px tall,
   24px padding, copy bottom-aligned) with an 82px orange icon circle sitting
   ON the top border (circle centre = card top). Icons are Material Symbols at
   the approved thin weight. */
.kyc-ind { background: #fff; padding: 80px 0 81px; }
.kyc-ind__head { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; margin-bottom: 80px; }
.kyc-ind__eyebrow { font-size: clamp(15px, 1.56vw, 20px); margin: 0; }
.kyc-ind__title { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-blue); margin: 0; text-wrap: wrap; }
.kyc-ind__text { font-size: 17px; line-height: 1.55; color: var(--deep-blue); margin: 0; }
.kyc-ind__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 32px; align-items: stretch; padding-top: 41px; } /* 41px = half the icon circle, so it can overhang the card */
.kyc-ind__card {
  position: relative; min-width: 0; min-height: 243px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  padding: 24px; border: 2px solid #8087b0; border-radius: 15px; background: #fff;
}
.kyc-ind__icon {
  position: absolute; top: -43px; left: 50%; transform: translateX(-50%);   /* 41 (half circle) + 2 (border) → centre sits on the outer border */
  width: 82px; height: 82px; border-radius: 50%; background: var(--deep-orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.kyc-ind__icon .material-symbols-rounded {
  /* Measured against the Figma exports (ink coverage, match-figma-element step 4): the
     designer's glyphs sit between wght 300 and 400 (≈350) despite the "wght100" file
     names, and span ~49% of the 82px circle → 48px glyph. 44px / wght100 read too thin. */
  font-size: 48px; line-height: 1;
  font-weight: 350; font-variation-settings: 'FILL' 0, 'wght' 350, 'GRAD' 0, 'opsz' 48;
}
.kyc-ind__card h3 { font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--deep-blue); margin: 0; }
.kyc-ind__card p { font-size: 15px; line-height: 1.5; color: var(--deep-blue); margin: 0; }

/* ===== The platform — challenge (Layout / 195) — Figma node 12405-758 =====
   Reuses the shared .cap-challenge layout (capability.css): photo left,
   copy + two items + actions right, 1:1 columns, centred stack ≤900.
   Deltas: Figma crops the 1536×1024 photo into the 624×663 box at
   w159.49% left-43.58% → object-position 73% (desktop only; ≤900 the shared
   stack shows the full photo). Items' body copy capped at Figma's ~230px. */
.kyc-challenge .cap-challenge__item-text { max-width: 230px; }
.kyc-challenge .cap-challenge__item-title { max-width: 240px; text-wrap: wrap; }
.kyc-challenge__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.kyc-challenge__actions > * { flex: none; }
@media (min-width: 901px) {
  .kyc-challenge .cap-challenge__img-wrap { aspect-ratio: 624 / 663; }
  .kyc-challenge .cap-challenge__img { object-position: 73% 50%; }
}

/* ===== The journey — tabs (Layout / 507) — Figma node 11889-2230 =====
   Reuses the shared capability tabs template (capability.css: .cap-tabs /
   .cap-tab / .cap-pane, driven by js/kyc.js). Figma deltas: centred head
   (max 768, eyebrow #8087b0), four 40px auto-width pills with a 48px gap,
   pane number eyebrow "01" in #9096ba, title 40/600 capped at 448px, body
   16px capped at 683px. Icon box = the template's 260px gradient square. */
.kyc-journey { background: #fff; padding: 107px 0 109px; }
.kyc-journey__inner { display: flex; flex-direction: column; align-items: center; gap: 80px; }
.kyc-journey__head { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 768px; text-align: center; }
.kyc-journey__eyebrow { font-size: clamp(15px, 1.56vw, 20px); margin: 0; }
.kyc-journey__title { font-size: calc(clamp(34px, 3.8vw, 48px) * var(--heading-scale)); font-weight: 700; line-height: 1.1; color: var(--deep-orange); margin: 24px 0 0; max-width: 708px; text-wrap: wrap; }
.kyc-journey__text { font-size: 20px; font-weight: 500; line-height: 1.5; color: var(--deep-blue); margin: 8px 0 0; max-width: 702px; }
/* Gap 48px at ≥1280 (Figma), easing down to the ≤1100 template gap of 14px across the
   1101–1279 band so the four pills stay on ONE row in our narrower content column. */
.kyc-journey .cap-tabs__menu { gap: clamp(14px, calc(14px + (100vw - 1100px) * 0.19), 48px); }
/* Pills keep the template's AUTO width (flex 0 1 auto, never stretched) — Figma's
   fixed 260px × 4 + 48px gaps = 1184px, wider than our content column below ~1400px,
   which pushed "Reporting" onto a second row. Height/padding/type stay Figma. */
.kyc-journey .cap-tab { height: 40px; padding: 0 32px; line-height: 1.3; }
.kyc-journey .cap-pane__num { font-size: clamp(15px, 1.56vw, 20px); color: #9096ba; margin: 0 0 -8px; }
.kyc-journey .cap-pane__title { max-width: 448px; text-wrap: wrap; }
.kyc-journey .cap-pane__body { max-width: 683px; }
.kyc-journey .cap-pane__body p:last-child { margin-bottom: 0; }

/* ===== The recipe (04 Recipe) — Figma node 12150-6971, frame 1440 =====
   Soft-grey band, left-aligned heading group, 2×2 white cards (Figma 588px
   each, gap 24). Card: 36px padding, periwinkle 48px number, 28px title,
   18px medium body, 15px orange link with a 2px underline and ↗ glyph. */
.kyc-recipe { background: var(--soft-grey); padding: 96px 0; }
.kyc-recipe__head { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 48px; }
.kyc-recipe__eyebrow { font-size: clamp(15px, 1.56vw, 20px); margin: 0; }
.kyc-recipe__title {
  font-size: calc(clamp(32px, 3.44vw, 44px) * var(--heading-scale));
  font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: var(--deep-blue); margin: 0; text-wrap: wrap;
}
.kyc-recipe__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; align-items: stretch; }
.kyc-recipe__card {
  min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
  padding: 36px; background: #fff; border-radius: 15px;
}
.kyc-recipe__num { font-size: 48px; font-weight: 700; line-height: 1.1; color: var(--periwinkle); margin: 0; }
.kyc-recipe__body { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.kyc-recipe__card h3 { font-size: 28px; font-weight: 700; line-height: 1.25; color: var(--deep-blue); margin: 0; text-wrap: wrap; }
.kyc-recipe__body p { font-size: 18px; font-weight: 500; line-height: 1.5; color: var(--deep-blue); margin: 0; }
.kyc-recipe__link {
  display: inline-flex; flex-direction: column; gap: 6px; align-items: flex-start;
  font-size: 15px; font-weight: 700; line-height: 1; color: var(--deep-orange); text-decoration: none; white-space: nowrap;
}
.kyc-recipe__link::after { content: ""; display: block; width: 100%; height: 2px; background: var(--deep-orange); }
.kyc-recipe__link:hover { color: #d63d20; }
.kyc-recipe__link:hover::after { background: #d63d20; }

/* ===== The platform (05 The platform) — Figma node 12350-817, frame 1440×505 =====
   Copy left (eyebrow / 44px heading / 17px body), platform flow diagram right.
   The diagram is the designer-supplied looping animation
   (kyc-orchestration-animation.mp4, 1920×944, 14s, H.264) — the Figma layer
   itself isn't exposed by the MCP, so the video is the source of truth. */
.kyc-flow { background: #fff; padding: 96px 0; }
.kyc-flow__inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.kyc-flow__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; max-width: 495px; flex: 0 1 495px; }
.kyc-flow__eyebrow { font-size: clamp(15px, 1.56vw, 20px); margin: 0; }
.kyc-flow__title {
  font-size: calc(clamp(32px, 3.44vw, 44px) * var(--heading-scale));
  font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: var(--deep-orange); margin: 0; text-wrap: wrap;
  /* Figma box is 495px at 44px = 11.25em: an em cap keeps the same 3-line wrap
     ("Your team should / manage risk. / Not the gaps.") at the scaled size. */
  max-width: 11.25em;
}
.kyc-flow__text { font-size: 17px; line-height: 1.55; color: var(--deep-blue); margin: 0; max-width: 396px; }
/* Figma: diagram ≈ 720×260 at x 636–1355 of the 1440 frame */
.kyc-flow__diagram { flex: 1 1 0; min-width: 0; max-width: 744px; }
.kyc-flow__video { display: block; width: 100%; height: auto; }

/* ===== Platform breakout (Layout / 1) — Figma node 10970-2701 (desktop, 1440×728)
   + node 12381-1089 (mobile, 393×928) =====
   Same breakout composition as the IIP problem section: the asset
   (kyc-platform-breakout.webp) is a transparent artwork with the rounded
   photo box BAKED IN and the man's head rising above it. The CSS box keeps
   the artwork's box aspect (748/726) with no radius/clip; the img is
   absolute, `top:-15.8%` = head height above the box. Section overflow
   stays visible so the head can rise into the padding. Columns 530:670
   (Figma) → 0.79fr 1fr. */
.kyc-plat { background: #fff; padding: 75px 0; }
.kyc-plat__grid { display: grid; grid-template-columns: 0.79fr 1fr; gap: 80px; align-items: center; }
.kyc-plat__img { position: relative; min-width: 0; aspect-ratio: 748 / 726; }
.kyc-plat__img img { position: absolute; left: 0; top: -15.8%; width: 100%; height: auto; max-width: none; }
.kyc-plat__content { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.kyc-plat__eyebrow { font-size: clamp(15px, 1.56vw, 20px); margin: 0; }
.kyc-plat__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.kyc-plat__title { 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; }
.kyc-plat__br-m { display: none; }   /* mobile-only line break (Figma 12381-1089 breaks after "product.") */
.kyc-plat__text { font-size: 18px; line-height: 1.55; color: var(--deep-blue); margin: 0; }
.kyc-plat__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.kyc-plat__actions > * { flex: none; }

/* ===== Proof stat band (08 Proof) — Figma node 12150-7115, frame 1440 =====
   Deep-blue band: copy left (eyebrow / 60px heading / body / two buttons),
   gradient "15M+" stat right (150px Archivo Black, orange→periwinkle text
   gradient, 24px label). Figma gutter 120px; site uses .wrap. */
.kyc-proof { background: var(--deep-blue); color: #fff; padding: 96px 0; }
.kyc-proof__inner { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.kyc-proof__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; max-width: 520px; }
.kyc-proof__eyebrow { color: var(--bright-orange); font-size: clamp(15px, 1.56vw, 20px); margin: 0; }
.kyc-proof__title {
  font-size: calc(clamp(36px, 4.69vw, 60px) * var(--heading-scale));
  font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; color: #fff; margin: 0; text-wrap: wrap;
}
.kyc-proof__text { font-size: 17px; line-height: 1.55; color: #fff; opacity: 0.85; margin: 0; max-width: 500px; }
.kyc-proof__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding-top: 8px; }
.kyc-proof__actions > * { flex: none; }
.kyc-proof__actions .cx-btn--primary { font-size: 15px; font-weight: 700; }
/* Stat: number + label, centred as a block */
.kyc-proof__stat { display: flex; flex-direction: column; align-items: center; gap: 17px; text-align: left; padding-left: 48px; flex: none; }
.kyc-proof__num {
  font-family: var(--font-impact); font-weight: 400; line-height: 1;
  font-size: clamp(72px, 11.7vw, 150px);
  background: linear-gradient(90deg, #f54c2c 0%, #6962f0 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  margin: 0; white-space: nowrap;
}
.kyc-proof__label { font-size: 24px; line-height: 1.5; color: #fff; margin: 0; max-width: 441px; }

/* ===== Testimonial (Testimonial / 1) — Figma node 12150-7410 =====
   Reuses the shared .hp-quote block (iip.css) — identical layout/type;
   the only delta is the quote colour: deep orange here, not periwinkle. */
.kyc-quote .hp-quote__text { color: var(--deep-orange); }

/* ===== Final CTA (CTA / 15) — Figma node 12150-7736 =====
   Reuses the shared .final block. Figma deltas from the iip default:
   section padding 112px (not 129), columns vertically centred,
   eyebrow at the base 14px (Figma 20px, too big), right column gap 23px, 48px-tall pill buttons. */
.kyc-final { padding-top: 112px; padding-bottom: 112px; }
.kyc-final .final__inner { align-items: center; }
.kyc-final__left { display: flex; flex-direction: column; gap: 24px; }
.kyc-final__eyebrow { margin: 0; } /* keep the base .eyebrow size (14px) — same as the homepage final CTA; Figma's 20px read too big */
.kyc-final h2 { text-wrap: wrap; }
.kyc-final__right { gap: 23px; }

/* Figma button spec: 12px 24px padding, 16px / 800, ~48px tall, fixed at every width */
.kyc-btn {
  height: 48px; padding: 0 24px;
  font-weight: 800; font-size: 16px; line-height: 1.5;
  font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100;
}
/* Orange "Book a Demo" pills use the SITE gradient from .pill-btn--orange-grad (iip.css) —
   Figma's #f8951e→#f04e2c fill with a 2px #f78e20 border is off-brand (Giuliana 2026-10-05). */
.kyc-btn--outline { background: transparent; border: 1px solid #fff; color: #fff; }
.kyc-btn--outline:hover { background: rgba(255, 255, 255, 0.12); }
.kyc-btn--outline-blue { background: transparent; border: 1px solid var(--deep-blue); color: var(--deep-blue); }
.kyc-btn--outline-blue:hover { background: var(--deep-blue); color: #fff; }

/* ============================================================
   Responsive — one block, grouped by section (largest → smallest)
   ============================================================ */

/* ----- Hero ----- */
@media (min-width: 1600px) {
  /* freeze the gradient's rendered size so it stops growing/blurring on wide monitors */
  .kyc-hero { background-size: 1600px auto; background-position: 50% 58%; }
}
@media (max-width: 1100px) {
  /* Tablet — Figma iPad frame 12377-735 (834×534). Values converted from the
     node's recorded image transforms:
       gradient  h129.57% w132.74%(mirrored) left127.04% top-23.51%
                 → size 133% auto, position 17% 79%
       illustration (full 4096×1908 source) h100% w137.45% left7.95% top21.91%
                 → our cropped artwork: left 51.4%, top 31%, width 57.5% of the frame.
     Copy top-aligned 40px down, 36px gutter (= the nav's ≤1100 gutter; Figma 35). */
  .kyc-hero { min-height: 534px; align-items: flex-start; padding: 40px 0 48px; background-size: 133% auto; background-position: 17% 79%; }
  .kyc-hero__inner { padding-inline: 36px; }
  .kyc-hero__art { left: 51.4%; top: 31%; width: 57.5%; }
  .kyc-hero__content { max-width: 560px; }
  .kyc-hero__eyebrow { font-size: 18px; margin-bottom: 24px; }
  .kyc-hero__title { max-width: 9.4em; margin-bottom: 24px; }   /* Figma 450px at 48px → "KNOW WHY YOU / SAID YES." */
  .kyc-hero__text { max-width: 400px; }   /* Figma 392; +8px so "approval" stays on line 2 like the mockup (font-metric drift) */
  /* buttons stack: primary, then outline 11px below (Figma Buttons rows 58 + 48) */
  .kyc-hero__actions { flex-direction: column; align-items: flex-start; gap: 11px; padding-top: 24px; }
}
@media (max-width: 640px) {
  /* Mobile — Figma Header/5 frame 12377-727 (393×626). Converted the same way:
       gradient  h126.52% w275.07%(mirrored) left242.8% top-26.52%
                 → size 275% auto, position 18% 100%
       illustration h66.88% w228.7% left-52.22% top47.93%
                 → cropped artwork: left 20%, top 54%, width 95.7% (behind the buttons,
                   bleeding off the bottom-right — the design keeps it behind, at 80%).
     Column 344 wide centred in 393 → 24px gutter; content top at 33px. */
  .kyc-hero { min-height: 626px; padding: 33px 0 40px; background-size: 275% auto; background-position: 18% 100%; }
  .kyc-hero__inner { padding-inline: 24px; }
  .kyc-hero__art { left: 20%; top: 54%; width: 95.7%; }
  .kyc-hero__eyebrow { font-size: 16px; font-weight: 600; letter-spacing: 0.8px; line-height: 1.5; margin-bottom: 24px; }
  .kyc-hero__title { font-size: 28px; max-width: 261px; margin-bottom: 24px; }
  .kyc-hero__text { font-size: 18px; font-weight: 500; opacity: 1; max-width: 280px; }
  /* Figma mobile buttons: 36px tall, 16px/700, 24px side padding, 10px apart */
  .kyc-hero__actions { gap: 10px; padding-top: 24px; }
  .kyc-hero__actions .cx-btn { height: 36px; padding: 0 24px; font-size: 16px; }
}

/* ----- What is KYC cards ----- */
@media (max-width: 1100px) {
  .kyc-what { padding: 64px 0; }
  .kyc-what__grid { gap: 24px; }
}
@media (max-width: 900px) {
  /* single centred column; cards size to their content */
  .kyc-what__grid { grid-template-columns: 1fr; gap: 24px; justify-items: center; }
  .kyc-what__card { min-height: 0; width: 100%; max-width: 460px; padding: 32px 24px; }
  .kyc-what__content { min-height: 0; }
}
@media (max-width: 640px) {
  .kyc-what { padding: 56px 0; }
  .kyc-what__title { font-size: 24px; }
}

/* ----- Industries ----- */
@media (max-width: 1100px) {
  /* five across no longer fits: 3 + 2, cards size to content */
  .kyc-ind { padding: 72px 0; }
  .kyc-ind__head { margin-bottom: 64px; }
  .kyc-ind__grid { grid-template-columns: repeat(3, 1fr); gap: 64px 24px; }
  .kyc-ind__card { min-height: 0; padding-top: 56px; }
}
@media (max-width: 900px) {
  .kyc-ind__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .kyc-ind { padding: 56px 0; }
  .kyc-ind__head { margin-bottom: 56px; }
  .kyc-ind__eyebrow { font-size: 16px; letter-spacing: 0.8px; }
  .kyc-ind__title { font-size: 28px; }
  .kyc-ind__text { font-size: 16px; line-height: 1.5; }
  .kyc-ind__grid { grid-template-columns: 1fr; gap: 56px; }
  .kyc-ind__card { text-align: center; align-items: center; }
}

/* ----- The platform — challenge ----- */
@media (max-width: 900px) {
  .kyc-challenge .cap-challenge__item-text,
  .kyc-challenge .cap-challenge__item-title { max-width: none; }
  .kyc-challenge__actions { justify-content: center; }
}

/* ----- The journey tabs ----- */
@media (max-width: 1100px) {
  /* four fixed 260px pills don't fit — fall back to the template's auto-width pills */
  .kyc-journey { padding: 80px 0; }
  .kyc-journey .cap-tabs__menu { gap: 14px; }
  .kyc-journey .cap-tab { height: 40px; padding: 0 16px; }
}
@media (max-width: 900px) {
  .kyc-journey { padding: 72px 0; }
  .kyc-journey__inner { gap: 48px; }
  .kyc-journey .cap-pane__num { margin-bottom: 0; }
}
@media (max-width: 640px) {
  .kyc-journey { padding: 56px 0; }
  .kyc-journey__eyebrow { font-size: 16px; letter-spacing: 0.8px; }
  .kyc-journey__text { font-size: 18px; }
}

/* ----- The recipe ----- */
@media (max-width: 1100px) {
  .kyc-recipe { padding: 80px 0; }
  .kyc-recipe__card { padding: 28px; }
}
@media (max-width: 900px) {
  .kyc-recipe { padding: 72px 0; }
  .kyc-recipe__head { margin-bottom: 32px; }
  .kyc-recipe__card h3 { font-size: 24px; }
}
@media (max-width: 640px) {
  /* single column on phones */
  .kyc-recipe { padding: 56px 0; }
  .kyc-recipe__eyebrow { font-size: 16px; letter-spacing: 0.8px; }
  .kyc-recipe__title { font-size: 28px; }
  .kyc-recipe__grid { grid-template-columns: 1fr; gap: 16px; }
  .kyc-recipe__card { padding: 24px; gap: 16px; }
  .kyc-recipe__num { font-size: 40px; }
  .kyc-recipe__body p { font-size: 16px; }
}

/* ----- The platform ----- */
@media (max-width: 1100px) {
  .kyc-flow { padding: 80px 0; }
  .kyc-flow__copy { flex-basis: 420px; }
}
@media (max-width: 900px) {
  /* stack: copy first, diagram below at full column width */
  .kyc-flow { padding: 72px 0; }
  .kyc-flow__inner { flex-direction: column; align-items: flex-start; gap: 40px; }
  .kyc-flow__copy { flex: none; max-width: none; }
  .kyc-flow__diagram { width: 100%; max-width: 560px; }
}
@media (max-width: 640px) {
  .kyc-flow { padding: 56px 0; }
  .kyc-flow__eyebrow { font-size: 16px; letter-spacing: 0.8px; }
  .kyc-flow__title { font-size: 28px; }
  .kyc-flow__text { font-size: 16px; line-height: 1.5; }
  .kyc-flow__diagram { max-width: none; }
}

/* ----- Platform breakout ----- */
@media (max-width: 1100px) {
  .kyc-plat__grid { gap: 48px; }
}
@media (max-width: 900px) {
  /* Figma mobile (12381-1089): copy first, LEFT-aligned, image below at column width.
     Stacked, the artwork renders as a plain static img (head included in the
     flow, like the IIP breakout) so the 16px clearance under the buttons is exact. */
  .kyc-plat { padding: 80px 0 47px; }
  .kyc-plat__grid { grid-template-columns: 1fr; gap: 0; align-items: start; }
  .kyc-plat__img { order: 2; width: 100%; max-width: 460px; margin-top: 16px; aspect-ratio: auto; }
  .kyc-plat__img img { position: static; width: 100%; height: auto; }
  .kyc-plat__content { order: 1; }
}
@media (max-width: 640px) {
  .kyc-plat__eyebrow { font-size: 16px; letter-spacing: 0.8px; color: rgba(86, 95, 150, 0.75); }
  .kyc-plat__title { font-size: 28px; }
  .kyc-plat__br-m { display: inline; }
  .kyc-plat__text { font-size: 16px; line-height: 1.5; }
  /* Figma mobile: buttons stacked, 34px tall */
  .kyc-plat__actions { flex-direction: column; align-items: flex-start; gap: 16px; }
  .kyc-plat__actions .kyc-btn { height: 34px; }
  .kyc-plat__img { max-width: none; }
}

/* ----- Proof stat band ----- */
@media (max-width: 1100px) {
  .kyc-proof { padding: 80px 0; }
  .kyc-proof__stat { padding-left: 0; }
  .kyc-proof__label { font-size: 20px; }
}
@media (max-width: 900px) {
  /* stack + centre: copy first, stat below */
  .kyc-proof { padding: 72px 0; }
  .kyc-proof__inner { flex-direction: column; align-items: center; gap: 48px; text-align: center; }
  .kyc-proof__copy { align-items: center; }
  .kyc-proof__actions { justify-content: center; }
  .kyc-proof__stat { text-align: center; }
  .kyc-proof__num { font-size: clamp(72px, 16vw, 150px); }
}
@media (max-width: 640px) {
  .kyc-proof { padding: 56px 0; }
  .kyc-proof__eyebrow { font-size: 16px; }
  .kyc-proof__text { font-size: 16px; }
  .kyc-proof__actions { gap: 16px; }
}

/* ----- Final CTA ----- */
@media (max-width: 900px) {
  /* iip.css already stacks .final__inner to one centred column at ≤900;
     keep the left column's own children centred too. */
  .kyc-final__left { align-items: center; }
  .kyc-final { padding-top: 80px; padding-bottom: 80px; }
}