/* ============================================================
   Investwizz — phone layout, shared base (≤ 640px)
   Loaded by every marketing page after styles.css, before the
   page's own *-mobile.css. Every rule lives inside the media
   query, so tablet and desktop rendering is unchanged.
   Copy is never altered here — layout, size and spacing only.
   ============================================================ */

@media (max-width: 640px) {

  :root { --gutter: 16px; }
  html { scroll-padding-top: calc(var(--iw-banner-h, 44px) + 64px); }

  /* ---------- ISA banner + nav ---------- */
  .isa-banner {
    flex-direction: column; gap: 1px;
    padding: 6px 12px;
    font-size: 0.68rem; line-height: 1.4;
  }
  .isa-banner a { font-size: 0.68rem; }
  /* --iw-banner-h is set by assets/js/mobile-nav.js from the banner's real height */
  .nav { top: var(--iw-banner-h, 44px); }
  .nav-inner { padding: 8px var(--gutter); gap: 10px; }
  .brand img { height: 36px; }
  .nav-cta .btn { padding: 9px 14px; font-size: 0.78rem; }
  .nav-toggle { padding: 4px; margin-right: -4px; }
  .nav-toggle svg { width: 24px; height: 24px; }

  /* Sticky bottom CTA is redundant on phones: the nav CTA stays on screen. */
  .sticky-cta { display: none; }
  body { padding-bottom: 0; }

  /* ---------- Shared type scale ---------- */
  .section { padding-block: 40px; }
  .section--tight { padding-block: 32px; }
  .kicker { font-size: 0.6rem; letter-spacing: 0.14em; padding: 5px 10px; gap: 6px; }
  .h-xl { font-size: 1.8rem; letter-spacing: -0.025em; line-height: 1.1; }
  .h-lg { font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.12; }
  .lede { font-size: 0.95rem; line-height: 1.5; }
  .section-head .lede { margin-top: 12px; }
  .fine { font-size: 0.78rem; line-height: 1.5; }
  .card { border-radius: 18px; }
  .card-pad { padding: 16px 14px; }
  .btn { padding: 12px 20px; font-size: 0.9rem; }
  .badge { font-size: 0.62rem; padding: 4px 9px; }
  .risk-strip { font-size: 0.8rem; padding: 8px 14px; text-align: left; align-items: flex-start; }
  .risk-strip svg { margin-top: 3px; }
  .risk-inline { font-size: 0.85rem; }
  .cta-reassure { font-size: 0.7rem; }
  .vs-list li { font-size: 0.85rem; padding: 8px 0; gap: 10px; }

  /* ---------- Calculator disclaimer + disclosures ---------- */
  .planner-disclaimer { padding: 14px 12px 12px; border-radius: 14px; }
  .planner-disclaimer .fine { font-size: 0.78rem; }
  .disclosure-item { border-color: var(--line-lilac); border-radius: 10px; }
  .disclosure-title { font-size: 0.72rem; padding: 10px 12px; }
  .disclosure-item > .fine { padding: 0 12px 12px; margin-top: 4px !important; }

  /* ---------- Cost-of-waiting photo card (PDF p.2: compact, copy left ~60%, face visible right) ---------- */
  .cta-band { border-radius: 20px; }
  .cta-band::before, .cta-band::after { border-radius: 20px; }
  .cta-band--split { min-height: 0; }
  .cta-band--split .cta-band-content { max-width: 62%; padding: 16px 14px 18px; }
  .cta-band--split .cta-band-img { position: absolute; inset: 0; }
  .cta-band--split .cta-band-img img { object-position: 82% 30%; }
  .cta-band--split .cta-band-img::after {
    background: linear-gradient(to right, #1b0746 0%, #1b0746 36%, rgba(27,7,70,0.85) 54%, rgba(27,7,70,0.2) 76%, transparent 100%);
  }
  .cta-band .kicker { margin-bottom: 8px !important; font-size: 0.52rem; padding: 4px 9px; }
  .cta-band .display { font-size: 1.85rem !important; }
  .cta-band .lede { font-size: 0.72rem; margin-top: 6px !important; line-height: 1.4; }
  .cta-band .fine { font-size: 0.58rem; margin-top: 6px !important; line-height: 1.4; }
  .cta-band .btn-lg { padding: 9px 14px; font-size: 0.74rem; margin-top: 12px !important; white-space: normal; text-align: center; }

  /* ---------- Get started: two-column card (photo band is per page) ---------- */
  #start > .wrap { min-height: 0 !important; display: block !important; padding: 150px var(--gutter) 24px !important; }
  #start .signup { padding: 16px 14px; border-radius: 20px; background: rgba(8,4,28,0.94); }
  #start .signup::before { border-radius: 20px; }
  #start .signup-grid { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  #start .kicker { font-size: 0.54rem; padding: 4px 8px; letter-spacing: 0.12em; }
  #start .h-xl { font-size: 1.3rem; margin-top: 10px !important; line-height: 1.15; }
  #start .lede { font-size: 0.72rem; line-height: 1.45; margin-top: 8px !important; }
  #start .cta-reassure { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 0.64rem; margin-top: 10px !important; }
  #start .cta-reassure span::before { content: "✓"; width: auto; height: auto; background: none; color: var(--emerald); font-weight: 700; }
  #start .start-support { font-size: 0.64rem; margin-top: 6px; }
  #start .signup-form { padding: 10px; border-radius: 12px; }
  .store-head { font-size: 0.54rem; letter-spacing: 0.06em; margin-bottom: 8px; }
  .store-row { gap: 8px; }
  .store-item { flex-direction: row; align-items: center; gap: 5px; }
  .store-badge { padding: 5px 6px; gap: 5px; border-radius: 8px; flex: 1; min-width: 0; }
  .store-badge svg { width: 14px; height: 14px; }
  .store-badge .bt small { font-size: 0.42rem; }
  .store-badge .bt strong { font-size: clamp(0.5rem, 2.5vw, 0.64rem); white-space: normal; line-height: 1.05; }
  .store-qr { width: 40px; height: 40px; padding: 3px; border-radius: 6px; align-self: center; }
  #start .signup-form .fine { font-size: 0.6rem; line-height: 1.45; margin-top: 8px !important; }

  /* ---------- Footer (PDF p.10: brand block + three link columns on one row) ---------- */
  .footer { padding-block: 26px 18px; }
  .footer-top { grid-template-columns: 112px repeat(3, 1fr); gap: 10px 8px; align-items: start; }
  .footer-brand img { height: 28px; margin-bottom: 10px; }
  .footer-social { grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 0; }
  .footer-social .badge { font-size: 0.52rem; padding: 3px 5px; justify-content: center; gap: 0; }
  .footer h5 { font-size: 0.54rem; letter-spacing: 0.1em; margin-bottom: 8px; }
  .footer ul { gap: 6px; }
  .footer a { font-size: 0.64rem; }
  .reg-box { margin-top: 18px; padding-top: 12px; }
  .reg-text { font-size: 0.75rem; line-height: 1.5; }
  .footer-bottom { flex-direction: column; gap: 4px; font-size: 0.66rem; margin-top: 12px; padding-top: 10px; }
}