/* ======================================================================
   Drive360 marketing site — SHARED design system (July 29 2026)

   One page became six (/ + /websites /social /crm /dms /voice) for ad
   landing quality, so the CSS moved out of index.html into this file:
   ONE copy of the identity every page loads via

       <link rel="stylesheet" href="assets/site.css">

   Still no build step — plain files, rsync to deploy. Page-SPECIFIC
   styles (each product page's illustrated mock UI) stay in a small
   <style> block inside that page; this file is only what's shared.

   The identity is the July 22 2026 LIGHT redesign (owner: "white with
   greys and blues and yellows"), July 23 rebrand: white grounds, cool
   grey lines, brand navy, one golden-yellow accent. Monospace marks
   anything that reads like a lot tag (stock #s, prices, badges).
   ====================================================================== */
:root {
  --bg:        #FFFFFF;
  --bg-2:      #F4F6FA;
  --surface:   #FFFFFF;
  --line:      #E2E8F0;
  --ink:       #1A2B45;
  --ink-soft:  #46586F;
  --ink-faint: #7C8BA0;
  --navy:      #22365B;
  --navy-hi:   #2E4775;
  --blue:      #2456D6;
  --yellow:    #F2B01E;
  --yellow-hi: #F7C34D;
  --yellow-ink:#241A02;
  --good:      #0E9F6E;
  --shadow:    0 10px 30px rgba(26,43,69,.08);
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 40px); }
a { color: var(--blue); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

/* status chips — "Available now" / "Coming soon" style tags */
.now, .soon {
  display: inline-block;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 12px;
  vertical-align: middle;
}
.now  { color: #06714C; border: 1px solid rgba(14,159,110,.45); background: rgba(14,159,110,.08); }
.soon { color: #8A6410; border: 1px solid rgba(242,176,30,.55); background: rgba(242,176,30,.1); }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--blue);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-weight: 700; font-size: 16px;
  /* font-family/line-height pinned so <button class="btn"> renders
     identically to the anchors (many CTAs are buttons) */
  font-family: inherit; line-height: 1.6;
  padding: 13px 26px; border-radius: 10px;
  border: 1px solid transparent;
}
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-hi); }
.btn-yellow { background: var(--yellow); color: var(--yellow-ink); }
.btn-yellow:hover { background: var(--yellow-hi); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--ink-faint); }

/* ---------- nav ---------- */
header.site {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 0;
}
/* The Drive360 wordmark (July 23 2026): pure type, no artwork — "Drive"
   in brand navy, "360" in blue, a yellow full-stop. Crisp at any size,
   no font files, no SVG paths to maintain. */
.wordmark {
  font-size: 45px; font-weight: 850; letter-spacing: -.035em;
  color: var(--navy); text-decoration: none; line-height: 1;
}
.wordmark .n360 { color: var(--blue); }
.wordmark .dot { color: var(--yellow); }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-size: 15px; }
.nav-links a:hover { color: var(--ink); }
/* the page you're on reads as "here", not a link (multi-page, July 29) */
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.nav-links .btn { padding: 9px 18px; font-size: 14px; }
@media (max-width: 760px) { .nav-links a:not(.btn) { display: none; } }

