/* LoopMile — production page styles. Design tokens come from styles.css (Nocturne). */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--color-accent);text-decoration:none}
a:hover{color:var(--color-accent-400)}
img{max-width:100%}
.lm-wrap{max-width:1240px;margin:0 auto;padding:0 28px}

/* nav */
.lm-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:16px 0;background:color-mix(in srgb,var(--color-bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-divider);transition:box-shadow .3s ease,background .3s ease}
.lm-nav.scrolled{box-shadow:0 12px 34px -20px rgba(0,0,0,.75);background:color-mix(in srgb,var(--color-bg) 94%,transparent)}
.lm-anchors{display:flex;gap:20px;font-size:13px;color:var(--color-neutral-400);flex-wrap:wrap}
.lm-anchors a{color:inherit}
.lm-anchors a:hover{color:var(--color-text)}
@media (max-width:760px){.lm-anchors{display:none}}

/* horizontal rule that fades at the ends */
.lm-rule{height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--color-divider) 48px,var(--color-divider) calc(100% - 48px),transparent)}

/* range inputs */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:2px;background:var(--color-neutral-800);border-radius:2px;outline:none;margin:14px 0 6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--color-accent);cursor:pointer;box-shadow:0 0 0 4px color-mix(in srgb,var(--color-accent) 18%,transparent);transition:box-shadow .2s ease}
input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 6px color-mix(in srgb,var(--color-accent) 24%,transparent)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border:none;border-radius:50%;background:var(--color-accent);cursor:pointer}
input[type=range]:focus-visible{outline:2px solid var(--color-accent);outline-offset:6px}
input[type=range]:disabled{cursor:not-allowed}

/* plan cards + add-on toggles */
#plans .card{transition:border-color .28s ease,box-shadow .28s ease,transform .28s ease}
#plans .card[role=button]:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
#btn-ins,#btn-svc{transition:border-color .2s ease,background-color .2s ease,opacity .2s ease}

/* scroll reveal */
.reveal{opacity:1;transform:none;transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.07s}
.reveal[data-delay="2"]{transition-delay:.14s}
.reveal[data-delay="3"]{transition-delay:.21s}
.reveal[data-delay="4"]{transition-delay:.28s}
.reveal[data-delay="5"]{transition-delay:.35s}
.reveal[data-delay="6"]{transition-delay:.42s}

/* hero comparison bars grow in */
.lm-hbar{transform-origin:left center;animation:lm-grow 1.1s cubic-bezier(.22,.61,.36,1) both;animation-delay:.25s}
@keyframes lm-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* vehicle stage */
.lm-stage{position:relative;width:100%;height:min(52vw,460px);border-radius:var(--radius-lg);overflow:hidden;background:radial-gradient(130% 150% at 72% 18%,var(--color-neutral-900),var(--color-bg) 72%);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center}
.lm-stage:after{content:"";position:absolute;left:8%;right:8%;bottom:19%;height:1px;background:linear-gradient(90deg,transparent,var(--color-neutral-700),transparent)}
.lm-glow{position:absolute;left:4%;top:50%;width:44%;height:64%;transform:translateY(-50%);background:radial-gradient(circle at 32% 50%,color-mix(in srgb,var(--color-accent) 46%,transparent),transparent 62%);filter:blur(28px);opacity:0;transition:opacity 1.2s ease .35s;pointer-events:none}
.lm-stage.in .lm-glow{opacity:.9;animation:lm-pulse 4.5s ease-in-out 1.7s infinite}
@keyframes lm-pulse{0%,100%{opacity:.92}50%{opacity:.55}}
.lm-drive{position:relative;z-index:2;width:76%;max-width:600px;transform:none;opacity:1;transition:transform 1.15s cubic-bezier(.22,.61,.36,1),opacity .9s ease}
.lm-stage.in .lm-drive{transform:none;opacity:1}
.lm-float{animation:lm-float 5s ease-in-out 1.2s infinite}
.lm-float img{display:block;width:100%;height:auto}
@keyframes lm-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.lm-shadow{position:absolute;z-index:1;left:18%;right:18%;bottom:15%;height:22px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 72%);filter:blur(6px);opacity:0;transition:opacity 1s ease .4s}
.lm-stage.in .lm-shadow{opacity:.6;animation:lm-shadowpulse 5s ease-in-out 1.2s infinite}
@keyframes lm-shadowpulse{0%,100%{transform:scaleX(1);opacity:.6}50%{transform:scaleX(.9);opacity:.4}}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .lm-hbar{animation:none}
  .lm-drive{transform:none;opacity:1;transition:none}
  .lm-float,.lm-shadow,.lm-stage.in .lm-glow{animation:none}
  .lm-glow{opacity:.75}.lm-shadow{opacity:.55}
}

