/* 
  ==============================================================================
  Reset and normalize styles
  ==============================================================================
*/

/*
  1. Prevent padding and border from affecting element width.
  2. Remove default margins and padding.
  3. Reset all borders.
*/

*,
::after,
::before,
::backdrop {
  box-sizing: border-box; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 2 */
  border: 0 solid; /* 3 */
}

/*
  1. Use a consistent sensible line-height in all browsers.
  2. Prevent adjustments of font size after orientation changes in iOS.
  3. Use a more readable tab size.
  4. Disable tap highlights on iOS.
*/

html,
:host {
  font-family: system-ui, sans-serif;
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4;
    -o-tab-size: 4;
       tab-size: 4; /* 3 */
  -webkit-tap-highlight-color: transparent; /* 4 */
}

/*
  1. Remove the margin in all browsers.
*/

body {
  margin: 0; /* 1 */
}

/*
  1. Add the correct height in Firefox.
  2. Correct the inheritance of border color in Firefox.
  3. Reset the default border style to a 1px solid border.
*/

hr {
  height: 0; /* 1 */
  border-top-width: 1px; /* 3 */
  color: inherit; /* 2 */
}

/*
  Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/*
  Remove the default font size and weight for headings.
*/

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

/*
  Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  -webkit-text-decoration: inherit;
  text-decoration: inherit;
}

/*
  Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
  1. Improve consistency of default fonts in all browsers.
  2. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/*
  Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
  Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
  1. Remove text indentation from table contents in Chrome and Safari.
  2. Correct table border color inheritance in all Chrome and Safari.
  3. Remove gaps between table borders by default.
*/

table {
  border-collapse: collapse; /* 3 */
  border-color: inherit; /* 2 */
  text-indent: 0; /* 1 */
}

/*
  Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
  Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
  1. Add the correct display in Chrome and Safari.
*/

summary {
  cursor: pointer;
  display: list-item; /* 1 */
}

/*
  Remove summary's arrow in Chrome and Safari.
*/

::-webkit-details-marker {
  display: none;
}

/*
  Make lists unstyled by default.
*/

ol,
ul,
menu {
  list-style: none;
}

/*
  1. Make replaced elements `display: block` by default.
  2. Add `vertical-align: middle` to align replaced elements more sensibly by default.
      This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio.
*/

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

/*
  1. Inherit font styles in all browsers.
  2. Remove border radius in all browsers.
  3. Remove background color in all browsers.
  4. Ensure consistent opacity for disabled states in all browsers.
*/

button,
input,
select,
optgroup,
textarea,
::file-selector-button {
  border-radius: 0; /* 2 */
  font: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  color: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  opacity: 1; /* 4 */
  background-color: transparent; /* 3 */
}

/*
  Restore default font weight.
*/

:where(select:is([multiple], [size])) optgroup {
  font-weight: bolder;
}

/*
  Restore indentation.
*/

:where(select:is([multiple], [size])) optgroup option {
  padding-inline-start: 1.25em;
}

/*
  Restore space after button.
*/

::file-selector-button {
  margin-inline-end: 0.25em;
}

/*
  Reset the default placeholder opacity in Firefox.
*/

::-moz-placeholder {
  opacity: 1;
}

::placeholder {
  opacity: 1;
}

/*
  Set the default placeholder color to a semi-transparent version of the current text color in browsers that do not
  crash when using `color-mix(…)` with `currentColor`.
*/

@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari*/ or (contain-intrinsic-size: 1px) /* Safari 17+ */ {
  ::-moz-placeholder {
    color: color-mix(in oklab, currentColor 50%, transparent);
  }
  ::placeholder {
    color: color-mix(in oklab, currentColor 50%, transparent);
  }
}

/*
  Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
  Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
  1. Ensure date/time inputs have the same height when empty in iOS Safari.
  2. Ensure text alignment can be changed on date/time inputs in iOS Safari.
*/

::-webkit-date-and-time-value {
  min-height: 1lh; /* 1 */
  text-align: inherit; /* 2 */
}

/*
  Prevent height from changing on date/time inputs in macOS Safari when the input is set to `display: block`.
*/

::-webkit-datetime-edit {
  display: inline-flex;
}

/*
  Remove excess padding from pseudo-elements in date/time inputs to ensure consistent height across browsers.
*/

::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

::-webkit-datetime-edit,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-second-field,
::-webkit-datetime-edit-millisecond-field,
::-webkit-datetime-edit-meridiem-field {
  padding-block: 0;
}

/*
  Remove the additional `:invalid` styles in Firefox.
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
  Correct the inability to style the border radius in iOS Safari.
*/

button,
input:where([type='button'], [type='reset'], [type='submit']),
::file-selector-button {
  -webkit-appearance: button;
     -moz-appearance: button;
          appearance: button;
}

/*
  Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
  Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden]:where(:not([hidden='until-found'])) {
  display: none !important;
}

/*
  ==============================================================================
  Custom fonts
  ==============================================================================
*/

@font-face {
  font-family: 'Lineto Brown';
  font-weight: 100;
  font-style: normal;
  font-display: swap;
  src:
    url('../fonts/lineto-brown/pan-thin.woff2') format('woff2'),
    url('../fonts/lineto-brown/pan-thin.woff') format('woff');
}

@font-face {
  font-family: 'Lineto Brown';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src:
    url('../fonts/lineto-brown/pan-light.woff2') format('woff2'),
    url('../fonts/lineto-brown/pan-light.woff') format('woff');
}

@font-face {
  font-family: 'Lineto Brown';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src:
    url('../fonts/lineto-brown/pan-regular.woff2') format('woff2'),
    url('../fonts/lineto-brown/pan-regular.woff') format('woff');
}

@font-face {
  font-family: 'Lineto Brown';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src:
    url('../fonts/lineto-brown/pan-medium.woff2') format('woff2'),
    url('../fonts/lineto-brown/pan-medium.woff') format('woff');
}

@font-face {
  font-family: 'Lineto Brown';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src:
    url('../fonts/lineto-brown/pan-bold.woff2') format('woff2'),
    url('../fonts/lineto-brown/pan-bold.woff') format('woff');
}

@font-face {
  font-family: 'Lineto Brown';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src:
    url('../fonts/lineto-brown/pan-black.woff2') format('woff2'),
    url('../fonts/lineto-brown/pan-black.woff') format('woff');
}

/* 
  ==============================================================================
  Custom variables
  ==============================================================================
*/

