:root{
  --ink:#1a2233;
  --ink-soft:#5b6577;
  --ink-faint:#8b94a5;
  --bg:#f4f7fb;
  --card:#ffffff;
  --band:#eef3f9;
  --blue:#1f5fa9;
  --blue-deep:#17457c;
  --blue-wash:#e6eef8;
  --hairline:#e5eaf1;
  --hairline-hard:#cfd8e5;
  --green:#147a3d;
  --green-wash:#e9f4ed;
  --amber:#8f5d0d;
  --red:#a33333;
  --shadow-sm:0 1px 2px rgba(20,32,55,.05);
  --shadow:0 4px 18px rgba(20,32,55,.06);
  --shadow-lg:0 18px 46px rgba(20,32,55,.13);
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  line-height:1.55;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px;}

h1,h2,h3,.display{font-family:var(--display);letter-spacing:-.028em;line-height:1.08;font-weight:800;}
h2{font-size:clamp(25px,3.5vw,34px);text-wrap:balance;}
h3{font-size:19px;letter-spacing:-.02em;font-weight:700;line-height:1.25;}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--blue);
}
.lede{font-size:16.5px;color:var(--ink-soft);text-wrap:pretty;}

/* ---------------- nav ---------------- */
.nav{
  position:sticky;top:0;z-index:50;background:rgba(244,247,251,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 20px;max-width:1080px;margin:0 auto;}
.wordmark{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--ink);text-decoration:none;}
.wordmark span{color:var(--blue);}
.nav-actions{display:flex;align-items:center;gap:8px;}

.btn{
  display:inline-block;font-family:var(--sans);font-size:15px;font-weight:700;
  text-decoration:none;border-radius:12px;padding:12px 22px;border:1px solid transparent;
  cursor:pointer;transition:background .15s,border-color .15s,color .15s;text-align:center;
}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-deep);}
.btn-quiet{background:transparent;color:var(--blue);}
.btn-quiet:hover{background:var(--blue-wash);}
.btn-outline{background:var(--card);color:var(--blue);border-color:var(--hairline-hard);}
.btn-outline:hover{border-color:var(--blue);}
.btn-sm{font-size:14px;padding:9px 16px;border-radius:10px;}
.btn:focus-visible,a:focus-visible,input:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}

/* ---------------- hero ---------------- */
.hero{padding:64px 0 8px;}
.hero h1{font-size:clamp(34px,6.2vw,58px);margin-bottom:18px;text-wrap:balance;max-width:16ch;}
.hero h1 em{font-style:normal;color:var(--blue);}
.hero .lede{font-size:clamp(16.5px,2vw,19px);max-width:52ch;margin-bottom:30px;}

.hero-cta{display:flex;flex-wrap:wrap;gap:11px;align-items:center;margin-top:26px;}
.hero-cta .fine{font-size:13.5px;color:var(--ink-soft);}

/* ---------------- tour ---------------- */
.tour{padding:54px 0 62px;}
.tour-head{margin-bottom:30px;max-width:56ch;}
.tour-head h2{margin:9px 0 10px;}
.tour-foot{
  margin-top:26px;font-size:14px;color:var(--ink-soft);max-width:62ch;text-wrap:pretty;
}
.screens{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:26px;align-items:start;}
.screen{display:flex;flex-direction:column;gap:13px;margin:0;}

/* The real screenshots. A thin dark bezel reads as a phone without pretending
   to be a photograph of one, and the shots already carry the app's own header
   and bottom bar, so nothing else is needed to make them read as a device. */
.shot{
  border-radius:22px;overflow:hidden;background:#10151f;
  border:6px solid #10151f;box-shadow:var(--shadow-lg);
  line-height:0;
}
.shot img{display:block;width:100%;height:auto;border-radius:16px;}

