/* TrueMile EV — the public page. Self-hosted, no font or script from anywhere else.
   Two themes, the app's own: deep navy after dark, warm ivory by day. */
:root, :root[data-theme="dark"]{
  --bg:#070c16; --card:#101a2c; --card2:#0c1524; --ink:#e8eef7; --muted:#8fa1b8; --dim:#5d6e85;
  --line:#1d2b42; --cyan:#37b6ff; --green:#00e676; --blue:#2e9be6; --amber:#ffb300; --red:#ff5252;
  --glow:rgba(30,110,190,.22); --glow2:rgba(0,180,120,.07); --shadow:rgba(0,0,0,.5);
  --bezel:#16202f;
  /* the app's own nav colours, one per screen */
  --c-board:#00e676; --c-charge:#00b0ff; --c-live:#ff1744; --c-map:#ff6d00; --c-report:#ffd600;
  --c-wear:#37b6ff; --c-auto:#b388ff;
}
:root[data-theme="light"]{
  --bg:#f5f1e8; --card:#ffffff; --card2:#ede8db; --ink:#1b2330; --muted:#5c6675; --dim:#8a93a3;
  --line:#ded7c7; --cyan:#0e7490; --green:#15803d; --blue:#2563eb; --amber:#b45309; --red:#b91c1c;
  --glow:rgba(14,116,144,.10); --glow2:rgba(21,128,61,.06); --shadow:rgba(90,80,60,.18);
  --bezel:#d9d2c2;
  --c-board:#15803d; --c-charge:#0369a1; --c-live:#b91c1c; --c-map:#c2410c; --c-report:#a16207;
  --c-wear:#0e7490; --c-auto:#6d28d9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);
  line-height:1.6;overflow-x:hidden;
  background-image:radial-gradient(900px 520px at 72% -12%,var(--glow),transparent 60%),
                   radial-gradient(760px 440px at 8% 26%,var(--glow2),transparent 60%);}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:1060px;margin:0 auto;padding:0 16px}

/* ── splash ── the app's, ported from ui/SplashScreen.kt ──────────────────── */
/* Fixed navy, not a theme token: the app's splash is #0A1628 in both themes. */
#splash{position:fixed;inset:0;z-index:50;background:#0a1628;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .45s ease,visibility .45s}
#splash.gone{opacity:0;visibility:hidden}
#splashCanvas{position:absolute;inset:0;transition:opacity .3s ease}
#splash.icon #splashCanvas{opacity:0}

/* the white collision flash: 90ms in, then away with the electrons */
#splash .flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#splash.hit .flash{animation:flash 1.1s ease-out forwards}
@keyframes flash{0%{opacity:0}8%{opacity:.85}100%{opacity:0}}

#splash .lockup{position:relative;display:flex;flex-direction:column;align-items:center}
/* the bolt snaps on at the collision and fades as the icon takes its place */
#splash .bolt{position:absolute;top:50%;left:50%;width:58px;height:58px;margin:-29px 0 0 -29px;
  opacity:0;transition:opacity .22s ease}
#splash.hit .bolt{opacity:1;transition:none}
#splash.icon .bolt{opacity:0}
/* 130dp in the app; the same absolute size here, shrinking only on a small phone */
#splash .mark{width:min(130px,34vw);height:min(130px,34vw);display:block;opacity:0;transform:scale(0)}
#splash.icon .mark{animation:spring .5s cubic-bezier(.2,1.5,.4,1) forwards}
#splash.named .mark{animation:spring .5s cubic-bezier(.2,1.5,.4,1) forwards,
  beat .96s ease-in-out .5s infinite}
@keyframes spring{from{opacity:1;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

/* name + tagline sit 120dp below centre and rise 36px into place over 700ms */
#splash .name{position:absolute;top:calc(50% + 120px);left:0;right:0;text-align:center;
  opacity:0;transform:translateY(36px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.4,0,.2,1)}
#splash.named .name{opacity:1;transform:none}
#splash .word{font-size:30px;font-weight:900;letter-spacing:3px;color:#fff}
#splash .word span{color:#00e5ff}
#splash .tag{font-size:12px;letter-spacing:.4px;color:rgba(255,255,255,.45);margin-top:6px}
#splash .skip{position:absolute;bottom:56px;left:0;right:0;text-align:center;
  color:rgba(255,255,255,.28);font-size:.72em;letter-spacing:1px;text-transform:uppercase;
  opacity:0;transition:opacity .4s ease}
