/* ============================================================
   RAYBO — shared stylesheet
   Palette derived from the product: white body, sodium park
   lighting, blue display glow.
   ============================================================ */

:root{
  --void:#0B0C0E;
  --shell:#141619;
  --shell-2:#1C1F23;
  --chalk:#F5F3F0;
  --mute:#8A9099;
  --dim:#5A6068;
  --sodium:#FF9E2C;
  --display:#4DA6FF;
  --line:rgba(245,243,240,.09);
  --line-2:rgba(245,243,240,.18);
  --pad:clamp(1.5rem,5vw,7rem);
  --gut:clamp(3.5rem,9vw,10rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--void);
  color:var(--chalk);
  font-family:'Barlow',system-ui,sans-serif;
  font-size:clamp(1rem,1.05vw,1.0625rem);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--sodium);color:var(--void)}
:focus-visible{outline:2px solid var(--sodium);outline-offset:4px}

/* ---------- type ---------- */
.d1,.d2,.d3{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  letter-spacing:-.015em;
  line-height:.92;
  text-transform:uppercase;
}
.d1{font-size:clamp(3.4rem,10.5vw,10rem)}
.d2{font-size:clamp(2.6rem,6.6vw,6rem)}
.d3{font-size:clamp(1.9rem,3.6vw,3.2rem)}
h3{font-size:clamp(1.1rem,1.5vw,1.35rem);font-weight:600;letter-spacing:-.01em;line-height:1.3}
.lede{font-size:clamp(1.05rem,1.45vw,1.3rem);line-height:1.6;color:var(--mute);max-width:56ch}
.lede strong{color:var(--chalk);font-weight:600}
p{max-width:62ch;color:var(--mute)}
p strong{color:var(--chalk);font-weight:600}
.tag{
  font-family:'JetBrains Mono',monospace;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sodium);
}
.tag.b{color:var(--display)}
.tag.m{color:var(--dim)}
.mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
section{position:relative;padding:var(--gut) var(--pad)}
.wrap{max-width:1440px;margin:0 auto}
.bleed{padding-left:0;padding-right:0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:center}
.split.wide-l{grid-template-columns:1.15fr .85fr}
.split.wide-r{grid-template-columns:.85fr 1.15fr}
.head{max-width:64ch;margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.head .tag{display:block;margin-bottom:1.1rem}
.head .lede{margin-top:1.5rem}
.rule{height:1px;background:var(--line);border:0}

/* ---------- asset placeholders ---------- */
.asset{
  position:relative;
  background:
    repeating-linear-gradient(45deg,rgba(245,243,240,.014) 0 2px,transparent 2px 9px),
    var(--shell);
  border:1px solid var(--line);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  min-height:180px;
}
.asset::before,.asset::after{
  content:'';position:absolute;width:22px;height:22px;
  border:1.5px solid var(--sodium);opacity:.5;pointer-events:none;z-index:2;
}
.asset::before{top:14px;left:14px;border-right:0;border-bottom:0}
.asset::after{bottom:14px;right:14px;border-left:0;border-top:0}
.asset > .slug{
  font-family:'JetBrains Mono',monospace;
  font-size:.7rem;line-height:1.9;letter-spacing:.06em;
  color:var(--dim);text-align:center;padding:2rem;z-index:1;
}
.asset > .slug b{display:block;color:var(--sodium);font-weight:400;margin-bottom:.35rem}
.asset img,.asset video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:3;
}
.asset.r43{aspect-ratio:4/3}
.asset.r11{aspect-ratio:1/1}
.asset.r169{aspect-ratio:16/9}
.asset.r34{aspect-ratio:3/4}
.asset.tall{aspect-ratio:3/4}
@media(max-width:760px){.asset.tall{aspect-ratio:4/3}}

