/* Excern marketing site — aligned with the redesigned app (2026-09-25).
   Loaded last. Maps the site onto the app's tokens (Inter, dark primary,
   violet→pink→orange accents, tinted chips, layered soft shadows) and
   restyles every faked product screen to look like the real UI. */

@font-face { font-family: 'Inter'; src: url('fonts/Inter-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('fonts/Roboto-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('fonts/GeistMono-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* app surface */
  --sand: #f6f6fa;            /* page canvas + light wells */
  --chrome: #fbfbfd;
  --white: #ffffff;
  --ink: #18181c;
  --body: #4b4f58;
  --muted: #7d818c;
  --faint: #a3a7b0;
  --ghost: #e8e9ef;
  --border: #e6e7ee;
  --border-ui: #eceef3;
  --divider: #f1f2f6;
  --on-dark-body: #b8bbc6;
  --on-dark-muted: #8d919c;
  --on-green-body: #c9ccd6;
  --on-photo-body: #d8dbe3;
  --dark-ghost: #2a2c33;
  /* semantics (old names kept so every existing rule follows) */
  --green: #15803d; --green-hover: #11652f; --green-tint: #ecfdf3;
  --amber: #e89823; --amber-hover: #d4861a; --amber-tint: #fff5df; --amber-text: #b45309;
  --red: #b42318;
  /* app tokens */
  --primary: #18181c; --primary-hover: #2b2b31;
  --accent: #5b3fd9;
  --violet: #7c5cff; --violet-soft: #efeaff; --violet-text: #5b3fd9;
  --pink: #ec4899; --pink-soft: #fce7f3; --pink-text: #be185d;
  --success: #16a34a; --success-soft: #ecfdf3; --success-text: #15803d;
  --warning: #e89823; --warning-soft: #fff5df; --warning-text: #82540d;
  --info: #3b82f6; --info-soft: #eaf2ff; --info-text: #2458a6;
  --danger: #dc2626; --danger-soft: #fef2f2; --danger-text: #b42318;
  --neutral-soft: #f0f1f2; --neutral-text: #5f656d;
  --mint-soft: #dcfce7; --mint-text: #0f766e;
  --sky-soft: #dbeafe; --sky-text: #1d4ed8;
  --lavender-soft: #ede9fe; --lavender-text: #6d28d9;
  --peach-soft: #ffedd5; --peach-text: #c2410c;
  --yellow-soft: #fef9c3; --yellow-text: #a16207;
  --grad-brand: linear-gradient(135deg, #7c5cff 0%, #ff5fa2 55%, #ffa94d 100%);
  --grad-violet: linear-gradient(90deg, #5b4fe6 0%, #9b8cf5 55%, #e6dcff 100%);
  --grad-progress: linear-gradient(90deg, #3b82f6 0%, #a855f7 50%, #facc15 100%);
  --shadow-control: 0 1px 2px rgb(30 30 60 / .06);
  --shadow-panel: 0 1px 2px rgb(30 30 60 / .04), 0 2px 6px rgb(30 30 60 / .05);
  --shadow-card: 0 1px 2px rgb(30 30 60 / .04), 0 8px 24px -12px rgb(30 30 60 / .14);
  --shadow-float: 0 4px 10px rgb(30 30 60 / .06), 0 20px 40px -14px rgb(30 30 60 / .22);
  --shadow-overlay: 0 0 0 1px rgb(30 30 60 / .04), 0 28px 70px -20px rgb(30 30 60 / .28);
  --shadow-frame: 0 0 0 1px rgb(30 30 60 / .05), 0 2px 6px rgb(30 30 60 / .04), 0 10px 28px -6px rgb(30 30 60 / .10);
  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 22px;
}

/* ---------------- Base ---------------- */
body { font-family: var(--font); background: var(--sand); color: var(--ink); font-feature-settings: 'cv11', 'ss01'; }
h1 { font-weight: 700; letter-spacing: -.045em; line-height: 1.02; }
h2 { font-weight: 700; letter-spacing: -.035em; line-height: 1.06; }
h3 { letter-spacing: -.02em; }
a { color: var(--accent); }
a:hover { color: #4730b5; }
:focus-visible { outline-color: var(--violet); }
.step-dark :focus-visible, .band :focus-visible, .cta :focus-visible, .who-card-more :focus-visible, .band-for :focus-visible { outline-color: #c4b5fd; }
.grad-brand { background: var(--grad-brand); }
.grad-violet { background: var(--grad-violet); }
.grad-progress { background: var(--grad-progress); }
.grad-text { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mono { font-family: var(--mono); }

.eyebrow { color: var(--accent); font-size: 12.5px; letter-spacing: .08em; }
.eyebrow-dot { background: var(--grad-brand); }
.eyebrow-amber { color: #c4b5fd; }
.amber { color: var(--amber-text); }
.link-arrow { color: var(--accent); font-weight: 600; }
.link-amber, .link-amber:hover { color: #c4b5fd; }
.status-ok { color: var(--success-text); }
.status-late { color: var(--warning-text); }
.status-blocked { color: var(--danger-text); }
.muted { color: var(--muted); }

/* ---------------- Buttons ---------------- */
.btn { border-radius: 10px; font-weight: 600; letter-spacing: -.01em; }
.btn-lg { height: 50px; padding: 0 24px; font-size: 15.5px; }
.btn-green { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .12), inset 0 1px 0 rgb(255 255 255 / .1); }
.btn-green:hover { background: var(--primary-hover); color: #fff; }
.btn-outline { background: #fff; border: 1px solid var(--border); color: var(--ink); box-shadow: var(--shadow-control); }
.btn-outline:hover { background: #fff; border-color: #cfd2dc; color: var(--ink); }
.btn-amber { background: #fff; color: var(--ink); font-weight: 600; }
.btn-amber:hover { background: #f1f1f5; color: var(--ink); }
.btn-outline-light { border: 1px solid rgba(255,255,255,.28); color: #fff; }
.btn-outline-light:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }

/* ---------------- Nav ---------------- */
.nav { background: rgba(246, 246, 250, .84); }
.nav.is-scrolled { border-bottom-color: var(--border-ui); }
.brand-mark { display: block; flex: none; width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 2px 8px rgb(124 92 255 / .3); }
.brand-mark-sm { width: 22px; height: 22px; border-radius: 5.5px; }
.brand-word { font-weight: 700; font-size: 19px; letter-spacing: -.03em; }
.brand-word-sm { font-size: 16px; }
.nav-menu a, .nav-dd > summary { color: var(--body); font-size: 14.5px; }
.nav-signin { font-size: 14.5px; }
.nav-signin:hover { color: var(--accent); }
.nav-actions .btn { height: 38px; padding: 0 14px; font-size: 14px; }
.nav-dd-panel { border-color: var(--border-ui); border-radius: 14px; box-shadow: var(--shadow-overlay); }
.nav-dd-panel a:hover, .nav-dd-panel a[aria-current="page"] { background: #f4f4f8; }
.drawer-panel { background: #fff; }

/* ---------------- Hero ---------------- */
.hero-sub { color: var(--body); }
.hl::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%237c5cff'/%3E%3Cstop offset='.55' stop-color='%23ff5fa2'/%3E%3Cstop offset='1' stop-color='%23ffa94d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 10 C 40 4, 110 3, 197 8' fill='none' stroke='url(%23g)' stroke-width='5.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.hero-home, .page-hero, main { overflow-x: clip; }
.hero-stage { isolation: isolate; }
.hero-stage::before { content: ""; position: absolute; z-index: -1; inset: -70px -60px 18% -60px; pointer-events: none;
  background:
    radial-gradient(38% 48% at 16% 38%, rgba(124, 92, 255, .20), transparent 72%),
    radial-gradient(34% 44% at 84% 30%, rgba(255, 95, 162, .16), transparent 72%),
    radial-gradient(40% 40% at 55% 92%, rgba(255, 169, 77, .16), transparent 72%);
  filter: blur(8px); }
.proof { color: var(--muted); }
.proof li + li::before { width: 5px; height: 5px; background: var(--grad-brand); }

/* ---------------- Screenshot window ---------------- */
.shot { background: #fff; border: 1px solid rgba(30, 30, 60, .08); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-overlay), 0 60px 120px -60px rgba(40, 30, 90, .35); }
.shot-fade { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 70%, rgba(0,0,0,.35) 90%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 70%, rgba(0,0,0,.35) 90%, transparent 100%); }
.win { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; background: #fbfbfd; border-bottom: 1px solid #eef0f4; }
.win > i { width: 10px; height: 10px; border-radius: 50%; background: #e3e4ea; }
.win > i:nth-child(1) { background: #ff6159; } .win > i:nth-child(2) { background: #ffbd2e; } .win > i:nth-child(3) { background: #28c941; }
.win-url { margin: 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 12px; border-radius: 7px; background: #f0f1f5; font: 500 11px/1 var(--font); color: #7d818c; transform: translateX(-24px); }
.win-url .ic { color: #9ea2ab; }

/* ---------------- App frame (every faked desktop screen) ---------------- */
.ic { display: inline-block; flex: none; vertical-align: middle; }
.app { font: 400 12.5px/1.35 var(--font); color: var(--ink); background: #fff; border: 0; border-radius: 0; letter-spacing: -.003em; }
.app.app-v2 { background: #f6f6fa; }
.app-body { grid-template-columns: 196px minmax(0, 1fr); min-height: 0; background: #f6f6fa; }
.app-side { background: transparent; border-right: 0; padding: 12px 10px 10px; display: flex; flex-direction: column; gap: 1px; font: 500 12.5px/1 var(--font); color: #4b4f58; min-width: 0; }
.side-ws { display: flex; align-items: center; gap: 9px; padding: 4px 6px 10px; min-width: 0; }
.ws-tile { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--grad-brand); color: #fff; display: grid; place-items: center; font: 600 12px/1 var(--font); box-shadow: 0 2px 8px rgb(124 92 255 / .35); }
.ws-name { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ws-name b { font: 600 12.5px/1.1 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-name small { font: 400 11px/1 var(--font); color: var(--muted); }
.app-side .side-label { display: flex; align-items: center; gap: 4px; padding: 11px 8px 5px; font: 500 11.5px/1 var(--font); color: #8a8e98; letter-spacing: 0; text-transform: none; }
.app-side .side-label .ic { color: #b0b3bb; }
.app-side .side-item, .app-side button.side-item { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 8px; font: 500 12.5px/1 var(--font); color: #4b4f58; background: transparent; }
.app-side .side-item .ic { color: #8a8e98; }
.app-side .side-item.is-active, .app-side button.side-item.is-active { background: #eaebf0; color: var(--ink); font-weight: 600; }
.app-side .side-item.is-active .ic { color: var(--ink); }
.app-side button.side-item:hover { background: #eeeff3; }
.side-count { margin-left: auto; font: 500 11px/1 var(--font); color: #9a9ea8; }
.side-due { margin-left: auto; font: 500 11px/1 var(--font); color: #9a6412; }
.side-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ec4899; color: #fff; font: 600 10.5px/18px var(--font); text-align: center; }
.side-user { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 12px 6px 2px; border-top: 1px solid #ececf1; }
.side-user b { display: block; font: 600 12px/1.2 var(--font); color: var(--ink); }
.side-user small { display: block; font: 400 11px/1.2 var(--font); color: var(--muted); }
.app-main { margin: 8px 8px 8px 0; padding: 0; background: #fff; border-radius: 14px; box-shadow: var(--shadow-frame); min-width: 0; overflow: hidden; }
.app:not(.app-v2) { border-radius: 14px; border: 1px solid var(--border-ui); box-shadow: var(--shadow-card); }
.app:not(.app-v2) > .app-page { padding: 16px; }
.app-top { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-bottom: 1px solid #eef0f4; font: 500 12px/1 var(--font); color: var(--muted); min-width: 0; }
.top-back { color: #8a8e98; display: inline-flex; }
.top-sep { width: 1px; height: 18px; background: #e8e9ef; }
.crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.crumbs .ic { color: #9ea2ab; }
.crumbs b { font-weight: 500; color: var(--ink); }
.top-search { margin-left: auto; display: flex; align-items: center; gap: 7px; width: 34%; max-width: 250px; min-width: 120px; height: 28px; padding: 0 9px; border-radius: 8px; background: #f3f3f7; color: #9a9ea8; font-weight: 400; }
.top-search kbd { margin-left: auto; font: 500 10px/1 var(--font); padding: 3px 5px; border-radius: 5px; background: #fff; border: 1px solid #e6e7ee; color: #8a8e98; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.app-content { padding: 16px 18px 18px; min-width: 0; }
.app-content > .app-page { padding: 0; }

/* page header inside a screen */
.app-page { gap: 12px; }
.app-head { gap: 12px; }
.app-title { font: 600 19px/1.1 var(--font); letter-spacing: -.02em; }
.app-desc { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); }
.app-tabs, .seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 9px; background: #f1f2f6; border: 0; font: 500 12px/1 var(--font); color: #6b6f7a; }
.app-tabs span, .seg > span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 7px; }
.app-tabs .is-active, .seg > .is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgb(30 30 60 / .08), 0 0 0 1px rgb(30 30 60 / .04); }
.utabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: #f1f2f6; font: 500 12px/1 var(--font); color: #6b6f7a; white-space: nowrap; }
.utabs > span { padding: 6px 10px; border-radius: 7px; }
.utabs > span b { font-weight: 500; color: #9a9ea8; margin-left: 3px; }
.utabs > .is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgb(30 30 60 / .08); }

/* ---------------- Primitives ---------------- */
.chip { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 6px; font: 500 11.5px/1 var(--font); white-space: nowrap; }
.chip-caps { text-transform: uppercase; letter-spacing: .03em; font-size: 10.5px; font-weight: 600; }
.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-success { background: var(--success-soft); color: var(--success-text); }
.chip-info { background: var(--info-soft); color: var(--info-text); }
.chip-warning { background: var(--warning-soft); color: var(--warning-text); }
.chip-danger { background: var(--danger-soft); color: var(--danger-text); }
.chip-violet { background: var(--violet-soft); color: var(--violet-text); }
.chip-pink { background: var(--pink-soft); color: var(--pink-text); }
.chip-mint { background: var(--mint-soft); color: var(--mint-text); }
.chip-sky { background: var(--sky-soft); color: var(--sky-text); }
.chip-lavender { background: var(--lavender-soft); color: var(--lavender-text); }
.chip-neutral { background: var(--neutral-soft); color: var(--neutral-text); }
.chip-outline { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--border); }
.gpill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; color: #fff; font: 600 10.5px/1 var(--font); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.gpill-done { background: #22c55e; } .gpill-progress { background: #3b82f6; } .gpill-issue { background: #ec4899; } .gpill-review { background: #eab308; } .gpill-ready { background: #8b5cf6; } .gpill-neutral { background: #18181c; }
.flag { display: inline-flex; align-items: center; gap: 4px; font: 500 11.5px/1 var(--font); }
.flag-danger { color: #dc2626; } .flag-warning { color: #d97706; } .flag-muted { color: #8a8e98; } .flag-success { color: #16a34a; }
.av { position: relative; flex: none; display: inline-grid; place-items: center; width: var(--av, 24px); height: var(--av, 24px); border-radius: 50%; font: 600 calc(var(--av, 24px) * .38)/1 var(--font); letter-spacing: -.01em; }
.av-yellow { background: #fef3c7; color: #92400e; } .av-mint { background: #d1fae5; color: #047857; } .av-sky { background: #dbeafe; color: #1d4ed8; }
.av-peach { background: #ffe4d6; color: #c2410c; } .av-lavender { background: #ede9fe; color: #6d28d9; } .av-pink { background: #fce7f3; color: #be185d; }
.av-ring { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #a78bfa; }
.av-presence { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2px #fff; }
.lt { flex: none; display: inline-grid; place-items: center; width: var(--lt, 24px); height: var(--lt, 24px); border-radius: 6px; font: 600 calc(var(--lt, 24px) * .44)/1 var(--font); }
.lt-lavender { background: #ede9fe; color: #6d28d9; } .lt-mint { background: #dcfce7; color: #15803d; } .lt-sky { background: #dbeafe; color: #1d4ed8; }
.lt-pink { background: #fce7f3; color: #be185d; } .lt-amber { background: #fef3c7; color: #b45309; } .lt-red { background: #fee2e2; color: #b91c1c; } .lt-green { background: #16a34a; color: #fff; }
.it { flex: none; display: inline-grid; place-items: center; width: var(--it, 28px); height: var(--it, 28px); border-radius: 8px; }
.it-lavender { background: #ede9fe; color: #6d28d9; } .it-mint { background: #dcfce7; color: #15803d; } .it-sky { background: #dbeafe; color: #1d4ed8; }
.it-pink { background: #fce7f3; color: #be185d; } .it-amber { background: #fef3c7; color: #b45309; } .it-brand { background: var(--grad-brand); color: #fff; box-shadow: 0 2px 8px rgb(236 72 153 / .3); }
.mono-id { display: inline-flex; align-items: center; gap: 4px; font: 500 11px/1 var(--mono); color: #8a8e98; letter-spacing: -.01em; }
.ubtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 8px; font: 500 12px/1 var(--font); white-space: nowrap; }
.ubtn-primary { background: #18181c; color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .14); }
.ubtn-outline { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px var(--border), var(--shadow-control); }
.ubtn-ai { background: var(--grad-brand); color: #fff; box-shadow: 0 4px 12px -4px rgb(236 72 153 / .5); }
.ubtn-ghost { color: #4b4f58; }
.ubtn-tint { background: #efeaff; color: #5b3fd9; box-shadow: inset 0 0 0 1px #d9cffd; }
.uprog { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--font); color: var(--muted); }
.uprog-bar { flex: 1; height: 5px; border-radius: 999px; background: #eceef3; overflow: hidden; }
.uprog-bar i { display: block; height: 100%; border-radius: 999px; }
.kbd { font: 500 10px/1 var(--font); padding: 3px 5px; border-radius: 5px; background: #fff; border: 1px solid #e6e7ee; color: #8a8e98; }

/* old primitives restyled */
.tag { height: 20px; gap: 5px; padding: 0 7px; border-radius: 6px; font: 500 11.5px/1 var(--font); }
.tag::before { width: 6px; height: 6px; }
.tag-delivery { background: #f0fdf4; color: #166534; }
.tag-swap { background: #fffbeb; color: #a54b0b; }
.tag-pickup { background: #fef2f2; color: #b91c1c; }
.pill-mode { height: 20px; display: inline-flex; align-items: center; padding: 0 7px; border: 0; border-radius: 6px; background: var(--neutral-soft); color: var(--neutral-text); font: 500 11px/1 var(--font); }
.pill-amber { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--warning-soft); color: var(--warning-text); font: 600 11px/1 var(--font); }
.pill-green { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--success-soft); color: var(--success-text); font: 600 11.5px/1 var(--font); }
.tile { background: #fff; border: 1px solid var(--border-ui); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-panel); }
.tile-label { font: 500 11.5px/1.2 var(--font); color: var(--muted); }
.tile-num { margin-top: 8px; font: 600 22px/1 var(--font); letter-spacing: -.025em; }
.tile-amber { background: #fff; border-color: #f4e2bd; box-shadow: var(--shadow-panel), inset 0 3px 0 #f6c26b; }
.tile-dark { background: #18181c; border-color: #18181c; color: #fff; }
.tile-label-13 { font: 400 12px/1.35 var(--font); }
.tile-num-17 { font: 600 16px/1 var(--font); }
.kpis { gap: 10px; }
.kv { font-size: 12.5px; gap: 12px; }
.kv span { color: var(--muted); }
.kv b { font-weight: 500; color: var(--ink); text-align: right; }
.kv-list { gap: 9px; }
.routes { margin-top: 10px; border: 1px solid var(--border-ui); border-radius: 12px; background: #fff; font: 400 12.5px/1.3 var(--font); }
.routes-row { padding: 10px 12px; border-bottom: 1px solid var(--divider); gap: 10px; }
.routes-row b { font-weight: 600; }
.ui-card { background: #fff; border: 1px solid var(--border-ui); border-radius: 14px; box-shadow: var(--shadow-card); font: 400 12.5px/1.35 var(--font); }
.ui-col { padding: 16px; }
.ui-meta { font: 500 11.5px/1.2 var(--font); color: var(--muted); align-items: center; }
.ui-title { margin-top: 10px; font: 600 15px/1.25 var(--font); letter-spacing: -.015em; }
.ui-choices { gap: 7px; font: 500 12.5px/1 var(--font); }
.ui-btn { padding: 11px; border-radius: 9px; font: 500 12.5px/1 var(--font); }
.ui-btn-green { background: #18181c; color: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .14); }
.ui-btn-outline { background: #fff; border: 0; box-shadow: inset 0 0 0 1px var(--border), var(--shadow-control); }
.ui-btn-amber { background: #18181c; color: #fff; font: 500 12.5px/1 var(--font); padding: 11px; box-shadow: 0 1px 2px rgb(0 0 0 / .14); }
.ui-btn-ai { background: var(--grad-brand); color: #fff; font: 600 12.5px/1 var(--font); padding: 11px; border-radius: 9px; text-align: center; box-shadow: 0 6px 16px -6px rgb(236 72 153 / .55); }
.ui-bottom { font-size: 11.5px; }
.bubble { background: #f1f2f6; border-radius: 14px 14px 14px 4px; padding: 9px 12px; font-size: 12.5px; line-height: 1.4; }
.bubble-out { background: #18181c; color: #fff; border-radius: 14px 14px 4px 14px; }
.bubble-ai { align-self: flex-end; background: #efeaff; color: #2e2566; border-radius: 14px 14px 4px 14px; position: relative; }
.bubble-ai::before { content: "AI"; position: absolute; left: -26px; bottom: 2px; width: 20px; height: 20px; border-radius: 6px; background: var(--grad-brand); color: #fff; font: 700 8.5px/20px var(--font); text-align: center; letter-spacing: .02em; }
.chat { gap: 7px; }
.doc { background: #f6f6fa; border: 1px dashed #d9dbe4; border-radius: 10px; font-family: var(--mono); font-size: 11px; }
.pill-soon, .soon { background: var(--violet-soft); color: var(--violet-text); }

/* job cards */
.sched { gap: 12px; }
.sched-col { background: transparent; padding: 0; gap: 9px; }
.sched-today { outline: 0; }
.sched-day { padding: 0 2px 2px; font: 600 12.5px/1 var(--font); align-items: center; }
.sched-day .muted { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 6px; background: #f1f2f6; font: 500 10.5px/1 var(--font); color: #6b6f7a; }
.job-card { background: #fff; border: 1px solid var(--border-ui); border-radius: 12px; padding: 11px 12px; box-shadow: var(--shadow-card); font: 400 11.5px/1.3 var(--font); }
.job-card-open { border-color: #c9bdfd; box-shadow: 0 0 0 3px rgb(124 92 255 / .12), var(--shadow-card); }
.job-card-name { font: 600 13px/1.25 var(--font); letter-spacing: -.01em; }
.job-card-foot { font-size: 11px; }
.app .job-card { background: #fff; }
.app .sched-col { background: transparent; }

/* map pieces over the new Google-style map */
.route-map { position: relative; background: #eef0f3; overflow: hidden; }
.route-map .gmap { position: absolute; inset: 0; }
.route-map .map-tag, .route-map .map-callout { z-index: 3; }
.map-chips span { background: #fff; border-radius: 999px; padding: 6px 10px; box-shadow: var(--shadow-panel); font-weight: 500; }
.map-bar { background: #fff; border-radius: 12px; box-shadow: var(--shadow-float); }
.map-done { color: var(--success-text); font-weight: 600; }
.map-tag { background: #fff; border-radius: 8px; box-shadow: var(--shadow-float); font-weight: 600; }
.map-callout { background: #18181c; border-radius: 10px; }
.map-callout .amber { color: #fdba74; }

/* timeline */
.tl-dot { background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; }
.tl-dot-amber { background: var(--violet); box-shadow: 0 0 0 3px var(--violet-soft); }
.tl-line { background: #eceef3; }

/* invoice mock */
.invoice { border: 1px solid var(--border-ui); border-radius: 14px; box-shadow: var(--shadow-card); font-family: var(--font); }
.inv-hl { background: #faf8ff; }
.inv-ok { color: var(--success-text); }
.inv-total { font-weight: 700; letter-spacing: -.03em; }

/* ---------------- Phones: a real device with iPhone proportions ---------------- */
.phone { --pw: 280px; position: relative; flex: none; width: var(--pw); min-height: 0; zoom: var(--pz, 1); aspect-ratio: 71.6 / 147.6; padding: calc(var(--pw) * .034); border-radius: calc(var(--pw) * .17); background: linear-gradient(155deg, #45454d 0%, #16161a 14%, #0b0b0d 55%, #1f1f24 88%, #3a3a41 100%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 50px 80px -42px rgb(24 18 60 / .6), 0 22px 40px -24px rgb(24 18 60 / .4), 0 2px 5px rgb(0 0 0 / .16); }
.phone::before, .phone::after { content: ""; position: absolute; width: 3px; background: linear-gradient(90deg, #17171b, #3c3c44); }
.phone::before { left: -3px; top: 16%; height: 4.2%; border-radius: 3px 0 0 3px; box-shadow: 0 calc(var(--pw) * .1) 0 #2c2c33, 0 calc(var(--pw) * .2) 0 #2c2c33; }
.phone::after { right: -3px; top: 24%; height: 9.5%; border-radius: 0 3px 3px 0; }
.phone-screen { position: relative; height: 100%; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; border-radius: calc(var(--pw) * .138); background: var(--ps-bg, #f4f4f7); color: var(--ink); font: 400 12px/1.35 var(--font); padding: 0; }
.phone-screen::before { content: ""; position: absolute; z-index: 30; top: calc(var(--pw) * .03); left: 50%; transform: translateX(-50%); width: 31%; height: calc(var(--pw) * .086); border-radius: 999px; background: #040406; }
.sbar { flex: none; position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: calc(var(--pw) * .152); padding: calc(var(--pw) * .012) calc(var(--pw) * .08) 0 calc(var(--pw) * .1); font: 600 12.5px/1 var(--font); color: var(--ink); }
.sbar-r { display: inline-flex; align-items: center; gap: 4px; }
.sbar-bat { width: 20px; height: 10px; border-radius: 3px; border: 1.2px solid currentColor; position: relative; opacity: .9; }
.sbar-bat::after { content: ""; position: absolute; inset: 1.2px 5px 1.2px 1.2px; border-radius: 1.5px; background: currentColor; }
.sbar-dark, .is-dark .sbar { color: #fff; }
.ps { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.phone-home { position: absolute; z-index: 31; left: 50%; bottom: 7px; transform: translateX(-50%); display: block; width: 35%; height: 4px; margin: 0; border-radius: 999px; background: #111114; }
.is-dark .phone-home { background: #fff; }
.ps-tabs { flex: none; position: relative; z-index: 5; display: flex; justify-content: space-around; padding: 7px 4px 21px; background: rgb(255 255 255 / .95); box-shadow: 0 -1px 0 #e7e8ee; }
.ps-tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 40px; color: #8e929c; }
.ps-tab b { font: 700 9px/1 var(--font); }
.ps-tab .ic { width: 20px; height: 20px; stroke-width: 1.7; }
.ps-tab.is-on { color: #5b3fd9; }
.ps-badge { position: absolute; top: -4px; left: calc(50% + 4px); min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px; background: #ec4899; color: #fff; font: 700 9px/15px var(--font); font-style: normal; text-align: center; box-shadow: 0 0 0 2px #fff; }
/* legacy phone screens */
.phone-meta { padding: 6px 18px 0; font-size: 11.5px; color: var(--muted); }
.phone-title { padding: 4px 18px 0; font: 700 21px/1.12 var(--font); letter-spacing: -.03em; }
.phone-addr { padding: 3px 18px 0; font-size: 12px; }
.phone-rows { padding: 12px 14px 0; gap: 7px; }
.phone-row { background: #fff; border-radius: 12px; padding: 12px; box-shadow: var(--shadow-panel); font-size: 12.5px; align-items: center; }
.phone-row b { font-weight: 600; }
.phone-photo { margin: 12px 14px 0; height: 120px; border-radius: 12px; box-shadow: var(--shadow-panel); }
.photo-chip { border-radius: 7px; box-shadow: var(--shadow-panel); font: 600 10.5px/1 var(--font); }
.phone-actions { padding: 12px 14px 0; gap: 8px; font: 600 13px/1 var(--font); }
.phone-done { background: #18181c; border-radius: 12px; padding: 15px 0; box-shadow: 0 1px 2px rgb(0 0 0 / .15); }
.phone-cant { background: #fff; border: 0; border-radius: 12px; padding: 15px 0; box-shadow: inset 0 0 0 1px var(--border), var(--shadow-control); }
.phone .tag { font-size: 10.5px; height: 18px; padding: 0 6px; }

/* ---------------- Driver & staff app screens ---------------- */
.d-head { flex: none; display: flex; flex-direction: column; gap: 2px; padding: 2px 14px 9px; background: #fff; box-shadow: 0 1px 0 #ececf1; position: relative; z-index: 2; }
.d-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.d-head-row b { min-width: 0; font: 800 15.5px/1.15 var(--font); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-clock { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 999px; background: #ecfdf3; color: #15803d; font: 600 10px/1 var(--font); white-space: nowrap; }
.d-clock i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 2.5px rgb(34 197 94 / .22); }
.d-head-sub { font-size: 11px; color: #6b6f7a; }
.d-head-gps { font: 700 10.5px/1.2 var(--font); color: var(--ink); }
.d-map { flex: none; position: relative; height: 128px; }
.d-map .gmap { position: absolute; inset: 0; }
.d-list { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 7px; padding: 10px 10px 0; }
.d-stop { flex: none; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e8e9ef; }
.d-stop.is-done { opacity: .6; }
.d-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #18181c; color: #fff; font: 800 11.5px/1 var(--font); }
.d-num .ic { stroke-width: 2.4; }
.is-done .d-num { background: #eceef2; color: #7d818c; }
.d-stop-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.d-stop-b b { font: 700 12.5px/1.15 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-stop-b > span { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #6b6f7a; white-space: nowrap; }
.d-stop .atag, .s-job .atag, .d-meta .atag { height: 17px; padding: 0 5px; gap: 4px; font-size: 10px; }
.d-stop .atag > i, .s-job .atag > i, .d-meta .atag > i { width: 5px; height: 5px; }
.d-stop > em { font-style: normal; font-size: 10.5px; color: #7d818c; }
.d-stop.is-next { flex-direction: column; align-items: stretch; gap: 7px; padding: 10px; box-shadow: inset 0 0 0 1.5px var(--a-bd), 0 12px 24px -16px rgb(165 75 11 / .5); }
.d-stop-h { display: flex; align-items: center; gap: 9px; }
.d-stop-h > .ic { color: #9a9ea8; flex: none; }
.is-next .d-num { background: var(--grad-brand); box-shadow: 0 3px 8px -2px rgb(236 72 153 / .45); }
.d-addr { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 11.5px; color: var(--ink); }
.d-addr .ic { flex: none; color: #8a8e98; }
.d-asset { margin: -3px 0 0; font: 600 10.5px/1.2 var(--font); color: #6b6f7a; }
.d-btns { display: flex; gap: 6px; }
.d-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 32px; border-radius: 9px; font: 700 11.5px/1 var(--font); white-space: nowrap; }
.d-btn-1 { background: #18181c; color: #fff; box-shadow: 0 6px 14px -8px rgb(0 0 0 / .55); }
.d-btn-2 { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #e1e2e8; }
.d-btn-2 .ic { color: #5b3fd9; }
.d-btn-wide { flex: none; width: 100%; }
.d-btn-lg { height: 42px; border-radius: 12px; font-size: 13px; }
.d-check { box-shadow: inset 0 0 0 1px #bfdbfe; }
.d-check > .ic { flex: none; color: #1d7fd6; }
.d-check small { font: 800 9px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #1d7fd6; }
.d-check .d-num { background: #1d7fd6; }
.d-nav { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 4px 14px 2px; font: 600 12px/1 var(--font); color: #5b3fd9; }
.d-nav > span:first-child { display: inline-flex; align-items: center; gap: 3px; }
.d-wo { font: 600 11px/1 var(--font); color: #7d818c; }
.d-title { flex: none; padding: 8px 14px 0; font: 800 20px/1.1 var(--font); letter-spacing: -.03em; }
.d-meta { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 14px 0; font-size: 11.5px; color: #6b6f7a; }
.ps > .d-addr { flex: none; padding: 6px 14px 0; }
.d-cans { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 5px; margin: 10px 12px 0; }
.d-can { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 11px; }
.d-can small { font: 700 9px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #7d818c; }
.d-can b { font: 700 14px/1 var(--mono); letter-spacing: -.02em; }
.d-can em { font-style: normal; font: 600 10px/1 var(--font); }
.d-can.is-in { background: #f0fdf4; box-shadow: inset 0 0 0 1px #bbf7d0; }
.d-can.is-in em { color: #166534; }
.d-can.is-out { background: #fef2f2; box-shadow: inset 0 0 0 1px #fecaca; }
.d-can.is-out em { color: #b91c1c; }
.d-can-arrow { color: #9a9ea8; display: grid; place-items: center; }
.d-note { flex: none; display: flex; flex-direction: column; gap: 3px; margin: 9px 12px 0; padding: 9px 10px; border-radius: 11px; background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; }
.d-note b { display: flex; align-items: center; gap: 5px; font: 700 10.5px/1.2 var(--font); color: #92400e; }
.d-note span { font-size: 11px; line-height: 1.35; color: #3f3a2f; }
.d-sec { flex: none; display: flex; align-items: center; gap: 6px; padding: 11px 14px 0; }
.d-sec b { font: 700 12px/1 var(--font); }
.d-count { min-width: 18px; height: 16px; padding: 0 5px; border-radius: 6px; background: #eceef2; font: 600 10px/16px var(--font); color: #6b6f7a; text-align: center; }
.d-sec-r { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font: 600 11px/1 var(--font); color: #5b3fd9; }
.d-photos { flex: none; display: grid; grid-template-columns: 1fr 1fr 42px; gap: 6px; padding: 7px 12px 0; }
.d-ph { position: relative; display: block; overflow: hidden; height: 62px; border-radius: 10px; background: #d9d9de; }
.d-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d-ph-add { display: grid; place-items: center; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #e1e2e8; color: #5b3fd9; }
.d-row { flex: none; display: flex; align-items: center; gap: 7px; margin: 8px 12px 0; padding: 9px 10px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px #e8e9ef; font-size: 11.5px; }
.d-row > .ic { flex: none; color: #8a8e98; }
.d-row > span { flex: 1; }
.d-ok { font: 700 11px/1 var(--font); color: #15803d; }
.d-foot { flex: none; margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 10px 12px 26px; }
.d-link { font: 600 11px/1 var(--font); color: #b42318; }
.d-link-muted { color: #7d818c; font-weight: 500; }
/* camera */
.phone-screen.is-dark { color: #fff; }
.d-cam-top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 2px 12px 8px; }
.d-cam-x { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .14); }
.d-cam-t { padding: 6px 9px; border-radius: 999px; background: rgb(255 255 255 / .14); font: 600 10.5px/1 var(--font); white-space: nowrap; }
.d-cam-view { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.d-cam-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.d-cam-grid { position: absolute; inset: 0; background:
  linear-gradient(90deg, transparent calc(33.33% - .5px), rgb(255 255 255 / .38) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgb(255 255 255 / .38) 0 calc(66.66% + .5px), transparent 0),
  linear-gradient(180deg, transparent calc(33.33% - .5px), rgb(255 255 255 / .38) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgb(255 255 255 / .38) 0 calc(66.66% + .5px), transparent 0); }
.d-cam-focus { position: absolute; left: 52%; top: 60%; width: 62px; height: 62px; transform: translate(-50%, -50%); border: 1.5px solid #ffd60a; border-radius: 2px; }
.d-cam-stamp { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 7px; background: rgb(0 0 0 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 600 9.5px/1 var(--font); white-space: nowrap; }
.d-cam-modes { flex: none; display: flex; justify-content: center; gap: 16px; padding: 11px 0 6px; font: 600 10px/1 var(--font); letter-spacing: .08em; color: rgb(255 255 255 / .55); }
.d-cam-modes b { color: #ffd60a; font-weight: 600; }
.d-cam-bar { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 26px 30px; }
.d-cam-thumb { width: 40px; height: 40px; overflow: hidden; border-radius: 8px; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .85); }
.d-cam-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.d-shutter { width: 58px; height: 58px; border-radius: 50%; border: 3.5px solid #fff; display: grid; place-items: center; }
.d-shutter i { width: 46px; height: 46px; border-radius: 50%; background: #fff; }
.d-cam-flip { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .14); }
/* bottom sheet */
.d-dim { position: absolute; inset: 0; display: flex; flex-direction: column; }
.d-dim::after { content: ""; position: absolute; inset: 0; z-index: 3; background: rgb(12 12 18 / .45); }
.d-dim .d-map { height: 170px; }
.d-sheet { position: relative; z-index: 4; margin-top: auto; display: flex; flex-direction: column; gap: 7px; padding: 8px 12px 26px; border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 -14px 30px -14px rgb(0 0 0 / .4); }
.d-grab { align-self: center; width: 34px; height: 4px; border-radius: 999px; background: #dfe0e6; }
.d-sheet-t { font: 800 14px/1.2 var(--font); letter-spacing: -.01em; }
.d-sheet-s { margin-top: -3px; font-size: 10.5px; color: #6b6f7a; }
.d-opt { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 10px; background: #f6f6f9; box-shadow: inset 0 0 0 1px #e6e7ec; }
.d-opt b { font: 700 11.5px/1.2 var(--font); }
.d-opt span { font-size: 9.5px; color: #7d818c; }
.d-opt.is-on { background: #f5f3ff; box-shadow: inset 0 0 0 1.5px #a78bfa; }
.d-opt .ic { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); color: #7c5cff; }
.d-field { display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; border-radius: 10px; background: #f6f6f9; box-shadow: inset 0 0 0 1px #e6e7ec; }
.d-field small { font-size: 9.5px; color: #7d818c; }
.d-field b { font: 600 12.5px/1.2 var(--font); }
.d-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.d-btn-done { background: #f0fdf4; color: #15803d; box-shadow: inset 0 0 0 1px #86efac; }
.d-btn-done .ic { color: #15803d; }
/* chat */
.d-push { flex: none; display: flex; align-items: flex-start; gap: 8px; margin: 6px 10px 0; padding: 9px 10px; border-radius: 14px; background: #fff; box-shadow: 0 10px 22px -14px rgb(20 16 50 / .45), inset 0 0 0 1px #ececf1; }
.d-push > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.d-push b { font: 700 11.5px/1.2 var(--font); }
.d-push span { font-size: 10.5px; line-height: 1.3; color: #4b4f58; }
.d-push em { font-style: normal; font-size: 9.5px; color: #9a9ea8; }
.d-chat { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.d-day { align-self: center; font: 600 9.5px/1 var(--font); color: #9a9ea8; }
.d-msg { display: flex; align-items: flex-end; gap: 6px; max-width: 88%; }
.d-msg > div { display: flex; flex-direction: column; gap: 3px; }
.d-msg small { padding-left: 2px; font-size: 9.5px; color: #8a8e98; }
.d-msg p { margin: 0; padding: 8px 10px; border-radius: 14px 14px 14px 4px; background: #fff; box-shadow: inset 0 0 0 1px #e8e9ef; font-size: 11.5px; line-height: 1.35; }
.d-msg.is-me { align-self: flex-end; }
.d-msg.is-me p { background: #18181c; color: #fff; border-radius: 14px 14px 4px 14px; box-shadow: none; }
.d-compose { flex: none; display: flex; align-items: center; gap: 8px; height: 36px; margin: 0 10px 8px; padding: 0 5px 0 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e1e2e8; font-size: 11.5px; color: #9a9ea8; }
.d-compose span { flex: 1; }
.d-compose i { width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-brand); color: #fff; }
/* signature */
.d-help { flex: none; margin: 4px 14px 0; font-size: 11px; color: #6b6f7a; }
.d-pad { flex: none; position: relative; height: 128px; margin: 10px 12px 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #e1e2e8, 0 1px 2px rgb(0 0 0 / .04); }
.d-pad svg { position: absolute; left: 10px; top: 8px; width: calc(100% - 20px); height: calc(100% - 28px); }
.d-pad-x { position: absolute; left: 14px; bottom: 13px; font: 500 14px/1 var(--font); color: #9a9ea8; }
.d-pad-line { position: absolute; left: 28px; right: 16px; bottom: 18px; height: 1px; background: #e1e2e8; }
.ps > .d-field { flex: none; margin: 8px 12px 0; }
.ps > .d-btns { flex: none; margin: 8px 12px 0; }
.d-proof { flex: none; display: flex; flex-direction: column; gap: 5px; margin: 10px 12px 0; padding: 9px 10px; border-radius: 12px; background: #f0fdf4; box-shadow: inset 0 0 0 1px #bbf7d0; }
.d-proof b { font: 700 11px/1 var(--font); color: #166534; }
.d-proof span { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: #1f3b2a; }
.d-proof .ic { color: #16a34a; stroke-width: 2.4; }
/* report a problem */
.d-reasons { flex: none; display: flex; flex-wrap: wrap; gap: 5px; padding: 7px 12px 0; }
.d-reasons span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #e1e2e8; font: 600 10.5px/1 var(--font); color: #4b4f58; }
.d-reasons .is-on { background: #fef2f2; color: #b42318; box-shadow: inset 0 0 0 1.5px #fca5a5; }
.d-ph-wide { flex: none; height: 116px; margin: 9px 12px 0; border-radius: 12px; }
.d-ph-tag { position: absolute; left: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 6px; background: rgb(17 17 22 / .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 600 9.5px/1 var(--font); font-style: normal; }
.d-field-tall b { font: 500 11px/1.35 var(--font); }
.d-row-warn { background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; color: #7c4a03; font-size: 10.5px; line-height: 1.3; }
.d-row-warn > .ic { color: #d97706; }
/* inspection */
.d-seg { flex: none; display: grid; grid-template-columns: 1fr 1fr; margin: 9px 12px 0; padding: 3px; border-radius: 10px; background: #e9eaef; font: 600 11px/1 var(--font); text-align: center; }
.d-seg > * { padding: 7px 0; border-radius: 8px; color: #6b6f7a; }
.d-seg b { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.d-truck { flex: none; display: flex; align-items: center; gap: 9px; margin: 8px 12px 0; padding: 8px 10px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px #e8e9ef; }
.d-truck div { display: flex; flex-direction: column; gap: 2px; }
.d-truck b { font: 700 12px/1.2 var(--font); }
.d-truck span { font-size: 10px; color: #7d818c; }
.d-chks { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px 12px 0; }
.d-chk { display: flex; align-items: center; gap: 5px; height: 27px; padding: 0 7px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px #e8e9ef; font: 500 10.5px/1 var(--font); white-space: nowrap; overflow: hidden; }
.d-chk .ic { flex: none; width: 15px; height: 15px; padding: 2px; border-radius: 50%; background: #dcfce7; color: #15803d; stroke-width: 2.6; }
.d-chk.is-bad { background: #fef2f2; box-shadow: inset 0 0 0 1.5px #fca5a5; color: #991b1b; font-weight: 600; }
.d-chk.is-bad .ic { background: #dc2626; color: #fff; }
.d-defect { flex: none; display: flex; gap: 9px; margin: 8px 12px 0; padding: 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #fecaca, 0 8px 18px -12px rgb(220 38 38 / .35); }
.d-ph-sq { flex: none; width: 60px; height: 60px; border-radius: 9px; }
.d-defect > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.d-defect b { font: 700 11.5px/1.2 var(--font); }
.d-defect span { font-size: 10.5px; line-height: 1.3; color: #4b4f58; }
/* more / clock */
.d-bigtitle { flex: none; display: flex; align-items: baseline; gap: 8px; padding: 6px 14px 2px; font: 800 24px/1.1 var(--font); letter-spacing: -.03em; }
.d-bigsub { font: 500 11.5px/1 var(--font); letter-spacing: 0; color: #7d818c; }
.d-clockcard { flex: none; display: flex; flex-direction: column; gap: 9px; margin: 8px 12px 0; padding: 12px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-card), inset 0 0 0 1px #ececf1; }
.d-clock-top { display: flex; align-items: center; justify-content: space-between; }
.d-clock-top em { font-style: normal; font-size: 10.5px; color: #7d818c; }
.d-clock-big { font: 800 34px/1 var(--font); letter-spacing: -.04em; }
.d-clock-big small { margin: 0 5px 0 1px; font-size: 16px; font-weight: 700; color: #7d818c; }
.d-clock-bar { height: 6px; overflow: hidden; border-radius: 999px; background: #eef0f4; }
.d-clock-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); }
.d-clock-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.d-clock-stats span { display: flex; flex-direction: column; gap: 3px; font-size: 9.5px; color: #7d818c; }
.d-clock-stats b { font: 700 13px/1 var(--font); color: var(--ink); }
.d-menu { flex: none; margin: 10px 12px 0; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #ececf1; }
.d-menu > div { display: flex; align-items: center; gap: 10px; padding: 9px 10px; }
.d-menu > div + div { box-shadow: 0 -1px 0 #f0f1f4; }
.d-menu > div > span:not(.it) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.d-menu b { font: 600 12px/1.2 var(--font); }
.d-menu small { font-size: 10px; color: #7d818c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-menu > div > .ic { color: #b0b3bb; }
/* staff */
.s-card { flex: none; display: flex; flex-direction: column; gap: 7px; margin: 8px 12px 0; padding: 10px 11px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #ececf1, 0 1px 2px rgb(0 0 0 / .03); }
.s-card-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.s-card-h b { font: 700 12px/1 var(--font); }
.s-card-h .d-link { color: #5b3fd9; font-size: 10.5px; }
.s-muted { font-size: 9.5px; color: #7d818c; }
.s-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.s-kpis div { display: flex; flex-direction: column; gap: 3px; padding: 7px 8px; border-radius: 10px; background: #f6f6f9; }
.s-kpis b { font: 800 18px/1 var(--font); }
.s-kpis span { font-size: 9.5px; color: #6b6f7a; }
.s-kpis .is-warn { background: #fffbeb; }
.s-kpis .is-warn b { color: #b45309; }
.s-kpis .is-bad { background: #fef2f2; }
.s-kpis .is-bad b { color: #b91c1c; }
.s-money { font: 800 24px/1 var(--font); letter-spacing: -.03em; }
.s-kv { display: flex; justify-content: space-between; font-size: 10.5px; color: #6b6f7a; }
.s-kv b { font-weight: 600; color: var(--ink); }
.s-kv b.s-up { color: #15803d; }
.s-row { display: flex; align-items: center; gap: 7px; font-size: 10.5px; }
.s-row > span:not(.lt) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #6b6f7a; }
.s-row span b { font-weight: 600; color: var(--ink); }
.s-row em { font: 600 10px/1 var(--font); font-style: normal; color: #b45309; }
.s-search { flex: none; display: flex; align-items: center; gap: 6px; height: 32px; margin: 4px 12px 0; padding: 0 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #e1e2e8; font-size: 11px; color: #9a9ea8; }
.s-tabs { flex: none; display: flex; gap: 4px; padding: 8px 12px 0; font: 600 10.5px/1 var(--font); }
.s-tabs > * { padding: 6px 9px; border-radius: 8px; color: #6b6f7a; }
.s-tabs b { background: #18181c; color: #fff; }
.s-jobs { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 7px; padding: 8px 12px 0; }
.s-job { flex: none; position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 5px; padding: 9px 10px 9px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #e8e9ef; }
.s-job::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--a-map); }
.s-job-t { display: flex; align-items: center; gap: 6px; min-width: 0; }
.s-job-t b { font: 700 12px/1.1 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-job > span { font-size: 10px; color: #7d818c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-job-f { display: flex; align-items: center; gap: 5px; font-size: 10.5px; }
.s-job-f .chip { margin-left: auto; height: 18px; font-size: 10px; }


/* ---------------- Google-style map ---------------- */
.gmap { position: relative; overflow: hidden; background: #eef0f3; container-type: inline-size; }
.gmap > svg { display: block; width: 100%; height: 100%; }
/* Google Maps chrome: the "Google" mark bottom-left on every map; zoom, fullscreen and the
   attribution line on the web-app maps (the app turns on zoomControl + fullscreenControl). */
.gmap-logo { position: absolute; left: 6px; bottom: 4px; z-index: 2; font: 500 clamp(8px, 3.3cqw, 12px)/1 Roboto, Arial, sans-serif; letter-spacing: -.01em; color: #5f6368; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff; pointer-events: none; }
.gmap-attr { position: absolute; right: 0; bottom: 0; z-index: 2; display: flex; gap: 10px; padding: 2px 6px; background: rgb(255 255 255 / .74); font: 400 9px/1.35 Roboto, Arial, sans-serif; color: #3c4043; white-space: nowrap; pointer-events: none; }
.gmap-zoom { position: absolute; right: 10px; bottom: 26px; z-index: 2; display: flex; flex-direction: column; background: #fff; border-radius: 2px; box-shadow: rgb(0 0 0 / .3) 0 1px 4px -1px; }
.gmap-zoom i { width: 28px; height: 28px; display: grid; place-items: center; font: 300 20px/1 Roboto, Arial, sans-serif; font-style: normal; color: #666; }
.gmap-zoom i + i { position: relative; }
.gmap-zoom i + i::before { content: ""; position: absolute; top: 0; left: 5px; right: 5px; height: 1px; background: #e6e6e6; }
.gmap-full { position: absolute; top: 10px; right: 10px; z-index: 2; width: 28px; height: 28px; display: grid; place-items: center; background: #fff; border-radius: 2px; box-shadow: rgb(0 0 0 / .3) 0 1px 4px -1px; }

/* ---------------- Sections & cards ---------------- */
.section-head-center .section-lede { color: var(--body); }
.bento-card { border: 1px solid #e9eaf0; border-radius: 18px; box-shadow: var(--shadow-card); }
.bento-card h3 { font-weight: 650; font-size: clamp(20px, 1.6vw, 23px); letter-spacing: -.025em; }
.bento-copy p { color: var(--body); font-size: 15px; }
.bento-copy p.eyebrow, .bento-card p.eyebrow { color: var(--accent); font-size: 12px; margin: 0; }
.bento-card.is-dark p.eyebrow { color: #c4b5fd; }
.bento-card .bento-foot { color: var(--muted); }
.bento { --well: #f2f2f7; }
.bento-well { background: linear-gradient(180deg, #f1f1f6 0%, #f6f6fa 100%); box-shadow: inset 0 1px 0 #eceef3; }
.bento-well.tint-brand { background: linear-gradient(135deg, #f0ebff 0%, #fdebf4 55%, #fff1e3 100%); }
.bento-well.tint-violet { background: linear-gradient(180deg, #efeaff 0%, #f7f4ff 100%); }
.bento-well.tint-pink { background: linear-gradient(180deg, #fde8f2 0%, #fff4f9 100%); }
.bento-well.tint-amber { background: linear-gradient(180deg, #fff0d8 0%, #fff8ec 100%); }
.bento-well.tint-sky { background: linear-gradient(180deg, #e2edff 0%, #f1f6ff 100%); }
.bento-well.tint-mint, .bento-well.tint-green { background: linear-gradient(180deg, #dcf6e7 0%, #effbf4 100%); }
.bento-well.tint-amber .stop-new { background: #fff3dd; }
.bento-card.is-dark { background: #16161b; border-color: #16161b; }
.bento-card.is-dark::after { content: ""; position: absolute; inset: auto -20% -40% auto; width: 80%; height: 70%; background: radial-gradient(closest-side, rgba(255, 95, 162, .35), transparent); pointer-events: none; }
.bento-big { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }
.bento-card.is-dark .link-arrow { color: #fff; position: relative; z-index: 1; }
.bento-chips span { border: 0; background: #f1f2f6; font: 500 12px/1 var(--font); border-radius: 7px; }
.bento-chips .is-soon { background: transparent; box-shadow: inset 0 0 0 1px #d9dbe4; color: var(--muted); }
.import-step { background: #f6f6fa; border: 1px solid var(--border-ui); border-radius: 14px; }
.import-num { background: var(--grad-brand); font-weight: 600; box-shadow: 0 2px 6px rgb(124 92 255 / .3); }
.board-col { background: #fff; border-color: var(--border-ui); border-radius: 12px; box-shadow: var(--shadow-panel); }
.board-col-unassigned { background: rgba(255,255,255,.55); border: 1px dashed #d9dbe4; box-shadow: none; }
.board-drop { border-color: #a78bfa; color: var(--violet-text); background: rgba(239, 234, 255, .6); border-radius: 9px; }
.rep-bar i { background: var(--grad-violet); }
.rep .kpis .tile { border-color: var(--border-ui); }
.rep-ask { border-color: var(--border-ui); border-radius: 14px; box-shadow: var(--shadow-card); }
.rec-tabs span { border-color: var(--border-ui); border-radius: 7px; }
.rec-tabs span.is-active { background: #18181c; border-color: #18181c; }
.sync-row .status-ok { color: var(--success); }

/* ---------------- Excern for… (identity cards on a dark band) ---------------- */
.band-for { background: #131317; position: relative; overflow: hidden; }
.band-for::before { content: ""; position: absolute; inset: -30% -10% auto auto; width: 60%; height: 90%; background: radial-gradient(closest-side, rgba(124, 92, 255, .22), transparent); pointer-events: none; }
.band-for .container { position: relative; }
.for-card { position: relative; padding: 0 20px 20px; gap: 8px; border-radius: 18px; background: #1c1c22; border: 1px solid rgba(255,255,255,.07); overflow: hidden; }
.for-card:hover { background: #212128; border-color: rgba(255,255,255,.16); }
.for-cover { position: relative; height: 76px; margin: 0 -20px; background: var(--cover, var(--grad-brand)); overflow: hidden; }
.for-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 20% 110%, rgba(255,255,255,.34), transparent 55%), repeating-linear-gradient(115deg, rgba(255,255,255,.07) 0 2px, transparent 2px 14px); }
.for-medal { position: relative; z-index: 1; margin-top: -22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: 0 0 0 4px #1c1c22, 0 8px 18px -6px rgba(0,0,0,.5); }
.for-card:hover .for-medal { box-shadow: 0 0 0 4px #212128, 0 8px 18px -6px rgba(0,0,0,.5); }
.for-num { display: none; }
.for-card h3 { margin: 6px 0 0; }
.for-card .link-arrow { color: #c4b5fd; }
.for-card:hover .link-arrow { color: #fff; }

/* ---------------- FAQ ---------------- */
.faq details { background: #fff; border: 1px solid var(--border-ui); border-radius: 14px; box-shadow: var(--shadow-panel); }
.faq summary { font-weight: 600; font-size: 15.5px; letter-spacing: -.01em; }
.faq summary::after { color: var(--muted); font-weight: 400; }
.faq details[open] { box-shadow: var(--shadow-card); }
.faq details p { color: var(--body); }

/* ---------------- CTA: a floating dark card with the brand glow ---------------- */
.cta { background: transparent; color: #fff; }
.cta-wrap > .cta-inner { position: relative; overflow: hidden; border-radius: 26px; background:
  radial-gradient(55% 120% at 100% 0%, rgba(255, 95, 162, .38), transparent 62%),
  radial-gradient(50% 130% at 0% 100%, rgba(124, 92, 255, .42), transparent 64%),
  radial-gradient(40% 90% at 70% 110%, rgba(255, 169, 77, .30), transparent 64%),
  #16161b;
  padding: clamp(44px, 5vw, 72px) clamp(28px, 5vw, 72px); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 22px 44px -26px rgb(52 36 120 / .45); }
.cta-p { color: var(--on-green-body); }
.cta .btn-amber { background: #fff; color: var(--ink); }
.cta .btn-amber:hover { background: #ececf2; }
.cta-wrap { width: 100%; max-width: calc(var(--content) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------------- Footer ---------------- */
.footer-cols { border-bottom-color: var(--border-ui); }

/* ---------------- Other pages (pricing / demo / privacy) ---------------- */
.plan { border: 1px solid var(--border-ui); box-shadow: var(--shadow-card); }
.plan-kicker { color: var(--accent); }
.plan-list li::before { color: var(--success-text); }
.plan-featured { background: #16161b; }
.plan-featured .plan-kicker, .plan-featured .plan-list li::before, .plan-featured .link-arrow { color: #c4b5fd; }
.included { background: linear-gradient(135deg, #f0ebff 0%, #fdebf4 60%, #fff1e3 100%); }
.included-grid li::before { color: var(--accent); }
.field input, .field select, .field textarea { background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-control); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid #a78bfa; outline-offset: 1px; }
.form-card, .expect-item { border: 1px solid var(--border-ui); box-shadow: var(--shadow-card); }
.page-hero-center .page-hero-inner .btn-outline { background: #fff; }
.bullets li::before, .soon-list li::before, .flow li::before { background: var(--grad-brand); }
.split-card.is-dark, .vs-col.is-dark { background: #16161b; }
.related-card:hover, .industry-card:hover { border-color: #c9bdfd; }
.tour-tabs button[aria-selected="true"], .tour-tab[aria-selected="true"] { background: #18181c; border-color: #18181c; }
.tour-tabs button:hover, .tour-tab:hover, .tour-nav button:hover { border-color: #c9bdfd; }
.tour-stage { background: linear-gradient(135deg, #f0ebff 0%, #fdebf4 55%, #fff1e3 100%); }
.check > span::before { background: var(--success-soft); color: var(--success-text); }
.state.is-on { border-color: #a78bfa; }
.tbl:not(.tbl-ops) .tbl-r span:last-child i { background: var(--grad-violet); }
.size.is-on { border-color: #a78bfa; background: var(--violet-soft); color: var(--violet-text); }

@media (max-width: 900px) {
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .app-main { margin: 0; border-radius: 0; box-shadow: none; }
  .top-search { display: none; }
  .win-url { transform: none; }
}
@media (max-width: 620px) {
  .cta-wrap > .cta-inner { border-radius: 20px; }
  .phone { --pz: .94; }
}

/* ---------------- Homepage screens (redesigned anatomy) ---------------- */
.ic.flip { transform: rotate(180deg); }
.jobs-head { gap: 10px; flex-wrap: nowrap; }
.jobs-head .app-title { margin-right: 4px; }
.date-nav { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--font); color: var(--ink); }
.date-nav > span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--border); }
.date-nav > .ic { color: #8a8e98; }
.head-end { margin-left: auto; display: inline-flex; gap: 6px; }
.jobs-head .muted { margin-left: 0; font-size: 12px; }
.jobs-filters { display: flex; align-items: center; gap: 10px; }
.fsearch { flex: 1; max-width: 280px; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--border); color: #9a9ea8; font-size: 12px; }
.watch { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui); font-size: 12px; color: var(--muted); }
.watch b { color: var(--ink); font-weight: 600; }
.watch .ic { color: #d97706; }
.watch-end { margin-left: auto; color: #8a8e98; }
.days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
.day { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.day-h { display: flex; align-items: center; gap: 7px; padding: 2px 2px 3px; font: 500 12.5px/1 var(--font); color: var(--ink); }
.day-h b { font-weight: 600; }
.day-h .ic { color: #8a8e98; }
.day.is-today .day-h .ic { color: #f59e0b; }
.cnt { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 6px; background: #f1f2f6; font: 500 10.5px/1 var(--font); color: #6b6f7a; }
.jc { display: flex; flex-direction: column; gap: 7px; padding: 11px 12px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui), var(--shadow-card); min-width: 0; font-size: 11.5px; }
.jc.is-open { box-shadow: inset 0 0 0 1.5px #b9a8fb, 0 0 0 3px rgb(124 92 255 / .10), var(--shadow-card); }
.jc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.jc-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.jc-sub { display: flex; align-items: center; gap: 4px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-sub .ic { color: #b0b3bb; }
.jc-due { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px; background: #f3f3f7; color: var(--muted); font-size: 11px; }
.jc-due b { color: var(--ink); font-weight: 500; }
.jc-name { display: flex; align-items: center; justify-content: space-between; gap: 6px; font: 600 13.5px/1.2 var(--font); letter-spacing: -.015em; color: var(--ink); }
.jc-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-name .ic { color: #b0b3bb; }
.jc .uprog { font-size: 10.5px; }
.jc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 8px; border-top: 1px solid var(--divider); color: #5f636d; }
.jc-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; }
.jc-who span { overflow: hidden; text-overflow: ellipsis; }
.jc.is-compact { gap: 6px; padding: 10px 11px 11px; }
.jc.is-compact .jc-top { display: none; }
.jc.is-compact .jc-name { order: -1; }
.jc.is-compact .jc-name .ic { display: none; }
.board .jc { box-shadow: inset 0 0 0 1px var(--border-ui), var(--shadow-panel); }
.board .jc.is-open { box-shadow: inset 0 0 0 1.5px #b9a8fb, 0 0 0 3px rgb(124 92 255 / .10), var(--shadow-float); transform: rotate(-1.2deg) translateY(-2px); }
.sched-day .bh { display: inline-flex; align-items: center; gap: 6px; }
.feed { margin-top: 10px; display: flex; flex-direction: column; }
.feed-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--divider); min-width: 0; }
.feed-row:last-child { border-bottom: 0; }
.feed-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.feed-row > div b { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-row > div span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-row em { font-style: normal; font-size: 11px; color: #9a9ea8; }
.lines { display: inline-flex; gap: 5px; }
.thread-h { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); }
.thread-h b { color: var(--ink); font-weight: 600; }
.composer { margin-top: auto; display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 5px 0 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--border); color: #9a9ea8; font-size: 12px; }
.composer > span:first-child { flex: 1; }
.composer .send { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #18181c; color: #fff; }
.ui-card .chat + .composer { margin-top: 12px; }
.delta { margin-top: 6px; font: 500 11px/1 var(--font); color: var(--muted); display: inline-flex; align-items: center; gap: 2px; }
.delta.up { color: var(--success-text); }

.cnt-m { color: var(--muted); font-weight: 500; margin-left: 4px; }
.rep-list .ui-meta > span:first-child { display: inline-flex; align-items: center; }
.crm-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.crm-h > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.crm-h b { font: 600 14px/1.2 var(--font); }
.crm-h span { font-size: 11.5px; color: var(--muted); }
.crm .utabs { align-self: flex-start; }
.avs { display: inline-flex; margin-right: 4px; vertical-align: middle; }
.avs .av + .av { margin-left: -5px; box-shadow: 0 0 0 1.5px #fff; }
.ai-card .chat { margin-top: 12px; padding-left: 26px; }
.ai-card .bubble:not(.bubble-out):not(.bubble-ai) { margin-left: -26px; }
.ai-draft { margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 12px; background: linear-gradient(135deg, #f5f1ff 0%, #fdf0f6 60%, #fff4ea 100%); box-shadow: inset 0 0 0 1px #eadffc; }
.ai-draft > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ai-draft b { font-weight: 600; font-size: 12.5px; }
.ai-draft > div span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* live updates: phones and the dispatch map */
.lv { padding: 0 14px; display: flex; flex-direction: column; gap: 9px; }
.lv-nav { display: flex; align-items: center; justify-content: space-between; padding-top: 2px; font: 500 12.5px/1 var(--font); color: var(--accent); }
.lv-nav > span:first-child { display: inline-flex; align-items: center; gap: 3px; }
.lv-title { font: 700 20px/1.1 var(--font); letter-spacing: -.03em; }
.lv-sub { display: flex; align-items: center; gap: 7px; margin-top: -3px; font-size: 12px; color: var(--muted); }
.lv-map { height: 150px; border-radius: 14px; box-shadow: var(--shadow-panel), inset 0 0 0 1px rgb(0 0 0 / .04); }
.lv-map-tall { height: 318px; border-radius: 0; box-shadow: none; }
.lv-steps { display: flex; align-items: center; gap: 6px; padding: 10px 12px; white-space: nowrap; border-radius: 12px; background: #fff; box-shadow: var(--shadow-panel); font: 500 11px/1 var(--font); color: #9a9ea8; }
.lv-steps i { flex: 1; height: 2px; border-radius: 2px; background: #e6e7ee; }
.lv-steps .done { display: inline-flex; align-items: center; gap: 4px; color: var(--success-text); }
.lv-steps .done em { font-style: normal; color: #9a9ea8; }
.lv-steps .now { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.lv-steps .now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7c5cff; box-shadow: 0 0 0 3px rgb(124 92 255 / .2); }
.lv-pull { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lv-pull > div { padding: 9px 10px; border-radius: 11px; background: #fff; box-shadow: var(--shadow-panel); display: flex; flex-direction: column; gap: 4px; }
.lv-pull small { font-size: 10.5px; color: var(--muted); }
.lv-pull b { font: 600 13px/1 var(--mono); letter-spacing: -.02em; }
.lv-cta { position: relative; }
.lv-btn { display: flex; align-items: center; justify-content: center; gap: 7px; height: 46px; border-radius: 13px; background: #18181c; color: #fff; font: 600 14px/1 var(--font); box-shadow: 0 8px 18px -8px rgb(0 0 0 / .45); }
.tap { position: absolute; left: 89%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgb(255 255 255 / .28); box-shadow: 0 0 0 7px rgb(255 255 255 / .12), 0 0 0 14px rgb(255 255 255 / .06); pointer-events: none; }
.lv-note { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; color: var(--muted); }
.lv-cust { padding: 0; gap: 0; }
.lv-sms { position: relative; z-index: 2; margin: 0 8px 8px; display: flex; gap: 9px; padding: 10px 11px; border-radius: 16px; background: rgb(255 255 255 / .92); box-shadow: 0 8px 22px -10px rgb(20 16 50 / .35), inset 0 0 0 1px rgb(30 30 60 / .05); font-size: 11.5px; line-height: 1.35; }
.lv-sms > div { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 1px 6px; }
.lv-sms b { font-weight: 600; font-size: 12px; }
.lv-sms em { font-style: normal; color: #9a9ea8; font-size: 11px; }
.lv-sms span { grid-column: 1 / -1; color: #3f434c; }
.lv-sms-ic { flex: none; display: block; width: 30px; height: 30px; border-radius: 8px; }
.lv-track { position: relative; margin-top: -40px; }
.lv-eta { position: absolute; transform: translateX(-50%); padding: 6px 10px; border-radius: 999px; background: #1a73e8; color: #fff; font: 700 12px/1 var(--font); box-shadow: 0 4px 10px -2px rgb(26 115 232 / .5); }
.lv-sheet { position: relative; margin-top: -26px; padding: 8px 16px 4px; border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 -8px 20px -12px rgb(20 16 50 / .25); display: flex; flex-direction: column; gap: 9px; }
.lv-sheet-grab { align-self: center; width: 34px; height: 4px; border-radius: 999px; background: #e1e2e8; }
.lv-sheet-t { font: 700 16px/1.2 var(--font); letter-spacing: -.02em; }
.lv-sheet-s { margin-top: -4px; font-size: 11.5px; color: var(--muted); }
.lv-driver { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px; background: #f6f6fa; }
.lv-driver > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.lv-driver b { font-weight: 600; font-size: 12.5px; }
.lv-driver span { font-size: 11px; color: var(--muted); }
.lv-round { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow-panel); color: var(--ink); }
.lvd { background: #fff; border-radius: 16px; box-shadow: var(--shadow-overlay); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.lvd-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #eef0f4; font: 500 12px/1 var(--font); }
.lvd-date { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--border); }
.lvd-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--success-text); font-weight: 600; }
.lvd-live i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgb(34 197 94 / .2); }
.lvd-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); min-height: 0; }
.lvd-map { position: relative; min-height: 420px; }
.lvd-map .gmap { position: absolute; inset: 0; }
.lvd-toast { position: absolute; bottom: 12px; left: 12px; display: flex; align-items: center; gap: 9px; padding: 9px 12px 9px 9px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-float); font-size: 11.5px; }
.lvd-toast > div { display: flex; flex-direction: column; gap: 2px; }
.lvd-toast b { font-weight: 600; font-size: 12.5px; }
.lvd-toast span { color: var(--muted); }
.lvd-list { border-left: 1px solid #eef0f4; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: #fff; }
.lvd-h { display: flex; align-items: center; gap: 6px; padding: 2px 2px 6px; font: 600 12.5px/1 var(--font); }
.lvd-h span { display: inline-grid; place-items: center; min-width: 20px; height: 18px; border-radius: 6px; background: #f1f2f6; font: 500 10.5px/1 var(--font); color: #6b6f7a; }
.lvd-row { display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: 11px; box-shadow: inset 0 0 0 1px var(--border-ui); min-width: 0; }
.lvd-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lvd-row b { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvd-row span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvd-row.is-new { box-shadow: inset 0 0 0 1.5px #86efac, 0 0 0 3px rgb(34 197 94 / .10); background: #fbfffc; }
.live-trio { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: start; }
.live-step { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.live-cap { display: flex; align-items: center; gap: 8px; font: 500 13px/1.3 var(--font); color: var(--body); }
.live-cap b { color: var(--ink); font-weight: 600; }
.live-num { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #18181c; color: #fff; font: 600 11px/1 var(--font); }
.live-step .phone { margin: 0 auto; }
@media (max-width: 1080px) {
  .days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .days .day:nth-child(4) { display: none; }
  .live-trio { grid-template-columns: 1fr 1fr; }
  .live-trio .live-step:nth-child(2) { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 760px) {
  .days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .days .day:nth-child(3) { display: none; }
  .jobs-head .date-nav, .jobs-head .muted, .jobs-head .head-end .ubtn-outline, .fsearch { display: none; }
  .live-trio { grid-template-columns: 1fr; }
  .lvd-body { grid-template-columns: 1fr; }
  .lvd-list { border-left: 0; border-top: 1px solid #eef0f4; }
  .lvd-map { min-height: 300px; }
}
.for-medal { font: 700 16px/1 var(--font); }
.for-grid { gap: 14px; }
.for-card h3 { color: #fff; }

.live-step .phone { --pz: .97; }
.phone-row > span:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }

/* migration steps stack in a narrow tile */
.span-2 .import-steps, .span-3 .import-steps { grid-template-columns: 1fr; gap: 8px; }
.span-2 .import-step, .span-3 .import-step { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; row-gap: 3px; align-items: start; padding: 14px 16px; background: #fff; border: 0; box-shadow: var(--shadow-panel); }
.span-2 .import-step .import-num, .span-3 .import-step .import-num { grid-row: span 2; margin: 0; }
.span-2 .import-step b, .span-3 .import-step b { font-size: 14px; }
.span-2 .import-step span:not(.import-num), .span-3 .import-step span:not(.import-num) { font-size: 12.5px; color: var(--muted); }
/* operator answer sits on the left */
.rep-ask .chat { padding-left: 26px; }
.rep-ask .bubble-out { margin-left: -26px; }
.rep-ask .bubble-ai { align-self: flex-start; border-radius: 14px 14px 14px 4px; }
/* CRM activity */
.crm-act { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: 8px; }
.pt-label { font: 500 11px/1 var(--font); color: var(--muted); text-transform: none; }
.crm-row { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.crm-row span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-row em { font-style: normal; font-size: 11px; color: #9a9ea8; }
/* portal */
.portal { gap: 0; }
.pt-h { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--divider); }
.pt-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
.pt-brand .ws-tile { width: 22px; height: 22px; border-radius: 7px; font-size: 11px; }
.pt-brand b { font-weight: 600; }
.pt-sites { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.pt-site { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border-ui); }
.pt-site > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pt-site b { font-weight: 600; font-size: 13px; }
.pt-site > div > span { font-size: 11.5px; color: var(--muted); }
.pt-site .uprog { margin-top: 4px; font-size: 10.5px; }
.pt-actions { margin-top: 12px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 6px; }
.pt-actions .ubtn { height: 34px; }
.pt-photos { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.pt-photos > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pt-photos .proof-ph { height: 74px; border-radius: 10px; }
.pt-inv { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 10px; background: #f6f6fa; }
.pt-inv > div { display: flex; gap: 10px; font-size: 12px; }
.pt-inv b { font-weight: 600; font-family: var(--mono); font-size: 11.5px; }
.pt-inv > div span { color: var(--muted); }
.pt-pay { display: inline-flex; align-items: center; gap: 6px; }
.pt-inv .ubtn { height: 24px; padding: 0 12px; font-size: 11.5px; border-radius: 7px; }
/* broker card */
.bk { overflow: hidden; }
.bk-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--divider); }
.bk-id { display: flex; flex-direction: column; gap: 5px; }
.bk-id b { font: 600 14px/1.1 var(--font); letter-spacing: -.01em; }
.bk-chips { display: inline-flex; gap: 5px; }
.bk-rows { display: flex; flex-direction: column; }
.bk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--divider); font-size: 12.5px; }
.bk-row:last-child { border-bottom: 0; }
.bk-row span { color: var(--body); }
.bk-row b { font-weight: 600; font-variant-numeric: tabular-nums; }
.bk-who { display: inline-flex; align-items: center; gap: 7px; }
.bk-row .ic { color: #8a8e98; }
.bk-row.is-ai { background: linear-gradient(90deg, #f5f1ff 0%, #fdf1f7 100%); }
.bk-ai { font-style: normal; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--grad-brand); color: #fff; font: 700 8.5px/1 var(--font); }
.bk-row.is-total span { font-weight: 500; color: var(--ink); }
.route-map { border-left: 1px solid var(--divider); }
.map-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; }

/* Portal photo thumbnails: timestamp chip like the app's proof photos */
.pt-photos .proof-ph { box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.proof-ph .ph-time { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; font: 600 10px/1 var(--font); font-style: normal; color: #fff; background: rgb(17 17 22 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 4px 6px; border-radius: 6px; }
.it-violet { background: #ede9fe; color: #6d28d9; }

/* Pricing tile: what $0 covers, CTA pinned to the bottom */
.bento-card.no-well .bento-copy { flex: 1; }
.incl { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; position: relative; z-index: 1; }
.incl li { display: flex; align-items: center; gap: 9px; color: #d6d6de; font-size: 14.5px; }
.incl .ic { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 6px; background: rgb(124 92 255 / .22); color: #c4b5fd; }
.bento-card.is-dark .link-arrow { margin-top: auto; padding-top: 24px; }
.pt-photos .proof-ph img { object-position: 50% 78%; }

/* ---------------- Pass 2: small-screen fixes ---------------- */
.lv-sms-ic { display: inline-flex; align-items: center; justify-content: center; }
.lv-sms-ic i { line-height: 1; }
.proof li { gap: 0; }
.proof li + li::before { margin-right: 14px; }
.thread-h b { white-space: nowrap; }
.thread-sub { font-style: normal; color: var(--muted); margin-left: 4px; white-space: nowrap; }
.crm-row > .it { flex: none; }
.pt-inv b { white-space: nowrap; }
.live-cap .it { flex: none; }
.lvd-top > * { white-space: nowrap; }
.seg > span { white-space: nowrap; }
@media (max-width: 900px) {
  .app-side { display: none; }
}
@media (max-width: 760px) {
  .live-trio .live-step:nth-child(2) { order: 0; grid-column: auto; }
  .lvd-date { display: none; }
}
@media (max-width: 620px) {
  .proof { flex-direction: column; gap: 6px; }
  .proof li + li::before { display: none; }
  .thread-sub { display: none; }
  .crm .utabs > span:nth-child(n+4) { display: none; }
  .pt-inv > div { flex-direction: column; gap: 3px; }
  .rep .kpis .tile { padding: 10px; }
  .rep .tile-num { font-size: 19px; }
  .rep .tile-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rep-basis { flex-wrap: wrap; }
  .rep-basis .rep-bar { flex: 1 1 100%; }
}
@media (max-width: 620px) {
  .jobs-head .head-end { display: none; }
  .watch > span:not(.gpill):not(.watch-end) { display: none; }
}

/* ---------------- Action colours (the app's contract) ---------------- */
.atag-delivery, .abtn-delivery { --a: #166534; --a-bg: #f0fdf4; --a-bd: #86efac; --a-map: #16a34a; }
.atag-pickup, .abtn-pickup { --a: #b91c1c; --a-bg: #fef2f2; --a-bd: #fca5a5; --a-map: #dc2626; }
.atag-swap, .abtn-swap { --a: #a54b0b; --a-bg: #fffbeb; --a-bd: #fcd34d; --a-map: #d97706; }
.atag-dump-return, .abtn-dump-return { --a: #6d28d9; --a-bg: #f5f3ff; --a-bd: #c4b5fd; --a-map: #7c3aed; }
.atag-live-load, .abtn-live-load { --a: #0369a1; --a-bg: #f0f9ff; --a-bd: #7dd3fc; --a-map: #0284c7; }
.atag-relocate, .abtn-relocate { --a: #0f766e; --a-bg: #f0fdfa; --a-bd: #5eead4; --a-map: #0d9488; }
.atag-clean, .abtn-clean { --a: #0e7490; --a-bg: #ecfeff; --a-bd: #67e8f9; --a-map: #0891b2; }
.atag-rental, .abtn-rental { --a: #475569; --a-bg: #f8fafc; --a-bd: #cbd5e1; --a-map: #475569; }
.atag-overage, .abtn-overage { --a: #a21caf; --a-bg: #fdf4ff; --a-bd: #e879f9; --a-map: #c026d3; }
.atag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 6px; border-radius: 6px; font: 500 11.5px/1 var(--font); white-space: nowrap; color: var(--a); background: var(--a-bg); flex: none; }
.atag > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.abtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 9px; font: 600 12px/1 var(--font); white-space: nowrap; color: var(--a); background: var(--a-bg); box-shadow: inset 0 0 0 1px var(--a-bd); }
/* customer tracking + hauler work link */
.c-brand { flex: none; display: flex; align-items: center; gap: 8px; padding: 2px 12px 8px; }
.c-brand > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c-brand b { font: 700 12.5px/1.1 var(--font); }
.c-brand span { font-size: 10px; color: #7d818c; }
.lt-brand { background: var(--grad-brand); color: #fff; box-shadow: 0 2px 8px -2px rgb(236 72 153 / .45); }
.c-map { flex: 1; min-height: 0; position: relative; }
.c-map .gmap { position: absolute; inset: 0; }
.c-sheet { flex: none; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; margin-top: -18px; padding: 8px 14px 10px; border-radius: 20px 20px 0 0; background: #fff; box-shadow: 0 -10px 24px -14px rgb(20 16 50 / .35); }
.c-steps, .w-steps { display: flex; align-items: center; gap: 6px; font: 600 10px/1 var(--font); color: #9a9ea8; white-space: nowrap; }
.c-steps > span, .w-steps > span { display: inline-flex; align-items: center; gap: 3px; }
.c-steps > span + span::before, .w-steps > span + span::before { content: ""; width: 12px; height: 1.5px; margin-right: 3px; border-radius: 2px; background: #e1e2e8; }
.c-steps .done, .w-steps .done { color: #15803d; }
.w-steps .now { color: var(--ink); }
.w-steps { flex: none; padding: 9px 14px 0; }
.c-safari { flex: none; display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px; margin: 0 10px 22px; border-radius: 10px; background: #ececf0; font: 500 11px/1 var(--font); color: #3c3c43; }
.c-safari .ic { color: #8a8e98; }
.w-fields { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 8px 12px 0; }
.w-fields .d-field { padding: 6px 8px; }
.w-fields .d-field b { font-size: 11.5px; }
.d-foot-tight { padding-bottom: 10px; }
.d-stop.is-next.atag-clean { box-shadow: inset 0 0 0 1.5px var(--a-bd), 0 12px 24px -16px rgb(14 116 144 / .45); }
/* live-update phones fill the fixed-height screen */
.ps > .lv { flex: 1; min-height: 0; padding-bottom: 24px; }
.ps > .lv:not(.lv-cust) .lv-map { flex: 1; height: auto; min-height: 110px; }
.lv-cust { padding-bottom: 0 !important; }
.lv-cust .lv-track { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lv-cust .lv-map-tall { flex: 1; height: auto; min-height: 0; }
.lv-cust .lv-sheet { padding-bottom: 24px; }

.d-call { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #f5f3ff; color: #5b3fd9; font-style: normal; }
.d-row > .av { flex: none; }
.d-pad { height: 150px; }
.d-map { height: 118px; }
.d-stop.is-next { gap: 6px; padding: 9px 10px; }
.d-stop.is-next .d-btn { height: 30px; }
/* office-side cards beside the phones */
.oc { gap: 11px; }
.oc-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.oc-h > b { font: 600 13px/1.2 var(--font); }
.oc-t { display: flex; align-items: center; gap: 9px; }
.oc-t > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.oc-t b { font: 600 13px/1.2 var(--font); }
.oc-t small { font-size: 11px; color: var(--muted); }
.oc-alert { display: flex; gap: 9px; padding: 10px 11px; border-radius: 11px; background: #fef2f2; box-shadow: inset 0 0 0 1px #fecaca; color: #991b1b; }
.oc-alert > .ic { flex: none; margin-top: 1px; }
.oc-alert div { display: flex; flex-direction: column; gap: 2px; }
.oc-alert b { font: 600 12px/1.2 var(--font); }
.oc-alert span { font-size: 11.5px; line-height: 1.35; color: #7f1d1d; }
.oc-rep { display: flex; gap: 10px; padding: 9px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui); }
.oc-rep .d-ph { flex: none; width: 64px; height: 64px; border-radius: 9px; }
.oc-rep > div { display: flex; flex-direction: column; gap: 3px; }
.oc-rep b { font: 600 12px/1.2 var(--font); }
.oc-rep span { font-size: 11.5px; line-height: 1.35; color: var(--body); }
.oc-rep em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.oc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.oc-btns .ubtn { height: 34px; }
.ts { display: flex; flex-direction: column; }
.ts-r { display: flex; align-items: center; gap: 9px; padding: 8px 0; }
.ts-r + .ts-r { box-shadow: 0 -1px 0 var(--divider); }
.ts-r > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ts-r b { font: 600 12px/1.2 var(--font); }
.ts-r span { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-r em { font: 600 12px/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums; }
.ts-week { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; padding: 10px 11px; border-radius: 11px; background: #f6f6fa; font-size: 11.5px; color: var(--body); }
.ts-week b { font-weight: 600; color: var(--ink); text-align: right; }

/* ---------------- FAQ: heading beside one continuous list ---------------- */
.faq-sec { padding-top: clamp(64px, 8vw, 112px); }
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.faq-side { position: sticky; top: calc(var(--nav-h, 72px) + 24px); }
.faq-side h2 { margin: 14px 0 0; font-size: clamp(32px, 3.3vw, 46px); line-height: 1.04; letter-spacing: -.035em; }
.faq-lede { margin: 16px 0 0; max-width: 340px; font-size: 16px; line-height: 1.55; color: var(--body); }
.faq-lede a { color: var(--accent); font-weight: 500; }
.faq.faq-list { display: block; margin: 0; overflow: hidden; border-radius: 18px; background: #fff; box-shadow: var(--shadow-card), inset 0 0 0 1px var(--border-ui); }
.faq-list details { margin: 0; padding: 0 24px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.faq-list details + details { box-shadow: inset 0 1px 0 var(--divider, #eef0f4); }
.faq-list details[open] { box-shadow: none; }
.faq-list details[open] + details, .faq-list details + details[open] { box-shadow: inset 0 1px 0 var(--divider, #eef0f4); }
.faq-list summary { padding: 19px 44px 19px 0; font: 600 15.5px/1.35 var(--font); letter-spacing: -.01em; }
.faq-list summary::after { content: ""; position: absolute; right: 0; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: #f3f3f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318181c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 13px no-repeat; transition: transform .2s ease, background-color .2s ease; }
.faq-list details[open] summary::after { content: ""; transform: rotate(45deg); background-color: #efeaff; }
.faq-list details p { margin: -4px 0 20px; max-width: 66ch; font-size: 15px; line-height: 1.6; color: var(--body); }
.faq-sec + .cta, .faq-sec + section.cta { margin-top: clamp(56px, 7vw, 96px); }
.hero-stage-wrap + .section { padding-top: clamp(56px, 7vw, 96px); }
@media (max-width: 900px) {
  .faq-wrap { grid-template-columns: 1fr; gap: 28px; }
  .faq-side { position: static; }
  .faq-list details { padding: 0 18px; }
}

/* phones inside tiles: one size everywhere */
.bento-well .phone, .bento-well .mock-row .phone, .bento-well.is-phone .phone { width: var(--pw); --pz: .97; }
.bento-well.is-device > div { align-items: center; justify-content: center; }
.dv-pair { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: center !important; gap: 20px !important; }
.dv-pair > .phone { margin: 0 !important; }
.dv-row { display: flex; justify-content: center; align-items: flex-start; gap: clamp(20px, 2.4vw, 34px); }
.stage-cards .dv-row > .phone:nth-child(even) { margin-top: 44px; }
.dv-row-2 { gap: 28px; }
@media (max-width: 1240px) { .stage-cards .dv-row > .phone:nth-child(4) { display: none; } }
@media (max-width: 940px) { .stage-cards .dv-row > .phone:nth-child(3) { display: none; } }
@media (max-width: 760px) { .dv-pair { grid-template-columns: 1fr !important; justify-items: center; } .dv-pair > .ui-card { width: 100%; } }
@media (max-width: 640px) { .stage-cards .dv-row > .phone:nth-child(2), .dv-row-2 > .phone:nth-child(2) { display: none; } .stage-cards .dv-row > .phone { margin-top: 0; } }
.it-red { background: #fee2e2; color: #b91c1c; }
.lt-peach { background: #ffedd5; color: #c2410c; }
.lt-yellow { background: #fef9c3; color: #a16207; }

/* ---------------- Jobs & dispatch excerpts ---------------- */
.j-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.j-ph { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.j-brand { display: inline-flex; align-items: center; gap: 7px; }
.j-brand b, .j-ttl { font: 600 13px/1.2 var(--font); }
.j-muted { font-size: 11px; color: var(--muted); white-space: nowrap; }
.j-eyebrow { margin-top: 2px; font: 700 10px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #5b3fd9; }
.j-h { margin-top: -4px; font: 700 18px/1.15 var(--font); letter-spacing: -.02em; }
.j-seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.j-seg3 > span { display: grid; place-items: center; height: 34px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); font: 700 12px/1 var(--font); color: #6b6f7a; }
.j-seg3 > .is-on { background: var(--a-bg); color: var(--a); box-shadow: inset 0 0 0 1.5px var(--a-bd); }
.j-lbl { margin: 2px 0 -5px; font: 600 11px/1 var(--font); color: #4b4f58; }
.j-lbl em { font-style: normal; font-weight: 400; color: var(--muted); }
.j-select, .j-input { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 11px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); font-size: 12px; }
.j-select > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.j-select b { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-select span { font-size: 10.5px; color: var(--muted); }
.j-select > .ic, .j-input > .ic { flex: none; color: #8a8e98; }
.j-area { align-items: flex-start; min-height: 48px; color: var(--ink); }
.j-info { display: flex; gap: 8px; padding: 9px 11px; border-radius: 10px; background: #eff6ff; box-shadow: inset 0 0 0 1px #bfdbfe; font-size: 11px; line-height: 1.4; color: #1e3a8a; }
.j-info > .ic { flex: none; margin-top: 1px; color: #2563eb; }
.j-info b { font-weight: 600; }
.j-actions { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; margin-top: auto; }
.j-actions .ubtn { height: 36px; font-size: 12.5px; }
.j-btn-portal { background: #5b3fd9; color: #fff; box-shadow: 0 6px 14px -8px rgb(91 63 217 / .7); }
.j-btn-go { background: #16a34a; color: #fff; box-shadow: 0 6px 14px -8px rgb(22 163 74 / .7), inset 0 -1px 0 rgb(0 0 0 / .12); gap: 6px; }
.j-btn-go .ic { stroke-width: 2.4; }
.j-steps { display: flex; flex-wrap: nowrap; gap: 3px; overflow: hidden; }
.j-steps > span { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 21px; padding: 0 7px; border-radius: 999px; background: #f1f2f6; font: 600 10px/1 var(--font); color: #7d818c; white-space: nowrap; }
.j-steps > .done { background: #ecfdf3; color: #15803d; }

.j-steps > .now { background: #18181c; color: #fff; }
.j-rows { display: flex; flex-direction: column; }
.j-row { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 7px 0; }
.j-row + .j-row { box-shadow: 0 -1px 0 var(--divider); }
.j-row > span { padding-top: 1px; font-size: 11.5px; color: var(--muted); }
.j-row > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.j-row b { display: flex; align-items: center; gap: 6px; font: 600 12.5px/1.25 var(--font); }
.j-row small { font-size: 11px; color: var(--muted); }
.j-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; flex: 1; }
.j-duo > .ui-card { height: 100%; }
@media (max-width: 760px) { .j-duo { grid-template-columns: 1fr; } }
/* leads */
.j-leads { gap: 8px; }
.j-lead { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui); }
.j-lead:not(.is-on) > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.j-lead b { font: 600 12.5px/1.2 var(--font); }
.j-lead small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-lead.is-on { flex-direction: column; align-items: stretch; gap: 10px; padding: 11px; background: #fcfbff; box-shadow: inset 0 0 0 1.5px #c9bcfb, 0 10px 22px -16px rgb(91 63 217 / .45); }
.j-lead-h { display: flex; align-items: center; gap: 9px; }
.j-lead-h > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.j-lead .kv-list .kv b { display: inline-flex; align-items: center; gap: 6px; }
/* board */
.j-board { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.j-bh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.j-date { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); font: 500 12px/1 var(--font); }
.j-sum { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.j-sum b { color: #b45309; font-weight: 600; }
.j-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.j-col { display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 8px; border-radius: 14px; background: rgb(255 255 255 / .55); box-shadow: inset 0 0 0 1px var(--border-ui); }
.j-col.is-open { background: repeating-linear-gradient(135deg, rgb(255 255 255 / .6) 0 8px, rgb(241 242 246 / .6) 8px 16px); }
.j-col.is-hauler { background: rgb(239 234 255 / .55); box-shadow: inset 0 0 0 1px #ddd3fd; }
.j-col-h { display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 2px; }
.j-col-h > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.j-col-h b { font: 600 11.5px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-col-h small { font-size: 10px; color: var(--muted); white-space: nowrap; }
.j-col-h > b:first-child { flex: 1; }
.j-jc { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px 9px 8px 11px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui), var(--shadow-panel); overflow: hidden; }
.j-jc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--a-map); }
.j-jc-t { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.j-jc .atag { height: 17px; padding: 0 5px; font-size: 10px; gap: 4px; }
.j-jc .atag > i { width: 5px; height: 5px; }
.j-can { font: 600 10px/1 var(--mono); color: #6b6f7a; }
.j-jc > b { font: 600 12px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-jc > span { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-jc-f { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; }
.j-jc-f em { font-style: normal; font-size: 10.5px; color: #4b4f58; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.j-jc-f .chip { height: 18px; padding: 0 6px; font-size: 10px; flex: none; }
.j-jc.is-drag { transform: rotate(-1.6deg) translateY(-2px); box-shadow: inset 0 0 0 1.5px #a78bfa, 0 16px 28px -14px rgb(91 63 217 / .55); }
.j-jc.is-drag::after { display: none; content: ""; position: absolute; right: 8px; top: 8px; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2318181c' stroke='%23fff' stroke-width='1.5'%3E%3Cpath d='M5 3l14 8-6 2-3 6z'/%3E%3C/svg%3E") center / contain no-repeat; }
.j-drop { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 10px; border: 1.5px dashed #c9bcfb; background: #f7f4ff; font: 600 10.5px/1 var(--font); color: #5b3fd9; }
.j-chk { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 10px; background: #eff6ff; box-shadow: inset 0 0 0 1px #bfdbfe; font-size: 10.5px; color: #1e3a8a; }
.j-chk b { font-weight: 600; }
.j-margin { display: flex; flex-direction: column; gap: 3px; padding: 8px 9px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #ddd3fd; }
.j-margin span { font-size: 10px; color: var(--muted); }
.j-margin b { font: 700 12.5px/1 var(--font); color: #15803d; }
/* fleet map */
.j-fleet { min-width: 0; }
.j-fleet-map { position: relative; height: 250px; }
.j-fleet-map .gmap { position: absolute; inset: 0; }
.j-fleet-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; border-top: 1px solid #eef0f4; }
.j-fleet-list .lvd-row { margin: 0; }
@media (max-width: 1080px) { .j-fleet-list { grid-template-columns: 1fr; } }
/* recurring */
.j-cal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.j-day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui); }
.j-day small { font-size: 9.5px; color: var(--muted); }
.j-day b { font: 600 11.5px/1 var(--font); white-space: nowrap; }
.j-day.is-done { background: #ecfdf3; box-shadow: inset 0 0 0 1px #bbf7d0; }
.j-day.is-done b { color: #15803d; }
.j-day.is-today { background: #18181c; box-shadow: none; }
.j-day.is-today b, .j-day.is-today small { color: #fff; }
.j-rec .kv-list .kv b { display: inline-flex; align-items: center; gap: 6px; }
.j-sub { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 9px 10px; border-radius: 10px; background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; font-size: 11.5px; color: #4b3a12; }
.j-sub b { font-weight: 600; }
/* status trail on the dark tile */
.j-flow { position: relative; z-index: 1; margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.j-flow li { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 7px 0 7px 26px; }
.j-flow li::before { content: ""; position: absolute; left: 3px; top: 12px; width: 11px; height: 11px; border-radius: 50%; background: var(--grad-brand); box-shadow: 0 0 0 3px rgb(255 95 162 / .16); }
.j-flow li::after { content: ""; position: absolute; left: 8px; top: 26px; bottom: -8px; width: 1.5px; background: rgb(255 255 255 / .16); }
.j-flow li:last-child::after { display: none; }
.j-flow b { font: 600 14.5px/1.2 var(--font); color: #fff; }
.j-flow span { font-size: 12px; color: rgb(255 255 255 / .6); }
.j-flow li.now::before { background: #fff; box-shadow: 0 0 0 4px rgb(255 169 77 / .45); }
.j-flow li.now b { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }

.pill-amber { white-space: nowrap; }
.j-lead.is-on .j-actions { display: grid; }

/* hero phone: same device, scaled as a whole so it clears the page header */
.hero-phone { width: auto; }
.hero-phone .phone { width: var(--pw); --pz: .86; }
.stage-cards .dv-row .phone { --pz: 1; }
/* junk screens */
.d-loads { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 7px 12px 0; }
.d-loads > * { display: grid; place-items: center; height: 30px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #e1e2e8; font: 600 11.5px/1 var(--font); color: #4b4f58; }
.d-loads > b { background: #f0fdf4; color: #166534; box-shadow: inset 0 0 0 1.5px #86efac; }
.d-photos-2 { grid-template-columns: 1.4fr 1fr; }
.d-photos-2 .d-ph { height: 78px; }
.d-ph-lbl { position: absolute; left: 6px; top: 6px; padding: 3px 6px; border-radius: 5px; background: rgb(17 17 22 / .6); color: #fff; font: 600 9.5px/1 var(--font); font-style: normal; }
.d-ph-after { flex-direction: column; gap: 3px; height: 78px; border: 1.5px dashed #c9bcfb; box-shadow: none; background: #faf8ff; }
.d-ph-after small { font: 600 10px/1 var(--font); color: #5b3fd9; }
.j-seg4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.j-seg4 > span { display: grid; place-items: center; height: 34px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); font: 600 12px/1 var(--font); color: #6b6f7a; white-space: nowrap; }
.j-seg4 > .is-on { background: #f0fdf4; color: #166534; box-shadow: inset 0 0 0 1.5px #86efac; }
.j-pics { display: grid; grid-template-columns: 1fr 1fr 64px; gap: 6px; }
.j-pics .d-ph { height: 84px; border-radius: 10px; }
.j-pic-add { display: grid; place-items: center; border-radius: 10px; border: 1.5px dashed #d0d3dc; color: #8a8e98; }
/* hero: a phone beside a stack of cards */
.dv-side { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 3.2vw, 48px); }
.dv-side > .phone { flex: none; }
.dv-stack, .dv-side > .ui-card { flex: 1 1 0; max-width: 560px; min-width: 0; }
.dv-stack { display: flex; flex-direction: column; gap: 14px; }
.stage-cards .dv-side, .stage-cards .dv-row { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .dv-side { flex-direction: column; }
  .dv-side.is-rev { flex-direction: column-reverse; }
  .dv-stack, .dv-side > .ui-card { flex: none; width: 100%; max-width: none; }
}
/* inspection: the failed item gets its own row */
.d-chk.is-bad { grid-column: 1 / -1; }

.j-btn-block { display: flex; width: 100%; height: 38px; }
.pt-actions .abtn { height: 34px; padding: 0 8px; font-size: 12px; }
.pt-actions .abtn .ic { width: 13px; height: 13px; }
@media (max-width: 620px) { .proof li { display: block; text-align: center; } }
/* dispatch board in a half-width tile (tablet) and on phones */
@media (max-width: 1080px) {
  .j-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .j-col.is-open { display: none; }
  .j-sum { margin-left: 0; width: 100%; }
}
@media (max-width: 620px) {
  .j-cols { grid-template-columns: 1fr; }
  .j-bh .j-date { display: none; }
}
@media (max-width: 620px) { .j-steps { flex-wrap: wrap; } }

/* ---------------- Product menu: five features, then the rest ---------------- */
.nav-dd-panel.mega { width: min(780px, calc(100vw - 40px)); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; border-radius: 18px; transform: translateX(-36%); }
.mega-main { display: flex; flex-direction: column; gap: 2px; padding: 14px; }
.mega-side { display: flex; flex-direction: column; gap: 1px; padding: 14px 14px 14px; background: #f7f7fb; border-left: 1px solid var(--border-ui); }
.mega-h { margin: 6px 10px 8px; font: 600 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nav-dd-panel a.mega-item { flex-direction: row; align-items: center; gap: 13px; padding: 10px 10px; border-radius: 12px; }
.nav-dd-panel a.mega-item:hover, .nav-dd-panel a.mega-item[aria-current="page"] { background: #f4f4f8; }
.mega-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; }
.mega-ic .ic { width: 19px; height: 19px; }
.mega-sky { background: #e0edff; color: #1d4ed8; }
.mega-amber { background: #fff1d6; color: #b45309; }
.mega-mint { background: #dcfce7; color: #15803d; }
.mega-pink { background: #fce7f3; color: #be185d; }
.mega-brand { background: var(--grad-brand); color: #fff; box-shadow: 0 6px 14px -6px rgb(236 72 153 / .55); }
.mega-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mega-txt b { display: flex; align-items: center; gap: 7px; font: 600 14.5px/1.2 var(--font); color: var(--ink); }
.mega-txt small { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.mega-badge { font-style: normal; padding: 3px 6px; border-radius: 999px; background: var(--grad-brand); color: #fff; font: 700 9.5px/1 var(--font); letter-spacing: .04em; }
.nav-dd-panel a.mega-link { flex-direction: row; padding: 8px 10px; border-radius: 9px; font: 500 13.5px/1.2 var(--font); color: #3f434c; }
.nav-dd-panel a.mega-link:hover, .nav-dd-panel a.mega-link[aria-current="page"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgb(20 20 40 / .06); }
.mega-foot { margin-top: auto; display: flex; flex-direction: column; gap: 7px; padding: 12px 10px 2px; border-top: 1px solid var(--border-ui); }
.nav-dd-panel a.mega-tour { flex-direction: row; align-items: center; gap: 7px; padding: 0; background: none; font: 600 13px/1.2 var(--font); color: #5b3fd9; }
.nav-dd-panel a.mega-tour:hover { background: none; color: #4c2fc7; }
.mega-free { font-size: 12px; color: var(--muted); }
.mega-free b { color: var(--ink); font-weight: 700; }
.drawer-panel a.drawer-sm { padding: 11px 4px; font-size: 15px; font-weight: 500; color: var(--body); }

/* ---------------- Operator AI screens ---------------- */
.oi-body { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr); gap: 14px; align-items: start; margin-top: 12px; }
.oi-list { display: flex; flex-direction: column; gap: 7px; }
.oi-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 11px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui); }
.oi-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.oi-item b { font: 600 12.5px/1.2 var(--font); }
.oi-item > div > span { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oi-item small { display: flex; align-items: center; justify-content: space-between; margin-top: 3px; }
.oi-item small em { font-style: normal; font-size: 10.5px; color: #9a9ea8; }
.oi-item.is-on { background: #fcfbff; box-shadow: inset 0 0 0 1.5px #c9bcfb, 0 10px 22px -16px rgb(91 63 217 / .45); }
.oi-detail { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui), var(--shadow-card); }
.oi-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.oi-h > div { display: flex; flex-direction: column; gap: 3px; }
.oi-h b { font: 700 15px/1.2 var(--font); letter-spacing: -.01em; }
.oi-h span { font-size: 11.5px; color: var(--muted); }
.oi-thread { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: #f6f6fa; }
.oi-thread .bubble { max-width: 82%; font-size: 12px; }
.oi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.oi-fields .kv { padding: 7px 0; border-bottom: 1px solid var(--divider); }
.oi-fields .kv b { display: inline-flex; align-items: center; gap: 6px; }
.oi-fields .kv .status-ok { display: inline-flex; align-items: center; gap: 4px; }
.oi-actions { display: flex; justify-content: flex-end; gap: 8px; }
.oi-actions .ubtn { height: 34px; }
@media (max-width: 1080px) { .oi-body { grid-template-columns: 1fr; } .oi-list .oi-item:nth-child(n+2) { display: none; } }
@media (max-width: 620px) { .oi-fields { grid-template-columns: 1fr; } }
/* the customer's Messages app */
.sms-top { flex: none; display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; padding: 0 12px 10px; border-bottom: 1px solid #ececf0; }
.sms-back, .sms-info { display: grid; place-items: center; color: #0a84ff; }
.sms-who { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sms-who b { font: 500 11px/1 var(--font); color: #3c3c43; }
.sms-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 0; }
.sms-day { align-self: center; margin-bottom: 2px; font: 500 9.5px/1 var(--font); color: #8e8e93; }
.sms-in, .sms-out { max-width: 78%; padding: 7px 11px; border-radius: 17px; font: 400 12px/1.32 var(--font); }
.sms-in { align-self: flex-start; background: #e9e9eb; color: #000; border-bottom-left-radius: 5px; }
.sms-out { align-self: flex-end; background: #34c759; color: #fff; border-bottom-right-radius: 5px; }
.sms-read { align-self: flex-end; font: 500 9.5px/1 var(--font); color: #8e8e93; }
.sms-compose { flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px 26px; }
.sms-plus { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #e9e9eb; color: #6b6b70; }
.sms-field { flex: 1; height: 30px; display: flex; align-items: center; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px #d1d1d6; font-size: 12px; color: #aeaeb2; }
.sms-mic { color: #8e8e93; display: grid; place-items: center; }
/* email intake */
.ei { gap: 10px; }
.ei-mail { display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui); }
.ei-h { display: flex; align-items: center; gap: 9px; }
.ei-h > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ei-h b { font: 600 12.5px/1.2 var(--font); }
.ei-h span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ei-subj { font: 700 13.5px/1.25 var(--font); }
.ei-mail p { margin: 0; font-size: 12px; line-height: 1.45; color: #3f434c; }
.ei-arrow { display: flex; align-items: center; gap: 8px; padding-left: 4px; font: 600 11.5px/1 var(--font); color: #5b3fd9; }
.ei-draft { padding: 4px 12px; border-radius: 12px; background: #fcfbff; box-shadow: inset 0 0 0 1.5px #d9cffd; }
.ei-draft .kv { padding: 7px 0; }
.ei-draft .kv + .kv { border-top: 1px solid #efeafe; }
.ei-draft .kv b { display: inline-flex; align-items: center; gap: 6px; }
/* intake queue */
.iq { gap: 8px; }
.iq-row { display: flex; flex-direction: column; gap: 8px; padding: 10px 11px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui); }
.iq-t { display: flex; align-items: center; gap: 9px; }
.iq-t > div { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.iq-t b { font: 600 12.5px/1.2 var(--font); }
.iq-t span { font-size: 11px; color: var(--muted); }
.iq-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-left: 35px; font-size: 11.5px; }
.iq-f .status-ok { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.iq-btn { height: 28px; padding: 0 12px; font-size: 11.5px; }
.iq-row.is-dup { background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; }
.iq-flag { display: inline-flex; align-items: center; gap: 5px; color: #92400e; font-weight: 600; }
/* operator chat */
.op-thread { display: flex; flex-direction: column; gap: 8px; }
.op-q { align-self: flex-end; max-width: 80%; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #18181c; color: #fff; font-size: 12.5px; }
.op-a { align-self: flex-start; max-width: 88%; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: linear-gradient(135deg, #f5f1ff 0%, #fdf1f7 100%); box-shadow: inset 0 0 0 1px #e9e0ff; }
.op-a p { margin: 0; font-size: 12.5px; line-height: 1.45; color: #26222f; }
.op-a b { font-weight: 700; }
.op-reads { display: inline-flex; align-items: center; gap: 4px; font: 500 10.5px/1 var(--font); color: #7c6bb8; }
.op-compose { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; margin-top: 4px; padding: 0 5px 0 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); font-size: 12px; color: #9a9ea8; }
.op-compose i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--grad-brand); color: #fff; }
/* AI-read invoice */
.ai-inv-doc { padding: 10px 12px; border-radius: 10px; background: #fafafc; border: 1px dashed #d7d9e2; font: 500 11px/1.6 var(--mono); color: #3f434c; }
.ai-inv-doc b { font-weight: 700; color: var(--ink); }
/* driver numbers */
.dl { gap: 8px; }
.dl-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.dl-row + .dl-row { box-shadow: 0 -1px 0 var(--divider); }
.dl-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-row b { font: 600 12.5px/1.2 var(--font); }
.dl-row span { font-size: 11px; color: var(--muted); }
.dl-row em { font-style: normal; font-family: var(--mono); color: var(--ink); font-size: 11px; }
.dl-row .ubtn { height: 26px; padding: 0 10px; font-size: 11px; }
.dl-call { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 10px; border-radius: 12px; background: #f6f6fa; }
.dl-call > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dl-call b { font: 600 12px/1.2 var(--font); }
.dl-call span { font-size: 10.5px; color: var(--muted); }
.dl-play { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); font: 600 11px/1 var(--font); color: #5b3fd9; }
.dl-play .ic { fill: currentColor; }
/* dark tile list */
.dk-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; position: relative; z-index: 1; }
.dk-list li { display: flex; align-items: center; gap: 9px; color: #d6d6de; font-size: 14.5px; }
.dk-list .ic { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 6px; background: rgb(124 92 255 / .22); color: #c4b5fd; }
/* example requests on the coming-soon tile */
.soon-asks { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.soon-asks span { align-self: flex-start; padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: #f6f6fa; box-shadow: inset 0 0 0 1px var(--border-ui); font-size: 13.5px; color: #3f434c; }
.soon-asks span:nth-child(2) { align-self: flex-end; border-radius: 14px 14px 4px 14px; }
.nav-caret { display: inline-grid; place-items: center; font-size: 0; color: #8a8e98; transition: transform .15s ease; }
.nav-caret .ic { stroke-width: 2.2; }
.op-tool { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin: -2px 0 -2px 4px; font: 500 10.5px/1 var(--font); color: #7c6bb8; }
.op-tool .ic { width: 12px; height: 12px; padding: 1.5px; border-radius: 50%; background: #efeaff; stroke-width: 2.6; }
.op-tool + .op-tool { margin-top: -6px; }
/* hero: leave room on the right of the intake screen for the customer's phone */
@media (min-width: 901px) { .hero-stage .oi { padding-right: clamp(210px, 21vw, 280px); } }
.iq-note { display: inline-flex; align-items: center; gap: 5px; color: #4b4f58; font-weight: 500; }

/* ---------------- Communications screen (CRM hero and tour) ---------------- */
.cm-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; margin-top: 12px; align-items: start; }
.cm-feed { display: flex; flex-direction: column; padding: 6px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui); }
.cm-day { padding: 6px 8px 4px; font: 600 10.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cm-row { display: flex; align-items: center; gap: 10px; padding: 9px 8px; border-radius: 10px; }
.cm-row + .cm-row { box-shadow: 0 -1px 0 var(--divider); }
.cm-row.is-on { background: #f5f3ff; box-shadow: inset 0 0 0 1px #ddd3fd; }
.cm-row.is-on + .cm-row { box-shadow: none; }
.cm-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-row b { font: 600 12.5px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-row span { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-row span .ic { flex: none; fill: currentColor; color: #5b3fd9; }
.cm-row em { flex: none; font-style: normal; font-size: 10.5px; color: #9a9ea8; }
.cm-thumbs { flex: none; display: flex; }
.cm-thumbs img { width: 30px; height: 30px; object-fit: cover; border-radius: 7px; box-shadow: 0 0 0 2px #fff; }
.cm-thumbs img + img { margin-left: -8px; }
.cm-thread { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui), var(--shadow-card); }
.cm-th { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; border-bottom: 1px solid var(--divider); }
.cm-th > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-th b { font: 600 13px/1.2 var(--font); }
.cm-th span { font-size: 11px; color: var(--muted); }
.cm-msgs { display: flex; flex-direction: column; gap: 7px; }
.cm-msgs .bubble { max-width: 84%; font-size: 12px; }
.cm-event { align-self: center; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font: 500 10.5px/1 var(--font); }
.cm-call { align-self: flex-start; display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 12px; background: #f6f6fa; box-shadow: inset 0 0 0 1px var(--border-ui); }
.cm-call > div { display: flex; flex-direction: column; gap: 2px; }
.cm-call b { font: 600 11.5px/1.2 var(--font); }
.cm-call span:not(.dl-play) { font-size: 10.5px; color: var(--muted); }
.cm-photos { align-self: flex-start; display: grid; grid-template-columns: 84px 84px; gap: 5px; }
.cm-photos img { width: 84px; height: 62px; object-fit: cover; border-radius: 10px; }
.cm-photos span { grid-column: 1 / -1; font-size: 10.5px; color: var(--muted); }
@media (max-width: 1080px) { .cm-body { grid-template-columns: 1fr; } .cm-thread { display: none; } }
@media (max-width: 620px) { .cm .head-end { display: none; } }

/* ---------------- Hero feature row (driver page) ---------------- */
.feat-row { list-style: none; margin: clamp(40px, 5vw, 60px) auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1280px; }
.feat-row li { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 15px 0 6px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui), var(--shadow-panel); font: 600 14px/1 var(--font); color: var(--ink); white-space: nowrap; }
.feat-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f3f0ff; color: #5b3fd9; }
.feat-row li:nth-child(6n+2) .feat-ic { background: #fdebf4; color: #be185d; }
.feat-row li:nth-child(6n+3) .feat-ic { background: #fff1d6; color: #b45309; }
.feat-row li:nth-child(6n+4) .feat-ic { background: #dcfce7; color: #15803d; }
.feat-row li:nth-child(6n+5) .feat-ic { background: #e0edff; color: #1d4ed8; }
.feat-row li:nth-child(6n+6) .feat-ic { background: var(--grad-brand); color: #fff; }
.proof.proof-sm { margin-top: 18px; font-size: 13.5px; }
@media (max-width: 620px) { .feat-row { gap: 8px; } .feat-row li { height: 38px; font-size: 13px; padding-right: 13px; } .feat-ic { width: 26px; height: 26px; } }

/* ---------------- Photo tile (bento) ---------------- */
.bento-card.is-photo { grid-row: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); grid-template-rows: none; align-items: end; gap: 28px; min-height: clamp(380px, 34vw, 470px); padding: var(--pad); background: #1b1b1f var(--photo) center / cover no-repeat; border: 0; color: #fff; overflow: hidden; }
.bento-card.is-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(10 10 14 / .82) 0%, rgb(10 10 14 / .55) 42%, rgb(10 10 14 / .12) 75%), linear-gradient(0deg, rgb(10 10 14 / .55), transparent 55%); pointer-events: none; }
.bento-card.is-photo > * { position: relative; z-index: 1; }
.bento-card.is-photo .bento-copy { max-width: 470px; }
.bento-card.is-photo h3 { color: #fff; }
.bento-card.is-photo .bento-copy p { color: rgb(255 255 255 / .8); }
.bento-card.is-photo p.eyebrow { color: #c4b5fd; }
.bento-side { align-self: end; }
.tk { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: rgb(255 255 255 / .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); box-shadow: 0 24px 50px -20px rgb(0 0 0 / .6); }
.tk-h { display: flex; align-items: center; gap: 10px; }
.tk-h > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tk-h b { font: 700 14px/1.2 var(--font); }
.tk-h span { font-size: 11.5px; color: var(--muted); }
.tk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tk-grid > div { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; background: #f4f4f8; }
.tk-grid small { font-size: 10.5px; color: var(--muted); }
.tk-grid b { display: inline-flex; align-items: center; gap: 4px; font: 700 14px/1 var(--font); }
.tk-line { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #3f434c; }
.tk-line .ic { flex: none; width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: #dcfce7; color: #15803d; stroke-width: 2.6; }
@media (max-width: 1080px) { .bento-card.is-photo { grid-column: span 2; } }
@media (max-width: 900px) { .bento-card.is-photo { grid-template-columns: 1fr; align-items: start; } .bento-card.is-photo::before { background: linear-gradient(180deg, rgb(10 10 14 / .8), rgb(10 10 14 / .45) 60%, rgb(10 10 14 / .6)); } }
@media (max-width: 620px) { .bento-card.is-photo { grid-column: span 1; } }

/* ---------------- Driver page: placement, prohibited items, calls, the can ---------------- */
.d-place { flex: none; position: relative; height: 128px; margin: 9px 12px 0; overflow: hidden; border-radius: 12px; box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.d-place img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.d-place-tag { position: absolute; left: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 6px; background: rgb(17 17 22 / .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font: 600 9.5px/1 var(--font); font-style: normal; white-space: nowrap; }
.d-btns-full { width: 100%; }
.d-photos-2 { grid-template-columns: 1fr 1fr; }
.d-photos-2 .d-ph { height: 112px; }
.d-dnote { flex: none; margin: 6px 12px 0; padding: 9px 10px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px #e8e9ef; }
.d-dnote p { margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--ink); }
.d-dnote small { display: block; margin-top: 4px; font-size: 10px; color: #8a8e98; }
.d-input { flex: none; margin: 7px 12px 0; height: 34px; display: flex; align-items: center; padding: 0 11px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #e1e2e8; font-size: 11.5px; color: #9a9ea8; }
/* incoming call */
.icall { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 18px 18px 34px; background: radial-gradient(120% 70% at 50% 0%, #3b3b52 0%, #1b1b24 55%, #0e0e12 100%); color: #fff; }
.ic-top { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.ic-top small { font: 500 11px/1 var(--font); color: rgb(255 255 255 / .65); }
.ic-top b { margin-top: 6px; font: 600 26px/1.1 var(--font); letter-spacing: -.02em; }
.ic-top span { font-size: 12.5px; color: rgb(255 255 255 / .75); }
.ic-av { margin-top: 26px; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #a5c8ff, #6f8fd8); font: 600 32px/1 var(--font); color: #fff; box-shadow: 0 0 0 6px rgb(255 255 255 / .06); }
.ic-quick { margin-top: auto; display: flex; gap: 70px; }
.ic-quick span { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; }
.ic-quick em { font-style: normal; font: 500 11px/1 var(--font); }
.ic-btns { margin-top: 26px; display: flex; gap: 86px; }
.ic-b { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ic-b .ic { width: 62px; height: 62px; padding: 17px; border-radius: 50%; color: #fff; }
.ic-b em { font-style: normal; font: 500 11.5px/1 var(--font); }
.ic-dec .ic { background: #ff3b30; transform: rotate(135deg); }
.ic-acc .ic { background: #34c759; }
/* can picker */
.d-can-opt { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 11px; background: #f6f6f9; box-shadow: inset 0 0 0 1px #e6e7ec; }
.d-can-opt b { font: 800 15px/1.1 var(--mono); letter-spacing: -.02em; }
.d-can-opt span { font-size: 10px; color: #7d818c; }
.d-can-opt em { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font: 800 9.5px/1 var(--font); font-style: normal; letter-spacing: .06em; color: #15803d; }
.d-can-opt.is-exp { background: #f0fdf4; box-shadow: inset 0 0 0 1.5px #22c55e; }
/* office: placement map */
.pm { gap: 10px; }
.pm-map { position: relative; height: 210px; overflow: hidden; border-radius: 12px; background: #2d3a2d; }
.pm-map > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.pm-toggle { position: absolute; left: 8px; top: 8px; display: flex; overflow: hidden; border-radius: 3px; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .3); font: 500 11px/1 Roboto, Arial, var(--font); }
.pm-toggle > * { padding: 7px 10px; font-style: normal; color: #565656; }
.pm-toggle b { font-weight: 500; color: #000; box-shadow: inset 0 -2px 0 #000; }
.pm-flag { position: absolute; left: 49%; top: 44%; width: 28px; height: 40px; transform: translate(-50%, -100%); filter: drop-shadow(0 3px 4px rgb(0 0 0 / .4)); }
.pm-flag svg { display: block; width: 100%; height: 100%; }
.pm-flag::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 34px; height: 34px; transform: translate(-50%, 50%); border-radius: 50%; border: 2px solid rgb(255 255 255 / .9); box-shadow: 0 0 0 4px rgb(234 67 53 / .35); }
.pm-drag { position: absolute; right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: rgb(17 17 22 / .72); color: #fff; font: 600 10.5px/1 var(--font); white-space: nowrap; }
.pm-zoom { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; overflow: hidden; border-radius: 3px; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .3); }
.pm-zoom i { width: 26px; height: 26px; display: grid; place-items: center; font: 500 16px/1 var(--font); font-style: normal; color: #666; }
.pm-zoom i + i { border-top: 1px solid #e6e6e6; }
.pm-row { display: flex; align-items: center; gap: 10px; }
.pm-sv { flex: none; position: relative; width: 104px; height: 58px; overflow: hidden; border-radius: 9px; }
.pm-sv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-sv i { position: absolute; left: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 5px; border-radius: 5px; background: rgb(17 17 22 / .62); color: #fff; font: 600 9px/1 var(--font); font-style: normal; }
.pm-row > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pm-row b { font: 600 12px/1.25 var(--font); }
.pm-row span { font-size: 11px; line-height: 1.35; color: var(--muted); }
.pm-foot { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; margin-top: auto; }
.pm-ll { margin-top: 2px; font: 500 10.5px/1 var(--mono); font-style: normal; color: #8a8e98; white-space: nowrap; }
.pm-foot .ubtn { height: 30px; padding: 0 10px; font-size: 11.5px; }
/* office: extra charges */
.xc { gap: 9px; }
.xc-row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui); }
.xc-row .d-ph { flex: none; width: 58px; height: 46px; border-radius: 8px; }
.xc-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xc-row > div b { font: 600 12px/1.25 var(--font); }
.xc-row > div span { font-size: 10.5px; color: var(--muted); }
.xc-amt { flex: none; font: 700 13px/1 var(--font); }
.xc-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 2px; }
.xc-actions .ubtn { height: 34px; }
.xc-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 11px; color: var(--muted); }
/* office: the driver's line */
.dll { gap: 8px; }
.dll-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.dll-row + .dll-row { box-shadow: 0 -1px 0 var(--divider); }
.dll-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dll-row b { font: 600 12.5px/1.2 var(--font); }
.dll-row span:not(.dl-play) { font-size: 11px; color: var(--muted); }
.dll-soon { display: flex; align-items: center; gap: 8px; margin-top: auto; padding: 9px 10px; border-radius: 11px; background: #faf8ff; box-shadow: inset 0 0 0 1px #e9e0ff; font-size: 11.5px; color: #4b3f79; }
.dll-soon > .ic { flex: none; color: #7c5cff; }
.dll-soon > span:not(.soon) { flex: 1; }
.dll-soon .soon { flex: none; }

.pm-over { position: absolute; inset: 0; width: 100%; height: 100%; }
.sees { position: relative; z-index: 1; margin-top: 20px; display: flex; flex-direction: column; border-radius: 14px; background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09); overflow: hidden; }
.sees-h, .sees-r { display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px; align-items: center; gap: 4px; padding: 12px 14px; }
.sees-h { padding-top: 11px; font: 600 11px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .55); }
.sees-h b { font-weight: 600; text-align: center; }
.sees-r { box-shadow: 0 -1px 0 rgb(255 255 255 / .07); font-size: 13.5px; color: #e4e4ea; }
.sees-r i { justify-self: center; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.sees-r i .ic { stroke-width: 2.6; }
.sees-r i.y { background: rgb(34 197 94 / .18); color: #4ade80; }
.sees-r i.n { background: rgb(248 113 113 / .14); color: #f87171; }
/* tablet: tiles with a phone + an office card take the full row; small tiles pack into the gaps */
@media (max-width: 1080px) and (min-width: 621px) {
  .bento-card:has(.dv-pair) { grid-column: span 2; }
  .bento:has(.dv-pair) { grid-auto-flow: row dense; }
}
@media (max-width: 1080px) and (min-width: 621px) { .bento:has(.dv-pair) .bento-card.is-dark { grid-column: span 1; } }

/* ---------------- Dispatch board: the app's card and lane anatomy ---------------- */
.board2 { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 10px; align-items: start; min-width: 0; }
.bl { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui), var(--shadow-card); }
.bl-wait { background: linear-gradient(180deg, #fbfaff 0%, #f6f4ff 100%); box-shadow: inset 0 0 0 1px #e6e0fb; }
.bl-hauler { background: linear-gradient(180deg, #fcfbff 0%, #f5f2ff 100%); box-shadow: inset 0 0 0 1px #e4dcfd; }
.bl-h { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.bl-h .cnt { margin-right: auto; }
.bl-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.bl-who > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bl-who b { font: 600 12.5px/1.15 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-who small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-num { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.bl-num b { font: 700 15px/1 var(--font); }
.bl-num small { font-size: 9.5px; color: var(--muted); }
.bl-ring { flex: none; position: relative; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#7c5cff 0 calc(var(--p) * 1%), #ec4899 calc(var(--p) * 1%) calc(var(--p) * 1% + .1%), #eceef3 0); }
.bl-ring::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #fff; }
.bl-ring b { position: relative; font: 700 9.5px/1 var(--font); }
.bl-load { height: 4px; overflow: hidden; border-radius: 999px; background: #eef0f4; }
.bl-load i { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); }
.bl-sum { margin-top: -3px; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-cards { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bl-hint { display: inline-flex; align-items: center; gap: 4px; font: 600 10.5px/1 var(--font); color: #5b3fd9; white-space: nowrap; }
.bl-drop { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; border-radius: 10px; border: 1.5px dashed #c9bcfb; background: #fff; font: 600 10.5px/1 var(--font); color: #5b3fd9; }
.bl-margin { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #e4dcfd; }
.bl-margin span { font-size: 10px; color: var(--muted); }
.bl-margin b { font: 700 13px/1 var(--font); color: #15803d; }
.bc { position: relative; display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 9px 10px 8px 13px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui), 0 1px 2px rgb(20 20 40 / .04), 0 6px 14px -10px rgb(20 20 40 / .22); }
.bc::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 999px 999px 0; background: var(--a-map); }
.bc-top { display: flex; align-items: center; gap: 5px; min-width: 0; }
.bc-id { font: 500 10.5px/1 var(--mono); color: #7d818c; }
.bc-flag { display: inline-flex; align-items: center; gap: 3px; height: 17px; padding: 0 5px; border-radius: 5px; font: 600 9.5px/1 var(--font); white-space: nowrap; }
.bc-flag .ic { width: 9px; height: 9px; stroke-width: 2.4; }
.bc-flag-live { background: #fef2f2; color: #b91c1c; }
.bc-flag-waiting { background: #fffbeb; color: #b45309; }
.bc-flag-assigned { background: #f1f2f6; color: #6b6f7a; }
.bc-act { margin-left: auto; }
.bc .atag { height: 17px; padding: 0 5px; gap: 4px; font-size: 10px; }
.bc .atag > i { width: 5px; height: 5px; }
.bc-name { margin-top: 2px; font: 600 12.5px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-size { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-addr { display: flex; align-items: center; gap: 3px; min-width: 0; font-size: 11px; color: #4b4f58; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-addr .ic { flex: none; color: #9a9ea8; }
.bc-hauler { display: flex; align-items: center; gap: 5px; font: 600 10.5px/1.2 var(--font); color: #5b3fd9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-hint { font: 600 10.5px/1.2 var(--font); color: #5b3fd9; }
.bc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.bc-eta, .bc-win { display: inline-flex; align-items: center; gap: 3px; height: 19px; max-width: 100%; padding: 0 6px; border-radius: 6px; background: #f3f4f7; font: 500 10px/1 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-eta .ic, .bc-win .ic { flex: none; }
.bc-win { background: #f5f3ff; color: #5b3fd9; }
.bc-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; padding-top: 6px; border-top: 1px solid var(--divider); font-size: 10px; color: var(--muted); min-width: 0; }
.bc-foot > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); font-size: 9.5px; }
.bc-foot .chip { flex: none; height: 18px; padding: 0 6px; font-size: 10px; }
.bc-btn { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 8px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); font: 600 10px/1 var(--font); color: var(--ink); }
.bc-auto { color: #5b3fd9; }
.bc-auto .ic { color: #7c5cff; }
.bc.is-done .bc-name { color: #4b4f58; }
.bc.is-drag { transform: rotate(-1.4deg); box-shadow: inset 0 0 0 1.5px #a78bfa, 0 18px 30px -14px rgb(91 63 217 / .55); }
.bc.is-sel { background: var(--grad-brand); box-shadow: 0 12px 26px -12px rgb(236 72 153 / .6); color: #fff; }
.bc.is-sel::before { background: rgb(255 255 255 / .8); }
.bc.is-sel .bc-id, .bc.is-sel .bc-size, .bc.is-sel .bc-addr, .bc.is-sel .bc-addr .ic, .bc.is-sel .bc-foot, .bc.is-sel .bc-name { color: #fff; }
.bc.is-sel .bc-flag, .bc.is-sel .atag, .bc.is-sel .bc-eta, .bc.is-sel .bc-win { background: rgb(255 255 255 / .2); color: #fff; }
.bc.is-sel .atag > i { background: #fff; }
.bc.is-sel .bc-foot { border-top-color: rgb(255 255 255 / .28); }
.bc.is-sel .bc-btn { background: #fff; box-shadow: none; color: #5b3fd9; }
.bc-cp { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 10px; background: #eff6ff; box-shadow: inset 0 0 0 1px #bfdbfe; font-size: 10.5px; color: #1e3a8a; }
.bc-cp .ic { flex: none; color: #1d7fd6; }
.bc-cp b { font-weight: 600; }
.bc-cp em { margin-left: auto; font-style: normal; color: #3b5b9e; }
@media (max-width: 760px) {
  .board2 { --cols: 2 !important; }
  .board2 > .bl:nth-child(n+3) { display: none; }
}
@media (max-width: 620px) {
  .board2 { --cols: 1 !important; }
  .board2 > .bl-wait { display: none; }
  .board2 > .bl:nth-child(2) { display: flex; }
}
.j-plan { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px; border-radius: 8px; background: var(--grad-brand); color: #fff; font: 600 11.5px/1 var(--font); box-shadow: 0 6px 14px -8px rgb(236 72 153 / .7); white-space: nowrap; }
.bc-list { gap: 8px; }
.bc-list .ui-meta { margin-bottom: 2px; }
.app-page-dim .j-board { pointer-events: none; }

/* ---------------- Brokering: who is hauling it ---------------- */
.pk-steps { display: inline-flex; gap: 3px; margin-left: 6px; }
.pk-steps > span { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px; border-radius: 999px; background: #f1f2f6; font: 600 10.5px/1 var(--font); color: #7d818c; white-space: nowrap; }
.pk-steps > .done { background: #ecfdf3; color: #15803d; }
.pk-steps > .done .ic { stroke-width: 2.6; }
.pk-steps > .now { background: #18181c; color: #fff; }
.pk-job { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui); }
.pk-job > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-job b { font: 600 14px/1.2 var(--font); }
.pk-job > div > span { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.pk-size { flex: none; font: 500 11.5px/1 var(--font) !important; color: #4b4f58 !important; }
.pk-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; margin-top: 12px; align-items: start; }
.pk-left { min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui), var(--shadow-card); }
.pk-q { font: 700 14px/1.2 var(--font); }
.pk-label { margin: 4px 0 -2px; font: 600 10px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pk-own, .pk-h { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui); }
.pk-own > div, .pk-h > div:not(.pk-rate) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-own b, .pk-h b { font: 600 12.5px/1.2 var(--font); }
.pk-own > div > span, .pk-h > div > span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-own { background: #fef8f8; box-shadow: inset 0 0 0 1px #fde0e0; }
.pk-h.is-on { background: #fcfbff; box-shadow: inset 0 0 0 1.5px #a78bfa, 0 10px 22px -14px rgb(91 63 217 / .5); }
.pk-h.is-off { opacity: .55; }
.pk-rate { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.pk-rate b { font: 700 13px/1 var(--font); }
.pk-rate small { font-size: 10px; color: var(--muted); }
.pk-check { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #7c5cff; color: #fff; }
.pk-check .ic { stroke-width: 2.8; }
.pk-find { display: flex; align-items: center; justify-content: center; gap: 6px; height: 34px; margin-top: 2px; border-radius: 10px; border: 1.5px dashed #c9bcfb; font: 600 11.5px/1 var(--font); color: #5b3fd9; }
.pk-right { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.pk-money { display: flex; flex-direction: column; padding: 4px 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui), var(--shadow-card); }
.pk-money > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 0; }
.pk-money > div + div { box-shadow: 0 -1px 0 var(--divider); }
.pk-money span { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #4b4f58; }
.pk-money small { font-size: 10px; color: var(--muted); }
.pk-money b { font: 600 13px/1 var(--font); font-variant-numeric: tabular-nums; }
.pk-margin b { font: 800 18px/1 var(--font) !important; color: #15803d; }
.pk-margin b small { font-size: 11px; font-weight: 600; color: #15803d; }
.pk-sees { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: 12px; background: #f6f6fa; }
.pk-sees > div { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; line-height: 1.35; color: #3f434c; }
.pk-sees .ic { flex: none; margin-top: 1px; width: 16px; height: 16px; padding: 2.5px; border-radius: 50%; background: #dcfce7; color: #15803d; stroke-width: 2.6; }
.pk-sees .no .ic { background: #fee2e2; color: #b91c1c; }
.pk-sees b { font-weight: 600; }
.pk-go { display: flex; align-items: center; justify-content: center; gap: 7px; height: 40px; border-radius: 12px; background: var(--grad-brand); color: #fff; font: 600 13px/1 var(--font); box-shadow: 0 10px 22px -10px rgb(236 72 153 / .7); }
.pk-note { font-size: 10.5px; line-height: 1.35; color: var(--muted); text-align: center; }
@media (max-width: 1080px) { .pk-body { grid-template-columns: minmax(0, 1fr); } .pk-steps { display: none; } }
@media (min-width: 901px) { .hero-stage .pk { padding-right: clamp(200px, 20vw, 270px); } }
/* work link phone */
.wl-map { flex: none; position: relative; height: 96px; margin: 9px 12px 0; overflow: hidden; border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.wl-map .gmap { position: absolute; inset: 0; }
.wl-map-tag { position: absolute; left: 7px; bottom: 7px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .2); font: 600 9.5px/1 var(--font); color: #3c3c43; }
.wl-confirm { flex: none; display: flex; flex-direction: column; gap: 4px; margin: 10px 12px 0; padding: 11px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #e8e9ef, 0 8px 18px -12px rgb(20 20 40 / .3); }
.wl-confirm > b { font: 700 12.5px/1.2 var(--font); }
.wl-confirm > span:not(.d-btn) { font-size: 10.5px; color: #6b6f7a; }
.wl-confirm .d-btn { margin-top: 6px; }
/* cross-sell */
.sm { gap: 12px; }
.sm-thread { display: flex; flex-direction: column; gap: 7px; }
.sm-h { display: flex; align-items: center; gap: 8px; }
.sm-h > div { display: flex; flex-direction: column; gap: 2px; }
.sm-h b { font: 600 12.5px/1.2 var(--font); }
.sm-h span { font-size: 10.5px; color: var(--muted); }
.sm-thread .bubble { max-width: 90%; font-size: 12.5px; }
.sm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sv { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sv-ph { position: relative; display: block; height: 96px; overflow: hidden; border-radius: 11px; box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.sv-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-ph i { position: absolute; left: 6px; top: 6px; padding: 3px 6px; border-radius: 999px; background: rgb(255 255 255 / .92); font: 700 9px/1 var(--font); font-style: normal; letter-spacing: .02em; color: #5b3fd9; }
.sv > b { font: 600 12px/1.2 var(--font); }
.sv > span { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-foot { display: flex; align-items: center; gap: 7px; margin-top: auto; padding: 9px 11px; border-radius: 11px; background: #ecfdf3; color: #14532d; font-size: 11.5px; }
.sm-foot > .ic { flex: none; color: #16a34a; }
.sm-foot b { font-weight: 700; }
@media (max-width: 620px) { .sm-grid { grid-template-columns: 1fr 1fr; } .sm-grid .sv:nth-child(3) { display: none; } }
/* hauler thread */
.ht { gap: 10px; }
.ht-h { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--divider); }
.ht-h > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ht-h b { font: 600 13px/1.2 var(--font); }
.ht-h span { font-size: 11px; color: var(--muted); }
.ht-body { display: flex; flex-direction: column; gap: 9px; }
.ht-day { align-self: center; font: 600 10px/1 var(--font); color: #9a9ea8; }
.ht-msg { display: flex; align-items: flex-end; gap: 7px; max-width: 86%; }
.ht-msg > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ht-msg small { font-size: 10px; color: #9a9ea8; }
.ht-msg.is-out { align-self: flex-end; flex-direction: column; align-items: flex-end; gap: 3px; }
.ht-bub { padding: 9px 12px; border-radius: 16px 16px 16px 5px; background: #f1f2f6; font-size: 12.5px; line-height: 1.42; color: var(--ink); }
.is-out .ht-bub { border-radius: 16px 16px 5px 16px; background: linear-gradient(135deg, #6d4dff 0%, #8b5cf6 100%); color: #fff; box-shadow: 0 8px 18px -10px rgb(91 63 217 / .6); }
.ht-line { display: block; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgb(255 255 255 / .25); font-size: 11.5px; opacity: .92; }
.ht-mail { display: flex; flex-direction: column; gap: 8px; width: min(340px, 100%); padding: 10px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui), var(--shadow-panel); }
.ht-mail-h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #4b4f58; }
.ht-mail-h .ic { flex: none; color: #b45309; }
.ht-mail-h b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-link { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 10px; background: #f6f6fa; }
.ht-link > span:not(.lt) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ht-link b { font: 600 12px/1.2 var(--font); }
.ht-link small { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ht-link > .ic { flex: none; color: #5b3fd9; }
.ht-event { align-self: center; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: #ecfdf3; color: #15803d; font: 600 10.5px/1 var(--font); }
.ht-event .ic { stroke-width: 2.6; }
.ht-event.is-done { background: #eff6ff; color: #1d4ed8; }
.ht-compose { display: flex; align-items: center; gap: 8px; height: 38px; margin-top: auto; padding: 0 5px 0 13px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); font-size: 12px; color: #9a9ea8; }
.ht-compose span { flex: 1; }
.ht-compose i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-brand); color: #fff; }
/* invoice document, read by AI */
.idoc { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px #ececf1, 0 16px 30px -18px rgb(20 20 40 / .35); font-size: 11px; color: #3f434c; }
.idoc-h { display: flex; align-items: flex-start; gap: 9px; }
.idoc-logo { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: #1e3a5f; color: #fff; font: 800 11px/1 var(--font); letter-spacing: -.02em; }
.idoc-h > div:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.idoc-h b { font: 700 12px/1.2 var(--font); color: var(--ink); }
.idoc small { font-size: 9.5px; color: #8a8e98; }
.idoc-no { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.idoc-no small:first-child { text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.idoc-to { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid #f0f1f4; border-bottom: 1px solid #f0f1f4; }
.idoc-to > div { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.idoc-to b { font: 600 11.5px/1.2 var(--font); color: var(--ink); }
.idoc-t { display: flex; flex-direction: column; }
.idoc-r { display: grid; grid-template-columns: minmax(0, 1fr) 44px 64px; gap: 6px; align-items: center; padding: 6px 0; }
.idoc-r + .idoc-r { box-shadow: 0 -1px 0 #f4f5f7; }
.idoc-r > span:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }
.idoc-hd { font: 600 9.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #8a8e98; }
.idoc-tot { display: flex; align-items: center; justify-content: space-between; padding-top: 4px; font: 600 11.5px/1 var(--font); color: var(--ink); }
.idoc-tot b { font: 800 15px/1 var(--font); }
.idoc .ai { position: relative; justify-self: end; padding: 1px 4px; margin: -1px -4px; border-radius: 4px; box-shadow: 0 0 0 1.5px #a78bfa; background: rgb(167 139 250 / .12); }
.idoc.is-compact { padding: 12px; }
.ir { gap: 10px; }
.ir-h { display: flex; align-items: center; gap: 9px; }
.ir-h > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ir-h b { font: 600 13px/1.2 var(--font); }
.ir-h span { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ir-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; padding-top: 12px; }
.ir-side { display: flex; flex-direction: column; gap: 2px; }
.ir-match { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding: 8px 10px; border-radius: 10px; background: #f5f3ff; font-size: 11.5px; color: #3b2f6b; }
.ir-match .ic { flex: none; color: #7c5cff; }
.ir-match b { font-weight: 600; }
.ir-side .kv { padding: 7px 0; }
.ir-flag { font-style: normal; margin-left: 4px; padding: 2px 5px; border-radius: 5px; background: #fffbeb; color: #b45309; font-size: 10.5px; font-weight: 700; }
.ir-margin { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 9px 10px; border-radius: 10px; background: #ecfdf3; font-size: 11.5px; color: #14532d; }
.ir-margin b { font: 700 13px/1 var(--font); color: #15803d; }
.ir-btns { display: grid; grid-template-columns: 1fr 1.8fr; gap: 8px; margin-top: 10px; }
.ir-btns .ubtn { height: 36px; }
@media (max-width: 760px) { .ir-body { grid-template-columns: 1fr; } }
/* reconcile */
.qa { gap: 8px; }
.qa-r { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.qa-r + .qa-r { box-shadow: 0 -1px 0 var(--divider); }
.qa-r > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qa-r b { display: flex; align-items: center; gap: 6px; font: 600 12.5px/1.2 var(--font); }
.qa-id { font: 500 10.5px/1 var(--mono); color: var(--muted); }
.qa-r > div > span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-r .chip { flex: none; }
.qa-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 11px; color: var(--muted); }
/* network */
.hn { gap: 6px; }
.hn-r { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.hn-r + .hn-r { box-shadow: 0 -1px 0 var(--divider); }
.hn-r > div:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hn-r b { font: 600 12.5px/1.2 var(--font); }
.hn-r span { font-size: 11px; color: #4b4f58; }
.hn-r small { display: flex; align-items: center; gap: 3px; font-size: 10.5px; color: var(--muted); }
.hn-s { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.hn-s b { font: 600 12px/1 var(--font); }
.hn-s small { font-size: 10.5px; color: #15803d; font-weight: 600; }
.hn-s .chip { margin-top: 2px; height: 18px; font-size: 9.5px; }
.hn-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.hn-find { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--border); font: 600 11.5px/1 var(--font); color: #5b3fd9; }
/* photo band overlay: what saying yes paid */
.bm { display: flex; flex-direction: column; gap: 11px; padding: 15px; border-radius: 16px; background: rgb(255 255 255 / .95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); box-shadow: 0 24px 50px -20px rgb(0 0 0 / .6); }
.bm-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.bm-h > div { display: flex; flex-direction: column; gap: 4px; }
.bm-h small { font: 600 10.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #7c5cff; }
.bm-h b { font: 700 15px/1.2 var(--font); }
.bm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.bm-grid > div { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; background: #f4f4f8; }
.bm-grid small { font-size: 10px; color: var(--muted); }
.bm-grid b { font: 700 15px/1 var(--font); }
.bm-grid em { font-style: normal; font: 600 10.5px/1 var(--font); color: #15803d; }
.bm-m { background: #ecfdf3 !important; }
.bm-m b { color: #15803d; }
.bm-rows { display: flex; flex-direction: column; }
.bm-rows > div { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; }
.bm-rows > div + div { box-shadow: 0 -1px 0 #f0f1f4; }
.bm-rows > div > span:not(.lt) { flex: 1; color: #3f434c; }
.bm-rows b { font-weight: 600; color: #15803d; }
.bm-foot { font-size: 10.5px; color: var(--muted); }
/* every reason you've said no */
.rs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: clamp(28px, 3.5vw, 44px); }
.rs { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui), var(--shadow-card); }
.rs-top { display: flex; align-items: center; gap: 10px; }
.rs-top b { font: 650 16px/1.2 var(--font); letter-spacing: -.01em; }
.rs p { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.4; }
.rs p .ic { flex: none; margin-top: 2px; width: 18px; height: 18px; padding: 3px; border-radius: 50%; stroke-width: 2.8; }
.rs-no { color: #8a8e98; }
.rs-no s { text-decoration-color: rgb(220 38 38 / .55); text-decoration-thickness: 1.5px; }
.rs-no .ic { background: #fee2e2; color: #b91c1c; }
.rs-yes { color: var(--ink); font-weight: 600; }
.rs-yes .ic { background: #dcfce7; color: #15803d; }
.rs-how { display: flex; align-items: center; gap: 7px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--divider); font-size: 12.5px; color: var(--muted); }
@media (max-width: 1080px) { .rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .rs-grid { grid-template-columns: 1fr; } }
.iqq { gap: 6px; }
.iqq-r { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; }
.iqq-r.is-on { background: #fcfbff; box-shadow: inset 0 0 0 1.5px #c9bcfb; }
.iqq-r > div:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.iqq-r b { font: 600 12.5px/1.2 var(--font); }
.iqq-r span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iqq-a { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.iqq-a b { font-variant-numeric: tabular-nums; }
.iqq-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.iqq-foot .ubtn { height: 32px; }
.ai-inv-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ai-inv-side { display: flex; flex-direction: column; gap: 2px; }
.ai-inv-side .kv { padding: 7px 0; }
.ai-inv-side .j-actions { margin-top: 10px; grid-template-columns: 1fr 1.3fr; }
@media (max-width: 760px) { .ai-inv-body { grid-template-columns: 1fr; } }

.idoc-legend { display: flex; align-items: center; gap: 6px; margin-top: -2px; font: 500 10px/1 var(--font); color: #7c6bb8; }
.idoc-legend i { width: 14px; height: 10px; border-radius: 3px; box-shadow: 0 0 0 1.5px #a78bfa; background: rgb(167 139 250 / .12); }
/* brokering hero: show the whole window, no fade */
@media (min-width: 901px) { .shot-fade:has(.pk) { -webkit-mask-image: none; mask-image: none; max-height: none; } }
.pk-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pk-find-link { display: inline-flex; align-items: center; gap: 4px; font: 600 10.5px/1 var(--font); letter-spacing: 0; text-transform: none; color: #5b3fd9; }
.xc-row > div > span { display: flex; align-items: center; gap: 4px; }
.xc-note { align-items: flex-start; background: #f6f6fa; box-shadow: none; }
.xc-note > div > span { display: block; font-style: italic; line-height: 1.4; color: #3f434c; }
.oc-rep > .it { flex: none; }
.oc-rep em { display: flex; align-items: center; gap: 4px; }
.wl-bill { flex: none; display: flex; flex-direction: column; gap: 7px; margin: 10px 12px 0; padding: 11px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #e8e9ef, 0 8px 18px -12px rgb(20 20 40 / .3); }
.wl-bill > b { font: 700 12.5px/1.2 var(--font); }
.wl-bill > span { font-size: 10.5px; line-height: 1.4; color: #6b6f7a; }
.w-fields-2 { grid-template-columns: 1fr 1fr; margin: 2px 0 0; }
.wl-file { display: flex; align-items: center; gap: 7px; padding: 8px 9px; border-radius: 10px; background: #f6f6f9; box-shadow: inset 0 0 0 1px #e6e7ec; font-size: 11px; }
.wl-file .ic { flex: none; color: #b91c1c; }
.wl-file span { flex: 1; font-weight: 600; }
.wl-file em { font-style: normal; color: #8a8e98; font-size: 10px; }
.wl-check { display: flex; align-items: center; gap: 7px; font-size: 10.5px; color: var(--ink); }
.wl-check .ic { flex: none; width: 16px; height: 16px; padding: 2px; border-radius: 4px; background: #18181c; color: #fff; stroke-width: 3; }
/* portal: on site + requests */
.po { gap: 9px; }
.po-h b { font: 700 13px/1 var(--font); }
.po-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.po-a { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui); }
.po-a-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.po-a-h > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.po-a-h b { font: 700 13px/1.2 var(--font); }
.po-a-h span:not(.po-on) { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.po-on { flex: none; padding: 4px 7px; border-radius: 999px; background: #ecfdf3; color: #15803d; font: 800 9px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.po-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.po-i { display: flex; flex-direction: column; gap: 2px; }
.po-i small { font-size: 9.5px; color: var(--muted); }
.po-i b { font: 600 11.5px/1.2 var(--font); }
.po-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.po-btns .abtn { height: 32px; padding: 0 6px; font-size: 11px; }
.po-req { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.po-req + .po-req { box-shadow: 0 -1px 0 var(--divider); }
.po-req > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.po-req b { display: flex; align-items: center; gap: 6px; font: 600 12px/1 var(--font); }
.po-req span { font-size: 11px; color: var(--muted); }
@media (max-width: 760px) { .po-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .pk-job .atag, .pk-size, .pk-own .chip, .pk-rate small, .pk-check { display: none; }
  .pk-job > div > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pk-job > div > span .ic { display: none; }
  .pk-find-link { display: none; }
}
/* tour: Today */
.hm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.hm-k { display: flex; flex-direction: column; gap: 5px; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui), var(--shadow-card); }
.hm-k small { font-size: 11px; color: var(--muted); }
.hm-k b { font: 700 22px/1 var(--font); letter-spacing: -.02em; }
.hm-k span { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--muted); }
.hm-k span.up { color: #15803d; font-weight: 600; }
.hm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
.hm-col { gap: 4px; }
.hm-t, .hm-a, .hm-b { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.hm-t + .hm-t, .hm-a + .hm-a { box-shadow: 0 -1px 0 var(--divider); }
.hm-t > div:nth-child(2), .hm-a > div, .hm-b > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-t b, .hm-a b, .hm-b b { font: 600 12.5px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-t span, .hm-a > div > span, .hm-b > div > span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-t-p { flex: none; width: 74px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hm-t-p em { font: 600 11px/1 var(--font); font-style: normal; }
.hm-t-p i { display: block; width: 100%; height: 5px; overflow: hidden; border-radius: 999px; background: #eef0f4; }
.hm-t-p s { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); }
.hm-b { margin-top: 6px; padding: 10px; border-radius: 12px; background: #faf8ff; box-shadow: inset 0 0 0 1px #e9e0ff; }
.hm-a .chip, .hm-b .chip { flex: none; }
@media (max-width: 900px) { .hm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------------- Office screens (tour + module heroes) ---------------- */
.sc .jobs-head .head-end { gap: 8px; align-items: center; }
.sc-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 12px; margin-top: 12px; align-items: start; }
.sc-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sc-card { gap: 4px; }
.sc-sum { font: 700 15px/1 var(--font); color: #15803d; }
.sc-li { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.sc-li + .sc-li { box-shadow: 0 -1px 0 var(--divider); }
.sc-li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-li b { font: 600 12px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-li span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-li > .chip, .sc-li > b.tb-green { flex: none; }
.sc-note { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: var(--muted); }
.tb { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui), var(--shadow-card); }
.tb-r { display: grid; grid-template-columns: var(--cols); align-items: center; gap: 10px; padding: 10px 14px; font-size: 12px; min-width: 0; }
.tb-r + .tb-r { box-shadow: 0 -1px 0 var(--divider); }
.tb-h { padding-top: 9px; padding-bottom: 9px; background: #fafafc; font: 600 10px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tb-r > * { min-width: 0; }
.ta-r { text-align: right; justify-self: end; }
.tb-id { font: 500 11px/1 var(--mono); color: #4b4f58; white-space: nowrap; }
.tb-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tb-who > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-who b { font: 600 12.5px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-who small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-m { font-size: 11.5px; color: #4b4f58; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-last { display: flex; align-items: center; gap: 6px; }
.tb-last .atag { height: 18px; padding: 0 5px; font-size: 10px; }
.tb-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; justify-self: end; text-align: right; }
.tb-amt b { font: 600 12.5px/1 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-amt .chip { height: 18px; font-size: 10px; }
.tb-green { color: #15803d; font-weight: 600; font-size: 10.5px; }
b.tb-green { font-size: 12.5px; }
.tb-st { display: flex; }
.tb-st .chip { height: 20px; font-size: 10.5px; }
.tb-where { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-where b { font: 600 12px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-where small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-rent { display: flex; flex-direction: column; gap: 4px; }
.tb-rent small { font-size: 10.5px; color: #4b4f58; white-space: nowrap; }
.tb-bar { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: #eef0f4; }
.tb-bar s { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); }
.tb-bar.is-warn s { background: #f59e0b; }
.tb-bar.is-bad s { background: #dc2626; }
.tb-tk { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tb-tk > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-tk b { font: 600 12px/1 var(--mono); }
.tb-tk small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* detail card beside a list */
.cd { gap: 10px; }
.cd-h { display: flex; align-items: center; gap: 11px; }
.cd-h > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cd-h b { font: 700 15px/1.2 var(--font); letter-spacing: -.01em; }
.cd-h span { font-size: 11.5px; color: var(--muted); }
.cd-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cd-sec { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--divider); }
.cd-sec > small { font: 600 10px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cd-li { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.cd-li > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cd-li b { font: 600 12px/1.2 var(--font); }
.cd-li span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-li > .ic { flex: none; color: #5b3fd9; }
.cd-rate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 3px; }
.cd-rate span, .cd-rates span, .cd-grid span { display: flex; flex-direction: column; gap: 3px; padding: 7px 9px; border-radius: 9px; background: #f6f6fa; font-size: 10.5px; color: var(--muted); }
.cd-rate b, .cd-rates b, .cd-grid b { font: 700 13px/1 var(--font); color: var(--ink); }
.cd-rates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 3px; }
.cd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 3px; }
.cd-note { font-size: 11px; color: var(--muted); }
.cd-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--divider); }
.cd-foot span { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--muted); }
.cd-foot b { font: 700 14px/1 var(--font); color: var(--ink); }
/* fleet: truck cards */
.tk2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.tk2 { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui), var(--shadow-card); min-width: 0; }
.tk2-h { display: flex; align-items: center; gap: 9px; }
.tk2-h > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tk2-h b { font: 700 13.5px/1.1 var(--font); }
.tk2-h span { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk2-h .chip { flex: none; }
.tk2-d { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 7px; row-gap: 2px; padding: 8px 9px; border-radius: 10px; background: #f6f6fa; min-width: 0; }
.tk2-d b { font: 600 12px/1.2 var(--font); }
.tk2-d > span { grid-column: 1 / -1; font-size: 11px; color: #4b4f58; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk2-s { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: #4b4f58; }
.tk2-f { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 10.5px; color: var(--muted); }
.tk2-f > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tk2-f em { font-style: normal; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.tk2-ok { color: #15803d; font-weight: 600; }
.tk2-bad { color: #b91c1c; font-weight: 600; }
/* reports: margin bars */
.rb { display: grid; grid-template-columns: 138px minmax(0, 1fr) 110px; align-items: center; gap: 12px; padding: 9px 0; }
.rb + .rb { box-shadow: 0 -1px 0 var(--divider); }
.rb-n { font: 600 12px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-bar { display: block; height: 10px; overflow: hidden; border-radius: 999px; background: #f1f2f6; }
.rb-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); }
.rb-v { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rb-v b { font: 700 13px/1 var(--font); color: #15803d; }
.rb-v small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
@media (max-width: 1080px) { .sc-grid { grid-template-columns: minmax(0, 1fr); } .tk2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .sc .jobs-head .head-end { display: none; }
  .tb-r { gap: 8px; padding: 9px 10px; }
  .tb .tb-r > :nth-child(n+4):not(:last-child) { display: none; }
  .tb { --cols: minmax(0, 1fr) auto auto !important; }
  .tk2-grid { grid-template-columns: minmax(0, 1fr); }
  .tk2-grid .tk2:nth-child(n+4) { display: none; }
  .rb { grid-template-columns: 110px minmax(0, 1fr) 84px; }
}
/* rental clock + customer charges */
.rc { gap: 10px; }
.rc-t { display: flex; flex-direction: column; gap: 2px; }
.rc-t b { font: 600 12.5px/1.2 var(--mono); }
.rc-t small { font-size: 10.5px; color: var(--muted); }
.rc-big { font: 800 30px/1 var(--font); letter-spacing: -.03em; }
.rc-big span { font-size: 16px; font-weight: 600; color: var(--muted); }
.rc-bar { display: flex; height: 8px; overflow: hidden; border-radius: 999px; background: #eef0f4; }
.rc-bar i { display: block; background: var(--grad-brand); }
.rc-bar s { display: block; background: #dc2626; }
.rc-legend { display: flex; justify-content: space-between; margin-top: -4px; font-size: 10px; color: var(--muted); }
.rc-legend .bad { color: #b91c1c; font-weight: 700; }
.oq { gap: 6px; }
.oq-r { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.oq-r + .oq-r { box-shadow: 0 -1px 0 var(--divider); }
.oq-r > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oq-r b { font: 600 12.5px/1.2 var(--font); }
.oq-r span:not(.ubtn) { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oq-b { flex: none; height: 30px; padding: 0 12px; font-size: 11.5px; }
.oq-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 11px; color: var(--muted); }
.j-fleet.is-tall .j-fleet-map { height: 400px; }
/* office tables at phone width: two or three columns each */
@media (max-width: 760px) {
  .tb { --cols: minmax(0, 1fr) auto !important; }
  .tb .tb-r > :nth-child(n+4):not(:last-child) { display: revert; }
  .tb-bill .tb-r > :nth-child(1), .tb-bill .tb-r > :nth-child(3) { display: none !important; }
  .tb-cust .tb-r > :nth-child(2), .tb-cust .tb-r > :nth-child(4) { display: none !important; }
  .tb-haul .tb-r > :nth-child(2), .tb-haul .tb-r > :nth-child(3) { display: none !important; }
  .tb-inv { --cols: 58px auto minmax(0, 1fr) !important; }
  .tb-inv .tb-r > :nth-child(2), .tb-inv .tb-r > :nth-child(5) { display: none !important; }
  .tb-tick { --cols: minmax(0, 1fr) auto auto !important; }
  .tb-tick .tb-r > :nth-child(2), .tb-tick .tb-r > :nth-child(3), .tb-tick .tb-r > :nth-child(5) { display: none !important; }
}
@media (max-width: 620px) { .sc .jobs-head .seg > span:nth-child(n+4) { display: none; } }

/* ---------------- Identity cards with a real photo (brand gradient kept as tint + accent bar) ---------------- */
.for-cover.has-photo { height: 148px; background: #26262e var(--photo) center / cover no-repeat; }
.for-cover.has-photo::before { content: ""; position: absolute; inset: 0; background: var(--cover); opacity: .16; mix-blend-mode: color; }
.for-cover.has-photo::after { background: var(--cover) left bottom / 100% 4px no-repeat, linear-gradient(180deg, rgb(19 19 23 / 0) 45%, rgb(19 19 23 / .55) 100%); }
.for-card.has-photo:hover .for-cover.has-photo::before { opacity: .06; }
.for-cover.has-photo { transition: filter .25s ease; }
.for-card.has-photo:hover .for-cover.has-photo { filter: saturate(1.08) brightness(1.04); }
.for-medal .ic { width: 20px; height: 20px; }
.for-list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.for-list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; color: #d6d6de; }
.for-list .ic { flex: none; margin-top: 2px; width: 16px; height: 16px; padding: 2.5px; border-radius: 50%; background: rgb(124 92 255 / .24); color: #c4b5fd; stroke-width: 2.6; }
/* a soft brand-gradient band to set a section apart without empty space */
.band-soft { position: relative; margin-top: clamp(40px, 5vw, 64px); padding: clamp(52px, 6vw, 80px) 0; background: linear-gradient(135deg, #f3efff 0%, #fdf0f7 55%, #fff4ea 100%); box-shadow: inset 0 1px 0 #ece6fb, inset 0 -1px 0 #f5e6ee; }
.band-soft + .section { padding-top: clamp(52px, 6vw, 80px); }
.band-soft .rs { box-shadow: 0 1px 2px rgb(20 20 40 / .05), 0 12px 28px -18px rgb(91 63 217 / .35); }

/* ---------------- Sent messages: one vibrant purple everywhere (the hauler-line style) ---------------- */
:root { --msg-out: linear-gradient(135deg, #6d4dff 0%, #8b5cf6 100%); --msg-out-shadow: 0 8px 18px -10px rgb(91 63 217 / .6); }
.bubble-out, .bubble-ai, .d-msg.is-me p, .op-q, .sms-out, .is-out .ht-bub { background: var(--msg-out); color: #fff; box-shadow: var(--msg-out-shadow); }
.bubble-out b, .bubble-ai b, .bubble-out a, .bubble-ai a { color: inherit; }
.composer .send { background: var(--msg-out); }

/* ---------------- Photo tiles: copy on the right, float panels ---------------- */
/* is-right: the photo's subject sits on the left, so the copy and its shade move right */
.bento-card.is-photo.is-right { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.bento-card.is-photo.is-right .bento-copy { grid-column: 2; }
.bento-card.is-photo.is-right::before { background: linear-gradient(270deg, rgb(10 10 14 / .86) 0%, rgb(10 10 14 / .62) 38%, rgb(10 10 14 / .08) 70%), linear-gradient(0deg, rgb(10 10 14 / .5), transparent 50%); }
.bento-card.is-photo .sees { margin-top: 18px; background: rgb(10 10 14 / .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 900px) {
  .bento-card.is-photo.is-right { grid-template-columns: minmax(0, 1fr); }
  .bento-card.is-photo.is-right .bento-copy { grid-column: 1; }
  .bento-card.is-photo.is-right::before { background: linear-gradient(180deg, rgb(10 10 14 / .35), rgb(10 10 14 / .7) 45%, rgb(10 10 14 / .88)); }
}
/* float panel rows (ticketsToday, fleetNow, yardNow) */
.tk.fl { gap: 8px; }
.fl-rows { display: flex; flex-direction: column; }
.fl-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid #eceef2; }
.fl-r:first-child { border-top: 0; padding-top: 2px; }
.fl-r > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fl-r > div > b { font: 600 13px/1.25 var(--font); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-r > div > span { font-size: 11.5px; line-height: 1.3; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-r > em { font: 700 13px/1 var(--font); font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
.fl-r > em.fl-credit { color: #15803d; }
.fl-id { min-width: 58px; text-align: center; padding: 5px 7px; border-radius: 7px; background: #eef2ff; color: #4338ca; font: 700 11px/1 var(--font); font-variant-numeric: tabular-nums; }
.tk-line.is-warn .ic { background: #fef3c7; color: #b45309; }

/* soft variant of the identity-card band: dark photo cards on the brand's pale gradient */
.band-for-soft { background: linear-gradient(135deg, #f3efff 0%, #fdf0f7 55%, #fff4ea 100%); color: var(--ink); box-shadow: inset 0 1px 0 #ece6fb, inset 0 -1px 0 #f5e6ee; }
.band-for + .band-for-soft { margin-top: 0; }
.band-for-soft::before { display: none; }
.band-for-soft h2 { color: var(--ink); }
.band-for-soft .section-lede { color: var(--body); }
.band-for-soft .eyebrow-amber { color: #6d4dff; }
.band-for-soft .for-card { box-shadow: 0 24px 46px -28px rgb(40 24 90 / .6); }
.band-for-soft :focus-visible { outline-color: #6d4dff; }
@media (max-width: 900px) {
  .bento-card.is-photo.is-right::before { background: linear-gradient(180deg, rgb(10 10 14 / .72), rgb(10 10 14 / .8) 45%, rgb(10 10 14 / .9)); }
}
@media (max-width: 620px) {
  .fl-r > div > b, .fl-r > div > span { white-space: normal; }
  .fl-r { align-items: start; }
  .fl-r > em, .fl-r > .chip { margin-top: 2px; }
}


/* photo covers: taller when a band has three cards or fewer, so the subject fits */
.for-cover.has-photo { height: var(--cover-h, 148px); }
/* is-right photo tile with a side panel: copy and panel stack in the right column */
.bento-card.is-photo.is-right { grid-template-rows: auto auto; align-content: end; row-gap: 22px; }
.bento-card.is-photo.is-right .bento-copy { grid-column: 2; grid-row: 1; }
.bento-card.is-photo.is-right .bento-side { grid-column: 2; grid-row: 2; }
@media (max-width: 900px) {
  .bento-card.is-photo.is-right .bento-copy, .bento-card.is-photo.is-right .bento-side { grid-column: 1; }
  .bento-card.is-photo.is-right .bento-side { grid-row: 2; }
}

/* ---------------- Split photo tile: photo column + dark content column ---------------- */
.bento-card.is-split { grid-row: span 2; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: none; padding: 0; overflow: hidden; background: #141418; color: #fff; border: 0; min-height: clamp(440px, 38vw, 540px); }
.is-split .bento-photo { background: #1b1b1f center / cover no-repeat; min-height: 100%; }
.is-split .bento-main { display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: var(--pad) calc(var(--pad) + 8px); }
.is-split h3 { color: #fff; }
.is-split .bento-copy p { color: rgb(255 255 255 / .74); }
.is-split p.eyebrow { color: #c4b5fd; }
@media (max-width: 900px) {
  .bento-card.is-split { grid-template-columns: minmax(0, 1fr); }
  .is-split .bento-photo { min-height: 280px; }
}


/* Keep the "Google" mark visible above sheets and cards that overlap a map's bottom-left */
.lv-track .gmap-logo { bottom: 32px; }
.c-map .gmap-logo { bottom: 24px; }
.lvd-toast { bottom: 30px; }
.route-map .map-callout { bottom: 26px; }
.wl-map-tag { top: 7px; bottom: auto; }

/* ---------------- Responsive maps: a steady shape, and a closer framing when narrow ----------------
   A fixed height with a changing width re-crops the map at every screen size; these keep the framing. */
.gmap > .gm-narrow { display: none; }
.j-fleet { container: fleet / inline-size; }
.j-fleet-map { height: auto; aspect-ratio: 530 / 222; }
.j-fleet.is-tall .j-fleet-map { height: auto; aspect-ratio: 560 / 320; }
@container fleet (max-width: 479px) {
  .j-fleet-map { aspect-ratio: 400 / 290; }
  .j-fleet.is-tall .j-fleet-map { aspect-ratio: 400 / 380; }
  .gmap.has-narrow > .gm-wide { display: none; }
  .gmap.has-narrow > .gm-narrow { display: block; }
}
/* Live-updates dispatch screen: when squeezed between the two phones, show the map (with its toast)
   and drop the truck list rather than truncate every name */
.lvd:not(.j-fleet) { container: lvd / inline-size; }
@container lvd (max-width: 619px) {
  .lvd-body { grid-template-columns: minmax(0, 1fr); }
  .lvd-list { display: none; }
}

/* ---------------- Placement loop (lib/placement.mjs) ----------------
   10 s: the address pin lands on the porch, the cursor takes the 20 yd from the tray and drops it,
   life-size, on the driveway, then Save and the confirmation. Base styles are the finished frame,
   so reduced motion (and no animation support) shows the result. */
.pl { gap: 10px; container: pl / inline-size; }
.pl-map { position: relative; aspect-ratio: 1200 / 774; overflow: hidden; border-radius: 12px; background: #9aa39a; }
.pl-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pl-toggle, .pl-zoom { filter: drop-shadow(0 1px 3px rgb(0 0 0 / .3)); }
.pl-panel { filter: drop-shadow(0 6px 14px rgb(0 0 0 / .22)); }
.pl-foot-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 11.5px; color: var(--muted); }
.pl-foot-row span { display: inline-flex; align-items: center; gap: 5px; }
.pl-foot-row em { margin-left: auto; font: 500 11px/1 var(--mono); font-style: normal; color: #8a8e98; }

.pl-can { transform: translate(520px, 560px); }
.pl-zone { transform: translate(520px, 560px); }
.pl-canshadow, .pl-ring { transform-box: fill-box; transform-origin: center; }
.pl-ring { opacity: 0; }
.pl-canlift { filter: drop-shadow(0 8px 10px rgb(40 24 90 / .35)); }
.pl-pin { transform: translate(835px, 345px); }
.pl-drop { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; }
.pl-shadow { opacity: 0; }
.pl-tag, .pl-toast, .pl-btn { transform-box: fill-box; transform-origin: center; }
.pl-cursor { opacity: 0; transform: translate(1034px, 705px); }
.pl-addr { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .pl-can { animation: pl-can 10s cubic-bezier(.45, .05, .35, 1) infinite; }
  .pl-canlift { animation: pl-canlift 10s ease-in-out infinite; }
  .pl-canshadow { animation: pl-canshadow 10s cubic-bezier(.2, .9, .3, 1.2) infinite; }
  .pl-ring { animation: pl-ring 10s ease-out infinite; }
  .pl-drop { animation: pl-drop 10s ease-out infinite; }
  .pl-shadow { animation: pl-pinshadow 10s ease-out infinite; }
  .pl-addr { animation: pl-addr 10s ease infinite; }
  .pl-tag { animation: pl-tag 10s cubic-bezier(.2, .9, .3, 1.3) infinite; }
  .pl-cursor { animation: pl-cursor 10s cubic-bezier(.45, .05, .35, 1) infinite; }
  .pl-btn { animation: pl-btn 10s ease infinite; }
  .pl-toast { animation: pl-toast 10s cubic-bezier(.2, .9, .3, 1.2) infinite; }
}
@keyframes pl-can {
  0% { opacity: 0; transform: translate(120px, 732px) scale(.42); }
  3%, 16% { opacity: 1; transform: translate(120px, 732px) scale(.42); }
  18% { transform: translate(120px, 724px) scale(.55); }
  30% { transform: translate(330px, 640px) scale(.85); }
  42%, 94% { opacity: 1; transform: translate(520px, 560px) scale(1); }
  98%, 100% { opacity: 0; transform: translate(520px, 560px) scale(1); }
}
@keyframes pl-canlift {
  0%, 16% { transform: translateY(0); }
  19%, 41% { transform: translateY(-20px); }
  44% { transform: translateY(3px); }
  46%, 100% { transform: translateY(0); }
}
@keyframes pl-canshadow {
  0%, 43% { opacity: 0; transform: scale(.3); }
  48% { opacity: 1; transform: scale(1.06); }
  52%, 94% { opacity: 1; transform: scale(1); }
  98%, 100% { opacity: 0; transform: scale(1); }
}
@keyframes pl-ring {
  0%, 50% { opacity: 0; transform: scale(1); }
  51% { opacity: .9; transform: scale(1); }
  62% { opacity: 0; transform: scale(1.35); }
  63%, 75% { opacity: 0; transform: scale(1); }
  76% { opacity: .9; transform: scale(1); }
  87%, 100% { opacity: 0; transform: scale(1.35); }
}
@keyframes pl-drop {
  0% { transform: scale(0); opacity: 0; }
  3% { transform: scale(1.12); opacity: 1; }
  5%, 44% { transform: scale(1); opacity: 1; }
  50%, 100% { transform: scale(1); opacity: 0; }
}
@keyframes pl-pinshadow {
  0% { opacity: 0; } 4%, 44% { opacity: 1; } 50%, 100% { opacity: 0; }
}
@keyframes pl-addr {
  0%, 4% { opacity: 0; } 7%, 15% { opacity: 1; } 18%, 100% { opacity: 0; }
}
@keyframes pl-tag {
  0%, 46% { opacity: 0; transform: translateY(14px) scale(.6); }
  52%, 94% { opacity: 1; transform: translateY(0) scale(1); }
  98%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}
@keyframes pl-cursor {
  0%, 7% { opacity: 0; transform: translate(1260px, 820px); }
  9% { opacity: 1; transform: translate(1180px, 700px); }
  15%, 16% { opacity: 1; transform: translate(122px, 700px) scale(1); }
  17.5% { transform: translate(122px, 700px) scale(.88); }
  42% { transform: translate(524px, 500px) scale(.88); }
  45% { transform: translate(524px, 500px) scale(1); }
  58% { opacity: 1; transform: translate(720px, 610px); }
  67%, 69.5% { opacity: 1; transform: translate(1034px, 704px) scale(1); }
  70.5% { transform: translate(1034px, 704px) scale(.85); }
  72% { transform: translate(1034px, 704px) scale(1); }
  82% { opacity: 1; transform: translate(1034px, 704px); }
  86%, 100% { opacity: 0; transform: translate(1034px, 704px); }
}
@keyframes pl-btn {
  0%, 69.5% { transform: scale(1); filter: none; }
  70.5% { transform: scale(.95); filter: brightness(1.6); }
  72%, 100% { transform: scale(1); filter: none; }
}
@keyframes pl-toast {
  0%, 71% { opacity: 0; transform: translateY(-40px) scale(.96); }
  75%, 93% { opacity: 1; transform: translateY(0) scale(1); }
  97%, 100% { opacity: 0; transform: translateY(-20px) scale(.98); }
}
/* on a phone the map is ~250px wide: bigger in-map type, and the caption row carries the subtitle */
@container pl (max-width: 440px) {
  .pl-hint { font-size: 34px; transform: translateY(14px); }
  .pl-sub { display: none; }
  .pl-btntext { font-size: 31px; transform: translateY(3px); }
  .pl-tagtext { font-size: 28px; }
  .pl-toasttext { font-size: 25px; }
  .pl-addrtext { font-size: 27px; }
}

/* Brokered card: who can take it (replaces the map) */
.bk-pick { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px 12px 74px; border-left: 1px solid var(--divider); background: #fafafc; min-width: 0; }
.bk-pick-h { display: flex; align-items: center; gap: 6px; font: 600 11px/1.2 var(--font); color: var(--muted); margin-bottom: 2px; }
.bk-pick-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: #fff; box-shadow: var(--shadow-control); }
.bk-pick-r.is-on { box-shadow: 0 0 0 1.5px #86efac, var(--shadow-control); }
.bk-pick-r > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-pick-r b { font: 600 12px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-pick-r span { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-pick-r em { font: 600 10.5px/1 var(--font); font-style: normal; color: #8a8e98; white-space: nowrap; }
.bk-pick .map-callout { position: absolute; left: 12px; right: 12px; bottom: 12px; }
/* Live updates, driver phone: arrival card instead of a map */
.lv-arrive { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-panel), inset 0 0 0 1px rgb(0 0 0 / .04); }
.ps > .lv:not(.lv-cust) .lv-arrive { flex: 1; justify-content: center; }
.lv-arr-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.lv-arr-h > div, .lv-arr-call > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lv-arr-h b, .lv-arr-call b { font: 700 13px/1.2 var(--font); }
.lv-arr-h span, .lv-arr-call span { font-size: 11px; color: var(--muted); }
.lv-arr-note { display: flex; gap: 7px; align-items: flex-start; padding: 8px 9px; border-radius: 10px; background: #fffbeb; color: #7c5a12; font-size: 11.5px; line-height: 1.35; }
.lv-arr-note .ic { flex: none; margin-top: 1px; color: #b45309; }
.lv-arr-call { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid #f0f1f5; }
.lv-arr-call i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #ecfdf3; color: #15803d; font-style: normal; }

/* ---------------- Routing loop (lib/routing.mjs) ----------------
   The app's Map page at a fixed design width, zoomed to fit (script.js [data-fit]). 9 s: Plan the day →
   the four waiting jobs fly from Unassigned onto four trucks (dashed = proposed) and appear on the map →
   the plan bar → Apply → Applied. Base styles are the applied result (reduced motion, no animation). */
.rt { container: rt / inline-size; width: 100%; margin-block: auto; }
.rt-fit { width: 100%; overflow: hidden; border-radius: 18px; box-shadow: var(--shadow-panel), 0 30px 60px -40px rgb(40 24 90 / .35); }
.rt-phone { display: none; }
@container rt (max-width: 699px) { .rt-wide { display: none; } .rt-phone { display: block; } }
.rt-canvas { position: relative; background: #f6f6fa; font-family: var(--font); color: var(--ink); zoom: .6; }
@container rt (min-width: 800px) { .rt-wide .rt-canvas { zoom: .56; } }
@container rt (min-width: 1000px) { .rt-wide .rt-canvas { zoom: .66; } }
@container rt (min-width: 1200px) { .rt-wide .rt-canvas { zoom: .8; } }
.rt-canvas .ic { flex: none; }

.rt-head { position: absolute; left: 24px; right: 24px; top: 18px; height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.rt-head h4 { margin: 0; font: 700 28px/1 var(--font); letter-spacing: -.03em; }
.rt-head p { margin: 8px 0 0; font-size: 14px; color: var(--muted); }
.rt-tools { display: flex; align-items: center; gap: 10px; }
.rt-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: #eceef3; font-size: 13px; }
.rt-seg > * { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border-radius: 8px; color: var(--muted); font-weight: 500; }
.rt-seg > b { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--shadow-control); }
.rt-date { display: inline-flex; align-items: center; gap: 14px; height: 36px; padding: 0 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); font-size: 13px; color: var(--muted); }
.rt-date b { color: var(--ink); font-weight: 600; }
.rt-today { font-size: 13px; color: #b3b7c0; padding: 0 4px; }
.rt-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--border), var(--shadow-control); font: 600 13px/1 var(--font); }
.rt-plan { display: inline-flex; }
.rt-plan .rt-press { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 10px; background: var(--grad-brand); color: #fff; font: 600 13px/1 var(--font); box-shadow: 0 8px 18px -8px rgb(124 92 255 / .6); }

.rt-panel { position: absolute; left: 12px; right: 12px; top: 96px; background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px #e8e9ef; overflow: hidden; }
.rt-bar1 { position: absolute; left: 14px; top: 14px; width: 950px; display: flex; gap: 8px; align-items: center; }
.rt-views > * { height: 28px; padding: 0 12px; }
.rt-find { display: inline-flex; align-items: center; gap: 7px; height: 34px; width: 150px; padding: 0 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--border); font-size: 12.5px; color: #9aa0a8; }
.rt-ask { flex: 1; display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 6px; border-radius: 10px; background: #fafafc; box-shadow: inset 0 0 0 1px var(--border); font-size: 12.5px; color: #8a8e98; white-space: nowrap; overflow: hidden; }
.rt-ask > i { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--grad-brand); color: #fff; font-style: normal; }
.rt-ask em { margin-left: auto; padding-right: 8px; font-style: normal; color: #b3b7c0; }

.rt-tray { position: absolute; left: 0; top: 62px; width: 980px; height: 94px; border-top: 1px solid #eef0f4; border-bottom: 1px solid #eef0f4; background: linear-gradient(90deg, #fbfaff, #fff 60%); }
.rt-tray-h { position: absolute; left: 20px; top: 20px; width: 180px; display: flex; flex-direction: column; gap: 6px; }
.rt-tray-h b { display: flex; align-items: center; gap: 8px; font: 700 14px/1 var(--font); }
.rt-tray-h small { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.rt-traycount { display: inline-grid; place-items: center; min-width: 22px; height: 20px; border-radius: 10px; background: #fff5df; color: #a16207; font: 700 11.5px/1 var(--font); opacity: 0; }
.rt-nothing { position: absolute; left: 212px; top: 38px; font-size: 13px; color: #a3a7b0; }
.rt-cols { position: absolute; left: 20px; top: 164px; width: 944px; display: flex; gap: 30px; align-items: baseline; font-size: 11px; color: #8a8e98; }
.rt-cols b { width: 162px; font-weight: 700; letter-spacing: .08em; }

.rt-row { position: absolute; left: 0; width: 980px; height: 62px; border-top: 1px solid #f1f2f5; }
.rt-row.is-off { background: repeating-linear-gradient(135deg, #fbfbfd 0 10px, #f7f7fa 10px 20px); }
.rt-who { position: absolute; left: 20px; top: 12px; width: 180px; display: grid; grid-template-columns: 1fr auto; row-gap: 6px; }
.rt-who b { display: flex; align-items: center; gap: 7px; font: 700 14px/1 var(--font); white-space: nowrap; }
.rt-who b i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.rt-who small { font: 600 10.5px/1 var(--mono); color: #8a8e98; letter-spacing: .02em; }
.rt-back { grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: 6px; height: 14px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.rt-back > span { white-space: nowrap; }
.rt-before { position: absolute; left: 0; opacity: 0; }
.rt-after { color: var(--ink); font-weight: 600; }
.rt-ot { margin-left: 4px; padding: 2px 5px; border-radius: 5px; background: #fef2f2; color: #b42318; font: 700 9.5px/1 var(--font); font-style: normal; }
.rt-hold { color: #b42318; }
.rt-tog { width: 28px; height: 16px; border-radius: 8px; background: #d6d8de; position: relative; align-self: center; }
.rt-tog i { position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.rt-tog.is-on { background: var(--ink); } .rt-tog.is-on i { left: 14px; }
.rt-track { position: absolute; left: 212px; top: 6px; right: 0; height: 50px; }
.rt-empty-row { position: absolute; left: 0; top: 17px; font-size: 12px; color: #a3a7b0; }

.rtc { position: absolute; top: 0; width: 150px; height: 50px; padding: 6px 8px 0 10px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px #e8e9ef, 0 1px 2px rgb(30 30 60 / .05); overflow: hidden; }
.rtc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--a); }
.rtc.is-done { opacity: .5; }
.rtc-t { display: flex; align-items: center; gap: 5px; height: 16px; font-size: 10.5px; }
.rtc-t em { font-style: normal; color: #9aa0a8; min-width: 7px; }
.rtc .atag { height: 15px; padding: 0 4px; gap: 3px; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.rtc .atag > i { width: 4px; height: 4px; }
.rtc-t b { font-weight: 700; }
.rtc-t time { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; color: var(--muted); white-space: nowrap; }
.rtc.is-done .rtc-t time { color: #16a34a; }
.rtc-n { margin-top: 3px; font: 700 11.5px/1.2 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtc-s { font-size: 10px; line-height: 1.3; color: #8a8e98; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-trip { position: absolute; top: 13px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; }
.rt-trip-yard { background: #fff4dc; color: #b45309; }
.rt-trip-dump { background: #efeaff; color: #6d4dff; }
.rt-trip-home { background: #f1f2f5; color: #6b6f7a; }
.rt-fly { position: absolute; top: 0; width: 150px; height: 50px; }
.rt-fly .rtc { left: 0; }
.rt-prop { position: absolute; inset: -4px; border-radius: 12px; border: 2px dashed #7c5cff; opacity: 0; pointer-events: none; }

.rt-mapcol { position: absolute; left: 992px; right: 12px; top: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.rt-maptools { display: flex; align-items: center; gap: 14px; height: 30px; padding: 0 4px; font-size: 12.5px; color: #3c4043; }
.rt-maptools > span { display: inline-flex; align-items: center; gap: 5px; }
.rt-maptools .rt-chip { padding: 5px 9px; border-radius: 8px; background: #f1f2f5; font-weight: 600; color: var(--ink); }
.rt-maptools b { color: var(--ink); }
.rt-map { position: relative; flex: 1; overflow: hidden; border-radius: 12px; background: #eef0f2; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); }
.rt-map > img, .rt-map > .rt-over { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt-map > img { object-fit: cover; }
.rt-zoom { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; background: #fff; border-radius: 4px; box-shadow: rgb(0 0 0 / .3) 0 1px 4px -1px; }
.rt-zoom i { width: 30px; height: 30px; display: grid; place-items: center; font: 300 20px/1 Roboto, Arial, sans-serif; font-style: normal; color: #666; }
.rt-zoom i + i { border-top: 1px solid #e6e6e6; }
.rt-traffic { position: absolute; left: 12px; bottom: 28px; display: flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 8px; background: rgb(255 255 255 / .95); box-shadow: 0 1px 4px rgb(0 0 0 / .18); font: 500 11px/1 Roboto, Arial, sans-serif; color: #3c4043; }
.rt-traffic b { font-weight: 600; margin-right: 4px; }
.rt-traffic small { font-size: 10.5px; color: #70757a; }
.rt-traffic i { width: 14px; height: 6px; border-radius: 2px; }
.rt-attr { position: absolute; right: 0; bottom: 0; padding: 2px 7px; background: rgb(255 255 255 / .8); font: 400 10px/1.4 Roboto, Arial, sans-serif; color: #3c4043; }

.rt-planbar { position: absolute; left: 14px; width: 952px; bottom: 16px; height: 62px; display: flex; align-items: center; gap: 16px; padding: 0 12px 0 22px; border-radius: 16px; background: linear-gradient(100deg, #6d4dff 0%, #8b5cf6 55%, #c44fd8 100%); color: #fff; box-shadow: 0 18px 40px -16px rgb(91 63 217 / .65); opacity: 0; transform: translateY(90px); }
.rt-planbar > div { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rt-planbar b { font: 700 15px/1.1 var(--font); }
.rt-planbar small { font-size: 11.5px; color: rgb(255 255 255 / .8); }
.rt-delta { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgb(255 255 255 / .75); white-space: nowrap; }
.rt-delta s { text-decoration: none; }
.rt-delta b { font: 800 16px/1 var(--font); color: #fff; }
.rt-discard { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 9px; background: rgb(255 255 255 / .16); font: 600 13px/1 var(--font); }
.rt-apply .rt-press { height: 36px; padding: 0 20px; display: inline-flex; align-items: center; border-radius: 9px; background: #fff; color: #5b3fd9; font: 700 13.5px/1 var(--font); }
.rt-toast { position: absolute; left: 330px; bottom: 26px; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 20px 0 12px; border-radius: 21px; background: #18181c; color: #fff; font: 600 14px/1 var(--font); opacity: 0; }
.rt-toast .ic { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: #22c55e; stroke-width: 3; }
.rt-cursor { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .25)); }

/* phone: the map first, with the button and the plan bar */
.rt-head-n { left: 22px; right: 22px; }
.rt-panel-n { bottom: 12px; }
.rt-panel-n .rt-map { position: absolute; inset: 0; border-radius: 16px; }
.rt-panel-n .rt-planbar { left: 14px; right: 14px; width: auto; }
.rt-panel-n .rt-toast { left: 50%; margin-left: -150px; }
.rt-map-n .rt-traffic { bottom: 30px; }

@media (prefers-reduced-motion: no-preference) {
  .rt-plan .rt-press { animation: rt-press 9s ease infinite; }
  .rt-count, .rt-traycount { animation: rt-count 9s ease infinite; }
  .rt-traycount { opacity: 1; }
  .rt-nothing { animation: rt-nothing 9s ease infinite; }
  .rt-f0 { animation: rt-fly0 9s cubic-bezier(.45, .05, .3, 1) infinite; }
  .rt-f1 { animation: rt-fly1 9s cubic-bezier(.45, .05, .3, 1) infinite; }
  .rt-f2 { animation: rt-fly2 9s cubic-bezier(.45, .05, .3, 1) infinite; }
  .rt-f3 { animation: rt-fly3 9s cubic-bezier(.45, .05, .3, 1) infinite; }
  .rt-prop { animation: rt-prop 9s ease infinite; }
  .rt-newchip { animation: rt-in 9s ease infinite; }
  .rt-homeshift { animation: rt-home 9s cubic-bezier(.45, .05, .3, 1) infinite; }
  .rt-before { animation: rt-before 9s ease infinite; }
  .rt-after { animation: rt-after 9s ease infinite; }
  .rt-newleg { animation: rt-in 9s ease infinite; }
  .rt-n1 { animation-name: rt-in1; } .rt-n2 { animation-name: rt-in2; } .rt-n3 { animation-name: rt-in3; }
  .rt-planbar { animation: rt-bar 9s cubic-bezier(.2, .9, .3, 1.1) infinite; }
  .rt-apply .rt-press { animation: rt-press2 9s ease infinite; }
  .rt-toast { animation: rt-toast 9s cubic-bezier(.2, .9, .3, 1.2) infinite; }
  .rt-wide .rt-cursor { animation: rt-cursor 9s cubic-bezier(.45, .05, .35, 1) infinite; }
}
@media (prefers-reduced-motion: reduce) { .rt-count { display: none; } }
@keyframes rt-press { 0%, 12% { transform: scale(1); filter: none; } 13% { transform: scale(.94); filter: brightness(1.15); } 14.5%, 100% { transform: scale(1); filter: none; } }
@keyframes rt-press2 { 0%, 48.5% { transform: scale(1); } 49.5% { transform: scale(.92); } 51%, 100% { transform: scale(1); } }
@keyframes rt-count { 0%, 30% { opacity: 1; } 34%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rt-nothing { 0%, 32% { opacity: 0; } 36%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rt-fly0 { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)); } 3%, 15% { opacity: 1; transform: translate(var(--fx), var(--fy)); } 26%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes rt-fly1 { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)); } 3%, 17% { opacity: 1; transform: translate(var(--fx), var(--fy)); } 28%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes rt-fly2 { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)); } 3%, 19% { opacity: 1; transform: translate(var(--fx), var(--fy)); } 30%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes rt-fly3 { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)); } 3%, 21% { opacity: 1; transform: translate(var(--fx), var(--fy)); } 32%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes rt-prop { 0%, 14% { opacity: 0; } 16%, 50% { opacity: 1; } 54%, 100% { opacity: 0; } }
@keyframes rt-home { 0%, 18% { transform: translateX(var(--sx)); } 30%, 100% { transform: none; } }
@keyframes rt-in { 0%, 25% { opacity: 0; } 29%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rt-in1 { 0%, 27% { opacity: 0; } 31%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rt-in2 { 0%, 29% { opacity: 0; } 33%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rt-in3 { 0%, 31% { opacity: 0; } 35%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rt-before { 0%, 30% { opacity: 1; } 34%, 95% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes rt-after { 0%, 30% { opacity: 0; } 34%, 95% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes rt-bar { 0%, 34% { opacity: 0; transform: translateY(90px); } 39%, 51% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; transform: translateY(90px); } }
@keyframes rt-toast { 0%, 54% { opacity: 0; transform: translateY(24px) scale(.96); } 58%, 90% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes rt-cursor {
  0%, 5% { opacity: 0; transform: translate(var(--c0x), var(--c0y)); }
  7% { opacity: 1; transform: translate(calc(var(--c1x) + 80px), calc(var(--c1y) + 160px)); }
  11%, 12% { opacity: 1; transform: translate(var(--c1x), var(--c1y)) scale(1); }
  13% { transform: translate(var(--c1x), var(--c1y)) scale(.85); }
  14.5% { transform: translate(var(--c1x), var(--c1y)) scale(1); }
  26%, 38% { opacity: 1; transform: translate(calc(var(--c1x) - 520px), calc(var(--c1y) + 420px)); }
  47%, 48.5% { opacity: 1; transform: translate(var(--c2x), var(--c2y)) scale(1); }
  49.5% { transform: translate(var(--c2x), var(--c2y)) scale(.85); }
  51% { transform: translate(var(--c2x), var(--c2y)) scale(1); }
  62% { opacity: 1; transform: translate(calc(var(--c2x) + 40px), calc(var(--c2y) - 60px)); }
  68%, 100% { opacity: 0; transform: translate(calc(var(--c2x) + 40px), calc(var(--c2y) - 60px)); }
}
.rt-wide .rt-cursor { --c0x: 1500px; --c0y: 1100px; --c1x: 1318px; --c1y: 44px; --c2x: 942px; --c2y: 1087px; }
.rt-panel-n .rt-toast { bottom: 90px; }
/* routing, 5-truck board: rows wrap; cards take their action colour like the site's other tiles */
.rt-row { height: auto; }
.rt-track { height: auto; }
.rtc { top: 0; background: var(--a-bg); box-shadow: inset 0 0 0 1px var(--a-bd), 0 1px 2px rgb(30 30 60 / .05); }
.rtc.is-done { opacity: .55; }
.rt-trip { top: 13px; }
.rt-fly { top: 0; }
@keyframes rt-home { 0%, 18% { transform: translate(var(--sx), var(--sy, 0px)); } 30%, 100% { transform: none; } }

/* ---------------- Follow one job (lib/journey.mjs) ---------------- */
.jr { margin-top: clamp(28px, 3.5vw, 44px); display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.jr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: jr; }
.jr-step { position: relative; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px 16px; border: 0; border-radius: 16px; background: transparent; text-align: left; font: inherit; color: inherit; cursor: pointer; overflow: hidden; transition: background-color .2s ease, box-shadow .2s ease; }
.jr-step:hover { background: rgb(255 255 255 / .6); }
.jr-step.is-on { background: #fff; box-shadow: var(--shadow-card); }
.jr-step:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
.jr-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: #eef0f4; color: #6b6f7a; transition: background .2s ease, color .2s ease; }
.jr-step.is-on .jr-ico { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 16px -8px rgb(124 92 255 / .6); }
.jr-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jr-txt small { font: 600 11.5px/1.2 var(--font); letter-spacing: .02em; color: var(--muted); }
.jr-txt b { font: 700 15.5px/1.25 var(--font); letter-spacing: -.01em; color: var(--ink); }
.jr-txt > span { font-size: 13.5px; line-height: 1.45; color: var(--body); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .3s ease, opacity .3s ease; }
.jr-step.is-on .jr-txt > span { max-height: 80px; opacity: 1; }
.jr-bar { position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; opacity: 0; }
.jr-step.is-on .jr-bar { opacity: 1; }
.jr.is-auto .jr-step.is-on .jr-bar { animation: jr-bar var(--jr-int, 5.2s) linear forwards; }
@keyframes jr-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.jr-stage { position: relative; height: 680px; border-radius: 24px; background: linear-gradient(135deg, #f3efff 0%, #fdf0f7 55%, #fff4ea 100%); box-shadow: inset 0 0 0 1px #ece6fb; display: grid; place-items: center; padding: 32px 32px 72px; overflow: hidden; }
.jr-panel { grid-area: 1 / 1; width: 100%; display: flex; justify-content: center; }
.jr-panel[hidden] { display: none; }
.jr-panel.is-on { animation: jr-in .45s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes jr-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.jr-card .jr-screen { width: min(100%, 560px); }
.jr-card .jr-screen > * { box-shadow: var(--shadow-float); }
.jr-phone .jr-screen { width: 290px; }
.jr-nav { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 5px; border-radius: 999px; background: rgb(255 255 255 / .9); box-shadow: var(--shadow-panel); }
.jr-nav button { width: 34px; height: 34px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #f1f2f6; color: var(--ink); cursor: pointer; }
.jr-nav button:hover { background: #e7e8ee; }
.jr-count { font-size: 13px; color: var(--muted); min-width: 48px; text-align: center; }
.jr-count b { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .jr-panel.is-on { animation: none; } .jr.is-auto .jr-step.is-on .jr-bar { animation: none; transform: scaleX(1); } }
@media (max-width: 900px) {
  .jr { grid-template-columns: minmax(0, 1fr); }
  .jr-list { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .jr-list li { flex: 0 0 min(78%, 300px); scroll-snap-align: start; }
  .jr-stage { height: 660px; padding: 22px 16px 70px; }
}

/* ---------------- Playable scenes (script.js): Plan the day + drag the pin ---------------- */
.rt-try, .pl-try { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 8px 8px 8px 14px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-control), inset 0 0 0 1px var(--border); font-size: 13.5px; color: var(--body); }
.rt.is-driven .rt-try, .pl.is-driven .pl-try { display: flex; }
.pl.is-driven .pl-try { margin-top: 0; }
.rt-try-msg, .pl-try-msg { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.rt-try-msg .ic, .pl-try-msg .ic { color: #7c5cff; flex: none; }
.rt-try-btn, .pl-try-btn { flex: none; height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: var(--grad-brand); color: #fff; font: 600 13px/1 var(--font); cursor: pointer; }
.rt-try-btn:focus-visible, .pl-try-btn:focus-visible { outline: 2px solid #a78bfa; outline-offset: 2px; }
/* driven: the timeline follows the visitor (--rt-t), the demo cursor steps aside */
/* driven: script.js seeks the loop with the Web Animations API */
.rt.is-driven .rt-cursor { display: none; }
.rt.is-driven [data-rt-go] { cursor: pointer; }
.rt-plan, .rt-apply { position: relative; }
.rt-hint { position: absolute; inset: -5px; border-radius: 13px; border: 2px solid #a78bfa; opacity: 0; pointer-events: none; }
.rt.is-driven[data-stage="0"] .rt-plan .rt-hint, .rt.is-driven[data-stage="1"] .rt-apply .rt-hint { animation: rt-hint 1.6s ease-out infinite !important; }
@keyframes rt-hint { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18); } }
/* the pin: the visitor drags it */
.pl.is-driven .pl-map svg * { animation: none !important; }
.pl.is-driven .pl-cursor { display: none; }
.pl.is-driven .pl-can { cursor: grab; touch-action: none; transition: transform .25s cubic-bezier(.2, .9, .3, 1); }
.pl.is-driven .pl-can.is-dragging { cursor: grabbing; transition: none; }
.pl.is-driven .pl-can.is-dragging .pl-canlift { transform: translateY(-16px); }
.pl.is-driven .pl-drop, .pl.is-driven .pl-shadow { opacity: 1; transform: none; }
.pl.is-driven.is-dropped .pl-drop, .pl.is-driven.is-dropped .pl-shadow { opacity: 0; transition: opacity .3s ease; }
.pl.is-driven .pl-addr { opacity: 1; }
.pl.is-driven.is-grabbed .pl-addr, .pl.is-driven.is-dropped .pl-addr { opacity: 0; transition: opacity .3s ease; }
.pl.is-driven .pl-zone, .pl.is-driven .pl-tag { opacity: 0; transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .3, 1.3); }
.pl.is-driven .pl-canshadow { transform: scale(.4); transition: transform .4s cubic-bezier(.2, .9, .3, 1.25); }
.pl.is-driven.is-dropped .pl-zone, .pl.is-driven.is-dropped .pl-tag { opacity: 1; }
.pl.is-driven.is-dropped .pl-canshadow { transform: scale(1); }
.pl.is-driven.is-dropped .pl-ring { animation: pl-ring-once 1.4s ease-out 2 !important; }
@keyframes pl-ring-once { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
.pl.is-driven .pl-btn { cursor: pointer; }
.pl.is-driven .pl-toast { opacity: 0; transition: opacity .25s ease, transform .35s cubic-bezier(.2, .9, .3, 1.2); transform: translateY(-30px); }
.pl.is-driven.is-saved .pl-toast { opacity: 1; transform: none; }
.pl.is-driven:not(.is-dropped) .pl-btn { opacity: .45; }

/* ---------------- Brokering calculator ---------------- */
.bc-calc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 28px; background: #fff; box-shadow: var(--shadow-card), inset 0 0 0 1px #ece6fb; }
.bc-calc-in { margin-top: 28px; display: grid; gap: 10px; }
.bc-calc-in label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 600 14.5px/1.3 var(--font); color: var(--ink); }
.bc-calc-in label:not(:first-child) { margin-top: 14px; }
.bc-calc-in output { font: 800 20px/1 var(--font); letter-spacing: -.02em; color: #5b3fd9; font-variant-numeric: tabular-nums; }
.bc-calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #7c5cff, #ff5fa2 var(--fill, 50%), #eceef3 var(--fill, 50%)); cursor: pointer; }
.bc-calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #7c5cff, 0 4px 10px rgb(91 63 217 / .35); }
.bc-calc input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #7c5cff, 0 4px 10px rgb(91 63 217 / .35); }
.bc-calc input[type=range]:focus-visible { outline: 2px solid #a78bfa; outline-offset: 6px; }
.bc-calc-out { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3vw, 36px); border-radius: 22px; color: #fff; background: radial-gradient(120% 90% at 100% 0%, rgb(255 169 77 / .55), transparent 55%), linear-gradient(135deg, #5b3fd9 0%, #8b5cf6 50%, #db4fa5 100%); box-shadow: 0 30px 60px -30px rgb(91 63 217 / .7); overflow: hidden; }
.bc-calc-out small { font: 600 12.5px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; color: rgb(255 255 255 / .8); }
.bc-calc-month { display: flex; align-items: baseline; gap: 10px; font: 800 clamp(44px, 6vw, 68px)/1 var(--font); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.bc-calc-month em { font: 600 17px/1 var(--font); font-style: normal; letter-spacing: 0; color: rgb(255 255 255 / .85); }
.bc-calc-year { font: 600 16px/1.3 var(--font); color: #fff; }
.bc-calc-note { font-size: 12.5px; line-height: 1.45; color: rgb(255 255 255 / .78); }
.bc-calc-cta { align-self: flex-start; margin-top: 8px; background: #fff; color: #5b3fd9; }
.bc-calc-cta:hover { background: #f4f1ff; color: #4a2fc4; }
@media (max-width: 860px) { .bc-calc { grid-template-columns: minmax(0, 1fr); } }

/* routing, v3: wider board, driver identity, cards that fit their text */
.rt-tray { width: 1004px; }
.rt-nothing { left: 224px; top: 40px; }
.rt-cols { width: 968px; }
.rt-cols b { width: 176px; }
.rt-row { width: 1004px; }
.rt-row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--dc); }
.rt-who { left: 18px; top: 14px; width: 196px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; row-gap: 0; align-items: center; }
.rt-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 12px/1 var(--font); letter-spacing: .02em; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgb(0 0 0 / .06); }
.rt-who > div { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rt-who b { display: flex; align-items: baseline; gap: 6px; font: 700 14px/1 var(--font); white-space: nowrap; }
.rt-back { grid-column: auto; height: 14px; font-size: 10.5px; }
.rt-track { left: 224px; top: 6px; }
.rtc { width: 156px; height: 60px; padding: 7px 8px 0 11px; border-radius: 11px; }
.rtc::before { width: 3px; }
.rtc-t { height: 17px; gap: 5px; }
.rtc-t em { min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; display: inline-grid; place-items: center; color: #fff; font: 800 10px/1 var(--font); font-style: normal; }
.rtc .atag { height: 16px; }
.rtc-n { margin-top: 4px; font: 700 12px/15px var(--font); }
.rtc-s { display: flex; gap: 5px; font-size: 10px; line-height: 14px; color: #6b6f7a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtc-s span { flex: none; font: 600 9.5px/14px var(--mono); color: #9aa0a8; }
.rtc.is-done { opacity: .6; }
.rt-fly { width: 156px; height: 60px; }
.rt-mapcol { left: 1016px; }
.rt-planbar { width: 976px; }
.rt-legend { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / .95); box-shadow: 0 2px 10px rgb(0 0 0 / .15); font: 500 11px/1 var(--font); }
.rt-legend span { display: grid; grid-template-columns: 16px auto auto; align-items: center; gap: 7px; white-space: nowrap; }
.rt-legend i { width: 16px; height: 5px; border-radius: 3px; }
.rt-legend b { font-weight: 700; color: var(--ink); }
.rt-legend small { color: var(--muted); font-size: 10.5px; }
.rt-map-n .rt-legend { transform: scale(1.15); transform-origin: top left; }
/* playable: the scene plays on its own; the try bar hands it to the visitor */
.rt-try { display: flex; }
.rt:not(.is-driven) .rt-hint { display: none; }
.pl-try { display: flex; margin-top: 0; }
.pl:not(.is-driven) .pl-can { cursor: grab; }

/* QuickBooks tile: this morning's sync log */
.qb-log { display: flex; flex-direction: column; margin-top: 4px; border-top: 1px solid var(--line, #eceef3); padding-top: 12px; }
.qb-log-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 11.5px; color: var(--muted); }
.qb-log-h b { font-size: 12px; font-weight: 700; color: var(--ink); }
.qb-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; }
.qb-row + .qb-row { border-top: 1px solid #f1f2f6; }
.qb-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: #ecfdf5; color: #0f766e; }
.qb-row:nth-child(6) .qb-ic { background: #fef2f2; color: #b91c1c; }
.qb-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qb-main b { display: flex; gap: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-main em { font: 600 11px/1.5 var(--mono); font-style: normal; color: var(--muted); }
.qb-main small { font-size: 11px; color: var(--muted); }
.qb-amt { font: 600 12.5px/1 var(--font); font-variant-numeric: tabular-nums; }

/* CRM tile: pinned note and the next job */
.crm-note { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; }
.crm-note .pt-label { display: inline-flex; align-items: center; gap: 5px; color: #92400e; }
.crm-note p { margin: 5px 0 0; font-size: 12px; line-height: 1.45; color: #57534e; }
.crm-next { margin-top: 10px; display: flex; align-items: center; gap: 9px; }
.crm-next span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crm-next b { font-size: 12.5px; font-weight: 600; }
.crm-next small { font-size: 11px; color: var(--muted); }

.d-btn-done .d-tkthumb { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; margin-right: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .1); }

/* Follow one job: two phones side by side (camera, then the ticket sheet) */
.jr-duo .jr-screen { width: auto; display: flex; gap: 22px; align-items: center; }
.jr-duo .phone { --pw: 266px; }
@media (max-width: 720px) { .jr-duo .phone { --pw: 252px; } .jr-duo .jr-screen { gap: 10px; } .jr-duo .phone + .phone { display: none; } }

/* ===== How it works (v2): numbered steps, points, live/pause, animated screens ===== */
.jr-ico { position: relative; }
.jr-n { position: absolute; right: -5px; bottom: -5px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); font: 700 9.5px/1 var(--font); font-style: normal; box-shadow: 0 0 0 1.5px #e7e8ee; }
.jr-step.is-on .jr-n { box-shadow: 0 0 0 1.5px #c4b5fd; color: #6d4dff; }
.jr-step.is-on .jr-txt > span { max-height: 240px; }
.jr-more { display: flex; flex-direction: column; gap: 10px; }
.jr-pts { display: flex; flex-direction: column; gap: 6px; padding-bottom: 2px; }
.jr-pts em { display: flex; align-items: center; gap: 8px; font: 500 13px/1.3 var(--font); font-style: normal; color: var(--ink); }
.jr-pts em > .ic { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #e9fbf1; color: #15803d; }
.jr-pts em.is-soon { color: var(--muted); }
.jr-pts em.is-soon > .ic { background: #f1f2f6; color: var(--muted); }
.jr-pts .soon { margin-left: 2px; }
.jr.is-auto .jr-step.is-on .jr-pts em { animation: jr-pt .45s ease both; }
.jr.is-auto .jr-step.is-on .jr-pts em:nth-child(2) { animation-delay: .25s; }
.jr.is-auto .jr-step.is-on .jr-pts em:nth-child(3) { animation-delay: .5s; }
.jr.is-auto .jr-step.is-on .jr-pts em:nth-child(4) { animation-delay: .75s; }
@keyframes jr-pt { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.jr-stage { height: 700px; }
.jr-live { position: absolute; z-index: 3; left: 18px; top: 16px; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 10px; border-radius: 999px; background: rgb(255 255 255 / .9); box-shadow: var(--shadow-card); font: 600 11.5px/1 var(--font); color: var(--ink); }
.jr-live i { width: 7px; height: 7px; border-radius: 50%; background: #9aa0a8; }
.jr.is-auto .jr-live i { background: #22c55e; box-shadow: 0 0 0 0 rgb(34 197 94 / .5); animation: jr-dot 1.6s ease-out infinite; }
@keyframes jr-dot { to { box-shadow: 0 0 0 7px rgb(34 197 94 / 0); } }
.jr-nav .jr-play { background: var(--ink); color: #fff; margin-left: 2px; }
.jr-nav .jr-play:hover { background: #2a2a31; }
.jr-i-play, .jr-i-pause { display: grid; place-items: center; }
.jr:not(.is-auto) .jr-i-pause, .jr.is-auto .jr-i-play { display: none; }

/* shared entrance for pieces inside a panel (panels are display:none until shown, so these replay) */
@keyframes jr-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes jr-pop { 0% { opacity: 0; transform: scale(.85); } 70% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: none; } }

/* 1. order in: the portal request behind, the office review in front */
.jr-wide .jr-screen { width: min(100%, 700px); }
.jr-stack { position: relative; height: 560px; }
.jr-back { position: absolute; left: 0; top: 18px; width: 470px; transform: scale(.8); transform-origin: top left; opacity: .97; filter: saturate(.95); }
.jr-back > * { box-shadow: var(--shadow-float); }
.jr-front { position: absolute; right: 0; bottom: 0; width: 440px; }
.jr-front > * { box-shadow: 0 30px 60px -24px rgb(40 24 90 / .35), var(--shadow-float); }
.jr-ping { position: absolute; z-index: 2; right: 12px; top: 92px; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 11px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12.5px/1 var(--font); box-shadow: 0 12px 24px -10px rgb(0 0 0 / .45); }
.jr-ping .ic { color: #fbbf24; }
.jr-panel.is-on .jr-back { animation: jr-rise .5s ease both; }
.jr-panel.is-on .jr-ping { animation: jr-pop .5s ease 1s both; }
.jr-panel.is-on .jr-front { animation: jr-rise .6s cubic-bezier(.2, .9, .3, 1) 1.5s both; }

/* 4. the customer's text thread (iMessage-like), and the office thread beside it */
.sms-nav { display: grid; grid-template-columns: 30px 1fr 30px; align-items: center; padding: 6px 12px 10px; border-bottom: 1px solid #eef0f4; background: #f9f9fb; }
.sms-back { color: #0a84ff; display: grid; }
.sms-who { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sms-who i { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-brand); color: #fff; font: 700 13px/1 var(--font); font-style: normal; }
.sms-who b { font: 500 11px/1 var(--font); }
.sms-thread { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 12px; }
.sms-day { align-self: center; font-size: 10px; color: #8e8e93; }
.sms-day b { font-weight: 600; }
.sms-in, .sms-out { max-width: 82%; margin: 0; padding: 8px 12px; border-radius: 17px; font-size: 12.5px; line-height: 1.35; }
.sms-in { align-self: flex-start; background: #e9e9eb; color: #000; border-bottom-left-radius: 5px; }
.sms-out { align-self: flex-end; background: #34c759; color: #fff; border-bottom-right-radius: 5px; }
.sms-typing { align-self: flex-end; display: none; gap: 4px; padding: 10px 12px; border-radius: 17px; background: #e9e9eb; }
.sms-typing i { width: 6px; height: 6px; border-radius: 50%; background: #9a9aa0; }
.sms-read { align-self: flex-end; font-size: 10px; color: #8e8e93; margin-top: -4px; }
.sms-compose { margin: 0 10px 14px; height: 32px; padding: 0 4px 0 14px; border-radius: 16px; box-shadow: inset 0 0 0 1px #d8d8dc; display: flex; align-items: center; justify-content: space-between; color: #b0b0b5; font-size: 12px; }
.sms-compose i { color: #8e8e93; display: grid; padding-right: 8px; }
.jr-panel.is-on .sms-in { animation: jr-pop .45s ease .5s both; }
.jr-panel.is-on .sms-typing { display: flex; animation: sms-typing 2.4s ease both; }
.jr-panel.is-on .sms-out { animation: jr-pop .45s ease 2.2s both; }
.jr-panel.is-on .sms-read { animation: jr-rise .3s ease 2.6s both; }
@keyframes sms-typing { 0%, 45% { opacity: 0; max-height: 0; padding-block: 0; } 50%, 85% { opacity: 1; max-height: 30px; padding-block: 10px; } 90%, 100% { opacity: 0; max-height: 0; padding-block: 0; margin-top: -8px; } }

/* 7. the invoice, line by line */
.ivs { width: min(100%, 560px); gap: 14px; overflow: hidden; }
.ivs-top { display: flex; align-items: center; gap: 10px; }
.ivs-top > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ivs-top b { font-size: 14px; }
.ivs-top > div span { font: 600 11.5px/1 var(--mono); color: var(--muted); }
.ivs-flow { display: flex; gap: 6px; }
.ivs-flow em { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; font: 600 11px/1 var(--font); font-style: normal; }
.ivs-flow .is-sent { background: #eef4ff; color: #1d4ed8; }
.ivs-flow .is-paid { background: #dcfce7; color: #15803d; }
.ivs-meta { display: grid; grid-template-columns: 1.3fr 1fr .8fr; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #f7f7fa; }
.ivs-meta div { display: flex; flex-direction: column; gap: 3px; }
.ivs-meta small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.ivs-meta b { font-size: 13px; }
.ivs-meta span { font-size: 11.5px; color: var(--muted); }
.ivs-t { display: flex; flex-direction: column; }
.ivs-th, .ivs-r { display: grid; grid-template-columns: minmax(0, 1fr) 64px 70px 84px; gap: 10px; align-items: center; }
.ivs-th { padding: 0 2px 8px; border-bottom: 1px solid #eceef3; font-size: 10.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.ivs-th span:nth-child(n+2), .ivs-r > span:nth-child(n+2), .ivs-r > b { text-align: right; }
.ivs-r { padding: 11px 2px; border-bottom: 1px solid #f1f2f6; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ivs-r > span:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.ivs-r > span:first-child b { font-weight: 600; }
.ivs-r > b { font-weight: 700; }
.ivs-src { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 8px 0 6px; border-radius: 7px; background: #f3efff; color: #5b3fd9; font: 600 10.5px/1 var(--font); font-style: normal; }
.ivs-src.is-tk { padding-left: 2px; background: #eaf6ff; color: #0369a1; }
.ivs-src img { width: 17px; height: 17px; border-radius: 5px; object-fit: cover; }
.ivs-total { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 2px 0; }
.ivs-total span { font-size: 13px; color: var(--muted); font-weight: 600; }
.ivs-total b { font: 800 26px/1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ivs-pay { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 13px; background: #f0fdf5; box-shadow: inset 0 0 0 1px #bbf7d0; }
.ivs-pay > div { display: flex; flex-direction: column; gap: 2px; }
.ivs-pay b { font-size: 13px; color: #166534; }
.ivs-pay span { font-size: 11.5px; color: #4d7c5f; }
.ivs-stamp { position: absolute; right: 14px; top: 50%; margin-top: -19px; height: 38px; padding: 0 14px; display: grid; place-items: center; border: 2.5px solid #16a34a; border-radius: 9px; color: #16a34a; font: 800 17px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-8deg); background: rgb(240 253 245 / .9); }
.jr-panel.is-on .ivs-meta { animation: jr-rise .4s ease .2s both; }
.jr-panel.is-on .ivs-r:nth-child(2) { animation: jr-rise .45s ease .7s both; }
.jr-panel.is-on .ivs-r:nth-child(3) { animation: jr-rise .45s ease 1.3s both; }
.jr-panel.is-on .ivs-r:nth-child(4) { animation: jr-rise .45s ease 1.9s both; }
.jr-panel.is-on .ivs-src { animation: jr-pop .4s ease both; animation-delay: inherit; }
.jr-panel.is-on .ivs-total { animation: jr-rise .45s ease 2.5s both; }
.jr-panel.is-on .ivs-flow .is-paid, .jr-panel.is-on .ivs-pay { animation: jr-rise .45s ease 3.3s both; }
.jr-panel.is-on .ivs-stamp { animation: ivs-stamp .5s cubic-bezier(.2, .9, .3, 1.3) 3.9s both; }
@keyframes ivs-stamp { from { opacity: 0; transform: rotate(-8deg) scale(1.8); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .jr-panel.is-on *, .jr.is-auto .jr-step.is-on .jr-pts em { animation: none !important; }
  .sms-typing { display: none !important; }
}
/* screens keep their design width and script.js scales them to fit the stage, so the stage never jumps */
.jr-screen { flex: none; transform-origin: center center; }
@media (max-width: 960px) {
  .jr-stage { height: 640px; padding: 58px 12px 76px; }
  .jr-card .jr-screen { width: 480px; }
  .jr-card .jr-screen .ivs { width: 540px; }
  .jr-wide .jr-screen { width: 700px; }
  .jr-list li { align-self: flex-start; }
}
@media (max-width: 720px) {
  .jr-duo .jr-screen > :nth-child(2) { display: none; }
  .jr-stage { height: 600px; }
  .jr-wide .jr-screen { width: 440px; }
  .jr-stack { height: auto; }
  .jr-back, .jr-ping { display: none; }
  .jr-front { position: static; width: 100%; }
}
.jr-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.jr-panel { min-width: 0; min-height: 0; align-items: center; height: 100%; }
@media (max-width: 960px) {
  .jr-card .jr-screen { width: auto; }
  .jr-card .jd { width: 480px; }
  .jr-card .ivs { width: 540px; }
}
@media (max-width: 960px) { .jr-list { padding-right: calc(100% - 300px); } }
/* every screen keeps its design width at every size; script.js scales it into the stage */
.jr-wide .jr-screen { width: 700px; }
.jr-card .jr-screen { width: auto; }
.jr-card .jd { width: 480px; }
.jr-card .ivs { width: 560px; }
@media (max-width: 720px) { .jr-wide .jr-screen { width: 440px; } }

/* ===== How it works v3: two screens per step ===== */
.jr-stage { height: 720px; padding: 60px 28px 78px; }
.jr-duo .jr-screen { gap: 26px; }
.jr-duo .phone { --pw: 282px; }

/* 2. office Map page: drag the new order onto S. Patel, his route grows to it */
.jdm { width: 620px; padding: 0; gap: 0; overflow: hidden; position: relative; }
.jdm-top { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-bottom: 1px solid #eef0f4; }
.jdm-top b { font: 700 15px/1 var(--font); }
.jdm-top span { font-size: 11.5px; color: var(--muted); }
.jdm-plan { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 8px; background: var(--grad-brand); color: #fff !important; font: 600 11.5px/1 var(--font); }
.jdm-body { display: grid; grid-template-columns: 214px minmax(0, 1fr); height: 392px; }
.jdm-side { position: relative; padding: 12px; border-right: 1px solid #eef0f4; background: #fbfbfd; }
.jdm-tray { position: relative; height: 94px; border-radius: 12px; background: linear-gradient(90deg, #f7f4ff, #fff); box-shadow: inset 0 0 0 1px #ece6fb; }
.jdm-tray small, .jdm-h { display: flex; align-items: center; gap: 6px; font: 700 10.5px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.jdm-tray small { position: absolute; left: 10px; top: 9px; }
.jdm-tray em { font-style: normal; min-width: 17px; height: 16px; padding: 0 5px; border-radius: 8px; background: #fff5df; color: #a16207; display: inline-grid; place-items: center; }
.jdm-none { position: absolute; left: 10px; top: 46px; font-size: 11.5px; color: #a0a4ad; opacity: 0; }
.jdm-h { margin: 14px 2px 8px; }
.jdm-row { position: relative; display: flex; align-items: center; gap: 9px; height: 52px; margin-bottom: 6px; padding: 0 10px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px #e9eaef; }
.jdm-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 10.5px/1 var(--font); }
.jdm-who { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.jdm-who b { display: flex; align-items: baseline; gap: 5px; font-size: 12.5px; }
.jdm-who small { font-size: 10px; color: var(--muted); font-weight: 500; }
.jdm-who > span { position: relative; font-size: 11px; color: var(--muted); white-space: nowrap; }
.jdm-who i { font-style: normal; }
.jdm-a { position: absolute; left: 0; top: 0; opacity: 0; color: #1d4ed8; font-weight: 600; }
.jdm-card { position: absolute; left: 22px; top: 38px; width: 170px; height: 62px; padding: 7px 10px 7px 12px; border-radius: 10px; background: #fff; box-shadow: 0 6px 16px -8px rgb(40 24 90 / .35), inset 0 0 0 1px #f1d49b; display: flex; flex-direction: column; justify-content: center; gap: 3px; z-index: 2; }
.jdm-card::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: #d97706; }
.jdm-c1 { display: flex; align-items: center; gap: 6px; }
.jdm-c1 .atag { height: 16px; }
.jdm-c1 small { font: 700 10.5px/1 var(--font); color: var(--ink); }
.jdm-c1 em { margin-left: auto; font-style: normal; font: 700 9.5px/1 var(--font); color: #b45309; }
.jdm-card b { font-size: 12.5px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jdm-c3 { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jdm-cursor { position: absolute; left: 150px; top: 72px; z-index: 3; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .3)); opacity: 0; }
.jdm-map { position: relative; }
.jdm-map .gmap { position: absolute; inset: 0; }
.jdm-over { position: absolute; inset: 0; width: 100%; height: 100%; }
.jdm-leg { stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 1.5px #fff); }
.jdm-toast { position: absolute; left: 0; right: 0; width: max-content; margin: 0 auto; bottom: 14px; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--ink); color: #fff; font: 600 12px/1 var(--font); white-space: nowrap; opacity: 0; z-index: 4; }
.jdm-toast .ic { color: #4ade80; }
.jr-panel.is-on .jdm-card { animation: jdm-card 3.2s ease .3s both; }
.jr-panel.is-on .jdm-cursor { animation: jdm-cur 3.2s ease .3s both; }
.jr-panel.is-on .jdm-row.is-target { animation: jdm-hit .9s ease 2.8s both; }
.jr-panel.is-on .jdm-b { animation: jdm-out .3s ease 2.9s both; }
.jr-panel.is-on .jdm-a, .jr-panel.is-on .jdm-none { animation: jr-rise .35s ease 3s both; }
.jr-panel.is-on .jdm-tray em { animation: jdm-out .3s ease 2.9s both; }
.jr-panel.is-on .jdm-pin { animation: jdm-drop .5s cubic-bezier(.2, .9, .3, 1.3) .4s both; transform-box: fill-box; }
.jr-panel.is-on .jdm-pulse { animation: jdm-pulse 1.6s ease-out .9s infinite; transform-box: fill-box; transform-origin: center; }
.jr-panel.is-on .jdm-leg { animation: jdm-draw 1s ease 3s both; }
.jr-panel.is-on .jdm-toast { animation: jr-rise .45s ease 3.7s both; }
@keyframes jdm-card { 0% { opacity: 0; transform: scale(.9); } 10% { opacity: 1; transform: none; } 45% { transform: none; box-shadow: 0 6px 16px -8px rgb(40 24 90 / .35), inset 0 0 0 1px #f1d49b; } 52% { transform: scale(1.04); box-shadow: 0 18px 30px -12px rgb(40 24 90 / .45), inset 0 0 0 1px #f1d49b; } 74% { transform: translateY(95px) scale(1.04); opacity: 1; } 88%, 100% { transform: translateY(95px) scale(.6); opacity: 0; } }
@keyframes jdm-cur { 0%, 40% { opacity: 0; transform: translate(14px, 18px); } 46% { opacity: 1; transform: none; } 50% { transform: scale(.88); } 52% { transform: none; } 74% { opacity: 1; transform: translateY(95px); } 86%, 100% { opacity: 0; transform: translate(10px, 108px); } }
@keyframes jdm-hit { 0% { background: #fff; box-shadow: inset 0 0 0 1px #e9eaef; } 35% { background: #e6efff; box-shadow: inset 0 0 0 2px #2563eb; } 100% { background: #f3f7ff; box-shadow: inset 0 0 0 1.5px #93b4f5; } }
@keyframes jdm-out { to { opacity: 0; } }
@keyframes jdm-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes jdm-pulse { from { transform: scale(.6); opacity: .45; } to { transform: scale(2); opacity: 0; } }
@keyframes jdm-draw { to { stroke-dashoffset: 0; } }

/* 2b. the driver's lock screen: the push arrives */
.phone.is-lock .phone-screen { background: radial-gradient(120% 70% at 20% 0%, #5b3fd9 0%, transparent 60%), radial-gradient(90% 60% at 100% 100%, #e0569b 0%, transparent 60%), #1b1530; }
.lk { flex: 1; display: flex; flex-direction: column; padding: 8px 10px 16px; color: #fff; }
.lk-time { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 10px 0 26px; }
.lk-time span { font: 600 13px/1 var(--font); opacity: .9; }
.lk-time b { font: 600 64px/1 var(--font); letter-spacing: -.02em; }
.lk-note { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 8px; padding: 10px 11px; border-radius: 16px; background: rgb(255 255 255 / .8); color: #111; backdrop-filter: blur(10px); }
.lk-old { opacity: .72; transform: scale(.97); }
.lk-app { flex: none; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: var(--grad-brand); color: #fff; font: 800 9px/1 var(--font); font-style: normal; }
.lk-note > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lk-note b { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; }
.lk-note em { font-style: normal; font-weight: 500; font-size: 10px; color: #6b6f7a; }
.lk-note span { font-size: 11px; line-height: 1.3; color: #333; }
.lk-new { order: -1; margin-bottom: 8px; }
.lk-foot { margin-top: auto; display: flex; justify-content: space-between; padding: 0 14px; }
.lk-foot i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .16); color: #fff; }
.lk .lk-new { order: 0; }
.jr-panel.is-on .lk-new { animation: lk-in .55s cubic-bezier(.2, .9, .3, 1.2) 3.9s both; }
@keyframes lk-in { from { opacity: 0; transform: translateY(-24px) scale(.96); } to { opacity: 1; transform: none; } }

/* 3. Google Maps turn-by-turn */
.nv-head { flex: none; display: flex; align-items: center; gap: 12px; margin: 4px 8px 0; padding: 12px 14px; border-radius: 14px; background: #0f6b3a; color: #fff; }
.nv-turn { display: grid; transform: rotate(0deg); }
.nv-head div { display: flex; flex-direction: column; gap: 3px; }
.nv-head b { font: 700 20px/1 var(--font); }
.nv-head span { font-size: 11.5px; opacity: .9; }
.nv-map { flex: 1; position: relative; min-height: 0; margin-top: 6px; }
.nv-map .gmap { position: absolute; inset: 0; }
.nv-foot { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 14px 20px; border-top: 1px solid #eef0f4; }
.nv-foot div { display: flex; flex-direction: column; gap: 3px; }
.nv-foot b { font: 700 17px/1 var(--font); color: #188038; }
.nv-foot span { font-size: 11px; color: #5f6368; }
.nv-dest { margin-left: auto; font-weight: 600; color: #202124 !important; }
.nv-x { height: 30px; padding: 0 14px; border-radius: 15px; display: grid; place-items: center; background: #d93025; color: #fff !important; font: 600 12px/1 var(--font); }

/* 4. the On My Way tap on the driver's route, and its confirmation */
.d-alert { position: absolute; z-index: 20; left: 14%; right: 14%; top: 34%; border-radius: 14px; background: rgb(250 250 252 / .97); box-shadow: 0 20px 40px -12px rgb(0 0 0 / .45); text-align: center; overflow: hidden; opacity: 0; }
.d-alert div { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px 12px; }
.d-alert b { font: 700 13px/1.2 var(--font); }
.d-alert span { font-size: 11px; color: #4b4f58; }
.d-alert em { display: block; padding: 10px; border-top: 1px solid #e3e4ea; font: 600 13px/1 var(--font); font-style: normal; color: #0a84ff; }
.jr-panel.is-on .jr-tap { animation: jr-tap .5s ease 1s both; }
.jr-panel.is-on .d-alert { animation: jr-pop .4s ease 1.5s both; }
@keyframes jr-tap { 0%, 100% { transform: none; } 45% { transform: scale(.95); background: #e7e3ff; } }
.sms-thread { gap: 6px; padding: 10px 11px; }
.sms-in, .sms-out { font-size: 11.5px; padding: 7px 11px; }
.jr-panel.is-on .sms-1 { animation: jr-pop .4s ease .2s both; }
.jr-panel.is-on .sms-in.sms-2, .jr-panel.is-on .sms-d2 { animation: jr-pop .45s ease 1.9s both; }
.jr-panel.is-on .sms-typing { animation: sms-typing 2.2s ease 1.4s both; }
.jr-panel.is-on .sms-out { animation: jr-pop .45s ease 3.2s both; }
.jr-panel.is-on .sms-4, .jr-panel.is-on .sms-d4 { animation: jr-pop .45s ease 4.2s both; }
.jr-panel.is-on .sms-read { animation: none; }

/* 6. problem report + dispatch chat */
.jr-panel.is-on .jc-2 { animation: jr-pop .4s ease 1.2s both; }
.jr-panel.is-on .jc-3 { animation: jr-pop .4s ease 2.4s both; }
.jr-panel.is-on .jc-4 { animation: jr-pop .4s ease 3.4s both; }

/* 7. the customer pays from the invoice link */
.py { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 10px 14px 18px; }
.py-brand { display: flex; align-items: center; gap: 8px; padding: 4px 0 6px; }
.py-brand b { font-size: 13px; }
.py-inv { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px #e9eaef; }
.py-inv div { display: flex; justify-content: space-between; align-items: baseline; }
.py-inv small, .py-card small { font: 600 9.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: #9a9ea8; }
.py-inv b { font-size: 12.5px; }
.py-due { padding-top: 9px; border-top: 1px solid #f1f2f6; }
.py-due b { font: 800 20px/1 var(--font); letter-spacing: -.01em; }
.py-card { display: flex; flex-direction: column; gap: 6px; }
.py-card > div { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1.5px #c4b5fd; font-size: 12.5px; }
.py-card span { display: inline-flex; align-items: center; gap: 6px; flex: 1; font-weight: 600; }
.py-card em { font-style: normal; color: #9a9ea8; font-size: 11.5px; }
.py-btn { height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 14px/1 var(--font); }
.py-lock { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 10.5px; color: #9a9ea8; }
.py-ok { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 20px; background: #f6f6fa; opacity: 0; }
.py-ok > i { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #dcfce7; color: #16a34a; margin-bottom: 6px; }
.py-ok > b { font: 700 18px/1.2 var(--font); }
.py-ok > span { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.py-ok div { width: 100%; display: flex; justify-content: space-between; padding: 9px 12px; background: #fff; font-size: 12px; }
.py-ok div:nth-of-type(1) { border-radius: 10px 10px 0 0; border-bottom: 1px solid #f1f2f6; }
.py-ok div:nth-of-type(2) { border-radius: 0 0 10px 10px; }
.py-ok div span { color: var(--muted); }
.jr-panel.is-on .py-btn { animation: jd-press .5s ease 2.9s both; }
.jr-panel.is-on .py-ok { animation: jr-rise .5s ease 3.4s both; }
@keyframes jd-press { 0%, 100% { transform: none; } 45% { transform: scale(.95); filter: brightness(1.3); } }
@media (prefers-reduced-motion: reduce) { .py-ok, .d-alert, .jdm-toast, .jdm-none, .jdm-a { opacity: 1 !important; } .jdm-card, .jdm-cursor, .jdm-b, .jdm-tray em { opacity: 0 !important; } .jdm-leg { stroke-dashoffset: 0; } }
@media (max-width: 720px) { .jr-duo.jr-m2 .jr-screen > :nth-child(2) { display: block; } .jr-duo.jr-m2 .jr-screen > :first-child { display: none; } }
@media (max-width: 960px) { .jr-stage { height: 660px; padding: 58px 12px 76px; } }
@media (max-width: 720px) {
  .jr-stage { height: 600px; }
  .jdm { width: 440px; }
  .jdm-body { grid-template-columns: 196px minmax(0, 1fr); height: 380px; }
  .jdm-av { width: 24px; height: 24px; font-size: 9.5px; }
  .jdm-who > span { font-size: 10px; }
  .jdm-card { width: 160px; left: 20px; }
  .jdm-cursor { left: 130px; }
  .jdm-toast { font-size: 11px; }
}

/* routing, v4 (Charles 2026-09-29): vibrant cards, clean edges, nothing overlapping.
   Completed stops keep their colours (the green check and time say they're done). The four waiting
   jobs fly one at a time, lifted above the board with a soft shadow, and land with a brief solid
   ring; each row's new dump chip and home chip move with that row's card. Timeline (9 s):
   Plan pressed 13% · cards land 20 / 25.5 / 31 / 36.5% · counts and "Back" swap 37–39% · plan bar 39%. */
.rtc.is-done { opacity: 1; }
.rtc.is-done .rtc-t time { color: #15803d; font-weight: 600; }
.rt-fly { z-index: 6; }
.rt-fly .rtc { box-shadow: inset 0 0 0 1px var(--a-bd), 0 1px 2px rgb(30 30 60 / .05); }
.rt-prop { inset: -3px; border: 2px solid #8b5cf6; border-radius: 13px; box-shadow: 0 0 0 4px rgb(139 92 246 / .15); }
.rt-back { position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .rt-f0 { animation: rt-fly-a 9s cubic-bezier(.45, .05, .3, 1) infinite; }
  .rt-f1 { animation: rt-fly-b 9s cubic-bezier(.45, .05, .3, 1) infinite; }
  .rt-f2 { animation: rt-fly-c 9s cubic-bezier(.45, .05, .3, 1) infinite; }
  .rt-f3 { animation: rt-fly-d 9s cubic-bezier(.45, .05, .3, 1) infinite; }
  .rt-f0 .rt-prop { animation: rt-ring-a 9s ease infinite; }
  .rt-f1 .rt-prop { animation: rt-ring-b 9s ease infinite; }
  .rt-f2 .rt-prop { animation: rt-ring-c 9s ease infinite; }
  .rt-f3 .rt-prop { animation: rt-ring-d 9s ease infinite; }
  .rt-homeshift.rt-h0 { animation: rt-home-a 9s cubic-bezier(.45, .05, .3, 1) infinite; }
  .rt-homeshift.rt-h1 { animation: rt-home-b 9s cubic-bezier(.45, .05, .3, 1) infinite; }
  .rt-homeshift.rt-h2 { animation: rt-home-c 9s cubic-bezier(.45, .05, .3, 1) infinite; }
  .rt-homeshift.rt-h3 { animation: rt-home-d 9s cubic-bezier(.45, .05, .3, 1) infinite; }
  .rt-newchip.rt-c0, .rt-newleg.rt-n0 { animation: rt-land-a 9s ease infinite; }
  .rt-newchip.rt-c1, .rt-newleg.rt-n1 { animation: rt-land-b 9s ease infinite; }
  .rt-newchip.rt-c2, .rt-newleg.rt-n2 { animation: rt-land-c 9s ease infinite; }
  .rt-newchip.rt-c3, .rt-newleg.rt-n3 { animation: rt-land-d 9s ease infinite; }
  .rt-count, .rt-traycount { animation: rt-count2 9s ease infinite; }
  .rt-nothing { animation: rt-nothing2 9s ease infinite; }
  .rt-before { animation: rt-before2 9s ease infinite; }
  .rt-after { animation: rt-after2 9s ease infinite; }
  .rt-planbar { animation: rt-bar2 9s cubic-bezier(.2, .9, .3, 1.1) infinite; }
}
/* flight: sits in the tray, lifts (shadow), travels ~5% of the loop, settles flat */
@keyframes rt-fly-a { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)); filter: none; } 3%, 15% { opacity: 1; transform: translate(var(--fx), var(--fy)); filter: none; } 16% { filter: drop-shadow(0 14px 18px rgb(40 24 90 / .28)); } 20% { opacity: 1; transform: none; filter: drop-shadow(0 14px 18px rgb(40 24 90 / .28)); } 21.5%, 94% { opacity: 1; transform: none; filter: none; } 98%, 100% { opacity: 0; transform: none; filter: none; } }
@keyframes rt-fly-b { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)); filter: none; } 3%, 20.5% { opacity: 1; transform: translate(var(--fx), var(--fy)); filter: none; } 21.5% { filter: drop-shadow(0 14px 18px rgb(40 24 90 / .28)); } 25.5% { opacity: 1; transform: none; filter: drop-shadow(0 14px 18px rgb(40 24 90 / .28)); } 27%, 94% { opacity: 1; transform: none; filter: none; } 98%, 100% { opacity: 0; transform: none; filter: none; } }
@keyframes rt-fly-c { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)); filter: none; } 3%, 26% { opacity: 1; transform: translate(var(--fx), var(--fy)); filter: none; } 27% { filter: drop-shadow(0 14px 18px rgb(40 24 90 / .28)); } 31% { opacity: 1; transform: none; filter: drop-shadow(0 14px 18px rgb(40 24 90 / .28)); } 32.5%, 94% { opacity: 1; transform: none; filter: none; } 98%, 100% { opacity: 0; transform: none; filter: none; } }
@keyframes rt-fly-d { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)); filter: none; } 3%, 31.5% { opacity: 1; transform: translate(var(--fx), var(--fy)); filter: none; } 32.5% { filter: drop-shadow(0 14px 18px rgb(40 24 90 / .28)); } 36.5% { opacity: 1; transform: none; filter: drop-shadow(0 14px 18px rgb(40 24 90 / .28)); } 38%, 94% { opacity: 1; transform: none; filter: none; } 98%, 100% { opacity: 0; transform: none; filter: none; } }
@keyframes rt-ring-a { 0%, 19.5% { opacity: 0; } 20.5%, 27% { opacity: 1; } 31%, 100% { opacity: 0; } }
@keyframes rt-ring-b { 0%, 25% { opacity: 0; } 26%, 32.5% { opacity: 1; } 36.5%, 100% { opacity: 0; } }
@keyframes rt-ring-c { 0%, 30.5% { opacity: 0; } 31.5%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes rt-ring-d { 0%, 36% { opacity: 0; } 37%, 43.5% { opacity: 1; } 47.5%, 100% { opacity: 0; } }
@keyframes rt-home-a { 0%, 15% { transform: translate(var(--sx), var(--sy, 0px)); } 20%, 100% { transform: none; } }
@keyframes rt-home-b { 0%, 20.5% { transform: translate(var(--sx), var(--sy, 0px)); } 25.5%, 100% { transform: none; } }
@keyframes rt-home-c { 0%, 26% { transform: translate(var(--sx), var(--sy, 0px)); } 31%, 100% { transform: none; } }
@keyframes rt-home-d { 0%, 31.5% { transform: translate(var(--sx), var(--sy, 0px)); } 36.5%, 100% { transform: none; } }
@keyframes rt-land-a { 0%, 19% { opacity: 0; } 21%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rt-land-b { 0%, 24.5% { opacity: 0; } 26.5%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rt-land-c { 0%, 30% { opacity: 0; } 32%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rt-land-d { 0%, 35.5% { opacity: 0; } 37.5%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rt-count2 { 0%, 36.5% { opacity: 1; } 38%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rt-nothing2 { 0%, 37.5% { opacity: 0; } 39.5%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
/* the two "Back …" lines never show together: one fades out before the other fades in */
@keyframes rt-before2 { 0%, 36.5% { opacity: 1; } 37.5%, 97% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes rt-after2 { 0%, 38% { opacity: 0; } 39%, 95% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes rt-bar2 { 0%, 38% { opacity: 0; transform: translateY(90px); } 42%, 51% { opacity: 1; transform: none; } 55%, 100% { opacity: 0; transform: translateY(90px); } }

/* Pricing: the one place the price appears ($50 a month, first month free) */
.price-card { position: relative; margin-top: 28px; max-width: 460px; padding: 26px 28px 24px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card), inset 0 0 0 1px #ece6fb; overflow: hidden; }
.price-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad-brand); }
.price-amt { display: flex; align-items: baseline; gap: 8px; }
.price-amt b { font: 800 56px/1 var(--font); letter-spacing: -.03em; color: var(--ink); }
.price-amt span { font-size: 17px; color: var(--muted); font-weight: 500; }
.price-free { display: inline-flex; margin: 14px 0 0; height: 28px; align-items: center; padding: 0 12px; border-radius: 999px; background: #ecfdf3; color: #15803d; font: 700 13px/1 var(--font); }
.price-sub { margin: 14px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.page-hero-inner .price-card + .hero-ctas { margin-top: 26px; }
.plans-h { margin: 0 0 22px; font: 700 clamp(22px, 2.4vw, 28px)/1.2 var(--font); letter-spacing: -.02em; }
a.mega-free { color: var(--muted); text-decoration: none; }
a.mega-free:hover { color: var(--ink); }

/* Guides */
/* one readable column: hero and article share the same 760px measure */
.guide-hero .page-hero-inner, .guide-wrap { max-width: calc(760px + 2 * var(--gutter)); }
.guide-hero h1 { max-width: none; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.06; }
.guide-hero .hero-sub { max-width: none; margin-top: 20px; }
.guide-crumb { color: inherit; }
.guide-crumb:hover { color: var(--ink); }
.guide-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 22px 0 0; font-size: 14px; color: var(--muted); }
.guide-meta span + span::before { content: "·"; margin-right: 18px; }
.section.guide { padding-top: clamp(32px, 4vw, 48px); }
.guide-body { color: var(--body); font: 400 17px/1.7 var(--font); }
.guide-body > p, .guide-body > ul, .guide-body > ol { max-width: 68ch; }
.guide-body h2 { margin: 52px 0 14px; font: 700 clamp(24px, 2.4vw, 29px)/1.2 var(--font); letter-spacing: -.025em; color: var(--ink); scroll-margin-top: calc(var(--nav-h, 72px) + 16px); }
.guide-body h3 { margin: 30px 0 8px; font: 650 19px/1.35 var(--font); letter-spacing: -.015em; color: var(--ink); }
.guide-body p { margin: 0 0 16px; }
.guide-body ul, .guide-body ol { margin: 0 0 18px; padding-left: 22px; }
.guide-body ul { list-style: disc; }
.guide-body ol { list-style: decimal; }
.guide-body li { margin: 0 0 8px; padding-left: 2px; }
.guide-body li::marker { color: var(--muted); }
.guide-body strong { color: var(--ink); font-weight: 600; }
.guide-body a:not(.guide-card):not(.link-arrow) { text-decoration: underline; text-decoration-color: rgb(91 63 217 / .35); text-underline-offset: 3px; }
.guide-body a:not(.guide-card):not(.link-arrow):hover { text-decoration-color: currentColor; }

.guide-toc { margin: 0 0 12px; padding: 20px 24px; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line, var(--border)); }
.guide-toc-h { margin: 0 0 10px; font: 600 12.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.guide-toc ol { margin: 0; padding-left: 20px; columns: 2 240px; column-gap: 32px; font-size: 15px; line-height: 1.5; }
.guide-toc li { margin: 0 0 6px; break-inside: avoid; }
.guide-toc a { text-decoration: none !important; }

.guide-table-wrap { margin: 20px 0 22px; overflow-x: auto; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line, var(--border)); }
.guide-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.guide-table caption { caption-side: top; padding: 14px 18px 4px; text-align: left; font: 600 13.5px/1.4 var(--font); color: var(--muted); }
.guide-table th, .guide-table td { padding: 11px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line, var(--border)); }
.guide-table thead th { font: 600 12.5px/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.guide-table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.guide-table .num { text-align: right; white-space: nowrap; color: var(--ink); }
.guide-table tfoot th, .guide-table tfoot td { border-bottom: 0; font-weight: 700; color: var(--ink); background: var(--sand); }

.guide-callout { position: relative; margin: 22px 0 24px; padding: 20px 24px 6px; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-card), inset 0 0 0 1px #ece6fb; overflow: hidden; }
.guide-callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad-brand); }
.guide-callout-h { margin: 0 0 8px !important; font: 600 12.5px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.guide-callout p { font-size: 16px; }

.guide-excern { position: relative; margin: 56px 0 0; padding: 28px 28px 14px; border-radius: var(--r-lg); background: #fff; box-shadow: var(--shadow-card), inset 0 0 0 1px #ece6fb; overflow: hidden; }
.guide-excern::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--grad-brand); }
.guide-excern .eyebrow { margin: 0; }
.guide-body .guide-excern h2 { margin: 12px 0 12px; }
.guide-excern p { font-size: 16px; }

.guide-more { margin: 56px 0 0; }
.guide-body .guide-more h2 { margin: 0 0 16px; font-size: 21px; }
.guide-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px; }
.guide-card { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line, var(--border)); color: var(--body); font-size: 15px; line-height: 1.55; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.guide-card:hover { color: var(--body); box-shadow: var(--shadow-float), inset 0 0 0 1px #c9bdfd; transform: translateY(-1px); }
.guide-card b { font: 650 17px/1.3 var(--font); letter-spacing: -.015em; color: var(--ink); }
.guide-card .link-arrow { margin-top: auto; padding-top: 4px; font-size: 14.5px; }

.guide-index { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.guide-card-lg { padding: 26px 28px; font-size: 16px; }
.guide-card-lg b { font-size: 22px; letter-spacing: -.02em; }
.guide-num { font: 600 13px/1 var(--mono); color: var(--accent); }

@media (max-width: 560px) {
  .guide-body { font-size: 16.5px; }
  .guide-toc, .guide-callout, .guide-excern { padding-left: 18px; padding-right: 18px; }
  .guide-table th, .guide-table td { padding: 10px 12px; }
  .guide-table tbody th { white-space: normal; }
}

/* SEO (2026-09-29): the small label above each headline is part of the H1, so the page's search
   term ("Roll-off dumpster rental software") sits in the heading. It looks exactly like the eyebrow did. */
h1 .h1-kicker { display: flex; width: fit-content; margin: 0 0 24px; font-family: var(--font); line-height: 1; }
h1 .h1-main { display: block; }
.page-hero-center h1 .h1-kicker, .hero-home h1 .h1-kicker { margin-left: auto; margin-right: auto; }
.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; }
/* Driver inspection: the app's "Mark Out of Service" toggle, switched on (src/app/m/dvir) */
.d-oos { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 12px 0; height: 34px; border-radius: 10px; background: #dc2626; color: #fff; font: 800 11px/1 var(--font); letter-spacing: .02em; text-transform: uppercase; }

/* ===== Pricing (2026-09-30): one plan, first month free ===== */
.pr-hero { padding-bottom: 8px; }
.pr-hero .hero-sub { max-width: 620px; }
.pr-wrap { padding: 28px 0 8px; }
.pr-card { position: relative; max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); border-radius: 28px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -40px rgb(40 24 90 / .35), var(--shadow-card), inset 0 0 0 1px #ece6fb; }
.pr-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--grad-brand); z-index: 1; }
.pr-main { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 44px 44px 40px; background: radial-gradient(90% 70% at 0% 0%, #efe9ff 0%, transparent 70%), radial-gradient(80% 60% at 100% 100%, #ffece0 0%, transparent 65%), #fbfaff; }
.pr-badge { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 13px; border-radius: 999px; background: var(--grad-brand); color: #fff; font: 700 15px/1 var(--font); letter-spacing: -.005em; box-shadow: 0 12px 24px -12px rgb(124 92 255 / .7); }
.pr-price { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.pr-price b { font: 800 84px/.9 var(--font); letter-spacing: -.05em; color: var(--ink); }
.pr-price span { font-size: 15px; line-height: 1.3; color: var(--muted); font-weight: 500; }
.pr-after { margin: 12px 0 0; font-size: 14.5px; color: var(--body); }
.pr-go { margin-top: 28px; width: 100%; justify-content: center; }
.pr-facts { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--ink); font-weight: 500; }
.pr-facts li { display: inline-flex; align-items: center; gap: 6px; }
.pr-facts .ic { color: #16a34a; }
.pr-incl { padding: 44px 44px 40px; border-left: 1px solid #efedf6; }
.pr-incl-h { margin: 0 0 18px; font: 700 12.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.pr-incl ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; }
.pr-incl li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; line-height: 1.4; color: var(--ink); }
.pr-incl li .ic { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #e9fbf1; color: #15803d; margin-top: -1px; }
.pr-incl-note { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #efedf6; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.pr-timeline { max-width: 1040px; margin: 22px auto 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 14px; }
.pr-timeline > i { display: grid; place-items: center; color: #b9bdc7; }
.pr-step { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; background: #fff; box-shadow: var(--shadow-card), inset 0 0 0 1px #eceef3; }
.pr-step small { font: 600 11.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pr-step b { font: 800 22px/1.15 var(--font); letter-spacing: -.02em; color: var(--ink); }
.pr-step span { font-size: 13px; color: var(--muted); }
.pr-step.is-free { box-shadow: 0 0 0 2px #a78bfa, var(--shadow-card); background: linear-gradient(135deg, #f6f2ff, #fff); }
.pr-step.is-free b { background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-ways-sec { padding-top: clamp(56px, 7vw, 96px); }
.pr-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.pr-way { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card), inset 0 0 0 1px #eceef3; }
.pr-way-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #f3efff; color: #6d4dff; margin-bottom: 6px; }
.pr-way small { font: 600 12px/1 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pr-way h3 { margin: 0; font: 700 21px/1.2 var(--font); letter-spacing: -.02em; }
.pr-way p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.pr-way ul { list-style: none; margin: 8px 0 0; padding: 14px 0 0; border-top: 1px solid #f1f2f6; display: flex; flex-direction: column; gap: 9px; }
.pr-way li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink); }
.pr-way li .ic { flex: none; color: #16a34a; }
@media (max-width: 900px) {
  .pr-card { grid-template-columns: 1fr; }
  .pr-incl { border-left: 0; border-top: 1px solid #efedf6; }
  .pr-ways { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pr-main, .pr-incl { padding: 32px 22px 28px; }
  .pr-price b { font-size: 68px; }
  .pr-timeline { grid-template-columns: 1fr; }
  .pr-timeline > i { transform: rotate(90deg); }
}
.pr-ways { max-width: 1040px; margin-left: auto; margin-right: auto; }
.pr-ways-sec .section-head h2 { font-size: clamp(28px, 3.4vw, 44px); }
@media (max-width: 640px) {
  .pr-timeline { gap: 8px; }
  .pr-timeline > i { display: none; }
  .pr-step { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; padding: 13px 16px; }
  .pr-step span { display: none; }
  .pr-step b { font-size: 18px; }
}

/* Pricing v2: the card's right side leads with what sets Excern apart; a full grouped list follows */
.pr-incl-lead { margin: -4px 0 20px; font-size: 16px; line-height: 1.5; color: var(--body); }
.pr-incl-lead b { color: var(--ink); font-weight: 700; }
.pr-top { gap: 16px !important; }
.pr-top li { align-items: flex-start; }
.pr-top li > span { display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.5; color: var(--body); }
.pr-top li b { font-size: 15.5px; color: var(--ink); font-weight: 700; }
.pr-incl-more { display: inline-flex; margin-top: 22px; padding-top: 18px; border-top: 1px solid #efedf6; width: 100%; font: 600 14px/1 var(--font); color: var(--accent); text-decoration: none; }
.pr-incl-more:hover { text-decoration: underline; }
.pr-all { padding-top: clamp(56px, 7vw, 96px); scroll-margin-top: 80px; }
.pr-groups { max-width: 1040px; margin: 8px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pr-group { padding: 24px 24px 22px; border-radius: 20px; background: #fff; box-shadow: var(--shadow-card), inset 0 0 0 1px #eceef3; }
.pr-group-h { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font: 700 16px/1.2 var(--font); color: var(--ink); }
.pr-group-h span { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: #f3efff; color: #6d4dff; }
.pr-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pr-group li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.pr-group li .ic { flex: none; width: 20px; height: 20px; padding: 3.5px; border-radius: 50%; background: #e9fbf1; color: #15803d; margin-top: -1px; }
@media (max-width: 900px) { .pr-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pr-groups { grid-template-columns: 1fr; } }
.pr-stats { margin-top: auto; padding-top: 28px; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pr-stats div { display: flex; flex-direction: column; gap: 4px; padding: 14px 12px; border-radius: 14px; background: rgb(255 255 255 / .75); box-shadow: inset 0 0 0 1px #ece6fb; }
.pr-stats b { font: 800 20px/1.1 var(--font); letter-spacing: -.02em; color: var(--ink); }
.pr-stats span { font-size: 12px; line-height: 1.35; color: var(--muted); }
@media (max-width: 900px) { .pr-stats { margin-top: 24px; padding-top: 0; } }
@media (max-width: 640px) { .pr-stats { gap: 8px; } .pr-stats div { padding: 12px 10px; } .pr-stats b { font-size: 16px; } .pr-stats span { font-size: 11.5px; } }
.pr-why { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1px #ece6fb; font-size: 13.5px; line-height: 1.45; color: var(--body); }
.pr-why .ic { flex: none; margin-top: 2px; color: #6d4dff; }
.pr-why b { color: var(--ink); }
.pr-why { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / .8); box-shadow: inset 0 0 0 1px #ece6fb; font-size: 13.5px; line-height: 1.45; color: var(--body); }
.pr-why .ic { flex: none; margin-top: 2px; color: #6d4dff; }
.pr-why b { color: var(--ink); }

/* ---------------- Plan the day, every work order (lib/routing.mjs, .rt-all — 2026-10-06) ----------------
   The day starts with all 30 work orders in Unassigned and four empty trucks. 9 s: Plan the day → every
   tile flies onto its truck in run order (staggered) → the quiet gray yard / dump chips appear → the
   routes draw on the map → the tray folds away → the slim plan bar → Apply → Applied. Tiles are the
   product's JobTile: 4px action-gradient edge over a whisper of the action colour, solid gradient tag.
   Base styles are the applied result (reduced motion). */
.rt-all .ac-del { --g1: #047857; --g2: #059669; --g3: #22c55e; }
.rt-all .ac-pu { --g1: #be123c; --g2: #e11d48; --g3: #fb7185; }
.rt-all .ac-swp { --g1: #b45309; --g2: #d97706; --g3: #facc15; }
.rt-all .ac-dr { --g1: #6d28d9; --g2: #9333ea; --g3: #d946ef; }
.rt-all .rtc { width: 156px; height: 58px; padding: 6px 8px 0 12px; border-radius: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--g2) 14%, #fff) 0%, #fff 70%); box-shadow: inset 0 0 0 1px #e6e7ee, 0 1px 2px rgb(30 30 60 / .06); }
.rt-all .rtc::before { width: 4px; background: linear-gradient(180deg, var(--g1), var(--g2) 55%, var(--g3)); }
.rt-all .rtc::after { content: ""; position: absolute; inset: 0; border-radius: 10px; border: 1.5px dashed #a3a7b0; opacity: 0; pointer-events: none; }
.rt-all .rtc-t { gap: 5px; height: 17px; font-size: 10.5px; }
.rt-all .rtc-t em { font-style: normal; font-weight: 600; color: #9aa0a8; min-width: 6px; }
.rt-all .rtc-tag { display: inline-flex; align-items: center; height: 15px; padding: 0 5px; border-radius: 4px; background: var(--g1); background-image: linear-gradient(135deg, var(--g1), var(--g2) 60%, var(--g3)); color: #fff; font: 700 9.5px/1 var(--font); letter-spacing: .02em; }
.rt-all .rtc-t b { font: 700 12.5px/1 var(--font); color: var(--ink); }
.rt-all .rtc-r { margin-left: auto; position: relative; display: inline-flex; align-items: center; gap: 4px; }
.rt-all .rtc-una { position: absolute; right: 0; font-size: 9.5px; font-weight: 500; color: #9aa0a8; white-space: nowrap; opacity: 0; }
.rt-all .rtc-new { padding: 2px 4px; border-radius: 4px; background: #efeaff; color: #5b3fd9; font: 700 8.5px/1 var(--font); }
.rt-all .rtc-ini { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.4px var(--dc); color: var(--dc); font: 700 7.5px/1 var(--font); font-style: normal; }
.rt-all .rtc-n { margin-top: 4px; font: 600 11.5px/1.25 var(--font); color: var(--ink); }
.rt-all .rtc-s { display: flex; align-items: center; gap: 3px; font-size: 10px; color: #8a8e98; }
.rt-all .rtc-reuse { display: inline-flex; color: #16a34a; }
.rt-all .rt-fly { width: 156px; height: 58px; }
.rt-all .rt-trip { top: 17px; width: 24px; height: 24px; border-radius: 8px; background: #f1f2f5; color: #7a7f8a; box-shadow: inset 0 0 0 1px #e6e7ee; }
.rt-all .rt-tray { height: 94px; overflow: hidden; background: linear-gradient(180deg, #fbfaff, #fff 70%); }
.rt-all .rt-tray-h { top: 16px; width: auto; flex-direction: row; align-items: baseline; gap: 14px; }
.rt-all .rt-tray-ghosts { position: absolute; inset: 0; }
.rt-all .rt-ghost { position: absolute; width: 156px; height: 58px; border-radius: 10px; border: 1.5px dashed #dfe1e8; opacity: 0; }
.rt-all .rt-nothing { left: 20px; top: 50px; display: inline-flex; align-items: center; gap: 6px; color: #15803d; font-weight: 600; }
.rt-all .rt-nothing .ic { width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: #dcfce7; stroke-width: 3; }
.rt-all .rt-rows { position: absolute; inset: 0; pointer-events: none; }
.rt-all .rt-rows > * { pointer-events: auto; }
.rt-all .rt-cols { top: auto; }
.rt-all .rt-swap { display: inline-grid; vertical-align: baseline; }
.rt-all .rt-swap > * { grid-area: 1 / 1; position: static; white-space: nowrap; }
.rt-all .rt-waitdot { opacity: 0; }
.rt-all .rt-legend small { color: var(--muted); }
/* the product's slim plan bar */
.rt-all .rt-planbar { height: 54px; padding: 0 10px 0 16px; gap: 12px; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #e6e7ee, 0 16px 34px -16px rgb(40 24 90 / .4); }
.rt-all .rt-planbar > .ic { color: #7c5cff; }
.rt-all .rt-planbar b { font: 700 14px/1.1 var(--font); }
.rt-all .rt-planbar small { font-size: 11.5px; color: var(--muted); }
.rt-all .rt-discard { background: transparent; color: var(--muted); }
.rt-all .rt-apply .rt-press { background: var(--grad-brand); color: #fff; box-shadow: 0 8px 18px -8px rgb(124 92 255 / .6); }
@media (prefers-reduced-motion: no-preference) {
  .rt-all .rt-fly { animation: rt-flyall 9s cubic-bezier(.45, .05, .3, 1) infinite backwards; animation-delay: var(--d, 0s); }
  .rt-all .rtc::after, .rt-all .rtc-una { animation: rt-una 9s ease infinite backwards; animation-delay: var(--d, 0s); }
  .rt-all .rtc-new, .rt-all .rtc-ini { animation: rt-new 9s ease infinite backwards; animation-delay: var(--d, 0s); }
  .rt-all .rt-newchip { animation: rt-chip 9s ease infinite backwards; animation-delay: var(--d, 0s); }
  .rt-all .rt-tray { animation: rt-tray 9s cubic-bezier(.4, 0, .2, 1) infinite; }
  .rt-all .rt-rows { animation: rt-rows 9s cubic-bezier(.4, 0, .2, 1) infinite; }
  .rt-all .rt-ghost { animation: rt-ghost 9s ease infinite; }
  .rt-all .rt-waitdot { animation: rt-before 9s ease infinite; }
}
@keyframes rt-flyall { 0% { opacity: 0; transform: translate(var(--fx), var(--fy)); } 3%, 14% { opacity: 1; transform: translate(var(--fx), var(--fy)); } 22%, 94% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
@keyframes rt-una { 0%, 15% { opacity: 1; } 19%, 100% { opacity: 0; } }
@keyframes rt-new { 0%, 17% { opacity: 0; } 21%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rt-chip { 0%, 22% { opacity: 0; } 26%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes rt-tray { 0%, 31% { height: var(--tray-open); } 35%, 94% { height: 94px; } 98%, 100% { height: var(--tray-open); } }
@keyframes rt-rows { 0%, 31% { transform: translateY(var(--shift)); } 35%, 94% { transform: none; } 98%, 100% { transform: translateY(var(--shift)); } }
@keyframes rt-ghost { 0%, 13% { opacity: 0; } 16%, 31% { opacity: 1; } 34%, 100% { opacity: 0; } }

/* ---------------- Plan the day, playable (script.js [data-rt-demo], 2026-10-06) ----------------
   On the wide board the visitor drags work orders between trucks, reorders them or drops them back in
   Unassigned; the board is redrawn live, so the loop's animations are switched off there except for the
   plan bar, its buttons and the toast, which still follow the timeline. */
.rt-all .rt-traytiles { position: absolute; inset: 0; }
.rt-all .rt-wide .rtc { cursor: grab; }
.rt-all.is-live .rt-wide *:not(.rt-planbar):not(.rt-press):not(.rt-toast):not(.rt-hint) { animation: none !important; }
.rt-all.is-live .rt-wide .rt-tray { transition: height .45s cubic-bezier(.4, 0, .2, 1); }
.rt-all.is-live .rt-wide .rt-row, .rt-all.is-live .rt-wide .rt-cols { transition: top .45s cubic-bezier(.4, 0, .2, 1), height .45s cubic-bezier(.4, 0, .2, 1), background-color .15s ease; }
.rt-all.is-live .rt-wide .rt-waitdot { opacity: 1; }
.rt-all.is-live .rt-wide .rt-tray .rtc::after, .rt-all.is-live .rt-wide .rt-tray .rtc-una { opacity: 1; }
.rt-all.is-live .rt-wide .rt-tray .rtc-new, .rt-all.is-live:not([data-stage="1"]) .rt-wide .rtc-new { display: none; }
.rt-all.is-live.has-waiting .rt-wide .rt-traycount { opacity: 1; }
.rt-all.is-live.has-waiting .rt-wide .rt-nothing { opacity: 0; }
.rt-all.is-live .rt-wide .rtc { touch-action: none; user-select: none; -webkit-user-select: none; }
.rt-all.is-dragging, .rt-all.is-dragging * { cursor: grabbing !important; }
.rt-all .rt-fly.is-lifted { opacity: .25; }
.rt-all .rt-dragcard { z-index: 30; pointer-events: none; transform: rotate(-2deg) scale(1.05); box-shadow: inset 0 0 0 1px #e6e7ee, 0 24px 38px -14px rgb(30 20 80 / .45); }
.rt-all .rt-caret { position: absolute; z-index: 25; width: 4px; height: 58px; border-radius: 2px; background: #7c5cff; box-shadow: 0 0 0 4px rgb(124 92 255 / .18); pointer-events: none; }
.rt-all .rt-tray.is-target { box-shadow: inset 0 0 0 2px #a78bfa; }
.rt-all .rt-row.is-target { background: #faf8ff; }
.rt-all .rt-ot { margin-left: 6px; }