/* ── beyond.css — "Beyond the app", in one row: the IoT sensor and the signature van ──
   Everything is scoped under .s7y-root. No plates, gradients or dot-grids (owner's brief): the section is
   one flat colour, the page ground, and the two objects float on it side by side with their callouts
   around them. The finished (fully visible) state is the plain CSS; motion only adds the idle loops
   (below, gated by html.fx-motion) and the scroll-linked arrival, which sections/beyond.js writes as
   inline transforms.                                                                                 */
.s7y-root {
  /* sizes for the wide row (≥1336px, where .s7-wrap has reached its 1240px cap); fixed, so the callouts keep ~168px */
  --dw: 168px;                                /* IoT device width */
  --vanw: 318px;                              /* van width */
  --arw: 34px;                                /* gap the arrow spans, right of the device */
  --g1: 12px;                                 /* gap left of the device */
  --tuck: 36px;                               /* how far the van slides under its top-left callout (the empty sky over its bonnet) */
  --gap: 36px;                                /* between the two scenes */
  background: var(--page);                    /* one flat solid colour, the same as the page: no panel */
}
@media (max-width: 1335px) { .s7y-root { --dw: 150px; --vanw: 290px; --arw: 30px; --g1: 10px; --tuck: 32px; --gap: 32px; } }
.s7y-root .s7y-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-3) var(--sp-7); margin-bottom: var(--s7-head-gap); }
.s7y-root .s7y-hl { display: grid; gap: var(--sp-3); }
.s7y-root .s7y-head .s7-lede { max-width: 34ch; }

/* ── the row: [IoT scene] [van scene]. The van gets a little more of it: it is the wider object ── */
.s7y-root .s7y-row { display: grid; grid-template-columns: minmax(0, 23fr) minmax(0, 27fr); gap: var(--sp-6) var(--gap); }
.s7y-root .s7y-scene { position: relative; isolation: isolate; min-width: 0; display: flex; flex-direction: column; padding-top: var(--sp-3); border-top: 1px solid rgba(0, 57, 108, .12); }

/* a scene's top bar: index · name · tag ......... link */
.s7y-root .s7y-bar { position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 36px; }
.s7y-root .s7y-idx { font: 600 12px/1 var(--mono); letter-spacing: .08em; color: var(--gold-ink); display: inline-flex; align-items: center; gap: 10px; }
.s7y-root .s7y-idx::after { content: ""; width: 18px; height: 1.5px; background: rgba(0, 57, 108, .22); border-radius: 2px; }
.s7y-root .s7y-name { margin: 0; font: 700 15.5px/1.2 var(--font); letter-spacing: -.005em; color: var(--navy); }
.s7y-root .s7y-tag { font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); background: var(--gold-30); border: 1px solid rgba(140, 94, 14, .22); padding: 5px 8px 4px; border-radius: 999px; }
.s7y-root .s7y-link {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 14px;
  font: 700 13.5px/1 var(--font); color: var(--navy); text-decoration: none; white-space: nowrap;
  border-radius: 999px; background: rgba(255, 255, 255, .7); border: 1px solid var(--line-navy);
  transition: background .25s var(--ease-std), border-color .25s var(--ease-std);
}
.s7y-root .s7y-link svg { width: 15px; height: 15px; transition: transform .35s var(--ease); }
.s7y-root .s7y-link:hover { background: #fff; border-color: rgba(0, 57, 108, .3); }
.s7y-root .s7y-link:hover svg { transform: translateX(3px); }

/* ── a scene's stage: [callout] [object] [callout], the callouts staggered around the object ── */
.s7y-root .s7y-grid { flex: 1; position: relative; display: grid; align-items: center; padding-top: clamp(14px, 2.4vh, 26px); }
@media (min-width: 1280px), (min-width: 600px) and (max-width: 879px) {   /* the side-by-side layouts: the van sits on the floor of the stage, so its bonnet stays clear of the top-left callout */
  .s7y-root .s7y-grid { min-height: calc(var(--vanw) * .566 + 96px); }
}
.s7y-root .s7y-iot .s7y-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.s7y-root .s7y-van .s7y-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.14fr); }
.s7y-root .s7y-obj { position: relative; }
.s7y-root .s7y-dev { width: var(--dw); margin: 0 var(--arw) 0 var(--g1); }
.s7y-root .s7y-veh { width: var(--vanw); margin: 0 clamp(8px, 1vw, 14px) 0 calc(-1 * var(--tuck)); align-self: end; }
.s7y-root .s7y-iot .s7y-l { align-self: start; }
.s7y-root .s7y-iot .s7y-r { align-self: center; margin-top: clamp(30px, 4vw, 60px); }
.s7y-root .s7y-van .s7y-l { align-self: start; }
.s7y-root .s7y-van .s7y-r { align-self: end; }
.s7y-root :is(.s7y-move, .s7y-pitch, .s7y-bob) { position: relative; }
.s7y-root .s7y-bob img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }

/* ── callouts: small white cards, mono label, short title, one line ── */
.s7y-root .s7y-call { position: relative; z-index: 2; min-width: 0; }
.s7y-root .s7y-card {
  position: relative; background: var(--card); border-radius: 16px; padding: 14px 15px 15px;
  border: 1px solid rgba(0, 57, 108, .07); box-shadow: var(--shadow-card);
}
.s7y-root .s7y-lbl { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.s7y-root .s7y-lbl::before { content: ""; width: 5px; height: 5px; border-radius: 1.5px; background: var(--gold); flex: none; }
.s7y-root .s7y-t { margin: 0 0 5px; font: 700 15px/1.25 var(--font); letter-spacing: -.01em; color: var(--navy); text-wrap: balance; }
.s7y-root .s7y-d { margin: 0; font: 500 13px/1.45 var(--font); color: var(--muted); text-wrap: pretty; }

/* IoT, left callout: a heartbeat line (the AC's health) */
.s7y-root .s7y-ecg { display: block; width: 100%; height: auto; aspect-ratio: 240 / 36; margin-top: 10px; overflow: visible; }
.s7y-root .s7y-ecg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.s7y-root .s7y-ecg .base { stroke: rgba(0, 57, 108, .16); stroke-width: 1.6; }
.s7y-root .s7y-ecg .run { stroke: var(--gold); stroke-width: 2.2; stroke-dasharray: 26 74; stroke-dashoffset: 84; }  /* rests on the first beat */

/* IoT, right callout: the arrow that points at the device */
.s7y-root .s7y-arrow { position: absolute; right: 100%; top: 50%; width: calc(var(--arw) - 8px); height: 14px; margin-top: -7px; color: var(--navy); pointer-events: none; }
.s7y-root .s7y-arrow .ln { position: absolute; left: 4px; right: 0; top: 6.25px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, var(--navy), rgba(0, 57, 108, .3)); transform-origin: 100% 50%; }
.s7y-root .s7y-arrow .hd { position: absolute; left: 0; top: 0; width: 14px; height: 14px; }
.s7y-root .s7y-arrow .dot { position: absolute; right: -4px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(0, 57, 108, .12); }

/* van, left callout: what is on board */
.s7y-root .s7y-kit { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.s7y-root .s7y-kit li { display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 8px 0 6px; border-radius: 8px; background: #F1F5FA; border: 1px solid rgba(0, 57, 108, .08); font: 600 12px/1 var(--font); color: var(--navy); white-space: nowrap; }
.s7y-root .s7y-kit .i2 { width: 14px; height: 14px; color: var(--navy); flex: none; }

/* van, right callout: warehouse → parts centres → van */
.s7y-root .s7y-route { position: relative; margin-top: 12px; }
.s7y-root .s7y-route ol { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.s7y-root .s7y-route li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font: 500 9.5px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.s7y-root .s7y-route .ib { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #F1F5FA; border: 1px solid rgba(0, 57, 108, .1); }
.s7y-root .s7y-route li:last-child .ib { background: var(--navy); border-color: var(--navy); }
.s7y-root .s7y-route li:last-child .i2 { color: #fff; }
.s7y-root .s7y-route .i2 { width: 17px; height: 17px; color: var(--navy); }
.s7y-root .s7y-route .trk { position: absolute; top: 16px; left: 16.67%; right: 16.67%; height: 0; border-top: 1.5px dashed rgba(0, 57, 108, .28); }
.s7y-root .s7y-route .run { position: absolute; left: 0; top: -1px; width: 100%; height: 0; opacity: 0; }
.s7y-root .s7y-route .run::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(247, 183, 68, .28); }

/* ── the IoT device: its own gold light, sensing rings, floor shadow (the object's, not a backdrop) ── */
.s7y-root .s7y-dev::before {
  content: ""; position: absolute; left: 58%; top: 50%; width: 160%; aspect-ratio: 1; translate: -50% -50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(253, 233, 199, .9), rgba(253, 233, 199, .4) 45%, rgba(253, 233, 199, 0) 74%);
}
.s7y-root .s7y-rings { position: absolute; left: 64%; top: 49%; width: 146%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.s7y-root .s7y-rings i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(214, 150, 40, .5); }
.s7y-root .s7y-rings i:nth-child(1) { transform: scale(.56); opacity: .9; }       /* finished state: a still sonar */
.s7y-root .s7y-rings i:nth-child(2) { transform: scale(.76); opacity: .55; }
.s7y-root .s7y-rings i:nth-child(3) { transform: scale(.96); opacity: .25; }
.s7y-root .s7y-dev .s7y-shadow {
  position: absolute; left: 14%; right: 10%; bottom: -13%; height: 9%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 30, 60, .3), rgba(0, 30, 60, 0)); transform-origin: 50% 50%;
}
.s7y-root .s7y-dev .s7y-bob img { filter: drop-shadow(0 14px 20px rgba(0, 40, 80, .16)); }

/* ── the van: ground shadow (wheel contacts + soft body shadow), speed lines ── */
.s7y-root .s7y-veh .s7y-shadow {            /* a flat ellipse laid along the line through both wheel contacts (front 31%/100%, rear 86%/90%) */
  position: absolute; left: 8%; width: 100%; top: 88%; height: 14%; pointer-events: none; rotate: -5.4deg;
  background:
    radial-gradient(8.5% 26% at 22.5% 50%, rgba(0, 16, 32, .55), rgba(0, 16, 32, 0)),
    radial-gradient(6.5% 20% at 77.5% 47%, rgba(0, 16, 32, .45), rgba(0, 16, 32, 0)),
    radial-gradient(closest-side, rgba(0, 30, 60, .28), rgba(0, 30, 60, .12) 62%, rgba(0, 30, 60, 0));
}
.s7y-root .s7y-speed { position: absolute; left: 97%; top: 36%; width: 18%; height: 36%; pointer-events: none; opacity: 0; }
.s7y-root .s7y-speed i { position: absolute; left: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(0, 57, 108, .45), rgba(0, 57, 108, 0)); }
.s7y-root .s7y-speed i:nth-child(1) { top: 0; width: 70%; }
.s7y-root .s7y-speed i:nth-child(2) { top: 42%; width: 100%; left: 6%; }
.s7y-root .s7y-speed i:nth-child(3) { top: 84%; width: 55%; }
.s7y-root .s7y-pitch { transform-origin: 58% 92%; }

