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

/* ===== Homepage-only nav additions ===== */
.nav__home {
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 600;
  color: #0f1e6d;
  text-decoration: none;
  padding: 10px 13px;   /* match iip.css .nav__home so Home/Platform space evenly with the dropdowns */
  white-space: nowrap;
}
.nav__home:hover { color: #f54c2c; }

/* ===== Hero (Header / 5) ===== */
.hp-hero {
  position: relative;
  overflow: hidden;
  min-height: 822px;
  display: flex;
  align-items: center;
  background-color: #6b4fd0;
  background-image: url("../assets/brand/hero-portrait-figma.webp");
  background-repeat: no-repeat;
  /* base values = the 901–1339 band; every width band below overrides them.
     (Replaced the old raw Figma-overlay numbers, which were dead code.) */
  background-size: auto 137%;
  background-position: 29% 100%;
}
.hp-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.hp-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  max-width: 560px;
}
.hp-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.hp-hero__eyebrow { color: #fff; font-size: clamp(15px, 1.56vw, 20px); } /* hero-eyebrow size, matches cap-hero__eyebrow */
.hp-hero__title {
  font-family: var(--font-impact);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(40px, 6.6vw, 75px);
  line-height: 1.1;
  color: #fff;
  margin: 0;
}
.hp-hero__text {
  font-size: 24px;
  line-height: 1.5;
  font-weight: 600;
  color: #fff;
  max-width: 551px;
  margin: 0;
}
.hp-hero__actions {
  display: flex;
  gap: 16px;
}

/* ===== Your Problem (Layout / 195) ===== */
.hp-problem {
  background: #fff;
  padding: 112px 0 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
.hp-problem__inner {
  /* Figma node 10286-65519: Component = flex row, gap 80px, items-center.
     Image + content each flex:1.
     Gutter rule (user, 2026-07): the image's LEFT edge must line up with the
     hero copy's text line at every width, so this padding mirrors the hero
     gutter per band: wrap-pad ≥1340 · 64px 901–1339 · 40px 641–900 · 24px ≤640. */
  padding-inline: var(--wrap-pad);
  display: flex;
  align-items: center;
  gap: 80px;
}
.hp-problem__img-wrap {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 506 / 540;   /* Figma image box; fixed aspect keeps the crop stable at every width */
  border-radius: 30px;
  position: relative;
  overflow: hidden;
}
.hp-problem__img {
  /* Figma 10286:65522 recorded image transform, converted 1:1 — valid because
     the live box keeps the frame's exact aspect (506/540) at every width. */
  position: absolute;
  left: -6.05%;
  top: -9.25%;
  width: 146.61%;
  height: 118.52%;
  max-width: none;
}
.hp-problem__content {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;              /* Figma Content gap */
}
.hp-problem__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;              /* Figma Section Title → heading/text gap */
}
/* Designer feedback 2026-07: "YOUR PROBLEM" matches the standard .eyebrow size
   (14px, same as "OUR PLATFORM") — the old 20px Figma-tagline override is retired. */
.hp-problem__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  line-height: 1.1;
  color: #f54c2c;
  margin: 0;
  font-size: clamp(28px, 3.75vw, 48px);   /* anchored: hits Figma 48px at 1280 */
  text-wrap: wrap;   /* greedy fill to match Figma's line breaks (override the balance reset) */
}
.hp-problem__body {
  font-size: 18px;
  line-height: 1.5;
  color: #0f1e6d;
}
.hp-problem__body p { margin: 0; }
.hp-problem__body p + p { margin-top: 1em; }
.hp-problem__list {
  min-width: 0;
  width: 100%;  /* items are inline-size containers (width can't come from
                   content), so the list must be sized explicitly */
  display: flex;
  gap: 24px;              /* Figma Row gap */
  padding: 8px 0;
}
.hp-problem__item {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  container-type: inline-size; /* lets the title size in cqi so it never wraps */
}
.hp-problem__icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #f54c2c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}
.hp-problem__icon-wrap .material-symbols-rounded {
  font-size: 40px;   /* Figma glyph ≈40px inside the 48px circle (measured from export) */
  line-height: 1;
  /* Measured ink coverage vs Figma export: phishing 14.3% ≈ wght 200 (300 was too heavy).
     font-weight drives the weight (variable font); fvs 'wght' alone renders 400. */
  font-weight: 200;
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 48;
}
.hp-problem__item-title {
  font-family: var(--font-brand);
  font-weight: 700;
  /* 24px at full column width, shrinking with the column so the longest title
     ("Customers feel friction", 268px @ 24px) always stays on ONE line */
  font-size: min(24px, 8.8cqi);
  line-height: 1.3;
  color: #0f1e6d;
  margin: 0;
  text-wrap: nowrap;
}
.hp-problem__item-text {
  font-size: 16px;
  line-height: 1.5;
  color: #0f1e6d;
  margin: 0;
}
.hp-problem__actions {
  display: flex;
  gap: 16px;
}

