/* ============================================================
   Investwizz — home page, phone layout (≤ 640px)
   Loaded by index.html after mobile-base.css (banner, nav, type
   scale, sign-up card and footer live there). Every rule lives
   inside the media query, so tablet and desktop are unchanged.
   Copy is never altered here — layout, size and spacing only.
   ============================================================ */

/* Step icons exist in the markup for the phone layout only. */
.step-ico { display: none; }

@media (max-width: 640px) {

  /* ---------- Hero ---------- */
  .hero { padding-top: 0; }
  .hero-bg-img {
    display: block;
    position: absolute; top: 0; left: 0; right: 0;
    width: 100%; height: 400px;
    background-position: center 64%;
    mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
    mask-composite: initial; -webkit-mask-composite: initial;
  }
  .hero-bg-img::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6,3,26,0.55) 0%, rgba(6,3,26,0.22) 45%, rgba(6,3,26,0.85) 100%);
  }
  .hero .section-head { padding-top: 26px; min-height: 330px; }
  .hero h1 { font-size: 2.1rem; margin-top: 16px !important; }
  /* scoped to the hero copy only — the £430bn card also lives inside .hero */
  .hero .section-head .lede { display: block; font-size: 0.98rem; margin-top: 16px; text-align: left; line-height: 1.5; }

  /* ---------- Planner ---------- */
  .hero .planner { margin-top: 10px !important; border-radius: 20px; }
  .planner-controls, .planner-output { padding: 18px 14px; }
  .field { margin-bottom: 18px; }
  .field-label { font-size: 0.66rem; letter-spacing: 0.08em; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .field-label .val { font-size: 0.95rem; }
  .planner-controls .fine { font-size: 0.78rem; margin-bottom: 12px !important; }

  /* Goals: 2 × 2 */
  .planner-controls > .field:first-child .chip-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .planner-controls > .field:first-child .chip { font-size: 0.8rem; padding: 10px 8px; }

  /* Comfort zone: 3 + 2, all equal width within each row */
  .planner-controls > .slider-row + .field .chip-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .planner-controls > .slider-row + .field .chip { grid-column: span 2; font-size: 0.78rem; padding: 9px 4px; }
  .planner-controls > .slider-row + .field .chip:nth-child(n+4) { grid-column: span 3; }

  /* Sliders: three across, like the mock-up */
  .slider-row { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
  .slider-label { font-size: 0.56rem; letter-spacing: 0.05em; white-space: normal; line-height: 1.25; min-height: 2.5em; }
  .slider-val { font-size: 0.95rem; margin: 2px 0 6px; }
  input[type=range] { height: 5px; }
  input[type=range]::-webkit-slider-thumb { width: 18px; height: 18px; }
  input[type=range]::-moz-range-thumb { width: 18px; height: 18px; }

  .risk-warning { padding: 12px; margin-top: 14px; }
  .risk-warning h4 { font-size: 0.72rem; }
  .risk-warning .rw-section-title { font-size: 0.8rem; padding: 8px 10px; }
  .risk-warning .rw-section-body { font-size: 0.78rem; }
  .zone-one { font-size: 0.9rem; }
  .zone-line, .zone-list { font-size: 0.78rem; }

  /* Phone order: goal → sliders → comfort zone → projected value → zone copy → risk warning.
     .planner-controls becomes display:contents so its children and .planner-output share
     the .planner grid and can be re-ordered without touching the DOM. */
  .planner-controls { display: contents; }
  /* selectors follow the DOM (children of .planner-controls), even though they lay out in the .planner grid */
  .planner-controls > .field, .planner-controls > .fine, .planner-controls > .slider-row { margin-left: 14px; margin-right: 14px; }
  .planner-controls > .field:first-child { margin-top: 18px; }
  .planner > .planner-output { order: 1; margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .planner-controls > .risk-warning { order: 2; margin: 14px 14px 18px; }

  /* Comfort-zone copy: collapsed to heading + "Best for" line; tap to expand */
  .zone-copy { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .zone-copy:not(.is-open) > *:not(.zone-one):not(.zone-one + .zone-line) { display: none; }
  .zone-copy .zone-one { padding-right: 26px; }
  .zone-copy .zone-one::after {
    content: ""; position: absolute; right: 4px; top: 5px; width: 8px; height: 8px;
    border-right: 2px solid var(--text-45); border-bottom: 2px solid var(--text-45);
    transform: rotate(45deg); transition: transform .2s;
  }
  .zone-copy.is-open .zone-one::after { transform: rotate(-135deg); top: 9px; }
  .zone-copy:not(.is-open) .zone-one + .zone-line { margin-bottom: 0; }

  /* Planner output */
  .proj-big { font-size: 2.6rem; }
  .planner-output .muted { font-size: 0.84rem !important; margin-top: 12px !important; }
  .risk-prominent { font-size: 0.86rem; padding: 12px; margin-top: 16px !important; }
  .risk-prominent::before {
    content: "!"; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
    background: var(--gold-deep); color: #fff; font-size: 12px; font-weight: 800; line-height: 1;
    display: grid; place-items: center;
  }
  .planner-output .stat-grid { margin-top: 22px !important; }
  .cash-comp { padding: 14px 16px !important; }
  .cash-comp .fine { font-size: 0.68rem !important; }
  .cash-comp-val { font-size: 1.35rem; }
  .donut-wrap { gap: 16px; margin-top: 22px !important; }
  .donut-wrap > [data-out="donut"] { width: 110px !important; height: 110px !important; }
  .donut-legend { font-size: 0.82rem; gap: 6px; }
  .donut-legend .li-etf { font-size: 0.66rem; }
  .planner-output .btn-block { margin-top: 26px !important; }

  /* ---------- Cost of waiting (card styling is in mobile-base.css) ---------- */
  .cost-waiting-inline { margin-top: 22px !important; margin-bottom: 22px !important; }

  /* ---------- Trust strip ---------- */
  .trust-strip { padding: 18px 0; }
  .trust-bar { flex-direction: column; align-items: stretch; text-align: left; gap: 12px; font-size: 0.74rem; }
  .tb-item { display: block; white-space: normal; position: relative; padding-left: 26px; line-height: 1.45; }
  .tb-item svg { position: absolute; left: 0; top: 2px; width: 16px; height: 16px; }
  .tb-item:nth-child(2) { padding-left: 56px; }
  .tb-item:nth-child(2) svg { display: none; }
  .tb-item:nth-child(2)::before {
    content: ""; position: absolute; left: 0; top: 0;
    width: 44px; height: 23px;
    background: url("../img/fscs-logo.png") center / contain no-repeat;
    filter: brightness(1.5);
  }

  /* ---------- The Investwizz difference: 2 × 2 photo cards ---------- */
  #difference .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px !important; margin-top: 24px !important; }
  .feat--img { flex-direction: row; min-height: 300px; }
  .feat--img .feat-body {
    flex: 0 0 68%; max-width: 68%;
    padding: 14px 12px;
    background: linear-gradient(to right, rgba(7,3,22,1) 50%, rgba(7,3,22,0.75) 80%, transparent 100%);
  }
  .feat--img .feat-body .feat-ico { width: 34px; height: 34px; border-radius: 10px; margin-bottom: 10px; }
  .feat--img .feat-body .feat-ico svg { width: 16px; height: 16px; }
  .feat--img .feat-body h3 { font-size: 0.86rem; line-height: 1.2; margin-bottom: 6px; }
  .feat--img .feat-body p { font-size: 0.7rem; line-height: 1.45; }
  .feat--img .feat-body p + p { margin-top: 6px; }
  .feat--img .feat-img {
    position: absolute; right: 0; top: 0;
    width: 100%; height: 100%; min-height: 0;
    background-size: cover;
    background-position: 72% center !important;
    mask-image: linear-gradient(to right, transparent 0%, black 30%, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 100%);
  }
  #difference .stat-grid .feat--img:nth-child(4) .feat-img {
    mask-image: linear-gradient(to right, transparent 0%, black 30%, black 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 30%, black 100%);
  }

  /* Black box vs Investwizz: side by side */
  .vs-box { grid-template-columns: 1fr auto 1fr; gap: 8px; margin-top: 14px !important; }
  .vs-mid { display: block; font-size: 0.72rem; }
  .vs-col { padding: 14px 12px; border-radius: 14px; }
  .vs-tag { font-size: 0.58rem; letter-spacing: 0.08em; margin-bottom: 8px; }
  .vs-col ul { gap: 8px; }
  .vs-col li { font-size: 0.7rem; gap: 5px; line-height: 1.4; }

  /* ---------- See it in action ---------- */
  .video-poster-wrap { margin-top: 22px; border-radius: 16px; }

  /* ---------- How it works: stacked rows with icon ---------- */
  .step-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 24px !important; }
  .step-grid .card.step {
    display: grid; grid-template-columns: 48px 1fr; column-gap: 14px;
    align-items: start; padding: 16px 14px;
  }
  .step-ico {
    display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: 50%;
    grid-column: 1; grid-row: 1 / span 3;
    background: rgba(124,58,237,0.18); border: 1px solid var(--line-lilac); color: var(--lilac-200);
    align-self: center;
  }
  .step-grid .card.step .step-num, .step-grid .card.step h3, .step-grid .card.step p { grid-column: 2; }
  .step-grid .card.step h3 { font-size: 1rem; margin: 2px 0 4px; }
  .step-grid .card.step p { font-size: 0.8rem; line-height: 1.5; }
  .step-connected::after { display: none; }
  #how .fine.center { text-align: left; margin-top: 14px !important; }

  /* ---------- Testimonials: 2 × 2 ---------- */
  #customers .stat-grid { grid-template-columns: 1fr 1fr; gap: 12px !important; margin-top: 24px !important; }
  #customers .card-pad { padding: 14px 12px; }
  .quote-stars { font-size: 0.72rem; letter-spacing: 1px; margin-bottom: 8px; }
  .quote blockquote { font-size: 0.72rem; line-height: 1.45; margin-bottom: 10px; }
  .quote figcaption { font-size: 0.62rem; line-height: 1.5; }

  /* ---------- Your money, protected: stacked rows with icon ---------- */
  #trust .section-head + div { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 24px !important; }
  .trust-card {
    display: grid !important; grid-template-columns: 44px 1fr; column-gap: 12px;
    align-items: start; min-height: 0; padding: 16px 14px;
  }
  .trust-card > .trust-ava, .trust-card > .feat-ico {
    grid-column: 1; grid-row: 1 / span 2;
    width: 44px; height: 44px; margin-bottom: 0;
  }
  .trust-card > .feat-ico { border-radius: 50%; }
  .trust-card > .feat-ico svg { width: 18px; height: 18px; }
  .trust-card > h3 { grid-column: 2; grid-row: 1; font-size: 0.95rem !important; line-height: 1.25; }
  .trust-card > p { grid-column: 2; grid-row: 2; font-size: 0.78rem !important; margin-top: 6px !important; line-height: 1.5; }
  #trust > .wrap + div { position: static !important; display: flex; justify-content: center; margin-top: 18px; }

  /* ---------- Pricing ---------- */
  .price-grid { gap: 14px; margin-top: 24px !important; }
  .price .amt, .amt-big { font-size: 2.2rem; }
  .price li { font-size: 0.85rem; }
  .promo-note, .promo-renews { font-size: 0.85rem; }
  #pricing .fine.center { text-align: left; }

  /* ---------- Get started: photo band on top (card is in mobile-base.css) ---------- */
  .cta-photo-bg { opacity: 1; inset: 0 0 auto 0; height: 230px; background-position: 50% 40%; }
  .cta-photo-bg::after { background: linear-gradient(to bottom, rgba(6,3,26,0.15) 0%, rgba(6,3,26,0.4) 60%, var(--ink-900) 100%); }
}