.urble-dialog {
  position: fixed;
  z-index: 9999;
  height: fit-content;
  max-height: 85vh;
  /* Center the dialog without stretching it to edges */
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: 720px;
  max-width: calc(100% - 64px);
  padding: 32px;
  background: var(--_Prim-Color-light-000-White);
  box-shadow: var(--urble-box-shadow-light);
  color: var(--_Prim-Color-dark-100-Brand);
  font-size: 16px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* Ensure inner content can scroll without overflowing the rounded corners */
  overflow-x: scroll;
  box-sizing: border-box;

  &.urble-dialog-confirm {
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 32px;

    button {
      margin-inline-start: auto;
      cursor: pointer;
      background: var(--urble-linear-gradient);
    }
  }

  .urble-dialog-header {
    display: flex;
    justify-content: space-between;
    font-size: 32px;

    h1 {
      font-family: Quicksand;
      font-size: 48px;
      line-height: 48px;
      padding-bottom: 16px;
    }

    .urble-close-dialog {
      cursor: pointer;
      height: fit-content;
    }
  }

  .urble-dialog-message {
    font-size: 20px;
  }

  a {
    text-decoration: underline;
  }
}

.urble-dialog-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 8888;
  min-height: 100%;
  min-width: 100%;
  backdrop-filter: brightness(0.5);
  filter: blur(10px);
}

.urble-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: flex-end;
  gap: 16px;
}

.urble-dialog-section {
  flex-direction: column;
  display: flex;
  gap: 16px;
  margin-top: 16px;

  & .urble-dialog-section-header {
    display: flex;
    gap: 8px;
    align-items: center;

    input[type='checkbox'] {
      width: 16px;
      height: 16px;
    }
  }
}

.urble-hidden {
  display: none;
}

.mailchimp-clear {
  justify-self: flex-end;
}

.gdpr {
  width: auto !important;
}

.content__gdpr {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.urble-dialog-content {
  /* Allow the content area to take remaining space and scroll */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  font-size: 16px;
}

/* Smaller type on short-height (mobile) viewports */
@media (max-width: 700px) {
  .urble-dialog {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    border-radius: 0;
  }

  .urble-dialog-header {
    display: flex;
    justify-content: space-between;
    font-size: 24px;

    h1 {
      font-size: 32px !important;
      line-height: 32px !important;
    }
    .urble-dialog-content {
      font-size: 14px;
    }
  }
  .urble-dialog-message {
    font-size: 14px !important;
  }

  .urble-dialog-actions {
    margin-top: 16px;
  }
}

.urble-footer {
  margin-top: 32px;
  bottom: 0;
  width: 100%;
  height: fit-content;
  display: flex;
  justify-content: center;

  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  text-align: left;
  color: var(--_Prim-Color-light-000-White);

  .urble-footer_content {
    position: relative;
    width: calc(100% - 32px);
    max-width: 1460px;
    background: var(--_Prim-Color-dark-100-Brand);

    border-top-left-radius: 64px;
    border-top-right-radius: 64px;
    padding-top: 62px;

    .urble-link_button {
      border: 1px solid var(--_Prim-Color-light-000-White);
    }

    a:not(.urble-link_button):hover {
      text-decoration: underline;
    }

    .urble-footer_content_navigation {
      padding-inline-start: 118px;
      padding-inline-end: 118px;

      display: flex;
      flex-direction: column;
      gap: 12px;

      .urble-footer_content_navigation_start {
        display: flex;
        flex-direction: row;
        gap: 96px;
        justify-content: space-between;

        .urble-footer_content_start {
          display: flex;
          flex-direction: column;
          gap: 12px;

          .urble-footer_content_start_label {
            font-family: Quicksand;
            font-weight: 700;
            font-size: 30px;
            line-height: 30px;
          }
        }

        .urble-footer_content_social {
          display: flex;
          flex-direction: column;
          gap: 15px;
          margin-top: 24px;

          .urble-footer_content_social_buttons {
            display: flex;
            gap: 15px;
          }
        }
      }

      .urble-footer_content_navigation_end {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        flex-grow: 1;

        nav ul {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }
      }
    }

    .urble-footer_content_about {
      padding-bottom: 32px;
      padding-top: 32px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 64px;

      .urble-footer_menu ul {
        display: flex;
        flex-direction: row;
        gap: 24px;
      }

      .urble-footer_logo {
        img {
          width: auto;
          height: 36px;
          -webkit-filter: invert(100%);
          filter: invert(100%);
        }
      }
    }
  }

  .urble-footer-figure-1 {
    width: 487px;
    height: 487px;
    border-radius: 50%;
    background: var(--urble-linear-gradient);
    position: absolute;
    z-index: -3;
    left: -160px;
    bottom: 0;
  }

  .urble-footer-figure-2 {
    width: 196px;
    height: 196px;
    border-radius: 50%;
    background: var(--urble-linear-gradient);
    position: absolute;
    z-index: -3;
    bottom: 32px;
    right: -64px;
  }

  .urble-x-icon {
    border-radius: 999px;
    border: 1px solid #fff;
    width: 48px;
  }
}

@media (max-width: 1120px) {
  .urble-footer {
    .urble-footer_content {
      border-radius: 0;
    }

    .urble-footer-figure-1 {
      display: none;
    }

    .urble-footer-figure-2 {
      display: none;
    }

    .urble-footer_content {
      width: 100%;
      min-width: 100%;
      margin: 0;
      padding-top: 32px;

      .urble-footer_content_navigation {
        display: flex;
        flex-direction: column;
        justify-content: start;
        padding: 32px;

        .urble-footer_content_navigation_start {
          display: flex;
          flex-direction: column;
          gap: 32px;
        }

        .urble-footer_content_navigation_end {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          gap: 32px;
        }

        .urble-footer_content_about {
          display: flex;
          flex-direction: column;
          align-items: start;
          padding-top: 0;
          gap: 32px;

          .urble-footer_menu ul {
            display: flex;
            flex-direction: column;
            gap: 8px;
          }
        }
      }
    }
  }
}

urble-download-cta {
  display: block;
  width: 100%;
}

.urble-download-cta {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 48px;
  box-sizing: border-box;
  min-height: 160px;
  padding: 24px 64px;
  border-radius: 24px;
  background: var(--_Prim-Color-dark-100-Brand);
  color: var(--_Prim-Color-light-000-White);
}

.urble-download-cta__copy,
.urble-download-cta .urble-download {
  position: relative;
  z-index: 1;
}

.urble-download-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 336px;
  max-width: 100%;
}

.main .urble-download-cta__copy h2 {
  margin: 0;
  color: var(--_Prim-Color-light-000-White);
  font-family: Quicksand;
  font-size: 30px;
  line-height: 30px;
  font-weight: 700;
}

.urble-download-cta__copy p {
  margin: 0;
  color: var(--_Prim-Color-light-100);
  font-size: 16px;
  line-height: 22.4px;
}

.urble-download-cta .urble-circle-1,
.urble-download-cta .urble-circle-2,
.urble-download-cta .urble-circle-3 {
  position: absolute;
  border-radius: 600px;
  background: var(--urble-linear-gradient);
  pointer-events: none;
  z-index: 0;
}

.urble-download-cta .urble-circle-1 {
  top: 24px;
  left: -56px;
  width: 114px;
  height: 114px;
}

.urble-download-cta .urble-circle-2 {
  top: 24px;
  right: -40px;
  width: 66px;
  height: 66px;
}

.urble-download-cta .urble-circle-3 {
  top: -24px;
  right: 72px;
  width: 49px;
  height: 49px;
}

@media (min-width: 1121px) {
  .main .urble-download-cta .urble-download {
    grid-template: 'badges qr' auto / 144px auto;
    column-gap: 32px;
    row-gap: 0;
    align-items: center;
  }

  .main .urble-download-cta .urble-download__badges {
    flex-direction: column;
    gap: 16px;
  }

  .main .urble-download-cta .urble-download__badges > a > img {
    width: 144px !important;
  }

  .main .urble-download-cta .urble-download-qr {
    grid-area: qr;
    display: grid;
    grid-template-columns: 1px 96px 168px;
    align-items: center;
    gap: 24px;
    width: auto;
    padding: 0;
    text-align: left;
  }

  .main .urble-download-cta .urble-download-qr::before {
    content: '';
    width: 1px;
    height: 96px;
    background: var(--urble-color-surface-inverse-low-emphasis);
  }

  .main .urble-download-cta .urble-download-qr__link {
    grid-column: 2;
    grid-row: 1;
    align-items: center;
    justify-content: center;
  }

  .main .urble-download-cta .urble-download-qr__image {
    width: 80px !important;
    height: 80px !important;
  }

  .main .urble-download-cta .urble-download .urble-download-qr__title {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    max-width: 168px;
    color: var(--_Prim-Color-light-100);
    font-family: Roboto;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    text-align: left;
  }
}

@media (max-width: 1120px) {
  .urble-download-cta {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px;
    text-align: center;
  }

  .urble-download-cta__copy {
    align-items: center;
    width: 560px;
  }

  .main .urble-download-cta__copy h2 {
    font-size: 26px;
    line-height: 26px;
    text-align: center;
  }

  .urble-download-cta .urble-download {
    margin-inline: auto;
  }

  .urble-download-cta .urble-circle-1,
  .urble-download-cta .urble-circle-2,
  .urble-download-cta .urble-circle-3 {
    display: none;
  }
}

urble-start-cta {
  display: block;
  width: 100%;
}

.main .urble-card.urble-start-cta {
  flex-direction: row;
  align-items: center;
  gap: 32px;
  width: auto;
  max-width: none;
  height: auto;
  padding: 40px;
  border: 1px solid var(--_Prim-Color-light-200);
  box-shadow: var(--urble-box-shadow-light);
}

.urble-start-cta__intro {
  display: flex;
  align-items: center;
  gap: 24px;
}

.urble-start-cta__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--urble-color-surface-affirmative-default);
  border-radius: 999px;
  box-sizing: border-box;
  color: var(--urble-color-surface-affirmative-default);
}

.urble-start-cta__icon .material-symbols-rounded {
  font-size: 28px;
}

.urble-start-cta__title {
  margin: 0;
  font-family: Quicksand;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--_Prim-Color-dark-100-Brand);
}

.urble-start-cta__brand {
  color: var(--urble-color-surface-affirmative-default);
}

.urble-start-cta__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 72px;
  background: var(--_Prim-Color-light-200);
}

@media (min-width: 1121px) {
  .main .urble-start-cta .urble-download {
    grid-template: 'badges qr title' auto / auto auto auto;
    column-gap: 32px;
    row-gap: 0;
    align-items: center;
  }

  .main .urble-start-cta .urble-download__badges {
    flex-direction: row;
    gap: 32px;
  }

  .main .urble-start-cta .urble-download__badges > a > img {
    width: 152px !important;
  }

  .main .urble-start-cta .urble-download-qr__image {
    width: 80px !important;
    height: 80px !important;
  }

  .main .urble-start-cta .urble-download .urble-download-qr__title {
    justify-self: start;
    max-width: 176px;
    color: var(--_Prim-Color-dark-300);
    font-size: 14px;
    font-weight: 400;
    text-align: left;
  }
}

@media (max-width: 1120px) {
  .main .urble-card.urble-start-cta {
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    text-align: center;
  }

  .urble-start-cta__divider {
    display: none;
  }
}

.urble-floating-latest-article {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 60;
  max-width: 340px;
  width: 100%;
  background: var(--_Prim-Color-light-000-White);
  border: 1px solid rgba(34, 181, 145, 0.2);
  border-radius: 16px;
  box-shadow: var(--urble-box-shadow-light);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.urble-floating-latest-article:hover,
.urble-floating-latest-article:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--urble-box-shadow);
}

.urble-floating-latest-article__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 40px 8px 8px;
  color: var(--_Prim-Color-dark-100-Brand);
  text-decoration: none;
  border-radius: inherit;
}

.urble-floating-latest-article__link:hover,
.urble-floating-latest-article__link:focus {
  text-decoration: none;
}

.urble-floating-latest-article__link:focus-visible {
  outline: 2px solid var(--urble-color-surface-affirmative-default);
  outline-offset: 2px;
}

.urble-floating-latest-article__media {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(34, 181, 145, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.urble-floating-latest-article__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.urble-floating-latest-article__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.urble-floating-latest-article__label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.urble-floating-latest-article__title {
  font-size: 16px;
  line-height: 1.3;
  font-weight: 500;
  color: var(--_Prim-Color-dark-100-Brand);
}

.urble-floating-latest-article__close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: 12px;
  cursor: pointer;
  color: inherit;
}

.urble-floating-latest-article__close:hover,
.urble-floating-latest-article__close:focus {
  background: rgba(34, 181, 145, 0.12);
}

.urble-floating-latest-article__close:focus-visible {
  outline: 2px solid var(--urble-color-surface-affirmative-default);
  outline-offset: 2px;
}

@media (max-width: 960px) {
  .urble-floating-latest-article {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
    width: auto;
  }

  .urble-floating-latest-article__link {
    padding: 14px 44px 14px 14px;
  }

  .urble-floating-latest-article__title {
    font-size: 15px;
  }
}

@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(a0ff1e5e72e152f9a990.woff2) format("woff2");
}
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(86e1547e1ed5fbc9e69e.woff2) format("woff2");
}
.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

/* roboto-100 - cyrillic-ext_latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 100;
    src: url(f75646642f27e41d2c2a.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-100italic - cyrillic-ext_latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 100;
    src: url(bc42b3b60db62a8ac550.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-300 - cyrillic-ext_latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url(c7ca7fa949c38917f804.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-300italic - cyrillic-ext_latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 300;
    src: url(021c2b1d11296dc7efb6.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-regular - cyrillic-ext_latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(8849dda73d9a67ec0eec.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-italic - cyrillic-ext_latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 400;
    src: url(987b55174132c9f4b130.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-500 - cyrillic-ext_latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url(0bc21bc86b404872bd87.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-500italic - cyrillic-ext_latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 500;
    src: url(24e72b2b993b83b3b2bd.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-700 - cyrillic-ext_latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    src: url(e6ebd8b5c352a0c9653c.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-700italic - cyrillic-ext_latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 700;
    src: url(253a5b57c702d0af3054.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-900 - cyrillic-ext_latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 900;
    src: url(bdd9065f22975b74fadd.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* roboto-900italic - cyrillic-ext_latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Roboto';
    font-style: italic;
    font-weight: 900;
    src: url(76f44758fa40c745d505.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
/* quicksand-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 300;
    src: url(95739bae907aeb786822.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* quicksand-regular - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    src: url(c528d5140938c55dd062.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* quicksand-500 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 500;
    src: url(df7952e8a9eef08f094b.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* quicksand-600 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 600;
    src: url(f4fd8f21851ab58e60e3.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* quicksand-700 - latin */
  @font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 700;
    src: url(4bc8b625064fba4b65e8.woff2) format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a, a:hover, a:visited, a:active {
    color: inherit;
    text-decoration: none;
   }
* {
  font-family: 'Roboto', sans-serif;
}