:root {
  /*
    System
  */

  /* Colors */
  --root\.color\.neutral-00000: 0 0% 100%;
  --root\.color\.neutral-00125: 0 0% 98.75%;
  --root\.color\.neutral-00250: 0 0% 97.5%;
  --root\.color\.neutral-00375: 0 0% 96.25%;
  --root\.color\.neutral-00500: 0 0% 95%;
  --root\.color\.neutral-00625: 0 0% 93.75%;
  --root\.color\.neutral-00750: 0 0% 92.5%;
  --root\.color\.neutral-00875: 0 0% 91.25%;
  --root\.color\.neutral-01000: 0 0% 90%;
  --root\.color\.neutral-01250: 0 0% 87.5%;
  --root\.color\.neutral-01500: 0 0% 85%;
  --root\.color\.neutral-02000: 0 0% 80%;
  --root\.color\.neutral-02500: 0 0% 75%;
  --root\.color\.neutral-03000: 0 0% 70%;
  --root\.color\.neutral-03500: 0 0% 65%;
  --root\.color\.neutral-04000: 0 0% 60%;
  --root\.color\.neutral-04500: 0 0% 55%;
  --root\.color\.neutral-05000: 0 0% 50%;
  --root\.color\.neutral-05500: 0 0% 45%;
  --root\.color\.neutral-06000: 0 0% 40%;
  --root\.color\.neutral-06500: 0 0% 35%;
  --root\.color\.neutral-07000: 0 0% 30%;
  --root\.color\.neutral-07500: 0 0% 25%;
  --root\.color\.neutral-08000: 0 0% 20%;
  --root\.color\.neutral-08500: 0 0% 15%;
  --root\.color\.neutral-08750: 0 0% 12.5%;
  --root\.color\.neutral-09000: 0 0% 10%;
  --root\.color\.neutral-09125: 0 0% 8.75%;
  --root\.color\.neutral-09250: 0 0% 7.5%;
  --root\.color\.neutral-09375: 0 0% 6.25%;
  --root\.color\.neutral-09500: 0 0% 5%;
  --root\.color\.neutral-09625: 0 0% 3.75%;
  --root\.color\.neutral-09750: 0 0% 2.5%;
  --root\.color\.neutral-09875: 0 0% 1.25%;
  --root\.color\.neutral-10000: 0 0% 0%;

  --root\.color\.turquoise-100-01250: 170 100% 87.5%;
  --root\.color\.turquoise-100-03000: 170 100% 70%;
  --root\.color\.turquoise-100-04000: 170 100% 60%;
  --root\.color\.turquoise-100-04500: 170 100% 55%;
  --root\.color\.turquoise-100-05000: 170 100% 50%;
  --root\.color\.turquoise-100-05500: 170 100% 45%;
  --root\.color\.turquoise-100-06000: 170 100% 40%;
  --root\.color\.turquoise-100-07000: 170 100% 30%;
  --root\.color\.turquoise-100-08750: 170 100% 12.5%;

  --root\.color\.azure-005-08000: 195 5% 20%;
  --root\.color\.azure-100-01250: 195 100% 87.5%;
  --root\.color\.azure-100-03000: 195 100% 70%;
  --root\.color\.azure-100-04000: 195 100% 60%;
  --root\.color\.azure-100-04500: 195 100% 55%;
  --root\.color\.azure-100-05000: 195 100% 50%;
  --root\.color\.azure-100-05500: 195 100% 45%;
  --root\.color\.azure-100-06000: 195 100% 40%;
  --root\.color\.azure-100-08750: 195 100% 12.5%;

  --root\.color\.violet-90-04000: 260 90% 60%;

  --root\.color\.blue-075-00625: 210 7.5% 93.75%;
  --root\.color\.blue-150-00625: 210 15% 93.75%;
  --root\.color\.blue-150-08500: 210 15% 15%;

  /* Values */
  --root\.value\.negative: -1;
  --root\.value\.infinite: 1000;
  --root\.value\.160: 10;
  --root\.value\.120: 7.5;
  --root\.value\.96: 6;
  --root\.value\.88: 5.5;
  --root\.value\.80: 5;
  --root\.value\.76: 4.75;
  --root\.value\.72: 4.5;
  --root\.value\.68: 4.25;
  --root\.value\.64: 4;
  --root\.value\.60: 3.75;
  --root\.value\.56: 3.5;
  --root\.value\.52: 3.25;
  --root\.value\.48: 3;
  --root\.value\.44: 2.75;
  --root\.value\.40: 2.5;
  --root\.value\.36: 2.25;
  --root\.value\.32: 2;
  --root\.value\.30: 1.875;
  --root\.value\.28: 1.75;
  --root\.value\.26: 1.625;
  --root\.value\.24: 1.5;
  --root\.value\.22: 1.375;
  --root\.value\.20: 1.25;
  --root\.value\.18: 1.125;
  --root\.value\.16: 1;
  --root\.value\.14: 0.875;
  --root\.value\.12: 0.75;
  --root\.value\.10: 0.625;
  --root\.value\.8: 0.5;
  --root\.value\.6: 0.375;
  --root\.value\.4: 0.25;
  --root\.value\.2: 0.125;
  --root\.value\.0: 0;

  /*
    Theme
  */

  /* Colors */
  --theme\.color\.primary-light: var(--root\.color\.turquoise-100-04000);
  --theme\.color\.primary: var(--root\.color\.turquoise-100-05000);
  --theme\.color\.primary-dark: var(--root\.color\.turquoise-100-05500);
  --theme\.color\.primary-black: var(--root\.color\.turquoise-100-07000);
  --theme\.color\.secondary: var(--root\.color\.azure-100-05000);
  --theme\.color\.accent: var(--root\.color\.violet-90-04000);

  --theme\.color\.white: var(--root\.color\.neutral-00000);
  --theme\.color\.white-faint: var(--root\.color\.neutral-00125);
  --theme\.color\.white-light-grey: var(--root\.color\.neutral-00375);
  --theme\.color\.white-neutral-light-grey: var(--root\.color\.neutral-00500);
  --theme\.color\.white-neutral-grey: var(--root\.color\.neutral-00625);
  --theme\.color\.white-dark-grey: var(--root\.color\.neutral-01000);

  --theme\.color\.grey-white: var(--root\.color\.neutral-02000);
  --theme\.color\.grey-white-faint: var(--root\.color\.neutral-03000);
  --theme\.color\.grey-light: var(--root\.color\.neutral-03500);
  --theme\.color\.grey-neutral-light: var(--root\.color\.neutral-04000);
  --theme\.color\.grey-neutral: var(--root\.color\.neutral-05000);
  --theme\.color\.grey-neutral-dark: var(--root\.color\.neutral-06000);
  --theme\.color\.grey-dark: var(--root\.color\.neutral-06500);
  --theme\.color\.grey-black-faint: var(--root\.color\.neutral-07000);
  --theme\.color\.grey-black: var(--root\.color\.neutral-08000);

  --theme\.color\.black-light-grey: var(--root\.color\.neutral-09000);
  --theme\.color\.black-neutral-grey: var(--root\.color\.neutral-09375);
  --theme\.color\.black-neutral-dark-grey: var(--root\.color\.neutral-09500);
  --theme\.color\.black-dark-grey: var(--root\.color\.neutral-09625);
  --theme\.color\.black-faint: var(--root\.color\.neutral-09875);
  --theme\.color\.black: var(--root\.color\.neutral-10000);

  /* Values */
  --theme\.value\.160: calc(var(--root\.value\.160) * 1rem);
  --theme\.value\.120: calc(var(--root\.value\.120) * 1rem);
  --theme\.value\.96: calc(var(--root\.value\.96) * 1rem);
  --theme\.value\.88: calc(var(--root\.value\.88) * 1rem);
  --theme\.value\.80: calc(var(--root\.value\.80) * 1rem);
  --theme\.value\.76: calc(var(--root\.value\.76) * 1rem);
  --theme\.value\.72: calc(var(--root\.value\.72) * 1rem);
  --theme\.value\.68: calc(var(--root\.value\.68) * 1rem);
  --theme\.value\.64: calc(var(--root\.value\.64) * 1rem);
  --theme\.value\.60: calc(var(--root\.value\.60) * 1rem);
  --theme\.value\.56: calc(var(--root\.value\.56) * 1rem);
  --theme\.value\.52: calc(var(--root\.value\.52) * 1rem);
  --theme\.value\.48: calc(var(--root\.value\.48) * 1rem);
  --theme\.value\.44: calc(var(--root\.value\.44) * 1rem);
  --theme\.value\.40: calc(var(--root\.value\.40) * 1rem);
  --theme\.value\.36: calc(var(--root\.value\.36) * 1rem);
  --theme\.value\.32: calc(var(--root\.value\.32) * 1rem);
  --theme\.value\.30: calc(var(--root\.value\.30) * 1rem);
  --theme\.value\.28: calc(var(--root\.value\.28) * 1rem);
  --theme\.value\.26: calc(var(--root\.value\.26) * 1rem);
  --theme\.value\.24: calc(var(--root\.value\.24) * 1rem);
  --theme\.value\.22: calc(var(--root\.value\.22) * 1rem);
  --theme\.value\.20: calc(var(--root\.value\.20) * 1rem);
  --theme\.value\.18: calc(var(--root\.value\.18) * 1rem);
  --theme\.value\.16: calc(var(--root\.value\.16) * 1rem);
  --theme\.value\.14: calc(var(--root\.value\.14) * 1rem);
  --theme\.value\.12: calc(var(--root\.value\.12) * 1rem);
  --theme\.value\.10: calc(var(--root\.value\.10) * 1rem);
  --theme\.value\.8: calc(var(--root\.value\.8) * 1rem);
  --theme\.value\.6: calc(var(--root\.value\.6) * 1rem);
  --theme\.value\.4: calc(var(--root\.value\.4) * 1rem);
  --theme\.value\.2: calc(var(--root\.value\.2) * 1rem);
  --theme\.value\.0: calc(var(--root\.value\.0) * 1rem);

  /* Typography */
  --theme\.relative\.font-size\.display: var(--root\.value\.96);
  --theme\.relative\.font-size\.extra-huge: var(--root\.value\.64);
  --theme\.relative\.font-size\.huge: var(--root\.value\.48);
  /*--theme\.relative\.font-size\.extra-large: var(--root\.value\.36);*/
  --theme\.relative\.font-size\.extra-large: var(--root\.value\.32);
  --theme\.relative\.font-size\.large: var(--root\.value\.28);
  --theme\.relative\.font-size\.semi-large: var(--root\.value\.22);
  --theme\.relative\.font-size\.medium: var(--root\.value\.18);
  --theme\.relative\.font-size\.normal: var(--root\.value\.16);
  --theme\.relative\.font-size\.small: var(--root\.value\.14);
  --theme\.relative\.font-size\.tiny: var(--root\.value\.12);

  /* Font Family */
  --theme\.font-family\.sans-serif: 'Lineto Brown', system-ui, sans-serif;
  --theme\.font-family\.default: var(--theme\.font-family\.sans-serif);

  /* Font Sizes */
  --theme\.font-size\.display: calc(var(--theme\.relative\.font-size\.display) * 1rem);
  --theme\.font-size\.extra-huge: calc(var(--theme\.relative\.font-size\.extra-huge) * 1rem);
  --theme\.font-size\.huge: calc(var(--theme\.relative\.font-size\.huge) * 1rem);
  --theme\.font-size\.extra-large: calc(var(--theme\.relative\.font-size\.extra-large) * 1rem);
  --theme\.font-size\.large: calc(var(--theme\.relative\.font-size\.large) * 1rem);
  --theme\.font-size\.semi-large: calc(var(--theme\.relative\.font-size\.semi-large) * 1rem);
  --theme\.font-size\.medium: calc(var(--theme\.relative\.font-size\.medium) * 1rem);
  --theme\.font-size\.normal: calc(var(--theme\.relative\.font-size\.normal) * 1rem);
  --theme\.font-size\.small: calc(var(--theme\.relative\.font-size\.small) * 1rem);
  --theme\.font-size\.tiny: calc(var(--theme\.relative\.font-size\.tiny) * 1rem);

  /* Font Weights */
  --theme\.font-weight\.thin: 100;
  --theme\.font-weight\.light: 300;
  --theme\.font-weight\.normal: 400;
  --theme\.font-weight\.medium: 500;
  --theme\.font-weight\.bold: 700;
  --theme\.font-weight\.black: 900;

  /* Line Height */
  --theme\.line-height\.display: calc((1 + 2 / (var(--theme\.relative\.font-size\.display) * 16)) * 1em);
  --theme\.line-height\.extra-huge: calc((1 + 2 / (var(--theme\.relative\.font-size\.extra-huge) * 16)) * 1em);
  --theme\.line-height\.huge: calc((1 + 4 / (var(--theme\.relative\.font-size\.huge) * 16)) * 1em);
  --theme\.line-height\.extra-large: calc((1 + 4 / (var(--theme\.relative\.font-size\.extra-large) * 16)) * 1em);
  --theme\.line-height\.large: calc((1 + 4 / (var(--theme\.relative\.font-size\.large) * 16)) * 1em);
  --theme\.line-height\.semi-large: calc((1 + 6 / (var(--theme\.relative\.font-size\.semi-large) * 16)) * 1em);
  --theme\.line-height\.medium: calc((1 + 6 / (var(--theme\.relative\.font-size\.medium) * 16)) * 1em);
  --theme\.line-height\.normal: calc((1 + 6 / (var(--theme\.relative\.font-size\.normal) * 16)) * 1em);
  --theme\.line-height\.small: calc((1 + 6 / (var(--theme\.relative\.font-size\.small) * 16)) * 1em);
  --theme\.line-height\.tiny: calc((1 + 4 / (var(--theme\.relative\.font-size\.tiny) * 16)) * 1em);

  /* Parts */
  --theme\.part\.golden-ratio: calc(13 / 8);
  --theme\.part\.one-half: calc(1 / 2);
  --theme\.part\.one-third: calc(1 / 3);
  --theme\.part\.two-third: calc(2 / 3);
  --theme\.part\.one-fourth: calc(1 / 4);
  --theme\.part\.two-fourth: calc(2 / 4);
  --theme\.part\.three-fourth: calc(3 / 4);
  --theme\.part\.one-fifth: calc(1 / 5);
  --theme\.part\.two-fifth: calc(2 / 5);
  --theme\.part\.three-fifth: calc(3 / 5);
  --theme\.part\.four-fifth: calc(4 / 5);

  /* Spaces */
  --theme\.size\.colossal: calc(var(--root\.value\.160) * 1rem);
  --theme\.size\.extra-huge: calc(var(--root\.value\.120) * 1rem);
  --theme\.size\.huge: calc(var(--root\.value\.96) * 1rem);
  --theme\.size\.extra-large: calc(var(--root\.value\.80) * 1rem);
  --theme\.size\.large: calc(var(--root\.value\.64) * 1rem);
  --theme\.size\.semi-large: calc(var(--root\.value\.48) * 1rem);
  --theme\.size\.medium: calc(var(--root\.value\.32) * 1rem);
  --theme\.size\.normal: calc(var(--root\.value\.24) * 1rem);
  --theme\.size\.small: calc(var(--root\.value\.16) * 1rem);
  --theme\.size\.tiny: calc(var(--root\.value\.12) * 1rem);
  --theme\.size\.micro: calc(var(--root\.value\.8) * 1rem);
  --theme\.size\.null: calc(var(--root\.value\.0) * 1rem);

  /* Radius */
  --theme\.radius\.circle: 100%;
  --theme\.radius\.round: calc(var(--root\.value\.infinite) * 1rem);
  --theme\.radius\.huge: calc(var(--root\.value\.32) * 1rem);
  --theme\.radius\.large: calc(var(--root\.value\.16) * 1rem);
  --theme\.radius\.semi-large: calc(var(--root\.value\.12) * 1rem);
  --theme\.radius\.medium: calc(var(--root\.value\.8) * 1rem);
  --theme\.radius\.normal: calc(var(--root\.value\.6) * 1rem);
  --theme\.radius\.small: calc(var(--root\.value\.4) * 1rem);
  --theme\.radius\.tiny: calc(var(--root\.value\.2) * 1rem);

  /* Shadows */
  --theme\.shadow\.slightlyRaised: 0 1px 2px 0 rgb(0 0 0 / 10%);
  --theme\.shadow\.floatingBox: 0 0 30px 0 rgb(0 0 0 / 35%);

  /* Durations */
  --theme\.duration\.instant: 0ms;
  --theme\.duration\.very-fast: 100ms;
  --theme\.duration\.fast: 200ms;
  --theme\.duration\.medium: 400ms;
  --theme\.duration\.slow: 600ms;
  --theme\.duration\.very-slow: 1000ms;
}

/* 
  ==============================================================================
  Responsive variables
  ==============================================================================
*/

