/* MyFlott landing page. Copy: specs/19. Build status: specs/20.
   Loaded only by Components/Pages/Landing.razor. Every rule is scoped under .lp-root
   so nothing leaks into the app. Color tokens come from app.css :root.

   Road + truck pattern system. Each motif has exactly one job:
     1. Lane paint    dashed amber / white lines   movement and flow
                      (gutter highway, hero lanes, analytics route, comparison divider, closing road)
     2. DOT tape      orange / silver blocks       "this panel matters"
                      (hero merge demo, Team tile, Pro plan, closing band)
     3. Rivets        dot seams                    joins between stacked items
                      (problem list, Load Board tile, Free plan)
     4. Trailer ribs  corrugated siding            big surfaces (3-4 days panel, Update Sheet tile)
     5. Tread         tire tread band              hero base, rolls with page scroll
     6. Sign plates   highway sign labels          the two section labels (Analytics, Pricing)
     7. Trailers      load chips with wheels       loads moving through the hero demo

   Radius lock: 6px everywhere (var(--radius)); circles only for route markers and wheels. */

/* ───────────── Base ───────────── */

:root:has(.lp-root) {
    scroll-padding-top: 80px;
}

@media (prefers-reduced-motion: no-preference) {
    :root:has(.lp-root) {
        scroll-behavior: smooth;
    }
}

.lp-root {
    --lp-wrap: 1240px;
    --lp-gutter: 24px;
    --lp-ease: cubic-bezier(.16, 1, .3, 1);
    --lp-muted: #4A5561;
    --lp-silver: #DCE1E3;
    --lp-sheet: #E5E9EA;
    --lp-tape: repeating-linear-gradient(90deg, var(--orange) 0 30px, var(--lp-silver) 30px 48px);
    --lp-dash-amber: repeating-linear-gradient(90deg, var(--amber) 0 20px, transparent 20px 40px);
    --lp-rivet: radial-gradient(circle, rgba(19, 25, 33, .3) 0 2px, transparent 2.6px);

    position: relative;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    interpolate-size: allow-keywords;
}

.lp-root *,
.lp-root *::before,
.lp-root *::after {
    box-sizing: border-box;
}

/* Resets use :where() so they carry no weight against component classes. */
.lp-root :where(h1, h2, h3, p, ul, ol, dl, dd, figure) {
    margin: 0;
}

.lp-root :where(ul, ol) {
    padding: 0;
    list-style: none;
}

.lp-root :where(a) {
    color: inherit;
    text-decoration: none;
}

.lp-root :where(svg) {
    width: 1em;
    height: 1em;
    fill: currentColor;
    flex: none;
}

.lp-root :focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 3px;
    border-radius: var(--radius);
}

.lp-wrap {
    width: 100%;
    max-width: var(--lp-wrap);
    margin-inline: auto;
    padding-inline: var(--lp-gutter);
}

.lp-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.lp-root main > section {
    position: relative;
    overflow-x: clip;
}

/* ───────────── Type ───────────── */

.lp-h1,
.lp-h2,
.lp-root h3,
.lp-sign {
    font-family: 'Overpass', 'Inter', sans-serif;
}

.lp-h1 {
    font-weight: 800;
    font-size: clamp(2.5rem, 5.4vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -.025em;
    margin-bottom: 36px;
}

.lp-h1-line {
    display: block;
}

.lp-h1-accent {
    display: inline-block;
    padding-bottom: .06em;
    background: linear-gradient(var(--orange), var(--orange)) 0 94% / 100% .13em no-repeat;
}

.lp-h2 {
    font-weight: 800;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    max-width: 22ch;
    text-wrap: balance;
}

.lp-h2-wide {
    max-width: 28ch;
}

.lp-root h3 {
    font-weight: 800;
    letter-spacing: -.01em;
}

.lp-lead {
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--lp-muted);
    max-width: 34ch;
}

.lp-section-lead {
    margin-top: 18px;
    font-size: 1.15rem;
    max-width: 52ch;
    color: var(--on-ink-muted);
}

/* Sign plate: a highway sign, not an eyebrow. Used twice on the page. */
.lp-sign {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    padding: 7px 16px 6px;
    font-weight: 800;
    font-size: .95rem;
    letter-spacing: .01em;
    border-radius: var(--radius);
    background: var(--ink);
    color: #fff;
    box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 5px rgba(255, 255, 255, .9);
}

.lp-analytics .lp-sign {
    background: var(--slate);
    box-shadow: inset 0 0 0 3px var(--slate), inset 0 0 0 5px rgba(255, 255, 255, .9);
}

.lp-tag {
    display: inline-block;
    padding: 4px 8px 3px;
    border-radius: var(--radius);
    background: var(--fog);
    color: var(--lp-muted);
    font: 700 .68rem/1.2 'Overpass Mono', ui-monospace, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.lp-tag-ink {
    background: rgba(255, 255, 255, .08);
    color: var(--on-ink-muted);
}

/* ───────────── Buttons ───────────── */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 24px;
    border: 2px solid transparent;
    border-radius: var(--radius);
    font: 700 1rem/1 'Inter', sans-serif;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s var(--lp-ease), background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}