/* ---------- nav ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem var(--pad);
  transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
header.stuck{
  background:rgba(11,12,14,.86);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.mark{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:1.5rem;letter-spacing:.02em;text-transform:uppercase;line-height:1;
}
.mark i{color:var(--sodium);font-style:normal}
nav{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.4rem)}
nav a{
  font-size:.82rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mute);transition:color .2s;
}
nav a:hover,nav a.on{color:var(--chalk)}
nav a.cta{
  color:var(--void);background:var(--chalk);
  padding:.62rem 1.25rem;font-weight:600;
  transition:background .2s,transform .2s;
}
nav a.cta:hover{background:var(--sodium)}
#burger{display:none;background:0;border:0;color:var(--chalk);cursor:pointer;padding:.4rem;width:38px;height:38px}
#burger span{display:block;height:1.5px;background:currentColor;margin:5px 0;transition:transform .28s,opacity .2s}
#burger.x span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
#burger.x span:nth-child(2){opacity:0}
#burger.x span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media(max-width:860px){
  #burger{display:block}
  nav{
    position:fixed;inset:64px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(11,12,14,.97);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--line);
    padding:1rem var(--pad) 2rem;
    transform:translateY(-130%);transition:transform .38s cubic-bezier(.3,.8,.3,1);
  }
  nav.open{transform:none}
  nav a{padding:1rem 0;border-bottom:1px solid var(--line);font-size:1rem}
  nav a.cta{text-align:center;margin-top:1.2rem;border:0;padding:1rem}
}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;padding:0;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;overflow:hidden;
}
.hero .bg{position:absolute;inset:0;z-index:0}
.hero .bg .asset{height:100%;width:100%;border:0;min-height:0}
.hero .bg::after{
  content:'';position:absolute;inset:0;z-index:4;
  background:
    linear-gradient(to top,var(--void) 2%,rgba(11,12,14,.55) 38%,rgba(11,12,14,.25) 70%),
    linear-gradient(to right,rgba(11,12,14,.8),transparent 62%);
}
.hero .inner{position:relative;z-index:5;padding:0 var(--pad) clamp(2.5rem,5vw,4.5rem)}
.hero .d1{margin:1.4rem 0 1.6rem;max-width:15ch}
.hero .lede{max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.4rem;align-items:center}
.btn{
  display:inline-block;padding:1rem 2.2rem;
  font-size:.84rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--chalk);color:var(--void);
  border:1px solid var(--chalk);
  transition:background .22s,color .22s,border-color .22s;
}
.btn:hover{background:var(--sodium);border-color:var(--sodium)}
.btn.ghost{background:0;color:var(--chalk);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--chalk);color:var(--void);border-color:var(--chalk)}

/* telemetry strip */
.telem{
  position:relative;z-index:5;
  display:flex;flex-wrap:wrap;gap:0;
  border-top:1px solid var(--line);
  background:rgba(11,12,14,.6);backdrop-filter:blur(8px);
}
.telem div{
  flex:1 1 auto;min-width:132px;
  padding:.95rem var(--pad) 1.05rem;
  border-right:1px solid var(--line);
}
.telem div:last-child{border-right:0}
.telem span{display:block;font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.telem b{display:block;font-family:'JetBrains Mono',monospace;font-size:.92rem;font-weight:400;color:var(--chalk);margin-top:.3rem}
.telem b.a{color:var(--sodium)}
.telem b.d{color:var(--display)}
@media(max-width:860px){.telem div{padding-left:var(--pad);padding-right:1rem;min-width:50%;flex:1 1 50%}
  .telem div:nth-child(2n){border-right:0}
  .telem div:nth-child(-n+2){border-bottom:1px solid var(--line)}}

/* ---------- badge ---------- */
.badge{
  display:inline-flex;align-items:center;gap:.6rem;
  border:1px solid var(--line-2);padding:.42rem .9rem;
  font-family:'JetBrains Mono',monospace;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}
.badge i{width:6px;height:6px;background:var(--sodium);border-radius:50%;font-style:normal;flex:none}
.badge.live i{background:var(--display)}

/* ---------- spec readout ---------- */
.spec{width:100%;border-collapse:collapse;font-family:'JetBrains Mono',monospace;font-size:.82rem}
.spec tr{border-bottom:1px solid var(--line)}
.spec tr:first-child{border-top:1px solid var(--line-2)}
.spec td{padding:.85rem 0;vertical-align:top}
.spec td:first-child{color:var(--dim);letter-spacing:.06em;text-transform:uppercase;font-size:.68rem;width:42%;padding-right:1rem}
.spec td:last-child{color:var(--chalk);text-align:right}

/* ---------- capability rows ---------- */
.cap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,6rem);align-items:center;margin-bottom:var(--gut)}
.cap:last-child{margin-bottom:0}
.cap:nth-child(even) .cap-media{order:2}
@media(max-width:860px){
  .cap{grid-template-columns:1fr;gap:2rem}
  .cap:nth-child(even) .cap-media{order:0}
}
.cap .n{font-family:'Barlow Condensed',sans-serif;font-size:3.4rem;font-weight:700;color:var(--line-2);line-height:1;display:block;margin-bottom:.6rem}
.cap h3{margin-bottom:.9rem}
.cap ul{list-style:none;margin-top:1.4rem}
.cap li{
  position:relative;padding-left:1.5rem;margin-bottom:.55rem;
  font-size:.94rem;color:var(--mute);
}
.cap li::before{content:'';position:absolute;left:0;top:.62em;width:8px;height:1px;background:var(--sodium)}

