/* Full-card explainers. Only internal machine parts move; the card stays flat. */
.offpeak-card-explainer{--ce-ink:#2c302a;--ce-body:#60645b;position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;width:100%;height:100%;min-width:0;min-height:0;padding:22px 22px 20px;box-sizing:border-box;overflow:hidden;background:radial-gradient(ellipse at 40% 35%,#fff 0%,#f7f8f5 58%,#eef1e8 100%);color:var(--ce-ink);font-family:Manrope,Arial,sans-serif;isolation:isolate;container-type:size;transform:none!important}
.offpeak-card-explainer *{box-sizing:border-box}
.offpeak-card-explainer::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border:1px solid #fff9;border-radius:inherit;box-shadow:inset 0 0 42px #b2bc9f0d}
.offpeak-card-explainer .ce-heading{min-width:0;padding-right:34px;position:relative;z-index:1}
.offpeak-card-explainer .ce-kicker{display:flex;align-items:center;gap:6px;font:500 8px/1.4 Manrope,Arial,sans-serif;letter-spacing:.075em;color:#777f6c;white-space:nowrap}
.offpeak-card-explainer .ce-kicker i{display:block;flex:none;width:4px;height:4px;border-radius:50%;background:#ccff00;box-shadow:0 0 0 1px #92a46a}
.offpeak-card-explainer .ce-heading h3{font:500 clamp(18px,6cqw,24px)/1.17 Manrope,Arial,sans-serif;letter-spacing:-.035em;color:var(--ce-ink);margin:7px 0 0;text-wrap:balance;max-width:340px}
.offpeak-card-explainer .ce-visual{display:flex;align-items:center;justify-content:center;min-height:0;margin:0 -12px;position:relative}
.offpeak-card-explainer .ce-visual::after{content:'';position:absolute;left:13%;right:13%;bottom:9%;height:6%;background:#606c4218;filter:blur(13px);border-radius:50%;z-index:-1;pointer-events:none}
.offpeak-card-explainer .ce-machine{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.offpeak-card-explainer .ce-machine text{font-family:Manrope,Arial,sans-serif;font-weight:500;letter-spacing:.02em}
.offpeak-card-explainer .ce-machine-geometry{filter:drop-shadow(0 4px 2px #34452a0c)}
.offpeak-card-explainer .ce-description{position:relative;z-index:1;min-width:0}
.offpeak-card-explainer .ce-steps{list-style:none;padding:0 0 11px;margin:0 0 10px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-bottom:1px solid #dce2d2}
.offpeak-card-explainer .ce-steps li{min-width:0;color:#4c5940;font:500 10px/1.35 Manrope,Arial,sans-serif;letter-spacing:-.01em}
.offpeak-card-explainer .ce-steps li>span{display:block;font:8px/1.4 ui-monospace,monospace;letter-spacing:.025em;color:#78876a;margin-bottom:4px}
.offpeak-card-explainer .ce-description p{color:#60695a;font:11.5px/1.6 Manrope,Arial,sans-serif;letter-spacing:-.008em;margin:0;text-wrap:pretty;max-width:580px}
.offpeak-card-explainer[data-small=true]{padding:17px 18px 17px;gap:6px}
.offpeak-card-explainer[data-small=true] .ce-heading h3{font-size:19px;margin-top:5px}
.offpeak-card-explainer[data-small=true] .ce-kicker{font-size:7.5px}
.offpeak-card-explainer[data-small=true] .ce-steps{padding-bottom:8px;margin-bottom:8px;gap:8px}
.offpeak-card-explainer[data-small=true] .ce-steps li{font-size:9.5px}
.offpeak-card-explainer[data-small=true] .ce-steps li>span{margin-bottom:2px}
.offpeak-card-explainer[data-small=true] .ce-description p{font-size:11px;line-height:1.5}
.offpeak-card-explainer[data-wide=true]{grid-template-columns:1.15fr 1fr;grid-template-rows:auto minmax(0,1fr);column-gap:17px}
.offpeak-card-explainer[data-wide=true] .ce-heading{grid-column:1/-1}
.offpeak-card-explainer[data-wide=true] .ce-visual{grid-column:1;grid-row:2;margin:0 -12px 0 -10px}
.offpeak-card-explainer[data-wide=true] .ce-description{grid-column:2;grid-row:2;align-self:center}
.offpeak-card-explainer[data-wide=true] .ce-steps{grid-template-columns:1fr;gap:9px;padding-bottom:12px;margin-bottom:12px}
.offpeak-card-explainer[data-wide=true] .ce-steps li{display:flex;gap:8px;align-items:baseline;font-size:11px}
.offpeak-card-explainer[data-wide=true] .ce-steps li>span{display:inline;margin:0}
.offpeak-card-explainer[data-wide=true] .ce-description p{font-size:12px;line-height:1.55}
.offpeak-card-explainer .ce-packet{stroke-dasharray:5 95;animation:ce-flow 3.4s linear infinite;animation-delay:var(--delay,0s)}
.offpeak-card-explainer :is(.ce-fan,.ce-gear,.ce-radar,.ce-meter-arm){transform-origin:0 0;transform-box:view-box}
.offpeak-card-explainer .ce-fan{animation:ce-spin 6s linear infinite}.offpeak-card-explainer .ce-fan.ce-reverse{animation-direction:reverse;animation-duration:7.5s}
.offpeak-card-explainer .ce-gear{animation:ce-spin 13s linear infinite}
.offpeak-card-explainer .ce-radar{animation:ce-spin 7s linear infinite}
.offpeak-card-explainer .ce-scan-x{animation:ce-scan 3.6s cubic-bezier(.4,0,.2,1) infinite}
.offpeak-card-explainer .ce-latch{animation:ce-latch 4.2s cubic-bezier(.4,0,.2,1) infinite}
.offpeak-card-explainer .ce-inspect{animation:ce-inspect 4.5s cubic-bezier(.4,0,.2,1) infinite}
.offpeak-card-explainer .ce-gate{animation:ce-gate 4.4s cubic-bezier(.4,0,.2,1) infinite}
.offpeak-card-explainer .ce-meter-arm{animation:ce-meter 6s cubic-bezier(.4,0,.2,1) infinite}
.offpeak-card-explainer .ce-paper-feed{animation:ce-paper 4.6s cubic-bezier(.4,0,.2,1) infinite}
.offpeak-card-explainer .ce-signature{stroke-dasharray:150;animation:ce-sign 4.6s ease-in-out infinite}
.offpeak-card-explainer .ce-token-slide{animation:ce-token 3.5s cubic-bezier(.4,0,.2,1) infinite}
.offpeak-card-explainer .ce-lock-shackle{animation:ce-lock 4.6s cubic-bezier(.4,0,.2,1) infinite}
.offpeak-card-explainer .ce-key-signal{animation:ce-confirm 4.6s ease-in-out infinite}
.offpeak-card-explainer .ce-lifecycle-packet{animation:ce-route 8s linear infinite}
.offpeak-card-explainer .ce-export-arrow{animation:ce-download 3s cubic-bezier(.4,0,.2,1) infinite}
.offpeak-card-explainer[data-running=false] *{animation-play-state:paused!important}
@keyframes ce-flow{to{stroke-dashoffset:-200}}
@keyframes ce-spin{to{transform:rotate(360deg)}}
@keyframes ce-scan{0%,10%,100%{transform:translateX(0);opacity:0}20%{opacity:.7}70%{transform:translateX(210px);opacity:.7}85%{transform:translateX(210px);opacity:0}}
@keyframes ce-latch{0%,20%,90%,100%{transform:translateY(0)}40%,75%{transform:translateY(7px)}}
@keyframes ce-inspect{0%,100%{transform:translate(0,0)}45%,65%{transform:translate(20px,29px)}}
@keyframes ce-gate{0%,20%,80%,100%{transform:translateY(0)}40%,65%{transform:translateY(-26px)}}
@keyframes ce-meter{0%,100%{transform:rotate(-75deg)}60%,75%{transform:rotate(70deg)}}
@keyframes ce-paper{0%,15%,100%{transform:translateY(-8px)}55%,80%{transform:translateY(13px)}}
@keyframes ce-sign{0%,25%,100%{stroke-dashoffset:150}60%,85%{stroke-dashoffset:0}}
@keyframes ce-token{0%{transform:translateX(-44px);opacity:0}18%,75%{opacity:1}90%,100%{transform:translateX(78px);opacity:0}}
@keyframes ce-lock{0%,20%,100%{transform:translateY(-10px)}40%,85%{transform:translateY(0)}}
@keyframes ce-confirm{0%,25%,100%{opacity:.25}45%,80%{opacity:1}}
@keyframes ce-route{0%,100%{transform:translate(0,0)}29%{transform:translate(244px,0)}47%{transform:translate(244px,152px)}77%{transform:translate(-109px,152px)}91%{transform:translate(-109px,0)}}
@keyframes ce-download{0%,10%,100%{transform:translateY(-5px)}55%,75%{transform:translateY(8px)}}
@media(prefers-reduced-motion:reduce){.offpeak-card-explainer *{animation:none!important;transition:none!important}.offpeak-card-explainer .ce-scan-x{opacity:0}.offpeak-card-explainer .ce-signature{stroke-dashoffset:0}.offpeak-card-explainer .ce-token-slide{opacity:1}}

/* Feature-only material refinement: fixed orthographic casing, no card stacking or tilt. */
.offpeak-card-explainer[data-scene-id^="scene-feature-"]{background:radial-gradient(ellipse at 42% 32%,#fff 0%,#f7f8f5 65%,#eff1eb 100%)}
.offpeak-card-explainer[data-scene-id^="scene-feature-"] .ce-machine-geometry{filter:drop-shadow(0 4px 1px #30352a14)}
.offpeak-card-explainer[data-scene-id^="scene-feature-"] .ce-feature-wireframe{pointer-events:none}
.offpeak-card-explainer[data-scene-id^="scene-feature-"] .ce-machined-casing{transform:none;shape-rendering:geometricPrecision}

/* A phone uses the complete card width for each part of the explanation. */
@media(max-width:639px){
 .offpeak-card-explainer[data-scene-id^="scene-productivity-"]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;padding:14px 16px;gap:4px}
 .offpeak-card-explainer[data-scene-id^="scene-productivity-"] .ce-heading{grid-column:auto;grid-row:auto}
 .offpeak-card-explainer[data-scene-id^="scene-productivity-"] .ce-heading h3{font-size:18px;line-height:1.15;margin-top:4px}
 .offpeak-card-explainer[data-scene-id^="scene-productivity-"] .ce-kicker{font-size:8px;letter-spacing:.035em}
 .offpeak-card-explainer[data-scene-id^="scene-productivity-"] .ce-visual{grid-column:auto;grid-row:auto;margin:0 -10px}
 .offpeak-card-explainer[data-scene-id^="scene-productivity-"] .ce-description{grid-column:auto;grid-row:auto;align-self:stretch}
 .offpeak-card-explainer[data-scene-id^="scene-productivity-"] .ce-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-bottom:7px;margin-bottom:7px}
 .offpeak-card-explainer[data-scene-id^="scene-productivity-"] .ce-steps li{display:block;font-size:11px;line-height:1.3}
 .offpeak-card-explainer[data-scene-id^="scene-productivity-"] .ce-steps li>span{display:inline;margin:0 4px 0 0;font-size:8px}
 .offpeak-card-explainer[data-scene-id^="scene-productivity-"] .ce-description p{font-size:11px;line-height:1.45}
}