/* ===== mobile.css: touch engine support, iOS/Android fixes, responsive layout ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
html.scroll-lock,html.scroll-lock body{overflow:hidden}
button,a{touch-action:manipulation}

/* ---- pinned sections on touch: CSS sticky runways (the JS builds the wrapper), 100svh for the iOS URL bar ---- */
.runway{position:relative}
html.touch-motion .runway-pin{position:sticky;top:0;overflow:hidden}
@supports (height:100svh){
  html.touch-motion .hero,html.touch-motion .why,html.touch-motion .carousel,html.touch-motion .touch{height:100svh;min-height:0}
  .hero,.why,.carousel,.touch{min-height:min(640px,100svh)}
}
@media (max-height:600px){.hero,.why,.carousel,.touch{min-height:0}}

/* ---- animations that used to be GSAP tweens: CSS now, so they can never stall ---- */
@keyframes swapIn{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:none}}
#car-info.swap>*{animation:swapIn .7s var(--ease) both}
#car-info.swap>*:nth-child(2){animation-delay:.05s}#car-info.swap>*:nth-child(3){animation-delay:.1s}#car-info.swap>*:nth-child(4){animation-delay:.15s}#car-info.swap>*:nth-child(5){animation-delay:.2s}
.v-feat.swap blockquote{animation:swapIn .8s var(--ease) both}.v-feat.swap .v-who{animation:swapIn .8s var(--ease) .08s both}
#acc.swap .acc-i{animation:swapIn .6s var(--ease) both}
@keyframes shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.shake{animation:shake .5s}
@keyframes bump{from{transform:scale(1.8)}to{transform:scale(1)}}
#cart.bump{display:inline-block;animation:bump .6s var(--ease)}
@keyframes vfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.v-bar i{transform:scaleX(0)}
/* FAQ accordion: grid rows 0fr -> 1fr, no JS height tween */
.acc-p{display:grid!important;grid-template-rows:0fr;height:auto!important;overflow:visible!important;transition:grid-template-rows .6s var(--ease)}
.acc-i.open .acc-p{grid-template-rows:1fr}
.acc-p>p{overflow:hidden;min-height:0;padding:0!important}
.acc-p>p::after{content:"";display:block;height:22px}

/* ---- touch: drag on the carousel horizontally, page still scrolls vertically ---- */
.carousel{touch-action:pan-y}
.cartp{overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
.toast{bottom:max(28px,env(safe-area-inset-bottom))}

/* ---- notches and home bars ---- */
.top{padding-top:max(var(--pad),env(safe-area-inset-top));padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right))}
.hero-copy,.corner.bl{left:max(var(--pad),env(safe-area-inset-left))}

/* ---- no WebGL2 (old Android WebView, locked-down browsers): the page still reads, with stills in place of the 3D ---- */
.no-webgl2 #gl{display:none}
.no-webgl2 .hero::after{content:"";position:absolute;right:4vw;top:22%;width:min(62vw,820px);aspect-ratio:1.36;background:url("renders/v1-angled.png") center/contain no-repeat;filter:drop-shadow(0 30px 40px rgba(0,0,0,.25));z-index:1}
.no-webgl2 .car-info{position:static;transform:none;margin:24px var(--pad);width:auto}
.no-webgl2 .tile.big{background:#e6e6e6 url("renders/v1-top.png") center/80% no-repeat}
.no-webgl2 .faq-tile,.no-webgl2 .cta-tile{background:url("renders/v1-top.png") center/80% no-repeat}

/* the cart panel: no shadow and no hit-testing while closed (it used to bleed a grey strip in from the right edge) */
.cartp{box-shadow:none;visibility:hidden;transition:transform .7s var(--ease),visibility 0s .7s,box-shadow .7s}
.cartp.open{box-shadow:-30px 0 80px rgba(0,0,0,.18);visibility:visible;transition:transform .7s var(--ease),visibility 0s,box-shadow .7s}

/* phones: the Touch headline sits clear above the three captions (only the active caption shows its text) */
@media (max-width:700px){
  .touch-caps{right:var(--pad);bottom:max(var(--pad),env(safe-area-inset-bottom))}
  .touch-caps li:not(.on) p{display:none}
  .touch-caps li{max-width:none}
  .touch-h{bottom:calc(var(--pad) + 190px);font-size:clamp(48px,15vw,90px)}
}

/* phones: the carousel info card stays short so the product stays visible above it */
@media (max-width:700px){
  .car-info{box-sizing:border-box;max-width:calc(100vw - 2 * var(--pad));padding:14px 16px 12px;gap:8px;bottom:calc(var(--pad) * 3.4 + env(safe-area-inset-bottom) + 18px);background:rgba(214,214,214,.94)}
  .car-info>*{min-width:0}
  .car-info h3{font-size:24px}
  .car-info .ci-desc{font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .car-info .ci-spec{display:none}
  .car-info .views{display:flex;gap:6px;flex-wrap:wrap}
  .car-info .views button{padding:6px 12px;font-size:12px}
  .car-info .ci-row{gap:10px}
  .car-hint{display:none}
}
@media (max-width:700px) and (max-height:700px){.car-info .ci-desc{display:none}}
@media (max-width:700px){.car-info .btn-line{white-space:nowrap;padding-left:12px;padding-right:12px}}

/* arrows are inline SVG: iOS draws the U+2197 character as a blue emoji */
svg.ar{width:1em;height:1em;display:block;flex:none}

/* when the iOS URL bar collapses the screen grows past 100svh: the back layer takes the colour of the section above so no gray strip shows */
html.touch-motion #bgs{background:var(--fill,#cbcbcb)}

/* phones: Why list sits inside the pinned screen (4 compact rows, only the active one open), clear of the browser bar */
@media (max-width:700px){
  .why .reasons{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--pad) + env(safe-area-inset-bottom) + 22px);margin:0;width:auto}
  .reasons li{padding:9px 0;cursor:pointer}
  .reasons b{font-size:15px}
  .reasons p{font-size:12px;line-height:1.4}
  .reasons li.on p{max-height:64px;margin-top:4px}
  .car-ctl{bottom:calc(var(--pad) + env(safe-area-inset-bottom) + 18px)}
  .touch-caps{bottom:calc(var(--pad) + env(safe-area-inset-bottom) + 18px)}
  .hero-copy{bottom:calc(var(--pad) + env(safe-area-inset-bottom) + 38px)}
}

