/* Real driving features and shared viewport video presentation. */
.reverse-feature{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr);align-items:center;gap:clamp(32px,6vw,90px);padding:clamp(28px,5vw,72px);margin-bottom:48px;border:1px solid #ece4dc;border-radius:18px;background:#faf8f5}
.reverse-copy{min-width:0;max-width:620px}
.reverse-copy>.eyebrow{color:var(--orange-text);font-size:.75rem;line-height:1.8;margin-bottom:22px}
.reverse-copy h2{font-size:clamp(36px,4.4vw,64px);line-height:1.15;letter-spacing:-.045em}
.reverse-copy h2>span{color:var(--orange-text)}
.reverse-description{font-size:1rem;line-height:1.85;color:var(--muted);max-width:470px;margin-top:24px}
.reverse-description strong{color:var(--ink);font-weight:600}
.reverse-speed{display:flex;align-items:center;gap:28px;margin:28px 0;border-block:1px solid #ddd8d2;padding:18px 0}
.reverse-speed>strong{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-size:clamp(74px,8vw,112px);font-weight:500;line-height:1;letter-spacing:-.06em;color:var(--orange-text)}
.reverse-speed>strong>span{font-family:var(--font);font-size:1.375rem;font-weight:600;letter-spacing:-.02em}
.reverse-speed>p{font-size:.9375rem;line-height:1.75;color:var(--muted)}
.reverse-points{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:14px;font-size:.9375rem;line-height:1.65}
.reverse-points>li{display:flex;gap:12px;align-items:baseline}
.reverse-points>li>span{color:var(--orange-text)}
.driving-film{min-width:0;border:1px solid #dcdedc;background:#fff;border-radius:12px;overflow:hidden}
.driving-film-label{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 18px;font-family:var(--display);font-size:.6875rem;letter-spacing:.06em;font-weight:600;line-height:1.6}
.driving-real{display:inline-flex;align-items:center;gap:7px;font-family:var(--font);font-size:.5625rem;color:var(--muted);letter-spacing:.02em}
.driving-real::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex-shrink:0}
.driving-film video{display:block;width:100%;height:auto;object-fit:contain;background:#101418}
.reverse-film{width:min(100%,350px);justify-self:center}
.reverse-film video{aspect-ratio:9/16}
.driving-film figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 18px;font-size:.75rem;line-height:1.7;color:var(--muted)}
.driving-film figcaption>a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.racing-section{background:#fff;border-bottom:1px solid var(--line)}
.racing-intro{display:grid;grid-template-columns:1fr .8fr;gap:48px;align-items:end;margin-bottom:38px}
.racing-intro .eyebrow{color:var(--orange-text);font-size:.8125rem;margin-bottom:20px}
.racing-intro h2{font-size:clamp(34px,3.8vw,54px);line-height:1.22;letter-spacing:-.045em}
.racing-intro h2>span{color:var(--muted)}
.racing-intro>p{font-size:1rem;line-height:1.9;color:var(--muted);max-width:470px}
.racing-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);align-items:center;gap:clamp(28px,5vw,70px)}
.racing-film{background:#11191e;border-color:#263238;color:#fff}
.racing-film video{aspect-ratio:1280/968}
.racing-film .driving-real,.racing-film figcaption{color:#cbd4d9}
.racing-film figcaption>a{color:#fff}
.racing-benefits{display:grid;gap:30px}
.racing-benefits article{border-top:1px solid var(--line);padding-top:24px}
.racing-benefits article>span{font-family:var(--display);color:var(--orange-text);font-size:.6875rem;letter-spacing:.1em}
.racing-benefits h3{font-size:1.25rem;line-height:1.55;letter-spacing:-.03em;margin:12px 0}
.racing-benefits p{color:var(--muted);font-size:.9375rem;line-height:1.8}
.application-startup-lead{font-size:1.125rem;line-height:1.85;color:var(--ink);margin-top:24px;max-width:510px}
.application-startup-lead+.application-description{margin-top:18px}
.application-figure:has(#app-startup-video){width:min(100%,380px);justify-self:center}
.application-figure #app-startup-video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain;background:#101418}
.application-figure:has(#app-startup-video) figcaption{flex-wrap:wrap}
.function-links{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:28px}
.function-links a:nth-child(4n+1){padding-left:0;border-left:0}
.viewport-youtube{position:absolute;inset:0;width:100%;height:100%;background:#101418}
.youtube-fallback{position:absolute;inset:0;display:grid;place-items:center;color:white;text-decoration:none}
.youtube-fallback>img{width:100%;height:100%;object-fit:cover;opacity:.7}
.youtube-fallback>span{position:absolute;inset:auto 16px 18px;padding:10px 12px;background:#101418df;border-radius:6px;font-size:.75rem;font-weight:600;line-height:1.6;text-align:center}
.managed-youtube-frame{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:#101418}
.shorts-card{position:relative}
.shorts-preview{position:absolute;inset:0 0 auto;aspect-ratio:3/4;overflow:hidden;z-index:1;pointer-events:none;background:transparent}
.shorts-preview:not([data-playing]){opacity:0}
.shorts-preview .managed-youtube-frame{pointer-events:none}
.video-autoplay-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:10px 15px;border:1px solid #c7ccce;border-radius:8px;background:#fff;font:inherit;font-size:.8125rem;color:var(--ink);cursor:pointer;align-self:flex-start}
.video-autoplay-toggle:hover{border-color:var(--ink)}
.video-autoplay-toggle::before{content:"Ⅱ";font-family:var(--display);font-weight:700}
.video-autoplay-toggle[aria-pressed="true"]::before{content:"▶"}
.company-video-frame{min-height:200px}
.shorts-player-shell{min-width:200px;min-height:356px}
@media(max-width:920px){.reverse-feature{gap:28px;padding:32px}.reverse-copy h2{font-size:clamp(32px,4.6vw,46px)}.reverse-speed{gap:18px}.reverse-speed>strong{font-size:80px}.racing-intro{gap:28px}.racing-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px}.function-links a:nth-child(4){padding-left:14px;border-left:1px solid #455159}}
@media(max-width:700px){.reverse-feature{grid-template-columns:1fr;padding:28px 20px;margin-bottom:34px;gap:32px}.reverse-copy h2{font-size:clamp(36px,8.8vw,52px)}.reverse-film{width:min(100%,350px)}.racing-intro{grid-template-columns:1fr;gap:22px;margin-bottom:28px}.racing-layout{grid-template-columns:1fr;gap:30px}.racing-benefits{grid-template-columns:1fr 1fr;gap:24px}.racing-benefits>.text-link{grid-column:1/-1}.racing-benefits h3{font-size:1.125rem}.function-links{grid-template-columns:repeat(2,minmax(0,1fr))}.function-links a:nth-child(odd){padding-left:0;border-left:0}.function-links a:nth-child(even){padding-left:18px;border-left:1px solid #455159}}
@media(max-width:520px){.shorts-grid{grid-template-columns:1fr;max-width:380px;margin-inline:auto}.shorts-poster,.shorts-preview{aspect-ratio:9/12}.shorts-card-copy{padding:18px}.shorts-card h3{font-size:1rem}.racing-benefits{grid-template-columns:1fr}.reverse-speed>p{font-size:.875rem}.reverse-speed>strong{font-size:86px}.reverse-points{font-size:.875rem}.driving-film-label{padding:14px}.application-figure:has(#app-startup-video){max-width:350px}}
@media(max-height:640px){.shorts-player-shell{height:auto;width:225px;max-width:100%;aspect-ratio:9/16}}

/* Magnetic mounting film shares the site's viewport playback controller. */
.magnetic-feature{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:clamp(28px,4vw,58px);align-items:center;margin-bottom:40px;padding:clamp(22px,3vw,40px);background:#fff;border:1px solid var(--line);border-radius:14px;scroll-margin-top:100px}
.magnetic-film{min-width:0;margin:0;align-self:center}
.magnetic-film video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#fff;border:1px solid #eef0f1;border-radius:8px}
.magnetic-film figcaption{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:16px;font-size:.875rem;line-height:1.7;color:var(--muted)}
.magnetic-film figcaption>a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.magnetic-copy{min-width:0}
.magnetic-copy>.eyebrow{color:var(--orange-text);font-size:.8125rem;margin-bottom:15px}
.magnetic-copy h2{font-size:clamp(28px,2.7vw,38px);line-height:1.3;letter-spacing:-.04em}
.magnetic-copy h2>span{color:var(--orange-text)}
.magnetic-copy>p:not(.eyebrow){font-size:1rem;line-height:1.85;color:var(--muted);margin-top:18px}
.magnetic-steps{list-style:none;padding:0;margin:24px 0;display:grid;gap:15px}
.magnetic-steps>li{display:flex;gap:15px;border-top:1px solid var(--line);padding-top:14px}
.magnetic-steps>li>span{font-family:var(--display);font-size:.875rem;color:var(--orange-text);padding-top:3px}
.magnetic-steps strong{font-size:1rem;font-weight:600}
.magnetic-steps p{font-size:.875rem;line-height:1.75;color:var(--muted);margin:3px 0 0}
.technical-grid.magnetic-companions{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1050px){.magnetic-feature{grid-template-columns:1fr;gap:26px}.magnetic-copy h2 br{display:none}.magnetic-copy h2>span::before{content:" "}.magnetic-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.technical-grid.magnetic-companions{grid-template-columns:1fr}}
@media(max-width:650px){.magnetic-feature{padding:20px 16px;gap:22px;margin-bottom:28px}.magnetic-steps{grid-template-columns:1fr;gap:12px}.magnetic-copy h2{font-size:30px}.magnetic-copy h2 br{display:block}.magnetic-film figcaption{font-size:.875rem}.magnetic-copy>p:not(.eyebrow){font-size:1rem}.magnetic-film video{border-radius:5px}}

/* Keep the mechanism directly after the 3D opening, before the company story. */
.comparison-hero.comparison-opening{padding-bottom:0}
.magnetic-section{background:#fff}
.magnetic-section>.wrap{padding-bottom:clamp(40px,5vw,72px)}
.magnetic-section .magnetic-feature{margin-bottom:0}

/* Edge-to-edge white magnetic demonstration, integrated with the page. */
.magnetic-section .magnetic-feature{grid-template-columns:minmax(0,1fr);gap:32px;padding:0;border:0;border-radius:0;box-shadow:none;background:#fff}
.magnetic-section .magnetic-film{width:100%;max-width:none;align-self:stretch}
.magnetic-section .magnetic-film video{display:block;width:100%;max-width:none;height:auto;aspect-ratio:16/9;object-fit:contain;background:#fff;border:0;border-radius:0;box-shadow:none}
.magnetic-section .magnetic-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,5vw,80px);align-items:start}
.magnetic-section .magnetic-copy>.eyebrow,.magnetic-section .magnetic-copy>h2,.magnetic-section .magnetic-copy>p,.magnetic-section .magnetic-copy>a{grid-column:1}
.magnetic-section .magnetic-steps{grid-column:2;grid-row:1/6;margin:0;grid-template-columns:1fr}
.magnetic-section .magnetic-copy>a{margin-top:20px}
@media(max-width:700px){.magnetic-section .magnetic-feature{gap:26px}.magnetic-section .magnetic-copy{display:block}.magnetic-section .magnetic-steps{margin:24px 0}.magnetic-section .magnetic-film figcaption{margin-top:8px}}