/* ---------- hero (homepage + product pages) ---------- */
.hero {
  padding: clamp(52px, 8vw, 96px) 0 clamp(48px, 7vw, 84px);
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
@media (max-width: 880px) { .hero { grid-template-columns: 1fr; } }
h1 {
  font-size: clamp(36px, 6vw, 58px);
  line-height: 1.05; letter-spacing: -.03em; font-weight: 820;
  margin: 14px 0 20px;
  text-wrap: balance;
}
h1 .amp { color: var(--blue); }
.lede {
  font-size: clamp(17px, 2.2vw, 19.5px);
  color: var(--ink-soft); max-width: 56ch; margin-bottom: 28px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.trust { margin-top: 24px; font-size: 14.5px; color: var(--ink-faint); }
.trust b { color: var(--ink-soft); font-weight: 650; }

/* breadcrumb line above a product page's h1 — cheap orientation + the
   internal link Google likes; plain text, no schema needed */
.crumb { font-size: 13.5px; color: var(--ink-faint); margin-bottom: 10px; }
.crumb a { color: var(--ink-faint); text-decoration: none; }
.crumb a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- generic mock-app chrome ----------
   Every product page illustrates itself with a hand-built "screenshot"
   (owner decision July 29 2026: illustrated mock UIs, no image files).
   This is the shared window chrome — the browser-ish bar with three dots
   and a URL — identical to the homepage's mock dealer site. What's
   INSIDE the window is page-specific CSS in each page's own <style>. */
.mockapp {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  max-width: 430px; width: 100%;
  justify-self: center;
  overflow: hidden;
  position: relative;
}
.mk-bar {
  display: flex; align-items: center; gap: 6px;
  background: var(--bg-2); border-bottom: 1px solid var(--line);
  padding: 9px 12px;
}
.mk-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D4DBE5; }
.mk-url {
  flex: 1; margin-left: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
  padding: 3px 10px;
}

/* the homepage's mock DEALER SITE lives inside .mockapp too; its interior
   pieces (ms-*) are shared because /websites shows the same illustration */
.ms-nav {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--navy); color: #fff;
  padding: 9px 14px; font-size: 10.5px; font-weight: 700;
}
.ms-nav .lnk { color: rgba(255,255,255,.65); font-weight: 600; margin-right: 10px; }
.ms-nav span:last-child { color: var(--yellow-hi); }
.ms-hero {
  /* radial, NOT linear: "<size> at <position>" is radial-gradient syntax —
     linear-gradient() rejects it and drops the whole declaration, which left
     this band with no background and its white headline invisible (fixed
     July 29 2026) */
  background: radial-gradient(120% 120% at 15% 0%, #2E4775 0%, var(--navy) 60%);
  padding: 18px 14px 16px;
}
.ms-hero .h1 { color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.ms-hero .h2 { color: rgba(255,255,255,.65); font-size: 10.5px; margin: 2px 0 12px; }
.ms-cta {
  display: inline-block; background: var(--yellow); color: var(--yellow-ink);
  border-radius: 6px; font-size: 11px; font-weight: 800; padding: 6px 12px;
}
.ms-search {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--line); background: #fff;
  padding: 8px 14px; font-size: 10.5px; color: var(--ink-faint);
}
.ms-search .box {
  flex: 1; border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 10px; background: var(--bg-2);
}
.ms-cars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 14px 6px; }
.ms-car { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; position: relative; }
.ms-car .ph { aspect-ratio: 4/3; background: linear-gradient(135deg, #DEE6F2 0%, #C4D0E2 100%); }
.ms-car .ph svg { display: block; width: 100%; height: 100%; }
.ms-car .inf { padding: 6px 8px 8px; }
.ms-car .ttl {
  font-size: 9px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-bottom: 3px;
}
.ms-car .meta { display: flex; justify-content: space-between; align-items: baseline; }
.ms-car .p { font-family: var(--mono); font-size: 10.5px; font-weight: 700; color: var(--navy); }
.ms-car .mi { font-size: 8.5px; color: var(--ink-faint); }
.ms-car .pay { font-family: var(--mono); font-size: 8.5px; font-weight: 700; color: var(--good); margin-top: 2px; }
.ms-car .tag {
  position: absolute; top: 5px; left: 5px;
  font-family: var(--mono); font-size: 7.5px; font-weight: 800; letter-spacing: .08em;
  background: var(--navy); color: #fff; border-radius: 999px; padding: 2px 7px;
}
.ms-car .tag.deal { background: var(--good); }
.ms-car .tag.gold { background: var(--yellow); color: var(--yellow-ink); }
.ms-reviews {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px 12px; font-size: 10px; color: var(--ink-soft);
}
.ms-reviews .stars { color: #F5A623; letter-spacing: 1px; }
.ms-reviews b { color: var(--ink); }
.ms-chat {
  position: absolute; right: 14px; bottom: 14px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; box-shadow: 0 6px 18px rgba(26,43,69,.35);
}

/* ---------- sections ---------- */
section { padding: clamp(48px, 7vw, 84px) 0; }
section.alt { background: var(--bg-2); border-block: 1px solid var(--line); }
h2 {
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: -.025em; font-weight: 780;
  margin: 12px 0 14px; text-wrap: balance;
}
.sec-sub { color: var(--ink-soft); max-width: 64ch; font-size: 17px; }

/* ---------- homepage product cards (July 29 2026 restructure) ----------
   The homepage went from full pricing tables to a TEASER card per
   product — "from $X/mo", a few plain-language bullets, and a link to
   the product's own page where the real depth lives (ad landing pages).
   The live product (Websites) gets a full-width feature card;
   the rest sit in a two-column grid below it. */
.prodcards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 40px; }
@media (max-width: 880px) { .prodcards { grid-template-columns: 1fr; } }
.prodcard {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow);
  padding: 26px; display: flex; flex-direction: column;
}
.prodcard.wide { grid-column: 1 / -1; border-color: rgba(242,176,30,.75); border-width: 2px; }
.prodcard h3 { font-size: 22px; letter-spacing: -.02em; margin: 10px 0 6px; }
.prodcard h3 a { color: var(--ink); text-decoration: none; }
.prodcard h3 a:hover { color: var(--blue); }
.prodcard .one { color: var(--ink-soft); font-size: 15.5px; margin-bottom: 12px; }
.prodcard ul { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; flex: 1; }
.prodcard li { font-size: 14.5px; color: var(--ink-soft); padding-left: 20px; position: relative; }
.prodcard li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
/* the price teaser: mono like everything money on this site */
.fromline { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 14px; }
.fromline span { color: var(--ink-faint); font-weight: 500; }
.prodcard .row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
/* the wide (Websites) card lays its bullets in two columns on desktop */
@media (min-width: 881px) { .prodcard.wide ul { grid-template-columns: 1fr 1fr; column-gap: 32px; } }

/* ---------- "why buy from us" cards ---------- */
.whyus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
@media (max-width: 880px) { .whyus { grid-template-columns: 1fr; } }
.why {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow);
  padding: 22px 24px;
}
.why .ico { font-size: 26px; line-height: 1; margin-bottom: 10px; }
.why h3 { font-size: 17px; letter-spacing: -.01em; margin-bottom: 6px; }
.why p { font-size: 14.5px; color: var(--ink-soft); }