html {
  min-height: 100%;
  overflow-x: hidden;
  scroll-behavior: smooth;

  -webkit-tap-highlight-color: transparent;

  --_Prim-Color-light-000-White: rgba(255, 255, 255, 1);
  --_Prim-Color-light-100: rgba(242, 242, 242, 1);
  --_Prim-Color-light-200: rgba(229, 229, 229, 1);
  --_Prim-Color-dark-000-Black: rgba(0, 0, 0, 1);
  --_Prim-Color-dark-100-Brand: rgba(30, 32, 34, 1);
  --_Prim-Color-dark-300: rgba(89, 89, 89, 1);
  --_Prim-Color-green-50: rgba(244, 245, 235, 1);
  --_Prim-Color-Comment: rgba(151, 71, 255, 1);

  --urble-linear-gradient: linear-gradient(40.37deg, #22b591 -0.13%, #d0e02a 100.03%);
  --urble-linear-gradient-quick: linear-gradient(40.37deg, #22b591 -0.13%, #d0e02a 100.03%);
  --urble-linear-gradient-greenish: linear-gradient(180deg, #fafafa 0%, #f1f2e1 100%);
  --urble-linear-gradient-light-yellowish: linear-gradient(40.37deg, #badbd3 -0.13%, #e1e5a8 100.03%);
  --urble-linear-gradient-violet: linear-gradient(40.37deg, #9747ff -0.13%, #ff6f91 100.03%);
  --urble-linear-gradient-amber: linear-gradient(40.37deg, #f7931a -0.13%, #ffd24d 100.03%);
  --urble-linear-gradient-light-greenish: radial-gradient(
    35.59% 37.78% at 61.07% 47.06%,
    rgba(87, 194, 21, 0.2) 0%,
    rgba(255, 255, 255, 0.5) 80%
  );
  --urble-linear-gradient-light-greenish-wide: radial-gradient(
    35.59% 47.78% at 61.07% 47.06%,
    rgba(87, 194, 21, 0.2) 0%,
    rgba(255, 255, 255, 0.5) 80%
  );
  --urble-linear-gradient-cover-left: linear-gradient(
    90deg,
    rgba(30, 32, 34, 0.76) 0%,
    rgba(30, 32, 34, 0.34) 46%,
    rgba(30, 32, 34, 0.08) 72%
  );
  --urble-linear-gradient-cover-right: linear-gradient(
    270deg,
    rgba(30, 32, 34, 0.76) 0%,
    rgba(30, 32, 34, 0.34) 46%,
    rgba(30, 32, 34, 0.08) 72%
  );
  --urble-linear-gradient-cover-mobile: linear-gradient(
    180deg,
    rgba(30, 32, 34, 0.08) 16%,
    rgba(30, 32, 34, 0.86) 100%
  );

  --urble-color-surface-affirmative-low-emphasis: rgba(235, 242, 241, 1);
  --urble-color-surface-brand-low-emphasis: rgba(244, 245, 235, 1);

  --urble-color-surface-primary-low-emphasis: rgba(247, 247, 247, 1);
  --urble-color-surface-inverse-low-emphasis: rgba(255, 255, 255, 0.1);
  --urble-color-surface-affirmative-default: rgba(34, 181, 145, 1);
  --urble-color-text-live-balance: rgba(120, 203, 93, 1);
  /* The one red in the design system, for a figure that states a loss. Same value as the
     red line in assets/graph_1.svg, so charts and copy agree. Never use it as a surface. */
  --urble-color-text-negative: rgba(238, 57, 38, 1);
  --urble-color-text-primary-disabled: rgba(128, 128, 128, 1);
  --urble-color-text-rating: rgba(226, 170, 20, 1);
  --urble-color-border-review-control: rgba(30, 32, 34, 0.14);
  --urble-color-surface-review-control: rgba(255, 255, 255, 0.82);
  --urble-color-outline-review-control: rgba(34, 181, 145, 0.28);
  --urble-color-outline-review-rail: rgba(34, 181, 145, 0.25);
  --urble-color-border-review-card: rgba(30, 32, 34, 0.08);
  --urble-color-surface-review-card: rgba(255, 255, 255, 0.86);
  --urble-color-surface-review-avatar: rgba(223, 244, 237, 1);
  --urble-color-swiss-flag: rgba(255, 0, 0, 1);

  --urble-color-ab: rgba(208, 224, 42, 1);
  --urble-box-shadow: 0px 15px 30px 0px rgba(0, 0, 0, 0.25);
  --urble-box-shadow-light: 0px 4px 10px 0px rgba(0, 0, 0, 0.15);
  --urble-box-shadow-review-card: 0 14px 32px rgba(30, 32, 34, 0.08);
  --urble-box-shadow-review-card-hover: 0 18px 38px rgba(30, 32, 34, 0.12);
  --urble-drop-shadow-device: 0px 32px 48px rgba(30, 32, 34, 0.16);

  &.urble-has-backdrop,
  &.urble-has-dialog {
    position: relative;
    overflow: hidden;
  }
}

.material-symbols-outlined,
.material-symbols-rounded {
  overflow: hidden;
  width: 1em;
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
}

body {
  min-height: 100vh;
  padding-top: 48px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* this is for sticky banner */
  opacity: 0;
}

body > main {
  flex: 1 0 auto;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

urble-header,
urble-footer {
  display: block;
}

urble-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  flex: 0 0 auto;
}

urble-footer {
  margin-top: auto;
}

urble-join-the-waitlist {
  display: none;
}

urble-savings-overview {
  display: block;
}

.urble-root {
  margin: auto;
}

.urble-subscribe-trigger {
  cursor: pointer;
}

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

.urble-skip-link {
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 1;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  color: var(--_Prim-Color-dark-100-Brand);
  background: var(--_Prim-Color-light-000-White);
  font-size: 16px;
  font-weight: 400;
  line-height: 22.4px;
  text-decoration: none;
}

.urble-skip-link:focus,
.urble-skip-link:focus-visible {
  width: auto;
  height: auto;
  margin: 0;
  padding: 8px 16px;
  overflow: visible;
  clip: auto;
  border-radius: 8px;
  outline: 2px solid var(--urble-color-surface-affirmative-default);
  outline-offset: 2px;
}

.urble-skip-link:visited,
.urble-skip-link:hover,
.urble-skip-link:active {
  color: var(--_Prim-Color-dark-100-Brand);
  text-decoration: none;
}

.urble-inline-link {
  color: inherit;
  text-decoration: underline;
}

/* reset.css ends with `a:visited, a:hover, a:active { text-decoration: none }` at (0,1,1),
   which outranks the bare `.urble-inline-link` class — so the underline has to be restated
   for all three states. Without :visited the link loses its underline the first time it is
   clicked, and since the color is inherited it becomes indistinguishable from body copy. */
.urble-inline-link:visited,
.urble-inline-link:hover,
.urble-inline-link:active,
.urble-inline-link:focus {
  color: inherit;
  text-decoration: underline;
}

/* Arrow links underline their label only; text decoration otherwise propagates to the glyph. */
.urble-inline-link--with-arrow,
.urble-inline-link--with-arrow:visited,
.urble-inline-link--with-arrow:hover,
.urble-inline-link--with-arrow:active,
.urble-inline-link--with-arrow:focus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.urble-inline-link--with-arrow .urble-inline-link__label {
  text-decoration: underline;
}

.frankencoin-wordmark {
  display: inline-block;
  width: auto;
  height: 2em;
  margin-left: 0.2em;
  vertical-align: -0.22em;
  max-height: 2em;
}

.urble-input {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 441px;
  height: 64px;
  padding: 0 16px;
  border: 1px solid var(--_Prim-Color-light-200);
  border-radius: 32px;
  background-color: var(--_Prim-Color-light-000-White);
  box-shadow: var(--urble-box-shadow-light);
  width: 100%;
  box-sizing: border-box;

  input {
    flex-grow: 1;
    border: none;
    outline: none;
    padding: 10px;
    font-size: 24px;
    line-height: 24px;
    border-radius: 24px;
    background-color: transparent;
    min-width: 0;

    &::placeholder {
      color: var(--_Prim-Color-light-200);
    }
  }

  &.urble-input-with-button {
    padding-right: 0;

    .urble-link_button {
      cursor: pointer;
      display: flex;
      align-items: center;
      min-height: 100%;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      background: var(--urble-linear-gradient);
      border: none;

      .material-symbols-outlined {
        font-size: 32px;
      }
    }
  }
}
.urble-text-center {
  text-align: center !important;
}

.urble-title-underline {
  position: relative;
  z-index: 0;
  display: inline-block;
  font: inherit;
}

.urble-title-underline > span {
  font: inherit;
}

.urble-title-underline::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 10px;
  border-radius: 16px;
  background: var(--urble-linear-gradient);
}

.urble-disclaimer {
  font-size: 12px;
  line-height: 16px;
  max-width: 780px;
  margin-top: 24px;
  color: var(--_Prim-Color-dark-300);
  font-style: italic;
  text-align: justify;
}

.urble-shared-problem,
.urble-shared-saving-options {
  width: 1144px;
  max-width: 100%;
  margin-inline: auto;
  padding: 64px 32px;
  box-sizing: border-box;

  .urble-section-blocks {
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }
}

.urble-shared-problem {
  position: relative;

  .urble-section-blocks {
    display: grid;
    grid-template-columns: 328px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
  }
}

.urble-shared-problem__intro,
.urble-shared-saving-options__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.main .urble-shared-problem__intro h2,
.main .urble-shared-saving-options__intro h2 {
  margin: 0;
  font-family: Quicksand;
  font-size: 64px;
  line-height: 68px;
  font-weight: 700;
}

.urble-shared-problem__intro p,
.urble-shared-saving-options__intro p {
  margin: 0;
  color: var(--_Prim-Color-dark-300);
  line-height: 22.4px;
}

.urble-shared-problem__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.main .urble-card.urble-shared-stat-card {
  width: auto;
  max-width: none;
  height: auto;
  gap: 8px;
  box-shadow: var(--urble-box-shadow-light);
}

.urble-shared-stat-card__figure {
  font-family: Quicksand;
  font-size: 40px;
  line-height: 40px;
  font-weight: 700;
}

.urble-shared-stat-card__figure--negative {
  color: var(--urble-color-text-negative);
}

.urble-shared-stat-card__label {
  color: var(--_Prim-Color-dark-300);
  font-size: 14px;
  line-height: 20px;
}

.urble-shared-stat-card__chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: auto;
  padding-top: 16px;
}

.main .urble-card.urble-shared-stat-card--statement {
  grid-column: 1 / -1;
  min-height: 0;
  padding: 24px;
  background: var(--urble-linear-gradient-light-greenish);
  box-shadow: none;
}

.urble-shared-stat-card--statement h3 {
  margin: 0;
  font-family: Quicksand;
  font-size: 20px;
  line-height: 28px;
}

.urble-shared-stat-card--statement p {
  margin: 0;
  color: var(--_Prim-Color-dark-300);
  line-height: 22.4px;
}

.urble-shared-problem__note {
  grid-column: 1 / -1;
  display: flex;
  gap: 16px;
  margin: 0;
  color: var(--_Prim-Color-dark-300);
  font-size: 14px;
  line-height: 20px;
}

.urble-shared-problem__note .material-symbols-rounded {
  flex: 0 0 auto;
  color: var(--urble-color-surface-affirmative-default);
  font-size: 16px;
  line-height: 20px;
}

.urble-shared-saving-options {
  background: var(--urble-color-surface-brand-low-emphasis);

  .urble-section-blocks {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
}

.urble-shared-saving-options__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.main .urble-card.urble-shared-saving-option {
  width: auto;
  max-width: none;
  height: auto;
  min-height: 0;
  gap: 16px;
  border: 1px solid var(--_Prim-Color-light-200);
}

.main .urble-card.urble-shared-saving-option--coming {
  border-style: dashed;
}

.urble-shared-saving-option__icons {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
}

.urble-shared-saving-option__icons img {
  display: block;
  flex: 0 0 auto;
  border-radius: 999px;
  object-fit: contain;
}

.urble-shared-saving-option h3 {
  margin: 0;
  font-family: Quicksand;
  font-size: 20px;
  line-height: 28px;
}

.urble-shared-saving-option p {
  margin: 0;
  color: var(--_Prim-Color-dark-300);
  line-height: 22.4px;
}

.urble-shared-saving-option__wordmark {
  width: auto;
  height: 24px;
  max-height: 24px;
  margin-left: 8px;
  vertical-align: -5px;
}

.urble-shared-saving-option__link,
.urble-shared-saving-option__link:visited,
.urble-shared-saving-option__link:hover,
.urble-shared-saving-option__link:active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: auto;
  color: var(--urble-color-surface-affirmative-default);
  font-weight: 700;
  line-height: 22.4px;
  text-decoration: none;
}

.urble-shared-saving-option__link:hover {
  text-decoration: underline;
}

@media screen and (max-width: 1120px) {
  .urble-shared-problem,
  .urble-shared-saving-options {
    padding-inline: 16px;
  }

  .urble-shared-problem .urble-section-blocks {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }

  .urble-shared-problem__intro,
  .urble-shared-saving-options__intro {
    align-items: center;
    text-align: center;
  }

  .main .urble-shared-problem__intro h2,
  .main .urble-shared-saving-options__intro h2 {
    font-size: 32px;
    line-height: 32px;
  }

  .urble-shared-problem__panels,
  .urble-shared-saving-options__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .urble-shared-problem__note {
    grid-column: auto;
  }
}

.main .urble-asset-options-section {
  .urble-section-content {
    flex-direction: column;
    max-width: 760px;

    .urble-pre {
      font-weight: 300;
      font-size: 20px;
      line-height: 28px;
    }

    h1 {
      margin-bottom: 16px;
    }

    .urble-section-content-text {
      font-size: clamp(16px, 1.8vw, 19px);
      line-height: 1.6;
      color: var(--_Prim-Color-dark-300);
    }
  }

  .urble-assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
  }

  .urble-asset-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 20px;
    border: 1px solid rgba(30, 32, 34, 0.1);
    border-radius: 16px;
    background: var(--_Prim-Color-light-000-White);
    box-shadow: 0 8px 32px rgba(30, 32, 34, 0.08);
  }

  .urble-asset-icon-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    margin-bottom: 6px;
  }

  .urble-asset-currency-stack {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
  }

  .urble-asset-currency-stack img,
  .urble-asset-currency-stack span,
  .urble-asset-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 8px;
  }

  .urble-asset-currency-stack img,
  .urble-asset-icon img {
    display: block;
    object-fit: contain;
  }

  .urble-asset-currency-stack span {
    display: grid;
    place-items: center;
    background: #edf6f3;
    color: var(--_Prim-Color-dark-100-Brand);
    font-size: 10px;
    font-weight: 700;
  }

  .urble-asset-icon {
    display: grid;
    place-items: center;
    padding: 5px;
    box-sizing: border-box;
  }

  .urble-asset-icon img {
    width: 100%;
    height: 100%;
  }

  .urble-asset-icon-btc {
    background: #fff3e6;
    border-radius: 50%;
    overflow: hidden;
    padding: 0;
  }

  .urble-asset-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    flex: 0 0 auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
  }

  .urble-asset-badge-live {
    background: rgba(34, 181, 145, 0.12);
    color: var(--urble-color-surface-affirmative-default);
  }

  .urble-asset-badge-soon {
    background: rgba(30, 32, 34, 0.07);
    color: var(--urble-color-text-primary-disabled);
  }

  .urble-asset-subtitle {
    margin-bottom: 6px;
    color: var(--urble-color-text-primary-disabled);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  h3 {
    margin: 0 0 4px;
    color: var(--_Prim-Color-dark-100-Brand);
    font-family: Quicksand;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
  }

  p {
    margin: 0;
    color: var(--_Prim-Color-dark-300);
    font-size: 14px;
    line-height: 1.55;
  }

  .urble-inflation-product-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 600;
    color: var(--urble-color-surface-affirmative-default);
    text-decoration: none;
  }

  .urble-inflation-product-link:hover {
    text-decoration: underline;
  }
}

@media screen and (max-width: 900px) {
  .urble-asset-options-section {
    .urble-assets-grid {
      grid-template-columns: 1fr;
    }
  }
}

@media screen and (max-width: 560px) {
  .urble-asset-options-section {
    .urble-section-blocks {
      gap: 32px;
      padding-top: 48px;
    }
  }
}

.urble-dialog:has(.subscribe) {
  max-width: fit-content !important;
}

.urble-subscribe-wrapper,
.subscribe {
  display: flex;
  flex-direction: column;

  .urble-keyboard-focused {
    outline: 2px solid #000;
    outline-offset: 2px;
  }
  .urble-gradient_button {
    margin-top: 32px !important;
    background: var(--urble-linear-gradient) !important;
    align-self: flex-end;
  }

  .urble-gradient_button__start {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: var(--urble-linear-gradient) !important;
    align-self: flex-start;
    color: #fff;

    .material-symbols-outlined {
      font-size: 24px;
    }
  }
}

#mc_embed_signup {
  background: #fff;
  clear: left;
  font:
    14px Helvetica,
    Arial,
    sans-serif;
  width: 100% !important;
  max-width: 600px;
  margin: 0 auto;
}

#mc-embedded-subscribe-form input[type='checkbox'] {
  display: inline;
  width: auto;
  margin-right: 10px;
}

#mergeRow-gdpr {
  margin-top: 20px;
}

#mergeRow-gdpr fieldset label {
  font-weight: normal;
}

#mergeRow-gdpr .checkbox.subfield {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#mergeRow-gdpr .checkbox.subfield input[type='checkbox'] {
  margin-right: 0;
}

#mc-embedded-subscribe-form .mc_fieldset {
  border: none;
  min-height: 0;
  padding-bottom: 0;
}

.urble-rotate {
  animation: rotateSpinner 800ms linear infinite;
}

@keyframes rotateSpinner {
  to {
    transform: rotate(360deg);
  }
}

/* HEADER */
.urble-header {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 16px;

  .urble-header-mobile-menu {
    display: none;
    line-height: 68px;
    font-size: 68px;
  }

  .urble-header-group {
    display: flex;
    flex-direction: row;
    gap: 16px;
    max-width: 100%;
  }

  .urble-header_button {
    max-height: 68px;
    border-radius: 16px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--urble-box-shadow);
    gap: 8px;

    &.urble-header_button_login {
      background: var(--_Prim-Color-dark-100-Brand);
      background: var(--urble-color-text-primary-disabled);
      color: var(--_Prim-Color-light-000-White);
      cursor: default;
    }

    &.urble-header_button_register {
      background: var(--urble-linear-gradient);
      color: var(--_Prim-Color-light-000-White);
      cursor: pointer;
    }
  }

  .urble-header_content {
    width: 750px;
    height: 68px;
    padding: 0px 24px;
    gap: 0px;
    border-radius: 16px;

    display: flex;
    align-items: center;

    background: var(--_Prim-Color-light-000-White);
    box-shadow: var(--urble-box-shadow);

    .urble-header_brand {
      display: flex;
      flex: 1 1 auto;
      align-items: center;
      gap: 16px;
      min-width: 0;
    }

    .urble-header_logo {
      flex: 0 0 auto;
      line-height: 0;

      a {
        display: block;
      }

      img {
        width: auto;
        height: 36px;
      }
    }

    .urble-header_brand-divider {
      flex: 0 0 auto;
      width: 1px;
      height: 36px;
      background: var(--_Prim-Color-light-200);
    }

    .urble-swiss-made {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      gap: 8px;
      color: var(--_Prim-Color-dark-100-Brand);
    }

    .urble-swiss-made__flag {
      display: block;
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
    }

    .urble-swiss-made__flag-field {
      fill: var(--urble-color-swiss-flag);
    }

    .urble-swiss-made__flag-cross {
      fill: var(--_Prim-Color-light-000-White);
    }

    .urble-swiss-made__label {
      font-size: 14px;
      line-height: 14px;
      font-weight: 700;
    }

    .urble-header_menu {
      font-size: 16px;
      color: var(--_Prim-Color-dark-100-Brand);
      font-weight: 700;
      line-height: 22.4px;
      text-align: left;

      ul {
        display: flex;
        gap: 16px;

        .urble-header_menu__menu-item {
          position: relative;
          cursor: pointer;
          line-height: 68px;

          &.active > a {
            background: var(--urble-linear-gradient);
            background-clip: text;
            -webkit-text-fill-color: transparent;
          }

          &.urble-mobile-menu-item {
            display: none;
          }

          a {
            display: flex;
            flex-direction: row;
            gap: 4px;
            align-items: center;
            cursor: pointer;
            padding: 4px;
            border-radius: 16px;

            &:hover:not(.urble-disabled) {
              background: var(--urble-linear-gradient);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }
          }

          .urble-submenu-divider {
            height: 8px;
            background: transparent;
            top: 68px;
            position: absolute;
            right: 0;
            left: 0;
          }

          &:hover .urble-submenu,
          &:focus-within .urble-submenu,
          &.is-open .urble-submenu {
            display: flex;
            opacity: 1;
            transition: opacity 0.3s ease-in;
          }

          .urble-submenu {
            display: none;
            flex-direction: column;

            position: absolute;
            border-radius: 16px;
            background: var(--_Prim-Color-light-000-White);
            box-shadow: var(--urble-box-shadow);
            width: 376px;
            gap: 4px;
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid var(--_Prim-Color-light-200);
            top: 76px;
            opacity: 0;

            .urble-submenu-item {
              background: var(--_Prim-Color-light-000-White);
              width: 100%;
              position: relative;
              display: block;
              border-radius: 12px;
              line-height: normal;

              > a {
                display: grid;
                grid-template-columns: minmax(0, 1fr) 80px;
                gap: 16px;
                align-items: center;
                min-height: 104px;
                padding: 12px;
                border-radius: 12px;
                box-sizing: border-box;

                &:hover,
                &:focus-visible {
                  color: var(--_Prim-Color-dark-100-Brand);
                  background: var(--urble-color-surface-brand-low-emphasis);
                  background-clip: border-box;
                  -webkit-background-clip: border-box;
                  -webkit-text-fill-color: initial;
                  outline: none;

                  .urble-submenu-item__title {
                    color: var(--urble-color-surface-affirmative-default);
                  }

                  .urble-submenu-item__illustration {
                    transform: scale(1.6);
                  }
                }
              }

              .urble-submenu-item__copy {
                display: flex;
                min-width: 0;
                flex-direction: column;
                gap: 4px;
              }

              .urble-submenu-item__title {
                color: var(--_Prim-Color-dark-100-Brand);
                font-size: 16px;
                font-weight: 700;
                line-height: 22px;
                transition: color 0.2s ease;
              }

              .urble-submenu-item__description {
                color: var(--urble-color-text-primary-disabled);
                font-size: 13px;
                font-weight: 400;
                line-height: 18px;
              }

              .urble-submenu-item__illustration-frame {
                display: block;
                width: 80px;
                height: 80px;
                border-radius: 12px;
                overflow: hidden;
              }

              .urble-submenu-item__illustration {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                transform: scale(1.5);
                transition: transform 0.2s ease;
              }
            }
          }
        }
      }
    }
  }

  .urble-language-picker {
    position: absolute;
    top: 38px;
    right: 16px;
    z-index: 1;

    &.is-open .urble-language-chevron {
      transform: rotate(180deg);
    }

    .urble-language-flag {
      display: block;
      width: 36px;
      height: 24px;
      flex: 0 0 auto;
      border-radius: 3px;
      object-fit: cover;
      box-shadow: 0 0 0 1px rgba(30, 32, 34, 0.12);
    }
  }

  .urble-header_language-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    min-width: 0;
    padding: 2px 3px;
    box-sizing: border-box;
    gap: 2px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    box-shadow: none;
    color: var(--_Prim-Color-dark-100-Brand);
    cursor: pointer;
    transition: background-color 0.2s ease;

    &:hover,
    &:focus-visible {
      background: var(--urble-color-surface-brand-low-emphasis);
      outline: none;
    }

    .urble-language-chevron {
      font-size: 18px;
      line-height: 18px;
      transition: transform 0.2s ease;
    }
  }

  .urble-language-menu {
    position: fixed;
    top: var(--urble-language-menu-top, 92px);
    left: var(--urble-language-menu-left, auto);
    right: auto;
    z-index: 1001;
    display: flex;
    width: var(--urble-language-menu-width, 200px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - var(--urble-language-menu-top, 92px) - 12px);
    padding: 8px;
    box-sizing: border-box;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--_Prim-Color-light-200);
    border-radius: 16px;
    background: var(--_Prim-Color-light-000-White);
    box-shadow: var(--urble-box-shadow-light);

    &[hidden] {
      display: none;
    }

    .urble-language-option {
      display: grid;
      grid-template-columns: 36px minmax(0, 1fr) 20px;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border-radius: 10px;
      color: var(--_Prim-Color-dark-100-Brand);
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;

      &:hover,
      &:focus-visible,
      &.is-active {
        background: var(--urble-color-surface-brand-low-emphasis);
        outline: none;
      }

      .urble-language-option__check {
        color: var(--urble-color-surface-affirmative-default);
        font-size: 20px;
      }
    }
  }
}