.screen-note{font-size:14px;color:var(--ink-soft);line-height:1.5;}
.screen-note b.inline{color:var(--ink);font-weight:700;}
.tag{
  display:inline-block;margin-bottom:5px;font-family:var(--mono);
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  border-radius:5px;padding:3px 8px;
}
.tag-go{background:var(--green-wash);color:var(--green);}
.tag-warn{background:#fbf1de;color:var(--amber);}
.tag-stop{background:#f8e9e9;color:var(--red);}

/* ---------------- bands ---------------- */
.band{background:var(--card);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);}
.band-in{padding:62px 0;}
.section-head{max-width:58ch;margin-bottom:34px;}
.section-head h2{margin:9px 0 10px;}

.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:16px;overflow:hidden;}
.how-item{background:var(--card);padding:22px 20px 24px;}
.how-item .n{
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--blue);
  letter-spacing:.1em;display:block;margin-bottom:11px;
}
.how-item h3{margin-bottom:6px;}
.how-item p{font-size:14px;color:var(--ink-soft);line-height:1.55;}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;}
.split > div{padding-top:26px;}
.split .lede{margin-top:11px;}
.claim{
  font-family:var(--display);font-size:clamp(21px,2.7vw,27px);font-weight:700;
  letter-spacing:-.025em;line-height:1.2;margin-bottom:12px;text-wrap:balance;
}
.claim em{font-style:normal;color:var(--blue);}
.ticks{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:20px;}
.ticks li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink-soft);}
.ticks svg{flex-shrink:0;margin-top:4px;}
.ticks b{color:var(--ink);font-weight:600;}

.fits{display:flex;flex-wrap:wrap;gap:9px;margin-top:6px;}
.fit{
  background:var(--card);border:1px solid var(--hairline-hard);border-radius:999px;
  padding:8px 17px;font-size:14px;font-weight:600;
}

/* ---------------- pricing ---------------- */
.pricing{padding:64px 0;}
.price-card{
  background:var(--card);border:1px solid var(--hairline);border-radius:22px;
  box-shadow:var(--shadow);max-width:760px;margin:0 auto;overflow:hidden;
}
.price-top{padding:30px 30px 6px;text-align:center;}
.price-top h2{margin-bottom:8px;}
.price-top p{font-size:15px;color:var(--ink-soft);}
.terms{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px 30px 26px;align-items:start;}
.term{
  border:1.5px solid var(--hairline-hard);border-radius:16px;padding:22px 20px 20px;
  text-align:center;display:flex;flex-direction:column;gap:4px;position:relative;
  transition:border-color .15s,box-shadow .15s;
}
.term:hover{border-color:var(--blue);}
.term.best{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash);}
.term-name{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.term-amt{font-family:var(--display);font-size:42px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;margin-top:6px;}
.term-per{font-size:13.5px;color:var(--ink-soft);}
.term-save{
  display:inline-block;margin:6px auto 0;background:var(--green-wash);color:var(--green);
  border-radius:999px;padding:3px 12px;font-size:12.5px;font-weight:700;
}
.term .btn{margin-top:16px;width:100%;}
.term-note{font-size:12.5px;color:var(--ink-soft);margin-top:9px;min-height:1.2em;}
.price-foot{
  border-top:1px solid var(--hairline);background:var(--bg);padding:18px 30px;
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:center;
}
.price-foot span{font-size:13.5px;color:var(--ink-soft);display:flex;align-items:center;gap:7px;}

/* ---------------- after 14 days ---------------- */
.after-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;}
.after-col{background:var(--card);border:1px solid var(--hairline);border-radius:16px;padding:22px 22px 24px;}
.after-col.keeps{border-left:3px solid var(--green);}
.after-col.stops{border-left:3px solid var(--ink-faint);}
.after-col h3{margin-bottom:12px;}
.after-col ul{list-style:none;display:flex;flex-direction:column;gap:8px;}
.after-col li{font-size:14px;color:var(--ink-soft);padding-left:17px;position:relative;}
.after-col li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--hairline-hard);}
.after-col.keeps li::before{background:var(--green);}

/* ---------------- closing ---------------- */
.close-cta{padding:70px 0 76px;text-align:center;}
.close-cta h2{margin-bottom:12px;}
.close-cta .lede{margin:0 auto 26px;max-width:46ch;}
.close-actions{display:flex;flex-wrap:wrap;gap:11px;justify-content:center;}

footer{border-top:1px solid var(--hairline);background:var(--card);padding:30px 0 40px;}
.foot-in{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;}
.foot-in p{font-size:13.5px;color:var(--ink-soft);}
.foot-links{display:flex;flex-wrap:wrap;gap:20px;}
.foot-links a{font-size:13.5px;color:var(--ink-soft);text-decoration:none;font-weight:600;padding:10px 0;display:inline-block;}
.foot-links a:hover{color:var(--blue);}