/* ===== Our Platform (Header / 5) ===== */
.hp-platform {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 64px;
  background-color: #c2622a;          /* fallback */
  background-image: url("../assets/brand/platform-bg.webp?v=2");
  background-repeat: no-repeat;
  background-size: 265% auto;          /* zoom: bigger % = larger/denser rings */
  background-position: center;         /* placement */
}
.hp-platform__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  display: flex;
  justify-content: flex-end;
}
.hp-platform__card {
  background: rgba(255, 255, 255, 0.88);
  border-radius: 30px;
  padding: 50px;
  width: 599px;
  min-height: 829px;
  display: flex;
  flex-direction: column;
  gap: 45px;
}
.hp-platform__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hp-platform__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  color: var(--deep-blue);
  margin: 0;
  text-wrap: wrap;   /* greedy wrap, not balanced — match Figma line breaks */
}
.hp-platform__body {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--deep-blue);
  max-width: 468px;
}
.hp-platform__body p { margin: 0; }
.hp-platform__body p + p { margin-top: 1.5em; }
.hp-platform__btn {
  background: #6861e7;
  border-color: #6861e7;
  color: #fff;
  width: 216px;
  justify-content: center;
}
.hp-platform__btn:hover { background: #5a52d5; border-color: #5a52d5; color: #fff; }

/* ===== Stats (Stats / 55) ===== */
.hp-stats {
  background: #fff;
  padding: 112px 0 114px;
}
.hp-stats__inner {
  display: flex;
  gap: 80px;
  align-items: center;
}
.hp-stats__copy {
  flex: 1 0 0;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}
.hp-stats__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hp-stats__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  color: #f54c2c;
  margin: 0;
  text-wrap: wrap;
}
.hp-stats__text {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--deep-blue);
  margin: 0;
}
.hp-stats__actions { display: flex; gap: 16px; }

/* ---- Circle cluster (staggered 2×2, Figma node 10730-2086) ----
   The 4 circles are absolutely placed inside a box sized to their exact
   Figma bounding box (715×536, with circles 274). Everything is in % of
   that box and the box flexes (width:100%, capped at the design size), so
   the cluster always scales to the column width instead of overflowing.
   Numbers/labels use cqi so they scale with each circle in any layout. */
.hp-stats__cluster {
  flex: 1 0 0;
  position: relative;
  width: 100%;
  max-width: 715px;
  aspect-ratio: 715 / 536;
  margin-inline: auto;
  min-width: 0;
}
.hp-stat {
  position: absolute;
  width: 38.32%;               /* 274 / 715 */
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(90deg, #6762EC, #6F3DE8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  container-type: inline-size;  /* cqi below = % of the circle's own width */
}
.hp-stat__num {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 21.9cqi;          /* 60 / 274 */
  line-height: 1.2;
}
.hp-stat__label {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 8.76cqi;          /* 24 / 274 */
  line-height: 1.3;
  max-width: 82%;              /* keep the label clear of the circle edge */
  text-wrap: balance;          /* even line lengths, no mid-word break */
}
/* staggered positions as % of the 715×536 bounding box */
.hp-stat--a { left: 20.84%; top: 0; }       /* 100M+ */
.hp-stat--b { left: 61.68%; top: 0; }       /* 15 */
.hp-stat--c { left: 0;      top: 48.88%; }  /* <90s */
.hp-stat--d { left: 41.26%; top: 48.88%; }  /* 90%+ */

/* ===== Where next? (Layout / 399) ===== */
.hp-next {
  background: #f2f2f2;
  padding: 112px 0;
}
.hp-next__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
}
.hp-next__head {
  max-width: 768px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
}
.hp-next__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.1;
  color: #f54c2c;
  margin: 0;
}
.hp-next__text {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #0f1e6d;
  margin: 0;
}
.hp-next__row {
  display: flex;
  gap: 32px;
  width: 100%;
  align-items: stretch;
}
.hp-card {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.2);
  text-decoration: none;
}
.hp-card__img {
  /* aspect-ratio (296:212 = the Figma image box) instead of a fixed height:
     keeps the box the same shape as the exported assets at every card width,
     so object-fit: cover never crops the composed artwork */
  aspect-ratio: 296 / 212;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
}
.hp-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hp-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
}
.hp-card__title {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: #f54c2c;
  margin: 0;
}
.hp-card__text {
  font-size: 16px;
  line-height: 1.5;
  color: #0f1e6d;
  margin-top: 8px;            /* a little space between the orange heading and body copy */
  margin: 0;
}

