/*
    Component: ssr/accordion
 */

.accordion {
    margin: 1rem 0;
}

.accordion details {
    border-bottom: 0.0625rem solid #d1d7da;
    grid-column: span 12;
    padding: 0.75rem 0;
}

.accordion summary {
    align-items: center;
    color: var(--bm-optus-palette-jade-70);
    cursor: pointer;
    display: flex;
    font-family: MarkProBold;
    font-size: 1rem;
    justify-content: space-between;
    list-style: none;
}

.accordion summary::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23006280" d="M256 321 148.7 213.7l22.6-22.7 84.7 84.7 84.7-84.7 22.6 22.7z"></path></svg>');
    background-repeat: no-repeat;
    content: "";
    height: 1.5rem;
    width: 1.5rem;
    transition: transform 0.2s ease;
}


.accordion details[open] summary::after {
    transform: rotate(180deg);
}

.accordion-item-body {
    padding: 0.75rem 0;
}

.accordion-item-body p {
    line-height: 1.5;
    margin-bottom: 1rem;
}

.accordion-item-body p:last-child {
    margin-bottom: 0;
}

/* ── SSR Notice Panel ─────────────────────────────────────────────────── */

.ssr-notice-panel {
  box-sizing: border-box;
  width: 100%;
}

.ssr-notice-panel--full-bleed {
  margin-left: calc(50% - 50vw);
  width: 100vw;
}

.ssr-notice-panel__inner {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 0 auto;
  max-width: var(--bm-max-width, 1280px);
  padding: 0.625rem 1rem;
  position: relative;
}

/* Warning icon */
.ssr-notice-panel__warning-icon {
  display: inline-block;
  flex-shrink: 0;
  height: 1.25rem;
  width: 1.25rem;
}

/* Text content — allows rich text from RTE */
.ssr-notice-panel__text {
  flex: 1;
  font-size: var(--bm-font-size-xs-desktop, 0.875rem);
  line-height: var(--bm-font-line-height-xs-desktop, 1.4);
  text-align: center;
}

.ssr-notice-panel__text a {
  text-decoration: underline;
}