/* ---------- config selector ---------- */
.picker{display:flex;border-bottom:1px solid var(--line-2);margin-bottom:clamp(2rem,4vw,3.5rem);overflow-x:auto;scrollbar-width:none}
.picker::-webkit-scrollbar{display:none}
.picker button{
  flex:1 1 0;min-width:150px;
  background:0;border:0;border-bottom:2px solid transparent;
  color:var(--dim);cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(1.1rem,1.9vw,1.55rem);text-transform:uppercase;letter-spacing:.01em;
  padding:1rem .5rem;text-align:left;
  transition:color .22s,border-color .22s;
}
.picker button small{
  display:block;font-family:'JetBrains Mono',monospace;
  font-size:.6rem;letter-spacing:.14em;font-weight:400;
  color:var(--dim);margin-top:.3rem;
}
.picker button[aria-selected="true"]{color:var(--chalk);border-bottom-color:var(--sodium)}
.picker button[aria-selected="true"] small{color:var(--sodium)}
.panel{display:none}
.panel.on{display:block;animation:fade .4s ease backwards}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));border-top:1px solid var(--line-2)}
.tier{padding:2rem 1.8rem 2.2rem 0;border-right:1px solid var(--line)}
.tier:last-child{border-right:0}
@media(max-width:860px){.tier{border-right:0;border-bottom:1px solid var(--line);padding-right:0}}
.tier.anchor{border-top:2px solid var(--sodium);margin-top:-1px}
.tier .amt{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(2.4rem,4vw,3.4rem);line-height:.95;color:var(--chalk);margin:.7rem 0 1.1rem}
.tier.anchor .amt{color:var(--sodium)}
.tier .amt small{font-size:.3em;font-family:'Barlow',sans-serif;font-weight:500;color:var(--dim);letter-spacing:.04em}
.tier ul{list-style:none;font-size:.9rem;color:var(--mute)}
.tier li{padding-left:1.1rem;position:relative;margin-bottom:.5rem;line-height:1.5}
.tier li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--line-2)}

/* ---------- coming soon ---------- */
.soon{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(1.5rem,3vw,3rem)}
.soon article .asset{margin-bottom:1.5rem}
.soon h3{margin:.9rem 0 .7rem}
.soon p{font-size:.94rem}

