/* ============================================================================
 * mobile-fixes.css — MOBILE-ONLY responsive corrections
 * ----------------------------------------------------------------------------
 * EVERY rule in this file lives inside `@media (max-width: 480px)`.
 * It therefore CANNOT affect tablet (>=768px) or desktop (>=1024px) — those
 * layouts are finished and must stay pixel-identical.
 *
 * Loaded LAST in <head> on each edited page so it wins the cascade over the
 * page's own styles. Fixes are grouped by source page; shared fixes (footer,
 * the row-style cross-sell card, dark CTA headings) are written once.
 * ========================================================================== */

@media (max-width: 480px) {

  /* ====================================================================
   * SHARED — applies anywhere the pattern appears
   * ================================================================== */

  /* Cross-sell card laid out as a flex ROW collides its text + link on
     narrow widths (credentials "Looking for meal plans", commerce "Need
     the credential itself?"). Stack it into a clean single column. */
  .xsell .xcard[style*="flex-direction:row"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  /* Footer newsletter: keep the email input from forcing horizontal overflow
     and let the Subscribe button drop cleanly if space is tight. */
  .footer-newsletter { flex-wrap: wrap; max-width: 100%; }
  .footer-newsletter input { min-width: 0; flex: 1 1 100%; }
  .footer-newsletter button { flex: 1 1 auto; }

  /* (Dark CTA strip headings are now fixed at all widths in page.css.) */


  /* ====================================================================
   * index.html — animated hero (Credentials / Commerce scenes)
   * ================================================================== */

  /* Credentials scene: the 940px min-height left a big black gap above the
     bottom-anchored phone art. Drop the forced height and tighten the
     visual block so the device sits close under the copy. */
  .hero { min-height: 0; }
  /* Hero already has its own 68px top padding to clear the fixed nav, so the
     copy block only needs a small gap below it — not another ~90px, which
     left a big void above the "Connected credentials." tagline. */
  .hero .banner-copy { padding-top: 24px; padding-bottom: 4px; }
  .hero-scene .banner-visual { min-height: 420px; }

  /* Commerce scene: the BalanceU phone crop was `cover`/bleed-right, so it
     sat off-center and clipped. Show it fully and centered. */
  .hero-scene[data-scene="commerce"] .hbm-img {
    object-fit: contain;
    object-position: bottom center;
  }


  /* ====================================================================
   * credentials.html
   * ================================================================== */

  /* Hero "One identity. Every form." — kill the fixed 700px H1 width that
     ran off the right edge. */
  .cat-hero-copy h1 { width: auto !important; }

  /* Mobile Wallet pillar header — fixed 1176px / 1000px widths and a
     white-space:nowrap headline all overflowed. Let them wrap to the
     viewport. */
  #mobile .pillar-head .pl { width: auto !important; }
  #mobile .pillar-head h2 { white-space: normal !important; }
  #mobile .pillar-head .pl p { width: auto !important; }

  /* Physical ID hero — shrink the overlaid title and lift it into the dark
     upper area of the photo so it no longer sits on top of the cards or
     clip on the right. */
  .phys-hero-title { font-size: clamp(26px, 8vw, 40px); top: 19%; }

  /* RemotePhoto — the inline `height:605px` on the stage crammed the intro
     copy and the phones into one fixed box, causing the text to be
     overlapped. Let the stacked layout size to its content. */
  .rp-stage { height: auto !important; }


  /* ====================================================================
   * cardpulse.html
   * ================================================================== */

  /* Nerd Mode — the desktop tile is a wide interactive console whose
     min-content width forced the ENTIRE section to bleed off the right edge
     (even the copy column got dragged wide). On mobile we drop the
     interactive console and show a compact, self-contained looping animation
     of the event chain instead. */
  .cp-nerd { padding-block: 44px !important; }
  .cp-nerd-grid { grid-template-columns: 1fr !important; gap: 24px; }
  .cp-nerd-grid > * { min-width: 0; }            /* let the track shrink to the viewport */
  .cp-nerd-copy h2 { font-size: clamp(26px, 7.4vw, 32px); overflow-wrap: break-word; }
  .cp-nerd-copy > p { overflow-wrap: break-word; font-size: 15px; }
  .cp-nerd-list { font-size: 14px; }

  /* Hide the interactive console, its instructional callout, and the CTA
     that drives it — none work without the live (now-removed) window. */
  .cp-nerd-mock,
  .cp-nerd-callout,
  #cp-nerd-trigger { display: none !important; }

  /* Compact looping event-chain animation (mobile only) */
  .cp-nerd-mobile { display: block; background: #0b0b0d; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden; }
  .cp-nm-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .cp-nm-bar .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
  .cp-nm-bar .dot.r { background: #ff5f57; }
  .cp-nm-bar .dot.a { background: #febc2e; }
  .cp-nm-bar .dot.g { background: #28c840; }
  .cp-nm-evt { margin-left: 4px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; color: #6BCF6F; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cp-nm-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
  .cp-nm-card { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: #fff; }
  .cp-nm-pill { margin-left: auto; flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #ffa657; background: rgba(255,166,87,0.14); border: 1px solid rgba(255,166,87,0.38); border-radius: 999px; padding: 2px 9px; }
  .cp-nm-chain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .cp-nm-chain li { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; color: rgba(255,255,255,0.28); }
  .cp-nm-chain li .ic { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; }
  .cp-nm-chain li .ic .mdi { font-size: 15px; line-height: 1; color: currentColor; }
  .cp-nm-chain li b { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; font-weight: 600; color: currentColor; }
  .cp-nm-chain li .nm { color: rgba(255,255,255,0.86); font-size: 12.5px; }
  .cp-nm-chain li.ok { animation: cpnmGreen 6s ease-in-out infinite; }
  .cp-nm-chain li.retry { animation: cpnmRetry 6s ease-in-out infinite; }
  .cp-nm-chain li.retry .ic .mdi { animation: cpnmSpin 1.1s linear infinite; }
  .cp-nm-chain li:nth-child(1) { animation-delay: 0.2s; }
  .cp-nm-chain li:nth-child(2) { animation-delay: 1.0s; }
  .cp-nm-chain li:nth-child(3) { animation-delay: 1.8s; }
  .cp-nm-chain li:nth-child(4) { animation-delay: 2.6s; }
  .cp-nm-chain li:nth-child(5) { animation-delay: 4.0s; }
  .cp-nm-done { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #6BCF6F; background: rgba(107,207,111,0.06); border: 1px solid rgba(107,207,111,0.20); border-radius: 8px; padding: 10px 12px; opacity: 0; animation: cpnmDone 6s ease-in-out infinite; }
  .cp-nm-done .mdi { font-size: 16px; flex: none; }
  @keyframes cpnmGreen { 0%,7% { color: rgba(255,255,255,0.28); } 15%,84% { color: #6BCF6F; } 93%,100% { color: rgba(255,255,255,0.28); } }
  @keyframes cpnmRetry { 0%,7% { color: rgba(255,255,255,0.28); } 15%,48% { color: #ffa657; } 56%,84% { color: #6BCF6F; } 93%,100% { color: rgba(255,255,255,0.28); } }
  @keyframes cpnmSpin { to { transform: rotate(360deg); } }
  @keyframes cpnmDone { 0%,60% { opacity: 0; transform: translateY(4px); } 72%,90% { opacity: 1; transform: none; } 97%,100% { opacity: 0; } }

  /* Person Search / Population Builder flip cards — the fixed 5:4
     aspect-ratio + overflow:hidden clipped the "Flip the card" CTA.
     Let the card size to the front face's content (the back face stays
     absolutely positioned and fits within that height). */
  .cp-flipgrid .cp-flipcard { aspect-ratio: auto; }
  .cp-flipgrid .cp-flipcard-front { position: relative; inset: auto; }


  /* ====================================================================
   * google-wallet.html — "Tap your Android phone." tap animation
   * ================================================================== */

  /* Center the phone frame explicitly and re-anchor the NFC graphic on the
     same vertical axis so the tap waves sit directly above the device. */
  .gw-tap-frame {
    display: block;
    width: -webkit-fit-content;
    width: fit-content;
    margin-inline: auto;
  }
  .gw-tap-phone { width: min(74vw, 300px); }
  .gw-tap-nfc { left: 50%; transform: translate(-50%, -45%); }


  /* ====================================================================
   * about.html — "FutureState" cursive hero
   * ================================================================== */

  /* The live-drawn signature SVG is sized by JS (opentype.js) to ~444px wide —
     wider than a phone — so the cursive "FutureState" AND the "About us" tag
     ran off the right edge (the tag was clipped entirely). The old CSS width
     rule couldn't win because JS sets the width inline, so force it with
     !important and let the height follow. The %-positioned tag then scales in.
     Also drop the tall min-height that left a large empty gap. */
  .about-hero { min-height: auto; padding-bottom: 56px; }
  /* The bottom "Scroll" cue is absolutely positioned; with the shorter
     mobile hero it collided with the signature/headline. It adds nothing on
     a touch device, so drop it on mobile. */
  .about-scroll-cue { display: none; }
  .about-hero-content { max-width: 100%; box-sizing: border-box; }
  .about-signature-wrap { max-width: 100%; }
  .about-signature-svg { width: 100% !important; max-width: 100% !important; height: auto !important; }
  .about-signature.about-signature-fallback { font-size: clamp(48px, 13vw, 92px); }
  /* The "About us" caption is absolutely positioned at left:88% — tucked under
     the "ate" of a WIDE desktop signature. On a narrow, centered mobile
     signature that flings it to the right edge, detached from the underline
     flourish. Center it under the signature instead. */
  .about-signature-tag { left: 50% !important; }
  /* ...and once the caption is centered, the flourish line (which on desktop
     sits to the LEFT of the caption on the same row) landed right through the
     middle of "ABOUT US" — reading as a strikethrough. Push it clearly BELOW
     the caption so it reads as a clean underline. */
  .about-signature-underline { margin-top: 32px !important; width: 44% !important; }
  .about-hero-title { font-size: clamp(24px, 6.6vw, 30px) !important; margin-top: 32px; }
  .about-hero-trio { letter-spacing: 0.16em; }


  /* ====================================================================
   * balanceu.html
   * ================================================================== */

  /* "More choice, day one." Trove section — the empty visual column added a
     tall block of dead space, and the portal background was pushed off to
     the left. Drop the empty column and center the portal art. */
  .trove-section .trove-visual { display: none; }
  .trove-section { background-position: center top; background-size: cover; }


  /* ====================================================================
   * cardsync.html
   * ================================================================== */

  /* Hero is `min-height: 100vh` + flex-centered (great full-screen on
     desktop). On a phone that floats the logo/headline in the middle with
     ~185px of dead space above it and ~135px below. Let the hero size to its
     content so it sits directly under the nav, matching the other product
     heroes (BalanceU/RollCall/Kiosk are all content-height). */
  .cs-page .phero.phero-light { min-height: auto; }

}

/* Reduced-motion: show the mobile Nerd Mode chain in its settled state. */
@media (max-width: 480px) and (prefers-reduced-motion: reduce) {
  .cp-nm-chain li,
  .cp-nm-chain li.retry .ic .mdi,
  .cp-nm-done { animation: none !important; }
  .cp-nm-chain li { color: #6BCF6F; }
  .cp-nm-done { opacity: 1; }
}