.urble-filter-sepia {
  filter: sepia(1);
}

.urble-filter-invert {
  filter: invert(1);
}

.urble-filter-hue-rotate {
  filter: hue-rotate(45deg);
}

.urble-coming-soon-element {
  position: relative;

  .urble-coming-soon-sticker {
    box-sizing: border-box;
    opacity: 1;
    transform: rotate(0);
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100%;
    left: 0 !important;
    right: 0 !important;
    top: auto;
    bottom: 0;
    font-size: 32px;
    transition: opacity 0.5s ease-in-out;

    &.urble-invisible {
      opacity: 0;
    }
  }
}

.urble-disabled {
  cursor: default !important;
  opacity: 0.3 !important;
  pointer-events: none !important;
}

.urble-sticker {
  position: absolute;
  padding: 20px;
  background: var(--urble-linear-gradient);
  color: var(--_Prim-Color-dark-100-Brand);
  font-family: Quicksand;
  font-size: 72px;
  border-radius: 16px;
  box-shadow: var(--urble-box-shadow);
  transform: rotate(-5deg);
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(100% + 32px);
  font-weight: 700;
  top: 45%;
  left: -32px;
  opacity: 0.9;
}

.urble-mobile-only-item {
  display: none !important;
}

.urble-gradient-text {
  background: var(--urble-linear-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* CONTENT */
.main {
  max-width: 1920px;
  margin: auto;
  overflow-x: clip;

  .urble-policy {
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    .urble-policy-content {
      position: relative;
      margin: auto;
      display: flex;
      max-width: 1080px;

      flex-direction: column;
      gap: 16px;
      padding-inline: 16px;

      thead tr {
        background-color: var(--_Prim-Color-light-100);
      }

      th {
        padding: 16px;
        text-align: center;
        height: 100%;
        vertical-align: middle;
      }

      td {
        padding: 16px;
      }

      a {
        color: #0066cc;
        text-decoration: underline;
      }

      a:visited {
        color: #551a8b;
      }

      a:hover {
        color: #004499;
        text-decoration: none;
      }

      ul {
        list-style: disc;
        padding-left: 24px;
        line-height: 20px;
      }

      p {
        line-height: 20px;
      }
    }
  }

  section {
    opacity: 0;

    &.urble-section-dimmed-in {
      opacity: 1;
      transition: opacity 0.5s ease-in-out;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    section {
      opacity: 1;

      &.urble-section-dimmed-in {
        transition: none;
      }
    }
  }

  .urble-section-content {
    display: flex;
    flex-direction: row;
    gap: 16px;
    color: var(--_Prim-Color-dark-100-Brand);

    p {
      margin-bottom: 16px;
    }
  }

  .urble-icon-gradient {
    background: var(--urble-linear-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .urble-email {
    text-decoration: underline !important;
  }

  h1 {
    font-family: Quicksand;
    font-size: 96px;
    font-weight: 700;
    line-height: 96px;
    color: var(--_Prim-Color-dark-100-Brand);

    span {
      font-family: Quicksand;
    }
  }

  h2 {
    font-family: Quicksand;
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
    color: var(--_Prim-Color-dark-000-Black);
  }

  .urble-underline-text {
    font-family: Quicksand;
    position: relative;
    display: inline-block;
    white-space: nowrap;
  }

  .urble-underline-text::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    background: var(--urble-linear-gradient);
    bottom: 4px;
    border-radius: 24px;
    height: 19px;
    z-index: -1;
  }

  .urble-gradient-text {
    background: var(--urble-linear-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .urble-gradient-text-quick {
    background: var(--urble-linear-gradient-quick);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .urble-download {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: fit-content;
    max-width: 100%;
  }

  .urble-download__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    width: fit-content;
    max-width: 100%;
  }

  .urble-download__badges > a {
    display: inline-flex;
    max-width: 100%;
    line-height: 0;
  }

  .urble-download__badges > a > img {
    display: block;
    width: 189px !important;
    height: auto !important;
    max-width: 100%;
  }

  .urble-download-qr {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    padding-top: 8px;
    text-align: center;
  }

  .urble-download .urble-download-qr__title {
    max-width: 320px;
    margin: 0;
    color: inherit;
  }

  .urble-download .urble-download-qr__title {
    font-family: Quicksand, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
  }

  .final-cta .urble-download {
    margin-inline: auto;
  }

  .urble-download-qr__link {
    display: inline-flex;
    padding: 8px;
    border-radius: 16px;
    background: var(--_Prim-Color-light-000-White);
    box-shadow: var(--urble-box-shadow);
    line-height: 0;
    transition: transform 0.2s ease-in-out;
  }

  .urble-download-qr__link:hover {
    transform: translateY(-2px);
  }

  .urble-download-qr__link:focus-visible {
    outline: 3px solid var(--_Prim-Color-dark-100-Brand);
    outline-offset: 3px;
  }

  .urble-download-qr__image {
    display: block;
    width: 176px !important;
    height: 176px !important;
    max-width: none !important;
  }

  .urble-mobile {
    background: var(--_Prim-Color-light-000-White);
    border: 5px solid var(--_Prim-Color-dark-100-Brand);
    border-radius: 32px;
    height: 494px;
    min-width: 276px;
    box-shadow: var(--urble-box-shadow);
  }

  .urble-figure {
    width: 477px;
    height: 454px;
    border-radius: 48px 256px 64px 48px;
    background: var(--urble-linear-gradient);
    position: absolute;
    bottom: -238px;
    left: -450px;
    z-index: -1;
  }

  .urble-card {
    display: flex;
    flex-direction: column;
    width: 340px;
    max-width: 340px;
    height: 282px;
    padding: 24px;
    gap: 10px;
    border-radius: 24px;
    background-color: var(--_Prim-Color-light-000-White);
    box-sizing: border-box;

    &.urble-card-with-zoom {
      transition:
        transform 0.3s ease-in-out,
        box-shadow 0.3s ease-in-out;
      position: relative;

      &:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }
    }

    &.urble-card-with-gradient {
      position: relative;
      max-width: 280px;

      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(30, 32, 34, 0.8) 75%);
        pointer-events: none;
        z-index: 0;
      }

      &.urble-disabled {
        &::after {
          background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(30, 32, 34, 0.4) 75%);
        }
      }
    }

    .urble-card-icon {
      .urble-icon-gradient {
        font-size: 36px;
        font-weight: 700;
        line-height: 50px;
      }
    }

    .urble-card-title {
      color: var(--_Prim-Color-dark-100-Brand);
      font-size: 16px;
      font-family: Roboto;
      line-height: 22.4px;
      font-weight: 700;
    }

    .urble-card-text {
      color: var(--_Prim-Color-dark-100-Brand);
    }
  }

  .urble-social {
    margin-top: 8px;
    display: flex;
    gap: 16px;
  }

  .urble-card-person {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;

    .urble-card-person-face {
      width: 40px;
      height: 40px;
      border-radius: 99999px;
      position: relative;
      overflow: hidden;

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

    .urble-card-person-name {
      color: var(--urble-color-text-primary-disabled);
    }
  }

  .urble-section-content-text {
    font-size: 16px;
    line-height: 22.4px;
    color: var(--_Prim-Color-dark-100-Brand);
  }

  .urble-section-lead {
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    color: var(--_Prim-Color-dark-300);
  }

  .urble-glasses {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 64px;
    margin-top: 32px;

    .urble-glass-container {
      width: 146px;
      height: 176px;
      text-align: center;
      position: relative;

      .urble-glass {
        border-radius: 0 0 36px 36px;
        border-style: solid;
        border-width: 0 3px 3px 3px;
        border-color: var(--_Prim-Color-dark-100-Brand);
        position: relative;
        width: 100%;
        height: 100%;

        .urble-glass-bubbles {
          position: absolute;
          width: 100%;
          bottom: 0;
          left: 0;

          &.urble-glass-bubbles-over {
            left: 0 !important;
            transform: scale(1.3);
            top: -16px;
          }
        }
      }

      .urble-glass-text-top {
        position: absolute;
        top: -32px;
        left: 53%;
        transform: translateX(-50%);
        font-size: 16px;
        font-weight: 700;
        line-height: 22.4px;
        margin-top: 16px;
        background-color: var(--_Prim-Color-light-000-White);
        padding: 4px 8px;
        border-radius: 16px;
        border-radius: 16px;
        min-width: 80px;
        box-shadow: var(--urble-box-shadow-light);
      }

      .urble-glass-text-bottom {
        color: var(--urble-color-text-primary-disabled);
        margin-top: 8px;
        margin-inline-start: 8px;
      }
    }
  }
}

/* COMPONENTS */
.urble-link_button {
  span {
    line-height: 20px;
    font-size: 16px;
  }

  display: flex;
  justify-content: center;
  max-width: fit-content;
  height: fit-content;
  font-size: 16px;
  line-height: 22px;
  padding: 8px 16px 8px 12px;
  gap: 10px;
  border-radius: 999px;
  border: none;
  background: var(--_Prim-Color-dark-100-Brand);
  color: var(--_Prim-Color-light-000-White);
  cursor: pointer;

  /* reset.css declares `a, a:hover, a:visited, a:active { color: inherit }`.
     Those `a:<state>` selectors are (0,1,1) and outrank this class (0,1,0), so
     every state has to restate the color — otherwise the label falls back to the
     inherited near-black ink and disappears on the dark pill. A same-page href
     like `#start` counts as visited as soon as it is clicked once, so this bites
     at rest, not only on hover. */
  &:visited,
  &:hover,
  &:active {
    color: var(--_Prim-Color-light-000-White);
  }

  &:hover {
    box-shadow: 0px 0px 5px var(--urble-color-ab);
  }

  &.urble-link_button__white {
    background: var(--_Prim-Color-dark-100-Brand);
    color: var(--_Prim-Color-light-000-White);

    &:visited,
    &:hover,
    &:active {
      color: var(--_Prim-Color-light-000-White);
    }

    &:hover {
      box-shadow: 0px 0px 5px var(--urble-color-ab);
    }
  }

  &.urble-line_button__transparent {
    border-color: transparent;
    background: transparent;
    padding: 8px;
    color: var(--_Prim-Color-dark-100-Brand);

    &:visited,
    &:hover,
    &:active {
      color: var(--_Prim-Color-dark-100-Brand);
    }

    span {
      padding-top: 2px;
    }
  }

  &.urble-link_button__secondary {
    border: 1px solid var(--_Prim-Color-dark-100-Brand);
    background: transparent;
    color: var(--_Prim-Color-dark-100-Brand);

    &:visited,
    &:hover,
    &:active {
      color: var(--_Prim-Color-dark-100-Brand);
    }
  }
}

.urble-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: var(--urble-color-surface-affirmative-default);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.urble-invisible {
  visibility: hidden;
}

.urble-accordion-sections {
  display: flex;
  flex-direction: column;
  gap: 16px;

  .urble-section-label {
    padding: 8px 0;
  }

  .urble-accordion-section {
    .urble-accordion {
      background: transparent;
      padding: 16px;
      border: 2px solid var(--_Prim-Color-light-200);
      box-shadow: var(--urble-box-shadow-light);
      display: flex;
      flex-direction: column;
      align-items: left;
      justify-content: center;
      border-radius: 16px;
      font-weight: 700;
      line-height: 22px;
      font-size: 16px;
      background: var(--_Prim-Color-light-000-White);

      &.urble-active {
        .urble-accordion-chevron {
          rotate: 90deg;
        }
      }

      &:has(.urble-accordion-question:focus-visible) {
        outline: 2px solid var(--urble-color-surface-affirmative-default);
        outline-offset: 2px;
      }
    }

    .urble-accordion-question {
      display: flex;
      flex-direction: row;
      justify-content: start;
      align-items: center;
      gap: 8px;
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      font: inherit;
      color: inherit;
      text-align: left;
      cursor: pointer;
    }

    .urble-accordion-question:focus,
    .urble-accordion-question:focus-visible {
      outline: none;
    }

    .urble-accordion-panel {
      padding: 16px 16px 0 32px;
      display: none;
      overflow: hidden;
      color: var(--_Prim-Color-dark-100-Brand);
      font-weight: 400;
      line-height: 22.4px;
    }

    p {
      margin-bottom: 16px;
    }

    ul {
      list-style-type: disc;
      padding-left: 32px;
    }
  }
}

@media (min-width: 1121px) {
  .main .urble-download {
    display: grid;
    grid-template:
      'badges qr' 128px
      'title title' auto /
      189px 128px;
    column-gap: 32px;
    row-gap: 8px;
    align-items: stretch;
    width: max-content;
  }

  .main .urble-download__badges {
    grid-area: badges;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 16px;
  }

  .main .urble-download-qr {
    display: contents;
  }

  .main .urble-download-qr__link {
    grid-area: qr;
    align-items: center;
    justify-content: center;
  }

  .main .urble-download-qr__image {
    width: 112px !important;
    height: 112px !important;
  }

  .main .urble-download .urble-download-qr__title {
    grid-area: title;
    justify-self: center;
  }
}

/* Shared full-cover product hero used by urble Me and urble Kids. */
.main .urble-product-hero {
  position: relative;
  isolation: isolate;
  width: 1144px;
  max-width: 100%;
  min-height: 760px;
  margin-top: -148px;
  margin-inline: auto;
  margin-bottom: 64px;
  padding: 148px 32px 64px;
  overflow: hidden;
  box-sizing: border-box;

  &::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--urble-product-hero-overlay, var(--urble-linear-gradient-cover-left));
    pointer-events: none;
  }

  .urble-section_image {
    position: absolute;
    z-index: -2;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: var(--urble-product-hero-position, center);
  }

  .urble-section-blocks {
    position: relative;
    z-index: 1;
    display: flex;
    width: 1080px;
    max-width: 100%;
    min-height: 548px;
    margin: auto;
    align-items: center;
    justify-content: var(--urble-product-hero-alignment, flex-start);
  }

  .urble-section-block-1 {
    display: flex;
  }

  .urble-section-content {
    display: flex;
    width: 504px;
    max-width: 100%;
    padding: 32px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    box-sizing: border-box;
  }

  h1 {
    width: 400px;
    max-width: 100%;
    margin: 0;
    color: var(--_Prim-Color-light-000-White);
    font-size: 64px;
    line-height: 68px;
  }

  .urble-section-content-text,
  .urble-download {
    color: var(--_Prim-Color-light-000-White);
  }

  .urble-section-content-text {
    width: 440px;
    max-width: 100%;
    line-height: 22.4px;
  }
}

@media (min-width: 1121px) {
  .main .urble-product-hero .urble-download {
    grid-template:
      'badges qr' auto
      'title title' auto /
      144px 96px;
    column-gap: 24px;
    row-gap: 8px;
    align-items: center;
    justify-items: start;
    margin-top: 16px;
  }

  .main .urble-product-hero .urble-download__badges {
    gap: 16px;
  }

  .main .urble-product-hero .urble-download__badges > a > img {
    width: 144px !important;
  }

  .main .urble-product-hero .urble-download-qr__image {
    width: 80px !important;
    height: 80px !important;
  }

  .main .urble-product-hero .urble-download .urble-download-qr__title {
    justify-self: start;
    max-width: none;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    text-align: left;
  }
}

/* TABLET */
@media (max-width: 1120px) {
  .main .urble-download-qr {
    display: none;
  }

  .urble-dialog {
    padding: 16px;
  }

  .urble-header {
    .urble-mobile-menu-item {
      display: block !important;
    }
  }

  .urble-mobile-only-item {
    display: block !important;
  }

  .urble-desktop-only-item {
    display: none !important;
  }

  body {
    padding-top: 0;
  }

  .main .urble-policy .urble-policy-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .urble-mobile-cover {
    height: fit-content;
    height: fit-content;
    padding-top: 32px;
    padding-bottom: 32px;
    overflow: hidden;
    margin-bottom: 0;

    .urble-section-blocks {
      margin-inline-start: 0 !important;
      margin-inline-end: 0 !important;
      max-width: 100% !important;
    }

    h1 {
      padding: 0 16px;
    }

    .urble-section_image {
      display: block !important;
      object-position: center;
      object-fit: cover;
      overflow: hidden;
      min-width: 100%;
      max-width: 100% !important;
      margin-top: 0 !important;
      margin-inline-start: 0 !important;
      position: absolute;
      top: 0;
      z-index: 1;
      min-width: 100%;
      filter: brightness(0.8);
      border-bottom-left-radius: 16px !important;
      border-bottom-right-radius: 16px !important;
      height: 250px;
      min-height: 250px;
      max-height: 250px;
    }

    .urble-section-content {
      z-index: 1;
      margin-top: -32px;

      h1 {
        height: 250px;
        margin: auto;
        color: var(--_Prim-Color-light-000-White) !important;
        align-content: center;
      }

      .urble-section-content-text {
        padding: 0 16px;
        width: fit-content !important;
        color: var(--_Prim-Color-dark-100-Brand) !important;
      }
    }
  }

  .main .urble-product-hero {
    min-height: 640px;
    margin-top: 0;
    margin-bottom: 32px;
    padding: 48px 0 32px;

    &::after {
      background: var(--urble-linear-gradient-cover-mobile);
    }

    .urble-section_image {
      display: block !important;
      object-position: var(--urble-product-hero-mobile-position, var(--urble-product-hero-position, center));
    }

    .urble-section-blocks {
      min-height: 560px;
      align-items: flex-end;
      flex-wrap: nowrap;
    }

    .urble-section-block-1,
    .urble-section-content {
      width: 100%;
    }

    .urble-section-content {
      align-items: center;
      padding: 32px 16px 0;
      text-align: center;
    }

    h1 {
      width: auto !important;
      padding: 0;
      color: var(--_Prim-Color-light-000-White) !important;
      font-size: 32px;
      line-height: 32px;
      text-align: center;
    }

    .urble-section-content-text {
      width: 560px !important;
      padding: 0;
      color: var(--_Prim-Color-light-000-White) !important;
    }
  }

  .main {
    padding: 0;

    section {
      opacity: 1;
    }

    * {
      max-width: 100%;
    }

    .urble-card {
      max-width: 100%;
      min-height: fit-content;
    }

    h1 {
      font-size: 32px;
      line-height: 32px;
      max-width: 100% !important;
      min-width: auto !important;
      width: fit-content !important;
      text-align: center;
    }

    h2 {
      font-size: 26px;
      font-weight: 700;
      line-height: 26px;
      max-width: 100% !important;
      min-width: auto !important;
      text-align: center;
    }

    .urble-accordion-sections {
      h2 {
        text-align: start;
      }
    }

    .urble-card {
      h1,
      h2 {
        text-align: start;
      }
    }

    .urble-underline-text::after {
      border-radius: 6px;
      height: 4px;
    }

    .urble-section-content-text {
      max-width: 100% !important;
      width: 100%;
      box-sizing: border-box;
    }

    .urble-section-content {
      max-width: 100% !important;
      align-content: center;
      justify-content: center;
      align-items: center;
      text-align: center;
      flex-wrap: wrap;
    }

    section {
      &:not(.urble-mobile-cover) {
        .urble-section-blocks {
          margin-inline-start: 16px !important;
          margin-inline-end: 16px !important;
          max-width: calc(100% - 32px) !important;
        }
      }

      .urble-section-blocks {
        max-width: 100%;
        justify-content: center !important;
        position: relative;
        margin: 0;
        flex-wrap: wrap;
        gap: 32px;
      }
    }

    .urble-section-block-1,
    .urble-section-block-2 {
      flex-wrap: wrap;
      justify-content: center !important;
      align-items: center !important;
    }

    .urble-glasses {
      justify-content: center;
      display: flex;
      row-gap: 180px;
      column-gap: 64px;
    }

    .urble-mobile {
      display: none;
    }

    /* main */
    .urble-section-1 {
      height: fit-content;
      padding-top: 32px;
      overflow: hidden;
      margin-bottom: 64px;
      padding-bottom: 32px;

      .urble-section_image {
        top: -32px;
      }

      .urble-section-content {
        max-width: 725px !important;
        z-index: 1;
        margin-top: -32px;

        h1 {
          color: var(--_Prim-Color-light-000-White) !important;
        }
      }
    }

    .urble-section-1c {
      margin-bottom: 64px;

      .urble-section-blocks {
        margin: 0;

        .urble-glasses {
          width: 100%;
        }

        .urble-glass-bubbles-over {
          left: 0 !important;
          transform: scale(1.3);
          top: -16px;
        }

        .urble-glass-bubbles-almost-over {
          left: 0 !important;
          transform: scale(1);
          top: -38px;
        }
      }
    }

    .urble-section-1b {
      .urble-section-blocks {
        margin-top: 224px;
      }
    }

    .urble-section-1d {
      padding-top: 32px;

      .urble-section-block-2 {
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        max-width: 100%;

        .urble-card {
          max-width: 289px;
        }
      }

      h1 {
        padding: 0 16px !important;
      }

      .urble-card {
        height: 400px;
      }
    }

    .urble-section-1e {
      margin-bottom: 0;

      .urble-section-image {
        display: none;
      }

      img {
        display: none;
      }

      .urble-section-image-part-4 {
        top: 32px;
        left: 64px;
      }

      .urble-section-image-part-5 {
        top: calc(100% - 62px);
        left: 50%;
      }

      .urble-section-image-part-6 {
        top: 0;
        left: 50%;
      }

      .urble-section-image-part-7 {
        top: calc(75% - 34px);
        right: 0;
      }
    }

    .urble-section-2 {
      padding-top: 64px;

      .urble-section-blocks {
        flex-direction: column;
        align-items: center;
        gap: 32px;
        padding: 16px;
      }
    }

    .urble-section-2b {
      .urble-section-blocks {
        h1 {
          font-size: 32px;
          line-height: 32px;
        }
      }
    }

    .urble-section-2c {
      display: none;
    }

    .urble-section-2d {
      .urble-section-blocks {
        .urble-cards {
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          padding: 16px;

          .urble-card {
            width: fit-content;
            height: auto;
            min-width: 100%;
          }
        }
      }
    }

    .urble-section-2e {
      align-items: center;

      .urble-buttons {
        flex-wrap: wrap;
      }

      h1 {
        padding: 0 16px;
      }
    }

    .urble-section-2f {
      .urble-section-blocks {
        align-items: center;
        justify-content: center;

        .urble-section-content-image {
          display: none;
        }
      }
    }

    .urble-section-2g {
      padding-bottom: 0;
      padding: 0 16px;
      padding-bottom: 64px;

      .urble-section-blocks {
        justify-content: center;
        align-items: center;
      }

      .urble-section-block-1 {
        justify-content: center;
      }

      .urble-section-block-2 {
        display: none;
      }

      .urble-mobile {
        position: relative;
        right: auto;
        display: block;
        top: 32px;
      }

      .urble-section-content-text {
        width: 100% !important;
        padding: 0;
      }
    }

    .urble-section-8 {
      & .urble-section-block-2 {
        & .urble-card {
          min-width: auto;

          h2 {
            font-size: 32px;
            line-height: 32px;
          }
        }
      }

      img {
        display: none;
      }
    }

    /* SAI */
    .urble-section_image {
      display: none;
    }

    .urble-section-sai-1 {
      padding-top: 0;
      margin-bottom: 32px;

      .urble-section_image {
        display: block;
        z-index: -1;
      }

      .urble-section-content {
        padding-top: 32px !important;
      }
    }

    .urble-section-sai-2 {
      padding: 0;
      margin-bottom: 64px;

      .urble-section-block-2 {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

        .urble-card {
          width: 298px;
          height: 400px;

          img {
            transform: scale(1.3);
          }
        }
      }
    }

    .urble-section-sai-3 {
      .urble-section-block-2 {
        ol {
          padding: 0 16px;
        }
      }
    }

    .urble-section-sai-5 {
      .urble-section-blocks {
        padding: 0;

        .urble-card {
          width: 100%;
          min-height: fit-content;
          max-width: 500px;
        }
      }
    }

    .urble-section-sai-6 {
      margin-top: 64px;

      .urble-section-blocks {
        margin-bottom: 0;
      }

      .urble-glass-bubbles-over {
        left: 0 !important;
        transform: scale(1.3);
        top: -16px;
      }

      .urble-glass-bubbles-almost-over {
        left: 0 !important;
        transform: scale(1);
        top: -38px;
      }
    }

    .urble-section-sai-6b {
      margin-bottom: 64px;
      height: fit-content;
      display: flex;
      flex-direction: column;
      gap: 32px;

      h1 {
        color: var(--_Prim-Color-dark-100-Brand);
      }

      img {
        position: relative;
        object-fit: cover;
        overflow: hidden;
        height: 250px;
        object-position: left;
      }

      .urble-figure,
      .urble-circle-4,
      .urble-circle-5,
      .urble-circle-6 {
        display: none;
      }
    }

    .urble-section-sai-7 {
      padding-top: 0;
    }

    .urble-section-sai-7b {
      padding-top: 0;
      padding-bottom: 0;
    }

    .urble-section-sai-8 {
      .urble-section-blocks {
        display: flex;
        gap: 32px;
        justify-content: center;
        align-items: center;
      }

      h2 {
        line-height: 48px;
      }

      .urble-card {
        min-width: auto !important;
        height: fit-content;
      }
    }

    /* ME */
    .urble-section-um-1b {
      padding-bottom: 0;
    }

    .urble-section-um-3 {
      overflow: hidden;
    }

    .urble-section-um-3c {
      overflow: hidden;

      .urble-section-blocks {
        padding-bottom: 0;
      }
    }

    .urble-section-um-4 {
      padding-top: 0;
    }

    .urble-section-um-4c {
      padding-bottom: 0;

      .urble-section-blocks {
        padding: 0;

        .urble-card {
          width: 100%;
          min-height: fit-content;
          max-width: 500px;
        }
      }
    }

    .urble-section-um-4d {
      padding-top: 64px;
      padding-bottom: 128px;

      .urble-glass-bubbles-over {
        left: 0 !important;
        transform: scale(1.3);
        top: -16px;
      }

      .urble-glass-bubbles-almost-over {
        left: 0 !important;
        transform: scale(1);
        top: -38px;
      }
    }

    .urble-section-me-6 {
      margin-top: 0;

      .urble-section-blocks-middle {
        justify-content: center;

        .urble-section-block-1 {
          padding: 0 16px;
        }
      }
    }

    .urble-section-me-7 {
      .urble-section-blocks-narrow {
        width: 100%;
        justify-content: center;

        .urble-section-content {
          padding: 0 16px;
        }
      }
    }

    .urble-section-me-8 {
      padding-bottom: 0;
      padding-top: 32px;

      .urble-section-content {
        width: auto !important;
        padding: 0 16px;
      }

      .urble-section-block-1 {
        width: 100% !important;
        display: flex;
        flex-direction: column;
        gap: 32px;

        .urble-section-image-block {
          .urble-image-part-1 {
            position: relative;
            display: block !important;
          }

          .urble-image-part-2 {
            display: none;
          }
        }
      }
    }

    .urble-section-9 {
      .urble-section-block-2 {
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

        .urble-card {
          width: 298px;
          height: 400px;

          img {
            transform: scale(1.3);
          }
        }
      }
    }

    /* ABOUT */
    .urble-section-a-1 {
      .urble-section_image {
        z-index: -1;
      }

      .urble-section-blocks {
        .urble-section-content {
          h1 {
            z-index: 2;
          }

          .urble-section-content-text {
            padding: 16px;
          }
        }
      }
    }

    .urble-section-a-2 {
      height: fit-content;
      padding: 32px 0;
      margin-top: 0;

      .urble-square-1,
      .urble-square-2 {
        display: none;
      }

      .urble-section-blocks {
        min-width: 100%;
      }
    }

    .urble-section-a-3 {
      padding-top: 32px;
      padding-bottom: 0;
    }

    .urble-section-a-4 {
      padding-top: 32px;
    }

    .urble-section-a-5 {
      height: fit-content;

      img {
        position: relative;
      }
    }

    .urble-section-a-6 {
      .urble-section-blocks {
        .urble-people {
          justify-content: center;

          .urble-card {
            height: fit-content;
            align-items: center;

            .urble-card-text {
              text-align: center;
            }
          }
        }

        .urble-section-content-text {
          padding: 0 16px;
        }
      }

      .urble-figure-3 {
        display: none;
      }
    }

    .urble-section-a-7 {
      .urble-section-blocks {
        .urble-section-content {
          .urble-section-content-image {
            flex-wrap: wrap;
            row-gap: 32px;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }

    /* KIDS */
    .urble-section-uk-2 {
      padding-bottom: 0;

      h1 {
        text-align: center;
        width: auto !important;
      }
    }

    .urble-section-uk-2d {
      padding-bottom: 0;

      .urble-section-blocks {
        padding-bottom: 32px;
      }
    }

    .urble-section-uk-2b {
      .urble-section-image-block-1,
      .urble-section-image-block-2 {
        justify-content: center !important;
        overflow: hidden;
      }
    }

    .urble-section-uk-7 {
      .urble-section-content-text {
        padding: 0 16px;
      }
    }

    .urble-section-uk-8 {
      padding-bottom: 0;

      .urble-section-blocks {
        padding: 0;

        .urble-card {
          width: 100%;
          min-height: fit-content;
          max-width: 500px;
        }
      }
    }

    .urble-section-uk-9 {
      padding-top: 64px;
      padding-bottom: 128px;

      .urble-glass-bubbles-over {
        left: 0 !important;
        transform: scale(1.3);
        top: -16px;
      }

      .urble-glass-bubbles-almost-over {
        left: 0 !important;
        transform: scale(1);
        top: -38px;
      }
    }

    .urble-section-uk-11 {
      padding-top: 0;

      .urble-card {
        width: 298px;
        height: 400px;

        img {
          transform: scale(1.3);
        }
      }
    }

    .urble-section-uk-5 {
      .urble-section-blocks {
        .urble-section-image {
          .urble-section-image-block-1 {
            .urble-message:nth-child(2) {
              margin-top: 0;
            }
          }
        }

        .urble-message-image {
          display: none;
        }
      }

      .urble-mobile-only-item {
        display: flex !important;
      }
    }

    .urble-section-uk-6 {
      padding-top: 0;

      .urble-section-blocks {
        .urble-section-content {
          flex-direction: column;
          width: 100%;
        }
      }
    }

    /* COUPLE */
    .urble-section-uc-1 {
      height: fit-content;
      padding-top: 32px;
      overflow: hidden;
      padding-bottom: 32px;
      margin-bottom: 0;

      .urble-section_image {
        display: block !important;
        object-fit: center;
        overflow: hidden;
        max-width: fit-content;
        height: 100%;
        top: 0;
        min-width: 100%;

        filter: brightness(0.8);
      }

      .urble-section-block-1 {
        justify-content: center;
      }

      .urble-section-blocks {
        margin: 0;
      }

      .urble-section-content-text {
        padding: 0 16px;
      }
    }

    .urble-section-uc-5 {
      padding-top: 0;
      padding-bottom: 32px;

      .urble-section-content {
        background: var(--_Prim-Color-light-000-White);
        border-radius: 16px;
      }

      > img {
        display: none;
      }

      .urble-figure {
        display: none;
      }
    }

    .urble-section-uc-4 {
      .urble-section-blocks {
        padding-bottom: 32px;
      }
    }

    .urble-section-uc-8 {
      padding-bottom: 0;

      .urble-section-blocks {
        padding: 0;

        .urble-card {
          width: 100%;
          min-height: fit-content;
          max-width: 500px;
        }
      }
    }

    .urble-section-uc-9 {
      padding-top: 64px;
      padding-bottom: 128px;
    }

    .urble-section-uc-10 {
      height: fit-content;
      padding-top: 32px;
      padding-bottom: 32px;

      .urble-section-content {
        max-width: 100%;
      }

      .urble-section_image,
      .urble-square-1,
      .urble-square-2 {
        display: none;
      }
    }

    .urble-section-uc-11 {
      margin-top: auto;
    }

    .urble-section-uc-13 {
      a {
        display: flex;
        align-items: center;
      }

      .urble-section-blocks {
        .urble-section-block-1 {
          flex-direction: column;
          gap: 32px;

          .urble-section-content {
            width: 100%;
          }

          .urble-section-image-block {
            .urble-image-part-1 {
              position: relative;
            }

            .urble-image-part-2 {
              display: none;
            }
          }
        }
      }
    }

    .urble-section-uc-14 {
      .urble-card {
        width: 298px;
        height: 400px;

        img {
          transform: scale(1.3);
        }
      }
    }

    /* COMMUNITY */
    .urble-section-c-1 {
      margin-bottom: 0;
      padding-bottom: 64px;
      overflow: hidden;

      .urble-section-content {
        padding-top: 32px !important;

        h1 {
          height: 148px;
        }

        .urble-pre,
        h1 {
          color: var(--_Prim-Color-light-000-White) !important;
        }

        .urble-section-content-text {
          margin-top: 32px;
          margin-bottom: 0;
          padding: 0 16px;
        }
      }

      .urble-section_image {
        display: block !important;
        object-position: top center;
        overflow: hidden;
        max-width: fit-content;
        height: 100%;

        min-width: 100%;
        margin-inline-start: 0 !important;
        position: absolute;
        z-index: -1;
        top: -32px;
        min-width: 100%;
        filter: brightness(0.6);
        max-height: 250px;
      }
    }

    .urble-section-c-3 {
      height: fit-content;

      .urble-square-1,
      .urble-square-2 {
        display: none;
      }

      .urble-section-blocks {
        .urble-section-content {
          padding-left: 0;
          box-sizing: border-box;
        }
      }
    }

    .urble-section-c-5 {
      padding: 0;

      .urble-section-content {
        justify-content: center !important;
      }
    }

    .urble-section-c-6 {
      height: fit-content;
      margin-top: 64px;

      img {
        position: relative;
        object-fit: cover;
        overflow: hidden;
        height: 250px;
        object-position: center;
      }

      .urble-figure {
        display: none;
      }
    }

    .urble-section-c-8 {
      padding-top: 32px;
      padding-bottom: 32px;

      img {
        position: relative !important;
        bottom: 0 !important;
      }
    }

    .urble-section-c-9 {
      .material-symbols-outlined {
        text-align: center;
      }
    }

    .urble-section-c-10 {
      height: fit-content;

      img {
        position: relative;
        object-fit: cover;
        overflow: hidden;
        height: 250px;
        object-position: center;
      }
    }

    .urble-section-c-11 {
      .urble-section-blocks {
        .urble-cards {
          justify-content: center;
        }
      }
    }

    .urble-section-c-12 {
      .urble-section-blocks {
        .urble-people {
          justify-content: space-evenly;
        }
      }
    }

    .urble-section-c-9 {
      .urble-section-blocks {
        .urble-cards {
          flex-wrap: wrap;
          justify-content: center;

          .urble-card {
            height: fit-content;
          }
        }
      }
    }

    .urble-section-c-12 {
      .urble-figure-1 {
        display: none;
      }
    }

    .urble-section-c-14 {
      .urble-cards {
        justify-content: center;
      }
    }

    .urble-section-c-15 {
      padding-top: 0;

      & .urble-section-blocks {
        gap: 64px;

        & .urble-section-block-2 {
          .urble-card {
            min-width: auto;

            h2 {
              font-size: 32px;
            }
          }
        }
      }
    }

    /* APP */
    .urble-section-ua-1 {
      padding-bottom: 32px;
      padding-top: 64px;

      .urble-section-blocks {
        .urble-section-content-image {
          max-width: 700px;

          .urble-image-1 {
            position: relative;
            z-index: -2;
            top: 372px;
          }

          .urble-image-2 {
            position: relative;
            top: -174px;
            left: 0;
            right: 0;
            margin: auto;
            margin-top: 42px;
            object-fit: scale-down;
            z-index: 1;
            width: 100%;
            max-width: 60%;
          }

          .urble-image-3 {
            position: absolute;
            top: 70px;
            left: 0;
            z-index: -1;
          }

          .urble-image-4 {
            position: absolute;
            top: 95px;
            right: 64px;
            left: auto;
            z-index: -1;
          }

          .urble-image-5 {
            position: absolute;
            top: 290px;
            left: 16px;
            z-index: -1;
          }

          .urble-image-6 {
            position: absolute;
            top: 380px;
            right: 32px;
            left: auto;
            z-index: -1;
          }

          .urble-image-7 {
            position: absolute;
            top: 248px;
            left: -16px;
            z-index: -1;
            font-size: 16px;

            .material-symbols-outlined {
              font-size: 16px;
              width: 20px;
            }
          }

          .urble-image-8 {
            position: absolute;
            top: 0;
            left: 0;
            z-index: -2;
          }
          .urble-image-9 {
            position: absolute;
            top: 245px;
            right: -16px;
            left: auto;
            z-index: -1;
            transform: scale(0.8);
          }
        }
      }
    }

    .urble-section-ua-2 {
      margin-top: -420px;

      .urble-section-blocks {
        padding: 0 16px;

        .urble-section-content {
          width: calc(100% / 2 - 16px);
          justify-content: space-between;

          h2 {
            display: flex;
            align-items: center;
            flex-grow: 1;
          }
        }
      }
    }

    .urble-section-ua-3 {
      padding: 64px 0 32px 0;

      .urble-section-blocks {
        height: fit-content;
      }
    }

    .urble-section-ua-4 {
      padding-top: 0;
      padding-bottom: 64px;

      .urble-section-content-image {
        display: flex;
      }

      .urble-image-3 {
        display: none;
      }
    }

    .urble-section-ua-8 {
      .urble-section-content-image {
        display: none;
      }
    }

    .urble-scrolling-helper {
      display: none;
    }

    .urble-section-ua-5 {
      padding-top: 64px;
      padding-bottom: 64px;
    }

    .urble-section-ua-6 {
      padding-top: 64px;
      padding-bottom: 64px;
    }

    .urble-section-ua-7 {
      padding-bottom: 0;
    }

    .urble-section-ua-9 {
      .urble-mobile-only-item {
        display: flex !important;
      }

      .urble-section-blocks {
        .urble-section-image {
          .urble-section-image-block-1 {
            .urble-message:nth-child(2) {
              margin-top: 0;
            }
          }
        }

        .urble-message-image {
          display: none;
        }
      }
    }

    /* EDUCATION */
    .main .urble-section-e-1,
    .main .urble-section-e-2,
    .main .urble-section-e-3,
    .main .urble-section-e-4,
    .main .urble-section-e-5,
    .main .urble-section-e-6,
    .main .urble-section-e-7 {
      width: 100%;
      padding-inline: 0;
    }

    .main .urble-section-e-1 .urble-section-blocks,
    .main .urble-section-e-2 .urble-section-blocks,
    .main .urble-section-e-3 .urble-section-blocks,
    .main .urble-section-e-4 .urble-section-blocks,
    .main .urble-section-e-5 .urble-section-blocks,
    .main .urble-section-e-7 .urble-section-blocks,
    .main .urble-good-to-know-guides,
    .main .urble-good-to-know-blog-cards,
    .main .urble-good-to-know-questions,
    .main .urble-good-to-know-support-card,
    .main .urble-good-to-know-final-panel {
      min-width: 0;
      box-sizing: border-box;
    }

    .main .urble-good-to-know-guides .urble-card-link,
    .main .urble-good-to-know-guides .urble-good-to-know-guide-copy,
    .main .urble-good-to-know-blog-cards .urble-card-link,
    .main .urble-good-to-know-blog-cards .urble-card-text,
    .main .urble-good-to-know-final-panel article {
      min-width: 0;
      max-width: 100%;
    }

    .main .urble-good-to-know-guide-copy,
    .main .urble-good-to-know-blog-cards h2,
    .main .urble-good-to-know-blog-cards .urble-card-text,
    .main .urble-good-to-know-final-panel h3,
    .main .urble-good-to-know-final-panel p {
      overflow-wrap: anywhere;
      white-space: normal;
    }

    .main .urble-section-e-1 {
      margin-top: 0;
      padding: 0 0 32px;

      .urble-section-blocks {
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .urble-section-content {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        padding-top: 32px;
        align-items: center;
        transform: none;

        h1 {
          width: 100%;
          font-size: 32px;
          line-height: 32px;
        }

        .urble-section-lead,
        .urble-section-content-text {
          width: 640px;
          text-align: center;
        }
      }
    }

    .main .urble-good-to-know-hero-image {
      display: none;
    }

    .main .urble-section-e-2,
    .main .urble-section-e-3,
    .main .urble-section-e-4,
    .main .urble-section-e-5,
    .main .urble-section-e-7 {
      padding: 32px 0;
    }

    .main .urble-section-e-2 {
      margin-top: 0;
    }

    .main .urble-section-e-2 {
      .urble-section-blocks {
        grid-template-columns: minmax(0, 1fr);
      }

      .urble-section-content {
        width: 640px;
        margin: auto;
        text-align: center;

        h2 {
          font-size: 32px;
          line-height: 32px;
        }
      }

      .urble-good-to-know-guides {
        grid-template-columns: minmax(0, 1fr);

        .urble-good-to-know-guide-card {
          grid-column: auto;
        }

        .urble-card-link {
          min-height: 64px;
        }

        .urble-card-link > img {
          display: none;
        }
      }
    }

    .main .urble-section-e-3 {
      .urble-section-blocks {
        grid-template-columns: minmax(0, 1fr);
      }

      .urble-section-content {
        width: 640px;
        margin: auto;
        align-items: center;
        padding-left: 0;
        text-align: center;

        h2 {
          font-size: 32px;
          line-height: 32px;
        }
      }

      .urble-good-to-know-guides {
        grid-template-columns: minmax(0, 1fr);
      }
    }

    .main .urble-good-to-know-guides {
      grid-template-columns: minmax(0, 1fr);
      width: 100%;
    }

    .main .urble-section-e-4 {
      .urble-section-blocks {
        grid-template-columns: minmax(0, 1fr);
      }

      .urble-section-content {
        width: 640px;
        margin: auto;
        align-items: center;
        padding-left: 0;
        text-align: center;

        h2 {
          font-size: 32px;
          line-height: 32px;
        }
      }
    }

    .main .urble-good-to-know-questions,
    .main .urble-good-to-know-support-card {
      width: 640px;
      max-width: 100%;
      margin: auto;
    }

    .main .urble-good-to-know-support-card {
      height: auto;
      min-height: 224px;
      align-items: center;
      text-align: center;
    }

    .main .urble-section-e-5 {
      .urble-section-blocks {
        grid-template-columns: minmax(0, 1fr);
      }

      .urble-section-content {
        width: 640px;
        margin: auto;
        align-items: center;
        padding-left: 0;
        text-align: center;

        h2 {
          font-size: 32px;
          line-height: 32px;
        }
      }
    }

    .main .urble-good-to-know-blog-cards {
      grid-template-columns: minmax(0, 1fr);

      > .urble-card {
        height: 352px;
        min-height: 352px;
      }
    }

    .main .urble-section-e-7 {
      padding-bottom: 64px;

      .urble-circle-1,
      .urble-circle-2,
      .urble-circle-3 {
        display: none;
      }
    }

    .main .urble-good-to-know-final-panel {
      grid-template-columns: minmax(0, 1fr);

      article {
        width: 640px;
        max-width: 100%;
        margin: auto;

        + article {
          margin-top: 24px;
          margin-left: auto;
          padding-top: 24px;
          padding-left: 0;
          border-top: 1px solid var(--_Prim-Color-light-200);
          border-left: none;
        }
      }
    }

    /* FAQ */
    .urble-section-faq-1 {
      padding-top: 0;
      background: transparent;
      height: 428px;
      margin-bottom: 0;

      .urble-section-blocks {
        justify-content: center !important;
        position: relative;
        margin: 0;
        flex-wrap: wrap;
        gap: 32px;
        flex-direction: column;

        .urble-section-content {
          margin-top: 114px;

          .urble-section-content-text {
            color: var(--_Prim-Color-dark-100-Brand) !important;
          }
        }
      }

      .urble-section_image {
        position: absolute;
        z-index: -1;
        top: 138px !important;
        object-fit: cover;
        object-position: top;
        height: 250px !important;
      }

      .urble-section-content {
        padding-top: 32px !important;
      }
    }

    .urble-section-faq-2 {
      /* The section has no side padding on desktop — the two columns keep the content off the
         edges there. Stacked, it needs its own inset. */
      padding: 32px 16px 64px;

      & .urble-section-blocks {
        /* Question list above the answers: side by side, the 64px gap plus two full-width
           columns push the answers off the screen. */
        flex-direction: column;
        gap: 32px;

        .urble-faq-answers {
          margin-top: 0;
        }
      }

      .urble-faq-menu {
        width: 100% !important;
        /* box-sizing isn't global here, so the 16px padding has to come out of the width. */
        box-sizing: border-box;
        /* Nothing to stick to once it sits above the answers. */
        position: static;
      }

      .urble-faq-answer {
        h2 {
          text-align: start;
        }
      }
    }

    /* BLOG */
    .urble-section-blog-1 {
      padding-bottom: 32px;

      img {
        top: 148px;
      }

      .urble-section-content {
        margin-top: -46px;
        width: 100% !important;

        h1 {
          text-align: center;
        }
      }
    }

    .urble-section-blog-2 {
      padding: 0;
      margin-top: 0;

      .urble-section-blocks {
        .urble-cards {
          margin-top: 64px;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
        }
      }
    }

    .urble-section-blog-post-1 {
      min-height: 0;
      margin-top: 0;
      padding: 32px 16px 64px;

      .urble-section-blocks {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        gap: 24px;
        min-height: 0;
        padding: 24px;
        box-sizing: border-box;
      }

      .urble-link_button,
      .urble-post-header-navigation,
      .urble-post-header,
      > .urble-section-blocks > img {
        grid-column: 1;
        grid-row: auto;
      }

      .urble-post-header h1 {
        font-size: 32px;
        line-height: 32px;
        text-align: left;
      }

      .urble-post-header-description {
        margin-top: 16px;
        font-size: 16px;
        line-height: 24px;
      }

      .urble-post-header-details {
        margin-top: 24px;
      }

      > .urble-section-blocks > img {
        width: 100%;
        max-height: none;
        height: auto;
        margin: 0;
      }
    }

    .urble-section-blog-post-2 {
      padding: 64px 16px;

      & .urble-section-blocks {
        box-sizing: border-box;
        & .urble-blog-post {
          width: 100%;

          h2,
          h3 {
            text-align: left;
          }

          .urble-blog-post-info {
            flex-wrap: wrap;
          }
        }
      }
    }
  }

  .urble-header {
    padding: 0;

    .urble-header-group {
      width: 100%;
    }

    .urble-header_content {
      border-radius: 0;
      box-shadow: var(--urble-box-shadow-light);
      width: 100%;

      .urble-header_brand {
        gap: 8px;
      }

      .urble-header_logo img {
        height: 32px;
      }

      .urble-header_brand-divider {
        height: 28px;
      }

      .urble-swiss-made {
        gap: 6px;
      }

      .urble-swiss-made__flag {
        width: 24px;
        height: 24px;
      }

      .urble-swiss-made__label {
        font-size: 12px;
        line-height: 12px;
      }
    }

    .urble-header_menu,
    .urble-header_button_login,
    .urble-header_button_register {
      display: none;
    }

    .urble-header-mobile-menu {
      cursor: pointer;
      display: block;
      margin-right: 0;
      color: var(--_Prim-Color-dark-100-Brand);
      font-size: 48px;
      line-height: 48px;
    }

    .urble-language-picker {
      top: 23px;
      right: 80px;
    }

    .urble-header_language-selector {
      height: auto;
      min-width: 0;
      padding: 2px 3px;
      border-radius: 7px;
    }

    .urble-language-picker {
      .urble-language-flag {
        width: 30px;
        height: 20px;
      }
    }

    .urble-header_language-selector {
      .urble-language-chevron {
        font-size: 18px;
        line-height: 18px;
      }
    }
  }

  .urble-mobile-menu-expanded {
    overflow: hidden;

    .main {
      filter: blur(10px);
    }

    .urble-header-group {
      position: relative;

      .urble-header_content {
        box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.2);
      }

      .urble-header_menu {
        display: flex;
        background: var(--_Prim-Color-light-000-White);
        position: fixed;
        left: 0;
        right: 0;
        top: 68px;
        bottom: 0;
        min-width: 100%;
        width: 100%;
        height: auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;

        > ul {
          min-height: 0;
          height: max-content;
          padding-bottom: calc(40px + env(safe-area-inset-bottom));
        }

        ul {
          li {
            text-decoration: dashed;
            line-height: 48px !important;
            border: none !important;
            border-radius: 0;
            padding-left: 24px;

            &.urble-with-sub-menu {
              margin-bottom: 32px;
            }

            a {
              padding: 0 !important;
            }
          }

          min-width: 100%;
          font-size: 20px;
          gap: 0;
          display: flex;
          flex-direction: column;
          box-shadow: none !important;
          padding-top: 8px;

          ul {
            font-weight: 300;
            border: none !important;
            border-radius: 0;

            li {
              text-decoration: dashed;
            }
          }

          .urble-header_menu__menu-item .urble-submenu {
            position: relative;
            display: flex;
            flex-direction: column;
            opacity: 1;
            margin-top: -80px;
            /* counter uls absolute top here */
            margin-bottom: 48px;
            width: 100% !important;
            margin-left: -16px;
            padding: 4px 16px 0;
            box-sizing: border-box;

            .urble-submenu-item {
              line-height: normal;
              padding-left: 0;

              > a {
                grid-template-columns: minmax(0, 1fr) 72px;
                min-height: 92px;
                padding: 10px 12px !important;
              }

              .urble-submenu-item__illustration-frame {
                width: 72px;
                height: 72px;
              }
            }
          }
        }
      }
    }
  }
}

/* MOBILE ONL|Y */
@media (max-width: 600px) {
  /* MAKE MEMORIES */
  .urble-section-ua-9,
  .urble-section-uk-5 {
    .urble-circle-3 {
      display: none;
    }

    .urble-circle-4 {
      display: none;
    }

    .urble-circle-5 {
      display: none;
    }

    .urble-section-content-text {
      padding: 0 16px;
    }
  }
}

.urble-live-chf-balance {
  display: block;

  > img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.urble-live-chf-balance-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  .urble-live-chf-balance-cover {
    fill: var(--_Prim-Color-light-000-White);
  }

  .urble-live-chf-balance-value {
    fill: var(--urble-color-text-live-balance);
    font-family: Roboto;
    /* Native phone-art coordinates: 60px scales to the baked balance's size at every rendered phone width. */
    font-size: 60px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
}

/* =============================================================================
   index — canonical landing page.

   Section 1 is assembled from two self-contained homepage blocks:

     .urble-hero            — foreground copy over the animated section image
     .urble-highlight-strip — the outlined trust bar that closes the hero band

   Cross-page Web Components live in `src/components/`; these homepage layout
   blocks remain here until another screen actually reuses them.
   Full spec: sections/LANDING-SECTIONS.md
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Section 1 — hero band
   -------------------------------------------------------------------------- */

.urble-section-h-1 {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  /* Base rhythm; desktop extends this surface behind the header with an equal
     negative margin and compensating padding, without moving the content. */
  padding: 0 0 64px;
  background: var(--urble-color-surface-primary-low-emphasis);

  .urble-section-blocks {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }
}

/* -----------------------------------------------------------------------------
   COMPONENT — .urble-hero
   Copy column over the animated background. The section itself owns the image,
   so the copy, download controls, bubbles and highlight strip all paint above it.
   -------------------------------------------------------------------------- */

.urble-hero {
  position: relative;

  /* Preserves the measured hero height even if the copy runs short. */
  min-height: 472px;
  padding-top: 24px;

  /* Gradient discs are anchored to the container edge so they stay in the same
     place at every viewport width. */
  .urble-circle-1,
  .urble-circle-2 {
    position: absolute;
    border-radius: 600px;
    background: var(--urble-linear-gradient);
  }

  .urble-circle-1 {
    top: 320px;
    right: -32px;
    width: 114px;
    height: 114px;
  }

  .urble-circle-2 {
    top: 256px;
    right: -48px;
    width: 49px;
    height: 49px;
  }
}

.urble-hero__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 504px;
  max-width: 100%;
  padding-left: 32px;
  box-sizing: border-box;

  h1 {
    width: 400px;
    max-width: 100%;
    font-size: 64px;
    line-height: 68px;
  }
}

.urble-hero__lead {
  width: 400px;
  max-width: 100%;
  margin: 0;
  line-height: 22.4px;
  color: var(--_Prim-Color-dark-100-Brand);
}

/* Three app screens rotate around the CHF highlight tile on click.
   The active phone keeps the original 216px footprint and stays clear of the white strip. */
.urble-highlight-phone {
  position: absolute;
  z-index: 0;
  top: -496px;
  left: calc(50% - 128px);
  width: 400px;
  height: 462px;
  box-sizing: border-box;
  transform: translateX(-50%) scale(0.8);
  transform-origin: center bottom;
}

.urble-highlight-phone__screen {
  position: absolute;
  bottom: 24px;
  left: 50%;
  display: block;
  width: 216px;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.8;
  transform: translate(-50%, 0) scale(0.76);
  transform-origin: center bottom;
  transition:
    transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.urble-highlight-phone__screen--previous {
  z-index: 1;
  transform: translate(calc(-50% - 104px), 0) scale(0.76);
}

.urble-highlight-phone__screen--active {
  z-index: 3;
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.urble-highlight-phone__screen--next {
  z-index: 2;
  transform: translate(calc(-50% + 104px), 0) scale(0.76);
}

.urble-highlight-phone__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 461 / 920;
  padding: 0;
  border: 0;
  border-radius: 32px;
  background: transparent;
  box-sizing: border-box;
  filter: drop-shadow(var(--urble-drop-shadow-device));
}

.urble-highlight-phone__image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
}

/* The restored CHF screen uses a different native canvas; match its live counter
   overlay to the complete image without changing the shared gallery frame. */
.urble-highlight-phone__frame .urble-live-chf-balance-overlay {
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
}

.urble-highlight-phone__frame.urble-live-chf-balance > .urble-highlight-phone__image {
  height: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .urble-highlight-phone__screen--previous:hover,
  .urble-highlight-phone__screen--next:hover {
    opacity: 1;
  }

  .urble-highlight-phone__screen--active:hover {
    transform: translate(-50%, -8px) scale(1.04);
  }
}

.urble-highlight-phone--open .urble-highlight-phone__screen--active {
  transform: translate(-50%, -8px) scale(1.04);
}

.urble-highlight-phone__screen:focus-visible {
  outline: none;
}

.urble-highlight-phone__screen:focus-visible .urble-highlight-phone__frame {
  outline: 2px solid var(--urble-color-surface-affirmative-default);
  outline-offset: 4px;
}

.urble-phone-download-dialog {
  width: min(720px, calc(100% - 32px));
  max-width: 720px;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 24px;
  background: transparent;
  box-shadow: var(--urble-box-shadow-light);
  box-sizing: border-box;
  color: var(--_Prim-Color-light-000-White);
}

.urble-phone-download-dialog::backdrop {
  background: rgba(30, 32, 34, 0.56);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.urble-phone-download-dialog__close {
  position: absolute;
  z-index: 2;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--urble-color-surface-inverse-low-emphasis);
  color: var(--_Prim-Color-light-000-White);
  cursor: pointer;
}

.urble-phone-download-dialog__close:hover {
  background: var(--urble-color-surface-affirmative-default);
}

.urble-phone-download-dialog__close:focus-visible {
  outline: 2px solid var(--_Prim-Color-light-000-White);
  outline-offset: 2px;
}

.urble-phone-download-dialog__close .material-symbols-rounded {
  font-size: 24px;
}

.urble-phone-download-dialog .urble-download-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  min-height: 0;
  padding: 64px;
  text-align: center;
}

.urble-phone-download-dialog .urble-download-cta__copy {
  align-items: center;
  width: 560px;
}

.urble-phone-download-dialog .urble-download-cta__copy h2 {
  margin: 0;
  color: var(--_Prim-Color-light-000-White);
  font-family: Quicksand;
  font-size: 30px;
  font-weight: 700;
  line-height: 30px;
}

.main .urble-phone-download-dialog .urble-download-cta .urble-download {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.main .urble-phone-download-dialog .urble-download-cta .urble-download-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0;
  text-align: center;
}

.main .urble-phone-download-dialog .urble-download-cta .urble-download-qr::before {
  display: none;
}

.main .urble-phone-download-dialog .urble-download-cta .urble-download-qr__image {
  width: 176px !important;
  height: 176px !important;
}

.main .urble-phone-download-dialog .urble-download-cta .urble-download .urble-download-qr__title {
  justify-self: center;
  max-width: 320px;
  font-size: 16px;
  line-height: 22.4px;
  text-align: center;
}

/* -----------------------------------------------------------------------------
   Download block — the shared `.urble-download` component, re-laid-out for the
   hero: badges stacked beside the QR, with the caption spanning underneath.
   Markup stays the plain authored form; `initAppDownloadQrCodes()`
   still injects the badge wrapper, the QR and its caption (GUIDELINES §5).
   -------------------------------------------------------------------------- */

@media (min-width: 1121px) {
  .urble-section-h-1 {
    margin-top: -148px;
    padding-top: 148px;
  }

  .main .urble-hero .urble-download {
    grid-template:
      'badges qr' auto
      'title title' auto /
      144px 96px;
    column-gap: 24px;
    row-gap: 8px;
    align-items: center;
    justify-items: start;
    margin-top: 16px;
  }

  .main .urble-hero .urble-download__badges {
    flex-direction: column;
    gap: 16px;
  }

  .main .urble-hero .urble-download__badges > a > img {
    width: 144px !important;
  }

  .main .urble-hero .urble-download-qr__link {
    align-self: center;
  }

  .main .urble-hero .urble-download-qr__image {
    width: 80px !important;
    height: 80px !important;
  }

  .main .urble-hero .urble-download .urble-download-qr__title {
    justify-self: start;
    max-width: none;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
    text-align: left;
    color: var(--_Prim-Color-dark-300);
  }
}

/* -----------------------------------------------------------------------------
   COMPONENT — .urble-highlight-strip
   A single outlined row of icon + title + note, divided by hairlines. The card
   hangs 16px outside the container on each side so its *content* lines up with
   the container grid, exactly as it does in the design.
   -------------------------------------------------------------------------- */

.urble-highlight-strip {
  display: flex;
  align-items: center;
  margin: 0 -16px;
  padding: 24px 0;
  border: 1px solid var(--_Prim-Color-light-200);
  border-radius: 24px;
  background: var(--_Prim-Color-light-000-White);
  box-sizing: border-box;
}

.urble-highlight {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  box-sizing: border-box;
}

.urble-highlight__link {
  z-index: 2;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 16px;
  color: inherit;
  text-decoration: none;
}

/* The link's hit area covers the complete tile, including its padding. */
.urble-highlight__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
}

.urble-highlight__link:focus-visible::after {
  outline: 2px solid var(--urble-color-surface-affirmative-default);
  outline-offset: -2px;
}

.urble-highlight + .urble-highlight {
  border-left: 1px solid var(--_Prim-Color-light-200);
}

/* The translated strip can grow to different heights. Stretch the CHF tile so the
   phone's top anchor stays fixed to the strip padding edge in every language. */
.urble-highlight.urble-highlight--chf {
  align-self: stretch;
  border-left: 0;
}

.urble-highlight--chf::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 0;
  width: 1px;
  height: 48px;
  background: var(--_Prim-Color-light-200);
  pointer-events: none;
  transform: translateY(-50%);
}

.urble-highlight__icon,
.urble-step__icon,
.urble-yield-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--urble-color-surface-brand-low-emphasis);
  color: var(--_Prim-Color-dark-100-Brand);

  .material-symbols-rounded {
    font-size: 24px;
  }
}

