* {
  box-sizing: border-box;
}


* {
    scrollbar-color: #555 transparent;
    scrollbar-width: thin
}

::-webkit-scrollbar {
    -webkit-appearance: none
}

::-webkit-scrollbar-track {
    background-color: transparent;
    border: none;
    border-radius: 10px
}

::-webkit-scrollbar {
    background-color: transparent;
    height: 0;
    width: 4px
}

::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 15px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3)
}

body,html {
    font-family: Roboto,sans-serif
}


:root {
  /* colors */
  --background-color: white;
  --light-color: #f8f8f8;
  --dark-color: #505050;
  --text-color: #131313;
  --link-color: #3b63fb;
  --link-hover-color: #1d3ecf;
  --orange-color: #f24b26;
  --dark-black : #000;

  /* fonts */
  --body-font-family: roboto, roboto-fallback, sans-serif;
  --heading-font-family: 'Roboto', sans-serif;

  /* body sizes */
  --body-font-size-m: 22px;
  --body-font-size-s: 19px;
  --body-font-size-xs: 17px;

  /* heading sizes */
  --heading-font-size-xxl: 55px;
  --heading-font-size-xl: 44px;
  --heading-font-size-l: 34px;
  --heading-font-size-m: 27px;
  --heading-font-size-s: 24px;
  --heading-font-size-xs: 22px;

  /* nav height */
  --nav-height: 64px;
}


/* fallback fonts */
@font-face {
  font-family: roboto-condensed-fallback;
  size-adjust: 88.82%;
  src: local('Arial');
}

@font-face {
  font-family: roboto-fallback;
  size-adjust: 99.529%;
  src: local('Arial');
}

@media (width >=900px) {
  :root {
    /* body sizes */
    --body-font-size-m: 18px;
    --body-font-size-s: 16px;
    --body-font-size-xs: 14px;

    /* heading sizes */
    --heading-font-size-xxl: 45px;
    --heading-font-size-xl: 36px;
    --heading-font-size-l: 28px;
    --heading-font-size-m: 22px;
    --heading-font-size-s: 20px;
    --heading-font-size-xs: 18px;
  }
}

body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: 1.6;
}

body.appear {
  display: block;
}

header .header,
footer .footer,
main .block {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"],
main .block[data-block-status="loaded"] {
  visibility: visible;
}

/* new-connection-a is deliberately deferred out of the eager phase
   (scripts.js's deferBlocksFromEager — it needs an anonymous token from
   header.js, which only loads lazily) and its own decorate() only clears
   the raw authored table for its real card markup once its JS has been
   fetched and run. The generic main .block visibility:hidden above already
   covers most of that gap, but this is an explicit, belt-and-suspenders
   display:none specifically for this block — it also fully removes the
   raw table from layout while hidden, rather than just visually hiding it
   at whatever height the unstyled table happens to compute to. */
.new-connection-a:not([data-block-status="loaded"]) {
  display: none;
}

main > .section {
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 16px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  font-family: var(--heading-font-family);
  font-weight: 600;
  line-height: 1.25;
  scroll-margin: 40px;
}

h1 {
  font-size: var(--heading-font-size-xxl);
}

h2 {
  font-size: var(--heading-font-size-xl);
}

h3 {
  font-size: var(--heading-font-size-l);
}

h4 {
  font-size: var(--heading-font-size-m);
}

h5 {
  font-size: var(--heading-font-size-s);
}

h6 {
  font-size: var(--heading-font-size-xs);
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin: 0;
  padding: 0;
}

input,
textarea,
select,
button {
  font: inherit;
}

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

.icon img {
  height: 100%;
  width: 100%;
}

/* Header space reservation.

   The header renders out of flow — `.header-wrapper > .header.block` and, below 900px,
   `.nav-wrapper` are both `position: fixed` — so <header> itself computes to height 0 and
   the space the nav occupies in the document is created purely by its margin-bottom. Those
   rules live in blocks/header/header.css, which only loads in the lazy phase, so <main>
   painted at y=0 and then jumped down ~45px once header.css arrived. That single shift was
   ~98% of this page's CLS (Lighthouse attributed 0.0739 of 0.075 to <main> alone).

   Mirrored here in the render-blocking stylesheet so the geometry is correct at first paint.
   Keep in sync with `header` and `.nav-brand img` in blocks/header/header.css. */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  margin-bottom: 5.7rem;
}

/* The nav fragment authors the logo with width="850" height="445", so the browser can
   reserve its box from those attributes alone; aspect-ratio is restated here to keep the
   geometry correct at first paint, before header.css loads in the lazy phase. It MUST
   match the asset's real intrinsic ratio — 850/610 was a guess and, combined with the
   global `box-sizing: border-box`, stretched the logo ~24% vertically on mobile and
   squashed it on desktop (object-fit defaults to `fill`). Update if that asset changes.

   The bottom spacing sits on the section's content wrapper, not on the <img>: padding on the image
   counts toward its clientHeight, which made the rendered box's ratio disagree with the
   file's intrinsic ratio and failed Lighthouse's image-aspect-ratio audit. */
header .nav-brand img {
  display: block;
  width: 96px;
  height: auto;
  aspect-ratio: 850 / 445;
}

header .nav-brand .default-content-wrapper {
  margin: 0;
  padding-bottom: 25px;
}

@media (width <= 899px) {
  header {
    margin-bottom: 3.8rem;
  }

  header .nav-brand img {
    width: 76px;
  }

  header .nav-brand .default-content-wrapper {
    padding-bottom: 5px;
  }
}

/* Section heading - shared across blocks */
.section-heading {
  font-size: 34px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 41px;
  text-align: center;
  color: #fff;
}

.section-heading strong {
  color: #f04c23;
  font-weight: 700;
}

html, body{
  overflow-x: hidden;
}

@media (max-width: 600px) {
  main > .section{
    padding: 0;
  }
  .section-heading {
    font-size: 25px;
    line-height: 30px;
    font-weight: 500;
  }
}

/* Global loading overlay (scripts/loader.js) — ported from the classic AEM page's
   loadercomponent (fixed, dimmed, full-viewport backdrop + a two-ring CSS spinner). Lives
   in this eagerly-loaded stylesheet (blocking <link> in head.html), not lazy-styles.css —
   showLoader() can fire from a block's eager-phase decorate() (e.g. payment-response.js,
   to cover the pre-header/footer gap), which runs before lazy-styles.css has loaded. */
html.loader-open {
  overflow: hidden;
}

.loader-box-wrapper:not([hidden]) {
  display: flex;
  position: fixed;
  z-index: 999;
  align-items: center;
  justify-content: center;
  background-color: rgb(0 0 0 / 10%);
  inset: 0;
}

.loader-box {
  position: relative;
  width: 60px;
  height: 60px;
  color: #ee4823;
}

.loader-style {
  position: absolute;
  inset: 0;
}

.loader-style::before,
.loader-style::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: 0.1em solid transparent;
  border-bottom-color: currentcolor;
  border-radius: 50%;
  animation: loader-style 1s linear infinite;
}

.loader-style::before {
  width: 60px;
  height: 60px;
}

.loader-style::after {
  top: 6px;
  left: 6px;
  width: 48px;
  height: 48px;
  animation-direction: reverse;
}

@keyframes loader-style {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}