/* ---------- product-page feature grid ---------- */
.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 36px; }
@media (max-width: 880px) { .feats { grid-template-columns: 1fr; } }
.feat {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow);
  padding: 22px 24px;
}
.feat .ico { font-size: 26px; line-height: 1; margin-bottom: 10px; }
.feat h3 { font-size: 17px; letter-spacing: -.01em; margin-bottom: 6px; }
.feat p { font-size: 14.5px; color: var(--ink-soft); }

/* ---------- pricing tiers ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 880px) { .plans { grid-template-columns: 1fr; } }
.plan {
  border: 1px solid var(--line); border-radius: 14px; padding: 26px;
  background: var(--surface);
  box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  position: relative;
}
.plan.hot { border-color: rgba(242,176,30,.75); border-width: 2px; }
.plan .pop {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--yellow); color: var(--yellow-ink);
  font-family: var(--mono); font-size: 10.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px; padding: 4px 14px; white-space: nowrap;
}
.plan .tname {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--blue);
}
.plan .price { font-size: 40px; font-weight: 820; letter-spacing: -.03em; margin: 8px 0 2px; color: var(--navy); }
.plan .price span { font-size: 15px; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
.plan .for { color: var(--ink-soft); font-size: 14px; margin-bottom: 16px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 9px; flex: 1; }
.plan li { font-size: 14.5px; color: var(--ink-soft); padding-left: 20px; position: relative; }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--good); font-weight: 700; }
.plan li.hdr { color: var(--ink); font-weight: 650; padding-left: 0; }
.plan li.hdr::before { content: ""; }
.plan .cta { text-align: center; }
.plan.solo { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px 40px; align-items: center; }
.plan.solo ul { margin-bottom: 0; }
.plan.solo .cta { text-align: left; margin-top: 18px; }
@media (max-width: 640px) { .plan.solo { grid-template-columns: 1fr; } }
.fineprint { margin-top: 18px; font-size: 13.5px; color: var(--ink-faint); max-width: 75ch; }

/* compact extras strip — one bordered card with a tight list */
.extras {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface); box-shadow: var(--shadow);
  padding: 22px 26px; margin-top: 28px;
}
.extras h4 { font-size: 15px; letter-spacing: -.01em; margin-bottom: 10px; }
.extras ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.extras li { font-size: 14.5px; color: var(--ink-soft); padding-left: 20px; position: relative; }
.extras li::before { content: "+"; position: absolute; left: 0; color: var(--blue); font-weight: 800; }
.extras .pr { font-family: var(--mono); font-weight: 700; color: var(--navy); }