/* Brand marks (Swiss cross, Bitcoin) come in as square artwork and supply their
   own fill, so the tinted disc is replaced by the image itself. */
.urble-highlight__icon--image {
  background: none;

  img {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    object-fit: cover;
  }
}

.urble-highlight__copy,
.urble-step__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Strip-only: what makes a long title wrap to two lines instead of stretching the row. */
.urble-highlight__copy {
  max-width: 160px;
}

.urble-highlight__title,
.urble-step__title {
  font-family: Quicksand;
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  color: var(--_Prim-Color-dark-100-Brand);
}

.urble-highlight__note,
.urble-step__note {
  font-size: 14px;
  line-height: 20px;
  color: var(--_Prim-Color-dark-300);
}

.urble-highlight__logo {
  height: 16px;
  width: auto;
  vertical-align: -3px;
}

/* -----------------------------------------------------------------------------
   Copy column shared by sections 2 and 3 — the muted paragraph that follows the
   eyebrow + h2. Deliberately 16px, not the 18px `.urble-section-lead`: both mocks
   measure 16 / 22.4 (see sections/LANDING-SECTIONS.md, Open items).
   -------------------------------------------------------------------------- */

.urble-section-copy {
  margin: 0;
  line-height: 22.4px;
  color: var(--_Prim-Color-dark-300);
}