/* Refined motion and resilient navigation. All content is visible by default. */
:root{--lm-ease:cubic-bezier(.2,.75,.2,1)}
.reveal,.reveal.in{opacity:1;transform:none}
.lm-drive,.lm-stage.in .lm-drive{opacity:1;transform:none}
.lm-reveal{transition:opacity .8s var(--lm-ease),translate .8s var(--lm-ease);transition-delay:var(--lm-delay,0ms)}
.lm-reveal.lm-pending{opacity:0;translate:0 24px}
header{position:relative;isolation:isolate}
header:before{content:"";position:absolute;z-index:-1;inset:0 -20px;background:radial-gradient(ellipse at 14% 18%,color-mix(in srgb,var(--color-accent) 8%,transparent),transparent 64%);pointer-events:none}
.lm-anchors a{position:relative;padding:5px 0;transition:color .2s}
.lm-anchors a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--color-accent);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--lm-ease)}
.lm-anchors a:hover:after,.lm-anchors a.lm-active:after,.lm-anchors a[aria-current=page]:after{transform:scaleX(1)}
.lm-progress{position:fixed;z-index:60;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--color-accent-700),var(--color-accent-300));transform:scaleX(0);transform-origin:left;pointer-events:none}
.btn{transition:translate .25s var(--lm-ease),box-shadow .25s,border-color .25s,background .25s!important}
.btn:hover{translate:0 -2px;box-shadow:0 7px 22px -12px var(--color-accent)}
.btn:active{translate:0 0}
a:focus-visible,button:focus-visible,[role=button]:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--color-accent-300);outline-offset:5px}
.input{transition:border-color .2s,box-shadow .2s;min-width:0}
.input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-accent) 15%,transparent)}
#plans .card[role=button]{transition:translate .35s var(--lm-ease),border-color .35s,box-shadow .35s,background .35s;transition-delay:0s}
#plans .card[role=button]:hover{transform:none;translate:0 -5px;box-shadow:0 16px 40px -20px #0008}
#plans .card[aria-pressed=true]{background:linear-gradient(145deg,color-mix(in srgb,var(--color-accent) 12%,var(--color-surface)),var(--color-surface));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--color-accent-300) 20%,transparent),0 10px 36px -24px var(--color-accent)}
#bar-loop,#bar-cng{transition:width .45s var(--lm-ease)}
#save-fmt,#upfront-fmt,#km-loop,#km-cng{display:inline-block;font-variant-numeric:tabular-nums}
.lm-model-note{font-size:12px;line-height:1.65;color:var(--color-neutral-400);margin:22px 0 8px;max-width:90ch}
.lm-stage{background:radial-gradient(ellipse at 50% 65%,color-mix(in srgb,var(--color-accent) 9%,var(--color-bg)),var(--color-bg) 72%);border:1px solid var(--color-divider)}
.lm-stage:before{content:"";position:absolute;inset:5% 12%;border:1px solid color-mix(in srgb,var(--color-accent) 10%,transparent);border-radius:50%;transform:rotate(-12deg);pointer-events:none}
.lm-stage:after{bottom:11%}
.lm-shadow{bottom:7%}
.lm-stage.in .lm-glow{animation:none;opacity:.4}
.lm-float{animation:none}
.lm-stage.in .lm-shadow{animation:none;opacity:.6}
.lm-stage.lm-arrived .lm-drive{animation:lm-arrive 1.35s var(--lm-ease) both}
.lm-stage.lm-arrived .lm-float{animation:lm-settle 6s ease-in-out 1.35s infinite;animation-play-state:paused}
.lm-stage.lm-arrived.motion-active .lm-float{animation-play-state:running}
@keyframes lm-arrive{from{opacity:0;transform:translate3d(42px,12px,0) scale(.96)}to{opacity:1;transform:none}}
@keyframes lm-settle{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.lm-menu{display:none}
.lm-menu{font:inherit;font-size:11px;background:none;color:var(--color-neutral-400);border:1px solid var(--color-divider);border-radius:6px;padding:7px 9px;cursor:pointer;white-space:nowrap}

.lm-skip{position:fixed;top:8px;left:12px;z-index:100;padding:12px;background:var(--color-surface);translate:0 -160%}
.lm-skip:focus{translate:0 0}
.lm-nav{gap:18px}
@media(max-width:1000px){
 .lm-nav{flex-wrap:wrap;gap:12px;padding:13px 0}
 .lm-anchors{display:flex;order:5;width:100%;gap:12px 20px;padding:10px 0}
 .lm-nav-ready .lm-menu{display:inline-block;margin-left:auto}
 .lm-nav-ready .lm-anchors{display:none}
 .lm-nav-ready .menu-open .lm-anchors{display:flex;animation:lm-menu-in .2s ease-out}
 .lm-lang{margin-left:0!important}
 .lm-nav:not(:has(.lm-menu)) .lm-lang{margin-left:auto!important}
 section[id]{scroll-margin-top:135px!important}
}
@keyframes lm-menu-in{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}
@media(max-width:520px){
 .lm-wrap{padding:0 18px}.lm-nav{gap:8px}.lm-menu{font-size:12px}
 header{padding-top:44px!important;gap:28px!important}
 header>div{min-width:0;flex-basis:100%!important}
 .lm-stage{height:64vw;min-height:220px}.lm-drive{width:92%}
 #vehicle .table{font-size:12px}#vehicle .table td{padding:10px 6px;overflow-wrap:anywhere}
 footer{gap:12px!important}.lm-form .card{padding:18px!important}
}
.lm-motion-paused .lm-pending{opacity:1;translate:none}
.lm-motion-paused *,.lm-motion-paused *:before,.lm-motion-paused *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.lm-tab-hidden *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.lm-pending{opacity:1!important;translate:none!important}
 *,*:before,*:after{animation:none!important;transition:none!important}
}

/* Narrow screens keep specification labels intact and values readable. */
header:before{inset:0}
@media(max-width:520px){
 #vehicle .table,#vehicle .table tbody{display:block}
 #vehicle .table tr{display:grid;grid-template-columns:96px minmax(0,1fr);border-bottom:1px solid var(--color-divider)}
 #vehicle .table td{display:block;border:0;padding:9px 8px;overflow-wrap:normal;min-width:0;line-height:1.55}
}