/* Close / dismiss button */
.ssr-notice-panel__close {
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0.25rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.badge {
    align-items: center;
    border-radius: var(--bm-border-radius-lg) var(--bm-border-radius-lg) var(--bm-border-radius-lg) var(--bm-border-radius-lg);
    display: flex;
    font-family: var(--bm-font-family-mark-pro);
    font-size: var(--bm-font-size-2xs-mobile);
    font-weight: var(--bm-font-weight-bold);
    height: 2.25rem;
    justify-content: center;
    letter-spacing: var(--bm-font-letter-spacing-none);
    line-height: var(--bm-font-line-height-2xs-mobile);
    padding: var(--bm-spacing-6) var(--bm-spacing-16);
    position: relative;
    width: fit-content;
}

.offer-badge {
    background-color: var(--bm-optus-palette-pink-60);
    color: var(--bm-optus-palette-grey-white);
}

.primary-badge {
    background-color: var(--bm-optus-palette-teal-30);
    color: var(--bm-optus-palette-grey-100);
}

.badge-with-tail {
    border-radius: var(--bm-border-radius-lg) var(--bm-border-radius-lg) var(--bm-border-radius-lg) 0;
}

.badge-with-tail::before {
    background: inherit;
    bottom: calc(var(--bm-spacing-16) * -1);
    content: "";
    display: block;
    height: var(--bm-spacing-16);
    left: 0px;
    position: absolute;
    width: var(--bm-spacing-16);
}

/*
 * FeatureBanner (SSR) — CSS port of components/src/components/FeatureBanner/FeatureBanner.module.scss
 *
 * Scoping contract: every selector below starts at `.oca-fb`. The React original relies on CSS
 * modules to hash its class names, which this cannot do, so containment is enforced by the `oca-fb`
 * prefix plus never using a bare element or generic class selector at the top level.
 *
 * Breakpoints. FeatureBanner overrides Beam's tablet boundary with its own 768/769 split for
 * layout, while typography keeps Beam's 492/1020 tokens:
 *   mobile copy switch   <= 491px      (React MOBILE_BREAKPOINT)
 *   stacked layout       <= 768px      (React `upToMobileTablet`)
 *   side-by-side layout  >= 769px      (React `desktop`)
 *
 * Several rule groups in the SCSS use deliberately overlapping media queries and let source order
 * pick the winner. Those are written out here as the equivalent non-overlapping ranges; each one is
 * called out where it occurs, because the resolved range is not what the SCSS appears to say.
 */

/* ---------------------------------------------------------------- root */

.oca-fb {
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background-color: var(--primary-bg-color, transparent);
    background-repeat: no-repeat;
    padding: var(--bm-spacing-24) 0;
    font-family: var(--bm-font-family-mark-pro);

    /* React getSwooshPaddingValue(undefined) -> the `none` token. */
    --swoosh-padding-desktop: var(--bm-spacing-0);
    --swoosh-padding-stacked: var(--bm-spacing-0);
}

/* React DEFAULT_MIN_HEIGHT. JS may raise these inline so the swoosh cannot ride over the CTA. */
.oca-fb--hero {
    --min-height-mobile: 140px;
    --min-height-tablet: 240px;
    --min-height-desktop: 480px;
}

.oca-fb--subhero {
    --min-height-mobile: 140px;
    --min-height-tablet: 240px;
    --min-height-desktop: 240px;
}

.oca-fb--feature {
    --min-height-mobile: 140px;
    --min-height-tablet: 140px;
    --min-height-desktop: 140px;
}

/* React SWOOSH_PADDING_MAP. The dialog stores the XL option as `xllarge`; the React map only has an
 * `xl` key, so that option currently throws there. Both spellings are accepted here. */
.oca-fb--pad-desktop-none   { --swoosh-padding-desktop: var(--bm-spacing-0); }
.oca-fb--pad-desktop-small  { --swoosh-padding-desktop: var(--bm-spacing-12); }
.oca-fb--pad-desktop-medium { --swoosh-padding-desktop: var(--bm-spacing-24); }
.oca-fb--pad-desktop-large  { --swoosh-padding-desktop: var(--bm-spacing-40); }
.oca-fb--pad-desktop-xl,
.oca-fb--pad-desktop-xllarge { --swoosh-padding-desktop: var(--bm-spacing-48); }

.oca-fb--pad-stacked-none   { --swoosh-padding-stacked: var(--bm-spacing-0); }
.oca-fb--pad-stacked-small  { --swoosh-padding-stacked: var(--bm-spacing-12); }
.oca-fb--pad-stacked-medium { --swoosh-padding-stacked: var(--bm-spacing-24); }
.oca-fb--pad-stacked-large  { --swoosh-padding-stacked: var(--bm-spacing-40); }
.oca-fb--pad-stacked-xl,
.oca-fb--pad-stacked-xllarge { --swoosh-padding-stacked: var(--bm-spacing-48); }

.oca-fb--feature {
    max-width: 63.75rem;
    border-radius: var(--bm-border-radius-xl);
}

/*
 * min-height. The SCSS stacks upToMobileTablet / tablet(492-1019) / desktop(>=769), all !important,
 * so 492-768 resolves to the tablet value and >=769 to the desktop value. `!important` is kept: it
 * guards the component against page-level overrides rather than reaching outward.
 */
@media (max-width: 491px) {
    .oca-fb { min-height: var(--min-height-mobile) !important; }
}

@media (min-width: 492px) and (max-width: 768px) {
    .oca-fb { min-height: var(--min-height-tablet) !important; }
}

@media (min-width: 769px) {
    .oca-fb {
        min-height: var(--min-height-desktop) !important;
        padding: var(--bm-spacing-40) var(--bm-spacing-24);
    }

    .oca-fb--feature {
        padding-left: var(--bm-spacing-48);
        padding-right: var(--bm-spacing-48);
    }
}

/*
 * Background images. The SCSS stacks desktop / tablet(492-1019) / upToMobileTablet in that order,
 * which resolves to: <=768 mobile, 769-1019 tablet, >=1020 desktop. Each --bg-image-* var is only
 * referenced under its oca-fb--bg-* class, so an unauthored source stays an inert url('').
 */
@media (max-width: 768px) {
    /* When the hero sits on top, the background colours take precedence over the mobile image. */
    .oca-fb--bg-mobile:not(.oca-fb--mobile-top) {
        background-image: var(--bg-image-mobile);
        background-size: 100%;
        background-repeat: no-repeat;
    }
}

@media (min-width: 769px) and (max-width: 1019px) {
    .oca-fb--bg-tablet {
        background-image: var(--bg-image-tablet);
        background-size: cover;
        background-position: center;
    }
}

@media (min-width: 1020px) {
    .oca-fb--bg-desktop {
        background-image: var(--bg-image-desktop);
        background-size: cover;
        background-position: center;
    }
}

/* ---------------------------------------------------------------- hero placement */

@media (min-width: 769px) {
    .oca-fb--content-left,
    .oca-fb--content-right {
        background-color: var(--primary-bg-color, transparent);
    }

    .oca-fb--content-left.oca-fb--has-hero .oca-fb__swoosh-svg {
        transform: scaleX(-1);
    }

    .oca-fb--content-right .oca-fb__swoosh-svg {
        transform: none;
    }
}

/* Anchor alignment — desktop */
@media (min-width: 769px) {
    .oca-fb--anchor-desktop-top .oca-fb__hero {
        align-self: flex-start;
        margin-top: calc(var(--bm-spacing-40) * -1);
    }

    .oca-fb--anchor-desktop-bottom .oca-fb__hero {
        align-self: flex-end;
        margin-bottom: calc(var(--bm-spacing-40) * -1);
    }
}

/* Anchor alignment — mobile/tablet */
@media (max-width: 768px) {
    .oca-fb--anchor-mobile-top {
        padding-top: 0;
    }

    .oca-fb--anchor-mobile-top .oca-fb__hero {
        align-self: flex-start;
    }

    .oca-fb--anchor-mobile-top .oca-fb__hero-img {
        object-position: top;
    }

    .oca-fb--anchor-mobile-bottom {
        padding-bottom: 0;
    }

    .oca-fb--anchor-mobile-bottom .oca-fb__hero {
        align-self: flex-end;
    }

    .oca-fb--anchor-mobile-bottom .oca-fb__hero-img {
        object-position: bottom;
    }

    /* mobile-top already zeroes padding-bottom; restore it when both modifiers land together. */
    .oca-fb--anchor-mobile-bottom.oca-fb--mobile-top {
        padding-bottom: var(--bm-spacing-24);
    }
}

/* Stacking direction — driven by heroImagePosition.mobileTablet */
@media (max-width: 768px) {
    .oca-fb--mobile-bottom {
        background-color: var(--primary-bg-color, transparent);
    }

    .oca-fb--mobile-bottom .oca-fb__hero {
        margin-top: var(--bm-spacing-8);
        margin-bottom: 0;
    }

    .oca-fb--mobile-top {
        background-color: var(--secondary-bg-color, transparent);
        padding-bottom: 0;
    }

    .oca-fb--mobile-top .oca-fb__hero {
        margin-bottom: var(--bm-spacing-8);
        margin-top: 0;
    }

    .oca-fb--mobile-top .oca-fb__swoosh-svg--mobile {
        transform: none !important;
    }
}

/* ---------------------------------------------------------------- container */

.oca-fb__container {
    max-width: 63.75rem;
    gap: var(--bm-spacing-12);
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    position: relative;
}

@media (min-width: 769px) {
    .oca-fb__container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* Hero first (on the left), content second. */
    .oca-fb--content-left .oca-fb__hero { order: 1; }
    .oca-fb--content-left .oca-fb__content { order: 2; }

    /* Content first, hero second — the natural order. */
    .oca-fb--content-right .oca-fb__hero { order: 2; }
    .oca-fb--content-right .oca-fb__content { order: 1; }
}

@media (max-width: 768px) {
    .oca-fb--mobile-bottom .oca-fb__container {
        max-width: 100%;
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .oca-fb--mobile-top .oca-fb__container {
        max-width: 100%;
        width: 100%;
        align-items: stretch;
        flex-direction: column-reverse;
    }
}

/* ---------------------------------------------------------------- content */

.oca-fb__content {
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 5;
}

/*
 * The SCSS stacks desktop / upToMobileTablet / mobileTablet(492-768), so the 128px inset wins over
 * the 24px one across 492-768.
 */
@media (max-width: 491px) {
    .oca-fb__content {
        width: 100%;
        padding-left: var(--bm-spacing-24);
        padding-right: var(--bm-spacing-24);
    }
}

@media (min-width: 492px) and (max-width: 768px) {
    .oca-fb__content {
        width: 100%;
        padding-left: var(--bm-spacing-128);
        padding-right: var(--bm-spacing-128);
    }
}

@media (min-width: 769px) {
    .oca-fb__content {
        background-color: transparent !important;
        max-width: 80%;
    }
}

@media (max-width: 768px) {
    .oca-fb--mobile-top .oca-fb__content {
        padding-bottom: var(--bm-spacing-24);
        background-color: var(--primary-bg-color, transparent);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: bottom;
        height: auto;
        flex-direction: column;
    }

    .oca-fb--mobile-top.oca-fb--bg-mobile .oca-fb__content {
        background-image: var(--bg-image-mobile);
    }
}

/*
 * React spaces the copy blocks with `.rtecontainer > div:not(:last-child) { margin-bottom: 12px }`.
 * This uses column gap instead: both viewport branches of each block are always in the DOM with one
 * hidden, and `:not(:last-child)` would put a trailing margin under the last *visible* block
 * whenever it is not also the last child. Gap ignores display:none children, so it reproduces the
 * intended "12px between visible blocks, nothing trailing" in both directions.
 */
.oca-fb__rte {
    display: flex;
    flex-direction: column;
    gap: var(--bm-spacing-12);
}

.oca-fb__rte--extra-bottom-padding {
    margin-bottom: var(--bm-spacing-40);
}

/* Viewport-swapped copy. React swaps via useResponsiveContent at MOBILE_BREAKPOINT (491px). */
.oca-fb__vp--mobile {
    display: none;
}

@media (max-width: 491px) {
    .oca-fb__vp--above-mobile { display: none; }
    .oca-fb__vp--mobile { display: block; }
}

/* ---------------------------------------------------------------- RTE copy blocks */

/*
 * Links inside RTE content: strip the inherited link styling and let the RTE drive appearance.
 * Scoped per block so this cannot reach any other component's anchors.
 */
.oca-fb__intro a,
.oca-fb__title a,
.oca-fb__subheading a,
.oca-fb__description a,
.oca-fb__tcs a {
    all: unset;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.oca-fb__intro a *,
.oca-fb__title a *,
.oca-fb__subheading a *,
.oca-fb__description a *,
.oca-fb__tcs a * {
    text-decoration: underline;
}

.oca-fb__intro a:focus:not(:has(> *)),
.oca-fb__intro a:focus-visible:not(:has(> *)),
.oca-fb__title a:focus:not(:has(> *)),
.oca-fb__title a:focus-visible:not(:has(> *)),
.oca-fb__subheading a:focus:not(:has(> *)),
.oca-fb__subheading a:focus-visible:not(:has(> *)),
.oca-fb__description a:focus:not(:has(> *)),
.oca-fb__description a:focus-visible:not(:has(> *)),
.oca-fb__tcs a:focus:not(:has(> *)),
.oca-fb__tcs a:focus-visible:not(:has(> *)),
.oca-fb__intro a:focus > *,
.oca-fb__intro a:focus-visible > *,
.oca-fb__title a:focus > *,
.oca-fb__title a:focus-visible > *,
.oca-fb__subheading a:focus > *,
.oca-fb__subheading a:focus-visible > *,
.oca-fb__description a:focus > *,
.oca-fb__description a:focus-visible > *,
.oca-fb__tcs a:focus > *,
.oca-fb__tcs a:focus-visible > * {
    outline: var(--bm-border-width-lg) solid currentColor;
    border-radius: var(--bm-border-radius-sm);
}

/* Neutralise heading styles so the block's own typography is what applies. */
.oca-fb__intro :is(h1, h2, h3, h4, h5, h6, p, span),
.oca-fb__title :is(h1, h2, h3, h4, h5, h6, p, span),
.oca-fb__subheading :is(h1, h2, h3, h4, h5, h6, p, span),
.oca-fb__description :is(h1, h2, h3, h4, h5, h6, p, span),
.oca-fb__tcs :is(h1, h2, h3, h4, h5, h6, p, span) {
    font: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}

/*
 * Typography — expansions of the Beam mixins. These keep Beam's own 492/1020 breakpoints, which are
 * deliberately not the 768/769 split the layout uses.
 */

/* bm-typography-sm-bold */
.oca-fb__intro,
.oca-fb__subheading {
    letter-spacing: var(--bm-font-letter-spacing-none);
    font-family: var(--bm-font-family-mark-pro);
    font-size: var(--bm-font-size-sm-mobile);
    line-height: var(--bm-font-line-height-sm-mobile);
    font-weight: var(--bm-font-weight-bold);
}

/* bm-typography-lg-heavy */
.oca-fb__title {
    letter-spacing: var(--bm-font-letter-spacing-none);
    font-family: var(--bm-font-family-mark-pro);
    font-size: var(--bm-font-size-lg-mobile);
    line-height: var(--bm-font-line-height-lg-mobile);
    font-weight: var(--bm-font-weight-heavy);
}

/* bm-typography-xs-regular */
.oca-fb__description {
    letter-spacing: var(--bm-font-letter-spacing-none);
    font-family: var(--bm-font-family-mark-pro);
    font-size: var(--bm-font-size-xs-mobile);
    line-height: var(--bm-font-line-height-xs-mobile);
    font-weight: var(--bm-font-weight-regular);
}

/* bm-typography-2xs-regular */
.oca-fb__tcs {
    letter-spacing: var(--bm-font-letter-spacing-none);
    font-family: var(--bm-font-family-mark-pro);
    font-size: var(--bm-font-size-2xs-mobile);
    line-height: var(--bm-font-line-height-2xs-mobile);
    font-weight: var(--bm-font-weight-regular);
}

.oca-fb__tcs > * {
    margin: 0 !important;
}

.oca-fb__tcs * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

@media (min-width: 492px) {
    .oca-fb__intro,
    .oca-fb__subheading {
        font-size: var(--bm-font-size-sm-tablet);
        line-height: var(--bm-font-line-height-sm-tablet);
    }

    .oca-fb__title {
        font-size: var(--bm-font-size-lg-tablet);
        line-height: var(--bm-font-line-height-lg-tablet);
    }

    .oca-fb__description {
        font-size: var(--bm-font-size-xs-tablet);
        line-height: var(--bm-font-line-height-xs-tablet);
    }

    .oca-fb__tcs {
        font-size: var(--bm-font-size-2xs-tablet);
        line-height: var(--bm-font-line-height-2xs-tablet);
    }
}

@media (min-width: 1020px) {
    .oca-fb__intro,
    .oca-fb__subheading {
        font-size: var(--bm-font-size-sm-desktop);
        line-height: var(--bm-font-line-height-sm-desktop);
    }

    .oca-fb__title {
        font-size: var(--bm-font-size-lg-desktop);
        line-height: var(--bm-font-line-height-lg-desktop);
    }

    .oca-fb__description {
        font-size: var(--bm-font-size-xs-desktop);
        line-height: var(--bm-font-line-height-xs-desktop);
    }

    .oca-fb__tcs {
        font-size: var(--bm-font-size-2xs-desktop);
        line-height: var(--bm-font-line-height-2xs-desktop);
    }
}

/* ---------------------------------------------------------------- CTA */

.oca-fb__cta {
    margin-top: var(--bm-spacing-32);
}

.oca-fb__cta > * {
    margin: 0 !important;
}

.oca-fb__cta * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.oca-fb__cta a,
.oca-fb__cta button {
    width: auto !important;
    flex: 0 1 auto;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.oca-fb__cta a:hover,
.oca-fb__cta button:hover {
    text-decoration: none;
}

.oca-fb__cta a:not(:focus-visible),
.oca-fb__cta button:not(:focus-visible) {
    outline: none !important;
}

/* Stop ButtonGroup laying out as a grid on tablet. Beam's tablet range, not the 768 split. */
@media (min-width: 492px) and (max-width: 1019px) {
    .oca-fb__cta {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: var(--bm-spacing-12);
    }

    .oca-fb__cta > div * {
        display: flex !important;
        width: 100%;
    }
}

@media (min-width: 769px) {
    .oca-fb__cta {
        display: flex !important;
    }

    .oca-fb__cta > div {
        display: flex !important;
    }
}

/* ---------------------------------------------------------------- hero image */

.oca-fb__hero {
    max-width: 25rem;
    max-height: 25rem;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    align-self: flex-end;
    border-radius: var(--bm-border-radius-xl) !important;
    position: relative;
    z-index: 0;
}

.oca-fb__hero--above-swoosh {
    z-index: 10;
}

/* Matches @beam/media Image's own `.image` rule, which the React tree also applies. */
.oca-fb__hero-img {
    display: block;
    max-width: 100%;
    height: auto;
    object-position: bottom;
    border-radius: var(--bm-border-radius-xl);
}

@media (min-width: 769px) {
    .oca-fb__hero { flex-shrink: 0; }
}

@media (max-width: 768px) {
    .oca-fb__hero {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------------------------------------------------------------- swoosh */

.oca-fb__swoosh-padding {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    background-color: var(--secondary-bg-color, transparent);
    height: var(--swoosh-padding-desktop, 0);
}

@media (max-width: 768px) {
    .oca-fb__swoosh-padding {
        height: var(--swoosh-padding-stacked, 0);
    }

    .oca-fb--mobile-top .oca-fb__swoosh-padding {
        background-color: var(--primary-bg-color, transparent);
    }
}

.oca-fb__swoosh {
    position: absolute;
    left: 0;
    right: 0;
    width: 101%;
    z-index: 1;
    line-height: 0;
    bottom: 0;
    margin: 0;
    padding: 0;
    font-size: 0;
}

/*
 * The swoosh is nudged up by a sub-pixel amount that grows with viewport width, to close the seam
 * that the scaled SVG's antialiased bottom edge leaves against the padding block.
 */
@media (max-width: 768px) {
    .oca-fb__swoosh { bottom: calc(var(--swoosh-padding-stacked, 0) - 1.3px); }
}

@media (min-width: 769px) and (max-width: 1019px) {
    .oca-fb__swoosh { bottom: calc(var(--swoosh-padding-desktop, 0) - 1.5px); }
}

@media (min-width: 1020px) and (max-width: 1440px) {
    .oca-fb__swoosh { bottom: calc(var(--swoosh-padding-desktop, 0) - 3px); }
}

@media (min-width: 1441px) {
    .oca-fb__swoosh { bottom: calc(var(--swoosh-padding-desktop, 0) - 4px); }
}

.oca-fb__swoosh-svg {
    width: 100%;
    height: auto;
    display: block;
    fill: var(--secondary-bg-color, transparent);
}

.oca-fb__swoosh-svg path {
    fill: inherit !important;
}

.oca-fb__swoosh-svg--mobile { display: block; }
.oca-fb__swoosh-svg--desktop { display: none; }

@media (min-width: 769px) {
    .oca-fb__swoosh-svg--mobile { display: none; }
    .oca-fb__swoosh-svg--desktop { display: block; }
}

@media (max-width: 768px) {
    .oca-fb--mobile-top .oca-fb__swoosh-svg {
        fill: var(--primary-bg-color, transparent);
    }
}

/* Primary CTA — lux2 core2 `button` base; --custom-* vars carry author-set colours. */
.ssr-cta-button.ssr-cta-primary {
    background-color: var(--custom-bg);
    border: var(--bm-measurement-2) solid var(--custom-border-color);
    border-radius: var(--bm-border-radius-sm);
    box-sizing: border-box;
    color: var(--custom-text-color);
    cursor: pointer;
    display: inline-block;
    font-family: var(--bm-font-family-mark-pro-bold), MarkProBold, sans-serif;
    font-size: var(--bm-font-size-xs-desktop);
    line-height: normal;
    min-height: var(--bm-spacing-48);
    min-width: 16.25rem;
    width: auto;
    margin: var(--bm-spacing-6) 0;
    padding: var(--bm-spacing-12) var(--bm-spacing-32);
    overflow: hidden;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    transition: background-color 0.3s ease-out;
}

@media (max-width: 851px) {
    .ssr-cta-button.ssr-cta-primary {
        min-width: 7.75rem;
    }
}

@media (max-width: 491px) {
    .ssr-cta-button.ssr-cta-primary {
        width: 100%;
    }
}

.ssr-cta-button.ssr-cta-primary:not([disabled]):hover,
.ssr-cta-button.ssr-cta-primary:not([disabled]):focus,
.ssr-cta-button.ssr-cta-primary:not([disabled]):active {
    background-color: var(--custom-hover-bg);
    border-color: var(--custom-hover-bg);
    color: var(--custom-text-hover-color);
    text-decoration: none;
}

/* Link CTA — lux2 core2 `anchor`: a jade text link, not a filled button.
   Rendered when the CTA type is `link` (class "ssr-cta-link ssr-cta-<style>"). */
a.ssr-cta-link {
    color: var(--bm-color-text-default-light);
    font-family: var(--bm-font-family-mark-pro), sans-serif;
    cursor: pointer;
    outline: none;
    text-decoration: underline;
}

a.ssr-cta-link:not([aria-disabled="true"]):hover,
a.ssr-cta-link:not([aria-disabled="true"]):focus,
a.ssr-cta-link:not([aria-disabled="true"]):active {
    text-decoration: none;
}

/* animated: a right-pointing arrow after the text that slides on hover. The arrow
   is an inline jade (#006280 = --bm-optus-palette-jade-70) SVG — a data URI can't
   read a CSS token, so the colour is literal here. */
a.ssr-cta-link.ssr-cta-animated::after {
    content: "";
    display: inline-block;
    width: 1.875rem;
    height: 1.875rem;
    margin-bottom: 0.125rem;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23RRGGBB' d='M321 256 213.7 363.3 191 340.7l84.7-84.7-84.7-84.7 22.7-22.6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.25s;
}

a.ssr-cta-link.ssr-cta-animated:not([aria-disabled="true"]):hover::after {
    transform: translateX(0.5rem);
}

/* Webchat button wrapper — port of WebchatButton/styles.ts SC.Wrapper.
   Starts hidden when the model's `view` delay > 0; button_ssr.js drops `hidden`
   after `view` seconds, and the appearanceAnimation runs the scale pulse. */
.ssr-web-chat-wrapper {
    width: 100%;
    display: block;
    text-align: center;
    margin-top: var(--bm-spacing-24);
    margin-bottom: var(--bm-spacing-48);
}

.ssr-web-chat-wrapper.hidden {
    visibility: hidden;
    opacity: 0;
}

.ssr-web-chat-wrapper:not(.hidden).appearanceAnimation {
    opacity: 1;
    transition: 200ms ease-out;
    animation: chatAppearance 2s;
}

@keyframes chatAppearance {
    0% { transform: scale(1, 1); }
    30% { transform: scale(1.15, 1.15); }
    70% { transform: scale(1.15, 1.15); }
    100% { transform: scale(1, 1); }
}

.web-chat-button.primary {
  border: 0.125rem solid rgb(253, 204, 8);
  border-radius: 0.3125rem;
  line-height: normal;
  cursor: pointer;
  display: inline-block;
  font-family: MarkProBold;
  font-size: 1rem;
  height: 2.75rem;
  max-height: 3rem;
  margin: 0.375rem 0px;
  min-height: 3rem;
  min-width: 16.25rem;
  overflow: hidden;
  vertical-align: middle;
  padding: 0.5625rem 2rem 0.6875rem;
  text-align: center;
  text-decoration: none;
  text-overflow: ellipsis;
  transition: background-color 0.3s ease-out;
  user-select: none;
  white-space: nowrap;
  width: auto;
  background-color: rgb(253, 204, 8);
  color: rgb(0, 0, 0);
}

.web-chat-button.primary:hover {
    background: var(--bm-color-background-secondary-hover-light);
    opacity: 0.9;
}

.ssr-cta-button.ssr-cta-primary:disabled,
.ssr-cta-button.ssr-cta-primary[disabled] {
    background-color: #d1d7da;
    border-color: #d1d7da;
    color: #575859;
    opacity: 0.5;
    outline: 0;
    cursor: default;
}

.button-link {
    all: unset;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}

/* phone breakpoint */
@media (max-width: 491px) {
    .button-link {
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    
    .web-chat-button.primary {
        width: 100%;
        min-width: 0;
    }
}
/* ---------------------------------------------------------------------------
 * Beam Button / ButtonGroup — port of @beam/actions Button + ButtonGroup, used by
 * buttonBeamGroupTemplate.html (the `buttonVariant: 'beam'` model shape).
 *
 * Beam's own SCSS reads --bm-button-* component tokens, which clientlib-beam does NOT ship.
 * Those tokens are plain aliases of base tokens that ARE shipped, so they are resolved to the
 * base token here (e.g. --bm-button-primary-color-background-default-light is defined upstream
 * as var(--bm-color-background-secondary-default-light)). This is why .web-chat-button.primary
 * above already hand-maps the same three values.
 * --------------------------------------------------------------------------- */

.beam-cta-wrapper {
    display: inline-block;
    width: 100%;
}

@media (max-width: 491px) {
    .beam-cta-wrapper {
        display: block;
        width: 100%;
    }
}

.button-group {
    display: flex;
    gap: var(--bm-spacing-12);
}

.button-group--fill {
    flex-direction: column;
    align-items: stretch;
}

.button-group--fill > * {
    width: 100%;
}

@media (min-width: 492px) {
    .button-group--fill.two {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

@media (min-width: 1020px) {
    .button-group--fill.three {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
    }
}

/* Beam Button base. Scoped to .button-group so it cannot restyle the authored
 * .ssr-cta-button.ssr-cta-primary anchors that buttonCtaTemplate renders with --custom-* colours. */
.button-group .button {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    border-radius: var(--bm-border-radius-md);
}

.button-group .button:hover,
.button-group .button:active {
    transition-duration: var(--bm-motion-duration-100);
    transition-timing-function: var(--bm-motion-transition-ease-in-out);
}

/* bm-button-*-textStyle-lg -> bm-typography-xs-bold */
.button-group .button.size-lg {
    letter-spacing: var(--bm-font-letter-spacing-none);
    font-family: var(--bm-font-family-mark-pro);
    font-size: var(--bm-font-size-xs-mobile);
    line-height: var(--bm-font-line-height-xs-mobile);
    font-weight: var(--bm-font-weight-bold);
    padding: var(--bm-spacing-12) var(--bm-spacing-24);
}

@media (min-width: 492px) {
    .button-group .button.size-lg {
        font-size: var(--bm-font-size-xs-tablet);
        line-height: var(--bm-font-line-height-xs-tablet);
    }
}

@media (min-width: 1020px) {
    .button-group .button.size-lg {
        font-size: var(--bm-font-size-xs-desktop);
        line-height: var(--bm-font-line-height-xs-desktop);
    }
}

.button-group .button.size-sm {
    letter-spacing: var(--bm-font-letter-spacing-none);
    font-family: var(--bm-font-family-mark-pro);
    font-size: var(--bm-font-size-2xs-mobile);
    line-height: var(--bm-font-line-height-2xs-mobile);
    font-weight: var(--bm-font-weight-bold);
    padding: var(--bm-spacing-6) var(--bm-spacing-24);
}

.button-group .button.full-width {
    width: 100%;
}

/* primary — identical regular/inverse per Beam's token table. */
.button-group .button.primary {
    background-color: var(--bm-color-background-secondary-default-light);
    color: var(--bm-color-text-default-light);
}

.button-group .button.primary:hover {
    background-color: var(--bm-color-background-secondary-hover-light);
}

/* tertiary */
.button-group .button.tertiary {
    background-color: var(--bm-color-background-transparent-light);
    color: var(--bm-color-text-default-light);
}

.button-group .button.tertiary:hover {
    background-color: var(--bm-color-background-overlay-hover-contrast-light);
}

/* secondaryOutlined */
.button-group .button.secondaryOutlined {
    background-color: var(--bm-color-background-transparent-light);
    color: var(--bm-color-text-default-light);
    border: var(--bm-border-width-md) solid var(--bm-color-border-neutral-strong-light);
    padding: calc(var(--bm-spacing-12) - var(--bm-border-width-md)) calc(var(--bm-spacing-24) - var(--bm-border-width-md));
}

.button-group .button.secondaryOutlined:hover {
    background-color: var(--bm-color-background-overlay-hover-contrast-light);
}

.button-group .button.secondaryOutlined.inverse {
    color: var(--bm-color-text-contrast-light);
    border-color: var(--bm-color-border-neutral-contrast-light);
}

.button-group .button.secondaryOutlined.inverse:hover {
    background-color: var(--bm-color-background-overlay-hover-default-light);
}

/* secondaryFilled */
.button-group .button.secondaryFilled {
    background-color: var(--bm-color-background-default-light);
    color: var(--bm-color-text-default-light);
    border: var(--bm-border-width-md) solid var(--bm-color-border-neutral-strong-light);
    padding: calc(var(--bm-spacing-12) - var(--bm-border-width-md)) calc(var(--bm-spacing-24) - var(--bm-border-width-md));
}

.button-group .button.secondaryFilled:hover {
    background-color: var(--bm-color-background-overlay-hover-contrast-light);
}

.button-group .button.secondaryFilled.inverse:hover {
    background-color: var(--bm-color-background-overlay-hover-default-light);
    color: var(--bm-color-text-contrast-light);
    border-color: var(--bm-color-border-neutral-contrast-light);
}

/*
    Component: ssr/header
 */


/* GLOBAL View */
.footer-outer {
  background-color: #000000;
  padding: 3rem 0 1.875rem 0;
}

.footer-inner {
  color: #e3e9ec;
  max-width: 63.75rem;
  margin: 0 auto;
}

.footer-inner h2 {
  color: var(--bm-color-text-contrast-light);
  margin: 0;
  white-space: nowrap;
}

.footer-inner nav {
  margin: 0.5rem 0 0.75rem 0;
}

.footer-inner ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.footer-inner li {
  line-height: 1.5rem;
  padding: 0.5rem 0;
  white-space: nowrap;
}

.footer-inner a {
  color: #e3e9ec;
  font-family: "MarkPro";
  font-size: 1rem;
  padding: 0.5rem 0;
  text-decoration: none;
}

.footer-inner a:hover {
  text-decoration: underline;
}

.footer-social-media {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer-social-media li {
  width: 100%;
}

.footer-social-media li.footer-social-media-links {
  padding: 0;
  width: auto;
}

.footer-social-media span {
  height: 1.875rem;
  width: 1.875rem;
}

.footer-social-media span svg {
  height: inherit;
  width: inherit;
}

.footer-copyright {
  font-family: var(--bm-font-family-mark-pro);
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.footer-acknowledgement {
  display: flex;
  font-size: 0.875rem;
  gap: 1rem;
  line-height: 1.5rem;
  margin: 1.5rem 0;
  padding: 0 1.5rem;
}

.footer-acknowledgement a {
  font-family: MarkProBold;
  font-size: 1rem;
  text-decoration: underline;
}

.footer-acknowledgement img {
  max-height: 3.375rem;
  max-width: 3.375rem;
}

/* MOBILE (852px or less) View */
@media (max-width: 852px) {
  .footer-mobile {
    display: block;
  }

  .footer-desktop {
    display: none;
  }

  .footer-inner details {
    border-bottom: 0.0625rem solid #ffffff;
    padding: 0.75rem 1.5rem;
  }

  .footer-inner summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding: var(--bm-spacing-12) 0;
  }

  .footer-inner summary::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23ffffff" d="M256 321 148.7 213.7l22.6-22.7 84.7 84.7 84.7-84.7 22.6 22.7z"></path></svg>');
    background-repeat: no-repeat;
    content: "";
    height: 1.5rem;
    width: 1.5rem;
    transition: transform 0.2s ease;
  }

  .footer-inner h2 {
    font-family: var(--bm-font-family-mark-pro);
    font-size: 1.125rem;
    font-weight: var(--bm-font-weight-bold);
    line-height: var(--bm-font-line-height-xs-mobile);
  }

  .footer-copyright {
    border-bottom: 1px solid white;
    padding: 3rem 1.5rem 0.75rem 1.5rem;
  }

}

/* DESKTOP (853px or more) View */
@media (min-width: 853px) {
  .footer-mobile {
    display: none;
  }

  .footer-desktop {
    display: block;
  }

  .footer-inner {
    padding: 0 1rem;
  }

  .footer-inner h2 {
    font-family: var(--bm-font-family-mark-pro-bold);
    font-size: 1rem;
    font-weight: var(--bm-font-weight-regular);
    line-height: var(--bm-font-line-height-lg-desktop);
  }

  /* Generic link columns pack on the left; the social ("Connect With Us")
     column is pushed to the right edge via margin-left:auto — mirrors the React
     OptusFooterNew layout (Column flex-basis 23% + SocialGroups width 25%,
     margin-left:auto). Using justify-content:space-between here instead spread
     the generic columns ~300px apart as well, which was the bug. */
  .footer-group-links {
    display: flex;
    flex-direction: row;
  }

  .footer-group {
    flex-basis: 23%;
    flex-grow: 0;
  }

  .footer-social-group {
    width: 25%;
    margin-left: auto;
  }

  .footer-inline-links {
    align-items: center;
    border-bottom: 1px solid #d1d7da;
    column-gap: 2rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 4rem;
  }

  .footer-inline-links nav {
    margin: 0;
  }

  .footer-inline-links nav ul {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 1.25rem;
  }

  .footer-inline-links a {
    font-size: 0.875rem;
  }

  .footer-acknowledgement {
    padding: 0;
  }
}

/*
    Component: ssr/header
 */

* {
    box-sizing: border-box;
}

body {
    font-family: MarkPro;
    font-size: 1rem;
    line-height: 1;
    margin: 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

h2 {
    font-family: MarkProHeavy;
    font-size: 1.25rem;
}

h3 {
    font-family: MarkProMedium;
    font-size: 1.1875rem;
}

p {
    padding: 0;
    margin: 0;
}

.optus-logo-link {
    align-items: center;
    display: flex;
    margin-right: 5rem;
}

.menu-lvl1-outer {
    align-items: center;
    background-color: #f1f4f6;
    border-bottom: 1px solid #d1d7da;
    display: flex;
    height: 3.125rem;
    justify-content: center;
    padding: 0 1.5rem;
    position: relative;
    z-index: 10;
}

.menu-lvl1-inner {
    align-items: center;
    display: flex;
    width: 1000px;
}

.menu-lvl1-lhs {
    display: none;
}

@media (min-width: 1020px) {
    .menu-lvl1-lhs {
        display: flex;
        flex-direction: row;
        gap: 1.875rem;
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
}

.menu-lvl1-item {
    color: #333333;
    font-family: MarkProMedium, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

.menu-lvl1-item.active {
    color: #00646f;
}

.menu-lvl1-item:hover {
    text-decoration: underline;
}

.menu-lvl1-rhs {
    display: flex;
    flex-direction: row;
    gap: 1.125rem;
    list-style-type: none;
    margin: 0 0 0 auto;
    padding: 0;
}

.menu-lvl1-item-rhs {
    align-items: center;
    background-color: transparent;
    border: none;
    color: #333333;
    cursor: pointer;
    display: flex;
    font-family: MarkProMedium;
    font-size: 0.875rem;
    gap: 6px;
    text-decoration: none;
    width: 100%;
}

.menu-lvl1-item-rhs:hover {
    color: #00646f;
    fill: #00646f;
    text-decoration: underline;
}

.menu-lvl1-item-rhs .menu-label,
.menu-lvl1-item-rhs .arrow {
    display: none;
}

@media (min-width: 1020px) {
    .menu-lvl1-rhs .mobile-menu-burger {
        display: none;
    }

    .menu-lvl1-item-rhs .menu-label,
    .menu-lvl1-item-rhs .arrow {
        display: inline;
    }
}

.menu-lvl2-outer {
    background-color: #ffffff;
    border-bottom: 1px solid #d1d7da;
    display: none;
    flex-direction: column;
    position: relative;
    z-index: 10;
}

.menu-lvl2-outer.open {
    display: flex;
}

@media (min-width: 1020px) {
    .menu-lvl2-outer {
        display: flex;
        align-items: center;
        flex-direction: row;
        height: 3.75rem;
        justify-content: center;
        padding: 0 1.5rem;
    }
}

.menu-lvl2-inner {
    background-color: #f1f4f6;
    border-top: 1px solid #d1d7da;
    border-left: 1px solid #d1d7da;
    height: 100vh;
    max-width: 430px;
    position: absolute;
    right: 0;
    width: 100%;
}

@media (min-width: 1020px) {
    .menu-lvl2-inner {
        align-items: center;
        background-color: #ffffff;
        border: none;
        display: flex;
        gap: 2rem;
        height: auto;
        justify-content: space-between;
        max-width: unset;
        position: unset;
        right: unset;
        width: 1000px;
    }
}

.search-wrapper {
    flex-grow: 1;
}

.menu-lvl2-nav {
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    list-style-type: none;
    margin: 0;
    padding: 0 1.5rem;
}

@media (min-width: 1020px) {
    .menu-lvl2-nav {
        align-items: center;
        flex-direction: row;
        gap: 1.25rem;
        padding: 0;
    }
}

.menu-lvl2-item {
    align-items: center;
    background-color: transparent;
    border: none;
    border-bottom: 4px solid transparent;
    color: #333333;
    cursor: pointer;
    display: flex;
    font-family: MarkProBold;
    font-size: 1.125rem;
    gap: 6px;
    justify-content: space-between;
    line-height: 20px;
    padding: 16px 0 12px 0;
    text-decoration: none;
    width: 100%;
}

@media (min-width: 1020px) {
    .menu-lvl2-item {
        font-family: MarkPro;
        font-size: 1rem;
        justify-content: unset;
        width: auto;
    }
}

.menu-lvl2-item svg {
    fill: #333333;
    height: 20px;
    width: 20px;
}

@media (min-width: 1020px) {
    .menu-lvl2-item:hover,
    .menu-lvl2-item.expanded {
        border-bottom: 4px solid #00646f;
        color: #00646f;
    }
}

.menu-lvl2-item.expanded {
    font-weight: 500;
}

.menu-lvl2-item:hover svg,
.menu-lvl2-item.expanded svg {
    fill: #00646f;
}

.menu-lvl2-item svg.arrow {
    transform: rotate(-90deg);
}

.menu-lvl2-item.expanded svg.arrow {
    transform: rotate(-180deg);
}

@media (min-width: 1020px) {
    .menu-lvl2-item svg.arrow {
        transform: rotate(0);
    }

    .menu-lvl2-item.expanded svg.arrow {
        transform: rotate(-180deg);
    }
}

/* When mobile menu is open
   - Need to add to body {overflow:hidden)
   - Need to add to menu-lvl3-popup
      o overflow-y: scroll;
      o height: calc(100vh - $(".menu-lvl3-popup").getBoundingClientRect().top px));
*/
.menu-lvl3-popup {
    background-color: #ffffff;
    height: 100vh;
    max-width: 26.875rem;
    overflow-y: scroll;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 30;
}

@media (min-width: 1020px) {
    .menu-lvl3-popup {
        border: 1px solid #cccccc;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        box-shadow: 0 .25rem 0.375rem rgba(0,0,0,.1);
        height: auto;
        left: 50%;
        max-width: unset;
        overflow-y: hidden;
        right: unset;
        top: unset;
        transform: translateX(-50%);
        width: 1000px;
    }
}

.menu-lvl3-body {
    display: flex;
    flex-direction: column;
    /*gap: 18px;*/
    /*padding: 30px;*/
}

.menu-lvl3-body-header {
    align-items: center;
    border-top: 1px solid #d1d7da;
    border-bottom: 1px solid #d1d7da;
    display: flex;
    padding: 20px 30px;
    text-align: center;
}

.menu-lvl3-close {
    color: #006280;
    font-family: MarkProMedium;
    position: absolute;
}

.menu-lvl3-title {
    margin: 0 auto;
}

@media (min-width: 1020px) {
    .menu-lvl3-body {
        display: grid;
        grid-template-columns: 200px 200px 200px 284px;
        padding: 20px;
    }

    .menu-lvl3-body-header {
        display: none;
    }
}

.menu-lvl3-section {
    padding: 16px 30px;
    border-bottom: 1px solid #dcdcdc;
}

.menu-lvl3-section.empty {
    border-bottom: none;
}

@media (min-width: 1020px) {
    .menu-lvl3-section {
        padding: 0;
        border-bottom: none;
    }
}

.menu-lvl3-section h2 {
    color: #333333;
    font-family: MarkProBold;
    font-size: 1.125rem;
    line-height: 1.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 1020px) {
    .menu-lvl3-section h2 {
        font-size: 1rem;
    }
}

.menu-lvl3-nav {
    list-style-type: none;
    padding: 0;
}

.menu-lvl3-nav li {
    font-family: MarkPro;
    font-size: 1rem;
    line-height: 1.5rem;
    margin-bottom: 0.875rem;
}

.menu-lvl3-nav a {
    color: #333333;
    cursor: pointer;
    font-family: MarkPro;
    text-decoration: none;
}

.menu-lvl3-nav a:hover {
    text-decoration: underline;
}

.menu-lvl3-footer {
    background-color: #f1f4f6;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #74767b;
    padding: 1rem 1.875rem 1.5rem 1.875rem;
}

.menu-lvl3-footer h2 {
    color: #000000;
    font-family: MarkProBold;
    font-size: 1.125rem;
    line-height: 1.5rem;
    margin-bottom: 1rem;
}

@media (min-width: 1020px) {
    .menu-lvl3-footer h2 {
        font-family: MarkProBold;
        font-size: 0.875rem;
        line-height: 1.5rem;
        margin-bottom: 0;
    }
}

.menu-lvl3-footer ul {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style-type: none;
    padding: 0;
}

@media (min-width: 1020px) {
    .menu-lvl3-footer ul {
        flex-direction: row;
        gap: 2rem;
    }
}

.menu-lvl3-footer a {
    color: #333333;
    cursor: pointer;
    font-family: MarkPro;
    font-size: 1rem;
    line-height: 1.5rem;
    text-decoration: none;
}

.menu-lvl3-footer a:hover {
    text-decoration: underline;
}


.button-primary {
    background-color: #fdcc08;
    border-radius: 0.3125rem;
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-family: MarkPro;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    padding: 1rem 1.875rem;
    text-decoration: none;
    user-select: none;
}

.promo img {
    height: auto;
    width: 100%;
}

.promo .button-primary {
    margin-top: 20px;
}

.promo-descr {
    line-height: 20px;
}

#overlay {
    background-color: #000000;
    height: 100vh;
    opacity: 0.6;
    position: absolute;
    top: 0;
    width: 100vw;
    z-index: 5;
}

.optus-logo-link svg {
    fill: #00828e;
    height: 1rem;
    width: 5.125rem;
}

.ssr-indicator {
    font-size: 12px;
    justify-self: start;
    margin-left: 2px;
    margin-top: -10px;
}



/*
    Component: ssr/modal
 */
dialog {
    border: 0.0625rem solid rgb(227, 233, 236);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0.1875rem 0.625rem 0.0625rem;
    padding: 0;
    width: 100%;
}

@media (min-width: 30.75rem) {
    dialog.small {
        width: 24.875rem;
    }

    dialog.medium {
        width: 31.25rem;
    }

    dialog.large {
        width: 43.75rem;
    }

    dialog.xlarge {
        width: 80%;
    }
}

.dialog-inner {
    display:flex;
    flex-direction: column;
    max-height: calc(100vh - 4.25rem);
}

.dialog-header {
    flex: none;
    padding: 5px;
    text-align: right;
}

.dialog-body {
    flex-grow: 1;
    margin: 0 0.5rem 0.5rem 0;
    overflow: hidden auto;
    overscroll-behavior-y: contain;
    padding: 1.5rem 2.5rem;
}

.dialog-control {
    flex: none;
    padding: 0 0 1rem 0;
    text-align: center;
}

button.dialog-close {
    background: transparent;
    cursor: pointer;
    padding: 3px;
    width: auto!important;
}

button.dialog-close:has(svg) {
    border: none;
}

/* TODO - will call a /components/ssr/button component template */
button.primary {
    background-color: rgb(253, 204, 8);
    border: 0.125rem solid rgb(253, 204, 8);
    border-radius: 0.3125rem;
    line-height: normal;
    color: rgb(51, 51, 51);
    cursor: pointer;
    display: inline-block;
    font-family: MarkProBold;
    font-size: 1rem;
    height: 2.75rem;
    max-height: 3rem;
    margin: 0.375rem 0px;
    min-height: 3rem;
    min-width: 16.25rem;
    overflow: hidden;
    vertical-align: middle;
    padding: 0.5625rem 2rem 0.6875rem;
    text-align: center;
}


/*
    Component: ssr/plan_carousel
 */

.lux2-grid .plan_carousel.aem-Grid.aem-Grid--12.aem-Grid--default--12 {
    display: block;
}

.carousel {
    display:flex;
    gap: 2px;
    margin: var(--bm-spacing-20) 0 var(--bm-spacing-72) 0;
    position: relative;
}

.carousel-nav {
    background-color: var(--bm-color-background-default-light);
    border: var(--bm-border-width-md) solid var(--bm-color-border-neutral-default-light);
    border-radius: var(--bm-border-radius-md);
    cursor: pointer;
    display: block;
    height: var(--bm-icon-size-xl);
    margin-top: 33%;
    min-width: var(--bm-icon-size-xl);
    overflow: hidden;
    position: absolute;
    text-align: center;
    width: var(--bm-icon-size-xl);
    z-index: 5;
}

.carousel-nav:hover {
    background-color: var(--bm-color-background-neutral-strong-light);
    border-color: var(--bm-color-border-neutral-strong-light);
}

.carousel-nav span {
    display: block;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m17.032 11.467-7.5-7.5a.753.753 0 0 0-1.064 1.065L15.443 12l-6.975 6.968a.75.75 0 0 0 0 1.064.75.75 0 0 0 1.065 0l7.5-7.5a.75.75 0 0 0 0-1.065Z\"/></svg>");
    text-indent: -624.938rem;
    font-size: var(--bm-font-size-sm-mobile);
    line-height: var(--bm-font-line-height-sm-mobile);
    background-position: center center;
}

.carousel-nav-prev {
    left: 0;
}

.carousel-nav-prev span {
    transform: rotate(180deg);
}

.carousel-nav-next {
    right: 0;
}


/* Nav btn placement - outside of carousel if window is wide enough */
@media screen and (min-width: 1120px) {
    .carousel-nav-prev {
        left: -50px;
    }

    .carousel-nav-next {
        right: -50px;
    }
}


/* Carousel inner scrolling viewport */
.carousel-viewport {
    overflow-x: scroll;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

/* GENERIC CARD COLLECTION CONTAINER - card-grid */
.card-grid {
    display: grid;
    grid-auto-flow: column;
}

/* Card Width Formula */
/* Card Width = (Container Width - (#cards * carGap) - cardPartialWidth) / #cards */


/* 1 full card */
@media screen and (max-width:639px) {
    .card-grid {
        gap: 0.9375rem;
        grid-auto-columns: calc((100% - 0.9375rem ) * 0.85);
    }
}

/* 2 full cards - 2 gaps and a fixed 0.9375rem width partial next card */
@media screen and (min-width:640px) {
    .card-grid {
        gap: 0.9375rem;
        grid-auto-columns: calc((100% - ( 3 * 0.9375rem)) / 2);
    }
}

/* 2 or 3 full cards at a fixed width of 310px each */
@media screen and (min-width:714px) {
    .card-grid {
        gap: 0.75rem;
        grid-auto-columns: 310px;
    }
}


/* The outer wrapper of the card */
.card {
    /* Border Radius should be specified by actual concrete implementation*/
    border-radius: 8px;
    display: grid;
    gap: 0;
    grid-column: span 1;
    /* Number of rows in each card should be specified by actual concrete implementation */
    grid-row: span 6;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    scroll-snap-align: center;
}

/* Card badge - sits within card above the card body */
.card-badge {
    background-color: var(--bm-color-background-promotion-default-light);
    /* Border Radius should be specified by actual concrete implementation */
    border-radius: var(--bm-border-radius-lg);
    color: var(--bm-color-text-contrast-light);
    font-family: var(--bm-font-family-mark-pro);
    font-size: var(--bm-font-size-2xs-mobile);
    font-weight: var(--bm-font-weight-bold);
    line-height: var(--bm-font-line-height-xs-mobile);
    padding: var(--bm-spacing-6) var(--bm-spacing-20);
    position: relative;
    width: fit-content;
}

.card-badge::before {
    content: "";
    display: block;
    position: absolute;
    width: 1rem;
    height: 1.25rem;
    background: inherit;
    bottom: -10px;
    left: 0px;
}

/* Card body - everything but the badge. This is where the card border goes */
.card-body {
    display: grid;
    grid-column: span 1;
    /* Number of rows in card body is number of rows in card minus 1 (for the badge). Should be specified by actual concrete implementation */
    grid-row: span 5;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    background-color: var(--bm-color-background-default-light);;
    border: var(--bm-border-width-md) solid var(--bm-color-border-neutral-default-light);
    line-height: 1.3125rem;
    overflow: hidden;
    position: relative;
}

/* PLAN card specific styling. */
/* Maybe we should have an additional class on the card-body specified by template consumer
   and attach plan card specific styling to that
 */

.card-block {
    /* Padding - should be specified by actual concrete implementation */
    padding: 0 1rem;
}

.card-block-inner {
    padding: 10px 0;
}

.card-block-inner.border-top {
    border-top: var(--bm-measurement-1) solid #d1d7da;
}

.card-block-inner.border-bottom {
    border-bottom: var(--bm-measurement-1) solid #d1d7da;

}

.card-block-title {

}

.card-block-descr * {
    font-size: 0.875rem;
}

.card-block ul {
    list-style-type: none;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
    padding-left: 0;
}

.card-block li {
    margin-bottom: var(--bm-spacing-12);
}

.card-block a {
    font-family: MarkPro;
    text-decoration: underline;
}

.block-item-image-icon {
    display: flex;
    gap: 0.25rem;
}

.block-item-image-icon .block-item-image {
    max-width: 2.25rem;
    min-width: 2.25rem;
}

.block-item-image-icon .block-item-image img {
    max-width: 100%;
    height: auto;
}

.block-item-image-normal {
    display: block;
}

.block-item-image-normal .block-item-image {
    max-width: 100%;
}

.block-item-title {
    font-weight: var(--bm-font-weight-bold);
}

.block-item-descr * {
    font-size: 0.875rem;
}

/* TODO This could be an accordion component. Base summary {} lifted to master.css */
.card-block-summary::after {
    content: "";
    transition: transform 0.2s ease;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 321 148.7 213.7l22.6-22.7 84.7 84.7 84.7-84.7 22.6 22.7z"></path></svg>');
    background-repeat: no-repeat;
    height: 1.5rem;
    width: 1.5rem;
}

details[open] .card-block-summary::after {
    transform: rotate(180deg);
}

.card a {
    color: inherit;
}

/* CTA button — bound via class name (see plan_carousel.html button.plan-cta) */
.plan-cta.primary {
    background-color: var(--bm-color-background-secondary-default-light);
    border: 0;
    border-radius: var(--bm-border-radius-md);
    color: var(--bm-color-text-default-light);
    cursor: pointer;
    font-family: var(--bm-font-family-mark-pro);
    font-size: var(--bm-font-size-xs-mobile);
    font-weight: var(--bm-font-weight-bold);
    line-height: var(--bm-font-line-height-xs-mobile);
    padding: var(--bm-spacing-12) var(--bm-spacing-32);
    width: 100%;
}

.plan-cta.primary:hover {
    background: rgba(253, 204, 8, 0.7);
    opacity: 0.9;
}

.plan-cta.primary:disabled {
    background-color: #d1d7da;
    cursor: default;
    opacity: 0.3;
}

.icon-selected {
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    background-color: var(--bm-color-icon-success-strong-light);
    fill: var(--bm-color-background-success-default-light);
    margin-right: var(--bm-spacing-6);
    padding: var(--bm-spacing-2);
    border-radius: var(--bm-border-radius-round);
    width: var(--bm-spacing-16);
    height: var(--bm-spacing-16);
}

.icon-selected svg {
    width: 78%;
    height: auto;
}

.plan-cta {
    display: flex;
    align-items: center;
    justify-content: center;
}

.plan-cta .icon-selected {
    display: none;
}

.plan-cta.selected {
    background: var(--bm-color-background-success-default-light);
    color: var(--bm-color-text-success-strong-light);
}

.plan-cta.selected .icon-selected {
    display: flex;
}

.plan-cta .plan-cta-label {
    display: block;
}

.plan-cta.selected .plan-cta-label {
    display: none;
}

.plan-cta .plan-cta-label-selected {
    display: none;
}

.plan-cta.selected .plan-cta-label-selected {
    display: block;
}

.planTitleBlock {
    background-color: var(--bm-color-background-subtle-light);
}

.planTitleBlock .card-block-inner {
    padding: 1.625rem 0;
}

.planTitleBlock h3 {
    font-family: MarkProBold;
    font-size: 1rem;
    line-height: 1.3125;
}

.dataPriceBlock {
    color: #181c1f;
    margin: 0.5rem 0 1.25rem 0;
}

.dataPriceBlock .dataPriceWrapper {
    display: flex;
    justify-content: space-between;
}

.dataPriceBlock .dataWrapper {
}

.dataPriceBlock .priceWrapper {
    display: flex;
    flex-direction: column;
    text-align: right;
}

.dataPriceBlock .plan-data,
.dataPriceBlock .plan-price {
    font-size: 2rem;
    font-weight: 700;
    line-height: 2.5rem;
}

.dataPriceBlock .duration {
    font-family: var(--bm-font-family-mark-pro);
    font-size: var(--bm-font-size-2xs-mobile);
    font-weight: var(--bm-font-weight-regular);
    line-height: var(--bm-font-line-height-2xs-mobile);
    margin-top: var(--bm-spacing-8);
}

.dataPriceBlock .duration p {
    font-size: inherit;
    line-height: inherit;
}

.ctaBlock .card-block-inner {
    padding: var(--bm-spacing-20) 0;
}

.cisBlock .card-block-inner {
    padding: var(--bm-spacing-8) 0 var(--bm-spacing-20) 0;
}

.cis-block a {
    color: inherit;
    cursor: pointer;
    font-size: var(--bm-font-size-2xs-mobile);
    font-weight: var(--bm-font-weight-bold);
    line-height: var(--bm-font-line-height-2xs-mobile);
}

.qty-selector {
    border: 1px solid black;
    display: flex;
    align-items: center;
}


/* CART SUMMARY */

.cart-summary {
    scroll-margin-top: 90px;
}

.cart-summary h2 {
    font-family: MarkProBold;
    font-size: 1.5rem;
}

.cart-summary-inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}

.line-item {
    border: 1px solid #dadada;
    border-radius: 1.5rem;
}

.item-details,
.item-promo,
.item-subtotal {
    padding: 1.5rem;
}

.item-details, .item-promo {
    display: grid;
    align-items: center;
    grid-template-columns: 75px auto 160px 100px;
}

.item-price-data {
    display: flex;
    align-items: center;
    gap: 8px;
}

.item-quantity-selector {
    text-align: right;
}

.item-price,
.item-extended-price,
.promo-discount {
    text-align: right;
}

.item-subtotal {
    border-top: 1px solid #dadada;
    color: #515c62;
    font-family: MarkProBold;
    font-size: .875rem;
    line-height: 1.5rem;
}

.promo-descr {
    grid-column: span 2;
}

.item-name {
    font-family: MarkProBold;
    font-size: 1.125rem;
}

.item-price,
.item-data {
    font-family: MarkProBold;
    font-size: 0.875rem;
}

.item-quantity-selector {
    border: 1px solid #dadada;
    display: flex;
    justify-content: space-around;
}

.item-quantity {
    width: 40px;
    text-align: center;
    border: none;
}

.item-extended-price {
    display: flex;
    flex-direction: column;
    justify-self: end;
    line-height: 1.5;
}

.payment-amount {
    font-family: MarkPro;
    font-size: 1.125rem;
    text-align: right;
}

.payment-freq {
    font-family: MarkProBold;
    font-size: 0.875rem;
}
.bullet {
    display: inline-block;
    background-color: #dadada;
    border-radius: 50%;
    height: 6px;
    width: 6px;
}

/* Carousel Pagination Dots styling */
.carousel-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: -2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.swiper-pagination-bullet {
    background: none;
    display: inline-block;
    cursor: pointer;
    margin: 0 var(--bm-spacing-4);
    width: 1.75rem;
    height: 1.75rem;
    position: relative;
    transition: all 250ms ease-in-out;
}

.swiper-pagination-bullet:before {
    content: '';
    display: block;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--bm-border-radius-sm);
    position: absolute;
}

.swiper-pagination-bullet:after {
    background-color: var(--bm-color-icon-neutral-subtle-light);
    border-radius: var(--bm-border-radius-round);
    content: '';
    display: block;
    left: 50%;
    top: 50%;
    width: var(--bm-spacing-8);
    height: var(--bm-spacing-8);
    transform: translate(-50%, -50%);
    transition: 250ms ease-in-out;
    position: absolute;
}

.swiper-pagination-bullet:hover:after,
.swiper-pagination-bullet.swiper-pagination-bullet-active:after {
    background-color: var(--bm-color-background-neutral-contrast-light);
}

.swiper-pagination-bullet.swiper-pagination-bullet-active:after {
    width: var(--bm-spacing-16) !important;
}

/*
    Component: ssr/product_variation
 */


/* GLOBAL View */

.leftPanel,
.rightPanel {
  flex: 1;
  padding: 0.75rem;
}

.product-stickers {
  display: flex;
  gap: 8px;
}

.product-sticker {
    background-color: #f4f7f8;
    border-radius: 1.25rem;
    color: #181c1f;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 2px 8px;
}

.image-carousel {
  align-items: center;
  display: flex;
  gap: 2px;
  margin-left: 56px;
}

.image-carousel-nav {
  background-color: var(--bm-color-background-default-light);
  border: var(--bm-border-width-md) solid var(--bm-color-border-neutral-default-light);
  border-radius: var(--bm-border-radius-md);
  cursor: pointer;
  display: block;
  height: var(--bm-icon-size-xl);
  overflow: hidden;
  text-align: center;
  width: var(--bm-icon-size-xl);
}

.image-carousel-nav:hover {
  background-color: var(--bm-color-background-neutral-strong-light);
  border-color: var(--bm-color-border-neutral-strong-light);
}

.image-carousel-nav span {
  display: block;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"currentColor\" d=\"m17.032 11.467-7.5-7.5a.753.753 0 0 0-1.064 1.065L15.443 12l-6.975 6.968a.75.75 0 0 0 0 1.064.75.75 0 0 0 1.065 0l7.5-7.5a.75.75 0 0 0 0-1.065Z\"/></svg>");
  text-indent: -624.938rem;
  font-size: var(--bm-font-size-sm-mobile);
  line-height: var(--bm-font-line-height-sm-mobile);
  background-position: center center;
}

.image-carousel-nav-prev {
  margin-left: -54px;
}

.image-carousel-nav-prev span {
  transform: rotate(180deg);
}

.image-carousel-nav-next span {
}

.image-carousel-viewport {
  overflow-x: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  width: 375px;
}

.image-carousel-card {
  scroll-snap-align: start;
}

.image-carousel-card img {
  height: 600px;
  width: 375px;
}

.product-brand,
.product-brand a {
  color: #181c1f;
  font-family: MarkPro;
  font-size: 1rem;
  font-weight: 400;
  line-height: 2rem;
  text-decoration: underline;
}

.product-brand a:hover {
  text-decoration: none;
}

.product-name {
  color: black;
  font-family: MarkPro;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
}

.selector {
  margin: 40px 0;
}

.selector-header {
  margin-bottom: 0.75rem;
}

.selector-label {
  display: inline-flex;
}

.selector-label,
.selector-value {
  font-family: MarkPro;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75rem;
}

.selector-value {
  font-weight: 400;
}

.selector-swatch {
  display: flex;
  gap: 0.75rem;
}

/* Palette style selector (for colour swatch) */
.selector-option.selector-palette {
  cursor: pointer;
  height: 2.75rem;
  width: 2.75rem;
}

.selector-option.selector-palette:has(input[type="radio"]:checked) {
  border: 2px solid #00828e;
  border-radius: 50%;
  padding: 6px;
}

.selector-option.selector-palette label {
  border: var(--bm-border-width-md) solid #85969e;
  border-radius: 50%;
  display: inline-block;
  height: 100%;
  width: 100%;
}

/* Button style selector (eg: Memory Capacity, Contract Term) */
.selector-option.selector-button {
  border: 1px solid #85969e;
  border-radius: 0.75rem;
  flex: 1;
}

.selector-option.selector-button:has(input[type="radio"]:checked) {
  border: 2px solid #00a3ad;
}

.selector-option.selector-button label {
  align-items: center;
  display: flex;
  font-family: MarkPro;
  font-size: 0.875rem;
  font-weight: 700;
  height: 3.5rem;
  justify-content: center;
  padding: 0 0.75rem;
}

/* Both styles of selector */

.selector-option label {
  cursor:pointer;
}

.selector-option input {
  opacity: 0;
  position: absolute;
}


.product-availability {
  align-items: center;
  background: var(--bm-color-background-success-default-light);
  border-radius: var(--bm-border-radius-md);
  color: var(--bm-color-text-success-strong-light);
  display: flex;
  font-family: var(--bm-font-family-mark-pro);
  font-size: var(--bm-font-size-xs-mobile);
  gap: 0.75rem;
  justify-content: center;
  line-height: var(--bm-font-line-height-xs-mobile);
  padding: var(--bm-spacing-12) var(--bm-spacing-16);
  margin: var(--bm-spacing-24) 0 var(--bm-spacing-40) 0;
}

.product-availability svg {
  height: 20px;
  width: 20px;
}

.product-price {
  align-items: baseline;
  color: var(--product-price-color);
  display: flex;
  font-family: var(--bm-font-family-mark-pro);
}

.price-unit,
.price-amount {
  font-size: var(--bm-font-size-2xl-desktop);
  font-weight: var(--bm-font-weight-heavy);
  line-height: var(--bm-font-line-height-2xl-desktop);
}

.price-frequency {
  font-size: var(--bm-font-size-sm-mobile);
  font-weight: var(--bm-font-weight-regular);
  line-height: var(--bm-font-line-height-sm-mobile);
}

.device-selection {
  margin: 1.25rem 0 2.5rem 0;
}

/* TODO Centralised styling */
.device-selection a.button {
  background-color: #fdcc08;
  border-radius: var(--bm-border-radius-md);
  color: var(--bm-color-text-default-light);
  display: inline-block;
  font-family: var(--bm-font-family-mark-pro);
  font-size: var(--bm-font-size-xs-mobile);
  font-weight: var(--bm-font-weight-bold);
  line-height: 1;
  padding: var(--bm-spacing-20) var(--bm-spacing-24);
  text-align: center;
  text-decoration: none;
  width: 100%;
}
/* ── SSR Separator ────────────────────────────────────────────────────── */

.ssr-separator {
  border-color: currentcolor currentcolor rgb(209, 215, 218);
  border-image: initial;
  border-style: none none solid;
  border-width: 0 0 0.0625rem;
  box-sizing: content-box;
  height: 0;
  margin: 0.9375rem 0;
  overflow: visible;
}


/*
    Component: ssr/text
 */

.h1-style {
    font-size: 2.5rem;
    line-height: 1;
    margin: 0 0 2.5rem;
}

.h2-style {
    font-size: 2rem;
    line-height: 1;
    margin: 0 0 1.375rem;
}

.h3-style {
    font-size: 1.75rem;
    line-height: 1;
    margin: 0 0 1.5rem;
}

.h4-style {
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 1.5rem;
}

.h5-style {
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0 0 1.5rem;
}

.h6-style {
    font-size: 1rem;
    line-height: 1.2;
    margin: 0 0 1.125rem;
}

.p-style {
    font-family: MarkPro;
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 0px;
}

@media screen and (min-width: 53.25rem) {
    .h1-style {
        font-size: 4rem;
    }

    .h2-style {
        font-size: 3rem;
    }

    .h3-style {
        font-size: 2rem;
        line-height: 1.2;
    }
}
/* ============================================================================
   Tile SSR — component styles

   Three views share this stylesheet, distinguished by the parent
   .ssr-tile-container--<variant> class (set by tilecontainer):
     • feature-tile              image/banner card  (image + title + CTA)
     • icon-and-text-descriptor  icon + title + description + CTA
     • enterprise-solution-card  CTA-only card

   Base rules are unscoped; per-variant tweaks are grouped in §7 and the
   responsive overrides in §8.

   Contents
     1. Layout primitives   (grid-child guards, content wrapper, frame)
     2. Image
     3. Text — colour, title size & authored-content resets
     4. Content spacing
     5. CTA button
     6. Promo pill
     7. Variant overrides
     8. Responsive
   ============================================================================ */


/* ── 1. Layout primitives ─────────────────────────────────────────────────── */

/* Grid children must be allowed to shrink below their content size, or a long
   word forces the column to overflow. */
.tile-image-wrap,
.tile-title-wrap,
.tile-description-wrap,
.tile-terms-wrap,
.tile-cta-button {
  min-width: 0;
}

/* Outer content wrapper — participates in the container subgrid.
   NB: the .ssr-tile-container top padding that reserves space for the outside
   pill is defined once in tilecontainer_ssr.css, not duplicated here. */
.ssr-tile-content {
  display: grid;
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: relative;
}

/* Outside pill offset is handled by the container padding — no extra top pad. */
.ssr-tile-content--with-outside-pill {
  padding-top: 0;
}

/* Inner frame that actually renders the card UI. z-index:2 keeps the card above
   the folded-corner triangle (z-index:1). The feature tile lays its sections out
   here (flex / space-between); the text variants lay out on the subgrid instead. */
.ssr-tile-frame {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  /* Single knob for inter-section spacing (image ↔ title ↔ terms ↔ cta), the
     feature-tile counterpart of the text variants' subgrid row-gap. Replaces the
     old space-between + per-section padding/margin that fought each other. */
  gap: 1rem;
  width: 100%;
  height: 100%;
  min-height: 19.5rem;
  background-color: #fff;
  position: relative;
  z-index: 2;
}

/* Border lives here (NOT on the outer container). */
.ssr-tile-frame--bordered {
  border: var(--bm-border-width-md) solid var(--bm-color-border-neutral-subtle-light);
  border-radius: var(--bm-border-radius-xl);
}

/* When the whole tile is a link: reset <a> defaults so it still looks like a card. */
.ssr-tile-frame--linked {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.ssr-tile-frame--linked:hover,
.ssr-tile-frame--linked:focus {
  outline: none;
  text-decoration: none;
  color: inherit;
}


/* ── 2. Image ─────────────────────────────────────────────────────────────── */

/* WCM Core Image v3 outputs .cmp-image > .cmp-image__image.
   Device photo: centred, capped at 12rem, with breathing padding. */
.tile-image-wrap {
  display: grid;
  place-items: center;
  min-height: 7rem;
  padding: 1.5rem 1rem;
}

.tile-image-wrap .cmp-image {
  display: grid;
  place-items: center;
  width: 100%;
  line-height: 0;
}

.tile-image-wrap .cmp-image__image {
  width: auto;
  height: auto;
  max-width: 12rem;
  max-height: 12rem;
  object-fit: contain;
}

/* textDescriptor image is an icon-sized asset, not a device photo — no device
   min-height / vertical padding. Its top/bottom spacing comes from the item
   row-gap like every other section. */
.text-tile-image-wrap {
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.text-tile-image-wrap .cmp-image__image {
  max-width: 32rem;
}

/* Bordered card: tuck the image top corners under the card corner radius. */
.tile-image-wrap--bordered .cmp-image__image {
  border-top-left-radius: 0.6875rem;
  border-top-right-radius: 0.6875rem;
}

/* Feature-tile image: full-bleed, edge-to-edge (e.g. an 988×480 banner) — the
   opposite of the centred device photo above. Scoped to the feature-tile variant
   so the "Feature Content" (feature-content / -overlap) device photos keep the
   centred/capped base rules. The img selector's three-class specificity (0,3,0)
   beats the base wrap/img rules and the §8 responsive overrides; the top corner
   radius still comes from .tile-image-wrap--bordered above.
   NB: this now targets the ACTUAL emitted class (tile-image-wrap) — it was
   previously written as tile-image-wrap-new, which nothing renders, so it never
   applied. It affects EVERY image in a feature-tile container, so a device photo
   mistakenly authored under this view will also go full-bleed. */
.ssr-tile-container--feature-tile .tile-image-wrap {
  display: block;
  min-height: 0;
  padding: 0;
}

.ssr-tile-container--feature-tile .tile-image-wrap .cmp-image,
.ssr-tile-container--feature-tile .tile-image-wrap .cmp-image__image {
  display: block;
  width: 100%;
  max-width: none;
  max-height: none;
  height: auto;
  object-fit: cover;
}


/* ── 3. Text — colour, title size & authored-content resets ───────────────── */

/* Authored "Font Colour" (dialog ./fontColour): tileFeatureContent.html sets
   --ssr-tile-font-color inline on the frame when a colour is selected; otherwise
   these fall back to the default light-text token. */
.feature-tile-title,
.tile-title,
.tile-brand,
.tile-description,
.tile-terms {
  color: var(--ssr-tile-font-color, var(--bm-color-text-default-light));
}

/* Font family / size / weight / line-height are intentionally NOT set on the
   text wrappers: the copy is authored in the RTE, so the author's own markup
   (e.g. an <h3> in tile-brand, a utility class like h5-style) plus the global
   master.css / beam tokens decide typography. The tile only owns colour (above,
   driven by the fontColour dialog) and spacing (the margins below). */

/* The text-variant tile title is a component-owned heading — a short label that
   must stay a single line so it aligns across the subgrid row (a long title
   otherwise wraps and stretches every tile's title row, leaving gaps under the
   shorter ones). This is distinct from the freely-authored body copy: we set
   ONLY the size + line-height (and spacing); the family (MarkProHeavy) and weight
   still come from master.css h1–h5. */
.tile-title h3 {
  font-size: var(--bm-font-size-xs-desktop);
  line-height: 1.875rem;
  margin: 0.75rem 0px 0.625rem;
}

.feature-tile-title {
  margin-top: var(--bm-measurement-24);
  margin-right: 0;
  margin-bottom: var(--bm-measurement-24);
  margin-left: 0;

}

.tile-terms {
  margin: 0;
}

/* RTE links: keep only the underline affordance so links stay recognisable;
   font family / weight are left to the authored content. */
.tile-title a,
.tile-description a,
.tile-terms a,
.tile-brand a,
.tile-device-name a {
  text-decoration: underline;
}

.tile-device-name a {
  color: rgb(24, 28, 31);
  font-family: var(--bm-font-family-mark-pro);
}


/* ── 4. Content spacing ───────────────────────────────────────────────────── */

/* Horizontal inset shared by every content section. Vertical spacing is owned
   elsewhere: the text variants use the item subgrid row-gap; the feature tile
   uses the .ssr-tile-frame rules below. Keeping these wraps free of top/bottom
   spacing is what lets a single row-gap be the uniform spacer in the text
   variants. */
.tile-title-wrap,
.tile-description-wrap,
.tile-terms-wrap,
.tile-cta-button {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Feature tile only: its sections live inside .ssr-tile-frame (flex), spaced by
   the frame `gap`. The frame is rendered ONLY by the feature tile, so these
   don't leak into the text-variant rhythm.
   `gap` handles spacing BETWEEN sections; these two rules add the edge insets it
   can't: a top inset for the image-less tile (title is then the first child and
   would touch the top border) and top/bottom room around terms. */
.ssr-tile-frame > .tile-title-wrap:first-child {
  padding-top: var(--bm-measurement-24);
}
.ssr-tile-frame .tile-terms-wrap {
  padding-bottom: 1rem;
}


/* ── 5. CTA button ────────────────────────────────────────────────────────── */

.tile-cta-button {
  display: grid;
  align-content: center;
  justify-content: start;
}

/* Feature tile: CTA pinned to the bottom of the frame (so CTAs align across a
   row of tiles). `margin-top: auto` absorbs the free vertical space — the old
   space-between behaviour, but without floating the middle sections. `gap` still
   guarantees a minimum 1rem above the CTA; margin-bottom is the bottom edge inset. */
.ssr-tile-frame .tile-cta-button {
  margin-top: auto;
  margin-bottom: 1rem;
}

/* Remove unexpected spacing from AEM button wrappers. */
.tile-cta-button > *,
.tile-cta-button p {
  margin: 0;
}

.tile-cta-button .cmp-button {
  width: 100%;
  max-width: 220px;
}

/* Constrain button/link to match content width (same 1rem inset as
   title/description). max-width:100% + box-sizing override any full-width or
   negative-margin Beam styles. */
.tile-cta-button a,
.tile-cta-button button,
.tile-cta-button .ssr-cta-button.ssr-cta-primary {
  max-width: 100%;
  min-width: 10rem;
  box-sizing: border-box;
}

/* CTA "link" style: override button_ssr's default link colour
   (a.ssr-cta-link → --bm-color-text-tertiary-default-light) with black inside
   the tile. Specificity (0,2,1) beats button_ssr's a.ssr-cta-link (0,1,1). */
.tile-cta-button a.ssr-cta-link {
  color: var(--bm-color-text-default-light);
}

/* Feature-tile PRIMARY CTA spans the full tile width. The base .tile-cta-button
   is a grid with justify-content:start, which packs its single auto track to the
   button's content width; stretching the track (and dropping the button's
   min-width floor) lets the primary button fill the tile edge-to-edge.
   Scoped with :has() to the primary button only — link-style CTAs
   (a.ssr-cta-link) keep their content width / start alignment. */
.ssr-tile-container--feature-tile .tile-cta-button:has(> .ssr-cta-button.ssr-cta-primary) {
  justify-content: stretch;
}
.ssr-tile-container--feature-tile .tile-cta-button > .ssr-cta-button.ssr-cta-primary {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}


/* ── 6. Promo pill (badge) ────────────────────────────────────────────────── */

.tile-promo-pill {
  position: absolute;
  top: -12px;
  left: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 18px;
  border-radius: 999px 999px 999px 0;
  white-space: nowrap;
  z-index: 3;
}

.tile-promo-pill__text {
  font-size: 14px;
  line-height: 32px;
  font-weight: 700;
}

/* Outside pill: anchored to the top-left of the outer container. */
.tile-promo-pill--outside-top-left {
  top: -2rem;
  left: 0px;
}

/* Folded-corner triangle: sits between the pill (z-index:3) and the frame
   (z-index:2). The white card background covers the overlap, leaving only the
   small tip visible. */
.tile-promo-pill-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 5rem;
  height: 5rem;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 1;
}

/* Inside pill: flows inline with tile content; resets the absolute positioning. */
.tile-promo-pill--inside-left {
  position: relative;
  top: unset;
  left: unset;
  margin-bottom: 0.75rem;
}


/* ── 7. Variant overrides ─────────────────────────────────────────────────── */
/* icon-and-text-descriptor / enterprise-solution-card. Two-class specificity
   beats the single-class base rules above. */

/* icon-and-text-descriptor: stretch the CTA button to full tile width. */
.ssr-tile-container--icon-and-text-descriptor .tile-cta-button {
  place-items: stretch;
}

/* Icon / image horizontal alignment follows the authored title text-align
   (tile.titleTextAlign Java getter). Overrides the global
   .tile-icon-wrap { justify-content: center } in tilecontainer_ssr.css. */
/* left (default — no text-align set in RTE) */
.ssr-tile-container--icon-and-text-descriptor .tile-icon-wrap--align-left,
.ssr-tile-container--enterprise-solution-card .tile-icon-wrap--align-left {
  justify-content: flex-start;
  padding-left: 1rem;
}
.ssr-tile-container--icon-and-text-descriptor .tile-image-wrap--align-left,
.ssr-tile-container--enterprise-solution-card .tile-image-wrap--align-left {
  place-items: start;
  padding-left: 1rem;
}
/* center */
.ssr-tile-container--icon-and-text-descriptor .tile-icon-wrap--align-center,
.ssr-tile-container--enterprise-solution-card .tile-icon-wrap--align-center {
  justify-content: center;
}
.ssr-tile-container--icon-and-text-descriptor .tile-image-wrap--align-center,
.ssr-tile-container--enterprise-solution-card .tile-image-wrap--align-center {
  place-items: center;
}
/* right */
.ssr-tile-container--icon-and-text-descriptor .tile-icon-wrap--align-right,
.ssr-tile-container--enterprise-solution-card .tile-icon-wrap--align-right {
  justify-content: flex-end;
  padding-right: 1rem;
}
.ssr-tile-container--icon-and-text-descriptor .tile-image-wrap--align-right,
.ssr-tile-container--enterprise-solution-card .tile-image-wrap--align-right {
  place-items: end;
  padding-right: 1rem;
}

/* No image section → drop the device-tile min-height set on the base frame. */
.ssr-tile-container--icon-and-text-descriptor .ssr-tile-frame {
  min-height: 0;
  padding: 1.5rem 1.25rem 3rem;
}

/* enterprise-solution-card: button-only tile, no extra bottom space needed. */
.ssr-tile-container--enterprise-solution-card .ssr-tile-frame {
  min-height: 0;
  padding: 1rem;
}

/* enterprise CTA fills the frame padding; text handles its own internal spacing.
   justify-content:stretch (vs the base start) lets the CTA span the full card so
   both button types end up the same width — each card is an equal 1fr column. */
.ssr-tile-container--enterprise-solution-card .tile-cta-button {
  padding: 0;
  width: 100%;
  justify-content: stretch;
}

/* Vertically centre each card's single action so the three heterogeneous cards
   (web-chat button, primary CTA, plain text link) sit on one baseline instead of
   the web-chat/text ones hugging the top while the taller primary CTA centres. */
.ssr-tile-container--enterprise-solution-card .ssr-tile-item {
  justify-content: center;
}

/* Wrappers must span the full card so the button inside can too. */
.ssr-tile-container--enterprise-solution-card .ssr-web-chat-wrapper {
  width: 100%;
}

/* Both button types become identical, full-width boxes: same width at every
   breakpoint (fixes the 768px divergence where web-chat was auto-width and the
   primary CTA was pinned to min-width), same height, text centred. Overrides
   button_ssr's inline-block / width:auto|100% / min-width / margin. */
.ssr-tile-container--enterprise-solution-card .web-chat-button.primary,
.ssr-tile-container--enterprise-solution-card .tile-cta-button .ssr-cta-button.ssr-cta-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: var(--bm-spacing-48);
  margin: 0;
  padding: var(--bm-spacing-12) var(--bm-spacing-16);
  box-sizing: border-box;
}


/* ── 8. Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .ssr-tile-frame {
    min-height: 16.5rem;
  }

  /* Text variants keep min-height suppressed on tablet too. */
  .ssr-tile-container--icon-and-text-descriptor .ssr-tile-frame,
  .ssr-tile-container--enterprise-solution-card .ssr-tile-frame {
    min-height: 0;
  }

  .tile-image-wrap {
    min-height: 7rem;
    padding: 1.5rem 1rem 0;
  }

  .tile-image-wrap .cmp-image__image {
    height: 7rem;
    width: auto;
    object-fit: contain;
  }
}

.ssr-tile-container {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 1.5rem;
  margin: 1rem auto;
  width: min(100%, 1000px);
  padding-top: 2rem;
}

.ssr-tile-item {
  display: flex;
  min-width: 0;
  height: 100%;
  justify-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
}

.ssr-tile-container .tile-content img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* ── icon-and-text-descriptor / enterprise-solution-card ────────────────────
   auto-fit: tiles always fill the full container width regardless of count.
   justify-content: center keeps the row centred when tiles don't span full width.
   subgrid span 4: icon · title · description · cta  (vs 5 for featureContent)
   ─────────────────────────────────────────────────────────────────────────── */
.ssr-tile-container--icon-and-text-descriptor,
.ssr-tile-container--enterprise-solution-card {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    justify-content: center;
    /* Single knob for inter-section vertical spacing in the text variants.
       No outside promo-pill here, so no need to reserve the container top pad. */
    --tile-section-gap: 0.75rem;
    padding-top: 0;
}

/* Icon / title / description / cta lay directly on the subgrid rows. Rather than
   scattering different padding-top / margin values across each wrap (which read as
   an uneven ~2.5rem / 0.75rem / 1.5rem rhythm), the subgrid row-gap is the SINGLE
   source of vertical spacing — the wrap overrides in tile_ssr.css zero the rest.
   (Column gap between tiles is unaffected.) */
.ssr-tile-container--icon-and-text-descriptor .ssr-tile-item {
    row-gap: var(--tile-section-gap);
}

/* enterprise-solution-card only renders a CTA — single subgrid row */
.ssr-tile-container--enterprise-solution-card .ssr-tile-item {
    grid-row: span 1;
}

/* ── Responsive ──────────────────────────────────────────────────────────────
   Desktop-first: breakpoints run 1024 → 851 → 767 → 491, each once, in cascade
   order. Only grid-template-columns (tiles-per-row) varies between variants —
   the container width / gap / padding are set once per breakpoint on the base.

   Columns per variant:                >1024  ≤1024  ≤851  ≤767  ≤491
     feature-tile, 3+ tiles            auto   2-up   1-up  1-up  1-up
     feature-tile, 2 tiles             auto   2-up   2-up  2-up  1-up
     feature-content                   auto   2-up   2-up  2-up  2-up
     icon-and-text / enterprise-card   auto   auto   auto  1-up  1-up

   The two feature-tile instances share one class, so they're told apart by tile
   count — :has(3rd .ssr-tile-item) = 3+ up, :not(...) = 2 up. A 3-up row gets
   cramped sooner, so it collapses at 851px; the 2-up row holds until 492px.
   The text variants (icon-and-text-descriptor / enterprise-solution-card) keep a
   centred auto-fit until they collapse to a single column on mobile.
   ─────────────────────────────────────────────────────────────────────────── */

/* Tablet — 2 per row; text variants keep their centred auto-fit. */
@media (max-width: 1024px) {
    .ssr-tile-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(100%, 45rem);
        gap: 5rem 1rem;
        padding: 2rem 0 0;
        justify-content: start;
    }

    .ssr-tile-container--icon-and-text-descriptor,
    .ssr-tile-container--enterprise-solution-card {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        justify-content: center;
    }
}

/* ≤851 — a 3+-tile feature row is too cramped two-up: go single column. */
@media (max-width: 851px) {
    .ssr-tile-container--feature-tile:has(> .ssr-tile-item:nth-child(3)) {
        grid-template-columns: 1fr;
    }
}

/* Mobile — single column, except feature-content and the 2-tile feature row,
   which both stay two-up down to the phone breakpoint below. */
@media (max-width: 767px) {
    .ssr-tile-container {
        grid-template-columns: 1fr;
        gap: 5rem 1rem;
        padding: 2rem 1rem 0;
    }

    .ssr-tile-container--feature-content,
    .ssr-tile-container--feature-tile:not(:has(> .ssr-tile-item:nth-child(3))) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ssr-tile-container--icon-and-text-descriptor,
    .ssr-tile-container--enterprise-solution-card {
        grid-template-columns: 1fr;
    }

    .ssr-tile-container.ssr-tile-container--enterprise-solution-card {
        gap: 15px 1rem;   /* row 15px; */
    }

}

/* Phone — the 2-tile feature row finally collapses to one. */
@media (max-width: 491px) {
    .ssr-tile-container--feature-tile:not(:has(> .ssr-tile-item:nth-child(3))) {
        grid-template-columns: 1fr;
    }
}

/* ── TextDescriptor / EnterpriseSolutionCard icon sizing ─────────────────────
   Uses Beam design tokens (--bm-icon-size-*) from clientlib-beam.
   The tile-icon--{size} modifier class is set from iconDetail.size authored value.
   ─────────────────────────────────────────────────────────────────────────── */
.tile-icon-wrap {
    display: flex;
    justify-content: center;
}

.tile-icon {
    display: block;
    /* fallback if no modifier class is present */
    width: var(--bm-icon-size-md);
    height: var(--bm-icon-size-md);
}

.tile-icon--default { width: var(--bm-icon-size-md);  height: var(--bm-icon-size-md);  }
.tile-icon--s       { width: var(--bm-icon-size-sm);  height: var(--bm-icon-size-sm);  }
.tile-icon--m       { width: var(--bm-icon-size-md);  height: var(--bm-icon-size-md);  }
.tile-icon--l       { width: var(--bm-icon-size-lg);  height: var(--bm-icon-size-lg);  }
.tile-icon--xl      { width: var(--bm-icon-size-xl);  height: var(--bm-icon-size-xl);  }
.tile-icon--2xl     { width: var(--bm-icon-size-2xl); height: var(--bm-icon-size-2xl); }
/* ==========================================================================
   ssr/optusHeader — Merged & flattened CSS
   Source: React OptusHeader component CSS files (17 files)
   Ported for AEM SSR (no CSS nesting, lux2 vars replaced with fallbacks)
   ========================================================================== */

/* ==========================================================================
   1. OptusHeader/index.css — Root sticky, inner-wrapper, overlay, nav-level
   ========================================================================== */


/* Global button + [hidden] resets moved to clientlib-ssr-base/master.css (base layer) */

/*
NOTE: this is to ensure the component sticks
at the top of the page.
*/
header,
[data-ssr-component='optusHeader'] {
  top: 0;
  width: 100%;
  position: sticky;
  z-index: 1000;
}

/* In AEM the component sits in a grid column (`.aem-GridColumn`) sized to the
   header itself, which becomes the sticky rule's containing block and confines it
   to the header's own height — so on scroll the header slides off instead of
   pinning. Collapse that wrapper's box with `display: contents` so the sticky
   `.header` above is instead contained by the full-height page grid; once Level 1
   hides on scroll, the Level 2 bar then stays pinned to the top of the page.
   (The React standalone layout has no per-component wrapper, hence no such issue.) */
.aem-GridColumn:has(> [data-ssr-component='optusHeader']) {
  display: contents;
}

.header__inner-wrapper {
  display: flex;
  flex-direction: column;
}

.header__mobile-sub-nav-container {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  z-index: 1001;
}

.header__dark-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-support-grey55, #1f2222);
  opacity: 0.72;
  z-index: -1;
}

.header__nav-level {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
}

.header__nav-level a:focus-visible {
  outline: var(--bm-border-width-lg) solid var(--bm-focus-indicator-outline-color-default-light);
}

@media (min-width: 1020px) {
  .header__nav-level {
    padding: 0;
    width: 63.75rem;
  }
}

.header__nav-level-1 {
  max-width: calc(100% - 24px);
}

.header__focus-trap-container {
  z-index: var(--bm-zindex-2000); /** needs to be less than GPSE autosuggest z-index of 5000 */
  position: absolute;
  width: 100%;
}

.header__focus-trap-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--bm-zindex-3000);
}

.header__mobile-sub-nav-container-content {
  position: absolute;
  right: 0;
  width: 100%;
  max-width: 26.875rem;
  overflow-y: scroll;
}

.header__level-1__lhs-mobile {
  top: 4rem;
}

@media (min-width: 431px) and (max-width: 768px) {
  .header__level-1-rhs-modal-bg--tablet {
    height: 100vh;
    width: 26.875rem; /* 430px for capping the width in mobile/tablet */
    background-color: var(--bm-color-background-subtle-light);
    right: 0;
    position: absolute;
  }
}


/* ==========================================================================
   2. OptusHeader/SkipLinks/SkipLinks.css
   ========================================================================== */

.skiplinks__link {
  overflow: hidden;
  white-space: nowrap;
  position: absolute;
  height: 0.0625rem;
  width: 0.0625rem;
  left: 2.5rem;
  top: -1.75rem;
  color: var(--color-digital-teal, #00828e);
  text-decoration: none;
  z-index: 1000;
}

.skiplinks__link:focus {
  overflow: visible;
  display: block;
  padding: 0.125rem 0.3125rem;
  width: fit-content;
  height: fit-content;
  top: var(--bm-spacing-4);
  border-radius: 0.1875rem;
  background-color: var(--color-white, #ffffff);
}

.skiplinks__link:focus:not([disabled]) {
  text-decoration: none;
}

.skiplinks__link:focus-visible {
  outline: var(--bm-border-width-lg) solid var(--bm-focus-indicator-outline-color-default-light);
}

.skiplinks__screen-reader-span {
  position: absolute;
  left: -625rem;
  top: auto;
  width: 0.0625rem;
  height: 0.0625rem;
  overflow: hidden;
}


/* ==========================================================================
   3. OptusHeader/Level1/Level1.css
   ========================================================================== */

.optus-logo-link {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 1020px) {
  .optus-logo-link {
    margin-right: 5rem;
  }
}

.optus-logo-link > svg {
  width: 5.125rem;
  height: var(--spacing-default, 1rem);
  fill: var(--color-accent-blue_lagoon, #00828e);
}

.header__level-1-link {
  height: 100%;
  display: flex;
  align-items: center;
  font-family: MarkPro, sans-serif;
  font-weight: var(--font-medium, 500);
  font-size: var(--text-sm, 0.875rem);
  text-decoration: none;
  text-transform: none;
}

@media (min-width: 1020px) {
  .header__level-1-link {
    height: 1.5rem;
  }
}

[data-cart-wrapper] {
  display: flex;
  align-items: center;
}

.header__level-1-link:hover {
  cursor: pointer;
  text-decoration: underline;
  color: var(--color-accent-teal70, #00646F);
}

.header__level-1-link-default {
  color: var(--color-support-grey_33, #333333) !important;
}

.header__level-1-link-default:focus-visible {
  box-shadow: var(--bm-focus-indicator-default-shadow-light);
  outline-offset: var(--bm-focus-indicator-outline-offset-light);
  outline-color: var(--bm-focus-indicator-outline-color-default-light);
  outline-style: var(--bm-focus-indicator-outline-style-light);
  outline-width: var(--bm-focus-indicator-outline-width-light);
}

.header__level-1-link-active {
  color: var(--color-accent-teal70, #00646F) !important;
}

.header__level-1-wrapper {
  border-bottom: solid 0.063rem var(--color-support-grey2, #d1d7da);
  display: flex;
  align-items: center;
  background-color: var(--bm-color-background-subtle-light);
  height: var(--text-3xl, 4rem);
  padding: 0 var(--spacing-medium, 1.5rem);
}

@media (min-width: 1020px) {
  .header__level-1-wrapper {
    justify-content: center;
    height: 3.125rem;
  }
}

.header__level-1-links-wrapper-desktop {
  align-items: center;
  display: flex;
  gap: 1.875rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: var(--bm-color-background-subtle-light);
  height: 3.938rem;
}

@media (min-width: 1020px) {
  .header__level-1-links-wrapper-desktop {
    border-bottom: solid 0.063rem var(--color-support-grey2, #d1d7da);
    height: 3.125rem;
  }
}

.header__level-1-links-wrapper-desktop > li {
  display: flex;
  align-items: center;
}

.header__level-1-links-wrapper-desktop > li > a,
.header__level-1-links-wrapper-desktop > li > button {
  font-family: MarkPro, sans-serif;
  font-weight: var(--font-medium, 500);
  font-size: var(--text-sm, 0.875rem);
  text-decoration: none;
  text-transform: none;
}

.header__level-1-links-wrapper-desktop > li > button {
  padding: 0;
  background: none;
  align-items: center;
}

.header__level-1-links-wrapper-desktop > li > button:focus-visible {
  box-shadow: var(--bm-focus-indicator-default-shadow-light);
  outline-offset: var(--bm-focus-indicator-outline-offset-light);
  outline-color: var(--bm-focus-indicator-outline-color-default-light);
  outline-style: var(--bm-focus-indicator-outline-style-light);
  outline-width: var(--bm-focus-indicator-outline-width-light);
}

.header__level-1-links-wrapper-desktop > li > a:hover,
.header__level-1-links-wrapper-desktop > li > button:hover {
  cursor: pointer;
  text-decoration: underline;
  color: var(--color-accent-teal70, #00646F);
}

@media (max-width: 1019px) {
  .header__level-1-links-wrapper-desktop {
    display: none !important;
  }
}

.header__level-1-links-wrapper-mobile {
  align-items: center;
  display: flex;
  gap: 1.875rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: var(--bm-color-background-subtle-light);
  height: 3.938rem;
}

@media (min-width: 1020px) {
  .header__level-1-links-wrapper-mobile {
    background-color: none;
    display: none;
    height: 0;
    max-width: 0;
  }
}

.header__level-1-links-wrapper-mobile > li {
  display: flex;
  align-items: center;
}

.header__level-1-links-wrapper-mobile > li > a,
.header__level-1-links-wrapper-mobile > li > button {
  font-family: MarkPro, sans-serif;
  font-weight: var(--font-medium, 500);
  font-size: var(--text-sm, 0.875rem);
  text-decoration: none;
}

.header__level-1-links-wrapper-mobile > li > button {
  padding: 0;
  background: none;
  align-items: center;
}

.header__level-1-links-wrapper-mobile > li > a:hover,
.header__level-1-links-wrapper-mobile > li > button:hover {
  cursor: pointer;
  text-decoration: underline;
  color: var(--color-accent-teal70, #00646F);
}

.header__level-1-rhs-links-wrapper {
  margin-left: auto;
  gap: 0;
}

.header__level-1-rhs-links-wrapper > a,
.header__level-1-rhs-links-wrapper > button {
  gap: var(--spacing-xsmall, 0.375rem);
}

@media (min-width: 1020px) {
  .header__level-1-rhs-links-wrapper {
    gap: 1.125rem;
    line-height: 1.25rem;
  }

  .header__level-1-rhs-links-wrapper a,
  .header__level-1-rhs-links-wrapper button {
    display: flex;
    gap: var(--spacing-xsmall, 0.375rem);
    position: static;
  }

  .header__level-1-rhs-links-wrapper a:focus,
  .header__level-1-rhs-links-wrapper button:focus {
    box-shadow: var(--bm-focus-indicator-default-shadow-light);
    outline-offset: var(--bm-focus-indicator-outline-offset-light);
    outline-color: var(--bm-focus-indicator-outline-color-default-light);
    outline-style: var(--bm-focus-indicator-outline-style-light);
    outline-width: var(--bm-focus-indicator-outline-width-light);
  }

  .header__level-1-rhs-links-wrapper button:hover {
    color: var(--color-accent-teal70, #00646F);
  }
}

.header__level-1-nav-lhs--mobile {
  height: 3.375rem;
  width: 100%;
  max-width: 26.875rem;
  align-self: end;
  justify-content: center;
}

@media (min-width: 1020px) {
  .header__level-1-nav-lhs--mobile {
    display: none !important;
  }
}

@media screen and (max-width: 1020px) {
  .header__level-1-nav-lhs--mobile {
    justify-content: end;
  }
}

.header__level-1-ul-lhs--mobile {
  height: 3.313rem;
  width: -webkit-fill-available;
}

@media screen and (max-width: 1020px) {
  .header__level-1-ul-lhs--mobile > li {
    flex-grow: 1;
    justify-content: center;
  }
  .header__level-1-ul-lhs--mobile > li:first-child {
    justify-content: start;
  }
  .header__level-1-ul-lhs--mobile > li:last-child {
    justify-content: end;
  }
}

.header__level-1-menu-button--mobile {
  background: var(--bm-color-background-subtle-light) !important;
}

.header__level-1-menu-button--mobile > :hover {
  background-color: var(--bm-color-background-subtle-light) !important;
  cursor: pointer;
}

@media (min-width: 1020px) {
  .header__level-1-menu-button--mobile {
    display: none !important;
  }
}

.header__level-1-rhs-item-wrapper-desktop {
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
}

@media (max-width: 1019px) {
  .header__level-1-rhs-item-wrapper-desktop {
    display: none !important;
  }
}

.header__level-1-rhs-item-wrapper-mobile {
  display: flex;
  height: 100%;
  justify-content: center;
  position: relative;
}

@media (min-width: 1020px) {
  .header__level-1-rhs-item-wrapper-mobile {
    display: none !important;
  }
}

@media (max-width: 1019px) {
  .header__level-1-button--mobile {
    height: var(--spacing-large, 3rem);
    width: var(--spacing-large, 3rem);
  }
}

.header__level-1-close-button--mobile {
  position: absolute;
  right: 1.5rem;
}

@media (max-width: 1019px) {
  .header__level-1-search-bar-container--mobile {
    background-color: var(--bm-color-background-default-light);
    border-radius: 0 0 var(--bm-border-radius-md) var(--bm-border-radius-md);
    right: 0;
    position: absolute;
    top: var(--bm-spacing-64);
    z-index: 4;
  }
}


/* ==========================================================================
   4. OptusHeader/Level1/RhsModal.css
   ========================================================================== */

.header__level-1-rhs-modal {
  display: flex;
  flex-direction: column;
  background-color: white;
  right: 0;
  max-height: calc(100vh - 4rem);
}

.header__level-1-rhs-modal-top-bar {
  display: flex;
  padding: var(--spacing-small, 0.75rem) 0.875rem;
  gap: var(--spacing-medium, 1.5rem);
  background-color: var(--bm-color-background-subtle-light);
  width: 100%;
}

@media (min-width: 1020px) {
  .header__level-1-rhs-modal-top-bar {
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    box-shadow: 0 0.25rem var(--spacing-small, 0.75rem) 0 rgb(0 0 0 / 18%);
    border: 0.0625rem solid var(--color-support-grey2, #d1d7da);
    border-bottom: none;
  }
}

.header__level-1-rhs-modal-top-bar-heading {
  flex: 1;
  display: flex;
  gap: var(--spacing-medium, 1.5rem);
  font-size: var(--text-xs, 0.75rem);
  line-height: 1rem;
  justify-content: space-between;
  white-space: nowrap;
  max-width: 90%;
}

.header__level-1-rhs-modal-top-bar-heading > div {
  line-height: 1.25rem;
}

.header__level-1-rhs-modal-top-bar-close-button:focus-visible {
  outline: var(--bm-border-width-lg) solid var(--bm-focus-indicator-outline-color-default-light);
}

@media (max-width: 1019px) {
  .header__level-1-rhs-modal-top-bar-close-button {
    display: none;
  }
}

@media (min-width: 1020px) {
  .header__level-1-rhs-modal-top-bar-close-button {
    cursor: pointer;
    background: none !important;
    padding: 0;
    width: 0.8125rem;
    height: 0.8125rem;
    position: absolute;
    top: 0.813rem;
    right: 0.813rem;
  }
}

.header__level-1-rhs-modal-content-wrapper {
  padding: var(--spacing-small, 0.75rem) 0;
  background: var(--color-primary-white, #ffffff);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  box-shadow: 0 0.25rem var(--spacing-small, 0.75rem) 0 rgb(0 0 0 / 18%);
  border: 0.0625rem solid var(--color-support-grey2, #d1d7da);
}


/* ==========================================================================
   5. OptusHeader/Level1/Level1Login/Level1Login.css
   ========================================================================== */

.header__level-1-login-links-wrapper {
  list-style-type: none;
  padding: 0;
  margin-left: 0 !important; /** styled to handle OSG style conflict */
  margin-block-start: 0;
  margin-block-end: 0;
}

.header__level-1-login-links-wrapper > :hover,
.header__level-1-login-links-wrapper :focus {
  background: var(--bm-color-background-subtle-light) !important;
}

.header__level-1-login-link {
  display: flex;
  gap: var(--spacing-small, 0.75rem);
  margin: 0;
}

.header__level-1-login-link > :hover,
.header__level-1-login-link :focus {
  text-decoration: none;
}

.header__level-1-login-link > a {
  color: var(--color-support-grey_33, #333333) !important;
  font-family: MarkPro, sans-serif;
  font-weight: var(--font-medium, 500);
  width: 100%;
  padding: var(--spacing-small, 0.75rem) 0.875rem;
  display: flex;
  gap: var(--spacing-small, 0.75rem);
}

.header__level-1-login-link > a:focus-visible {
  outline: var(--bm-border-width-lg) solid var(--bm-focus-indicator-outline-color-default-light);
}

.header__level-1-logout-link {
  font-size: var(--text-xs, 0.75rem);
  background: var(--bm-color-background-subtle-light) !important;
  color: var(--color-support-grey45, #74767b) !important;
  text-decoration: underline;
  height: 1.25rem;
}


/* ==========================================================================
   6. OptusHeader/Level1/Level1Cart/Level1CartIcon.css
   ========================================================================== */

.header__level-1-cart-icon-title {
  color: var(--color-primary-black, #000000);
}

.header__level-1-cart-badge {
  box-sizing: border-box;
  position: absolute;
  top: 1rem;
  font-size: var(--text-xs, 0.75rem);
  line-height: 0.9375rem;
  font-family: MarkProBold, sans-serif;
  color: var(--color-primary-white, #ffffff);
  text-align: center;
  width: 0.9375rem;
  height: 0.9375rem;
  background: var(--color-accent-teal70, #00646F);
  border-radius: 50%;
}

@media (min-width: 1020px) {
  .header__level-1-cart-badge {
    left: 0.5rem;
    top: 0.625rem;
  }
}

.header__level-1-cart-icon-wrapper {
  display: flex;
  gap: var(--spacing-xsmall, 0.375rem);
}


/* ==========================================================================
   7. OptusHeader/Level1/Level1Cart/Level1CartDropdown.css
   ========================================================================== */

.header__level-1-cart-title {
  font-family: MarkProMedium, sans-serif;
  padding: var(--spacing-small, 0.75rem) 0.875rem;
}

.header__level-1-cart-description {
  font-size: 0.875rem;
  padding: var(--spacing-small, 0.75rem) 0.875rem;
}


/* ==========================================================================
   8. OptusHeader/Level1/Level1CustomerService/Level1CustomerService.css
   ========================================================================== */

.header__level-1-customer-service-wrapper {
  min-width: 32.5rem;
  padding: 0;
}

.header__level-1-customer-service-wrapper > div swiper-container swiper-slide div {
  height: 2.813rem;
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--font-bold, 700);
}

.header__level-1-customer-service-tab-container {
  display: flex;
  padding: var(--spacing-small, 0.75rem) 0.875rem;
  gap: 0.875rem;
}


/* ==========================================================================
   9. OptusHeader/Level1/Level1CustomerService/CustomerServiceContent/CustomerServiceContent.css
   ========================================================================== */

.header__level-1-customer-service-container {
  flex: 1;
}

.header__level-1-customer-service-container a:focus-visible {
  outline: var(--bm-border-width-lg) solid var(--bm-focus-indicator-outline-color-default-light);
}

@media (max-width: 1019px) {
  .header__level-1-customer-service-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 var(--spacing-medium, 1.5rem) var(--spacing-small, 0.75rem) var(--spacing-medium, 1.5rem);
  }
}

.header__level-1-customer-service-container--lhs {
  flex-basis: 15%;
}

.header__level-1-customer-service-blue-link {
  font-family: MarkPro, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-jade, #006280);
}

.header__level-1-customer-service-blue-link:hover {
  cursor: pointer;
}

.header__level-1-right-arrow {
  fill: var(--color-jade, #006280);
  height: var(--spacing-medium, 1.5rem);
  width: var(--spacing-medium, 1.5rem);
}

.header__level-1-customer-service-lhs-label {
  display: flex;
  padding: var(--spacing-small, 0.75rem) 0.875rem;
}

.header__level-1-customer-service-lhs-quicklinks-label {
  color: var(--color-grey4, #888a8c);
  font-size: 0.75rem;
  font-family: MarkProMedium, sans-serif;
  padding: 0.375rem 0.875rem;
}

.header__level-1-customer-service-lhs-link {
  display: flex;
  color: var(--color-type, #333333);
  font-family: MarkPro, sans-serif;
  font-size: 0.875rem;
  padding: var(--spacing-small, 0.75rem) 0.875rem;
  line-height: normal;
}

.header__level-1-customer-service-lhs-link:hover {
  cursor: pointer;
}

/* rhs styles */
.header__level-1-customer-service-rhs-item-container {
  display: flex;
  padding: var(--spacing-small, 0.75rem) 0;
  padding-right: 0.875rem;
}

.header__level-1-customer-service-rhs-title {
  font-size: 0.875rem;
  font-weight: 500;
}

.header__level-1-customer-service-rhs-description {
  font-size: var(--spacing-small, 0.75rem);
  color: var(--color-grey5, #575859);
}

.header__level-1-customer-service-rhs-icon {
  align-items: center;
  display: flex;
  margin-right: 0.875rem;
}

@media (max-width: 1019px) {
  .header__level-1-customer-service-rhs-icon {
    padding-left: 0.875rem;
  }
}

.header__level-1-customer-service-rhs-label {
  display: flex;
  align-items: center;
}

.header__level-1-customer-service-rhs-item-container .header__icon--jade {
  vertical-align: middle;
}
 


/* ==========================================================================
   10. OptusHeader/Level2/Level2.css
   ========================================================================== */

.header__level-2-nav--mobile {
  padding: 0;
}

.header__level-2-wrapper-desktop {
  background: var(--color-primary-white, #ffffff);
  border-bottom: solid 0.063rem var(--color-support-grey2, #d1d7da);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 26.875rem; /* 430px for capping the width in mobile/tablet */
  align-self: end;
}

@media (min-width: 1020px) {
  .header__level-2-wrapper-desktop {
    height: 3.75rem;
    max-width: 100%;
  }
}

@media (max-width: 1019px) {
  .header__level-2-wrapper-desktop {
    height: 0;
    max-width: 0;
    /* a11y: on mobile the Level 2 nav only shows once the hamburger moves it into
       the mobile wrapper. While collapsed it sits back here, so keep it out of the
       screen-reader tree (React renders the links only when open; we mirror that by
       hiding the collapsed wrapper). visibility:hidden does not clip the moved nav —
       it re-parents under the visible mobile wrapper. */
    visibility: hidden;
  }
}

.header__level-2-wrapper-mobile {
  background: var(--color-primary-white, #ffffff);
  border-bottom: solid 0.063rem var(--color-support-grey2, #d1d7da);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 26.875rem; /* 430px for capping the width in mobile/tablet */
  align-self: end;
}

@media (min-width: 1020px) {
  .header__level-2-wrapper-mobile {
    display: none;
    height: 0;
    max-width: 0;
  }
}

.header__level-2-dark-overlay {
  border-bottom: solid 0.063rem var(--color-support-grey55, #1f2222);
  opacity: 0.72;
  z-index: -1;
}

.header__level-2-dark-overlay * {
  opacity: 0.72;
}

.header__level-2-customer-service--mobile {
  background-color: var(--bm-color-background-subtle-light);
  padding: var(--spacing-default, 1rem) var(--spacing-medium, 1.5rem);
}

.header__level-2-customer-service--mobile > button {
  font-size: 1.125rem !important;
  font-weight: var(--font-bold, 700) !important;
  color: var(--color-support-grey_33, #333333) !important; /** styled to handle OSG style conflict */
}

.header__level-2-customer-service--mobile > button > :hover {
  color: var(--color-support-grey_33, #333333) !important; /** styled to handle OSG style conflict */
}

@media screen and (max-width: 1019px) and (min-width: 480px) {
  .header__level-2-customer-service--mobile {
    align-items: flex-start !important;
    background-color: var(--bm-color-background-subtle-light);
    height: 100vh !important;
    padding-top: 0;
  }
}

.header__level-2-links-wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

@media (max-width: 1019px) {
  .header__level-2-links-wrapper {
    overflow-y: auto;
    max-height: calc(100vh - 4rem - 3.375rem);
  }
}

@media (min-width: 1020px) {
  .header__level-2-links-wrapper {
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;/* 20px */
  }
}

.header__level-2-links-wrapper > li > a,
.header__level-2-links-wrapper > li > button {
  font-family: MarkPro, sans-serif;
  font-weight: var(--font-medium, 500);
}

.header__level-2-links-wrapper > li > button {
  height: 3.5rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  gap: var(--spacing-xsmall, 0.375rem);
  font-size: var(--text-base, 1rem);
}

.header__level-2-links-wrapper > li > button > :hover {
  cursor: pointer;
}

.header__level-2-links-wrapper > li .header__level-2-link__default {
  color: var(--color-support-grey_33, #333333) !important;
  padding: var(--spacing-default, 1rem) 0;
  font-size: 1.125rem;
  font-weight: var(--font-bold, 700);
  text-transform: none;
}

.header__level-2-links-wrapper > li .header__level-2-link__default:focus-visible {
  outline: var(--bm-border-width-lg) solid var(--bm-focus-indicator-outline-color-default-light);
}

@media (min-width: 1020px) {
  .header__level-2-links-wrapper > li .header__level-2-link__default {
    font-size: var(--text-base, 1rem);
    font-weight: var(--font-regular, 400);
  }

  .header__level-2-links-wrapper > li .header__level-2-link__default:hover {
    margin-top: 0.25rem;
    border-bottom: 0.25rem solid var(--color-accent-teal70, #00646F) !important;
    color: var(--color-accent-teal70, #00646F) !important;
  }
}

.header__level-2-links-wrapper > li .header__level-2-link__active {
  border-bottom: 0.25rem solid var(--color-accent-teal70, #00646F) !important;
  color: var(--color-accent-teal70, #00646F) !important;
  margin-top: 0.25rem;
  padding: 0.7rem 0;
}

.header__level-2-links-wrapper > li .header__level-2-link__active:hover {
  text-decoration: none;
}

.header__level-2-links-wrapper > li .header__level-2-link__active:focus-visible {
  outline: var(--bm-border-width-lg) solid var(--bm-focus-indicator-outline-color-default-light);
}

@media (max-width: 1019px) {
  .header__level-2-links-wrapper .header__level-2-button--mobile {
    margin: 0 var(--spacing-medium, 1.5rem);
  }
}

@media (max-width: 1019px) {
  .header__level-2-links-wrapper > li {
    display: flex;
    align-items: center;
    height: 3.5rem;
  }

  .header__level-2-links-wrapper > li .header__level-2-link__active {
    border-bottom: none !important;
    color: var(--color-accent-teal70, #00646F) !important;
    margin-top: 0;
    padding: 0;
  }

  .header__level-2-links-wrapper > li .header__level-2-link__active:hover {
    text-decoration: none;
  }

  .header__level-2-links-wrapper > li:nth-last-child(2) {
    margin-bottom: var(--spacing-small, 0.75rem);
  }

  .header__level-2-links-wrapper > li.header__level-2-customer-service--mobile {
    height: 4.5rem;
  }
}

.header__level-2-search-bar--desktop {
  width: 17.5rem; /* 280px */
  padding: var(--bm-spacing-6) 0;
}

@media (max-width: 1019px) {
  .header__level-2-search-bar--desktop {
    display: none;
  }
}


/* ==========================================================================
   11. OptusHeader/Level3/Level3MegaNav/Level3MegaNav.css
   ========================================================================== */

.header__level-3 {
  align-items: center;
  background-color: var(--color-primary-white, #ffffff) !important;
  border: 0.0625rem solid var(--color-support-grey_cc, #cccccc);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  box-shadow: 0 0.25rem var(--spacing-xsmall, 0.375rem) rgb(0 0 0 / 10%);
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 1.875rem;
  padding-bottom: 7.5rem;
  position: absolute;
  width: 63.75rem;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  overflow-y: auto;
}

.header__level-3__contentwrapper {
  display: grid;
  gap: 0.625rem;
  grid-template-columns: 10fr 4fr;
  width: 100%;
}

@media (max-width: 1019px) {
  .header__level-3 {
    align-items: flex-start;
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: none;
    left: auto;
    max-width: 26.875rem;
    padding: 0;
    right: 0;
    top: var(--text-3xl, 4rem);
    transform: none;
    width: 100%;
  }

  .header__level-3__contentwrapper {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
  }
}


/* ==========================================================================
   12. OptusHeader/Level3/Level3MegaNav/Level3MainContent/Level3MainContent.css
   ========================================================================== */

.header__level-3__maincontent {
  display: grid;
  gap: 1.125rem;
  grid-template-columns: repeat(3, 1fr);
}

.header__level-3__list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.header__level-3__list-label {
  color: var(--color-support-grey_33, #333333);
  font-family: MarkProBold, sans-serif;
  margin-bottom: var(--spacing-default, 1rem);
  font-size: var(--bm-font-size-xs-desktop);
  line-height: 1.5rem;
  display: block;
}

.header__level-3__list-label a:focus-visible {
  outline: var(--bm-border-width-lg) solid var(--bm-focus-indicator-outline-color-default-light);
}

.header__level-3__list-label-link {
  align-items: center;
  color: var(--color-support-grey_33, #333333);
  display: flex;
  font-family: MarkProBold, sans-serif;
  font-size: var(--bm-font-size-xs-desktop);
  font-weight: inherit;
  line-height: 1.5rem;
  margin: 0;
  padding: 0;
}

.header__level-3__item {
  padding-bottom: 0.875rem;
}

.header__level-3__item:last-child {
  padding-bottom: 0;
}

.header__level-3__item:hover {
  cursor: pointer;
}

.header__level-3__item-link {
  color: var(--color-support-grey_33, #333333);
  cursor: pointer;
  display: flex;
  font-family: MarkPro, sans-serif;
  gap: 0.25rem;
}

.header__level-3__maincontent--mobile {
  display: none;
}

@media (max-width: 1019px) {
  .header__level-3__maincontent {
    display: none;
  }

  .header__level-3__maincontent--mobile {
    display: flex;
    flex-direction: column;
  }

  .header__level-3__item {
    list-style-type: none;
    padding: var(--spacing-small, 0.75rem) var(--spacing-medium, 1.5rem);
  }

  .header__level-3__item:last-child {
    padding-bottom: var(--spacing-small, 0.75rem);
  }

  .header__level-3__mobile-item--wrapper {
    margin: var(--spacing-small, 0.75rem) 0;
    padding-inline-start: 0;
  }

  .header__level-3__item:active {
    background-color: var(--bm-color-background-subtle-light);
  }

  .header__level-3__standalone--mobile {
    border-bottom: 0.0625rem solid #dcdcdc;
    color: var(--color-support-grey_33, #333333);
    display: flex;
    font-variant-numeric: lining-nums tabular-nums;
    font-family: MarkProBold, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem;
    padding: 1.5rem;
  }
}


/* ==========================================================================
   13. OptusHeader/Level3/Level3MegaNav/Level3PromoContent/Level3PromoContent.css
   ========================================================================== */

@media (max-width: 1019px) {
  .header__level-3__promocontent {
    padding: var(--spacing-medium, 1.5rem);
  }
}

.header__level-3__promocontent__item-container {
  display: flex;
  gap: var(--spacing-default, 1rem);
}

.header__level-3__promocontent__title {
  font-family: MarkProBold, sans-serif;
  line-height: normal;
}

.header__level-3__promocontent__heading {
  color: var(--color-support-grey5, #575859);
  font-family: MarkPro, sans-serif;
  font-size: var(--spacing-default, 1rem);
  margin-top: 0;
}

.header__level-3__promocontent__link {
  color: var(--color-primary-jade, #006280);
  display: flex;
  line-height: 1.8rem;
  font-family: MarkPro, sans-serif;
  font-weight: var(--font-bold, 700);
}

.header__level-3__promocontent__link--button {
  background: var(--color-yellow, #fdcc08);
  border-radius: 0.3125rem;
  color: var(--color-support-grey_33, #333333);
  padding: var(--spacing-default, 1rem) 1.875rem;
  line-height: 1rem;
  font-family: MarkPro, sans-serif;
  font-weight: var(--font-bold, 700);
  display: block;
  width: fit-content;
  margin-top: var(--spacing-default, 1rem);
}

.header__level-3__promocontent__link--button > :hover,
.header__level-3__promocontent__link--button :focus {
  color: var(--color-support-grey_33, #333333) !important;
  text-decoration: none;
}

.header__level-3__right-arrow {
  fill: var(--color-primary-jade, #006280);
  height: 2rem;
  width: 2rem;
}

.header__level-3__promocontent__image {
  border-radius: 0.5625rem;
  max-width: 5.5rem;
  max-height: 5.5rem;
}

.header__level-3__promocontent__image--full {
  max-width: 16.75rem;
  max-height: 9.375rem;
}

@media (max-width: 1019px) {
  .header__level-3__promocontent__image--full {
    height: 9.375rem;
    margin: 0 auto;
    max-width: initial;
    max-height: initial;
    width: 20.4375rem;
  }
}

.header__level-3__promocontent__container-image--full {
  flex-direction: column;
}

.header__level-3__promocontent__description--button {
  margin-bottom: 1rem;
  margin-top: 0.25rem;
  line-height: 1.5;
}

.header__level-3__promocontent__description {
  margin: 0.25rem auto 0.75rem;
  line-height: 1.5;
}


/* ==========================================================================
   14. OptusHeader/Level3/Level3MegaNav/Level3Footer/Level3Footer.css
   ========================================================================== */

.header__level-3__footer {
  background-color: var(--bm-color-background-subtle-light);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  bottom: 0;
  color: var(--color-support-grey45, #74767b);
  height: 5.625rem;
  left: 0;
  padding: 1rem 1.875rem 1.5rem;
  position: absolute;
  white-space: nowrap;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.header__level-3__footer__title {
  color: var(--color-support-grey45, #74767b);
  font-family: MarkPro, sans-serif;
  font-weight: 700;
  font-size: var(--text-sm, 0.875rem);
  margin: 0;
  line-height: 1.5rem;
}

.header__level-3__footer__content {
  color: var(--color-support-grey_33, #333333);
  display: flex;
}

.header__level-3__footer__list-wrapper,
.header__level-3__footer--mobile-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.header__level-3__footer__list-wrapper {
  display: flex;
}

.header__level-3__footer__list-wrapper li {
  margin-right: 2rem;
  white-space: initial;
}

.header__level-3__footer--mobile {
  display: none;
}

.header__level-3__footer-link {
  color: var(--color-support-grey_33, #333333);
  font-family: MarkPro, sans-serif;
  display: block;
}

@media (max-width: 1019px) {
  .header__level-3__footer-link {
    font-weight: var(--font-medium, 500);
  }
}

@media (max-width: 1019px) {
  .header__level-3__footer {
    display: none;
  }

  .header__level-3__footer--mobile {
    background-color: var(--bm-color-background-subtle-light);
    display: block;
    width: 100%;
    list-style-type: none;
  }

  .header__level-3__footer--mobile-list-item {
    padding: var(--spacing-small, 0.75rem) var(--spacing-medium, 1.5rem);
  }

  .header__level-3__footer--mobile-list-item:hover {
    cursor: pointer;
  }
}


/* ==========================================================================
   15. OptusHeader/Level3/Level3MegaNav/Level3TopBarMobile/Level3TopBarMobile.css
   ========================================================================== */

.header__level-3__top-bar--mobile {
  display: none;
}

@media (max-width: 1019px) {
  .header__level-3__top-bar--mobile {
    align-items: center;
    border-bottom: 0.0625rem solid var(--color-support-grey2, #d1d7da);
    display: flex;
    min-height: 3.375rem;
    max-width: 26.875rem;
    width: 100%;
  }

  .header__level-3__back-button {
    color: var(--color-primary-jade, #006280);
    display: flex;
    font-family: MarkProMedium, sans-serif;
    line-height: 2rem;
    margin-left: var(--spacing-default, 1rem);
    position: absolute;
  }

  .header__level-3__back-button:hover {
    cursor: pointer;
  }

  .header__level-3__back-button--arrow {
    fill: var(--color-primary-jade, #006280);
    height: 2rem;
    width: 2rem;
  }

  .header__level-3__title {
    margin: 0 auto;
  }
}


/* ==========================================================================
   16. OptusHeader/Level3/Level3MegaNav/Level3Accordion/Level3Accordion.css
   ========================================================================== */

.accordion__heading-level-3 {
  border-bottom: 0.0625rem solid #dcdcdc;
  padding: var(--spacing-small, 0.75rem) 0;
}

.accordion__summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-small, 0.75rem) var(--spacing-medium, 1.5rem);
  font-weight: var(--font-bold, 700);
}

.accordion__summary::marker {
  content: none;
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

/* Isolate the header accordion summary from plan_carousel's global (unscoped)
   `summary::after` chevron, which is embedded site-wide via aem-oca.ssr.base and
   otherwise paints a 2nd arrow next to our inline header__icon--accordion svg.
   React's Level3Accordion uses only the inline icon (no ::after). Specificity
   (0,1,1) beats the bare `summary::after` (0,0,2), so no !important needed. */
.accordion__summary::after {
  content: none;
}

.accordion__details {
  margin: 0;
}

.accordion__heading-level-2 {
  margin: 0;
  font-family: MarkProBold, sans-serif;
  font-size: 1.125rem;
  font-weight: var(--font-bold, 700);
  line-height: 1.5rem;
  padding: 0;
}


/* ==========================================================================
   17. OptusHeader/Level3/Level3CompactNav/Level3CompactNav.css
   ========================================================================== */

.level-3__title {
  font-family: MarkProBold, sans-serif;
  font-size: 1.1875rem;
  margin: var(--spacing-medium, 1.5rem) 0 var(--spacing-small, 0.75rem);
}

.level-3__subtitle {
  font-family: MarkPro, sans-serif;
  margin-bottom: 2rem;
}

.level-3__button {
  align-items: center;
  border-radius: 0.3125rem;
  color: var(--color-support-grey_33, #333333) !important; /** styled to handle OSG style conflict */
  display: flex !important;
  font-family: MarkProBold, sans-serif !important;
  font-size: 1rem !important;
  margin-top: auto !important;
  min-height: 3.25rem !important;
  min-width: 11.125rem !important;
  width: auto;
  gap: 0.25rem;
  justify-content: center;
  padding: 1rem 1.875rem !important;
}

.level-3__button > :hover,
.level-3__button :focus {
  background-color: var(--color-yellow, #fdcc08);
  color: var(--color-support-grey_33, #333333) !important;
}

.level-3__content-image {
  display: block;
  height: auto;
  max-width: 21.5625rem;
}

.level-3__compactNav {
  align-items: center;
  background-color: var(--color-primary-white, #ffffff);
  border: 0.0625rem solid var(--color-support-grey_cc, #cccccc);
  border-top: none;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  box-shadow: 0 0.25rem var(--spacing-xsmall, 0.375rem) rgb(0 0 0 / 10%);
  display: flex;
  flex-direction: column;
  max-width: 23.4375rem;
  width: 100%;
  position: absolute;
  z-index: 1;
  overflow-y: auto;
  max-height: calc(100vh - 3.375rem - 4rem);
}

@media (max-width: 1019px) {
  .level-3__compactNav {
    top: var(--text-3xl, 4rem);
    right: 0 !important;
    left: auto !important;
    max-width: 26.875rem;
    overflow-y: auto;
    max-height: calc(100vh - 3.375rem);
  }
}

.level-3__compact-nav-content {
  position: relative;
  align-items: center;
  background-color: var(--color-primary-white, #ffffff);
  border: 0.0625rem solid var(--color-support-grey_cc, #cccccc);
  border-top: none;
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  box-shadow: 0 0.25rem var(--spacing-xsmall, 0.375rem) rgb(0 0 0 / 10%);
  display: flex;
  flex-direction: column;
  max-width: 23.4375rem;
  width: 100%;
  padding-bottom: 5.375rem;
  z-index: 1;
}

@media (max-width: 1019px) {
  .level-3__compact-nav-content {
    right: 0 !important;
    left: auto !important;
    max-width: 26.875rem;
  }
}

.level-3__bottom-rect {
  align-items: center;
  background-color: var(--bm-color-background-subtle-light);
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  bottom: 0;
  color: var(--color-support-grey45, #74767b);
  display: flex;
  justify-content: center;
  min-height: 3.375rem;
  left: 0;
  overflow-wrap: break-word;
  position: absolute;
  text-align: center;
  width: 100%;
}


/* ==========================================================================
   18. SSR-specific rules (§3.2 — two-set render + CSS show/hide)
   ========================================================================== */

/* RHS ul/li in mobile stays visible (React filters CS item in mobile, SSR overrides) */
@media (max-width: 1019px) {
  ul.header__level-1-rhs--always { display: flex !important; }
  li.header__level-1-rhs-item--always { display: flex !important; }
}

/* Mobile search button li hidden on desktop. !important beats the base rule
   `.header__level-1-links-wrapper-desktop > li { display: flex }` (0,1,1),
   since this <li> is a direct child of the shared desktop RHS <ul>. React
   never renders it on desktop (showSearchMobile = !isDesktop); SSR renders both
   variants and toggles with CSS, matching the mobile/desktop !important idiom
   used elsewhere in this file. */
@media (min-width: 1020px) {
  .header__level-1-search-item--mobile { display: none !important; }
}

/* RHS text label + dropdown arrow — desktop only (React only renders on desktop) */
@media (max-width: 1019px) {
  .header__level-1-rhs-label--desktop,
  .header__level-1-rhs-arrow--desktop { display: none; }
}

/* RHS icon size: React size prop desktop 20 / mobile 25 */
@media (max-width: 1019px) {
  .header__icon--rhs { width: 25px; height: 25px; }
}

/* Hamburger button dual icon toggle (JS adds .is-open when menu × shown) */
.header__icon--menu-cross { display: none; }
[data-mobile-menu-toggle].is-open .header__icon--menu { display: none; }
[data-mobile-menu-toggle].is-open .header__icon--menu-cross { display: inline; }

/* L2 arrows: mobile → right, desktop → up/down (rotate 180° when expanded) */
@media (min-width: 1020px) {
  .header__icon--l2-mobile { display: none; }
}
@media (max-width: 1019px) {
  .header__icon--l2-desktop { display: none; }
}

.header__level-2-link__active .header__icon--l2-desktop,
[aria-expanded="true"] .header__icon--l2-desktop,
[aria-expanded="true"] .header__icon--rhs-arrow { transform: rotate(180deg); }

/* Accordion arrow: details closed → rotate 180° (React swaps up/down icon, visual equivalent) */
details:not([open]) .header__icon--accordion { transform: rotate(180deg); }

/* Icon fixed colours */
.header__icon--jade { color: #006280; }
.header__icon--black { color: #000; }
.header__icon--grey68 { color: #68696a; }

/* linkOnly links (React uses inline style + ref hack for fontColour !important) */
.header__level-2-item--link-only {
  color: var(--l2-colour) !important;
  text-decoration: none;
}

@media (max-width: 1019px) {
  /* React mobile applies __default + button--mobile class; styles replicated here */
  .header__level-2-item--link-only {
    font-size: 1.125rem;
    font-weight: 700;
    padding: 1rem 0;
    margin: 0 1.5rem;
  }
}

/* linkOnly desktop hover (React linkDesktopHoverStyle is JS inline style) */
@media (min-width: 1020px) {
  li[data-link-only]:hover {
    line-height: 3.25rem;
    margin-top: .25rem;
    border-bottom: .25rem solid var(--l2-colour);
  }
}

/* header__level-2-button--mobile margin only on mobile (React doesn't add this class on desktop) */
@media (max-width: 1019px) {
  .header__level-2-links-wrapper .header__level-2-button--mobile { margin: 0 1.5rem; }
}

/* CS li and focus-trap top bar hidden on desktop (React doesn't render on desktop) */
@media (min-width: 1020px) {
  .header__level-2-customer-service--mobile,
  .header__focus-trap-nav { display: none; }
}

/* Customer service tabs (minimal FixedTabs shopStyle replacement) */
.header__cs-tabs {
  display: flex;
  border-bottom: 1px solid #d1d7da;
}

.header__cs-tab {
  flex: 1 1 0;
  text-align: center;
  height: 2.813rem;
  padding: 0 1rem;
  font-size: .875rem;
  font-weight: 700;
  font-family: MarkPro, sans-serif;
  color: #575859;
  background: none;
  border: none;
  border-bottom: 4px solid transparent;
  cursor: pointer;
}

.header__cs-tab--active {
  color: #000;
  border-bottom-color: #006280;
}
optus_header_ssr.css
/* Scroll-hide L1 (JS adds class on root) */
.header--hide-level1 .header__inner-wrapper > .header__level-1-wrapper { display: none; }

/* Mobile back arrow SVG fills container */
.header__level-3__back-button--arrow svg { width: 100%; height: 100%; }

/* L3 popup wrapper: display:contents when visible, display:none when hidden */
[data-level3-popup] { display: contents; }
[data-level3-popup][hidden] { display: none; }

/* Mobile L3 open hides L2 list and LHS (JS adds .header--l3-active on container) */
@media (max-width: 1019px) {
  .header--l3-active [data-mobile-lhs] { display: none !important; }
  .header--l3-active [data-level2-list] > li > .header__level-2-item--link-only,
  .header--l3-active [data-level2-list] > li > .level-2-link-button,
  .header--l3-active [data-cs-mobile-button] { display: none; }
}

/* Desktop-only LHS link (single-item case renders <a> directly, not <ul>) */
@media (max-width: 1019px) {
  .header__level-1-lhs--desktop-only { display: none !important; }
}


/*
    Component: ssr/search
 */

.search-container {
    position: relative;
}

.search-box {
    align-items: center;
    border: var(--bm-border-width-md) solid var(--bm-color-border-neutral-default-light);
    border-radius: 0.3125rem;
    display: flex;
    gap: 0.375rem;
    padding: 0.75rem 0.5rem 0.75rem 0.75rem;
    background-color: #ffffff;
}

.search-box > svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: var(--bm-color-icon-neutral-subtle-light, #6a787f);
}

.search-input {
    border: none;
    color: #333333;
    flex-grow: 1;
    font-family: MarkPro;
    font-size: var(--bm-font-size-xs-desktop);
    line-height: 1.375rem;
    outline: none;
    padding: 0;
}

.search-clear {
    background: transparent;
    border: none;
    cursor: pointer;
    display: none;
    padding: 0;
}

.search-clear svg {
    fill: var(--bm-color-icon-neutral-subtle-light);
}

.search-results {
    background-color: #ffffff;
    border: var(--bm-border-width-md) solid var(--bm-color-border-neutral-default-light);
    border-radius: 0.3125rem;
    border-top: none;
    display: none;
    margin-top: -0.3125rem;
    position: absolute;
    width: 100%;
}

.search-results ul {
    list-style-type: none;
    margin: 0;
    padding: 0.25rem 0 0.75rem 0;
}

.search-results li {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    padding: var(--bm-spacing-8) var(--bm-spacing-12);
}

.search-results li:hover {
    text-decoration: underline;
}

.search-results li img {
    width: var(--bm-spacing-32);
}

.search-results li a {
    align-items: center;
    color: #333333;
    display: flex;
    font-family: MarkPro;
    font-size: 1rem;
    font-weight: var(--bm-font-weight-regular);
    gap: 0.75rem;
    line-height: 1.5rem;
}

.search-results li.recent a {
    color: var(--color-accent-teal70, #00646f);
    font-weight: var(--bm-font-weight-bold);
}

.search-remove-btn {
    background-color: inherit;
    border: none;
    cursor: pointer;
    display: inline-flex;
    padding: 0;
}

.search-remove-icon {
    fill: var(--bm-color-icon-neutral-subtle-light);
    height: 16px;
    width: 16px;
}

/*
    Master css
*/

html,
body {
    margin: 0;
    padding: 0;
    position: relative;
    background: var(--color-white, #ffffff);
    color: var(--color-black, #000000);
    font-family: 'MarkPro', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.01rem;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* AEM overrides - START */

.aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--offset--phone--1 {
    margin-left: 0 !important;
}

@media only screen and (max-width: 30.6875rem) {
    .lux2-grid .aem-Grid.aem-Grid--phone--12,
    .lux2-grid .aem-Grid.aem-Grid--12.aem-Grid--phone--12 {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }

    .lux2-grid .aem-Grid[class*="aem-Grid--phone"] > .aem-GridColumn:not([class*="aem-GridColumn--phone--"]) {
        grid-column: span 12;
        margin: 0 auto;
        width: 100%;
    }

    .lux2-grid .aem-Grid.aem-Grid--phone--12 > .aem-GridColumn.aem-GridColumn--phone--12 {
        grid-column: span 12;
    }

    .aem-GridColumn.aem-GridColumn--default--12.aem-GridColumn--phone--10.aem-GridColumn--offset--phone--1.aem-GridColumn--phone--none.column.grid-no-left-right-padding {
        grid-column: span 12;
    }
}

@media only screen and (min-width: 30.75rem) and (max-width: 53.1875rem) {
    .lux2-grid .aem-Grid.aem-Grid--tablet--12,
    .lux2-grid .aem-Grid.aem-Grid--12.aem-Grid--tablet--12 {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }

    .lux2-grid .aem-Grid[class*="aem-Grid--tablet"] > .aem-GridColumn:not([class*="aem-GridColumn--tablet--"]) {
        grid-column: span 12;
        margin: 0 auto;
        width: 100%;
    }
}

@media only screen and (min-width: 53.25rem) {
    .lux2-grid .aem-Grid.aem-Grid--default--12,
    .lux2-grid .aem-Grid.aem-Grid--12.aem-Grid--default--12 {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
    }

    .lux2-grid .aem-GridColumn--default--12 {
        grid-column: span 12;
    }

    .lux2-grid .aem-GridColumn--default--6 {
        grid-column: span 6;
    }

    .lux2-grid .aem-Grid[class*="aem-Grid--default"] > .aem-GridColumn:not([class*="aem-GridColumn--default--"]) {
        grid-column: span 12;
        margin: 0 auto;
        width: 100%;
    }
}

.lux2-grid .aem-GridColumn.column,
.lux2-grid .aem-GridColumn.columns {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
}

.lux2-grid .grid-twelve-width {
    grid-column: span 12;
}

/* AEM overrides - END */


a {
    color: var(--bm-color-text-tertiary-default-light, #006280);
    font-family: 'MarkProBold', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

/* Base resets lifted from ssr/optusHeader */

button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    color: inherit;
    text-transform: inherit;
    outline: none;
}

[hidden] {
    display: none !important;
}

summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: start;
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: 'MarkProHeavy', sans-serif;
    font-weight: normal;
}

h1 {
    font-size: 2.5rem;
    line-height: 1;
    margin: 0 0 2.5rem 0;
}

h2 {
    font-size: 2rem;
    line-height: 1;
    margin: 0 0 1.375rem 0;
}

h3 {
    font-size: 1.75rem;
    line-height: 1;
    margin: 0 0 1.5rem 0;
}

h4 {
    font-size: 1.5rem;
    line-height: 1;
    margin: 0 0 1.5rem 0;
}

h5 {
    font-size: 1.25rem;
    line-height: 1.2;
    margin: 0 0 1.5rem 0;
}

h6 {
    font-family: 'MarkProBold', sans-serif;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.2;
    margin: 0 0 1.25rem 0;
}

@media only screen and (min-width: 53.25rem) {
    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 3rem;
    }

    h3 {
        font-size: 2rem;
        line-height: 1.2;
    }
}

p {
    font-family: 'MarkPro', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 1rem 0;
}

p:last-child {
    margin-bottom: 0;
}

p b,
p strong,
p.strong {
    font-family: 'MarkProHeavy', sans-serif;
}

/* Global overrides migrated from core2 globalStyles */

.button {
    text-decoration: none !important;
}

/* AEM Component Padding */

.v-p-large-top {
    padding-top: 3rem;
}

.v-p-large-bottom {
    padding-bottom: 3rem;
}

.v-p-normal-top {
    padding-top: 1.5rem;
}

.v-p-normal-bottom {
    padding-bottom: 1.5rem;
}

.v-p-small-top {
    padding-top: 0.75rem;
}

.v-p-small-bottom {
    padding-bottom: 0.75rem;
}