/* Homepage-only styles (index.html) */
.hero h1 em{color:#7BE8C6} /* the two-tone headline is the home page's alone */


/* Hardware marquee */
.works{border-bottom:1px solid var(--line);overflow:hidden}
.works .wrap{display:flex;align-items:center;gap:32px;padding-block:22px}
.works small{flex:none;font:500 13px/1.3 var(--body);color:var(--fg2);max-width:15ch}
.marquee{flex:1;min-width:0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee ul{display:flex;gap:56px;list-style:none;margin:0;padding:0;width:max-content;animation:slide 38s linear infinite}
.marquee li{font:600 22px/1 var(--display);letter-spacing:-.02em;color:var(--fg2);white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}
@media (max-width:600px){.works small{display:none}}

/* How it works: sticky verb list + media column */
.how{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.how ol{position:sticky;top:120px;list-style:none;margin:0;padding:0;display:grid;gap:6px}
.how ol a{display:flex;align-items:baseline;gap:14px;text-decoration:none;font:600 clamp(28px,3.4vw,44px)/1.15 var(--display);letter-spacing:-.03em;color:var(--line);transition:color .3s}
.how ol a.on{color:var(--fg)}
.steps{display:grid;gap:clamp(64px,8vw,112px)}
.step{display:grid;gap:22px;scroll-margin-top:110px}
.step h3{font-size:clamp(24px,2.4vw,32px);line-height:1.15}
.step p{color:var(--fg2);font-size:18px;max-width:50ch}
@media (max-width:900px){.how{grid-template-columns:1fr}.how ol{display:none}}

.checks{border:1px solid var(--app-line);border-radius:10px;overflow:hidden}
.check{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--app-line);background:var(--app-raised)}
.check:last-child{border-bottom:0}
.check b{font-size:14px;font-weight:600}
.check span.d{display:block;font:400 13px/1.4 var(--body);color:var(--app-fg2)}
.status{font-size:12px;font-weight:600;min-width:84px;text-align:center;padding:5px 8px;border-radius:999px;color:var(--app-fg2);background:rgba(169,183,195,.12);transition:background-color .25s,color .25s}
.status.ready{color:var(--app-ok);background:rgba(44,194,149,.14)}
.go{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:10px;background:#168067;color:#fff}
.go.wait{background:var(--app-raised);color:var(--app-fg2)}
.go button{min-height:36px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:transparent;color:inherit;font:600 13px/1 var(--body);cursor:pointer}
.go button:hover{background:rgba(255,255,255,.12)}
.go button:disabled{opacity:.5;cursor:default}

.fly-media{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px;align-items:stretch}
.fly-view{width:100%;background:var(--app-bg);border:1px solid var(--app-line);border-radius:var(--r);overflow:hidden;aspect-ratio:9/14}
.fly-view>*{display:block;width:100%;height:100%;object-fit:contain}
.fly-view>[hidden]{display:none}
/* Fly step pins mid-screen while scrolling steps through the four inputs (home.js), then lets go */
@media (prefers-reduced-motion:no-preference){
  .fly-pin{height:calc(100vh + 120vh)} /* the pinned frame + 30vh of scroll per input */
  .fly-pin>.fly-media{position:sticky;top:0;height:100vh;padding-top:64px;align-content:center}
  .fly-pin .fly-view{max-height:calc(100vh - 120px);align-self:center}
}
.inputs{display:grid;gap:10px;align-content:center}
.input{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:grid;gap:2px;background:var(--surface);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .2s}
.input:hover{border-color:var(--fg2)}
.input b{font-size:16px}
.input span{font:400 14px/1.4 var(--body);color:var(--fg2)}
.input[aria-pressed="true"]{border-color:var(--accent)}
.input[aria-pressed="true"] span{color:var(--accent)}

/* Use cases: one tall tile + two stacked */
.cases{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;gap:24px}
.case{display:grid;gap:14px;align-content:start;text-decoration:none}
.case.big{grid-row:span 2}
.case .m{position:relative;overflow:hidden;border-radius:var(--r);aspect-ratio:16/10}
.case.big .m{aspect-ratio:auto;height:100%;min-height:420px}
.case .m video,.case .m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.16,1,.3,1)}
.case:hover .m video,.case:hover .m img{transform:scale(1.04)}
.case.big{grid-template-rows:1fr auto}
.case h3{font-size:clamp(22px,2vw,28px);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.case p{color:var(--fg2);max-width:46ch}
/* Each tile reads as a link: the title turns green on hover, and the round arrow on the picture
   turns from a diagonal to straight ahead, fills green and nudges forward */
.case h3{transition:color .25s}
.case:hover h3,.case:focus-visible h3{color:var(--accent)}
.case .go{position:absolute;right:16px;bottom:16px;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:rgba(243,248,246,.92);color:var(--fg);box-shadow:0 8px 20px -8px rgba(4,20,16,.5);transition:background-color .3s,color .3s}
.case .go svg{width:20px;height:20px;transform:rotate(-45deg);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.case:hover .go,.case:focus-visible .go{background:var(--accent);color:var(--on-accent)}
.case:hover .go svg,.case:focus-visible .go svg{transform:rotate(0);animation:nudge 1.1s cubic-bezier(.45,0,.25,1) .35s infinite}
@keyframes nudge{0%,100%{translate:0 0}50%{translate:4px 0}}
@media (prefers-reduced-motion:reduce){.case .go svg{animation:none!important}}
@media (max-width:860px){.cases{grid-template-columns:1fr}.case.big{grid-row:auto}.case.big .m{min-height:0;aspect-ratio:4/3}}

/* Fleet: full-bleed video band with a panel on top */
.band{position:relative;color:var(--media-fg);overflow:hidden;isolation:isolate;padding-block:clamp(96px,12vw,168px)}
.band video,.band .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,20,16,.82) 0%,rgba(4,20,16,.55) 55%,rgba(4,20,16,.25) 100%)}
.band .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px;align-items:center}
.band h2{font-size:clamp(34px,4.4vw,58px);line-height:1.04}
.band .copy{display:grid;gap:18px}
.band .copy p{color:var(--media-fg2);font-size:18px;max-width:42ch}
.band .link{color:#7BE8C6}
.fleet-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--app-line)}
.fleet-row:last-child{border-bottom:0}
.fleet-row b{font-size:14px}
.fleet-row span.d{display:block;font:400 13px/1.4 var(--body);color:var(--app-fg2)}
@media (max-width:860px){.band .wrap{grid-template-columns:1fr}}