@media (min-width: 0) {

html {
    --theme\.font-size\.display\:responsive: var(--theme\.font-size\.extra-large);
    --theme\.font-size\.extra-huge\:responsive: var(--theme\.font-size\.large);
    --theme\.font-size\.huge\:responsive: var(--theme\.font-size\.large);
    --theme\.font-size\.extra-large\:responsive: var(--theme\.font-size\.semi-large);
    --theme\.font-size\.large\:responsive: var(--theme\.font-size\.semi-large);
    --theme\.font-size\.semi-large\:responsive: var(--theme\.font-size\.medium);
    --theme\.font-size\.medium\:responsive: var(--theme\.font-size\.normal);
    --theme\.font-size\.normal\:responsive: var(--theme\.font-size\.small);
    --theme\.font-size\.small\:responsive: var(--theme\.font-size\.tiny);
    --theme\.font-size\.tiny\:responsive: var(--theme\.font-size\.tiny);

    --theme\.line-height\.display\:responsive: var(--theme\.line-height\.extra-large);
    --theme\.line-height\.extra-huge\:responsive: var(--theme\.line-height\.large);
    --theme\.line-height\.huge\:responsive: var(--theme\.line-height\.large);
    --theme\.line-height\.extra-large\:responsive: var(--theme\.line-height\.semi-large);
    --theme\.line-height\.large\:responsive: var(--theme\.line-height\.semi-large);
    --theme\.line-height\.semi-large\:responsive: var(--theme\.line-height\.medium);
    --theme\.line-height\.medium\:responsive: var(--theme\.line-height\.normal);
    --theme\.line-height\.normal\:responsive: var(--theme\.line-height\.small);
    --theme\.line-height\.small\:responsive: var(--theme\.line-height\.tiny);
    --theme\.line-height\.tiny\:responsive: var(--theme\.line-height\.tiny);

    --theme\.size\.colossal\:responsive: var(--theme\.size\.extra-large);
    --theme\.size\.extra-huge\:responsive: var(--theme\.size\.large);
    --theme\.size\.huge\:responsive: var(--theme\.size\.semi-large);
    --theme\.size\.extra-large\:responsive: var(--theme\.size\.semi-large);
    --theme\.size\.large\:responsive: var(--theme\.size\.medium);
    --theme\.size\.semi-large\:responsive: var(--theme\.size\.medium);
    --theme\.size\.medium\:responsive: var(--theme\.size\.normal);
    --theme\.size\.normal\:responsive: var(--theme\.size\.small);
    --theme\.size\.small\:responsive: var(--theme\.size\.tiny);
    --theme\.size\.tiny\:responsive: var(--theme\.size\.micro);
    --theme\.size\.micro\:responsive: var(--theme\.size\.micro);
    --theme\.size\.null\:responsive: var(--theme\.size\.null)
}
  }

@media (min-width: 24em) {
  }

@media (min-width: 28em) {
  }

@media (min-width: 32em) {

html {
    --theme\.font-size\.display\:responsive: var(--theme\.font-size\.huge);
    --theme\.font-size\.extra-huge\:responsive: var(--theme\.font-size\.extra-large);
    --theme\.font-size\.huge\:responsive: var(--theme\.font-size\.extra-large);

    --theme\.line-height\.display\:responsive: var(--theme\.line-height\.huge);
    --theme\.line-height\.extra-huge\:responsive: var(--theme\.line-height\.extra-large);
    --theme\.line-height\.huge\:responsive: var(--theme\.line-height\.extra-large);

    --theme\.size\.colossal\:responsive: var(--theme\.size\.extra-huge);
    --theme\.size\.extra-huge\:responsive: var(--theme\.size\.huge);
    --theme\.size\.huge\:responsive: var(--theme\.size\.large);
    --theme\.size\.extra-large\:responsive: var(--theme\.size\.large);
    --theme\.size\.large\:responsive: var(--theme\.size\.semi-large)
}
  }

@media (min-width: 36em) {
  }

@media (min-width: 40em) {
  }

@media (min-width: 48em) {

html {
    /*--theme\.font-size\.extra-large\:responsive: var(--theme\.font-size\.large);*/

    /*--theme\.line-height\.extra-large\:responsive: var(--theme\.line-height\.large);*/
}
  }

@media (min-width: 56em) {
  }

@media (min-width: 64em) {

html {
    --theme\.font-size\.display\:responsive: var(--theme\.font-size\.display);
    --theme\.font-size\.extra-huge\:responsive: var(--theme\.font-size\.extra-huge);
    --theme\.font-size\.huge\:responsive: var(--theme\.font-size\.huge);
    --theme\.font-size\.extra-large\:responsive: var(--theme\.font-size\.extra-large);
    --theme\.font-size\.large\:responsive: var(--theme\.font-size\.large);
    --theme\.font-size\.semi-large\:responsive: var(--theme\.font-size\.semi-large);
    --theme\.font-size\.medium\:responsive: var(--theme\.font-size\.medium);
    --theme\.font-size\.normal\:responsive: var(--theme\.font-size\.normal);
    --theme\.font-size\.small\:responsive: var(--theme\.font-size\.small);
    --theme\.font-size\.tiny\:responsive: var(--theme\.font-size\.tiny);

    --theme\.line-height\.display\:responsive: var(--theme\.line-height\.display);
    --theme\.line-height\.extra-huge\:responsive: var(--theme\.line-height\.extra-huge);
    --theme\.line-height\.huge\:responsive: var(--theme\.line-height\.huge);
    --theme\.line-height\.extra-large\:responsive: var(--theme\.line-height\.extra-large);
    --theme\.line-height\.large\:responsive: var(--theme\.line-height\.large);
    --theme\.line-height\.semi-large\:responsive: var(--theme\.line-height\.semi-large);
    --theme\.line-height\.medium\:responsive: var(--theme\.line-height\.medium);
    --theme\.line-height\.normal\:responsive: var(--theme\.line-height\.normal);
    --theme\.line-height\.small\:responsive: var(--theme\.line-height\.small);
    --theme\.line-height\.tiny\:responsive: var(--theme\.line-height\.tiny);

    --theme\.size\.colossal\:responsive: var(--theme\.size\.colossal);
    --theme\.size\.extra-huge\:responsive: var(--theme\.size\.extra-huge);
    --theme\.size\.huge\:responsive: var(--theme\.size\.huge);
    --theme\.size\.extra-large\:responsive: var(--theme\.size\.extra-large);
    --theme\.size\.large\:responsive: var(--theme\.size\.large);
    --theme\.size\.semi-large\:responsive: var(--theme\.size\.semi-large);
    --theme\.size\.medium\:responsive: var(--theme\.size\.medium);
    --theme\.size\.normal\:responsive: var(--theme\.size\.normal);
    --theme\.size\.small\:responsive: var(--theme\.size\.small);
    --theme\.size\.tiny\:responsive: var(--theme\.size\.tiny);
    --theme\.size\.micro\:responsive: var(--theme\.size\.micro)
}
  }

@media (min-width: 72em) {
  }

@media (min-width: 84em) {
  }

@media (min-width: 96em) {
  }

/* 
  ==============================================================================
  Base styles
  ==============================================================================
*/

html {
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  overflow-y: scroll;
  font-family: var(--theme\.font-family\.default);
  font-size: 1em;
  font-variation-settings: 'wdth' 100;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  color: hsl(var(--theme\.color\.black-light-grey));
  background-color: hsl(var(--theme\.color\.white));
}

/*
  1. Fallback for older browsers.
*/

body {
  min-height: 100vh; /* 1 */
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/*body:has(dialog#my-dialog[open]) {
  overflow: hidden;
}*/

/*
  A better looking default horizontal rule.
*/

hr {
  height: 0.125rem;
  margin-block: 1em;
  border: 0;
  border-top: 0.125rem solid currentColor;
}

/*
  Brand color for focused state.
*/

:focus {
  outline: none;
  box-shadow: none;
}

:focus-visible {
  outline-color: hsl(var(--theme\.color\.primary-dark));
}

/*
  Remove text-shadow in selection highlight and customize the background color.
*/

::-moz-selection {
  text-shadow: none;
  background: var(hsl(var(--theme\.color\.primary)), initial);
}

::selection,
::-moz-selection {
  text-shadow: none;
  background: var(hsl(var(--theme\.color\.primary)), initial);
}

/*
  Custom scrollbar.
*/

::-webkit-scrollbar {
  width: var(--theme\.size\.small);
  height: var(--theme\.size\.small);
}

::-webkit-scrollbar-thumb {
  border: calc(var(--theme\.size\.small) / 4) solid transparent;
  border-radius: var(--theme\.radius\.round);
  background: hsl(var(--theme\.color\.black) / var(--theme\.part\.one-third));
  background-clip: padding-box;
}

::-webkit-scrollbar-track {
  background: hsl(var(--theme\.color\.primary));
}

/*
  Hiding Native UI from video elements.
*/

video::-webkit-media-controls,
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
}

/* 
  ==============================================================================
  Custom styles
  ==============================================================================
*/

/*
  Document
  ------------------------------------------------------------------------------
*/

.rule-318 {
  display: flex;
  flex-direction: column;
}

/*
  Layout
  ------------------------------------------------------------------------------
*/

/* Vertical container paddings */

/* Horizontal container paddings */

/*
  Elements
  ------------------------------------------------------------------------------
*/

/*
  Icon button
*/

/* Container */

.rule-493 {
  cursor: pointer;
  position: relative;
  display: inline-block;
  padding: var(--theme\.size\.micro\:responsive);
  border-radius: 100%;
}

.rule-493::before {
  content: '';
  position: absolute;
  inset: calc(var(--theme\.size\.micro\:responsive) / 2);
  border-radius: inherit;
  opacity: 0;
  background-color: currentColor;
  transition:
    opacity var(--theme\.duration\.fast),
    inset var(--theme\.duration\.fast);
}

.rule-493:hover::before {
  inset: 0;
  opacity: 1;
}

/* Icon */

.rule-188 {
  max-width: none;
}

/*
  Button
*/

/*
  Animation
  ------------------------------------------------------------------------------
*/

/*
  Embedded content
  ------------------------------------------------------------------------------
*/

/*
  Header
  ------------------------------------------------------------------------------
*/

/*
  Generic
*/

.rule-398 {
  position: sticky;
  z-index: 100;
  inset-block-start: 0;
}

.rule-471 {
  padding-inline: 1rem;
}

@media (min-width: 32em) {

.rule-471 {
    padding-inline: max(5dvw, calc((100vw - 90rem) / 2));
}
  }

.rule-471 {

  display: flex;
  flex-direction: row;
  gap: var(--theme\.size\.small\:responsive);
  align-items: center;
  justify-content: space-between;
  min-height: var(--theme\.value\.56);
  color: hsl(var(--theme\.color\.black-light-grey));
  background-color: hsl(var(--theme\.color\.white));
  box-shadow: 0 0 var(--theme\.value\.4) hsl(var(--theme\.color\.black) / 0.25);
}

/*
  Logo
*/

.rule-903 {
  flex-grow: 1;
}

.rule-599 {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}

.rule-649 {
  width: auto;
  height: var(--theme\.size\.medium);
}

/*
  Action button
*/

.rule-798 {
}

