/* Food Truck GPS — foodtruckgps.app
   Plain CSS, no build step. Brand purple from the wordmark; cool slate neutrals. */

:root{
  --purple-950:#1E0B3C;
  --purple-900:#2A1258;
  --purple-800:#4C1D95;
  --purple-600:#6D28D9;
  --purple-400:#A78BFA;
  --purple-200:#DDD6FE;
  --purple-100:#EDE9FE;
  --gold:#E0A32E;
  --gold-dark:#B9821B;
  --ink:#141A24;
  --body:#48505E;
  --muted:#6B7382;
  --line:#E3E6EC;
  --slate-50:#F7F8FA;
  --slate-100:#EEF0F4;
  --white:#fff;
  --shadow-sm:0 1px 2px rgba(20,26,36,.06), 0 2px 8px rgba(20,26,36,.05);
  --shadow-lg:0 12px 32px rgba(20,26,36,.12);
  --r-md:8px; --r-lg:14px; --r-xl:22px;
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--body);font:400 17px/1.6 var(--font-body);text-wrap:pretty}
h1,h2,h3{font-family:var(--font-display);color:var(--ink);letter-spacing:-.03em;margin:0;text-wrap:balance}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--purple-600);text-decoration:none}
a:hover{color:var(--purple-800)}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.mono{font-family:var(--font-mono)}
.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}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-600)}
.eyebrow--light{color:var(--purple-400)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px/1 var(--font-body);
  padding:15px 22px;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;
  transition:background .12s ease,color .12s ease,transform .12s ease}
