/* Page shell for the redesign (Figma: home / Frame 5 + Main, nodes 6755:3532 / 6755:3533). Frame 5 is the full-bleed #F2F3F5 canvas; Main is the centred 1180px column that every section stacks inside, 200px apart. */ .fl-redesign body { background: var(--fl-surface); } /* Legacy (pre-redesign) page content is hidden while sections are rebuilt. Drop the data-fl-legacy attribute on to bring the old page back. */ [data-fl-legacy="hidden"] main:not(.fl-main) { display: none; } .fl-page { display: flex; justify-content: center; width: 100%; overflow-x: hidden; background: var(--fl-surface); } .fl-main { display: flex; flex-direction: column; gap: var(--fl-section-gap); box-sizing: border-box; width: 100%; max-width: var(--fl-main-width); padding: var(--fl-main-pad-top) 0 var(--fl-main-pad-bottom); font-family: var(--fl-font-sans); color: var(--fl-text); } html.fl-redesign h1, html.fl-redesign h2 { text-wrap: balance; } html.fl-redesign p { text-wrap: pretty; } .fl-main > [id] { scroll-margin-top: 112px; } /* Sections that break out of the 1180px column (Figma: Frame 6, Footer). */ .fl-main > .fl-bleed { width: 100vw; margin-left: calc(50% - 50vw); } @media (max-width: 1219px) { :root { --fl-page-gutter: 24px; } .fl-main { padding-left: var(--fl-page-gutter); padding-right: var(--fl-page-gutter); } } @media (max-width: 1023px) { :root { --fl-main-pad-top: 160px; --fl-section-gap: 120px; } } @media (max-width: 600px) { :root { --fl-main-pad-top: 150px; --fl-section-gap: 88px; } }