/* -----------------------------------------------------------------------------
   Section 2 — the problem

   Copy column left, a panel of cards right. The two chart cards share row 1;
   the statement card spans the row immediately below them, followed by the
   footnote.
   -------------------------------------------------------------------------- */

.urble-section-h-2 {
  display: flex;
  flex-direction: column;
  padding: 64px 0;

  .urble-section-blocks {
    display: grid;
    grid-template-columns: 328px minmax(0, 1fr);
    column-gap: 32px;
    align-items: start;
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }
}

.urble-section-h-2__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.urble-section-h-2__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* Match the full width of the statement card above. The decorative cluster may
   sit slightly beneath the note at the lower-right edge. */
.urble-section-h-2__note {
  grid-column: 1 / -1;
  display: flex;
  align-self: start;
  gap: 16px;
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--_Prim-Color-dark-300);

  .material-symbols-rounded {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 20px;
    color: var(--urble-color-surface-affirmative-default);
  }
}

/* -----------------------------------------------------------------------------
   COMPONENT — .urble-stat-card
   A `.urble-card` carrying one figure, its label and an optional sparkline pinned
   to the bottom edge. The base card is fixed at 340 x 282, so the size is released
   here and the grid track decides instead.
   -------------------------------------------------------------------------- */

.main .urble-card.urble-stat-card {
  width: auto;
  max-width: none;
  height: auto;
  gap: 8px;
  box-shadow: var(--urble-box-shadow-light);
}

