/* FluxFront — section rhythm. Makes each major section fill the viewport so a scroll
   reads as its own page, and keeps consecutive sections on different backgrounds.
   Colours stay inside the existing set: cream, --surface, --ink-deep. */

#why, #showcase, #voice, #workflow, #platform, #devices, #pricing, #switching, #faq {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

#why > .wrap,
#showcase > .wrap,
#voice > .wrap,
#workflow > .wrap,
#platform > .wrap,
#devices > .wrap,
#pricing > .wrap,
#switching > .wrap,
#faq > .wrap { width: 100%; }

/* Alternation. The section files already set showcase / workflow / pricing / faq to
   --surface and voice to --ink-deep; these fill the gaps so no two neighbours match. */
#why       { background: var(--cream); padding-top: clamp(24px, 3vw, 48px); }
#workflow  { background: var(--cream); }
#platform  { background: var(--surface); }
#devices   { background: var(--cream); }
#switching { background: var(--cream); }

/* The Advantage panels swap height as the user steps through, so pin the carousel's
   own box rather than letting the section jump on every click. */
#platform .hs { min-height: 460px; }
#showcase .tabpanel { align-content: center; }

/* Two independent FAQ columns: opening an answer grows only its own column,
   so the other side never shifts. */
.faq > div { min-width: 0; }
.faq > div > details:first-child { border-top: 1px solid var(--hairline); }

/* Only bail out on genuinely cramped viewports. */
@media (max-height: 560px) {
  #why, #showcase, #voice, #workflow, #platform, #devices, #pricing, #switching, #faq {
    min-height: 0;
    display: block;
  }
}