.lp-btn:hover {
    transform: translateY(-1px);
}

.lp-btn:active {
    transform: translateY(0) scale(.98);
}

.lp-btn-sm {
    min-height: 40px;
    padding: 0 16px;
    font-size: .92rem;
}

/* Primary: orange with a bumper line along the bottom edge. */
.lp-btn-primary {
    background: var(--orange);
    color: var(--ink);
    box-shadow: inset 0 -3px 0 rgba(19, 25, 33, .2), 0 6px 18px -8px rgba(255, 153, 0, .8);
}

.lp-btn-primary:hover {
    background: #FFA826;
    box-shadow: inset 0 -3px 0 rgba(19, 25, 33, .2), 0 10px 24px -8px rgba(255, 153, 0, .9);
}

.lp-btn-ghost,
.lp-btn-outline {
    border-color: var(--ink);
    color: var(--ink);
}

.lp-btn-ghost:hover,
.lp-btn-outline:hover {
    background: var(--ink);
    color: #fff;
}

.lp-btn-on-ink {
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}

.lp-btn-on-ink:hover {
    background: #fff;
    color: var(--ink);
}

.lp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
}

.lp-actions-center {
    justify-content: center;
}

/* ───────────── Pattern utilities ───────────── */

.lp-tape-top {
    position: relative;
}

.lp-tape-top::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 8px;
    background: var(--lp-tape);
    background-size: 48px 100%;
    z-index: 2;
    transition: background-position .8s var(--lp-ease);
}

.lp-tape-top:hover::before {
    background-position: 48px 0;
}

.lp-ribs {
    --lp-rib: rgba(255, 255, 255, .05);
    background-image:
        repeating-linear-gradient(90deg, var(--lp-rib) 0 3px, transparent 3px 9px, rgba(0, 0, 0, .06) 9px 10px, transparent 10px 22px);
}

.lp-rivets-top::before,
.lp-rivets-bottom::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    height: 6px;
    background: var(--lp-rivet) 0 50% / 20px 6px repeat-x;
}

.lp-rivets-top::before {
    top: 14px;
}

.lp-rivets-bottom::after {
    bottom: 14px;
}

/* ───────────── Gutter highway (wide screens, scroll-driven) ───────────── */

.lp-highway {
    display: none;
}

@supports (animation-timeline: scroll()) {
    @media (min-width: 1440px) {
        .lp-highway {
            display: block;
            position: fixed;
            top: 0;
            bottom: 0;
            left: max(16px, calc((100vw - var(--lp-wrap)) / 2 - 60px));
            width: 28px;
            z-index: 5;
            pointer-events: none;
            background:
                linear-gradient(90deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px calc(100% - 2px), rgba(255, 255, 255, .55) calc(100% - 2px)),
                repeating-linear-gradient(180deg, var(--amber) 0 18px, transparent 18px 36px) 50% 0 / 2px 100% no-repeat,
                var(--slate);
            -webkit-mask-image: linear-gradient(180deg, transparent 0 56px, #000 120px calc(100% - 60px), transparent);
            mask-image: linear-gradient(180deg, transparent 0 56px, #000 120px calc(100% - 60px), transparent);
            opacity: .92;
        }

        .lp-highway-truck {
            position: absolute;
            left: 50%;
            top: 0;
            font-size: 26px;
            color: var(--orange);
            filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
            animation: lp-drive linear both;
            animation-timeline: scroll(root block);
        }
    }
}

@keyframes lp-drive {
    from { transform: translate(-50%, 110px) rotate(90deg); }
    to   { transform: translate(-50%, calc(100vh - 90px)) rotate(90deg); }
}

/* ───────────── Nav ───────────── */

.lp-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom: 1px solid transparent;
}

@supports (animation-timeline: scroll()) {
    .lp-nav {
        animation: lp-nav-edge linear both;
        animation-timeline: scroll(root block);
        animation-range: 0 120px;
    }
}

@keyframes lp-nav-edge {
    to {
        border-bottom-color: var(--line);
        box-shadow: 0 8px 24px -18px rgba(19, 25, 33, .5);
    }
}

.lp-nav-inner {
    display: flex;
    align-items: center;
    gap: 32px;
    height: 68px;
}

/* Brand kit: wwwroot/myflott-logo. Nav = wordmark, footer = reversed lockup, tab = favicon set.
   Kit rules: never recolor, keep clear space of half the tile, lockup min height 24px. */
.lp-brand {
    display: inline-flex;
    flex: none;
    border-radius: var(--radius);
}

.lp-brand img {
    display: block;
    width: auto;
    height: 31px;
}

.lp-brand-footer img {
    height: 36px;
}

.lp-nav-links {
    display: flex;
    gap: 28px;
    margin-left: 12px;
}

.lp-nav-links a,
.lp-nav-signin {
    font-weight: 500;
    font-size: .95rem;
    color: var(--lp-muted);
    transition: color .2s;
}

.lp-nav-links a:hover,
.lp-nav-signin:hover {
    color: var(--ink);
}

.lp-nav-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

/* ───────────── Hero ───────────── */

.lp-hero {
    padding-top: clamp(40px, 6vw, 72px);
    background:
        linear-gradient(180deg, var(--paper) 0 55%, var(--fog) 100%);
}

.lp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 56px;
    align-items: start;
}

