.scanning-tesla { background: #090b0d; }
.scanning-tesla .site-header { background: #000; }
.tesla-story { position: relative; height: 190svh; background: #000; }
.tesla-hero { --intro-opacity: 1; --intro-offset: 0px; --model-opacity: 0; position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 520px; background: #000; overflow: hidden; }
.tesla-intro-copy { position: absolute; inset: 82px 24px 78px; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; opacity: var(--intro-opacity); transform: translateY(var(--intro-offset)); }
.tesla-intro-copy[aria-hidden="true"] { pointer-events: none; }
.tesla-intro-copy > .tesla-intro-label { color: #ff6b1a; font-size: 12px; line-height: 1.4; letter-spacing: .16em; font-weight: 600; text-transform: uppercase; margin: 0 0 24px; }
.tesla-intro-copy h1 { font: 500 clamp(4rem, 8.7vw, 8.8rem)/.94 Manrope, Arial, sans-serif; letter-spacing: -.055em; color: #f0ede4; margin: 0; text-wrap: wrap; }
.tesla-intro-copy > p:not(.tesla-intro-label) { max-width: 560px; color: #a6a49e; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.55; margin: 32px 0 0; text-wrap: wrap; }
.tesla-intro-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 28px; margin-top: 32px; }
.tesla-scroll-cue { color: #f0ede4; font-size: 14px; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid #4d5155; }
.tesla-scroll-cue:hover { border-color: #ff6b1a; }
.tesla-scroll-cue:focus-visible { outline: 2px solid #f0ede4; outline-offset: 5px; }
.tesla-status { position: absolute; z-index: 3; bottom: 90px; left: 24px; right: 24px; text-align: center; color: #f0ede4; background: #000; padding: 16px; }
.tesla-status[hidden] { display: none; }
.tesla-stage, .tesla-toolbar { opacity: var(--model-opacity); }
.tesla-intro-copy { will-change: opacity, transform; }
.tesla-stage { will-change: opacity; }
.tesla-hero:not([data-exposed="true"]) .tesla-stage, .tesla-hero:not([data-exposed="true"]) .tesla-toolbar { pointer-events: none; }
.scan-label { color: #ff8c45; font-size: 12px; letter-spacing: .16em; font-weight: 600; text-transform: uppercase; }
.tesla-stage { position: absolute; inset: 82px 0 78px; }
.tesla-viewport, .tesla-preview { position: absolute; inset: 0; }
.tesla-viewport { opacity: 0; transition: opacity .25s ease; }
.tesla-stage[data-live="true"] .tesla-viewport { opacity: 1; }
.tesla-preview { width: 100%; height: 100%; object-fit: contain; pointer-events: none; opacity: 1; transition: opacity .25s ease; }
.tesla-stage[data-live="true"] .tesla-preview { opacity: 0; }
.tesla-stage:not([data-ready]) + .tesla-toolbar { visibility: hidden; }
.tesla-stage:not([data-ready]) .tesla-viewport { visibility: hidden; }
.tesla-viewport canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.tesla-viewport canvas:active { cursor: grabbing; }
.tesla-viewport canvas:focus-visible { outline: 2px solid #f0ede4; outline-offset: -4px; }
.tesla-interaction { position: absolute; top: 55%; left: clamp(24px, 4vw, 64px); display: flex; align-items: center; gap: 14px; margin: 0; pointer-events: none; }
.tesla-interaction svg { width: 30px; height: 30px; flex: 0 0 auto; fill: none; stroke: #ff8c45; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.tesla-interaction strong { display: block; color: #f0ede4; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 7px; }
.tesla-interaction span span { color: #a6a49e; font-size: 12px; line-height: 1.5; }
.interaction-touch { display: none; }
.tesla-stage:not([data-ready]) .tesla-interaction { visibility: hidden; }
@media (pointer: coarse) { .interaction-mouse { display: none; } .interaction-touch { display: block; } }
@media (max-width: 900px) { .tesla-interaction { top: auto; bottom: 6px; left: 24px; } }
.tesla-toolbar { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 28px; padding: 0 20px; }
.tesla-toolbar button { background: transparent; border: 0; border-bottom: 1px solid #4d5155; color: #f0ede4; padding: 12px 0; font: inherit; font-size: 13px; cursor: pointer; }
.tesla-toolbar button:hover { border-color: #ff6b1a; }
.tesla-toolbar button:focus-visible { outline: 2px solid #f0ede4; outline-offset: 5px; }
.tesla-toolbar button:disabled { opacity: .4; cursor: wait; }
.tesla-side-copy { position: absolute; z-index: 1; top: 50%; right: clamp(24px, 4vw, 64px); width: min(23vw, 290px); opacity: var(--side-opacity, 0); transform: translateY(calc(-50% + var(--side-offset, 20px))); pointer-events: none; will-change: opacity, transform; }
.tesla-side-copy .scan-label { margin: 0 0 20px; }
.tesla-side-copy h2 { color: #f0ede4; font-size: clamp(28px, 2.7vw, 42px); line-height: 1.12; letter-spacing: -.04em; font-weight: 500; margin: 0 0 24px; text-wrap: wrap; }
.tesla-side-copy > p:last-child { color: #a6a49e; font-size: 14px; line-height: 1.65; margin: 0; }
@media (max-width: 1100px) { .tesla-side-copy { display: none; } }
.tesla-hint { text-align: center; color: #a6a49e; font-size: 12px; margin: 0 20px 40px; }
.scan-intro { background: linear-gradient(180deg, #000 0%, #090b0d 180px); padding: 240px 0 90px; }
.scan-intro-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 70px; }
.scan-intro h2, .scan-process h2, .scan-cta h2 { font-size: clamp(30px, 4vw, 55px); line-height: 1.12; letter-spacing: -.04em; font-weight: 500; margin: 0 0 25px; }
.scan-intro p:not(.scan-label), .scan-step p, .scan-cta p:not(.scan-label) { color: #a6a49e; line-height: 1.7; }
.scan-process { padding: 30px 0 100px; }
.scan-process h2 { max-width: 750px; }
.scan-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 50px; }
.scan-step { border-top: 1px solid #4d5155; padding-top: 24px; }
.scan-step > span { color: #ff8c45; font-size: 12px; }
.scan-step h3 { font-size: 24px; font-weight: 500; margin: 24px 0 15px; }
.scan-cta { border-top: 1px solid #292d30; padding: 85px 0 100px; }
.scan-cta .section-shell { max-width: 900px; text-align: center; }
.scan-cta .button { margin-top: 24px; }
@media(max-width: 760px) {
  .tesla-story { height: 170svh; }
  /* Keep controls at the visible bottom as Safari's browser bars collapse.
     The canvas keeps its stable height so scrolling does not resize the GPU
     buffers or reframe Tesla. The scroll-reveal distance stays at 50svh. */
  @supports (height: 100dvh) {
    .tesla-story { height: calc(100dvh + 70svh); }
    .tesla-hero { height: 100dvh; }
    .tesla-viewport, .tesla-preview { bottom: auto; height: calc(100svh - 160px); }
  }
  .tesla-toolbar { bottom: max(12px, env(safe-area-inset-bottom)); }
  .tesla-intro-copy { inset: 76px 24px 78px; }
  .tesla-intro-copy h1 { font-size: clamp(2.65rem, 11.7vw, 5.4rem); letter-spacing: -.045em; }
  .tesla-intro-copy > p:not(.tesla-intro-label) { max-width: 380px; margin-top: 24px; }
  .tesla-intro-actions { gap: 12px 20px; margin-top: 24px; }
  .tesla-intro-actions .button { min-width: 0; min-height: 52px; padding: 14px 18px; font-size: 13px; gap: 10px; }
  .tesla-scroll-cue { font-size: 13px; gap: 8px; }
  .scan-intro-grid, .scan-steps { grid-template-columns: 1fr; gap: 32px; }
  .scan-intro { padding: 200px 0 60px; }
  .scan-cta { padding: 60px 0; }
  .scan-process { padding-bottom: 60px; }
}
@media(prefers-reduced-motion: reduce) {
  .tesla-intro-copy { transform: none; transition: none; }
  .tesla-stage, .tesla-toolbar { transition: none; }
  .tesla-preview, .tesla-viewport { transition: none; }
  .tesla-intro-copy, .tesla-stage, .tesla-side-copy { will-change: auto; }
}