/* ── motion: idle loops (paused while the scene is off screen or the tab is hidden; beyond.js toggles .is-live) ──
   Round two (owner: "bounce slightly more"): about double the first amplitudes, still one slow
   sine each: the sensor floats 20px (was 10), the van 11px (was 5), the callouts drift 7px (was 4),
   and each floor shadow shrinks and fades further as its object rises, so the lift reads clearly. */
@keyframes s7y-bob-iot { 0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); } 50% { transform: translate3d(0, -20px, 0) rotate(1deg); } }
@keyframes s7y-shadow-iot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.66); opacity: .38; } }
@keyframes s7y-bob-van { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 50% { transform: translate3d(0, -11px, 0) rotate(-.7deg); } }
@keyframes s7y-shadow-van { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .9 .74; opacity: .5; } }
@keyframes s7y-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }       /* the callouts drift with their object */
@keyframes s7y-ring { 0% { transform: scale(.4); opacity: 0; } 14% { opacity: .95; } 100% { transform: scale(1.02); opacity: 0; } }
@keyframes s7y-ecg { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes s7y-run { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }

html.fx-motion .s7y-root .s7y-dev .s7y-bob { animation: s7y-bob-iot 3.8s ease-in-out infinite; }
html.fx-motion .s7y-root .s7y-dev .s7y-shadow { animation: s7y-shadow-iot 3.8s ease-in-out infinite; }
html.fx-motion .s7y-root .s7y-veh .s7y-bob { animation: s7y-bob-van 3.2s ease-in-out infinite; transform-origin: 58% 92%; }
html.fx-motion .s7y-root .s7y-veh .s7y-shadow { animation: s7y-shadow-van 3.2s ease-in-out infinite; }
html.fx-motion .s7y-root .s7y-card { animation: s7y-float 5.6s ease-in-out infinite; }
html.fx-motion .s7y-root .s7y-r .s7y-card { animation-duration: 6.4s; animation-delay: -2.2s; }
html.fx-motion .s7y-root .s7y-van .s7y-l .s7y-card { animation-delay: -3.4s; }
html.fx-motion .s7y-root .s7y-van .s7y-r .s7y-card { animation-delay: -.9s; }
html.fx-motion .s7y-root .s7y-rings i { opacity: 0; animation: s7y-ring 4.2s cubic-bezier(.2, .6, .35, 1) infinite; }
html.fx-motion .s7y-root .s7y-rings i:nth-child(2) { animation-delay: -1.4s; }
html.fx-motion .s7y-root .s7y-rings i:nth-child(3) { animation-delay: -2.8s; }
html.fx-motion .s7y-root .s7y-ecg .run { stroke-dasharray: 18 82; animation: s7y-ecg 2.6s linear infinite; }
html.fx-motion .s7y-root .s7y-route .run { animation: s7y-run 3.2s var(--ease-std) infinite; }
/* paused unless the scene is on screen. This rule must out-rank the `animation` shorthands above
   (e.g. `.s7y-van .s7y-r .s7y-card`), which reset animation-play-state to running; the .s7y-scene step does that. */
html.fx-motion .s7y-root .s7y-scene :is(.s7y-bob, .s7y-shadow, .s7y-card, .s7y-rings i, .s7y-ecg .run, .s7y-route .run) { animation-play-state: paused; }
html.fx-motion .s7y-root .s7y-scene.is-live :is(.s7y-bob, .s7y-shadow, .s7y-card, .s7y-rings i, .s7y-ecg .run, .s7y-route .run) { animation-play-state: running; }
html.fx-motion .s7y-root :is(.s7y-move, .s7y-call) { will-change: transform, opacity; }
/* calm (app/fx.js): the sensor, the van and their callouts hold still once in place (beyond.js only fades them in);
   the rings, the ECG line and the dot along the route keep going */
html.fx-calm .s7y-root .s7y-scene :is(.s7y-bob, .s7y-shadow, .s7y-card) { animation: none; }

/* ── widths ──
   ≥1280: the two scenes side by side, each [callout] [object] [callout].
   880–1279 and <600: side by side (or, on phones, one under the other), each with its object on top
   and the two callouts under it. 600–879: the scenes stack and each has the room for the callouts
   either side again.                                                                                */
@media (min-width: 880px) and (max-width: 1279px), (max-width: 599px) {
  .s7y-root .s7y-iot .s7y-grid, .s7y-root .s7y-van .s7y-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-content: start; }
  .s7y-root .s7y-obj { grid-column: 1 / -1; justify-self: center; order: -1; }
  .s7y-root .s7y-dev { width: clamp(140px, 16vw, 180px); margin: 12px 0 36px; }
  .s7y-root .s7y-veh { width: min(88%, 360px); margin: 10px 0 24px; align-self: auto; }
  .s7y-root .s7y-iot .s7y-r { margin-top: 0; }
  .s7y-root .s7y-scene .s7y-call { align-self: start; }   /* each callout its own height: they float, they are not a table */
  /* the right callout sits below the device's right half, so its arrow turns to point straight up */
  .s7y-root .s7y-arrow { right: auto; left: 30px; top: auto; bottom: 100%; width: 14px; height: 32px; margin: 0 0 3px; }
  .s7y-root .s7y-arrow .ln { left: 6.25px; right: auto; top: 4px; bottom: 0; width: 1.5px; height: auto; background: linear-gradient(0deg, rgba(0, 57, 108, .3), var(--navy)); transform-origin: 50% 100%; }
  .s7y-root .s7y-arrow .hd { transform: rotate(90deg); }
  .s7y-root .s7y-arrow .dot { right: auto; left: 3px; top: auto; bottom: -4px; }
}
@media (min-width: 880px) and (max-width: 1279px) {   /* the two scenes share their rows, so the objects and the callouts line up */
  .s7y-root { --gap: clamp(24px, 3vw, 36px); }
  .s7y-root .s7y-idx::after { display: none; }          /* keeps each bar on one line down to 880px */
  .s7y-root .s7y-row { grid-template-rows: auto auto auto; row-gap: 0; }
  .s7y-root .s7y-scene { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
  .s7y-root .s7y-grid { grid-row: 2 / span 2; grid-template-rows: subgrid; row-gap: 12px; }
  .s7y-root .s7y-obj { align-self: center; }
}
@media (max-width: 879px) {
  .s7y-root .s7y-row { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 600px) and (max-width: 879px) {
  .s7y-root { --dw: 180px; --vanw: min(46vw, 340px); --arw: 34px; --g1: 10px; }
  .s7y-root .s7y-call { max-width: 250px; }
  .s7y-root .s7y-l { justify-self: end; }
}
/* phones: the scenes one under the other, each compact */
@media (max-width: 599px) {
  .s7y-root .s7y-head { gap: var(--sp-3); }
  .s7y-root .s7y-row { gap: var(--sp-6); }
  .s7y-root .s7y-bar { gap: 8px 10px; }
  .s7y-root .s7y-idx::after { display: none; }
  .s7y-root .s7y-link { height: 32px; padding: 0 10px 0 12px; gap: 6px; font-size: 12.5px; }
  .s7y-root .s7y-dev { width: min(40vw, 150px); margin: 10px 0 32px; }
  .s7y-root .s7y-veh { width: min(88%, 310px); margin: 6px 0 20px; }
  .s7y-root .s7y-card { padding: 12px 13px 13px; }
  .s7y-root .s7y-van .s7y-grid { grid-template-columns: minmax(0, 1fr); }   /* the route needs the full width */
}
/* very narrow phones (≤359px): the IoT callouts one under the other too; the arrow would point at the other callout */
@media (max-width: 359px) {
  .s7y-root .s7y-iot .s7y-grid { grid-template-columns: minmax(0, 1fr); }
  .s7y-root .s7y-arrow { display: none; }
}