/*
 * 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.
 */


/* Arial sized like Roboto, shown until fonts.css loads, so text doesn't reflow when Roboto arrives */
@font-face {
  font-family: roboto-fallback;
  font-weight: 400;
  size-adjust: 99.529%;
  src: local('Arial'), local('ArialMT');
}

@font-face {
  font-family: roboto-fallback;
  font-weight: 700 900;
  size-adjust: 99.529%;
  src: local('Arial Bold'), local('Arial-BoldMT');
}

:root {
  /* Layout ------------- */
  --layout-gutter: 32px;

  /* Col widths per breakpoint (without paddings) */
  --layout-col-sm: 13px;
  --layout-col-md: 28px;
  --layout-col-lg: 48px;
  --layout-col-xl: 70px;
  --layout-col-xl2: 78px;
  --layout-col-xxl: 84px;

  /* Page content width */
  --layout-width-sm: 508px;
  --layout-width-md: 688px;
  --layout-width-lg: 928px;
  --layout-width-xl: 1192px;
  --layout-width-xl2: 1288px;
  --layout-width-xxl: 1360px;

  /* Colors -------------
  * Green Colors */
  --color-green: #008941;
  --color-green-alt: #00783b;
  --color-green-inverse: #24aa63;
  --color-green-pale: #d1edde;
  --color-green-faint: #e6f4ed;
  --color-green-off-white: #f2faf6;
  --color-green-bright: #9ae437;

  /* Blue Colors */
  --color-blue: #2276d9;
  --color-blue-alt: #1d67bf;
  --color-blue-inverse: #4d99f0;
  --color-blue-mid: #93c1f5;
  --color-blue-light: #b6d5f7;
  --color-blue-pale: #d9e8fa;
  --color-blue-faint: #ebf4ff;
  --color-blue-off-white: #f2f8ff;

  /* Red and Yellow Colors */
  --color-red: #db3559;
  --color-red-hover: #bd3352;
  --color-yellow: #ffb600;
  --color-yellow-pale: #ffe29e;
  --color-yellow-faint: #fff2d4;
  --color-yellow-off-white: #fff9ed;

  /* Gray Colors */
  --color-black: #1c222e;
  --color-gray-1: #2b323f;
  --color-gray-2: #3a4252;
  --color-gray-3: #697284;
  --color-gray-4: #9aa3b5;
  --color-gray-5: #ced4e0;
  --color-gray-6: #e4e8f0;
  --color-gray-7: #edf0f7;
  --color-gray-8: #f7f9fc;
  --color-white: #fff;

  /* Other Colors */
  --color-black-1: #000;
  --color-black-tp: #191919;

  /* Border shadow colors map ------------- */
  --shadow-size: inset 0 0 0 1px;
  --border-shadows-gray2: var(--shadow-size) var(--color-gray-2);
  --border-shadows-gray5: var(--shadow-size) var(--color-gray-5);
  --border-shadows-blue-pale: var(--shadow-size) var(--color-blue-pale);
  --border-shadows-light-blue: var(--shadow-size) var(--color-blue-light);

  /* Elevation shadows map ------------- */
  --elevation-shadow-clr: rgb(30 34 42 / 8%);
  --elevation-shadow-s: 0 16px 32px 0 var(--elevation-shadow-clr);
  --elevation-shadow-m: 0 24px 40px 0 var(--elevation-shadow-clr);
  --elevation-shadow-l: 0 24px 48px 0 var(--elevation-shadow-clr);
  --elevation-shadow-xl: 0 40px 56px 0 var(--elevation-shadow-clr);

  /* Gradients ------------- */
  --gradient-green: linear-gradient(135deg, #08c761 22%, #008941 78%);
  --gradient-blue: linear-gradient(135deg, #28afe0 22%, #2276d9 78%);
  --gradient-yellow: linear-gradient(135deg, #ffb600 22%, #e58609 78%);
  --gradient-gray: linear-gradient(135deg, #e5e7eb 22%, #d1d5db 78%);

  /* Filters ------------- */
  --filter-base: brightness(0) saturate(1);
  --filter-black: var(--filter-base) invert(11%) sepia(7%) saturate(2377%) hue-rotate(182deg) brightness(97%) contrast(94%);
  --filter-white: var(--filter-base) invert(99%) sepia(83%) saturate(0%) hue-rotate(148deg) brightness(112%) contrast(100%);

  /* Green Filters */
  --filter-green: var(--filter-base) invert(26%) sepia(84%) saturate(3231%) hue-rotate(143deg) brightness(90%) contrast(101%);
  --filter-green-alt: var(--filter-base) invert(13%) sepia(83%) saturate(6627%) hue-rotate(160deg) brightness(95%) contrast(102%);
  --filter-green-inverse: var(--filter-base) invert(48%) sepia(99%) saturate(334%) hue-rotate(96deg) brightness(92%) contrast(93%);
  --filter-green-pale: var(--filter-base) invert(94%) sepia(18%) saturate(230%) hue-rotate(84deg) brightness(99%) contrast(87%);
  --filter-green-faint: var(--filter-base) invert(93%) sepia(29%) saturate(65%) hue-rotate(85deg) brightness(99%) contrast(94%);
  --filter-green-off-white: var(--filter-base) invert(97%) sepia(3%) saturate(336%) hue-rotate(94deg) brightness(102%) contrast(96%);

  /* Blue Filters */
  --filter-blue: var(--filter-base) invert(34%) sepia(77%) saturate(1559%) hue-rotate(195deg) brightness(91%) contrast(86%);
  --filter-blue-alt: var(--filter-base) invert(27%) sepia(30%) saturate(5849%) hue-rotate(203deg) brightness(90%) contrast(78%);
  --filter-blue-inverse: var(--filter-base) invert(57%) sepia(59%) saturate(2536%) hue-rotate(189deg) brightness(98%) contrast(92%);
  --filter-blue-mid: var(--filter-base) invert(85%) sepia(18%) saturate(4571%) hue-rotate(181deg) brightness(102%) contrast(92%);
  --filter-blue-light: var(--filter-base) invert(83%) sepia(6%) saturate(1656%) hue-rotate(181deg) brightness(101%) contrast(94%);
  --filter-blue-pale: var(--filter-base) invert(88%) sepia(2%) saturate(3678%) hue-rotate(189deg) brightness(105%) contrast(96%);
  --filter-blue-faint: var(--filter-base) invert(100%) sepia(50%) saturate(2330%) hue-rotate(178deg) brightness(103%) contrast(105%);
  --filter-blue-off-white: var(--filter-base) invert(100%) sepia(22%) saturate(6581%) hue-rotate(179deg) brightness(108%) contrast(104%);

  /* Red and Yellow Filters */
  --filter-red: var(--filter-base) invert(24%) sepia(84%) saturate(2342%) hue-rotate(329deg) brightness(93%) contrast(84%);
  --filter-yellow: var(--filter-base) invert(82%) sepia(27%) saturate(7134%) hue-rotate(1deg) brightness(105%) contrast(104%);
  --filter-yellow-pale: var(--filter-base) invert(79%) sepia(47%) saturate(273%) hue-rotate(355deg) brightness(103%) contrast(104%);
  --filter-yellow-faint: var(--filter-base) invert(100%) sepia(39%) saturate(965%) hue-rotate(318deg) brightness(97%) contrast(106%);
  --filter-yellow-off-white: var(--filter-base) invert(91%) sepia(3%) saturate(1806%) hue-rotate(324deg) brightness(107%) contrast(107%);

  /* Gray Colors */
  --filter-gray1: var(--filter-base) invert(16%) sepia(26%) saturate(516%) hue-rotate(180deg) brightness(98%) contrast(91%);
  --filter-gray2: var(--filter-base) invert(21%) sepia(10%) saturate(1419%) hue-rotate(182deg) brightness(94%) contrast(82%);
  --filter-gray3: var(--filter-base) invert(47%) sepia(18%) saturate(371%) hue-rotate(182deg) brightness(90%) contrast(93%);
  --filter-gray4: var(--filter-base) invert(72%) sepia(4%) saturate(1136%) hue-rotate(182deg) brightness(90%) contrast(89%);
  --filter-gray5: var(--filter-base) invert(91%) sepia(15%) saturate(162%) hue-rotate(183deg) brightness(93%) contrast(89%);
  --filter-gray6: var(--filter-base) invert(90%) sepia(2%) saturate(1341%) hue-rotate(193deg) brightness(107%) contrast(88%);
  --filter-gray7: var(--filter-base) invert(90%) sepia(3%) saturate(386%) hue-rotate(185deg) brightness(107%) contrast(94%);
  --filter-gray8: var(--filter-base) invert(100%) sepia(13%) saturate(1290%) hue-rotate(176deg) brightness(100%) contrast(98%);



  /* Fonts ------------- */
  --font-family: 'Roboto', roboto-fallback, 'Arial', 'Helvetica', sans-serif;
  --text-primary-dark: var(--color-black);
  --text-primary-light: var(--color-white);
  --text-secondary-light: var(--color-gray-4);

  /* links: Figma "Text link styles" (AVG Specification 154:23207) uses Alt Blue for the default link */
  --link-color: var(--color-blue-alt);
  --focus-ring-color: var(--color-gray-3);

  /* Heading Sizes */
  --tp-h0-fs: 42px;
  --tp-h0-lh: 54px;
  --tp-h1-fs: 42px;
  --tp-h1-lh: 54px;
  --tp-h2-fs: 34px;
  --tp-h2-lh: 44px;
  --tp-h3-fs: 26px;
  --tp-h3-lh: 34px;
  --tp-h4-fs: 21px;
  --tp-h4-lh: 27px;
  --tp-h5-fs: 18px;
  --tp-h5-lh: 24px;
  --tp-h6-fs: 16px;
  --tp-h6-lh: 20px;
  --tp-h7-fs: 14px;
  --tp-h7-lh: 18px;


  /* Body Sizes */
  --tp-body1-fs: 18px;
  --tp-body1-lh: 24px;
  --tp-body2-fs: 16px;
  --tp-body2-lh: 22px;
  --tp-body3-fs: 14px;
  --tp-body3-lh: 20px;
  --tp-body4-fs: 12px;
  --tp-body4-lh: 18px;
  --tp-body5-fs: 11px;
  --tp-body5-lh: 16px;
  --tp-tagline-l-fs: 16px;
  --tp-tagline-l-lh: 20px;
  --tp-tagline-l-ls: 1.2px;
  --tp-tagline-m-fs: 14px;
  --tp-tagline-m-lh: 16px;
  --tp-tagline-m-ls: 1px;
  --tp-tagline-s-fs: 12px;
  --tp-tagline-s-lh: 14px;
  --tp-tagline-s-ls: 0.8px;
  --tp-monospace-fs: 16px;
  --tp-monospace-lh: 22px;
  --tp-button-l-fs: 16px;
  --tp-button-l-lh: 20px;
  --tp-button-l-ls: 0.8px;
  --tp-button-m-fs: 14px;
  --tp-button-m-lh: 16px;
  --tp-button-m-ls: 0.6px;
  --tp-button-s-fs: 12px;
  --tp-button-s-lh: 14px;
  --tp-button-s-ls: 0.4px;

  @media (width >= 992px) {
    /* Body Sizes */
    --tp-body1-fs: 20px;
    --tp-body1-lh: 26px;
    --tp-body2-fs: 18px;
    --tp-body2-lh: 24px;
    --tp-body3-fs: 16px;
    --tp-body3-lh: 22px;
    --tp-body4-fs: 14px;
    --tp-body4-lh: 20px;
    --tp-body5-fs: 12px;
    --tp-body5-lh: 18px;
    --tp-tagline-l-fs: 18px;
    --tp-tagline-l-lh: 22px;
    --tp-tagline-l-ls: 1.6px;
    --tp-tagline-m-fs: 16px;
    --tp-tagline-m-lh: 20px;
    --tp-tagline-m-ls: 1.4px;
    --tp-tagline-s-fs: 14px;
    --tp-tagline-s-lh: 16px;
    --tp-tagline-s-ls: 1.2px;
    --tp-monospace-fs: 16px;
    --tp-monospace-lh: 26px;
    --tp-button-l-fs: 20px;
    --tp-button-l-lh: 24px;
    --tp-button-l-ls: 1px;
    --tp-button-m-fs: 16px;
    --tp-button-m-lh: 20px;
    --tp-button-m-ls: 0.8px;
    --tp-button-s-fs: 14px;
    --tp-button-s-lh: 16px;
    --tp-button-s-ls: 0.6px;

    /* Heading Sizes */
    --tp-h0-fs: 72px;
    --tp-h0-lh: 92px;
    --tp-h1-fs: 56px;
    --tp-h1-lh: 72px;
    --tp-h2-fs: 46px;
    --tp-h2-lh: 60px;
    --tp-h3-fs: 34px;
    --tp-h3-lh: 44px;
    --tp-h4-fs: 28px;
    --tp-h4-lh: 36px;
    --tp-h5-fs: 24px;
    --tp-h5-lh: 32px;
    --tp-h6-fs: 20px;
    --tp-h6-lh: 26px;
    --tp-h7-fs: 16px;
    --tp-h7-lh: 22px;
  }

  /* LAYOUT DEFINITIONS */
  --layout-width: 100%;
  --layout-col: 100%;
  
  @media (width >= 576px) and (width < 768px) {
    --layout-width: var(--layout-width-sm);
    --layout-col: var(--layout-col-sm);
  }

  @media (width >= 768px) and (width < 992px) {
    --layout-width: var(--layout-width-md);
    --layout-col: var(--layout-col-md);
  }

  @media (width >= 992px) and (width < 1280px) {
    --layout-width: var(--layout-width-lg);
    --layout-col: var(--layout-col-lg);
  }

  @media (width >= 1280px) and (width < 1366px) {
    --layout-width: var(--layout-width-xl);
    --layout-col: var(--layout-col-xl);
  }

  @media (width >= 1366px) and (width < 1600px) {
    --layout-width: var(--layout-width-xl2);
    --layout-col: var(--layout-col-xl2);
  }
  
  @media (width >= 1600px) {
    --layout-width: var(--layout-width-xxl);
    --layout-col: var(--layout-col-xxl);
  }
  
  /* Column widths */
  @media (width >= 576px) {
    --layout-col-2: calc((var(--layout-col) * 2) + var(--layout-gutter));
    --layout-col-3: calc((var(--layout-col) * 3) + (var(--layout-gutter) * 2));
    --layout-col-4: calc((var(--layout-col) * 4) + (var(--layout-gutter) * 3));
    --layout-col-5: calc((var(--layout-col) * 5) + (var(--layout-gutter) * 4));
    --layout-col-6: calc((var(--layout-col) * 6) + (var(--layout-gutter) * 5));
    --layout-col-7: calc((var(--layout-col) * 7) + (var(--layout-gutter) * 6));
    --layout-col-8: calc((var(--layout-col) * 8) + (var(--layout-gutter) * 7));
    --layout-col-9: calc((var(--layout-col) * 9) + (var(--layout-gutter) * 8));
    --layout-col-10: calc((var(--layout-col) * 10) + (var(--layout-gutter) * 9));
    --layout-col-11: calc((var(--layout-col) * 11) + (var(--layout-gutter) * 10));
  }
}

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

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

button {
  background-color: transparent;
  color: inherit;
  border-width: 0;
  padding: 0;
  cursor: pointer;
}

figure {
  margin: 0;
}

input::-moz-focus-inner {
  border: 0;
  padding: 0;
  margin: 0;
}

:where(:focus-visible) {
  outline: 2px dashed var(--focus-ring-color);
  outline-offset: 8px;
}

ul,
ol,
dd {
  margin: 0;
  margin-inline-start: 20px;
  padding: 0;

  li:not(:last-child) {
    margin-bottom: 8px;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

p {
  margin: 0;
}

cite {
  font-style: normal;
}

fieldset {
  border-width: 0;
  padding: 0;
  margin: 0;
}

picture {
  display: inline-flex;
}

picture source {
  display: contents;
}

/* END OF CUSTOM RESETS */



html {
  font-size: 16px;
  text-size-adjust: 100%;
  scroll-behavior: smooth;

  /* Specific font for Korean language */

  /* .loc-ko-kr {
    --font-family: 'Noto Sans KR', sans-serif;
  } */
}

body {
  display: none;
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--tp-body3-fs);
  line-height: var(--tp-body3-lh);
  font-weight: 400;
  color: var(--text-primary-dark); /* Black */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /*
  Since 100vw includes vertical-scrolling scrollbar width,
  setting this overflow-x: hidden; on the body to prevent left/right scrollbar from appearing,
  for those few pixels of extra width that we don't need
  */
  overflow-x: hidden;

  /* Push the footer to the bottom if the content is short */
  &:has(footer) {
    flex-direction: column;
    min-height:100dvh;

    footer {
      margin-block-start: auto;
    }
  }
}

body.appear {
  display: flex;
}

/* Full-height section handling */
body:has(> main > .section.full-height) > main {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

/* the header loads after the content: keep its height (header.css nav) so the page doesn't jump down */
body > header {
  min-height: 100px;

  @media (width < 992px) {
    min-height: 72px;
  }
}

/* HEADER AND FOOTER ARE HIDDEN UNTIL LOADED */
header .header,
footer .footer {
  visibility: hidden;
  
  &[data-block-status="loaded"] {
    visibility: visible;
  }
}


.h0,
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.h7 {
  font-weight: 900;

  /* a word too long for the line (e.g. German "Datenschutzhinweise") breaks instead of overflowing small screens */
  overflow-wrap: break-word;

  /* other languages also hyphenate those words, in the page language (lang, set per country in the metadata sheet) */
  &:not(:lang(en)) {
    hyphens: auto;
  }
}

.h0 {
  font-size: var(--tp-h0-fs);
  line-height: var(--tp-h0-lh);
}

h1,
.h1 {
  font-size: var(--tp-h1-fs);
  line-height: var(--tp-h1-lh);
}

h2,
.h2 {
  font-size: var(--tp-h2-fs);
  line-height: var(--tp-h2-lh);
}

h3,
.h3 {
  font-size: var(--tp-h3-fs);
  line-height: var(--tp-h3-lh);
}

h4,
.h4 {
  font-size: var(--tp-h4-fs);
  line-height: var(--tp-h4-lh);
}

h5,
.h5 {
  font-size: var(--tp-h5-fs);
  line-height: var(--tp-h5-lh);
}

h6,
.h6 {
  font-size: var(--tp-h6-fs);
  line-height: var(--tp-h6-lh);
}

.h7 {
  font-size: var(--tp-h7-fs);
  line-height: var(--tp-h7-lh);
}

.body1 {
  font-size: var(--tp-body1-fs);
  line-height: var(--tp-body1-lh);
}

.body2 {
  font-size: var(--tp-body2-fs);
  line-height: var(--tp-body2-lh);
}

.body3 {
  font-size: var(--tp-body3-fs);
  line-height: var(--tp-body3-lh);
}

.body4 {
  font-size: var(--tp-body4-fs);
  line-height: var(--tp-body4-lh);
}

.body5 {
  font-size: var(--tp-body5-fs);
  line-height: var(--tp-body5-lh);
}

.tagline-l {
  font-size: var(--tp-tagline-l-fs);
  line-height: var(--tp-tagline-l-lh);
  letter-spacing: var(--tp-tagline-l-ls);
  font-weight: 700;
  color: var(--tagline-color, var(--text-primary));
}

.tagline-m {
  font-size: var(--tp-tagline-m-fs);
  line-height: var(--tp-tagline-m-lh);
  letter-spacing: var(--tp-tagline-m-ls);
  font-weight: 700;
  color: var(--tagline-color, var(--text-primary));
}

.tagline-s {
  font-size: var(--tp-tagline-s-fs);
  line-height: var(--tp-tagline-s-lh);
  letter-spacing: var(--tp-tagline-s-ls);
  font-weight: 700;
  color: var(--tagline-color, var(--text-primary));
}

.monospace {
  font-size: var(--tp-monospace-fs);
  line-height: var(--tp-monospace-lh);
}

code,
pre {
  font-family: ui-monospace, monospace;
  font-size: 1em;
}

.h0 + .h0, .h0 p + p { margin-block-start: var(--tp-h0-lh); }
.h1 + .h1, .h1 p + p { margin-block-start: var(--tp-h1-lh); }
.h2 + .h2, .h2 p + p { margin-block-start: var(--tp-h2-lh); }
.h3 + .h3, .h3 p + p { margin-block-start: var(--tp-h3-lh); }
.h4 + .h4, .h4 p + p { margin-block-start: var(--tp-h4-lh); }
.h5 + .h5, .h5 p + p { margin-block-start: var(--tp-h5-lh); }
.h6 + .h6, .h6 p + p { margin-block-start: var(--tp-h6-lh); }
.h7 + .h7, .h7 p + p { margin-block-start: var(--tp-h7-lh); }

.body1 + .body1, .body1 p + p { margin-block-start: var(--tp-body1-lh); }
.body2 + .body2, .body2 p + p { margin-block-start: var(--tp-body2-lh); }
.body3 + .body3, .body3 p + p { margin-block-start: var(--tp-body3-lh); }
.body4 + .body4, .body4 p + p { margin-block-start: var(--tp-body4-lh); }
.body5 + .body5, .body5 p + p { margin-block-start: var(--tp-body5-lh); }

.monospace + .monospace, .monospace p + p { margin-block-start: var(--tp-monospace-lh); }



/* links */
p,
li {
  a:any-link {
    color: var(--link-color);
    text-decoration: underline;
    overflow-wrap: break-word;
  }

  a:hover {
    text-decoration: none;
  }

  em > a:any-link,
  em > strong > a:any-link {
    text-decoration-style: dashed;
    text-decoration-line: underline;
    font-style: normal;
    color: var(--text-primary-dark);

    &:hover {
      text-decoration-line: none;
    }
  }
}

/* Franklin default-content button styles */

/* p.button-wrapper,
p.button-container {
  margin: 12px 0;

  a.button:any-link,
  button.button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    margin: 0;
    border: 2px solid transparent;
    border-radius: 2.4em;
    padding: 0.5em 1.2em;
    font: inherit;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  a.button[aria-disabled='true'],
  button.button:disabled {
    cursor: not-allowed;
    pointer-events: none;
  }

  a.button.primary,
  button.button.primary {
    border-color: var(--text-primary-dark);
    background-color: var(--text-primary-dark);
    color: var(--color-white);
  }

  a.button.primary:hover,
  a.button.primary:focus-visible,
  button.button.primary:hover,
  button.button.primary:focus-visible {
    border-color: var(--color-gray-1);
    background-color: var(--color-gray-1);
    color: var(--color-white);
  }

  a.button.secondary,
  button.button.secondary {
    border-color: var(--text-primary-dark);
    background-color: transparent;
    color: var(--text-primary-dark);
  }

  a.button.secondary:hover,
  a.button.secondary:focus-visible,
  button.button.secondary:hover,
  button.button.secondary:focus-visible {
    border-color: var(--color-gray-1);
    background-color: var(--color-gray-7);
    color: var(--color-gray-1);
  }

  a.button.accent,
  button.button.accent {
    border-color: var(--color-blue);
    background-color: var(--color-blue);
    color: var(--color-white);
  }

  a.button.accent:hover,
  a.button.accent:focus-visible,
  button.button.accent:hover,
  button.button.accent:focus-visible {
    border-color: var(--color-blue-alt);
    background-color: var(--color-blue-alt);
  }
} */

/* Sections */

/* All direct sections in the root */
main > .section {
  --section-content-width: var(--layout-width);
  --section-background-color: transparent;
  --focus-ring-color: var(--color-gray-3);
  --section-space-top: var(--section-padding-top, 0);
  --section-space-bottom: var(--section-padding-bottom, 0);
  --section-space-left: var(--section-padding-left, 0);
  --section-space-right: var(--section-padding-right, 0);

  @media (width < 992px) {
    --section-space-top: var(--section-padding-top-mobile, var(--section-padding-top, 0));
    --section-space-bottom: var(--section-padding-bottom-mobile, var(--section-padding-bottom, 0));
    --section-space-left: var(--section-padding-left-mobile, var(--section-padding-left, 0));
    --section-space-right: var(--section-padding-right-mobile, var(--section-padding-right, 0));
  }

  @media (width < 576px) {
    padding-inline: 20px;
  }

  /* All direct children in sections */
  & > div {
    width: var(--section-content-width);
    margin: auto;
  }

  &.section-padding-left > div { padding-left: var(--section-space-left); }
  &.section-padding-right > div { padding-right: var(--section-space-right); }

  @media (width < 992px) {
    &.section-padding-left-mobile > div { padding-left: var(--section-space-left); }
    &.section-padding-right-mobile > div { padding-right: var(--section-space-right); }
  }

  &.col-10 {
    --section-content-width: var(--layout-col-10, var(--layout-width));

    @media ((width >= 992px) and (width < 1279px)) {
      --section-content-width: var(--layout-width);
    }
  }

  &.col-8 {
    --section-content-width: var(--layout-col-8, var(--layout-width));

    @media ((width >= 576px) and (width < 1279px)) {
      --section-content-width: var(--layout-col-10);
    }
  }

  &.center { text-align: center; }

  /* Color classes (add more as needed later) */
  &.white { --section-background-color: var(--color-white); }
  &.gray-8 { --section-background-color: var(--color-gray-8); }
  &.gray-7 { --section-background-color: var(--color-gray-7); }
  &.blue-off-white { --section-background-color: var(--color-blue-off-white); }
  &.blue-faint { --section-background-color: var(--color-blue-faint); }
  &.green-off-white { --section-background-color: var(--color-green-off-white); }
  &.black { --section-background-color: var(--color-black); }
  &.gray-1 { --section-background-color: var(--color-gray-1); }
  &.gray-2 { --section-background-color: var(--color-gray-2); }

  &:is(.black, .gray-1, .gray-2) {
    --focus-ring-color: var(--color-gray-5);
  }

  /* Second color of the lower half; only works together with a color class above */
  &.half-white { --section-half-color: var(--color-white); }
  &.half-gray-8 { --section-half-color: var(--color-gray-8); }
  &.half-gray-7 { --section-half-color: var(--color-gray-7); }
  &.half-blue-off-white { --section-half-color: var(--color-blue-off-white); }
  &.half-blue-faint { --section-half-color: var(--color-blue-faint); }
  &.half-green-off-white { --section-half-color: var(--color-green-off-white); }
  &.half-black { --section-half-color: var(--color-black); }
  &.half-gray-1 { --section-half-color: var(--color-gray-1); }
  &.half-gray-2 { --section-half-color: var(--color-gray-2); }

  &:is(.white, .gray-8, .gray-7, .blue-off-white, .blue-faint, .green-off-white, .black, .gray-1, .gray-2) {
    background: linear-gradient(
      var(--section-background-color) 50%,
      var(--section-half-color, var(--section-background-color)) 50%
    );
  }

  /* Boxed colors only apply together with .boxed */
  &.boxed {
    &.boxed-white {
      --section-box-color: var(--color-white);
      --section-box-shadow: inset 0 0 0 1px var(--color-gray-5), var(--elevation-shadow-xl);
    }

    &.boxed-gray-8 {
      --section-box-color: var(--color-gray-8);
      --section-box-shadow: inset 0 0 0 1px var(--color-gray-5), var(--elevation-shadow-xl);
    }

    &.boxed-gray-7 {
      --section-box-color: var(--color-gray-7);
      --section-box-shadow: inset 0 0 0 1px var(--color-gray-5), var(--elevation-shadow-xl);
    }

    &.boxed-blue-off-white {
      --section-box-color: var(--color-blue-off-white);
      --section-box-shadow: inset 0 0 0 1px var(--color-blue-pale), var(--elevation-shadow-xl);
    }

    &.boxed-green-off-white {
      --section-box-color: var(--color-green-off-white);
      --section-box-shadow: inset 0 0 0 1px var(--color-green-pale), var(--elevation-shadow-xl);
    }

    &.boxed-blue-faint { --section-box-color: var(--color-blue-faint); }
    &.boxed-black { --section-box-color: var(--color-black); }
    &.boxed-gray-1 { --section-box-color: var(--color-gray-1); }
    &.boxed-gray-2 { --section-box-color: var(--color-gray-2); }

    &:is(.boxed-white, .boxed-gray-8, .boxed-gray-7, .boxed-blue-off-white, .boxed-blue-faint, .boxed-green-off-white) {
      --focus-ring-color: var(--color-gray-3);
    }

    &:is(.boxed-black, .boxed-gray-1, .boxed-gray-2) {
      --focus-ring-color: var(--color-gray-5);
    }
  }

  &:is(.boxed, :has(> picture.section-background)) {
    position: relative;
    isolation: isolate;
  }

  /* z-index lets the elevation shadow overlap the following section */
  &.boxed:is(.boxed-white, .boxed-gray-8, .boxed-gray-7, .boxed-blue-off-white, .boxed-blue-faint, .boxed-green-off-white, .boxed-black, .boxed-gray-1, .boxed-gray-2) {
    z-index: 1;

    &::before,
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 50%;
      width: var(--section-content-width);
      height: 100%;
      transform: translateX(-50%);
      border-radius: 10px;
      pointer-events: none;
    }

    &::before {
      z-index: -2;
      background-color: var(--section-box-color);
    }

    &::after {
      z-index: 1;
      box-shadow: var(--section-box-shadow, none);
    }
  }

  & > div:first-of-type { padding-top: var(--section-space-top); }
  & > div:last-of-type { padding-bottom: var(--section-space-bottom); }

  /* Background image: whole section, or the inner content width when boxed */
  & > picture.section-background {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;

    & > img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
  }

  &.boxed > picture.section-background {
    left: 50%;
    width: var(--section-content-width);
    transform: translateX(-50%);
    border-radius: 10px;
    overflow: clip;
  }

  @media (width < 576px) {
    /* Below 576px the box spans the viewport, unless .boxed-mobile keeps the box look */
    &.boxed:not(.boxed-mobile) {
      & > div {
        width: auto;
        margin-inline: -20px;
      }

      & > picture.section-background,
      &::before,
      &::after {
        width: 100%;
        border-radius: 0;
      }

      &::after { box-shadow: none; }
    }

    /* The 20px side gutter of the section is part of the absolutely positioned area */
    &.boxed.boxed-mobile > picture.section-background,
    &.boxed.boxed-mobile::before,
    &.boxed.boxed-mobile::after {
      max-width: calc(100% - 40px);
    }
  }

  &.full-height {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: start;
    box-sizing: border-box;
    
    & > div {
      margin-block: 0;
    }
  }
}

/* Inverse section font */
.section.inverse {
  color: var(--text-primary-light);

  p,
  li {
    em > a:any-link,
    em > strong > a:any-link {
      color: var(--text-primary-light);
    }
  }
}

/* Legal template (page metadata "Template: legal"): page content is 10 columns wide on desktop - it is not the same as .col-10 class! */
@media (width >= 1279px) {
  body.legal main > .section:not(.hero-container) {
    --section-content-width: var(--layout-col-10);
  }
}

/* Content type of section (Legal pages) */
.section.content {
  display: flex;
  flex-direction: column;
  gap: 32px;

  @media (width >= 992px) {
    gap: 48px;
  }
}


/* Icon Picker */
.icon-img {
  display: inline-block;
  flex: 0 0 auto;
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: var(--icon-set-url);
  background-repeat: no-repeat;
  background-position-x: var(--icon-pos-x, 0);
}

.icon-img-arrow-right { --icon-pos-x: calc(0px * -1); }
.icon-img-arrow-left { --icon-pos-x: calc(48px * -1); }
.icon-img-arrow-up { --icon-pos-x: calc(96px * -1); }
.icon-img-arrow-down { --icon-pos-x: calc(144px * -1); }
.icon-img-download { --icon-pos-x: calc(192px * -1); }
.icon-img-next { --icon-pos-x: calc(240px * -1); }
.icon-img-next-s { --icon-pos-x: calc(288px * -1); }
.icon-img-bullet-arrow { --icon-pos-x: calc(336px * -1); }
.icon-img-back { --icon-pos-x: calc(384px * -1); }
.icon-img-back-s { --icon-pos-x: calc(432px * -1); }
.icon-img-up { --icon-pos-x: calc(480px * -1); }
.icon-img-up-s { --icon-pos-x: calc(528px * -1); }
.icon-img-down { --icon-pos-x: calc(576px * -1); }
.icon-img-down-s { --icon-pos-x: calc(624px * -1); }
.icon-img-cross-oval { --icon-pos-x: calc(672px * -1); }
.icon-img-cross { --icon-pos-x: calc(720px * -1); }
.icon-img-check-oval { --icon-pos-x: calc(768px * -1); }
.icon-img-tick { --icon-pos-x: calc(816px * -1); }
.icon-img-check-oval-color { --icon-pos-x: calc(864px * -1); }
.icon-img-plus { --icon-pos-x: calc(912px * -1); }
.icon-img-minus { --icon-pos-x: calc(960px * -1); }
.icon-img-burger { --icon-pos-x: calc(1008px * -1); }
.icon-img-home { --icon-pos-x: calc(1056px * -1); }
.icon-img-account { --icon-pos-x: calc(1104px * -1); }
.icon-img-store { --icon-pos-x: calc(1152px * -1); }
.icon-img-support { --icon-pos-x: calc(1200px * -1); }
.icon-img-headset { --icon-pos-x: calc(1248px * -1); }
.icon-img-phone { --icon-pos-x: calc(1296px * -1); }
.icon-img-email { --icon-pos-x: calc(1344px * -1); }
.icon-img-info { --icon-pos-x: calc(1392px * -1); }
.icon-img-info-hover { --icon-pos-x: calc(1440px * -1); }
.icon-img-star { --icon-pos-x: calc(1488px * -1); }
.icon-img-quote { --icon-pos-x: calc(1536px * -1); }
.icon-img-money-back { --icon-pos-x: calc(1584px * -1); }
.icon-img-win { --icon-pos-x: calc(1632px * -1); }
.icon-img-mac { --icon-pos-x: calc(1680px * -1); }
.icon-img-android { --icon-pos-x: calc(1728px * -1); }
.icon-img-ios { --icon-pos-x: calc(1776px * -1); }
.icon-img-family { --icon-pos-x: calc(1824px * -1); }
.icon-img-server { --icon-pos-x: calc(1872px * -1); }
.icon-img-linux { --icon-pos-x: calc(1920px * -1); }
.icon-img-multi-device { --icon-pos-x: calc(1968px * -1); }
.icon-img-mobile { --icon-pos-x: calc(2016px * -1); }
.icon-img-cloud { --icon-pos-x: calc(2064px * -1); }

@media (width >= 992px) {
  .icon-img-size32 {
    --icon-size: 32px;
    --icon-set-url: url('../icons/sprites/sprite-common-32x32.svg');
  }

  .icon-img-size24 {
    --icon-size: 24px;
    --icon-set-url: url('../icons/sprites/sprite-common-24x24.svg');
  }
}

@media (width < 992px) {
  .icon-img-size32 {
    --icon-size: 24px;
    --icon-set-url: url('../icons/sprites/sprite-common-24x24.svg');
  }

  .icon-img-size24 {
    --icon-size: 16px;
    --icon-set-url: url('../icons/sprites/sprite-common-16x16.svg');
  }
}

.icon-img-size16 {
  --icon-size: 16px;
  --icon-set-url: url('../icons/sprites/sprite-common-16x16.svg');
}

@media (width < 992px) {
  .icon-img-size32-mobile {
    --icon-size: 32px;
    --icon-set-url: url('../icons/sprites/sprite-common-32x32.svg');
  }

  .icon-img-size24-mobile {
    --icon-size: 24px;
    --icon-set-url: url('../icons/sprites/sprite-common-24x24.svg');
  }
}

/* Label styles */
.label-small {
  --lb-pd-block: 4px;
  --lb-pd-inline: 10px;
}

.label-large {
  --lb-pd-block: 5px;
  --lb-pd-inline: 12px;
}

@media (width >= 992px) {
  .label-small {
    --lb-pd-block: 5px;
    --lb-pd-inline: 12px;
  }

  .label-large {
    --lb-pd-block: 6px;
    --lb-pd-inline: 16px;
  }
}

.label-blue {
  --label-txt-clr: var(--color-white);
  --label-bg-clr: var(--color-blue);
}

.label-blue-pale {
  --label-txt-clr: var(--color-blue-alt);
  --label-bg-clr: var(--color-blue-pale);
}

.label-green {
  --label-txt-clr: var(--color-white);
  --label-bg-clr: var(--color-green);
}

.label-green-pale {
  --label-txt-clr: var(--color-green-alt);
  --label-bg-clr: var(--color-green-pale);
}

.label-blue-outline {
  --label-txt-clr: var(--color-blue-alt);
  --label-bg-clr: var(--color-blue-off-white);
  --label-brd: var(--shadow-size) var(--color-blue);
}

.label-green-outline {
  --label-txt-clr: var(--color-green-alt);
  --label-bg-clr: var(--color-white);
  --label-brd: var(--shadow-size) var(--color-green);
}

.label-gray-outline {
  --label-txt-clr: var(--color-gray-2);
  --label-bg-clr: var(--color-white);
  --label-brd: var(--shadow-size) var(--color-gray-4);
}

.label {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  text-align: center;
  padding-block: var(--lb-pd-block);
  padding-inline: var(--lb-pd-inline);
  color: var(--label-txt-clr);
  background-color: var(--label-bg-clr);
  border-radius: 16px;
  box-shadow: var(--label-brd);
  font-weight: 700;
}

.label.label-small {
  font-size: var(--tp-tagline-s-fs);
  line-height: var(--tp-tagline-s-lh);
  letter-spacing: var(--tp-tagline-s-ls);
}

.label.label-large {
  font-size: var(--tp-tagline-m-fs);
  line-height: var(--tp-tagline-m-lh);
  letter-spacing: var(--tp-tagline-m-ls);
}

/* Ribbon: a flag-shaped tag, notched at both ends (desktop and mobile sizes, as the label) */
.ribbon {
  --ribbon-pd-block: 10px;
  --ribbon-pd-inline: 22px;

  display: inline-block;
  width: fit-content;
  max-width: 100%;
  padding-block: var(--ribbon-pd-block);
  padding-inline: var(--ribbon-pd-inline);
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%, 12px 50%);
  color: var(--ribbon-txt-clr);
  background-color: var(--ribbon-bg-clr);
  font-size: var(--tp-tagline-s-fs);
  line-height: var(--tp-tagline-s-lh);
  letter-spacing: var(--tp-tagline-s-ls);
  font-weight: 700;
}

@media (width >= 992px) {
  .ribbon {
    --ribbon-pd-block: 12px;
    --ribbon-pd-inline: 26px;

    font-size: var(--tp-tagline-m-fs);
    line-height: var(--tp-tagline-m-lh);
    letter-spacing: var(--tp-tagline-m-ls);
  }
}

.ribbon-blue {
  --ribbon-txt-clr: var(--color-white);
  --ribbon-bg-clr: var(--color-blue);
}

.ribbon-blue-pale,
.ribbon-blue-pale-border {
  --ribbon-txt-clr: var(--color-blue-alt);
  --ribbon-bg-clr: var(--color-blue-pale);
}

.ribbon-green {
  --ribbon-txt-clr: var(--color-white);
  --ribbon-bg-clr: var(--color-green);
}

.ribbon-green-pale {
  --ribbon-txt-clr: var(--color-green-alt);
  --ribbon-bg-clr: var(--color-green-pale);
}

.ribbon-yellow {
  --ribbon-txt-clr: var(--color-black);
  --ribbon-bg-clr: var(--color-yellow);
}

.ribbon-red {
  --ribbon-txt-clr: var(--color-white);
  --ribbon-bg-clr: var(--color-red);
}

/* 30-day money-back guarantee: the tick icon and the text; L and M on desktop, one size smaller on mobile */
.guarantee {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-black);
}

.guarantee.guarantee-inverse {
  color: var(--color-white);
}

.guarantee .guarantee-text {
  margin: 0;
  font-size: var(--tp-body3-fs);
  line-height: var(--tp-body3-lh);
}

.guarantee.guarantee-medium .guarantee-text {
  font-size: var(--tp-body4-fs);
  line-height: var(--tp-body4-lh);
}

.guarantee.guarantee-small .guarantee-text {
  font-size: var(--tp-body4-fs);
  line-height: var(--tp-body4-lh);
}

@media (width >= 992px) {
  .guarantee.guarantee-large .guarantee-text {
    font-size: var(--tp-body2-fs);
    line-height: var(--tp-body2-lh);
  }

  .guarantee.guarantee-medium .guarantee-text {
    font-size: var(--tp-body3-fs);
    line-height: var(--tp-body3-lh);
  }

  .guarantee.guarantee-small .guarantee-text {
    font-size: var(--tp-body4-fs);
    line-height: var(--tp-body4-lh);
  }
}

/* Default to PC content when JavaScript is unavailable. */
body:not([data-useragent-os], .quick-edit) {
  .os-mac,
  .os-ios,
  .os-android {
    &:not(.os-pc) {
      display: none;
    }
  }
}

/* Show only content matching the effective OS class on body. */
body.os-root-pc .os-mac:not(.os-pc),
body.os-root-pc .os-ios:not(.os-pc),
body.os-root-pc .os-android:not(.os-pc),
body.os-root-mac .os-pc:not(.os-mac),
body.os-root-mac .os-ios:not(.os-mac),
body.os-root-mac .os-android:not(.os-mac),
body.os-root-ios .os-pc:not(.os-ios),
body.os-root-ios .os-mac:not(.os-ios),
body.os-root-ios .os-android:not(.os-ios),
body.os-root-android .os-pc:not(.os-android),
body.os-root-android .os-mac:not(.os-android),
body.os-root-android .os-ios:not(.os-android) {
  display: none;
}

/* Default to Chrome-specific content when JavaScript is unavailable. */
body:not([data-useragent-browser], .quick-edit) {
  .browser-firefox:not(.browser-chrome),
  .browser-edge:not(.browser-chrome),
  .browser-ie:not(.browser-chrome),
  .browser-opera:not(.browser-chrome),
  .browser-safari:not(.browser-chrome) {
    display: none;
  }
}

/* Show only content matching the detected browser data attribute. */
body[data-useragent-browser="chrome"] .browser-edge:not(.browser-chrome),
body[data-useragent-browser="chrome"] .browser-firefox:not(.browser-chrome),
body[data-useragent-browser="chrome"] .browser-opera:not(.browser-chrome),
body[data-useragent-browser="chrome"] .browser-safari:not(.browser-chrome),
body[data-useragent-browser="chrome"] .browser-ie:not(.browser-chrome),
body[data-useragent-browser="edge"] .browser-chrome:not(.browser-edge),
body[data-useragent-browser="edge"] .browser-firefox:not(.browser-edge),
body[data-useragent-browser="edge"] .browser-opera:not(.browser-edge),
body[data-useragent-browser="edge"] .browser-safari:not(.browser-edge),
body[data-useragent-browser="edge"] .browser-ie:not(.browser-edge),
body[data-useragent-browser="firefox"] .browser-chrome:not(.browser-firefox),
body[data-useragent-browser="firefox"] .browser-edge:not(.browser-firefox),
body[data-useragent-browser="firefox"] .browser-opera:not(.browser-firefox),
body[data-useragent-browser="firefox"] .browser-safari:not(.browser-firefox),
body[data-useragent-browser="firefox"] .browser-ie:not(.browser-firefox),
body[data-useragent-browser="opera"] .browser-chrome:not(.browser-opera),
body[data-useragent-browser="opera"] .browser-edge:not(.browser-opera),
body[data-useragent-browser="opera"] .browser-firefox:not(.browser-opera),
body[data-useragent-browser="opera"] .browser-safari:not(.browser-opera),
body[data-useragent-browser="opera"] .browser-ie:not(.browser-opera),
body[data-useragent-browser="safari"] .browser-chrome:not(.browser-safari),
body[data-useragent-browser="safari"] .browser-edge:not(.browser-safari),
body[data-useragent-browser="safari"] .browser-firefox:not(.browser-safari),
body[data-useragent-browser="safari"] .browser-opera:not(.browser-safari),
body[data-useragent-browser="safari"] .browser-ie:not(.browser-safari),
body[data-useragent-browser="msie"] .browser-chrome:not(.browser-ie),
body[data-useragent-browser="msie"] .browser-edge:not(.browser-ie),
body[data-useragent-browser="msie"] .browser-firefox:not(.browser-ie),
body[data-useragent-browser="msie"] .browser-opera:not(.browser-ie),
body[data-useragent-browser="msie"] .browser-safari:not(.browser-ie) {
  display: none;
}

/* Container styles for blocks that draw a card or a coloured box: bg-* fills it, border-* colours its border,
   elevation-s/m/l and no-elevation set the shadow (XL is the default). Blocks read --container-bg,
   --container-border and --container-shadow. */
.bg-white { --container-bg: var(--color-white); }
.bg-gray-8 { --container-bg: var(--color-gray-8); }
.bg-gray-7 { --container-bg: var(--color-gray-7); }
.bg-gray-2 { --container-bg: var(--color-gray-2); }
.bg-gray-1 { --container-bg: var(--color-gray-1); }
.bg-black { --container-bg: var(--color-black); }
.bg-blue { --container-bg: var(--color-blue); }
.bg-faint-blue { --container-bg: var(--color-blue-faint); }
.bg-off-white-blue { --container-bg: var(--color-blue-off-white); }
.bg-green { --container-bg: var(--color-green); }
.bg-transparent { --container-bg: transparent; }

.border-gray-5 { --container-border: var(--color-gray-5); }
.border-gray-2 { --container-border: var(--color-gray-2); }
.border-light-blue { --container-border: var(--color-blue-light); }
.border-pale-blue { --container-border: var(--color-blue-pale); }

.elevation-s { --container-shadow: var(--elevation-shadow-s); }
.elevation-m { --container-shadow: var(--elevation-shadow-m); }
.elevation-l { --container-shadow: var(--elevation-shadow-l); }
.no-elevation { --container-shadow: none; }