/* Solutions group: the index, the shared segment/role template, and the two compare pages.
   Loaded after pages.css. Every class here starts with s- so nothing leaks into other groups. */

/* Split heroes here carry a media column, so the headline steps down a size to stay on two lines */
.s-hero .r-h-page { font-size: clamp(38px, 4.3vw, 56px); }
.s-hero--index .r-h-page { font-size: clamp(40px, 5vw, 68px); }

/* ---------- Bento of interlocking cards (index) ---------- */
.s-bento { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(250px, auto); }
.s-bento > * { min-width: 0; }
.s-bento--seg { grid-auto-rows: minmax(380px, auto); }
.s-bento--seg > :nth-child(1) { grid-column: span 7; }
.s-bento--seg > :nth-child(2) { grid-column: span 5; }
.s-bento--role > :nth-child(1) { grid-column: span 7; grid-row: span 2; }
.s-bento--role > :nth-child(2), .s-bento--role > :nth-child(3) { grid-column: span 5; }
.s-bento .r-cut { transition: transform 300ms var(--ease-out); }
.s-bento .r-cut:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .s-bento .r-cut:hover { transform: translateY(-4px); } }
.s-bento .r-card { justify-content: flex-end; }
.s-bento .r-card .r-pill { margin-bottom: auto; }
.s-bento .r-card__title { color: inherit; }
.s-bento .r-photo { padding: clamp(24px, 2.6vw, 34px); }
.s-bento .r-photo p { max-width: 30em; font-size: 16px; color: var(--on-dark-strong); }

/* ---------- Pain → outcome rows (segment/role pages) ---------- */
.s-shift { display: grid; gap: 12px; }
.s-shift li {
  display: grid; grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr); align-items: center; gap: 16px 28px;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.18);
}
.s-shift__label { display: block; margin-bottom: 6px; font-family: var(--f-sans); font-size: 13px; font-weight: 700; color: var(--on-dark-soft); }
.s-shift__pain { font-family: var(--f-text); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.7; color: var(--on-dark-strong); }
.s-shift__gain { font-family: var(--f-display); font-weight: 700; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.55; color: var(--white); }
.s-shift__gain .s-shift__label { color: #C9DBFF; }
.s-shift__arrow { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--r-blue); }
.s-shift__arrow svg { width: 20px; height: 20px; }

/* ---------- Recommended modules: one lead card + two ---------- */
.s-mods { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-auto-rows: minmax(220px, auto); }
.s-mods > :first-child { grid-row: span 2; }
.s-mods .r-cut { transition: transform 300ms var(--ease-out); }
.s-mods .r-cut:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .s-mods .r-cut:hover { transform: translateY(-4px); } }
.s-mods .r-card { justify-content: flex-end; }
.s-mods .r-card .r-pill { margin-bottom: auto; }
.s-mods .r-card__title { color: inherit; }
.s-mods .r-card--white { box-shadow: inset 0 0 0 1px rgba(11, 26, 92, 0.08); }
.s-mods__more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; font-size: 16px; font-weight: 700; color: var(--ink-soft); }
.s-mods__more a { color: var(--r-blue); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }

/* Growing page: the branches note, one wide card under the modules */
.s-branch { background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1.5px var(--r-blue); color: var(--ink); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 40px; margin-top: 16px; }
.s-branch .r-pill { flex: none; }
.s-branch__title { flex: 1 1 280px; font-family: var(--f-display); font-weight: 900; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.45; }
.s-branch p { flex: 1 1 360px; font-size: 17px; line-height: 1.75; }

/* ---------- Compare: the table ---------- */
.s-table { color: var(--ink); }
.s-table thead th:last-child { background: var(--r-blue); color: var(--white); }
.s-table tbody th { width: 30%; font-family: var(--f-display); font-size: 17px; line-height: 1.5; color: var(--ink); }
.s-table td { width: 35%; line-height: 1.7; }
.s-table td:last-child { background: rgba(37, 99, 234, 0.04); color: var(--ink); }
.s-table .s-mark { display: block; margin-bottom: 4px; font-family: var(--f-sans); font-weight: 700; font-size: 14px; }
.s-table .s-mark.is-yes { color: var(--r-blue); }
.s-table .s-mark.is-no, .s-table .s-mark.is-part { color: var(--ink-soft); }
.s-table-note { margin-top: 18px; font-size: 15px; color: var(--on-dark-soft); }
.s-table-note + .s-table-note { margin-top: 6px; }

/* ---------- Compare: hidden costs (3 or 4 cards) ---------- */
.s-costs { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.s-costs > :nth-child(1), .s-costs > :nth-child(4) { grid-column: span 7; }
.s-costs > :nth-child(2), .s-costs > :nth-child(3) { grid-column: span 5; }
.s-costs--3 > :nth-child(3) { grid-column: 1 / -1; min-height: 200px; }
.s-costs .r-card { min-height: 250px; justify-content: flex-end; }
.s-costs .r-card h3 { font-family: var(--f-display); font-weight: 900; font-size: clamp(21px, 1.8vw, 25px); line-height: 1.4; }
.s-costs .r-card .r-index { margin-bottom: auto; }
.s-costs .r-card--white { box-shadow: inset 0 0 0 1px rgba(11, 26, 92, 0.08); }

/* ---------- Scroll-linked: the second card lags a beat behind its neighbours ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .s-mods > :nth-child(2), .s-bento--seg > :nth-child(2), .s-bento--role > :nth-child(2) {
      animation: s-lag linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    @keyframes s-lag { from { translate: 0 48px; } }
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-bento .r-cut, .s-mods .r-cut { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .s-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); }
  .s-bento > * { grid-column: span 1 !important; grid-row: auto !important; }
  .s-bento > :first-child { grid-column: 1 / -1 !important; min-height: 340px; }
  .s-bento--seg > :nth-child(2) { grid-column: 1 / -1 !important; }
  .s-costs > * { grid-column: span 6 !important; }
  .s-costs--3 > :nth-child(3) { grid-column: 1 / -1 !important; }
}
@media (max-width: 720px) {
  .s-shift li { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .s-shift__arrow { width: 40px; height: 40px; transform: rotate(-90deg); }
  .s-mods { grid-template-columns: minmax(0, 1fr); }
  .s-mods > :first-child { grid-row: auto; min-height: 300px; }
  .s-costs > * { grid-column: 1 / -1 !important; }
}
@media (max-width: 600px) {
  .s-bento { grid-template-columns: minmax(0, 1fr); }
  .s-bento > * { grid-column: 1 / -1 !important; }
}