/* One continuous curve, a quieter past, and hardware that stays in motion. */
.brand .brand-symbol{overflow:visible}
.hero-baseline{grid-template-columns:1fr auto}
.hero-baseline>a{justify-self:end}

:is(.home-page,.section-page) .why-now-row{grid-template-columns:minmax(180px,.62fr) minmax(0,1.5fr);grid-template-areas:"problem solution" "problem sketch";gap:28px 7%;padding:52px 0 48px;align-items:start}
:is(.home-page,.section-page) .why-problem{padding:24px;background:#eeefe9;border-top:1px solid #c6cac1;position:relative}
:is(.home-page,.section-page) .why-problem .eyebrow{color:#747c70;letter-spacing:.12em;margin-bottom:22px;font-size:10px}
:is(.home-page,.section-page) .why-problem h3{font-size:clamp(19px,1.85vw,25px);font-weight:400;line-height:1.18;letter-spacing:-.035em;color:#62695e;margin-bottom:16px}
:is(.home-page,.section-page) .why-problem p:not(.eyebrow){font-size:14px;line-height:1.65;color:#71796d}
:is(.home-page,.section-page) .why-problem:after{content:"↗";display:block;margin-top:30px;color:#7c8477;font-size:26px;line-height:1}
:is(.home-page,.section-page) .why-solution{border:0;padding:0;max-width:630px}
:is(.home-page,.section-page) .why-solution .eyebrow{display:flex;align-items:center;gap:9px;margin-bottom:18px;font-size:10px;letter-spacing:.12em;font-weight:600;color:#151913}
:is(.home-page,.section-page) .why-solution .eyebrow:before{content:"";width:6px;height:6px;background:#151913;border-radius:50%}
:is(.home-page,.section-page) .why-solution h3{font-size:clamp(34px,4.1vw,62px);font-weight:700;line-height:.98;letter-spacing:-.055em;margin-bottom:22px;max-width:630px}
:is(.home-page,.section-page) .why-solution p:not(.eyebrow){font-size:16px;line-height:1.65;color:#454d40;max-width:560px}
:is(.home-page,.section-page) .why-visual{align-self:start;width:100%;max-width:670px}
:is(.home-page,.section-page) .why-visual figcaption{font-size:9px;letter-spacing:.12em;margin-top:8px;color:#737c6e}
:is(.home-page,.section-page) .problem-products{gap:4px;margin:25px -14px 0}
:is(.home-page,.section-page) .problem-products figcaption{font-size:7px;letter-spacing:.01em;color:#747c70}

/* Native docking scenes share socket geometry; only their vertical guides move. */
.hardware-scene{position:relative;width:100%;aspect-ratio:4/3;isolation:isolate}
.hardware-scene img{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hardware-scene .docking-video{display:block;width:100%;height:100%;aspect-ratio:4/3;object-fit:contain;background:transparent}
.sync-assembly{position:absolute;inset:0;animation:system-drift 9s ease-in-out infinite}
.sync-signals{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.signal-track{stroke:#a5afa0;stroke-width:1.4}
.signal-flow{stroke:#46593f;stroke-width:3;stroke-dasharray:9 91;animation:signal-route 4s linear infinite}
.signal-nodes{fill:var(--paper);stroke:#65795a;stroke-width:2;animation:connection-pulse 4s ease-in-out infinite}

/* The Building Blocks catalogue stays still for easy inspection. */
.component-stage{position:relative;aspect-ratio:4/3;isolation:isolate}
#system .card:before{display:none}

/* S1 previews a looping inspection route over a quiet field plan. */
.product-schematic .s1-drawing{display:block;width:100%;height:100%;aspect-ratio:auto;background:transparent}
.s1-stage,.platform-products .product-schematic .s1-drawing{background:#fff}
.s1-workflow .is-active{color:#1d4ed8;border-color:#2563eb}
.s1-status{color:#1e40af;background:#eff6ff;border-color:#bfdbfe}
.s1-status i{background:#2563eb}
.s1-connections{color:#475569}
.s1-connections .s1-legend-route:before{background:#2563eb}
.s1-connections .s1-legend-aircraft:before{background:#ff982d}
.s1-connections .s1-legend-home:before{background:#0f766e}
.flight-route-flow{animation:flight-route-flow 2s linear infinite}
@keyframes flight-route-flow{to{stroke-dashoffset:-32}}
.s1-status i{animation:connection-pulse 3s ease-in-out infinite}

@keyframes system-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-2%)}}
@keyframes signal-route{to{stroke-dashoffset:-100}}
@keyframes connection-pulse{0%,100%{opacity:.45}50%{opacity:1}}

@media(min-width:1280px){
 :is(.home-page,.section-page) .why-now-row{grid-template-columns:minmax(0,.7fr) minmax(0,1fr) minmax(0,1.4fr);grid-template-areas:"problem solution sketch";gap:4%;padding:64px 0}
 :is(.home-page,.section-page) .why-solution h3{font-size:clamp(36px,3.2vw,50px)}
 :is(.home-page,.section-page) .why-visual{align-self:center}
 :is(.home-page,.section-page) .why-problem{padding:22px}
}
@media(max-width:760px){
 .hero-baseline{grid-template-columns:1fr auto}
 .hero-baseline>span{display:block;font-size:8px;letter-spacing:.06em}
 .hero-baseline>a{font-size:10px;gap:10px}
 :is(.home-page,.section-page) .why-now-row{grid-template-columns:1fr;grid-template-areas:"problem" "solution" "sketch";gap:30px;padding:32px 0 36px}
 :is(.home-page,.section-page) .why-problem{padding:20px 22px}
 :is(.home-page,.section-page) .why-problem .eyebrow{margin-bottom:12px;font-size:9px}
 :is(.home-page,.section-page) .why-problem h3{font-size:22px;max-width:460px;margin-bottom:12px}
 :is(.home-page,.section-page) .why-problem p:not(.eyebrow){font-size:14px;max-width:540px}
 :is(.home-page,.section-page) .why-problem:after{content:"↓";position:absolute;right:20px;top:18px;font-size:18px;margin:0}
 :is(.home-page,.section-page) .why-solution .eyebrow{font-size:9px;margin-bottom:16px}
 :is(.home-page,.section-page) .why-solution h3{font-size:clamp(34px,8.7vw,54px);max-width:530px;margin-bottom:18px}
 :is(.home-page,.section-page) .why-solution p:not(.eyebrow){font-size:15px;max-width:540px}
 :is(.home-page,.section-page) .why-visual{max-width:600px;justify-self:center;margin-top:-6px}
 :is(.home-page,.section-page) .problem-products{max-width:330px;margin:18px 0 0;gap:18px}
 :is(.home-page,.section-page) .problem-products figcaption{font-size:8px}
}