/*
fonts
*/

@font-face {
  font-family: DBHead;
  src: url("/assets/fonts/DBScreenHead-Light.woff2") format("woff2"),
    url("/assets/fonts/DBScreenHead-Light.woff") format("woff"),
    url("/assets/fonts/DBHead-Light.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: DBHead;
  src: url("/assets/fonts/DBScreenHead-Regular.woff2") format("woff2"),
    url("/assets/fonts/DBScreenHead-Regular.woff") format("woff"),
    url("/assets/fonts/DBHead-Regular.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: DBHead;
  src: url("/assets/fonts/DBHead-Italic.otf") format("opentype");
  font-weight: normal;
  font-style: italic;
  font-display: block;
}
@font-face {
  font-family: DBHead;
  src: url("/assets/fonts/DBScreenHead-Black.woff2") format("woff2"),
    url("/assets/fonts/DBScreenHead-Black.woff") format("woff"),
    url("/assets/fonts/DBHead-Black.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: block;
}

/*
variables
*/

:root {
  --font-family-sans-serif: DBHead, "Helvetica Neue", Helvetica, Arial,
    sans-serif;

  --font-size-huge: 56px;
  --font-size-h1: 48px;
  --font-size-h2: 40px;
  --font-size-h3: 32px;
  --font-size-h4: 24px;
  --font-size-body: 18px;
  --font-size-small: 16px;
  --font-size-micro: 14px;

  --line-height-heading: 1.2;
  --line-height-body: 1.5;

  --color-white: #ffffff;
  --color-black: #000000;

  --color-grey-30: #b7bbbd;
  --color-grey-10: #e9edf0;
  --color-grey-05: #f5f6f7;

  --color-blue: #003250;
  --color-blue-light: #00aadc;
  --color-pink: #f046a5;
  --color-yellow: #ffaf00;
  --color-green: #5fb4b4;
  --color-green-dark: #327a7a;

  --color-gradient-orange: #fd9825;
  --color-gradient-mandarine: #f97f4e;
  --color-gradient-purple: #f45d82;

  --color-step-1: var(--color-yellow);
  --color-step-2: var(--color-gradient-orange);
  --color-step-3: var(--color-gradient-mandarine);
  --color-step-4: var(--color-gradient-purple);
  --color-step-5: var(--color-pink);

  --gradient: linear-gradient(90deg, #f046a5 0%, #ffaf00 100%);

  --gradient-soft-1: linear-gradient(
    90deg,
    rgba(240, 70, 165, 0.15) 0%,
    rgba(255, 175, 0, 0.15) 100%
  );
  --gradient-soft-2: linear-gradient(
    90deg,
    rgba(95, 180, 180, 0.12) 0%,
    rgba(240, 70, 165, 0.12) 100%
  );
  --gradient-soft-3: linear-gradient(
    91.76deg,
    rgba(255, 175, 0, 0.12) 0%,
    rgba(95, 180, 180, 0.12) 100%
  );

  --shadow-1: 0px 0px 40px rgba(0, 0, 0, 0.1);
  --shadow-2: 0px 2px 4px rgba(0, 0, 0, 0.02), 0px 3px 7px rgba(0, 0, 0, 0.03),
    0px 8px 18px rgba(0, 0, 0, 0.04), 0px 15px 40px rgba(0, 0, 0, 0.08);

  --space-container-h: 24px;
  --space-module-v: 48px;
  --space-module-v-without-header: 48px;

  --grid-gap-small: 16px;
  --grid-gap-large: 48px;
  --grid-gap: var(--grid-gap-small);
}
@media screen and (min-width: 768px) {
  :root {
    --space-container-h: 72px;
    --space-module-v: 160px;

    --grid-gap: var(--grid-gap-large);
  }
}

/*
global
*/

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

html {
  scroll-behavior: smooth;
  font-family: var(--font-family-sans-serif);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  line-sizing: normal;
  color: var(--color-blue);
}

body {
  margin: 0;
}

[hidden] {
  display: none !important;
}

h1 {
  font-size: var(--font-size-h1);
  font-weight: bold;
  line-height: var(--line-height-heading);
}
h2 {
  font-size: var(--font-size-h2);
  font-weight: bold;
  line-height: var(--line-height-heading);
}
h3 {
  font-size: var(--font-size-h3);
  font-weight: bold;
  line-height: var(--line-height-heading);
}
h4 {
  font-size: var(--font-size-h4);
  font-weight: bold;
  line-height: var(--line-height-heading);
}
h5 {
  font-size: var(--font-size-h4);
  font-weight: bold;
  line-height: var(--line-height-heading);
}
h6 {
  font-size: var(--font-size-h4);
  font-weight: bold;
  line-height: var(--line-height-heading);
}

h1 {
  margin: 0.67em 0;
}

a {
  color: var(--color-blue-light);
}

pre {
  white-space: pre-wrap;
}

hr {
  border-style: solid;
  border-width: 1px 0 0;
  color: inherit;
  height: 0;
  overflow: visible;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
}
audio:not([controls]) {
  display: none;
}

picture {
  display: contents;
}
source {
  display: none;
}

img,
svg,
video,
canvas {
  height: auto;
}

audio {
  width: 100%;
}

img {
  border-style: none;
}

svg {
  overflow: hidden;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

/*
utilities
*/

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.details-reset > summary {
  list-style: none;
}
.details-reset > summary::before {
  display: none;
}
.details-reset > summary::-webkit-details-marker {
  display: none;
}

.link-reset {
  text-decoration: none;
  color: inherit;
}

.hover-lift {
  transition: transform 0.15s ease;
}
@media (hover: hover) {
  .hover-lift:hover {
    transform: translate3d(0px, -2px, 0px);
  }
}

body.modal-open {
  overflow: hidden;
  position: fixed;
}

@media screen and (min-width: 1024px) {
  .lt-tablet {
    display: none !important;
  }
}
@media screen and (max-width: 1023.99999px) {
  .gte-tablet {
    display: none !important;
  }
}

/*
layout
*/

.container,
.container-narrow,
.container-narrower {
  margin-left: var(--space-container-h);
  margin-right: var(--space-container-h);
}
@media screen and (min-width: 768px) {
  .container-narrow,
  .container-narrower {
    width: calc(
      100% - 2 * var(--space-container-h) - (12 - var(--columns)) *
        ((100% - 11 * var(--grid-gap)) / 12) - (12 - var(--columns)) *
        var(--grid-gap)
    );
    margin-left: auto;
    margin-right: auto;
  }
  .container-narrow {
    --columns: 10;
  }
  .container-narrower {
    --columns: 8;
  }
}
@media screen and (min-width: 1024px) {
  .container-narrow {
    --columns: 8;
  }
  .container-narrower {
    --columns: 6;
  }
}

/*
buttons
*/

.button-reset,
.button-primary,
.button-tertiary {
  background: transparent;
  border: none;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.button-primary {
  display: inline-block;
  padding: 3px;
  border-radius: 999px;
  background: var(--gradient);
  text-decoration: none;
}
.button-primary > * {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-blue);
}
.button-primary:hover > * {
  background: transparent;
  color: var(--color-white);
}

.button-tertiary {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0px;
  color: var(--color-blue-light);
  font-weight: bold;
  text-decoration: inherit;
  transition: opacity 0.3s ease;
}
.button-tertiary:hover {
  opacity: 0.75;
}
.button-tertiary > .icon:last-child {
  transition: transform 0.3s ease;
}
.button-tertiary:hover > .icon:last-child {
  transform: translateX(2px);
}

/*
video player
*/

video-player {
  display: block;
  position: relative;
}
.video-poster {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.play-button {
  display: block;
  width: 120px;
  height: 120px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--color-white);
  transition: opacity 0.3 ease;
}
.play-button:hover {
  opacity: 0.75;
}
@media screen and (min-width: 768px) {
  .play-button {
    border: 3px solid;
    border-radius: 60px;
  }
}

/*
tags
*/
.tag-location {
  display: flex;
  align-items: center;
  color: var(--color-blue-light);
  gap: 4px;
}

/*
accordion
*/

.accordion-list > .accordion-row {
  border-bottom: 1px solid var(--color-grey-30);
}
.accordion-list > .accordion-row:first-child {
  border-top: 1px solid var(--color-grey-30);
}
.accordion-heading,
.accordion-body {
  margin: 24px 0;
}
.accordion-heading {
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.accordion-heading > p {
  margin: 0;
}
.accordion-heading::after {
  flex-shrink: 0;
  display: block;
  content: " ";
  background-image: url("/assets/img/icon-accordion-closed.svg");
  background-size: 32px 32px;
  height: 32px;
  width: 32px;
}
.accordion-row[open] .accordion-heading::after {
  background-image: url("/assets/img/icon-accordion-open.svg");
}
.accordion-more {
  margin: 24px 0;
}
@media screen and (min-width: 768px) {
  .accordion-heading,
  .accordion-body {
    margin: 24px;
  }
  .accordion-heading {
    font-size: var(--font-size-h4);
  }
  .accordion-more {
    margin: 34px 24px;
  }
}

/*
gradient text
*/

.text-gradient {
  color: var(--color-yellow);
}
/* The check for aspect-ratio makes sure Safari 14 doesn't get a gradient, since it comes out transparent there.  */
@supports (aspect-ratio: 1/1) and (-webkit-background-clip: text) and
  (-webkit-text-fill-color: transparent) {
  .text-gradient {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
@supports (background-clip: text) and (-webkit-text-fill-color: transparent) {
  .text-gradient {
    background: var(--gradient);
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/*
dropdown-select
*/

dropdown-select {
  display: block;
}
dropdown-select select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.dropdown-select-wrapper {
  position: relative;
}
.dropdown-select-wrapper::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: block;
  content: " ";
  background-image: url("/assets/img/icon-dropdown.svg");
  background-size: 32px 23px;
  width: 32px;
  height: 23px;
  pointer-events: none;
}
.dropdown-select-wrapper select {
  padding-right: 40px;
}

/*
banner
*/

.banner {
  background: var(--gradient);
  padding: 16px 24px;
  color: var(--color-white);
  font-size: var(--font-size-micro);
}
html.is-app .banner {
  display: none;
}
.banner a {
  color: inherit;
  text-decoration: inherit;
}
.banner a:hover {
  text-decoration: underline;
}
.banner p {
  margin: 0;
}
@media screen and (min-width: 768px) {
  .banner {
    font-size: var(--font-size-body);
    text-align: center;
  }
}

/*
navbar
*/

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
}
html.is-app .navbar {
  display: none;
}
@media screen and (min-width: 768px) {
  .navbar {
    padding: 8px 48px;
  }
}

/*
menu -- mobile
*/

.menu-mobile[open] > summary {
  cursor: default;
}
.menu-mobile-dialog {
  z-index: 1;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  overflow: auto;
}
.menu-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px;
  padding: 0;
}
.menu-mobile-content {
  margin: 48px 24px;
  padding: 0;
}
.menu-mobile-content li {
  list-style: none;
}
.menu-mobile-content li ul {
  padding-left: 24px;
}
.menu-mobile-content summary,
.menu-mobile-content a {
  font-size: var(--font-size-h4);
  text-decoration: none;
  color: inherit;
}
.menu-mobile-content a {
  margin: 16px 0;
}
.menu-mobile-content a {
  display: block;
}
.menu-mobile-content summary {
  font-weight: bold;
}
.menu-mobile-languages a {
  display: inline-block;
  text-transform: uppercase;
}
@media screen and (min-width: 768px) {
  .menu-mobile {
    display: none;
  }
}

/*
menu -- desktop
*/

.menu-desktop {
  display: none;
}
.menu-desktop ul {
  list-style: none;
}
.menu-desktop > ul {
  display: flex;
  margin: 0;
  padding: 0;
}
.menu-desktop a {
  font-size: var(--font-size-body);
  font-weight: normal;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.3s ease;
}
.menu-desktop a:hover {
  opacity: 0.75;
}
.dropdown {
  position: absolute;
  right: 0;
  background-color: var(--color-white);
  box-shadow: var(--shadow-1);
  border-radius: 8px;
  padding: 24px;
  white-space: nowrap;
  display: none;
  visibility: hidden;
  z-index: 1;
}
.dropdown li:not(:last-child) {
  margin-bottom: 24px;
}
.menu-desktop > ul > li {
  position: relative;
  margin-left: 32px;
}
.menu-desktop > ul > li > a {
  display: inline-block;
  margin-top: 16px;
  margin-bottom: 16px;
}
.menu-desktop > ul > li:hover .dropdown,
.menu-desktop > ul > li:focus-within .dropdown,
.menu-desktop > ul > li .dropdown:hover,
.menu-desktop > ul > li .dropdown:focus {
  display: block;
  visibility: visible;
}
@media screen and (min-width: 768px) {
  .menu-desktop {
    display: block;
  }
}

/*
footer
*/

.footer {
  margin-top: var(--space-module-v);
  padding: 48px 24px;
  font-size: var(--font-size-h4);
}
html.is-app .footer {
  display: none;
}
.footer a {
  display: inline-block;
  color: inherit;
  text-decoration: inherit;
  margin-bottom: 8px;
  transition: opacity 0.3s ease;
}
.footer a:hover {
  opacity: 0.75;
}
.footer-section {
  margin-bottom: 24px;
}
.footer-section.desktop {
  display: none;
}
.footer-heading {
  font-weight: bold;
  margin: 0;
  padding: 16px 24px 16px 0;
  font-size: inherit;
}
.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 48px;
}
.footer-languages {
  text-transform: uppercase;
}
@media (max-width: 1023.99999px) {
  .footer-logo-everyworks {
    display: none !important;
  }
}
@media screen and (min-width: 1024px) {
  .footer {
    padding: 48px 72px;
  }
  .footer-sections {
    display: flex;
    justify-content: space-between;
  }
  .footer-section.mobile {
    display: none;
  }
  .footer-section.desktop {
    display: block;
  }
  .footer-heading {
    padding: 0 0 16px 0;
  }
  .footer-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

/*
main
*/

.main {
  margin-bottom: var(--space-module-v);
}

/*
module
*/

.module {
  position: relative;
}
.module:not(:first-child) {
  margin-top: var(--space-module-v);
}
/*.module.without-header {
  margin-top: var(--space-module-v-without-header);
}*/

.module-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 24px;
  margin-bottom: 48px;
  hyphens: auto;
}
.module-headline,
.module-subheadline p,
.module-introduction p {
  margin: 0;
}
.module-headline {
  font-size: var(--font-size-h2);
  font-weight: bold;
  line-height: var(--line-height-heading);
}
.module-subheadline {
  font-size: var(--font-size-h4);
  font-weight: normal;
  line-height: var(--line-height-heading);
}
.module-introduction {
  font-size: var(--font-size-body);
  font-weight: normal;
}
@media screen and (min-width: 768px) {
  .module-header.center {
    align-items: center;
    text-align: center;
  }
  .module-header.gap-large {
    margin-bottom: 80px;
  }
  .module-header.narrow {
    max-width: 40%;
  }
  .module-headline {
    font-size: var(--font-size-huge);
  }
  .module-subheadline {
    font-size: var(--font-size-h3);
  }
  .module-introduction {
    font-size: var(--font-size-h4);
  }
}

/*
polygon
*/
.polygon {
  z-index: -1;
  position: absolute;
  width: calc(100% - 2 * var(--space-container-h));
  margin-left: var(--space-container-h);
  margin-right: var(--space-container-h);
  display: none;
}
@media screen and (min-width: 768px) {
  .polygon {
    display: block;
  }
}
.polygon::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.polygon svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.polygon-position-center-top {
  top: calc(0% - 300px);
}
.polygon-position-center-middle {
  top: 50%;
  transform: translateY(-50%);
}
.polygon-position-center-bottom {
  bottom: calc(0% - 300px);
}
.polygon-color-gradient-soft-2 svg {
  fill: url(#paint_gradient_soft_2);
}
.polygon-color-gradient-soft-1 svg {
  fill: url(#paint_gradient_soft_1);
}
.polygon-color-gradient-soft-3 svg {
  fill: url(#paint_gradient_soft_3);
}

/*
module -- header
*/

.header {
  margin-top: 24px;
  margin-bottom: 24px;
  hyphens: auto;
}
.header-grid {
  display: grid;
  grid-gap: var(--grid-gap-large);
  grid-template-columns: repeat(1, 1fr);
}
.header-headline-small {
  margin-top: 0;
  margin-bottom: 24px;
}
.header-headline-large {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: var(--font-size-h1);
  font-weight: bold;
  line-height: var(--line-height-heading);
}
.header-introduction p {
  margin-top: 0;
  margin-bottom: 24px;
}
.header-image img,
.header-image video {
  border-radius: 4px;
  overflow: hidden;
}
@media (max-width: 1023.99999px) {
  .header-subheadline {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .header {
    margin-top: 48px;
    margin-bottom: 48px;
  }
  .header-grid {
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
  }
  .header.is-home .header-grid {
    align-items: flex-start;
  }
  .header-text {
    grid-column: 1 / span 5;
  }
  .header.is-home .header-text {
    grid-column: 1 / span 5;
  }
  .header-image {
    grid-column: 6 / span 7;
  }
  .header-image img,
  .header-image video {
    width: 100%;
  }
  .header-headline-large {
    font-size: var(--font-size-huge);
    font-weight: bold;
    line-height: var(--line-height-heading);
  }
}
@media screen and (min-width: 1280px) {
  .header-text {
    grid-column: 1 / span 4;
  }
  .header.is-home .header-text {
    grid-column: 2 / span 4;
  }
  .header-image {
    grid-column: 6 / span 7;
  }
}

.header-packages {
  display: flex;
  flex-direction: column;
}
.header-packages > * {
  margin: 12px;
}
@media screen and (min-width: 1024px) {
  .header-packages {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
  }
  .header-packages > * {
    flex: 1 1 0px;
    max-width: 280px;
  }
}
@media screen and (min-width: 1280px) {
  .header-packages {
    transform: translateY(-10%);
  }
}
@media screen and (min-width: 1440px) {
  .header-packages {
    transform: translateY(-50%);
  }
}

.header-provider {
  display: flex;
  align-items: center;
}
.header-provider-icon {
  width: 32px;
  height: 32px;
  margin-right: 16px;
}
.header-provider-name {
  margin: 0 !important;
}

/*
module -- features
*/
.features {
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: repeat(1, 1fr);
}
.feature-icon {
  display: block;
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
}
.feature-title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: var(--font-size-h4);
  font-weight: bold;
}
.feature-text {
  font-size: var(--font-size-body);
}
@media screen and (min-width: 768px) {
  .features {
    grid-template-columns: repeat(3, 1fr);
  }
  .feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .feature-icon {
    width: 72px;
    height: 72px;
    margin-bottom: 24px;
  }
}

/*
module -- locations
*/

.locations {
  display: grid;
  grid-gap: var(--grid-gap);
}
@media screen and (max-width: 767px) {
  .locations {
    grid-template-rows: repeat(2, 190px);
    grid-auto-flow: column;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -ms-scroll-chaining: none;
    margin-left: calc(-1 * var(--space-container-h));
    margin-right: calc(-1 * var(--space-container-h));
    padding-left: var(--space-container-h);
    padding-right: var(--space-container-h);
  }
  .locations > * {
    width: 290px;
  }
  .locations::-webkit-scrollbar {
    display: none;
  }
}
@media screen and (min-width: 768px) {
  .locations {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .locations {
    grid-template-columns: repeat(3, 1fr);
  }
}
.location {
  display: block;
  position: relative;
  border-radius: 4px;
  transform: translate3d(
    0px,
    0px,
    0px
  ); /* ensure correct border radius in Safari */
  overflow: hidden;
}
.location::before {
  content: "";
  display: block;
  padding-bottom: 65%;
}
.location-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.location-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.location-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 71.35%
  );
  background-blend-mode: multiply;
  color: var(--color-white);
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.location-placeholder .location-text {
  background: var(--color-grey-05);
  color: var(--color-grey-30);
}
.location-title {
  margin: 0;
  font-size: var(--font-size-h4);
  font-weight: bold;
  line-height: var(--line-height-heading);
}
@media screen and (min-width: 768px) {
  .location-title {
    font-size: var(--font-size-h3);
  }
}

/*
module -- promotions
*/
.promotions-list {
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: repeat(1, 1fr);
}
.promotion {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 24px;
  gap: 16px;
  background: var(--color-white);
  box-shadow: var(--shadow-2);
  border-radius: 5px;
  color: inherit;
  text-decoration: inherit;
}
.promotion-badge {
  display: flex;
  justify-content: flex-end;
}
.promotion-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.promotion-text h3,
.promotion-text p {
  margin: 0;
}
.promotion-icon {
  font-size: 48px;
  margin-top: 0;
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .promotions-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .promotion {
    flex-direction: row;
    align-items: flex-start;
    padding: 55px 48px;
  }
  .promotion-badge {
    order: 1;
  }
}

/*
module -- steps
*/

.steps-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  list-style: none;
  counter-reset: li;
  padding-left: 48px;
}
.steps-list li {
  position: relative;
  counter-increment: li;
  border-left: 3px solid var(--step-color);
  padding-left: 24px;
}
.steps-list li::before {
  content: counter(li);
  color: var(--step-color);
  display: inline-block;
  margin-left: -48px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--font-size-h3);
  font-weight: bold;
  line-height: var(--line-height-heading);
}
.step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.step:nth-child(1) {
  --step-color: var(--color-step-1);
}
.step:nth-child(2) {
  --step-color: var(--color-step-2);
}
.step:nth-child(3) {
  --step-color: var(--color-step-3);
}
.step:nth-child(4) {
  --step-color: var(--color-step-4);
}
.step:nth-child(n + 5) {
  --step-color: var(--color-step-5);
}
.step-title,
.step-text p {
  margin: 0;
}
.step-title {
  font-size: var(--font-size-h4);
  font-weight: bold;
}
@media screen and (min-width: 768px) {
  .steps {
    display: grid;
    grid-gap: var(--grid-gap);
    grid-template-columns: repeat(2, 1fr);
  }
}

/* TODO: Move this to the right place. */
html.os-ios .app-badge-android {
  display: none;
}
html.os-android .app-badge-ios {
  display: none;
}

/*
module -- app
*/
.app {
  background: var(--gradient);
  color: var(--color-white);
}
.app-image {
  position: relative;
}
.app-image::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.app-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
click-gallery {
  display: block;
}
click-gallery img {
  opacity: 0;
  transition: opacity 0.3s ease;
}
click-gallery img.visible {
  opacity: 1;
}
.app-content {
  padding: 48px 24px;
}
.app-title {
  margin-top: 0;
  margin-bottom: 32px;
  font-size: var(--font-size-huge);
  font-weight: bold;
}
.app-feature {
  padding-bottom: 24px;
  margin-bottom: 24px;
}
.app-feature:not(:last-child) {
  border-bottom: 1px solid var(--color-white);
}
.app-feature-title {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: var(--font-size-h4);
  font-weight: bold;
}
.app-feature-text p {
  margin-top: 0;
  margin-bottom: 24px;
}
.app-feature-text p:last-child {
  margin-bottom: 0;
}
.app-apps > * {
  display: block;
  margin-bottom: 8px; /* TODO: Remove this once we have logic for hiding irrelevant store badges on mobile. */
}
@media screen and (min-width: 1024px) {
  .app {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .app-image {
    margin: 48px;
  }
  .app-content {
    padding: 48px;
  }
  .app-title {
    margin-bottom: 48px;
  }
  .app-features {
    display: grid;
    grid-gap: var(--grid-gap);
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 48px;
  }
  .app-feature.app-feature {
    margin: 0;
    padding: 0;
    border: none;
  }
  .app-feature-title {
    font-size: var(--font-size-h3);
  }
  .app-apps {
    display: flex;
  }
  .app-apps > * {
    margin-right: 16px;
  }
}

/*
module -- app buttons
*/
.app-buttons.align-center .module-header {
  align-items: center;
  text-align: center;
}
.app-buttons.align-center .app-apps {
  justify-content: center;
}
.app-buttons.align-center .app-apps a:first-child {
  margin-left: 16px;
}

/*
module -- pages
*/

.pages-list {
  display: grid;
  grid-gap: var(--grid-gap-large);
  grid-template-columns: repeat(1, 1fr);
}
.page-image {
  border-radius: 5px;
  overflow: hidden;
}
.page-title {
  margin-top: 0.75em;
  margin-bottom: 0.5em;
}
.page-description p {
  margin-top: 0;
  margin-bottom: 1em;
}
@media screen and (min-width: 768px) {
  .pages-list {
    grid-template-columns: repeat(12, 1fr);
  }
  .pages-list > .page:nth-child(2n + 1) {
    grid-column: 1 / span 6;
  }
  .pages-list > .page:nth-child(2n + 2) {
    grid-column: 7 / span 6;
  }
}
@media screen and (min-width: 1024px) {
  .pages-list > .page:nth-child(2n + 1) {
    grid-column: 2 / span 4;
  }
  .pages-list > .page:nth-child(2n + 2) {
    grid-column: 8 / span 4;
  }
}

/*
module -- help
*/
.help {
  padding-top: 48px;
  padding-bottom: 48px;
  background-color: var(--color-blue);
  color: var(--color-white);
}
.help-text h1,
.help-text h2,
.help-text h3 {
  margin-top: 24px;
  margin-bottom: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: bold;
}
.help-text p {
  margin-top: 0;
  margin-bottom: 24px;
}
.help-text > :first-child {
  margin-top: 0;
}
.help-text > :last-child {
  margin-bottom: 0;
}
.help a {
  color: inherit;
  text-decoration: none;
}
.help a:hover {
  text-decoration: underline;
}
@media screen and (min-width: 768px) {
  .help {
    padding-top: 144px;
    padding-bottom: 144px;
  }
  .help > .container {
    display: grid;
    grid-gap: var(--grid-gap);
    grid-template-columns: 7fr 5fr;
  }
}

/*
module -- highlights
*/

.highlights-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: var(--grid-gap-small);
}
.highlight {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: var(--font-size-micro);
  background-color: var(--color-grey-05);
  border-radius: 5px;
}
.highlight-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(2 * var(--line-height-body) * var(--font-size-micro));
}
.highlight-text > p {
  margin-top: 8px;
  margin-bottom: 0;
}
@media screen and (min-width: 768px) {
  .highlights-list {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .highlights-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/*
module -- notices
*/

.notice {
  background: var(--gradient-soft-1);
  border-radius: 5px;
  padding: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 24px;
}
.notice-icon {
  width: 32px;
  height: 32px;
  flex-grow: 0;
  flex-shrink: 0;
  margin-right: 16px;
}
@media screen and (min-width: 768px) {
  .notice {
    padding: 24px;
  }
  .notice-icon {
    margin-right: 24px;
  }
}

/*
module -- columns
*/

.columns-grid {
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .columns-grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .columns-column {
    grid-column-end: span var(--span);
  }
}

/*
module -- external embed
*/
external-embed {
  display: block;
  position: relative;
  background: var(--gradient-soft-3);
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
external-embed.map {
  aspect-ratio: 100 / 176;
}
external-embed > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 768px) {
  external-embed.map {
    aspect-ratio: 100 / 45;
  }
}

/*
embed placeholder
*/
.external-embed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.external-embed-placeholder-image {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.external-embed-placeholder-floater {
  background-color: var(--color-white);
  box-shadow: var(--shadow-2);
  border-radius: 5px;
  padding: 24px;
  margin: 24px;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.external-embed-placeholder-title {
  font-size: var(--font-size-h4);
  font-weight: bold;
  line-height: var(--line-height-heading);
  margin-top: 0;
  margin-bottom: 16px;
}
.external-embed-placeholder-text {
  font-size: var(--font-size-small);
  margin-bottom: 24px;
}
.external-embed-placeholder-text > :first-child {
  margin-top: 0;
}
.external-embed-placeholder-text > :last {
  margin-bottom: 0;
}
.external-embed-placeholder-text a {
  text-decoration: none;
  color: var(--color-blue-light);
}
.external-embed-placeholder-text a:hover {
  text-decoration: underline;
}
@media screen and (min-width: 768px) {
  .external-embed-placeholder-floater {
    padding: 48px;
    margin-left: 48px;
    margin-right: 48px;
  }
  .external-embed-placeholder-title {
    font-size: var(--font-size-h3);
  }
}

/*
module -- gallery
*/

.gallery {
  --gallery-height: 300px;
  display: flex;
  height: var(--gallery-height);
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overscroll-behavior-x-x: contain;
  -ms-scroll-chaining: none;
  margin-left: calc(-1 * var(--space-container-h));
  margin-right: calc(-1 * var(--space-container-h));
}
@media screen and (min-width: 768px) {
  .gallery {
    --gallery-height: 500px;
  }
}
.gallery::-webkit-scrollbar {
  display: none;
}
.gallery > figure {
  position: relative;
  flex-shrink: 0;
  -webkit-aspect-ratio: var(--ratio);
  aspect-ratio: var(--ratio);
  width: calc(var(--gallery-height) * var(--ratio));
  margin: 0 var(--grid-gap-small) 0 0;
  border-radius: 4px;
  overflow: hidden;
}
.gallery > figure:last-child {
  margin-right: 0;
}
.gallery::before,
.gallery::after {
  content: "";
  display: block;
  flex: 0 0 var(--space-container-h);
}
.gallery img {
  height: 100%;
  width: auto;
}
.gallery figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: var(--color-white);
  padding: 48px 24px 24px 24px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.4) 71.35%
  );
  background-blend-mode: multiply;
}
.gallery figcaption p {
  margin: 0;
}
.gallery figcaption p.caption {
  font-weight: bold;
}
.gallery figcaption p.subcaption {
  margin-top: 8px;
}
image-gallery {
  display: block;
  position: relative;
}
.gallery-button {
  width: 80px;
  height: 80px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 40px;
  background-color: var(--color-white);
  transition: opacity 0.3 ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.gallery-button:hover {
  opacity: 0.5;
}
.gallery-button-left {
  left: 0;
}
.gallery-button-right {
  right: 0;
}
@media screen and (min-width: 768px) {
  .gallery-button {
    display: inline-flex;
  }
}

/*
module -- image
*/

.image img {
  width: 100%;
}

/*
module -- video
*/

.video img,
.video video {
  width: 100%;
}

/*
module -- testimonials
*/

.testimonials {
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: 1fr;
}
@media screen and (min-width: 768px) {
  .testimonials {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 1024px) {
  .testimonials {
    grid-template-columns: repeat(3, 1fr);
  }
}
.testimonial {
  padding: 24px;
  border-radius: 5px;
  border: 1px solid var(--color-grey-30);
}
.testimonial-icon {
  margin-bottom: 24px;
}
.testimonial-quote {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-heading);
}
.testimonial-quote,
.testimonial-person {
  margin-bottom: 48px;
}
.testimonial-quote p,
.testimonial-person p {
  margin-top: 1em;
  margin-bottom: 0;
}
.testimonial-quote p:first-child,
.testimonial-person p:first-child {
  margin-top: 0;
}

/*
module -- prices
*/

.package {
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translate3d(
    0px,
    0px,
    0px
  ); /* ensure correct border radius in Safari */
  overflow: hidden;
}
.package-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 12px;
}
.package-title {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: var(--font-size-h4);
  font-weight: bold;
}
.package-price {
  margin-top: 0;
  margin-bottom: 0;
  font-size: var(--font-size-h4);
}

.prices-list {
  display: grid;
  grid-gap: var(--grid-gap-large);
  grid-template-columns: 1fr;
  align-items: flex-start;
}
.prices-title {
  font-size: var(--font-size-h3);
  font-weight: bold;
  line-height: var(--line-height-heading);
}
.prices-packages {
  display: grid;
  grid-gap: 24px;
  grid-template-columns: 1fr;
  padding: 24px;
}
.prices-image img {
  aspect-ratio: 1.33333;
  object-fit: cover;
}
@media screen and (min-width: 1024px) {
  .prices-list {
    grid-gap: var(--grid-gap);
    grid-template-columns: repeat(12, 1fr);
  }
  .prices:nth-child(2n + 1) {
    grid-column: 3 / span 5;
  }
  .prices:nth-child(2n + 2) {
    grid-column: 8 / span 5;
  }
  .prices {
    display: grid;
    grid-gap: var(--grid-gap);
    grid-template-columns: repeat(5, 1fr);
  }
  .prices-image {
    grid-column: 1 / span 4;
  }
  .prices-text {
    grid-column: 1 / span 4;
  }
}