/* Skip Pilot banner refresh + video popup (8 Nov 2026). Loaded by every page. */
    /* ══ Banner refresh (Babar, 8 Nov 2026, design-shotgun variant A2) ══════════════
       Each page gets its own photograph (no trucks, no people: ChatGPT cannot draw a
       believable hook-lift) under a purple fade that is darkest behind the copy, and the
       real software on a straight-on iPad + iPhone. Text stays real HTML for search.
       The photo is set per page with --ph-img / --ph-img-md / --ph-img-sm. */
    .pagehead.ph-photo {
      background:
        linear-gradient(90deg, rgba(17,8,36,.94) 0%, rgba(33,14,74,.86) 34%, rgba(58,22,128,.46) 58%, rgba(76,29,149,.12) 100%),
        linear-gradient(0deg, rgba(15,14,23,.62) 0%, rgba(15,14,23,0) 34%),
        var(--ph-use, var(--ph-img)) 62% 50% / cover no-repeat,
        #1e1236;
    }
    .pagehead.ph-photo::before { display:none; }
    .pagehead.ph-photo .ph-canvas { opacity:.22; }
    .pagehead.ph-photo .ph-device { display:none; }
    .pagehead.ph-photo h1, .pagehead.ph-photo .pagehead-crumbs, .pagehead.ph-photo p { text-shadow:0 2px 18px rgba(10,5,25,.45); }

    .ph-ctas { position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:12px; margin-top:24px;
      animation: ph-up .6s .7s cubic-bezier(.22,.61,.36,1) both; }
    .ph-btn { display:inline-flex; align-items:center; gap:9px; min-height:48px; padding:12px 22px; border-radius:12px;
      background:#fff; color:#4c1d95; font:inherit; font-size:15px; font-weight:700; text-decoration:none; border:0; cursor:pointer;
      box-shadow:0 10px 30px rgba(10,5,25,.35); transition:transform .2s, background .2s; }
    .ph-btn:hover { transform:translateY(-1px); background:#f3eefd; }
    .ph-btn.ghost { background:rgba(255,255,255,.06); color:#fff; box-shadow:none; border:1.5px solid rgba(255,255,255,.62); }
    .ph-btn.ghost:hover { background:rgba(255,255,255,.14); }
    .ph-btn:focus-visible { outline:3px solid #ffd34d; outline-offset:3px; }

    /* The devices. Flat and straight on, thin dark bezels, one soft shadow: Babar
       rejected the angled laptop ("short legs, big body"). */
    .ph-devices { position:relative; z-index:1; margin:0; justify-self:end; align-self:center;
      width:min(44vw, 590px); padding:0 34px 26px 0;
      animation: ph-rise 1s .34s cubic-bezier(.22,.61,.36,1) both; }
    .dv-tab { background:#0c0a12; border-radius:24px; padding:11px; box-shadow:0 34px 80px rgba(6,3,16,.55), inset 0 0 0 1px rgba(255,255,255,.14); }
    .dv-tab img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; object-position:top; border-radius:13px; background:#f4f1fb; }
    .dv-phone { position:absolute; right:0; bottom:0; width:29%; background:#0c0a12; border-radius:30px; padding:6px;
      box-shadow:0 26px 60px rgba(6,3,16,.6), inset 0 0 0 1px rgba(255,255,255,.16); }
    .dv-phone img { display:block; width:100%; height:auto; aspect-ratio:390/844; object-fit:cover; object-position:top; border-radius:24px; background:#f4f1fb; }

    @media (max-width:1280px) { .pagehead.ph-photo { --ph-use: var(--ph-img-md); } }
    @media (max-width:900px) {
      .pagehead.ph-photo {
        background:
          linear-gradient(180deg, rgba(17,8,36,.90) 0%, rgba(33,14,74,.78) 46%, rgba(40,16,92,.52) 100%),
          var(--ph-img-sm) 62% 50% / cover no-repeat,
          #1e1236;
      }
      .ph-devices { display:block; justify-self:center; width:min(100%, 520px); margin-top:30px; padding:0 22px 18px 0; }
      .dv-tab { border-radius:18px; padding:8px; } .dv-tab img { border-radius:10px; }
      .dv-phone { border-radius:22px; padding:4px; } .dv-phone img { border-radius:18px; }
    }
    @media (max-width:480px) { .ph-btn { flex:1 1 auto; justify-content:center; } }
    @media (prefers-reduced-motion:reduce) { .ph-devices, .ph-ctas { animation:none !important; opacity:1; transform:none; } }

    /* Video popup for the inner pages (same look as the homepage one). Built by
       sp-video.v1.js on the first click, so no page downloads video on load. */
    .vid-modal { border:0; padding:0; margin:0; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; background:transparent; color:#fff; }
    .vid-modal[open] { display:flex; align-items:center; justify-content:center; }
    .vid-modal::backdrop { background:rgba(10,8,20,.88); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
    .vid-box { position:relative; width:min(1280px, 94vw, calc((100dvh - 120px) * 16 / 9)); aspect-ratio:16/9; background:#000; border-radius:14px; box-shadow:0 30px 90px rgba(0,0,0,.6); }
    .vid-box video { width:100%; height:100%; display:block; border-radius:14px; background:#000; }
    .vid-close { position:absolute; top:-50px; right:0; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center; }
    .vid-close:hover, .vid-close:focus-visible { background:rgba(255,255,255,.28); outline:none; }
    html.vid-open { overflow:hidden; }

    /* Home hero: the depot photo under the same purple, Mona's tour video stays on the right. */
    .hero.ph-photo {
      background:
        linear-gradient(90deg, rgba(17,8,36,.94) 0%, rgba(33,14,74,.86) 34%, rgba(58,22,128,.46) 58%, rgba(76,29,149,.12) 100%),
        linear-gradient(0deg, rgba(15,14,23,.6) 0%, rgba(15,14,23,0) 35%),
        var(--ph-use, var(--ph-img)) 60% 50% / cover no-repeat,
        #1e1236;
    }
    .hero.ph-photo .hero-canvas { opacity:.22; }
    @media (max-width:1280px) { .hero.ph-photo { --ph-use: var(--ph-img-md); } }
    @media (max-width:900px) {
      .hero.ph-photo { background:
        linear-gradient(180deg, rgba(17,8,36,.90) 0%, rgba(33,14,74,.78) 46%, rgba(40,16,92,.52) 100%),
        var(--ph-img-sm) 60% 50% / cover no-repeat, #1e1236; }
    }

    /* App photos on top of the Driver app / Admin on mobile cards (from feat/website-refresh,
       screens updated to the current app, 8 Nov 2026). */
    #mobile-app .mobile-col { overflow:hidden; }
    #mobile-app .mobile-shot { margin:-28px -28px 24px; aspect-ratio:2/1; overflow:hidden; position:relative; }
    #mobile-app .mobile-shot img { width:100%; height:100%; object-fit:cover; display:block; }

    /* Wide (tablet) section shots size by their own shape, not the phones' fixed 720px height,
       so the panel hugs the iPad instead of leaving empty space around it. */
    .shot-bare img[src*="desktop"] { height:auto; width:100%; max-height:none; }

    /* "Software built around how skip bins actually work": square dark picture that fills
       the box (Babar, 8 Nov 2026) instead of a wide picture floating in white space. */
    #seo-content .ind-image { background:#1c1a21 !important; border:0 !important; padding:0 !important; overflow:hidden; align-self:center; }
    #seo-content .ind-image picture { display:block; width:100%; height:auto; }
    #seo-content .ind-image picture img { display:block; width:100%; height:auto; object-fit:cover; }