/* ---------- data / investor ---------- */
.stats{display:flex;flex-wrap:wrap;border-top:1px solid var(--line-2);margin-top:2.6rem}
.stat{flex:1 1 auto;min-width:150px;padding:1.5rem 2rem 1.5rem 0;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
@media(max-width:640px){.stat{min-width:50%;flex:1 1 50%;border-bottom:1px solid var(--line)}}
.stat b{
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(2.1rem,4vw,3.2rem);line-height:.95;color:var(--sodium);
}
.stat b.w{color:var(--chalk)}
.stat b.d{color:var(--display)}
.stat span{display:block;font-size:.8rem;color:var(--dim);margin-top:.55rem;max-width:20ch;line-height:1.4}

.dtable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-top:2rem}
.dtable th{
  text-align:right;padding:.85rem .7rem;border-bottom:1px solid var(--line-2);
  font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);font-weight:400;
}
.dtable td{text-align:right;padding:.85rem .7rem;border-bottom:1px solid var(--line);font-size:.95rem}
.dtable th:first-child,.dtable td:first-child{text-align:left;padding-left:0}
.dtable th:last-child,.dtable td:last-child{padding-right:0}
.dtable tbody tr:last-child td{border-bottom:1px solid var(--line-2);font-weight:600;color:var(--chalk)}
.dtable td.hi{color:var(--sodium);font-weight:600}
.dtable caption{caption-side:bottom;text-align:left;color:var(--dim);font-size:.8rem;padding-top:1.2rem;line-height:1.6}
@media(max-width:640px){.dtable{font-size:.85rem}.dtable td{padding:.7rem .4rem}}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(2rem,4vw,3.5rem)}
.grid3 .n{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.14em;color:var(--sodium);display:block;margin-bottom:.9rem}
.grid3 h3{margin-bottom:.7rem}
.grid3 p{font-size:.94rem}

.risks{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-2)}
@media(max-width:760px){.risks{grid-template-columns:1fr}}
.risks div{padding:1.5rem 2.2rem 1.5rem 0;border-bottom:1px solid var(--line)}
.risks h3{font-size:1rem;margin-bottom:.5rem}
.risks p{font-size:.9rem}

.ask{border:1px solid var(--sodium);padding:clamp(1.8rem,4vw,3rem);display:inline-block;margin-top:1rem}
.ask .big{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(3rem,7vw,5.5rem);line-height:.9;color:var(--sodium)}
.ask p{margin-top:1rem;max-width:44ch}

/* ---------- cta band ---------- */
.band{text-align:left;border-top:1px solid var(--line)}
.band .d2{max-width:16ch;margin-bottom:1.8rem}

/* ---------- footer ---------- */
footer{padding:var(--gut) var(--pad) 3rem;border-top:1px solid var(--line);background:var(--shell)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem;max-width:1440px;margin:0 auto}
@media(max-width:760px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>div:first-child{grid-column:1/-1}}
footer h4{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:400;margin-bottom:1.1rem}
footer ul{list-style:none}
footer li{margin-bottom:.6rem}
footer a{font-size:.92rem;color:var(--mute);transition:color .2s}
footer a:hover{color:var(--sodium)}
.fbot{max-width:1440px;margin:clamp(3rem,6vw,5rem) auto 0;padding-top:2rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
.fbot p{font-size:.78rem;color:var(--dim);max-width:70ch}

/* ---------- disclosure ---------- */
.note{
  border-left:2px solid var(--line-2);padding:.5rem 0 .5rem 1.2rem;
  font-size:.82rem;color:var(--dim);max-width:64ch;line-height:1.6;
}

/* ---------- scroll reveal (restrained) ----------
   The hidden state lives in the motion layer at the foot of this
   file, gated on html.motion. It used to sit here ungated, which
   left every .rise block on the site invisible when JS was off. */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .rise{opacity:1;transform:none}
}

/* ============================================================
   RESPONSIVE FIX (pre-existing)
   .split had no breakpoint and stayed two columns all the way
   down to 390px, squeezing the product shots, every environment
   panel and the economics tables into unreadable slivers.
   ============================================================ */
@media(max-width:860px){
  .split,.split.wide-l,.split.wide-r{grid-template-columns:1fr;gap:2.5rem}
}

/* ============================================================
   MOTION LAYER
   Gated on html.motion, set by an inline script in <head> only
   when prefers-reduced-motion is NOT active, and stripped again
   by raybo.js if GSAP failed to load. With .motion absent every
   rule here is inert and the page renders in its final state —
   which is also what you get with JavaScript off entirely.
   ============================================================ */

html.motion{scroll-behavior:auto}          /* Lenis owns scrolling */

/* ---------- film grain ----------
   Static SVG turbulence. Not motion, so it is NOT gated on
   .motion — it renders for reduced-motion users too. */
.grain{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.038;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ---------- sodium glow / cursor light ----------
   Both injected by raybo.js, both purely decorative. */
.glow{
  position:absolute;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,var(--sodium),transparent);
  filter:blur(50px);
}
.glow-hero{z-index:1;left:52%;top:62%;width:min(94vw,1180px);aspect-ratio:1;transform:translate(-50%,-50%);opacity:.09}

