:root { --gutter: clamp(15px, 3.1vw, 42px); }
html, body { margin: 0; min-height: 0; background: #fff; }
[data-case-demo] #main { display: flow-root; }
[data-case-demo] .section { padding-block: clamp(22px, 3.1vw, 42px); }
[data-case-demo] .photo-hero-layout { min-height: 0; padding-block: clamp(23px, 3.1vw, 42px); }
[data-case-demo] .photo-hero .photo-track { height: clamp(255px, 34vw, 490px); }
[data-case-demo] .palette-track { height: clamp(207px, 30vw, 410px); }
[data-case-demo] .comparison-track { height: clamp(225px, 29vw, 400px); }
[data-case-demo] #case-scene { height: clamp(182px, 22vw, 290px); }
[data-case-demo] .studio-tools #studio-scene { height: clamp(245px, 32vw, 410px); min-height: 0; }
#quote-preview { margin-top: 18px; border-radius: 12px; padding: 16px; color: #142742; background: #f1f6fc; }
#quote-preview pre { margin: 8px 0 0; white-space: pre-wrap; font: inherit; }
@media (max-width: 767px) {
  :root { --gutter: 13px; }
  [data-case-demo] .photo-hero .photo-track { height: auto; min-height: 0; aspect-ratio: 1.42; }
  [data-case-demo] .palette-track { height: clamp(121px, 40vw, 230px); }
  [data-case-demo] .comparison-track { height: clamp(155px, 54vw, 335px); }
  [data-case-demo] .studio-tools #studio-scene { height: clamp(220px, 65vw, 310px); }
}