/* =========================================================
   04 The solution (Figma 292:260) — white section, rounded 60px
   All selectors prefixed .solution / .sd (solution diagram)
   ========================================================= */

.solution {
  border-radius: clamp(28px, 4vw, 60px);
  padding-bottom: calc(var(--section-pad) + 20px);
}
.solution .eyebrow__num { color: var(--faint); }

.solution__grid {
  display: grid;
  grid-template-columns: minmax(0, 666px) minmax(0, 666px);
  justify-content: space-between;
  align-items: start;
  column-gap: 60px;
}

/* ---------- left ---------- */
.solution__title { max-width: 620px; }
.solution__body  { max-width: 600px; margin-top: 20px; letter-spacing: -0.02em; }

.solution__list-label { margin-top: 80px; padding-bottom: 20px; line-height: 1; }

.solution__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 16px;
  column-gap: 0;
  padding-block: 28px 20px;
  border-top: 1px solid var(--rule);
}
.solution__item:last-child { padding-bottom: 0; }
.solution__num { padding-top: 3px; letter-spacing: -0.02em; }
.solution__text { max-width: 520px; padding-right: 16px; }
.solution__item-title {
  max-width: 420px; font-weight: 400;
  font-size: clamp(20px, 1.46vw, 22px); line-height: 1.1; letter-spacing: -0.02em;
}
.solution__item-body { margin-top: 10px; letter-spacing: -0.02em; }
.solution__arrow { width: 16px; height: 16px; margin-top: 1px; }

/* ---------- diagram panel (Figma 292:297, 666 × 852) ---------- */
.solution__diagram { width: 100%; max-width: 666px; }

.sd {
  position: relative;
  background: var(--black); color: var(--white);
  border-radius: 24px; overflow: clip;
  padding: 34px 32px 44px;
}
.sd__caption { font-size: 14px; line-height: 1; letter-spacing: -0.02em; color: var(--w-50); }

/* five cells: 5 equal columns of 120.4px across 602px */
.sd__cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 38px; }
.sd__cell { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sd__cell-num { font-size: 12px; line-height: 1; letter-spacing: -0.02em; color: var(--w-40); }
.sd__cell-img { width: 58px; height: 58px; margin-top: 14px; }
.sd__cell-label {
  max-width: 112.4px; min-height: 2.5em; margin-top: 16px;
  font-size: 12.5px; line-height: 1.25; letter-spacing: -0.02em; color: var(--w-85);
}

/* converging lines: lines start 232px from panel top, 150px tall */
.sd__converge { position: relative; height: 150px; margin-top: 14px; }
.sd__lines { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.sd__lines path { stroke: #fff; stroke-opacity: .32; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sd__dot {
  position: absolute; top: -2.5px; left: calc((var(--i) + .5) * 20% - 2.5px);
  width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.6);
}

/* vertical stack, centred on the panel axis */
.sd__stack { display: flex; flex-direction: column; align-items: center; }
.sd__merge { position: relative; width: 12px; height: 12px; margin-top: -6px; }
.sd__merge img { width: 12px; height: 12px; }
.sd__merge-label {
  position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  font-size: 13px; line-height: 1; letter-spacing: -0.02em; color: var(--w-50); white-space: nowrap;
}

.sd__trunk { display: block; height: 41.2px; width: 1.2px; background: rgba(255,255,255,.32); }
.sd__trunk--2 { width: 1.9px; background: rgba(255,255,255,.44); }
.sd__trunk--3 { width: 2.6px; background: rgba(255,255,255,.56); }
.sd__trunk--4 { width: 3.3px; background: rgba(255,255,255,.68); }
.sd__trunk--5 { width: 4px;   background: #8fb6ef; }

.sd__stage {
  position: relative; display: inline-flex; align-items: center;
  height: 40px; padding: 0 20px; border-radius: 999px;
  font-size: 17px; line-height: 1; letter-spacing: -0.02em; white-space: nowrap;
}
.sd__stage--1 { background: rgba(255,255,255,.08); }
.sd__stage--2 { background: rgba(255,255,255,.13); }
.sd__stage--3 { background: rgba(255,255,255,.17); }
.sd__stage--4 { background: rgba(255,255,255,.22); }
.sd__stage--final {
  height: 54px; padding: 0 27px; font-size: 22px; color: var(--black);
  background: linear-gradient(90deg, var(--blue-2), var(--blue-1));
}
.sd__counts { position: absolute; left: calc(100% + 18px); top: 50%; transform: translateY(-50%); display: flex; }
.sd__counts img { width: 13px; height: 13px; }
.sd__counts img + img { margin-left: -4px; }

/* ---------- draw-in when the panel scrolls into view (.reveal → .is-in) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sd__lines { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease) .35s; }
  .sd__dot { opacity: 0; transform: scale(0); transition: opacity .4s var(--ease), transform .4s var(--ease); transition-delay: calc(.15s + var(--i) * .05s); }
  .sd__merge, .sd__stage { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  .sd__trunk { transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }

  .sd__merge          { transition-delay: 1.3s; }
  .sd__trunk--1       { transition-delay: 1.4s; }
  .sd__stage--1       { transition-delay: 1.65s; }
  .sd__trunk--2       { transition-delay: 1.8s; }
  .sd__stage--2       { transition-delay: 2.05s; }
  .sd__trunk--3       { transition-delay: 2.2s; }
  .sd__stage--3       { transition-delay: 2.45s; }
  .sd__trunk--4       { transition-delay: 2.6s; }
  .sd__stage--4       { transition-delay: 2.85s; }
  .sd__trunk--5       { transition-delay: 3s; }
  .sd__stage--final   { transition-delay: 3.25s; }

  .solution__diagram.is-in .sd__lines { clip-path: inset(0); }
  .solution__diagram.is-in .sd__dot,
  .solution__diagram.is-in .sd__merge,
  .solution__diagram.is-in .sd__stage,
  .solution__diagram.is-in .sd__trunk { opacity: 1; transform: none; }
}

/* ---------- tablet / mobile ---------- */
@media (max-width: 1100px) {
  .solution__grid { grid-template-columns: minmax(0, 1fr); row-gap: 64px; }
  .solution__diagram { margin-inline: auto; }
}
@media (max-width: 720px) {
  .solution__body { margin-top: 16px; font-size: 16px; }
  .solution__list-label { margin-top: 56px; }
  .solution__item { grid-template-columns: 36px minmax(0, 1fr) 16px; padding-block: 22px 18px; }
  .solution__grid { row-gap: 48px; }

  .sd { padding: 24px 16px 32px; border-radius: 20px; }
  .sd__cells { margin-top: 28px; }
  .sd__cell-img { width: 48px; height: 48px; margin-top: 10px; }
  .sd__converge { height: 120px; }
  .sd__trunk { height: 32px; }
  .sd__stage { height: 36px; padding: 0 16px; font-size: 15px; }
  .sd__stage--final { height: 48px; padding: 0 22px; font-size: 19px; }
  .sd__counts { left: calc(100% + 12px); }
  .sd__merge-label { font-size: 12px; }
}
/* columns get too narrow for the cell labels: keep the numbers, which map to the list on the left */
@media (max-width: 560px) {
  .sd__cell-label { display: none; }
  .sd__converge { margin-top: 16px; }
}