.lp-hero-copy .lp-actions {
    margin-top: 28px;
}

/* Merge demo */
.lp-merge {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(19, 25, 33, .45), 0 2px 0 rgba(19, 25, 33, .04);
}

.lp-merge-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 22px 16px;
}

.lp-merge-who {
    display: block;
    font: 800 1.15rem/1.2 'Overpass', sans-serif;
}

.lp-merge-week {
    display: block;
    margin-top: 2px;
    font: 500 .82rem/1.3 'Overpass Mono', ui-monospace, monospace;
    color: var(--lp-muted);
}

.lp-lanes {
    display: grid;
    gap: 10px;
    padding: 0 22px;
}

.lp-lane {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}

.lp-lane-label {
    font-weight: 600;
    font-size: .86rem;
    line-height: 1.25;
    color: var(--slate);
}

/* Each company is a lane: asphalt, white edge lines, amber center dashes. */
.lp-lane-road {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 66px;
    padding: 0 12px;
    border-radius: var(--radius);
    background: var(--ink);
    box-shadow: inset 0 3px 0 -1px rgba(255, 255, 255, .28), inset 0 -3px 0 -1px rgba(255, 255, 255, .28);
    overflow: hidden;
}

.lp-lane-road::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    margin-top: -1px;
    background: var(--lp-dash-amber);
    background-size: 40px 2px;
    opacity: .85;
}

.lp-merge.is-live .lp-lane-road::before {
    animation: lp-lane-flow 1.1s linear infinite;
}

@keyframes lp-lane-flow {
    to { background-position: -40px 0; }
}

/* Trailer: a load chip with a cab stripe and two wheels. */
.lp-trailer {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1px;
    min-width: 96px;
    padding: 6px 10px 8px 12px;
    margin-bottom: 4px;
    border-radius: var(--radius);
    border-left: 4px solid var(--orange);
    background: var(--paper);
    color: var(--ink);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .25);
}

.lp-trailer::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: -7px;
    height: 11px;
    background:
        radial-gradient(circle, #9AA5B1 0 2px, #2B3542 2.5px 5px, transparent 5.5px) 0 50% / 11px 11px no-repeat,
        radial-gradient(circle, #9AA5B1 0 2px, #2B3542 2.5px 5px, transparent 5.5px) 100% 50% / 11px 11px no-repeat,
        radial-gradient(circle, #9AA5B1 0 2px, #2B3542 2.5px 5px, transparent 5.5px) calc(100% - 13px) 50% / 11px 11px no-repeat;
}

.lp-trailer b {
    font: 700 .92rem/1.2 'Overpass Mono', ui-monospace, monospace;
}

.lp-trailer small {
    font-size: .68rem;
    line-height: 1.2;
    color: var(--lp-muted);
    white-space: nowrap;
}

.lp-merge.is-armed .lp-trailer {
    opacity: 0;
    transform: translateX(-220px);
    transition: transform .95s var(--lp-ease), opacity .45s ease;
}

.lp-merge.is-armed .lp-trailer.is-in {
    opacity: 1;
    transform: none;
}

.lp-merge.is-armed .lp-trailer.is-out {
    opacity: 0;
    transform: translateX(440px);
    transition: transform 1s cubic-bezier(.5, 0, .75, 0), opacity .9s ease;
}

.lp-merge-total {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 18px 22px;
    background: var(--ink);
    color: var(--on-ink);
}

.lp-merge-total-label {
    font-size: .88rem;
    color: var(--on-ink-muted);
}

.lp-merge-total-value {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}

.lp-merge-total output {
    font: 800 clamp(1.6rem, 2.6vw, 2.1rem)/1 'Overpass Mono', ui-monospace, monospace;
    color: var(--orange);
    font-variant-numeric: tabular-nums;
}

.lp-merge-plus {
    font: 700 .85rem/1 'Overpass Mono', ui-monospace, monospace;
    color: var(--amber);
    opacity: 0;
}

.lp-merge-plus.is-flash {
    animation: lp-plus 1.1s var(--lp-ease);
}

@keyframes lp-plus {
    0%   { opacity: 0; transform: translateY(8px); }
    25%  { opacity: 1; transform: none; }
    75%  { opacity: 1; transform: none; }
    100% { opacity: 0; transform: translateY(-6px); }
}

/* Tire tread band at the hero base. Rolls with page scroll where supported. */
.lp-tread {
    height: 26px;
    margin-top: clamp(56px, 7vw, 88px);
    background:
        linear-gradient(135deg, var(--ink) 0 25%, transparent 25% 50%, var(--ink) 50% 75%, transparent 75%) 0 0 / 26px 13px repeat-x,
        linear-gradient(45deg, var(--ink) 0 25%, transparent 25% 50%, var(--ink) 50% 75%, transparent 75%) 0 100% / 26px 13px repeat-x,
        var(--slate);
}

@supports (animation-timeline: scroll()) {
    .lp-tread {
        animation: lp-roll linear both;
        animation-timeline: scroll(root block);
    }
}

@keyframes lp-roll {
    to { background-position: 780px 0, 780px 100%, 0 0; }
}

/* ───────────── Problem ───────────── */

.lp-problem {
    padding-block: clamp(80px, 10vw, 128px);
    background: var(--fog);
}

.lp-problem-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 80px);
    align-items: center;
}