.rule-106 {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-min-content;
  height: min-content;
  padding-block: var(--theme\.size\.small\:responsive);
  padding-inline: var(--theme\.size\.medium\:responsive);
  border-radius: var(--theme\.radius\.round);
  font-size: var(--theme\.font-size\.small\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03125em;
  outline-offset: calc(var(--theme\.value\.2) * -1);
  transition:
    background-color var(--theme\.duration\.fast),
    color var(--theme\.duration\.fast),
    outline-color var(--theme\.duration\.fast);
}

.rule-106disabled,
  .rule-106[data-disabled] {
    pointer-events: none;
    filter: contrast(0.75) opacity(0.5);
  }

.rule-106 {
  color: hsl(var(--theme\.color\.black));
  background-color: hsl(var(--theme\.color\.primary));
  outline: var(--theme\.value\.2) solid hsl(var(--theme\.color\.primary));
}

.rule-106:hover {
    color: hsl(var(--theme\.color\.black));
    background-color: hsl(var(--theme\.color\.white));
    outline-color: hsl(var(--theme\.color\.primary-dark));
  }

.rule-106 {

  position: relative;
  z-index: 2;
  height: var(--theme\.value\.36);
  padding-block: var(--theme\.size\.micro);
}

/*
  Language selector
*/

.rule-533 {
  position: relative;
}

.rule-140 {
  color: hsl(var(--theme\.color\.white-dark-grey));
}

.rule-495 {
  filter: invert(10%);
}

.rule-433 {
  pointer-events: none;
  position: absolute;
  top: calc(100% - 3.5rem + 1.5rem);
  inset-inline-end: -1rem;
  display: block;
  padding-block: 3rem 1.5rem;
  padding-inline: 1rem;
  opacity: 0;
  transition: opacity calc(1s / 4);
}

.rule-433::before {
    content: '';
    position: absolute;
    inset-block-start: 2.175rem;
    inset-inline-end: 1rem;
    display: block;
    width: 2.375rem;
    height: 0.25rem;
    border-radius: 1rem;
    background-color: hsl(var(--theme\.color\.primary));
  }

.rule-433:hover,
  .rule-140:hover + .rule-433 {
    pointer-events: auto;
    opacity: 1;
  }

.rule-157 {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: min(16rem, 60dvw);
  padding: 0.75rem;
  border-radius: 0.5rem;
  text-align: center;
  background-color: #fff;
  box-shadow: 0 0 0.5rem 0 hsl(0 0% 0% / 0.1);
}

.rule-575 {
  color: hsl(var(--theme\.color\.black-light-grey));
}

.rule-353 {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
}

.rule-178 {
}

.rule-882 {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-min-content;
  height: min-content;
  padding-block: var(--theme\.size\.small\:responsive);
  padding-inline: var(--theme\.size\.medium\:responsive);
  border-radius: var(--theme\.radius\.round);
  font-size: var(--theme\.font-size\.small\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03125em;
  outline-offset: calc(var(--theme\.value\.2) * -1);
  transition:
    background-color var(--theme\.duration\.fast),
    color var(--theme\.duration\.fast),
    outline-color var(--theme\.duration\.fast);
}

.rule-882disabled,
  .rule-882[data-disabled] {
    pointer-events: none;
    filter: contrast(0.75) opacity(0.5);
  }

.rule-882 {
  color: hsl(var(--theme\.color\.white));
  background-color: hsl(var(--theme\.color\.black));
  outline: var(--theme\.value\.2) solid hsl(var(--theme\.color\.black));
}

.rule-882:hover {
    color: hsl(var(--theme\.color\.black));
    background-color: hsl(var(--theme\.color\.white));
    outline-color: hsl(var(--theme\.color\.black));
  }

.rule-882 {

  width: 100%;
  height: var(--theme\.value\.36);
  padding-block: var(--theme\.size\.micro);
}

.rule-623 {
}

/*
  Main
  ------------------------------------------------------------------------------
*/

/*
  Generic
*/

.rule-414 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/*
  Hero section
*/

.rule-151 {
}

.rule-101 {
  position: relative;
  display: grid;
  min-height: clamp(32rem, calc(100svh - 3.5rem), 56rem);
  background-color: hsl(var(--theme\.color\.black));
}

@media (max-width: calc(42em - 1px)) {

.rule-101 {
    min-height: clamp(38rem, calc(100vh - 3.5rem), 40rem)
}
  }

/* Introduction */

.rule-184 {
  pointer-events: none;
  position: relative;
  z-index: 3;
  overflow: clip;
  display: flex;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-items: center;
  justify-content: center;
  opacity: 1;
  background-color: hsl(var(--theme\.color\.black));
  transition: opacity var(--theme\.duration\.slow);
}

[data-low-power-mode='true'] .rule-184,
  [data-loaded] .rule-184 {
    opacity: 0;
  }

/* Animate the position of the gradient */

/*@keyframes moveGradientPos {
  0% {
    background-position: 85% 25%;
    background-size: 200% 200%;
  }
  100% {
    background-position: 15% 75%;
    background-size: 600% 600%;
  }
}*/

.rule-594 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.rule-899 {
  position: absolute;
  inset-block: 0;
}

@media (min-width: 90em) {
    .rule-899::after {
      content: '';
      position: absolute;
      inset-block: 0;
      inset-inline: -10%;
      background: linear-gradient(90deg, hsl(var(--theme\.color\.black)) 10%, transparent 30% 70%, hsl(var(--theme\.color\.black)) 90%);
    }
  }

.rule-265 {
  height: 100%;
  margin-inline: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

[data-focused] .rule-265 {
    animation: view 3s ease-out forwards;
  }

.rule-126 {
  transform: scale(1);
  font-size: var(--theme\.font-size\.display\:responsive);
  line-height: var(--theme\.line-height\.display\:responsive);
  color: hsl(var(--theme\.color\.white));
  text-align: center;
  letter-spacing: 0.25rem;
  opacity: 0;
}

[data-focused] .rule-126 {
    animation: appear 3s ease-out forwards;
  }

.element-4333 {
  opacity: 0;
}

[data-focused] .element-4333 {
    animation: fade-in 0.2s ease-out 0.5s forwards;
  }

.element-1437 {
  opacity: 0;
}

[data-focused] .element-1437 {
    animation: fade-in 0.2s ease-out 0.1s forwards;
  }

.element-4067 {
  opacity: 0;
}

[data-focused] .element-4067 {
    animation: fade-in 0.2s ease-out 0.3s forwards;
  }

.element-2021 {
  opacity: 0;
}

[data-focused] .element-2021 {
    animation: fade-in 0.2s ease-out 0.6s forwards;
  }

.element-9849 {
  opacity: 0;
}

[data-focused] .element-9849 {
    animation: fade-in 0.2s ease-out 0.2s forwards;
  }

.element-7824 {
  opacity: 0;
}

[data-focused] .element-7824 {
    animation: fade-in 0.2s ease-out 0.4s forwards;
  }

@keyframes appear {
  0% {
    transform: scale(1);
    letter-spacing: 0.25rem;
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: scale(0.85);
    letter-spacing: 0rem;
    opacity: 1;
  }
}

@keyframes view {
  0% {
    transform: scale(1.1);
    opacity: 0;
    filter: blur(0.5rem);
  }
  35% {
    opacity: 1;
  }
  50% {
    filter: blur(0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Video */

.rule-272 {
  position: relative;
  z-index: 2;
  overflow: clip;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.rule-928 {
  position: absolute;
  z-index: 2;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 120rem;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

[data-low-power-mode='true'] .rule-928,
  [data-finished*='mx-master-4-video-scene'] .rule-928 {
    display: none;
  }

@media (min-width: 120em) {
    .rule-928::before,
    .rule-928::after {
      pointer-events: none;
      content: '';
      position: absolute;
    }

    .rule-928::before {
      z-index: -1;
      left: 50%;
      transform: translateX(-50%);
      width: 100dvw;
      height: 100%;
      background-color: hsl(0 0% 0%);
    }
    .rule-928::after {
      z-index: 1;
      inset: 0;
      background-image: linear-gradient(to right, hsl(0 0% 0%), hsl(210 15% 15% / 20%) 15%, hsl(210 15% 15% / 0%) 30%, hsl(210 15% 15% / 0%) 70%, hsl(210 15% 15% / 20%) 85%, hsl(0 0% 0%));
    }
  }

.rule-641 {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.rule-815 {
  padding-inline: 1rem;
}

@media (min-width: 32em) {

.rule-815 {
    padding-inline: max(5dvw, calc((100vw - 90rem) / 2));
}
  }

.rule-815 {

  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  background-color: #eaecef;
}

@media (max-width: calc(42em - 1px)) {

.rule-815 {
    padding-block-start: 1rem
}
    .rule-815::after {
      pointer-events: none;
      content: '';
      position: absolute;
      z-index: 1;
      inset-block-start: 0;
      inset-inline: 1rem;
      height: 18rem;
      background: linear-gradient(90deg, #eaecef, transparent 1rem calc(100% - 1rem), #eaecef), linear-gradient(0deg, #eaecef, transparent 1rem calc(100% - 0.75rem), #eaecef);
    }
  }

@media (min-width: 32em) {
    .rule-815::after {
      inset-inline: max(5dvw, calc((100vw - 90rem) / 2));
    }
  }

.rule-139 {
  position: relative;
  inset-inline-start: 50%;
  transform: translateX(-25%);
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

[dir='rtl'] .rule-139 {
    transform: translateX(25%);
  }

@media (max-width: calc(42em - 1px)) {

.rule-139 {
    transform: translateX(-50%) !important;
    height: 18rem
}
  }

.rule-715 {
}

.rule-364 {
}

/* Main banner */

.rule-205 {
  padding-block: var(--theme\.size\.huge\:responsive);
  padding-inline: 1rem;
}

@media (min-width: 32em) {

.rule-205 {
    padding-inline: max(5dvw, calc((100vw - 90rem) / 2));
}
  }

.rule-205 {

  pointer-events: none;
  position: relative;
  z-index: 2;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: start;
  opacity: 0;
  transition: opacity 2s;
}

[data-low-power-mode='true'] .rule-205,
  [data-finished*='mx-master-4-video-scene'] .rule-205 {
    pointer-events: auto;
    opacity: 1;
  }

@media (max-width: calc(42em - 1px)) {

.rule-205 {
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
    padding-block-start: 18rem
}
  }

@media (min-width: 64em) {

.rule-205 {
    align-self: center
}
  }

.rule-344 {
  display: flex;
  flex-direction: column;
  gap: var(--theme\.size\.medium\:responsive);
  max-width: calc(50% - var(--theme\.size\.medium));
}

@media (max-width: calc(42em - 1px)) {

.rule-344 {
    max-width: 100%;
    text-align: center
}
  }

@media (min-width: 90em) {

.rule-344 {
    max-width: 50%
}
  }

.rule-919 {
  display: inline-flex;
  flex-direction: column;
  gap: var(--theme\.size\.micro\:responsive);
}

.rule-501 {
  order: -1;
  font-size: var(--theme\.font-size\.large\:responsive);
  line-height: var(--theme\.line-height\.large\:responsive);
  color: hsl(var(--theme\.color\.grey-black));
}

.rule-675 {
  font-size: var(--theme\.font-size\.extra-huge\:responsive);
  line-height: var(--theme\.line-height\.extra-huge\:responsive);
  color: hsl(var(--theme\.color\.black));
}

.rule-510 {
  max-width: 42rem;
  font-size: var(--theme\.font-size\.medium\:responsive);
  line-height: var(--theme\.line-height\.medium\:responsive);
}

.rule-913 {
  display: flex;
  flex-direction: row;
  gap: var(--theme\.font-size\.small\:responsive);
  margin-block-start: var(--theme\.size\.tiny\:responsive);
}

@media (max-width: calc(42em - 1px)) {

.rule-913 {
    justify-content: center
}
  }

.rule-449 {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-min-content;
  height: min-content;
  padding-block: var(--theme\.size\.small\:responsive);
  padding-inline: var(--theme\.size\.medium\:responsive);
  border-radius: var(--theme\.radius\.round);
  font-size: var(--theme\.font-size\.small\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03125em;
  outline-offset: calc(var(--theme\.value\.2) * -1);
  transition:
    background-color var(--theme\.duration\.fast),
    color var(--theme\.duration\.fast),
    outline-color var(--theme\.duration\.fast);
}

.rule-449disabled,
  .rule-449[data-disabled] {
    pointer-events: none;
    filter: contrast(0.75) opacity(0.5);
  }

.rule-449 {
  color: hsl(var(--theme\.color\.black));
  background-color: hsl(var(--theme\.color\.primary));
  outline: var(--theme\.value\.2) solid hsl(var(--theme\.color\.primary));
}

.rule-449:hover {
    color: hsl(var(--theme\.color\.black));
    background-color: hsl(var(--theme\.color\.white));
    outline-color: hsl(var(--theme\.color\.primary-dark));
  }

.rule-271 {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-min-content;
  height: min-content;
  padding-block: var(--theme\.size\.small\:responsive);
  padding-inline: var(--theme\.size\.medium\:responsive);
  border-radius: var(--theme\.radius\.round);
  font-size: var(--theme\.font-size\.small\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03125em;
  outline-offset: calc(var(--theme\.value\.2) * -1);
  transition:
    background-color var(--theme\.duration\.fast),
    color var(--theme\.duration\.fast),
    outline-color var(--theme\.duration\.fast);
}

.rule-271disabled,
  .rule-271[data-disabled] {
    pointer-events: none;
    filter: contrast(0.75) opacity(0.5);
  }

.rule-271 {
  color: hsl(var(--theme\.color\.black));
  background-color: hsl(var(--theme\.color\.white));
  outline: var(--theme\.value\.2) solid hsl(var(--theme\.color\.black));
}

.rule-271:hover {
    color: hsl(var(--theme\.color\.white));
    background-color: hsl(var(--theme\.color\.black));
  }

/*
  Core features
*/

@media (max-width: calc(64em - 1px)) {

.rule-153 {
    scroll-margin-top: var(--theme\.value\.52)
}
  }

@media (max-width: calc(32em - 1px)) {

.rule-153 {
    scroll-margin-top: var(--theme\.value\.36)
}
  }

.rule-751 {
  padding-block: var(--theme\.size\.huge\:responsive);
  padding-inline: 1rem;
}

@media (min-width: 32em) {

.rule-751 {
    padding-inline: max(5dvw, calc((100vw - 120rem) / 2));
}
  }

.rule-751 {

  background-image: linear-gradient(to top, hsl(var(--theme\.color\.white-neutral-light-grey) / 1), transparent 50%);
}

@media (min-width: 96em) {

.rule-751 {
    padding-inline: max(2.5dvw, calc((100vw - 120rem) / 2))
}
  }

@media (min-width: 64em) {

.rule-708 {
    display: grid;
    grid-template-areas:
      'A A A D D D'
      'B B C C E E'
      'F F G G H H';
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: var(--theme\.size\.extra-large\:responsive);
    -moz-column-gap: var(--theme\.size\.semi-large\:responsive);
         column-gap: var(--theme\.size\.semi-large\:responsive)
}
  }

@media (min-width: 84em) {

.rule-708 {
    grid-template-areas:
      'A A A A A D D D D D'
      'B B B C C C E E E E'
      'F F F F G G G H H H';
    grid-template-columns: repeat(10, minmax(0, 1fr))
}
  }

@media (min-width: 96em) {

.rule-708 {
    grid-template-areas:
      'A A A A A B B B D D D D C C C'
      'F F F F H H H H G G G E E E E';
    grid-template-columns: repeat(15, minmax(0, 1fr));
    row-gap: calc(var(--theme\.size\.huge\:responsive) * 3);
    -moz-column-gap: var(--theme\.size\.extra-large\:responsive);
         column-gap: var(--theme\.size\.extra-large\:responsive)
}
  }

@media (min-width: 120em) {

.rule-708 {
    -moz-column-gap: var(--theme\.size\.extra-huge\:responsive);
         column-gap: var(--theme\.size\.extra-huge\:responsive)
}
  }

.rule-632 {
  position: relative;
}

@media (max-width: calc(64em - 1px)) {

.rule-632 {
    margin-block-end: var(--theme\.size\.extra-large\:responsive)
}
  }

@media (min-width: 64em) {

.rule-632 {
    grid-area: A
}
  }

@media (min-width: 96em) {

.rule-632 {
    inset-block-start: calc(var(--theme\.size\.huge\:responsive) * 1)
}
  }

.rule-794 {
  position: relative;
}

@media (min-width: 32em) and (max-width: calc(64em - 1px)) {

.rule-794 {
    /*margin-inline-start: -5dvw;*/
    inset-inline-start: -5dvw;
    width: calc(100% + (5dvw * 2))
}
  }

@media (max-width: calc(64em - 1px)) {

.rule-794 {
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-padding-inline: 5vw;
    scroll-snap-type: inline mandatory;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    display: grid;
    grid-auto-columns: calc(100% - 10vw);
    grid-auto-flow: column;
    gap: 5vw;
    padding-inline: 5vw;
    -webkit-overflow-scrolling: touch
}
  }

@media (max-width: calc(32em - 1px)) {

.rule-794 {
    /*margin-inline-start: -1rem;*/
    inset-inline-start: -1rem;
    width: calc(100% + (1rem * 2));
    padding-inline: 1rem
}

    .rule-794::-webkit-scrollbar {
      display: none;
    }
  }

@media (min-width: 36em) {

.rule-794 {
    grid-auto-columns: calc(55% - 10vw) !important
}
  }

@media (min-width: 64em) {

.rule-794 {
    display: inherit;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    grid-template-areas: inherit;
    grid-template-columns: inherit;
    gap: inherit;
    row-gap: inherit;
    -moz-column-gap: inherit;
         column-gap: inherit;
    width: auto;
    margin:
}
  }

.rule-651 {
  scroll-snap-align: center;
  position: relative;
}

@media (min-width: 36em) {

.rule-651 {
    scroll-snap-align: start
}
  }

@media (min-width: 64em) {

.rule-651:nth-child(1) {
    grid-area: B
}
  }

@media (min-width: 96em) {

.rule-651:nth-child(1) {
    inset-block-start: calc(var(--theme\.size\.huge\:responsive) * 2)
}
  }

@media (min-width: 64em) {

.rule-651:nth-child(2) {
    grid-area: C
}
  }

@media (min-width: 96em) {

.rule-651:nth-child(2) {
    inset-block-start: calc(var(--theme\.size\.huge\:responsive) * 1)
}
  }

@media (min-width: 64em) {

.rule-651:nth-child(3) {
    grid-area: D
}
  }

@media (min-width: 96em) {

.rule-651:nth-child(3) {
    inset-block-start: calc(var(--theme\.size\.huge\:responsive) * 0)
}
  }

@media (min-width: 64em) {

.rule-651:nth-child(4) {
    grid-area: E
}
  }

@media (min-width: 96em) {

.rule-651:nth-child(4) {
    inset-block-end: calc(var(--theme\.size\.huge\:responsive) * 1)
}
  }

@media (min-width: 64em) {

.rule-651:nth-child(5) {
    grid-area: F
}
  }

@media (min-width: 96em) {

.rule-651:nth-child(5) {
    inset-block-end: calc(var(--theme\.size\.huge\:responsive) * 1)
}
    .rule-651:nth-child(5) .rule-462 {
      position: absolute;
    }
  }

@media (min-width: 64em) {

.rule-651:nth-child(6) {
    grid-area: G
}
  }

@media (min-width: 96em) {

.rule-651:nth-child(6) {
    inset-block-end: calc(var(--theme\.size\.huge\:responsive) * 2)
}

    .rule-651:nth-child(6) .rule-462 {
      position: absolute;
    }
  }

@media (min-width: 64em) {

.rule-651:nth-child(7) {
    grid-area: H
}
  }

@media (min-width: 96em) {

.rule-651:nth-child(7) {
    inset-block-end: calc(var(--theme\.size\.huge\:responsive) * 0)
}
  }

.rule-683 {
  position: relative;
  display: grid;
  grid-template-areas:
    'A'
    'B';
  flex-direction: column;
  gap: var(--theme\.size\.small\:responsive);
}

.rule-566 {
  overflow: clip;
  display: grid;
  grid-area: A;
  border-radius: var(--theme\.radius\.large);
  background-color: hsl(var(--theme\.color\.white-neutral-grey));
}

.rule-974 {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.rule-100 {
  cursor: pointer;
  position: absolute;
  z-index: 3;
  inset-block-start: var(--theme\.size\.small\:responsive);
  inset-inline-end: var(--theme\.size\.small\:responsive);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--theme\.value\.36);
  height: var(--theme\.value\.36);
  border-radius: var(--theme\.radius\.round);
  background-color: hsl(var(--theme\.color\.primary));
  outline: var(--theme\.value\.2) solid hsl(var(--theme\.color\.primary));
  outline-offset: calc(var(--theme\.value\.2) * -1);
  transition:
    background-color var(--theme\.duration\.fast),
    outline-color var(--theme\.duration\.fast);
}

.rule-100:hover {
    background-color: hsl(var(--theme\.color\.white));
    outline-color: hsl(var(--theme\.color\.primary-dark));
  }

.rule-100[data-video-is-playing] .element-6503 {
    display: none;
  }

.rule-100:not([data-video-is-playing]) .element-0950 {
    display: none;
  }

.rule-368 {
  background-color: hsl(var(--theme\.color\.accent));
  outline-color: hsl(var(--theme\.color\.accent));
}

.rule-368:hover {
    outline-color: hsl(var(--theme\.color\.accent));
  }

.rule-368 img:not(:hover) {
    filter: invert(1);
  }

.rule-337 {
  width: var(--theme\.value\.20);
  height: var(--theme\.value\.20);
  transition: filter var(--theme\.duration\.fast);
}

.rule-468 {
  display: block;
  aspect-ratio: 2 / 3;
  width: 100%;
  height: auto;
  max-height: 24rem;
  -o-object-fit: cover;
     object-fit: cover;
  transition: scale var(--theme\.duration\.medium);
}

[data-toggled] .rule-468 {
    scale: 1.1;
  }

.rule-412 {
  display: block;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  aspect-ratio: 2 / 3;
  width: 100%;
  height: auto;
  max-height: 24rem;
  transition: scale var(--theme\.duration\.medium);
}

[data-toggled] .rule-412 {
    scale: 1.1;
  }

.rule-927 {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: var(--entity\.data-variety\.object-position, center);
     object-position: var(--entity\.data-variety\.object-position, center);
}

.rule-462 {
  grid-area: B;
}

.rule-772 {
  font-size: var(--theme\.font-size\.extra-large\:responsive);
  line-height: var(--theme\.line-height\.extra-large\:responsive);
  color: hsl(var(--theme\.color\.black));
}

.rule-986 {
  font-size: var(--theme\.font-size\.semi-large\:responsive);
  line-height: var(--theme\.line-height\.semi-large\:responsive);
  color: hsl(var(--theme\.color\.grey-dark));
}

.rule-305 {
  pointer-events: none;
  position: relative;
  z-index: 1;
  overflow: hidden;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  padding: var(--theme\.size\.medium\:responsive);
  font-size: var(--theme\.font-size\.medium\:responsive);
  line-height: var(--theme\.line-height\.normal\:responsive);
  color: hsl(var(--theme\.color\.white));
  opacity: 0;
  background-color: hsl(var(--theme\.color\.grey-dark) / 0.25);
  background-image: linear-gradient(to bottom, hsl(var(--theme\.color\.black) / 0.85), hsl(var(--theme\.color\.black) / 0.75) var(--theme\.size\.large\:responsive), transparent 50%);
  backdrop-filter: blur(4px);
  transition: opacity var(--theme\.duration\.medium);
}

[data-toggled] .rule-305 {
    opacity: 1;
  }

.rule-929 {
}

.rule-487::before {
    content: '';
    float: inline-end;
    width: var(--theme\.value\.36);
    height: var(--theme\.value\.36);
  }

.rule-479 {
  cursor: default;
  position: relative;
  z-index: 2;
  overflow: hidden;
  display: flex;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-items: end;
  justify-content: center;
  padding: var(--theme\.size\.medium\:responsive);
  color: hsl(var(--theme\.color\.white));
}

.rule-833 {
  aspect-ratio: 1 / 1;
  width: var(--theme\.size\.normal);
  height: auto;
  padding: calc(var(--theme\.size\.micro) / 2);
  border: 2px solid currentColor;
  border-radius: var(--theme\.radius\.round);
  background-color: hsl(var(--theme\.color\.black) / 0.25);
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 4;
}

.rule-833 .element-5470 {
    transform-origin: center;
    transition:
      transform var(--theme\.duration\.medium) ease,
      opacity var(--theme\.duration\.medium) ease;
  }

[data-toggled] .rule-833 .element-5470 {
    transform: scaleY(0);
  }

/* Controls */

.rule-314 {
  display: flex;
  flex-direction: row;
  gap: var(--theme\.font-size\.normal\:responsive);
  justify-content: start;
  margin-block-start: var(--theme\.size\.medium\:responsive);
}

[data-device='mobile'] .rule-314 {
    display: none;
  }

[dir='rtl'] .rule-314 {
    display: none;
  }

@media (min-width: 64em) {

.rule-314 {
    display: none
}
  }

.rule-717 {
  color: hsl(var(--theme\.color\.white));
}

.rule-717::before {
    inset: 0;
    opacity: 1;
  }

.rule-717[disabled] {
    pointer-events: none;
    filter: contrast(0.5) brightness(2);
  }

/*
  Product Overview
*/

.rule-164 {
}

.rule-985 {
  padding-block: var(--theme\.size\.huge\:responsive);
  padding-inline: 1rem;
}

@media (min-width: 32em) {

.rule-985 {
    padding-inline: max(5dvw, calc((100vw - 90rem) / 2));
}
  }

.rule-985 {

  display: grid;
  row-gap: var(--theme\.size\.semi-large\:responsive);
}

.rule-464 {
  display: grid;
  grid-template-areas:
    'B'
    'A'
    'D'
    'E'
    'C'
    'F';
  row-gap: var(--theme\.size\.normal\:responsive);
}

@media (min-width: 64em) {

.rule-464 {
    display: grid;
    grid-template-areas:
      'A B'
      'A D'
      'A E'
      'A C'
      'A F';
    grid-template-columns: minmax(0, 13fr) minmax(0, 8fr);
    grid-template-rows: auto auto auto auto 1fr;
    row-gap: var(--theme\.size\.normal\:responsive);
    -moz-column-gap: var(--theme\.size\.extra-large\:responsive);
         column-gap: var(--theme\.size\.extra-large\:responsive)
}
  }

.rule-789 {
  --element\.height: var(--theme\.value\.2);

  height: var(--element\.height);
  margin-block-start: calc(var(--theme\.size\.micro\:responsive) - (var(--element\.height) / 2));
  margin-block-end: calc(var(--theme\.size\.small\:responsive) - (var(--element\.height) / 2));
  border: 0;
  border-radius: var(--theme\.radius\.round);
  color: hsl(var(--theme\.color\.white-dark-grey));
  background-color: currentColor;
}

@media (max-width: calc(64em - 1px)) {

.rule-925 .rule-789 {
      display: none
  }
    }

/* Title */

.rule-518 {
}

.rule-673 {
  font-size: var(--theme\.font-size\.huge\:responsive);
  line-height: var(--theme\.line-height\.huge\:responsive);
  color: hsl(var(--theme\.color\.black));
}

.rule-673 :not([data-option-active]) {
    display: none;
  }

/* Other */

.rule-780 {
  scroll-margin-top: var(--theme\.value\.72);
  display: grid;
  grid-area: A;
  grid-template-columns: repeat(2, 1fr);
  row-gap: var(--theme\.size\.normal\:responsive);
  -moz-column-gap: var(--theme\.size\.normal\:responsive);
       column-gap: var(--theme\.size\.normal\:responsive);
}

@media (min-width: 64em) {

.rule-780 {
    scroll-margin-top: calc(var(--theme\.value\.120) + var(--theme\.size\.semi-large\:responsive) + var(--theme\.line-height\.huge\:responsive))
}
  }

.rule-299 {
  display: grid;
  border-radius: var(--theme\.radius\.large);
  background-color: hsl(var(--theme\.color\.white-neutral-grey));
}

.rule-686 {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-content: center;
  padding-inline: var(--theme\.size\.small\:responsive);
}

.rule-686:not([data-option-active]) {
    display: none;
  }

.rule-342 {
  aspect-ratio: 1/1;
  width: 100%;
  height: auto;
}

.rule-771 {
  grid-area: B;
}

.rule-103 {
  display: inline-flex;
  flex-direction: column;
  gap: var(--theme\.size\.micro\:responsive);
}

.rule-535 {
  font-size: var(--theme\.font-size\.semi-large\:responsive);
  line-height: var(--theme\.line-height\.semi-large\:responsive);
  color: hsl(var(--theme\.color\.black));
}

.rule-559 {
  font-size: var(--theme\.font-size\.medium\:responsive);
  line-height: var(--theme\.line-height\.medium\:responsive);
  color: hsl(var(--theme\.color\.grey-black));
}

.rule-955 {
  display: flex;
  grid-area: C;
  flex-direction: column;
  gap: var(--theme\.size\.small\:responsive);
}

.rule-998 {
}

.rule-371 {
  position: relative;
  inset-inline-start: 0.1rem;
  display: inline-flex;
  flex-direction: row;
  gap: 0.75rem;
}

.rule-138 {
}

.rule-606 {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  position: relative;
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 100%;
  color: var(--entity\.data-variety\.color, hsl(var(--theme\.color\.grey-neutral)));
  white-space: nowrap;
  background-color: currentColor;
  background-image: linear-gradient(65deg, var(--entity\.data-variety\.color\:alternate, transparent) 0%, var(--entity\.data-variety\.color\:alternate, transparent) 50%, transparent 50%);
  outline: 0.1rem solid hsl(var(--theme\.color\.grey-dark));
  transition: outline 0.1s;
}

.rule-606:hover {
    outline-color: hsl(var(--theme\.color\.grey-dark));
    outline-width: var(--theme\.value\.4);
    outline-offset: -1px;
  }

.rule-606[data-option-active] {
    pointer-events: none;
    outline-color: hsl(var(--theme\.color\.black));
    outline-offset: var(--theme\.value\.2);
  }

.rule-606[aria-label]::after {
  pointer-events: none;
  content: attr(aria-label) ' ';
  position: absolute;
  z-index: 1;
  bottom: calc(100% + 0.75rem);
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: hsl(0 0% 90%);
  letter-spacing: 1px;
  opacity: 0;
  background-color: hsl(0 0% 35%);
}

.rule-606[aria-label]:hover::after {
  opacity: 1;
}

.rule-606[aria-label]::before {
  content: '';
  position: absolute;
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: calc(50% - 0.5rem);
  transform: translateX(-50%);
  transform: rotate(-45deg);
  display: block;
  width: 1rem;
  height: 1rem;
  border-radius: 0 0 0 0.25em;
  opacity: 0;
  background-color: hsl(0 0% 35%);
  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}

.rule-606[aria-label]:hover::before {
  opacity: 1;
}

@media (max-width: calc(56em - 1px)) {
  .rule-606[aria-label]::before,
  .rule-606[aria-label]::after {
    display: none;
  }
}

.rule-842:not([data-option-active]) {
    display: none;
  }

.rule-585 {
  font-size: var(--theme\.font-size\.medium\:responsive);
  line-height: var(--theme\.line-height\.medium\:responsive);
  color: hsl(var(--theme\.color\.black));
}

.rule-277 {
  font-size: var(--theme\.font-size\.normal\:responsive);
  line-height: var(--theme\.line-height\.normal\:responsive);
  /*color: hsl(var(--theme\.color\.grey-dark));*/
}

.rule-277 span:not([data-option-active]) {
    display: none;
  }

.rule-925 {
  display: flex;
  grid-area: D;
  flex-direction: column;
  gap: var(--theme\.size\.small\:responsive);
}

.rule-879 {
  display: grid;
  grid-area: E;
  gap: var(--theme\.size\.small\:responsive);
}

.rule-500 {
  display: flex;
  gap: var(--theme\.size\.small\:responsive);
}

.rule-752 {
  display: flex;
  grid-area: F;
  flex-direction: column;
  gap: var(--theme\.size\.small\:responsive);
}

.rule-278 {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-min-content;
  height: min-content;
  padding-block: var(--theme\.size\.small\:responsive);
  padding-inline: var(--theme\.size\.medium\:responsive);
  border-radius: var(--theme\.radius\.round);
  font-size: var(--theme\.font-size\.small\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03125em;
  outline-offset: calc(var(--theme\.value\.2) * -1);
  transition:
    background-color var(--theme\.duration\.fast),
    color var(--theme\.duration\.fast),
    outline-color var(--theme\.duration\.fast);
}

.rule-278disabled,
  .rule-278[data-disabled] {
    pointer-events: none;
    filter: contrast(0.75) opacity(0.5);
  }

.rule-278 {
  color: hsl(var(--theme\.color\.black));
  background-color: hsl(var(--theme\.color\.primary));
  outline: var(--theme\.value\.2) solid hsl(var(--theme\.color\.primary));
}

.rule-278:hover {
    color: hsl(var(--theme\.color\.black));
    background-color: hsl(var(--theme\.color\.white));
    outline-color: hsl(var(--theme\.color\.primary-dark));
  }

.rule-278 {

  width: 100%;
  padding-inline: var(--theme\.size\.small\:responsive);
}

.rule-482 {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-min-content;
  height: min-content;
  padding-block: var(--theme\.size\.small\:responsive);
  padding-inline: var(--theme\.size\.medium\:responsive);
  border-radius: var(--theme\.radius\.round);
  font-size: var(--theme\.font-size\.small\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03125em;
  outline-offset: calc(var(--theme\.value\.2) * -1);
  transition:
    background-color var(--theme\.duration\.fast),
    color var(--theme\.duration\.fast),
    outline-color var(--theme\.duration\.fast);
}

.rule-482disabled,
  .rule-482[data-disabled] {
    pointer-events: none;
    filter: contrast(0.75) opacity(0.5);
  }

.rule-482 {
  color: hsl(var(--theme\.color\.black));
  background-color: hsl(var(--theme\.color\.white));
  outline: var(--theme\.value\.2) solid hsl(var(--theme\.color\.black));
}

.rule-482:hover {
    color: hsl(var(--theme\.color\.white));
    background-color: hsl(var(--theme\.color\.black));
  }

.rule-482 {

  width: 100%;
}

.rule-700 {
}

/*
  Navigation
*/

/*
  Subsection
*/

/*
  Product
*/

/* Product media */

/* Product data */

/* Product action */

/*
  Extra features
*/

.rule-895 {
}

/* Intro  */

.rule-232 {
  padding-block: var(--theme\.size\.huge\:responsive);
  padding-inline: 1rem;
}

@media (min-width: 32em) {

.rule-232 {
    padding-inline: max(5dvw, calc((100vw - 90rem) / 2));
}
  }

.rule-232 {

  position: relative;
  z-index: 1;
  overflow: clip;
  display: grid;
  min-height: 36rem;
  background-color: hsl(var(--theme\.color\.accent) / 0.225);
}

.rule-727 {
  position: absolute;
  z-index: -1;
  inset: 0;
}

.rule-238 {
}

.rule-596 {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: calc(64em - 1px)) {

.rule-596 {
    -o-object-position: 50% calc(100% + 16rem);
       object-position: 50% calc(100% + 16rem)
}
  }

@media (max-width: calc(56em - 1px)) {

.rule-596 {
    -o-object-position: 50% calc(100% + 14rem);
       object-position: 50% calc(100% + 14rem)
}
  }

@media (max-width: calc(48em - 1px)) {

.rule-596 {
    -o-object-position: 50% calc(100% + 12rem);
       object-position: 50% calc(100% + 12rem)
}
  }

@media (max-width: calc(44em - 1px)) {

.rule-596 {
    -o-object-position: 50% calc(100% + 10rem);
       object-position: 50% calc(100% + 10rem)
}
  }

@media (max-width: calc(40em - 1px)) {

.rule-596 {
    -o-object-position: 50% calc(100% + 8rem);
       object-position: 50% calc(100% + 8rem)
}
  }

@media (max-width: calc(36em - 1px)) {

.rule-596 {
    -o-object-position: 50% calc(100% + 6rem);
       object-position: 50% calc(100% + 6rem)
}
  }

@media (max-width: calc(32em - 1px)) {

.rule-596 {
    -o-object-position: 50% calc(100% + 4rem);
       object-position: 50% calc(100% + 4rem)
}
  }

@media (max-width: calc(28em - 1px)) {

.rule-596 {
    -o-object-position: 50% 100%;
       object-position: 50% 100%
}
  }

.rule-613 {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  row-gap: var(--theme\.size\.normal\:responsive);
  justify-content: center;
}

@media (max-width: calc(64em - 1px)) {

.rule-613 {
    align-self: start;
    padding-bottom: 28rem
}
  }

@media (max-width: calc(56em - 1px)) {

.rule-613 {
    align-self: start;
    padding-bottom: 26rem
}
  }

@media (max-width: calc(48em - 1px)) {

.rule-613 {
    padding-bottom: 24rem
}
  }

@media (max-width: calc(44em - 1px)) {

.rule-613 {
    padding-bottom: 22rem
}
  }

@media (max-width: calc(40em - 1px)) {

.rule-613 {
    padding-bottom: 20rem
}
  }

@media (max-width: calc(36em - 1px)) {

.rule-613 {
    padding-bottom: 18rem
}
  }

@media (min-width: 64em) {

.rule-613 {
    max-width: 28rem
}
  }

@media (min-width: 72em) {

.rule-613 {
    max-width: 36rem
}
  }

.rule-994 {
  display: inline-flex;
  flex-direction: column;
  gap: var(--theme\.size\.micro\:responsive);
}

.rule-383 {
  font-size: var(--theme\.font-size\.semi-large\:responsive);
  line-height: var(--theme\.line-height\.semi-large\:responsive);
  color: hsl(var(--theme\.color\.white-dark-grey));
}

.rule-287 {
  font-size: var(--theme\.font-size\.huge\:responsive);
  line-height: var(--theme\.line-height\.huge\:responsive);
  color: hsl(var(--theme\.color\.white));
}

.rule-658 {
  font-size: var(--theme\.font-size\.medium\:responsive);
  line-height: var(--theme\.line-height\.medium\:responsive);
  color: hsl(var(--theme\.color\.white-dark-grey));
}

.rule-898 {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-min-content;
  height: min-content;
  padding-block: var(--theme\.size\.small\:responsive);
  padding-inline: var(--theme\.size\.medium\:responsive);
  border-radius: var(--theme\.radius\.round);
  font-size: var(--theme\.font-size\.small\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03125em;
  outline-offset: calc(var(--theme\.value\.2) * -1);
  transition:
    background-color var(--theme\.duration\.fast),
    color var(--theme\.duration\.fast),
    outline-color var(--theme\.duration\.fast);
}

.rule-898disabled,
  .rule-898[data-disabled] {
    pointer-events: none;
    filter: contrast(0.75) opacity(0.5);
  }

.rule-898 {
  color: hsl(var(--theme\.color\.white));
  background-color: hsl(var(--theme\.color\.accent));
  outline: var(--theme\.value\.2) solid hsl(var(--theme\.color\.white));
}

.rule-898:hover {
    color: hsl(var(--theme\.color\.accent));
    background-color: hsl(var(--theme\.color\.white));
  }

.rule-898 {

  margin-block-start: var(--theme\.size\.tiny\:responsive);
}

.rule-795 {
}

/* Advanced  */

.rule-687 {
  padding-block: var(--theme\.size\.huge\:responsive);

  overflow: clip;
  background-color: hsl(var(--theme\.color\.accent) / 0.075);
}

.rule-756 {
  padding-inline: 1rem;
}

@media (min-width: 32em) {

.rule-756 {
    padding-inline: max(5dvw, calc((100vw - 90rem) / 2));
}
  }

.rule-756 {

  margin-block-end: var(--theme\.size\.extra-large\:responsive);
}

.rule-214 {
  display: flex;
  flex-direction: column;
  gap: var(--theme\.size\.normal\:responsive);
  max-width: 48rem;
}

.rule-220 {
  font-size: var(--theme\.font-size\.huge\:responsive);
  line-height: var(--theme\.line-height\.huge\:responsive);
  color: hsl(var(--theme\.color\.black));
}

.rule-442 {
  font-size: var(--theme\.font-size\.medium\:responsive);
  line-height: var(--theme\.line-height\.medium\:responsive);
  color: hsl(var(--theme\.color\.grey-black));
}

.rule-189 {
  scroll-behavior: smooth;
  scrollbar-width: none;
  scroll-padding-inline: 1rem;
  scroll-snap-type: inline mandatory;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  display: grid;
  grid-auto-columns: calc(100% - 2rem);
  grid-auto-flow: column;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  padding-inline: 1rem;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 32em) {

.rule-189 {
    scroll-padding-inline: max(5dvw, calc((100vw - 90rem) / 2));
    -moz-column-gap: 5dvw;
         column-gap: 5dvw;
    padding-inline: max(5dvw, calc((100vw - 90rem) / 2))
}
  }

@media (min-width: 64em) {

.rule-189 {
    grid-auto-columns: calc(50% - 5dvw)
}
  }

@media (min-width: 96em) {

.rule-189 {
    -moz-column-gap: var(--theme\.size\.extra-large\:responsive);
         column-gap: var(--theme\.size\.extra-large\:responsive)
}
  }

.rule-707 {
  scroll-snap-align: center;
}

@media (min-width: 64em) {

.rule-707 {
    scroll-snap-align: start
}
  }

.rule-965 {
  display: flex;
  flex-direction: column;
  row-gap: var(--theme\.size\.small\:responsive);
}

.rule-160 {
  font-size: var(--theme\.font-size\.semi-large\:responsive);
  line-height: var(--theme\.line-height\.semi-large\:responsive);
  color: hsl(var(--theme\.color\.black));
}

.rule-511 {
  display: grid;
  aspect-ratio: 8 / 6;
  /*height: inherit;*/
  margin-block-end: calc(var(--theme\.size\.medium\:responsive) / 2);
  border: var(--theme\.value\.8) solid hsl(var(--theme\.color\.white));
  border-radius: var(--theme\.radius\.large);
  background-color: hsl(var(--theme\.color\.white-neutral-grey));
  box-shadow: 0 0 0.5rem 0 hsl(0 0% 0% / 0.1);
}

@media (min-width: 36em) {

.rule-511 {
    aspect-ratio: 8 / 5.5
}
  }

.rule-990 {
  position: relative;
  /*height: 100%;*/
  /*max-height: 28rem;*/
  overflow: clip;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  flex-grow: 1;
  aspect-ratio: 8 / 6;
  border-radius: var(--theme\.radius\.medium);
}

@media (min-width: 36em) {

.rule-990 {
    aspect-ratio: 8 / 5.5
}
  }

.rule-706 {
}

.rule-437 {
  /*height: 100%;*/
  /*max-height: 28rem;*/
  overflow: clip;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  flex-grow: 1;
  border-radius: var(--theme\.radius\.medium);
}

.rule-664 {
  aspect-ratio: 8 / 6;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top;
     object-position: top;
}

@media (min-width: 36em) {

.rule-664 {
    aspect-ratio: 8 / 5.5
}
  }

.rule-526 {
  position: relative;
  display: inline-flex;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-items: end;
  justify-content: center;
  padding-block: var(--theme\.size\.small\:responsive);
  padding-inline: var(--theme\.size\.small\:responsive);
  text-align: center;
}

.rule-316 {
  padding-block: var(--theme\.size\.micro\:responsive);
  padding-inline: var(--theme\.size\.small\:responsive);
  border-radius: var(--theme\.radius\.medium);
  font-size: var(--theme\.font-size\.normal\:responsive);
  font-style: oblique;
  line-height: var(--theme\.line-height\.normal\:responsive);
  color: hsl(var(--theme\.color\.grey-dark));
  background-color: hsl(var(--theme\.color\.white-faint) / 0.75);
}

.rule-251 {
  padding-inline: 1rem;
}

@media (min-width: 32em) {

.rule-251 {
    padding-inline: max(5dvw, calc((100vw - 90rem) / 2));
}
  }

.rule-251 {

  display: flex;
  flex-direction: row;
  gap: var(--theme\.font-size\.normal\:responsive);
  justify-content: start;
  margin-block-start: calc(var(--theme\.size\.medium\:responsive) / 2);
}

[data-device='mobile'] .rule-251 {
    display: none;
  }

[dir='rtl'] .rule-251 {
    display: none;
  }

/*
  Miscellaneous
*/

.rule-470 {
}

.rule-572 {
  padding-block: var(--theme\.size\.huge\:responsive);
  padding-inline: 1rem;
}

@media (min-width: 32em) {

.rule-572 {
    padding-inline: max(5dvw, calc((100vw - 90rem) / 2));
}
  }

.rule-572 {

  display: grid;
  row-gap: var(--theme\.size\.extra-large\:responsive);
}

/* Title */

.rule-993 {
  display: flex;
  flex-direction: column;
  gap: var(--theme\.size\.normal\:responsive);
  max-width: 48rem;
}

.rule-963 {
  font-size: var(--theme\.font-size\.huge\:responsive);
  line-height: var(--theme\.line-height\.huge\:responsive);
  color: hsl(var(--theme\.color\.black));
}

.rule-779 {
  font-size: var(--theme\.font-size\.medium\:responsive);
  line-height: var(--theme\.line-height\.medium\:responsive);
  color: hsl(var(--theme\.color\.grey-black));
}

/* Content */

.rule-732 {
}

.rule-589 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: var(--theme\.size\.semi-large\:responsive);
  -moz-column-gap: var(--theme\.size\.semi-large\:responsive);
       column-gap: var(--theme\.size\.semi-large\:responsive);
}

@media (min-width: 48em) {

.rule-589 {
    grid-template-columns: repeat(3, 1fr)
}
  }

@media (min-width: 56em) {

.rule-589 {
    grid-template-columns: repeat(4, 1fr);
    -moz-column-gap: var(--theme\.size\.extra-large\:responsive);
         column-gap: var(--theme\.size\.extra-large\:responsive)
}
  }

@media (min-width: 72em) {

.rule-589 {
    grid-template-columns: repeat(5, 1fr)
}
  }

.rule-537 {
  display: flex;
  flex-direction: column;
  gap: var(--theme\.size\.tiny\:responsive);
}

.rule-273 {
}

.rule-506 {
  aspect-ratio: 1 / 1;
  width: var(--theme\.size\.semi-large);
  height: auto;
  border-radius: var(--theme\.radius\.circle);
  background-color: hsl(var(--theme\.color\.grey-dark));
}

.rule-920 {
}

.rule-635 {
  display: flex;
  flex-direction: column;
  gap: var(--theme\.size\.tiny\:responsive);
}

.rule-796 {
  font-size: var(--theme\.font-size\.medium\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  line-height: var(--theme\.line-height\.medium\:responsive);
  color: hsl(var(--theme\.color\.black));
}

.rule-198 {
  font-size: var(--theme\.font-size\.normal\:responsive);
  line-height: var(--theme\.line-height\.normal\:responsive);
  color: hsl(var(--theme\.color\.grey-dark));
}

/*.rule-997 {
  display: none;
}*/

/*
  Content banner
*/

.rule-181 {
}

.rule-677 {
  padding-block: var(--theme\.size\.huge\:responsive);
  padding-inline: 1rem;
}

@media (min-width: 32em) {

.rule-677 {
    padding-inline: max(5dvw, calc((100vw - 90rem) / 2));
}
  }

.rule-677 {

  position: relative;
  z-index: 1;
  display: grid;
}

@media (min-width: 36em) {

.rule-677 {
    min-height: clamp(24rem, calc(100svh - 3.5rem), 36rem)
}
  }

.rule-407 {
  position: absolute;
  inset: 0;
}

.rule-829 {
}

.rule-840 {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

@media (max-width: calc(36em - 1px)) {

.rule-840 {
    -o-object-position: 50% 100%;
       object-position: 50% 100%
}
  }

.rule-183 {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  row-gap: var(--theme\.size\.normal\:responsive);
  justify-content: center;
}

@media (max-width: calc(36em - 1px)) {

.rule-183 {
    align-self: start;
    padding-bottom: 28rem
}
  }

@media (max-width: calc(32em - 1px)) {

.rule-183 {
    align-self: start;
    padding-bottom: 24rem
}
  }

@media (max-width: calc(28em - 1px)) {

.rule-183 {
    align-self: start;
    padding-bottom: 20rem
}
  }

@media (max-width: calc(24em - 1px)) {

.rule-183 {
    align-self: start;
    padding-bottom: 18rem
}
  }

@media (min-width: 36em) {

.rule-183 {
    max-width: 22rem
}
  }

@media (min-width: 64em) {

.rule-183 {
    max-width: 36rem
}
  }

.rule-652 {
  display: inline-flex;
  flex-direction: column;
  gap: var(--theme\.size\.micro\:responsive);
}

.rule-478 {
  font-size: var(--theme\.font-size\.semi-large\:responsive);
  line-height: var(--theme\.line-height\.semi-large\:responsive);
  color: hsl(var(--theme\.color\.white-dark-grey));
}

.rule-634 {
  font-size: var(--theme\.font-size\.huge\:responsive);
  line-height: var(--theme\.line-height\.huge\:responsive);
  color: hsl(var(--theme\.color\.white));
}

.rule-150 {
  font-size: var(--theme\.font-size\.medium\:responsive);
  line-height: var(--theme\.line-height\.medium\:responsive);
  color: hsl(var(--theme\.color\.white-dark-grey));
}

.rule-544 {
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  height: -moz-min-content;
  height: min-content;
  padding-block: var(--theme\.size\.small\:responsive);
  padding-inline: var(--theme\.size\.medium\:responsive);
  border-radius: var(--theme\.radius\.round);
  font-size: var(--theme\.font-size\.small\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03125em;
  outline-offset: calc(var(--theme\.value\.2) * -1);
  transition:
    background-color var(--theme\.duration\.fast),
    color var(--theme\.duration\.fast),
    outline-color var(--theme\.duration\.fast);
}

.rule-544disabled,
  .rule-544[data-disabled] {
    pointer-events: none;
    filter: contrast(0.75) opacity(0.5);
  }

.rule-544 {
  color: hsl(var(--theme\.color\.black));
  background-color: hsl(var(--theme\.color\.primary));
  outline: var(--theme\.value\.2) solid hsl(var(--theme\.color\.primary));
}

.rule-544:hover {
    color: hsl(var(--theme\.color\.black));
    background-color: hsl(var(--theme\.color\.white));
    outline-color: hsl(var(--theme\.color\.primary-dark));
  }

.rule-544 {

  margin-block-start: var(--theme\.size\.tiny\:responsive);
}

.rule-859 {
}

/*
  Dialog
  ------------------------------------------------------------------------------
*/

.rule-170 {
  inset-block-start: 50%;
  transform: translateY(-50%);
  overflow: clip;
  width: calc(100% - (1rem * 2));
  max-width: 52rem;
  max-height: 80dvh;
  margin-inline: auto;
  padding-block: var(--theme\.size\.large\:responsive);
  border-radius: var(--theme\.radius\.large);
  color: inherit;
}

.rule-170::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

.rule-170[open] {
    display: flex;
    flex-direction: column;
  }

@media (min-width: 32em) {

.rule-170 {
    width: calc(100% - (5dvw * 2))
}
  }

.rule-837 {
  position: relative;
  padding-inline: var(--theme\.size\.small\:responsive);
}

@media (min-width: 36em) {

.rule-837 {
    padding-inline: var(--theme\.size\.semi-large\:responsive)
}
  }

.rule-246 {
  cursor: pointer;
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-end: calc(var(--theme\.size\.small) + var(--theme\.size\.tiny\:responsive));
  transform: translateY(-50%);
  display: block;
}

.rule-723 {
  position: relative;
  overflow-y: hidden;
  display: flex;
}

.rule-723::before {
    pointer-events: none;
    content: '';
    position: absolute;
    inset: -1px var(--theme\.size\.small\:responsive);
    background: linear-gradient(hsl(var(--theme\.color\.white)) var(--theme\.size\.small\:responsive), transparent var(--theme\.size\.large\:responsive) calc(100% - var(--theme\.size\.large\:responsive)), hsl(var(--theme\.color\.white)) calc(100% - var(--theme\.size\.small\:responsive)));
  }

.rule-905 {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  row-gap: var(--theme\.size\.normal\:responsive);
  padding-block: var(--theme\.size\.large\:responsive);
  padding-inline: var(--theme\.size\.small\:responsive);
}

.rule-905::-webkit-scrollbar-thumb {
    border: calc(var(--theme\.size\.small) / 3) solid transparent;
  }

.rule-905::-webkit-scrollbar-track {
    background: transparent;
  }

@media (min-width: 36em) {

.rule-905 {
    padding-inline: var(--theme\.size\.semi-large\:responsive)
}
  }

.rule-716 {
  margin-inline-end: var(--theme\.size\.huge\:responsive);
  font-size: var(--theme\.font-size\.large\:responsive);
  line-height: var(--theme\.line-height\.large\:responsive);
  color: hsl(var(--theme\.color\.black));
}

.rule-107 {
  display: flex;
  flex-direction: column;
  row-gap: var(--theme\.size\.normal\:responsive);
  padding-block: var(--theme\.size\.normal\:responsive);
  padding-inline: var(--theme\.size\.medium\:responsive);
  border-radius: var(--theme\.radius\.semi-large);
  background-color: #eaeaea;
}

.rule-962 {
  display: flex;
  flex-direction: column;
  row-gap: var(--theme\.size\.normal\:responsive);
}

.rule-897 {
  font-size: var(--theme\.font-size\.medium\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  line-height: var(--theme\.line-height\.medium\:responsive);
  color: hsl(var(--theme\.color\.black-light-grey));
}

.rule-141 {
  display: flex;
  flex-direction: column;
  row-gap: var(--theme\.size\.micro\:responsive);
  font-size: var(--theme\.font-size\.normal\:responsive);
  font-weight: var(--theme\.font-weight\.bold);
  line-height: var(--theme\.line-height\.normal\:responsive);
  color: hsl(var(--theme\.color\.grey-dark));
}

.rule-820 {
}

.rule-428 {
}

.rule-310 {
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--theme\.size\.micro\:responsive) / 2);
  margin-inline-start: var(--theme\.size\.normal\:responsive);
  list-style-type: disc;
}

.rule-319 {
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--theme\.size\.micro\:responsive) / 2);
}

.rule-562 {
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--theme\.size\.micro\:responsive) / 2);
  margin-inline-start: var(--theme\.size\.normal\:responsive);
}

.rule-542 {
}

/*
  Footer
  ------------------------------------------------------------------------------
*/

/*
  Generic
*/

.rule-881 {
}

.rule-307 {
  padding-block: var(--theme\.size\.huge\:responsive);
  padding-inline: 1rem;
}

@media (min-width: 32em) {

.rule-307 {
    padding-inline: max(5dvw, calc((100vw - 90rem) / 2));
}
  }

.rule-307 {

  color: hsl(var(--theme\.color\.grey-dark));
  background-color: hsl(var(--theme\.color\.white-neutral-grey));
}

.rule-499 {
  --element\.height: var(--theme\.value\.2);

  height: var(--element\.height);
  margin-block: calc(var(--theme\.size\.semi-large\:responsive) - (var(--element\.height) / 2));
  border: 0;
  border-radius: var(--theme\.radius\.round);
  color: hsl(var(--theme\.color\.grey-white));
  background-color: currentColor;
}

.rule-800 {
}

.rule-399 {
  display: grid;
  gap: var(--theme\.size\.semi-large\:responsive);
  place-items: center;
}

@media (min-width: 48em) {
  .rule-399 {
    display: flex;
  }
}

/*
  Footnotes
*/

.rule-851 {
}

.rule-529 {
  margin-block-end: var(--theme\.size\.tiny\:responsive);
  font-size: var(--theme\.font-size\.medium\:responsive);
  font-weight: var(--theme\.font-weight\.medium);
  line-height: var(--theme\.line-height\.medium\:responsive);
  color: hsl(var(--theme\.color\.black-light-grey));
}

.rule-472 {
  display: grid;
  gap: var(--theme\.size\.micro\:responsive);
}

.rule-849 {
  display: grid;
  gap: var(--theme\.size\.micro\:responsive);
}

.rule-514 {
}

.rule-784 {
  font-size: var(--theme\.font-size\.small\:responsive);
  line-height: var(--theme\.line-height\.small\:responsive);
}

.rule-527 {
  font-weight: var(--theme\.font-weight\.light);
}

.rule-527 b {
    font-weight: var(--theme\.font-weight\.bold);
  }

.rule-936 {
}

.rule-454 {
  font-weight: bolder;
  color: hsl(var(--theme\.color\.primary-black));
  transition: color var(--theme\.duration\.fast);
}

.rule-454:hover {
    color: hsl(var(--theme\.color\.primary-dark));
  }

/*
  Logo
*/

.rule-424 {
}

.rule-710 {
  display: block;
  width: var(--theme\.size\.large);
  height: var(--theme\.size\.large);
  padding: var(--theme\.size\.small);
  border-radius: var(--theme\.radius\.circle);
  color: hsl(var(--theme\.color\.black));
  background-color: hsl(var(--theme\.color\.primary));
}

.rule-291 {
  aspect-ratio: 1 / 1;
  width: var(--theme\.size\.medium);
}

/*
  Copyright
*/

.rule-770 {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 36rem;
  height: 100%;
}

.rule-233 {
  font-size: var(--theme\.font-size\.small\:responsive);
  line-height: var(--theme\.line-height\.small\:responsive);
}

.rule-174 {
}

/*
  Social links
*/

.rule-935 {
  grid-column: span 2;
}

@media (min-width: 48em) {
  .rule-935 {
    margin-inline-start: auto;
  }
}

.rule-660 {
  display: flex;
  gap: var(--theme\.size\.normal\:responsive);
  line-height: 0;
}

.rule-168 {
}

.rule-590 {
  color: hsl(var(--theme\.color\.white));
}

.rule-852 {
  filter: invert(35%);
}

/* 
  ==============================================================================
  Utilities
  ==============================================================================
*/

/*
  Hide visually and from screen readers.
*/

.hidden,
[hidden] {
  display: none !important;
}

/*
  Hide only visually, but have it available for screen readers.

  1. For long content, line feeds are not interpreted as spaces and small width causes content to wrap 1 word per line.
*/

.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px; /* 1*/
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  clip: rect(0, 0, 0, 0);
}

/*
  Extends the .visually-hidden class to allow the element to be focusable when navigated to via the keyboard.
*/

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  position: static;
  overflow: visible;
  width: auto;
  height: auto;
  margin: 0;
  white-space: inherit;
  clip: auto;
}

/*
  Hide visually and from screen readers, but maintain layout.
*/

.invisible {
  visibility: hidden;
}

/*
  Clearfix: contain floats
  1. The use of `table` rather than `block` is only necessary if using `::before` to contain the top-margins of child elements.
*/

.clearfix::before,
.clearfix::after {
  content: '';
  display: table; /* 1 */
}

.clearfix::after {
  clear: both;
}