.hd-logo-frame{display:block;width:230px;max-width:100%;line-height:1;flex:none}.hd-logo-clip{display:block;position:relative;width:100%;aspect-ratio:1486/280;overflow:hidden}.hd-logo-frame.fr .hd-logo-clip{aspect-ratio:1486/150}.hd-logo-caption{display:block;text-align:center;font-family:Arial,sans-serif;font-style:italic;color:#c18d00;font-size:12px;letter-spacing:2px;margin-top:8px}.hd-logo-frame.white .hd-logo-caption{color:white}.hd-logo-clip img[data-hd-brand],.home-brand-display img[data-hd-brand]{position:absolute!important;top:0!important;left:0!important;width:137.82%!important;max-width:none!important;height:auto!important;transform:translate(-13.7207%,-43.164%)!important;filter:none!important;padding:0!important;margin:0!important}.home-brand-display{position:relative;aspect-ratio:1486/150!important}.hd-logo-clip img{object-fit:initial!important}.home-brand-display img{object-fit:initial!important}header .brand-icon{mix-blend-mode:multiply}

/* Remove the near-white asset background without changing brand colours. */
img[src*="autodrive-hd-icon.png"],img[src*="autodrive-icon.png"]{filter:url(#autodrive-clear-icon)!important;mix-blend-mode:normal!important;background:transparent!important;border:0!important;box-shadow:none!important}

/* Prevent legacy wordmark height caps from flattening the square HD source. */
.hd-logo-clip img[data-hd-brand],.home-brand-display img[data-hd-brand]{min-height:0!important;max-height:none!important;aspect-ratio:1!important;height:auto!important}.hd-logo-frame{letter-spacing:normal!important}.drive-x-nav{white-space:nowrap;letter-spacing:.06em}.drive-x-nav strong{color:#3269cf}.nav nav{gap:clamp(12px,1.7vw,26px)}

.dx-logo{position:relative;display:block;aspect-ratio:1565/284;overflow:hidden;background:white;flex:none}.dx-logo img{position:absolute!important;top:0;left:0;width:130.86%!important;height:auto!important;max-width:none!important;max-height:none!important;transform:translate(-12.06%,-28.59%);object-fit:initial!important}.dx-logo-nav{width:92px}.dx-logo-hero{width:min(100%,540px);margin:25px 0 32px!important}

/* Supplied transparent PNG: no colour-key filter or opaque image background. */
img[src*="autodrive-transparent-icon.png"]{filter:none!important;mix-blend-mode:normal!important;background:transparent!important;box-shadow:none!important;border:0!important}

/* Blend the supplied light-background DRIVE X logo into its light surfaces. */
.dx-logo,.dx-logo-hero{background:transparent!important;mix-blend-mode:multiply}.dx-logo img{background:transparent!important}

/* Keep tablet navigation legible once the extra DRIVE X item no longer fits. */
@media(min-width:801px) and (max-width:1280px){
  header .nav #navigation{display:none;position:absolute;top:88px;left:0;right:0;background:#fff;padding:20px 28px 28px;max-height:calc(100dvh - 88px);overflow-y:auto;box-shadow:0 15px 25px #102a3c15;align-items:stretch;gap:0}
  header .nav #navigation.open{display:flex;flex-direction:column}
  header .nav #navigation>a{padding:12px 0;border-bottom:1px solid var(--border);font-size:14px}
  header .nav #navigation .nav-actions{justify-content:space-between;margin-top:20px;margin-left:0}
  header .menu-toggle{display:flex;width:35px;height:40px;flex-direction:column;justify-content:center;gap:5px}
  header .menu-toggle span{height:1.5px;width:23px;background:var(--navy)}
}

/* Keep the expanded navigation comfortable alongside the OEM Partnerships tab. */
@media(min-width:1281px) and (max-width:1550px){header .nav{gap:22px}header .nav #navigation{gap:20px;font-size:12px}header .nav .nav-actions{gap:12px;margin-left:4px}header .nav .login-button{padding:10px 13px;gap:12px}}
header .nav .oem-nav{white-space:nowrap}

/* Give assistance numbers their own readable line on phones. */
@media(max-width:600px){
  html body .quick-support{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:0 16px;min-height:0}
  html body .quick-support>a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 0;border-left:0;font-size:12px;line-height:1.5;flex-wrap:nowrap}
  html body .quick-support>a+a{border-top:1px solid #ffffff29}
  html body .quick-support strong{white-space:nowrap;font-size:13px;line-height:1.5}
  html body .quick-support .quick-support-icon{width:22px;flex:0 0 22px}
  html body .quick-support .quick-support-icon svg{width:22px;height:22px}
}

/* A quick icon twist followed by a soft mobile/tablet menu reveal. */
@media(max-width:1280px){
 header .menu-toggle{align-items:center;transform-origin:center;transition:transform 300ms cubic-bezier(.22,1,.36,1)}
 header .menu-toggle span{flex:0 0 1.5px;transform-origin:center;transition:transform 240ms cubic-bezier(.22,1,.36,1),opacity 160ms ease}
 header .menu-toggle[aria-expanded="true"]{transform:rotate(90deg)}
 header .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
 header .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.5)}
 header .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
 header .nav #navigation.open{transform-origin:top center;animation:ad-menu-reveal 220ms cubic-bezier(.22,1,.36,1) 100ms both}
}
@keyframes ad-menu-reveal{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
 header .menu-toggle,header .menu-toggle span{transition:none!important}
 header .nav #navigation.open{animation:none!important}
}

/* Mobile homepage: the claims/roadside bar becomes a solid bottom dock —
   a little bigger and flush to the screen edges, so page words no longer
   peek around it. */
@media(max-width:600px){
  html body.navigation-home{padding-bottom:120px}
  html body.navigation-home .quick-support{left:0;right:0;bottom:0;border-radius:0}
  html body.navigation-home .quick-support>a{min-height:54px;font-size:13px}
  html body.navigation-home .quick-support strong{font-size:14px}
}

/* Post-send success notification on website forms. */
html body .ad-success{display:flex;align-items:flex-start;gap:10px;background:#eef7ee;border:1px solid #bfe3c0;border-radius:8px;padding:12px 14px;color:#14532d;text-align:left}
html body .ad-success .ad-success-icon{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:#1d9d4e;color:#fff;display:inline-flex;align-items:center;justify-content:center}
html body .ad-success .ad-success-icon svg{width:15px;height:15px}
html body .ad-success .ad-success-copy{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.5}
html body .ad-success .ad-success-copy strong{font-size:14px}

/* Careers: the compensation line under "What we can explore together". */
.career-comp-note{margin:18px 0 0;font-size:15px;line-height:1.65;font-weight:600;color:#173453;max-width:520px}

/* Mobile homepage: no journey cards — the hero photo runs big, down to
   the support dock and the dark footer. */
@media(max-width:600px){
  html body.navigation-home .journey-section{display:none}
  html body.navigation-home .hero{padding-bottom:calc(64svh - 15px)!important}
  html body.navigation-home .hero-visual{height:64svh!important;min-height:440px}
}

/* Mobile homepage refinements: the photo's top blend drops lower into
   the clouds (no pale strip under the buttons), and the photo shifts
   right so the whole car fits the frame. */
@media(max-width:600px){
  html body.navigation-home .hero .image-shade{background:linear-gradient(180deg,#f4f7ff 0%,rgba(244,247,255,.45) 6%,transparent 18%,transparent 100%)!important}
  html body.navigation-home .hero-image{object-position:96% 70%!important}
}

/* Mobile homepage: fit the whole first screen without scrolling —
   tighter top block, and the photo flexes to fill exactly the space
   left between the buttons and the bottom dock. Supersedes the fixed
   64svh photo height above. */
@media(max-width:600px){
  html body.navigation-home main{height:calc(100svh - 129px)!important;min-height:0!important}
  html body.navigation-home .hero{height:100%;min-height:fit-content;display:flex;flex-direction:column;align-items:stretch;padding:18px 0 0!important}
  html body.navigation-home .hero-grid{order:1;flex:0 0 auto;height:auto}
  html body.navigation-home .hero-copy{padding:8px 0 12px}
  html body.navigation-home .hero-visual{order:2;position:relative;flex:1 1 0%;height:auto!important;min-height:140px}
}

/* Mobile homepage: no white gaps around the photo/dock — the hero
   overshoots a few pixels behind the dock, and the page backdrop
   under the footer and dock is dock navy. The top bounce stays
   clean white against the white header. Bounce itself is untouched. */
@media(max-width:600px){
  html:has(body.navigation-home){background:#fff}
  html body.navigation-home{background:#061638}
  html body.navigation-home main{height:calc(100svh - 100px)!important}
}

/* No seam bars while scrolling (all pages, phones/tablets): the
   page backdrop is painted to match the white header, so any
   hairline the fixed header exposes while pulling up or down
   blends in instead of flashing footer navy. The homepage keeps
   its pale backdrop and ends at the footer itself — the footer
   already carries clearance for the bottom bar. Bounce untouched. */
@media(max-width:800px){
  html body:not(.navigation-home){background:#fff}
  html body.navigation-home{background:#f3f7ff}
}
@media(max-width:600px){
  html body.navigation-home{padding-bottom:0}
}

/* Mobile homepage: show more of the road — the hero photo zooms
   gently toward its bottom-right, so the road fills the lower
   frame and the whole car stays in view, inside the same
   one-screen hero (no layout change, nothing scrolls). */
@media(max-width:600px){
  html body.navigation-home .hero-image{transform:scale(1.3);transform-origin:88% 100%}
}


/* Protection page: the Micah launcher now lives on its own page
   (/micah/), so the hero intro takes the full row. */
.protection-page .micah-banner>.container{grid-template-columns:minmax(0,1fr)!important}
.protection-page .micah-banner .protection-intro{max-width:780px}

/* Floating "Chat with Micah" bubble (all pages except /micah/).
   Sits above the fixed customer-assistance dock. */
.micah-bubble{position:fixed;right:18px;bottom:86px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.micah-bubble-greet{position:relative;background:#fff;border-radius:14px;box-shadow:0 14px 34px #04172c30;padding:13px 36px 13px 16px;max-width:248px;color:#0a2249}
.micah-bubble-greet::after{content:"";position:absolute;right:34px;bottom:-6px;width:14px;height:14px;background:#fff;transform:rotate(45deg);border-radius:2px}
.micah-bubble-greet b{display:block;font-size:16px;line-height:1.3;margin-bottom:2px}
.micah-bubble-greet span{font-size:13.5px;line-height:1.45;color:#40506b}
.micah-bubble-close{position:absolute;top:5px;right:9px;background:none;border:0;padding:2px;font-size:17px;line-height:1;color:#7a8db0;cursor:pointer}
.micah-bubble-pill{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(120deg,#0d3fae,#0a2f86);color:#fff;border:2px solid #efbd3e;border-radius:999px;padding:9px 18px 9px 10px;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 14px 30px #04172c38}
.micah-bubble-pill img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 30px}
.micah-bubble-icon{display:inline-flex;color:#fff}
@media(max-width:600px){.micah-bubble{right:14px;bottom:104px}.micah-bubble-greet{max-width:224px}}


/* Micah chat pop-up window — centred over the page, edges visible. */
.micah-modal{position:fixed;inset:0;height:100dvh;z-index:1000;background:#04172c38;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:18px}
.micah-modal[hidden]{display:none}
.micah-modal-window{position:relative;width:min(780px,94vw);height:min(780px,100%);max-height:100%;background:#fff;border:3px solid #efbd3e;border-radius:26px;box-shadow:0 0 0 6px #0a2249,0 30px 80px #04172ccc;overflow:hidden}
.micah-modal-frame{width:100%;height:100%;border:0;display:block;background:#fff;border-radius:22px}
.micah-modal-close{position:absolute;top:12px;right:12px;z-index:50;width:38px;height:38px;border-radius:50%;border:2px solid #fff;background:#0a2249;color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px #04172c45;pointer-events:auto}
.micah-modal-close:hover{background:#ffffff45}
html.micah-modal-open{overflow:hidden}
@media(max-width:600px){.micah-modal{padding:12px}.micah-modal-window{width:100%;height:100%;max-height:100%;border-width:2.5px;border-radius:22px;box-shadow:0 24px 60px #04172ccc}}
body.micah-lock{position:fixed;left:0;right:0;width:100%;overflow:hidden}


/* v45 — pin the chat frame to the pop-up window's edges so its geometry
   cannot drift inside the window (iOS iframe behaviour). */
.micah-modal-frame{position:absolute;inset:0;width:100%;height:100%}

/* Header dealer actions (v48, Jonah 2026-10-30): gold Dealer login, blue Become a dealer beside it */
header .nav .login-button{background:var(--gold);border-color:var(--gold);color:var(--navy)}
header .nav .login-button:hover{background:#f2c768;border-color:#f2c768;color:var(--navy)}
header .nav .become-dealer-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--blue);border-radius:5px;padding:10px 15px;font-size:11px;font-weight:600;line-height:1.65;background:var(--blue);color:#fff;text-decoration:none;white-space:nowrap}
header .nav .become-dealer-button:hover{background:#2253ae;border-color:#2253ae;color:#fff}
@media(min-width:801px){header .nav .become-dealer-button{font-size:14px;min-height:46px;padding:11px 18px}}
@media(min-width:1440px){header .nav .become-dealer-button{font-size:16px;padding:12px 22px;min-height:50px}}
@media(min-width:801px) and (max-width:1100px){header .nav .become-dealer-button{font-size:12px;padding:10px 12px}}
@media(min-width:1281px) and (max-width:1550px){header .nav .become-dealer-button{padding:10px 13px}}


/* Dealer login dialog — Jonah's 2026-10-30 design (ONYX / PCRS cards + Ask Micah AI strip) */
dialog:has(.dealer-login){width:min(1000px,calc(100% - 32px));padding:52px 56px;border-radius:18px}
.dealer-login .dl-head{display:flex;align-items:center;gap:18px}
.dealer-login .dl-logo{width:56px;height:56px;object-fit:contain}
.dealer-login .dl-meta{border-left:1px solid #d7dee5;padding-left:18px;color:#2f6bd8;font-size:13px;font-weight:700;letter-spacing:.22em}
.dealer-login .dl-title{font-size:clamp(36px,5.2vw,56px);line-height:1.05;letter-spacing:-.03em;color:#0a1e33;margin:26px 0 12px}
.dealer-login .dl-title span{color:#2f6bd8}
.dealer-login .dl-sub{color:#5b6b7a;font-size:17px;line-height:1.5;margin:0 0 30px}
.dealer-login .dl-cards{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.dealer-login .dl-card{border:1px solid #dfe6ec;border-top:4px solid #3269cf;border-radius:12px;padding:28px;background:#fff}
.dealer-login .dl-card.dl-onyx{border-top-color:#f28c28}
.dealer-login .dl-icon{width:64px;height:64px;border-radius:50%;background:#eaf2fe;color:#3269cf;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.dealer-login .dl-onyx .dl-icon{background:#fdeee0;color:#e87f13}
.dealer-login .dl-icon svg{width:34px;height:34px}
.dealer-login .dl-cat{font-size:11px;font-weight:700;letter-spacing:.14em;color:#5b6b7a;margin-bottom:8px}
.dealer-login .dl-name{font-size:38px;font-weight:800;letter-spacing:-.02em;color:#0a1e33;line-height:1}
.dealer-login .dl-desc{color:#5b6b7a;font-size:14.5px;line-height:1.5;margin:10px 0 22px}
.dealer-login .dl-btn{display:flex;justify-content:space-between;align-items:center;background:#3269cf;color:#fff;border-radius:7px;padding:15px 18px;font-size:15px;font-weight:600;text-decoration:none}
.dealer-login .dl-btn:hover{background:#2253ae}
.dealer-login .dl-ask{margin-top:22px;background:#e9f1fd;border-radius:12px;padding:20px 24px;display:flex;align-items:center;gap:18px}
.dealer-login .dl-ask-icon{color:#3269cf;flex-shrink:0;display:flex}
.dealer-login .dl-ask-icon svg{width:34px;height:34px}
.dealer-login .dl-ask-copy{flex:1}
.dealer-login .dl-ask-copy strong{display:block;color:#0a1e33;font-size:15.5px;line-height:1.4}
.dealer-login .dl-ask-copy span{color:#5b6b7a;font-size:14px;line-height:1.5}
.dealer-login .dl-ask-btn{background:#3269cf;color:#fff;border:0;border-radius:7px;padding:13px 20px;font-size:14.5px;font-weight:600;white-space:nowrap;cursor:pointer}
.dealer-login .dl-ask-btn:hover{background:#2253ae}
.dealer-login .dl-note{margin:22px 0 0;padding-top:16px;border-top:1px solid #e3e9ee;color:#62727c;font-size:13px;line-height:1.6}
.dealer-login .dl-note-icon{color:#3269cf}
@media(max-width:700px){dialog:has(.dealer-login){padding:30px 22px}.dealer-login .dl-cards{grid-template-columns:1fr}.dealer-login .dl-ask{flex-wrap:wrap}.dealer-login .dl-title{font-size:34px}}