/* Master Transport home page: "the journey story".

   Loaded ONLY by index.php (through $MT_HEAD_EXTRA), after theme.css and landing.css.
   Every rule is scoped under .lp, so terms, privacy, signup, support and the other
   pages that wear landing.css are untouched.

   The idea: the whole page is one trip. A route line (.lp-rail) runs down the left
   of the page from the hero to the closing band; each section is a numbered stop on
   it (.lp-stop, filled green by home.js once you have passed it); a small bus marker
   (.lp-bus) is sticky inside the rail, so it rides down the line as you scroll and
   its tail is the part of the route already travelled. The closing band is the flag.

   Section rhythm
     hero               navy: the live trip card and the parent's phone
     trip facts         white: KPI tiles over the hero edge, segments
     01 how it works    tint: Book, Board, Track with mini visuals
     02 three views     white: zig-zag rows, a device per role (driver row on navy)
     03 everything else tint: a bento of feature tiles, each with a small visual
     04 06:15 Monday    navy band: icon stat blocks
     05 pricing         white: monthly / annual toggle
     06 questions       tint: two-column FAQ on <details>
     arrived            navy: the flag, setup steps, CTAs

   Geometry: every section's content sits in .lp-in (max --lp-w, centred) and starts
   --lp-gut from its left edge; the rail sits --lp-rx from the same edge, so the stop
   markers (positioned from the section head) land exactly on the line. */

.lp {
    --lp-w: 1240px;
    --lp-rx: 32px;
    --lp-gut: 92px;
    --lp-pad: 20px;
    --lp-bg: #fff;
    --lp-r: 20px;
    --lp-shadow: 0 1px 2px rgba(12,35,64,.04), 0 10px 30px rgba(12,35,64,.08);
    --lp-shadow-lg: 0 30px 70px rgba(4,13,26,.28);
    color: var(--ms-ink);
}
@media (min-width: 1500px) { .lp { --lp-w: 1320px; } }
@media (max-width: 1023px) { .lp { --lp-rx: 24px; --lp-gut: 66px; } }
@media (max-width: 599px)  { .lp { --lp-rx: 19px; --lp-gut: 46px; --lp-pad: 16px; } }
/* A phone: the route keeps to a narrow lane so the cards and devices get the width,
   but far enough in that a 22px stop and its 4px ring start inside the screen (x >= 1). */
@media (max-width: 479px)  { .lp { --lp-rx: 16px; --lp-gut: 36px; } }

.lp h1, .lp h2, .lp h3 { letter-spacing: -.015em; }
.lp .lp-hl { color: var(--ms-green-600); }
.lp [id] { scroll-margin-top: 84px; }
.lp .btn .ic { width: 20px; height: 20px; }
.lp .avatar { width: 30px; height: 30px; font-size: 11px; letter-spacing: .02em; }

/* An icon (index.php, $lpI): one empty <i>. Its drawing, the library's own, is a mask
   (--lpi, set per icon by the .lpi-NAME rules index.php writes into <head>) painted in
   the text colour on ::before, which fills the icon's content box. So a size class (.ic,
   .ic-sm) sizes it, and an icon tile keeps its fill, border and padding on the <i>
   itself, exactly as it did on an <svg>. */
.lpi { display: inline-block; flex: 0 0 auto; }
.lpi::before {
    content: ""; display: block; width: 100%; height: 100%;
    background: currentColor;
    -webkit-mask: var(--lpi) center / contain no-repeat;
    mask: var(--lpi) center / contain no-repeat;
}
/* an amount or a code in running text ("R 1 100,00", "ND 224-118") stays on one line */
.lp .lp-nw { white-space: nowrap; }