/* ===== Report CTA (CTA / 15) ===== */
.hp-report {
  position: relative;
  overflow: hidden;
  /* vertical only — the inner .wrap supplies the side gutter (don't double it) */
  padding: 89px 0 96px;
  display: flex;
  justify-content: center;
  background: var(--deep-blue);
}
.hp-report__inner {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 80px;
  align-items: center;   /* designer 2026-07: right copy centres against the left column */
  width: 100%;
}
.hp-report__left {
  flex: 1.1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.hp-report__logo { height: 58px; width: auto; }
.hp-report__heading {
  font-family: var(--font-brand);
  font-weight: 700;
  /* Figma 60px; capped at 56 so the longer line fits our gutter-bound column */
  font-size: clamp(30px, 3.6vw, 56px);
  line-height: 1.1;
  margin: 0;
  white-space: nowrap;            /* keep each <br> line intact */
  /* Figma "Colourful gradient" (to-left: periwinkle → violet → orange) */
  background: linear-gradient(to left, #f54c2c 29.273%, #7747ee 70.676%, #6962f0 95.53%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hp-report__right {
  flex: 1 1 0;
  max-width: 589px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.hp-report__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #fff;
}
.hp-report__lead {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  margin: 0;
}
.hp-report__source {
  font-size: 16px;      /* designer 2026-07: smaller + italic, "Source:" on its own line */
  font-style: italic;
  line-height: 1.5;
  margin: 0;
}
.hp-report__btn { width: 216px; justify-content: center; }

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

/* ============================================================
   Wide screens (≥1340px) — face-anchored crop, verified via Pillow
   simulation at 1470/1600/1920 (see FABLE round 2).
   Same height-locked zoom as the 901–1339 band (auto 137% of the fixed
   822px box → the rendered image is a constant 2479×1126px at every
   width), so the vertical crop never changes. The x-position is a calc,
   not a %: it pins the subject's eye line (49% across the source image)
   to 67.7% of the viewport at every width — a fixed % here is what made
   the face drift between 1340 and 1920. min(…, 0px) stops the image's
   left edge detaching past ~1794px; from there the face eases to 63.3%.
   Knob: the 1214.5px constant = eyeFraction(0.49) × renderedWidth(2479).
   NOTE: this band relies on the hero's fixed 822px min-height — do not
   convert it to aspect-ratio without re-solving these values.
   ============================================================ */
@media (min-width: 1340px) {
  .hp-hero { background-size: auto 137%; background-position: min(calc(67.7vw - 1214.5px), 0px) 100%; }
}
/* Ultra-wide (≥1921px): the constant-size image (2479px) would stop
   covering past ~2478px wide, so switch to width-locked 137% and keep the
   same face placement with calc offsets (x holds the eye at 63.3vw,
   y holds the eye at the same 140px-from-top as the band above). */
@media (min-width: 1921px) {
  .hp-hero { background-size: 137% auto; background-position: calc(-3.8vw) calc(140px - 23.04vw); }
}

/* ============================================================
   Mid desktop (901–1339px, e.g. the 1280 Figma frame) — match node
   10742-2085: subject pushed right and up, headline hard-left.
   `cover` exactly fills the height here (no vertical slack), so use a
   slight height zoom to gain vertical room, then pan. Two knobs:
     background-size: auto <zoom>%   (bigger = larger subject)
     background-position: X% Y%      (lower X = further right, higher Y = higher)
   Gutter tightened toward Figma's 64px so the text clears the man.
   ============================================================ */
@media (min-width: 901px) and (max-width: 1339px) {
  .hp-hero { background-size: auto 137%; background-position: 29% 100%; }
  .hp-hero__inner { padding-left: 64px; }
}

/* ============================================================
   Mid desktop (901–1200px, e.g. 1024) — narrow the platform card and
   trim its inner padding so it matches Figma; it stays right-aligned
   (to the right of the centre sphere in the background).
   ============================================================ */
@media (min-width: 901px) and (max-width: 1200px) {
  .hp-platform { padding: 96px 44px 96px 64px; }  /* trim right gutter to nudge the card right */
  .hp-platform__card { width: 470px; padding: 40px; }
}

/* ============================================================
   Problem — tablet-wide / laptop (901–1100px, e.g. 1024): 2×2 layout.
   Image top-left (no longer full-height), copy top-right, and the two
   stat cards split below — one under the image, one under the copy.
   ============================================================ */
@media (min-width: 901px) and (max-width: 1100px) {
  /* Flex layout needs no grid fix-ups here; just trim the column gap a touch. */
  .hp-problem__inner { gap: 56px; }
}

/* Problem gutter mirrors the hero copy gutter per band (image-left = header
   text line). Bands match the hero overrides below. */
@media (min-width: 901px) and (max-width: 1339px) {
  .hp-problem__inner { padding-inline: 64px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .hp-problem__inner { padding-inline: 40px; }
}

/* ============================================================
   Responsive — tablet (900px) and phone (640px)
   ============================================================ */
@media (max-width: 900px) {
  /* Hero */
  .hp-hero { min-height: 0; padding: 96px 0; background-size: cover; background-position: 40% center; }
  .hp-hero__bg { object-position: 40% center; }

  /* Problem — stack to one centred column; image stays visible on top.
     aspect-ratio gives the image height, so it no longer collapses to 0 in a column. */
  .hp-problem { padding: 48px 0 72px; gap: 48px; }
  .hp-problem__inner { flex-direction: column; align-items: center; gap: 40px; }
  /* Stacked: drop the desktop portrait crop entirely — show the FULL photo at
     its natural aspect (1391×1200), no cover-cropping (user rule, 2026-07). */
  .hp-problem__img-wrap { flex: none; width: 100%; max-width: 460px; margin-inline: auto; aspect-ratio: auto; }
  .hp-problem__img { position: static; width: 100%; height: auto; }

  /* Platform */
  .hp-platform { padding: 72px 28px; background-size: cover; }
  .hp-platform__container { justify-content: center; }
  .hp-platform__card { width: 100%; max-width: 599px; min-height: 0; padding: 36px; gap: 32px; }
  .hp-platform__heading { font-size: 36px; }

  /* Stats — keep the slanted/staggered cluster (like desktop) when stacked,
     sized down: max-width 458px × 38.32% ≈ 175px circles at tablet, smaller
     on phones (the cluster is fluid, % positions + cqi type). */
  .hp-stats { padding: 72px 0; }
  .hp-stats__inner { flex-direction: column; align-items: stretch; gap: 48px; }
  .hp-stats__copy { max-width: none; }
  .hp-stats__cluster {
    order: -1; /* circles first when stacked (stat-circle template) */
    max-width: 458px;
    margin-inline: auto;
  }
  .hp-stats__heading { font-size: 36px; }

  /* Where next — 2-up cards */
  .hp-next { padding: 72px 0; }
  .hp-next__inner { gap: 48px; }
  .hp-next__row { flex-wrap: wrap; }
  .hp-next__heading { font-size: 36px; }
  .hp-card { flex: 1 1 calc(50% - 16px); }

  /* Report */
  .hp-report { padding: 72px 0; }
  .hp-report__inner { flex-direction: column; gap: 40px; }
  .hp-report__left { flex: none; width: 100%; }
  .hp-report__right { flex: none; width: 100%; max-width: none; gap: 32px; }
  .hp-report__heading { font-size: 36px; white-space: normal; }

  /* Final CTA */
  .final { padding-top: 96px; padding-bottom: 96px; }

  /* ---- Centre text + buttons of the stacked sections (tablet + mobile) ---- */
  .hp-problem__content,
  .hp-problem__copy { align-items: center; text-align: center; }
  .hp-problem__item { align-items: center; text-align: center; }
  .hp-problem__actions { justify-content: center; }

  .hp-platform__card,
  .hp-platform__copy { align-items: center; text-align: center; }

  .hp-stats__copy,
  .hp-stats__head { align-items: center; text-align: center; }
  .hp-stats__actions { justify-content: center; }

  .hp-report__left,
  .hp-report__right { align-items: center; text-align: center; }
}

/* ============================================================
   Tablet (641–900px, e.g. 768) — same intent as desktop: hair to the
   top of the hero and subject pushed right. The ≤900 rule above uses
   `cover` (height-exact, no vertical room), so zoom slightly and pan.
     background-size: auto <zoom>%   (bigger = larger subject)
     background-position: X% Y%      (lower X = further right, higher Y = higher)
   Scoped to ≥641px so the ≤640 phone layout keeps its own `cover` framing.
   ============================================================ */
@media (min-width: 641px) and (max-width: 900px) {
  .hp-hero { background-size: auto 132%; background-position: 30% 100%; }
  .hp-hero__inner { padding-left: 40px; }

  /* Platform — a thick orange strip on top showing the central sphere, then
     the white card. Zoom the bg to gain vertical room (cover can't, the
     sphere is centred) and pan it up. padding-top = height of the top strip. */
  .hp-platform {
    align-items: flex-end;
    padding: 190px 28px 72px;
    background-size: auto 200%;
    background-position: 48% 90%;
  }
}

@media (max-width: 640px) {
  /* Hero — Figma's mobile frame (11348-4933) ships its OWN pre-cropped
     portrait photo for this breakpoint, not the desktop landscape one
     zoomed/panned to fake it. Swap the asset instead of faking the crop —
     it's already composed for a narrow phone box, so a plain cover +
     small position tweak reproduces it exactly. */
  .hp-hero {
    padding: 72px 0;
    background-image: url("../assets/brand/hero-portrait-mobile.webp");
    /* Converted directly from Figma's own placement of this asset in its
       393x697 frame (width 225.65%, left -19.68%, top -74.01% of frame) —
       not eyeballed. */
    background-size: 225.65% auto;
    background-position: 15.65% 81.19%;
  }
  /* Figma's mobile frame uses a symmetric 24px gutter (393px frame, 345px
     content column) — match both sides instead of just the left, so the
     row has the width Figma designed the buttons to fit into. */
  .hp-hero__inner { padding-left: 24px; padding-right: 24px; }
  /* Mobile mockup (Figma 11348-4933): eyebrow 16px, body column narrows to
     ~66% so it wraps on the same lines as the design. */
  .hp-hero__eyebrow { font-size: 16px; letter-spacing: 0.8px; }
  .hp-hero__text { font-size: 18px; margin-top: 14px; max-width: 66%; }
  .hp-hero__actions { flex-wrap: wrap; gap: 8px; }
  /* Figma sizes these buttons down (36px tall) so both fit on one row at
     this width — a mobile-only variant, same tokens/colours as desktop.
     Padding/gap trimmed tighter than Figma's 24px/24px because our live
     webfont renders this button text noticeably wider than Figma's own
     render did — needed to keep both buttons on one row instead of wrapping. */
  .hp-hero__actions .cx-btn { height: 36px; padding: 0 14px; font-size: 16px; font-weight: 800; }

  /* Problem icon list stacks; gutter matches the hero's 24px so the image's
     left edge lines up with the hero text line */
  .hp-problem__inner { padding-inline: 24px; }
  .hp-problem__list { flex-direction: column; gap: 32px; }
  /* basis-0 gotcha: flex:1 0 0 collapses items once the list is a column */
  .hp-problem__item { flex: none; width: 100%; }
  .hp-problem__actions { flex-wrap: wrap; }

  /* Platform — same as tablet: thick orange strip on top showing the central
     sphere, then the card. Zoom the bg for vertical room and pan it up. */
  .hp-platform {
    align-items: flex-end;
    padding: 170px 24px 64px;
    background-size: auto 200%;
    background-position: 48% 90%;
  }
  .hp-platform__card { padding: 28px; }
  .hp-platform__heading { font-size: 30px; }
  .hp-platform__body { font-size: 18px; }

  /* Stats — tighten the 2×2 grid for a phone (numbers/labels scale via cqi) */
  .hp-stats__actions { flex-wrap: wrap; }
  .hp-stats__heading { font-size: 30px; }

  /* Cards stack 1-up */
  .hp-card { flex: 1 1 100%; }
  .hp-next__heading { font-size: 30px; }

  .hp-report__heading { font-size: 30px; }
  .hp-report__lead { font-size: 20px; }
}

@media (max-width: 480px) {
  /* Mobile mockup (Figma 11348-4933, 393px frame): title is 48px there.
     Anchored to hit 48px at ~393px; clamp still guards narrower phones
     so "INTEGRATED" doesn't overflow below ~340px. */
  .hp-hero__title { font-size: clamp(28px, 12.2vw, 48px); }
}