/*
 * 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 */
  --background-color: white;
  --light-color: #f8f8f8;
  --dark-color: #505050;
  --dark-blue: #030338;
  --shade-10: #e6e6eb;
  --shade-20: #cdcdd7;
  --shade-25: #f9f9fa;
  --text-color: #131313;
  --link-color: #3b63fb;
  --link-hover-color: #1d3ecf;

  /* fonts */
  --body-font-family: gabarito, sans-serif;
  --heading-font-family: gabarito, 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;
  --nav-bottom-spacing: 20px;
}

html {
  overflow-x: clip;
}

/* 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 {
    /* nav height */
    --nav-height: 80px;

    /* 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;
  overflow-x: clip;
}

body.appear {
  display: block;
}

:focus:not(:focus-visible) {
  outline: none;
}

:focus-visible {
  outline: 2px dashed var(--dark-blue);
  outline-offset: 2px;
}

header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--nav-height);
  margin-bottom: 40px;
  background: var(--background-color);
}

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

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

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-top: 0.8em;
  margin-bottom: 0.25em;
}

code,
pre {
  font-size: var(--body-font-size-s);
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

pre {
  padding: 16px;
  border-radius: 8px;
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

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

/* links */
main a:not(.button, .hero-cta, .section-cta, .cta-bar-cta, .media-content-cta, .reviews-carousel-cta, .plan-preview-cards-cta, .coverage-cards-button, .cards-button):any-link {
  box-sizing: border-box;
  border-bottom: 1px solid #030338;
  padding-bottom: 2px;
  color: #030338;
  font-family: Gabarito, var(--body-font-family);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 20px;
  text-decoration: none;
  overflow-wrap: break-word;
}

main a:not(.button, .hero-cta, .section-cta, .cta-bar-cta, .media-content-cta, .reviews-carousel-cta, .plan-preview-cards-cta, .coverage-cards-button, .cards-button):hover,
main a:not(.button, .hero-cta, .section-cta, .cta-bar-cta, .media-content-cta, .reviews-carousel-cta, .plan-preview-cards-cta, .coverage-cards-button, .cards-button):focus-visible,
main a:not(.button, .hero-cta, .section-cta, .cta-bar-cta, .media-content-cta, .reviews-carousel-cta, .plan-preview-cards-cta, .coverage-cards-button, .cards-button):focus {
  border-radius: 2px;
  border-bottom: 2px solid #C21C17;
  color: #C21C17;
  text-decoration: none;
}

