/* stylelint-disable */
@import '../styles/blade-add-on/blade-add-on.css';
/* Reset margin for all text elements to remove default browser spacing */
/* Reset margin for all text elements to remove default browser spacing */
.chi h1,
.chi h2,
.chi h3,
.chi h4,
.chi h5,
.chi h6,
.chi p,
.chi blockquote,
.chi ul,
.chi ol,
.chi li,
.chi dl,
.chi dt,
.chi dd,
.chi pre {
  margin: 0;
}
* {
  box-sizing: border-box;
}
/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {

  /* colors */
  --transparent: transparent;
  --platinum: #f2f0f1;
  --white: #ffffff;
  --white-rgba: rgba(242, 240, 241, 1);
  --light-white-rgba: rgba(242, 240, 241, 0.75);
  --off-black: #333333;
  --grey: #D8D6D4;
  --new-grey: #D8D6D4;
  --goldenrod: #FDD219;
  --light-grey: #FAFAFA;
  --lightGray: #f9f9fa;
  --light-grey-rgba: rgba(255, 255, 255, 0.75);
  --iron: #3F4145;
  --nickle: #8E9399;
  --silver: #d0d4d9;
  --lightSilver: #dadee2;
  --black: #000000;
  --orange: #FB8429;
  --bright-teal: #2AEDE5;
  --light-teal: #B2FFF6;
  --medium-teal: #007981;
  --mediumBlue: #0075c9;
  --dark-teal: #0f3133;
  --deep-orange: #F95E4A;
  --bright-orange: #ff3c37;
  --golden-rod: #FDD219;
  --light-yellow: #FFF8B3;
  --lumen-dark-teal:#0f2f2f;
  --lumen-light-teal:#24767b;
  --contrast:#99f9ff;
  --navy-rgba: rgba(15, 49, 51, 1);
  --light-navy-rgba: rgba(15, 49, 51, 0.75);
  --red-orange-gradient: linear-gradient(90deg, #F95E4A 0%, #F96742 35%, #FB812C 94%, #FB8429 100%) 0% 0% no-repeat;
  --yellow-orange-gradient: linear-gradient(90deg, #FED71A 0%, #FED11B 19%, #FDBF1E 45%, #FCA224 75%, #FB8429 100%) 0% 0% no-repeat;
  --teal-gradient: linear-gradient(90deg, #15FDF4 0%, #15FAF1 22%, #13F0E8 39%, #11E0D8 54%, #0DC9C2 69%, #08ACA6 82%, #038883 95%, #007672 100%) 0% 0% no-repeat;
  --pink-orange-gradient: linear-gradient(90deg, #F96498 0%, #F96889 7%, #FA7266 25%, #FA7A4B 43%, #FB8038 61%, #FB832D 80%, #FB8429 100%) 0% 0% no-repeat;

  /* fonts removed: use font-family directly in selectors */

  /* font weight variables */
  --font-weight-book: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 1000;
  --font-weight-black: 800;

  /* font shorthand variables (font-size/line-height + font-family) */
  --font-12-16: 12px/16px Gotham, Arial, Helvetica;
  --font-14-20: 14px/20px Gotham, Arial, Helvetica;
  --font-14-16: 14px/16px Gotham, Arial, Helvetica;
  --font-16-19: 16px/19px Gotham, Arial, Helvetica;
  --font-16-24: 16px/24px Gotham, Arial, Helvetica;
  --font-button-19: 16px/19px Gotham, Arial, Helvetica;
  --font-18-26: 18px/26px Gotham, Arial, Helvetica;
  --font-20-28: 20px/28px Gotham, Arial, Helvetica;
  --font-24-32: 24px/32px Gotham, Arial, Helvetica;
  --font-30-32: 30px/32px Gotham, Arial, Helvetica;
  --font-36-40: 36px/40px Gotham, Arial, Helvetica;
  --font-48-50: 48px/50px Gotham, Arial, Helvetica;
  --font-60-68: 60px/68px Gotham, Arial, Helvetica;
  --font-75-75: 75px/75px Gotham, Arial, Helvetica;
  --font-16-24-gotham-book: 16px/24px Gotham-Book, Arial, Helvetica;
  --font-15-21-gotham-bold: 15px/21px Gotham-Bold, Arial, Helvetica;
  --font-18-26-gotham-book: 18px/26px Gotham-Book, Arial, Helvetica;
  --font-20-28-gotham-medium: 20px/28px Gotham-Medium, Arial, Helvetica;
  --font-12-16-book: 12px/16px Gotham-Book, Arial, Helvetica;
  --font-14-16-gotham-book: 14px/16px Gotham-Book, Arial, Helvetica;
  --font-16-19-gotham-medium: 16px/19px Gotham-Medium, Arial, Helvetica;
  --font-20-28-gotham-book: 20px/28px Gotham-Book, Arial, Helvetica;
  --font-20-28-gotham-bold: 20px/28px Gotham-Bold, Arial, Helvetica;
  --font-24-32-gotham-bold: 24px/32px Gotham-Bold, Arial, Helvetica;
  --font-18-26-gotham-medium: 18px/26px Gotham-Medium, Arial, Helvetica;
  --font-16-24-gotham-medium: 16px/24px Gotham-Medium, Arial, Helvetica;
  --font-48-50-gotham-bold: 48px/50px Gotham-Bold, Arial, Helvetica;
  --font-36-40-gotham-bold: 36px/40px Gotham-Bold, Arial, Helvetica;
  --font-38-40-gotham-bold: 38px/40px Gotham-Bold, Arial, Helvetica;
  --font-30-32-gotham-bold: 30px/32px Gotham-Bold, Arial, Helvetica;
  --font-24-30-gotham-bold: 24px/30px Gotham-Bold, Arial, Helvetica;

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

  /* Viewport variables */
  --is-large-desktop: 0;
  --is-medium-desktop-large-desktop: 0;
  --is-medium-desktop: 0;
  --is-small-desktop-medium-desktop: 0;
  --is-small-desktop: 0;
  --is-desktop: 0;
  --is-tablet-large-desktop: 0;
  --is-tablet-medium-desktop: 0;
  --is-tablet-small-desktop: 0;
  --is-tablet: 0;
  --is-mobile-medium-desktop: 0;
  --is-mobile-small-desktop: 0;
  --is-mobile-tablet: 0;
  --is-mobile: 0;

  --col24-2: calc(100% / 24 * 2);
  --col24-10: calc(100% / 24 * 10);
  --col24-11: calc(100% / 24 * 11);
  --col20-11: calc(100% / 20 * 11);
  --col20-10: calc(100% / 20 * 10);
}


/* 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');
}

/* Responsive font size variables */
@media (max-width: 425px) {
  :root {
    --font-18-26: 16px/24px Gotham, Arial, Helvetica;
    --font-24-32: 20px/28px Gotham, Arial, Helvetica;
    --font-36-40: 20px/28px Gotham, Arial, Helvetica;
    --font-48-50: 24px/30px Gotham, Arial, Helvetica;
    --font-60-68: 24px/30px Gotham, Arial, Helvetica;
    --font-75-75: 24px/30px Gotham, Arial, Helvetica;
  }
}

@media (min-width: 426px) and (max-width: 768px) {
  :root {
    --font-36-40: 30px/32px Gotham, Arial, Helvetica;
    --font-48-50: 38px/40px Gotham, Arial, Helvetica;
    --font-60-68: 42px/46px Gotham, Arial, Helvetica;
    --font-75-75: 50px/50px Gotham, Arial, Helvetica;
  }
}

@media (min-width: 426px) {
  :root {
    --font-18-26: 18px/26px Gotham, Arial, Helvetica;
    --font-24-32: 24px/32px Gotham, Arial, Helvetica;
  }
}

@media (min-width: 769px) {
  :root {
    --font-36-40: 36px/40px Gotham, Arial, Helvetica;
    --font-48-50: 48px/50px Gotham, Arial, Helvetica;
    --font-60-68: 60px/68px Gotham, Arial, Helvetica;
    --font-75-75: 75px/75px Gotham, Arial, Helvetica;
  }
  /* Center cards if less than 3 */
  .peek-carousel:has(.card-wrapper:nth-child(3)):not(:has(.card-wrapper:nth-child(4))),
  .peek-carousel:has(.card-wrapper:nth-child(2)):not(:has(.card-wrapper:nth-child(3))),
  .peek-carousel:has(.card-wrapper:nth-child(1)):not(:has(.card-wrapper:nth-child(2))) {
    justify-content: center;
  }
}


.chi {
  /* max-width: 1600px; */
  margin: auto;
}

.-flex--gap-20 {
  gap: 20px;
  grid-gap: 20px;
}

img {
  max-width: 100%;
}

.peek-carousel-wrapper .card-container {
  padding: 0px;
}

.link-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: auto;
  padding: 20px 0;
}

.sticky {
  position: sticky;
  z-index: 100;
}

main {
  max-width: 1600px;
  margin: 0px auto;
  display: flex;
  flex-direction: column;
}
body {
  visibility: hidden;
}

body.appear {
  visibility: visible;
}
.section.hide {
  display: none;
}
.header .navigation-container {
  max-width: 1600px;
  margin: 0px auto;
}
@media (min-width: 1200px) {
  main {
    gap: 80px;
    /* desktop default */
  }
}

@media (min-width: 769px) and (max-width: 1199px) {
  main {
    gap: 60px;
    /* tablet */
  }
}

@media (max-width: 768px) {
  main {
    gap: 40px;
    /* mobile */
  }
}


/* Peek Carousel Style */
.peek-carousel-wrapper {
  position: relative;
}

/* Base carousel styles */
.peek-carousel {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  gap: 40px;
  align-items: stretch;
  scrollbar-width: none;
  /* Firefox */
}
/* .peek-carousel .card-wrapper {
  height: 100%;
} */
.peek-carousel::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

/* Card items */
.peek-carousel .card-wrapper {
  flex: 0 0 auto;
  max-width: 470px;
}

/* First item: 2 columns left margin */
.peek-carousel .card-wrapper:first-child {
  margin-left: calc(100% / 24 * 2);
}

/* Last item: 2 columns right margin */
.peek-carousel .card-wrapper:last-child {
  margin-right: calc(100% / 24 * 2);
}

/* Desktop: all cards equal width, spanning 20 columns */
@media (min-width: 1200px) {
  .peek-carousel .card-wrapper {
    width: calc((100% / 24 * 20 - 80px) / 3);
    max-width: 470px;
  }

  .peek-carousel .card-wrapper:first-child {
    margin-left: calc(100% / 24 * 2);
  }
}

/* Tablet */
@media (max-width: 1199px) {
  .peek-carousel .card-wrapper {
    max-width: 320px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .peek-carousel {
    gap: 20px;
  }

  .peek-carousel .card-wrapper {
    width: 91vw;
    margin-left: 0;
    max-width: 270px;
  }

  .peek-carousel .card-wrapper:first-child {
    margin-left: calc(100% / 24 * 2);
  }
}

/* Carousel Controls: width = 2 columns - 40px */
.peek-carousel-ctl {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  /* White, 0.8 opacity */
  border: none;
  outline: none;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  opacity: 1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
  padding: 0;
  border-radius: 0;
  /* No radius */
}

.peek-carousel-ctl.show {
  display: flex;
}

.peek-carousel-ctl.hide {
  display: none;
}

.peek-carousel-ctl-prev {
  left: 0;
  width: calc((100% / 24 * 2) - 39px);
}

.peek-carousel-ctl-next {
  right: 0;
  width: calc((100% / 24 * 2) - 40px);
}

.peek-carousel-ctl .peek-carousel-caret {
  font-size: 60px;
  line-height: 68px;
  color: var(--color-accent, #ff3c37);
  /* Use CSS var, fallback to #ff3c37 */
  pointer-events: none;
  user-select: none;
  display: block;
}

/* Hide controls on mobile */
@media (max-width: 768px) {
  .peek-carousel-ctl {
    display: none !important;
  }
}

/* Peek Carousel Style END */

/* Section Columns Wrapper - Base */
.section-columns-wrapper {
  display: flex;
  flex-direction: row;
  gap: 60px;
}

/* Tablet: column direction, 60px gap */
@media (max-width: 1199px) {
  .section-columns-wrapper {
    flex-direction: column;
    gap: 60px;
  }
  .section-columns-wrapper > .section-columns {
    flex: 1 1 100% !important;
    width: 100%;
  }
}

/* Mobile: column direction, 40px gap */
@media (max-width: 768px) {
  .section-columns-wrapper {
    flex-direction: column;
    gap: 40px;
  }
}

/* Margin for first and last section-columns inside the wrapper */
@media (min-width: 1200px) {
  .section-columns-wrapper>.section-columns:first-child {
    margin-left: var(--col24-2);
  }
  .section-columns-wrapper>.section-columns:last-child {
    margin-right: var(--col24-2);
  }
}

/* two-col-indent utility */

.two-col-indent {
  padding-left: var(--col24-2);
  padding-right: var(--col24-2);
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.section-columns {
  display: flex;
  flex-direction: column;
  gap: 40px;
}




/* Section flex utilities */
.section-flex-3 {
  flex: 3 3 0;
}

.section-flex-4 {
  flex: 4 4 0;
}

.section-flex-5 {
  flex: 5 5 0;
}

.section-flex-6 {
  flex: 6 6 0;
}

.section-flex-7 {
  flex: 7 7 0;
}

.content {
  display: flex;
  flex-direction: column;
  -ms-flex-direction: column;
  gap: 20px;
}
/* 🌍 GLOBAL BREAKPOINT VARIABLES */
:root {
  /* Breakpoint values */
  --breakpoint-xs: 425px;  /* Extra small devices (phones) */
  --breakpoint-sm: 768px;   /* Small tablets */
  --breakpoint-md: 1024px;  /* Tablets & small laptops */
  --breakpoint-lg: 1280px;  /* Desktops */
  --breakpoint-xl: 1536px;  /* Large screens */

  /* Convenience media query strings */
  --media-xs: (max-width: 425px);
  --media-sm: (min-width: 426px) and (max-width: 768px);
  --media-md: (min-width: 769px) and (max-width: 1024px);
  --media-lg: (min-width: 1025px) and (max-width: 1280px);
  --media-xl: (min-width: 1281px);
}
/* Button styles */
.primary {
  background: #F95E4A;
  border: 3px solid #F95E4A;
  border-radius: 0px 21px 21px 21px;
  font: normal normal bold 16px/19px Gotham;
  color: #FFFFFF;
  padding: 10px 15px;
  text-decoration: none;
}

.secondary {
  border: 3px solid #F95E4A;
  border-radius: 21px;
  padding: 10px 15px;
  font: normal normal bold 16px / 19px Gotham;
  text-decoration: none;
  color: #333;
}

.content .link-group .link-container.link-variation--default a[href="/"] {
  display: none;
}

.link-container.link-variation--primary .link-button {
  cursor: pointer;
  display: inline-block;
  font: var(--font-button-19) !important;
  font-weight: var(--font-weight-bold) !important;
  outline: none;
  padding: 12px 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .2s ease-in;
  border: 3px solid !important;
  border-radius: 21px !important;
  border-top-left-radius: 0 !important;
  color: var(--white) !important;
  transition: all .2s ease-in;
}
.link-container.link-variation--primary .link-button span {
  color: var(--white) !important;
  font: var(--font-button-19) !important;
  font-weight: var(--font-weight-bold) !important;
}

.link-container.link-variation--secondary .link-button {
  cursor: pointer;
  display: inline-block;
  font: var(--font-button-19) !important;
  font-weight: var(--font-weight-bold) !important;
  outline: none;
  padding: 12px 20px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: all .2s ease-in;
  border: 3px solid !important;
  border-radius: 21px !important;
  color: var(--black) !important;
  transition: all .2s ease-in;
}
.link-container.link-variation--secondary .link-button span {
  color: var(--black) !important;
  font: var(--font-button-19) !important;
  font-weight: var(--font-weight-bold) !important;
}

.link-container.link-variation--tertiary .link-button {
  background: none !important;
  border: 0 !important;
  color: var(--medium-teal) !important;
  cursor: pointer;
  display: inline-flex;
  font: var(--font-button-19) !important;
  font-weight: var(--font-weight-bold) !important;
  outline: none;
  padding: 12px 20px 12px 0;
  position: relative;
  text-decoration: none;
  text-transform: none; 
  transition: all .2s ease-in;
}
.link-button--tertiary:empty::before {
  right: 0px !important;
}

.link-container.link-variation--tertiary .link-button::before {
  background-color: rgba(0, 0, 0, 0);
  background-image: url(../icons/css_sprites.png);
  background-position: -154px -10px !important;
  background-repeat: no-repeat;
  background-size: initial;
  height: 14px;
  transform: translateY(-50%) scale(.65);
  width: 40px;
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  transition: all .3s ease-in;
}

.link-container.link-variation--primary .link-button:hover,
.link-container.link-variation--secondary .link-button:hover,
.link-container.link-variation--tertiary .link-button:hover {
  scale: 1.05;
}
.link-container.link-variation--tertiary .link-button:hover::before {
  right: -26px;
}

.link-container.link-variation--primary .link-button.link-button--primary-orange {
  background-color: var(--deep-orange);
  border-color: var(--deep-orange) !important;
}

.link-container.link-variation--secondary .link-button.link-button--secondary-orange {
  background-color: transparent;
  border-color: var(--deep-orange) !important;
}

.link-container.link-variation--primary .link-button.link-button--primary-dark-teal {
  background-color: var(--dark-teal);
  border-color: var(--dark-teal) !important;
}

.link-container.link-variation--secondary .link-button.link-button--secondary-dark-teal {
  background-color: transparent;
  border-color: var(--dark-teal) !important;
}

.link-container.link-variation--primary .link-button.link-button--primary-light-teal {
  background-color: var(--light-teal);
  border-color: var(--light-teal) !important;
  color: var(--black) !important;
}

.link-container.link-variation--secondary .link-button.link-button--secondary-light-teal {
  background-color: transparent;
  border-color: var(--light-teal) !important;
}

.link-container.link-variation--primary .link-button.link-button--primary-light-yellow {
  background-color: var(--light-yellow);
  border-color: var(--light-yellow) !important;
  color: var(--black) !important;
}

.link-container.link-variation--secondary .link-button.link-button--secondary-light-yellow {
  background-color: transparent;
  border-color: var(--light-yellow) !important;
}

/* default font for boilerplate title and text fields */
.default-content-wrapper * {
  font-family: Gotham-Book, Arial, Helvetica;
  color: var(--off-black) !important;
}
.default-content-wrapper a,
.default-content-wrapper a * {
  color: var(--medium-teal) !important;
}
.default-content-wrapper a:hover{
  color: var(--dark-teal) !important;
}
.default-content-wrapper h1,
.default-content-wrapper h2,
.default-content-wrapper h3,
.default-content-wrapper h4,
.default-content-wrapper h5,
.default-content-wrapper h6 {
  font-family: Gotham, Arial, Helvetica;
  padding-top: 20px;
}
.default-content-wrapper p,
.default-content-wrapper ul,
.default-content-wrapper ol {
  font: var(--font-18-26-gotham-book) !important;
}
.default-content-wrapper p {
  padding-top: 20px;
}
.default-content-wrapper p sub, .default-content-wrapper p sup {
  font-size: 12px;
  line-height: 0px;
  position: relative;
}
.default-content-wrapper p sup {
  top: 0.4em;
}
.default-content-wrapper ul, .default-content-wrapper ol {
  margin-top: 20px;
} 
.default-content-wrapper img {
  padding: 20px 0;
}

/* Apply width 100% to all link containers with mobile-full-width class except tertiary */
@media (max-width: 767px) {
  .link-container.mobile-full-width:not(.link-variation--tertiary) {
    width: 100%;
  }
  .link-container.mobile-full-width:not(.link-variation--tertiary) .link-button {
    width: 100%;
  }
}

.section-title.align-left {
  text-align: left;
}

.section-title.align-center {
  text-align: center;
}

.content.align-left {
  text-align: left;
}

.content.align-center {
  text-align: center;
}

h1 {
  font-size: 48px !important;
}

h2 {
  font: var(--font-36-40-gotham-bold);
  @media (width >= 768px) and (width <= 1199px) {
    font: var(--font-30-32-gotham-bold);
  }
  @media (width <= 767px) {
    font: var(--font-20-28-gotham-bold);
  }
}

/* Prevent the card-container grid from applying inside the split wrapper.
   The split sections are flex columns, not a card grid layout. Used for (lmn-blog-split-left-14) */
.lmn-blog-split-wrapper .section.card-container:not(.peek-carousel) {
  display: block;
  grid-template-columns: unset;
  place-items: unset;
  gap: unset;
}