/* ============================================================================
   /affiliates — INTERIM MOBILE GUARD. THIS IS NOT THE DESIGNED LAYOUT.

   The Figma file has a real mobile frame, 959:116977 (393 x 10036), and it has
   NOT been built. Nothing below is measured against it. Every rule here exists
   for one reason: without any mobile CSS the page is a fixed 1512 stage, so a
   phone gets a horizontally scrolling document with type running off the edge.
   This makes it legible and stops the overflow. That is all it does.

   DELETE THIS FILE when the designed mobile build lands. Do not extend it, do
   not treat any number in it as coming from the file, and do not let it become
   the mobile layout by default — the whole point of the -v2 path is that Lucas
   compares against a real reference.

   What the real build needs, all of it already extracted and cached:
     959:116978  393x856   hero. NOTE: mobile drops the stat strip entirely,
                           the bar's pills lose their subtitles (81/94 wide),
                           the nav is 377x64 at (8,64) with a SPACE_BETWEEN
                           row, and the two buttons stack at 233 wide, gap 12.
     959:117032  393x2811  tiers. Same content as desktop 959:69654.
     959:137525  393x915   calculator. pad 100/24, gap 50; head 345x129;
                           result 345x212; inputs 345x312, pad 20, gap 24.
     959:143597  393x1017  milestones.
     959:143734  393x851   how it works. Carries a stray "Value Points /
                           lowest-risk path / pay the full fee" header that
                           Lucas confirmed should be dropped for desktop's
                           "How it works".
     959:143784  393x958   Partner FAQ.
     959:164195  393x2628  final CTA + footer.
   Take every gap, padding, radius, font-size and line-height from the MOBILE
   node JSON. Do not scale the desktop numbers.
   ========================================================================= */

@media (max-width: 767px) {

  /* stop the fixed stages from forcing a 1512 document */
  .afxah-stage, .afxat-stage, .afxac-stage,
  .afxam-stage, .afxas-stage, .afxax-stage { max-width: 100%; padding-left: 20px; padding-right: 20px; }
  /* the navwrap takes NO padding: .afx-nav already sizes itself to
     calc(100% - 20px) and the shared chrome handles its own mobile state
     (links hidden). Padding it as well pushed Get Funded off the right edge. */
  .afxah-navwrap { max-width: 100%; }
  .afxat-stage { padding-top: 64px; padding-bottom: 64px; gap: 56px; }

  .afxah, .afxat, .afxac, .afxam, .afxas, .afxax { min-height: 0; height: auto; overflow: hidden; }

  /* every fixed-width block becomes fluid */
  .afxah-body, .afxah-h1, .afxah-lead, .afxah-stats,
  .afxat-proof, .afxat-head, .afxat-title, .afxat-tiers, .afxat-creator,
  .afxat-creatorbody, .afxat-creatorlead, .afxat-stack,
  .afxac-head, .afxac-title, .afxac-cards,
  .afxam-head, .afxam-title, .afxam-rows, .afxam-copy,
  .afxas-inner, .afxas-cards, .afxas-card, .afxas-copy,
  .afxax-head, .afxax-title, .afxax-proof { width: 100%; max-width: 100%; }

  /* rows and card grids stack */
  .afxah-stats, .afxat-proof, .afxat-tiers, .afxas-cards,
  .afxax-proof, .afxat-creator, .afxam-row, .afxam-row--right {
    flex-direction: column; align-items: flex-start; gap: 24px;
  }
  .afxah-stat, .afxat-proofcol, .afxas-card { width: 100%; flex: none; }
  .afxah-rule, .afxat-proofrule { width: 100%; }
  .afxam-row + .afxam-row { margin-top: 24px; }
  .afxam-row { height: auto; }
  .afxat-card { flex: none; width: 100%; gap: 32px; }
  .afxat-cardbody { margin-top: 0; }
  .afxas-card { height: auto; padding-top: 200px; }

  /* type comes down to something readable at 393 rather than to a designed
     size — 959:116978 has the real values */
  .afxah-h1 { font-size: 44px; line-height: 44px; letter-spacing: -1.3px; }
  .afxah-lead, .afxat-creatorlead { font-size: 16px; line-height: 24px; }
  .afxat-title span, .afxax-title span { font-size: 40px; line-height: 42px; letter-spacing: -1.2px; white-space: normal; }
  .afxac-title .t1 { font-size: 36px; line-height: 40px; letter-spacing: -1px; white-space: normal; }
  .afxac-title .t2 { font-size: 30px; line-height: 34px; letter-spacing: -.9px; white-space: normal; }
  .afxam-title span { font-size: 34px; line-height: 38px; letter-spacing: -1px; }
  .afxat-creatortitle { font-size: 26px; line-height: 32px; }
  .afxat-cardrate { font-size: 56px; line-height: 44px; }
  .afxam-name { font-size: 26px; line-height: 32px; }

  /* buttons stack full width */
  .afxah-ctas, .afxax-ctas { flex-direction: column; align-items: stretch; width: 100%; }
  .afxah-btn, .afxah-btn-ghost, .afxax .afxah-btn-ghost { width: 100%; }

  /* the calculator's two cards and its sliders */
  .afxac-cards { margin-top: 40px; }
  .afxac-result { height: auto; padding: 32px 20px; }
  .afxac-amount { font-size: 56px; line-height: 56px; letter-spacing: -3px; }
  .afxac-inputs { padding: 20px; gap: 24px; }
  .afxac-label { font-size: 20px; line-height: 24px; }

  /* decorative art that is positioned off a 1512 origin would drag the
     document wide; it is hidden rather than repositioned by guesswork */
  .afxat-orb, .afxac-dots, .afxam-lines, .afxam-blur, .afxas-lines,
  .afxas-tex, .afxax-light, .afxax-plate, .afxq--aff .afxq__orb { display: none; }
  .afxam-art { width: 100%; height: 260px; }
  .afxam-art img { left: 50%; top: -80px; width: 420px; height: 380px; margin-left: -210px; }
  .afxas-shot { left: 50%; margin-left: -120px; }
  .afxas-shot--1, .afxas-shot--3 { width: 200px; height: 200px; }
  .afxas-shot--2 { width: 240px; height: 160px; }

  .afxah-body { margin-top: 96px; }
  .afxah-stats { margin-top: 64px; }
  .afxac-head, .afxam-head, .afxas-inner, .afxax-head { margin-top: 64px; }
  .afxax-proof { margin-top: 48px; }
  .afxax { height: auto; padding-bottom: 64px; }
}