/* Original heading and introduction, with a compact scrolling controls list. */
.controls-story .experience-layout { align-items:start; }
.controls-story .experience-copy { padding-block:32px; }
.controls-introduction .section-description { margin:24px 0 0; }
.control-steps { list-style:none; margin:40px 0 0; padding:0; }
.control-step { display:grid; grid-template-columns:24px minmax(0,1fr); gap:16px; align-content:start; padding-block:18px; }
.control-step:first-child { padding-top:0; }
.control-step:last-child { padding-bottom:0; }
.control-step-icon { display:block; width:24px; height:24px; color:var(--ink); }
.control-step-icon svg { display:block; width:100%; height:100%; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.control-step h3 { margin:0; color:var(--ink); font:600 17px/1.35 var(--font); letter-spacing:-.02em; }
.control-step p { margin:6px 0 0; color:var(--secondary); font:400 16px/1.4 var(--font); letter-spacing:-.02em; }
.controls-story .interactive-product { position:relative; align-self:center; width:100%; margin:0; }
.controls-story .product-device { width:min(100%,calc((100svh - 184px) * 626 / 731)); margin-inline:auto; }
.controls-section .controls-demo-cue { display:block; max-width:none; margin:24px 0 0; padding:0; border:0; background:none; color:var(--secondary); font:400 14px/1.4 var(--font); letter-spacing:-.01em; text-align:center; }
@media(max-width:1050px) {
  .controls-story .experience-copy { order:1; padding:0; }
  .controls-story .interactive-product { order:2; position:static; width:min(100%,626px); margin-inline:auto; }
  .controls-story .product-device { width:100%; }
}
@media(max-width:650px) {
  .controls-story .experience-copy { padding-inline:12px; }
  .control-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:32px; }
  .control-step { display:flex; flex-direction:column; align-items:center; gap:12px; padding:0; text-align:center; }
  .control-step-icon { width:24px; height:24px; }
  .control-step h3 { font-size:14px; max-width:100%; overflow-wrap:anywhere; }
  .control-step p { font-size:13px; line-height:1.45; max-width:100%; overflow-wrap:anywhere; }
  .controls-story .interactive-product { width:100%; }
  .controls-section .controls-demo-cue { margin-top:18px; }
}
@media(min-width:1051px) and (max-height:540px) {
  .controls-story .interactive-product { position:static; }
  .controls-story .product-device { width:100%; }
  .controls-story .experience-copy { padding:0; }
}
@media print {
  .controls-story .interactive-product { position:static; }
  .controls-story .product-device { width:100%; }
  .controls-story .experience-copy { padding:0; }
}