.lp-odometer {
    position: relative;
    padding: 44px 40px 40px;
    border-radius: var(--radius);
    background-color: var(--ink);
    color: var(--on-ink);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 60px -36px rgba(19, 25, 33, .7);
}

.lp-odometer-value {
    display: block;
    font: 800 clamp(6rem, 13vw, 10rem)/.88 'Overpass', sans-serif;
    letter-spacing: -.04em;
    color: var(--orange);
}

.lp-odometer-unit {
    display: block;
    margin-top: 6px;
    font: 800 clamp(1.8rem, 3vw, 2.4rem)/1 'Overpass', sans-serif;
}

.lp-odometer-note {
    margin-top: 22px;
    max-width: 30ch;
    color: var(--on-ink-muted);
}

.lp-problem-list {
    margin-top: 32px;
}

.lp-problem-list li {
    padding-block: 22px;
}

/* Rivet seam between items, like panel joins on a trailer wall. */
.lp-problem-list li + li {
    background: var(--lp-rivet) 0 0 / 20px 6px repeat-x;
    padding-top: 28px;
}

.lp-problem-list h3 {
    font-size: 1.35rem;
    margin-bottom: 6px;
}

.lp-problem-list p {
    color: var(--lp-muted);
    max-width: 56ch;
}

/* ───────────── Analytics ───────────── */

.lp-analytics {
    padding-block: clamp(88px, 11vw, 140px);
    background: var(--ink);
    color: var(--on-ink);
}

.lp-analytics .lp-h2 {
    color: #fff;
}

/* Route: a road with three stops; the truck drives it once when it scrolls into view. */
.lp-route {
    position: relative;
    margin-block: 64px 72px;
}

.lp-route::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 30px;
    border-radius: var(--radius);
    background: var(--lp-dash-amber) 0 50% / 40px 2px repeat-x, var(--slate);
    box-shadow: inset 0 3px 0 -1px rgba(255, 255, 255, .25), inset 0 -3px 0 -1px rgba(255, 255, 255, .25);
}

.lp-route-truck {
    position: absolute;
    inset: 0 0 auto;
    height: 30px;
    z-index: 2;
    font-size: 28px;
    color: var(--orange);
    pointer-events: none;
    transform: translateX(calc(66.67% + 32px));
    transition: transform 2.6s cubic-bezier(.45, 0, .2, 1);
}

.lp-route-truck svg {
    position: absolute;
    left: 0;
    top: 1px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .4));
}

.lp-route-stops {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
}

.lp-route-stop {
    position: relative;
    padding-top: 58px;
}

.lp-route-stop::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 40px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 3px solid var(--orange);
    background: var(--orange);
    box-shadow: 0 0 0 6px rgba(255, 153, 0, .18);
    transition: background-color .4s, border-color .4s, box-shadow .4s;
}

.lp-route-stop h3 {
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 8px;
}

.lp-route-stop p {
    color: var(--on-ink-muted);
    max-width: 34ch;
}

/* Animated state only exists when landing.js armed the page. */
.lp-anim .lp-route:not(.is-in) .lp-route-truck {
    transform: translateX(8px);
}

.lp-anim .lp-route:not(.is-in) .lp-route-stop::before {
    background: var(--ink);
    border-color: rgba(255, 255, 255, .35);
    box-shadow: none;
}

.lp-anim .lp-route.is-in .lp-route-stop:nth-child(2)::before { transition-delay: 1.25s; }
.lp-anim .lp-route.is-in .lp-route-stop:nth-child(3)::before { transition-delay: 2.4s; }

.lp-analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}

.lp-period {
    border-radius: var(--radius);
    background: var(--panel);
    border: 1px solid var(--ink-line);
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
}

.lp-period-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    font: 800 1rem/1.2 'Overpass', sans-serif;
    color: #fff;
    border-bottom: 1px solid var(--ink-line);
}

.lp-period-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

.lp-period-table th,
.lp-period-table td {
    padding: 12px 20px;
    text-align: left;
}

.lp-period-table .lp-num {
    text-align: right;
}

.lp-period-table thead th {
    font: 700 .7rem/1.3 'Overpass Mono', ui-monospace, monospace;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--on-ink-muted);
    border-bottom: 1px solid var(--ink-line);
}

