/* RV Shift V1 — site styles.
   Brand tokens come from the approved package (13_COLOR/RVShift_Tokens.css). Contrast rules from the Brand Bible:
   navy for small text; white on blue only at large/bold sizes (4.10:1); navy text on orange (5.85:1). */
:root {
  --rv-navy: #071B33;
  --rv-blue: #1677FF;
  --rv-orange: #FF641F;
  --rv-white: #FFFFFF;
  --rv-cloud: #F4F7FA;
  --ink: #071B33;
  --ink-2: #3D4B5E;          /* secondary text, 8.9:1 on white */
  --ink-3: #5B6879;          /* captions, 5.9:1 on white */
  --line: #E1E7EF;
  --line-2: #CBD4E0;
  --navy-2: #0E2A4A;         /* raised surface on navy */
  --navy-3: #1A3A5F;
  --focus: 0 0 0 3px #FFFFFF, 0 0 0 5px var(--rv-blue);
  --shadow-1: 0 1px 2px rgba(7, 27, 51, .06), 0 2px 8px rgba(7, 27, 51, .06);
  --shadow-2: 0 6px 24px rgba(7, 27, 51, .12), 0 2px 6px rgba(7, 27, 51, .08);
  --r-sm: 10px; --r: 16px; --r-lg: 24px; --pill: 999px;
  --wrap: 1392px; --gut: 24px; --head: 72px;
  --font-h: "Montserrat", Arial, sans-serif;
  --font-b: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
@media (max-width: 720px) { :root { --gut: 16px; --head: 60px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 16px); }
body { margin: 0; background: var(--rv-white); color: var(--ink); font: 16px/1.5 var(--font-b); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
h1, h2, h3, h4 { font-family: var(--font-h); margin: 0; line-height: 1.15; letter-spacing: -.01em; }
p { margin: 0; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 max(var(--gut), env(safe-area-inset-right)) 0 max(var(--gut), env(safe-area-inset-left)); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--rv-white); padding: 10px 14px; border-radius: 8px; font-weight: 700; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: var(--pill); border: 1.5px solid transparent; font: 700 15px/1 var(--font-h); text-decoration: none;
  white-space: nowrap; transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:active { transform: translateY(1px); }
.btn--navy { background: var(--rv-navy); color: #fff; }
.btn--navy:hover { background: var(--navy-3); }
.btn--white { background: #fff; color: var(--rv-navy); }
.btn--white:hover { background: var(--rv-cloud); }
/* White text on Bright Blue is 4.10:1, so blue buttons carry large bold text (WCAG large-text rule). */
.btn--blue { background: var(--rv-blue); color: #fff; font-size: 19px; min-height: 52px; padding: 0 26px; }
.btn--blue:hover { background: #0F6AE6; }
.btn--orange { background: var(--rv-orange); color: var(--rv-navy); }
.btn--orange:hover { background: #FF7A3D; }
.btn--ghost { background: transparent; color: var(--rv-navy); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--rv-navy); }
.btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn--ghost-dark:hover { border-color: #fff; }
.btn--soft { background: var(--rv-cloud); color: var(--rv-navy); border-color: var(--line); }
.btn--soft:hover { border-color: var(--line-2); background: #EAF0F6; }
.btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn--block { width: 100%; }
.btn--block:not(.btn--google):not(.btn--facebook) { white-space: normal; text-wrap: balance; text-align: center; line-height: 1.2; }          /* a long label wraps inside the button instead of widening the form; the two sign-in buttons keep their one-line label (the owner's 2026-10-25 decision) */
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font: 700 15px var(--font-h); color: var(--rv-navy); text-decoration: none; white-space: nowrap; }
.link-arrow svg { width: 18px; height: 18px; color: var(--rv-blue); transition: transform .15s; }
.link-arrow:hover svg { transform: translateX(3px); }
.link-arrow:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 100; background: var(--rv-navy); color: #fff; }
.hdr__bar { height: var(--head); display: flex; align-items: center; gap: 24px; }
.hdr__logo { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; flex: none; line-height: 0; min-height: 44px; }          /* a 44px tap area; the wordmark stays centred in the bar */
.hdr__logo img { width: 176px; height: auto; }
.hdr__nav { flex: 1; display: flex; justify-content: center; gap: 4px; }
.hdr__nav a { padding: 10px 14px; border-radius: 8px; color: rgba(255, 255, 255, .86); text-decoration: none; font: 600 15px var(--font-h); }
.hdr__nav a:hover, .hdr__nav a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .08); }
.hdr__acts { display: flex; align-items: center; gap: 10px; flex: none; }
.hdr__login { background: none; border: 0; color: #fff; font: 600 15px var(--font-h); padding: 10px 12px; border-radius: 8px; }
.hdr__login:hover { background: rgba(255, 255, 255, .08); }
.hdr__icon { display: none; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; color: #fff; align-items: center; justify-content: center; }
.hdr__icon svg { width: 22px; height: 22px; }
.hdr__icon:hover { background: rgba(255, 255, 255, .1); }
.hdr__sub { display: none; }
.page { padding-top: var(--head); }
@media (max-width: 1080px) {
  .hdr__nav { display: none; }
  .hdr__bar { justify-content: space-between; gap: 8px; }
  .hdr__login { display: none; }
  .hdr__icon { display: inline-flex; }
  .hdr__sub { display: flex; gap: 0; height: 44px; align-items: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }   /* (a shadow, not a border: the links get the full 44px) */
  /* each link carries 10px a side, so the words are an even 20px apart and the shortest ("Sell") is still 44px wide; the first link's
     padding sits in the gutter, so "Browse" lines up with the logo. The current page's orange line is as wide as its word. */
  .hdr__sub a { display: flex; align-items: center; justify-content: center; align-self: stretch; min-width: 44px; padding: 0 10px; color: rgba(255, 255, 255, .88); text-decoration: none; font: 600 14px var(--font-h); }
  .hdr__sub a:first-child { margin-left: -10px; }
  .hdr__sub a:focus-visible { box-shadow: inset 0 0 0 2px var(--rv-blue), inset 0 0 0 4px #fff; border-radius: 8px; }          /* (the row scrolls, so it would cut an outside ring at the top and bottom: this one is drawn inside the link) */
  .hdr__sub a[aria-current="page"] { color: #fff; background: linear-gradient(var(--rv-orange), var(--rv-orange)) 50% 100% / calc(100% - 20px) 3px no-repeat; }
  .page { padding-top: calc(var(--head) + 44px); }
  html { scroll-padding-top: calc(var(--head) + 60px); }
}
@media (max-width: 720px) { .hdr__logo img { width: 150px; } .hdr__acts .btn { min-height: 44px; padding: 0 14px; font-size: 14px; } }
/* Under 392px (every phone up to an iPhone 15, a Pixel 9 and a Galaxy S24) the bar is only 288 to 359px wide, and 360 to 375px is where the
   logo and the buttons used to touch the screen's edge or sit 8px apart. It is made to fit in this order: the buttons' gaps are 4px, and the
   bar's gap (wordmark to buttons) is 12px from 360px and 4px under it; the wordmark gives way down to 120px, the brand package's practical lower limit (it scales as a whole, never cropped); the
   account button gives way only after that (the logo's shrink factor is so large that nothing else shrinks, not even by a fraction of a
   pixel, until the logo is at 120px); and "Sign up" steps aside under 342px, because the phone menu holds Sign up and Log in. Search, Menu
   and the phone menu's Close button are 44px tap areas at every width (the .hdr__icon rule). From 392px none of this applies, except the
   signed-in account button's width (see the end of this file). (Fractions: a zoomed browser can be 391.5px wide.) */
@media (max-width: 391.98px) {
  .hdr__bar { gap: 12px; }
  .hdr__logo { flex: 0 100000 150px; min-width: 120px; }
  .hdr__logo img { width: 100%; }
  .hdr__acts { flex: 0 1 auto; min-width: 0; gap: 4px; }
  .hdr__acts > * { flex: none; }
}
@media (max-width: 359.98px) { .hdr__bar { gap: 4px; } }          /* (342 to 359px: 120px wordmark + 4px + Sign up, Search and Menu is 306px of the 310 to 327 there) */
@media (max-width: 341.98px) { .hdr__acts [data-open="signup"] { display: none; } }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 200; display: none; }
.drawer.is-open { display: block; }
.drawer__scrim { position: absolute; inset: 0; background: rgba(7, 27, 51, .55); }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); background: var(--rv-navy); color: #fff;
  padding: 18px max(20px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) 20px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
.drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.drawer__top img { width: 140px; }
.drawer a.drawer__link { color: #fff; text-decoration: none; font: 600 18px var(--font-h); padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.drawer__btns { display: grid; gap: 10px; margin-top: 18px; }
@media (max-height: 700px) {          /* a short phone (a Moto G4's 640px, an iPhone 15's 659px): the whole menu fits without a scroll, every row still 44px */
  .drawer__panel { gap: 0; padding-top: 14px; }
  .drawer a.drawer__link { display: flex; align-items: center; min-height: 44px; padding: 0 4px; }
  .drawer__top { margin-bottom: 4px; }
  .drawer__auth { margin-top: 10px; }
  .drawer__btns { margin-top: 12px; }
}

/* ---------- sections ---------- */
.sec { padding: 72px 0 0; }
.sec--last { padding-bottom: 88px; }
.sec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sec__title { font-size: 36px; font-weight: 700; }
.sec__sub { color: var(--ink-2); margin-top: 8px; max-width: 640px; }
@media (max-width: 720px) {
  .sec { padding-top: 52px; }
  .sec__title { font-size: 26px; }
  .sec__head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- hero ---------- */
.hero { background: var(--rv-cloud); padding: 24px 0 36px; }
.hero__banner { position: relative; border-radius: var(--r-lg); overflow: visible; }
.hero__media { position: relative; border-radius: var(--r-lg); overflow: hidden; height: 440px; background: var(--rv-navy); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero__media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7, 27, 51, .52) 0%, rgba(7, 27, 51, .18) 46%, rgba(7, 27, 51, .10) 70%, rgba(7, 27, 51, .38) 100%); }
.hero__copy { position: absolute; inset: 0 0 auto; padding: 78px 24px 0; text-align: center; color: #fff; z-index: 1; }
.hero__title { font-size: 58px; font-weight: 700; letter-spacing: -.02em; max-width: 860px; margin: 0 auto; text-shadow: 0 2px 18px rgba(7, 27, 51, .35); }
.hero__lede { margin: 14px auto 0; font-size: 18px; max-width: 620px; color: rgba(255, 255, 255, .94); text-shadow: 0 1px 10px rgba(7, 27, 51, .45); }
.search { position: relative; z-index: 2; margin: -38px auto 0; width: min(900px, calc(100% - 48px)); background: #fff; border-radius: var(--pill);
  box-shadow: var(--shadow-2); display: flex; align-items: center; padding: 8px 8px 8px 12px; }
.search__f { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
.search__f + .search__f::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
.search__f select, .search__f input { width: 100%; border: 0; background: transparent; height: 58px; padding: 0 18px; font-size: 16px; color: var(--ink); border-radius: 12px; }
.search__f select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }
.search__f select:invalid, .search__f select.is-empty { color: var(--ink-3); }
.search__f input::placeholder { color: var(--ink-3); }
.search__f--type::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.search__f--zip { flex: .6; }
.search__go { flex: none; width: 62px; height: 62px; border-radius: 50%; border: 0; background: var(--rv-blue); color: #fff; display: grid; place-items: center; transition: background .15s, transform .15s; }
.search__go:hover { background: #0F6AE6; transform: scale(1.03); }
.search__go svg { width: 26px; height: 26px; }
.search__go-label { display: none; }
.sellpill { display: flex; width: max-content; max-width: 100%; margin: 22px auto 0; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--pill);
  text-decoration: none; color: var(--ink-2); font-size: 15px; box-shadow: var(--shadow-1); }
.sellpill img { width: 48px; height: 30px; border-radius: 6px; object-fit: cover; }
.sellpill b { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.sellpill:hover { border-color: var(--line-2); }
@media (max-width: 860px) {
  .hero { padding: 12px 0 28px; }
  .hero__banner { border-radius: var(--r-lg); overflow: hidden; background: var(--rv-navy); }
  .hero__media { position: absolute; inset: 0; height: auto; border-radius: 0; }
  .hero__media img { object-position: 62% 58%; }
  .hero__media::after { background: linear-gradient(180deg, rgba(7, 27, 51, .55), rgba(7, 27, 51, .25) 40%, rgba(7, 27, 51, .6)); }
  .hero__copy { position: relative; padding: 34px 20px 0; }
  .hero__title { font-size: 34px; }
  .hero__lede { font-size: 16px; }
  .search { margin: 22px 14px 18px; width: auto; border-radius: 18px; flex-wrap: wrap; padding: 10px; gap: 8px; }
  .search__f { flex: 1 1 calc(50% - 4px); background: var(--rv-cloud); border-radius: 12px; }
  .search__f + .search__f::before { display: none; }
  .search__f--kw { order: 3; flex-basis: 100%; }
  .search__f select, .search__f input { height: 50px; padding: 0 14px; }
  .search__go { order: 4; flex-basis: 100%; width: auto; height: 52px; border-radius: 12px; display: flex; gap: 8px; }
  .search__go svg { width: 22px; height: 22px; }
  .search__go-label { display: inline; font: 700 19px var(--font-h); }
}

/* ---------- chips / tabs ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: 0 -2px 20px; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; border: 1px solid transparent; background: var(--rv-cloud); color: var(--ink); border-radius: var(--pill); padding: 9px 16px; font: 600 14px var(--font-h); }
.chip:hover { border-color: var(--line-2); }
.chip[aria-pressed="true"] { background: var(--rv-navy); color: #fff; }
.tabs { display: flex; gap: 26px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; margin-bottom: 24px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; background: none; border: 0; padding: 0 0 12px; font: 600 15px var(--font-h); color: var(--ink-2); box-shadow: inset 0 -2px 0 transparent; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--rv-blue); }
.zipask { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -6px 0 18px; padding: 12px 14px; background: var(--rv-cloud); border-radius: 12px; font-size: 15px; }
.zipask input { width: 120px; height: 40px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 12px; background: #fff; }

/* ---------- rails ---------- */
.rail { position: relative; }
.rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 20px) / 4.6); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 4px 2px 8px; margin: -4px -2px 0; overscroll-behavior-x: contain; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }
/* Robert, 2026-10-02: smaller type tiles, more on screen (6 and a bit on desktop) */
.rail--types .rail__track { grid-auto-columns: calc((100% - 6 * 16px) / 6.4); gap: 16px; }
.rail__btn { position: absolute; top: 38%; z-index: 3; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink);
  display: grid; place-items: center; box-shadow: var(--shadow-1); transition: opacity .15s, transform .15s; }
.rail__btn svg { width: 20px; height: 20px; }
.rail__btn:hover { transform: scale(1.06); }
.rail__btn--prev { left: -18px; }
.rail__btn--next { right: -18px; }
.rail__btn[disabled] { opacity: 0; pointer-events: none; }
.rail--types .rail__btn { top: 44%; }
@media (max-width: 1080px) { .rail__track { grid-auto-columns: calc((100% - 2 * 16px) / 2.6); gap: 16px; } .rail--types .rail__track { grid-auto-columns: calc((100% - 4 * 14px) / 4.4); gap: 14px; } }
@media (max-width: 720px) {
  .rail__track { grid-auto-columns: 74%; gap: 14px; }
  .rail--types .rail__track { grid-auto-columns: 38%; gap: 12px; }
  .rail__btn { display: none; }
}

/* ---------- listing card ---------- */
.card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r); }
.card__media { position: relative; z-index: 2; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; background: var(--rv-cloud); }   /* above the title link's full-card cover (below), so a finger can swipe the photos; the photo strip is a link to the RV itself (app.js card()), so a tap, a click, Ctrl- or middle-click and the right-click menu work on it */
.rail__track .card__media { z-index: auto; }          /* in a sideways rail the photo stays under the title link's cover, as before: a swipe on it moves the rail and a tap opens the RV through the link (the lift above is for the vertical grids) */
@media (hover: none) { .rail__track .card__dots { display: none; } }          /* (a rail photo cannot be swiped by touch, so no dots to follow) */
.card__slides { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.card__slides::-webkit-scrollbar { display: none; }
.card__slides img { flex: none; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; }
.card__slides img:not([src]) { visibility: hidden; }          /* photos 2 to 5 have no src until the shopper reaches for the strip (app.js fillStrip): the card's cloud background shows meanwhile */
.card__dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 5px; padding: 4px 7px; border-radius: var(--pill); background: rgba(7, 27, 51, .35); pointer-events: none; }
.card__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.card__dots i.on { background: #fff; }
.card__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92);
  color: var(--ink); display: grid; place-items: center; opacity: 0; transition: opacity .15s; box-shadow: var(--shadow-1); }
.card__nav svg { width: 16px; height: 16px; }
.card__nav--prev { left: 10px; } .card__nav--next { right: 10px; }
.card:hover .card__nav, .card__nav:focus-visible { opacity: 1; }
@media (hover: none) { .card__nav { display: none; } }
/* No JavaScript: photos 2 to 5 are never filled in (app.js fillStrip), so a static card shows its one photo, with no dots, no arrows and nothing to swipe to.
   (@media scripting, not the data-js marker: only /rvs/ and the home page set that one, and the other lists and the JS-drawn rails must keep their strips) */
@media (scripting: none) { .card__slides img:not([src]), .card__dots, .card__nav { display: none; } }
.card__save { position: absolute; top: 8px; right: 8px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94);
  color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow-1); transition: transform .15s; }
.card__save svg { width: 20px; height: 20px; }
.card__save:hover { transform: scale(1.08); }
.card__save[aria-pressed="true"] { color: var(--rv-orange); }
.card__save[aria-pressed="true"] svg path { fill: currentColor; }
.card__badge { position: absolute; top: 12px; left: 12px; z-index: 2; pointer-events: none; background: #fff; color: var(--ink); font: 700 12px var(--font-h); padding: 5px 9px; border-radius: 6px; letter-spacing: .02em; }
.card__body { padding: 12px 2px 0; display: flex; flex-direction: column; gap: 4px; }
.card__title { font: 600 16px/1.3 var(--font-h); color: var(--ink); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.card__title::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--r); }
.card__title:focus-visible { box-shadow: none; }
.card:has(.card__title:focus-visible) { box-shadow: var(--focus); }
.card__meta { font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.card__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.card__seller { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-top: 4px; font: 700 18px var(--font-h); color: var(--ink); }
.card__was { font: 400 14px var(--font-b); color: var(--ink-3); text-decoration: line-through; }
.card__off { font: 700 12px var(--font-h); color: var(--rv-navy); background: #FFE3D6; padding: 3px 7px; border-radius: 6px; }
.card__save, .card__nav { z-index: 3; }

/* ---------- type tiles ---------- */
.ttile { position: relative; display: flex; flex-direction: column; background: var(--rv-cloud); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ink); border: 1px solid var(--line); transition: box-shadow .15s, transform .15s; }
.ttile:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.ttile img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ttile__label { padding: 11px 12px 12px; }
.ttile__label b { font: 700 15px/1.25 var(--font-h); }
@media (max-width: 720px) { .ttile__label { padding: 10px 12px 11px; } .ttile__label b { font-size: 14px; } }
.ttile__label b, .ttile__label span { display: block; }
.ttile__label span { margin-top: 2px; font-size: 13px; color: var(--ink-3); white-space: nowrap; }          /* the RVs listed under the name */

/* ---------- makes ---------- */
.makes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.make { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: #fff; text-decoration: none; color: var(--ink); overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.make:hover { box-shadow: var(--shadow-1); border-color: var(--line-2); }
.make__name { height: 108px; display: grid; place-items: center; padding: 0 14px; text-align: center; font: 700 22px/1.1 var(--font-h); letter-spacing: -.01em; }
.make__name small { display: block; font: 400 13px var(--font-b); color: var(--ink-3); margin-top: 6px; letter-spacing: 0; }
.make__foot { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.make__foot svg { width: 16px; height: 16px; color: var(--ink-3); }
.makes__all { margin-top: 20px; }
@media (max-width: 1080px) { .makes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .makes { grid-template-columns: repeat(2, 1fr); gap: 12px; } .make__name { height: 92px; font-size: 19px; } }

/* ---------- promo grid ---------- */
.promo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.pcard { position: relative; grid-column: span 3; min-height: 300px; border-radius: var(--r); overflow: hidden; color: #fff; text-decoration: none; display: flex; align-items: flex-end; isolation: isolate; }
.pcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .4s; }
.pcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 27, 51, .78), rgba(7, 27, 51, .35) 62%, rgba(7, 27, 51, .1)); }
.pcard:hover img { transform: scale(1.03); }
.pcard__in { padding: 28px; max-width: 470px; }
.pcard__in h3 { font-size: 30px; font-weight: 700; }
.pcard__in p { margin-top: 8px; color: rgba(255, 255, 255, .92); }
.pcard__cta { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; font: 700 15px var(--font-h); }
.pcard__cta svg { width: 18px; height: 18px; transition: transform .15s; }
.pcard:hover .pcard__cta svg { transform: translateX(3px); }
.icard { grid-column: span 2; padding: 28px; border-radius: var(--r); background: var(--rv-cloud); border: 1px solid var(--line); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s; }
.icard:hover { box-shadow: var(--shadow-1); }
.icard__ico { width: 52px; height: 52px; border-radius: 14px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--rv-blue); margin-bottom: 6px; }
.icard__ico svg { width: 26px; height: 26px; }
.icard h3 { font-size: 24px; }
.icard p { color: var(--ink-2); }
.icard .link-arrow { margin-top: auto; padding-top: 6px; }
.stats { grid-column: span 2; padding: 28px; border-radius: var(--r); background: var(--rv-navy); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 16px; position: relative; overflow: hidden; }
.stats__mark { position: absolute; right: -24px; bottom: -34px; width: 190px; opacity: .06; } /* the package's own low-opacity Shift treatment */
.stats__row { display: flex; gap: 28px; flex-wrap: wrap; }
.stats__n { font: 700 38px/1 var(--font-h); }
.stats__l { font-size: 14px; color: rgba(255, 255, 255, .8); margin-top: 6px; }
.stats__note { font-size: 14px; color: rgba(255, 255, 255, .8); }
@media (max-width: 1080px) { .pcard { grid-column: span 6; } .icard, .stats { grid-column: span 3; } .stats { grid-column: span 6; } }
@media (max-width: 620px) { .pcard::before { background: linear-gradient(0deg, rgba(7, 27, 51, .88) 0%, rgba(7, 27, 51, .62) 55%, rgba(7, 27, 51, .15) 100%); }   /* the text sits low and spans the card: shade from the bottom, not from the left */
  .promo { gap: 14px; } .pcard { min-height: 240px; } .pcard__in { padding: 22px; } .pcard__in h3 { font-size: 26px; } .icard { grid-column: span 6; padding: 22px; } }

