/* fallow-ignore-file unused-file */
/* Homepage story sections (docs/HOME.md; review 10-27, spec f9406e0a am.#4 B). Loaded only on pages that use them.
   Each light section has its own paper, layout and motif (am.#4 B4): DeviceStage = cool paper + a corner signal,
   FocusStory = pure white + a pinned focus-in story, Statement = warm white + giant type over a radiating signal.
   The CSS DEFAULT is the finished, static layout; home.js adds .fs-dyn (pinned story) where it can run. */

/* ---------------- DeviceStage: the device BIG, a signal radiating out of the top-right corner ---------------- */
.dv-sec{position:relative;overflow:hidden;isolation:isolate;padding:92px 0 100px;background:linear-gradient(180deg,#f5f7fb 0,#edf1f7 100%);color:var(--ink-d)}
.dv-sec h2{color:var(--ink-d);margin:.3em 0 0;max-width:15ch}
.dv-sec .eyebrow{color:var(--signal)}
.dv-sec .lead,.dv-sec .ticks li{color:var(--muted-d)}
.dv-sec .lead{margin-top:0}
.dv-signal{position:absolute;top:0;right:0;width:min(86vw,820px);height:auto;z-index:-1;pointer-events:none;overflow:visible}
.dv-road{fill:none;stroke:rgba(47,123,255,.2);stroke-width:2;stroke-dasharray:2 10;stroke-linecap:round}
.dv-src{fill:#2f7bff;filter:drop-shadow(0 0 10px rgba(47,123,255,.9))}
.dv-ring{fill:none;stroke:#2f7bff;stroke-width:1.6;vector-effect:non-scaling-stroke;transform-box:view-box;transform-origin:600px 0;opacity:0;transform:scale(.12);animation:dv-out 8s cubic-bezier(.22,.61,.36,1) infinite}
.dv-ring.r1{animation-delay:1.6s}.dv-ring.r2{animation-delay:3.2s}.dv-ring.r3{animation-delay:4.8s}.dv-ring.r4{animation-delay:6.4s}
@keyframes dv-out{0%{transform:scale(.12);opacity:0}10%{opacity:.5}100%{transform:scale(4.4);opacity:0}}
.dv{display:grid;gap:30px;grid-template-areas:"head" "stage" "body"}
/* right after the white hero outro: the paper continues the white, so the heading arrives at once (Prism r2 #1) */
.film-outro-white+.dv-sec{padding-top:36px}
.dv-head{grid-area:head}.dv-stage{grid-area:stage;margin:0}.dv-body{grid-area:body}
@media(max-width:700px){.dv-frame{margin:0 -16px;border-radius:0}.dv-scale{left:calc(25% - 8px);width:calc(55% + 18px)}}
.dv-frame{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:16/9;background:#070c18;box-shadow:0 60px 120px -56px rgba(20,60,140,.6),0 0 0 1px rgba(10,18,34,.06)}
.dv-frame .dv-media{width:100%;height:100%;object-fit:cover}
.dv-loop{position:absolute;inset:0;opacity:0;transition:opacity .6s linear}
.dv-loop.is-on{opacity:1}
/* the device's own signal: rings leave the card's edge and fade (position = where the card sits in device-loop: x 25-80%, y 30-70%) */
.dv-edge{position:absolute;left:25%;top:30%;width:55%;height:40%;pointer-events:none}
.dv-edge i{position:absolute;inset:0;border-radius:6%/9%;border:2px solid rgba(98,182,255,.85);box-shadow:0 0 18px rgba(47,123,255,.6);opacity:0;animation:dv-edge 4.2s cubic-bezier(.22,.61,.36,1) infinite}
.dv-edge i:nth-child(2){animation-delay:1.4s}.dv-edge i:nth-child(3){animation-delay:2.8s}
@keyframes dv-edge{0%{transform:scale(1);opacity:0}12%{opacity:.75}100%{transform:scale(1.32,1.6);opacity:0}}
.dv-glint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.13) 48%,transparent 60%);background-size:260% 100%;background-position:120% 0;animation:dv-glint 7s ease-in-out 1.5s infinite}
@keyframes dv-glint{0%,55%{background-position:120% 0}85%,100%{background-position:-60% 0}}
.dv-stage{position:relative}
.dv-scale{position:absolute;left:25%;width:55%;top:71%;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vw,14px);margin:0;text-align:center;font:700 clamp(15px,2.3vw,34px)/1.1 var(--display);font-stretch:104%;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.dv-scale .proposed{color:inherit}
.dv-bracket{width:100%;height:clamp(8px,1.2vw,16px);border:2px solid rgba(98,182,255,.9);border-top:0;border-radius:0 0 6px 6px;box-shadow:0 6px 16px -6px rgba(47,123,255,.8)}
.dv-body .ticks{margin-top:20px}
@media(min-width:960px){
  .dv-sec{padding:120px 0 128px}
  .dv{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head body" "stage stage";column-gap:72px;row-gap:48px;align-items:end}
  .dv-body{align-self:end}
  .dv-body .ticks{margin-bottom:6px}
}

/* ---------------- FocusStory: the process, one step in focus at a time (a pinned act) ---------------- */
.fs-sec{position:relative;background:#fff;color:var(--ink-d)}
.fs-sec h2,.fs-sec h3{color:var(--ink-d)}
.fs-sec p{color:var(--muted-d)}
.fs-sec .eyebrow{color:var(--signal)}
.fs-sec h2{margin:.3em 0 .3em;max-width:18ch}
.fs-sec .lead{margin-top:0;font-size:clamp(16px,1.4vw,19px)}
.fs-stage{padding:96px 0}
.fs-grid{display:grid;gap:30px}
.fs-steps{list-style:none;display:grid;gap:22px}
.fs-step{display:grid;grid-template-columns:3px minmax(0,1fr);gap:20px}
.fs-bar{border-radius:3px;background:rgba(47,123,255,.14);overflow:hidden}
.fs-bar i{display:block;height:100%;background:linear-gradient(180deg,#2f7bff,#62b6ff);transform-origin:top}
.fs-txt h3{font-size:clamp(20px,1.9vw,26px);margin:0 0 6px}
.fs-txt p{font-size:16px;line-height:1.6;max-width:46ch}
.fs-txt .more{display:inline-block;margin-top:10px;color:var(--signal);font-weight:650;font-size:15px}
.fs-visuals{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.fs-visuals{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fs-vis{margin:0}
.fs-vis-in{position:relative;aspect-ratio:4/3;border-radius:22px;overflow:hidden;background:#070c18;box-shadow:0 40px 80px -48px rgba(20,60,140,.55)}
.fs-vis figcaption{margin-top:10px;font-weight:650;font-size:15px;color:var(--ink-d)}
.fs-vis .media{width:100%;height:100%;object-fit:cover}
.fs-prog{display:none}

/* pinned (home.js .fs-dyn): the stage sticks for the length of the track; the active step + its visual come into focus */
.fs-dyn .fs-stage{position:sticky;top:0;height:100vh;height:100svh;padding:0;display:flex;align-items:center;overflow:hidden}
.fs-dyn .fs-grid{width:100%}
.fs-dyn .fs-visuals{display:block;position:relative}
.fs-dyn .fs-vis{position:absolute;inset:0;opacity:0;transform:scale(1.07);filter:blur(16px);transition:opacity .7s ease,transform 1.2s cubic-bezier(.2,.7,.2,1),filter .9s ease}
.fs-dyn .fs-vis.is-on{opacity:1;transform:none;filter:none}
.fs-dyn .fs-vis-in{height:100%;aspect-ratio:auto}
.fs-dyn .fs-vis figcaption{display:none}
.fs-dyn .fs-step{opacity:.3;filter:blur(2.4px);transition:opacity .6s ease,filter .6s ease,transform .6s ease;cursor:pointer}
.fs-dyn .fs-step.is-past{opacity:.48;filter:blur(1px)}
.fs-dyn .fs-step.is-on{opacity:1;filter:none;cursor:default}
.fs-dyn .fs-bar i{transform:scaleY(var(--p,0));transition:transform .15s linear}
.fs-dyn .fs-txt p,.fs-dyn .fs-txt .more{display:block;max-height:0;opacity:0;overflow:hidden;transition:max-height .6s ease,opacity .5s ease}
.fs-dyn .fs-step.is-on .fs-txt p,.fs-dyn .fs-step.is-on .fs-txt .more{max-height:160px;opacity:1}
@media(min-width:960px){
  .fs-dyn .fs-grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);grid-template-areas:"head vis" "steps vis";grid-template-rows:auto minmax(0,1fr);column-gap:64px;row-gap:28px;padding-top:96px;padding-bottom:40px;height:100%}
  .fs-dyn .fs-head{grid-area:head}
  .fs-dyn .fs-steps{grid-area:steps;gap:14px;align-content:start}
  .fs-dyn .fs-visuals{grid-area:vis;align-self:center;aspect-ratio:1/1;max-height:calc(100svh - 150px);width:100%;margin-left:auto}
  .fs-dyn .fs-step.is-on{transform:translateX(6px)}
}
/* phones + tablets portrait: the visual fills the middle, ONE step's words at the bottom, a thin progress line */
@media(max-width:959px){
  .fs-dyn .fs-grid{height:100%;grid-template-areas:"head" "vis" "steps" "prog";grid-template-rows:auto minmax(0,1fr) auto auto;row-gap:14px;padding-top:84px;padding-bottom:22px}
  .fs-dyn .fs-head{grid-area:head}.fs-dyn .fs-visuals{grid-area:vis}.fs-dyn .fs-steps{grid-area:steps}.fs-dyn .fs-prog{grid-area:prog}
  .fs-dyn .fs-head .lead{display:none}
  .fs-dyn .fs-head h2{font-size:clamp(24px,6.4vw,34px);margin-bottom:0}
  .fs-dyn .fs-visuals{min-height:0;height:100%}
  .fs-dyn .fs-steps{display:grid;gap:0}
  .fs-dyn .fs-step{grid-area:1/1;opacity:0;filter:none;transform:translateY(14px);pointer-events:none}
  .fs-dyn .fs-step.is-past{opacity:0;filter:none}
  .fs-dyn .fs-step.is-on{opacity:1;transform:none;pointer-events:auto}
  .fs-dyn .fs-bar{display:none}
  .fs-dyn .fs-step{grid-template-columns:minmax(0,1fr)}
  .fs-dyn .fs-txt h3{font-size:21px}
  .fs-dyn .fs-txt p{font-size:15px}
  .fs-dyn .fs-prog{display:block;height:3px;border-radius:3px;background:rgba(47,123,255,.14);overflow:hidden}
  .fs-dyn .fs-prog i{display:block;height:100%;background:linear-gradient(90deg,#2f7bff,#62b6ff);transform-origin:left;transform:scaleX(var(--p,0))}
}

/* visual: the customer app (code-built; am.#5). The CSS default is the ACTIVE end state (.is-active); home.js starts it off and plays it on. */
.vx-back{position:absolute;inset:0}
.vx-back .media{width:100%;height:100%;object-fit:cover;filter:brightness(.5) saturate(.85)}
.vx-back .lp-v{filter:brightness(.5) saturate(.85)}
.app{position:absolute;inset:0;display:grid;place-items:center}
.app-phone{position:relative;container-type:inline-size;height:min(94%,600px);aspect-ratio:1/2;border-radius:12%/6%;overflow:hidden;display:flex;flex-direction:column;color:#eef2f8;background:linear-gradient(180deg,#0b1530,#050914);border:1.5px solid rgba(255,255,255,.2);box-shadow:0 30px 70px -20px rgba(0,0,0,.85),0 0 0 6px rgba(255,255,255,.05),0 0 80px -6px rgba(47,123,255,.8);transition:box-shadow 1.1s ease,border-color 1.1s ease}
.app-notch{position:absolute;z-index:2;top:3.4cqw;left:50%;width:30cqw;height:5.6cqw;border-radius:6cqw;background:#000;transform:translateX(-50%)}
.app-glow{position:absolute;inset:0;background:radial-gradient(78% 50% at 50% 40%,rgba(95,180,255,.55),rgba(47,123,255,.24) 52%,transparent 80%),linear-gradient(180deg,rgba(47,123,255,.22),rgba(47,123,255,.04) 60%,rgba(47,123,255,.3));opacity:1;transition:opacity 1.1s ease}
.app-hero{position:relative;flex:1;min-height:0;display:grid;place-items:center;padding-top:10cqw}
.app-hero>*{grid-area:1/1}
.app-halo{width:78cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(95,180,255,.5),rgba(47,123,255,.16) 60%,transparent);opacity:1;transition:opacity 1.1s ease}
.app-pulse{width:50cqw;aspect-ratio:1;border-radius:50%;border:.7cqw solid #5fb4ff;box-shadow:0 0 5cqw rgba(47,123,255,.55),inset 0 0 5cqw rgba(47,123,255,.3);transition:opacity 1s ease}
.app-pulse.p0{opacity:.5;transform:scale(1.12)}
.app-pulse.p1{opacity:.22;transform:scale(1.62)}
.app-mark{position:relative;width:34cqw;height:auto;opacity:1;filter:drop-shadow(0 0 2.4cqw rgba(143,203,255,.95)) drop-shadow(0 0 9cqw rgba(47,123,255,.9));transition:opacity 1s ease,filter 1.1s ease}
.app-sw{position:relative;margin:0 6cqw 8cqw;padding:3.6cqw 4cqw;border-radius:5cqw;display:flex;align-items:center;justify-content:space-between;gap:3cqw;background:rgba(255,255,255,.07);border:1px solid rgba(143,203,255,.34);transition:background 1s ease,border-color 1s ease}
.app-lbl{display:grid;font:700 5.2cqw/1.15 var(--display);letter-spacing:-.005em;white-space:nowrap}
.app-lbl>span{grid-area:1/1;transition:opacity .6s ease,transform .6s ease}
.app-lbl .proposed{color:inherit}
.app-lbl .l-on{color:#dcefff}
.app-lbl .l-off{opacity:0;transform:translateY(-40%);color:#b4c2d8}
.app-trk{flex:none;position:relative;width:14cqw;height:8cqw;border-radius:8cqw;background:linear-gradient(90deg,#2f7bff,#5fb4ff);box-shadow:0 0 4cqw rgba(47,123,255,.8);transition:background 1s ease,box-shadow 1s ease}
.app-knob{position:absolute;top:1cqw;left:1cqw;width:6cqw;height:6cqw;border-radius:50%;background:#fff;box-shadow:0 .4cqw 1.2cqw rgba(0,0,0,.4);transform:translateX(6cqw);transition:transform .8s cubic-bezier(.3,.8,.25,1)}
/* the switched-off start (home.js removes .is-active, then adds it back when the step comes in) */
.app:not(.is-active) .app-phone{border-color:rgba(255,255,255,.14);box-shadow:0 30px 70px -20px rgba(0,0,0,.85),0 0 0 6px rgba(255,255,255,.05),0 0 0 0 rgba(47,123,255,0)}
.app:not(.is-active) .app-glow,.app:not(.is-active) .app-halo{opacity:0}
.app:not(.is-active) .app-pulse{opacity:0}
.app:not(.is-active) .app-mark{opacity:.5;filter:drop-shadow(0 0 0 rgba(143,203,255,0)) drop-shadow(0 0 0 rgba(47,123,255,0))}
.app:not(.is-active) .app-sw{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.16)}
.app:not(.is-active) .app-trk{background:#2a3550;box-shadow:none}
.app:not(.is-active) .app-knob{transform:none}
.app:not(.is-active) .l-on{opacity:0;transform:translateY(40%)}
.app:not(.is-active) .l-off{opacity:1;transform:none}
.fs-dyn .vx-app.is-on .app.is-active .app-pulse{animation:app-pulse 3.6s cubic-bezier(.2,.6,.3,1) infinite}
.fs-dyn .vx-app.is-on .app.is-active .app-pulse.p1{animation-delay:1.8s}
@keyframes app-pulse{0%{transform:scale(.8);opacity:.75}100%{transform:scale(1.9);opacity:0}}
/* stacked (no pin): the phone gets a square box so it reads at phone width */
.fs-sec:not(.fs-dyn) .vx-app .fs-vis-in{aspect-ratio:1/1}
@keyframes fs-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* visual: a vehicle drives a closed loop; the gateway rings follow it and light as it passes near each one (home.js drives it) */
.vx-gateways .vx-back .media{filter:brightness(.5) saturate(.9)}
.vx-gateways .vx-back::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--bx,-999px) var(--by,-999px),#050a14 0,rgba(5,10,20,.94) calc(var(--br,0px)*.45),transparent var(--br,0px))}
.gw{position:absolute;inset:0;width:100%;height:100%}
.gw-route{fill:none;stroke:rgba(98,182,255,.26);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.gw-ln{fill:none;stroke:#62b6ff;stroke-width:1.5;opacity:0}
.gw-ln.is-near{opacity:.85}
.gw-dot{fill:rgba(98,182,255,.3)}
.gw-halo{fill:rgba(47,123,255,.3);opacity:var(--l,1)}
.gw-hot{fill:#a8d6ff;opacity:var(--l,1);filter:drop-shadow(0 0 5px #2f7bff)}
.gw-wave{fill:none;stroke:#62b6ff;stroke-width:1.5;opacity:0}
.gw-car{fill:#fff;stroke:#2f7bff;stroke-width:3;filter:drop-shadow(0 0 8px #62b6ff)}
.gw-ring{fill:none;stroke:#62b6ff;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.5;transform-box:fill-box;transform-origin:center}
.gw-ring.r1{opacity:.3;transform:scale(1.8)}.gw-ring.r2{opacity:.15;transform:scale(2.6)}
.fs-dyn .gw-ln,.fs-dyn .gw-ln.is-near,.pt-dyn .gw-ln,.pt-dyn .gw-ln.is-near{opacity:0}
.fs-dyn .gw-n,.pt-dyn .gw-n{--l:0}
.fs-dyn .vx-gateways.is-on .gw-ring,.pt-dyn .vx-gateways.is-on .gw-ring{animation:gw-out 3.3s ease-out infinite}
.fs-dyn .vx-gateways.is-on .gw-ring.r1,.pt-dyn .vx-gateways.is-on .gw-ring.r1{animation-delay:1.1s}
.fs-dyn .vx-gateways.is-on .gw-ring.r2,.pt-dyn .vx-gateways.is-on .gw-ring.r2{animation-delay:2.2s}
@keyframes gw-out{from{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(3.4)}}

/* visual: the investigator console (code-built; logo + naming stay proposed until permission): panel chrome, a night street map,
   the flagged vehicle driving a closed loop, a case rail. Not the scroll-drawn route of /rapidtrace-recovery/. */
.rts{position:absolute;inset:0;container-type:inline-size;display:flex;flex-direction:column;gap:clamp(8px,2.4cqw,14px);padding:clamp(10px,3cqw,20px);background:linear-gradient(180deg,#0c1527,#050810)}
.rts-bar{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding-bottom:clamp(8px,2cqw,12px);border-bottom:1px solid rgba(98,182,255,.16)}
.rts-dots{display:flex;gap:5px}
.rts-dots i{width:8px;height:8px;border-radius:50%;background:rgba(160,185,220,.28)}
.rts .rt-logo{width:min(34%,170px);height:auto}
.rts-sub{margin-left:auto;font:650 10px/1.35 var(--display);font-stretch:118%;letter-spacing:.14em;text-transform:uppercase;color:#a3b4cb;text-align:right}
.rts-main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 27%;gap:clamp(8px,2cqw,12px)}
.rts-mapw{position:relative;min-height:0;border-radius:10px;overflow:hidden;border:1px solid rgba(98,182,255,.24);box-shadow:inset 0 0 44px rgba(0,0,0,.55)}
.rts-map{position:absolute;inset:0;width:100%;height:100%}
.rts-bg{fill:#060b18}
.rts-blk{fill:#0a1428;stroke:rgba(98,182,255,.08);stroke-width:1}
.rts-blk.park{fill:#0a2230;stroke:rgba(98,182,255,.12)}
.rts-mn{fill:none;stroke:rgba(98,182,255,.1);stroke-width:1.4}
.rts-river{fill:none;stroke:#0d2547;stroke-width:22;opacity:.85}
.rts-st path{fill:none;stroke:#101e3b;stroke-width:7}
.rts-ave path{fill:none;stroke:#152a52;stroke-width:9}
.rts-cl path{fill:none;stroke:rgba(98,182,255,.16);stroke-width:1;stroke-dasharray:3 6}
.rts-loop{fill:none;stroke:rgba(98,182,255,.18);stroke-width:3.4;stroke-linejoin:round}
.rts-trail{fill:none;stroke-linecap:round;stroke-linejoin:round}
.rts-trail.t0{stroke:rgba(95,180,255,.38);stroke-width:3}
.rts-trail.t1{stroke:#9fd2ff;stroke-width:3.6;filter:drop-shadow(0 0 4px #2f7bff)}
.rts-ret{fill:rgba(47,123,255,.14);stroke:#62b6ff;stroke-width:1.4;stroke-dasharray:4 4;transform-box:fill-box;transform-origin:center}
.rts-tick{fill:none;stroke:#62b6ff;stroke-width:2;stroke-linecap:round}
.rts-dot{fill:#fff;stroke:#2f7bff;stroke-width:2.6;filter:drop-shadow(0 0 7px #62b6ff)}
.rts-alert{position:absolute;left:10px;top:10px;z-index:1;display:flex;align-items:center;gap:9px;padding:8px 11px;border-radius:10px;background:rgba(6,12,26,.84);border:1px solid rgba(98,182,255,.5);color:#eef2f8;font:700 clamp(12px,3.2cqw,14px)/1.2 var(--font);backdrop-filter:blur(4px)}
.rts-alert i{flex:none;width:9px;height:9px;border-radius:50%;background:#62b6ff;animation:rts-blink 1.8s ease-out infinite}
.rts-hud i{position:absolute;width:12px;height:12px;border:0 solid rgba(143,203,255,.6)}
.rts-hud i:nth-child(1){right:8px;top:8px;border-width:1.5px 1.5px 0 0}.rts-hud i:nth-child(2){left:8px;bottom:8px;border-width:0 0 1.5px 1.5px}
.rts-hud i:nth-child(3){right:8px;bottom:8px;border-width:0 1.5px 1.5px 0}.rts-hud i:nth-child(4){display:none}
.rts-rail{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.rts-rail li{display:grid;grid-template-columns:9px minmax(0,1fr);gap:5px 8px;align-items:center;padding:8px 9px;border-radius:8px;background:rgba(255,255,255,.035);border:1px solid rgba(98,182,255,.08)}
.rts-rail i{grid-row:1/3;width:7px;height:7px;border-radius:50%;background:rgba(160,185,220,.35)}
.rts-rail b{display:block;height:4px;border-radius:3px;background:rgba(160,185,220,.22)}
.rts-rail b+b{width:62%;background:rgba(160,185,220,.12)}
.rts-rail .hot{background:rgba(47,123,255,.16);border-color:rgba(98,182,255,.5)}
.rts-rail .hot i{background:#62b6ff;box-shadow:0 0 8px #62b6ff}
.rts-rail .hot b{background:rgba(190,222,255,.6)}
.rts-foot{display:flex;gap:8px}
.rts-foot i{flex:1;height:6px;border-radius:4px;background:rgba(98,182,255,.1)}
.rts-foot i:first-child{background:rgba(98,182,255,.34)}
/* a narrow console: the map takes the whole width, the case rail goes */
@container (max-width:470px){.rts-main{grid-template-columns:minmax(0,1fr)}.rts-rail{display:none}.rts-dots{display:none}.rts-sub{margin-left:0;text-align:left;flex:1 1 100%}}
@keyframes rts-blink{0%{box-shadow:0 0 0 0 rgba(98,182,255,.7)}100%{box-shadow:0 0 0 10px rgba(98,182,255,0)}}
.fs-dyn .vx-rapidtrace .rts-ret,.fs-dyn .vx-rapidtrace .rts-tick,.fs-dyn .vx-rapidtrace .rts-alert{opacity:0}
.fs-dyn .vx-rapidtrace.is-on .rts-ret{animation:rts-lock .9s cubic-bezier(.2,.7,.2,1) .4s forwards,spin 18s linear 1.3s infinite}
.fs-dyn .vx-rapidtrace.is-on .rts-tick{animation:fs-in .4s ease 1s forwards}
.fs-dyn .vx-rapidtrace.is-on .rts-alert{animation:fs-in .5s ease 1.3s forwards}
@keyframes rts-lock{from{opacity:0;transform:scale(2.4)}to{opacity:1;transform:scale(1)}}

/* visual: a photo, easing in when it takes focus */
.fs-dyn .vx-photo.is-on .media{animation:fs-kb 9s ease-out both}
@keyframes fs-kb{from{transform:scale(1.12)}to{transform:scale(1)}}

/* ---------------- Statement: one line, BIG, over a low-key signal radiating OUT (never breathing) ---------------- */
.stm-sec{position:relative;overflow:hidden;isolation:isolate;padding:120px 0 128px;background:#faf9f6;color:var(--ink-d);border-top:1px solid rgba(10,18,34,.06)}
.stm-sec .eyebrow{color:var(--signal)}
.stm-h{margin:20px 0 0;max-width:none;font-size:clamp(36px,6.7vw,102px);line-height:1;letter-spacing:-.045em;font-weight:720;color:var(--ink-d)}
.stm-l{display:block;text-wrap:balance}  /* no one-word orphan at 390 (Knox #29459) */
.stm-blue{background:linear-gradient(90deg,#1b55d6,#2f7bff 45%,#5aa9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.stm-blue .proposed{color:transparent}
.stm .lead{margin-top:30px;color:var(--muted-d);font-size:clamp(18px,1.7vw,22px)}
.stm-rings{position:absolute;right:8%;top:58%;width:0;height:0;z-index:-1;pointer-events:none}
.stm-rings i{position:absolute;left:0;top:0;width:min(130vw,1500px);aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(47,123,255,.36);transform:translate(-50%,-50%) scale(.04);opacity:0;animation:stm-out 12s cubic-bezier(.22,.61,.36,1) infinite}
.stm-rings .r1{animation-delay:3s}.stm-rings .r2{animation-delay:6s}.stm-rings .r3{animation-delay:9s}
.stm-rings::before{content:"";position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:#2f7bff;box-shadow:0 0 22px 6px rgba(47,123,255,.5);opacity:.85}
@keyframes stm-out{0%{transform:translate(-50%,-50%) scale(.04);opacity:0}8%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
@media(max-width:700px){.stm-sec{padding:84px 0 92px}.stm-rings{right:12%;top:20%}}

/* ---------------- ProcessTeaser: the five step names + the driven map (home) ---------------- */
.pt-sec{border-top:1px solid rgba(10,18,34,.06)}
.pt{display:grid;gap:36px;padding-top:84px;padding-bottom:92px;align-items:center}
.pt-steps{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 30px;padding:0}
.pt-steps li{display:flex;align-items:center;gap:9px;padding:9px 16px 9px 10px;border-radius:999px;background:#eef3fb;color:var(--ink-d);font-weight:650;font-size:15px;line-height:1.25}
.pt-steps b{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#2f7bff;color:#fff;font-size:12.5px}
.pt-vis .fs-vis-in{aspect-ratio:4/3}
@media(min-width:960px){.pt{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;padding-top:112px;padding-bottom:120px}}

/* ---------------- reduced motion: the finished scenes, nothing moves ---------------- */
@media(prefers-reduced-motion:reduce){
  .dv-ring,.dv-glint,.stm-rings i,.dv-edge i{animation:none!important;opacity:0}
  .fs-sec *{animation:none!important;transition:none!important}
}

/* COMPARE (home.py render_compare; Home 'Beyond etch'): copy + the old way / the new way columns beside a two-beat film on paper.
   The beat labels sit on the film and follow the clip that plays (loop.js sets data-clip on the .loop); no JS / reduced motion
   = the first clip's still + its label. Phones: a tall 4:5 frame, each clip framed on its subject (LoopClip focus). */
.cmp{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.cmp-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.cmp-col{border-radius:16px;padding:20px 20px 18px;border:1px solid var(--line-d);background:#fff}
.cmp-col h3{font-size:17px;margin-bottom:6px}
.cmp-col ul{list-style:none;margin:0;padding:0}
.cmp-col li{position:relative;padding-left:24px;margin-top:9px;font-size:15px;line-height:1.5;color:var(--muted-d)}
.cmp-old h3{color:#5b6678}
.cmp-old li::before{content:"";position:absolute;left:3px;top:.72em;width:10px;height:2px;border-radius:2px;background:#a3adbd}
.cmp-new{border-color:rgba(47,123,255,.35);box-shadow:0 0 0 4px rgba(47,123,255,.06),0 24px 50px -32px rgba(20,60,140,.4)}
.cmp-new h3{color:var(--signal)}
.cmp-new li::before{content:"";position:absolute;left:2px;top:.38em;width:11px;height:6px;border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);transform:rotate(-45deg)}
.cmp-media .frame{aspect-ratio:16/10;border-radius:22px;border-color:var(--line-d);box-shadow:0 40px 80px -46px rgba(20,60,140,.45)}
.cmp-labels span{position:absolute;left:16px;top:16px;z-index:3;padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.02em;color:#fff;background:rgba(10,18,34,.72);border:1px solid rgba(255,255,255,.18);transition:opacity .5s ease}
.cmp-labels .l1{background:rgba(47,123,255,.92);border-color:rgba(255,255,255,.3);opacity:0}
.loop[data-clip="1"]~.cmp-labels .l0{opacity:0}
.loop[data-clip="1"]~.cmp-labels .l1{opacity:1}
@media(max-width:900px){.cmp{grid-template-columns:1fr;gap:34px}}
@media(max-width:700px){.cmp-media .frame{aspect-ratio:4/5}.cmp-cols{gap:10px}.cmp-col{padding:16px 14px 14px}.cmp-col li{font-size:14px;padding-left:20px}}
@media(max-height:500px) and (orientation:landscape){.cmp-media .frame{max-height:calc(100vh - 140px)}}  /* phone landscape: the whole film + its label fit under the nav */