/* =============================================================== HERO */
.lp-hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(1100px 600px at 92% -10%, rgba(35,132,46,.24), transparent 60%),
        radial-gradient(900px 520px at -10% 110%, rgba(29,79,136,.36), transparent 58%),
        var(--ms-navy-950);
    color: #fff;
    padding: 64px var(--lp-pad) 112px;
}
/* a faint map grid and a road sweeping behind the copy */
.lp-hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 75%);
}
.lp-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 800' preserveAspectRatio='xMidYMid slice'><path d='M-40 760 C 200 700, 260 820, 480 660 S 860 420, 1080 380 S 1300 240, 1460 100' fill='none' stroke='%234ab653' stroke-width='3' stroke-linecap='round' stroke-dasharray='2 12'/><circle cx='1080' cy='380' r='9' fill='%23081b33' stroke='%234ab653' stroke-width='3'/><circle cx='1349' cy='215' r='9' fill='%23081b33' stroke='%234ab653' stroke-width='3'/></svg>") no-repeat center / cover;
}
/* (The stop rings sit on the right, behind or beside the trip card, never under the copy.) */
.lp-hero-in {
    position: relative; z-index: 1;
    max-width: calc(var(--lp-w) - 2 * var(--lp-pad)); margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px;
}
.lp-pill {
    display: inline-flex; align-items: center; gap: 9px;
    border: 1px solid rgba(74,182,83,.42);
    background: rgba(35,132,46,.16);
    color: var(--ms-green-400);
    border-radius: 999px;
    font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    padding: 7px 15px; margin-bottom: 22px;
}
.lp-hero h1 {
    color: #fff; font-size: 56px; line-height: 1.06; letter-spacing: -.03em;
    margin: 0 0 22px;
}
.lp-hero h1 .lp-hl {
    color: var(--ms-green-400);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 14' preserveAspectRatio='none'><path d='M2 9 C 80 3, 160 12, 240 6 S 360 4, 398 8' fill='none' stroke='%234ab653' stroke-width='3' stroke-linecap='round' stroke-dasharray='1 9'/></svg>") no-repeat left bottom / 100% 12px;
    padding-bottom: 6px;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.lp-lead { color: rgba(255,255,255,.8); font-size: 18px; line-height: 1.55; margin: 0 0 16px; max-width: 560px; }
.lp-asks {
    list-style: none; margin: 0 0 18px; padding: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
    max-width: 580px;
}
.lp-asks li {
    display: flex; align-items: center; gap: 9px;
    padding: 10px 12px; min-height: 44px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    border-radius: 12px;
    font-size: 14px; font-weight: 700; line-height: 1.25; color: #fff;
}
.lp-asks .ic-sm { color: var(--ms-green-400); }
.lp-hero-note { display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,.72); font-size: 15px; margin: 0 0 28px; max-width: 560px; }
.lp-hero-note .ic-sm { color: var(--ms-green-400); margin-top: 3px; }
.lp-hero-note b { color: #fff; }
.lp-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-points { list-style: none; padding: 0; margin: 26px 0 0; display: flex; gap: 10px 22px; flex-wrap: wrap; color: rgba(255,255,255,.72); font-size: 13.5px; font-weight: 600; }
.lp-points li { display: flex; gap: 7px; align-items: center; }
.lp-points .ic-sm { color: var(--ms-green-400); }

/* ------------------------------------------------ the hero picture */
.lp-stage { position: relative; width: 100%; max-width: 590px; margin: 0 auto; padding: 0 70px 0 0; }
.lp-trip {
    position: relative; z-index: 1;
    background: #fff; color: var(--ms-ink);
    border-radius: 20px;
    box-shadow: 0 40px 90px rgba(2,10,22,.55), 0 0 0 1px rgba(255,255,255,.06);
    overflow: hidden;
}
.lp-trip-bar {
    display: flex; align-items: center; gap: 10px;
    background: var(--ms-navy-900); color: #fff;
    padding: 11px 16px;
    font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.lp-trip-bar .live-dot { background: var(--ms-green-400); }
.lp-trip-clock { margin-left: auto; color: rgba(255,255,255,.6); font-variant-numeric: tabular-nums; letter-spacing: .03em; }
.lp-trip-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px 12px; }
.lp-trip-head b { display: block; font-size: 16px; color: var(--ms-navy-900); line-height: 1.25; }
.lp-trip-head small { display: block; color: var(--ms-muted); font-size: 12.5px; font-weight: 500; }
.lp-map { position: relative; border-top: 1px solid var(--ms-line); border-bottom: 1px solid var(--ms-line); }
.lp-map-svg { display: block; width: 100%; height: auto; aspect-ratio: 480 / 176; }
.lp-map .jm-label { font-size: 11px; stroke: #e9eff5; }
.lp-map .lp-lbl-end { text-anchor: end; }
.lp-map-eta {
    position: absolute; top: 10px; left: 10px;
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.96); border: 1px solid var(--ms-line);
    border-radius: 999px; padding: 5px 10px 5px 9px;
    font-size: 12.5px; font-weight: 700; color: var(--ms-navy-900);
    box-shadow: 0 4px 14px rgba(12,35,64,.12);
}
.lp-map-eta .ic-sm { width: 15px; height: 15px; color: var(--ms-green-600); }
/* The recorded trail is always drawn. With motion welcome, home.js swaps the parked
   marker for the one that replays the morning up to the last recorded position. */
.lp-bus-live { display: none; }
.lp-map-svg.is-live .lp-bus-live { display: inline; }
.lp-map-svg.is-live .lp-bus-static { display: none; }
.lp-bus-halo { fill: rgba(46,158,58,.22); transform-box: fill-box; transform-origin: center; }
.lp-trip-body { padding: 12px 16px 4px; }
.lp-trip-manifest {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--ms-line);
}
.lp-mf-avs { display: inline-flex; }
.lp-mf-avs .avatar { width: 28px; height: 28px; font-size: 10.5px; background: #c3ccd6; border: 2px solid #fff; margin-left: -6px; position: relative; }
.lp-mf-avs .avatar:first-child { margin-left: 0; }
.lp-mf-avs .avatar.on { background: var(--ms-green-600); box-shadow: 0 0 0 2px var(--ms-green-100); z-index: 1; }
/* still to collect: a pale disc with navy initials (8.4:1), not yet boarded but legible */
.lp-mf-avs .avatar:not(.on) { background: var(--ms-navy-100); color: var(--ms-navy-700); }
.lp-mf-sum { font-size: 13px; color: var(--ms-muted); }
.lp-mf-sum b { color: var(--ms-navy-900); }
.lp-trip .route-line { padding-top: 2px; }
.lp-trip .rl-item { padding-bottom: 8px; }
.lp-trip .rl-item:last-child { padding-bottom: 4px; }
.lp-trip .rl-label { font-size: 14px; }
.lp-trip .rl-detail { font-size: 12.5px; }
.lp-trip-foot { display: flex; gap: 9px; align-items: flex-start; padding: 10px 16px 13px; border-top: 1px solid var(--ms-line); font-size: 12.5px; line-height: 1.45; color: var(--ms-muted); background: #fbfcfd; }
.lp-trip-foot .ic-sm { color: var(--ms-green-600); margin-top: 1px; }
.lp-trip-foot b { color: var(--ms-navy-900); }
/* room on the right of the timeline for the phone laid over the card */
@media (min-width: 640px) {
    .lp-trip-body, .lp-trip-foot { padding-right: 166px; }
}

/* ------------------------------------------------ device frames (shared) */
.lp-phone {
    position: relative;
    width: 250px;
    background: linear-gradient(160deg, #1b2a40, #0a1526 60%);
    border-radius: 38px;
    padding: 8px;
    box-shadow: 0 34px 70px rgba(4,13,26,.42), inset 0 0 0 1.5px rgba(255,255,255,.1);
}
.lp-screen {
    position: relative; overflow: hidden;
    border-radius: 31px;
    background: var(--ms-bg);
    color: var(--ms-ink);
    font-size: 12px; line-height: 1.35;
}
.lp-screen::before {
    content: ""; position: absolute; top: 7px; left: 50%; z-index: 3;
    width: 74px; height: 20px; margin-left: -37px;
    background: #0a1526; border-radius: 999px;
}
.lp-status {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 20px 6px 24px; min-height: 34px;
    font-size: 11.5px; font-weight: 800; color: var(--ms-navy-900); font-variant-numeric: tabular-nums;
}
/* signal strength: four bars drawn as one element */
.lp-bars {
    display: inline-block; width: 18px; height: 10px;
    background:
        linear-gradient(var(--ms-navy-900), var(--ms-navy-900)) 0 100% / 3px 4px no-repeat,
        linear-gradient(var(--ms-navy-900), var(--ms-navy-900)) 5px 100% / 3px 6px no-repeat,
        linear-gradient(var(--ms-navy-900), var(--ms-navy-900)) 10px 100% / 3px 8px no-repeat,
        linear-gradient(var(--ms-navy-900), var(--ms-navy-900)) 15px 100% / 3px 10px no-repeat;
}
.lp-screen .micro { font-size: 9.5px; }
.lp-screen .chip-sm { font-size: 10px; padding: 2px 8px 2px 7px; gap: 5px; }
.lp-screen .chip-sm::before { width: 6px; height: 6px; }
.lp-screen .rl-tag { font-size: 8.5px; padding: 0 6px; }
.lp-screen .avatar { width: 26px; height: 26px; font-size: 9.5px; }
.lp-botnav {
    display: flex; justify-content: space-around;
    background: linear-gradient(180deg, var(--ms-navy-900), var(--ms-navy-950));
    padding: 10px 6px 14px;
}
.lp-botnav span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; color: rgba(255,255,255,.6); }
.lp-botnav .ic-sm { width: 17px; height: 17px; }
.lp-botnav .on { color: #fff; }
.lp-botnav .on .ic-sm { color: var(--ms-green-400); }
.lp-botnav .on::before { content: ""; position: absolute; top: -8px; left: 50%; margin-left: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--ms-green-400); box-shadow: 0 0 8px rgba(74,182,83,.7); }

/* the parent's phone in the hero: low enough that, even at the top of its float, it
   stays clear of the route's last stretch and the School stop drawn on the map above it */
.lp-phone-stack { position: absolute; right: 0; top: 160px; z-index: 2; width: 226px; }
.lp-phone-hero { width: 100%; }
.lp-notif {
    display: flex; gap: 9px; align-items: flex-start;
    margin: 4px 9px 10px; padding: 10px 11px;
    background: rgba(255,255,255,.97);
    border-radius: 16px;
    box-shadow: 0 8px 22px rgba(12,35,64,.16);
}
.lp-notif-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: var(--ms-green-600); color: #fff; display: flex; align-items: center; justify-content: center; }
.lp-notif-top { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; color: var(--ms-muted); text-transform: uppercase; letter-spacing: .05em; }
.lp-notif-top b { font-weight: 800; color: var(--ms-navy-800); }
.lp-notif strong { display: block; font-size: 12px; line-height: 1.3; color: var(--ms-navy-900); margin-top: 2px; }
.lp-portal { background: #fff; margin: 0 9px 10px; border-radius: 16px; padding: 12px; box-shadow: 0 2px 10px rgba(12,35,64,.06); }
.lp-portal-eta { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.lp-eta-big { font-size: 30px; font-weight: 800; color: var(--ms-navy-900); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.lp-portal-eta > span:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 11px; color: var(--ms-muted); font-weight: 600; }
.lp-strip { display: flex; justify-content: space-between; position: relative; margin: 0 0 12px; padding-top: 16px; }
.lp-strip::before { content: ""; position: absolute; top: 5px; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, var(--ms-green-500) 0 50%, #c3ccd6 50% 100%); }
.lp-strip span { position: relative; flex: 1; text-align: center; font-size: 9.5px; font-weight: 700; color: var(--ms-muted); }
.lp-strip span::before { content: ""; position: absolute; top: -16px; left: 50%; margin-left: -6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2.5px solid #c3ccd6; }
.lp-strip .done::before { background: var(--ms-green-500); border-color: var(--ms-green-500); }
.lp-strip .here::before { background: var(--ms-green-500); border-color: #fff; box-shadow: 0 0 0 2px var(--ms-green-500), 0 0 0 6px rgba(46,158,58,.2); }
.lp-strip .here { color: var(--ms-green-800); }
.lp-strip .dest::before { border-color: var(--ms-navy-800); }
.lp-drv-card { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--ms-line); }
.lp-drv-card div { flex: 1; min-width: 0; }
.lp-drv-card b { display: block; font-size: 12px; color: var(--ms-navy-900); }
.lp-drv-card small { display: block; font-size: 10.5px; color: var(--ms-muted); }
.lp-drv-card .plate { font-size: 9.5px; padding: 0 5px; border-width: 1.2px; }
/* The line under the parent's phone, tied to it by a short connector: one message.
   Its green accent (like the invoice and running-late cards) is a 3px strip painted as
   the top of its own background, so the rounded corners clip it cleanly; a 3px
   border-top on a 14px radius would taper into crescents at the corners. */
.lp-note {
    position: relative; z-index: 3;
    display: flex; gap: 10px; align-items: flex-start;
    margin: 18px 6px 0;
    color: var(--ms-ink);
    border-radius: 14px;
    background: linear-gradient(var(--ms-green-500), var(--ms-green-500)) top / 100% 3px no-repeat, #fff;
    padding: 14px 13px 11px;
    font-size: 12.5px; line-height: 1.4; font-weight: 600;
    box-shadow: 0 18px 40px rgba(2,10,22,.4);
}
.lp-note::before {
    content: ""; position: absolute; left: 50%; top: -21px; width: 2px; height: 18px; margin-left: -1px;
    background: var(--ms-green-400);
}
.lp-note::after {
    content: ""; position: absolute; left: 50%; top: -25px; width: 8px; height: 8px; margin-left: -4px;
    border-radius: 50%; background: var(--ms-green-400); box-shadow: 0 0 0 3px rgba(74,182,83,.25);
}
.lp-note strong { display: none; }
.lp-note-ic { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--ms-green-50); color: var(--ms-green-700); display: flex; align-items: center; justify-content: center; }

/* =============================================================== THE JOURNEY */
.lp-journey { position: relative; }
.lp-in { position: relative; max-width: var(--lp-w); margin: 0 auto; padding: 0 var(--lp-pad) 0 var(--lp-gut); }
.lp-sec { padding: 96px 0; background: var(--lp-bg); overflow-x: clip; }
.lp-tint { --lp-bg: var(--ms-bg); }
.lp-dark { --lp-bg: var(--ms-navy-950); color: #fff; }

/* The route. 40px wide so the bus fits inside it; the line is its background. */
.lp-rail {
    position: absolute; top: 31px; bottom: 0; z-index: 3;
    left: calc(max(0px, (100% - var(--lp-w)) / 2) + var(--lp-rx) - 20px);
    width: 40px;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(46,158,58,.55) 0 8px, transparent 8px 15px) center top / 3px 100% no-repeat;
    /* Cuts the travelled tail off at the top and bottom of the route, and leaves room at
       the sides for the bus's halo and ping (clip-path, unlike overflow-clip-margin, is
       honoured by Safari). */
    -webkit-clip-path: inset(0 -24px 0 -24px);
    clip-path: inset(0 -24px 0 -24px);
}
/* The bus waits whole just below the depot (never half cut off by the rail's top edge),
   then rides with its centre on 46vh, the line home.js marks the stops against. Each
   size below keeps the same pair: margin-top clears the depot dot, and top is 46vh less
   half the bus. */
.lp-bus {
    position: sticky; top: calc(46vh - 16px);
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin: 20px auto 0;
    border-radius: 50%;
    background: var(--ms-green-500); color: #fff;
    border: 2.5px solid #fff;
    box-shadow: 0 0 0 5px rgba(74,182,83,.22), 0 8px 18px rgba(8,27,51,.28);
}
.lp-bus .ic-sm { width: 16px; height: 16px; }
.lp-bus::before {
    content: ""; position: absolute; z-index: -1;
    left: 50%; bottom: 50%; width: 3px; margin-left: -1.5px;
    height: 30000px;
    background: var(--ms-green-500);
}
.lp-bus::after {
    content: ""; position: absolute; inset: -9px; border-radius: 50%;
    border: 2px solid rgba(74,182,83,.5);
    animation: lp-ping 2.2s ease-out infinite;
}
@keyframes lp-ping { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

/* A stop on the route, positioned from the section head so it lands on the line. */
.lp-head { position: relative; max-width: 760px; margin-bottom: 48px; }
.lp-stop {
    position: absolute; z-index: 4;
    left: calc(var(--lp-rx) - var(--lp-gut) - 17px); top: -6px;
    width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--ms-navy-900);
    border: 3px solid var(--ms-green-500);
    font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 7px var(--lp-bg);
    /* the number turns white halfway through the fill (a single change, not a fade) */
    transition: color 0s linear .17s;
}
/* Reached: a green fill and glow on their own layer, faded in on opacity alone. The
   layer sits under the number (z-index -1 inside the stop's own stacking context). */
.lp-stop::after {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
    background: var(--ms-green-500); box-shadow: 0 0 22px rgba(74,182,83,.65);
    opacity: 0; transition: opacity .35s ease;
}
.lp-stop.is-reached { color: #fff; }
.lp-stop.is-reached::after { opacity: 1; }
.lp-dark .lp-stop { background: var(--ms-navy-950); color: #fff; }
/* the depot: where the route starts, a solid navy check-in dot on the line */
.lp-stop-depart {
    z-index: 2; top: 20px; width: 22px; height: 22px;
    left: calc(max(0px, (100% - var(--lp-w)) / 2) + var(--lp-rx) - 11px);
    background: var(--ms-navy-800); border: 4px solid #fff;
    box-shadow: 0 0 0 2px var(--ms-navy-800), 0 6px 14px rgba(12,35,64,.25);
}
.lp-stop-depart::after { display: none; }
.lp-eyebrow { color: var(--ms-green-700); font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; line-height: 22px; }
.lp-head h2 { font-size: 44px; line-height: 1.1; letter-spacing: -.025em; margin: 0 0 14px; }
.lp-sub { color: var(--ms-muted); font-size: 18px; line-height: 1.6; margin: 0; max-width: 680px; }
.lp-sub b { color: var(--ms-navy-900); }
.lp-dark h2, .lp-dark h3 { color: #fff; }
.lp-dark .lp-eyebrow { color: var(--ms-green-400); }
.lp-dark .lp-hl { color: var(--ms-green-400); }

/* ------------------------------------------------ trip facts (check in) */
.lp-facts { padding: 0 0 72px; display: flow-root; overflow: visible; }
.lp-kpis {
    position: relative; z-index: 4;
    list-style: none; padding: 0; margin: -64px 0 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px;
}
.lp-kpi {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid rgba(221,228,236,.9);
    border-radius: var(--lp-r);
    box-shadow: 0 20px 44px rgba(12,35,64,.13);
    padding: 20px 18px 18px;
    min-width: 0;
}
.lp-kpi-ic { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--ms-green-50); color: var(--ms-green-700); border: 1px solid var(--ms-green-100); margin-bottom: 14px; }
.lp-kpi:nth-child(even) .lp-kpi-ic { background: var(--ms-navy-50); color: var(--ms-navy-700); border-color: var(--ms-navy-100); }
.lp-kpi-n { font-size: 40px; font-weight: 800; line-height: 1; color: var(--ms-navy-900); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.lp-kpi-n.word { font-size: 26px; line-height: 40px; letter-spacing: -.01em; }
.lp-kpi-t { font-size: 14px; font-weight: 800; color: var(--ms-green-700); margin: 6px 0 4px; }
.lp-kpi-l { font-size: 13px; line-height: 1.45; color: var(--ms-muted); }

.lp-segs { margin-top: 40px; }
.lp-segs-t { margin: 0 0 14px; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-navy-800); flex: 0 0 auto; }
.lp-segs ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-segs li {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 14px 7px 8px; min-height: 40px;
    border-radius: 999px;
    background: var(--ms-bg); border: 1px solid var(--ms-line);
    font-size: 13.5px; font-weight: 700; color: var(--ms-navy-900);
}
.lp-segs li .ic { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: #fff; color: var(--ms-green-700); box-shadow: 0 1px 3px rgba(12,35,64,.12); }

/* ------------------------------------------------ 01 how it works */
.lp-how { list-style: none; margin: 0; padding: 0; position: relative; container-type: inline-size; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* the route between the three stops, with a dot running along it */
.lp-how::before {
    content: ""; position: absolute; top: 24px; left: 24px;
    width: calc((200% + 48px) / 3); height: 3px; margin-top: -1.5px;
    background: repeating-linear-gradient(90deg, var(--ms-green-500) 0 10px, transparent 10px 16px);
    opacity: .7;
}
.lp-how-step { position: relative; display: flex; flex-direction: column; min-width: 0; }
.lp-how-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.lp-how-num {
    position: relative; z-index: 1;
    width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--ms-green-600); color: #fff;
    box-shadow: 0 0 0 6px var(--lp-bg), 0 10px 22px rgba(35,132,46,.35);
}
.lp-how-k { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ms-green-700); background: var(--lp-bg); padding: 0 6px; position: relative; z-index: 1; }
.lp-who { margin-left: auto; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ms-navy-800); background: #fff; border: 1px solid var(--ms-line); border-radius: 999px; padding: 5px 11px; position: relative; z-index: 1; white-space: nowrap; }
.lp-how-card {
    flex: 1;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid rgba(221,228,236,.9);
    border-radius: var(--lp-r);
    box-shadow: var(--lp-shadow);
    padding: 16px 16px 22px;
}
.lp-how-vis {
    border-radius: 14px;
    background:
        radial-gradient(circle at 1px 1px, rgba(12,35,64,.09) 1px, transparent 1.5px) 0 0 / 14px 14px,
        linear-gradient(160deg, var(--ms-navy-50), #f7fafc);
    padding: 18px;
    min-height: 272px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px;
}
.lp-how-card h3 { font-size: 24px; margin: 0 6px 6px; }
.lp-how-card > p { margin: 0 6px 12px; color: var(--ms-navy-800); font-weight: 600; font-size: 15.5px; }
.lp-ticks { list-style: none; padding: 0; margin: 0 6px; }
.lp-ticks li { position: relative; padding: 6px 0 6px 28px; font-size: 14.5px; line-height: 1.5; color: var(--ms-muted); }
.lp-ticks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 17px; height: 17px; border-radius: 50%; background: var(--ms-green-100); }
.lp-ticks li::after { content: ""; position: absolute; left: 5px; top: 14px; width: 6px; height: 3.5px; border-left: 2px solid var(--ms-green-700); border-bottom: 2px solid var(--ms-green-700); transform: rotate(-45deg); }

/* the mini product cards inside the three stops */
.lp-mini {
    width: 100%; max-width: 330px;
    background: #fff; border-radius: 14px;
    box-shadow: 0 12px 30px rgba(12,35,64,.13), 0 0 0 1px rgba(221,228,236,.8);
    padding: 12px; font-size: 12.5px;
}
.lp-mini-head { display: flex; align-items: center; gap: 9px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--ms-line); }
.lp-mini-head div { flex: 1; min-width: 0; }
.lp-mini-head b { display: block; font-size: 13px; color: var(--ms-navy-900); line-height: 1.25; }
.lp-mini-head small { display: block; font-size: 11px; color: var(--ms-muted); }
.lp-mini-ic { width: 30px; height: 30px; border-radius: 9px; background: var(--ms-green-50); color: var(--ms-green-700); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.lp-mini .chip-sm { font-size: 10.5px; padding: 2px 8px 2px 7px; }
.lp-mini-rows { list-style: none; padding: 0; margin: 0 0 8px; }
.lp-mini-rows li { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--ms-navy-900); font-weight: 600; }
.lp-mini-rows .ic-sm { width: 15px; height: 15px; color: var(--ms-navy-500); }
.lp-mini-rows span { flex: 1; min-width: 0; }
.lp-mini-rows em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ms-green-800); background: var(--ms-green-50); border: 1px solid var(--ms-green-100); border-radius: 999px; padding: 1px 7px; }
.lp-mini-sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; background: var(--ms-bg); border-radius: 10px; padding: 8px 10px; }
.lp-mini-sign .micro { display: block; font-size: 9.5px; }
.lp-sig { display: block; width: 104px; height: 30px; color: var(--ms-navy-800); }
.lp-pax { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 10px; border: 1px solid var(--ms-line); margin-top: 6px; }
.lp-pax { flex-wrap: wrap; row-gap: 6px; }
.lp-pax b { flex: 1 0 auto; font-size: 12.5px; color: var(--ms-navy-900); white-space: nowrap; }
.lp-pax-acts { display: inline-flex; gap: 5px; margin-left: auto; }
.lp-pax .avatar { width: 26px; height: 26px; font-size: 9.5px; }
.lp-pax.on { background: var(--ms-green-50); border-color: var(--ms-green-100); }
.lp-pax.on .avatar { background: var(--ms-green-600); }
.lp-pax.np { background: #fffaeb; border-color: #f5d78e; }
.lp-fbtn { font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 5px 10px; background: var(--ms-green-600); color: #fff; }
.lp-fbtn.ghost { background: #fff; color: var(--ms-navy-800); border: 1.5px solid var(--ms-navy-800); padding: 3.5px 8px; }
.lp-mini-track { position: relative; padding: 0; overflow: hidden; }
.lp-mini-track svg { display: block; width: 100%; height: auto; }
.lp-mini-eta { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.96); border-radius: 999px; padding: 3px 9px; font-size: 11.5px; font-weight: 700; color: var(--ms-navy-900); box-shadow: 0 3px 10px rgba(12,35,64,.12); }
.lp-mini-eta .rl-tag { font-size: 8.5px; padding: 0 6px; }
.lp-mini-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px 12px; }
.lp-mini-chips .chip .ic-sm { width: 12px; height: 12px; }
/* five stars, drawn as one element: the library's star-filled shape repeated */
.lp-stars, .lp-rate-row::after {
    display: inline-block; flex: 0 0 auto; width: 75px; height: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='m12 2.5 2.9 6 6.6 1-4.8 4.6 1.2 6.5L12 17.5l-5.9 3.1 1.2-6.5L2.5 9.5l6.6-1z' fill='%23e8a915' stroke='%23e8a915' stroke-width='1.8' stroke-linejoin='round'/></svg>") 0 0 / 15px 14px repeat-x;
}

/* ------------------------------------------------ 02 three views */
/* the old way: three crossed-out chips, each kept whole on its line */
.lp-sub-x { margin-bottom: 14px; }
.lp-olds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.lp-olds li {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 40px; padding: 7px 14px 7px 8px;
    background: #fff; border: 1px dashed #c3ccd6; border-radius: 18px;
    font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--ms-navy-800);
}
/* A wide screen keeps each chip on one line and strikes it through. On a phone the long
   chip wraps, and a strike through two lines is hard to read, so the red cross says it. */
@media (min-width: 761px) {
    .lp-olds li { white-space: nowrap; text-decoration: line-through; text-decoration-color: rgba(198,40,40,.7); text-decoration-thickness: 2px; }
}
.lp-olds .ic-sm { flex: 0 0 auto; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--mt-red-bg); color: var(--ms-danger); }
.lp-jump { display: flex; flex-wrap: wrap; gap: 10px; margin: -18px 0 44px; }
.lp-jump a {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 48px; padding: 6px 18px 6px 7px;
    border-radius: 999px; border: 1px solid var(--ms-line); background: #fff;
    color: var(--ms-navy-900); font-weight: 700; font-size: 14.5px;
    box-shadow: 0 2px 8px rgba(12,35,64,.05);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lp-jump a:hover { text-decoration: none; border-color: var(--ms-green-500); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(12,35,64,.1); }
.lp-jump a:focus-visible { outline: 3px solid var(--ms-green-600); outline-offset: 2px; }
.lp-jump-s { display: none; }
.lp-jump-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--ms-green-50); color: var(--ms-green-700); display: flex; align-items: center; justify-content: center; }

.lp-roles { display: flex; flex-direction: column; gap: 40px; }
.lp-role { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: center; }
.lp-role-rev .lp-role-copy { order: 2; }
.lp-role-for { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-green-700); }
.lp-role-ic { width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--ms-green-600); color: #fff; box-shadow: 0 10px 20px rgba(35,132,46,.28); }
.lp-role h3 { font-size: 34px; line-height: 1.12; margin: 0 0 10px; letter-spacing: -.025em; }
.lp-role-lead { font-size: 17px; color: var(--ms-muted); margin: 0 0 22px; max-width: 480px; }
.lp-role-lead b { color: var(--ms-navy-900); }
.lp-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lp-checks li { display: flex; align-items: center; gap: 14px; padding: 9px 12px 9px 0; font-size: 15px; line-height: 1.45; color: var(--ms-muted); border-radius: 12px; }
.lp-checks b { color: var(--ms-navy-900); font-weight: 700; }
.lp-ck { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--ms-green-700); border: 1px solid var(--ms-line); box-shadow: 0 2px 6px rgba(12,35,64,.06); }