.lp-period-table tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, .025);
}

.lp-period-table tbody th {
    font-weight: 600;
    color: #fff;
}

.lp-period-cos {
    display: none;
}

.lp-period-table td {
    position: relative;
    font-family: 'Overpass Mono', ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.lp-period-table tfoot th,
.lp-period-table tfoot td {
    font-weight: 700;
    color: var(--orange);
    border-top: 2px solid var(--orange-dark);
}

.lp-cell {
    all: unset;
    cursor: help;
    font: 600 .92rem/1.2 'Overpass Mono', ui-monospace, monospace;
    color: var(--on-ink);
    border-bottom: 1px dashed rgba(255, 255, 255, .35);
    transition: color .2s, border-color .2s;
}

.lp-cell:hover,
.lp-cell:focus-visible {
    color: var(--orange);
    border-color: var(--orange);
}

.lp-cell:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 4px;
}

.lp-tip {
    position: absolute;
    right: 12px;
    bottom: calc(100% - 4px);
    z-index: 5;
    display: grid;
    gap: 4px;
    min-width: 190px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    font-size: .78rem;
    text-align: left;
    box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .6);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity .2s, transform .25s var(--lp-ease);
}

.lp-tip span {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.lp-tip em {
    font-style: normal;
    color: var(--lp-muted);
}

.lp-period-table td:hover .lp-tip,
.lp-cell:focus + .lp-tip {
    opacity: 1;
    transform: none;
}

.lp-period-hint {
    padding: 14px 20px 18px;
    font-size: .82rem;
    color: var(--on-ink-muted);
}

.lp-facts li {
    padding-block: 18px;
    font-size: 1.08rem;
    color: var(--on-ink-muted);
}

.lp-facts li + li {
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .25) 0 14px, transparent 14px 28px) 0 0 / 100% 2px no-repeat;
}

.lp-facts b {
    color: #fff;
    font-weight: 700;
}

/* ───────────── Platform bento ───────────── */

.lp-platform {
    padding-block: clamp(88px, 11vw, 140px);
}

.lp-bento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 48px;
}

.lp-tile {
    position: relative;
    padding: 30px 28px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background-color: var(--paper);
    overflow: hidden;
    transition: transform .35s var(--lp-ease), box-shadow .35s var(--lp-ease);
}

.lp-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 24px 48px -28px rgba(19, 25, 33, .45);
}

.lp-tile h3 {
    font-size: 1.45rem;
    margin: 16px 0 8px;
}

.lp-tile p {
    color: var(--lp-muted);
    max-width: 46ch;
}

.lp-tile p b {
    color: var(--ink);
}

.lp-tile-icon {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    background: var(--orange);
    color: var(--ink);
    font-size: 23px;
}

.lp-tile-sheet {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 28px;
    align-items: center;
    background-color: var(--fog);
}

.lp-tile-sheet.lp-ribs {
    --lp-rib: rgba(255, 255, 255, .7);
}

.lp-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.lp-board-col {
    display: grid;
    align-content: start;
    gap: 8px;
    min-height: 196px;
    padding: 10px;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .78);
    border: 1px solid var(--line);
}

.lp-board-title {
    font: 700 .66rem/1.2 'Overpass Mono', ui-monospace, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--lp-muted);
    padding: 2px 2px 4px;
}

.lp-card {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border-radius: var(--radius);
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--slate);
    font-size: .76rem;
    line-height: 1.3;
    color: var(--slate);
    box-shadow: 0 2px 0 rgba(19, 25, 33, .05);
    transition: transform .9s var(--lp-ease);
}

.lp-card b {
    font: 700 .82rem/1.2 'Overpass Mono', ui-monospace, monospace;
    color: var(--ink);
}

.lp-card i {
    font-style: normal;
    font-weight: 600;
    color: var(--lp-muted);
}

.lp-card-alert {
    border-left-color: var(--loss);
}

.lp-card-alert i {
    color: var(--loss);
}

/* Sitting truck rises to the top of its column when the tile scrolls in. */
.lp-anim .lp-tile-sheet:not(.is-in) .lp-card-alert {
    transform: translateY(calc(100% + 8px));
}

.lp-anim .lp-tile-sheet:not(.is-in) .lp-card-alert + .lp-card {
    transform: translateY(calc(-100% - 8px));
}

.lp-anim .lp-tile-sheet.is-in .lp-card {
    transition-delay: .5s;
}

.lp-tile-loads {
    padding-bottom: 46px;
}

.lp-loads {
    display: grid;
    gap: 8px;
    margin-top: 20px;
}

.lp-loads div {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--fog);
    font: 600 .8rem/1.2 'Overpass Mono', ui-monospace, monospace;
}

.lp-loads dt {
    font-weight: 700;
}

.lp-loads dd:last-child {
    color: var(--lp-muted);
}

/* Hotspots: dot-grid map with an orange density cluster that breathes. */
.lp-tile-hot {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 360px;
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--on-ink);
}