/* buttons */
a.button:any-link,
button {
  box-sizing: border-box;
  display: inline-block;
  max-width: 100%;
  border: 2px solid transparent;
  border-radius: 2.4em;
  padding: 0.5em 1.2em;
  font-family: var(--body-font-family);
  font-style: normal;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  background-color: var(--link-color);
  color: var(--background-color);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.button:hover,
a.button:focus,
button:hover,
button:focus {
  cursor: pointer;
}

button:disabled,
button:disabled:hover {
  background-color: var(--light-color);
  cursor: unset;
}

a.button.secondary,
button.secondary {
  background-color: unset;
  border: 2px solid currentcolor;
  color: var(--text-color);
}

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

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

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

/* sections */
main > .section {
  --section-gap: 88px;

  position: relative;
  margin-bottom: var(--section-gap);
  margin-inline: 0;
}

main > .section[data-space="loose"] {
  --section-gap: 88px;
}

main > .section[data-space="tight"] {
  --section-gap: 24px;
}

@media (width < 900px) {
  main > .section {
    --section-gap: 64px;
  }
}

/* main > .section[data-wingbottom] + .section[data-wingtop] {
  --section-gap: 88px;
} */

main > .section > div {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: auto;
  padding: 0 24px;
}

main > .section > div.default-content-wrapper > p[id^='content-note-'] {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 8px;
  box-sizing: border-box;
  color: var(--dark-color);
  font-style: italic;
  line-height: 1.5;
}

@media (width >= 900px) {
  main > .section > div.default-content-wrapper > p[id^='content-note-'] {
    padding: 0 24px;
  }
}

@media (width < 900px) {
  main > .section > div {
    padding-inline: 8px;
  }
}

/* wings (decorative corner accents, authored via section metadata) */
.section[data-wingtop]::before,
.section[data-wingbottom]::after {
  content: '';
  position: absolute;
  z-index: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.section[data-wingbottomcolor="shade-5"]::after {
  --wing-color: #f2f2f5;

  background-image: url('/icons/wing-shade-5.svg');
}

.section[data-wingtopcolor="pink"]::before,
.section[data-wingbottomcolor="pink"]::after {
  --wing-color: #ffc4eb;

  background-image: url('/icons/wing-pink.svg');
}

.section[data-wingtopcolor="light-blue"]::before,
.section[data-wingbottomcolor="light-blue"]::after {
  --wing-color: #bfd6ff;

  background-image: url('/icons/wing-light-blue.svg');
}

.section[data-wingtop]::before {
  top: 0;
  width: 100%;
  aspect-ratio: 804 / 332;
  height: auto;
}

.section[data-wingbottom]::after {
  bottom: 0;
  width: 100%;
  aspect-ratio: 804 / 332;
  height: auto;
}

/* mobile only: when a section's bottom wing is immediately followed by the next section's top wing, the two full-width
   sweeps sit close enough to visually pinch together. Use compact corner wedges for this specific adjacent-pair case. */
@media (width < 600px) {
  .section[data-wingbottom] + .section[data-wingtop]::before {
    top: -16.3vw; /* was a fixed -64px; converted to vw so the seam scales with the wing's own width-driven size instead of drifting as the browser resizes */
    width: clamp(280px, 88vw, 420px);
    aspect-ratio: 249 / 149;
    /* stylelint-disable-next-line property-no-vendor-prefix -- required for Chromium/Safari HTML element masking */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 249 149' preserveAspectRatio='none'%3E%3Cpath d='M0 149C103.699 149 199.614 91.1839 249 0L0 0L0 149Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 249 149' preserveAspectRatio='none'%3E%3Cpath d='M0 149C103.699 149 199.614 91.1839 249 0L0 0L0 149Z'/%3E%3C/svg%3E");
  }

  .section:has(+ .section[data-wingtop])[data-wingbottom]::after {
    width: clamp(140px, 44vw, 210px);
    aspect-ratio: 250 / 149;
    /* stylelint-disable-next-line property-no-vendor-prefix -- required for Chromium/Safari HTML element masking */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 149' preserveAspectRatio='none'%3E%3Cpath d='M250 0C145.685 0 49.6796 57.2743 0 149L250 149L250 0Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 149' preserveAspectRatio='none'%3E%3Cpath d='M250 0C145.685 0 49.6796 57.2743 0 149L250 149L250 0Z'/%3E%3C/svg%3E");
  }

  .section[data-wingbottom] + .section[data-wingtop="left"]::before {
    transform: none;
  }

  .section[data-wingbottom] + .section[data-wingtop="right"]::before {
    transform: scaleX(-1);
  }

  .section:has(+ .section[data-wingtop])[data-wingbottom="left"]::after {
    transform: none;
  }

  .section:has(+ .section[data-wingtop])[data-wingbottom="right"]::after {
    transform: scaleX(-1);
  }
}

.section[data-wingtop="right"]::before {
  right: calc(50% - 50vw);
  transform: rotate(180deg);
}

.section[data-wingtopstyle="intertwined"][data-wingtop="right"]::before {
  right: calc(50% - 50vw);
  left: auto;
  transform: rotate(180deg);
}

.section[data-wingtop="left"]::before {
  left: calc(50% - 50vw);
  transform: scaleY(-1);
}

.section[data-wingbottom="left"]::after {
  right: calc(50% - 50vw);
  transform: scaleY(-1) rotate(180deg);
}

.section[data-wingbottom="right"]::after {
  left: calc(50% - 50vw);
  transform: none;
}

/* desktop: full-bleed sweep splits to half the viewport so paired wings meet at the center line; uncapped so it keeps
   scaling with the browser instead of freezing on very wide viewports */
@media (width >= 480px) {
  .section[data-wingtop]::before,
  .section[data-wingbottom]::after {
    width: max(300px, 50vw);
  }

  /* Global Reach -> Multi Destinations pair: per Figma's "Wing BG" composite, the two wing halves are stacked with
     zero gap between them, so this wing must bleed upward past its own section's top edge by the confirmed 88px
     gap between the sections (measured at the 1440px reference width) to continue the seam started by the stats
     drifting as the browser resizes. */
  .section[data-wingbottom] + .section[data-wingtop]::before {
    top: -6.11vw;
  }
}

@media (width < 600px) {
  .section[data-wingtop]::before,
  .section[data-wingbottom]::after {
    aspect-ratio: auto;
    background-size: 100% 100%;
    height: 149px;
    mask-image: none;
    transform: none;
  }

  .section[data-wingtop="left"]::before {
    top: 0;
    right: auto;
    left: 0;
    width: 249px;
    background-size: 100% 149px;
    transform: none;
  }

  .section[data-wingtop="left"][data-wingtopwidth="full"]::before {
    width: 100%;
  }

  .section[data-wingbottom="right"]::after {
    right: auto;
    bottom: 0;
    left: 0;
    width: 250px;
    transform: none;
  }

  .section[data-wingtop="right"]::before {
    top: 0;
    right: 0;
    left: auto;
    width: 352px;
    height: 176px;
    background-size: 100% 100%;
    transform: none;
  }

  .section[data-wingtopstyle="intertwined"][data-wingtop="right"]::before {
    right: 0;
    left: auto;
    width: 352px;
    transform: none;
  }

  .section[data-wingtop="left"][data-wingtopcolor="light-blue"]::before {
    background-image: url('/icons/wing-mobile-top-left.svg');
  }

  .section[data-wingtop="left"][data-wingtopcolor="light-blue"]:not(:has(~ .section[data-wingtop="left"][data-wingtopcolor="light-blue"]))::before {
    right: 8px;
    width: calc(100% - 8px);
    height: auto;
    aspect-ratio: 804 / 332;
    background-image: url('/icons/wing-light-blue.svg');
    transform: scaleY(-1);
  }

  .section[data-wingtop="left"][data-wingtopcolor="shade-5"]::before {
    right: 8px;
    width: calc(100% - 8px);
    height: auto;
    aspect-ratio: 352 / 176;
    background-image: url('/icons/wing-mobile-shade-5.svg');
    background-size: 100% 100%;
    transform: scale(-1, -1);
  }

  main > .section[data-wingtop="left"][data-wingtopcolor="shade-5"]::before {
    transform: scaleY(-1);
  }

  .section[data-wingbottom="right"][data-wingbottomcolor="light-blue"]::after {
    background-image: url('/icons/wing-mobile-bottom-right.svg');
  }

  .section[data-wingtop="right"][data-wingtopcolor="pink"]::before {
    width: calc(100% - 8px);
    background-image: url('/icons/wing-mobile-top-right.svg');
    transform: scale(-1, -1);
  }

  .section:has(+ .section[data-wingtop="left"])[data-wingbottom="right"]::after {
    width: 111px;
    right: 0;
    left: auto;
    background-size: 111px 149px;
    transform: none;
  }

  .section[data-wingbottom="right"] + .section[data-wingtop="left"]::before {
    top: -40px;
    right: auto;
    left: 0;
    width: 249px;
    height: 149px;
    aspect-ratio: auto;
    background-image: url('/icons/wing-mobile-top-left.svg');
    background-size: 100% 149px;
    transform: none;
  }

  /* Fallback: mobile asset pair with 149px halves and a 40px section-gap overlap.
  main > .section.statistic-card-container[data-wingbottom="right"]:has(+ .section.media-content-container[data-wingtop="left"])::after {
    display: block;
    inset: auto 0 0 auto;
    width: 50vw;
    height: 149px;
    aspect-ratio: 110 / 149;
    background-image: url('/icons/wing-mobile-bottom-right.svg');
    background-position: center;
    background-size: 100% 100%;
    transform: none;
  }

  main > .section.statistic-card-container[data-wingbottom="right"] + .section.media-content-container[data-wingtop="left"]::before {
    inset: -40px auto auto 0;
    width: 50vw;
    height: 149px;
    aspect-ratio: 249 / 149;
    background-image: url('/icons/wing-mobile-top-left.svg');
    background-position: center;
    background-size: 100% 100%;
    transform: none;
  }
  */

  main > .section.statistic-card-container[data-wingbottom="right"]:has(+ .section.media-content-container[data-wingtop="left"])::after {
    display: block;
    inset: auto 0 0 auto;
    width: 50vw;
    height: 149px;
    aspect-ratio: 110 / 149;
    background-image: url('/icons/wing-mobile-bottom-right.svg');
    background-position: center;
    background-size: 100% 100%;
    transform: none;
  }

  main > .section.statistic-card-container[data-wingbottom="right"] + .section.media-content-container[data-wingtop="left"]::before {
    inset: -40px auto auto 0;
    width: 50vw;
    height: 149px;
    aspect-ratio: 249 / 149;
    background-image: url('/icons/wing-mobile-top-left.svg');
    background-position: center;
    background-size: 100% 100%;
    transform: none;
  }

}

.section-header {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  color: #030338;
  text-align: center;
}

.section-title,
.section-description,
.section-cta-wrapper {
  margin: 0;
}

.section-title {
  width: 100%;
  font-family: Gabarito, var(--heading-font-family);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
}

@media (width < 900px) {
  .section-header {
    gap: 32px;
  }

  .section-title {
    color: #030338;
    font-family: Gabarito, var(--heading-font-family);
    font-size: 28px;
    font-weight: 600;
    line-height: 34px;
    text-align: center;
    text-transform: capitalize;
    font-feature-settings: 'liga' off, 'clig' off;
  }

  main > .section.section:not([class*='-container']) > .section-header-wrapper {
    width: calc(100% - 16px);
    margin-inline: 8px;
    align-items: flex-start;
    text-align: left;
  }

  main > .section.section[data-sectiontitle="Why Compare Plans?"] > .section-header-wrapper {
    align-items: center;
    text-align: center;
  }

  main > .section.section[data-sectiontitle="Why Compare Plans?"] .section-title {
    text-align: center;
  }
}

.section-description {
  width: 100%;
  max-width: 794px;
  font-family: Gabarito, var(--body-font-family);
  font-size: 24px;
  font-weight: 400;
  line-height: 28px;
}

.section-cta-wrapper {
  display: flex;
  justify-content: center;
  order: 3;
}

main > .section > .section-header-wrapper,
main > .section > .section-cta-wrapper {
  box-sizing: border-box;
  width: 100%;
  max-width: 1128px;
  padding-inline: 0;
}

.section-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 258px;
  max-width: 100%;
  min-height: 56px;
  padding: 16px 48px;
  border-radius: 48px;
  background-color: #c21c17;
  color: #fff;
  font-family: Gabarito, var(--body-font-family);
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.5px;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

@media (width < 768px) {
  .section-cta {
    width: 100%;
    margin: 0 16px;
  }
}

.section-cta:any-link {
  color: #fff;
  text-decoration: none;
}

.section-cta:focus,
.section-cta:focus-visible {
  outline: 2px dashed #030338;
  outline-offset: 4px;
  background-color: #c21c17;
  color: #fff;
  text-decoration: none;
}

.section-cta:hover,
.section-cta:active {
  background-color: #630d14;
  color: #fff;
  text-decoration: none;
}

@media (width >= 900px) {
  main > .section > div {
    padding: 0 32px;
  }

  .section[data-wingtop]::before,
  .section[data-wingbottom]::after {
    width: clamp(300px, 50vw, 720px);
  }

}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
  margin: 0;
  padding: 40px 0;
}

@media (width >= 600px) {
  .section[data-wingbottom="right"]::after {
    width: calc(53vw + 12px);
    height: 332px;
    aspect-ratio: auto;
    bottom: -244px;
    transform: scaleY(-1);
  }

  .section[data-wingbottom="right"] + .section[data-wingtop="left"]::before {
    width: calc(50vw - 12px);
    height: 332px;
    aspect-ratio: auto;
    inset-block: auto calc(100% + 41px + 88px);
    right: auto;
    left: calc(53% + 12px);
    transform: scaleX(-1);
  }

}