/* the driver row: a navy panel */
.lp-role-dark {
    position: relative; overflow: hidden;
    background:
        radial-gradient(600px 400px at 20% 0%, rgba(35,132,46,.28), transparent 65%),
        linear-gradient(150deg, var(--ms-navy-950), var(--ms-navy-900) 60%, var(--ms-navy-800));
    border-radius: 28px;
    padding: 56px;
    color: #fff;
}
.lp-role-dark h3 { color: #fff; }
.lp-role-dark .lp-role-for { color: var(--ms-green-400); }
.lp-role-dark .lp-role-lead { color: rgba(255,255,255,.72); }
.lp-role-dark .lp-role-lead .lp-hl { color: var(--ms-green-400); }
.lp-role-dark .lp-checks li { color: rgba(255,255,255,.68); }
.lp-role-dark .lp-checks b { color: #fff; }
.lp-role-dark .lp-ck { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: var(--ms-green-400); box-shadow: none; }

/* the visual panels beside each role */
.lp-role-vis {
    position: relative;
    min-height: 480px;
    border-radius: 28px;
    display: flex; align-items: center; justify-content: center;
    padding: 44px 28px;
}
.lp-vis-light {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 480' preserveAspectRatio='none'><path d='M-10 420 C 140 380, 180 460, 300 380 S 480 160, 610 120' fill='none' stroke='%232e9e3a' stroke-width='2.5' stroke-dasharray='2 10' stroke-linecap='round' opacity='.55'/></svg>") no-repeat center / 100% 100%,
        radial-gradient(circle at 1px 1px, rgba(12,35,64,.08) 1px, transparent 1.5px) 0 0 / 18px 18px,
        linear-gradient(160deg, var(--ms-navy-50), #f6f9fc 55%, var(--ms-green-50));
    border: 1px solid rgba(221,228,236,.8);
}
.lp-vis-green {
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 480' preserveAspectRatio='none'><path d='M-10 100 C 150 140, 160 40, 320 120 S 480 420, 610 380' fill='none' stroke='%232e9e3a' stroke-width='2.5' stroke-dasharray='2 10' stroke-linecap='round' opacity='.55'/></svg>") no-repeat center / 100% 100%,
        radial-gradient(circle at 1px 1px, rgba(35,132,46,.12) 1px, transparent 1.5px) 0 0 / 18px 18px,
        linear-gradient(160deg, var(--ms-green-50), #f7fbf8 55%, var(--ms-navy-50));
    border: 1px solid var(--ms-green-100);
}
.lp-vis-dark { padding: 20px 0; min-height: 560px; }
.lp-vis-dark::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: 380px; height: 380px; margin: -190px 0 0 -190px;
    border-radius: 50%; background: radial-gradient(circle, rgba(74,182,83,.28), transparent 65%);
    pointer-events: none;
}

/* laptop: the owner's dashboard */
.lp-laptop { position: relative; width: 100%; max-width: 620px; container-type: inline-size; }
.lp-lt-screen { background: #0f1b2b; border-radius: 16px 16px 6px 6px; padding: 10px 10px 12px; box-shadow: 0 30px 60px rgba(12,35,64,.28), inset 0 0 0 1px rgba(255,255,255,.06); }
.lp-lt-base { height: 14px; margin: 0 -5%; background: linear-gradient(180deg, #d9e0e8, #aeb9c6); border-radius: 2px 2px 14px 14px; position: relative; box-shadow: 0 16px 24px rgba(12,35,64,.18); }
.lp-lt-base::before { content: ""; position: absolute; top: 0; left: 50%; width: 90px; height: 5px; margin-left: -45px; background: #9aa7b5; border-radius: 0 0 8px 8px; }
.lp-app { display: flex; background: var(--ms-bg); border-radius: 6px; overflow: hidden; font-size: 10.5px; line-height: 1.3; min-height: 330px; }
.lp-app-side {
    flex: 0 0 132px; position: relative;
    display: flex; flex-direction: column; gap: 2px;
    background: linear-gradient(180deg, var(--ms-navy-950), var(--ms-navy-900));
    padding: 8px 8px 10px 0; color: rgba(255,255,255,.7);
}
.lp-app-side::before { content: ""; position: absolute; left: 15px; top: 52px; bottom: 12px; width: 2px; background: var(--ms-green-400); opacity: .6; }
.lp-app-logo { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 7px; margin: 0 0 6px 8px; height: 30px; }
.lp-app-logo img { height: 22px; width: auto; }
.lp-app-grp { padding: 8px 0 2px 30px; font-size: 7.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.lp-app-side > span:not(.lp-app-logo):not(.lp-app-grp) { position: relative; display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 30px; font-weight: 700; font-size: 10px; border-radius: 0 999px 999px 0; }
.lp-app-side > span:not(.lp-app-logo):not(.lp-app-grp)::before { content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--ms-navy-950); border: 2px solid var(--ms-green-400); }
.lp-app-side .on { background: rgba(255,255,255,.1); color: #fff; }
.lp-app-side .on::before { background: var(--ms-green-400) !important; box-shadow: 0 0 8px rgba(74,182,83,.8); }
.lp-app-side .ic-sm { width: 12px; height: 12px; }
.lp-app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 0 0 10px; }
.lp-app-top { display: flex; align-items: center; gap: 8px; background: #fff; padding: 8px 10px; border-bottom: 1px solid var(--ms-line); }
.lp-app-top b { font-size: 12px; color: var(--ms-navy-900); }
.lp-app-search { flex: 1; max-width: 150px; margin-left: auto; display: flex; align-items: center; gap: 5px; background: var(--ms-bg); border: 1px solid var(--ms-line); border-radius: 999px; padding: 3px 8px; color: var(--ms-muted); font-size: 9.5px; }
.lp-app-search .ic-sm { width: 11px; height: 11px; }
.lp-app-live { display: inline-flex; align-items: center; gap: 5px; background: var(--ms-green-100); color: var(--ms-green-900); border-radius: 999px; padding: 3px 8px; font-weight: 800; font-size: 9.5px; white-space: nowrap; }
.lp-app-live .live-dot { width: 6px; height: 6px; }
.lp-app-road {
    margin: 0 10px; border-radius: 10px; padding: 10px;
    background: linear-gradient(150deg, var(--ms-navy-950), var(--ms-navy-900) 55%, var(--ms-navy-800));
    color: #fff;
}
.lp-ar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.lp-ar-head b { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.lp-ar-head .live-dot { width: 6px; height: 6px; }
.lp-ar-head > span { color: rgba(255,255,255,.55); font-size: 9.5px; font-weight: 700; }
.lp-ar-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.lp-ar-stats span { display: flex; flex-direction: column; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 7px; padding: 6px 7px; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.lp-ar-stats b { font-size: 17px; letter-spacing: 0; color: #fff; line-height: 1.1; }
.lp-ar-stats b.g { color: var(--ms-green-400); }
.lp-ar-stats b.w { color: #f6c26b; }
.lp-ar-trip { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border-radius: 7px; padding: 5px 8px; margin-top: 4px; }
.lp-ar-trip b { color: var(--ms-green-400); font-variant-numeric: tabular-nums; }
.lp-ar-trip span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lp-ar-trip .chip { font-style: normal; font-size: 8.5px; padding: 1px 7px 1px 6px; gap: 4px; }
.lp-ar-trip .chip::before { width: 5px; height: 5px; }
.lp-app-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0 10px; }
.lp-app-tiles span { background: #fff; border: 1px solid rgba(221,228,236,.9); border-radius: 8px; padding: 6px 8px; display: flex; flex-direction: column; min-width: 0; }
.lp-app-tiles i { font-style: normal; font-size: 7.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ms-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-app-tiles b { font-size: 14px; color: var(--ms-navy-900); white-space: nowrap; }
.lp-app-tiles b.bad { color: var(--ms-danger); }
.lp-app-cal { margin: 0 10px; background: #fff; border: 1px solid rgba(221,228,236,.9); border-radius: 8px; overflow: hidden; }
.lp-cal-row { display: flex; border-top: 1px solid #edf1f6; }
.lp-cal-row:first-child { border-top: 0; }
.lp-cal-who { flex: 0 0 64px; padding: 7px 8px; font-weight: 700; color: var(--ms-navy-900); border-right: 1px solid var(--ms-line); font-size: 9.5px; white-space: nowrap; }
.lp-cal-lane { position: relative; flex: 1; min-height: 28px; background-image: linear-gradient(90deg, #edf1f6 1px, transparent 1px); background-size: 12.5% 100%; }
.lp-cal-lane .ev { position: absolute; top: 5px; height: 18px; display: block; line-height: 18px; text-overflow: ellipsis; padding: 0 5px; font-style: normal; font-size: 8.5px; font-weight: 700; border-radius: 4px; background: var(--ms-navy-50); border-left: 2px solid var(--ms-navy-500); color: var(--ms-navy-900); white-space: nowrap; overflow: hidden; }
.lp-cal-lane .ev.live { background: var(--ms-green-50); border-left-color: var(--ms-green-500); color: var(--ms-green-900); }
.lp-cal-lane .e1 { left: 3%; width: 32%; }
.lp-cal-lane .e2 { left: 62%; width: 32%; }
.lp-cal-lane .e3 { left: 14%; width: 30%; }
.lp-cal-lane .e7 { left: 50%; width: 30%; }
.lp-cal-lane .e5 { left: 50%; width: 34%; }
/* the clash: a second trip dropped on top of one the driver is already on */
/* The second trip sits on its own line under the first, both labels whole, and overlaps
   it in time (60 to 96% against 50 to 84%): the red outline and the note say the rest. */
.lp-cal-row.clash .lp-cal-lane { min-height: 46px; }
.lp-cal-lane .ev.clash {
    left: 60%; width: 36%; top: 25px; z-index: 1;
    background: repeating-linear-gradient(135deg, #fde8e8 0 4px, #fbd0d0 4px 8px);
    border-left-color: var(--ms-danger); color: var(--ms-danger);
    box-shadow: 0 0 0 1.5px var(--ms-danger), 0 4px 10px rgba(198,40,40,.25);
}
.lp-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--ms-line); }
.lp-cal-head b { font-size: 10.5px; color: var(--ms-navy-900); }
.lp-cal-seg { display: inline-flex; gap: 2px; background: var(--ms-bg); border-radius: 999px; padding: 2px; }
.lp-cal-seg i { font-style: normal; font-size: 8.5px; font-weight: 700; color: var(--ms-navy-800); padding: 2px 7px; border-radius: 999px; }
.lp-cal-seg i.on { background: var(--ms-navy-900); color: #fff; }
.lp-cal-note {
    display: flex; align-items: center; gap: 6px;
    margin: 0; padding: 6px 8px;
    background: var(--mt-red-bg); border-top: 1px solid #f6c9c9;
    font-size: 9.5px; font-weight: 800; color: var(--ms-danger); line-height: 1.3;
}
.lp-cal-note .ic-sm { width: 13px; height: 13px; flex: 0 0 auto; }

/* the invoice and the report, lifted off the owner's laptop: anchored to the laptop
   itself, the report hangs above the lid (touching only the bezel) and the invoice sits
   over the empty foot of the side navigation, so no figure on the screen is hidden. */
.lp-vis-light { flex-direction: column; padding-top: 136px; padding-bottom: 58px; }
.lp-ofloats { display: contents; }
.lp-ofloat {
    position: absolute; z-index: 2;
    display: flex; flex-direction: column; gap: 4px;
    background: #fff; color: var(--ms-ink);
    border-radius: 16px; padding: 12px 14px;
    box-shadow: 0 20px 44px rgba(12,35,64,.2), 0 0 0 1px rgba(221,228,236,.8);
}
.lp-ofloat .micro { display: block; font-size: 10px; }
.lp-of-inv { left: -40px; bottom: -22px; width: 180px; padding-top: 15px; background: linear-gradient(var(--ms-green-500), var(--ms-green-500)) top / 100% 3px no-repeat, #fff; }
.lp-of-inv b { font-size: 24px; line-height: 1.1; letter-spacing: -.02em; color: var(--ms-navy-900); font-variant-numeric: tabular-nums; }
.lp-of-row { display: flex; align-items: center; gap: 8px; }
.lp-of-row .chip-sm { font-size: 10.5px; padding: 2px 8px 2px 7px; }
.lp-of-row small { font-size: 11px; color: var(--ms-muted); font-weight: 600; }
.lp-of-rep { right: -30px; bottom: calc(100% - 12px); width: 172px; }
/* six months of trips, drawn as one picture: five green bars and this month in navy
   (each bar runs past the foot of the picture, so only its top corners are rounded) */
.lp-of-bars {
    display: block; height: 52px; margin: 4px 0 6px; border-bottom: 1.5px solid var(--ms-line);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 52' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%234ab653'/><stop offset='1' stop-color='%2323842e'/></linearGradient><linearGradient id='n' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%231d4f88'/><stop offset='1' stop-color='%230c2340'/></linearGradient></defs><g fill='url(%23g)'><rect x='0' y='30.16' width='19.83' height='25.84' rx='3.5'/><rect x='24.83' y='21.84' width='19.83' height='34.16' rx='3.5'/><rect x='49.67' y='26' width='19.83' height='30' rx='3.5'/><rect x='74.5' y='13.52' width='19.83' height='42.48' rx='3.5'/><rect x='99.33' y='17.68' width='19.83' height='38.32' rx='3.5'/></g><rect x='124.17' y='5.2' width='19.83' height='50.8' rx='3.5' fill='url(%23n)'/></svg>") 0 0 / 100% 100% no-repeat;
}
.lp-of-csv { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; color: var(--ms-green-800); background: var(--ms-green-50); border: 1px solid var(--ms-green-100); border-radius: 999px; padding: 3px 10px 3px 8px; }
.lp-of-csv .ic-sm { width: 13px; height: 13px; }
/* The laptop is sized by its own width (a container), so the screen stays crisp at
   every page width: no calendar entry or label is ever cut to "Morni...".
     560 and under  a slimmer side navigation and name column give the lanes room
     470 and under  the app's phone layout: no side navigation, no search
     380 and under  calendar entries keep their time and lane colour only (the conflict
                    note still says it in words), the figures stack as a list, and the
                    trip names shorten ("Airport, OR Tambo")
     300 and under  a trip name may take a second line rather than be cut          */
@container (max-width: 560px) {
    .lp-app-side { flex-basis: 106px; padding-right: 6px; }
    .lp-app-side > span:not(.lp-app-logo):not(.lp-app-grp) { padding-left: 27px; font-size: 9.5px; gap: 5px; }
    .lp-app-side > span:not(.lp-app-logo):not(.lp-app-grp)::before { left: 10px; }
    .lp-app-side::before { left: 13px; }
    .lp-app-grp { padding-left: 27px; }
    .lp-cal-who { flex-basis: 54px; padding: 7px 6px; }
}
@container (max-width: 470px) {
    .lp-app-side { display: none; }
    .lp-app-search { display: none; }
    .lp-app-live { margin-left: auto; }
    .lp-ar-stats { grid-template-columns: repeat(2, 1fr); }
    .lp-app { min-height: 0; }
}
@container (max-width: 380px) {
    .lp-cal-lane .ev { padding: 0 4px; text-overflow: clip; }
    .lp-cal-lane .ev span { display: none; }
    .lp-cal-who { flex-basis: 50px; }
    .lp-app-tiles { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .lp-app-tiles span { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 8px; }
    .lp-app-tiles i { font-size: 8px; }
    .lp-app-tiles b { font-size: 13px; }
    .lp-ar-trip { gap: 6px; padding: 5px 7px; }
    .lp-ar-trip .lp-lg { display: none; }
}
@container (max-width: 300px) {
    .lp-ar-trip span { white-space: normal; line-height: 1.25; }
}

/* phones for the driver and the client */
.lp-phone-drv, .lp-phone-cli { z-index: 1; }
.lp-drv-top, .lp-cli-top { display: flex; align-items: center; gap: 8px; padding: 4px 14px 10px; background: var(--ms-bg); }
.lp-drv-top b, .lp-cli-top b { flex: 1; font-size: 13px; color: var(--ms-navy-900); }
.lp-drv-top .ic-sm, .lp-cli-top .ic-sm { width: 15px; height: 15px; color: var(--ms-navy-800); }
.lp-drv-stop { display: flex; gap: 10px; align-items: center; margin: 0 10px; padding: 11px 12px; background: linear-gradient(150deg, var(--ms-navy-950), var(--ms-navy-800)); color: #fff; border-radius: 14px 14px 0 0; }
.lp-drv-stop .micro { color: rgba(255,255,255,.55); display: block; }
.lp-drv-stop b { display: block; font-size: 13px; line-height: 1.25; }
.lp-drv-n { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid var(--ms-green-400); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.lp-drv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 10px 10px; padding: 8px; background: var(--ms-navy-800); border-radius: 0 0 14px 14px; }
.lp-big { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-weight: 800; font-size: 12.5px; border: 1.5px solid rgba(255,255,255,.35); }
.lp-big.g { background: linear-gradient(180deg, var(--ms-green-600), var(--ms-green-800)); border-color: transparent; }
.lp-drv-lbl { display: block; padding: 0 14px 5px; }
.lp-drv-pax { display: flex; align-items: center; gap: 6px; margin: 0 10px 6px; padding: 7px 8px; background: #fff; border-radius: 12px; border: 1px solid var(--ms-line); }
.lp-drv-pax b { flex: 1; min-width: 0; font-size: 11.5px; color: var(--ms-navy-900); white-space: nowrap; }
.lp-drv-pax.on { background: var(--ms-green-50); border-color: var(--ms-green-100); }
.lp-sbtn { font-size: 9.5px; font-weight: 800; border-radius: 999px; padding: 5px 8px; background: #fff; color: var(--ms-navy-800); border: 1.5px solid var(--ms-navy-800); white-space: nowrap; }
.lp-sbtn.g { background: var(--ms-green-600); border-color: var(--ms-green-600); color: #fff; }
.lp-sbtn.n { background: var(--ms-navy-800); border-color: var(--ms-navy-800); color: #fff; }
.lp-sbtn.tap { position: relative; }
.lp-sbtn.tap::after { content: ""; position: absolute; inset: -5px; border-radius: 999px; border: 2px solid var(--ms-green-400); opacity: 0; pointer-events: none; }
.lp-drv-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 10px 12px; }
.lp-drv-tools span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; background: #fff; border: 1px solid var(--ms-line); border-radius: 12px; font-size: 9.5px; font-weight: 800; color: var(--ms-navy-900); }
.lp-drv-tools .ic-sm { width: 17px; height: 17px; color: var(--ms-green-600); }
.lp-drv-tools .red { border-color: #f3c1c1; }
.lp-drv-tools .red .ic-sm { color: var(--ms-danger); }

.lp-cli-live { margin: 0 10px 8px; background: #fff; border-radius: 14px; padding: 10px; box-shadow: 0 2px 10px rgba(12,35,64,.07); }
.lp-cli-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.lp-cli-t { font-weight: 800; font-size: 12px; color: var(--ms-navy-900); }
.lp-cli-live svg { display: block; width: 100%; height: auto; }
.lp-cli-eta { display: flex; align-items: center; gap: 7px; margin: 8px 0; }
.lp-cli-eta b { font-size: 24px; letter-spacing: -.03em; color: var(--ms-navy-900); line-height: 1; }
.lp-cli-eta span:not(.rl-tag) { flex: 1; font-size: 10.5px; color: var(--ms-muted); font-weight: 600; line-height: 1.2; }
.lp-cli-pax { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--ms-line); }
.lp-cli-pax b { flex: 1; font-size: 11.5px; color: var(--ms-navy-900); }
.lp-cli-doc { display: flex; align-items: center; gap: 8px; margin: 0 10px 6px; padding: 8px 9px; background: #fff; border-radius: 12px; border: 1px solid var(--ms-line); }
.lp-cli-doc div { flex: 1; min-width: 0; }
.lp-cli-doc b { display: block; font-size: 11px; color: var(--ms-navy-900); white-space: nowrap; }
.lp-cli-doc small { display: block; font-size: 10px; color: var(--ms-muted); }
.lp-cli-ic { width: 26px; height: 26px; border-radius: 8px; background: var(--ms-navy-50); color: var(--ms-navy-700); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.lp-phone-cli .lp-botnav { margin-top: 6px; }

/* the cards stacked beside each phone, overlapping its edge */
.lp-phone-drv, .lp-phone-cli { width: 262px; flex: 0 0 auto; }
.lp-floats { position: relative; z-index: 2; flex: 0 0 auto; width: 232px; margin-left: -16px; display: flex; flex-direction: column; gap: 16px; }
.lp-vis-green { flex-direction: row-reverse; }
.lp-vis-green .lp-floats { margin: 0 -16px 0 0; align-items: flex-end; }
.lp-float {
    position: relative;
    background: #fff; color: var(--ms-ink);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 20px 44px rgba(4,13,26,.22), 0 0 0 1px rgba(221,228,236,.7);
}
.lp-float .micro { display: block; }
.lp-float-go { margin-right: 34px; }
.lp-float-go b { display: block; font-size: 13px; color: var(--ms-navy-900); margin: 2px 0 10px; line-height: 1.25; }
.lp-go { display: flex; align-items: center; justify-content: center; gap: 7px; height: 56px; border-radius: 999px; color: #fff; font-weight: 800; font-size: 13.5px; background: linear-gradient(180deg, var(--ms-green-600) 0%, var(--ms-green-700) 32%, var(--ms-green-800) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 18px rgba(35,132,46,.35); }
.lp-measure { position: absolute; right: -44px; bottom: 12px; height: 56px; display: flex; align-items: center; font-size: 11px; font-weight: 800; color: var(--ms-green-400); letter-spacing: .02em; }
.lp-measure i { position: absolute; left: -10px; top: 0; bottom: 0; width: 6px; border: 1.5px solid var(--ms-green-400); border-right: 0; }
.lp-float-late { display: flex; gap: 10px; align-items: center; padding-top: 15px; background: linear-gradient(var(--mt-amber), var(--mt-amber)) top / 100% 3px no-repeat, #fff; }
.lp-float-late > .ic-sm { flex: 0 0 auto; width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: var(--mt-amber-bg); color: var(--mt-amber); }
.lp-float-late b { display: block; font-size: 12.5px; color: var(--ms-navy-900); line-height: 1.25; }
.lp-float-late small { display: block; font-size: 11px; color: var(--ms-muted); margin-top: 2px; }
.lp-float-sign { width: 214px; }
.lp-float-sign .lp-sig { width: 150px; height: 42px; margin: 4px 0 2px; }
.lp-float-sign small { display: block; font-size: 11px; color: var(--ms-muted); border-top: 1px dashed var(--ms-line); padding-top: 5px; }
.lp-float-chat { padding: 0; background: none; box-shadow: none; }
.lp-bubble { position: relative; display: inline-flex; align-items: flex-end; gap: 6px; background: #fff; border-radius: 16px 16px 4px 16px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--ms-navy-900); box-shadow: 0 16px 36px rgba(4,13,26,.18), 0 0 0 1px rgba(221,228,236,.7); }
.lp-bubble .lpi { color: var(--ms-green-600); }
.lp-bubble .ic-sm { width: 15px; height: 15px; }

/* ------------------------------------------------ 03 everything else: the bento */
.lp-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.lp-tile {
    grid-column: span 2;
    display: flex; flex-direction: column; gap: 22px;
    background: #fff;
    border: 1px solid rgba(221,228,236,.9);
    border-radius: var(--lp-r);
    box-shadow: var(--lp-shadow);
    padding: 26px 24px 24px;
    min-width: 0;
    transition: transform .25s ease, box-shadow .25s ease;
}
.lp-tile:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(12,35,64,.12); }
.lp-tile-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.lp-tile-ic { width: 46px; height: 46px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--ms-green-50); color: var(--ms-green-700); border: 1px solid var(--ms-green-100); }
.lp-tile h3 { font-size: 20px; margin: 0; line-height: 1.2; }
.lp-tile p { grid-column: 1 / -1; margin: 14px 0 0; color: var(--ms-muted); font-size: 14.5px; line-height: 1.6; }
.lp-tile > [aria-hidden] { margin-top: auto; }
.lp-t-sched { grid-column: span 4; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; align-items: center; }
.lp-t-sched > [aria-hidden] { margin-top: 0; }
/* The bento, four rows: the two tall pictures (the passenger card, the trip thread) each
   run down two rows, on alternate sides, and the wide tiles beside them (schedules,
   ratings, expiry, security) carry their words on the left and a picture on the right.
     row 1  schedules (4)  | passenger (2, rows 1-2)
     row 2  ratings   (4)  | passenger
     row 3  chat (2, rows 3-4) | expiry   (4)
     row 4  chat           | security (4)                                              */
.lp-t-pax, .lp-t-chat { grid-row: span 2; }
.lp-t-chat .lp-chat { flex: 1; }
.lp-chat-compose { margin-top: auto; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--ms-line); border-radius: 999px; padding: 5px 5px 5px 14px; font-size: 12px; color: #98a3b0; font-weight: 600; }
.lp-chat-compose span { flex: 1; }
.lp-send { width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: var(--ms-green-600); color: #fff; }
.lp-t-rate, .lp-t-exp { grid-column: span 4; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 28px; align-items: center; }
.lp-t-rate > [aria-hidden], .lp-t-exp > [aria-hidden] { margin-top: 0; }
.lp-t-sec { grid-column: span 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px; align-items: center; background: linear-gradient(150deg, var(--ms-navy-950), var(--ms-navy-900) 60%, var(--ms-navy-800)); border-color: var(--ms-navy-800); padding: 32px; }
.lp-t-sec > [aria-hidden] { margin-top: 0; }
.lp-t-sec h3 { color: #fff; font-size: 24px; }
.lp-t-sec p { color: rgba(255,255,255,.72); }
.lp-t-sec .lp-tile-ic { background: rgba(74,182,83,.16); border-color: rgba(74,182,83,.35); color: var(--ms-green-400); }
.lp-tile:nth-child(3) .lp-tile-ic, .lp-tile:nth-child(5) .lp-tile-ic { background: var(--ms-navy-50); border-color: var(--ms-navy-100); color: var(--ms-navy-700); }

/* the week: a schedule's trips, laid out the way the calendar shows them */
.lp-week { background: var(--ms-bg); border-radius: 14px; padding: 12px 14px 12px; display: flex; flex-direction: column; gap: 5px; }
.lp-week-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 6px; }
.lp-week-head b { font-size: 13px; color: var(--ms-navy-900); }
.lp-week .chip-sm { font-size: 10.5px; padding: 2px 8px 2px 7px; }
/* a day: its name (drawn from data-d), then its two runs, each a time and a trip; the
   weekend's stripes are the row's own ::after */
.lp-wrow { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); gap: 6px; align-items: center; }
.lp-wrow::before { content: attr(data-d); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ms-navy-800); }
.lp-wrow i { font-style: normal; display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; border-radius: 7px; padding: 5px 8px; border-left: 3px solid; }
.lp-wrow i span { font-weight: 600; font-variant-numeric: normal; margin-left: 3px; }
.lp-wrow .am { background: var(--ms-green-50); border-color: var(--ms-green-500); color: var(--ms-green-900); }
.lp-wrow .pm { background: var(--ms-navy-50); border-color: var(--ms-navy-500); color: var(--ms-navy-900); }
.lp-wrow.off::before { color: #b6c1cd; }
.lp-wrow.off::after { content: ""; grid-column: 2 / -1; height: 24px; border-radius: 7px; background: repeating-linear-gradient(135deg, #e4e9ef 0 4px, transparent 4px 8px); }
.lp-tile-chips { grid-column: 1 / -1; list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lp-tile-chips li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ms-navy-800); background: var(--ms-bg); border: 1px solid var(--ms-line); border-radius: 999px; padding: 4px 11px 4px 8px; }
.lp-tile-chips li.g { color: var(--ms-green-800); background: var(--ms-green-50); border-color: var(--ms-green-100); }
.lp-tile-chips .ic-sm { width: 14px; height: 14px; }
.lp-week-key { display: none; flex-wrap: wrap; gap: 6px 16px; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--ms-line); font-size: 11.5px; font-weight: 700; color: var(--ms-navy-800); }
.lp-week-key span { display: inline-flex; align-items: center; gap: 6px; }
.lp-week-key .lp-wk-m { display: none; }
.lp-week-key .lp-wk-m::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--ms-green-500); }
.lp-week-key .lp-wk-m.pm::before { background: var(--ms-navy-500); }
/* Too narrow for "06:30 Home to School" in a cell: the cells keep their times and
   colours, and a key under the week says which colour is which run. Measured on the
   week itself, so no width ever shows a clipped "Home to Sch...". */
.lp-week { container-type: inline-size; }
@container (max-width: 335px) {
    .lp-wrow { grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
    .lp-wrow i { font-size: 11px; padding: 5px 7px; }
    .lp-wrow i span { display: none; }
    .lp-week-key { display: flex; }
    .lp-week-key .lp-wk-m { display: inline-flex; }
}

/* the passenger card */
.lp-paxcard { background: var(--ms-bg); border-radius: 14px; padding: 12px; position: relative; }
.lp-paxcard-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lp-paxcard-top .avatar { width: 38px; height: 38px; font-size: 13px; }
.lp-paxcard-top b { display: block; color: var(--ms-navy-900); font-size: 14px; }
.lp-paxcard-top small { display: block; color: var(--ms-muted); font-size: 12px; }
.lp-paxcard-rows { display: flex; flex-direction: column; gap: 5px; }
.lp-paxcard-rows span { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 9px; padding: 6px 9px; font-size: 12.5px; font-weight: 600; color: var(--ms-navy-900); }
.lp-paxcard-rows b { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ms-muted); min-width: 56px; }
.lp-paxcard-rows .ic-sm { width: 15px; height: 15px; color: var(--ms-green-600); flex: 0 0 auto; }
.lp-paxcard-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.lp-paxcard-tags span { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--ms-navy-800); background: #fff; border: 1px solid var(--ms-line); border-radius: 999px; padding: 3px 9px; }
.lp-paxcard-tags .ic-sm { width: 13px; height: 13px; color: var(--ms-navy-500); }
.lp-instr { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 10px; border-radius: 10px; background: var(--mt-amber-bg); border-left: 3px solid var(--mt-amber); color: #7c3a06; font-size: 12.5px; font-weight: 700; }
.lp-instr .ic-sm { width: 15px; height: 15px; color: var(--mt-amber); flex: 0 0 auto; }
/* The pickup, learned after one run: a small map that fills whatever height the tile has
   left. The drawing keeps one scale (preserveAspectRatio "meet", centred) and its streets
   run on past the frame, so a taller tile shows more streets around the same route with
   both stops in view, never a zoomed-in crop. */
.lp-t-pax .lp-paxcard { flex: 1 0 auto; display: flex; flex-direction: column; }
.lp-pax-map { position: relative; flex: 1 0 auto; min-height: 96px; margin-top: 8px; border-radius: 10px; overflow: hidden; background: #e9eff5; }
.lp-pax-map > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.lp-pax-map .lp-learned { position: absolute; left: 8px; top: 8px; margin: 0; box-shadow: 0 3px 10px rgba(12,35,64,.12); }
.lp-learned { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11.5px; font-weight: 800; color: var(--ms-green-800); background: var(--ms-green-100); border-radius: 999px; padding: 4px 10px 4px 8px; }
.lp-learned .ic-sm { width: 14px; height: 14px; }

/* the chat */
.lp-chat { background: var(--ms-bg); border-radius: 14px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.lp-chat-tabs { display: flex; flex-wrap: wrap; gap: 4px; background: #fff; border-radius: 999px; padding: 3px; align-self: flex-start; max-width: 100%; }
.lp-chat-tabs span { font-size: 11px; font-weight: 700; color: var(--ms-navy-800); padding: 4px 9px; border-radius: 999px; }
.lp-chat-tabs .on { background: var(--ms-navy-900); color: #fff; }
.lp-chat-thread { display: flex; flex-direction: column; gap: 6px; }
.lp-msg { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; border-radius: 14px; padding: 8px 11px; max-width: 92%; }
/* system posts: centred pills, the way the app threads them between messages */
.lp-msg.sys { align-self: center; max-width: 100%; background: var(--ms-green-50); border: 1px solid var(--ms-green-100); color: var(--ms-green-900); font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 4px 11px 4px 8px; align-items: center; gap: 6px; }
.lp-msg.sys .ic-sm { width: 13px; height: 13px; flex: 0 0 auto; }
.lp-msg.in, .lp-msg.me { flex-direction: column; gap: 1px; font-weight: 600; }
.lp-msg em { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.lp-msg small { display: inline-flex; align-items: center; gap: 3px; align-self: flex-end; font-size: 10px; font-weight: 700; opacity: .75; }
.lp-msg small .ic-sm { width: 13px; height: 13px; }
.lp-msg.in { align-self: flex-start; background: #fff; color: var(--ms-navy-900); border: 1px solid var(--ms-line); border-radius: 14px 14px 14px 4px; }
.lp-msg.in small .ic-sm { color: var(--ms-green-600); }
.lp-msg.me { align-self: flex-end; background: var(--ms-navy-800); color: #fff; border-radius: 14px 14px 4px 14px; }
.lp-msg.me small .ic-sm { color: var(--ms-green-400); }

/* ratings */
.lp-rate { background: var(--ms-bg); border-radius: 14px; padding: 10px 12px; }
.lp-rate-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--ms-line); font-size: 13px; font-weight: 700; color: var(--ms-navy-900); }
.lp-rate-row::after { content: ""; width: 85px; height: 16px; background-size: 17px 16px; }
/* the incident: a photo thumbnail, what happened and where it went */
.lp-incident { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px 8px 8px; background: #fff; border: 1px solid #f3c9c9; border-left: 3px solid var(--ms-danger); border-radius: 12px; }
.lp-inc-ph { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(180deg, #b9c7d6 0 46%, #7d91a7 46% 100%); box-shadow: inset 0 0 0 1px rgba(12,35,64,.08); }
.lp-inc-ph .ic-sm { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(12,35,64,.35)); }
.lp-incident > span:nth-child(2) { flex: 1; min-width: 0; }
.lp-incident b { display: block; font-size: 12.5px; line-height: 1.3; color: var(--ms-navy-900); }
.lp-incident small { display: block; font-size: 11px; color: var(--ms-muted); font-weight: 600; }
.lp-incident em { flex: 0 0 auto; font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--ms-navy-800); background: var(--ms-navy-50); border: 1px solid var(--ms-navy-100); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }

/* expiry countdown */
.lp-expiry { background: var(--ms-bg); border-radius: 14px; padding: 14px 12px 12px; }
.lp-exp-line { position: relative; display: flex; justify-content: space-between; margin-bottom: 12px; }
.lp-exp-line::before { content: ""; position: absolute; left: 10%; right: 10%; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: linear-gradient(90deg, var(--ms-navy-500), var(--mt-amber), var(--ms-danger)); }
.lp-exp-line span { position: relative; width: 50px; height: 50px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; line-height: 1; color: var(--ms-navy-800); border: 3px solid var(--ms-navy-500); font-variant-numeric: tabular-nums; }
.lp-exp-line span::after { content: attr(data-u); font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.lp-exp-line .d14 { border-color: #d98a1f; color: #9a5a08; }
.lp-exp-line .d7 { border-color: var(--mt-amber); color: var(--mt-amber); background: var(--mt-amber-bg); }
.lp-exp-line .d1 { border-color: var(--ms-danger); color: #fff; background: var(--ms-danger); }
.lp-exp-docs { display: flex; flex-wrap: wrap; gap: 5px; }
.lp-exp-docs span { font-size: 11px; font-weight: 700; color: var(--ms-navy-800); background: #fff; border: 1px solid var(--ms-line); border-radius: 999px; padding: 3px 9px; }
.lp-exp-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.lp-exp-row { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--ms-line); border-radius: 10px; padding: 7px 9px; }
.lp-exp-row .ic-sm { width: 15px; height: 15px; color: var(--ms-navy-500); flex: 0 0 auto; }
.lp-exp-row b { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.25; color: var(--ms-navy-900); }
.lp-exp-row em { flex: 0 0 auto; font-style: normal; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 2px 9px 2px 7px; }
.lp-exp-row em::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lp-exp-row em.ok { background: var(--ms-green-100); color: var(--ms-green-800); }
.lp-exp-row em.bad { background: var(--mt-red-bg); color: var(--ms-danger); }

/* security */
.lp-secure { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lp-secure li { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; font-size: 13px; font-weight: 700; color: #fff; line-height: 1.3; }
.lp-secure .ic-sm { width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: rgba(74,182,83,.18); color: var(--ms-green-400); }

/* ------------------------------------------------ 04 06:15 on a Monday */
.lp-sa {
    position: relative; overflow: hidden;
    background:
        radial-gradient(800px 460px at 100% 0%, rgba(35,132,46,.22), transparent 62%),
        radial-gradient(700px 420px at 0% 100%, rgba(29,79,136,.32), transparent 58%),
        var(--ms-navy-950);
}
.lp-sa-clock {
    position: absolute; right: -20px; top: 10px; pointer-events: none;
    font-size: 300px; font-weight: 800; line-height: 1; letter-spacing: -.05em;
    color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.06);
    font-variant-numeric: tabular-nums;
}
.lp-sa-grid { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.lp-sa .lp-head { margin-bottom: 0; }
.lp-sa h2 { font-size: 40px; }
.lp-sa-dash { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 30px; padding: 16px 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; max-width: 420px; }
.lp-sa-time { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.lp-sa-time small { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-green-400); margin-left: 6px; vertical-align: 6px; }
/* signal strength, one element: three bars lit, the fourth out */
.lp-sa-sig { display: inline-block; width: 29px; height: 20px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 20'><g fill='%234ab653'><rect x='0' y='14' width='5' height='6' rx='2'/><rect x='8' y='10' width='5' height='10' rx='2'/><rect x='16' y='5' width='5' height='15' rx='2'/></g><rect x='24' y='0' width='5' height='20' rx='2' fill='white' fill-opacity='.2'/></svg>") 0 0 / 29px 20px no-repeat; }
.lp-sa-msg { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: rgba(255,255,255,.85); background: rgba(74,182,83,.14); border: 1px solid rgba(74,182,83,.3); border-radius: 999px; padding: 6px 12px; }
.lp-sa-rl { margin-top: 26px; max-width: 420px; }
.lp-sa-rl .rl-item { padding-bottom: 14px; }
.lp-sa-rl .rl-item::after { background: var(--ms-green-400); opacity: .45; }
.lp-sa-rl .rl-time { color: var(--ms-green-400); }
.lp-sa-rl .rl-label { color: rgba(255,255,255,.88); font-weight: 600; font-size: 14.5px; }
.lp-sa-rl .rl-tag.recorded { background: rgba(74,182,83,.14); border-color: rgba(74,182,83,.35); color: var(--ms-green-400); }
.lp-sa-rl .rl-checkin::before { background: var(--ms-navy-500); border-color: var(--ms-navy-500); }
.lp-sa-rl .rl-note::before { background: var(--ms-navy-950); border-color: rgba(255,255,255,.45); }
.lp-sa-rl .rl-arrived::before { background: linear-gradient(#fff, #fff) 1px 0 / 2px 17px no-repeat, linear-gradient(var(--ms-green-400), var(--ms-green-400)) 3px 0 / 12px 9px no-repeat; }
.lp-sa-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lp-sa-item { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.11); border-radius: var(--lp-r); padding: 22px; transition: background-color .25s ease, border-color .25s ease, transform .25s ease; }
.lp-sa-item:hover { background: rgba(255,255,255,.08); border-color: rgba(74,182,83,.4); transform: translateY(-3px); }
.lp-sa-vis { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.lp-sa-ic { width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--ms-green-600); color: #fff; box-shadow: 0 8px 18px rgba(35,132,46,.35); }
.lp-sa-big { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--ms-green-400); line-height: 1.1; white-space: nowrap; }
.lp-sa-item h3 { font-size: 17px; margin: 0 0 8px; }
.lp-sa-item p { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.6; margin: 0 0 14px; }
.lp-sa-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-sa-tags span { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 3px 10px; }

/* ------------------------------------------------ 05 pricing */
.lp-pricing { background: radial-gradient(900px 420px at 80% 0%, rgba(35,132,46,.07), transparent 60%), #fff; }
.lp-cycle { display: inline-flex; gap: 4px; background: var(--ms-navy-50); border: 1px solid var(--ms-navy-100); border-radius: 999px; padding: 4px; margin: -18px 0 36px; }
.lp-cycle[hidden] { display: none; }
.lp-cycle button {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 8px 20px;
    border: 0; border-radius: 999px; background: transparent; cursor: pointer;
    font-family: var(--ms-font); font-size: 14.5px; font-weight: 700; color: var(--ms-navy-800);
    transition: background-color .2s ease, color .2s ease;
}
.lp-cycle button[aria-pressed="true"] { background: var(--ms-navy-900); color: #fff; box-shadow: 0 4px 12px rgba(12,35,64,.2); }
.lp-cycle button:focus-visible { outline: 3px solid var(--ms-green-600); outline-offset: 2px; }
.lp-save { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ms-green-800); background: var(--ms-green-100); border-radius: 999px; padding: 2px 8px; }
.lp-cycle button[aria-pressed="true"] .lp-save { background: linear-gradient(180deg, var(--ms-green-600), var(--ms-green-700)); color: #fff; }

.lp-plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.lp-plan {
    position: relative;
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: 24px;
    box-shadow: var(--lp-shadow);
    padding: 30px 26px 26px;
    min-width: 0;
}
.lp-plan.hot {
    background:
        radial-gradient(420px 260px at 100% 0%, rgba(74,182,83,.22), transparent 65%),
        linear-gradient(160deg, var(--ms-navy-950), var(--ms-navy-800));
    border-color: var(--ms-navy-700);
    box-shadow: 0 30px 64px rgba(8,27,51,.3);
    color: #fff;
    /* raised 14px above its neighbours, with 14px more padding, so its contents line
       up with theirs row for row */
    margin-block: -14px;
    padding-top: 44px;
}
/* white on green-600 to green-700: 4.8:1 at the lightest point (AA for small text) */
.lp-plan-flag { position: absolute; top: -14px; left: 26px; background: linear-gradient(180deg, var(--ms-green-600), var(--ms-green-700)); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 6px 14px; box-shadow: 0 6px 16px rgba(35,132,46,.4); }
.lp-plan-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.lp-plan-ic { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--ms-green-50); color: var(--ms-green-700); border: 1px solid var(--ms-green-100); }
.lp-plan.hot .lp-plan-ic { background: rgba(74,182,83,.18); border-color: rgba(74,182,83,.35); color: var(--ms-green-400); }
.lp-plan h3 { margin: 0; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--ms-navy-900); }
.lp-plan.hot h3 { color: #fff; }
.lp-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.lp-amt { font-size: 48px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; color: var(--ms-navy-900); white-space: nowrap; }
.lp-amt small { font-size: 20px; letter-spacing: -.01em; color: var(--ms-muted); font-weight: 700; }
.lp-price-q .lp-amt { font-size: 38px; line-height: 1.316; } /* 50px: the height of a 48px price line */
.lp-per { font-size: 14px; font-weight: 600; color: var(--ms-muted); }
.lp-plan.hot .lp-amt { color: #fff; }
.lp-plan.hot .lp-amt small, .lp-plan.hot .lp-per { color: rgba(255,255,255,.65); }
.lp-annual { margin: 6px 0 22px; font-size: 13.5px; line-height: 1.5; color: var(--ms-muted); min-height: 21px; text-wrap: pretty; }
/* Cards side by side: every annual line reserves two lines, so the "What you get" tiles
   and the lists start at the same height in each card whichever line is showing. */
@media (min-width: 761px) { .lp-annual { min-height: 3em; } }
.lp-plan.hot .lp-annual { color: rgba(255,255,255,.7); }
.lp-annual-a { color: var(--ms-green-700); font-weight: 700; }
.lp-plan.hot .lp-annual-a { color: var(--ms-green-400); }
.lp-plans[data-cycle="monthly"] .lp-price-a, .lp-plans[data-cycle="monthly"] .lp-annual-a { display: none; }
.lp-plans[data-cycle="annual"] .lp-price-m, .lp-plans[data-cycle="annual"] .lp-annual-m { display: none; }
.lp-plan-lbl { margin: 0 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ms-muted); }
.lp-plan.hot .lp-plan-lbl { color: rgba(255,255,255,.72); }
.lp-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 20px; }
.lp-specs div { background: var(--ms-bg); border: 1px solid var(--ms-line); border-radius: 12px; padding: 10px 6px; text-align: center; min-width: 0; }
.lp-specs b { display: block; font-size: 22px; font-weight: 800; color: var(--ms-navy-900); line-height: 1.15; }
.lp-specs b.word { font-size: 13.5px; line-height: 25px; }
.lp-specs span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ms-muted); margin-top: 3px; }
/* A narrow card (three plans across a small laptop, two across a tablet): the tiles'
   side padding comes in so "Passengers" keeps its full 11px and sits inside its tile. */
.lp-specs { container-type: inline-size; }
@container (max-width: 290px) {
    .lp-specs div { padding: 10px 2px; }
}
@container (max-width: 244px) {
    .lp-specs { gap: 4px; }
    .lp-specs span { letter-spacing: .01em; }
    .lp-specs b.word { font-size: 12.5px; }
}
.lp-plan.hot .lp-specs div { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.lp-plan.hot .lp-specs b { color: #fff; }
.lp-plan.hot .lp-specs span { color: rgba(255,255,255,.7); }
.lp-plan-list { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.lp-plan-list li { position: relative; padding: 7px 0 7px 28px; font-size: 14.5px; line-height: 1.45; }
.lp-plan-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 18px; height: 18px; border-radius: 50%; background: var(--ms-green-100); }
.lp-plan-list li::after { content: ""; position: absolute; left: 5.5px; top: 14.5px; width: 6px; height: 3.5px; border-left: 2px solid var(--ms-green-700); border-bottom: 2px solid var(--ms-green-700); transform: rotate(-45deg); }
.lp-plan-list li.plus { font-weight: 700; color: var(--ms-navy-900); }
.lp-plan-list li.plus::before { background: var(--ms-green-600); }
.lp-plan-list li.plus::after { border-color: #fff; }
.lp-plan.hot .lp-plan-list li { color: rgba(255,255,255,.86); }
.lp-plan.hot .lp-plan-list li.plus { color: #fff; }
.lp-plan.hot .lp-plan-list li::before { background: rgba(74,182,83,.24); }
.lp-plan.hot .lp-plan-list li::after { border-color: var(--ms-green-400); }
.lp-plan.hot .lp-plan-list li.plus::before { background: var(--ms-green-500); }
.lp-plan.hot .lp-plan-list li.plus::after { border-color: #fff; }
.lp-plan .btn { margin-top: auto; }
/* Three cards across: each card shows seven rows (head, price, annual line, label,
   tiles, list, button; the hidden cycle's price and line take no row), so the cards
   share one set of rows. Whether a narrow card wraps "/month ex VAT" under its price
   or not, the tiles and lists start level in all three. The Premier card's extra
   top padding exactly cancels its raised margin, so its first row lines up too. */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 1024px) {
        .lp-plans { grid-template-rows: repeat(7, auto); row-gap: 0; }
        .lp-plan { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
    }
}
/* The shared green-400 focus ring is for navy. On a white card it drops below 3:1, so
   buttons on light surfaces take the green-600 ring the page's own controls use. */
.lp-plan:not(.hot) .btn:focus-visible, .lp-ask .btn:focus-visible { outline-color: var(--ms-green-600); }
.lp-pnotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 44px; }
.lp-pnotes p { display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 16px 18px; background: var(--ms-bg); border: 1px solid var(--ms-line); border-radius: 16px; font-size: 14px; line-height: 1.55; color: var(--ms-muted); }
.lp-pnotes b { color: var(--ms-navy-900); }
.lp-pn-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--ms-green-700); border: 1px solid var(--ms-line); }

/* ------------------------------------------------ 06 questions */
.lp-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.lp-faq-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.lp-qa { background: #fff; border: 1px solid rgba(221,228,236,.95); border-radius: 18px; box-shadow: 0 2px 10px rgba(12,35,64,.04); transition: box-shadow .2s ease, border-color .2s ease; }
.lp-qa[open] { border-color: var(--ms-green-100); box-shadow: 0 16px 36px rgba(12,35,64,.09); }
.lp-qa summary {
    display: flex; align-items: center; gap: 14px;
    min-height: 64px; padding: 14px 16px 14px 14px;
    cursor: pointer; list-style: none;
    font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ms-navy-900);
    border-radius: 18px;
}
.lp-qa summary::-webkit-details-marker { display: none; }
.lp-qa summary::marker { content: ""; }
.lp-qa summary:hover .lp-qa-q { color: var(--ms-green-700); }
.lp-qa summary:focus-visible { outline: 3px solid var(--ms-green-600); outline-offset: 2px; }
.lp-qa-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--ms-green-50); color: var(--ms-green-700); border: 1px solid var(--ms-green-100); }
/* Icon tiles are the icon's own <svg>, no wrapper: the tile's size, fill, border and
   shadow sit on the svg and the drawing fills its content box (size minus padding and
   border), so each glyph keeps the size it had inside the old wrapper (17 or 22px). */
.lp-ck, .lp-qa-ic, .lp-tile-ic, .lp-kpi-ic, .lp-sa-ic, .lp-plan-ic, .lp-jump-ic, .lp-role-ic,
.lp-pn-ic, .lp-mini-ic, .lp-cli-ic, .lp-how-num, .lp-notif-ic, .lp-note-ic, .lp-ask-ic { box-sizing: border-box; display: block; flex: 0 0 auto; }
.lp-pn-ic, .lp-mini-ic { padding: 6.5px; }
.lp-cli-ic { padding: 6px; }
.lp-notif-ic, .lp-note-ic { padding: 5.5px; }
.lp-how-num { padding: 13px; }
.lp-ask-ic { padding: 11px; }
.lp-ck { padding: 8.5px; }
.lp-qa-ic { padding: 9.5px; }
.lp-tile-ic { padding: 11px; }
.lp-kpi-ic { padding: 8px; }
.lp-sa-ic { padding: 11px; }
.lp-plan-ic { padding: 9px; }
.lp-jump-ic { padding: 8.5px; }
.lp-role-ic { padding: 12px; }
.lp-qa-q { flex: 1; min-width: 0; transition: color .15s ease; }
/* the open / close chevron, drawn on the summary itself */
.lp-qa summary::after { content: ""; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123156' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / 15px 15px no-repeat, var(--ms-navy-50); transition: transform .25s ease, background-color .2s ease; }
.lp-qa[open] summary::after { transform: rotate(180deg); background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314541b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center / 15px 15px no-repeat, var(--ms-green-100); }
.lp-qa-a { padding: 0 20px 20px 66px; color: var(--ms-muted); font-size: 15px; line-height: 1.65; }
.lp-qa-a p { margin: 0; }
.lp-ask { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding: 18px 20px; background: #fff; border: 1px dashed #c3ccd6; border-radius: 18px; }
.lp-ask p { flex: 1 1 260px; margin: 0; color: var(--ms-muted); font-size: 15px; }
.lp-ask b { color: var(--ms-navy-900); }
.lp-ask-ic { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ms-navy-900); color: var(--ms-green-400); flex: 0 0 auto; }
.lp-ask-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* =============================================================== ARRIVED */
/* The blue glow sits up on the left and the band's last 160px fade to plain navy-950,
   the footer's own colour, so the band runs into the footer with no edge. */
.lp-close {
    position: relative; overflow: hidden;
    background:
        linear-gradient(to top, var(--ms-navy-950), rgba(8,27,51,0) 160px),
        radial-gradient(900px 480px at 80% -20%, rgba(35,132,46,.28), transparent 60%),
        radial-gradient(760px 420px at -10% 75%, rgba(29,79,136,.36), transparent 58%),
        var(--ms-navy-950);
    color: #fff;
    padding: 104px var(--lp-pad) 100px;
    text-align: center;
}
/* the last stretch of the route, and the flag at its end */
.lp-close::before {
    content: ""; position: absolute; top: 0; height: 52px; width: 3px;
    left: calc(max(0px, (100% - var(--lp-w)) / 2) + var(--lp-rx) - 1.5px);
    background: var(--ms-green-500);
}
.lp-flag {
    position: absolute; top: 48px;
    left: calc(max(0px, (100% - var(--lp-w)) / 2) + var(--lp-rx) - 3px);
    width: 26px; height: 28px;
    background:
        linear-gradient(#fff, #fff) 1px 0 / 3px 28px no-repeat,
        linear-gradient(var(--ms-green-400), var(--ms-green-400)) 4px 1px / 20px 13px no-repeat;
    filter: drop-shadow(0 0 10px rgba(74,182,83,.55));
}
.lp-flag em { position: absolute; left: 32px; top: 0; font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ms-green-400); line-height: 14px; }
/* Wider screens: the rail turns into a solid sweep round the call to action, passes two
   stops and arrives at the flag on the right. The box starts on the rail's x, so the
   SVG (stretched to the box, strokes kept even) begins exactly where the rail ends. */
.lp-close-route { display: none; }
@media (min-width: 1000px) {
    .lp-close::before, .lp-close > .lp-flag { display: none; }
    .lp-close-route {
        display: block; position: absolute; top: 0; bottom: 0; right: 0;
        left: calc(max(0px, (100% - var(--lp-w)) / 2) + var(--lp-rx));
        pointer-events: none;
    }
    .lp-close-route svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .lp-cr-line, .lp-cr-glow { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
    .lp-cr-line { stroke: var(--ms-green-500); stroke-width: 3; }
    .lp-cr-glow { stroke: rgba(74,182,83,.16); stroke-width: 14; }
    .lp-cr-stop {
        position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
        background: var(--ms-navy-950); border: 3px solid var(--ms-green-400);
        box-shadow: 0 0 0 5px rgba(8,27,51,.9);
    }
    .lp-cr-stop.s1 { left: 18%; top: 93%; }
    .lp-cr-stop.s2 { left: 74%; top: 90%; background: var(--ms-green-500); border-color: #fff; box-shadow: 0 0 0 4px rgba(74,182,83,.3); }
    .lp-cr-flag {
        position: absolute; left: 94%; top: 44%; width: 26px; height: 30px; margin: -30px 0 0 -2.5px;
        background:
            linear-gradient(#fff, #fff) 1px 0 / 3px 30px no-repeat,
            linear-gradient(var(--ms-green-400), var(--ms-green-400)) 4px 1px / 20px 13px no-repeat;
        filter: drop-shadow(0 0 10px rgba(74,182,83,.55));
    }
    .lp-cr-flag em {
        position: absolute; left: 50%; bottom: 100%; margin-bottom: 8px; transform: translateX(-50%);
        font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
        color: var(--ms-green-400); white-space: nowrap;
    }
}
.lp-close-in { position: relative; max-width: 820px; margin: 0 auto; }
.lp-close h2 { color: #fff; font-size: 46px; line-height: 1.1; letter-spacing: -.03em; margin: 0 0 14px; }
.lp-close p { color: rgba(255,255,255,.74); font-size: 18px; max-width: 620px; margin: 0 auto; }
.lp-setup { list-style: none; margin: 36px auto 36px; padding: 0; display: flex; justify-content: center; position: relative; max-width: 660px; }
.lp-setup::before { content: ""; position: absolute; top: 21px; left: 12.5%; right: 12.5%; height: 3px; background: repeating-linear-gradient(90deg, rgba(74,182,83,.7) 0 10px, transparent 10px 16px); }
.lp-setup li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 700; color: rgba(255,255,255,.85); }
.lp-setup li > span { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ms-navy-900); border: 2.5px solid var(--ms-green-500); color: var(--ms-green-400); box-shadow: 0 0 0 6px var(--ms-navy-950); }
.lp-setup li.go > span { background: var(--ms-green-500); color: #fff; box-shadow: 0 0 0 6px var(--ms-navy-950), 0 0 22px rgba(74,182,83,.6); }
.lp-close-cta { justify-content: center; }
.lp-close-points { justify-content: center; }

/* =============================================================== MOTION
   Reveal on scroll (home.js adds .lp-anim only when motion is welcome, so with the
   script off or reduced motion everything is simply there), the dot on the how-it-works
   route, the ping round the bus. */
.lp-anim .lp-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--lp-d, 0s); }
.lp-anim .lp-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
    .lp-how::after {
        content: ""; position: absolute; top: 24px; left: 24px; z-index: 0;
        width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
        background: #fff; border: 3px solid var(--ms-green-500);
        box-shadow: 0 0 0 4px rgba(46,158,58,.2);
        animation: lp-how-run 7s cubic-bezier(.45,.05,.55,.95) infinite;
    }
    @keyframes lp-how-run {
        0%, 8% { transform: translateX(0); opacity: 0; }
        12% { opacity: 1; }
        46%, 54% { transform: translateX(calc((100cqw + 24px) / 3)); }
        88% { opacity: 1; }
        92%, 100% { transform: translateX(calc((200cqw + 48px) / 3)); opacity: 0; }
    }
    .lp-trip { animation: lp-float 8s ease-in-out infinite; }
    .lp-phone-stack { animation: lp-float 7s ease-in-out infinite .8s; }
    /* a thumb has just pressed Board on the driver's phone */
    .lp-sbtn.tap::after { animation: lp-tap 3.6s ease-out infinite 1.2s; }
    @keyframes lp-tap {
        0% { opacity: 0; transform: scale(.9); }
        8% { opacity: .95; transform: scale(1); }
        38% { opacity: 0; transform: scale(1.35); }
        100% { opacity: 0; transform: scale(1.35); }
    }
    @keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    /* the hero bus, parked at its last recorded position, keeps a slow pulse */
    .lp-bus-halo { animation: lp-halo 2.2s ease-out infinite; }
    @keyframes lp-halo { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) {
    /* The bus stays parked at the start of the route, centred on the line where the
       depot dot would be (so the depot itself is not drawn under it). */
    .lp-rail { -webkit-clip-path: none; clip-path: none; }
    .lp-rail .lp-bus { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; transform: translateY(-50%); }
    .lp-journey > .lp-stop-depart { display: none; }
    .lp-bus::before, .lp-bus::after { display: none; }
    .lp-stop, .lp-stop::after, .lp-tile, .lp-sa-item, .lp-jump a, .lp-qa summary::after, .lp-cycle button { transition: none; }
    .lp-tile:hover, .lp-sa-item:hover, .lp-jump a:hover { transform: none; }
    .lp-anim .lp-reveal { opacity: 1; transform: none; transition: none; }
}

/* =============================================================== RESPONSIVE */
@media (min-width: 1000px) {
    .lp-hero-in { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
    .lp-stage { margin: 0 0 0 auto; }
}
@media (min-width: 1000px) and (max-width: 1279px) {
    .lp-hero h1 { font-size: 48px; }
    .lp-asks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* a small laptop: the same picture, drawn a little smaller */
@media (min-width: 1000px) and (max-width: 1139px) {
    .lp-hero-in { gap: 36px; }
    .lp-hero h1 { font-size: 44px; }
    .lp-stage { zoom: .86; }
}
@media (min-width: 1500px) {
    .lp-hero h1 { font-size: 62px; }
    .lp-hero { padding-top: 88px; }
}
@media (max-width: 999px) {
    .lp-hero { padding-top: 60px; }
    .lp-hero-copy { max-width: 720px; }
    .lp-hero h1 { max-width: 16ch; }
}
@media (max-width: 1279px) {
    .lp-role { gap: 40px; }
    .lp-role-dark { padding: 44px 36px; }
}
@media (max-width: 1180px) {
    .lp-role, .lp-role-rev { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .lp-role-rev .lp-role-copy { order: 0; }
    .lp-role-dark { padding: 40px 32px; }
    .lp-role-copy { max-width: 640px; }
    .lp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-tile { grid-column: span 1; }
    .lp-t-sched, .lp-t-sec { grid-column: span 2; }
    .lp-t-pax, .lp-t-chat { grid-row: auto; }
    /* two columns: the passenger card beside the thread, ratings beside expiry */
    .lp-t-chat { order: 1; }
    .lp-t-rate, .lp-t-exp, .lp-t-sec { order: 2; }
    .lp-secure { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lp-t-rate, .lp-t-exp { grid-column: span 1; display: flex; gap: 22px; align-items: stretch; }
    .lp-t-exp > [aria-hidden] { margin-top: auto; }
    /* the ratings panel follows its words and takes up the height its row partner (the
       expiry tile) gives it, its rows spread evenly, so there is no empty band */
    .lp-t-rate > .lp-rate { margin-top: 0; flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-evenly; }
    .lp-how { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .lp-how::before, .lp-how::after { display: none; }
    /* the words run from the top beside the picture; a last row takes whatever height
       the picture has to spare, so a step with two bullets has no gaps between its lines */
    .lp-how-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 28px; align-items: start; padding: 16px 22px 16px 16px; }
    .lp-how-vis { grid-row: 1 / span 4; margin-bottom: 0; height: 100%; min-height: 250px; }
    .lp-how-card h3 { margin-top: 10px; }
    .lp-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lp-kpi { grid-column: span 2; }
    .lp-kpi:nth-child(4), .lp-kpi:nth-child(5) { grid-column: span 3; }
}
/* a small tablet: the schedule and security tiles stack, words over the picture, so
   every cell keeps its full "06:30 Home to School" and every security chip its words */
@media (min-width: 761px) and (max-width: 900px) {
    .lp-t-sched, .lp-t-sec { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
/* a tablet: the role's words on the left, its checklist on the right, the device below */
@media (min-width: 761px) and (max-width: 1180px) {
    .lp-role-copy { max-width: none; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: auto auto auto 1fr; column-gap: 36px; }
    .lp-role-copy > .lp-checks { grid-column: 2; grid-row: 1 / span 4; }
}
/* A small laptop: the navy driver panel has room for its words and its phone side by
   side, so the heading, the lead and the checklist stack on the left, the phone and
   its two cards stand on the right, and the panel has no empty corner. */
@media (min-width: 1000px) and (max-width: 1180px) {
    .lp-role-dark { grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; align-items: center; }
    .lp-role-dark .lp-role-copy { display: block; }
    .lp-role-dark .lp-vis-dark { min-height: 0; }
}
@media (max-width: 1023px) {
    .lp-sec { padding: 76px 0; }
    .lp-facts { padding-bottom: 60px; }
    .lp-head { margin-bottom: 38px; }
    .lp-head h2 { font-size: 36px; }
    .lp-sa h2 { font-size: 34px; }
    .lp-sa-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .lp-sa-clock { font-size: 200px; }
    .lp-plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 30px; }
    .lp-plan.hot { margin-block: 0; padding-top: 30px; }
    .lp-close h2 { font-size: 38px; }
}
/* A tablet: the 06:15 heading and its clock on the left, the morning's timeline beside
   them, so the band has no empty half. */
@media (min-width: 761px) and (max-width: 1023px) {
    .lp-sa .lp-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-rows: auto auto auto 1fr; column-gap: 40px; max-width: none; align-items: start; }
    .lp-sa .lp-head > .lp-eyebrow, .lp-sa .lp-head > h2, .lp-sa-dash { grid-column: 1; }
    .lp-sa-rl { grid-column: 2; grid-row: 1 / span 4; margin-top: 4px; }
    /* pricing: the two plans you buy online side by side, the quoted plan wide below */
    .lp-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 20px; }
    .lp-plan.quote { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto auto auto 1fr; column-gap: 36px; }
    .lp-plan.quote > * { grid-column: 1; }
    .lp-plan.quote > .lp-plan-head { grid-row: 1; }
    .lp-plan.quote > .lp-price { grid-row: 2; }
    .lp-plan.quote > .lp-annual { grid-row: 3; }
    .lp-plan.quote > .btn { grid-row: 4; align-self: start; margin-top: 0; }
    .lp-plan.quote > .lp-plan-lbl { grid-column: 2; grid-row: 1; align-self: end; }
    .lp-plan.quote > .lp-specs { grid-column: 2; grid-row: 2 / span 2; align-self: start; }
    .lp-plan.quote > .lp-plan-list { grid-column: 2; grid-row: 4; margin-bottom: 0; }
}
@media (max-width: 760px) {
    .lp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-kpi, .lp-kpi:nth-child(4) { grid-column: span 1; }
    .lp-kpi:nth-child(5) { grid-column: span 2; }
    /* back to one column: the picture panel fills the card, its mini card centred */
    .lp-how-card { display: flex; align-items: stretch; padding: 16px 16px 22px; }
    .lp-how-vis { height: auto; margin-bottom: 20px; min-height: 0; }
    .lp-how-card h3 { margin-top: 0; }
    .lp-t-sched, .lp-t-sec { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .lp-bento { grid-template-columns: minmax(0, 1fr); }
    .lp-tile, .lp-t-sched, .lp-t-sec { grid-column: span 1; }
    .lp-faq { grid-template-columns: minmax(0, 1fr); }
    .lp-pnotes { grid-template-columns: minmax(0, 1fr); }
    .lp-sa-items { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
    .lp-hero { padding: 44px var(--lp-pad) 84px; }
    .lp-pill { font-size: 11.5px; letter-spacing: .04em; padding: 6px 12px; gap: 7px; }
    .lp-hero h1 { font-size: 36px; letter-spacing: -.025em; }
    .lp-lead { font-size: 16.5px; }
    .lp-asks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-asks li { font-size: 13.5px; padding: 9px 10px; gap: 7px; }
    .lp-cta .btn { width: 100%; }
    .lp-stage { padding: 0; }
    .lp-phone-stack { position: relative; right: auto; top: auto; width: auto; }
    .lp-phone-hero { display: none; }
    .lp-note::before, .lp-note::after { display: none; }
    .lp-note { position: relative; right: auto; top: auto; bottom: auto; width: auto; margin: -10px 14px 0; font-weight: 500; color: var(--ms-muted); }
    .lp-note strong { display: block; color: var(--ms-navy-900); font-size: 13.5px; margin-bottom: 2px; }
    .lp-trip-head { flex-wrap: wrap; }
}
/* the map is drawn 480 units wide; on a phone that is ~340px, so its labels are set
   larger in map units to land at a readable ~11px */
@media (max-width: 599px) {
    .lp-map .jm-label { font-size: 15.5px; stroke-width: 4px; }
}
@media (max-width: 599px) {
    .lp-sec { padding: 60px 0; }
    .lp-facts { padding-bottom: 48px; }
    .lp-kpis { margin-top: -56px; gap: 10px; grid-template-columns: minmax(0, 1fr); }
    .lp-kpi, .lp-kpi:nth-child(4), .lp-kpi:nth-child(5) { grid-column: auto; }
    .lp-kpi { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 14px 16px; }
    .lp-kpi-ic { display: none; }
    .lp-kpi-n { grid-row: 1 / span 2; font-size: 36px; color: var(--ms-green-700); }
    .lp-kpi-n.word { font-size: 19px; line-height: 1.1; }
    .lp-kpi-t { font-size: 13.5px; margin: 0 0 2px; color: var(--ms-navy-900); align-self: end; }
    .lp-kpi-l { font-size: 13.5px; line-height: 1.4; align-self: start; }
    .lp-segs { margin-top: 30px; }
    .lp-segs li { font-size: 13px; padding: 5px 12px 5px 6px; }
    .lp-stop { width: 28px; height: 28px; left: calc(var(--lp-rx) - var(--lp-gut) - 14px); top: -3px; font-size: 12px; border-width: 2.5px; box-shadow: 0 0 0 5px var(--lp-bg); }
    .lp-stop::after { box-shadow: 0 0 16px rgba(74,182,83,.6); }
    .lp-stop-depart { width: 18px; height: 18px; top: 22px; left: calc(var(--lp-rx) - 9px); border-width: 3px; }
    .lp-bus { width: 28px; height: 28px; margin-top: 17px; top: calc(46vh - 14px); }
    .lp-bus .ic-sm { width: 14px; height: 14px; }
    .lp-eyebrow { font-size: 11.5px; letter-spacing: .1em; }
    .lp-head { margin-bottom: 30px; }
    .lp-head h2, .lp-sa h2 { font-size: 29px; }
    .lp-sub { font-size: 16px; }
    .lp-how-top { flex-wrap: wrap; }
    .lp-how-vis { padding: 14px; }
    .lp-how-card { padding: 12px 12px 18px; }
    .lp-how-card h3 { font-size: 22px; }
    .lp-jump { margin: -8px 0 32px; }
    .lp-jump { gap: 8px; }
    .lp-jump a { font-size: 13px; min-height: 44px; padding: 5px 13px 5px 5px; gap: 8px; }
    .lp-jump-ic { width: 32px; height: 32px; padding: 7.5px; }
    .lp-roles { gap: 28px; }
    .lp-role h3 { font-size: 27px; }
    .lp-role-lead { font-size: 16px; }
    .lp-checks li { font-size: 14px; gap: 12px; }
    .lp-role-dark { padding: 28px 18px; border-radius: 22px; }
    .lp-role-vis { min-height: 0; padding: 26px 14px; border-radius: 22px; flex-direction: column; }
    .lp-vis-dark { padding: 8px 0 0; }
    .lp-vis-green { flex-direction: column; }
    .lp-floats, .lp-vis-green .lp-floats { width: 100%; max-width: 290px; margin: 18px auto 0; align-items: stretch; }
    .lp-float-go { margin-right: 0; }
    .lp-float-chat { text-align: right; }
    .lp-float-sign { width: auto; }
    .lp-measure { display: none; }
    .lp-tile { padding: 22px 18px 18px; }
    .lp-t-sec { padding: 24px 18px; }
    .lp-secure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lp-week { padding: 10px; }
    .lp-ofloats { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; margin-top: 16px; }
    .lp-ofloat { position: static; flex: 1 1 140px; width: auto; padding: 11px 12px; }
    .lp-of-inv { padding-top: 14px; }
    .lp-of-inv b { font-size: 21px; }
    .lp-exp-line span { width: 44px; height: 44px; font-size: 15px; }
    .lp-sa-clock { font-size: 130px; top: 30px; }
    .lp-sa-dash { padding: 14px; gap: 10px; }
    .lp-sa-time { font-size: 36px; }
    .lp-sa-item { padding: 18px; }
    .lp-amt { font-size: 42px; }
    .lp-plan { padding: 26px 18px 20px; }
    .lp-plan.hot { padding-top: 34px; }
    .lp-cycle { margin: -8px 0 30px; }
    .lp-cycle button { padding: 8px 14px; font-size: 14px; }
    .lp-qa summary { font-size: 15px; gap: 11px; padding: 12px; }
    .lp-qa-ic { width: 34px; height: 34px; padding: 7.5px; }
    .lp-qa-a { padding: 0 16px 18px 16px; font-size: 14.5px; }
    .lp-ask-btns, .lp-ask-btns .btn { width: 100%; }
    .lp-close { padding: 96px var(--lp-pad) 76px; text-align: left; }
    .lp-close-in { padding-left: calc(var(--lp-gut) - var(--lp-pad)); }
    .lp-close h2 { font-size: 30px; }
    .lp-close p { font-size: 16px; margin: 0; }
    .lp-setup { flex-direction: column; gap: 14px; margin: 28px 0; }
    .lp-setup::before { top: 20px; bottom: 20px; left: 21px; right: auto; width: 3px; height: auto; background: repeating-linear-gradient(180deg, rgba(74,182,83,.7) 0 8px, transparent 8px 14px); }
    .lp-setup li { flex-direction: row; gap: 14px; }
    .lp-close-cta .btn { width: 100%; }
    .lp-close-cta, .lp-close-points { justify-content: flex-start; }
}
/* A phone, tighter: the same content in less scrolling. Section padding, the gaps
   between blocks and the padding inside cards come down; nothing is hidden. */
@media (max-width: 599px) {
    .lp-sec { padding: 44px 0; }
    .lp-facts { padding-bottom: 34px; }
    .lp-head { margin-bottom: 22px; }
    .lp-eyebrow { margin-bottom: 8px; }
    .lp-head h2 { margin-bottom: 10px; }
    .lp-sub:not(.lp-sub-x) { line-height: 1.5; }
    /* hero */
    .lp-hero { padding: 34px var(--lp-pad) 78px; }
    .lp-hero-in { gap: 34px; }
    .lp-pill { margin-bottom: 16px; }
    .lp-hero h1 { margin-bottom: 14px; }
    .lp-lead { margin-bottom: 12px; line-height: 1.5; }
    .lp-asks { gap: 6px; margin-bottom: 14px; }
    .lp-asks li { padding: 7px 10px; }
    .lp-hero-note { margin-bottom: 20px; }
    .lp-points { margin-top: 18px; gap: 6px 18px; }
    .lp-trip-body { padding-top: 10px; }
    .lp-trip .rl-item { padding-bottom: 6px; }
    /* trip facts */
    .lp-kpis { gap: 8px; }
    .lp-kpi { grid-template-columns: 76px minmax(0, 1fr); padding: 12px 14px; }
    .lp-kpi-n { font-size: 32px; }
    .lp-kpi-n.word { font-size: 18px; }
    .lp-segs { margin-top: 24px; }
    .lp-segs-t { margin-bottom: 10px; font-size: 11.5px; }
    .lp-segs ul { gap: 6px; }
    .lp-segs li { min-height: 36px; padding: 4px 11px 4px 5px; gap: 6px; font-size: 13px; }
    .lp-segs li .ic { width: 24px; height: 24px; padding: 4px; }
    /* how it works */
    .lp-how { gap: 22px; }
    .lp-how-top { margin-bottom: 12px; }
    .lp-how-num { width: 42px; height: 42px; padding: 10px; }
    .lp-how-vis { padding: 10px; margin-bottom: 14px; }
    .lp-how-card h3 { margin-bottom: 4px; }
    .lp-how-card > p { margin-bottom: 6px; font-size: 15px; }
    .lp-ticks li { padding: 4px 0 4px 26px; font-size: 14px; line-height: 1.45; }
    .lp-ticks li::before { top: 6px; }
    .lp-ticks li::after { top: 11px; }
    /* three views */
    .lp-jump { margin: -4px 0 24px; gap: 6px; }
    .lp-jump a { padding: 4px 12px 4px 4px; gap: 7px; }
    .lp-roles { gap: 22px; }
    .lp-role { gap: 20px; }
    .lp-role-for { margin-bottom: 10px; }
    .lp-role-ic { width: 40px; height: 40px; border-radius: 12px; padding: 9px; }
    .lp-role h3 { margin-bottom: 8px; }
    .lp-role-lead { margin-bottom: 12px; }
    .lp-checks li { padding: 6px 0; }
    .lp-ck { width: 32px; height: 32px; border-radius: 10px; padding: 6.5px; }
    .lp-role-dark { padding: 24px 16px; }
    .lp-role-vis { padding: 20px 12px; }
    .lp-floats, .lp-vis-green .lp-floats { margin-top: 14px; gap: 12px; }
    .lp-of-inv .micro { letter-spacing: .04em; }
    .lp-of-row { flex-wrap: wrap; gap: 4px 8px; }
    /* bento */
    .lp-bento { gap: 14px; }
    .lp-tile { padding: 18px 16px 16px; gap: 16px; }
    .lp-tile-ic { width: 40px; height: 40px; border-radius: 12px; padding: 8px; }
    .lp-tile h3 { font-size: 19px; }
    .lp-tile p { margin-top: 10px; font-size: 14px; line-height: 1.55; }
    .lp-tile-chips { margin-top: 12px; }
    .lp-t-sec { padding: 20px 16px; }
    .lp-secure { gap: 8px; }
    .lp-secure li { padding: 11px; gap: 6px; }
    /* 06:15 */
    .lp-sa-grid { gap: 26px; }
    .lp-sa-dash { margin-top: 20px; }
    .lp-sa-rl { margin-top: 18px; }
    .lp-sa-rl .rl-item { padding-bottom: 10px; }
    .lp-sa-items { gap: 12px; }
    .lp-sa-item { padding: 16px; }
    .lp-sa-vis { margin-bottom: 10px; }
    .lp-sa-ic { width: 40px; height: 40px; padding: 9px; }
    .lp-sa-item h3 { margin-bottom: 6px; }
    .lp-sa-item p { margin-bottom: 10px; font-size: 13.5px; line-height: 1.55; }
    /* pricing */
    .lp-plans { gap: 22px; }
    .lp-plan { padding: 22px 16px 18px; }
    .lp-plan.hot { padding-top: 30px; }
    .lp-plan-head { margin-bottom: 12px; }
    .lp-annual { margin-bottom: 14px; }
    .lp-specs { margin-bottom: 14px; }
    .lp-specs span { font-size: 11.5px; }
    .lp-plan-list { margin-bottom: 18px; }
    .lp-plan-list li { padding: 5px 0 5px 28px; font-size: 14px; }
    .lp-plan-list li::before { top: 6px; }
    .lp-plan-list li::after { top: 11.5px; }
    .lp-pnotes { margin-top: 24px; gap: 10px; }
    .lp-pnotes p { padding: 13px 14px; font-size: 13.5px; }
    /* questions */
    .lp-faq, .lp-faq-col { gap: 10px; }
    .lp-qa summary { min-height: 56px; }
    .lp-ask { margin-top: 20px; padding: 16px; gap: 12px; }
    /* arrived */
    .lp-close { padding: 84px var(--lp-pad) 60px; }
    .lp-setup { gap: 10px; margin: 22px 0; }
    .lp-close-points { margin-top: 18px; }
}
/* A phone: the route keeps to a narrow lane (see --lp-rx / --lp-gut at the top). */
@media (max-width: 479px) {
    .lp-jump-l { display: none; }
    .lp-jump-s { display: inline; }
    .lp-jump { gap: 5px; }
    .lp-jump a { flex: 1 1 auto; justify-content: flex-start; padding-right: 9px; gap: 6px; }
    .lp-stop { width: 22px; height: 22px; left: calc(var(--lp-rx) - var(--lp-gut) - 11px); top: 0; font-size: 10.5px; border-width: 2px; box-shadow: 0 0 0 4px var(--lp-bg); }
    .lp-stop::after { box-shadow: 0 0 12px rgba(74,182,83,.6); }
    .lp-stop-depart { width: 14px; height: 14px; top: 24px; left: calc(var(--lp-rx) - 7px); border-width: 3px; }
    .lp-bus { width: 22px; height: 22px; margin-top: 14px; top: calc(46vh - 11px); border-width: 2px; box-shadow: 0 0 0 3px rgba(74,182,83,.22), 0 6px 12px rgba(8,27,51,.28); }
    .lp-bus .ic-sm { width: 12px; height: 12px; }
    .lp-bus::after { inset: -6px; }
}
@media (max-width: 380px) {
    .lp-hero h1 { font-size: 33px; }
    /* a long call to action ("Start with Master Transport") wraps inside its capsule
       rather than being cut off on the narrowest phones */
    .lp-cta .btn { white-space: normal; text-align: center; line-height: 1.25; padding-left: 20px; padding-right: 20px; }
}

/* Touch screens: nothing smaller than a fingertip. */
@media (hover: none) {
    .lp-tile:hover, .lp-sa-item:hover { transform: none; }
}
/* Windows high contrast: the green heading words keep a plain underline instead of the
   drawn one, the huge outlined 06:15 (transparent text) is dropped rather than turned
   solid over the copy, and the route keeps a visible line. */
@media (forced-colors: active) {
    .lp .lp-hl { background: none; text-decoration: underline; text-underline-offset: .15em; }
    .lp-sa-clock { display: none; }
    .lp-rail { background: none; }
    .lp-rail::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed CanvasText; }
    .lp-bus::before, .lp-bus::after { display: none; }
    .lp-stop, .lp-bus, .lp-how-num, .lp-setup li > span { border: 2px solid CanvasText; }
    .lp-stop::after { background: Highlight; box-shadow: none; }
    .lp-stop.is-reached { color: HighlightText; }
    .lp-cr-line { stroke: CanvasText; }
    .lp-cr-glow { display: none; }
    /* an icon is a painted mask, and forced colours would paint it the page colour */
    .lpi::before { forced-color-adjust: none; background: CanvasText; }
}

/* Printing: everything visible and still, the pictures and the route left off, and the
   navy bands printed as dark text on white (browsers drop backgrounds on paper). */
@media print {
    .lp-rail, .lp-stop, .lp-bus, .lp-stage, .lp-role-vis, .lp-how-vis, .lp-sa-clock, .lp-sa-dash,
    .lp-sa-rl, .lp-flag, .lp-close-route, .lp-cycle, .lp-jump, .lp-ask-btns { display: none !important; }
    .lp-anim .lp-reveal, .lp-reveal { opacity: 1 !important; transform: none !important; }
    .lp-hero, .lp-sa, .lp-close, .lp-role-dark, .lp-plan.hot, .lp-t-sec { background: none !important; box-shadow: none !important; }
    .lp-hero, .lp-hero *, .lp-sa, .lp-sa *, .lp-close, .lp-close *, .lp-role-dark, .lp-role-dark *,
    .lp-plan.hot, .lp-plan.hot *, .lp-t-sec, .lp-t-sec * { color: #13202f !important; }
    .lp-plan, .lp-tile, .lp-qa, .lp-kpi, .lp-how-step { break-inside: avoid; }
    /* icons are painted backgrounds, which paper drops unless told otherwise */
    .lpi::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .lp-sec { padding: 28px 0; }
    .lp-in { padding-left: var(--lp-pad); }
}