.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 auto;
  width: 152px;
  aspect-ratio: 1 / 2;
  object-fit: cover;
  object-position: center;
}

.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. The 1:2 frame keeps
     all three step images at the same proportion without stretching them. */
  .urble-step-card__phone {
    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: fixed;
    z-index: 20;
    display: none;
    width: min(240px, calc(100vw - 32px));
    max-height: 160px;
    padding: 12px;
    box-sizing: border-box;
    overflow-y: auto;
    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-feature[aria-expanded='true'] .urble-comparison-feature__label {
    display: block;
  }

  .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;
      }
    }
  }
}