.cad-story { position:relative; height:440svh; background:#f5f5f7; color:var(--color-ink); }
.cad-pin { position:sticky; top:0; height:100svh; min-height:620px; overflow:hidden; isolation:isolate; }
.cad-pin::after { content:''; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,#f5f5f7 0%,#f5f5f7cc 20%,transparent 55%),linear-gradient(0deg,#f5f5f7 0%,#f5f5f7cf 15%,transparent 48%); }
.cad-copy,.cad-controls,.cad-status { z-index:2; }
.cad-viewport,.cad-poster { position:absolute; inset:0; width:100%; height:100%; }
.cad-poster { object-fit:cover; transition:opacity 520ms ease; }
.cad-viewport { opacity:0; transition:opacity 520ms ease; }
.cad-viewport canvas { display:block; width:100%; height:100%; }
.cad-ready .cad-viewport { opacity:1; }
.cad-ready .cad-poster { opacity:0; }
.cad-copy { position:absolute; inset:auto var(--gutter) 112px; height:230px; pointer-events:none; }
.cad-panel { position:absolute; bottom:0; left:0; width:min(47%,660px); opacity:var(--cad-copy,0); transform:translateY(calc((1 - var(--cad-copy,0))*16px)); }
.cad-panel:first-child { --cad-copy:1; }
.cad-panel h1,.cad-panel h2 { font:400 clamp(32px,3.65vw,60px)/1.12 var(--display); letter-spacing:-.045em; text-wrap:balance; }
.cad-panel p { margin-top:20px; max-width:415px; font:400 17px/1.5 var(--body); color:var(--color-slate); }
.cad-panel .trust-logos { margin-top:24px; gap:22px; filter:grayscale(1); opacity:.7; }
.cad-panel .trust-logos img { max-width:67px; max-height:21px; filter:brightness(0); }
.cad-controls { position:absolute; inset:auto var(--gutter) 42px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.cad-chapters { display:flex; align-items:center; gap:24px; }
.cad-chapters button { position:relative; padding:14px 0; color:var(--color-slate); font:400 12px/1.3 var(--body); transition:color 400ms ease; }
.cad-chapters button::after { content:''; position:absolute; bottom:6px; inset-inline:0; height:1px; transform:scaleX(0); transform-origin:left; background:var(--color-ink); transition:transform 650ms cubic-bezier(.22,1,.36,1); }
.cad-chapters button[aria-pressed=true] { color:var(--color-ink); }
.cad-chapters button[aria-pressed=true]::after { transform:scaleX(1); }
.cad-controls .action { border-radius:30px; background:#1d1d1f; color:white; border-color:#1d1d1f; min-height:48px; }
.cad-status { position:absolute; top:114px; inset-inline-start:var(--gutter); font:400 11px/1.4 var(--body); color:var(--color-steel); }
.cad-progress { position:absolute; bottom:0; left:0; right:0; height:1px; background:transparent; }
.cad-progress::after { content:''; position:absolute; inset:0; background:#c5c5c8; transform:scaleX(var(--cad-progress,0)); transform-origin:left; }
.product-page .footer-editorial { background:#f5f5f7; }
.product-page .footer-editorial .contact-start { background:#ffffff; }
html[dir=rtl] .cad-panel { left:auto; right:0; }
html[dir=rtl] .cad-chapters button::after { transform-origin:right; }
@media(min-width:801px) { html[dir=rtl] .cad-copy { direction:rtl; } html[dir=rtl] .cad-panel { right:auto; left:0; } }
@media(max-width:800px) {
  .cad-pin::after { background:linear-gradient(0deg,#f5f5f7 0%,#f5f5f7 34%,transparent 62%); }
  .cad-story { height:420svh; }
  .cad-pin { min-height:620px; }
  .cad-copy { bottom:167px; height:180px; }
  .cad-panel { width:100%; }
  .cad-panel h1,.cad-panel h2 { max-width:470px; font-size:clamp(29px,7.4vw,44px); }
  .cad-panel p { font-size:15px; max-width:340px; margin-top:14px; }
  .cad-panel .trust-logos { gap:clamp(10px,2.8vw,16px); margin-top:18px; }
  .cad-panel .trust-logos img { max-width:53px; max-height:17px; }
  .cad-controls { bottom:26px; gap:13px; align-items:flex-start; flex-direction:column; }
  .cad-chapters { width:100%; justify-content:space-between; gap:12px; }
  .cad-chapters button { font-size:11px; }
  .cad-controls .action { font-size:13px; min-height:42px; padding-inline:20px; }
  .cad-status { top:96px; font-size:10px; }
}
@media(max-height:620px) and (min-width:801px) {
  .cad-pin { min-height:100svh; }
  .cad-copy { bottom:100px; }
  .cad-panel h1,.cad-panel h2 { font-size:30px; }
  .cad-panel p { font-size:14px; margin-top:12px; }
  .cad-panel .trust-logos { display:none; }
  .cad-controls { bottom:24px; }
}
@media(prefers-reduced-motion:reduce) {
  .cad-story { height:100svh; min-height:620px; }
  .cad-panel,.cad-viewport,.cad-poster,.cad-chapters button::after { transition:none; transform:none; }
}
[data-cad-preview] { height:100vh; }
[data-cad-preview] .cad-pin { min-height:0; height:100vh; }
[data-cad-preview] .cad-viewport { transition:none; }
[data-cad-preview] .cad-pin::after { display:none; }
/* Update only the rail itself, not inherited variables on the entire scene. */
.cad-progress { transform-origin:left; background:#c5c5c8; }
.cad-progress::after { display:none; }