.btn:active{transform:translateY(1px)}
.btn--sm{font-size:14px;padding:10px 16px}
.btn--block{width:100%}
.btn--gold{background:var(--gold);color:#231603}
.btn--gold:hover{background:var(--gold-dark);color:#fff}
.btn--primary{background:var(--purple-600);color:#fff}
.btn--primary:hover{background:var(--purple-800);color:#fff}
:focus-visible{outline:3px solid var(--purple-400);outline-offset:2px}

/* Owner strip */
.ownerbar{background:var(--purple-100);border-bottom:1px solid var(--purple-200)}
.ownerbar__in{max-width:1180px;margin:0 auto;padding:11px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  font-size:15px;color:var(--purple-950)}
.ownerbar__eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-800)}
.ownerbar__link{font-weight:600;color:var(--purple-800);border-bottom:1.5px solid var(--purple-800)}
.ownerbar__link:hover{color:var(--purple-950);border-color:var(--purple-950)}

/* Nav */
.nav{background:var(--white);border-bottom:1px solid var(--line)}
.nav__in{max-width:1180px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.nav__logo img{height:28px;width:auto}
.nav__links{display:flex;gap:26px;font-size:15px}
.nav__links a{color:var(--muted)}
.nav__links a:hover{color:var(--ink)}
.nav .btn{margin-left:auto}
.navtoggle{display:none;width:42px;height:42px;padding:0;background:none;border:1px solid var(--line);
  border-radius:var(--r-md);cursor:pointer;align-items:center;justify-content:center}
.navtoggle:hover{background:var(--slate-50)}
.navtoggle__bars,.navtoggle__bars::before,.navtoggle__bars::after{display:block;width:18px;height:2px;
  border-radius:2px;background:var(--ink);content:""}
.navtoggle__bars{position:relative}
.navtoggle__bars::before{position:absolute;top:-6px}
.navtoggle__bars::after{position:absolute;top:6px}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero__copy{background:var(--purple-800);color:#fff;padding:76px 56px 80px;display:flex;flex-direction:column;gap:22px;justify-content:center}
.hero__copy h1{font-size:clamp(38px,4vw,56px);line-height:1.03;color:#fff}
.lede{font-size:19px;line-height:1.55;color:var(--purple-200);max-width:44ch}
.hero__status{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--purple-400)}

.signup{display:flex;flex-direction:column;gap:10px;max-width:460px;margin-top:4px}
.signup__row{display:flex;gap:8px}
.signup input{flex:1 1 auto;min-width:0;font:400 16px/1 var(--font-body);padding:15px 14px;border-radius:var(--r-md);
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.10);color:#fff}
.signup input[name="ZIP"]{flex:0 0 110px}
.signup input::placeholder{color:rgba(255,255,255,.62)}
.signup input:focus{background:#fff;color:var(--ink);outline:3px solid var(--purple-400);outline-offset:1px}
.signup__note{font-size:13.5px;color:var(--purple-200)}

/* Map panel — drop your metro map in as assets/map.jpg (see chat for size). */
.hero__map{background:var(--slate-50);border-left:1px solid var(--line);padding:36px;display:flex}
.map{position:relative;flex:1;min-height:520px;border-radius:var(--r-xl);overflow:hidden;
  background-color:var(--slate-100);
  background-image:url('assets/map.jpg'),
    linear-gradient(rgba(20,26,36,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,26,36,.05) 1px,transparent 1px);
  background-size:cover,64px 64px,64px 64px;background-position:center;
  box-shadow:inset 0 0 0 1px var(--line)}
.map__hint{position:absolute;left:18px;bottom:18px;pointer-events:none;
  font:400 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:#8A929F;
  background:rgba(255,255,255,.78);padding:8px 12px;border-radius:var(--r-md)}
.pin{position:absolute;transform:translate(-50%,-100%);display:inline-flex;align-items:baseline;gap:7px;
  padding:9px 13px;border-radius:999px;font:400 13px/1 var(--font-mono);white-space:nowrap;box-shadow:var(--shadow-lg)}
.pin b{font-weight:500}
.pin--live{background:var(--purple-600);color:#fff}
.pin--plain{background:#fff;color:var(--purple-900)}
.pin--soon{background:var(--gold);color:#231603}
.map__you{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--purple-950);
  border:3px solid #fff;box-shadow:0 0 0 8px rgba(109,40,217,.22)}

/* How it works */
.how{background:var(--white);padding:80px 0}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px}
.step{padding-top:18px;border-top:3px solid var(--purple-600)}
.step--2{border-top-color:var(--purple-400)}
.step--3{border-top-color:var(--gold)}
.step__n{font-size:12px;letter-spacing:.14em;color:var(--muted)}
.step h2{font-size:22px;margin:8px 0 8px}
.step p{font-size:16px}

/* Customer feature */
.feature{background:var(--slate-50);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:88px 0}
.feature__in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.feature__text{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.feature__text h2{font-size:clamp(30px,3vw,40px);line-height:1.08}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:16px}
.ticks li{position:relative;padding-left:26px}
.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:2px;background:var(--purple-600)}
.feature__shots{position:relative;display:flex;justify-content:center;min-height:520px}
.phone{width:262px;height:520px;border-radius:36px;background:var(--purple-950);padding:11px;box-shadow:var(--shadow-lg)}
.phone span{display:flex;width:100%;height:100%;border-radius:26px;background:var(--slate-100);border:1px dashed #C7CCD6;
  align-items:center;justify-content:center;text-align:center;padding:20px;font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.phone--back{position:absolute;right:0;top:44px;transform:scale(.86) rotate(4deg);transform-origin:top right;z-index:-1;opacity:.94}

/* Owners + pricing */
.owners{background:var(--purple-950);color:var(--purple-200);padding:88px 0 96px}
.owners__head{max-width:720px;display:flex;flex-direction:column;gap:14px}
.owners__head h2{font-size:clamp(30px,3vw,42px);line-height:1.06;color:#fff}
.owners__head p{font-size:18px}
.owners__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin:52px 0 56px}
.obox h3{font-size:19px;color:#fff;margin-bottom:8px}
.obox p{font-size:15.5px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.plan{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);
  padding:30px 28px;display:flex;flex-direction:column;gap:20px}
.plan--featured{background:#fff;border-color:#fff;color:var(--body)}
.plan--featured .plan__name{color:var(--purple-600)}
.plan--featured .plan__price b{color:var(--ink)}
.plan--featured .ticks li::before{background:var(--purple-600)}
.plan__flag{position:absolute;top:-11px;left:28px;background:var(--gold);color:#231603;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 12px;border-radius:999px}
.plan__name{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple-400)}
.plan__price{margin-top:8px;font-family:var(--font-display);letter-spacing:-.03em}
.plan__price b{font-size:40px;font-weight:700;color:#fff}
.plan__price span{font-size:15px;font-family:var(--font-body);color:var(--muted);margin-left:4px}
.ticks--dark li::before{background:var(--gold)}
.paypal-slot{margin-top:auto;min-height:52px}
.plans__note{margin-top:26px;font-size:12.5px;letter-spacing:.06em;color:var(--purple-400)}

/* Document page (privacy) */
.doc{background:var(--white);padding:64px 0 88px}
.doc__in{max-width:720px;margin:0 auto;padding:0 28px}
.doc h1{font-size:clamp(32px,3.4vw,44px);line-height:1.06;margin:14px 0 20px}
.doc__lede{font-size:19px;line-height:1.6;color:var(--body)}
.doc__date{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:18px;
  padding-bottom:26px;border-bottom:1px solid var(--line)}
.doc h2{font-size:23px;margin:44px 0 14px}
.doc p{margin-bottom:14px}
.doc p b{color:var(--ink);font-weight:600}
.doc .ticks{margin:0 0 18px;gap:14px}
.doc .ticks li{padding-left:26px}
.doc__foot{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:14.5px;color:var(--muted)}

/* Footer */
.foot{background:var(--white);border-top:1px solid var(--line);padding:36px 0}
.foot__in{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;font-size:14.5px;color:var(--muted)}
.foot__logo{height:22px;width:auto}
.foot__links{margin-left:auto}

@media (max-width:980px){
  .hero{grid-template-columns:1fr}
  .hero__copy{padding:56px 28px 60px}
  .hero__map{border-left:0;border-top:1px solid var(--line);padding:24px}
  .map{min-height:400px}
  .feature__in{grid-template-columns:1fr}
  .feature__shots{min-height:0;justify-content:flex-start}
  .phone--back{display:none}
}
@media (max-width:560px){
  .signup__row{flex-direction:column}
  .signup input[name="ZIP"]{flex:1 1 auto}
  .navtoggle{display:flex;order:2;margin-left:auto}
  .navtoggle ~ .btn{order:3;margin-left:12px}
  .nav__links{display:none;order:4;flex-basis:100%;flex-direction:column;gap:0;
    margin-top:12px;border-top:1px solid var(--line)}
  .nav__links.is-open{display:flex}
  .nav__links a{padding:14px 2px;font-size:16px;color:var(--ink);border-bottom:1px solid var(--line)}
  .nav__links a:last-child{border-bottom:0}
  .foot__links{margin-left:0}
}