/* =====================================================================
   Dispatch page — self-contained section styles (loaded after styles.css)
   Reuses tokens, .home, .nav/.mega, .btn*, .footer, .rev-anim from styles.css.
   ===================================================================== */
:root{
  --color-gray-50:#f7f7f9; --color-gray-100:#f1f2f4; --color-gray-300:#d7d9df;
  --color-gray-700:#3c3e47; --color-ink:#12132b; --color-eyebrow:#3a2fc8;
}
.home.disp{ background:#f7f8fd; }

/* shared section shell */
.disp-sec{ width:100%; display:flex; flex-direction:column; align-items:center; flex-shrink:0; }
.disp-eyebrow{ font-weight:500; font-size:13px; line-height:1.4; letter-spacing:.26px; color:var(--color-eyebrow); text-transform:uppercase; }
.disp-eyebrow.brand{ color:var(--color-brand); }
.disp-h2{ font-weight:700; font-size:42px; line-height:1.1; letter-spacing:-1.05px; color:var(--color-ink); text-align:center; }
.disp-lead{ font-weight:500; font-size:19px; line-height:1.5; color:var(--color-gray-600); text-align:center; }
.disp-head{ display:flex; flex-direction:column; align-items:center; gap:10px; }

/* ===== HERO ===== */
.disp-hero{ width:100%; background:linear-gradient(to bottom,#eef2fb,#fff); padding:80px 32px 96px; display:flex; flex-direction:column; align-items:center; overflow:hidden; }
.disp-hero__row{ display:flex; gap:40px; align-items:center; width:min(1080px, calc(100% - 48px)); }
.disp-hero__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; width:480px; flex:none; }
.disp-hero__copy .disp-eyebrow{ padding:8px 0; }
.disp-hero__title{ font-weight:700; font-size:54px; line-height:1.06; letter-spacing:-1.5px; color:var(--color-ink); }
.disp-hero__sub{ font-weight:500; font-size:16px; line-height:1.56; color:var(--color-gray-600); }
.disp-hero__cta{ display:flex; gap:12px; }
.disp-btn{ display:inline-flex; align-items:center; gap:8px; height:50px; padding:0 32px; border-radius:12px; font-weight:600; font-size:15px; cursor:pointer; text-decoration:none; border:none; transition:transform .15s ease, filter .2s ease, box-shadow .2s ease; }
.disp-btn--primary{ background:var(--color-brand); color:#fff; }
.disp-btn--primary:hover{ transform:translateY(-1px); filter:brightness(1.08); }
.disp-btn--ghost{ background:#fff; border:1.5px solid var(--color-gray-200); color:var(--color-ink); padding:0 28px; }
.disp-btn--ghost:hover{ transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(18,19,43,.18); }

.disp-hero__visual{ position:relative; width:560px; height:424px; flex:none; }
.disp-hero__glow{ position:absolute; left:-32px; top:24px; width:520px; height:470px; }
.disp-hero__glow img{ width:100%; height:100%; }
.disp-hero__shot{ position:absolute; left:50%; transform:translateX(-50%); top:46px; width:524px; height:372px; background:#eef0fb; border:1px solid #e3e5f4; border-radius:12px; box-shadow:0 -4px 51.4px -20px rgba(20,54,109,.16); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.disp-hero__shot img{ width:523px; height:372px; object-fit:cover; }
.disp-hero__pill{ position:absolute; left:-45px; top:0; background:#fff; border-radius:14px; box-shadow:0 12px 30px 0 rgba(18,19,43,.14); padding:14px 18px; display:flex; flex-direction:column; gap:10px; }
.disp-hero__pill .row{ display:flex; align-items:center; gap:10px; }
.disp-hero__pill .row .dot{ width:10px; height:10px; }
.disp-hero__pill .row .dot img{ width:100%; height:100%; }
.disp-hero__pill .row b{ font-weight:700; font-size:13.5px; color:var(--color-ink); white-space:nowrap; }
.disp-hero__pill .bar{ width:134px; height:6px; border-radius:999px; background:#eef0f7; overflow:hidden; }
.disp-hero__pill .bar i{ display:block; height:100%; width:78%; border-radius:999px; background:linear-gradient(to right,#3a2fc8,#7c6cf5); }

/* ===== IMPACT ===== */
.disp-impact{ background:var(--color-blue-25); padding:100px 32px; gap:50px; }
.disp-impact__head{ gap:10px; }
.disp-impact__head .disp-h2{ width:608px; max-width:100%; }
.disp-impact__head .disp-lead{ width:728px; max-width:100%; }
.disp-impact__grid{ display:flex; gap:20px; width:min(1000px, calc(100% - 48px)); }
.disp-stat{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; padding:36px 28px; border-radius:20px; border:1px solid var(--color-gray-300); text-align:center; }
.disp-stat.grad{ background:linear-gradient(to right,#4141e7,#6e6ef5); border:none; }
.disp-stat__num{ font-weight:700; font-size:46px; line-height:1; letter-spacing:-2px; color:var(--color-gray-900); }
.disp-stat__lbl{ font-weight:500; font-size:16px; line-height:1.56; color:var(--color-gray-600); white-space:nowrap; }
.disp-stat.grad .disp-stat__num{ color:#fff; }
.disp-stat.grad .disp-stat__lbl{ color:#d7d9df; }
.disp-stat.alt .disp-stat__num{ color:var(--color-brand); }

/* ===== STEPS ===== */
.disp-steps{ padding:60px 32px; gap:50px; }
.disp-steps__pin{ width:100%; display:flex; justify-content:center; }
.disp-stage{ position:relative; width:min(1080px, calc(100% - 48px)); height:470px; }

.disp-step{ position:relative; display:flex; gap:72px; align-items:center; min-height:395px; }
.disp-step__text{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; gap:14px; }
.disp-step__eyebrow{ font-weight:500; font-size:13px; line-height:1.4; letter-spacing:.26px; color:var(--color-brand); }
.disp-step__text h3{ font-weight:700; font-size:22px; line-height:1.28; letter-spacing:-.33px; color:var(--color-gray-900); }
.disp-step__text p{ font-weight:500; font-size:16px; line-height:1.56; color:var(--color-gray-600); max-width:440px; }
.disp-step__num{ position:absolute; left:485px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:9px; background:var(--color-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; box-shadow:0 6px 14px 0 rgba(18,19,43,.3), 0 0 0 6px #f7f8fd; z-index:2; }
.disp-step__visual{ width:540px; flex:none; height:470px; position:relative; }
/* All image steps: one uniform near-square card, Figma size 457×447 (centred in a 540 column) */
.disp-step__visual--shot{ width:540px; height:447px; }
/* Steps 2 & 3: same card + Figma-exact image crop */
.disp-step__visual--fig{ width:540px; height:447px; }
.disp-shot--fig img{ object-fit:fill; }
.disp-shot{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:457px; height:447px; border-radius:16px; overflow:hidden; box-shadow:0 18px 50px -12px rgba(18,19,43,.22); }
.disp-shot img{ width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
/* step 6 analytics: box matches the 1440×1276 dashboard ratio so the whole report shows uncropped */
.disp-shot--report{ width:457px; }

/* progress rail: single centred number, dot travels the line past it (desktop, JS on) */
.disp-rail{ display:none; }
.js .disp-rail{ position:absolute; left:485px; top:0; bottom:-180px; width:30px; z-index:5; display:block; }
.disp-rail__track{ position:absolute; left:14px; top:0; bottom:0; width:2px; background:var(--color-blue-50); border-radius:999px; }
.disp-rail__dot{ position:absolute; left:9px; top:0; width:12px; height:12px; margin-top:-6px; border-radius:50%; background:var(--color-brand); box-shadow:0 0 0 5px rgba(65,65,231,.16); z-index:5; }
.disp-rail__num{ position:absolute; left:0; top:50%; margin-top:-15px; width:30px; height:30px; border-radius:9px; background:var(--color-brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; box-shadow:0 6px 14px 0 rgba(18,19,43,.3), 0 0 0 6px #f7f8fd; z-index:8; }
.disp-rail__num.pop{ animation:none; }
@keyframes dispNumPop{ 0%{ transform:scale(.55); opacity:.4 } 60%{ transform:scale(1.12) } 100%{ transform:scale(1) } }

/* pinned scrollytelling — block sticks, text scrolls, visual crossfades */
.js .disp-steps__pin{ height:calc(100vh * 4.4); display:block; }
.js .disp-steps__inner{ position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.js .disp-step{ position:absolute; inset:0; min-height:0; margin:auto; will-change:transform; }
.js .disp-step__text{ will-change:transform, opacity; }
.js .disp-step__visual{ will-change:opacity; }
.js .disp-step > .disp-step__num{ display:none; }
.disp-card{ position:absolute; left:30px; top:11px; width:457px; height:447px; background:#eef0fb; border:1px solid #e3e5f4; border-radius:20px; box-shadow:0 14px 45px 0 rgba(18,19,43,.1); overflow:hidden; }
.disp-card--white{ background:#fff; border-radius:30px; }
.disp-card--plain{ background:transparent; border:none; box-shadow:0 14px 22.5px rgba(18,19,43,.1); }
.disp-card > img.fill{ position:absolute; width:100%; height:100%; object-fit:cover; }
.disp-card .zoom{ position:absolute; inset:0; overflow:hidden; }
.disp-card .zoom img{ position:absolute; }

/* step 4 map */
.disp-map{ position:absolute; inset:0; overflow:hidden; border-radius:20px; background:var(--color-blue-50); }
.disp-map__bg{ position:absolute; inset:0; background:var(--color-blue-50); }
.disp-map__bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; }
.disp-map__line{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.disp-map__pin{ position:absolute; transform:translate(-50%,-50%); z-index:2; background:#fff; border:1.5px solid var(--color-brand); border-radius:6px; box-shadow:0 6px 16px 0 rgba(26,28,77,.13); display:flex; align-items:center; justify-content:center; gap:2px; height:27px; padding:0 6px; }
.disp-map__pin span{ font-weight:700; font-size:10px; color:var(--color-brand); letter-spacing:-.1px; }
.disp-map__driver{ position:absolute; transform:translate(-50%,-50%); z-index:3; }
.disp-map__driver img{ width:100%; height:100%; }
.disp-map__name{ position:absolute; transform:translate(-50%,-50%); z-index:3; background:#fff; border:1px solid var(--color-gray-200); border-radius:999px; box-shadow:0 6px 18px 0 rgba(15,18,31,.14); padding:4px 10px; font-weight:600; font-size:11px; color:var(--color-brand); white-space:nowrap; }

/* step 5 proof of delivery */
.disp-pod{ position:absolute; left:34px; top:107px; width:449px; height:256px; background:#fff; border-radius:26px; box-shadow:0 14px 22.5px rgba(18,19,43,.1); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:18px; }
.disp-pod__top{ display:flex; align-items:center; gap:13px; width:397px; max-width:100%; }
.disp-pod__top b{ font-weight:500; font-size:16px; color:var(--color-gray-900); }
.disp-pod__ok{ background:var(--color-green-600); color:#fff; font-weight:600; font-size:12px; letter-spacing:.24px; padding:4px 8px; border-radius:999px; }
.disp-pod__row{ display:flex; gap:4px; }
.disp-pod__box{ width:130px; height:130px; border:1px solid var(--color-blue-50); border-radius:12px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fff; }
.disp-pod__box.chip{ border-color:var(--color-blue-chip); }
.disp-pod__box img.photo{ width:100%; height:100%; object-fit:cover; }
.disp-pod__box img.sig{ width:111px; height:66px; }
.disp-pod__box .time{ display:block; width:100%; max-width:119px; font-weight:500; font-size:16px; line-height:1.56; color:var(--color-gray-700); text-align:center; padding:8px; white-space:normal; }

/* step 6 stats */
.disp-report{ position:absolute; left:30px; top:18px; width:457px; height:290px; background:#eef0fb; border:1px solid #e3e5f4; border-radius:20px; box-shadow:0 14px 45px 0 rgba(18,19,43,.1); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; }
.disp-report__in{ display:flex; flex-direction:column; gap:12px; width:419px; max-width:100%; }
.disp-report__wide{ background:#fff; border:1px solid var(--color-gray-200); border-radius:16px; padding:15px 18px; display:flex; flex-direction:column; gap:8px; }
.disp-report__row{ display:flex; gap:12px; }
.disp-report__cell{ flex:1 1 0; min-width:0; background:#fff; border:1px solid var(--color-gray-200); border-radius:14px; padding:12px 14px 13px; display:flex; flex-direction:column; gap:6px; }
.disp-report .lbl{ display:flex; align-items:center; gap:6px; font-weight:500; font-size:16px; color:var(--color-gray-500); white-space:nowrap; }
.disp-report .lbl img{ width:20px; height:20px; }
.disp-report .big{ font-weight:700; font-size:40px; line-height:1; letter-spacing:-.8px; color:var(--color-gray-900); }

/* ===== MIDTEXT ===== */
.disp-mid{ background:#fff; padding:120px 32px; gap:14px; text-align:center;  min-height:100vh; justify-content:center;}
.disp-mid h2{ font-weight:700; font-size:42px; line-height:1.1; letter-spacing:-1.05px; color:var(--color-ink); width:820px; max-width:100%; }
.disp-mid p{ font-weight:500; font-size:16px; line-height:1.56; color:var(--color-gray-600); width:820px; max-width:100%; }

/* ===== CTA ===== */
.disp-cta{ background:linear-gradient(to right,#2a20a8 0%,#3a2fc8 45%,#5b4bf2 100%); padding:100px 48px; gap:18px; text-align:center;  min-height:100vh; justify-content:center; border-top-left-radius:44px; border-top-right-radius:44px; margin-top:-44px; position:relative; z-index:2; box-shadow:0 -28px 56px -28px rgba(19,32,90,.35);}
.disp-cta h2{ font-weight:700; font-size:42px; line-height:1.1; letter-spacing:-1.05px; color:#fff; width:1080px; max-width:100%; }
.disp-cta p{ font-weight:500; font-size:16px; line-height:1.56; color:#d7d9df; }
.disp-cta__btns{ display:flex; gap:12px; align-items:center; }
.disp-cta__primary{ background:#fff; color:var(--color-brand); display:inline-flex; align-items:center; gap:8px; padding:15px 32px; border-radius:12px; font-weight:600; font-size:15px; text-decoration:none; transition:transform .15s ease, box-shadow .2s ease; }
.disp-cta__primary:hover{ transform:translateY(-1px); box-shadow:0 10px 24px -8px rgba(0,0,0,.3); }
.disp-cta__ghost{ border:1.5px solid rgba(255,255,255,.5); color:#fff; display:inline-flex; align-items:center; height:50px; padding:0 28px; border-radius:12px; font-weight:600; font-size:15px; text-decoration:none; transition:background .2s ease; }
.disp-cta__ghost:hover{ background:rgba(255,255,255,.1); }
.disp-cta__checks{ display:flex; gap:26px; flex-wrap:wrap; justify-content:center; }
.disp-cta__checks span{ display:inline-flex; align-items:center; gap:6px; font-weight:500; font-size:14px; color:#d7d9df; }
.disp-cta__checks span::before{ content:"✓"; color:var(--color-green-500); font-weight:700; font-size:13px; }

/* ===== FAQ ===== */
.disp-faq{ background:var(--color-gray-50); padding:100px 32px; gap:44px; }
.disp-faq__head{ display:flex; flex-direction:column; align-items:center; gap:18px; }
.disp-faq__eyebrow{ font-weight:600; font-size:11px; letter-spacing:.66px; text-transform:uppercase; color:var(--color-brand); }
.disp-faq__list{ display:flex; flex-direction:column; gap:16px; width:min(860px, calc(100% - 48px)); }
.disp-faq__item{ background:#fff; border:1px solid var(--color-gray-200); border-radius:16px; }
.disp-faq__item[open]{ border-color:#cfd1ff; }
.disp-faq__q{ display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; list-style:none; padding:24px 28px; }
.disp-faq__item[open] .disp-faq__q{ padding-bottom:14px; }
.disp-faq__q::-webkit-details-marker{ display:none; }
.disp-faq__q h3{ font-weight:700; font-size:17px; letter-spacing:-.255px; color:var(--color-gray-900); }
/* rounded chevron (like the nav caret): points down when closed, up when open */
.disp-faq__ic{ width:20px; height:20px; flex:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9ca6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/16px no-repeat; transition:transform .25s ease; }
.disp-faq__item[open] .disp-faq__ic{ transform:rotate(180deg); }
.disp-faq__a{ padding:0 28px 24px; }
.disp-faq__a p{ font-weight:500; font-size:16px; line-height:1.56; color:var(--color-gray-600); }
.disp-faq__a p + p{ margin-top:14px; }

/* ===== FOOTER (Route-Planner variant, reused) ===== */
.disp-footer .foot-inner{ width:min(1080px, calc(100% - 48px)); }
.disp-footer .blurb-col{ width:300px; }
.foot-cols{ display:flex; gap:40px; }
.disp-footer .fcol__title{ font-size:11px; text-transform:uppercase; letter-spacing:.66px; color:#d7d9df; }
.disp-footer .fcol a{ font-size:14px; color:#7c7f8a; }
.disp-footer .fcol a:hover{ color:#fff; }
.foot-legal{ display:flex; gap:24px; }

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:1000px){
  .disp-hero__row{ flex-direction:column; gap:40px; }
  .disp-hero__copy{ width:100%; align-items:center; text-align:center; }
  .disp-hero__copy .disp-eyebrow, .disp-hero__title, .disp-hero__sub{ text-align:center; }
  .disp-hero__cta{ justify-content:center; }
  /* steps: unpin, stack, drop the centre timeline + rail */
  .disp-rail, .js .disp-rail{ display:none; }
  .disp-steps__pin, .js .disp-steps__pin{ height:auto; display:block; }
  .disp-steps__inner, .js .disp-steps__inner{ position:static; height:auto; overflow:visible; display:block; }
  .disp-stage{ width:min(1080px, calc(100% - 48px)); height:auto; margin:0 auto; display:flex; flex-direction:column; gap:64px; }
  .disp-step, .js .disp-step{ position:static; inset:auto; margin:0; flex-direction:column; align-items:flex-start; min-height:0; gap:24px; }
  .disp-step__text, .js .disp-step__text{ order:1; transform:none; opacity:1; }
  .disp-step__text p{ max-width:none; }
  .disp-step > .disp-step__num, .js .disp-step > .disp-step__num{ display:flex; position:static; transform:none; order:0; }
  .disp-step__visual, .js .disp-step__visual{ order:2; width:100%; max-width:500px; height:auto; aspect-ratio:540/340; opacity:1; }
  .disp-step__visual--shot{ aspect-ratio:457/447; }
  .disp-step__visual--fig{ aspect-ratio:457/447; }
  .disp-shot{ position:absolute; inset:0; top:auto; left:auto; width:auto; height:auto; transform:none; }
  .disp-card, .disp-report{ left:0; top:0; width:100%; height:100%; }
  .disp-pod{ left:0; width:100%; height:auto; }
}
@media (max-width:900px){
  .disp-hero__title{ font-size:clamp(31px,6vw,54px); line-height:1.08; }
  .disp-h2, .disp-mid h2, .disp-cta h2{ font-size:clamp(28px,5vw,42px); }
  .disp-impact__grid{ flex-wrap:wrap; }
  .disp-stat{ flex:1 1 240px; }
  .disp-stat__lbl{ white-space:normal; }
}
@media (max-width:760px){
  .disp-hero{ padding:88px 20px 72px; }
  .disp-impact, .disp-steps, .disp-mid, .disp-cta, .disp-faq{ padding:64px 20px; }
  .disp-hero__visual{ transform:scale(.85); }
}
@media (max-width:560px){
  .disp-hero__visual{ transform:scale(.66); margin:-40px 0; }
  .disp-cta__checks{ flex-direction:column; gap:10px; }
}
@media (max-width:760px){
  .disp-footer .foot-inner{ width:calc(100% - 40px); }
  .foot-cols{ flex-wrap:wrap; gap:28px 40px; }
  .disp-footer .foot-top{ flex-direction:column; gap:32px; }
}
@media (prefers-reduced-motion:reduce){ .disp-faq__ic{ transition:none; } }

.disp-card .disp-fill, .disp-card img.disp-fill{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; border-radius:inherit; max-width:none; }
/* Step 5 — floating success mini-badges around the POD card */
.disp-pod__flag{ position:absolute; z-index:3; display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1px solid var(--color-blue-50,#e9eaff); border-radius:12px; padding:7px 12px;
  font-size:12.5px; font-weight:600; color:var(--color-gray-900,#0e0f13); white-space:nowrap;
  box-shadow:0 10px 24px -14px rgba(18,19,43,.22); }
.disp-pod__flag .tick{ display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; background:var(--color-green-600,#15a05e); color:#fff; font-size:10px; line-height:1; }
.disp-pod__flag--a{ left:12px; top:68px; }
.disp-pod__flag--b{ right:26px; bottom:66px; }

body { background: #f7f8fd; }  /* full-width bg */






/* steps rail: number stays in a fixed 30px zone; badge extends right for the check (even 9px gaps) */
.disp-rail__num { position: absolute; display: inline-flex; align-items: center; justify-content: flex-start; min-width: 30px; width: auto; height: 30px; padding: 0; overflow: hidden; transition: min-width .22s ease, padding .22s ease; }
.disp-rail__n { flex: none; width: 30px; display: inline-flex; align-items: center; justify-content: center; }
.disp-rail__chk { flex: none; display: inline-flex; align-items: center; width: 0; opacity: 0; overflow: hidden; transition: width .22s ease, opacity .2s ease; }
.disp-rail__chk svg { width: 14px; height: 14px; display: block; }
.disp-rail__num.is-done { padding-right: 9px; }
.disp-rail__num.is-done .disp-rail__chk { width: 14px; opacity: 1; }