/* MAD-07 coming soon (P0-19). Ported from design/reference.html; BUILD_PLAN.md S1 lists the only changes. */
/* Heebo variable (OFL-1.1, fonts/OFL.txt), Google Fonts hebrew and latin ranges. Built by tools/make-fonts.mjs. */
@font-face{font-family:'Heebo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/heebo-hebrew.f1f7cfae.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F}
@font-face{font-family:'Heebo';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/heebo-latin.50dae2e1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
body{margin:0}
a{color:#F5F5F4}a:hover{color:#FFFFFF}
:focus-visible{outline:2px solid #F5F5F4;outline-offset:3px}
.page{position:relative;width:100%;height:100vh;height:100dvh;overflow:hidden;background:#0A0A0B;color:#F5F5F4;font-family:'Heebo',Arial,sans-serif}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,rgba(232,162,92,0) 0%,rgba(232,162,92,0) 34%,rgba(232,162,92,.16) 58%,rgba(232,162,92,.42) 78%)}
.sun{position:absolute;left:26%;top:60%;width:clamp(140px,16vw,260px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(232,162,92,.95) 0%,rgba(232,162,92,.45) 38%,rgba(232,162,92,0) 70%)}
.lp{fill-rule:evenodd;vector-effect:non-scaling-stroke}
.ghost{position:absolute;left:4vw;top:49%;width:92vw;height:auto;fill:none;stroke:rgba(245,245,244,.12);stroke-width:1}
.ridges{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%}
.far{fill:#16161A}.near{fill:#111113}.ridgerim{fill:none;stroke:#E8A25C;stroke-width:1.5;opacity:.5}
.top{position:absolute;z-index:4;top:0;left:0;right:0;display:flex;justify-content:flex-end;align-items:center;padding:28px clamp(16px,5vw,72px)}
.pill{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 16px;border:1px solid rgba(245,245,244,.28);border-radius:999px;font-size:14px;font-weight:700}
.dot{width:8px;height:8px;border-radius:50%;background:#D7141A;flex:none;animation:pulse 1.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(215,20,26,.7)}100%{box-shadow:0 0 0 12px rgba(215,20,26,0)}}
.hero{position:absolute;z-index:3;top:clamp(100px,15vh,150px);left:16px;right:16px;margin:0 auto;max-width:1000px;text-align:center;display:flex;flex-direction:column;align-items:center}
.mega{display:block;width:clamp(280px,50vw,760px);height:auto;fill:#F5F5F4;stroke:#D7141A;stroke-width:clamp(1.5px,.2vw,3px);stroke-linejoin:round;animation:quake 4s linear infinite}
@keyframes quake{0%,29%,47%,100%{transform:translate(0,0)}31%{transform:translate(-6px,2px) rotate(-.6deg)}33%{transform:translate(6px,-2px) rotate(.6deg)}35%{transform:translate(-4px,-1px)}37%{transform:translate(4px,2px) rotate(.3deg)}39%{transform:translate(-3px,0)}41%{transform:translate(2px,-1px)}43%{transform:translate(-1px,1px)}45%{transform:translate(1px,0)}}
.bar{width:48px;height:3px;background:#D7141A;margin:16px auto 0}
.hero h1{display:flex;flex-direction:column;align-items:center;margin:0;font-weight:900;font-size:clamp(30px,3.4vw,52px);line-height:1.08;letter-spacing:0}
.headline{margin-top:14px}
.red{color:#D7141A;fill:#D7141A}
.status{display:flex;align-items:center;justify-content:center;gap:10px;margin:18px 0 0;font-size:clamp(16px,1.4vw,20px);font-weight:700}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 22px;border-radius:4px;font-weight:700;font-size:16px;text-decoration:none;box-sizing:border-box}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-ghost{border:1px solid rgba(245,245,244,.6);color:#F5F5F4;background:rgba(10,10,11,.35)}
.scene{position:absolute;z-index:2;left:0;bottom:0;width:100%;height:auto;display:block}
.scene-p{display:none}
.hill{fill:#0A0A0B}.hillrim{fill:none;stroke:#E8A25C;stroke-width:2;opacity:.75}.strata{fill:none;stroke:#E8A25C;stroke-width:1.2;opacity:.08}.rock{fill:#16161A}
.parked{display:none}
.body{fill:#F5F5F4}.k0{fill:#0E0E10}.k1{fill:#141416}.k2{fill:#0A0A0B}.k3{fill:#2A2A31}.o8{opacity:.85}.tl{fill:#FF4A4F}
.well{fill:#0B0B0C}.glass{fill:#1F232A}.refl{fill:#FFFFFF;opacity:.07}
.wsl{fill:none;stroke:#2A2A31;stroke-width:3}.seam{fill:none;stroke:#2A2A31;stroke-width:2}.seam2{fill:none;stroke:#141416;stroke-width:1.6;opacity:.22}
.molle{fill:none;stroke:#2A2A31;stroke-width:7;stroke-dasharray:16 9}.redslot{fill:none;stroke:#B8101A;stroke-width:4}
.koala{font-weight:800;font-size:12px;letter-spacing:.2em;fill:#63636C;text-anchor:middle}
.bedtxt{font-weight:800;font-size:9.5px;letter-spacing:.06em;fill:#141416}
.snow{fill:none;stroke:#F5F5F4;stroke-width:2.2;opacity:.85}
.helm{fill:#3A3A42}.hl{fill:none;stroke:#63636C;stroke-width:3;stroke-linecap:round}
.glow{fill:#FFFFFF;opacity:.16}.lamp{fill:#FFFFFF}.amber{fill:#E8A25C}
.flare{fill:none;stroke:#141416;stroke-width:24}
.clipb{clip-path:url(#bodyClip)}
.b0{stop-color:#FFFFFF;stop-opacity:.4}.b1{stop-color:#FFFFFF;stop-opacity:0}
.sh0{stop-color:#000000;stop-opacity:0}.sh1{stop-color:#000000;stop-opacity:.2}
.w0{stop-color:#E8A25C;stop-opacity:.16}.w1{stop-color:#E8A25C;stop-opacity:0}
.cs0{stop-color:#000000;stop-opacity:.75}.cs1{stop-color:#000000;stop-opacity:0}
.tire{fill:#111113}.lugs{fill:none;stroke:#26262C;stroke-width:10;stroke-dasharray:13 9}.side{fill:#18181B}.shoulder{fill:none;stroke:#222227;stroke-width:6;stroke-dasharray:6 10}
.tirehl{fill:none;stroke:#F5F5F4;stroke-width:3;opacity:.1;stroke-linecap:round}
.rimw{fill:#0D0D0F}.lip{fill:none;stroke:#2E2E35;stroke-width:4}.spk{fill:none;stroke:#2A2A31;stroke-width:7;stroke-linecap:round}.bolt{fill:#3A3A42}.cap{fill:#1D1D22;stroke:#3A3A42;stroke-width:2}.nut{fill:#63636C}
.spin{transform-box:fill-box;transform-origin:center;animation:spin .87s linear infinite}
.spin-l{animation-duration:.870s}.spin-p{animation-duration:1.274s}
@keyframes spin{to{transform:rotate(-360deg)}}
.chassis{animation:bump .42s ease-in-out infinite alternate}
@keyframes bump{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.puff{transform-box:fill-box;transform-origin:center;fill:#A6A6AE;opacity:0;animation:puff 1.1s ease-out infinite}
.p2{animation-delay:.35s}.p3{animation-delay:.7s}
@keyframes puff{0%{opacity:.45;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(120px,-36px) scale(2.4)}}
.foot{position:absolute;z-index:4;bottom:20px;left:0;right:0;text-align:center;font-size:13px}
.foot a{color:#A6A6AE}
/* Footer credit (Ron, after launch): one line above the statement link. The group name's trailing
   letter-spacing is trimmed so the separator has the same space on both sides. */
.credit{margin:0 0 6px;font-size:12px;font-weight:500;line-height:normal;color:#A6A6AE;white-space:nowrap}
.credit .sep{margin-inline:8px;color:rgba(245,245,244,.28)}
.credit .group{font-weight:700;letter-spacing:.18em;margin-inline-end:-.18em}
@media (max-width:359.98px){
.credit{font-size:11px}
.credit .sep{margin-inline:6px}
.credit .group{letter-spacing:.12em;margin-inline-end:-.12em}
}
@media (max-width:640px){
.top{padding:18px 16px}
.pill{height:32px;padding:0 12px;font-size:13px}
.hero{top:96px}
.mega{width:84vw}
.ghost{top:56%}
.sun{left:22%;top:70%}
.foot{bottom:14px}
}
@media (orientation:portrait){
.scene-l{display:none}
.scene-p{display:block}
}
@media (min-width:641px) and (max-height:780px){
.hero{top:92px}
.mega{width:clamp(260px,40vw,600px)}
}
/* S1 viewport fix: narrow portrait phones. The gap between the climbing jeep and the footer grows
   with the width only; below 390px it is under 8px, so the footer sits 8px from the bottom. */
@media (orientation:portrait) and (max-width:389.98px){
.foot{bottom:8px}
}
/* S1 viewport fix: wide windows. The hill grows with the width while the hero does not, so the
   landscape scene moves down continuously above 1.6:1 (zero at 1440x900 and below): 125px at
   2560x1080. Where that alone cannot clear the button without reaching the footer (windows wider
   than 1.8:1 and shorter than 800px, and 2:1 windows shorter than 1000px), the hero is compacted
   with vh sizes. 16:9 screens get the shift only. */
.scene-l{bottom:min(0px,24vh - 15vw)}
@media (min-aspect-ratio:9/5) and (max-height:799.98px),(min-aspect-ratio:2/1) and (max-height:999.98px){
.top{padding-block:clamp(14px,3vh,28px)}
.hero{top:calc(2 * clamp(14px,3vh,28px) + 40px)}
.mega{width:min(clamp(260px,40vw,600px),52vh)}
.hero h1{font-size:clamp(28px,min(3.4vw,5.4vh),52px)}
.bar{margin-top:clamp(8px,2vh,16px)}
.headline{margin-top:clamp(8px,2vh,14px)}
.status{margin-top:clamp(8px,2vh,18px)}
.cta{margin-top:clamp(12px,2.5vh,22px)}
.btn{height:44px}
.foot{bottom:clamp(12px,2vh,20px)}
}
/* S1 viewport fix: landscape shorter than 560px. Compact hero sized by height, and a third, flatter
   hill scene (.scene-s) sized by height, so the jeep passes under the button and above the footer. */
.scene-s{display:none}
@media (orientation:landscape) and (max-height:559.98px){
.top{padding-block:clamp(8px,3vh,14px)}
.pill{height:32px;padding:0 12px;font-size:13px}
.hero{top:calc(2 * clamp(8px,3vh,14px) + 38px)}
.mega{width:clamp(160px,52vh,280px)}
.bar{margin-top:clamp(6px,2vh,12px)}
.hero h1{font-size:clamp(18px,6vh,28px)}
.headline{margin-top:clamp(6px,2vh,12px)}
.status{margin-top:clamp(4px,1.5vh,10px)}
.cta{margin-top:clamp(8px,3vh,14px)}
.btn{height:44px}
.foot{bottom:clamp(6px,2vh,12px)}
.scene-l{display:none}
.scene-s{display:block;height:42%;overflow:visible}
.foot{display:flex;justify-content:center;align-items:baseline;gap:16px}
.credit{margin:0}
}
@media (prefers-reduced-motion:reduce){
.moving{display:none}
.parked{display:inline}
.spin,.chassis,.dot,.mega{animation:none}
.puff{display:none}
}