/* MyHumanDriver.com — design system from the approved 2026-10-14 concepts (white / deep teal / pale mint). */
@font-face {
  font-family: "Manrope";
  src: url("/fonts/Manrope-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --teal: #125B50; --teal-dark: #0C463D; --mint: #F1F7F3; --ink: #24342F; --muted: #5F6F6A;
  --sage: #D7E3DD; --bg: #FFFFFF; --focus: #F2B134; --max: 1280px;
  /* Website-first flyer tokens (accepted 2026-10-26 concepts). --mint stays the pale #F1F7F3 alias every legacy selector
     relies on; the flyer mint is --mint-band and --mint-pale names the pale value explicitly. --muted is for white only. */
  --teal-deep: #073F3B; --mint-band: #D4EEE5; --mint-pale: #F1F7F3; --wrap-max: 1440px;
  --gutter-desktop: 80px; --gutter-tablet: 40px; --gutter-mobile: 22px; --gutter-narrow: 20px;
  --fs-h1: clamp(2.75rem, 5.6vw, 5rem); --fs-h1-mobile: clamp(2.6rem, 11.5vw, 3rem); --fs-h2: clamp(1.9rem, 3.6vw, 2.75rem); --fs-h3: 1.25rem;
  --fs-lede: clamp(1.1rem, 1.7vw, 1.35rem); --fs-offer: clamp(2.1rem, 4.6vw, 3.3rem); --fs-offer-sub: 1.35rem; --fs-btn: 1.05rem; --fs-small: 0.92rem; --fs-caption: 0.9rem;
  --radius-btn: 16px; --radius-btn-header: 12px; --radius-offer: 18px; --radius-frame: 14px;
}
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--ink); background: var(--bg);
  font-family: "Manrope", "Avenir Next", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 18px; line-height: 1.5; font-weight: 500; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, .btn:focus-visible, .pill:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--teal); padding: 8px 12px; }
.skip:focus { left: 12px; z-index: 10; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--mint); padding: 1px 5px; border-radius: 4px; }
.arr { font-weight: 600; }

/* header / footer */
header.top { border-bottom: 1px solid var(--sage); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.wordmark { font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: var(--teal); white-space: nowrap; }
header.top nav { display: flex; gap: 36px; flex-wrap: wrap; justify-content: flex-end; }
header.top nav a, footer nav a { color: var(--ink); font-weight: 500; font-size: 17px; }
footer { border-top: 1px solid var(--sage); margin-top: 16px; padding: 20px 0 18px; }
footer .wordmark { font-size: 24px; }
footer .wrap { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 24px 56px; }
footer nav { display: flex; gap: 36px; flex-wrap: wrap; }
footer .foot-note { margin: 0; justify-self: end; max-width: 360px; text-align: right; font-size: 13px; color: var(--muted); }

/* type scale */
h1, h2, h3 { margin: 0; color: var(--teal); letter-spacing: -0.02em; line-height: 1.1; font-weight: 800; }
h1 { font-size: 72px; }
h2 { font-size: 40px; }
h3 { font-size: 20px; color: var(--ink); letter-spacing: -0.01em; }
p { margin: 0; }
.lede { font-size: 22px; font-weight: 500; color: var(--ink); margin-top: 14px; }

/* buttons & pills */
.btn { display: inline-block; background: var(--teal); color: #fff; font-weight: 700; font-size: 18px; line-height: 24px; padding: 12px 24px;
  border-radius: 6px; box-shadow: 0 2px 0 var(--teal-dark); }
.btn:hover { background: var(--teal-dark); text-decoration: none; }
.pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.pill { display: inline-block; padding: 12px 24px; border: 1px solid var(--sage); border-radius: 6px; color: var(--teal); font-weight: 600; font-size: 18px; }
.pill:hover { background: var(--mint); text-decoration: none; }
.pill.is-active { background: var(--teal); color: #fff; border-color: var(--teal); }

/* homepage */
.hero { padding: 36px 0 18px; border-bottom: 1px solid var(--sage); }
.hero .lede { max-width: 980px; margin-top: 10px; }
.hero .btn { margin-top: 22px; }
.locations { padding: 30px 0 26px; border-bottom: 1px solid var(--sage); }
.locations > .muted { margin-top: 4px; }
.state-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; margin-top: 22px; }
.state-grid > .col { border-right: 1px solid var(--sage); padding-right: 40px; }
.state-grid > .col:last-child { border-right: 0; padding-right: 0; }
.state { border-bottom: 1px solid var(--sage); padding: 14px 0 12px; }
.col > .state:first-child { padding-top: 0; }
.col > .state:last-child { border-bottom: 0; }
.state h3 { margin-bottom: 4px; }
.state ul { list-style: none; margin: 0; padding: 0; }
.state li { padding: 2px 0; font-size: 18px; line-height: 25px; }
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; padding: 18px 0; }
.services > div { border-left: 1px solid var(--sage); padding-left: 24px; }
.services > div:first-child { border-left: 0; padding-left: 0; }
.services p { color: var(--muted); margin-top: 4px; }
.panel { background: var(--mint); border-radius: 10px; padding: 20px 44px; margin: 0 -44px 4px; display: grid; grid-template-columns: 1fr auto; gap: 20px 48px; align-items: center; }
.panel h2 { font-size: 30px; }
.panel p { margin-top: 4px; color: var(--ink); font-size: 17px; }
.panel-cta { text-align: center; }
.panel-cta .muted { margin-top: 8px; font-size: 15px; }

