/* Public shell only. Never changes app navigation or entry forms. */
.marketing-body {background: #fff; color: #303348;}
.marketing-body .marketing-nav {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; height: auto; min-height: 92px; max-width: 1280px; margin: auto; padding: 20px 32px; background: #fff;}
.marketing-body .marketing-brand {gap: 10px; padding: 0; font-size: 23px; color: #303348; letter-spacing: -.8px;}
.marketing-body .marketing-brand .brand-mark {width: 36px; height: 36px; background: #7566b6; color: #fff; border-radius: 11px; font-size: 21px;}
.marketing-body .marketing-desktop-links {display: flex; flex: 1; justify-content: center; gap: 21px;}
.marketing-body .marketing-nav nav a {display: flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: #515568;}
.marketing-body .marketing-account {display: flex; flex: 0 0 auto; align-items: center; gap: 16px;}
.marketing-body .marketing-signin {display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: #303348; font-size: 14px; font-weight: 700; white-space: nowrap;}
.marketing-body .marketing-nav .button {min-height: 44px; padding: 11px 18px; font-size: 14px; white-space: nowrap;}
.marketing-body .marketing-mobile-menu {display: none;}
.marketing-body a:focus-visible, .marketing-body summary:focus-visible {outline: 3px solid #51437c; outline-offset: 4px; border-radius: 4px;}
.marketing-body .marketing-nav nav a:hover, .marketing-body .marketing-signin:hover, .marketing-body .marketing-footer nav a:hover {color: #51437c; text-decoration: underline; text-underline-offset: 5px;}
.marketing-body .marketing-nav nav a[aria-current=page] {color: #51437c; text-decoration: underline; text-underline-offset: 5px;}
.marketing-body .marketing-skip {position: absolute; z-index: 100; top: 8px; left: 16px; padding: 12px 18px; transform: translateY(-160%); background: #fff; color: #303348; border: 2px solid #51437c; border-radius: 8px; font-size: 16px;}
.marketing-body .marketing-skip:focus {transform: translateY(0);}
.marketing-body .marketing-footer {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 30px max(32px, calc((100% - 1216px)/2)); background: #fff; border-top: 1px solid #e9e6ef; color: #595e70; font-size: 14px;}
.marketing-body .marketing-footer .fleetie-footer-links {display: flex; flex-wrap: wrap; gap: 6px 20px;}
.marketing-body .marketing-footer nav a {display: inline-flex; align-items: center; min-height: 44px; padding: 0; color: #515568; font-size: 14px;}
@media (max-width: 1179px) {
    .marketing-body .marketing-nav {gap: 8px 20px; min-height: 0; padding-block: 16px 0;}
    .marketing-body .marketing-desktop-links {display: none;}
    .marketing-body .marketing-mobile-menu {display: block; flex: 1 0 100%; border-top: 1px solid #eeeaf4;}
    .marketing-body .marketing-mobile-menu summary {display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; color: #515568; font-size: 14px; font-weight: 600; list-style: none;}
    .marketing-body .marketing-mobile-menu summary::-webkit-details-marker {display: none;}
    .marketing-body .marketing-mobile-menu summary span {display: inline-block; font-size: 20px;}
    .marketing-body .marketing-mobile-menu[open] summary span {transform: rotate(180deg);}
    .marketing-body .marketing-mobile-menu nav {display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 4px 0 16px;}
    .marketing-body .marketing-mobile-menu:not([open]) nav {display: none;}
}
@media (max-width: 560px) {
    .marketing-body .marketing-nav {padding-inline: 16px; gap: 8px 10px;}
    .marketing-body .marketing-brand {gap: 7px; font-size: 21px;}
    .marketing-body .marketing-brand .brand-mark {width: 30px; height: 32px; font-size: 19px; border-radius: 9px;}
    .marketing-body .marketing-account {gap: 12px;}
    .marketing-body .marketing-nav .button {padding-inline: 12px; font-size: 13px;}
    .marketing-body .marketing-signin {font-size: 13px;}
    .marketing-body .marketing-mobile-menu nav {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px;}
    .marketing-body .marketing-footer {align-items: flex-start; flex-direction: column; gap: 16px; padding: 28px 20px;}
}
@media (prefers-reduced-motion: reduce) {
    .marketing-body *, .marketing-body *::before, .marketing-body *::after {scroll-behavior: auto; transition: none; animation: none;}
}