/* Payment solutions (v3.html): a two-column editorial layout after the reference — the section
   title, lead and a dot icon stay put on the left while the four solutions scroll by on the right,
   each a tall row split by thin rules; the dot icon morphs into the icon of the row in view. */

.solutions-v3__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-12); align-items: start; }
/* the statement sits at the top of the pinned column; the dot icon is centred in the space below it */
.solutions-v3__aside { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; padding: var(--space-12) 0; }
.solutions-v3__stage { flex: 1; min-height: 0; display: flex; align-items: center; }
/* the statement, set like the key-figures one: a dark lead-in, the rest muted */
.solutions-v3__intro { max-width: 520px; margin-bottom: var(--space-8); font-family: var(--font-sans); font-size: 28px; line-height: 38px; font-weight: 500; letter-spacing: -0.015em; color: var(--ink-muted); }
.solutions-v3__intro > span:not(.t-word) { color: var(--black); } /* the dark lead-in only, not the word-reveal spans */
/* the dot icon: a square canvas, sized by the column */
.dots { display: block; width: min(640px, 100%, calc(100svh - 300px)); aspect-ratio: 1; }

/* a hairline runs down the seam between the columns, the rows sit 48px right of it; the room
   under the last row keeps the column (and the last icon) pinned a while longer */
.solutions-v3__list { margin: 0; padding: 0 0 24svh; list-style: none; border-left: 1px solid var(--border); }
.solutions-v3__item {
  display: flex; flex-direction: column; justify-content: center; min-height: 60svh;
  padding: var(--space-12) 0 var(--space-12) var(--space-12); border-top: 1px solid var(--border);
  transition: opacity .4s ease;
}
/* the first row has no rule above it and starts at the top, its title level with the statement
   in the left column (the statement's half-leading is 5px, the title's 1px) */
.solutions-v3__item:first-child { justify-content: flex-start; padding-top: calc(var(--space-12) + 4px); border-top: 0; }
.solutions-v3__title { font-family: var(--font-brand); font-size: 48px; line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; color: var(--black); }
.solutions-v3__text { margin-top: var(--space-6); max-width: 560px; font-size: 18px; line-height: 28px; color: var(--black); }
.solutions-v3__more { margin-top: var(--space-4); max-width: 560px; font-size: 16px; line-height: 24px; color: var(--ink-muted); }
/* key points, one per line, each with a small check */
.solutions-v3__points { display: grid; gap: var(--space-3); max-width: 560px; margin: var(--space-8) 0 0; padding: 0; list-style: none; }
.solutions-v3__points li { position: relative; padding-left: 24px; font-size: 15px; line-height: 22px; color: var(--black); }
.solutions-v3__points li::before {
  content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23030303' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5l5 5L19.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* the rows out of focus step back — the title only, so the copy stays readable */
.solutions-v3__item .solutions-v3__title { transition: opacity .4s ease; }
.js-motion .solutions-v3__item:not(.is-active) .solutions-v3__title { opacity: .45; }

@media (min-width: 1441px) {
  .solutions-v3__grid { column-gap: calc(48 * var(--s)); }
  .solutions-v3__item { padding-left: calc(48 * var(--s)); }
  .solutions-v3__intro { max-width: calc(520 * var(--s)); margin-bottom: calc(32 * var(--s)); font-size: calc(28 * var(--s)); line-height: calc(38 * var(--s)); }
  .dots { width: min(calc(640 * var(--s)), 100%, calc(100svh - 300 * var(--s))); }
  .solutions-v3__title { font-size: calc(48 * var(--s)); }
  .solutions-v3__text { max-width: calc(560 * var(--s)); font-size: calc(18 * var(--s)); line-height: calc(28 * var(--s)); }
  .solutions-v3__more { max-width: calc(560 * var(--s)); font-size: calc(16 * var(--s)); line-height: calc(24 * var(--s)); }
  .solutions-v3__points { gap: calc(12 * var(--s)); max-width: calc(560 * var(--s)); margin-top: calc(32 * var(--s)); }
  .solutions-v3__points li { padding-left: calc(24 * var(--s)); font-size: calc(15 * var(--s)); line-height: calc(22 * var(--s)); }
  .solutions-v3__points li::before { top: calc(4 * var(--s)); width: calc(14 * var(--s)); height: calc(14 * var(--s)); }
}

/* Tablets and phones: one column. The aside dissolves into the grid so the icon's band shares the
   rows' grid area and can stay pinned at the top (white band) while the rows scroll under it. */
@media (max-width: 900px) {
  .solutions-v3__grid { grid-template-columns: 1fr; }
  .solutions-v3__aside { display: contents; }
  .solutions-v3__lead { grid-row: 1; }
  .solutions-v3__intro { margin-bottom: var(--space-6); font-size: 22px; line-height: 30px; }
  .solutions-v3__stage { grid-row: 2; grid-column: 1; align-self: start; position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding: var(--space-2) 0; background: var(--white); }
  .dots { width: min(160px, 44vw); }
  .solutions-v3__list { grid-row: 2; grid-column: 1; padding: calc(min(160px, 44vw) + var(--space-6)) 0 0; border-left: 0; }
  .solutions-v3__item { min-height: 0; padding: var(--space-8) 0; }
  .js-motion .solutions-v3__item:not(.is-active) .solutions-v3__title { opacity: 1; }
  .solutions-v3__item:first-child { padding-top: 0; }
  .solutions-v3__title { font-size: 32px; }
  .solutions-v3__text { font-size: 16px; line-height: 24px; }
  .solutions-v3__more { font-size: 15px; line-height: 22px; }
  .solutions-v3__points { margin-top: var(--space-6); }
}