/* Content determines pacing; narrow and short screens retain the same controls. */
.problem__pin { min-height: 0; padding-block: clamp(76px,8vw,112px) 64px; }
.problem__grid { grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); gap: clamp(24px,3vw,56px); align-items: center; }
.problem__copy { grid-template-columns: minmax(0,1fr); gap: 20px; }
.problem__copy .display { font-size: clamp(35px,4vw,60px); line-height: .98; letter-spacing: -.035em; }
.problem .d-line--apart { white-space: normal; margin-bottom: .85em; }
.problem__result { max-width: none; margin: 0; }
.problem__board { height: 460px; max-width: 520px; margin: 0 0 0 auto; }
.problem__board .slate { display: none; }
.problem__board .note {
  width: min(260px,72%); height: 68px; aspect-ratio: auto;
  left: calc(50% - min(130px,36%));
  top: calc((var(--flow-index) + .5) * 20% - 34px); right: auto; bottom: auto;
  font-size: 17px; padding: 8px 12px;
}
.problem__board .n1, .problem__board .n4 { left: calc(50% - min(130px,36%) + 12px); }
.problem__board .n2 { left: calc(50% - min(130px,36%) - 12px); }
.problem__board .note.is-connected { background: #e3fca0; }
.problem__board .note.is-connected > span { gap: 4px; }
.problem__board .knot__label { top: -24px; right: 14%; font-size: 23px; }
.problem__board .flow-arrows > span { left: 50%; top: calc(var(--step) * 20%); transform: translate(-50%,-50%) rotate(90deg); width: 22px; height: 22px; font-size: 20px; }
.problem__board.is-static .note { left: 50%; top: calc((var(--flow-index) + .5) * 20%); }
.problem__board.is-static .flow-arrows::before { left: 50%; top: 10%; bottom: 10%; right: auto; width: 2px; height: auto; }
.problem__board.is-static .flow-arrows { opacity: 1; }
.system__pin { min-height: 0; height: auto; padding-block: clamp(76px,8vw,112px) 64px; }
.system__head { grid-template-columns: minmax(0,1fr); }
.system__head > * { min-width: 0; }
.system__sub { max-width: none; }
.system__track {
  --service-width: min(78vw,360px);
  --service-inset: max(var(--gutter),calc((100% - 1480px) / 2 + var(--gutter)));
  width: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  min-width: 0; scroll-padding-inline: var(--service-inset); overscroll-behavior-x: contain;
  padding-top: 84px; padding-bottom: 28px; scrollbar-width: none;
  padding-left: var(--service-inset);
  /* Stop with the final card at the right content edge, without an empty tail. */
  padding-right: var(--service-inset);
  scrollbar-color: var(--lime) transparent; will-change: auto;
}
.system__track::-webkit-scrollbar { display: none; }
.system__track .svc { width: var(--service-width); scroll-snap-align: start; }
.system__track article.svc:nth-of-type(even) { margin-top: 0; }
.system .wire, .system__progress { display: none; }
.system__track:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; }
.system.is-scroll-driven .system__pin { padding-block: 76px 12px; gap: 8px; }
.system.is-scroll-driven .system__head .display { font-size: clamp(32px,3.2vw,50px); }
.system.is-scroll-driven .system__track { scroll-snap-type: none; overflow-x: hidden; padding-top: 62px; padding-bottom: 18px; }
.system.is-scroll-driven .svc__art { width: 54%; margin-top: -70px; }
.system.is-scroll-driven .svc p { margin-bottom: 10px; }
.system.is-scroll-driven .svc--slogan { min-height: 280px; padding-bottom: 72px; }
.shop__copy > .display { grid-row: 2; }
.shop__copy > .btn { grid-row: 3; }
.shop__copy > .partners { grid-row: 3; align-self: center; }
@media (max-width: 900px) {
  .problem__grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .problem__pin { padding-block: 72px 48px; }
  .problem__copy .display { font-size: clamp(28px,5.4vw,44px); }
  .problem .d-line--apart { white-space: normal; }
  .problem__board { height: 440px; margin: 24px auto 0; }
  .problem__board .note { width: min(220px,72%); height: 64px; left: calc(50% - min(110px,36%)); top: calc((var(--flow-index) + .5) * 20% - 32px); font-size: 15px; padding: 8px 12px; }
  .problem__board .n1, .problem__board .n4 { left: calc(50% - min(110px,36%) + 12px); }
  .problem__board .n2 { left: calc(50% - min(110px,36%) - 12px); }
  .problem__board.is-static .note { left: 50%; top: calc((var(--flow-index) + .5) * 20%); }
  .problem__board .knot__label { top: -20px; font-size: 20px; }
  .note.is-connected > span { gap: 3px; }
  .system__head { grid-template-columns: minmax(0,1fr); }
  .system__sub { max-width: 40ch; }
  .shop__copy > .btn { margin-top: 24px; }
}
@media (max-width: 600px) {
  .system .display { font-size: clamp(28px,7.4vw,36px); }
  .problem__copy .display { font-size: clamp(25px,6.6vw,36px); }
  .problem__result { font-size: 16px; }
  .manifest .bust { max-width: min(460px,76svh); }
}
@media (max-width: 360px) {
  .problem .apart { font-size: .88em; }
}