/* breadcrumb */
.crumbs { padding-top: 26px; font-size: 16px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 10px; }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--teal); font-weight: 600; }
.crumbs .sep { color: var(--sage); }

/* city pages */
.city-head { padding: 24px 0 8px; }
.city-head h1 { font-size: 88px; letter-spacing: -0.035em; line-height: 1; color: var(--teal); }
.state-name { font-size: 32px; font-weight: 600; margin-top: 2px; }
.city-head .lede { margin-top: 14px; }
.empty { background: var(--mint); border-radius: 10px; padding: 32px 26px; margin: 26px 0 20px; }
.empty h2 { font-size: 36px; }
.empty p { font-size: 19px; margin-top: 10px; }
.empty a { text-decoration: underline; }
.local-areas { margin-top: 30px; }
.local-areas > h2 { font-size: 40px; }
.local-areas > .muted { margin-top: 8px; max-width: 980px; }
.finder { margin: 22px 0 6px; max-width: 560px; }
.finder label { display: block; font-weight: 700; font-size: 17px; margin-bottom: 8px; }
.finder-row { display: flex; gap: 10px; }
.finder input { flex: 1; font: inherit; font-size: 18px; padding: 12px 14px; border: 1px solid var(--sage); border-radius: 6px; color: var(--ink); background: #fff; min-width: 0; }
.finder input:focus-visible, .finder button:focus-visible, .linklike:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.finder button, .linklike { font: inherit; cursor: pointer; }
.finder button { padding: 0 18px; border: 1px solid var(--sage); border-radius: 6px; background: var(--mint); color: var(--teal); font-weight: 700; }
.finder .small { margin-top: 8px; }
.linklike { background: none; border: 0; padding: 0; color: var(--teal); text-decoration: underline; font-weight: 600; }
.empty-inline { background: var(--mint); border-radius: 8px; padding: 14px 18px; margin: 12px 0; }
.area-group { margin-top: 26px; }
.area-group h3 { font-size: 26px; color: var(--teal); margin-bottom: 10px; font-weight: 800; }
.area-grid, .area-row, .area-grid > .col { list-style: none; margin: 0; padding: 0; }
.area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 44px; }
.area-grid > .col { border-right: 1px solid var(--sage); padding-right: 44px; }
.area-grid > .col:last-child { border-right: 0; padding-right: 0; }
.area-grid .area { padding: 6px 0; font-size: 19px; }
.area-row { display: flex; flex-wrap: wrap; }
.area-row > .area { padding: 6px 24px 6px 0; margin-right: 24px; border-right: 1px solid var(--sage); font-size: 19px; }
.area-row > .area:last-child { border-right: 0; }
.area h4 { font-size: 19px; color: var(--teal); margin: 0; font-weight: 800; }
.drivers { list-style: none; margin: 6px 0 0; padding: 0; }
.driver { padding: 8px 0; border-top: 1px solid var(--sage); font-size: 17px; }
.driver .name { font-weight: 700; }
.driver .svc, .driver .also { color: var(--muted); }
.driver .acts a { margin-right: 14px; font-weight: 600; }
.badge { display: inline-block; font-size: 12px; border: 1px solid #B03A2E; color: #B03A2E; padding: 0 6px; border-radius: 4px; margin-left: 8px; vertical-align: 2px; }
.local-areas > .small { margin-top: 22px; }
.sources { margin-top: 8px; font-size: 14px; color: var(--muted); }
.sources summary { cursor: pointer; color: var(--teal); font-weight: 600; }
.sources summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sources p { margin: 8px 0 0; max-width: 820px; }
.sources ul { margin: 8px 0 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.sources li { break-inside: avoid; margin: 2px 0; overflow-wrap: anywhere; }
[hidden] { display: none !important; }

/* content pages */
.page-head { padding: 24px 0 8px; }
.page-head h1 { font-size: 56px; }
.prose { max-width: 820px; }
.prose h2 { font-size: 30px; margin: 34px 0 10px; }
.prose ul { padding-left: 22px; margin: 0; }
.prose li { margin: 8px 0; }
.prose p { margin-top: 8px; }
.price { font-size: 24px; font-weight: 700; color: var(--teal); }

/* responsive */
@media (max-width: 960px) {
  h1 { font-size: 56px; } h2 { font-size: 32px; }
  .city-head h1 { font-size: 64px; } .state-name { font-size: 26px; }
  .state-grid, .area-grid { gap: 0 28px; }
  .state-grid > .col, .area-grid > .col { padding-right: 28px; }
  .panel { grid-template-columns: 1fr; margin-left: 0; margin-right: 0; padding-left: 24px; padding-right: 24px; }
  footer .wrap { grid-template-columns: 1fr; }
  footer .foot-note { justify-self: start; text-align: left; max-width: none; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  header.top .wrap { flex-wrap: wrap; padding: 14px 20px; }
  header.top nav { gap: 18px; justify-content: flex-start; width: 100%; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  h1 { font-size: 42px; } h2 { font-size: 28px; } .lede { font-size: 19px; }
  .hero { padding: 36px 0 32px; }
  .city-head h1 { font-size: 52px; } .state-name { font-size: 22px; }
  .state-grid, .area-grid { grid-template-columns: 1fr; }
  .state-grid > .col, .area-grid > .col { border-right: 0; padding-right: 0; }
  .col > .state:last-child { border-bottom: 1px solid var(--sage); }
  .state-grid > .col:last-child > .state:last-child { border-bottom: 0; }
  .services { grid-template-columns: 1fr; gap: 16px; }
  .services > div { border-left: 0; padding-left: 0; }
  .panel { padding: 20px; margin-left: 0; margin-right: 0; }
  .state li { padding: 4px 0; }
  .state li a { display: inline-block; padding: 4px 0; }
  .btn { padding: 12px 22px; }
  .panel h2, .empty h2 { font-size: 26px; } .local-areas > h2 { font-size: 30px; } .area-group h3 { font-size: 22px; }
  .pill { padding: 11px 16px; font-size: 16px; }
  .area-row > .area { border-right: 0; margin-right: 0; padding: 6px 0; width: 100%; }
  .page-head h1 { font-size: 40px; }
}

/* ======================================================================================================================
   Website-first flyer presentation (Task 4, 2026-10-26), from the accepted concepts. Every rule is scoped to body.marketing
   (static pages, city directories, policies, 404) or body.home (homepage bands). Subscriber websites (body.profile) never
   carry these classes, so their validated theme roles and the shell overrides in driver-page.css keep winning unchanged.
   ====================================================================================================================== */
.marketing { line-height: 1.65; }
.marketing .wrap { max-width: var(--wrap-max); padding: 0 var(--gutter-desktop); }  /* 1280px usable at 1440 */
.marketing :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; box-shadow: 0 0 0 5px var(--focus); border-radius: 4px; }
.marketing h1, .marketing h2, .marketing h3, .marketing .city-head h1, .marketing .area-group h3, .marketing .area h4 { color: var(--teal-deep); }
.marketing .btn { border-radius: var(--radius-btn); box-shadow: none; padding: 0.95rem 1.6rem; font-size: var(--fs-btn); line-height: 1.3; }
.marketing .btn:hover { background: var(--teal-deep); }
.marketing .btn.block { display: block; text-align: center; width: 100%; }
.marketing .quiet { color: var(--teal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.marketing header.top .wrap > *, .marketing footer .wrap > * { min-width: 0; }
/* header: wordmark, quiet directory entrance, one quiet link, one action */
.marketing header.top { border-bottom: 0; padding: 22px 0; }
.marketing header.top .wrap { min-height: 0; gap: 28px; }
.marketing .wordmark { color: var(--teal-deep); font-size: 1.6rem; letter-spacing: -0.03em; }
.marketing header.top nav { gap: 28px; align-items: center; flex-wrap: nowrap; }
.marketing header.top nav a { font-weight: 600; font-size: 1rem; }
.marketing header.top nav a.btn { color: #fff; border-radius: var(--radius-btn-header); padding: 0.7rem 1.25rem; font-weight: 700; }
/* prominent directory entrance (2026-10-26): outlined teal pill, 44px minimum touch height, plain anchor to #locations */
.marketing header.top nav a.dir { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 2px solid var(--teal); border-radius: var(--radius-btn-header); color: var(--teal); font-weight: 700; white-space: nowrap; }
.marketing header.top nav a.dir:hover { background: var(--mint-pale); text-decoration: none; }
.marketing header.top nav a.btn:hover { text-decoration: none; }
/* footer: wordmark, links, scope statement */
.marketing footer { margin-top: 32px; padding: 36px 0 56px; font-size: 0.95rem; }
.marketing footer .wrap { grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; }
.marketing footer .wordmark { font-size: 1.6rem; }
.marketing footer nav { gap: 12px 22px; }
.marketing footer nav a { font-weight: 600; font-size: 0.95rem; }
.marketing footer .foot-note { max-width: 36ch; font-size: 0.95rem; text-align: left; color: var(--muted); }
/* homepage: full-width bands, each with its own .wrap */
.home main > section { padding: 72px 0; }
.home .band { background: var(--mint-pale); }
.home .band.mint { background: var(--mint-band); }
.home h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; line-height: 1.04; }
.home h1 .l { display: block; }
.home h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; line-height: 1.1; }
.home h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.2; }
.home img { max-width: 100%; height: auto; display: block; }
.home figure { margin: 0; min-width: 0; }
.home .hero .wrap > *, .home .two > *, .home .proof > *, .home .kit > *, .home .rail > *, .home .states > * { min-width: 0; }
.home .lede { font-size: var(--fs-lede); line-height: 1.5; max-width: 30ch; margin-top: 0; }
.home .small { font-size: var(--fs-small); }
.home .sect-head { max-width: 52rem; }
.home .sect-head p { margin-top: 14px; font-size: 1.15rem; }
/* contrast rule: --muted (#5F6F6A) is for WHITE backgrounds only; inside mint/pale bands and the offer block small text uses --ink */
.home .band .muted, .home .offer .muted, .home .band .render figcaption { color: var(--ink); }
/* hero */
.home .hero { padding: 20px 0 40px; border-bottom: 0; }
.home .hero .wrap { display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); grid-template-rows: auto auto; column-gap: 40px; row-gap: 24px; align-items: end; }
.home .hero > .wrap > h1 { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 1; }  /* direct grid child: spans both columns, one sentence per line */
.home .hero .copy { grid-column: 1; grid-row: 2; align-self: start; }
.home .hero figure { grid-column: 2; grid-row: 1 / 3; align-self: end; }
.home .hero .copy > * + * { margin-top: 22px; }
.home .hero .btn { margin-top: 0; }
.home .hero img { width: 100%; }
.home .offer { background: var(--mint-band); border-radius: var(--radius-offer); padding: 28px 30px; max-width: 36rem; }
.home .offer .big { font-size: var(--fs-offer); font-weight: 800; color: var(--teal-deep); letter-spacing: -0.03em; line-height: 1; }
.home .offer .sub { font-size: var(--fs-offer-sub); font-weight: 700; color: var(--teal-deep); margin: 6px 0 20px; }
.home .offer .price { margin-top: 16px; font-size: 0.98rem; }
.home .offer .small { margin-top: 8px; }
/* product proof and media kit frames (real renders in light frames) */
.home .proof { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1.2fr); gap: 36px; align-items: start; margin-top: 36px; }
.home .render { margin: 0; }
.home .render figcaption { font-size: var(--fs-caption); color: var(--muted); margin-top: 8px; }
.home .render .tag { margin-bottom: 8px; }
.home .render .full { display: block; margin-top: 6px; font-size: 0.85rem; }
.home .tag { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--teal-deep); background: var(--mint-band); padding: 4px 10px; border-radius: 999px; }
.home .frame { border: 1px solid var(--sage); border-radius: var(--radius-frame); background: #fff; overflow: hidden; box-shadow: 0 10px 30px rgba(7, 63, 59, 0.08); }
.home .frame img { display: block; width: 100%; height: auto; background: #fff; }
.home .frame.browser::before { content: ""; display: block; height: 30px; background: var(--mint-pale); border-bottom: 1px solid var(--sage); }
.home .frame.phone { border-radius: 28px; border: 8px solid #E6EEEA; width: min(250px, 100%); margin: 0 auto; }
.home .frame.paper { border-radius: 4px; box-shadow: 0 8px 22px rgba(7, 63, 59, 0.12); }
.home .labels { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.home .labels li { padding-left: 30px; position: relative; font-weight: 600; }
.home .labels li::before { content: ""; position: absolute; left: 0; top: 9px; width: 14px; height: 14px; border-radius: 50%; background: var(--teal); }
.home .sample-note { margin-top: 18px; }
/* campaign band, three-step rail, media kit band, offer band */
.home .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.home .two.start { align-items: start; }
.home .two figure img { width: 100%; }
.home .face .lede { margin-top: 18px; max-width: 34ch; }
.home .face .intro { max-width: 52rem; }
/* work scenes (artwork revision 2): open three-column row between the campaign intro and the process rail; no cards, borders or crops */
.home .driver-scenes { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: end; }
.home .driver-scenes > li { min-width: 0; }
.home .driver-scenes figure { margin: 0; }
.home .driver-scenes img { width: 100%; height: auto; display: block; }
.home .driver-scenes figcaption { margin-top: 10px; font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.home .face .rail { margin-top: 44px; }
.home .close { margin-top: 18px; font-weight: 800; color: var(--teal-deep); font-size: 1.3rem; letter-spacing: -0.02em; }
.home .rail { list-style: none; padding: 36px 0 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; border-top: 1px solid var(--sage); }
.home .rail .n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mint-band); color: var(--teal-deep); font-weight: 800; margin-bottom: 14px; }
.home .rail p { margin-top: 6px; }
.home .kit-band .sub, .home .offer-band .sub { margin-top: 10px; font-size: 1.4rem; font-weight: 800; color: var(--teal-deep); letter-spacing: -0.02em; }
.home .kit-text { margin-top: 16px; max-width: 32ch; }
.home .offer-band .kit-text { margin-top: 14px; max-width: none; }
.home .kit-print { margin-top: 12px; font-weight: 700; }
.home .kit-cta { margin-top: 24px; }
.home .kit-note { margin-top: 16px; }
.home .kit { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.85fr); gap: 22px; align-items: end; }
.home .kit .render:nth-child(2) { align-self: center; }
/* directory entrance: every state and city from data/ */
.home .locations { padding: 72px 0; border-bottom: 0; }
.home .states { columns: 3; column-gap: 40px; margin-top: 28px; }
.home .state { break-inside: avoid; margin-bottom: 22px; padding: 0 0 14px; border-bottom: 1px solid var(--sage); }
.home .state h3 { margin-bottom: 8px; }
.home .state ul { list-style: none; padding: 0; margin: 0; }
.home .state li { padding: 2px 0; }
.home .state a { font-weight: 600; }
/* FAQ */
.home .faq-list { margin-top: 22px; }
.home .faq details { border-top: 1px solid var(--sage); padding: 16px 0; }
.home .faq summary { font-weight: 700; cursor: pointer; color: var(--teal-deep); font-size: 1.1rem; }
.home .faq details p { margin-top: 8px; max-width: 60ch; }
/* responsive: gutters 80 / 40 / 22 / 20 */
@media (max-width: 1024px) {
  .marketing .wrap { padding: 0 var(--gutter-tablet); }
  .home .states { columns: 2; }
  .home .driver-scenes { gap: 24px; }
  .home .kit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home .proof { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .marketing { font-size: 17px; }
  .marketing .wrap, .marketing header.top .wrap { padding: 0 var(--gutter-mobile); }
  .marketing header.top .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand login" "dir more"; align-items: center; row-gap: 4px; min-height: 0; }
  .marketing header.top nav { display: contents; }
  .marketing header.top .wordmark { grid-area: brand; }
  .marketing header.top nav a.login { grid-area: login; white-space: nowrap; }
  .marketing header.top nav a.dir { grid-area: dir; justify-self: start; font-size: 0.95rem; margin-top: 6px; white-space: normal; }
  .marketing header.top nav a.more { grid-area: more; justify-self: end; font-size: 0.95rem; }
  .marketing header.top nav a.btn { display: none; }
  .marketing footer .wrap { grid-template-columns: minmax(0, 1fr); }
  .marketing footer .foot-note { max-width: none; justify-self: start; }
  .home main > section, .home .locations { padding: 52px 0; }
  .home .hero { padding: 8px 0 40px; }
  .home .hero .wrap { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 20px; }
  .home .hero > .wrap > h1, .home .hero .copy, .home .hero figure { grid-column: 1; grid-row: auto; }
  .home .hero figure { margin-top: 8px; }
  .home h1 { font-size: var(--fs-h1-mobile); }
  .home .offer { padding: 22px; }
  .home .offer .btn { display: block; text-align: center; width: 100%; }
  .home .two, .home .kit, .home .rail { grid-template-columns: minmax(0, 1fr); }
  .home .driver-scenes { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px; }
  .home .driver-scenes figure { max-width: 26rem; margin: 0 auto; }
  .home .driver-scenes figcaption { font-size: 17px; }
  .home .states { columns: 1; }
}
@media (max-width: 430px) {
  .marketing .wrap, .marketing header.top .wrap { padding: 0 var(--gutter-narrow); }
}
@media (prefers-reduced-motion: reduce) { .marketing *, .marketing *::before, .marketing *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }