/* ===========================================================================
   Homepage components — the "landing 2.0" concept, ported into this site.
   ---------------------------------------------------------------------------
   Loads AFTER site.css and only on index.html. site.css keeps owning the
   shared masthead/footer, tokens, and reset; this file owns the homepage's
   product-demo mockups and sections. Its local custom properties are ALIASES
   onto site.css tokens so the two can't drift; literal hexes below are the
   mockup art's own shades, all drawn from the same navy/blue ramp.
   =========================================================================== */
:root {
  --indigo: var(--accent);
  --indigo-hover: var(--accent-hover);
  --indigo-deep: var(--accent-ink);
  --rail: var(--nav);
  --rail-2: var(--nav-raise);
  --white: #ffffff;
  --ink: var(--ink-1);
  --muted: var(--ink-3);
  --muted-2: #7d93a8;
  --good: #0e9f6e;
  --warn: #c2700b;
  --critical: #d63b2f;
  --indigo-soft: var(--accent-soft);
  --green-soft: var(--good-soft);
  --shadow-sm: 0 8px 24px rgba(0, 27, 59, .08);
  --shadow-md: 0 18px 50px rgba(0, 27, 59, .12);
  --shadow-lg: 0 36px 90px rgba(0, 27, 59, .17);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --container: 1240px;
}

html { scroll-padding-top: 96px; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
p, h1, h2, h3, h4 { margin-top: 0; }
button { border: 0; }
::selection { background: #c9e2fb; color: var(--ink); }

.svg-sprite { position: absolute; overflow: hidden; }
.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; }
.icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
.section { position: relative; padding: 108px 0; }


.button { min-height: 46px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; background: var(--indigo); color: #fff; border: 1px solid var(--indigo); border-radius: var(--radius-sm); font-size: 14px; font-weight: 720; box-shadow: 0 8px 18px rgba(2, 118, 222, .18); transition: transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease; }
.button:hover { transform: translateY(-2px); background: var(--indigo-hover); border-color: var(--indigo-hover); box-shadow: 0 12px 26px rgba(2, 118, 222, .23); }
.button:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid rgba(2, 118, 222, .28); outline-offset: 3px; }
.button--small { min-height: 42px; padding-inline: 15px; font-size: 13px; }
.button--large { min-height: 54px; padding-inline: 22px; font-size: 15px; }
.button--secondary { background: #fff; border-color: var(--line-strong); color: var(--ink); box-shadow: 0 6px 16px rgba(0, 27, 59, .06); }
.button--secondary:hover { background: #fff; border-color: #aac4da; color: var(--indigo-deep); box-shadow: 0 10px 24px rgba(0, 27, 59, .09); }
.button--light { background: #fff; color: var(--rail); border-color: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .15); }
.button--light:hover { background: #eff5fb; border-color: #eff5fb; color: var(--indigo-deep); }
.button--ghost-light { background: transparent; border-color: #1e517d; color: #fff; box-shadow: none; }
.button--ghost-light:hover { background: #0a2c52; border-color: #3d6b98; }

.kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 19px; color: var(--indigo-deep); font-size: 11px; line-height: 1.2; letter-spacing: .14em; text-transform: uppercase; font-weight: 800; }
.kicker--on-dark { color: #78bdf7; }
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 5px rgba(14, 159, 110, .12); }
.live-dot::after { content: ""; position: absolute; inset: -5px; border: 1px solid rgba(14, 159, 110, .35); border-radius: 50%; animation: livePulse 2s ease-out infinite; }
@keyframes livePulse { 0% { transform: scale(.65); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }

.hero { padding-top: 92px; padding-bottom: 54px; overflow: hidden; }
.hero::before { content: ""; position: absolute; width: 640px; height: 640px; right: -360px; top: 40px; border: 1px solid #d9e5ef; border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.32), 0 0 0 160px rgba(255,255,255,.18); pointer-events: none; }
.hero-grid { display: grid; grid-template-columns: minmax(360px, .78fr) minmax(650px, 1.45fr); align-items: center; gap: 64px; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 48px; }
.hero h1 { max-width: 650px; margin-bottom: 24px; color: var(--rail); font-size: clamp(54px, 5.3vw, 82px); line-height: .98; letter-spacing: -.065em; font-weight: 780; }
.hero h1 span { color: var(--indigo); }
.hero-lede { max-width: 580px; margin-bottom: 30px; color: #29445f; font-size: 19px; line-height: 1.6; letter-spacing: -.015em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-assurances { display: flex; flex-wrap: wrap; gap: 15px 21px; margin-top: 24px; color: var(--muted); font-size: 12px; font-weight: 650; }
.hero-assurances span { display: inline-flex; align-items: center; gap: 7px; }
.hero-assurances .icon { color: var(--good); }

.hero-product { position: relative; z-index: 3; min-width: 0; }
.demo-tabs { display: flex; align-items: center; gap: 7px; margin: 0 0 12px 26px; }
.demo-tabs button { height: 38px; padding: 0 14px; display: inline-flex; align-items: center; gap: 7px; background: #fff; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; font-size: 12px; font-weight: 750; cursor: pointer; box-shadow: 0 6px 14px rgba(0, 27, 59, .04); transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; }
.demo-tabs button:hover { transform: translateY(-1px); color: var(--ink); border-color: #b0c8dd; }
.demo-tabs button span { color: var(--muted-2); font-size: 9px; letter-spacing: .08em; }
.demo-tabs button[aria-selected="true"] { background: var(--rail); border-color: var(--rail); color: #fff; }
.demo-tabs button[aria-selected="true"] span { color: #b7c8d8; }
.product-frame { position: relative; height: 526px; display: grid; grid-template-columns: 76px minmax(0, 1fr); overflow: hidden; background: #fff; border: 1px solid #c3d5e6; border-radius: 18px; box-shadow: var(--shadow-lg); }
.product-rail { position: relative; z-index: 5; padding: 17px 11px; display: flex; flex-direction: column; background: var(--rail); color: #9db4cb; }
.rail-logo { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 6px 12px; border-bottom: 1px solid #0f3960; }
.rail-logo span { width: 17px; height: 17px; border: 2px solid #fff; border-radius: 50%; position: relative; }
.rail-logo span::after { content: ""; position: absolute; width: 6px; height: 6px; right: -3px; bottom: -2px; border-radius: 50%; background: #4ba6f3; }
.rail-logo b { color: #fff; font-size: 11px; letter-spacing: .05em; }
.rail-group { display: grid; gap: 5px; margin-top: 18px; }
.rail-group small { padding: 0 6px 4px; color: #7f98b2; font-size: 7px; letter-spacing: .15em; text-transform: uppercase; }
.rail-item { min-height: 44px; padding: 0 7px; display: grid; place-items: center; gap: 2px; border-radius: 8px; font-size: 8px; }
.rail-item .icon { width: 16px; height: 16px; }
.rail-item b { font-weight: 620; }
.rail-item.active { background: #0e3459; color: #fff; }
.rail-avatar { width: 30px; height: 30px; margin: auto auto 0; display: grid; place-items: center; background: #123f6b; color: #fff; border: 1px solid #1d5382; border-radius: 50%; font-size: 8px; font-weight: 800; }
.product-shell { min-width: 0; display: grid; grid-template-rows: 59px minmax(0, 1fr); }
.product-topbar { padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dde9f2; background: #fff; }
.product-topbar > div:first-child { display: grid; line-height: 1.15; }
.product-topbar small { color: #7d93a8; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }
.product-topbar strong { margin-top: 4px; font-size: 14px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.sync-chip { height: 27px; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; background: var(--green-soft); color: #0a7350; border-radius: 999px; font-size: 9px; font-weight: 800; }
.sync-chip i { width: 6px; height: 6px; background: var(--good); border-radius: 50%; }
.topbar-actions button { height: 28px; padding: 0 10px; background: var(--rail); color: #fff; border-radius: 6px; font-size: 9px; font-weight: 750; }
.product-body { min-height: 0; display: grid; grid-template-columns: 216px minmax(0, 1fr); }
.ops-panel { position: relative; z-index: 3; min-width: 0; padding: 14px 12px; background: #fbfdff; border-right: 1px solid #dbe7f0; }
.ops-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding-bottom: 11px; border-bottom: 1px solid #dfeaf3; }
.ops-summary span { display: grid; padding: 8px 4px; background: #fff; border: 1px solid #dde9f2; border-radius: 7px; text-align: center; }
.ops-summary b { font-size: 14px; line-height: 1; font-variant-numeric: tabular-nums; }
.ops-summary span:nth-child(1) b { color: var(--good); }
.ops-summary span:nth-child(3) b { color: var(--warn); }
.ops-summary small { margin-top: 4px; color: #7d93a8; font-size: 7px; }
.panel-filter { height: 34px; margin: 10px 0; padding: 0 9px; display: flex; align-items: center; gap: 7px; background: #fff; border: 1px solid #d9e5ef; border-radius: 7px; color: #566d84; font-size: 9px; }
.panel-filter .icon { width: 13px; }
.panel-filter b { margin-left: auto; min-width: 19px; height: 18px; display: grid; place-items: center; background: var(--indigo-soft); color: var(--indigo-deep); border-radius: 999px; font-size: 8px; }
.route-stack { display: grid; gap: 6px; }
.route-row { padding: 9px 7px; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 8px; background: #fff; border: 1px solid #dde9f2; border-radius: 8px; }
.route-row.active { border-color: #8cc5f7; box-shadow: 0 5px 13px rgba(2, 118, 222, .08); }
.route-code { width: 28px; height: 28px; display: grid; place-items: center; background: var(--indigo); color: #fff; border-radius: 7px; font-size: 8px; font-weight: 800; }
.route-code--green { background: var(--good); }
.route-code--amber { background: var(--warn); }
.route-row div { min-width: 0; display: grid; }
.route-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; }
.route-row small { margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7d93a8; font-size: 7px; }
.route-row em { color: #566d84; font-size: 8px; font-style: normal; font-variant-numeric: tabular-nums; }
.next-event { position: absolute; right: 12px; bottom: 12px; left: 12px; padding: 10px; display: grid; grid-template-columns: 31px 1fr; gap: 8px; background: var(--rail); color: #fff; border-radius: 8px; box-shadow: 0 10px 22px rgba(0, 27, 59, .16); }
.event-icon { width: 31px; height: 31px; display: grid; place-items: center; background: #103a63; color: #78bdf7; border-radius: 7px; }
.event-icon .icon { width: 15px; }
.next-event div { display: grid; }
.next-event small { color: #7f98b2; font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }
.next-event strong { margin: 2px 0; font-size: 9px; }
.next-event span:last-child { color: #b7c8d8; font-size: 7px; }
.map-stage { position: relative; min-width: 0; overflow: hidden; background: #e9f0f8; }
.map-art { width: 100%; height: 100%; object-fit: cover; }
.map-alert { position: absolute; right: 18px; bottom: 18px; min-width: 172px; padding: 11px 12px; display: grid; background: rgba(255,255,255,.96); border: 1px solid #cedcea; border-radius: 9px; box-shadow: var(--shadow-sm); }
.alert-status { display: inline-flex; align-items: center; gap: 5px; color: var(--good); font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.alert-status i { width: 6px; height: 6px; background: var(--good); border-radius: 50%; }
.map-alert strong { margin: 3px 0 1px; font-size: 10px; }
.map-alert small { color: #7f98b2; font-size: 8px; }
.dispatch-card, .tracking-card, .proof-popover, .phone-frame, .customer-card { opacity: 0; pointer-events: none; transform: translateY(12px) scale(.98); transition: opacity .3s ease, transform .35s ease; }
[data-demo-state="plan"] [data-panel="plan"], [data-demo-state="track"] [data-panel="track"], [data-demo-state="drive"] [data-panel="drive"], [data-demo-state="prove"] [data-panel="prove"] { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.dispatch-card { position: absolute; left: 22px; top: 22px; width: 206px; padding: 13px; background: #fff; border: 1px solid #cddcea; border-radius: 10px; box-shadow: var(--shadow-md); }
.dispatch-card__head { display: flex; align-items: center; justify-content: space-between; color: #566d84; font-size: 8px; }
.dispatch-card__head b { padding: 3px 6px; background: var(--green-soft); color: #0a7350; border-radius: 999px; font-size: 7px; }
.dispatch-card > strong { display: block; margin: 9px 0; font-size: 11px; }
.mini-stop-list { height: 28px; display: flex; align-items: center; justify-content: space-between; position: relative; }
.mini-stop-list::before { content: ""; position: absolute; left: 7px; right: 7px; top: 13px; height: 2px; background: #b5dafc; }
.mini-stop-list i { position: relative; z-index: 1; width: 10px; height: 10px; background: #fff; border: 2px solid var(--indigo); border-radius: 50%; }
.dispatch-card button { width: 100%; height: 31px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--indigo); color: #fff; border-radius: 6px; font-size: 8px; font-weight: 800; }
.tracking-card { position: absolute; left: 46%; top: 46%; padding: 8px 10px 8px 8px; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #cfdeeb; border-radius: 8px; box-shadow: var(--shadow-sm); }
.tracking-pulse { width: 28px; height: 28px; display: grid; place-items: center; background: var(--indigo-soft); border-radius: 7px; }
.tracking-pulse .icon { width: 17px; height: 17px; color: var(--indigo); }
.tracking-card div { display: grid; }
.tracking-card small { color: #566d84; font-size: 7px; }
.tracking-card strong { font-size: 8px; }
.proof-popover { position: absolute; right: 18px; top: 18px; width: 238px; padding: 13px; background: #fff; border: 1px solid #cddcea; border-radius: 10px; box-shadow: var(--shadow-md); }
.proof-popover__head { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 9px; }
.status-check { width: 32px; height: 32px; display: grid; place-items: center; background: var(--green-soft); color: var(--good); border-radius: 50%; }
.proof-popover__head div { display: grid; }
.proof-popover__head small { color: var(--good); font-size: 7px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.proof-popover__head strong { font-size: 10px; }
.phone-frame { position: absolute; z-index: 9; right: 24px; bottom: -36px; width: 196px; height: 408px; padding: 15px 10px 11px; overflow: hidden; background: #f5f9fd; border: 6px solid var(--rail); border-radius: 28px; box-shadow: 0 26px 55px rgba(0, 27, 59, .26); }
.phone-speaker { position: absolute; top: 7px; left: 50%; width: 46px; height: 4px; background: #123c63; border-radius: 999px; transform: translateX(-50%); }
.phone-status { height: 22px; padding: 1px 3px 0; display: flex; justify-content: space-between; color: #3d5c7c; font-size: 6px; font-weight: 800; }
.phone-app-head { height: 38px; display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 5px; border-bottom: 1px solid #d9e5ef; }
.phone-brand-dot { width: 16px; height: 16px; background: var(--indigo); border-radius: 5px; }
.phone-app-head strong { font-size: 9px; }
.phone-app-head em { padding: 3px 5px; background: var(--indigo-soft); color: var(--indigo-deep); border-radius: 999px; font-size: 6px; font-style: normal; font-weight: 800; }
.driver-card { margin-top: 10px; padding: 13px 11px; background: #fff; border: 1px solid #d7e3ee; border-radius: 12px; box-shadow: 0 8px 18px rgba(0,27,59,.07); }
.driver-step { color: var(--indigo); font-size: 6px; letter-spacing: .12em; font-weight: 850; }
.driver-card h3 { margin: 6px 0 3px; font-size: 16px; line-height: 1.08; letter-spacing: -.025em; }
.driver-card p { margin-bottom: 10px; color: #566d84; font-size: 7px; }
.eta-row { padding: 7px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; background: var(--paper); border-radius: 7px; }
.eta-row span { color: #7d93a8; font-size: 6px; }
.eta-row strong { font-size: 12px; }
.eta-row em { padding: 3px 5px; background: var(--green-soft); color: #0a7350; border-radius: 999px; font-size: 6px; font-style: normal; font-weight: 750; }
.package-row { margin: 9px 0; padding-bottom: 8px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dfeaf3; color: #566d84; font-size: 6px; }
.package-row b { color: #33516f; }
.phone-primary, .phone-secondary { width: 100%; height: 31px; border-radius: 7px; font-size: 8px; font-weight: 800; }
.phone-primary { background: var(--indigo); color: #fff; }
.phone-secondary { margin-top: 6px; background: #fff; color: var(--ink); border: 1px solid #cfdeeb; }
.offline-chip { width: max-content; margin: 8px auto 0; padding: 5px 7px; display: flex; align-items: center; gap: 5px; background: var(--green-soft); color: #0a7350; border-radius: 999px; font-size: 6px; font-weight: 750; }
.offline-chip i { width: 5px; height: 5px; background: var(--good); border-radius: 50%; }
.phone-tabs { position: absolute; right: 0; bottom: 0; left: 0; height: 33px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-top: 1px solid #d9e5ef; color: #7d93a8; font-size: 6px; }
.phone-tabs span:first-child { color: var(--indigo); font-weight: 800; }
.customer-card { position: absolute; z-index: 10; right: 20px; bottom: 18px; width: 226px; padding: 14px; background: #fff; border: 1px solid #cddcea; border-radius: 11px; box-shadow: var(--shadow-md); }
.customer-card__top { display: flex; align-items: center; gap: 7px; }
.customer-logo-mark { width: 18px; height: 18px; position: relative; border: 2px solid var(--indigo); border-radius: 50%; }
.customer-logo-mark::after { content: ""; position: absolute; width: 6px; height: 6px; right: -2px; bottom: -2px; background: var(--indigo); border-radius: 50%; }
.customer-card__top small { color: #566d84; font-size: 7px; letter-spacing: .1em; font-weight: 850; }
.customer-card > strong { display: block; margin: 10px 0 3px; font-size: 13px; }
.customer-card p { margin: 0 0 10px; color: #566d84; font-size: 8px; }
.customer-progress { display: flex; gap: 4px; }
.customer-progress i { height: 4px; flex: 1; background: var(--good); border-radius: 999px; }
.customer-confirm { margin-top: 10px; padding: 7px 8px; display: flex; align-items: center; gap: 6px; background: var(--green-soft); color: #0a7350; border-radius: 7px; font-size: 7px; font-weight: 750; }
.demo-caption { max-width: calc(100% - 42px); min-height: 80px; margin: -7px 21px 0; padding: 16px 16px 16px 18px; position: relative; z-index: 12; display: grid; grid-template-columns: 34px 1fr 36px; align-items: center; gap: 12px; background: #fff; border: 1px solid #c8d9e8; border-radius: 12px; box-shadow: var(--shadow-md); }
.demo-caption__number { width: 34px; height: 34px; display: grid; place-items: center; background: var(--indigo-soft); color: var(--indigo-deep); border-radius: 8px; font-size: 10px; font-weight: 850; font-variant-numeric: tabular-nums; }
.demo-caption div { display: grid; gap: 3px; }
.demo-caption strong { font-size: 12px; }
.demo-caption p { margin: 0; color: #566d84; font-size: 9px; line-height: 1.45; }
.demo-caption button { width: 34px; height: 34px; display: grid; place-items: center; background: var(--rail); color: #fff; border-radius: 8px; cursor: pointer; transition: background .18s ease, transform .18s ease; }
.demo-caption button:hover { background: var(--indigo); transform: translateX(2px); }

.fact-strip { margin-top: 72px; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.fact-strip span { min-height: 84px; padding: 18px 24px; display: grid; align-content: center; }
.fact-strip span + span { border-left: 1px solid var(--line); }
.fact-strip strong { font-size: 13px; }
.fact-strip small { margin-top: 4px; color: var(--muted); font-size: 11px; }

.section-heading { max-width: 720px; }
.section-heading h2 { margin-bottom: 22px; color: var(--rail); font-size: clamp(38px, 4.3vw, 62px); line-height: 1.03; letter-spacing: -.052em; }
.section-heading p { max-width: 660px; margin-bottom: 0; color: var(--muted); font-size: 17px; line-height: 1.7; }
.section-heading--center { margin: 0 auto 64px; text-align: center; }
.section-heading--center p { margin-inline: auto; }
.section-heading--split { max-width: none; margin-bottom: 58px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr); align-items: end; gap: 70px; }
.section-heading--split h2 { margin-bottom: 0; max-width: 750px; }
.section-heading--split > p { padding-bottom: 5px; }

.workflow { background: #fff; border-top: 1px solid #e6eef6; border-bottom: 1px solid #dfeaf3; }
.workflow-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.workflow-track::before { content: ""; position: absolute; top: 33px; left: 10%; right: 10%; height: 1px; background: #cedcea; }
.workflow-step { position: relative; min-height: 430px; padding: 72px 22px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.step-index { position: absolute; top: 15px; left: 18px; color: #7d93a8; font-size: 9px; letter-spacing: .12em; font-weight: 850; }
.step-icon { position: absolute; z-index: 2; top: 12px; left: 50%; width: 44px; height: 44px; display: grid; place-items: center; background: #fff; color: var(--indigo); border: 1px solid #c3d5e6; border-radius: 50%; box-shadow: 0 6px 16px rgba(0,27,59,.08); transform: translateX(-50%); }
.step-icon .icon { width: 20px; height: 20px; }
.workflow-step h3 { margin-bottom: 10px; font-size: 22px; letter-spacing: -.03em; }
.workflow-step > p { color: var(--muted); font-size: 14px; line-height: 1.65; }
.step-ui { position: absolute; right: 18px; bottom: 18px; left: 18px; min-height: 128px; padding: 15px; background: #fff; border: 1px solid #d7e3ee; border-radius: 10px; box-shadow: 0 8px 20px rgba(0,27,59,.06); }

.proof-section { overflow: hidden; background: var(--rail); color: #fff; }
.proof-section::before { content: ""; position: absolute; width: 430px; height: 430px; right: -170px; bottom: -210px; border: 1px solid #14416b; border-radius: 50%; box-shadow: 0 0 0 70px rgba(10,42,74,.55), 0 0 0 140px rgba(10,42,74,.25); }
.proof-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(540px, 1.15fr); align-items: center; gap: 90px; }
.proof-copy { position: relative; z-index: 2; }
.proof-copy h2 { margin-bottom: 24px; font-size: clamp(42px, 4.7vw, 68px); line-height: 1.02; letter-spacing: -.055em; }
.proof-copy h2 span { color: #4ba6f3; }
.proof-copy > p { max-width: 580px; color: #b7c8d8; font-size: 17px; line-height: 1.75; }
.check-list { margin: 30px 0 34px; padding: 0; display: grid; gap: 18px; list-style: none; }
.check-list li { display: grid; grid-template-columns: 27px 1fr; gap: 12px; color: #b7c8d8; font-size: 14px; }
.check-list li > .icon { width: 27px; height: 27px; padding: 5px; background: #1f3b36; color: #6fe2b9; border-radius: 50%; }
.check-list strong { color: #fff; }
.proof-visual { position: relative; z-index: 2; min-height: 600px; display: grid; place-items: center; }
.proof-receipt { width: min(510px, 92%); padding: 22px; background: #fff; color: var(--ink); border-radius: 16px; box-shadow: 0 38px 90px rgba(0,0,0,.33); transform: rotate(1.2deg); }
.receipt-top { padding-bottom: 16px; display: grid; grid-template-columns: 45px 1fr auto; align-items: center; gap: 12px; border-bottom: 1px solid #dbe7f0; }
.receipt-mark { width: 45px; height: 45px; display: grid; place-items: center; background: var(--green-soft); color: var(--good); border-radius: 50%; }
.receipt-top div { display: grid; }
.receipt-top small, .receipt-data small, .receipt-note small { color: #7d93a8; font-size: 8px; letter-spacing: .1em; font-weight: 850; }
.receipt-top strong { margin-top: 3px; font-size: 14px; }
.receipt-top em { padding: 5px 8px; background: var(--paper); color: #3d5c7c; border-radius: 6px; font-size: 9px; font-style: normal; font-weight: 750; }
.receipt-photo { position: relative; height: 230px; margin: 18px 0; overflow: hidden; background: #cfdeeb; border-radius: 10px; }
.receipt-photo::before { content: ""; position: absolute; inset: 23px 35px 0; background: #c5cbd5; border: 8px solid #eef0f4; border-bottom: 0; }
.receipt-photo::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 51px; background: #babfc8; }
.photo-door { position: absolute; z-index: 1; width: 98px; height: 154px; left: 80px; bottom: 39px; background: #667085; border: 8px solid #eef4fa; }
.photo-door::before { content: ""; position: absolute; width: 6px; height: 6px; right: 10px; top: 72px; background: #e5bd62; border-radius: 50%; }
.photo-box { position: absolute; z-index: 2; bottom: 29px; background: #b78348; border: 2px solid #9c713e; }
.photo-box::before, .photo-box::after { content: ""; position: absolute; background: #d7a768; }
.photo-box::before { left: 50%; top: 0; bottom: 0; width: 5px; transform: translateX(-50%); }
.photo-box::after { left: 0; right: 0; top: 45%; height: 4px; }
.photo-box--one { width: 92px; height: 65px; right: 98px; }
.photo-box--two { width: 65px; height: 48px; right: 47px; }
.receipt-photo small { position: absolute; z-index: 4; right: 11px; top: 11px; padding: 5px 8px; background: rgba(0,27,59,.82); color: #fff; border-radius: 5px; font-size: 7px; font-weight: 750; }
.receipt-data { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.receipt-data span { display: grid; padding: 12px; background: var(--paper); border-radius: 8px; }
.receipt-data strong { margin-top: 4px; font-size: 11px; }
.receipt-note { margin-top: 14px; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #d3e1ec; border-radius: 8px; }
.receipt-note span { color: var(--ink); font-size: 12.5px; font-style: italic; }
.receipt-footer { margin-top: 15px; padding-top: 15px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #dbe7f0; }
.receipt-footer span { display: flex; align-items: center; gap: 7px; color: #3d5c7c; font-size: 9px; font-weight: 650; }
.receipt-footer span i { width: 7px; height: 7px; background: var(--good); border-radius: 50%; }
.receipt-footer button { height: 31px; padding: 0 10px; background: var(--rail); color: #fff; border-radius: 6px; font-size: 8px; font-weight: 750; }
.offline-queue-card { position: absolute; right: -12px; bottom: 22px; width: 280px; padding: 14px; display: grid; grid-template-columns: 39px 1fr; gap: 11px; background: #0d3055; border: 1px solid #164672; border-radius: 11px; box-shadow: 0 20px 45px rgba(0,0,0,.3); transform: rotate(-2.4deg); }
.queue-icon { width: 39px; height: 39px; display: grid; place-items: center; background: #123f6b; color: #4ba6f3; border-radius: 8px; }
.offline-queue-card div { display: grid; }
.offline-queue-card small { color: #7f98b2; font-size: 7px; letter-spacing: .1em; font-weight: 850; }
.offline-queue-card strong { margin: 2px 0; font-size: 12px; }
.offline-queue-card div span { color: #b7c8d8; font-size: 8px; }

.roles-section { background: var(--paper); }
.roles-section > .container > .section-heading { margin-bottom: 50px; }
.role-switcher { display: grid; grid-template-columns: 276px minmax(0, 1fr); background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md); overflow: hidden; }
.role-tabs { padding: 16px; display: grid; align-content: start; gap: 6px; background: var(--rail); }
.role-tabs button { min-height: 82px; padding: 13px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 11px; background: transparent; color: #b7c8d8; border: 1px solid transparent; border-radius: 9px; text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.role-tabs button:hover { background: #082a50; color: #fff; }
.role-tabs button[aria-selected="true"] { background: #0e3459; color: #fff; border-color: #184a77; }
.role-tabs button > .icon { width: 34px; height: 34px; padding: 8px; background: #0a2c52; color: #4ba6f3; border-radius: 8px; }
.role-tabs button[aria-selected="true"] > .icon { background: var(--indigo); color: #fff; }
.role-tabs button span { display: grid; }
.role-tabs strong { font-size: 13px; }
.role-tabs small { margin-top: 2px; color: #7f98b2; font-size: 9px; }
.role-tabs button[aria-selected="true"] small { color: #b7c8d8; }
.role-stage { min-height: 500px; padding: 60px; display: grid; grid-template-columns: minmax(300px, .8fr) minmax(430px, 1.2fr); align-items: center; gap: 70px; }
.role-copy { animation: roleIn .35s ease both; }
@keyframes roleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.role-label { color: var(--indigo); font-size: 9px; letter-spacing: .14em; font-weight: 850; }
.role-copy h3 { margin: 12px 0 16px; font-size: 34px; line-height: 1.08; letter-spacing: -.045em; }
.role-copy p { color: var(--muted); font-size: 15px; line-height: 1.75; }
.role-copy ul { margin: 23px 0 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.role-copy li { position: relative; padding-left: 22px; color: #29445f; font-size: 13px; font-weight: 650; }
.role-copy li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--good); border-radius: 50%; box-shadow: 0 0 0 4px var(--green-soft); }
.role-mock { min-height: 360px; position: relative; display: grid; place-items: center; animation: roleIn .4s .06s ease both; }
.role-mock--dispatcher { overflow: hidden; grid-template-columns: 42px 1fr 130px; background: #e9f0f8; border: 1px solid #c8d9e8; border-radius: 12px; box-shadow: var(--shadow-md); }
.mock-rail { align-self: stretch; background: var(--rail); }
.mock-map { position: relative; align-self: stretch; overflow: hidden; background: #e4edf6; }
.mock-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mock-list { align-self: stretch; padding: 20px 12px; display: grid; align-content: start; gap: 10px; background: #fff; border-left: 1px solid #d3e1ec; }
.mock-list span { height: 54px; background: var(--paper); border: 1px solid #d8e4ee; border-radius: 8px; }
.role-mock--driver, .role-mock--manager, .role-mock--recipient { background: #e9f1f9; border: 1px solid #c8d9e8; border-radius: 12px; }
.mini-phone, .manager-phone, .recipient-page { width: 220px; min-height: 390px; padding: 26px 18px; display: grid; align-content: start; background: #fff; border: 7px solid var(--rail); border-radius: 28px; box-shadow: var(--shadow-md); }
.mini-phone small, .manager-phone small, .recipient-page small { color: var(--indigo); font-size: 8px; letter-spacing: .12em; font-weight: 850; }
.mini-phone strong { margin: 18px 0 8px; font-size: 25px; line-height: 1.05; }
.mini-phone > span { color: var(--muted); font-size: 10px; }
.mini-phone button { height: 43px; margin-top: 50px; background: var(--indigo); color: #fff; border-radius: 8px; font-size: 11px; font-weight: 800; }
.mini-phone em { width: max-content; margin: 15px auto 0; padding: 5px 8px; background: var(--green-soft); color: #0a7350; border-radius: 999px; font-size: 7px; font-style: normal; font-weight: 750; }
.manager-phone > strong { margin: 22px 0 9px; font-size: 27px; letter-spacing: -.04em; }
.manager-progress { height: 7px; background: #dfeaf3; border-radius: 999px; overflow: hidden; }
.manager-progress i { display: block; width: 82%; height: 100%; background: var(--indigo); border-radius: inherit; }
.manager-phone > span { margin-top: 17px; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #dfeaf3; color: var(--muted); font-size: 10px; }
.manager-phone > span b { color: var(--ink); font-size: 18px; }
.recipient-page { min-height: 370px; border-width: 1px; border-radius: 15px; }
.recipient-pin { width: 48px; height: 48px; margin-bottom: 16px; position: relative; background: var(--indigo-soft); border-radius: 50%; }
.recipient-pin::before { content: ""; position: absolute; width: 16px; height: 20px; left: 16px; top: 12px; background: var(--indigo); border-radius: 10px 10px 10px 0; transform: rotate(-45deg); }
.recipient-page > strong { margin: 17px 0 6px; font-size: 28px; }
.recipient-page p { color: var(--muted); font-size: 11px; }
.recipient-line { margin: 25px 0; display: flex; align-items: center; gap: 4px; }
.recipient-line i { position: relative; height: 4px; flex: 1; background: var(--good); border-radius: 999px; }
.recipient-line i::after { content: ""; position: absolute; right: -4px; top: -3px; width: 10px; height: 10px; background: #fff; border: 2px solid var(--good); border-radius: 50%; }
.recipient-page em { color: var(--muted); font-size: 9px; font-style: normal; }

.capabilities-section { background: #fff; }
.underlay-bar { margin-top: 18px; min-height: 104px; padding: 21px 25px; display: grid; grid-template-columns: 47px 1fr auto; align-items: center; gap: 17px; background: var(--rail); color: #fff; border-radius: var(--radius); }
.underlay-icon { width: 47px; height: 47px; display: grid; place-items: center; background: #0e3459; color: #4ba6f3; border-radius: 10px; }
.underlay-bar div { display: grid; }
.underlay-bar small { color: #7f98b2; font-size: 8px; letter-spacing: .12em; font-weight: 850; }
.underlay-bar strong { margin-top: 4px; font-size: 15px; }
.underlay-bar a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 12px; font-weight: 750; }
.underlay-bar a:hover { color: #78bdf7; }

.signal-section { background: var(--paper); }
.signal-grid { display: grid; grid-template-columns: minmax(340px, .72fr) minmax(620px, 1.28fr); align-items: center; gap: 80px; }
.same-system { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.same-system span { padding: 7px 9px; display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--line); border-radius: 999px; color: #3d5c7c; font-size: 10px; font-weight: 700; }
.same-system .icon { color: var(--good); }
.signal-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.signal-card { position: relative; min-height: 520px; padding: 25px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.signal-card--device { background: var(--rail); color: #fff; border-color: var(--rail); }
.signal-card__top { display: flex; align-items: center; justify-content: space-between; }
.signal-icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--indigo-soft); color: var(--indigo); border-radius: 10px; }
.signal-card--device .signal-icon { background: #0e3459; color: #4ba6f3; }
.signal-card__top em { padding: 5px 7px; background: var(--green-soft); color: #0a7350; border-radius: 999px; font-size: 7px; font-style: normal; font-weight: 850; letter-spacing: .05em; }
.signal-card--device .signal-card__top em { background: #1e4139; color: #72e1b9; }
.signal-card > small { display: block; margin: 26px 0 8px; color: var(--indigo); font-size: 8px; letter-spacing: .13em; font-weight: 850; }
.signal-card--device > small { color: #4ba6f3; }
.signal-card h3 { margin-bottom: 13px; font-size: 27px; line-height: 1.08; letter-spacing: -.04em; }
.signal-card > p { color: var(--muted); font-size: 13px; line-height: 1.65; }
.signal-card--device > p { color: #b7c8d8; }
.signal-card ul { margin: 20px 0 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.signal-card li { position: relative; padding-left: 18px; color: #3a5878; font-size: 11px; font-weight: 650; }
.signal-card li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--good); border-radius: 50%; }
.signal-card--device li { color: #b7c8d8; }
.phone-signal-visual, .beacon-visual { position: absolute; right: 25px; bottom: 25px; left: 25px; min-height: 128px; padding: 18px; display: grid; align-content: center; background: var(--paper); border: 1px solid #d8e4ee; border-radius: 10px; }
.phone-signal-visual > span { margin-bottom: 14px; display: flex; align-items: end; gap: 4px; }
.phone-signal-visual > span i { width: 6px; background: var(--indigo); border-radius: 3px 3px 0 0; }
.phone-signal-visual > span i:nth-child(1) { height: 9px; }
.phone-signal-visual > span i:nth-child(2) { height: 15px; }
.phone-signal-visual > span i:nth-child(3) { height: 22px; }
.phone-signal-visual b { font-size: 10px; }
.phone-signal-visual small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.beacon-visual { overflow: hidden; background: #082a50; border-color: #134068; }
.beacon-photo { position: relative; z-index: 2; width: 132px; height: auto; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .45)); }
.device-wave { position: absolute; left: 118px; top: 36px; width: 58px; height: 58px; border: 1px solid #2f6291; border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(45deg); }
.device-wave--2 { width: 94px; height: 94px; left: 100px; top: 18px; opacity: .5; }
.beacon-visual > small { position: absolute; right: 17px; bottom: 16px; color: #9db4cb; font-size: 8px; }

.comparison-section { background: #fff; border-top: 1px solid #e6eef6; border-bottom: 1px solid #dfeaf3; }
.comparison-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.comparison-table { width: 100%; min-width: 960px; border-collapse: collapse; background: #fff; font-size: 12px; }
.comparison-table th, .comparison-table td { height: 67px; padding: 14px 18px; border-bottom: 1px solid #dfeaf3; text-align: left; }
.comparison-table thead th { height: 70px; background: var(--paper); color: #43648a; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.comparison-table thead th:first-child { width: 25%; }
.comparison-table tbody th { color: #29445f; font-size: 12px; font-weight: 700; }
.comparison-table td { color: #566d84; }
.comparison-table tr:last-child th, .comparison-table tr:last-child td { border-bottom: 0; }
.comparison-table th + th, .comparison-table td + td { border-left: 1px solid #dfeaf3; }
.comparison-table .optics-col { background: #eaf5ff; color: var(--indigo-deep); }
.comparison-table thead .optics-col { background: var(--indigo); color: #fff; }
.table-logo-dot { width: 15px; height: 15px; margin-right: 7px; display: inline-block; vertical-align: -3px; position: relative; border: 2px solid #fff; border-radius: 50%; }
.table-logo-dot::after { content: ""; position: absolute; width: 5px; height: 5px; right: -3px; bottom: -2px; background: #fff; border-radius: 50%; }
.yes, .partial, .no { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.yes { color: #0a7350; }
.optics-col .yes { color: var(--indigo-deep); }
.yes .icon { width: 15px; height: 15px; padding: 2px; background: var(--green-soft); color: var(--good); border-radius: 50%; }
.optics-col .yes .icon { background: #fff; color: var(--indigo); }
.partial { color: var(--warn); }
.no { color: #7d93a8; }
.comparison-note { margin: 14px 0 0; color: #7d93a8; font-size: 10px; text-align: center; }

.pricing-section { background: var(--paper); }
.pricing-head { margin-bottom: 52px; display: flex; align-items: end; justify-content: space-between; gap: 40px; }
.pricing-head .section-heading h2 { margin-bottom: 18px; }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.price-card { min-height: 480px; padding: 24px; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.price-card:hover { transform: translateY(-4px); border-color: #b7cde1; box-shadow: var(--shadow-sm); }
.price-card--featured { background: var(--rail); color: #fff; border-color: var(--rail); box-shadow: var(--shadow-md); }
.price-card--featured:hover { border-color: var(--rail); box-shadow: var(--shadow-lg); }
.price-card__head { display: flex; align-items: center; justify-content: space-between; }
.price-card__head span { color: var(--indigo); font-size: 10px; letter-spacing: .12em; font-weight: 850; }
.price-card--featured .price-card__head span { color: #4ba6f3; }
.price-card__head em { padding: 4px 7px; background: var(--paper); color: #566d84; border-radius: 999px; font-size: 7px; font-style: normal; font-weight: 750; }
.price-card--featured .price-card__head em { background: #0e3459; color: #b7c8d8; }
.price-card h3 { margin: 32px 0 8px; display: flex; align-items: baseline; gap: 7px; }
.price-card h3 b { font-size: 42px; line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.price-card h3 small { color: var(--muted); font-size: 10px; font-weight: 600; }
.price-card--featured h3 small { color: #b7c8d8; }
.price-card > p { min-height: 52px; color: var(--muted); font-size: 12px; }
.price-card--featured > p { color: #b7c8d8; }
.price-card ul { margin: 23px 0 26px; padding: 22px 0 0; display: grid; gap: 12px; border-top: 1px solid #dbe7f0; list-style: none; }
.price-card--featured ul { border-color: #113a61; }
.price-card li { display: flex; align-items: center; gap: 9px; color: #3a5878; font-size: 11px; }
.price-card--featured li { color: #b7c8d8; }
.price-card li .icon { width: 19px; height: 19px; padding: 4px; background: var(--green-soft); color: var(--good); border-radius: 50%; }
.price-card--featured li .icon { background: #1f3e38; color: #63dcb1; }
.price-card > a { min-height: 43px; margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: var(--indigo-deep); border: 1px solid #c1d4e5; border-radius: 8px; font-size: 11px; font-weight: 800; }
.price-card > a:hover { border-color: var(--indigo); }
.price-card--featured > a { background: var(--indigo); color: #fff; border-color: var(--indigo); }
.price-card--featured > a:hover { background: var(--indigo-hover); border-color: var(--indigo-hover); }
.exit-note { margin-top: 20px; padding: 23px 25px; display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 17px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.exit-icon { width: 48px; height: 48px; display: grid; place-items: center; background: var(--green-soft); color: var(--good); border-radius: 10px; }
.exit-note div { display: grid; }
.exit-note small { color: var(--indigo); font-size: 8px; letter-spacing: .12em; font-weight: 850; }
.exit-note strong { margin: 4px 0 3px; font-size: 14px; }
.exit-note p { margin: 0; color: var(--muted); font-size: 10px; }
.pricing-fineprint { margin: 13px 0 0; color: #7d93a8; font-size: 9px; text-align: center; }

.faq-section { background: var(--paper); border-top: 1px solid #dfeaf3; }
.faq-grid { display: grid; grid-template-columns: minmax(340px, .72fr) minmax(600px, 1.28fr); align-items: start; gap: 100px; }
.text-arrow { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; color: var(--indigo-deep); font-size: 13px; font-weight: 800; }
.text-arrow:hover { color: var(--indigo); }
.faq-list { border-top: 1px solid #d3e1ec; }
.faq-list details { border-bottom: 1px solid #d3e1ec; }
.faq-list summary { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 720; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { width: 30px; height: 30px; position: relative; flex: 0 0 auto; border: 1px solid #c1d4e5; border-radius: 50%; }
.faq-list summary span::before, .faq-list summary span::after { content: ""; position: absolute; left: 8px; right: 8px; top: 14px; height: 1px; background: var(--ink); }
.faq-list summary span::after { transform: rotate(90deg); transition: transform .2s ease; }
.faq-list details[open] summary span::after { transform: rotate(0); }
.faq-list details p { max-width: 760px; margin: -7px 54px 25px 0; color: var(--muted); font-size: 13px; line-height: 1.75; }

.final-cta-section { padding: 0 0 90px; background: var(--paper); }
.final-cta { min-height: 510px; padding: 68px; display: grid; grid-template-columns: minmax(420px, .85fr) minmax(480px, 1.15fr); align-items: center; gap: 70px; overflow: hidden; background: var(--rail); color: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); }
.final-cta__copy { position: relative; z-index: 3; }
.final-cta h2 { margin-bottom: 22px; font-size: clamp(42px, 4.5vw, 66px); line-height: 1.01; letter-spacing: -.055em; }
.final-cta p { max-width: 580px; color: #b7c8d8; font-size: 16px; line-height: 1.75; }
.final-actions { margin-top: 29px; display: flex; flex-wrap: wrap; gap: 11px; }
.final-visual { position: relative; min-height: 360px; }
.final-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.final-map .fm-block rect { fill: #0a2c52; stroke: #164672; stroke-width: 1; }
.final-map .fm-lane path { fill: none; stroke: #1d5382; stroke-width: 1; stroke-dasharray: 4 8; }
.final-map .mm-route { stroke-width: 5; }
.final-map .mm-tag rect { fill: #06264a; stroke: #2a5c8e; filter: none; }
.final-map .mm-tag text { fill: #dbe7f3; }
.final-dest circle { fill: var(--good); stroke: #fff; stroke-width: 2.5; }
.final-dest path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.final-card { position: absolute; z-index: 4; right: 6%; bottom: 8%; width: 200px; padding: 15px; display: grid; background: #fff; color: var(--ink); border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.27); }
.final-card small { color: var(--muted); font-size: 7px; letter-spacing: .1em; font-weight: 850; }
.final-card strong { margin: 5px 0 10px; font-size: 14px; }
.final-card span { padding: 7px 8px; display: flex; align-items: center; gap: 7px; background: var(--green-soft); color: #0a7350; border-radius: 7px; font-size: 8px; font-weight: 750; }
.final-card span i { width: 6px; height: 6px; background: var(--good); border-radius: 50%; }

[hidden] { display: none !important; }

@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: .78fr 1.22fr; gap: 38px; }
  .hero h1 { font-size: clamp(50px, 5.5vw, 68px); }
  .product-body { grid-template-columns: 190px minmax(0, 1fr); }
  .phone-frame { right: 14px; width: 184px; }
  .role-stage { padding: 46px; gap: 40px; }
  .signal-grid { grid-template-columns: .67fr 1.33fr; gap: 48px; }
  .final-cta { padding: 55px; grid-template-columns: .9fr 1.1fr; gap: 35px; }
}

@media (max-width: 1020px) {
  .section { padding: 88px 0; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: 780px; padding-bottom: 0; }
  .hero h1 { font-size: clamp(60px, 9vw, 86px); }
  .hero-product { width: 100%; max-width: 880px; margin-inline: auto; }
  .fact-strip { grid-template-columns: repeat(2, 1fr); }
  .fact-strip span:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .fact-strip span:nth-child(4) { border-top: 1px solid var(--line); }
  .workflow-track { grid-template-columns: repeat(2, 1fr); }
  .workflow-track::before { display: none; }
  .proof-grid { grid-template-columns: 1fr; gap: 50px; }
  .proof-copy { max-width: 760px; }
  .proof-visual { min-height: 580px; }
  .role-switcher { grid-template-columns: 1fr; }
  .role-tabs { grid-template-columns: repeat(4, 1fr); }
  .role-tabs button { min-height: 88px; grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .role-tabs button > .icon { width: 32px; height: 32px; }
  .role-tabs small { display: none; }
  .role-stage { grid-template-columns: .8fr 1.2fr; }
  .signal-grid { grid-template-columns: 1fr; }
  .signal-grid > .section-heading { max-width: 760px; }
  .pricing-head { align-items: start; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .faq-grid { grid-template-columns: 1fr; gap: 48px; }
  .faq-grid .section-heading { max-width: 760px; }
  .final-cta { grid-template-columns: 1fr; }
  .final-cta__copy { max-width: 730px; }
  .final-visual { min-height: 390px; }
}

@media (max-width: 760px) {
  .container { width: min(100% - 28px, var(--container)); }
  .section { padding: 72px 0; }

  .hero { padding-top: 62px; }
  .hero h1 { font-size: clamp(50px, 14vw, 70px); }
  .hero-lede { font-size: 17px; }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .hero-assurances { display: grid; gap: 10px; }
  .demo-tabs { margin-left: 0; overflow-x: auto; padding-bottom: 3px; }
  .demo-tabs button { flex: 0 0 auto; }
  .product-frame { height: 500px; grid-template-columns: 48px minmax(0, 1fr); }
  .product-rail { padding-inline: 6px; }
  .rail-logo b, .rail-item b, .rail-group small { display: none; }
  .rail-logo { justify-content: center; padding-inline: 0; }
  .rail-logo span { width: 15px; height: 15px; }
  .rail-item { min-height: 42px; }
  .product-body { grid-template-columns: 1fr; }
  .ops-panel { display: none; }
  .product-topbar { padding-inline: 12px; }
  .phone-frame { right: 12px; bottom: -28px; width: 172px; height: 375px; }
  .driver-card h3 { font-size: 14px; }
  .customer-card { right: 11px; width: 205px; }
  .proof-popover { right: 12px; width: 220px; }
  .map-alert { left: 14px; right: auto; bottom: 14px; }
  .demo-caption { max-width: calc(100% - 20px); margin-inline: 10px; grid-template-columns: 30px 1fr 32px; }
  .demo-caption p { font-size: 8px; }
  .fact-strip { margin-top: 54px; grid-template-columns: 1fr; }
  .fact-strip span + span, .fact-strip span:nth-child(3), .fact-strip span:nth-child(4) { border-left: 0; border-top: 1px solid var(--line); }
  .fact-strip span { min-height: 75px; }
  .section-heading h2 { font-size: clamp(38px, 11vw, 54px); }
  .section-heading--split { grid-template-columns: 1fr; gap: 20px; }
  .workflow-track { grid-template-columns: 1fr; }
  .workflow-step { min-height: 400px; }
  .proof-section::before { display: none; }
  .proof-visual { min-height: 520px; }
  .proof-receipt { width: 100%; padding: 15px; transform: none; }
  .receipt-photo { height: 190px; }
  .receipt-data { grid-template-columns: 1fr 1fr; }
  .offline-queue-card { right: 0; bottom: -8px; width: 250px; }
  .role-tabs { padding: 10px; grid-template-columns: repeat(2, 1fr); }
  .role-tabs button { min-height: 72px; grid-template-columns: 30px 1fr; justify-items: start; text-align: left; }
  .role-tabs button > .icon { width: 30px; height: 30px; }
  .role-stage { min-height: 0; padding: 35px 24px; grid-template-columns: 1fr; gap: 34px; }
  .role-copy h3 { font-size: 29px; }
  .role-mock { min-height: 330px; }
  .underlay-bar { grid-template-columns: 42px 1fr; }
  .underlay-bar a { grid-column: 2; }
  .signal-options { grid-template-columns: 1fr; }
  .signal-card { min-height: 500px; }
  .pricing-head { display: grid; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card { min-height: 440px; }
  .final-cta-section { padding-bottom: 60px; }
  .final-cta { min-height: 0; padding: 45px 25px; border-radius: 14px; }
  .final-actions { display: grid; }
  .final-actions .button { width: 100%; }
  .final-visual { min-height: 330px; }

}

@media (max-width: 480px) {

  .hero h1 { font-size: 49px; }
  .hero-lede { font-size: 16px; }
  .product-frame { height: 445px; grid-template-columns: 38px minmax(0, 1fr); border-radius: 13px; }
  .product-rail { padding-inline: 3px; }
  .rail-logo span { width: 13px; height: 13px; }
  .rail-item .icon { width: 14px; height: 14px; }
  .product-shell { grid-template-rows: 52px minmax(0, 1fr); }
  .topbar-actions .sync-chip { display: none; }
  .map-alert { min-width: 145px; }
  .phone-frame { width: 150px; height: 335px; border-width: 5px; border-radius: 24px; }
  .phone-app-head { height: 32px; }
  .driver-card { padding: 10px 8px; }
  .driver-card h3 { font-size: 13px; }
  .phone-primary, .phone-secondary { height: 27px; }
  .customer-card { width: 184px; padding: 11px; }
  .proof-popover { width: 190px; }
  .dispatch-card { left: 12px; width: 178px; }
  .tracking-card { left: 34%; }
  .demo-caption { min-height: 88px; padding: 12px 10px; gap: 8px; }
  .demo-caption strong { font-size: 10px; }
  .demo-caption p { display: none; }
  .section-heading h2 { font-size: 39px; }
  .proof-copy h2 { font-size: 42px; }
  .receipt-top { grid-template-columns: 39px 1fr; }
  .receipt-top em { display: none; }
  .receipt-photo { height: 165px; }
  .photo-door { left: 42px; }
  .photo-box--one { right: 63px; }
  .photo-box--two { right: 16px; }
  .receipt-data { gap: 8px; }
  .receipt-data span { padding: 9px; }
  .receipt-footer button { display: none; }
  .offline-queue-card { width: 235px; }
  .role-tabs button { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .role-tabs strong { font-size: 11px; }
  .role-mock--dispatcher { grid-template-columns: 32px 1fr 90px; }
  .mini-phone, .manager-phone, .recipient-page { width: 205px; }
  .underlay-bar { padding: 18px; }
  .underlay-bar strong { font-size: 13px; }
  .signal-card { padding: 22px; }
  .comparison-table { min-width: 860px; }
  .exit-note { grid-template-columns: 1fr; }
  .faq-list summary { font-size: 14px; }
  .faq-list details p { margin-right: 0; }
  .final-visual { transform: scale(.85); margin-inline: -35px; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* --- Additions for the integrated page (not in the 2.0 concept) ----------- */
/* The concept's invented prices were replaced with the real rate card; these
   support the annual line and the quote-only Enterprise card. */
.price-card h3 { margin-bottom: 6px; }
.price-annual { margin: 0 0 12px; color: var(--muted); font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums; }
.price-card--featured .price-annual { color: #b7c8d8; }
.price-quote { font-size: 27px; line-height: 1.15; letter-spacing: -.02em; }
.exit-note p a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.exit-note p a:hover { color: var(--accent-hover); }
/* The base .role-mock centers a single phone; the dispatcher mock is a 3-column
   console and needs its tracks stretched, or every column collapses to its
   (zero) content width — a latent bug in the imported concept. */
.role-mock--dispatcher { place-items: stretch; }

/* ===========================================================================
   Capabilities v2 — a varied, product-first composition (8/4 · 4/4/4 · 7/5 · 12)
   Every mini-UI demonstrates its capability instead of decorating it.
   =========================================================================== */
.cap2-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.cap2 { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.cap2:hover { transform: translateY(-3px); border-color: #bacfe2; box-shadow: var(--shadow-sm); }
.cap2--8 { grid-column: span 8; }
.cap2--7 { grid-column: span 7; }
.cap2--5 { grid-column: span 5; }
.cap2--4 { grid-column: span 4; }
.cap2--12 { grid-column: span 12; }
.cap2-head { display: flex; align-items: center; gap: 13px; }
.cap2-icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; background: #fff; color: var(--indigo); border: 1px solid #cddcea; border-radius: 10px; box-shadow: 0 5px 12px rgba(0, 27, 59, .05); }
.cap2-head small { display: block; margin-bottom: 3px; color: #7d93a8; font-size: 8.5px; letter-spacing: .12em; font-weight: 850; }
.cap2-head h3 { margin: 0; font-size: 19px; line-height: 1.12; letter-spacing: -.028em; }
.cap2 > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.cap2-ui { margin-top: auto; background: #fff; border: 1px solid #dfe9f2; border-radius: 10px; box-shadow: 0 6px 16px rgba(0, 27, 59, .05); overflow: hidden; }
.cap2--accent { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.cap2--accent:hover { border-color: #0261c2; box-shadow: 0 18px 44px rgba(2, 118, 222, .25); }
.cap2--accent .cap2-icon { background: #2189e4; color: #fff; border-color: #3f97ea; box-shadow: none; }
.cap2--accent .cap2-head small { color: #a5d3fa; }
.cap2--accent > p { color: #d6ebfd; }

.cap2-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; background: #eff5fb; color: #3d5c7c; font-size: 9px; font-weight: 750; white-space: nowrap; }
.cap2-chip i { width: 6px; height: 6px; border-radius: 50%; background: #7d93a8; }
.cap2-chip--good { background: var(--green-soft); color: #0a7350; }
.cap2-chip--good i { background: var(--good); }
.cap2-chip--warn { background: #fdf3e3; color: #8a4f06; }
.cap2-chip--warn i { background: var(--warn); }
.cap2-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: 0; }
.cap2-dot--good { background: var(--good); }
.cap2-dot--warn { background: var(--warn); }
.cap2-dot--accent { background: var(--indigo); }
.cap2-tag { padding: 3px 7px; border-radius: 999px; background: #eff5fb; color: #566d84; font-size: 8px; font-style: normal; font-weight: 800; white-space: nowrap; }
.cap2-tag--good { background: var(--green-soft); color: #0a7350; }
.cap2-tag--accent { background: var(--indigo-soft); color: var(--indigo-deep); }
.cap2-mono { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-variant-numeric: tabular-nums; }

/* 01 · live map */
.cap2-map-bar { display: flex; align-items: center; gap: 8px; padding: 10px 13px; border-bottom: 1px solid #e5eef7; }
.cap2-map-bar b { margin-right: auto; font-size: 11px; }
.cap2-map-stage { position: relative; height: 205px; background: #e9f0f8; overflow: hidden; }
.cap2-popover { position: absolute; right: 12px; bottom: 12px; display: grid; gap: 3px; padding: 10px 12px; background: rgba(255,255,255,.97); border: 1px solid #cddcea; border-radius: 9px; box-shadow: var(--shadow-sm); }
.cap2-popover b { font-size: 10px; }
.cap2-popover span { display: flex; align-items: center; gap: 5px; color: #0a7350; font-size: 8.5px; font-weight: 700; }
.cap2-popover small { color: #7d93a8; font-size: 8px; }
.cap2-map-legend { display: flex; gap: 14px; padding: 9px 13px; border-top: 1px solid #e5eef7; color: #566d84; font-size: 9px; font-weight: 650; }
.cap2-map-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* 07 · safety triage */
.cap2-safety { display: grid; gap: 7px; padding: 12px; }
.cap2-event { display: grid; grid-template-columns: 4px 1fr auto; align-items: center; gap: 10px; padding: 9px 10px 9px 8px; background: #fbfdff; border: 1px solid #e5eef7; border-radius: 8px; }
.cap2-event > i { width: 4px; height: 26px; border-radius: 999px; background: #bccddd; }
.cap2-event--crit > i { background: var(--critical); }
.cap2-event--warn > i { background: var(--warn); }
.cap2-event--ok > i { background: var(--good); }
.cap2-event b { display: block; font-size: 10.5px; }
.cap2-event small { color: #7d93a8; font-size: 8.5px; }
.cap2-event em { color: #566d84; font-size: 8px; font-style: normal; font-weight: 800; }
.cap2-event--crit em { color: #a32a20; }
.cap2-event--ok em { color: #0a7350; }

/* 02 · dispatch stops */
.cap2-stops { display: grid; gap: 7px; padding: 12px; }
.cap2-stop { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 9px; padding: 8px 9px; background: #fbfdff; border: 1px solid #e5eef7; border-radius: 8px; }
.cap2-stop--next { border-color: var(--indigo); box-shadow: 0 4px 12px rgba(2, 118, 222, .1); }
.cap2-seq { width: 24px; height: 24px; display: grid; place-items: center; background: #eff5fb; color: #3d5c7c; border-radius: 50%; font-size: 10px; font-style: normal; font-weight: 800; }
.cap2-seq--done { background: var(--good); color: #fff; }
.cap2-seq--next { background: var(--indigo-soft); color: var(--indigo-deep); }
.cap2-stop b { display: block; font-size: 10.5px; }
.cap2-stop small { color: #7d93a8; font-size: 8.5px; }
.cap2-stops-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 2px 0; color: #566d84; font-size: 9px; font-weight: 650; }

/* 03 · proof record */
.cap2-proof { background: #fff; color: var(--ink); padding: 12px; display: grid; gap: 9px; }
.cap2-proof-top { display: grid; grid-template-columns: 74px 1fr; gap: 11px; align-items: center; }
.cap2-photo { position: relative; display: block; width: 74px; height: 58px; background: #d9dde5; border-radius: 7px; overflow: hidden; }
.cap2-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: #babfc8; }
.cap2-photo-door { position: absolute; left: 12px; bottom: 10px; width: 22px; height: 36px; background: #667085; border: 3px solid #f4f5f7; }
.cap2-photo-box { position: absolute; right: 12px; bottom: 12px; width: 24px; height: 16px; background: #b78348; border: 2px solid #9c713e; z-index: 1; }
.cap2-photo > small { position: absolute; z-index: 2; left: 4px; top: 4px; padding: 2px 4px; background: rgba(0,27,59,.82); color: #fff; border-radius: 3px; font-size: 6px; font-weight: 750; }
.cap2-photo--sm { width: 58px; height: 46px; }
.cap2-photo--sm .cap2-photo-door { left: 8px; bottom: 8px; width: 18px; height: 28px; }
.cap2-photo--sm .cap2-photo-box { right: 8px; bottom: 9px; width: 19px; height: 13px; }
.cap2-proof-id { display: grid; gap: 2px; }
.cap2-proof-id small { color: #7d93a8; font-size: 7.5px; letter-spacing: .1em; font-weight: 850; }
.cap2-proof-id b { font-size: 12px; }
.cap2-note { margin: 0; color: #3d5c7c; font-size: 10.5px; font-style: italic; }
.cap2-proof-chips { display: flex; gap: 6px; }
.cap2-proof-chips span { padding: 4px 8px; background: #eff5fb; color: #29445f; border-radius: 999px; font-size: 8.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cap2-proof-foot { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid #e5eef7; color: #0a7350; font-size: 9px; font-weight: 750; }
.cap2-proof-foot i { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.cap2--accent .cap2-ui { border-color: #3f97ea; }

/* 04 · customer journey */
.cap2-journey { display: grid; padding: 12px 12px 10px; }
.cap2-leg { position: relative; display: grid; grid-template-columns: 20px 1fr auto; align-items: start; gap: 9px; padding: 7px 2px; }
.cap2-leg::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: -8px; width: 2px; background: #dfe9f2; }
.cap2-leg:last-child::before { display: none; }
.cap2-leg > i { position: relative; z-index: 1; width: 20px; height: 20px; display: grid; place-items: center; background: #fff; border: 2px solid #bccddd; border-radius: 50%; color: #fff; font-size: 10px; font-style: normal; font-weight: 800; }
.cap2-leg--done > i { background: var(--good); border-color: var(--good); }
.cap2-leg--now > i { border-color: var(--indigo); box-shadow: 0 0 0 4px rgba(2,118,222,.14); }
.cap2-leg--now > i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--indigo); }
.cap2-leg b { display: block; font-size: 10.5px; }
.cap2-leg small { color: #7d93a8; font-size: 8.5px; }
.cap2-leg em { align-self: center; padding: 3px 7px; background: var(--indigo-soft); color: var(--indigo-deep); border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 800; }
.cap2-leg:not(.cap2-leg--done):not(.cap2-leg--now) b { color: #7d93a8; }

/* 06 · geofence */
.cap2-zone-stage { height: 225px; }
.cap2-toast { position: absolute; right: 12px; top: 12px; display: grid; gap: 2px; padding: 10px 12px; background: rgba(255,255,255,.97); border: 1px solid #cddcea; border-left: 3px solid var(--indigo); border-radius: 8px; box-shadow: var(--shadow-sm); }
.cap2-toast b { font-size: 9.5px; }
.cap2-toast small { color: #566d84; font-size: 8.5px; }

/* 05 · hardware */
.cap2-device { display: grid; gap: 10px; padding: 13px; }
.cap2-beacon { display: flex; align-items: center; gap: 14px; }
.cap2-beacon-photo { width: 62px; height: auto; filter: drop-shadow(0 10px 16px rgba(0, 27, 59, .28)); }
.cap2-beacon > small { color: #566d84; font-size: 9px; font-weight: 700; line-height: 1.6; }
.cap2-beacon > small b { color: var(--ink); letter-spacing: .08em; }
.cap2-device-rows { display: grid; gap: 6px; }
.cap2-device-rows > div { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 8px; padding: 7px 9px; background: #fbfdff; border: 1px solid #e5eef7; border-radius: 7px; }
.cap2-device-rows small { color: #7d93a8; font-size: 7.5px; letter-spacing: .1em; font-weight: 850; }
.cap2-device-rows b { display: flex; align-items: center; gap: 6px; font-size: 10px; }
.cap2-device-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 9px; border-top: 1px solid #e5eef7; color: #566d84; font-size: 9px; font-weight: 700; }
.cap2-device-foot span { display: inline-flex; align-items: center; gap: 6px; }
.cap2-device-foot .icon { width: 13px; height: 13px; color: var(--indigo); }

/* 08 · shift timeline */
.cap2--timeline .cap2-ui { display: grid; grid-template-columns: minmax(0, 1fr) 220px; }
.cap2-punches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; }
.cap2-punch { position: relative; display: grid; grid-template-columns: 14px 1fr; gap: 9px; align-items: start; }
.cap2-punch::after { content: ""; position: absolute; left: calc(14px + 9px + 4px); right: -4px; top: 6px; height: 2px; background: #dfe9f2; }
.cap2-punch:last-child::after { display: none; }
.cap2-punch > i { position: relative; z-index: 1; width: 14px; height: 14px; margin-top: 0; border: 2px solid #bccddd; border-radius: 50%; background: #fff; }
.cap2-punch--done > i { background: var(--good); border-color: var(--good); }
.cap2-punch small { display: block; color: #7d93a8; font-size: 7.5px; letter-spacing: .1em; font-weight: 850; }
.cap2-punch b { display: block; margin: 2px 0 1px; font-size: 13px; font-variant-numeric: tabular-nums; }
.cap2-punch span { color: #566d84; font-size: 8.5px; }
.cap2-shift-sum { display: grid; align-content: center; justify-items: start; gap: 5px; padding: 16px; border-left: 1px solid #e5eef7; background: #fbfdff; }
.cap2-shift-sum > small { color: #7d93a8; font-size: 7.5px; letter-spacing: .1em; font-weight: 850; }
.cap2-shift-sum > b { font-size: 24px; letter-spacing: -.02em; }
.cap2-rate { color: #7d93a8; font-size: 8.5px; letter-spacing: 0; font-weight: 600; }

/* Operating-loop step surfaces v2 */
.wf-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #eaf1f8; }
.wf-row b { font-size: 10.5px; font-weight: 700; }
.wf-grip { width: 8px; height: 12px; background: repeating-linear-gradient(180deg, #bccddd 0 2px, transparent 2px 5px); border-radius: 1px; }
.wf-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; color: #566d84; font-size: 9px; font-weight: 700; }
.wf-foot em { color: #0a7350; font-size: 8px; font-style: normal; font-weight: 850; letter-spacing: .08em; }
.wf-build, .wf-live, .wf-drive, .wf-prove { display: grid; align-content: space-between; }
.wf-map { position: relative; height: 64px; margin-bottom: 4px; background: #e9f0f8; border-radius: 7px; overflow: hidden; }
.wf-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.wf-vanchip { position: absolute; left: 68%; top: 36%; transform: translate(-50%, -50%); }
.wf-vanchip b { padding: 3px 6px; background: var(--good); color: #fff; border: 2px solid #fff; border-radius: 6px 6px 6px 2px; font-size: 7.5px; box-shadow: 0 4px 10px rgba(0,27,59,.2); }
.wf-kicker { color: var(--indigo); font-size: 7px; letter-spacing: .12em; font-weight: 850; }
.wf-drive b { font-size: 14px; }
.wf-drive small { color: #566d84; font-size: 8.5px; }
.wf-primary, .wf-secondary { height: 30px; border-radius: 7px; font-size: 9px; font-weight: 800; }
.wf-primary { margin-top: 6px; background: var(--indigo); color: #fff; }
.wf-secondary { margin-top: 5px; background: #fff; color: var(--ink); border: 1px solid #cddcea; }
.wf-prove-row { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: center; }
.wf-prove-row b { display: block; font-size: 11.5px; }
.wf-prove-row small { display: block; color: #566d84; font-size: 8.5px; }

/* Prove popover v2 — the unmistakable proof record */
.proof-popover { width: 262px; }
.proof-popover__head { grid-template-columns: 32px 1fr auto; }
.pp-time { padding: 4px 7px; background: var(--paper); color: #3d5c7c; border-radius: 6px; font-size: 8.5px; font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-body { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 1px solid #deeaf3; }
.pp-facts { display: grid; gap: 4px; }
.pp-facts small { color: #7d93a8; font-size: 6.5px; letter-spacing: .1em; font-weight: 850; }
.pp-facts b { display: block; font-size: 9px; }
.proof-popover .cap2-proof-foot { margin-top: 9px; }

/* Walkthrough highlight */
.hero-product.is-walkthrough .demo-caption { border-color: var(--indigo); box-shadow: 0 18px 44px rgba(2, 118, 222, .18); }

@media (max-width: 1020px) {
  .cap2--8, .cap2--7 { grid-column: span 12; }
  .cap2--5, .cap2--4 { grid-column: span 6; }
  .cap2--timeline .cap2-ui { grid-template-columns: 1fr; }
  .cap2-shift-sum { border-left: 0; border-top: 1px solid #e5eef7; }
}
@media (max-width: 760px) {
  .cap2-grid { grid-template-columns: 1fr; gap: 14px; }
  .cap2--8, .cap2--7, .cap2--5, .cap2--4, .cap2--12 { grid-column: 1; }
  .cap2-punches { grid-template-columns: 1fr; gap: 12px; }
  .cap2-punch::after { display: none; }
  .cap2-map-stage { height: 185px; }
  .proof-popover { width: 232px; }
  .pp-body { grid-template-columns: 60px 1fr; }
}
/* The punch connector runs behind a white-backed label, not through it. */
.cap2-punch small { position: relative; z-index: 1; width: max-content; padding-right: 7px; background: #fff; }
/* In the Prove state the proof record (top right) and the recipient's view
   must both read — stagger the customer card to the map's lower left. */
.customer-card { right: auto; left: 240px; bottom: 16px; }
@media (max-width: 760px) { .customer-card { left: 12px; right: auto; } }

/* --- Street-true maps ------------------------------------------------------
   Every map is an orthogonal road grid drawn in SVG; routes are paths along
   the road centerlines. On the hero map the visible route line and the moving
   vehicle share ONE path (#demo-route): home.js walks it with
   getTotalLength()/getPointAtLength(), so the van cannot leave the road. */

/* Hero map: route + stops + vehicles */
.demo-route { fill: none; stroke: var(--indigo); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
[data-demo-state="plan"] .demo-route { stroke-dasharray: 7 9; }
.demo-route-done { fill: none; stroke: #8cc5f7; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 9999; }
.demo-stop { fill: #fff; stroke: var(--indigo); stroke-width: 3.5; transition: fill .3s ease, stroke .3s ease; }
.demo-stop.is-done { fill: var(--good); stroke: #fff; }
.demo-stop--dest { stroke: var(--indigo-deep); }
.demo-othervan rect { fill: var(--indigo); stroke: #fff; stroke-width: 2.5; }
.demo-othervan--idle rect { fill: var(--warn); }
.demo-othervan text { fill: #fff; font-size: 9px; font-weight: 800; text-anchor: middle; font-family: system-ui, sans-serif; }
#demo-van-rot rect:first-child { fill: var(--indigo); stroke: #fff; stroke-width: 2.5; }
.demo-van-nose { fill: #fff; opacity: .85; }
.demo-van-chip rect { fill: #fff; stroke: var(--line); stroke-width: 1; filter: drop-shadow(0 3px 6px rgba(0, 27, 59, .18)); }
.demo-van-chip text { fill: var(--ink); font-size: 9.5px; font-weight: 850; text-anchor: middle; font-family: system-ui, sans-serif; }

/* Shared mini-map vocabulary (capability, geofence, dispatcher, workflow maps) */
.mm-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-route { fill: none; stroke: var(--indigo); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.mm-route--planned { stroke-dasharray: 8 7; }
.mm-stop { fill: #fff; stroke: var(--indigo); stroke-width: 3; }
.mm-stop--done { fill: var(--good); stroke: #fff; }
.mm-stop--dest { stroke: var(--indigo-deep); }
.mm-van circle { fill: var(--good); stroke: #fff; stroke-width: 2.5; }
.mm-van--park circle { fill: var(--indigo); }
.mm-van--idle circle { fill: var(--warn); }
.mm-tag rect { fill: #fff; stroke: var(--line); stroke-width: 1; filter: drop-shadow(0 2px 5px rgba(0, 27, 59, .16)); }
.mm-tag text { fill: var(--ink); font-size: 9px; font-weight: 800; text-anchor: middle; font-family: system-ui, sans-serif; }
.mm-site rect:first-child { fill: #dcedfd; stroke: #b5dafc; }
.mm-site rect + rect { fill: #c9e2fb; stroke: #a5d3fa; }
.mm-fence { fill: rgba(2, 118, 222, .08); stroke: var(--indigo); stroke-width: 2; stroke-dasharray: 7 6; }
.mm-tag--zone text { fill: var(--indigo-deep); }
.mm-speedzone { fill: rgba(194, 112, 11, .09); stroke: var(--warn); stroke-width: 1.6; stroke-dasharray: 6 5; }
.mm-zonelabel { font-size: 8.5px; font-weight: 850; letter-spacing: .06em; font-family: system-ui, sans-serif; }
.mm-zonelabel--warn { fill: #8a4f06; }
.mm-trail { fill: none; stroke: #7fb9f0; stroke-width: 2.5; stroke-dasharray: 7 6; stroke-linecap: round; }

.wf-prove-note { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; font-style: italic; }
.cap2-proof-id > small:last-child { margin-top: 6px; color: #7d93a8; font-size: 7px; letter-spacing: .09em; font-weight: 850; }