/* OEM: wide media left, short copy right */
.oem{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.oem .m{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.oem .m video,.oem .m img,.oem .m svg{display:block;width:100%;height:100%;object-fit:cover}
.oem .copy{display:grid;gap:20px}
.oem h2{font-size:clamp(32px,3.6vw,48px);line-height:1.06}
.oem .copy>p{color:var(--fg2);font-size:18px}
.oem dl{margin:0;display:grid;gap:0}
.oem dl div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line);font-size:15px}
.oem dd{margin:0;color:var(--fg2);text-align:right}
@media (max-width:860px){.oem{grid-template-columns:1fr;gap:32px}}

/* Devices: the one inverse section. Deep green ground, lighter cards, device photo glowing on it */
.devices{position:relative;margin:0 auto clamp(40px,5vw,64px);max-width:1180px}
.devices::before{content:"";position:absolute;inset:12% 6% 0;background:radial-gradient(ellipse at 50% 60%,rgba(95,224,184,.22),transparent 65%);filter:blur(30px);z-index:0}
.devices img{position:relative;z-index:1;width:100%;height:auto}
.devices.rv{transform:translateY(calc((1 - var(--r,1)) * 56px)) scale(calc(.94 + .06 * var(--r,1)))}
.dev-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dev-cards div{background:var(--inv-card);border:1px solid var(--inv-line);border-radius:var(--r);padding:22px 22px 24px;display:grid;gap:8px;align-content:start}
.dev-cards b{font:600 18px/1.2 var(--display);letter-spacing:-.015em}
.dev-cards span{font-size:15px;color:var(--inv-fg2)}
.dev-cards small{font:500 14px/1 var(--body);color:var(--inv-accent)}
@media (max-width:960px){.dev-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.dev-cards{grid-template-columns:1fr}}

/* Security: two cards meet in the middle, then part as the highlight card grows between them.
   --p (0..1) is scrubbed by the scroll: 0 as the row enters, 1 once its middle reaches mid-screen. */
.trio{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch;--p:1}
.trio .l{grid-column:1}.trio .r{grid-column:3}.trio .t1{grid-row:1}.trio .t2{grid-row:2}.trio .hi{grid-column:2;grid-row:1 / span 2}
.tcard{border-radius:var(--r);padding:28px 28px 30px;display:grid;gap:12px;align-content:start}
.tcard svg{width:30px;height:30px}
.tcard h3{font-size:22px;letter-spacing:-.02em}
.tcard p{font-size:16px}
.tcard.side{background:var(--surface);border:1px solid var(--line);position:relative;z-index:2}
.tcard.side svg{color:var(--accent)}
.tcard.side p{color:var(--fg2)}
.tcard.hi{background:var(--accent);color:var(--on-accent);z-index:1;box-shadow:0 30px 60px -30px rgba(4,20,16,.5)}
.tcard.hi p{opacity:.86}
.tcard.hi{padding:36px 34px;gap:16px;grid-template-rows:auto auto auto 1fr}
.tcard.hi svg{width:40px;height:40px}
.tcard.hi h3{font-size:clamp(26px,2.4vw,32px);line-height:1.1}
.cipher{align-self:end;margin:8px 0 0;padding:16px 18px;border-radius:12px;background:rgba(3,20,15,.28);font:500 13px/1.7 var(--mono);white-space:pre;overflow:hidden;color:inherit}
.cipher.locked{color:color-mix(in srgb,currentColor 70%,transparent)}
@media (min-width:861px) and (prefers-reduced-motion:no-preference){
  .trio .tcard{will-change:transform}
  .trio .l{transform:translateX(calc((1 - var(--p)) * (50% + 12px)))}
  .trio .r{transform:translateX(calc((var(--p) - 1) * (50% + 12px)))}
  .trio .hi{opacity:var(--p);transform:scale(calc(.8 + .2 * var(--p)))}
}
@media (max-width:860px){.trio{grid-template-columns:1fr}.trio .l,.trio .r,.trio .hi,.trio .t1,.trio .t2{grid-column:1;grid-row:auto}}
.tcard p b{color:var(--accent)}