@media (max-width:820px){
  .split{grid-template-columns:1fr;gap:30px;}
  .after-grid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .hero{padding:44px 0 4px;}
  .terms{grid-template-columns:1fr;padding:20px 20px 22px;}
  .price-top{padding:26px 20px 4px;}
  .price-foot{padding:16px 20px;}
  .nav-actions .btn-quiet{display:none;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{transition:none!important;animation:none!important;}
}

/* Layout tweaks that used to be inline style attributes. Moved into the
   stylesheet so the page can keep `style-src 'self'` in its Content-Security-
   Policy: an inline style attribute is blocked by that policy, and loosening it
   to 'unsafe-inline' to save five declarations is a bad trade. */
.section-pad{padding:62px 0;}
.band-in-tight{padding:46px 0;}
.section-head-tight{margin-bottom:18px;}
.lede-spaced{margin-top:10px;}
.phone-inline{max-width:300px;margin:0 auto;}

/* On a narrow screen the split stacks, and the screenshot should lead rather
   than sit under a wall of text it is illustrating. */
.order-first{order:-1;}
@media (min-width:821px){ .order-first{order:0;} }

/* The refund promise. It sits inside the price card on purpose: it is the
   sentence that unsticks a yearly decision, and burying it in a footer would
   make it look like something we would rather you did not read. */
.refund{
  border-top:1px solid var(--hairline);background:var(--card);
  padding:20px 30px 24px;text-align:center;
}
.refund h3{font-size:16px;margin-bottom:6px;}
.refund p{
  font-size:13.5px;color:var(--ink-soft);line-height:1.55;
  max-width:56ch;margin:0 auto;text-wrap:pretty;
}
.after-foot{
  margin-top:20px;font-size:14px;color:var(--ink-soft);
  max-width:64ch;text-wrap:pretty;
}
@media (max-width:560px){ .refund{padding:18px 20px 20px;} }

/* ---------------- truck count ---------------- */
/* Pricing that changes with fleet size is only honest if a visitor can see
   THEIR price without doing arithmetic. One control, and the numbers move. */
.trucks{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;
  padding:20px 30px 4px;
}
.trucks-q{font-size:14px;font-weight:700;}
.stepper{
  display:flex;align-items:center;gap:2px;
  background:var(--bg);border:1px solid var(--hairline-hard);border-radius:12px;padding:4px;
}
.stepper button{
  width:40px;height:40px;border:0;border-radius:9px;background:var(--card);
  color:var(--blue);font-size:19px;font-weight:700;line-height:1;cursor:pointer;
  font-family:var(--sans);transition:background .15s,color .15s;
}
.stepper button:hover:not(:disabled){background:var(--blue);color:#fff;}
.stepper button:disabled{color:var(--ink-faint);cursor:not-allowed;background:transparent;}
.stepper output{
  min-width:104px;text-align:center;font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.trucks-note{
  font-size:13.5px;color:var(--ink-soft);text-align:center;
  padding:0 30px 22px;max-width:56ch;margin:0 auto;line-height:1.55;
}
.trucks-note b{color:var(--ink);font-weight:700;}
@media (max-width:560px){
  .trucks{padding:18px 20px 4px;}
  .trucks-note{padding:0 20px 18px;}
}

/* ---------------- 2026-09-08 repositioning ----------------
   The page now leads with the rate con reader, the dispatcher loop and the
   reality check. Everything below is new styling for those sections and for
   the pricing card's annual-first layout. No inline style attributes: the
   site's Content-Security-Policy is style-src 'self'. */

/* A longer headline than the old one; let it run to ~18 characters a line
   rather than wrapping into five lines of two words each. */
.hero h1{max-width:18ch;}

/* Two phones side by side: one state, two frames (what it read, what it
   decided), or two people (her screen, your screen). Capped so each phone
   stays phone-sized on a wide screen instead of growing to fill a column. */
.pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,300px));gap:26px;
  justify-content:center;align-items:start;margin-top:30px;
}
.pair-head{max-width:60ch;}
.pair-head h2{margin:9px 0 10px;}
.tag-step{background:var(--blue-wash);color:var(--blue);}

/* "Every screenshot is the real app." Sits under the first proof, where a
   visitor who has just seen the first two phones would ask. */
.real-note{
  margin:28px auto 0;max-width:60ch;text-align:center;
  font-size:14px;color:var(--ink-soft);text-wrap:pretty;
}

