/* Business home, round 17 (stream K3): the paradox of choice as a horizontal
   turn (includes/r13_problem.html, js/r17-choice-turn.js).

   The turn follows the shopper home's before/after (.bx-* in
   frontend/includes/home_r14_flow_css.html). Stacked by default (no JS,
   reduced motion, or a part taller than the screen): Before, a downward
   arrow, After. The script adds .is-pinned: the stage sticks below the
   header (--ct-top, --ct-h), the track holds Before, a short arrow and After
   side by side (--ct-w each, --ct-gap between) and moves left with the
   scroll. Only transform moves. */
.ct-panel { padding: clamp(56px, 7vw, 104px) 0; }
.ct-panel-before { padding-bottom: 0; }
.ct-panel-after { padding-top: 0; }
.ct-before { border: 1px solid #E6E4E1; box-shadow: 0 24px 40px -28px rgba(18,17,16,.35); }
.ct-grid { max-height: 440px; }
.ct-after { box-shadow: 0 30px 50px -30px rgba(18,17,16,.4); }
.ct-gap { display: flex; align-items: center; justify-content: center; height: clamp(96px, 16vh, 160px); }
.ct-arrow { display: block; position: relative; width: 2px; height: 56%; background: #121110; }
.ct-arrow::after { content: ""; position: absolute; left: -5px; bottom: -2px; width: 12px; height: 12px; border: solid #121110; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 1023px) { .ct-grid { max-height: 300px; } }

/* The turn. */
.ct.is-pinned .ct-pin { height: var(--ct-pin, auto); }
.ct.is-pinned .ct-stage { position: sticky; top: var(--ct-top, 0px); height: var(--ct-h, 100svh); overflow: hidden; }
.ct.is-pinned .ct-track { display: flex; width: max-content; height: 100%; will-change: transform; }
.ct.is-pinned .ct-panel { flex: 0 0 var(--ct-w, 100vw); width: var(--ct-w, 100vw); height: 100%; display: flex; align-items: center; padding: 12px 0; }
.ct.is-pinned .ct-gap { flex: 0 0 var(--ct-gap, 96px); height: 100%; }
.ct.is-pinned .ct-arrow { width: 64%; height: 2px; }
.ct.is-pinned .ct-arrow::after { left: auto; right: 2px; bottom: -5px; transform: rotate(-45deg); }
.ct.is-pinned .ct-grid { max-height: min(440px, 48vh); }
@media (max-width: 1023px) {
  .ct.is-pinned .ct-title { font-size: 34px; }
  .ct.is-pinned .ct-lead { font-size: 15px; line-height: 1.5; }
  .ct.is-pinned .ct-grid { max-height: 28vh; }
  .ct.is-pinned .ct-note { display: none; }
}