main {
    margin: 0;
    padding: 0;
}

/* AktivGrotesk font-family mappings (from /fonts/TTF) */
@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-Hairline.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-HairlineItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-Thin.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-ThinItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-XBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-XBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'AktivGrotesk';
    src: url('../fonts/TTF/AktivGrotesk-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* Shared site container: keep navbar and hero aligned at the same max-width
   and centered on every viewport width. Adjust --site-max-width as needed. */
:root{
    --site-max-width: 1160px;
    --site-outer-padding: 16px;
}

.navbar > .container-fluid,
.hero > .container-fluid,
.steps-section > .container-fluid,
.perks-section > .container-fluid,
.site-footer-content {
    max-width: var(--site-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-outer-padding);
    padding-right: var(--site-outer-padding);
    width: 100%;
    box-sizing: border-box;
}

/* Ensure offcanvas keeps its mobile sizing */
.navbar .offcanvas {
    width: min(84vw, 360px) !important;
}