/* ============================================================
   Platform template - page-level CSS (T7, YourSpace and AncillaryHUB)
   Figma: YourSpace desktop 1331:138344, mobile 1331:137714; Ancillary HUB
   desktop 1331:137969, mobile 1331:137427. No tablet frame: 768-1024
   follows the mobile frame.

   Every section is a shared class that carries its own look and gutters; this
   file holds the page's vertical rhythm (the neighbouring-background rule:
   --space-section when the neighbour's background matches,
   --space-section-alt when it differs). The AncillaryHUB re-skin is the
   sections' own hub variants, switched by the template.
   ============================================================ */

/* ── Hero (YourSpace) ─────────────────────────────────────────
   The YourSpace frame (1331:138344) sets the heading and lead 871 wide
   (the product frames' 750), so "YourSpace, a platform built by us and run
   by you" takes two lines, and its mobile frame (1331:137714) has a 624 hero
   (product's 600). AncillaryHUB's wider text and taller mobile hero are the
   indigo variant's own. */
.platform:not(.platform--hub) .page-hero--product .page-hero__content { max-width: 871px; }
/* The curve follows AncillaryHUB's (the indigo variant's) on every platform
   page, rather than the product hero's off-centre one (Alex, 28 Oct): centred
   with its bottom at 681 on desktop, and the mobile circle from 1024 down */
.platform:not(.platform--hub) .page-hero--product .page-hero__bg { clip-path: ellipse(100% 720px at 50% 0); }
@media (max-width: 1024px) {
    .platform:not(.platform--hub) .page-hero--product .page-hero__bg { clip-path: ellipse(183.2% 720px at 47.84% -120px); }
}
@media (max-width: 767px) {
    .platform:not(.platform--hub) .page-hero--product { min-height: 624px; }
}

/* The benefit cards follow the white hero: 40 above (the frame), 80 below,
   because the overview after them is cream (YourSpace) or pale indigo (HUB) */
.platform__section--benefits {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section-alt);
}
/* Every band after that differs from its neighbours (cream or pale, navy or
   indigo, cream or white, white), so 80 above and below (48 on tablet and mobile) */
.platform__section--overview,
.platform__section--steps,
.platform__section--why,
.platform__section--faq {
    padding-top: var(--space-section-alt);
    padding-bottom: var(--space-section-alt);
}
/* Full-bleed: the AI panel pads itself */
.platform__section--ai { padding: 0; }

@media (max-width: 1024px) {
    /* Mobile frames: 32 above the benefit cards (1331:137731, HUB 1331:137470) */
    .platform__section--benefits { padding-top: 32px; }
}