/* ==========================================================================
   § 040 · Native or invasive?
   Figma gjYZkxeha34OwmNUr91aQn · ITER 5 › Frame 39 › SectionHeader 1117:6702
   + checker_body 1117:6708. Shared card kit (.hp-*) lives in sec-identify.css.
   ========================================================================== */

/* Frame 39 (2026-09-16) holds only checker_body here: the "Native or invasive?"
   header frame was dropped, but a card row with no heading reads badly and
   indexes worse, so our own header stays. The 60px gap between frames sits at
   the bottom of the preceding section (§ 040), so this one starts at 0 and
   carries the next 60 itself. Header → phone tops keeps the frame's 77. */
#native .hp-head { margin-bottom: 77px; }
@media (min-width: 981px) {
  #native { padding-top: 0; padding-bottom: 60px; }
}

/* The checker card is taller than the two step cards; all three sit on the
   same baseline (checker_body is bottom-aligned). */
.hp-row--native { align-items: end; }
/* PHOTO + SEARCH share one nested two-column grid (spanning grid columns 2-3)
   so their folders stretch to the same height. */
.hp-native-steps {
  grid-column: span 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hp-col-gap); align-items: stretch;
}

/* 040.1 folder: intro block, then a 24px gap to the web-tool block, which
   carries a hairline above it and a 16px gap to its CTA row. */
.hp-native-check__web {
  display: flex; flex-direction: column; gap: var(--s4); width: 100%;
  margin-top: var(--s4); padding-top: var(--s5); border-top: 1px solid var(--hairline);
}
.hp-native-check__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); }

/* Mustard button: Figma CTA/native checker is 44 tall, 24 side padding,
   Cabinet Bold 16. Reuses .cta-btn for colour, border and hover. */
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 var(--s5); white-space: nowrap;
  font-weight: 700; letter-spacing: 0.01em;
}

/* ── Key point (callout/key point 1285:15547) ──────────────────────
   Mustard plate with a 2px ink rule, the claim at 40 Black against the worked
   example at 18. The checker itself is not repeated here - this is the point it
   makes, stated once. 60px clear of the card row above it. */
.hp-keypoint {
  display: flex; align-items: center; gap: var(--s7);
  margin-top: 60px; padding: var(--s6) var(--s7);
  background: var(--mustard); border: 2px solid var(--ink); border-radius: var(--radius-sm);
  color: var(--ink);
}
.hp-keypoint__claim {
  flex: 0 0 560px; max-width: 560px; margin: 0;
  font-family: var(--f-serif); font-weight: 900; font-size: 40px; line-height: 1.1; letter-spacing: -0.8px;
}
.hp-keypoint__body {
  flex: 1 1 auto; margin: 0;
  font-family: var(--f-serif); font-size: 18px; line-height: 1.55;
}

@media (max-width: 980px) {
  .hp-row--native { align-items: stretch; }
  /* Stacked: the claim leads, then its example. */
  .hp-keypoint { flex-direction: column; align-items: flex-start; gap: var(--s4); margin-top: var(--s7); padding: var(--s5); }
  .hp-keypoint__claim { flex: 0 0 auto; max-width: none; font-size: clamp(26px, 7vw, 34px); letter-spacing: -0.4px; }
  .hp-keypoint__body { font-size: 16px; }
  .hp-native-steps { grid-column: auto; grid-template-columns: minmax(0, 1fr); gap: var(--s7); }
}
@media (max-width: 720px) {
  #native .hp-head { margin-bottom: 28px; }
}