.lp-tile-hot::before,
.lp-tile-hot::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lp-tile-hot::before {
    background: radial-gradient(rgba(255, 255, 255, .16) 1.4px, transparent 1.9px) 0 0 / 14px 14px;
    -webkit-mask-image: linear-gradient(180deg, #000 0 25%, transparent 55%);
    mask-image: linear-gradient(180deg, #000 0 25%, transparent 55%);
}

.lp-tile-hot::after {
    background: radial-gradient(var(--orange) 1.8px, transparent 2.3px) 0 0 / 14px 14px;
    -webkit-mask-image: radial-gradient(circle at 74% 18%, #000 0 12%, rgba(0, 0, 0, .45) 22%, transparent 32%),
                        radial-gradient(circle at 36% 10%, rgba(0, 0, 0, .7) 0 6%, transparent 14%);
    mask-image: radial-gradient(circle at 74% 18%, #000 0 12%, rgba(0, 0, 0, .45) 22%, transparent 32%),
                radial-gradient(circle at 36% 10%, rgba(0, 0, 0, .7) 0 6%, transparent 14%);
}

.lp-anim .lp-tile-hot.is-in::after {
    animation: lp-breathe 3.6s ease-in-out infinite;
}

@keyframes lp-breathe {
    50% { opacity: .55; }
}

.lp-tile-hot > * {
    position: relative;
    z-index: 1;
}

.lp-tile-hot p {
    color: var(--on-ink-muted);
}

.lp-tile-hot p b {
    color: #fff;
}

.lp-tile-team {
    grid-column: span 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
    padding-top: 38px;
}

.lp-roles {
    display: grid;
    gap: 10px;
    min-width: 200px;
}

.lp-roles li {
    padding: 11px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--fog);
    font: 700 .95rem/1.2 'Overpass', sans-serif;
}

.lp-roles li:nth-child(2) {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

/* ───────────── Comparison ───────────── */

.lp-compare {
    padding-block: clamp(88px, 11vw, 140px);
    background: var(--fog);
}

.lp-compare-road {
    position: relative;
    margin-top: 48px;
}

/* Lane divider between the two columns, drawn top to bottom on reveal. */
.lp-compare-road::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 67%;
    width: 4px;
    margin-left: -2px;
    background: repeating-linear-gradient(180deg, var(--amber) 0 18px, transparent 18px 34px);
    transform-origin: top;
    transition: transform 1.4s var(--lp-ease) .3s;
}

.lp-anim .lp-compare-road:not(.is-in)::after {
    transform: scaleY(0);
}

.lp-compare-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}

.lp-compare-table th[scope="row"] {
    width: 34%;
    padding: 20px 24px 20px 0;
    text-align: left;
    font: 700 1.02rem/1.35 'Overpass', sans-serif;
    vertical-align: middle;
}

.lp-compare-table thead th {
    padding: 20px 26px;
    text-align: left;
    font: 800 1.1rem/1.2 'Overpass', sans-serif;
}

.lp-compare-table td {
    padding: 20px 26px;
    vertical-align: middle;
}

.lp-compare-table .lp-lane-sheets {
    background: var(--lp-sheet);
    color: var(--lp-muted);
}

.lp-compare-table .lp-lane-flott {
    background: var(--ink);
    color: var(--on-ink);
    font-weight: 600;
}

.lp-compare-table thead .lp-lane-flott {
    color: var(--orange);
}

.lp-compare-table thead .lp-lane-sheets { border-top-left-radius: var(--radius); }
.lp-compare-table thead .lp-lane-flott { border-top-right-radius: var(--radius); }
.lp-compare-table tbody tr:last-child .lp-lane-sheets { border-bottom-left-radius: var(--radius); }
.lp-compare-table tbody tr:last-child .lp-lane-flott { border-bottom-right-radius: var(--radius); }

/* ───────────── Pricing ───────────── */

.lp-pricing {
    padding-block: clamp(88px, 11vw, 140px);
}

.lp-plans {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    max-width: 940px;
    margin-top: 48px;
}

.lp-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 44px 34px 34px;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden;
}

.lp-plan-free {
    background: var(--paper);
}

.lp-plan-pro {
    background-color: var(--ink);
    background-image: repeating-linear-gradient(-45deg, rgba(255, 153, 0, .04) 0 14px, transparent 14px 28px);
    border-color: var(--ink);
    color: var(--on-ink);
    box-shadow: 0 40px 80px -40px rgba(19, 25, 33, .8);
}

.lp-plan-name {
    align-self: flex-start;
    padding: 4px 12px 3px;
    border: 2px solid currentColor;
    border-radius: var(--radius);
    font-size: 1rem;
}

.lp-plan-pro .lp-plan-name {
    color: var(--orange);
}

.lp-plan-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 22px;
}

.lp-plan-price span {
    font: 800 4.2rem/1 'Overpass', sans-serif;
    letter-spacing: -.03em;
}

.lp-plan-price small {
    font-size: 1rem;
    color: var(--on-ink-muted);
}

.lp-plan-sub {
    margin-top: 8px;
    color: var(--lp-muted);
}