.urble-stat-card__figure {
  font-family: Quicksand;
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  color: var(--_Prim-Color-dark-100-Brand);
}

.urble-stat-card__figure--negative {
  color: var(--urble-color-text-negative);
}

.urble-stat-card__label {
  font-size: 14px;
  line-height: 20px;
  color: var(--_Prim-Color-dark-300);
}

/* `margin-top: auto` keeps the chart on the bottom edge however tall the row grows,
   and the padding guarantees air above it when the copy above runs long. */
.urble-stat-card__chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: auto;
  padding-top: 16px;
}

.main .urble-card.urble-stat-card--statement {
  grid-column: 1 / -1;
  gap: 16px;

  h3 {
    font-family: Quicksand;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: var(--urble-color-surface-affirmative-default);
  }

  /* `.urble-card-text` only carries the color; nothing in common.css sets a global
     line-height, so body copy has to state its own. */
  .urble-card-text {
    line-height: 22.4px;
  }
}

/* -----------------------------------------------------------------------------
   Section 3 — our approach

   Two columns: copy on the left; a wider detail column on the right with the
   step list above the two product cards.
   -------------------------------------------------------------------------- */

.urble-section-h-3 {
  display: flex;
  flex-direction: column;
  padding: 64px 0;

  .urble-section-blocks {
    display: grid;
    grid-template-columns: 328px minmax(0, 1fr);
    column-gap: 64px;
    align-items: start;
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }
}

.urble-section-h-3__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.urble-section-h-3__details {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 24px;
}

.urble-section-h-3__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

/* -----------------------------------------------------------------------------
   COMPONENT — .urble-step-list
   The same icon + title + note atom as `.urble-highlight` (the rules above are
   shared), stacked vertically and top-aligned instead of laid out in a row.
   -------------------------------------------------------------------------- */

.urble-step-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.urble-step {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* The goal steps use a larger treatment than the compact trust-strip atoms. */
.urble-step__icon {
  width: 72px;
  height: 72px;
  color: var(--urble-color-surface-affirmative-default);

  .material-symbols-rounded {
    font-size: 40px;
  }
}

/* -----------------------------------------------------------------------------
   COMPONENT — .urble-product-card
   The gradient photo teaser, in the short landing-page proportion. This is *not*
   the 291 x 612 teaser that index / urble me / urble kids share verbatim
   (GUIDELINES §5) — that one keeps its own size and its 42px inset.
   -------------------------------------------------------------------------- */

.main .urble-card.urble-product-card {
  position: relative;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 232px;
  padding: 24px;
  overflow: hidden;
  background: transparent;

  /* `flex: 1`, not `height: 100%`: the card's own height is auto (`min-height` only), so a
     percentage would resolve to auto and `justify-content: flex-end` would have nothing to
     push the copy against. */
  .urble-card-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
  }

  .urble-card-text {
    line-height: 22.4px;
    color: var(--_Prim-Color-light-000-White);
  }

  /* `inset: 0` resolves against the padding box, so the photo still fills the card
     edge to edge while the copy stays inside the 24px padding. */
  img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.urble-product-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 22.4px;
  color: var(--_Prim-Color-light-000-White);
}

/* -----------------------------------------------------------------------------
   Solid brand-green text accent — the mocks colour the closing period of the
   section head and the word "urble" in the CTA. `.urble-gradient-text` is the
   wrong tool at that scale: a 40° ramp across one glyph's box reads as a single
   arbitrary colour off the gradient, not as the brand green.
   -------------------------------------------------------------------------- */

.urble-text-affirmative {
  color: var(--urble-color-surface-affirmative-default);
}

/* -----------------------------------------------------------------------------
   Section 4 — how urble works

   Three numbered step cards, then the reusable compact download band.
   -------------------------------------------------------------------------- */

.urble-section-h-4 {
  display: flex;
  flex-direction: column;
  padding: 64px 0;

  .urble-section-blocks {
    display: flex;
    flex-direction: column;
    gap: 64px;
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }
}

.urble-section-h-4__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.urble-step-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

/* -----------------------------------------------------------------------------
   COMPONENT — .urble-step-card
   A numbered `.urble-card`: big green numeral + title, then a phone screenshot
   beside its copy. Distinct from `.urble-step` above, which is the icon + title
   + note row used in section 3.
   -------------------------------------------------------------------------- */

.main .urble-card.urble-step-card {
  width: auto;
  max-width: none;
  height: auto;
  gap: 16px;
  background: var(--urble-color-surface-primary-low-emphasis);
}

.urble-step-card__header {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* The numeral is the list marker `reset.css` removed, so it carries the step
   number for a screen reader too — don't hide it. */
.urble-step-card__number {
  font-family: Quicksand;
  font-size: 48px;
  font-weight: 700;
  line-height: 48px;
}

.urble-step-card__title {
  font-family: Quicksand;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--_Prim-Color-dark-100-Brand);
}

.urble-step-card__body {
  display: flex;
  align-items: center;
  gap: 24px;
}

.urble-step-card__phone {
  display: block;
  flex: 0 0 152px;
  width: 152px;
  height: auto;
  object-fit: contain;
}

.urble-step-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--_Prim-Color-dark-100-Brand);
}

/* -----------------------------------------------------------------------------
   Section 5 — what saving habits unlock

   Same shape as section 4: eyebrow + shared display head, then three cards. The
   closing line is `margin-top: auto`, so it sits on the bottom edge of whichever
   card the row stretched to and the three read as one baseline.
   -------------------------------------------------------------------------- */

.urble-section-h-5 {
  display: flex;
  flex-direction: column;
  padding: 64px 0;

  .urble-section-blocks {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }
}

.urble-section-h-5__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.urble-yield-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.main .urble-card.urble-yield-card {
  width: auto;
  max-width: none;
  height: auto;
  gap: 8px;
  border: 1px solid var(--_Prim-Color-light-200);
}

.urble-yield-card__title {
  font-family: Quicksand;
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--_Prim-Color-dark-100-Brand);
}

.urble-yield-card__note {
  margin: 0;
  line-height: 22.4px;
  color: var(--_Prim-Color-dark-300);
}

/* 32 on top of the card's own 8px gap. */
.urble-yield-card__visual {
  margin-top: 32px;
}

/* `margin-top: auto` puts the line on the card's bottom edge, so the three cards' closing
   lines align however unevenly the translated copy above them runs. The padding is the
   minimum breathing room for the card that happens to be the tallest. */
.urble-yield-card__footer {
  margin: auto 0 0;
  padding-top: 40px;
  font-weight: 700;
  line-height: 22.4px;
  text-align: center;
  color: var(--_Prim-Color-dark-100-Brand);
}

/* -----------------------------------------------------------------------------
   COMPONENT — .urble-yield-chart
   A three-point trend: values above the dots, a dashed baseline, category labels
   under it. The connecting line is an SVG stretched across the plot; its vertices
   are the column centres at the levels below, so the two have to move together.
   -------------------------------------------------------------------------- */

.urble-yield-chart {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 104px auto;
  column-gap: 0;
  row-gap: 12px;
}

/* Absolutely positioned, so it is taken out of the grid flow and covers the plot row. */
.urble-yield-chart__line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 104px;
}

/* Three adjacent bottom borders with no column gap read as one dashed baseline. */
.urble-yield-chart__step {
  position: relative;
  border-bottom: 1px dashed var(--_Prim-Color-light-200);
}

/* `nth-of-type`, not `nth-child`: the SVG is an `<img>` and the ticks are `<span>`s that
   follow the steps, so counting spans lands on steps 1-3 and skips the line. Keep the three
   steps as the first three `<span>` children if you touch the markup. */
.urble-yield-chart__step:nth-of-type(1) {
  --urble-yield-level: 26px;
}

.urble-yield-chart__step:nth-of-type(2) {
  --urble-yield-level: 52px;
}

.urble-yield-chart__step:nth-of-type(3) {
  --urble-yield-level: 76px;
}

.urble-yield-chart__dot {
  position: absolute;
  left: 50%;
  bottom: var(--urble-yield-level);
  width: 10px;
  height: 10px;
  margin: 0 0 -5px -5px;
  border-radius: 999px;
  background: var(--urble-color-surface-affirmative-default);
}

.urble-yield-chart__value {
  position: absolute;
  left: 50%;
  bottom: calc(var(--urble-yield-level) + 16px);
  transform: translateX(-50%);
  white-space: nowrap;
  font-weight: 700;
  line-height: 22.4px;
  color: var(--_Prim-Color-dark-100-Brand);
}

.urble-yield-chart__tick {
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--_Prim-Color-dark-300);
}

/* -----------------------------------------------------------------------------
   COMPONENT — .urble-period-compare
   "4 months = earnings = 4 years", using compact calendar pages that reproduce the
   supplied Section 5 artwork without introducing another bitmap asset.
   -------------------------------------------------------------------------- */