/* The halo on the product renders is a box-shadow rather than a
   layer: it tracks the render's own box, so it stays centred on it
   through every breakpoint. color-mix keeps --sodium the single
   source of the colour; where it is unsupported the whole
   declaration drops and the render simply has no halo. */
html.motion .asset.tall{
  box-shadow:0 0 140px -30px color-mix(in srgb,var(--sodium) 55%,transparent);
}

.cursorlight{
  position:fixed;left:0;top:0;width:900px;height:900px;margin:-450px 0 0 -450px;
  pointer-events:none;z-index:88;opacity:.055;
  mix-blend-mode:screen;will-change:transform;
  background:radial-gradient(closest-side,var(--chalk),transparent);
}

/* ---------- masked word reveal ----------
   .mw is the mask, .mi the moving word. The padding/margin pair
   gives descenders (g, y, p) room inside the mask without adding
   height to the line — .d1/.d2 run at line-height .92, which
   would otherwise shear them off. */
.mw{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.18em;margin-bottom:-.18em;
}
.mi{display:inline-block;will-change:transform}
html.motion .mi{transform:translateY(115%)}

/* ---------- .rise ----------
   Moved under html.motion. It used to hide unconditionally, so
   with JS disabled every .rise block on the site stayed at
   opacity 0 forever. */
html.motion .rise{
  opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);
}
html.motion .rise.in{opacity:1;transform:none}

/* ---------- hero entrance pre-state ----------
   Re-asserted by gsap.set() at init; declared here too so nothing
   flashes between first paint and script run. */
html.motion .hero .badge,
html.motion .hero .lede,
html.motion .hero-cta,
html.motion .telem>div{opacity:0}

/* ---------- parallax ----------
   Oversize + offset so translating the media never exposes an
   edge inside the .asset box. */
html.motion .asset img.px,
html.motion .asset video.px{height:132%;top:-16%;bottom:auto}

/* ---------- anatomy callouts ---------- */
.callout{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.co-line{fill:none;stroke:var(--display);stroke-width:2.5;stroke-linecap:square;stroke-linejoin:miter}
.co-dot{fill:var(--display)}
.co-key{
  fill:var(--display);font-family:'JetBrains Mono',monospace;
  font-size:30px;letter-spacing:.08em;
}
html.motion .co-dot,html.motion .co-key{opacity:0}
html.motion #anatomy .grid3>div{opacity:0}
.co-rule{
  display:block;height:1px;width:100%;background:var(--display);
  margin-bottom:.95rem;transform-origin:left center;
}
html.motion .co-rule{transform:scaleX(0)}

/* ---------- spec / data tables ----------
   The divider is repainted as a background so it can be drawn in;
   the real border-bottom is only made transparent, never removed,
   so the non-motion render is byte-identical to before. */
html.motion .spec tr,
html.motion .dtable tbody tr{
  border-bottom-color:transparent;
  background-image:linear-gradient(var(--line),var(--line));
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
}
.cw{display:block}
html.motion .spec td .cw,
html.motion .dtable td .cw,
html.motion .dtable th .cw{clip-path:inset(0 100% 0 0)}

/* ---------- environment selector ---------- */
html.motion .picker{position:relative}
html.motion .picker button[aria-selected="true"]{border-bottom-color:transparent}
html.motion .panel.on{animation:none}
html.motion .panel{transform-origin:50% 20%}
.picker-ink{
  position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--sodium);pointer-events:none;
}

/* ---------- horizontal roadmap ----------
   Desktop only. Below 861px .soon keeps its original grid and the
   panels simply scroll in, per the no-pinning-on-mobile rule. */
