/* OXYMAROC product spotlight. Motion uses the existing product photographs. */
.spotHero{padding:24px 0 30px;background:#f3f6fb}
.spotlight{--spot-accent:#4e97ff;--spot-duration:6500ms;position:relative;overflow:hidden;border-radius:18px;background:#102641;border:1px solid #203954;box-shadow:0 18px 38px #12243d12;color:#fff}
.spotStage{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center;min-height:452px;position:relative;background:linear-gradient(120deg,#0e203b 4%,#133559 78%,#17527b);isolation:isolate}
.spotStage::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 68% 10%,#3f8cf136,transparent 55%);pointer-events:none}
.spotCopy{padding:32px 34px 34px 42px;min-width:0;position:relative;z-index:1}
.spotEyebrow{font-size:12px;font-weight:600;letter-spacing:1.5px;color:#b0c9e8;display:flex;gap:8px;align-items:center;line-height:1.5;margin-bottom:17px}
.spotEyebrow::before{content:"";display:inline-block;width:21px;height:2px;background:var(--spot-accent)}
.spotCopy h1{font-size:clamp(32px,3.6vw,48px);font-weight:700;line-height:1.08;letter-spacing:-1.6px;color:#fff;margin:0 0 15px;min-height:2.2em;overflow-wrap:break-word}
.spotCopy h1 span{display:block;color:#8fc5ff}
.spotDescription{color:#cbdaea;font-size:15px;line-height:1.65;max-width:430px;min-height:3.3em;margin:0 0 18px}
.spotFeatures{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:19px;min-height:30px}
.spotFeatures span{padding:6px 10px;border:1px solid #597597;border-radius:5px;font-size:12px;color:#dce8f5;line-height:1.3}
.spotPurchase{display:flex;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:20px}
.spotPriceLabel{display:block;font-size:12px;color:#b2c7df;margin-bottom:3px}
.spotPrice{font-size:30px;line-height:1.2;letter-spacing:-.5px;font-weight:700;white-space:nowrap}
.spotPrice small{font-size:14px;font-weight:500;margin-inline-start:5px;letter-spacing:0}
.spotPrice.is-request{font-size:21px;white-space:normal}
.spotRef{font-size:12px;color:#b2c7df;line-height:1.4;overflow-wrap:anywhere;max-width:230px;padding-bottom:2px}
.spotActions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.spotActions .btn{background:#fff;color:#1249a1;font-size:14px;padding:13px 18px;min-height:46px;border:1px solid #fff;box-shadow:0 6px 16px #05152c1c;border-radius:7px;font-weight:650}
.spotActions .btn:hover{background:#edf5ff;border-color:#edf5ff}
.spotAll{font-size:14px;font-weight:500;color:#e5effb;border-bottom:1px solid #7296be;padding-bottom:3px}
.spotVisual{margin:26px 28px 26px 0;position:relative;align-self:stretch;min-width:0;display:flex;flex-direction:column;background:#f9fbff;border:1px solid #fff6;border-radius:14px;color:#193456;overflow:hidden;touch-action:pan-y}
.spotVisualTop{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:17px 19px 0;font-size:12px;line-height:1.4;color:#52708c;position:relative;z-index:1}
.spotVisualBrand{letter-spacing:-.5px;font-weight:750;color:#173c6a}.spotVisualBrand b{color:#2468d6}
.spotPhotoLink{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:315px;padding:12px 27px 9px;overflow:hidden;outline-offset:-5px!important}
.spotPhotoLink::before{content:"";position:absolute;width:280px;height:280px;border:1px solid #dce6f2;border-radius:50%;box-shadow:0 0 0 24px #e8eff84d;pointer-events:none}
.spotPhoto{width:100%;height:300px;position:relative;object-fit:contain;z-index:1;mix-blend-mode:multiply;transform-origin:center 60%;will-change:transform}
.spotCaption{position:relative;margin:0 18px;padding:12px 0 14px;border-top:1px solid #e3eaf3;display:flex;align-items:center;gap:11px;font-size:12px;line-height:1.5;color:#5d738d;min-height:53px}
.spotCaptionMark{width:25px;height:25px;display:grid;place-items:center;border:1px solid #cfdaeb;border-radius:50%;font-size:13px;flex-shrink:0;color:#4274b1}
.spotCaptionText{overflow-wrap:anywhere;min-width:0}
.spotControls{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 25px;background:#0b1c32;border-top:1px solid #2c4660}
.spotTabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;flex:1;min-width:0}
.spotTab{display:flex;align-items:center;gap:8px;min-width:0;position:relative;padding:4px 2px 12px;border:0;background:transparent;color:#a7bdd5;text-align:start;min-height:49px}
.spotTab img{width:32px;height:32px;object-fit:contain;background:#fff;border-radius:4px;padding:2px;flex-shrink:0;opacity:.75}
.spotTabText{font-size:12px;line-height:1.35;overflow-wrap:break-word}
.spotTab[aria-current="true"]{color:#fff;font-weight:650}.spotTab[aria-current="true"] img{opacity:1}
.spotTab:hover{color:#fff}
.spotRail{position:absolute;bottom:2px;inset-inline:0;height:2px;overflow:hidden;border-radius:3px;background:#2e4560}
.spotProgress{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;background:#71b6ff}
.spotTab[aria-current="true"] .spotProgress{animation:spotTimeline var(--spot-duration) linear forwards;animation-play-state:paused}
.spotlight.is-running .spotTab[aria-current="true"] .spotProgress{animation-play-state:running}
.spotPlayback{display:flex;align-items:center;gap:7px;flex-shrink:0}
.spotCounter{font-size:12px;font-variant-numeric:tabular-nums;color:#b3c6de;margin-inline-end:6px;white-space:nowrap}
.spotControlButton{width:38px;height:38px;display:grid;place-items:center;border:1px solid #3a526d;border-radius:50%;background:transparent;color:#e4effc;padding:8px;cursor:pointer}
.spotControlButton:hover{background:#1c3b5d;border-color:#8badcf}
.spotControlButton svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.spotPause{border-color:#87a3c2;background:#193655}
.spotlight.spot-enter .spotCopy>*{animation:spotTextEnter .65s ease both}
.spotlight.spot-enter .spotCopy>*:nth-child(2){animation-delay:60ms}.spotlight.spot-enter .spotCopy>*:nth-child(3){animation-delay:120ms}.spotlight.spot-enter .spotCopy>*:nth-child(4){animation-delay:160ms}.spotlight.spot-enter .spotCopy>*:nth-child(5){animation-delay:180ms}.spotlight.spot-enter .spotCopy>*:nth-child(6){animation-delay:220ms}
.spotlight.spot-enter .spotPhotoLink{animation:spotVisualEnter .8s cubic-bezier(.2,.65,.25,1) both}
.spotlight.spot-enter .spotPhoto{animation:spotPhotoDrift var(--spot-duration) ease-in-out both;animation-play-state:paused}
.spotlight.is-running .spotPhoto{animation-play-state:running}
.spotlight:not(.is-running) .spotCopy>*{animation-play-state:running}
.spotlight[dir="rtl"] .spotProgress{transform-origin:right}
.spotlight[dir="rtl"] .spotArrow svg{transform:rotate(180deg)}
.spotlight[dir="rtl"] .spotCopy{padding:32px 42px 34px 34px}
.spotlight[dir="rtl"] .spotVisual{margin:26px 0 26px 28px}
@keyframes spotTextEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes spotVisualEnter{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
@keyframes spotPhotoDrift{0%{transform:scale(.97) translateY(4px)}65%{transform:scale(1.025) translateY(-5px)}100%{transform:scale(1.015) translateY(-2px)}}
@keyframes spotTimeline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:1050px){.spotCopy{padding:27px}.spotlight[dir="rtl"] .spotCopy{padding:27px}.spotCopy h1{font-size:37px}.spotStage{min-height:442px}.spotVisual{margin:22px 22px 22px 0}.spotlight[dir="rtl"] .spotVisual{margin:22px 0 22px 22px}.spotVisualTop{padding-inline:13px}.spotVisualTop>span:last-child{max-width:110px;text-align:end}.spotPhotoLink{padding-inline:20px;min-height:295px}.spotPhoto{height:275px}.spotControls{padding:14px 20px;gap:16px}.spotTab img{display:none}.spotTabs{gap:10px}.spotTab{min-height:42px}.spotActions{gap:13px}.spotAll{font-size:13px}.spotDescription{font-size:14px}}
@media(max-width:760px){.spotHero{padding:16px 0 22px}.spotStage{grid-template-columns:1.1fr 1fr}.spotCopy{padding:23px}.spotlight[dir="rtl"] .spotCopy{padding:23px}.spotCopy h1{font-size:30px;letter-spacing:-.8px}.spotEyebrow{font-size:11px;letter-spacing:.8px;margin-bottom:13px}.spotFeatures{gap:6px;margin-bottom:16px}.spotFeatures span{font-size:12px;padding:5px 7px}.spotDescription{min-height:4.8em;line-height:1.6;margin-bottom:16px}.spotPurchase{gap:8px;margin-bottom:17px}.spotPrice{font-size:26px}.spotRef{font-size:12px;max-width:150px}.spotVisual{margin:18px 18px 18px 0}.spotlight[dir="rtl"] .spotVisual{margin:18px 0 18px 18px}.spotVisualTop{flex-direction:column;align-items:start;gap:5px;font-size:12px}.spotVisualTop>span:last-child{text-align:start;max-width:none}.spotPhotoLink{min-height:270px;padding:8px 10px}.spotPhoto{height:260px}.spotPhotoLink::before{width:180px;height:180px}.spotCaption{margin-inline:12px;font-size:12px}.spotCaptionMark{display:none}.spotActions .btn{font-size:13px;padding:11px 13px}.spotControls{flex-wrap:wrap;gap:9px;padding:13px 18px}.spotTabs{order:2;flex-basis:100%}.spotPlayback{margin-inline-start:auto}.spotCounter{margin-inline-end:8px}.spotControlButton{width:34px;height:34px}.spotTabText{font-size:12px}.spotTab{padding-bottom:10px}}
@media(max-width:560px){.spotlight{border-radius:12px}.spotStage{grid-template-columns:1fr;min-height:0}.spotVisual,.spotlight[dir="rtl"] .spotVisual{order:0;margin:16px 16px 0;border-radius:10px;max-height:236px}.spotCopy,.spotlight[dir="rtl"] .spotCopy{order:1;padding:23px 21px 21px}.spotVisualTop{padding:11px 13px 0;flex-direction:row;justify-content:space-between;align-items:center;font-size:12px}.spotVisualTop>span:last-child{text-align:end;font-size:12px;max-width:160px}.spotPhotoLink{min-height:170px;padding:4px 20px}.spotPhoto{height:170px;width:100%;max-width:100%;will-change:auto}.spotPhotoLink::before{width:136px;height:136px;box-shadow:0 0 0 16px #e8eff84d}.spotCaption{display:none}.spotEyebrow{margin-bottom:11px;font-size:12px;letter-spacing:.4px}.spotCopy h1{font-size:33px;line-height:1.07;min-height:0;letter-spacing:-.8px;margin-bottom:12px}.spotDescription{font-size:14px;line-height:1.55;min-height:0;margin-bottom:14px}.spotFeatures{margin-bottom:15px;min-height:0}.spotFeatures span{font-size:12px;padding:5px 8px}.spotPurchase{align-items:center;justify-content:space-between;margin-bottom:17px;gap:12px}.spotPrice{font-size:29px}.spotPriceLabel{font-size:12px}.spotPrice.is-request{font-size:21px}.spotRef{max-width:150px;font-size:12px}.spotActions{flex-wrap:wrap;gap:14px}.spotActions .btn{font-size:14px;min-height:44px;padding:11px 15px}.spotAll{font-size:14px}.spotControls{padding:10px 16px 14px;gap:8px}.spotTabs{gap:10px;grid-template-columns:repeat(6,minmax(0,1fr))}.spotTab{justify-content:center;min-height:41px;padding:3px 0 9px}.spotTabText{display:none}.spotTab img{display:block;width:29px;height:29px}.spotControlButton{width:36px;height:36px}.spotCounter{font-size:12px}.spotPlayback{gap:7px}.spotlight .spotControlButton:focus-visible{outline-offset:2px!important}}
@media(max-width:360px){.spotCopy,.spotlight[dir="rtl"] .spotCopy{padding:20px 17px}.spotCopy h1{font-size:29px}.spotDescription{font-size:14px}.spotRef{max-width:116px}.spotActions{gap:11px}.spotAll{font-size:13px}.spotActions .btn{font-size:13px;padding:11px 12px}.spotVisualTop>span:last-child{font-size:12px;max-width:135px}}
@media(prefers-reduced-motion:reduce){.spotlight *{animation:none!important;transition:none!important}.spotTab[aria-current="true"] .spotProgress{transform:scaleX(1)}.spotPhoto{will-change:auto}}