/* ================================================================
   MOBILE RESTYLE v1 (2026-10-20)
   Loaded after landing.css; affects only screens <= 768px.
   Goals: wider content (no box-in-box), readable type, real reviews
   visible, hero text legible on the photo, nothing hidden by the
   floating CTA. Brand colours and fonts are unchanged.
================================================================ */
@media (max-width: 768px) {

  :root {
    --m-gutter: 16px;
    --m-accent-light: #6fb3e6;          /* accent that passes contrast on dark/photo */
    --m-muted: rgba(255, 255, 255, 0.62); /* was 0.35-0.38: too faint */
    --m-card-bg: rgba(255, 255, 255, 0.035);
    --m-card-border: rgba(255, 255, 255, 0.08);
  }

  html { -webkit-text-size-adjust: 100%; }
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } /* room for floating CTA */

  /* ── 1. Sections: drop the outer "box", keep one card level ── */
  .pain-wrap,
  .tc-wrap,
  .specs-wrap,
  #accessories.section,
  #awards.section,
  .svc-block,
  .ld-wrap {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
    width: 100% !important;
    max-width: none !important;
  }
  .svc-block-glow, .ld-glow { opacity: .55; }

  #accessories.section,
  #awards.section,
  #history.section,
  #buyer-beware.section,
  #verify.section,
  #lead.section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }
  #history.section,
  #buyer-beware.section,
  #verify.section,
  #lead.section {
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter) !important;
  }

  /* thin divider between sections instead of the boxes */
  #premium, #technology, #specs, #accessories, #history, #awards,
  #reviews, #buyer-beware, #verify, #lead, #contacts {
    position: relative;
  }
  #technology::before, #specs::before, #accessories::before, #history::before,
  #awards::before, #reviews::before, #buyer-beware::before, #lead::before {
    content: "";
    position: absolute;
    top: 0; left: var(--m-gutter); right: var(--m-gutter);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(41,111,161,.45), transparent);
  }

  /* ── 2. Headings: consistent scale, no overflow ── */
  h2,
  .pain-title, .tc-title, .specs-title {
    font-size: 28px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
    overflow-wrap: break-word;
    hyphens: manual;
    text-wrap: balance;
  }
  .pain-title__muted, .tc-title-accent, .specs-title__muted {
    color: var(--m-muted) !important;
  }
  .eyebrow, .pain-eyebrow, [class*="eyebrow"] {
    font-size: 12px !important;
    letter-spacing: .14em;
  }

  /* body copy: min 15px on mobile, 13px for secondary lines */
  section p { font-size: max(15px, 1em); line-height: 1.55; }
  .thv-label { font-size: 12px !important; }
  .pain-bridge__label { font-size: 13px !important; }
  #buyer-beware li span,
  #buyer-beware span,
  #lead span { font-size: max(13px, 1em); }

  /* ── 3. Hero: title full width, legible on the photo ── */
  .hero-title-new {
    max-width: 100% !important;
    width: auto !important;
    font-size: 36px !important;
    line-height: 1.05 !important;
    text-shadow: 0 2px 18px rgba(0,0,0,.45);
  }
  .hero-title-new .accent { color: var(--m-accent-light) !important; }
  .hero-subtitle-new {
    font-size: 15px !important;
    text-shadow: 0 1px 10px rgba(0,0,0,.55);
  }
  .hero-slide-overlay {
    background:
      linear-gradient(180deg, rgba(4,10,18,.78) 0%, rgba(4,10,18,.35) 34%, rgba(4,10,18,0) 55%),
      linear-gradient(0deg, rgba(4,10,18,.85) 0%, rgba(4,10,18,.35) 22%, rgba(4,10,18,0) 40%) !important;
  }

  /* ── 4. Reviews: show them on mobile (real customer reviews) ── */
  #reviews {
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #reviews .rv-outer { padding: 0 var(--m-gutter); }

  /* ── 5. Service features: icon + text in a compact row, full width ── */
  .svc-feature {
    display: grid !important;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px !important;
    text-align: left !important;
  }
  .svc-feature-icon { width: 44px !important; height: 44px !important; margin: 0 !important; }
  .svc-feature-body { width: auto !important; min-width: 0; }
  .svc-feature-body h4 { font-size: 16px !important; margin: 0 0 4px !important; }
  .svc-feature-body p { font-size: 14px !important; line-height: 1.5; margin: 0; }

  /* ── 6. Buttons: no shouting caps, comfortable tap size ── */
  .bw-auth-link {
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 16px !important;
    min-height: 52px;
  }
  .btn, .ft-call-btn, .floating-cta { min-height: 48px; }
  .floating-cta { bottom: calc(12px + env(safe-area-inset-bottom)) !important; }

  /* ── 7. Cards: one consistent look ── */
  .svc-feature,
  .ld-ben, .bw-item, .bw-risk, .bw-benefit {
    background: var(--m-card-bg);
    border-color: var(--m-card-border);
    border-radius: 16px;
  }
}

/* very small phones */
@media (max-width: 360px) {
  :root { --m-gutter: 14px; }
  h2, .pain-title, .tc-title, .specs-title { font-size: 25px !important; }
  .hero-title-new { font-size: 32px !important; }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}