@media(min-width:861px){
  html.motion #soon{overflow:hidden}
  html.motion #soon .soon{
    display:flex;flex-wrap:nowrap;width:max-content;
    align-items:flex-start;will-change:transform;
  }
  /* A pinned section has exactly one viewport to work with. Stacked
     vertically these panels run ~950px and the copy falls off the
     bottom, so in horizontal mode each one turns side-on: art in the
     left column, badge/heading/copy stacked in the right. Placement is
     explicit because the four children are direct siblings in the
     markup, which is left untouched. */
  html.motion #soon{padding-top:clamp(2.5rem,5vw,5rem);padding-bottom:clamp(2.5rem,5vw,5rem)}
  html.motion #soon .soon>article{
    flex:0 0 auto;width:min(56vw,700px);
    display:grid;grid-template-columns:1.05fr .95fr;
    grid-template-rows:auto auto auto;
    column-gap:clamp(1.5rem,2.5vw,2.4rem);align-content:center;
  }
  html.motion #soon .soon>article>.asset{grid-column:1;grid-row:1/-1;align-self:center;margin-bottom:0}
  html.motion #soon .soon>article>.badge{grid-column:2;grid-row:1;align-self:end;justify-self:start}
  html.motion #soon .soon>article>h3{grid-column:2;grid-row:2}
  html.motion #soon .soon>article>p{grid-column:2;grid-row:3;align-self:start}
  /* .soon also carries .rise, whose transform and .7s transition would
     both fight the horizontal tween — GSAP would inherit .rise's 18px
     offset and every scrub frame would be run through a transition.
     The pin is this section's reveal, so .rise stands down here. */
  html.motion #soon .soon{opacity:1;transform:none;transition:none}
}

/* ---------- reduced motion ----------
   Belt and braces: .motion is never set in this case, but if a
   user toggles the OS setting mid-session these still win. */
@media(prefers-reduced-motion:reduce){
  .cursorlight{display:none}
  .mi,html.motion .mi{transform:none}
  .rise,html.motion .rise{opacity:1;transform:none;transition:none}
  html.motion .hero .badge,
  html.motion .hero .lede,
  html.motion .hero-cta,
  html.motion .telem>div,
  html.motion .co-dot,html.motion .co-key,
  html.motion #anatomy .grid3>div{opacity:1}
  html.motion .co-rule{transform:none}
  html.motion .spec td .cw,
  html.motion .dtable td .cw,
  html.motion .dtable th .cw{clip-path:none}
  html.motion .spec tr,
  html.motion .dtable tbody tr{border-bottom-color:var(--line);background-image:none}
}

/* ============================================================
   FIXES + POLISH PASS
   ============================================================ */

/* ---------- hero clears the fixed header ----------
   .hero is justify-content:flex-end, so once the copy is taller than
   the viewport it starts at y=0 and the badge slides under the fixed
   header. Widening the window makes it worse, because .d1 is 10.5vw.
   A top pad on .inner keeps the column clear at every size. */
.hero .inner{padding-top:clamp(6rem,11vh,7.5rem)}

/* ---------- anatomy fits its own pin ----------
   The section ran 1370px against a ~720px viewport, so three of the
   four callouts drew below the fold for the whole pin. The pin now
   holds the .split only (JS), and the square is capped in vh so the
   row always fits the screen it is pinned to. */
@media(min-width:861px){
  html.motion #anatomy .split{align-items:center}
  html.motion #anatomy .asset.r11{width:min(100%,58vh);margin-left:auto;margin-right:auto}
  /* The pinned element cannot also be a .rise: its transform and .7s
     transition fight ScrollTrigger's pin every frame, and its opacity:0
     start state left the whole row invisible. The pin is this row's
     reveal, so .rise stands down here — same as #soon. */
  html.motion #anatomy .split.rise{opacity:1;transform:none;transition:none}
}

/* ---------- scroll progress ---------- */
.prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:95;pointer-events:none}
.prog i{
  display:block;height:100%;width:100%;background:var(--sodium);
  transform:scaleX(0);transform-origin:0 50%;
}

/* ---------- nav: hover + current section ---------- */
@media(min-width:861px){
  nav a:not(.cta){position:relative}
  nav a:not(.cta)::after{
    content:'';position:absolute;left:0;right:0;bottom:-7px;height:1px;
    background:var(--sodium);transform:scaleX(0);transform-origin:0 50%;
    transition:transform .32s cubic-bezier(.3,.8,.3,1);
  }
  nav a:not(.cta):hover::after,
  nav a:not(.cta).on::after{transform:scaleX(1)}
}