/* ---- pricing, annual first ---- */
/* The yearly term is the primary choice: it comes first, carries the badge
   and the per-month equivalent, and the monthly term stands back. The dollar
   figures are unchanged; only which one the eye lands on. */
.term-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--blue);color:#fff;font-family:var(--mono);font-size:10px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;white-space:nowrap;
}
.term.best .term-name{color:var(--blue);}
.term-equiv{font-size:13.5px;color:var(--ink);font-weight:600;margin-top:4px;}
.term.quiet{border-color:var(--hairline);}
.term.quiet:hover{border-color:var(--hairline-hard);}
.term.quiet .term-amt{font-size:34px;color:var(--ink-soft);margin-top:10px;}
.price-includes{
  font-size:14px;color:var(--ink-soft);max-width:54ch;margin:12px auto 0;
  line-height:1.55;text-wrap:pretty;
}
.price-includes b{color:var(--ink);font-weight:600;}

@media (max-width:560px){
  .pair{grid-template-columns:minmax(0,300px);gap:30px;}
  .pair-head{margin-bottom:0;}
}

/* Three ticks in a row under a pair of phones, where there is no side column
   to stack them in. Inherits the .ticks li styling. */
.ticks-row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px 26px;margin-top:34px;
}
.how-foot{
  margin-top:22px;font-size:14px;color:var(--ink-soft);max-width:64ch;text-wrap:pretty;
}

/* 2026-09-08 QA pass. The demo-carrier note leads the first proof section so
   Blue Ridge, Alex and Jordan are introduced before a caption names them. */
.real-note-lead{margin:16px 0 0;text-align:left;font-size:14px;max-width:60ch;}
@media (max-width:820px){ .split > div{padding-top:0;} }
/* A phone in a split section is capped so it stands roughly level with the
   copy beside it rather than towering over it (a 470px-wide phone was over
   1,000px tall next to 450px of text, so the section was mostly void). */
.split .screen{max-width:380px;width:100%;justify-self:center;}

/* ---------------- 2026-09-08 evening: the four cheap moves ----------------
   Scroll reveal, hover lift, a phone-only sticky button, section links.
   No library: an IntersectionObserver in site.js and these rules. Motion
   is off entirely for anyone who asked their phone for less of it. */

/* 1. Reveal. The class is added by site.js only to elements that start
   BELOW the fold, so nothing above it ever flashes, and a page with no
   JavaScript shows everything as before. */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease;}
.reveal.is-in{opacity:1;transform:none;}
.reveal-d1{transition-delay:.08s;}
.reveal-d2{transition-delay:.16s;}
.reveal-d3{transition-delay:.24s;}

/* 2. Lift. Only things you can act on move under the pointer. */
.term,.btn-primary,.btn-outline{transition:transform .18s ease,box-shadow .18s ease,border-color .15s,background .15s,color .15s;}
@media (hover:hover){
  .term:hover{transform:translateY(-2px);box-shadow:var(--shadow);}
  .term.best:hover{box-shadow:0 0 0 3px var(--blue-wash),var(--shadow);}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(31,95,169,.28);}
  .btn-outline:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
}
.btn-primary:active,.btn-outline:active{transform:translateY(0);box-shadow:none;}

/* 3. Sticky button, phones only. Sits under the content until site.js turns
   it on, then slides up. Hidden again while the closing section is on screen
   so two "Start" buttons never stack. */
.sticky-cta{display:none;}
@media (max-width:820px){
  .sticky-cta{
    display:flex;align-items:center;gap:12px;
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(244,247,251,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--hairline);
    transform:translateY(110%);transition:transform .3s ease;
  }
  .sticky-cta.is-on{transform:none;}
  .sticky-cta .btn{flex:0 0 auto;padding:12px 18px;}
  .sticky-cta .fine{font-size:12.5px;color:var(--ink-soft);line-height:1.3;}
}

/* 4. Section links in the header, desktop only; the phone header stays two
   buttons. Targets stop short of the sticky header. */
.nav-links{display:flex;gap:22px;}
.nav-links a{font-size:14px;font-weight:600;color:var(--ink-soft);text-decoration:none;padding:8px 2px;}
.nav-links a:hover{color:var(--blue);}
@media (max-width:820px){ .nav-links{display:none;} }
section[id]{scroll-margin-top:72px;}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;}
  .sticky-cta{transition:none;}
}