#splash.named .skip{opacity:1}

/* ── header — one row on a desktop, two tidy rows on a phone ────────────────── */
header.bar{display:flex;align-items:center;gap:8px;padding:12px 0 4px;flex-wrap:wrap}
.bar .stores{display:flex;gap:8px;margin-left:auto;flex-wrap:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 14px;
  border-radius:11px;font-weight:700;font-size:.88em;border:1px solid var(--line);color:var(--ink);
  background:transparent;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--dim);text-decoration:none}
.btn.primary{background:linear-gradient(92deg,var(--cyan),var(--green));color:#04121f;border:0}
/* the light theme's darker gradient needs white text to reach 4.5:1 at both ends */
:root[data-theme="light"] .btn.primary{color:#fff}
.btn[aria-disabled="true"]{opacity:.45;cursor:default}
.btn svg{width:16px;height:16px;flex:none}

/* ── title ──────────────────────────────────────────────────────────────────── */
.hero{text-align:center;padding:4px 0 0}
.hero h1{font-size:clamp(1.8em,6vw,2.6em);margin:0;letter-spacing:.5px;font-weight:800}
.hero h1 span{background:linear-gradient(92deg,var(--cyan),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── 3D carousel ────────────────────────────────────────────────────────────── */
/* overflow-x:clip: on a phone the side screens reach past the edge and would widen the whole page (the
   browser then shrinks everything to fit); clip, unlike hidden, keeps the 3D ring and the vertical overflow */
.stage{position:relative;height:456px;perspective:1250px;margin:10px 0 0;overflow-x:clip}
.ring{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .75s cubic-bezier(.22,.9,.28,1)}
.slide{position:absolute;left:50%;top:0;width:214px;height:440px;margin-left:-107px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .5s ease,filter .5s ease;backface-visibility:hidden}
.slide[data-far="1"]{opacity:.34;filter:saturate(.55)}
/* A drawn screen keeps the captures' own proportions (540 x 990 plus the 6px bezel); a photographed
   one is fitted to its picture (.fit, set by site.js once the file loads), so the frame is exactly the
   screenshot plus the bezel and the app's bottom bar sits on the frame's bottom edge. */
.phone{flex:none;width:100%;aspect-ratio:214/382;border-radius:28px;position:relative;overflow:hidden;
  background:var(--bezel);border:1px solid var(--line);box-shadow:0 20px 46px var(--shadow)}
.phone.fit{aspect-ratio:auto;padding:6px}
.phone.fit .shot{position:static;display:block;width:100%;height:auto;object-fit:fill}
.phone .screen{position:absolute;inset:6px;border-radius:23px;background:var(--bg);overflow:hidden;
  display:flex;flex-direction:column}
/* contain, not cover: a real screenshot arrives with the status bar, the tour's banner and the
   Android nav bar cropped off, so its aspect is shorter than the frame. Cover would answer that by
   slicing 14% off each SIDE of the screen. Contained and top-anchored, the whole screen shows and
   the leftover strip reads as the phone's chin - so it needs the screen's own background, not the
   bezel's. */
.phone .shot{position:absolute;inset:6px;border-radius:23px;width:calc(100% - 12px);height:calc(100% - 12px);
  object-fit:contain;object-position:top center;background:var(--bg)}
.phone .status{display:flex;justify-content:space-between;padding:6px 10px 2px;font-size:8px;color:var(--dim)}
.phone .body{flex:1;padding:6px 8px;display:flex;flex-direction:column;gap:5px;overflow:hidden}
/* the app's own bottom bar: bolt, five labelled tabs (the current one in a pill of its colour), gear */
.phone .navbar{display:flex;justify-content:space-between;align-items:center;gap:1px;
  background:var(--card2);border-top:1px solid var(--line);padding:5px 4px 6px}
.phone .navbar svg{width:12px;height:12px;color:var(--dim);display:block}
.phone .nb-end{flex:none;padding:0 2px}
.phone .nb-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 0;
  border-radius:8px;color:var(--dim)}
.phone .nb-tab i{font-style:normal;font-size:6px;line-height:1;letter-spacing:.1px}
.phone .nb-tab.on{color:var(--c);background:color-mix(in srgb,var(--c) 18%,transparent);font-weight:700}
.phone .nb-tab.on svg{color:var(--c)}

/* a real screenshot covers the drawn screen once it loads; shapes differ per device */
.watch .face .shot{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.watch .fallback{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:100%;height:100%}
.head .display .shot{position:absolute;inset:0;width:100%;height:100%;border-radius:9px;object-fit:cover}
.head .fallback{display:flex;flex-direction:column;width:100%;height:100%}

/* the watch and the car's own screen are not phones */
.watch{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.watch .face{width:176px;height:176px;border-radius:50%;background:var(--bg);border:10px solid var(--bezel);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  box-shadow:0 20px 46px var(--shadow)}
.head{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.head .unit{width:206px;border-radius:14px;background:var(--bezel);border:1px solid var(--line);
  padding:7px;box-shadow:0 20px 46px var(--shadow)}
/* 16:9, the Desktop Head Unit's own capture shape (shots/README.md: car-launch-menu.png) */
.head .display{border-radius:9px;background:var(--bg);overflow:hidden;aspect-ratio:16/9;
  display:flex;flex-direction:column}
.head .hbar{display:flex;gap:5px;align-items:center;padding:3px 7px;border-bottom:1px solid var(--line)}
.head .hbar svg{width:10px;height:10px;color:var(--dim)}
.head .aa-title{font-size:8.5px;font-weight:700;color:var(--ink);line-height:1.2}
/* the launch car app's menu: a list of rows, as Android Auto draws a list template */
.head .aa-list{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;padding:0 5px;min-height:0}
.head .aa-row{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:2px 3px;
  border-bottom:1px solid var(--line);line-height:1.15}
.head .aa-row:last-child{border-bottom:0}
.head .aa-row span{display:flex;flex-direction:column;min-width:0}
.head .aa-row b{font-size:7.5px;color:var(--ink);white-space:nowrap}
.head .aa-row i{font-style:normal;font-size:6px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.head .aa-row svg{width:9px;height:9px;color:var(--dim);flex:none}
.head .vents{display:flex;justify-content:space-between;padding:6px 4px 0}
.head .vents i{display:block;width:34px;height:5px;border-radius:3px;background:var(--line)}

/* mock-screen parts */
.t{background:var(--card);border-radius:7px;padding:5px 6px;min-width:0}
.t .k{font-size:6.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.t .v{font-size:12px;font-weight:800;line-height:1.15;white-space:nowrap}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.row{display:flex;gap:5px;align-items:center}
.cyan{color:var(--cyan)}.green{color:var(--green)}.amber{color:var(--amber)}.blue{color:var(--blue)}.red{color:var(--red)}
.muted{color:var(--muted)}
.bar-s{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.bar-s i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--green))}
.listrow{display:flex;justify-content:space-between;font-size:7.5px;color:var(--muted);
  border-bottom:1px solid var(--line);padding:3px 1px}
.mapbg{position:absolute;inset:0;background:
  linear-gradient(90deg,transparent 49%,var(--line) 49.5%,var(--line) 50.5%,transparent 51%),
  linear-gradient(0deg,transparent 39%,var(--line) 39.5%,var(--line) 40.5%,transparent 41%),
  linear-gradient(72deg,transparent 64%,var(--line) 64.4%,var(--line) 65.4%,transparent 66%),var(--card2)}
.pin{position:absolute;width:9px;height:9px;border-radius:50%;border:2px solid var(--bg)}
.dots{display:flex;gap:4px;justify-content:center;padding-top:5px}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--line);display:block}
.dots i.on{background:var(--cyan)}

/* ── the app's own bottom bar, doing the steering ───────────────────────────── */
.appnav{display:flex;justify-content:center;gap:2px;flex-wrap:wrap;margin:6px 0 0}
.appnav button{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:56px;
  padding:8px 6px;border-radius:16px;border:0;background:transparent;color:var(--dim);
  font:inherit;font-size:.7em;font-weight:600;letter-spacing:.2px;cursor:pointer;transition:background .2s}
.appnav button svg{width:22px;height:22px;transition:width .2s,height .2s}
.appnav button[aria-selected="true"]{color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent);font-weight:700}
.appnav button[aria-selected="true"] svg{width:26px;height:26px;color:var(--c)}
.appnav .soon::after{content:"soon";display:block;font-size:.72em;font-weight:600;color:var(--dim);letter-spacing:.4px}

/* ── the write-up under the carousel ───────────────────────────── */
.readout{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 24px;
  margin-top:14px;min-height:190px}
.readout h2{margin:0 0 2px;font-size:1.3em;letter-spacing:.3px}
.readout .lede{color:var(--ink);font-size:1.02em;margin:0 0 10px}
.readout p.detail{color:var(--muted);margin:0 0 12px;max-width:72ch}
.readout ul{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.readout li{font-size:.84em;color:var(--muted);background:var(--card2);border:1px solid var(--line);
  border-radius:999px;padding:5px 12px}
.fade-in{animation:fade .45s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── promises + footer ─────────────────────────────────────────────────────── */
section{padding:26px 0}
h2.sec,h3.sec{font-size:.85em;letter-spacing:3px;text-transform:uppercase;color:var(--cyan);margin:0 0 16px}
.promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.promise div{border-left:2px solid var(--green);padding-left:14px}
.promise b{display:block}
.promise span{color:var(--muted);font-size:.95em}
.promise span span{font-size:inherit}
footer{border-top:1px solid var(--line);margin-top:16px;padding:22px 0 40px;color:var(--muted);
  font-size:.9em;text-align:center}
footer a{margin:0 7px;display:inline-block}

/* ── launch: which car (the words: assets/lib/launch.js) ─── */
.launchline{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 20px;
  display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline}
.launchline b{color:var(--ink)}
.launchline span,.launchline a{font-size:.95em}
.launchline span{color:var(--muted)}
.note{color:var(--muted);font-size:.88em}

/* ── Plans & pricing (#pricing; the words: assets/pricing/plans.js) ──
   One column on a phone; three cards side by side once each can be about 270px wide. */
.pricing-lead{margin:0 0 16px;max-width:72ch}
.pricing{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0 0 16px}
@media (min-width:880px){.pricing{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pp{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;min-width:0;
  overflow-wrap:break-word}
.pp-max{border-color:var(--c-auto)}
.pp h3{margin:0 0 4px;font-size:1.25em;letter-spacing:.2px}
.pp p{margin:0}
.pp-price{color:var(--green);font-size:1.05em}
.pp-price b{font-size:1.45em;font-weight:800}
.pp-alt{color:var(--muted);font-size:.9em}
.pp .pp-who{margin-top:10px;color:var(--ink)}
.pp .pp-intro{margin-top:12px;font-weight:700;font-size:.93em}
.pp-checks{list-style:none;margin:10px 0 0;padding:0;font-size:.93em}
.pp-checks li{position:relative;padding-left:1.6em;margin-bottom:6px}
/* a drawn tick, not a character: nothing for a screen reader to read out on every line */
.pp-checks li::before{content:"";position:absolute;left:.4em;top:.3em;width:.38em;height:.7em;
  border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(45deg)}
.pp-limits{margin:14px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:grid;gap:10px}
.pp-limits dt{font-size:.74em;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}
.pp-limits dd{margin:2px 0 0;font-size:.93em}
.pp-limits dd.pp-off{color:var(--muted)}
.pp-note{display:block;color:var(--muted);font-size:.92em;margin-top:3px}
.pricing-notes{color:var(--muted);font-size:.92em;overflow-wrap:break-word}
.pricing-notes p{margin:0 0 8px;max-width:80ch}
.pricing-notes .pp-cta{margin:14px 0 0;font-size:1rem}
.pricing-notes .btn{white-space:normal;text-align:center}
.guarantee{border-left:2px solid var(--amber);padding:2px 0 2px 14px;margin-top:18px;font-size:.9em}
.guarantee b{display:block}
.guarantee span{color:var(--muted);display:block}

/* ── the web dashboard ── */
.dash{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}
.dash > div{flex:1 1 320px;min-width:0}
.dash p{margin:0 0 8px}
.dash p:last-child{margin-bottom:0}

/* ── the beta for other EVs (#beta; the app's "coming soon" line links here) ── */
.beta > p{margin:0 0 16px;max-width:72ch}
.beta .promise{margin-bottom:18px}
.beta-gets{margin:4px 0 0;padding-left:1.1em;color:var(--muted);font-size:.95em}
.beta-gets li{margin-bottom:4px}
.beta-h{display:block;margin:0 0 6px}
.beta-steps{margin:0 0 12px;padding-left:1.3em;color:var(--muted)}
.beta-steps li{margin-bottom:6px}
.beta .btn{margin-top:6px}
.beta > p.beta-join{margin:0 0 8px;font-weight:600}
#beta,#dashboard,#pricing{scroll-margin-top:12px}

/* ── email-link landing (confirmed.html) and the product page's notice (assets/auth-landing.js) ── */
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;letter-spacing:.3px}
.brand:hover{text-decoration:none}
.brand img{width:32px;height:32px;border-radius:8px;display:block}
.brand b{color:var(--cyan)}
.landing{display:block;max-width:600px;margin:9vh auto 0;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--cyan);border-radius:16px;padding:24px 24px 20px;box-shadow:0 20px 46px var(--shadow)}
.landing[data-tone="ok"]{border-left-color:var(--green)}
.landing[data-tone="warn"]{border-left-color:var(--amber)}
.landing h1{font-size:1.45em;line-height:1.25;margin:0 0 10px;letter-spacing:.2px}
.landing p{margin:0 0 12px;color:var(--muted)}
.landing p.lead{color:var(--ink);font-size:1.05em}
.landing p.detail{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font-size:.92em;overflow-wrap:anywhere}
.landing p.detail .k{color:var(--dim)}
.landing .links{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 14px}
.landing .links .btn{white-space:normal;text-align:center}
.landing .note{margin:0}
/* the report check (verify.html, assets/verify-page.js): the record's rows */
.landing dl.vrows{display:grid;grid-template-columns:auto 1fr;margin:14px 0 16px;border-top:1px solid var(--line)}
.landing dl.vrows dt,.landing dl.vrows dd{margin:0;padding:8px 0;border-bottom:1px solid var(--line)}
.landing dl.vrows dt{color:var(--dim);padding-right:14px}
.landing dl.vrows dd{color:var(--ink);font-weight:600;overflow-wrap:anywhere;min-width:0}
.landing dl.vrows dd.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84em;font-weight:500}
footer .fine{margin-top:10px}
.authnote{position:relative;display:flex;flex-direction:column;gap:4px;margin:10px 0 0;
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:12px;
  padding:12px 46px 12px 16px}
.authnote[data-tone="ok"]{border-left-color:var(--green)}
.authnote[data-tone="warn"]{border-left-color:var(--amber)}
.authnote span{color:var(--muted);font-size:.95em}
.authnote .detail{overflow-wrap:anywhere;font-size:.88em}
.authnote .help{font-size:.88em}
.authnote .x{position:absolute;top:6px;right:6px;width:34px;height:34px;border-radius:9px;border:0;
  background:transparent;color:var(--muted);font-size:1.3em;line-height:1;cursor:pointer}
.authnote .x:hover{background:var(--card2);color:var(--ink)}

@media (max-width:640px){
  header.bar{padding-bottom:2px}
  .bar .stores{margin-left:auto}
  .btn{font-size:.82em;padding:8px 12px}
  .readout{padding:18px}
  .landing{margin-top:5vh;padding:20px 18px 16px}
  .landing h1{font-size:1.3em}
  .stage{height:420px;margin-left:-16px;margin-right:-16px} /* clip at the screen's edge, not the gutter */
  .slide{width:186px;height:404px;margin-left:-93px}
  .watch .face{width:150px;height:150px}
  .head .unit{width:180px}
  .appnav button{min-width:50px;font-size:.66em}
  .appnav button svg{width:20px;height:20px}
  .appnav button[aria-selected="true"] svg{width:23px;height:23px}
}
@media (max-width:400px){
  .bar .stores{width:100%;margin-left:0;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .ring{transition:none}
}