.lp-plan-pro .lp-plan-sub {
    color: var(--on-ink-muted);
}

.lp-plan-list {
    display: grid;
    gap: 12px;
    margin: 26px 0 34px;
}

.lp-plan-list li {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.lp-plan-list svg {
    font-size: 20px;
    margin-top: 2px;
    color: var(--ink);
}

.lp-plan-pro .lp-plan-list svg {
    color: var(--orange);
}

.lp-plan-pro .lp-plan-list b {
    color: #fff;
}

.lp-plan .lp-btn {
    margin-top: auto;
    width: 100%;
}

.lp-pricing-note {
    margin-top: 28px;
    max-width: 60ch;
    color: var(--lp-muted);
}

/* ───────────── FAQ ───────────── */

.lp-faq {
    padding-block: clamp(88px, 11vw, 128px);
    background: var(--fog);
}

.lp-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(32px, 6vw, 80px);
    align-items: start;
}

.lp-faq-item + .lp-faq-item {
    background: var(--lp-rivet) 0 0 / 20px 6px repeat-x;
}

.lp-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    cursor: pointer;
    list-style: none;
    font: 700 1.15rem/1.35 'Overpass', sans-serif;
}

.lp-faq-item summary::-webkit-details-marker {
    display: none;
}

.lp-faq-icon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--paper);
    font-size: 20px;
    transition: transform .35s var(--lp-ease), background-color .2s, color .2s;
}

.lp-faq-item[open] .lp-faq-icon {
    transform: rotate(45deg);
    background: var(--orange);
    border-color: var(--orange);
}

.lp-faq-item p {
    padding-bottom: 24px;
    max-width: 60ch;
    color: var(--lp-muted);
}

.lp-faq-item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .4s var(--lp-ease), content-visibility .4s allow-discrete;
}

.lp-faq-item[open]::details-content {
    block-size: auto;
}

/* ───────────── Closing ───────────── */

.lp-closing {
    padding-block: clamp(110px, 13vw, 170px) clamp(96px, 11vw, 140px);
    background: var(--ink);
    color: var(--on-ink);
    text-align: center;
    overflow: hidden;
}

.lp-closing::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 10px;
    background: var(--lp-tape);
    background-size: 48px 100%;
}

/* Perspective road running toward the viewer behind the closing headline. */
.lp-closing-road {
    position: absolute;
    inset: 0;
    perspective: 360px;
    perspective-origin: 50% 0;
    pointer-events: none;
}

.lp-closing-road span {
    position: absolute;
    left: 50%;
    bottom: -10%;
    width: 520px;
    height: 160%;
    margin-left: -260px;
    transform-origin: 50% 100%;
    transform: rotateX(74deg);
    background:
        repeating-linear-gradient(180deg, var(--amber) 0 46px, transparent 46px 92px) 50% 0 / 8px 100% no-repeat,
        linear-gradient(90deg, transparent 6%, rgba(255, 255, 255, .7) 6% calc(6% + 6px), transparent calc(6% + 6px) calc(94% - 6px), rgba(255, 255, 255, .7) calc(94% - 6px) 94%, transparent 94%),
        linear-gradient(90deg, transparent 0 4%, var(--slate) 4% 96%, transparent 96%);
    -webkit-mask-image: linear-gradient(0deg, #000 0 25%, transparent 75%);
    mask-image: linear-gradient(0deg, #000 0 25%, transparent 75%);
    opacity: .38;
}

.lp-anim .lp-closing.is-live .lp-closing-road span {
    animation: lp-road 1.3s linear infinite;
}

@keyframes lp-road {
    to { background-position: 50% 92px, 0 0, 0 0; }
}

.lp-closing-inner {
    position: relative;
    z-index: 1;
}

.lp-closing .lp-h2 {
    margin-inline: auto;
    color: #fff;
    font-size: clamp(2.4rem, 5vw, 4rem);
}

.lp-closing .lp-section-lead {
    margin-inline: auto;
}

/* ───────────── Footer ───────────── */

.lp-footer {
    background: var(--ink);
    color: var(--on-ink-muted);
    border-top: 1px solid var(--ink-line);
}

.lp-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 40px;
    padding-block: 34px 40px;
}

.lp-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.lp-footer-links a:hover {
    color: #fff;
}

.lp-footer-copy {
    margin-left: auto;
    font-size: .88rem;
}

/* ───────────── Reveal motion (armed by landing.js) ───────────── */

.lp-anim [data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s var(--lp-ease), transform .8s var(--lp-ease);
    transition-delay: calc(var(--d, 0) * 90ms);
}

.lp-anim [data-reveal].is-in {
    opacity: 1;
    transform: none;
}

/* Hero headline paints immediately (it is the LCP element); only its road-paint underline draws in. */
@media (prefers-reduced-motion: no-preference) {
    .lp-h1-accent {
        animation: lp-underline 1s var(--lp-ease) .35s both;
    }
}

@keyframes lp-underline {
    from { background-size: 0 .13em; }
}

/* Tile hover lift must not fight the reveal transform once revealed. */
.lp-anim .lp-tile.is-in:hover {
    transform: translateY(-3px);
    transition-delay: 0s;
    transition-duration: .35s;
}

/* ───────────── Responsive ───────────── */

@media (max-width: 1023px) {
    .lp-nav-links {
        display: none;
    }

    .lp-hero-grid,
    .lp-problem-grid,
    .lp-analytics-grid,
    .lp-faq-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-hero-grid {
        gap: 40px;
    }

    .lp-lead {
        max-width: 46ch;
    }

    .lp-bento {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-tile-sheet,
    .lp-tile-team {
        grid-column: span 2;
    }
}

@media (max-width: 767px) {
    .lp-root {
        --lp-gutter: 16px;
    }

    .lp-nav-inner {
        gap: 12px;
        height: 60px;
    }

    .lp-nav-actions {
        gap: 14px;
    }

    .lp-brand img {
        height: 27px;
    }

    .lp-lead {
        font-size: 1.1rem;
    }

    .lp-merge-head,
    .lp-lanes,
    .lp-merge-total {
        padding-inline: 14px;
    }

    .lp-lane {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .lp-merge-total::before {
        left: 14px;
        right: 14px;
    }

    .lp-merge-total-label {
        font-size: .8rem;
    }

    .lp-odometer {
        padding: 32px 26px;
    }

    /* Route turns vertical: stops stack, the road becomes a left rail, the truck stays parked. */
    .lp-route {
        margin-block: 44px 52px;
    }

    .lp-route::before {
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        width: 30px;
        height: auto;
        background: repeating-linear-gradient(180deg, var(--amber) 0 20px, transparent 20px 40px) 50% 0 / 2px 100% no-repeat, var(--slate);
        box-shadow: inset 3px 0 0 -1px rgba(255, 255, 255, .25), inset -3px 0 0 -1px rgba(255, 255, 255, .25);
    }

    .lp-route-truck {
        display: none;
    }

    .lp-route-stops {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .lp-route-stop {
        padding: 0 0 0 52px;
    }

    .lp-route-stop::before {
        top: 4px;
        left: 5px;
    }

    .lp-anim .lp-route.is-in .lp-route-stop:nth-child(2)::before { transition-delay: .3s; }
    .lp-anim .lp-route.is-in .lp-route-stop:nth-child(3)::before { transition-delay: .6s; }

    .lp-period-table th,
    .lp-period-table td {
        padding: 11px 12px;
    }

    .lp-period-table {
        font-size: .84rem;
    }

    /* Phones: the companies count moves under the dispatcher name so both periods fit. */
    .lp-period-table tr > :nth-child(2) {
        display: none;
    }

    .lp-period-cos {
        display: block;
        font-size: .72rem;
        font-weight: 500;
        color: var(--on-ink-muted);
    }

    .lp-cell {
        font-size: .84rem;
    }

    .lp-bento {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-tile-sheet,
    .lp-tile-team {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-tile {
        padding: 26px 20px;
    }

    .lp-tile-loads {
        padding-bottom: 44px;
    }

    .lp-roles {
        grid-auto-flow: column;
        min-width: 0;
    }

    .lp-roles li {
        text-align: center;
        padding-inline: 10px;
    }

    /* Comparison becomes one card per topic, still two lanes side by side. */
    .lp-compare-road::after {
        display: none;
    }

    .lp-compare-table,
    .lp-compare-table tbody,
    .lp-compare-table tr {
        display: block;
    }

    .lp-compare-table thead {
        display: none;
    }

    .lp-compare-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 14px;
    }

    .lp-compare-table th[scope="row"] {
        grid-column: 1 / -1;
        width: auto;
        padding: 0 0 8px;
    }

    .lp-compare-table td {
        padding: 14px 14px;
        font-size: .92rem;
    }

    .lp-compare-table td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        font: 700 .66rem/1.2 'Overpass Mono', ui-monospace, monospace;
        letter-spacing: .06em;
        text-transform: uppercase;
        opacity: .75;
    }

    .lp-compare-table td.lp-lane-flott::before {
        color: var(--orange);
        opacity: 1;
    }

    .lp-compare-table td.lp-lane-sheets {
        border-radius: var(--radius) 0 0 var(--radius);
    }

    .lp-compare-table td.lp-lane-flott {
        border-radius: 0 var(--radius) var(--radius) 0;
    }

    .lp-plans {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-plan {
        padding: 40px 22px 24px;
    }

    .lp-footer-copy {
        margin-left: 0;
    }
}

@media (max-width: 420px) {
    .lp-nav-signin {
        display: none;
    }

    .lp-actions .lp-btn {
        flex: 1 1 100%;
    }
}

/* ───────────── Reduced motion ───────────── */

@media (prefers-reduced-motion: reduce) {
    .lp-root *,
    .lp-root *::before,
    .lp-root *::after {
        animation: none !important;
        transition: none !important;
    }

    .lp-highway {
        display: none !important;
    }
}