/* ---------- dark band ---------- */
.band { background: var(--rv-navy); margin-top: 72px; padding: 56px 0; position: relative; overflow: hidden; }
.band__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bcard { background: var(--navy-2); border: 1px solid rgba(255, 255, 255, .06); border-radius: var(--r); padding: 30px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.bcard h3 { font-size: 24px; }
.bcard p { color: rgba(255, 255, 255, .84); margin-top: 8px; max-width: 420px; }
.bcard .btn svg { width: 20px; height: 20px; }
@media (max-width: 900px) { .band__grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .band { margin-top: 52px; padding: 36px 0; } .bcard { flex-direction: column; align-items: flex-start; padding: 24px; } .bcard .btn { width: 100%; } }

/* ---------- dealer onboarding section ---------- */
.onb { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.ocard { border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; display: flex; flex-direction: column; color: var(--ink); text-decoration: none; transition: box-shadow .15s; }
a.ocard:hover { box-shadow: var(--shadow-2); }
.ocard__img { position: relative; aspect-ratio: 16 / 10; background: var(--rv-navy); overflow: hidden; }
.ocard__img img { width: 100%; height: 100%; object-fit: cover; }
.ocard__tag { position: absolute; top: 12px; left: 12px; background: #fff; color: var(--ink); font: 700 12px var(--font-h); padding: 5px 9px; border-radius: 6px; }
.ocard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ocard__body h3 { font-size: 21px; }
.ocard__body p { color: var(--ink-2); font-size: 15px; }
.ocard__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.steps li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; padding-top: 4px; }
.steps__n { width: 40px; height: 40px; border-radius: 50%; background: var(--rv-navy); color: #fff; display: grid; place-items: center; font: 700 16px var(--font-h); }
.steps b { display: block; font: 700 16px var(--font-h); margin-bottom: 2px; }
.steps span { color: var(--ink-2); font-size: 15px; }
.steps .steps__n { color: #fff; font-size: 16px; }          /* (a number, not a caption: .steps span would make it grey on navy, 1.95:1) */
.olist { display: grid; gap: 14px; align-content: start; }
.oitem { border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; color: var(--ink); text-decoration: none; background: #fff; transition: box-shadow .15s; }
a.oitem:hover { box-shadow: var(--shadow-1); }
.oitem__tag { grid-column: 1 / -1; justify-self: start; font: 700 12px var(--font-h); background: var(--rv-cloud); padding: 4px 8px; border-radius: 6px; color: var(--ink-2); }
.oitem__tag--soon { background: #FFE3D6; color: var(--rv-navy); }
.oitem h3 { font-size: 17px; }
.oitem p { grid-column: 1; font-size: 14px; color: var(--ink-2); }
.oitem svg { grid-column: 2; grid-row: 2 / span 2; align-self: center; width: 20px; height: 20px; color: var(--ink-3); }
.onb__more { margin-top: 20px; }
@media (max-width: 1080px) { .onb { grid-template-columns: 1fr 1fr; } .olist { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .onb { grid-template-columns: 1fr; } .olist { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.ftr { background: var(--rv-navy); color: #fff; margin-top: 88px; padding: 56px 0 28px; }
.ftr__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 36px; }
.ftr__top img { width: 210px; }
.ftr__grid { display: grid; grid-template-columns: minmax(300px, 1.3fr) 3fr; gap: 48px; }
.help { background: var(--navy-2); border-radius: var(--r); padding: 26px; }
.help h3 { font-size: 22px; }
.help p { color: rgba(255, 255, 255, .82); margin: 8px 0 16px; font-size: 15px; }
.ftr__btns { display: grid; grid-template-columns: repeat(3, auto); gap: 10px; margin-top: 16px; }
.ftr__btns .btn { min-height: 40px; font-size: 14px; padding: 0 12px; }
.ftr__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ftr__cols h4 { font: 600 14px var(--font-h); color: rgba(255, 255, 255, .7); margin-bottom: 14px; }
.ftr__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ftr__cols a { color: #fff; text-decoration: none; font: 600 14px var(--font-h); }
.ftr__cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ftr__bot { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255, 255, 255, .72); }
@media (max-width: 1000px) { .ftr__grid { grid-template-columns: 1fr; gap: 36px; } }
@media (max-width: 620px) { .ftr { margin-top: 64px; padding-top: 40px; } .ftr__top img { width: 170px; } .ftr__cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .ftr__btns { grid-template-columns: 1fr; } }

/* ---------- modals ---------- */
.modal { border: 0; padding: 0; border-radius: 20px; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overscroll-behavior: contain; box-shadow: 0 30px 80px rgba(7, 27, 51, .35); color: var(--ink); }
@media (pointer: coarse) { html:has(dialog.modal[open]) { overflow: hidden; } }   /* on a phone or tablet the page behind an open window does not scroll (a swipe on the backdrop); a desk keeps its scrollbar, so the page does not shift sideways when a window opens */
.modal::backdrop { background: rgba(7, 27, 51, .6); }
.modal__in { padding: 28px; }
.modal__x { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--rv-cloud); display: grid; place-items: center; }
.modal__x svg { width: 18px; height: 18px; }
.modal h2 { font-size: 26px; padding-right: 40px; }
.modal__lede { color: var(--ink-2); margin: 10px 0 20px; }
.modal__split { display: grid; gap: 12px; margin-top: 8px; }
.opt { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; }
.opt h3 { font-size: 17px; }
.opt p { color: var(--ink-2); font-size: 15px; margin: 4px 0 12px; }

/* ---------- forms ---------- */
.form { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }   /* minmax(0, ..): a column never grows past the card because of its widest field or button */
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.fld { display: grid; gap: 6px; min-width: 0; }
.fld > span { font: 600 14px var(--font-h); color: var(--ink); }
.fld > span i { font-style: normal; font-weight: 400; color: var(--ink-3); font-family: var(--font-b); }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 48px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; padding: 0 14px; font-size: 16px; color: var(--ink); }
.fld textarea { padding: 12px 14px; min-height: 104px; resize: vertical; }
.fld select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--rv-blue); box-shadow: 0 0 0 3px rgba(22, 119, 255, .22); }
.fld input[aria-invalid="true"], .fld select[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: #B42318; }
.fld__err { color: #B42318; font-size: 13px; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 14px; color: var(--ink-2); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--rv-navy); }
.radios { display: grid; gap: 8px; }
.radio { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; cursor: pointer; }
.radio input { accent-color: var(--rv-navy); width: 18px; height: 18px; }
.radio:has(input:checked) { border-color: var(--rv-navy); background: var(--rv-cloud); }
.form__note { font-size: 13px; color: var(--ink-3); }
.form__status { font-size: 15px; padding: 12px 14px; border-radius: 12px; }
.form__status--err { background: #FEF0EE; color: #8A1C12; }
.thanks { text-align: center; padding: 18px 6px 6px; }
.thanks__ico { width: 64px; height: 64px; border-radius: 50%; background: var(--rv-cloud); color: var(--rv-blue); display: grid; place-items: center; margin: 0 auto 14px; }
.thanks__ico svg { width: 30px; height: 30px; }
.thanks h3 { font-size: 22px; }
.thanks p { color: var(--ink-2); margin-top: 8px; }
.hp { position: absolute; left: -9999px; }

/* ---------- inner pages ---------- */
.phead { background: var(--rv-cloud); padding: 40px 0 36px; border-bottom: 1px solid var(--line); }
.phead h1 { font-size: 42px; }
.phead p { color: var(--ink-2); margin-top: 10px; font-size: 18px; max-width: 720px; }
.crumbs { font-size: 14px; color: var(--ink-3); margin-bottom: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: var(--ink-2); }
@media (max-width: 720px) { .phead { padding: 28px 0 24px; } .phead h1 { font-size: 30px; } .phead p { font-size: 16px; } }

/* results */
.rbar { display: flex; gap: 12px; align-items: center; margin: 24px 0 18px; flex-wrap: wrap; }
.rbar .search { margin: 0; width: 100%; box-shadow: var(--shadow-1); border: 1px solid var(--line); }
.results { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
.filters { position: sticky; top: calc(var(--head) + 16px); display: grid; gap: 18px; max-height: calc(100vh - var(--head) - 32px); max-height: calc(100dvh - var(--head) - 32px); overflow-y: auto; padding: 2px 6px 24px 2px; }
@media (max-width: 1080px) { .filters { top: calc(var(--head) + 44px + 16px); max-height: calc(100vh - var(--head) - 44px - 32px); max-height: calc(100dvh - var(--head) - 44px - 32px); } }   /* the quick-links row is part of the fixed header here */
.fgroup h3 { font: 700 15px var(--font-h); margin-bottom: 10px; }
.fgroup { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.fopts { display: grid; gap: 4px; }
.fopt { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 5px 0; cursor: pointer; }
.fopt input { width: 18px; height: 18px; accent-color: var(--rv-navy); }
.fopt em { font-style: normal; color: var(--ink-3); font-size: 13px; margin-left: auto; }
.frange { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.frange input, .fgroup select { width: 100%; height: 42px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 10px; background: #fff; font-size: 15px; }
.rhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.rhead h2 { font-size: 22px; }
.rhead select { height: 42px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 12px; background: #fff; font-size: 15px; }
.rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 20px; }
.rmore { display: flex; justify-content: center; margin-top: 32px; }
/* the static lists (tools/build_site.py): the first 24 RVs and the page links on /rvs/ are for visitors without JavaScript, so a browser
   with JavaScript hides them before first paint (the build sets <html data-js> in the head) and draws its own list */
html[data-js] [data-ssr], html[data-js] [data-nojs] { display: none !important; }
.lbar { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: 24px 0 18px; }
.lbar__sort { color: var(--ink-2); font-size: 15px; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 32px; }
.pager a, .pager span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; font: 600 15px var(--font-h); color: var(--rv-navy); text-decoration: none; }
.pager [aria-current="page"] { background: var(--rv-navy); color: #fff; border-color: var(--rv-navy); }
.chiplinks { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 10px 0 0; }
.chiplinks a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 999px; color: var(--rv-navy); text-decoration: none; font-size: 15px; }
.browse h3, .rel h3 { font: 700 16px var(--font-h); margin-top: 18px; }
.rvqa h3 { font: 700 17px var(--font-h); margin: 18px 0 6px; }
.rvqa p { color: var(--ink-2); max-width: 680px; }
.idx { padding-top: 28px; }
.sec__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.rempty { padding: 48px 24px; text-align: center; background: var(--rv-cloud); border-radius: var(--r); }
.rempty h3 { font-size: 22px; margin-bottom: 8px; }
.rempty p { color: var(--ink-2); margin-bottom: 16px; }
.active-f { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.active-f button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-2); background: #fff; border-radius: var(--pill); padding: 6px 12px; font: 600 13px var(--font-h); }
.active-f button svg { width: 14px; height: 14px; }
.fbtn { display: none; }
.filters__close, .filters__apply { display: none !important; }  /* phone-only; the media query below turns them on */
@media (max-width: 1180px) { .rgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) {
  .results { grid-template-columns: minmax(0, 1fr); }          /* (minmax: the 16px Sort box beside Filters must not widen the whole list past the 320px gutter) */
  .fbtn { display: inline-flex; }
  .filters { position: fixed; inset: 0; z-index: 210; background: #fff; max-height: none; padding: 20px max(var(--gut), env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) max(var(--gut), env(safe-area-inset-left)); display: none; top: 0; scroll-padding-bottom: calc(100px + env(safe-area-inset-bottom)); }          /* (a focused row stops above the fixed Show RVs bar, not under it) */
  .filters.is-open { display: grid; align-content: start; }
  .filters__close { display: flex !important; }
  .filters__apply { display: block !important; position: fixed; left: 0; right: 0; bottom: 0; padding: 12px max(var(--gut), env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(var(--gut), env(safe-area-inset-left)); background: #fff; border-top: 1px solid var(--line); }
  body:has(.filters.is-open) { overflow: hidden; }          /* the page behind the panel does not scroll; this follows the screen, so turning the phone to a wider layout (no panel) frees it */
  body:has(.filters.is-open) .toast { bottom: calc(88px + env(safe-area-inset-bottom)); }          /* above the Show RVs bar */
}
@media (max-width: 560px) { .rgrid { grid-template-columns: 1fr; } }
.filters__close { justify-content: space-between; align-items: center; }
.filters__close h2 { font-size: 22px; }

/* listing page */
.lst { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "head buy" "body buy"; gap: 0 36px; align-items: start; margin-top: 24px; }
.lst__head { grid-area: head; }
.lst__body { grid-area: body; }
.lst .buy { grid-area: buy; }
.gal { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; border-radius: var(--r-lg); overflow: hidden; height: 520px; }
.gal button { border: 0; padding: 0; background: var(--rv-cloud); position: relative; overflow: hidden; }
.gal button img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gal button:hover img { transform: scale(1.02); }
.gal__main { grid-row: 1 / span 2; }
.gal__all { position: absolute; right: 14px; bottom: 14px; z-index: 2; }
.gal-wrap { position: relative; }
.lst__h1 { font-size: 34px; margin-top: 26px; }
.lst__loc { color: var(--ink-2); margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lst__loc .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.ico-inline { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.lst__sec { margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--line); }
.lst__sec h2 { font-size: 24px; margin-bottom: 16px; }
.lst__sec h2 small { font: 400 14px var(--font-b); color: var(--ink-3); margin-left: 8px; }
.keyspecs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.keyspec { background: var(--rv-cloud); border-radius: 14px; padding: 14px 16px; }
.keyspec span { display: block; font-size: 13px; color: var(--ink-3); }
.keyspec b { font: 700 18px var(--font-h); }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 0; }
.specs div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.specs dt { color: var(--ink-2); }
.specs dd { margin: 0; font-weight: 700; text-align: right; }
.desc { white-space: pre-line; color: var(--ink-2); max-width: 760px; }
.desc.is-clipped { max-height: 12em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
.feats { columns: 2; column-gap: 32px; padding: 0; margin: 0; list-style: none; }
.feats li { break-inside: avoid; padding: 6px 0 6px 26px; position: relative; color: var(--ink-2); font-size: 15px; }
.feats li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 12px; height: 7px; border-left: 2px solid var(--rv-blue); border-bottom: 2px solid var(--rv-blue); transform: rotate(-45deg); }
.credit { margin-top: 28px; font-size: 13px; color: var(--ink-3); }
.buy { position: sticky; top: calc(var(--head) + 20px); border: 1px solid var(--line); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-1); background: #fff; }
.buy__price { font: 700 34px var(--font-h); }
.buy__was { display: flex; align-items: center; gap: 10px; margin-top: 4px; color: var(--ink-3); font-size: 14px; }
.buy__was s { color: var(--ink-3); }
.buy__dealer { display: flex; gap: 12px; align-items: center; padding: 16px 0; margin: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.buy__av { width: 44px; height: 44px; border-radius: 12px; background: var(--rv-navy); color: #fff; display: grid; place-items: center; font: 700 16px var(--font-h); flex: none; }
.buy__dealer b { display: block; font-family: var(--font-h); }
.buy__dealer span { font-size: 14px; color: var(--ink-3); }
.buy__dealer .buy__av { color: #fff; font-size: 16px; }          /* (the initials, not a caption: .buy__dealer span would make them grey on navy, 3.05:1) */
.buy h2 { font-size: 20px; margin-bottom: 14px; }
.buy__save { margin-top: 10px; }
/* a signed dealer's own buttons (site/data/contact.json): Call on its own row, then Directions and Dealer website.
   None is orange and none is blue: "Check availability" stays the one primary button in the box. */
.buy__acts { display: flex; flex-wrap: wrap; gap: 10px; margin: -2px 0 20px; }
/* two to a row where both labels fit (the desk's 352px box), one to a row on a phone: never a label spilling out */
.buy__acts .btn { flex: 1 1 166px; min-height: 48px; padding: 0 8px; font-size: 14px; }
.buy__acts .buy__call { flex-basis: 100%; }
.buy__acts .btn--white { border-color: var(--rv-navy); }
.buy__row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.buy__row .btn { min-width: 0; padding: 0 12px; }
.buy__row .buy__save { margin-top: 0; }
.buy__copy { display: grid; gap: 6px; margin-top: 12px; font: 600 14px var(--font-h); }
.buy__copy input { width: 100%; min-height: 44px; border: 1px solid var(--line-2); border-radius: 12px; padding: 0 12px; font: 14px var(--font-b); color: var(--ink); background: var(--rv-cloud); }
.buy.buy--tall { position: static; }      /* taller than the window: it scrolls with the page, so Save and Share stay reachable */
.pbar { display: none; }
@media (max-width: 1080px) { .lst { grid-template-columns: 1fr; grid-template-areas: "head" "buy" "body"; } .buy { position: static; margin-top: 24px; } .keyspecs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  /* the phone bar (signed dealers with a Call or Directions): always in reach under the thumb */
  .pbar { display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; background: #fff;
    padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(7, 27, 51, .10); }
  .pbar__btn { flex: 1 1 auto; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px;
    border-radius: var(--pill); border: 1.5px solid var(--line-2); background: #fff; color: var(--rv-navy); font: 700 15px/1 var(--font-h); text-decoration: none; }
  .pbar__btn svg { width: 18px; height: 18px; flex: none; }
  .pbar__btn--call { background: var(--rv-navy); border-color: var(--rv-navy); color: #fff; }
  body:has(.pbar) .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
  body:has(.pbar) .ftr { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .gal { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; border-radius: var(--r); }
  .gal button:not(.gal__main) { display: none; }
  .gal__main { aspect-ratio: 4 / 3; }
  .lst__h1 { font-size: 26px; }
  .specs { grid-template-columns: 1fr; }
  .feats { columns: 1; }
}
.lbox { position: fixed; inset: 0; z-index: 400; background: rgba(4, 14, 28, .96); display: none; flex-direction: column; }
.lbox.is-open { display: flex; }
.lbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 14px max(18px, env(safe-area-inset-right)) 14px max(18px, env(safe-area-inset-left)); color: #fff; font: 600 15px var(--font-h); }
.lbox__stage { flex: 1; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; min-height: 0; padding: 0 64px 24px; }   /* (a row that can shrink: a landscape phone shows the whole photo) */
.lbox__stage img { max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; object-fit: contain; border-radius: 8px; }
.lbox__nav { position: absolute; top: 50%; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; }
.lbox__nav svg { width: 24px; height: 24px; }
.lbox__nav--prev { left: max(14px, env(safe-area-inset-left)); } .lbox__nav--next { right: max(14px, env(safe-area-inset-right)); }
.lbox__x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #fff; display: grid; place-items: center; }
.lbox__x svg { width: 20px; height: 20px; }
@media (max-width: 720px) { .lbox__stage { padding: 0 8px 16px; } .lbox__nav { top: auto; bottom: calc(20px + env(safe-area-inset-bottom)); } }

/* sell + onboarding pages */
.split { display: grid; grid-template-columns: 1fr 520px; gap: 48px; align-items: start; margin-top: 40px; }
.split__aside { position: sticky; top: calc(var(--head) + 20px); }
.panel { border: 1px solid var(--line); border-radius: 20px; padding: 28px; background: #fff; box-shadow: var(--shadow-1); }
.panel h2 { font-size: 24px; }
.panel .form { margin-top: 18px; }
.why { display: grid; gap: 18px; margin-top: 8px; }
.why__item { display: grid; grid-template-columns: 48px 1fr; gap: 16px; }
.why__ico { width: 48px; height: 48px; border-radius: 14px; background: var(--rv-cloud); color: var(--rv-blue); display: grid; place-items: center; }
.why__ico svg { width: 24px; height: 24px; }
.why__item h3 { font-size: 18px; margin-bottom: 4px; }
.why__item p { color: var(--ink-2); }
.faq { margin-top: 40px; }
.faq h2 { font-size: 26px; margin-bottom: 12px; }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { font: 700 17px var(--font-h); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--ink-3); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { color: var(--ink-2); margin-top: 10px; max-width: 680px; }
.h2x { font-size: 30px; margin-bottom: 16px; }
@media (max-width: 1080px) { .split { grid-template-columns: minmax(0, 1fr); } .split__aside { position: static; } }

/* dealers directory */
.dtools { display: flex; gap: 12px; margin: 28px 0 20px; flex-wrap: wrap; }
.dtools input, .dtools select { height: 48px; border: 1px solid var(--line-2); border-radius: 12px; padding: 0 14px; font-size: 16px; background: #fff; }
.dtools input { flex: 1; min-width: 220px; }
.dgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dcard { border: 1px solid var(--line); border-radius: var(--r); padding: 22px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.dcard__top { display: flex; gap: 14px; align-items: center; }
.dcard h2 { font-size: 19px; }
.dcard__loc { font-size: 14px; color: var(--ink-3); }
.dcard__stats { display: flex; gap: 18px; font-size: 14px; color: var(--ink-2); }
.dcard__stats b { color: var(--ink); font-family: var(--font-h); }
.dcard__types { display: flex; gap: 6px; flex-wrap: wrap; }
.dcard__types span { font-size: 12px; font-weight: 700; font-family: var(--font-h); background: var(--rv-cloud); padding: 4px 8px; border-radius: 6px; color: var(--ink-2); }
.dcard .btn { margin-top: auto; align-self: flex-start; }
.dcta { margin-top: 36px; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--rv-navy); color: #fff; border-radius: 20px; padding: 32px; flex-wrap: wrap; }
.dcta h2 { font-size: 26px; }
.dcta p { color: rgba(255, 255, 255, .84); margin-top: 6px; }
@media (max-width: 1080px) { .dgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dgrid { grid-template-columns: 1fr; } }

.toast { position: fixed; left: 16px; right: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); width: fit-content; max-width: min(420px, calc(100% - 32px)); margin: 0 auto;
  transform: translateY(20px); text-align: center; background: var(--rv-navy); color: #fff; padding: 12px 18px; border-radius: 12px; font: 600 14px var(--font-h);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 500; box-shadow: var(--shadow-2); }
.toast.is-on { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- dealer onboarding: find your dealership + locked preview ---------- */
.panel__lede { color: var(--ink-2); margin-top: 8px; font-size: 15px; }
.fld__lab { font: 600 14px var(--font-h); color: var(--ink); }
.dfind { position: relative; }
.dfind__box { position: relative; }
.dfind__box input { width: 100%; min-height: 52px; border: 1.5px solid var(--line-2); border-radius: 12px; background: #fff; padding: 0 46px 0 44px; font-size: 16px; color: var(--ink); }
.dfind__box input:focus { outline: none; border-color: var(--rv-blue); box-shadow: 0 0 0 3px rgba(22, 119, 255, .22); }
.dfind__box input[aria-invalid="true"] { border-color: #B42318; }
.dfind__ico { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.dfind__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--rv-cloud); color: var(--ink); display: grid; place-items: center; }
.dfind__clear svg { width: 16px; height: 16px; }
.dfind__list { position: absolute; left: 0; right: 0; top: calc(100% - 22px); z-index: 20; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-2); overflow: hidden; max-height: 380px; overflow-y: auto; }
.dfind__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; border-top: 1px solid var(--line); }
.dfind__opt:first-child { border-top: 0; }
.dfind__opt[aria-selected="true"], .dfind__opt:hover { background: var(--rv-cloud); }
.dfind__opt b { display: block; font: 700 15px/1.25 var(--font-h); }
.dfind__opt small { display: block; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.dfind__none { padding: 14px; font-size: 14px; color: var(--ink-2); }
.dfind__hint { font-size: 13px; color: var(--ink-3); }
.pill { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 6px; font: 700 12px var(--font-h); white-space: nowrap; }
.pill svg { width: 10px; height: 12px; }
.pill--lock { background: var(--rv-navy); color: #fff; }
.pill--live { background: #E3F0FF; color: var(--rv-navy); }
.lockprev { border-radius: 16px; background: var(--rv-navy); color: #fff; padding: 20px; }
.lockprev__eyebrow { display: inline-flex; align-items: center; gap: 7px; font: 700 12px var(--font-h); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .1); padding: 5px 10px; border-radius: 6px; }
.lockprev__eyebrow svg { width: 10px; height: 12px; }
.lockprev__eyebrow--live { background: #E3F0FF; color: var(--rv-navy); }          /* white on Bright Blue is only for 19px bold; the same colours as .pill--live */
.lockprev h3 { font-size: 22px; margin-top: 12px; overflow-wrap: anywhere; }
.lockprev__where { color: rgba(255, 255, 255, .78); font-size: 14px; margin-top: 4px; }
.lockprev__found { margin-top: 12px; font: 600 17px/1.35 var(--font-h); overflow-wrap: anywhere; }
.lockprev__found b { color: #fff; box-shadow: inset 0 -3px 0 var(--rv-orange); }
.lockprev__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.lkc { background: #fff; color: var(--ink); border-radius: 10px; overflow: hidden; }
.lkc__ph { position: relative; aspect-ratio: 4 / 3; background: #C9D2DD; overflow: hidden; }
.lkc__ph .lkc__pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(3px) saturate(.85); transform: scale(1.1); }
.lkc__ph::after { content: ""; position: absolute; inset: 0; background: rgba(7, 27, 51, .22); }
.lkc__lock { position: absolute; left: 50%; top: 50%; z-index: 1; width: 40px; height: 40px; margin: -20px 0 0 -20px; display: grid; place-items: center; border-radius: 50%; background: var(--rv-navy); border: 2px solid #fff; color: #fff; }
.lkc__lock svg { width: 13px; height: 16px; }
.lkc__b { padding: 8px 10px 10px; }
.lkc__yr { font: 700 12px var(--font-h); color: var(--ink-3); }
.lkc__n { font: 700 13.5px/1.25 var(--font-h); margin-top: 2px; overflow-wrap: anywhere; }
.lkc__bar { display: inline-block; width: 3.2em; height: .85em; margin-left: .3em; vertical-align: -.06em; background: var(--rv-navy); border-radius: 3px; }
.lkc__price { display: flex; align-items: center; gap: 5px; margin-top: 6px; font: 700 12px var(--font-h); color: var(--ink-2); }
.lkc__price svg { width: 9px; height: 11px; }
.lockprev__more { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .08); font: 700 14px var(--font-h); }
.lockprev__more svg { width: 12px; height: 14px; flex: none; }
.lockprev__note { margin-top: 14px; font-size: 14px; color: rgba(255, 255, 255, .84); overflow-wrap: anywhere; }
.lockprev__note a { color: #fff; font-weight: 700; }
.lockprev .btn { margin-top: 14px; }

/* ---------- inventory freshness (tools/sync.py): sale pending, a listing that has gone, the bot page ---------- */
.card__badge--pending { top: auto; bottom: 12px; background: var(--rv-orange); color: var(--rv-navy); }   /* navy on orange 5.85:1 */
.pchip { display: inline-block; vertical-align: middle; margin-left: 12px; background: var(--rv-orange); color: var(--rv-navy);
  font: 700 13px var(--font-h); letter-spacing: .02em; padding: 5px 10px; border-radius: 6px; position: relative; top: -3px; }
.buy__pending { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #FFE3D6; color: var(--ink); font-size: 14px; }
.gone__kicker { display: inline-block; font: 700 13px var(--font-h); letter-spacing: .06em; text-transform: uppercase; color: var(--rv-navy);
  background: #FFE3D6; padding: 5px 10px; border-radius: 6px; margin-bottom: 14px; }
.gone h1 { max-width: 900px; }
.gone__acts { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.gone__ask .panel { max-width: 640px; }
.prose { max-width: 760px; padding-top: 12px; padding-bottom: 56px; }
.prose h2 { font-size: 24px; margin: 32px 0 10px; }
.prose p, .prose li { color: var(--ink-2); margin-top: 8px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0; }
.prose code, .prose pre { font: 14px/1.5 Consolas, "Courier New", monospace; background: var(--rv-cloud); border-radius: 6px; }
.prose code { padding: 1px 5px; overflow-wrap: anywhere; }
.prose pre { padding: 12px 14px; margin-top: 10px; overflow-x: auto; }
.prose a { color: var(--rv-navy); font-weight: 700; }

/* ---------- /rvs/ filters, round 2 (Robert, 2026-10-15) ---------- */
.search--kw .search__f--kw { flex: 1; }
.floc { display: grid; grid-template-columns: 1fr 1.3fr; gap: 8px; }
.floc input, .floc select, .fgroup > label > select, #f-maxmi { width: 100%; height: 42px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 10px; background: #fff; font-size: 15px; }
.floc input[aria-invalid="true"] { border-color: #B42318; }
.fhint { font-size: 13px; color: var(--ink-3); margin-top: 8px; line-height: 1.45; }
.fhint a { color: var(--ink); font-weight: 700; }
.fseg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--rv-cloud); border-radius: 12px; margin-bottom: 8px; }
.fseg label { position: relative; cursor: pointer; }
.fseg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.fseg span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px 6px; border-radius: 9px; text-align: center; font: 600 13px/1.2 var(--font-h); color: var(--ink-2); }
.fseg input:checked + span { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.fseg input:focus-visible + span { box-shadow: var(--focus); }
.fprof { margin-top: 8px; width: 100%; white-space: normal; text-align: left; justify-content: flex-start; min-height: 40px; line-height: 1.3; }
.fdet { padding-bottom: 18px; }
.fdet summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; cursor: pointer; }
.fdet summary::-webkit-details-marker { display: none; }
.fdet__h { font: 700 15px var(--font-h); }
.fdet__v { font-size: 13px; color: var(--ink-3); }
.fdet__v::after { content: "▾"; margin-left: 6px; display: inline-block; transition: transform .15s; }
.fdet[open] .fdet__v::after { transform: rotate(180deg); }
.fdet[open] summary { margin-bottom: 12px; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fchips label { position: relative; cursor: pointer; }
.fchips input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.fchips span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--pill); background: var(--rv-cloud); border: 1px solid var(--line); font: 600 14px var(--font-h); }
.fchips input:checked + span { background: var(--rv-navy); color: #fff; border-color: var(--rv-navy); }
.fchips input:focus-visible + span { box-shadow: var(--focus); }
.fsearch { width: 100%; height: 40px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 12px; margin-bottom: 8px; font-size: 15px; background: #fff; }
.flink { background: none; border: 0; padding: 6px 0 0; font: 700 14px var(--font-h); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fsub { font: 600 13px var(--font-h); color: var(--ink-2); margin: 4px 0 6px; }
.fsub + select { margin-bottom: 4px; }
#f-fuel { margin-bottom: 10px; }

/* ---------- full-width hero + RV Finder entry (Robert, 2026-10-15) ---------- */
.hero--full { position: relative; padding: 0; background: var(--rv-navy); overflow: hidden; }
.hero--full .hero__media { position: absolute; inset: 0; height: auto; border-radius: 0; }
.hero--full .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; }
.hero--full .hero__media::after { background: linear-gradient(180deg, rgba(7, 27, 51, .62) 0%, rgba(7, 27, 51, .28) 38%, rgba(7, 27, 51, .30) 62%, rgba(7, 27, 51, .72) 100%); }
.hero--full .hero__inner { position: relative; z-index: 1; min-height: clamp(560px, 74vh, 760px); display: flex; flex-direction: column; justify-content: center; padding-top: 56px; padding-bottom: 56px; }
.hero--full .hero__copy { position: static; padding: 0; }
.hero--full .hero__title { font-size: 60px; }
.hero--full .search { margin: 30px auto 0; width: min(920px, 100%); }
.fcta { width: min(920px, 100%); margin: 18px auto 0; display: grid; gap: 12px; }
.fcta__main { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; background: rgba(255, 255, 255, .96); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-2); transition: transform .15s, box-shadow .15s; }
.fcta__main:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(7, 27, 51, .25); }
.fcta__ico { flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--rv-blue); color: #fff; display: grid; place-items: center; }
.fcta__ico svg { width: 22px; height: 22px; }
.fcta__txt { flex: 1; min-width: 0; }
.fcta__txt b { display: block; font: 700 17px/1.25 var(--font-h); }
.fcta__txt small { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.fcta__go { flex: none; width: 22px; height: 22px; color: var(--rv-blue); }
.fcta__qs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fcta__qs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--pill); background: rgba(7, 27, 51, .72); border: 1px solid rgba(255, 255, 255, .35); color: #fff; text-decoration: none; font: 600 14px var(--font-h); backdrop-filter: blur(6px); }
.fcta__qs a:hover { background: rgba(7, 27, 51, .9); border-color: #fff; }
.rgrid > .rempty { grid-column: 1 / -1; }
@media (max-width: 860px) {
  .hero--full .hero__inner { min-height: 0; padding-top: 30px; padding-bottom: 28px; }
  .hero--full .hero__copy { padding: 0 4px; }
  .hero--full .hero__title { font-size: 34px; }
  .hero--full .search { margin: 20px 0 0; width: 100%; }
  .fcta { margin-top: 14px; }
  .fcta__main { padding: 12px 14px; gap: 12px; }
  .fcta__txt b { font-size: 15px; }
  .fcta__txt small { font-size: 13px; }
  .fcta__qs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); }
  .fcta__qs::-webkit-scrollbar { display: none; }
  .fcta__qs a { flex: none; }
}

/* ---------- home hero (owner, 2026-10-31) ----------
   Over 860px (a desk) the hero is what it was: the pill (RV type | keyword | ZIP | Search), the RV Finder card and its three questions.
   Up to 860px (a phone, a tablet standing up) the same markup becomes: one rounded keyword bar with a magnifier that submits and a
   sliders button that folds RV type + ZIP + Search open under it; RV Finder as one quiet line; the questions further down (.sec--finder);
   and the RV-type tiles right under the photo, half over it. The fields keep their names (type, q, zip), so /rvs/?q=&type=&zip= is unchanged. */
.search--home .qs__bar, .search--home .qs__more { display: contents; }
.qs__submit, .qs__filters { display: none; }
.fcta__short, .fcta__go2 { display: none; }
.sec--finder { display: none; }
@media (min-width: 861px) {
  .search--home .search__f--type { order: 1; }          /* the keyword comes first in the markup (it is the phone's bar), the pill keeps its old order */
  .search--home .search__f--kw { order: 2; }
  .search--home .search__f--zip { order: 3; }
  .search--home .search__go { order: 4; }
  .search--home .search__f--kw::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: var(--line); }
}
@media (max-width: 860px) {
  .hero--home, .sec--types { --ov: 134px; }                 /* how far the type tiles reach up over the photo */
  .hero--home .hero__inner { padding-top: 32px; padding-bottom: calc(var(--ov) + 34px); }
  .hero--home .hero__media::after { background: linear-gradient(180deg, rgba(7, 27, 51, .64) 0%, rgba(7, 27, 51, .36) 40%, rgba(7, 27, 51, .34) 58%, rgba(7, 27, 51, .80) 80%, rgba(7, 27, 51, .86) 100%); }
  .hero--full .search--home { display: block; margin: 22px 0 0; width: 100%; padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .search--home .qs__bar { display: flex; align-items: center; height: 60px; padding: 0 8px; background: #fff; border-radius: var(--pill); box-shadow: 0 10px 30px rgba(7, 27, 51, .28); }
  .search--home .qs__bar:has(input:focus-visible) { box-shadow: var(--focus), 0 10px 30px rgba(7, 27, 51, .28); }
  .search--home .qs__bar .search__f { flex: 1; order: 0; background: none; border-radius: 0; }
  .search--home .qs__bar input { height: 56px; padding: 0; border-radius: 0; -webkit-appearance: none; appearance: none; }
  .search--home .qs__bar input:focus-visible { box-shadow: none; }
  .search--home .qs__bar input::placeholder { opacity: 1; }
  .search--home .qs__bar input:placeholder-shown::-webkit-search-cancel-button { display: none; }          /* (an empty field keeps no room for its clear button) */
  .search--home .qs__submit, .search--home .qs__filters { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; }
  .search--home .qs__submit { border: 0; background: transparent; color: var(--rv-navy); }
  .search--home .qs__submit svg { width: 22px; height: 22px; }
  .search--home .qs__filters { margin-left: 6px; border: 1px solid var(--line); background: var(--rv-cloud); color: var(--ink); }
  .search--home .qs__filters svg { width: 20px; height: 20px; }
  .search--home .qs__filters[aria-expanded="true"] { background: var(--rv-navy); border-color: var(--rv-navy); color: #fff; }
  html:not([data-js]) .search--home .qs__filters { display: none; }          /* no scripting: the fold below stays open, so the button has nothing to do */
  /* a ZIP or a type is set while the fold is shut (a ZIP saved on this device fills it in): a dot on the button says so */
  .search--home:has(.search__f--type select:not(.is-empty)) .qs__filters[aria-expanded="false"]::after,
  .search--home:has(.search__f--zip input:not(:placeholder-shown)) .qs__filters[aria-expanded="false"]::after { content: ""; position: absolute; top: 5px; right: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--rv-blue); border: 2px solid var(--rv-cloud); }
  .search--home .qs__more { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; padding: 10px; background: #fff; border-radius: 18px; box-shadow: var(--shadow-2); scroll-margin-bottom: 16px; }
  html[data-js] .search--home:not(.is-open) .qs__more { display: none; }
  .search--home .qs__more .search__f { order: 0; }
  .search--home .qs__more .search__f--type select { padding-right: 34px; }
  .search--home .qs__more .search__go { order: 0; grid-column: 1 / -1; justify-content: center; }
  .hero--home .fcta { display: flex; justify-content: center; width: 100%; margin-top: 8px; }
  .hero--home .fcta__main { display: block; flex: none; max-width: 100%; min-height: 44px; padding: 12px 8px; border-radius: 0; background: none; box-shadow: none; transform: none; color: rgba(255, 255, 255, .92); text-align: center; text-shadow: 0 1px 8px rgba(7, 27, 51, .7); }          /* one line of words with the arrow after them: it wraps like text on a narrow phone */
  .hero--home .fcta__ico, .hero--home .fcta__long, .hero--home .fcta__txt small, .hero--home .fcta__qs { display: none; }
  .hero--home .fcta__short { display: inline; }
  .hero--home .fcta__txt, .hero--home .fcta__txt b { display: inline; font: 600 15px/1.3 var(--font-h); }
  .hero--home .fcta__txt em { color: #fff; font-style: normal; font-weight: 700; text-decoration: underline; text-decoration-color: var(--rv-orange); text-decoration-thickness: 2px; text-underline-offset: 5px; white-space: nowrap; }
  .hero--home .fcta__go { display: none; }          /* (the phone's line carries its own arrow, inside the words that stay together) */
  .hero--home .fcta__go2 { display: inline; width: 18px; height: 18px; margin-left: 4px; vertical-align: -3px; color: #fff; }
  /* the RV-type tiles: the heading and the top of the row sit on the photo, the labels on the page below it */
  .sec--types { position: relative; z-index: 2; margin-top: calc(-1 * var(--ov)); padding-top: 0; }
  .sec--types .sec__head { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 6px; }
  .sec--types .sec__title { font-size: 18px; color: #fff; text-shadow: 0 1px 10px rgba(7, 27, 51, .6); }
  .sec--types .link-arrow { margin-right: -6px; padding: 0 6px; color: #fff; font-weight: 600; font-size: 14px; text-shadow: 0 1px 8px rgba(7, 27, 51, .6); }
  .sec--types .link-arrow svg { width: 16px; height: 16px; color: #fff; }
  .sec--types .rail__track { grid-auto-columns: 148px; align-items: start; gap: 10px; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 14px; scroll-padding-left: var(--gut); }
  .sec--types .ttile { border: 0; background: #fff; box-shadow: 0 8px 22px rgba(7, 27, 51, .22), 0 1px 3px rgba(7, 27, 51, .12); }
  .sec--types + .sec { padding-top: 34px; }
  .sec--finder { display: block; }
  .fbar { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 16px 10px 10px; border-radius: 16px; background: var(--rv-navy); color: #fff; text-decoration: none; }
  .fbar__t { flex: 1; min-width: 0; font: 600 15px/1.3 var(--font-h); color: rgba(255, 255, 255, .9); }
  .fbar__t b { display: block; color: #fff; font-weight: 700; font-size: 16px; }
  .fbar__go { flex: none; width: 22px; height: 22px; color: var(--rv-orange); }
  .fbar__qs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  .fbar__qs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--pill); background: var(--rv-cloud); border: 1px solid var(--line); color: var(--ink); text-decoration: none; font: 600 14px var(--font-h); }
}
@media (max-width: 340px) { .search--home .qs__bar input::placeholder { font-size: 15px; } }          /* (a 320px phone: the field itself keeps its 16px) */
@media (max-width: 1080px) {   /* five quick links: one line that scrolls sideways instead of wrapping */
  .hdr__sub { overflow-x: auto; scrollbar-width: none; white-space: nowrap; }          /* (the 20px between the words is the links' own padding, above) */
  .hdr__sub::-webkit-scrollbar { display: none; }
  .hdr__sub a { flex: none; }
}

/* ---------- shopper accounts: Google sign-in and the account menu ----------
   Markup exists only while the build's accounts gate is open (tools/build_site.py, docs/specs/google-sign-in.md). */
.btn--google { background: #fff; color: var(--rv-navy); border-color: #747775; min-height: 48px; padding: 0 18px; gap: 12px; font-size: 16px; }
.btn--google:hover { background: var(--rv-cloud); }
.btn--google .gbtn__g { width: 20px; height: 20px; }
/* "Continue with Facebook" sits right under the Google button and has exactly its size at every width: 48px tall, 16px bold label, 20px icon,
   12px gap, 0 18px padding (the owner's decision of 2026-10-25, docs/DECISIONS.md). Facebook's brand blue #0866FF with the white label is
   4.82:1, which passes WCAG AA (the older #1877F2 is only 4.23:1); that is an approved exception to the brand rule "white on blue only at
   19px bold", for this third-party button. The icon is Meta's circled logo in white (tools/build_site.py FACEBOOK_F). Where the label would
   not fit a phone-width window, the window gives the button more room (the phone rules just below), never the button less.
   account.js un-hides it only while Facebook sign-in is switched on for this visitor (src/firebase.json "facebook"), or for a shopper whose
   Google sign-in just met a Facebook account. */
.btn--facebook { background: #0866FF; color: #fff; border-color: #0866FF; min-height: 48px; padding: 0 18px; gap: 12px; font-size: 16px; }
.btn--facebook:hover { background: #0757D9; border-color: #0757D9; }
.btn--facebook .fbtn__f { width: 20px; height: 20px; }
.btn--google + .btn--facebook { margin-top: 10px; }
/* The two sign-in windows give the full-size buttons the room they need. "Continue with Facebook" is the longest label: icon, gap, label and
   padding need 276px, and the browser's own cap on a dialog (100% - 6px - 2em) plus the window's padding and the Shoppers card's padding
   leave only 228px at 360px. So the cap is replaced by an 8px margin on each side (percentages, so a desktop scrollbar is left out), the
   window's width follows on from the phone to the desktop without a step, and on a phone the side padding of the window and of the Shoppers
   card is trimmed. A window narrower than 344px (a phone under 360px, or a narrow desktop window with a scrollbar) trims it further, by a
   container query on the window's own width, not the screen's; below 331px the margin is 4px. The phone menu does the same under 360px.
   The buttons keep their size at every width. */
#m-login, #m-signup { width: min(520px, calc(100% - 16px)); max-width: calc(100% - 16px); container-type: inline-size; }
@media (max-width: 420px) {
  #m-login .modal__in, #m-signup .modal__in { padding-left: 20px; padding-right: 20px; }
  #m-login .opt { padding-left: 12px; padding-right: 12px; }
}
@container (max-width: 343px) {
  #m-login .modal__in, #m-signup .modal__in { padding-left: 12px; padding-right: 12px; }
  #m-login .opt { padding-left: 4px; padding-right: 4px; }
}
@media (max-width: 330px) { #m-login, #m-signup { width: calc(100% - 8px); max-width: calc(100% - 8px); } }
@media (max-width: 359px) { .drawer__panel { width: min(340px, 94vw); padding-left: 12px; padding-right: 12px; } }      /* the phone menu keeps 276px of room for the buttons */
.btn[disabled] { opacity: .6; cursor: progress; }
.btn--danger { background: #B42318; color: #fff; }
.btn--danger:hover { background: #912018; }
.drawer__auth { margin-top: 14px; }
.drawer__auth .btn { width: 100%; }
.modal__acts { display: grid; gap: 10px; margin-top: 18px; }
.auth-msg, .opt .auth-msg { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: #FEF0EE; color: #8A1C12; font-size: 15px; }   /* (.opt p would win over the plain class) */
.auth-msg[data-kind="info"] { background: var(--rv-cloud); color: var(--ink-2); }
.auth-msg:empty { margin: 0; padding: 0; background: none; }          /* still in the page, so a screen reader hears it arrive */
/* a shopper who signed in before: hold back the signed-out buttons (they keep their room, so nothing moves) until account.js knows */
html[data-auth-hint] body:not([data-auth]) :is(.hdr__login, .hdr__acts [data-open="signup"], [data-auth-out]) { visibility: hidden; animation: rvs-auth-show 0s 6s forwards; }
@keyframes rvs-auth-show { to { visibility: visible; } }          /* failsafe with no script: if account.js never decides, they come back after 6 s */
/* the RV Finder's "Get matches by email" box is only the email list: no Google button, note or divider in it */
.modal[data-from-finder] :is([data-google-signin], [data-facebook-signin], .auth-msg, .auth-or) { display: none; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--ink-3); font: 600 14px var(--font-h); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.hdr__acctwrap { position: relative; }
.hdr__acct { position: relative; display: block; max-width: 150px; height: 44px; padding: 0 30px 0 14px; border: 1.5px solid rgba(255, 255, 255, .35);
  border-radius: var(--pill); background: transparent; color: #fff; font: 700 15px/41px var(--font-h); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr__acct:hover { background: rgba(255, 255, 255, .1); }
.hdr__acct::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); }
.hdr__acct[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
.acct-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 210; min-width: 220px; padding: 6px; display: grid; background: #fff; color: var(--ink);
  border-radius: 14px; box-shadow: var(--shadow-2); }
.acct-menu a, .acct-menu button { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: none;
  color: var(--ink); font: 600 15px var(--font-h); text-align: left; text-decoration: none; }
.acct-menu a:hover, .acct-menu button:hover { background: var(--rv-cloud); }
.acct-menu [data-delete-account] { color: #B42318; }
.ftr__legal { display: flex; flex-wrap: wrap; gap: 0 18px; }
.ftr__legal a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .88); font-weight: 600; text-decoration: none; }
.ftr__legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.prose h1 { font-size: 36px; margin-bottom: 8px; }
@media (max-width: 720px) {
  .hdr__acct { max-width: 96px; padding: 0 24px 0 10px; font-size: 14px; }
  .hdr__acct::after { right: 9px; }
}
@media (max-width: 359.98px) {          /* the rest of the small-phone header is under "header" above; here the name gives way once the wordmark is at 120px */
  .hdr__acts > .hdr__acctwrap { flex: 0 1 auto; min-width: 44px; }
  .hdr__acct { width: 100%; padding: 0 20px 0 10px; }
  .hdr__acct::after { right: 8px; }
  .acct-menu { position: fixed; top: var(--head); right: var(--gut); }          /* the button can sit left of the 220px menu's width: pin the menu to the screen's right edge instead */
}
@media (min-width: 342px) and (max-width: 369.98px) {          /* the account button takes no more room than the Sign up button it replaces (86px): at 360 to 369px a long name used to push Menu up to 10px off the right edge, and from 342px the wordmark no longer resizes when a returning shopper's session is found. Same padding as under 360px, so "Jordan" is drawn whole */
  .hdr__acct { max-width: 86px; padding: 0 20px 0 10px; }
  .hdr__acct::after { right: 8px; }
}
@media (max-width: 341.98px) {          /* Sign up is not in the bar here, so there is no room held for the account button: while a signed-in shopper is shown (and while a returning one is being found) the wordmark is the 120px it has beside a long name, whatever the name's length, so it does not resize when the session is found */
  html[data-auth-hint] body:not([data-auth]) .hdr__logo, body[data-auth="in"] .hdr__logo { flex-basis: 120px; }
}

/* ---------- phones and touch screens: 44px tap targets and 16px fields ----------
   On a phone (up to 720px, or any touch screen, so a phone turned on its side and a tablet too) every button, link and field is at least
   44px tall, and every field is 16px: iOS Safari zooms the whole page when a field under 16px gets focus. A desk with a mouse keeps its
   tighter sizes (the 768, 1024 and 1440px layouts are as they were). Header Search/Menu (44px at every width) and the phone menu are set above. */
@media (max-width: 720px), (pointer: coarse) {
  .btn--sm { min-height: 44px; }
  .link-arrow { min-height: 44px; }
  .chip { min-height: 44px; }
  .ftr__btns .btn { min-height: 44px; }
  .ftr__cols ul { gap: 0; }
  .ftr__cols a { display: flex; align-items: center; min-height: 44px; }
  .crumbs { gap: 0 8px; align-items: center; margin-bottom: 0; }
  .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .fcta__qs a { min-height: 44px; }
  .ftr__top a { padding: 8px 0; }
  .faq details { padding: 0; }
  .faq summary { align-items: center; padding: 14px 0; }
  .faq details p { margin-top: 0; padding-bottom: 16px; }
  .fprof { min-height: 44px; }
  .dfind__clear { width: 44px; height: 44px; right: 4px; }
  .check { min-height: 44px; align-content: center; }          /* a one-line tick box (/dealers/join/ on a phone on its side or a tablet) was 22px tall */
  /* fields: 44px tall, 16px */
  .frange input, .fgroup select, .rhead select, .floc input, .floc select, .fgroup > label > select, #f-maxmi, .fsearch, .zipask input { height: 44px; font-size: 16px; }
  .buy__copy input { font: 16px var(--font-b); }
  /* the Filters panel and the results row */
  .fopts { gap: 0; }          /* (the rows are 44px each; no extra gap between them keeps the panel from growing) */
  .fopt { min-height: 44px; padding: 0; }
  .active-f button { min-height: 44px; }
  .fseg span { min-height: 44px; }
  .fdet summary { min-height: 44px; align-items: center; }
  .fchips span { min-height: 44px; }
  .flink { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .fbtn { border-radius: 10px; }          /* the same corners as the Sort box beside it */
  .rhead > div, .rhead label { min-width: 0; max-width: 100%; }          /* at 320px the 16px Sort box gives back a few px instead of reaching into the right gutter */
  .rhead select { max-width: 100%; }
}

/* ---------- a phone turned on its side ----------
   A phone turned on its side (500px tall or less): the header would be a third of the screen, so it stays at the top of the page and scrolls
   away with it (every link is still there at the top of each page). The gallery fits the screen, and so does the Show RVs bar. */
@media (max-height: 500px) and (orientation: landscape) {
  .hdr { position: absolute; }
  html { scroll-padding-top: 16px; }
  .gal { height: min(520px, calc(100vh - 32px)); }
  .filters__apply { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}
/* Wider than 900px and 500px tall or less the header scrolls away too, so the filter sidebar pins 16px from the top of the screen instead of
   below a fixed header's height. (900px and under keeps the full-screen Filters panel, so this must stay after those rules.) */
@media (max-height: 500px) and (orientation: landscape) and (min-width: 900.02px) {
  .filters { top: 16px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
}