.urble-period-compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 128px;
}

.urble-period-calendar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 112px;
  padding-top: 20px;
  overflow: visible;
  border: 1px solid var(--_Prim-Color-light-200);
  border-radius: 16px;
  box-sizing: border-box;
  background: var(--_Prim-Color-light-000-White);
  box-shadow:
    4px 4px 0 var(--urble-color-surface-affirmative-low-emphasis),
    8px 8px 0 var(--_Prim-Color-light-100);
  transform: rotate(-3deg);
}

.urble-period-calendar::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 24px;
  border-radius: 15px 15px 0 0;
  background: var(--urble-linear-gradient);
}

.urble-period-calendar__rings {
  position: absolute;
  z-index: 1;
  top: -8px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
}

.urble-period-calendar__rings span {
  width: 4px;
  height: 20px;
  border-radius: 999px;
  background: var(--_Prim-Color-dark-100-Brand);
}

.urble-period-calendar__value {
  position: relative;
  font-family: Quicksand;
  font-size: 48px;
  font-weight: 700;
  line-height: 48px;
}

.urble-period-calendar__unit {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--_Prim-Color-dark-300);
}

.urble-period-calendar--muted {
  color: var(--_Prim-Color-dark-300);
  box-shadow:
    4px 4px 0 var(--_Prim-Color-light-200),
    8px 8px 0 var(--_Prim-Color-light-100);
  transform: rotate(3deg);
}

.urble-period-calendar--muted::before {
  background: var(--_Prim-Color-light-200);
}

.urble-period-calendar--muted .urble-period-calendar__rings span {
  background: var(--_Prim-Color-dark-300);
}

.urble-period-compare__equals {
  font-size: 20px;
  color: var(--_Prim-Color-dark-300);
}

.urble-yield-icon--earnings {
  width: 72px;
  height: 51px;
  background: transparent;
}

.urble-yield-coins {
  width: 72px;
  height: 51px;
  overflow: visible;
}

.urble-yield-coins__stack {
  fill: var(--urble-color-text-rating);
  stroke: var(--_Prim-Color-dark-100-Brand);
  stroke-width: 5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -----------------------------------------------------------------------------
   Section 6 — the savings simulator

   Two cards side by side: the inputs (left, under the heading) and the result
   (right, spanning both rows). Everything the TypeScript touches is addressed by
   `data-urble-sim`, never by class, so restyling can't break the wiring.
   -------------------------------------------------------------------------- */

.urble-section-h-6 {
  display: flex;
  flex-direction: column;
  padding: 64px 0;

  .urble-section-blocks {
    display: grid;
    grid-template-columns: 384px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 24px;
    row-gap: 24px;
    align-items: start;
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }
}

.urble-section-h-6__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* -----------------------------------------------------------------------------
   The input card
   -------------------------------------------------------------------------- */

.main .urble-card.urble-sim-form {
  width: auto;
  max-width: none;
  height: auto;
  gap: 8px;
  border: 1px solid var(--_Prim-Color-light-200);
}

.urble-sim-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
}

.urble-sim-row__label {
  line-height: 22.4px;
  color: var(--_Prim-Color-dark-100-Brand);
}

/* One field shell for both `<input>` and `<select>`, so a text box and a dropdown
   are the same object at a glance. `reset.css` does not touch form controls, hence
   the appearance reset on the control itself. */
.urble-sim-field {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  width: 152px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--_Prim-Color-light-200);
  border-radius: 16px;
  background: var(--_Prim-Color-light-000-White);
}

.urble-sim-field--wide {
  width: 208px;
}

.urble-sim-field:focus-within {
  border-color: var(--urble-color-surface-affirmative-default);
}

.urble-sim-field__prefix {
  flex: 0 0 auto;
  color: var(--_Prim-Color-dark-300);
}

.urble-sim-field__input {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  font-family: Roboto;
  font-size: 16px;
  line-height: 22.4px;
  color: var(--_Prim-Color-dark-100-Brand);
  appearance: none;
  -webkit-appearance: none;
}

.urble-sim-field__input:focus {
  outline: none;
}

/* Numbers read right-aligned against the CHF prefix, the way the mock sets them. */
.urble-sim-field:not(.urble-sim-field--select) .urble-sim-field__input {
  text-align: right;
}

/* Room for the chevron, which is decorative — the native control still opens. */
.urble-sim-field--select .urble-sim-field__input {
  padding-right: 24px;
  cursor: pointer;
}

.urble-sim-field__chevron {
  position: absolute;
  right: 10px;
  pointer-events: none;
  font-size: 20px;
  color: var(--_Prim-Color-dark-300);
}

.urble-sim-yield {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--_Prim-Color-light-200);
  line-height: 22.4px;
  color: var(--_Prim-Color-dark-100-Brand);
}

.urble-sim-yield__value {
  margin-left: auto;
  font-weight: 700;
  color: var(--urble-color-surface-affirmative-default);
}

/* -----------------------------------------------------------------------------
   The result card
   -------------------------------------------------------------------------- */

.main .urble-card.urble-sim-result {
  grid-column: 2;
  grid-row: 1 / 3;
  width: auto;
  max-width: none;
  height: auto;
  gap: 8px;
  padding: 32px;
  border: 1px solid var(--_Prim-Color-light-200);
}

.urble-sim-result__label {
  font-weight: 700;
  line-height: 22.4px;
  color: var(--_Prim-Color-dark-100-Brand);
}

.urble-sim-result__total {
  font-family: Quicksand;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  color: var(--urble-color-surface-affirmative-default);
}

.urble-sim-split {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  margin-top: 8px;
}

/* A 2-column grid per item: the dot spans both rows so the caption lines up under
   the amount rather than under the dot. */
.urble-sim-split__item {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 12px;
}

.urble-sim-split__dot {
  grid-row: 1 / 3;
  width: 16px;
  height: 16px;
  border-radius: 999px;
}

.urble-sim-split__dot--contributed {
  background: var(--urble-color-ab);
}

.urble-sim-split__dot--earnings {
  background: var(--urble-color-surface-affirmative-default);
}

.urble-sim-split__value {
  font-weight: 700;
  line-height: 22.4px;
  color: var(--_Prim-Color-dark-100-Brand);
}

.urble-sim-split__caption {
  font-size: 14px;
  line-height: 20px;
  color: var(--_Prim-Color-dark-300);
}

/* -----------------------------------------------------------------------------
   COMPONENT — .urble-sim-chart
   Stacked columns with a fixed five-line scale. The scale labels and the gridlines
   are positioned by `nth-child` at 0 / 25 / 50 / 75 / 100 %. TypeScript updates
   their text, the segment heights, and the period-aware x-axis ticks.
   -------------------------------------------------------------------------- */

.urble-sim-chart {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-rows: 200px auto;
  column-gap: 12px;
  row-gap: 8px;
  margin-top: 24px;
}

.urble-sim-chart__scale {
  position: relative;
}

.urble-sim-chart__scale-label {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 20px;
  color: var(--_Prim-Color-dark-300);
}

.urble-sim-chart__scale-label:nth-child(1) {
  top: 0;
}

.urble-sim-chart__scale-label:nth-child(2) {
  top: 25%;
}

.urble-sim-chart__scale-label:nth-child(3) {
  top: 50%;
}

.urble-sim-chart__scale-label:nth-child(4) {
  top: 75%;
}

.urble-sim-chart__scale-label:nth-child(5) {
  top: 100%;
}

.urble-sim-chart__plot {
  position: relative;
}

.urble-sim-chart__grid {
  position: absolute;
  inset: 0;
}

.urble-sim-chart__gridline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--_Prim-Color-light-200);
}

.urble-sim-chart__gridline:nth-child(1) {
  top: 0;
}

.urble-sim-chart__gridline:nth-child(2) {
  top: 25%;
}

.urble-sim-chart__gridline:nth-child(3) {
  top: 50%;
}

.urble-sim-chart__gridline:nth-child(4) {
  top: 75%;
}

.urble-sim-chart__gridline:nth-child(5) {
  top: 100%;
}

.urble-sim-chart__bars {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-items: flex-end;
  column-gap: 4px;
}

.urble-sim-chart__bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  justify-self: center;
  grid-row: 1;
  width: 100%;
  height: 100%;
  max-width: var(--urble-sim-bar-max-width, 40px);
  min-width: 0;
}

/* Earnings sits above contributed, so it comes first in a column that ends at the
   baseline. Both are percentages of the plot, which is why the plot has a fixed
   height rather than an intrinsic one. */
.urble-sim-chart__segment {
  transition: height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.urble-sim-chart__segment--earnings {
  border-radius: 4px 4px 0 0;
  background: var(--urble-color-surface-affirmative-default);
}

.urble-sim-chart__segment--contributed {
  background: var(--urble-color-ab);
}

.urble-sim-chart__axis {
  grid-column: 2;
  display: grid;
  grid-template-rows: 20px;
  column-gap: 4px;
  height: 20px;
}

.urble-sim-chart__tick {
  justify-self: center;
  grid-row: 1;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--_Prim-Color-dark-300);
}

.urble-sim-legend {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 24px;
}

.urble-sim-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--_Prim-Color-dark-100-Brand);
}

.urble-sim-legend__swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.urble-sim-legend__swatch--contributed {
  background: var(--urble-color-ab);
}

.urble-sim-legend__swatch--earnings {
  background: var(--urble-color-surface-affirmative-default);
}

.urble-sim-disclaimer {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: var(--_Prim-Color-dark-300);

  em {
    font-style: italic;
  }
}

.urble-sim-explanation {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 100%;
  margin-top: 16px;
  font-size: 16px;
  line-height: 22.4px;
  text-align: center;
  color: var(--_Prim-Color-dark-300);
}

.urble-sim-bubbles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  .urble-circle-1,
  .urble-circle-2,
  .urble-circle-3 {
    position: absolute;
    border-radius: 600px;
    background: var(--urble-linear-gradient);
  }

  .urble-circle-1 {
    top: -64px;
    right: -48px;
    width: 114px;
    height: 114px;
  }

  .urble-circle-2 {
    top: -24px;
    right: 96px;
    width: 66px;
    height: 66px;
  }

  .urble-circle-3 {
    top: 72px;
    right: -16px;
    width: 49px;
    height: 49px;
  }
}

/* -----------------------------------------------------------------------------
   Section 7 — testimonials

   The review content and rail behavior match the current index.html section. Its
   type follows the homepage section and card scales, and the outer wrapper stays in
   normal document flow after the simulator.
   -------------------------------------------------------------------------- */

.urble-section-h-7 {
  display: flex;
  flex-direction: column;
  padding: 64px 0 32px;
  overflow: hidden;
  background: var(--urble-linear-gradient-light-greenish);

  .urble-section-blocks {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    max-width: 1240px;
    margin: auto;
  }

  .urble-reviews-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding: 0 16px;
  }

  .urble-reviews-heading {
    max-width: 864px;

    h2 {
      margin: 14px 0 16px;
      color: var(--_Prim-Color-dark-100-Brand);
      font-weight: 700;
    }

    p {
      max-width: 580px;
    }
  }

  .urble-reviews-eyebrow {
    .material-symbols-rounded {
      font-size: 19px;
    }
  }

  .urble-reviews-controls {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
  }

  .urble-reviews-scroll-hint {
    margin-inline-end: 4px;
    color: var(--_Prim-Color-dark-300);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
  }

  .urble-reviews-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid var(--urble-color-border-review-control);
    border-radius: 50%;
    background: var(--urble-color-surface-review-control);
    color: var(--_Prim-Color-dark-100-Brand);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;

    &:hover:not(:disabled) {
      border-color: var(--urble-color-surface-affirmative-default);
      background: var(--urble-color-surface-affirmative-default);
      color: var(--_Prim-Color-light-000-White);
      transform: translateY(-2px);
    }

    &:focus-visible {
      outline: 3px solid var(--urble-color-outline-review-control);
      outline-offset: 3px;
    }

    &:disabled {
      opacity: 0.35;
      cursor: default;
    }

    .material-symbols-rounded {
      font-size: 22px;
    }
  }

  .urble-reviews-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(320px, 378px);
    gap: 20px;
    width: 100%;
    padding: 4px 16px 24px;
    box-sizing: border-box;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &:focus-visible {
      outline: 3px solid var(--urble-color-outline-review-rail);
      outline-offset: 3px;
      border-radius: 24px;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .urble-review-card {
    display: flex;
    flex-direction: column;
    min-height: 292px;
    padding: 28px;
    box-sizing: border-box;
    border: 1px solid var(--urble-color-border-review-card);
    border-radius: 28px;
    background: var(--urble-color-surface-review-card);
    scroll-snap-align: start;
    transition: transform 0.25s ease;

    &:hover {
      transform: translateY(-4px);
    }

    blockquote {
      flex: 1;
      margin: 20px 0 28px;
      color: var(--_Prim-Color-dark-100-Brand);
      font-size: 16px;
      line-height: 22.4px;
      font-weight: 400;
    }

    footer {
      display: flex;
      align-items: center;
      gap: 12px;
    }
  }

  .urble-review-stars {
    color: var(--urble-color-text-rating);
    font-size: 18px;
    line-height: 1;
    letter-spacing: 3px;
  }

  .urble-review-avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--urble-color-surface-review-avatar);
    object-fit: cover;
  }

  .urble-review-person {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;

    strong {
      color: var(--_Prim-Color-dark-100-Brand);
      font-size: 16px;
      line-height: 22.4px;
      font-weight: 700;
    }

    time {
      color: var(--_Prim-Color-dark-300);
      font-size: 14px;
      line-height: 20px;
    }
  }
}

/* -----------------------------------------------------------------------------
   Section 8 — feature comparison
   -------------------------------------------------------------------------- */

.urble-section-h-8 {
  display: flex;
  flex-direction: column;
  padding: 64px 0;

  .urble-section-blocks {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }
}

.urble-section-h-8__intro {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.urble-comparison-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.urble-comparison-title > span {
  font: inherit;
}

/* Use the real SVG as an image. A CSS mask proved fragile in the built page and
   could leave both wordmarks invisible even though their boxes were present. */
.urble-brand-wordmark {
  display: block;
  flex: 0 0 auto;
  object-fit: contain;
}

.urble-brand-wordmark--title {
  width: 144px;
  height: 52px;
  margin-inline: 8px;
}

.urble-brand-wordmark--table {
  width: 88px;
  height: 32px;
  margin-inline: auto;
}

.urble-comparison-table-wrap {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border: 1px solid var(--_Prim-Color-light-200);
  border-radius: 16px;
  background: var(--_Prim-Color-light-000-White);

  &:focus-visible {
    outline: 3px solid var(--urble-color-surface-affirmative-default);
    outline-offset: 3px;
  }
}

.urble-comparison-table {
  width: 100%;
  min-width: 800px;
  table-layout: fixed;
  border-spacing: 0;
  border-collapse: separate;
  color: var(--_Prim-Color-dark-100-Brand);

  .urble-comparison-table__feature-column {
    width: 32.2%;
  }

  .urble-comparison-table__urble-column {
    width: 25.2%;
  }

  .urble-comparison-table__banking-column {
    width: 20.5%;
  }

  th,
  td {
    padding: 12px 24px;
    border-right: 1px solid var(--_Prim-Color-light-200);
    border-bottom: 1px solid var(--_Prim-Color-light-200);
    vertical-align: middle;
  }

  tr > :last-child {
    border-right: 0;
  }

  tbody tr:last-child > * {
    border-bottom: 0;
  }

  thead th {
    height: 60px;
    box-sizing: border-box;
    background: var(--urble-color-surface-primary-low-emphasis);
    font-family: Quicksand;
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 700;
    text-align: center;
  }

  thead th:first-child {
    background: var(--_Prim-Color-dark-100-Brand);
    color: var(--_Prim-Color-light-000-White);
    text-align: left;
  }

  thead .urble-comparison-table__brand-heading,
  tbody td:nth-child(2) {
    background: var(--urble-color-surface-affirmative-low-emphasis);
  }

  tbody th {
    min-height: 68px;
    font-size: 16px;
    line-height: 22.4px;
    font-weight: 400;
    text-align: left;
  }

  tbody td {
    height: 68px;
    box-sizing: border-box;
    text-align: center;
  }

}

.urble-comparison-table__brand-heading {
  line-height: 0;
}

.urble-comparison-feature {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}

.urble-comparison-feature__label {
  flex: 1 1 auto;
  min-width: 0;
}

.urble-comparison-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: 24px;
  color: var(--urble-color-surface-affirmative-default);
  vertical-align: middle;

  .material-symbols-rounded {
    font-size: 40px;
  }
}

.urble-comparison-feature__icon--chf {
  box-sizing: border-box;
  border: 2px solid var(--urble-color-surface-affirmative-default);
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
}

.urble-comparison-status {
  font-size: 28px;
  line-height: 1;
}

.urble-comparison-status--yes {
  color: var(--urble-color-surface-affirmative-default);
}

.urble-comparison-status--no {
  color: var(--urble-color-text-primary-disabled);
}

/* -----------------------------------------------------------------------------
   Sections 9–10 — savings options and commitments

   These two sections share one supplied mock and the same 1080px content grid.
   Product artwork comes from the current homepage, while type, card geometry and
   spacing follow the homepage scale.
   -------------------------------------------------------------------------- */

.urble-section-h-9,
.urble-section-h-10 {
  display: flex;
  flex-direction: column;
  padding: 64px 0;

  .urble-section-blocks {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }
}

.urble-section-h-9__intro,
.urble-section-h-10__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.urble-saving-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.main .urble-card.urble-saving-option {
  width: auto;
  max-width: none;
  height: auto;
  min-height: unset;
  gap: 16px;
  border: 1px solid var(--_Prim-Color-light-200);
}

.main .urble-card.urble-saving-option--coming {
  border-style: dashed;
}

.urble-saving-option__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
}

.urble-saving-option__icons {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;

  img {
    display: block;
    flex: 0 0 auto;
    border-radius: 999px;
    object-fit: contain;
  }
}

.urble-saving-option__title {
  margin: 0;
  font-family: Quicksand;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  color: var(--_Prim-Color-dark-100-Brand);
}

.urble-saving-option__copy {
  margin: 0;
  color: var(--_Prim-Color-dark-300);
  font-size: 16px;
  line-height: 22.4px;
}

.urble-saving-option__wordmark {
  width: auto;
  height: 24px;
  max-height: 24px;
  margin-left: 8px;
  vertical-align: -5px;
}

.urble-saving-option__link,
.urble-saving-option__link:visited,
.urble-saving-option__link:hover,
.urble-saving-option__link:active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: auto;
  color: var(--urble-color-surface-affirmative-default);
  font-size: 16px;
  line-height: 22.4px;
  font-weight: 700;
  text-decoration: none;
}

