
:root { --canvas:#f7f7f4; --paper:#fff; --ink:#111415; --muted:#5f6668; --line:#cfd3cf; --yellow:#ffb000; --focus:#2479c5; --shell:min(1440px,calc(100vw - 64px)); }
* { box-sizing:border-box; }
html { overflow-x:clip; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--canvas); font-family:Inter,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration:none; } img { display:block; max-width:100%; } figure,p,h1 { margin:0; }
.shell { width:var(--shell); margin-inline:auto; }
.skip-link { position:fixed; top:10px; left:10px; z-index:100; padding:10px 14px; background:var(--yellow); transform:translateY(-160%); } .skip-link:focus { transform:none; }
:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.site-header { position:absolute; inset:0 0 auto; z-index:20; height:72px; } .nav { height:100%; display:flex; align-items:center; justify-content:space-between; }
.wordmark { display:inline-flex; align-items:center; gap:11px; font-size:20px; font-weight:600; letter-spacing:-.035em; white-space:nowrap; }
.wordmark-mark { display:flex; align-items:center; gap:2px; width:25px; height:22px; } .wordmark-mark i { display:block; width:5px; height:12px; border-radius:99px; background:currentColor; } .wordmark-mark i:nth-child(2) { height:21px; } .wordmark-mark i:nth-child(3) { height:16px; }
.header-note { display:flex; align-items:center; gap:26px; font-size:12px; font-weight:600; letter-spacing:.16em; } .header-rule { width:22px; height:1px; background:currentColor; }
.eyebrow { max-width:max-content; font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Homepage hero rules copied directly from styles.css. */
.hero { position: relative; min-height: 100dvh; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-layout { min-height: 100dvh; display: grid; grid-template-columns: minmax(360px, .8fr) minmax(600px, 1.2fr); align-items: center; gap: 34px; padding-top: 96px; padding-bottom: 32px; }
.hero-copy { position: relative; z-index: 3; padding-bottom: 8vh; }
.hero-copy .eyebrow { margin-bottom: 28px; }
.hero h1 { max-width: 660px; font-size: clamp(68px, 6vw, 100px); line-height: .91; letter-spacing: -.04em; font-weight: 600; }
.hero h1 span { color: var(--ink); }
.hero-lede { max-width: 500px; margin-top: 28px; font-size: clamp(17px, 1.35vw, 21px); line-height: 1.45; color: var(--muted); }
.hero .button { margin-top: 34px; }
.hero-stage { position: relative; align-self: stretch; min-height: 690px; isolation: isolate; --hero-art-scale: 1; --compact-shift: clamp(0px, calc(1200px - 100vw), 80px); }
.hero-art { position: absolute; top: 50%; left: calc(50% + var(--hero-art-x, 0px)); width: 760px; height: 867px; margin: -433.5px 0 0 -380px; transform: scale(var(--hero-art-scale)); transform-origin: center; }
.hero-disc { position: absolute; width: 615px; aspect-ratio: 1; right: 2%; top: 50%; border-radius: 50%; background: var(--yellow); z-index: -2; }
.hero-word { position: absolute; z-index: -1; color: var(--ink); font-size: 205px; line-height: .72; letter-spacing: -.09em; font-weight: 600; white-space: nowrap; }
.hero-word-go { top: calc(13% - var(--compact-shift)); left: -4%; }
.hero-word-evera { bottom: 9%; right: -8%; }
.hero-device { position: absolute; z-index: 2; width: 450px; right: 11%; top: calc(50% + 50px); transform: translateY(-47%) rotate(5deg); }
.hero-device img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 30px 45px rgba(17, 20, 21, .18)); }
.hero-note { position: absolute; z-index: 3; display: grid; grid-template-columns: 30px 1fr; gap: 10px; width: 185px; padding: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 14px 35px rgba(17, 20, 21, .08); font-size: 12px; line-height: 1.25; }
.hero-note span { color: var(--muted); font-size: 12px; }
.hero-note strong { font-weight: 600; }
.hero-note-vehicle { top: 23%; right: 0; }
.hero-route { position: absolute; inset: 0; pointer-events: none; }
.route-thread { position: absolute; display: block; height: 1px; background: var(--line); transform-origin: left center; }
.route-thread-a { width: 43vw; top: 24%; left: -4%; transform: rotate(-9deg); }
.route-thread-b { width: 47vw; right: -14%; bottom: 21%; transform: rotate(13deg); }
.route-node { position: absolute; width: 16px; height: 16px; border: 5px solid var(--canvas); border-radius: 50%; background: var(--ink); }
.route-node-a { left: 24%; top: 19%; }
.route-node-b { right: 19%; bottom: 29%; }


@media(max-width:1100px) { :root { --shell:min(100% - 40px,980px); } .hero-layout { grid-template-columns:.82fr 1.18fr; } .hero-stage { min-height:600px; } }
@media(max-width:980px) { :root { --shell:calc(100% - 32px); } .hero { min-height:auto; } .hero-layout { min-height:100dvh; display:flex; flex-direction:column; align-items:stretch; gap:18px; padding-top:98px; padding-bottom:16px; } .hero-copy { padding-bottom:0; } .hero-copy .eyebrow { margin-bottom:20px; } .hero h1 { font-size:clamp(58px,14vw,86px); line-height:.92; } .hero-lede { max-width:410px; margin-top:20px; font-size:16px; } .hero-stage { min-height:var(--hero-art-height,760px); flex:none; } .hero-art { top:32px; margin-top:0; transform-origin:top center; } }
@media(min-width:481px) and (max-width:980px) { .hero-layout { position:relative; display:block; min-height:100dvh; } .hero-copy { max-width:470px; } .hero h1 { font-size:clamp(56px,12vw,82px); } .hero-stage { position:absolute; inset:0; width:100%; height:100%; min-height:0; pointer-events:none; } .hero-art { top:270px; left:calc(63% + var(--hero-art-x,0px)); } .hero-disc { right:8%; } .hero-device { top:50%; } .hero-word-go { top:calc(30% + 50px); left:-30%; } .hero-word-evera { right:2%; bottom:12%; } }
@media(min-width:481px) and (max-width:680px) { .hero-layout { min-height:max(100dvh,900px); } .hero-copy { max-width:310px; } .hero h1 { font-size:clamp(44px,10vw,60px); } .hero-lede { max-width:300px; } .hero-art { top:320px; left:var(--tablet-portrait-left,80%); } .hero-disc { right:8%; } .hero-device { top:50%; } .hero-word-go { top:calc(30% + 50px); left:-38%; } .hero-word-evera { right:20%; bottom:12%; } }
@media(min-width:981px) and (max-width:1040px) { .hero-layout { grid-template-columns:minmax(360px,.8fr) minmax(0,1.2fr); } }
@media(max-width:480px) { .hero-layout { gap:8px; } .hero h1 { font-size:clamp(42px,11.5vw,64px); } .hero-lede { max-width:420px; } .hero-art { top:35px; } .hero-device { top:50%; } .hero-word-go { top:18%; left:7%; } }

.hero h1 { white-space:nowrap; }
.waitlist { display:flex; align-items:center; width:min(100%,565px); height:60px; margin-top:44px; border:1px solid var(--line); border-radius:999px; background:#fff; overflow:hidden; }
.waitlist:focus-within { outline:3px solid rgba(36,121,197,.2); border-color:var(--focus); }
.mail-icon { flex:none; margin-left:24px; color:var(--muted); font-size:20px; width:23px; height:23px; } .mail-icon svg { width:100%; height:100%; }
.waitlist input { flex:1; min-width:0; height:100%; padding:0 16px; border:0; outline:0; background:transparent; color:var(--ink); font-size:15px; }
.waitlist button { display:flex; align-items:center; justify-content:center; gap:20px; flex:none; height:100%; min-width:184px; padding:0 22px; border:0; border-radius:0 999px 999px 0; background:var(--ink); color:#fff; font-size:15px; font-weight:600; }
.waitlist button:hover { background:#303637; } .waitlist button span { font-size:21px; font-weight:400; }
.form-message { min-height:20px; margin-top:8px; color:#8a5500; font-size:14px; }
.benefits { display:flex; align-items:center; gap:20px; width:max-content; margin-top:52px; }
.benefit { display:flex; align-items:center; gap:12px; } .benefit-icon { display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:50%; background:#edf0ef; font-size:25px; }
.benefit strong,.benefit small { display:block; white-space:nowrap; font-size:13px; } .benefit small { margin-top:5px; color:var(--muted); }
@media(max-width:980px) { .waitlist { margin-top:28px; } .benefits { margin-top:22px; gap:12px; } .benefit-icon { width:40px; height:40px; font-size:22px; } .benefit strong,.benefit small { font-size:12px; } }
@media(max-width:680px) { .benefits { display:none; } }
@media(max-width:480px) { .waitlist { height:54px; } .waitlist button { min-width:132px; gap:5px; padding:0 12px; font-size:12px; } .waitlist input { padding:0 8px; font-size:13px; } .mail-icon { margin-left:16px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
.hero-icon svg { color: #2583cf; width: 1em; height: 1em; vertical-align: -.125em; }
.waitlist { display:inline-flex; justify-content:center; gap:24px; width:min(100%,340px); height:60px; padding:0 26px; border:0; background:var(--ink); color:#fff; font-size:16px; font-weight:600; cursor:pointer; transition:background .2s,transform .2s; }
.waitlist:hover { background:#303637; transform:translateY(-1px); }
.waitlist:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
.waitlist span { font-size:21px; font-weight:400; }
@media(max-width:480px) { .waitlist { width:min(100%,300px); height:54px; font-size:14px; } }
