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

@media (max-width: 640px) {

  /* ---------- Hero ---------- */
  body .ph-section { padding-top: 26px; padding-bottom: 36px; }
  body .ph-section > .wrap { padding-left: var(--gutter); }
  body .ph-text { margin-left: 0; }
  body .ph-text .kicker { margin-bottom: 12px; }
  body .ph-headline { font-size: 2.2rem; }
  body .ph-body { font-size: 0.9rem; margin-top: 14px; line-height: 1.55; }
  body .ph-risk { font-size: 0.85rem; margin-top: 12px; }

  /* ---------- Tiers ---------- */
  body #pricing { padding-top: 28px; }
  body #pricing .price-grid { gap: 14px; }
  body #pricing .price.featured { transform: none !important; }
  body .price .amt, body .amt-big { font-size: 2.2rem; }
  body .price li { font-size: 0.85rem; }
  body .promo-note, body .promo-renews { font-size: 0.85rem; }
  body #pricing .fine.center { text-align: left; }

  /* ---------- Cash ISA changes ---------- */
  body .isa-section { padding-block: 40px; }
  body .isa-section .kicker { margin-bottom: 14px; }
  body .isa-headline { font-size: 1.7rem; margin-bottom: 14px; }
  body .isa-body { font-size: 0.88rem; margin-bottom: 20px; line-height: 1.55; }
  body .isa-facts-card { padding: 14px 12px; border-radius: 16px; }
  body .isa-facts-label { font-size: 0.58rem; margin-bottom: 10px; }
  body .isa-facts-table thead th { font-size: 0.56rem; padding: 0 6px 8px; }
  body .isa-facts-table tbody td { padding: 8px 6px; font-size: 0.72rem; line-height: 1.35; }
  body .isa-facts-table tbody td:first-child { font-size: 0.7rem; }
  body .isa-badge-unch { margin: 4px 0 0; font-size: 0.56rem; padding: 2px 7px 2px 6px; }
  body .isa-facts-card .fine { font-size: 0.72rem; margin-top: 10px !important; padding-top: 10px !important; }
  body .isa-accordion { margin-top: 10px; gap: 8px; }
  body .isa-accord-item summary { padding: 12px 14px; font-size: 0.86rem; gap: 10px; }
  body .isa-accord-icon { width: 24px; min-width: 24px; height: 24px; font-size: 1rem; }
  body .isa-accord-body { padding: 0 14px 12px; font-size: 0.8rem; line-height: 1.55; }

  /* ---------- Fee calculator ---------- */
  body .fc-side { display: none; }
  body .fc-section { padding-top: 40px; padding-bottom: 20px; }
  body .fc-section .planner { margin-top: 22px !important; border-radius: 20px; }
  body .fc-section .planner-controls, body .fc-section .planner-output { padding: 18px 14px; }
  body .fc-section .field { margin-bottom: 16px; }
  body .fc-section .field-label { font-size: 0.6rem; }
  body .fc-section .field-label .val { font-size: 0.85rem; }
  body .fc-section .field .fine { font-size: 0.72rem; }
  /* Compare-against: 3 + 2, same technique as the home page's comfort-zone chips,
     instead of leaving the 5th chip to wrap alone onto its own row */
  body .fc-section .chip-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
  body .fc-section .chip-row .chip { grid-column: span 2; font-size: 0.78rem; padding: 8px 4px; }
  body .fc-section .chip-row .chip:nth-child(n+4) { grid-column: span 3; }
  /* Custom-fee row: bigger tap targets */
  body .fc-fee-row input[type="number"] { padding: 12px 14px; font-size: 0.95rem; }
  body .fc-fee-row .fc-apply { padding: 12px 16px; font-size: 0.85rem; }
  body .fc-section .proj-big { font-size: 2.4rem; }
  body .fc-section .planner-output .muted { font-size: 0.85rem !important; }
  body .fc-section .badge[data-out="breakeven"] { font-size: 0.8rem !important; padding: 10px 12px !important; }
  body .fc-section .planner-output .stat-grid { grid-template-columns: 1fr 1fr; gap: 8px !important; margin-top: 16px !important; }
  body .fc-section .planner-output .stat-grid .card { padding: 12px !important; }
  body .fc-section .planner-output .stat-grid .fine { font-size: 0.6rem; height: auto !important; }
  body .fc-section .planner-output .h-md { font-size: 1.1rem; }

  /* ---------- Get started: photo band on top (card is in mobile-base.css) ---------- */
  body #start { padding-top: 0 !important; }
  body #start .signup { transform: none; }
  body .start-img-right { inset: 0 0 auto 0; height: 230px; object-position: center 30%; }
  body #start::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%);
  }
}