/*   R E S E T   */

*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}



/*   F O N T S   */

@font-face {
   font-family: "Nexa";
   src: url("/fonts/nexa-regular.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "Nexa";
   src: url("/fonts/nexa-bold.woff2") format("woff2");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "Nexa";
   src: url("/fonts/nexa-xbold.woff2") format("woff2");
   font-weight: 800;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "Nexa";
   src: url("/fonts/nexa-heavy.woff2") format("woff2");
   font-weight: 900;
   font-style: normal;
   font-display: swap;
}



/*   T O K E N S   */

:root {
   --cetacean-blue: #0A1641;
   --dodger-blue: #2C98FF;
   --royal-blue: #173FAF;
   --catskill-white: #F0F4FF;
   --white: #FFFFFF;

   --text-large: 1.2em;
   --text-small: 0.84em;

   --max-width: 480px;
   --padding-x: 24px;
   --padding-y: 48px;

   @media (min-width: 480px) {
      --padding-x: 36px;
      --padding-y: 66px;
   }

   @media (min-width: 1020px) {
      --max-width: 1200px;
      --padding-x: 48px;
      --padding-y: 84px;
   }
}



/*   B A S E   */

body {
   font-family: "Nexa", sans-serif;
   font-size: 15px;
   font-weight: 400;
   line-height: 1.5;
   color: var(--cetacean-blue);
   background-color: var(--white);

   @media (min-width: 480px) { font-size: 18px; }
   @media (min-width: 1020px) { font-size: 21px; }
}

a {
   color: var(--royal-blue);
   text-decoration: none;
   transition: 0.3s ease;

   &:hover { color: var(--dodger-blue); }
}

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



/*   T Y P O G R A P H Y   */

h1, h2 {
   color: var(--royal-blue);
   text-transform: uppercase;
}

h1 {
   font-size: 3.3em;
   font-weight: 900;
   line-height: 0.9;
}

h2 {
   font-size: 2.4em;
   font-weight: 800;
   line-height: 1.05;
}

h3 {
   font-size: 1.5em;
   font-weight: 700;
   line-height: 1.2;
}

strong, b { font-weight: 700; }

.text-regular { font-weight: 400; }

.text-large { font-size: var(--text-large); }
.text-small { font-size: var(--text-small); }

.heading-small {
   h1 {
      font-size: 2.4em;
   }

   h2 {
      font-size: 1.5em;
      text-transform: none;
   }
}



/*   S T R U C T U R E   */

.container {
   max-width: var(--max-width);
   margin: 0 auto;
   padding-inline: var(--padding-x);
}

.section {
   padding-block: var(--padding-y);

   &.compact {
      padding-block: calc(var(--padding-y) / 3);
   }

   &.compact-bottom {
      padding-bottom: calc(var(--padding-y) / 3);
   }

   &.compact-top {
      padding-top: calc(var(--padding-y) / 3);
   }
}



/*   C O N T E N T   */

.content > * + * {
   margin-top: 0.9em;
}

.content :where(h1, h2, h3, summary) + :where(p, ul, ol) {
   margin-top: 0.6em;
}

.content :where(p, ul, ol) + :where(p, ul, ol) {
   margin-top: 0.45em;
}

.content :where(ul, ol) {
   padding-inline-start: 1.8em;
}

.content li + li {
   margin-top: 0.3em;
}



/*   U T I L I T I E S   */

.bg-catskill {
   background: var(--catskill-white);
}

.bg-royal {
   background: var(--royal-blue);
   color: var(--white);
}



/*   C O M P O N E N T S   */

.btn {
   display: inline-block;
   font-size: 1.2em;
   font-weight: 900;
   text-transform: uppercase;
   padding: 0.75em 1.2em;
   border-radius: 12px;
   transition: 0.3s ease;
   background: var(--royal-blue);
   color: var(--white);

   &:hover {
      background: var(--dodger-blue);
      color: var(--white);
   }
}

.btn-light {
   background: var(--catskill-white);
   color: var(--royal-blue);
}



/*   B L O C K S   */

.media {
   width: 100%;
   border-radius: 12px;
   overflow: hidden;

   &.max-480 { max-width: 480px; }
   &.max-360 { max-width: 360px; }

   &.quote {
      > p {
         padding: .75em 1.2em;
         font-size: var(--text-large);
         text-transform: uppercase;
         text-align: center;
      }
   }
}

.box {
   padding: 1.2em var(--padding-x);
   margin-inline: calc(var(--padding-x) * -1);
   background: var(--catskill-white);

   @media (min-width: 480px) {
      padding: 0.75em 1.2em;
      margin-inline: 0;
      border-radius: 12px;
   }

   @media (min-width: 1020px) {
      display: flex;
      flex-direction: column;
      justify-content: center;
   }

   &.is-white {
      background: var(--white);
   }

   h3 {
      transform: translateY(0.18em);
   }
}

.badge {
   max-width: 240px;
   width: 100%;
   margin-inline: auto;

   @media (min-width: 1020px) {
      max-width: 360px;
      margin-inline: 0;
      order: -1;
   }

   &.small {
      max-width: 120px;

      @media (min-width: 1020px) {
         max-width: 180px;
      }
   }
}



/*   S E C T I O N S   */

.grid {
   display: grid;
   gap: 1.2em;
   align-items: start;

   &.is-3 {
      @media (min-width: 1020px) {
         grid-template-columns: 1fr 1fr 1fr;
      }
   }

   &.has-media {
      align-items: center;

      @media (min-width: 1020px) {
         grid-template-columns: 1fr auto;
         gap: 2.1em;
      }

      &.left {
         @media (min-width: 1020px) {
            grid-template-columns: auto 1fr;
         }
      }
   }
}

.desktop-center {
   @media (min-width:1020px) {
      text-align:center;
  }
}

.center-screen {
   min-height: 100vh;
   display: grid;
   place-items: center;
   text-align: center;
}



/*   C A L L O U T   */

.callout {
   font-size: var(--text-large);

   @media (min-width: 1020px) {
      text-align: center;
   }
}



/*   B A N N E R   */

.banner {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 1.2em;
   align-items: center;
   text-transform: uppercase;

   & > p {
      font-size: var(--text-large);
   }

   &.center {
      @media (min-width: 1020px) {
         justify-items: center;
         text-align: center;
      }
   }
}



/*   F O O T E R   */

.footer {
   display: grid;
   grid-template-columns: auto 1fr;
   gap: 2.4em;
   align-items: center;
}

.navigation {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: .45em 2.4em;

   a {
      font-weight: 700;
      text-transform: uppercase;

      &.is-active {
         color: var(--dodger-blue);
      }
   }
}

.icon {
   width: 48px;
}