/* ---- phone menu (the inline link list is hidden under 760px) ---- */
.menu-btn,.mnav{display:none}
@media (max-width:760px){
  .top-l{flex-direction:row;align-items:center;gap:14px}
  .menu-btn{display:inline-grid;align-content:center;gap:5px;width:30px;height:30px;padding:0 4px;margin:-6px 0}
  .menu-btn i{display:block;height:2px;background:var(--ink);transition:transform .5s var(--ease),background .3s}
  body.menu-open .menu-btn i:first-child{transform:translateY(3.5px) rotate(45deg)}
  body.menu-open .menu-btn i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .mnav{display:flex;flex-direction:column;justify-content:center;gap:2px;position:fixed;inset:0;z-index:79;padding:96px var(--pad) calc(36px + env(safe-area-inset-bottom));background:#343434;color:#fff;opacity:0;visibility:hidden;transform:translate3d(0,-14px,0);transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s .6s}
  body.menu-open .mnav{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease),transform .6s var(--ease),visibility 0s}
  .mnav a{display:flex;align-items:baseline;justify-content:space-between;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:clamp(34px,10vw,54px);font-weight:700;letter-spacing:-.06em;line-height:1}
  .mnav a small{font-size:11px;font-weight:500;letter-spacing:0;color:var(--orange)}
  .mnav a:active{color:var(--orange)}
  .mnav p{margin-top:28px;font-size:12px;color:rgba(255,255,255,.55)}
  body.menu-open .top{--ink:#fff}
  body.menu-open .top::before{opacity:0}
  body.menu-open .top .mark{background:var(--orange)}
}

/* footer credit: a clear pill that invites the click */
.foot-bar .credit{display:inline-flex;align-items:center;gap:12px;padding:6px 6px 6px 20px;border-radius:99px;background:#343434;color:#fff;font-size:15px;font-weight:500;letter-spacing:-.01em;line-height:1;text-decoration:none;box-shadow:0 8px 24px -8px rgba(0,0,0,.35);transition:background .4s var(--ease),transform .5s var(--ease),box-shadow .4s}
.foot-bar .credit b{font-weight:700}
.foot-bar .credit .cr-a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--orange);color:#fff;font-size:15px;transition:transform .5s var(--ease),background .3s}
.foot-bar .credit .cr-a svg{width:14px;height:14px}
.foot-bar .credit:hover,.foot-bar .credit:focus-visible{background:var(--orange);transform:translateY(-3px);box-shadow:0 14px 30px -8px rgba(255,116,38,.55)}
.foot-bar .credit:hover .cr-a,.foot-bar .credit:focus-visible .cr-a{background:#fff;color:var(--orange);transform:rotate(45deg)}
@media (max-width:760px){.foot-bar .credit{font-size:16px;padding-left:22px}.foot-bar .credit .cr-a{width:38px;height:38px}}