/* FluxFront — mobile-compact (homepage only).
   The owner wants phones to read like a scaled-down desktop: the SAME
   side-by-side layouts, just smaller — not columns collapsing into stacks.
   Every rule lives under max-width:900px; desktop is untouched.
   Overrides use !important deliberately: many section layouts are inline
   styles from the design handoff, and this sheet must win without editing
   that markup. */

@media (max-width: 900px) {

  /* --- Global scale-down: tighter type + rhythm, shorter page --- */
  .h2 { font-size: clamp(1.35rem, 4.6vw, 1.8rem) !important; }
  .lead { font-size: 0.95rem !important; }
  .section-pad { padding-block: 44px !important; }
  .section-head .h2 { margin-top: 10px; }

  /* section-rhythm's full-viewport sections mean one section per screen —
     on a phone that reads as endless scrolling. Compact instead. */
  #why, #showcase, #voice, #workflow, #platform, #devices,
  #pricing, #switching, #faq { min-height: 0 !important; }

  /* --- #why: keep the 4 cards as a 2x2 grid --- */
  .godig-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .godig-card { padding: 14px 12px !important; }
  .godig-card h3 { font-size: 0.95rem !important; }
  .godig-card p { font-size: 0.78rem !important; line-height: 1.45 !important; }
  /* the oversized "Receptionist" span scales with the heading on phones */
  #why .h2 span { font-size: inherit !important; }

  /* --- #showcase: screenshot beside copy, like desktop --- */
  .tabpanel { grid-template-columns: 1.25fr 1fr !important; gap: 14px !important; align-items: center; }
  .tab-copy h3 { font-size: 1rem !important; }
  .tab-copy p, .tab-copy li { font-size: 0.78rem !important; }

  /* --- #voice: copy and call-flow card side by side; card small --- */
  .split { grid-template-columns: 1.15fr 1fr !important; gap: 18px !important; }
  .agent-points { font-size: 0.8rem !important; }
  .agent-points li { font-size: 0.8rem !important; }
  .callcard-img img { max-width: 100% !important; }
  .agent-actions { flex-wrap: wrap; gap: 8px !important; }
  .agent-actions .btn { padding: 10px 14px !important; font-size: 0.8rem !important; }

  /* --- #workflow: the three numbered points stay in one row --- */
  #workflow ol { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; }
  #workflow ol b { font-size: 0.9rem !important; }
  #workflow ol span { font-size: 0.75rem !important; }
  #workflow figure { max-width: 560px !important; }

  /* --- #platform (Advantage): all six pills visible, panel side-by-side --- */
  #platform [role="tablist"] { flex-wrap: wrap !important; justify-content: center !important; overflow-x: visible !important; }
  #platform [role="tablist"] [role="tab"] { padding: 7px 12px !important; font-size: 0.78rem !important; }
  #platform [data-hs-prev], #platform [data-hs-next] { display: none !important; }
  #platform [role="tabpanel"] { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  #platform [role="tabpanel"] h3 { font-size: 1.05rem !important; }
  #platform [role="tabpanel"] p { font-size: 0.8rem !important; }
  #platform .hs { min-height: 0 !important; }

  /* --- #pricing: the two plans stay side by side --- */
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; max-width: none !important; gap: 10px !important; }
  .plan { padding: 18px 12px !important; }
  .plan-name { font-size: 1.05rem !important; }
  .plan-price { font-size: 1.9rem !important; }
  .plan-sub, .plan-intro { font-size: 0.72rem !important; }
  .plan-list li { font-size: 0.72rem !important; padding-left: 20px !important; }
  .plan-flag { font-size: 0.56rem !important; padding: 4px 9px !important; }
  .plan .btn { padding: 10px 12px !important; font-size: 0.8rem !important; }
  .guarantees li { font-size: 0.72rem !important; }

  /* --- #switching: copy beside the roadmap image --- */
  #switching .wrap > div { grid-template-columns: 1.1fr 1fr !important; gap: 18px !important; }
  #switching li b { font-size: 0.95rem !important; }
  #switching li span { font-size: 0.75rem !important; }

  /* --- #faq: two independent columns, like desktop --- */
  .faq { grid-template-columns: 1fr 1fr !important; gap: 0 14px !important; }
  .faq summary { font-size: 0.8rem !important; }
  .faq p { font-size: 0.75rem !important; }
}