/* ============================================================
   Investwizz — about page, phone layout (≤ 640px)
   Loaded after mobile-base.css. The page's own <style> block
   sits in <body>, i.e. later in the cascade than this file, so
   selectors here carry a leading `body` to outrank them.
   Every rule lives inside the media query; desktop unchanged.
   Copy is never altered here — layout, size and spacing only.
   ============================================================ */

@media (max-width: 640px) {

  /* ---------- Hero: brand mark behind the copy ---------- */
  body .ahero { padding: 0 0 28px; }
  body .ahero-rhs {
    top: 0; right: 0; left: 0; transform: none;
    width: 100%; height: 340px; object-fit: cover; object-position: center;
    opacity: 0.6;
    -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 55%, transparent 100%);
  }
  body .ahero::after { display: none; }
  body .ahero::before {
    inset: 0 0 auto 0; height: 340px;
    background: linear-gradient(180deg, rgba(6,3,26,0.5) 0%, rgba(6,3,26,0.2) 40%, rgba(6,3,26,0.9) 100%);
  }
  body .ahero > .wrap { margin-left: 0; padding-left: var(--gutter); padding-right: var(--gutter); padding-top: 26px; }
  body .ahero-h1 { font-size: 2.1rem; margin-top: 14px; }
  body .ahero-lede { font-size: 0.95rem; margin-top: 14px; line-height: 1.55; }
  body .ahero-bullets { gap: 6px; max-width: none; }
  body .ahero-bullets li { white-space: normal; }
  body .ahero .risk-inline { font-size: 0.85rem !important; line-height: 1.5 !important; margin-top: 16px !important; }

  /* ---------- £430bn card (styling is in mobile-base.css) ---------- */
  body main > .wrap { padding-block: 20px !important; }
  body .cta-band--split { min-height: 0 !important; }

  /* ---------- Founders ---------- */
  body #founders { padding-top: 24px !important; }
  body #founders .stat-grid { gap: 16px !important; margin-bottom: 20px !important; }
  body #founders .lede { margin-top: 10px !important; }
  body .founder-card h3 { font-size: 1rem; }
  body .founder-card .role { font-size: 0.75rem; margin-bottom: 8px; }
  body .founder-card li { font-size: 0.8rem; gap: 8px; }

  /* ---------- What Investwizz is ---------- */
  body .wiw-section { padding: 36px 0; min-height: 0; }
  body .wiw-inner { padding: 0 var(--gutter); }
  body .wiw-center { padding: 22px 16px; border-radius: 18px; }
  body .wiw-h2 { font-size: 1.5rem; margin-top: 12px; }
  body .wiw-p { font-size: 0.85rem; line-height: 1.55; margin-top: 10px; }
  body .wiw-trust { margin-top: 18px; padding-top: 14px; gap: 8px; }
  body .wiw-trust-item { font-size: 0.78rem; }

  /* ---------- What we are not: stacked rows, image left ---------- */
  body .wwan-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 22px; }
  body .wwan-card { flex-direction: row; min-height: 0; border-radius: 18px; }
  body .wwan-img { flex: 0 0 38%; height: auto; }
  body .wwan-body { padding: 14px 12px; }
  body .wwan-num { font-size: 0.62rem; }
  body .wwan-body h3 { font-size: 0.92rem; margin-top: 6px; }
  body .wwan-body p { font-size: 0.75rem; line-height: 1.45; margin-top: 6px; }
  body #boundaries .risk-inline { font-size: 0.8rem; margin-top: 18px !important; }

  /* ---------- Get started: photo band on top, two-column card ---------- */
  body #start.ctab { padding: 150px 0 24px !important; }
  body .ctab-bg { inset: 0 0 auto 0; height: 230px; object-position: center 30%; }
  body .ctab::after {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 230px; z-index: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(6,3,26,0.15) 0%, rgba(6,3,26,0.4) 60%, var(--ink-900) 100%);
  }
  body .ctab-card { grid-template-columns: 1fr 1fr; border-radius: 20px; background: rgba(8,4,28,0.94); }
  body .ctab-left { padding: 16px 14px; }
  body #start .h-xl { font-size: 1.3rem; margin-top: 10px !important; line-height: 1.15; }
  body .ctab-left .lede { font-size: 0.72rem !important; margin-top: 8px !important; line-height: 1.45; }
  body .ctab-right { padding: 12px 10px; border-left: 1px solid rgba(139,92,246,0.18); border-top: none; }
  body .ctab-right .store-head { font-size: 0.54rem; margin-bottom: 8px; }
  body .ctab-right .store-row { gap: 8px; }
  body .ctab-right .fine { font-size: 0.6rem; padding-top: 8px; }
}