.urble-saving-option__link:hover {
  text-decoration: underline;
}

.urble-saving-option__link .material-symbols-rounded {
  font-size: 24px;
}

.urble-section-h-10 .urble-section-blocks {
  gap: 24px;
}

.urble-section-h-10__intro {
  max-width: 560px;
}

.urble-commitment-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.main .urble-card.urble-commitment-card {
  align-items: center;
  width: auto;
  max-width: none;
  height: auto;
  min-height: 336px;
  gap: 16px;
  border: 1px solid var(--_Prim-Color-light-200);
  text-align: center;

  .urble-card-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    margin: 0;
  }

  .urble-card-text {
    width: 100%;
    margin: 0;
    color: var(--_Prim-Color-dark-300);
    font-size: 16px;
    line-height: 22.4px;
    text-align: left;
  }
}

.urble-commitment-card__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 999px;
  background: var(--urble-color-surface-brand-low-emphasis);
  color: var(--urble-color-surface-affirmative-default);

  .material-symbols-rounded {
    font-size: 40px;
  }
}

.urble-commitment-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: var(--_Prim-Color-dark-300);
  font-size: 14px;
  line-height: 20px;
  text-align: center;

  .material-symbols-rounded {
    flex: 0 0 auto;
    color: var(--urble-color-ab);
    font-size: 32px;
    line-height: 32px;
    font-variation-settings: 'FILL' 1, 'GRAD' 0;
  }
}

/* -----------------------------------------------------------------------------
   Section 11 — FAQ

   The accordion itself is the shared component from common.css. This block only
   gives it the homepage section container, heading scale and CTA placement.
   -------------------------------------------------------------------------- */

.urble-section-h-11 {
  display: flex;
  flex-direction: column;
  padding: 64px 0;

  .urble-section-blocks {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }

  h2 {
    max-width: 720px;
  }

  .urble-accordion-sections {
    width: 100%;
  }

  .urble-accordion {
    line-height: 22.4px;
  }

  .urble-accordion-panel p:last-child {
    margin-bottom: 0;
  }

  .urble-link_button {
    align-self: flex-start;
  }
}

.urble-section-h-11__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/* Every top-level landing section uses the same display scale as the redesigned
   hero. Card and component titles keep their smaller, established roles. */
.urble-hero__content h1,
.urble-section-h-2__intro h2,
.urble-section-h-3__intro h2,
.urble-section-h-4__intro h2,
.urble-section-h-5__intro h2,
.urble-section-h-6__intro h2,
.urble-section-h-7 .urble-reviews-heading h2,
.urble-section-h-8__intro h2,
.urble-section-h-9__intro h2,
.urble-section-h-10__intro h2,
.urble-section-h-11__intro h2 {
  font-size: 64px;
  line-height: 68px;
}

/* -----------------------------------------------------------------------------
   Contained zebra page shell

   Support establishes the 1144px background band around the shared 1080px
   content grid. The homepage uses the same shell, alternating the standard brand-low
   surface with white rather than introducing a page-specific background colour.
   -------------------------------------------------------------------------- */

.urble-section-h-1,
.urble-section-h-2,
.urble-section-h-3,
.urble-section-h-4,
.urble-section-h-5,
.urble-section-h-6,
.urble-section-h-7,
.urble-section-h-8,
.urble-section-h-9,
.urble-section-h-10,
.urble-section-h-11,
.urble-section-h-12 {
  width: 1144px;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 32px;
  box-sizing: border-box;
}

.urble-section-h-1 {
  background-color: var(--_Prim-Color-light-000-White);
}

.urble-section-h-1__background {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  opacity: 0.6;
  pointer-events: none;

  img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
  }
}

.urble-section-h-1__background-poster {
  z-index: 0;
}

.urble-section-h-1__background-animation {
  z-index: 1;
}

.urble-section-h-3,
.urble-section-h-5,
.urble-section-h-7,
.urble-section-h-9,
.urble-section-h-11 {
  background: var(--_Prim-Color-green-50);
}

.urble-section-h-2,
.urble-section-h-4,
.urble-section-h-6,
.urble-section-h-8,
.urble-section-h-10,
.urble-section-h-12 {
  background: var(--_Prim-Color-light-000-White);
}

/* -----------------------------------------------------------------------------
   Intentional page-wide bubble placement

   Each 114 / 66 / 49px cluster is positioned against usable space in its own
   section. Section 6 uses its own wrapper to cluster the circles around the
   result card's upper-right corner.
   -------------------------------------------------------------------------- */

.urble-section-h-2,
.urble-section-h-6,
.urble-section-h-8,
.urble-section-h-10 {
  .urble-section-blocks {
    position: relative;
    isolation: isolate;
  }

  /* Circles are decoration, so translated headings and cards always paint
     above them if their boxes meet. */
  .urble-section-blocks
    > :not(.urble-circle-1):not(.urble-circle-2):not(.urble-circle-3):not(.urble-sim-bubbles) {
    position: relative;
    z-index: 1;
  }

  .urble-section-blocks > .urble-circle-1,
  .urble-section-blocks > .urble-circle-2,
  .urble-section-blocks > .urble-circle-3 {
    position: absolute;
    border-radius: 600px;
    background: var(--urble-linear-gradient);
    pointer-events: none;
    z-index: 0;
  }

  .urble-section-blocks > .urble-circle-1 {
    width: 114px;
    height: 114px;
  }

  .urble-section-blocks > .urble-circle-2 {
    width: 66px;
    height: 66px;
  }

  .urble-section-blocks > .urble-circle-3 {
    width: 49px;
    height: 49px;
  }
}

/* Section 2's cluster may sit slightly beneath the full-width footnote. */
.urble-section-h-2 {
  .urble-section-blocks > .urble-circle-1 {
    right: -24px;
    bottom: -24px;
  }

  .urble-section-blocks > .urble-circle-2 {
    right: 112px;
    bottom: 48px;
  }

  .urble-section-blocks > .urble-circle-3 {
    right: 48px;
    bottom: 88px;
  }
}

.urble-section-h-8 {
  .urble-section-blocks > .urble-circle-1 {
    top: 64px;
    right: -32px;
  }

  .urble-section-blocks > .urble-circle-2 {
    top: -16px;
    right: 112px;
  }

  .urble-section-blocks > .urble-circle-3 {
    top: 96px;
    right: 200px;
  }
}

/* Section 10's intro is capped at 560px, leaving a clear right-side lane. */
.urble-section-h-10 {
  .urble-section-blocks > .urble-circle-1 {
    top: -24px;
    right: -24px;
  }

  .urble-section-blocks > .urble-circle-2 {
    top: 64px;
    right: 112px;
  }

  .urble-section-blocks > .urble-circle-3 {
    top: 16px;
    right: 200px;
  }
}

/* -----------------------------------------------------------------------------
   Section 12 — reusable final download CTA
   -------------------------------------------------------------------------- */

.urble-section-h-12 {
  display: flex;
  flex-direction: column;
  padding: 64px 32px 128px;

  .urble-section-blocks {
    width: 1080px;
    max-width: 100%;
    margin: auto;
  }
}

/* The simulator bars animate after input and the phone gallery transitions on interaction.
   Keep both static for reduced-motion users; index.ts applies the same preference
   before tweening the simulator's numbers. */
@media (prefers-reduced-motion: reduce) {
  .urble-highlight-phone__screen {
    transition: none;
  }

  .urble-highlight-phone__screen--active:hover,
  .urble-highlight-phone--open .urble-highlight-phone__screen--active {
    transform: translate(-50%, 0) scale(1);
  }

  .urble-sim-chart__segment {
    transition: none;
  }

  .urble-section-h-7 {
    .urble-reviews-rail {
      scroll-behavior: auto;
    }

    .urble-reviews-control,
    .urble-review-card {
      transition: none;
    }
  }
}

/* -----------------------------------------------------------------------------
   TABLET / MOBILE
   -------------------------------------------------------------------------- */

@media (max-width: 1120px) {
  .urble-section-h-1,
  .urble-section-h-2,
  .urble-section-h-3,
  .urble-section-h-4,
  .urble-section-h-5,
  .urble-section-h-6,
  .urble-section-h-7,
  .urble-section-h-8,
  .urble-section-h-9,
  .urble-section-h-10,
  .urble-section-h-11,
  .urble-section-h-12 {
    padding-inline: 0;
  }

  .urble-section-h-1 {
    padding-bottom: 32px;

    .urble-section-blocks {
      gap: 24px;
    }
  }

  .urble-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    min-height: 0;
    padding-top: 0;
    text-align: center;
  }

  .urble-hero__content {
    align-items: center;
    width: 100%;
    padding: 32px 16px 0;

    h1 {
      width: 100%;
      font-size: 32px;
      line-height: 32px;
      text-align: center;
    }
  }

  .urble-hero__lead {
    width: 100%;
  }

  .urble-highlight-phone {
    display: none;
  }

  .urble-section-h-1__background img {
    object-position: 58% center;
  }

  .urble-hero .urble-download {
    margin-inline: auto;
  }

  .urble-hero .urble-circle-1,
  .urble-hero .urble-circle-2 {
    display: none;
  }

  .urble-highlight-strip {
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 8px 8px;
  }

  .urble-highlight {
    padding: 16px;
    text-align: left;
  }

  .urble-highlight + .urble-highlight {
    border-left: 0;
    border-top: 1px solid var(--_Prim-Color-light-200);
  }

  .urble-highlight--chf::before {
    display: none;
  }

  .urble-highlight__copy {
    max-width: none;
  }

  /* Sections 2 and 3 collapse to one column. `minmax(0, 1fr)` rather than `1fr`, so a
     wide card can't hold the track open past the screen (GUIDELINES §4). The strip in
     section 1 is deliberately edge to edge; these cards are not, hence the inline
     padding here and not there. */
  .urble-section-h-2 .urble-section-blocks,
  .urble-section-h-3 .urble-section-blocks {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    padding-inline: 16px;
    box-sizing: border-box;
  }

  .urble-section-h-2__intro,
  .urble-section-h-3__intro {
    align-items: center;
    text-align: center;
  }

  .urble-section-h-2__panels,
  .urble-section-h-3__products {
    grid-template-columns: minmax(0, 1fr);
  }

  .urble-section-h-2__note {
    grid-column: auto;
  }

  .urble-section-h-4 .urble-section-blocks {
    padding-inline: 16px;
    box-sizing: border-box;
  }

  .urble-section-h-4__intro {
    align-items: center;
    text-align: center;
  }

  .urble-step-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The card is full width now, but the phone + copy row still has to survive a 360px
     screen: 152px of phone would leave the copy about 100px wide. */
  .urble-step-card__phone {
    flex-basis: 120px;
    width: 120px;
  }

  .urble-section-h-5 .urble-section-blocks {
    padding-inline: 16px;
    box-sizing: border-box;
  }

  .urble-section-h-5__intro {
    align-items: center;
    text-align: center;
  }

  .urble-yield-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .urble-period-compare {
    gap: 8px;
  }

  .urble-period-calendar {
    width: 80px;
    height: 104px;
  }

  .urble-section-h-6 .urble-section-blocks {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
    padding-inline: 16px;
    box-sizing: border-box;
  }

  .urble-section-h-6__intro {
    align-items: center;
    text-align: center;
  }

  /* Out of the two-row span and back into the flow, under the input card. */
  .main .urble-card.urble-sim-result {
    grid-column: auto;
    grid-row: auto;
    padding: 16px;
  }

  /* Keep the controls and the chart together after the section heading. Two compact
     columns reduce the settings card to three rows without changing its controls. */
  .main .urble-card.urble-sim-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 16px;
  }

  .urble-sim-row {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-height: 0;
  }

  .urble-sim-row__label {
    font-size: 14px;
    line-height: 20px;
  }

  .urble-sim-row:nth-of-type(5),
  .urble-sim-yield {
    grid-column: 1 / -1;
  }

  .urble-sim-field,
  .urble-sim-field--wide {
    flex: 0 0 40px;
    width: 100%;
  }

  .urble-sim-yield {
    min-height: 40px;
    margin-top: 0;
    padding-top: 8px;
    font-size: 14px;
    line-height: 20px;
  }

  .urble-sim-result__total {
    font-size: 32px;
    line-height: 40px;
  }

  .urble-sim-chart {
    grid-template-rows: 112px auto;
    margin-top: 16px;
  }

  .urble-sim-legend {
    display: none;
  }

  .urble-sim-explanation {
    margin-top: 8px;
    gap: 0;
  }

  /* The live total, split and chart already communicate the projection. Keep the
     disclaimer in view, but defer the explanatory paragraph to larger layouts. */
  .urble-sim-explanation > p:not(.urble-sim-disclaimer) {
    display: none;
  }

  .urble-section-h-7 {
    .urble-section-blocks {
      gap: 32px;
      padding-inline: 16px;
      box-sizing: border-box;
    }

    .urble-reviews-header {
      align-items: center;
      padding: 0;
    }

    .urble-reviews-heading h2 {
      text-align: start;
    }
  }

  .urble-section-h-8 .urble-section-blocks {
    padding-inline: 16px;
    box-sizing: border-box;
  }

  .urble-section-h-8 h2 {
    justify-content: center;
    text-align: center;
  }

  .urble-section-h-8__intro {
    align-items: center;
    text-align: center;
  }

  .urble-brand-wordmark--title {
    width: 72px;
    height: 27px;
  }

  .urble-section-h-9 .urble-section-blocks,
  .urble-section-h-10 .urble-section-blocks {
    padding-inline: 16px;
    box-sizing: border-box;
  }

  .urble-section-h-9__intro,
  .urble-section-h-10__intro {
    align-items: center;
    max-width: none;
    text-align: center;
  }

  .urble-saving-options,
  .urble-commitment-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .main .urble-card.urble-commitment-card {
    min-height: 0;
  }

  .main .urble-card.urble-commitment-card .urble-card-title {
    min-height: 0;
  }

  .urble-section-h-11 .urble-section-blocks {
    padding-inline: 16px;
    box-sizing: border-box;
  }

  .urble-section-h-11__intro {
    align-items: center;
    text-align: center;
  }

  .urble-section-h-11 .urble-link_button {
    align-self: center;
  }

  .urble-hero__content h1,
  .urble-section-h-2__intro h2,
  .urble-section-h-3__intro h2,
  .urble-section-h-4__intro h2,
  .urble-section-h-5__intro h2,
  .urble-section-h-6__intro h2,
  .urble-section-h-7 .urble-reviews-heading h2,
  .urble-section-h-8__intro h2,
  .urble-section-h-9__intro h2,
  .urble-section-h-10__intro h2,
  .urble-section-h-11__intro h2 {
    font-size: 32px;
    line-height: 32px;
  }

  .urble-title-underline {
    &::after {
      bottom: 1px;
      height: 6px;
      border-radius: 6px;
    }
  }

  .urble-section-h-2 .urble-section-blocks > .urble-circle-1,
  .urble-section-h-2 .urble-section-blocks > .urble-circle-2,
  .urble-section-h-2 .urble-section-blocks > .urble-circle-3,
  .urble-section-h-8 .urble-section-blocks > .urble-circle-1,
  .urble-section-h-8 .urble-section-blocks > .urble-circle-2,
  .urble-section-h-8 .urble-section-blocks > .urble-circle-3,
  .urble-section-h-10 .urble-section-blocks > .urble-circle-1,
  .urble-section-h-10 .urble-section-blocks > .urble-circle-2,
  .urble-section-h-10 .urble-section-blocks > .urble-circle-3 {
    display: none;
  }

  .urble-sim-bubbles {
    display: none;
  }

  .urble-section-h-12 .urble-section-blocks {
    padding-inline: 16px;
    box-sizing: border-box;
  }
}

@media (max-width: 560px) {
  .urble-comparison-table-wrap {
    overflow-x: visible;
  }

  .urble-comparison-table {
    min-width: 0;

    .urble-comparison-table__feature-column {
      width: 52px;
    }

    .urble-comparison-table__urble-column,
    .urble-comparison-table__banking-column {
      width: calc((100% - 52px) / 3);
    }

    th,
    td {
      padding: 8px 4px;
    }

    thead th {
      height: 52px;
      font-size: 12px;
      line-height: 16px;
      overflow-wrap: anywhere;
    }

    thead th:first-child {
      background: transparent;
      font-size: 0;
    }

    tbody th,
    tbody td {
      position: relative;
      height: 60px;
      min-height: 60px;
    }
  }

  .urble-brand-wordmark--table {
    width: 52px;
    height: 20px;
  }

  .urble-comparison-feature {
    justify-content: center;
    cursor: pointer;
  }

  .urble-comparison-feature:focus-visible {
    outline: 2px solid var(--urble-color-surface-affirmative-default);
    outline-offset: 2px;
    border-radius: 8px;
  }

  .urble-comparison-feature__icon {
    width: 32px;
    height: 32px;
    margin: 0;

    .material-symbols-rounded {
      font-size: 30px;
    }
  }

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

  .urble-comparison-feature[aria-expanded='true'] .urble-comparison-feature__label {
    position: fixed;
    z-index: 20;
    display: block;
    width: min(240px, calc(100vw - 32px));
    height: auto;
    max-height: 160px;
    margin: 0;
    padding: 12px;
    overflow-y: auto;
    clip: auto;
    white-space: normal;
    box-sizing: border-box;
    border: 1px solid var(--_Prim-Color-light-200);
    border-radius: 16px;
    background: var(--_Prim-Color-light-000-White);
    box-shadow: var(--urble-box-shadow-light);
    color: var(--_Prim-Color-dark-100-Brand);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
  }

  .urble-comparison-status {
    font-size: 24px;
  }

  .urble-section-h-7 {
    .urble-section-blocks {
      gap: 28px;
      padding-bottom: 16px;
    }

    .urble-reviews-header {
      align-items: flex-start;
      flex-direction: column;
      gap: 20px;
    }

    .urble-reviews-heading {
      h2 {
        margin: 12px 0 14px;
        text-align: start;
      }
    }

    .urble-reviews-controls {
      width: 100%;
    }

    .urble-reviews-scroll-hint {
      margin-inline-end: auto;
    }

    .urble-reviews-control {
      width: 42px;
      height: 42px;
    }

    .urble-reviews-rail {
      grid-auto-columns: calc(100vw - 64px);
      gap: 14px;
      width: calc(100% + 32px);
      margin-inline: -16px;
      padding-inline: 16px;
      scroll-padding-inline: 16px;
    }

    .urble-review-card {
      min-height: 280px;
      padding: 24px;
      border-radius: 24px;

      blockquote {
        margin: 18px 0 24px;
      }
    }
  }
}