/* Payment solutions (v5.html), loaded after solutions-v3.css: the four rows become the cards of
   the v4 block, on white, 40px inside — while the statement and the icon (now drawn in brand
   diamonds, scripts/dots.js) stay pinned on the left as before. The column's hairline and the rows'
   rules go with the cards. The cards are brand graphite with white type; the one in view turns brand
   lime with black type and takes a faint Pixel Beams field in lime with the cursor liquid (wired in
   v5.html). Each card splits into the copy on the left and its key points on the right. */

/* the cards start level with the statement (the aside's 48px), with room under the last one so
   the icon stays pinned a while longer */
.solutions-v5 .solutions-v3__list { display: grid; gap: var(--space-6); padding: var(--space-12) 0 24svh; border-left: 0; }
.solutions-v5 .solutions-v3__item {
  justify-content: flex-start; min-height: 0;
  padding: var(--space-10); border-top: 0; border-radius: var(--radius-lg); background: var(--graphite);
  transition: background-color .4s ease;
}
.solutions-v5 .solutions-v3__item:first-child { padding-top: var(--space-10); }
/* the field of the card in view: the card's own canvas, faded in while it is active and its shader ready (is-lit) */
.solutions-v5 .solutions-v3__item { position: relative; overflow: hidden; isolation: isolate; }
.solutions-v5 .solutions-v3__item > :not(.solutions-v5__fx) { position: relative; z-index: 1; }
.solutions-v5__fx { position: absolute; z-index: 0; inset: 0; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.solutions-v5__fx canvas { display: block; width: 100% !important; height: 100% !important; }
.solutions-v5 .solutions-v3__item.is-active.is-lit .solutions-v5__fx { opacity: 1; }
.solutions-v5 .solutions-v3__item.is-active { background: var(--green); }
/* white type on the graphite, black on the lime of the card in view */
.solutions-v5 .solutions-v3__title, .solutions-v5 .solutions-v3__text, .solutions-v5 .solutions-v3__points li { color: var(--white); transition: color .4s ease; }
.solutions-v5 .is-active .solutions-v3__title, .solutions-v5 .is-active .solutions-v3__text, .solutions-v5 .is-active .solutions-v3__points li { color: var(--black); }
/* the card's type at the v4 sizes */
.solutions-v5 .solutions-v3__title { font-size: 28px; line-height: 1.1; }
.solutions-v5 .solutions-v3__text { margin-top: var(--space-3); max-width: 440px; font-size: 16px; line-height: 24px; }
.solutions-v5 .solutions-v3__points { gap: var(--space-2); max-width: 440px; margin-top: var(--space-6); }
.solutions-v5 .solutions-v3__points li { padding-left: 22px; font-size: 14px; line-height: 20px; }
/* the key points' marker: the brandbook's rounded diamond instead of a check, brand lime on the
   graphite and brand purple on the lime of the card in view */
.solutions-v5 .is-active .solutions-v3__points li::before { background: var(--purple); }
.solutions-v5 .solutions-v3__points li::before {
  top: 4px; width: 12px; height: 12px; background: var(--green); transition: background-color .4s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.23 24.23'%3E%3Cpath d='M7.57 21.75C9.82 24 13.47 24 15.72 21.75L21.75 15.72C24 13.47 24 9.82 21.75 7.57L16.43 2.25C14.18 0 10.53 0 8.28 2.25L2.25 8.28C0 10.53 0 14.18 2.25 16.43L7.57 21.75Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24.23 24.23'%3E%3Cpath d='M7.57 21.75C9.82 24 13.47 24 15.72 21.75L21.75 15.72C24 13.47 24 9.82 21.75 7.57L16.43 2.25C14.18 0 10.53 0 8.28 2.25L2.25 8.28C0 10.53 0 14.18 2.25 16.43L7.57 21.75Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* cards without key points (the current copy has none) stay in one column, the paragraph a little wider */
.solutions-v5 .solutions-v3__item:not(:has(.solutions-v3__points)) { display: flex; }
.solutions-v5 .solutions-v3__item:not(:has(.solutions-v3__points)) .solutions-v3__text { max-width: 560px; }
@media (min-width: 1441px) { .solutions-v5 .solutions-v3__item:not(:has(.solutions-v3__points)) .solutions-v3__text { max-width: calc(560 * var(--s)); } }
/* the card in view is marked by its background, so the titles no longer dim */
.js-motion .solutions-v5 .solutions-v3__item:not(.is-active) .solutions-v3__title { opacity: 1; }

@media (min-width: 1441px) {
  .solutions-v5 .solutions-v3__list { gap: calc(24 * var(--s)); padding-top: calc(48 * var(--s)); }
  .solutions-v5 .solutions-v3__aside { padding-top: calc(48 * var(--s)); padding-bottom: calc(48 * var(--s)); } /* so the first card stays level with the statement */
  .solutions-v5 .solutions-v3__item { padding: calc(40 * var(--s)); border-radius: calc(20 * var(--s)); }
  .solutions-v5 .solutions-v3__item:first-child { padding-top: calc(40 * var(--s)); }
  .solutions-v5 .solutions-v3__title { font-size: calc(28 * var(--s)); }
  .solutions-v5 .solutions-v3__text { margin-top: calc(12 * var(--s)); max-width: calc(440 * var(--s)); font-size: calc(16 * var(--s)); line-height: calc(24 * var(--s)); }
  .solutions-v5 .solutions-v3__points { gap: calc(8 * var(--s)); max-width: calc(440 * var(--s)); margin-top: calc(24 * var(--s)); }
  .solutions-v5 .solutions-v3__points li { padding-left: calc(22 * var(--s)); font-size: calc(14 * var(--s)); line-height: calc(20 * var(--s)); }
  .solutions-v5 .solutions-v3__points li::before { top: calc(4 * var(--s)); width: calc(12 * var(--s)); height: calc(12 * var(--s)); }
}

/* each card in two columns where it is wide enough: the copy (title, line, paragraph) on the left,
   the key points on the right behind a hairline, starting level with the paragraph (row 2, its
   12px top margin) rather than the title; narrower cards keep the one column */
@media (min-width: 1101px), (min-width: 641px) and (max-width: 900px) {
  .solutions-v5 .solutions-v3__item {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr;
    column-gap: var(--space-8);
  }
  .solutions-v5 .solutions-v3__item > :not(.solutions-v3__points):not(.solutions-v5__fx) { grid-column: 1; }
  .solutions-v5 .solutions-v3__points {
    grid-column: 2; grid-row: 2 / -1; align-content: start; margin-top: var(--space-3);
    padding-left: var(--space-8); border-left: 1px solid rgba(255, 255, 255, .16); transition: border-color .4s ease;
  }
  .solutions-v5 .is-active .solutions-v3__points { border-left-color: rgba(3, 3, 3, .16); }
}
@media (min-width: 1441px) {
  .solutions-v5 .solutions-v3__item { column-gap: calc(32 * var(--s)); }
  .solutions-v5 .solutions-v3__points { margin-top: calc(12 * var(--s)); padding-left: calc(32 * var(--s)); }
}

/* Phones and tablets: the statement, then one screen split in two — the icon in brand diamonds on
   top, centred, and below it a slider of the four cards, swiped sideways (scroll snap), the next one
   peeking in at the edge; the card in view is the active one (lime, its field running) and the icon
   takes its shape (scripts/solutions.js). Dots under the slider show where you are and jump on tap. */
.solutions-v5__pager { display: none; }
@media (max-width: 900px) {
  .solutions-v5 .solutions-v3__grid { grid-template-rows: auto auto auto auto; }
  /* the top half: the icon, centred and big — wider than the screen is fine: the band runs edge to
     edge and clips it there (the shapes themselves stay inside, only the canvas's empty margin goes) */
  .solutions-v5 .solutions-v3__stage {
    grid-row: 2; position: static; z-index: auto; display: flex; align-items: center; justify-content: center;
    height: 52svh; min-height: 300px; margin: 0 calc(-1 * var(--space-5)); padding: 0; overflow: hidden; background: none;
  }
  .solutions-v5 .dots { flex: none; width: min(144vw, 64svh, 680px); }
  /* the bottom half: the slider, bleeding to the screen's edges so the cards can slide off them */
  .solutions-v5 .solutions-v3__list {
    grid-row: 3; display: flex; align-items: stretch; gap: var(--space-3);
    margin: 0 calc(-1 * var(--space-5)); padding: 0 var(--space-5);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding: 0 var(--space-5);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .solutions-v5 .solutions-v3__list::-webkit-scrollbar { display: none; }
  .solutions-v5 .solutions-v3__item {
    flex: 0 0 calc(100% - var(--space-8)); min-height: 0; padding: var(--space-6);
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  .solutions-v5 .solutions-v3__item:first-child { padding-top: var(--space-6); }
  .solutions-v5 .solutions-v3__title { font-size: 24px; }
  .solutions-v5 .solutions-v3__text { font-size: 15px; line-height: 22px; }
  .solutions-v5 .solutions-v3__points { margin-top: var(--space-5); }
  /* the dots: one per card, the current one a longer purple pill */
  .solutions-v5__pager { grid-row: 4; display: flex; justify-content: center; gap: var(--space-2); padding-top: var(--space-5); }
  .solutions-v5__pager button {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--grey); cursor: pointer;
    transition: width .3s ease, background-color .3s ease;
  }
  .solutions-v5__pager button[aria-current="true"] { width: 24px; background: var(--purple); }
}