/* ---------- eyebrow rule ---------- */
.tag{display:inline-flex;align-items:center;gap:.6rem}
.head .tag{display:inline-flex}
.tag::before{content:'';width:20px;height:1px;background:currentColor;opacity:.55;flex:none}
html.motion .tag::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .7s .1s cubic-bezier(.2,.7,.3,1)}
html.motion .rise.in .tag::before{transform:scaleX(1)}

/* ---------- live dot ---------- */
@keyframes rb-pulse{0%,100%{opacity:1}50%{opacity:.4}}
html.motion .badge i{animation:rb-pulse 2.4s ease-in-out infinite}
html.motion .badge.live i{animation-duration:1.5s}

/* ---------- media framing on hover ----------
   outline, never transform: the media itself is parallax-driven and a
   CSS transition on transform would fight the scrub every frame. */
@media(min-width:861px) and (hover:hover){
  .cap-media,.soon article .asset,.panel .asset{
    outline:1px solid transparent;outline-offset:4px;transition:outline-color .35s;
  }
  .cap-media:hover,.soon article:hover .asset,.panel .asset:hover{outline-color:var(--sodium)}
}

/* ---------- pricing tiers ---------- */
.tier{position:relative}
.tier::before{
  content:'';position:absolute;top:-1px;left:0;right:1.8rem;height:2px;
  background:var(--sodium);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .42s cubic-bezier(.3,.8,.3,1);
}
.tier:hover::before{transform:scaleX(1)}
@media(max-width:860px){.tier::before{right:0}}

/* ---------- table row hover ---------- */
.spec tr,.dtable tbody tr{transition:background-color .25s}
.spec tr:hover,.dtable tbody tr:hover{background-color:color-mix(in srgb,var(--sodium) 6%,transparent)}

/* ---------- buttons ---------- */
.btn{transition:background .22s,color .22s,border-color .22s,transform .22s}
@media(hover:hover){.btn:hover{transform:translateY(-2px)}}
.btn:active{transform:translateY(0)}

/* ---------- stat + capability hover ---------- */
.stat b{transition:color .3s}
.cap .n{transition:color .4s}
.cap:hover .n{color:var(--sodium)}

/* ---------- phone ---------- */
@media(max-width:860px){
  /* tap targets */
  nav a{min-height:48px;display:flex;align-items:center}
  .btn{padding:1.05rem 1.9rem}
  .hero-cta{gap:.75rem}
  .hero-cta .btn{flex:1 1 auto;text-align:center}
  /* the telemetry strip reads better as rows than a cramped 2x2 grid */
  .telem div{padding-top:.85rem;padding-bottom:.9rem}
  /* stop long mono strings forcing a sideways scroll */
  .spec td,.dtable td,.dtable th{overflow-wrap:anywhere}
}
@media(max-width:520px){
  .tiers{grid-template-columns:1fr}
  .soon{grid-template-columns:1fr}
}

/* ============================================================
   HERO LEGIBILITY
   The hero films are not uniformly dark — park-night.mp4 opens on a
   lit RV check-in and only reaches the dark road at the end of its
   loop — so the headline has to stay readable over the bright end of
   that range, not just the average. The scrim is weighted to the left
   where the copy sits, and the header carries its own gradient until
   it sticks, so the nav is legible over a bright first frame too.
   ============================================================ */
.hero .bg::after{
  background:
    linear-gradient(to top,
      var(--void) 3%,
      color-mix(in srgb,var(--void) 74%,transparent) 42%,
      color-mix(in srgb,var(--void) 36%,transparent) 74%,
      color-mix(in srgb,var(--void) 18%,transparent) 100%),
    linear-gradient(to right,
      color-mix(in srgb,var(--void) 93%,transparent) 0%,
      color-mix(in srgb,var(--void) 74%,transparent) 30%,
      color-mix(in srgb,var(--void) 34%,transparent) 58%,
      transparent 82%);
}
header::before{
  content:'';position:absolute;inset:0 0 auto;height:190%;
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--void) 82%,transparent),
    transparent);
  pointer-events:none;z-index:-1;transition:opacity .3s;
}
header.stuck::before{opacity:0}