/* demo links row */
.demo-row {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-top: 22px;
}
.demo-row .lbl { font-size: 14.5px; color: var(--ink-soft); font-weight: 650; }

/* dealer story */
.story {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--yellow);
  border-radius: 14px; padding: clamp(24px, 4vw, 40px);
  margin-top: 36px; box-shadow: var(--shadow);
}
@media (max-width: 640px) { .story { grid-template-columns: 1fr; } }
.story .mark { font-size: 44px; line-height: 1; color: var(--yellow); font-family: Georgia, serif; }
.story p { font-size: clamp(16px, 2vw, 18.5px); color: var(--ink); max-width: 62ch; }
.story .who { margin-top: 14px; color: var(--ink-faint); font-size: 14.5px; }

/* cta band — the one deliberately dark moment on each page */
.band {
  text-align: center;
  background: var(--navy); color: #fff;
  padding: clamp(48px, 7vw, 80px) clamp(20px, 4vw, 40px);
}
.band h2 { margin-bottom: 10px; color: #fff; }
.band .sec-sub { margin: 0 auto 30px; color: #B9C4D6; }
.band .fine { margin-top: 18px; font-size: 13.5px; color: #8FA0BA; }
.band .fine a { color: var(--yellow-hi); }

/* faq */
.faq { max-width: 780px; margin-top: 32px; }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary {
  cursor: pointer; font-weight: 650; font-size: 16.5px;
  padding: 14px 0; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
}
.faq summary::after { content: "+"; color: var(--blue); font-family: var(--mono); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-soft); padding: 0 0 16px; font-size: 15px; max-width: 68ch; }

/* ---------- footer ----------
   Multi-page (July 29 2026): the footer is now the site's full product
   directory — every page cross-links every product page, good for both
   visitors and crawlers. */
footer.site {
  border-top: 1px solid var(--line);
  padding: 34px 0 44px;
  font-size: 14px; color: var(--ink-faint);
  background: var(--bg-2);
}
.foot { display: flex; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a { color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot .legal { flex-basis: 100%; margin-top: 10px; }

/* ---------- lead box (modal, markup injected by assets/site.js) ---------- */
.leadbox-overlay {
  position: fixed; inset: 0; z-index: 50;
  display: none; align-items: center; justify-content: center;
  background: rgba(26,43,69,.45); padding: 20px;
}
.leadbox-overlay.open { display: flex; }
.leadbox {
  position: relative; width: 100%; max-width: 460px;
  max-height: 92vh; overflow: auto;
  background: #fff; border-radius: 16px; padding: 28px;
  box-shadow: 0 24px 64px rgba(26,43,69,.3);
}
.leadbox h3 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 4px; padding-right: 30px; }
.leadbox .sub { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 6px; }
.leadbox .x {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--bg-2); color: var(--ink-soft);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.leadbox .x:hover { background: var(--line); color: var(--ink); }
.leadbox label { display: block; font-size: 13px; font-weight: 650; color: var(--ink-soft); margin: 12px 0 4px; }
.leadbox input, .leadbox textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font: inherit; font-size: 15px;
  color: var(--ink); background: #fff;
}
.leadbox textarea { min-height: 68px; resize: vertical; }
.leadbox .send { margin-top: 18px; width: 100%; }
.leadbox .fine { font-size: 12px; color: var(--ink-faint); margin-top: 10px; text-align: center; }
.leadbox .err { display: none; color: #B42318; font-size: 13.5px; margin-top: 10px; text-align: center; }
.leadbox .done { display: none; text-align: center; padding: 22px 6px; }
.leadbox .done .big { font-size: 40px; margin-bottom: 8px; }
/* honeypot — offscreen, never display:none (some bots check) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }