/* Shared theme. Measurements follow the supplied 829px-wide homepage reference. */
@font-face { font-family: Roboto; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/cached/Roboto-Regular.dece7c71bbe61710.ttf') format('truetype'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url('/cached/Roboto-Bold.35757eaa996b3359.ttf') format('truetype'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 800 900; font-display: swap; src: url('/cached/Roboto-ExtraBold.8e2e0999f2abc8a2.ttf') format('truetype'); }
:root {
    --unit: clamp(.88px, .120627vw, 1.5px);
    --header-height: calc(60 * var(--unit));
    --navy: #0b2735;
    --green: #25d756;
    --dark-green: #007441;
    --muted: #38515e;
    --wash: #effbfc;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 20px); }
body { margin: 0; background: #fff; color: var(--navy); font-family: Roboto, Arial, sans-serif; }
button, input { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { text-decoration: none; color: inherit; }
a:hover { text-decoration: none; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid #06a9e8; outline-offset: 5px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
h1:focus { outline: none; }
h2 { font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
ul { list-style: none; margin: 0; padding: 0; }
.content-width { width: 87.5%; max-width: 1125px; margin-inline: auto; }
.wide-width { width: 94.6%; max-width: 1216px; margin-inline: auto; }
.panel-width { width: 93%; max-width: 1195px; margin-inline: auto; }
.icon { display: inline-block; width: 1.4em; height: 1.4em; flex-shrink: 0; vertical-align: middle; }
.eyebrow { color: #00ae3b; font-size: calc(11.5 * var(--unit)); font-weight: 700; margin-bottom: calc(14 * var(--unit)); }
.wordmark { font-size: calc(36 * var(--unit)); font-style: italic; font-weight: 900; letter-spacing: -.065em; color: #fff; line-height: 1; }
.button {
    display: inline-flex; justify-content: center; align-items: center; gap: calc(10 * var(--unit));
    padding: calc(12 * var(--unit)) calc(18 * var(--unit));
    border: 0; border-radius: calc(9 * var(--unit)); font-size: calc(12 * var(--unit)); font-weight: 700;
    line-height: 1.2; min-height: calc(38 * var(--unit)); transition: filter .16s, transform .16s;
}
.button:hover { filter: brightness(1.04); transform: translateY(-1px); }
.button-green { background: var(--green); color: #073020; }
.button-white { background: #fff; color: var(--navy); }
.handwriting { font-family: 'Segoe Print', 'Bradley Hand', 'Comic Sans MS', cursive; font-style: italic; font-weight: 700; letter-spacing: -.07em; line-height: .98; }
.handwriting::after { content: ''; display: block; height: 2px; background: #26d85c; transform: rotate(-11deg); margin: 8px 1px 0 13px; }

/* Header and the supplied full-width hero illustration. */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; color: #fff; background: #006e91f2; backdrop-filter: blur(12px); box-shadow: 0 2px 12px #002b3e18; }
.hero {
    height: calc(467 * var(--unit)); min-height: 410px; position: relative; isolation: isolate; color: #fff;
    padding-top: var(--header-height);
    background: #078db9 url('/cached/mareu-hero-johannesburg-1600.e7cac300810b6597.webp') right top / 112% 112% no-repeat;
}
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,55,83,.55), rgba(0,70,100,.12) 46%, transparent 65%); }
.navigation { height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--unit)); position: relative; z-index: 5; }
.desktop-links { display: flex; align-items: center; gap: calc(29 * var(--unit)); margin-left: calc(20 * var(--unit)); }
.desktop-links a { font-size: calc(10.5 * var(--unit)); font-weight: 700; position: relative; padding-block: 14px; }
.desktop-links .is-active::after { content: ''; position: absolute; height: 2px; background: #41e36b; bottom: 2px; left: 0; right: 0; }
.mobile-links a { position: relative; width: fit-content; padding-bottom: 5px; }
.mobile-links .is-active { color: var(--dark-green); }
.mobile-links .is-active::after { content: ''; position: absolute; height: 2px; background: #41e36b; bottom: 0; left: 0; right: 0; }
.nav-actions { display: flex; align-items: center; gap: calc(10 * var(--unit)); margin-left: auto; }
.portal-button { white-space: nowrap; background: transparent; border: 1px solid #d0f3fa; border-radius: calc(9 * var(--unit)); color: #fff; font-size: calc(10 * var(--unit)); font-weight: 700; padding: calc(10 * var(--unit)) calc(14 * var(--unit)); }
.nav-download { background: #2fde65; white-space: nowrap; font-size: calc(10.5 * var(--unit)); padding: calc(11 * var(--unit)) calc(15 * var(--unit)); color: #092f20; min-height: 0; }
.site-search { margin-right: 5px; }
.site-search summary, .mobile-menu summary { display: grid; place-items: center; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.site-search summary { width: 20px; height: 28px; }
.site-search .icon { width: 16px; height: 16px; }
.search-panel, .mobile-links { position: absolute; right: 0; top: 100%; padding: 20px; border-radius: 14px; color: var(--navy); background: #fff; box-shadow: 0 10px 30px #07354b50; min-width: 260px; font-size: 14px; }
.search-panel label { display: block; font-weight: 700; margin-bottom: 10px; }
.search-panel input { border: 1px solid #bdd6da; padding: 10px; border-radius: 8px; width: 100%; }
.search-results { display: grid; gap: 12px; padding-top: 16px; }
.mobile-menu { display: none; }
.hero-content { padding-top: calc(50 * var(--unit)); position: relative; }
.hero-content h1 { font-size: calc(52 * var(--unit)); line-height: .94; font-weight: 800; font-style: italic; letter-spacing: -.03em; }
.hero-content h1 em { font-style: italic; color: #7cf594; }
.hero-content > p { margin-top: calc(14 * var(--unit)); font-size: calc(15.5 * var(--unit)); line-height: 1.4; text-shadow: 0 1px 3px #04394c80; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: calc(10 * var(--unit)); margin-top: calc(22 * var(--unit)); }
.button-rider { background: #72f885; color: #022921; }
.hero-buttons .button { box-shadow: 0 4px 9px #002a3b30; }

/* App-download section: transparent device artwork over a cool, pale wash. */
.app-download { background: radial-gradient(ellipse at 78% 80%, #e4faf3 0%, #effbfc 52%, #f2fcfe 100%); }
.app-download-inner { height: calc(374 * var(--unit)); position: relative; display: grid; grid-template-columns: 47% 53%; align-items: center; }
.download-copy { padding-top: calc(15 * var(--unit)); position: relative; z-index: 2; }
.download-copy h2 { font-size: calc(42 * var(--unit)); line-height: 1.01; }
.download-copy > p:not(.eyebrow) { font-size: calc(14.5 * var(--unit)); line-height: 1.45; color: var(--muted); margin: calc(15 * var(--unit)) 0 calc(23 * var(--unit)); }
.phones { position: relative; height: 100%; }
.phone { position: absolute; width: calc(206 * var(--unit)); height: calc(340 * var(--unit)); object-fit: contain; top: calc(24 * var(--unit)); filter: drop-shadow(1px 7px 4px #0b263423); }
.phone-ride { left: calc(-2 * var(--unit)); transform: rotate(-12deg); }
.phone-map { left: calc(122 * var(--unit)); transform: rotate(7deg); z-index: 1; }
.app-note { position: absolute; right: calc(-24 * var(--unit)); bottom: calc(60 * var(--unit)); font-size: calc(25 * var(--unit)); transform: rotate(-10deg); z-index: 2; }
.store-badges { display: flex; align-items: center; gap: calc(16 * var(--unit)); flex-wrap: wrap; }
.store-badge { display: inline-flex; align-items: center; justify-content: center; gap: calc(7 * var(--unit)); background: #000; color: #fff; border: 1px solid #7a8d94; border-radius: calc(5 * var(--unit)); height: calc(46 * var(--unit)); min-width: calc(137 * var(--unit)); padding: calc(5 * var(--unit)) calc(9 * var(--unit)); text-align: left; }
.store-badge > .icon { width: calc(27 * var(--unit)); height: calc(31 * var(--unit)); }
.store-badge > svg:not(.icon) { width: calc(27 * var(--unit)); height: calc(31 * var(--unit)); }
.store-badge span { display: block; }
.store-badge small { display: block; font-size: calc(10 * var(--unit)); line-height: 1.05; }
.store-badge strong { display: block; font-size: calc(22 * var(--unit)); font-weight: 400; letter-spacing: -.035em; line-height: 1.05; }

/* Side-by-side Rider and Driver benefit cards. */
.audience { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: calc(14 * var(--unit)); padding-block: calc(13 * var(--unit)) 0; }
.audience-card { min-height: calc(254 * var(--unit)); border-radius: calc(17 * var(--unit)); background: linear-gradient(120deg,#d3f5d2,#e6f8e1); position: relative; overflow: hidden; }
.driver-card { background: linear-gradient(105deg,#beeebc,#e1f5de); }
.character { position: absolute; width: calc(201 * var(--unit)); height: calc(260 * var(--unit)); bottom: calc(-4 * var(--unit)); left: calc(-17 * var(--unit)); object-fit: cover; object-position: center top; }
.driver-card .character { width: calc(230 * var(--unit)); height: calc(250 * var(--unit)); left: calc(-43 * var(--unit)); object-fit: contain; object-position: center bottom; }
.audience-copy { position: relative; margin-left: 43.4%; padding: calc(23 * var(--unit)) calc(7 * var(--unit)) calc(9 * var(--unit)) 0; }
.card-label { font-size: calc(12 * var(--unit)); font-weight: 700; color: #006a35; margin-bottom: calc(5 * var(--unit)); }
.audience-copy h2 { font-size: calc(22.5 * var(--unit)); letter-spacing: -.022em; line-height: 1.06; }
.benefits { display: grid; gap: calc(8 * var(--unit)); margin: calc(11 * var(--unit)) 0 calc(15 * var(--unit)); }
.benefits li { display: flex; align-items: center; gap: calc(8 * var(--unit)); font-size: calc(11.5 * var(--unit)); line-height: 1.2; color: #243f42; }
.benefits .icon { width: calc(16 * var(--unit)); height: calc(16 * var(--unit)); color: #098344; }
.audience-copy .button { color: #004c36; padding-inline: calc(18 * var(--unit)); }

/* Four numbered informational steps. */
.how-it-works { text-align: center; padding-top: calc(26 * var(--unit)); padding-bottom: calc(14 * var(--unit)); }
.how-it-works .eyebrow { margin-bottom: calc(8 * var(--unit)); }
.how-it-works h2 { font-size: calc(30 * var(--unit)); }
.section-subtitle { font-size: calc(13 * var(--unit)); color: var(--muted); margin-top: calc(8 * var(--unit)); }
.steps { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: calc(23 * var(--unit)); }
.steps article { position: relative; }
.steps article + article::before { content: ''; position: absolute; left: 0; top: calc(25 * var(--unit)); height: calc(58 * var(--unit)); width: 1px; background: #e4ecef; }
.step-icon { display: grid; place-items: center; width: calc(62 * var(--unit)); height: calc(62 * var(--unit)); background: #e6f5fa; border-radius: 50%; margin-inline: auto; }
.step-icon .icon { width: calc(30 * var(--unit)); height: calc(30 * var(--unit)); }
.steps h3 { font-size: calc(13.5 * var(--unit)); margin-top: calc(8 * var(--unit)); font-weight: 800; }
.steps p { font-size: calc(12 * var(--unit)); line-height: 1.35; color: var(--muted); margin-top: calc(7 * var(--unit)); }

/* Safety panel and the supplied city scene. */
.safety { height: calc(204 * var(--unit)); padding: calc(22 * var(--unit)) calc(26 * var(--unit)); border-radius: calc(17 * var(--unit)); position: relative; overflow: hidden; background: #edfafd; display: grid; grid-template-columns: 34% 13% 30% 23%; align-items: center; isolation: isolate; }
.safety-city { position: absolute; z-index: -1; width: 39%; height: 100%; right: 0; top: 0; background-position: right center; background-size: auto 100%; background-repeat: no-repeat; mask-image: linear-gradient(90deg,transparent,black 55%); opacity: .8; }
.safety-city.is-near { background-image: url('/cached/safety-city-shield-banner-1000.ff3c57d64bb89fa7.webp'); }
.safety .eyebrow { font-size: calc(10.5 * var(--unit)); margin-bottom: calc(10 * var(--unit)); }
.safety h2 { font-size: calc(29 * var(--unit)); line-height: 1.06; }
.safety-copy > p:not(.eyebrow) { font-size: calc(13 * var(--unit)); color: var(--muted); line-height: 1.4; margin-top: calc(8 * var(--unit)); margin-bottom: calc(13 * var(--unit)); }
.safety .button { padding: calc(9 * var(--unit)) calc(19 * var(--unit)); min-height: 0; }
.safety .support-email { padding-inline: calc(12 * var(--unit)); font-size: calc(11 * var(--unit)); }
.safety-shield { transform: translateX(calc(-7 * var(--unit))); }
.safety-shield .icon { width: calc(62 * var(--unit)); height: calc(72 * var(--unit)); filter: drop-shadow(0 2px 2px #346b4340); }
.safety-benefits { display: grid; gap: calc(9 * var(--unit)); }
.safety-benefits li { font-size: calc(11.5 * var(--unit)); color: var(--muted); display: flex; gap: calc(8 * var(--unit)); align-items: center; }
.safety-benefits .icon { width: calc(14 * var(--unit)); height: calc(14 * var(--unit)); color: #19c44f; }
.safety-note { position: absolute; right: calc(24 * var(--unit)); bottom: calc(20 * var(--unit)); transform: rotate(-10deg); font-size: calc(24 * var(--unit)); }

/* About stays on the homepage, with the same typography and pale rounded panel. */
.about-section { margin-top: calc(20 * var(--unit)); padding: calc(28 * var(--unit)) calc(26 * var(--unit)); border-radius: calc(17 * var(--unit)); background: linear-gradient(120deg,#effbfc,#f1faed); display: grid; grid-template-columns: 1fr 1.25fr; gap: calc(36 * var(--unit)); }
.about-section h2 { font-size: calc(30 * var(--unit)); }
.about-section h3 { font-size: calc(22 * var(--unit)); font-weight: 800; line-height: 1.15; }
.about-section p:not(.eyebrow) { font-size: calc(14 * var(--unit)); line-height: 1.6; color: var(--muted); margin-top: calc(14 * var(--unit)); }
.about-contact { display: inline-flex; align-items: center; gap: calc(9 * var(--unit)); font-size: calc(13 * var(--unit)); font-weight: 700; color: var(--dark-green); margin-top: calc(18 * var(--unit)); }
.about-contact:hover { text-decoration: underline; }

/* Dark final download callout and footer. */
.final-download { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: calc(17 * var(--unit)) calc(25 * var(--unit)); border-radius: calc(15 * var(--unit)); color: #fff; background: linear-gradient(120deg,#103442,#0b2330); margin-block: calc(20 * var(--unit)) calc(15 * var(--unit)); }
.final-download h2 { font-size: calc(22 * var(--unit)); line-height: 1.15; letter-spacing: -.015em; }
.final-download p { font-size: calc(12 * var(--unit)); margin-top: calc(5 * var(--unit)); }
.final-download .store-badges { flex-shrink: 0; gap: calc(14 * var(--unit)); }
.final-download .store-badge { height: calc(43 * var(--unit)); min-width: calc(127 * var(--unit)); }
.final-download .store-badge strong { font-size: calc(20 * var(--unit)); }
.site-footer { color: #fff; background: radial-gradient(ellipse at 40% 0%,#0e2b38,#091d28 80%); padding-top: calc(20 * var(--unit)); padding-bottom: calc(25 * var(--unit)); }
.footer-grid { display: grid; grid-template-columns: 29.8% 21.6% 26.6% 22%; }
.footer-brand .wordmark { font-size: calc(35 * var(--unit)); }
.footer-brand > p { color: #c2d0d6; font-size: calc(11 * var(--unit)); margin-top: calc(8 * var(--unit)); }
.footer-grid h3 { font-size: calc(11 * var(--unit)); font-weight: 700; margin-bottom: calc(11 * var(--unit)); padding-top: calc(2 * var(--unit)); }
.footer-grid ul { display: grid; gap: calc(7 * var(--unit)); font-size: calc(11 * var(--unit)); color: #d4e0e5; }
.footer-grid a:hover { color: #72f588; }
.social-links { display: flex; gap: calc(19 * var(--unit)); margin-top: calc(24 * var(--unit)); }
.social-links button { background: none; border: 0; color: #fff; padding: 0; }
.social-links .icon { width: calc(14 * var(--unit)); height: calc(14 * var(--unit)); }
.contact-list li { display: flex; align-items: center; gap: calc(14 * var(--unit)); white-space: nowrap; }
.contact-list .icon { width: calc(15 * var(--unit)); height: calc(15 * var(--unit)); }
.footer-bottom { border-top: 1px solid #ffffff0d; display: flex; justify-content: space-between; color: #9eb1bc; font-size: calc(10 * var(--unit)); padding-top: calc(14 * var(--unit)); margin-top: calc(16 * var(--unit)); }
.company-credit { display: inline-flex; align-items: center; gap: .6em; max-width: 100%; color: #72f588; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; cursor: pointer; border-radius: 3px; }
.company-credit .icon { width: 1.15em; height: 1.15em; }
.company-credit:hover, .company-credit:focus-visible { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; }
.footer-policy-link { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-align: left; }
.footer-policy-link:hover { color: #72f588; text-decoration: underline; text-underline-offset: 3px; }
.legal-modal-open { overflow: hidden; }
.legal-dialog { width: min(880px,calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: 18px; color: var(--navy); background: #fff; box-shadow: 0 20px 80px #031d3b55; }
.legal-dialog[open] { display: flex; flex-direction: column; }
.legal-dialog::backdrop { background: #031c2cd9; backdrop-filter: blur(3px); }
.legal-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 25px 30px 22px; flex-shrink: 0; background: #0b2735; color: #fff; }
.legal-brand { display: block; color: #72f588; font-size: 26px; font-weight: 900; font-style: italic; letter-spacing: -.055em; margin-bottom: 11px; }
.legal-dialog h2 { font-size: 28px; line-height: 1.15; }
.legal-dialog-header p { font-size: 12px; line-height: 1.5; color: #c4dae2; margin-top: 10px; }
.legal-dialog-close { display: grid; place-items: center; padding: 7px; background: transparent; color: #fff; border: 1px solid #ffffff50; border-radius: 7px; flex-shrink: 0; }
.legal-dialog-close:hover { background: #ffffff20; }
.legal-dialog-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px 30px 30px; font-size: 15px; line-height: 1.65; }
.legal-dialog-content h3 { font-size: 19px; line-height: 1.3; margin: 28px 0 12px; color: #006a3b; }
.legal-dialog-content h3:first-child { margin-top: 0; }
.legal-dialog-content h4 { font-size: 16px; margin: 18px 0 9px; }
.legal-dialog-content p { margin: 0 0 12px; }
.legal-dialog-content ul, .legal-dialog-content ol { padding-left: 24px; margin: 0 0 16px; }
.legal-dialog-content ul { list-style: disc; }
.legal-dialog-content li { margin-block: 5px; }
.legal-table-wrap { overflow-x: auto; margin-bottom: 18px; }
.legal-dialog table { width: 100%; border-collapse: collapse; text-align: left; font-size: 14px; }
.legal-dialog th, .legal-dialog td { border: 1px solid #d7e7e8; padding: 10px 12px; vertical-align: top; }
.legal-dialog th { background: #eaf8ef; font-weight: 700; }
.legal-dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 30px; border-top: 1px solid #dce9ec; background: #f1fafb; flex-shrink: 0; }
.legal-dialog-footer a { color: #006a3b; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
@media (max-width: 520px) {
    .legal-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); border-radius: 12px; }
    .legal-dialog-header { padding: 20px; gap: 10px; }
    .legal-dialog h2 { font-size: 23px; }
    .legal-dialog-header p { font-size: 11px; }
    .legal-dialog-content { padding: 20px; font-size: 14px; }
    .legal-dialog-footer { padding: 14px 20px; gap: 10px; }
    .legal-dialog-footer .button { font-size: 11px; padding-inline: 12px; }
}
.skip-link { position: fixed; top: -100px; left: 15px; z-index: 100; background: #fff; color: var(--navy); padding: 12px; border-radius: 7px; }
.skip-link:focus-visible { top: 10px; }
.availability-dialog { border: 0; border-radius: 18px; padding: 35px; color: var(--navy); width: min(460px,calc(100% - 32px)); }
.availability-dialog::backdrop { background: #051c2b99; }
.availability-dialog h2 { font-size: 28px; }
.availability-dialog > p:not(.eyebrow) { font-size: 15px; line-height: 1.6; margin-block: 18px 24px; }
.dialog-close { position: absolute; top: 12px; right: 12px; background: none; border: 0; padding: 5px; }
.information-page { min-height: 65vh; padding-block: 70px; max-width: 760px; }
.information-page .wordmark { color: var(--dark-green); display: block; margin-bottom: 40px; }
.information-page h1 { font-size: 42px; margin-bottom: 20px; }
.information-page p { line-height: 1.7; margin-block: 20px; }

/* Tablet: keep the prototype's paired cards and readable navigation. */
@media (max-width: 700px) {
    .hero { background-image: url('/cached/mareu-hero-johannesburg-1200.f7ccc910da2ab1be.webp'); }
    .safety-city.is-near { background-image: url('/cached/safety-city-shield-banner-600.d40eb6450ba4d28e.webp'); }
    :root { --header-height: 65px; }
    .desktop-links, .portal-button, .site-search { display: none; }
    .mobile-menu { display: block; }
    .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
    .mobile-menu summary { width: 32px; height: 36px; }
    .mobile-links { display: grid; gap: 16px; }
    .mobile-links button { background: none; border: 0; text-align: left; padding: 0; color: inherit; }
    .navigation { height: 65px; }
    .hero { min-height: 430px; background-position: 59% center; }
    .hero-content { padding-top: 38px; }
    .hero-content h1 { font-size: 45px; }
    .hero-content > p { font-size: 14px; }
    .audience-copy { margin-left: 40%; padding-top: 18px; padding-right: 10px; }
    .character { width: 46%; height: 210px; left: -12px; }
    .driver-card .character { width: 46%; height: 210px; left: -12px; }
    .audience-copy h2 { font-size: 18px; }
    .benefits li { font-size: 10px; }
    .benefits { gap: 8px; }
    .audience-copy .button { font-size: 10px; padding-inline: 9px; gap: 5px; }
    .app-note { right: -10px; font-size: 18px; }
    .download-copy h2 { font-size: 32px; }
    .download-copy > p:not(.eyebrow) { font-size: 13px; }
    .app-download .store-badges { gap: 8px; }
    .app-download .store-badge { min-width: 110px; padding-inline: 6px; }
    .app-download .store-badge strong { font-size: 17px; }
    .safety { grid-template-columns: 40% 14% 46%; }
    .safety-note { display: none; }
    .safety-benefits li { font-size: 10px; }
    .final-download h2 { font-size: 18px; }
    .final-download .store-badges { gap: 8px; }
    .final-download .store-badge { min-width: 100px; padding-inline: 5px; }
    .final-download .store-badge strong { font-size: 16px; }
    .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; gap: 22px; }
    .footer-grid > :last-child { grid-column: 1 / -1; }
    .contact-list { display: flex !important; flex-wrap: wrap; gap: 20px !important; }
}
/* Phones: stack complete cards and preserve the unbroken hero composition. */
@media (max-width: 520px) {
    :root { --unit: 1px; --header-height: 64px; }
    .content-width, .panel-width, .wide-width { width: calc(100% - 32px); }
    .hero { min-height: 600px; height: 600px; background-size: auto 380px; background-position: 70% bottom; background-repeat: no-repeat; background-color: #039fc9; }
    .hero-shade { background: linear-gradient(180deg,#006895dd 0%,#008abbaa 29%,transparent 65%); }
    .navigation { height: 64px; }
    .wordmark { font-size: 32px; }
    .nav-download { font-size: 11px; padding: 10px; }
    .hero-content { padding-top: 32px; }
    .hero-content h1 { font-size: 47px; }
    .hero-content > p { max-width: 285px; font-size: 15px; }
    .hero-buttons { margin-top: 18px; gap: 8px; }
    .hero-buttons .button { font-size: 11px; padding: 12px; }
    .app-download-inner { height: auto; display: flex; flex-direction: column; align-items: stretch; padding-top: 32px; }
    .download-copy { padding: 0; }
    .download-copy h2 { font-size: 39px; }
    .download-copy > p:not(.eyebrow) { font-size: 15px; margin-bottom: 20px; }
    .app-download .store-badge { min-width: 137px; height: 46px; }
    .app-download .store-badge strong { font-size: 22px; }
    .app-download .store-badges { gap: 12px; }
    .phones { height: 335px; margin-top: 14px; }
    .phone { width: 190px; height: 312px; top: 7px; }
    .phone-ride { left: -5px; }
    .phone-map { left: 100px; }
    .app-note { right: -4px; bottom: 62px; font-size: 19px; }
    .audience { grid-template-columns: 1fr; gap: 14px; padding-top: 18px; }
    .audience-card { min-height: 252px; }
    .character { width: 190px; height: 245px; left: -25px; }
    .driver-card .character { width: 212px; height: 245px; left: -42px; }
    .audience-copy { margin-left: 44%; padding-top: 22px; padding-right: 8px; }
    .audience-copy h2 { font-size: 22px; }
    .card-label { font-size: 12px; }
    .benefits { gap: 9px; margin-block: 13px 17px; }
    .benefits li { font-size: 11px; gap: 5px; }
    .benefits .icon { width: 14px; height: 14px; }
    .audience-copy .button { font-size: 11px; padding: 11px 12px; }
    .how-it-works { padding-block: 33px; }
    .how-it-works h2 { font-size: 28px; }
    .steps { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
    .steps article + article::before { display: none; }
    .steps h3 { font-size: 14px; }
    .steps p { font-size: 13px; }
    .safety { height: auto; padding: 24px; grid-template-columns: 1fr 65px; gap: 20px 5px; }
    .safety h2 { font-size: 31px; }
    .safety-copy > p:not(.eyebrow) { font-size: 13px; }
    .desktop-break { display: none; }
    .safety-shield { transform: none; }
    .safety-benefits { grid-column: 1 / -1; gap: 10px; }
    .safety-benefits li { font-size: 13px; }
    .safety-city { width: 100%; opacity: .25; mask-image: linear-gradient(180deg,transparent,black); }
    .final-download { display: block; padding: 24px; margin-block: 18px; }
    .about-section { grid-template-columns: 1fr; padding: 24px; gap: 26px; }
    .final-download h2 { font-size: 23px; }
    .final-download p { font-size: 13px; line-height: 1.4; }
    .final-download .store-badges { margin-top: 18px; gap: 10px; }
    .final-download .store-badge { min-width: 120px; height: 43px; }
    .final-download .store-badge strong { font-size: 18px; }
    .site-footer { padding-block: 30px 24px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
    .footer-brand { grid-column: 1 / -1; }
    .footer-grid h3, .footer-grid ul { font-size: 13px; }
    .footer-grid ul { gap: 10px; }
    .footer-brand > p { font-size: 13px; }
    .social-links { margin-top: 18px; }
    .social-links .icon { width: 18px; height: 18px; }
    .contact-list { display: grid !important; gap: 12px !important; }
    .footer-bottom { font-size: 11px; gap: 12px; flex-direction: column; margin-top: 28px; }
}
@media (max-width: 360px) {
    .app-download .store-badges { gap: 8px; }
    .app-download .store-badge { min-width: 0; flex: 1; padding-inline: 6px; }
    .app-download .store-badge strong { font-size: 18px; }
    .app-download .store-badge small { font-size: 8px; }
    .app-download .store-badge > svg { width: 22px; height: 27px; }
    .phone { width: 168px; height: 290px; }
    .phone-ride { left: -2px; }
    .phone-map { left: 90px; }
    .phones { height: 310px; }
    .app-note { display: none; }
    .character, .driver-card .character { width: 43%; height: 215px; left: -8px; object-fit: contain; object-position: center bottom; }
    .audience-copy h2 { font-size: 19px; }
    .audience-copy .button { font-size: 10px; padding-inline: 9px; }
    .final-download .store-badges { gap: 8px; }
    .final-download .store-badge { min-width: 0; flex: 1; }
    .final-download .store-badge strong { font-size: 14px; white-space: nowrap; }
    .final-download .store-badge small { font-size: 8px; }
    .final-download .store-badge > svg { width: 22px; height: 27px; }
}
/* Pre-launch: keep these actions available in the source for easy restoration. */
.site-search, .portal-button, .nav-download, .mobile-links [data-availability="portal"],
.hero-buttons, .audience-copy .button, .safety .support-email,
.social-links[hidden], .desktop-links a[hidden], .mobile-links a[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }