/*
marketing-patterns.css -- components specific to the public marketing
tier (Department 4, Wave 3). Additive: a new sibling file, not a
modification of the existing patterns.css (which the staff-portal
design system already relies on) -- avoids any risk of this
department's work touching a file another department's in-flight work
also depends on.

Every rule here is built from tokens.css custom properties, never a
hardcoded color/space value -- matches this design system's own
established discipline.
*/

/* ---------- Header ---------- */
.rx-marketing__header {
  background: var(--rx-color-surface);
  border-bottom: 1px solid var(--rx-color-border);
}

/* Wave 42 Track E -- anchor jumps must clear the sticky header.
   marketing_base.html's header is `position: sticky; top: 0`, and nothing
   in the Design 2.0 stack set scroll-padding/scroll-margin, so the browser
   scrolled every in-page anchor target to y=0 -- i.e. underneath the bar.

   Measured live on /terms, the one page in this family with in-page
   anchors: clicking its table-of-contents link for "Safety and Conduct"
   put that <h2> at top=0 with the header's bottom edge at 75px, so the
   heading the visitor clicked was 100% hidden and the page appeared to
   have jumped to the middle of the previous section. The same jump also
   put 75px of <main> behind the header for anyone using the "Skip to main
   content" link on all five pages, though there the hero's own padding
   meant nothing important was covered.

   Track F already established this exact behaviour for the legacy shell
   (`[id] { scroll-margin-top: calc(var(--rx-header-height) + 8px) }`,
   legacy-shell.css). This is the Design 2.0 shell's equivalent, so an
   anchor jump now behaves the same way on both halves of the site.

   scroll-padding-top on the scroll container rather than scroll-margin-top
   on `[id]`: one declaration covers every current and future anchor,
   including the skip link, and it is inert unless something actually
   scrolls to a fragment.

   The middle band is not arbitrary. The header is 75-77px tall at every
   width EXCEPT 641-773px, where the nav wraps onto a second row and the
   header becomes 128px (measured at 1px resolution: 773px wraps, 774px
   does not). That wrap is a real pre-existing layout defect -- it is
   flagged in docs/program/wave42-trackE-report.md and deliberately NOT
   fixed here, because the breakpoint that causes it is a documented
   Wave 6 decision and changing it would alter the homepage's navigation
   behaviour. Until it is fixed, an anchor jump inside that band has to
   clear 128px, so the value below is measured against today's reality
   rather than the height the header ought to be. */
:root {
  scroll-padding-top: 88px;
}
@media (min-width: 641px) and (max-width: 773px) {
  :root { scroll-padding-top: 140px; }
}
.rx-marketing__header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--rx-space-4) var(--rx-space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rx-space-4);
}
.rx-marketing__brand {
  display: flex;
  align-items: center;
  gap: var(--rx-space-2);
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-xl);
  color: var(--rx-color-text);
  text-decoration: none;
}
.rx-marketing__brand img { display: block; }
.rx-nav-item--phone {
  display: inline-flex;
  align-items: center;
  gap: var(--rx-space-2);
  background: var(--rx-color-brand);
  color: var(--rx-color-ink) !important;
  border-radius: var(--rx-radius-full);
  padding: var(--rx-space-2) var(--rx-space-4);
  font-weight: 600;
}
.rx-nav-item--phone:hover { background: var(--rx-color-brand-strong); color: var(--rx-color-white) !important; }

/* Mobile nav toggle -- fixed Wave 6 (marketing-v2-readiness.md's own
   top-priority finding: nav previously just disappeared below 640px
   with no replacement). Hidden on desktop by default; only the
   max-width query below makes it visible. */
.rx-marketing__nav-toggle {
  display: none;
  background: none;
  border: none;
  padding: var(--rx-space-2);
  color: var(--rx-color-text);
  cursor: pointer;
  border-radius: var(--rx-radius-sm);
}
.rx-marketing__nav-toggle:focus-visible {
  outline: 2px solid var(--rx-color-focus-ring, var(--rx-color-brand-strong));
  outline-offset: 2px;
}

/* ---------- Hero (homepage-specific; sub-pages use rx-marketing__page-header instead) ---------- */
/* Wave 37 Track A: real hero photography added -- a genuine, identifiable
   Bangalore skyline shot (UB City Tower + Cubbon Park-area greenery),
   found already sitting unused in static/img/slider/. Two other same-
   directory candidates were rejected after actually viewing them, not
   assumed from filename: ridexpress_background.webp turned out to be a
   Kolkata scene (yellow Ambassador taxi, Victoria Memorial), and
   banga.jpg could not be independently confirmed as Bangalore -- using
   either would risk misrepresenting the business's actual city, worse
   than no image at all. The rgba values below are the exact same
   --rx-color-dark-surface/-2 tokens with alpha added (not independently
   invented colors) -- the gradient overlay exists purely so hero text
   stays legible over the photo at the same contrast this section always
   had; the tokens themselves are already fixed/non-theme-flipping (see
   marketing-patterns.css's own dark-mode-safety notes elsewhere), so
   this hero still renders identically in light and dark mode. */
.rx-marketing__hero {
  background: linear-gradient(180deg, rgba(28,43,57,0.90) 0%, rgba(20,33,44,0.95) 100%),
              url('../img/slider/ub-city.webp');
  background-size: cover;
  background-position: center;
  color: var(--rx-color-text-on-dark);
  padding: var(--rx-space-16) var(--rx-space-6);
}
.rx-marketing__hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rx-space-10);
}
/* 900px is intentionally NOT a --rx-bp-* token (nearest are --rx-bp-md
   768px / --rx-bp-lg 1024px) -- content-driven, not an oversight: it's
   the narrowest width at which the two-column hero grid (heading+sub
   next to the booking widget) has room to sit side-by-side without
   cramping either column. Flagged as a non-token breakpoint by Wave 29
   and re-verified by Wave 33 Track E; left as-is both times rather than
   snapped to the nearest token without visually confirming no layout
   shift results. Wave 33 Track E re-attempted a live check (dev server +
   browser) and confirmed local Postgres auth is unavailable in this
   sandbox (matches CLAUDE.md's own noted caveat), so a rendered
   before/after comparison still isn't possible here either. Revisit only
   with real visual QA in an environment where the app actually runs. */
@media (min-width: 900px) {
  .rx-marketing__hero-inner { grid-template-columns: 1fr 1fr; align-items: start; }
}
.rx-marketing__hero-heading {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-2xl);
  line-height: 1.15;
  margin: 0 0 var(--rx-space-4);
  color: var(--rx-color-text-on-dark);
}
.rx-marketing__hero-sub {
  color: var(--rx-color-text-on-dark-muted);
  font-size: var(--rx-text-lg);
  max-width: 46ch;
}
.rx-marketing__trust-row {
  display: flex;
  gap: var(--rx-space-6);
  margin-top: var(--rx-space-6);
  flex-wrap: wrap;
}
.rx-marketing__trust-item {
  font-size: var(--rx-text-sm);
  color: var(--rx-color-text-on-dark-muted);
  display: flex;
  align-items: center;
  gap: var(--rx-space-2);
}

/* A lightweight page-level header for non-homepage marketing pages
   (airport/outstation/services) -- no tabbed booking widget of their
   own, just a clear statement of what/where + one CTA into the real
   booking flow, per marketing-ui-wave3.md's component definition. */
.rx-marketing__page-header {
  background: var(--rx-color-surface-alt);
  padding: var(--rx-space-12) var(--rx-space-6);
  text-align: center;
}
.rx-marketing__page-header h1 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-2xl);
  color: var(--rx-color-text);
  margin: 0 0 var(--rx-space-3);
}
.rx-marketing__page-header p {
  color: var(--rx-color-text-muted);
  max-width: 60ch;
  margin: 0 auto var(--rx-space-6);
}
/* Wave 41 Track E: above-the-fold entrance for sub-pages (About/Contact/
   FAQ/Terms/etc). The homepage's own hero already has an on-load
   fade+rise (.rx-marketing__hero-inner > *, rx-hero-rise keyframe,
   below) -- .rx-marketing__page-header is the exact same "first thing a
   visitor sees" role for every non-homepage marketing page, but had zero
   entrance treatment (confirmed by reading this file before this pass).
   Reuses the identical keyframe rather than inventing a second one; the
   reduced-motion opt-out below is added to the SAME shared media query
   the hero already uses, not a duplicate block. Purpose: signal "page
   ready" and draw the eye to the H1/breadcrumb on load, exactly what the
   hero's own entrance already does one tier up. */
.rx-marketing__page-header > * {
  animation: rx-hero-rise 500ms var(--rx-ease-decelerate, var(--rx-ease-standard)) both;
}
.rx-marketing__page-header > *:nth-child(2) { animation-delay: 80ms; }
.rx-marketing__page-header > *:nth-child(3) { animation-delay: 140ms; }

/* ---------- Page-level CTA (the exact gap found in airporttaxi.html) ---------- */
.rx-marketing__cta {
  /* Wave 6 fix: this button and the booking flow's .rx-btn--primary are
     the two primary-action buttons a customer sees in one session
     (marketing page -> booking flow), and previously rendered at
     visibly different sizes (12px/24px vs .rx-btn's 11px/20px padding)
     purely because one used tokens and the other hardcoded close-but-
     not-identical values. Aligned to .rx-btn's exact padding/font-size
     so both read as the same button family, not two different ones. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rx-space-2);
  background: var(--rx-color-brand);
  color: var(--rx-color-ink);
  font-family: var(--rx-font-body);
  font-weight: var(--rx-weight-semibold);
  font-size: var(--rx-text-sm);
  line-height: 1;
  padding: 11px 20px;
  border-radius: var(--rx-radius-md);
  border: 1px solid transparent;
  text-decoration: none;
  box-shadow: var(--rx-shadow-sm);
}
.rx-marketing__cta:hover { background: var(--rx-color-brand-strong); color: var(--rx-color-white); }
/* Wave 29 Track A fix: this button visually mirrors .rx-btn (see the Wave
   6 comment above) but was never added to components.css's shared
   :focus-visible selector list, so it had no visible keyboard-focus
   indicator at all -- a real, silent gap on the single most-clicked
   element on every marketing page. Uses the same --rx-color-focus-ring
   token every other interactive component in this system uses, defined
   here (not in components.css) since marketing-patterns.css is this
   department's own additive file. */
.rx-marketing__cta:focus-visible {
  outline: 2px solid var(--rx-color-focus-ring, var(--rx-color-brand-strong));
  outline-offset: 2px;
}

/* ---------- Service-explanation block ---------- */
.rx-marketing__section {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--rx-space-12) var(--rx-space-6);
}
.rx-marketing__section h2 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-xl);
  color: var(--rx-color-text);
  margin: 0 0 var(--rx-space-4);
}
.rx-marketing__section p {
  color: var(--rx-color-text);
  max-width: 70ch;
}
/* Wave 37 Track A reset: replaces the repeated inline
   style="background:var(--rx-color-surface-elevated)" that had
   crept in section-by-section (flagged in
   wave37-marketing-design-review.md SS2 as a real, if minor,
   consistency gap) with real modifier classes. */
.rx-marketing__section--alt { background: var(--rx-color-surface-elevated); }
.rx-marketing__section--dark {
  background: var(--rx-color-ink);
  border-radius: var(--rx-radius-lg);
  margin: var(--rx-space-8) auto;
  max-width: 1100px;
  text-align: center;
}
.rx-marketing__section--dark h2,
.rx-marketing__section--dark h3 { color: var(--rx-color-text-on-dark); }
.rx-marketing__section--dark p { color: var(--rx-color-text-on-dark-muted); margin-left: auto; margin-right: auto; }

/* ---------- Service cards ---------- */
.rx-marketing__service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--rx-space-6);
  margin-top: var(--rx-space-8);
}
.rx-marketing__service-card {
  background: var(--rx-color-surface);
  border: 1px solid var(--rx-color-border);
  border-radius: var(--rx-radius-lg);
  padding: var(--rx-space-6);
  transition: border-color var(--rx-motion-fast) var(--rx-ease-standard),
              box-shadow var(--rx-motion-fast) var(--rx-ease-standard),
              transform var(--rx-motion-fast) var(--rx-ease-standard);
}
/* Wave 37 Track A: this card had zero hover feedback (confirmed by a
   full read of this file before this fix) -- every other interactive
   card in this system (.rx-route-card, patterns.css) already lifts on
   hover; this one didn't, making it read as static/inert. Same
   treatment, same tokens, no new motion invented. */
.rx-marketing__service-card:hover {
  border-color: var(--rx-color-border-strong);
  box-shadow: var(--rx-shadow-md);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .rx-marketing__service-card { transition: none; }
  .rx-marketing__service-card:hover { transform: none; }
}
.rx-marketing__service-card h3 {
  font-size: var(--rx-text-lg);
  color: var(--rx-color-text);
  margin: 0 0 var(--rx-space-2);
}
.rx-marketing__service-card p { color: var(--rx-color-text-muted); font-size: var(--rx-text-sm); margin: 0; }

/* ---------- FAQ accordion ---------- */
.rx-marketing__faq { max-width: 800px; margin: 0 auto; padding: var(--rx-space-12) var(--rx-space-6); }
.rx-marketing__faq h2 { font-family: var(--rx-font-display); font-size: var(--rx-text-xl); color: var(--rx-color-text); }
.rx-marketing__faq-item {
  border-bottom: 1px solid var(--rx-color-border);
  padding: var(--rx-space-4) 0;
}
/* Wave 42 Track E: `display: flex` (was the browser default `list-item`)
   so the open/closed chevron below can sit at the end of the row. This
   also removes the native marker on its own, which is why the two
   marker-suppressing declarations below are now belt-and-braces rather
   than load-bearing -- kept because Safari/Firefox reach the marker
   through different selectors and dropping either would be an untested
   change to a control on three live pages. */
.rx-marketing__faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--rx-color-text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rx-space-4);
}
.rx-marketing__faq-item summary::-webkit-details-marker { display: none; }

/* Wave 42 Track E -- open/closed affordance.
   Found by rendering /faq and /contact side by side with a Track B page:
   this accordion suppressed the native disclosure marker and replaced it
   with NOTHING. Measured live on /faq: no ::before, no ::after, no marker
   content, no svg inside <summary> -- the only difference between an open
   and a closed row was the summary's text COLOUR. That is a WCAG 1.4.1
   (Use of Color) failure, and it also left the rows with no affordance
   saying they were expandable at all.

   Track A hit the same problem building _journey_faq.html and solved it
   with a rotating chevron (.rx-journey-faq__chevron, journey-patterns.css)
   -- now live on ~8,804 Track B pages. This adopts that same convention
   rather than inventing a second one, but deliberately stops there: the
   journey component's bordered-card/2-column treatment is right for a
   4-question route FAQ and wrong for these pages' 15-question long-form
   list, so only the affordance is cross-pollinated, not the layout.

   A CSS border-corner chevron rather than an <svg>: this fix has to reach
   45 existing <summary> elements across three templates, and a pure
   stylesheet change touches no page markup at all. */
.rx-marketing__faq-item summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--rx-motion-fast) var(--rx-ease-standard);
}
.rx-marketing__faq-item[open] summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
@media (prefers-reduced-motion: reduce) {
  .rx-marketing__faq-item summary::after { transition: none; }
}

/* Wave 42 Track E: --rx-color-accent-strong, NOT --rx-color-brand-strong.
   ---------------------------------------------------------------------
   THIS APPLIES TO EVERY brand-strong -> accent-strong SWAP IN THIS FILE.
   tokens.css documents --rx-color-brand-strong (#7A5F09) as a FIXED
   "text-on-light" value; it is never redefined for dark mode. Every rule
   in this file that used it as a TEXT colour therefore kept painting dark
   gold onto the dark surface once the theme flipped. Measured live on all
   four informational pages with a WCAG relative-luminance calculation,
   transitions disabled: 2.70:1 on --rx-color-surface and 2.39:1 on
   --rx-color-surface-alt, against AA's 4.5:1 for normal-size text.

   --rx-color-accent-strong resolves to var(--rx-color-brand-strong) on
   :root and #7A5F09 under [data-theme="light"] -- i.e. LIGHT MODE IS
   BYTE-IDENTICAL, this is a dark-mode-only correction -- and to the
   refined gold #C9A227 in both dark blocks.

   Same fix, same token, same reasoning as three existing precedents:
   marketing_terms.html (Wave 41 Track F), destination-patterns.css
   (Wave 42 Track C) and blog-patterns.css (Wave 42 Track D). Track C's
   report SS8.6 raised this file specifically as the one remaining
   unowned instance.

   NOT swapped, deliberately: .rx-nav-item--phone:hover and
   .rx-marketing__cta:hover (brand-strong is a BACKGROUND there, under
   white text), .rx-marketing__step-index (brand-strong on
   --rx-color-brand-soft, a pale gold that does not invert -- so the fixed
   dark gold is the correct pairing, exactly the case Track A used
   --rx-color-cta-text for), and every
   `outline: ... var(--rx-color-focus-ring, var(--rx-color-brand-strong))`
   fallback, which never resolves because focus-ring is always defined. */
.rx-marketing__faq-item[open] summary { color: var(--rx-color-accent-strong); }
/* A real keyboard-operable disclosure widget (native <summary> is in the
   Tab order) with no focus-visible treatment defined anywhere -- browsers
   vary on the default outline for a <summary> element, several suppress
   it entirely once list-style is touched. Matches this file's own
   focus-ring convention (.rx-marketing__nav-toggle, above). */
.rx-marketing__faq-item summary:focus-visible {
  outline: 2px solid var(--rx-color-focus-ring, var(--rx-color-brand-strong));
  outline-offset: 2px;
  border-radius: var(--rx-radius-sm);
}
.rx-marketing__faq-item p { color: var(--rx-color-text-muted); margin: var(--rx-space-2) 0 0; }

/* ---------- Footer ---------- */
.rx-marketing__footer { background: var(--rx-color-dark-surface); color: var(--rx-color-text-on-dark); }
.rx-marketing__footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--rx-space-12) var(--rx-space-6);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--rx-space-8);
}
.rx-marketing__footer-inner a { color: var(--rx-color-text-on-dark-muted); text-decoration: none; }
.rx-marketing__footer-inner a:hover { color: var(--rx-color-white); }
/* Left to the browser default otherwise -- on this dark-navy background
   that default outline is low-contrast/inconsistent across browsers.
   --rx-color-focus-ring is theme-swapped (tuned per active page theme),
   but this footer is a fixed dark surface regardless of page theme (same
   reasoning as --rx-color-dark-surface itself, used unconditionally a
   few lines up) -- so --rx-color-brand is used instead, the one brand
   token that never changes across themes. tokens.css's dark-theme
   verification for this exact value against this exact surface
   (#1C2B39, "== existing --footer-bg") measured 5.97:1, clearing the
   3:1 WCAG 1.4.11 floor for a focus indicator regardless of page theme. */
.rx-marketing__footer-inner a:focus-visible {
  outline: 2px solid var(--rx-color-brand);
  outline-offset: 2px;
  color: var(--rx-color-white);
}
.rx-marketing__brand--footer { color: var(--rx-color-white); }
.rx-marketing__footer-legal {
  text-align: center;
  color: var(--rx-color-text-on-dark-muted);
  font-size: var(--rx-text-xs);
  padding: var(--rx-space-4) 0 var(--rx-space-8);
  margin: 0;
}

/* ---------- WhatsApp float ---------- */
.rx-marketing__whatsapp {
  position: fixed;
  bottom: var(--rx-space-6);
  right: var(--rx-space-6);
  width: 56px;
  height: 56px;
  border-radius: var(--rx-radius-full);
  background: var(--rx-color-success);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--rx-shadow-md);
  z-index: var(--rx-z-overlay);
  transition: background-color var(--rx-motion-fast) var(--rx-ease-standard),
              box-shadow var(--rx-motion-fast) var(--rx-ease-standard);
}
/* A real, persistent, always-visible support CTA (present on every
   marketing page) had zero hover/focus feedback -- it looked identical
   whether interactive or not. Darkens the same way every other success-
   colored control in this system does (no new color introduced). */
.rx-marketing__whatsapp:hover { background: var(--rx-color-on-success-bg); }
.rx-marketing__whatsapp:focus-visible {
  outline: 2px solid var(--rx-color-focus-ring, var(--rx-color-brand-strong));
  outline-offset: 2px;
}

/* 640px is intentionally NOT a --rx-bp-* token (nearest is --rx-bp-sm
   480px) -- it's the exact viewport width from the real Wave 6 outage
   this fixes (nav.__nav-toggle's own comment above), kept as the literal
   reproduction width rather than snapped to a token value that wasn't
   independently verified against that regression. Flagged as a
   non-token breakpoint by Wave 29 and re-verified by Wave 33 Track E;
   see the 900px hero-grid breakpoint above for the fuller reasoning on
   why neither was changed (no live-rendered environment available to
   confirm no layout shift). */
@media (max-width: 640px) {
  .rx-marketing__hero-heading { font-size: var(--rx-text-xl); }

  /* Mobile nav -- fixed Wave 6. Previously: `nav { display: none; }`
     with no replacement, hiding every service link and the phone-CTA
     entirely below 640px. Now: a real toggle button reveals a full-
     width dropdown panel. No-JS fallback: the nav simply stays closed
     (same net visibility as before the fix, never worse) rather than
     relying on JS to avoid a broken state. */
  .rx-marketing__nav-toggle { display: block; }
  .rx-marketing__nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--rx-color-surface);
    border-bottom: 1px solid var(--rx-color-border);
    box-shadow: var(--rx-shadow-md);
    padding: var(--rx-space-2) var(--rx-space-4) var(--rx-space-4);
    /* Wave 41 Track E: was a hard display:none/flex swap driven by the
       .is-open class (Alpine, marketing_base.html) with zero transition
       -- the toggle button already communicates state via aria-expanded,
       but the panel itself popped/vanished instantly, no visual
       continuity between open and closed. opacity+transform give the
       open/close a real, brief state transition; visibility is delayed
       on close (transition-delay) and immediate on open so a closed
       panel's links stay out of the tab order and unclickable the whole
       time they're invisible -- same accessibility contract display:none
       gave before. No-JS fallback unchanged: without Alpine, .is-open is
       never added, so the panel sits at this closed, non-interactive
       state permanently -- never worse than the old display:none. */
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--rx-motion-fast) var(--rx-ease-standard),
                transform var(--rx-motion-fast) var(--rx-ease-standard),
                visibility 0s linear var(--rx-motion-fast);
  }
  .rx-marketing__nav.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
    pointer-events: auto;
    transition: opacity var(--rx-motion-fast) var(--rx-ease-decelerate),
                transform var(--rx-motion-fast) var(--rx-ease-decelerate),
                visibility 0s linear 0s;
  }
  .rx-marketing__nav .rx-nav-item {
    padding: var(--rx-space-3) var(--rx-space-2);
    border-bottom: 1px solid var(--rx-color-border);
  }
  .rx-marketing__nav .rx-nav-item--phone {
    margin-top: var(--rx-space-3);
    justify-content: center;
    border-bottom: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rx-marketing__nav, .rx-marketing__nav.is-open { transition: none; }
}

/* ============================== Pricing strip (Wave 21 D) ==============================
 * Real per-vehicle-type starting price, built from Pricing/Category rows
 * (see website.views.design2_homepage_preview) -- deliberately NOT a
 * named-route sample fare (e.g. "Airport -> Koramangala: X") because
 * Pricing is per-km-by-vehicle-type in this schema, not per-route; a
 * named-route figure would require inventing a distance. See
 * design-to-engineering-map.md #2 and design-principles.md #5.
 */
.rx-marketing__pricing-strip {
  background: var(--rx-color-surface);
  border-bottom: 1px solid var(--rx-color-border);
  border-top: 1px solid var(--rx-color-border);
}
.rx-marketing__pricing-strip-inner {
  display: flex;
  align-items: center;
  gap: var(--rx-space-6);
  padding: var(--rx-space-6) var(--rx-space-6);
  max-width: 1180px;
  margin: 0 auto;
  overflow-x: auto;
}
.rx-marketing__pricing-label {
  font-weight: var(--rx-weight-semibold);
  color: var(--rx-color-text-muted);
  font-size: var(--rx-text-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.rx-marketing__pricing-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--rx-color-surface-alt);
  border: 1px solid var(--rx-color-border);
  border-radius: var(--rx-radius-md);
  padding: var(--rx-space-2) var(--rx-space-4);
  white-space: nowrap;
  flex-shrink: 0;
}
.rx-marketing__pricing-chip .rx-marketing__pricing-chip-name {
  font-size: var(--rx-text-xs);
  color: var(--rx-color-text-muted);
}
.rx-marketing__pricing-chip .rx-marketing__pricing-chip-price {
  font-weight: var(--rx-weight-bold);
  font-variant-numeric: tabular-nums;
  color: var(--rx-color-text);
}

/* ============================================================
 * Homepage redesign (Wave 37 Track A reset) -- Girish reviewed the
 * first cutover and found it "too empty, too template-like":
 * insufficient content, imagery, motion, visual storytelling. This
 * block is additive to everything above (kept, still used by the
 * P0 service-page prototypes) and adds the vocabulary a genuinely
 * content-rich, photography-led homepage needs: media-topped cards,
 * large photo spotlights, alternating story rows, a static process
 * stepper, and a real hover/motion system. Every rule still reads
 * only design tokens, same discipline as the rest of this file.
 * ============================================================ */

/* ---------- Hero: richer headline, entrance motion ---------- */
/* --rx-text-4xl (48px, tokens.css's own "hero headline" comment) was
   defined but never actually used anywhere in this codebase before
   this pass (grepped) -- the original hero used --rx-text-2xl (28px,
   labeled "page titles" in tokens.css), which read closer to a
   section heading than a hero statement. */
.rx-marketing__hero-heading {
  font-size: var(--rx-text-4xl);
}
@media (max-width: 640px) {
  .rx-marketing__hero-heading { font-size: var(--rx-text-3xl); }
}
.rx-marketing__hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--rx-space-2);
  color: var(--rx-color-brand);
  font-weight: var(--rx-weight-semibold);
  font-size: var(--rx-text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: var(--rx-space-3);
}
.rx-marketing__hero-secondary-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--rx-space-2);
  color: var(--rx-color-text-on-dark);
  font-weight: var(--rx-weight-semibold);
  font-size: var(--rx-text-sm);
  text-decoration: none;
  border-bottom: 1px solid var(--rx-color-text-on-dark-muted);
  padding-bottom: 2px;
  margin-left: var(--rx-space-4);
  transition: border-color var(--rx-motion-fast) var(--rx-ease-standard);
}
.rx-marketing__hero-secondary-cta:hover { border-color: var(--rx-color-text-on-dark); }
.rx-marketing__hero-secondary-cta:focus-visible {
  outline: 2px solid var(--rx-color-focus-ring, var(--rx-color-brand-strong));
  outline-offset: 2px;
}

/* Entrance sequence: fade + rise, staggered across the hero's own
   direct children. Same keyframe shape as patterns.css's
   rx-stagger-in (opacity 0->1, translateY 4px->0) but a slightly
   larger rise (8px) and slower duration befitting a one-time page
   entrance rather than a repeated list-item reveal -- distinct
   keyframe, not a duplicate. */
@keyframes rx-hero-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.rx-marketing__hero-inner > * {
  animation: rx-hero-rise 600ms var(--rx-ease-decelerate, var(--rx-ease-standard)) both;
}
.rx-marketing__hero-inner > *:nth-child(2) { animation-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
  .rx-marketing__hero-inner > *,
  .rx-marketing__page-header > * { animation: none; }
}

/* ---------- Scroll reveal ---------- */
/* IntersectionObserver-driven (marketing_base.html's own script,
   Wave 37 Track A reset) rather than the on-load rx-stagger-item
   utility -- appropriate here because these sections sit well below
   the fold; animating them on page load (before they're even visible)
   would just mean they finish animating before a visitor ever scrolls
   to them. rx-stagger-item stays exactly as it was for above/near-fold
   grids (service cards) where an on-load reveal still makes sense. */
.rx-marketing__reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--rx-ease-decelerate, var(--rx-ease-standard)),
              transform 500ms var(--rx-ease-decelerate, var(--rx-ease-standard));
}
.rx-marketing__reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .rx-marketing__reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Media-topped cards (services, with real photography) ---------- */
.rx-marketing__media-card {
  display: block;
  position: relative;
  border-radius: var(--rx-radius-lg);
  overflow: hidden;
  background: var(--rx-color-surface);
  border: 1px solid var(--rx-color-border);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--rx-motion-fast) var(--rx-ease-standard),
              box-shadow var(--rx-motion-fast) var(--rx-ease-standard),
              transform var(--rx-motion-fast) var(--rx-ease-standard);
}
.rx-marketing__media-card:hover,
.rx-marketing__media-card:focus-visible {
  border-color: var(--rx-color-border-strong);
  box-shadow: var(--rx-shadow-md);
  transform: translateY(-3px);
}
.rx-marketing__media-card:focus-visible {
  outline: 2px solid var(--rx-color-focus-ring, var(--rx-color-brand-strong));
  outline-offset: 2px;
}
.rx-marketing__media-card-figure {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--rx-color-surface-alt);
}
.rx-marketing__media-card-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 500ms var(--rx-ease-standard);
}
.rx-marketing__media-card:hover .rx-marketing__media-card-figure img,
.rx-marketing__media-card:focus-visible .rx-marketing__media-card-figure img {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .rx-marketing__media-card,
  .rx-marketing__media-card-figure img { transition: none; }
  .rx-marketing__media-card:hover,
  .rx-marketing__media-card:focus-visible { transform: none; }
  .rx-marketing__media-card:hover .rx-marketing__media-card-figure img,
  .rx-marketing__media-card:focus-visible .rx-marketing__media-card-figure img { transform: none; }
}
.rx-marketing__media-card-icon {
  position: absolute;
  top: var(--rx-space-4);
  left: var(--rx-space-4);
  width: 40px;
  height: 40px;
  border-radius: var(--rx-radius-md);
  background: var(--rx-color-surface);
  color: var(--rx-color-accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--rx-shadow-sm);
}
/* Wave 41 Track I: optional category-tag overlay for the media-card
   shell -- built for Track B's blog listing grid (an article card is a
   media-card with a category, not a new card type; see the earlier
   audit note against inventing a near-duplicate class for this).
   Positioned opposite media-card-icon (icon sits top-left when a page
   uses one, e.g. the homepage service grid; a blog card uses top-right
   instead) so the two can coexist on the same card without overlapping
   if a future page ever wants both. Reuses .rx-badge directly rather
   than a parallel color system -- pass any .rx-badge modifier
   (rx-badge--brand for a primary category, rx-badge--neutral for a
   secondary tag) as this element's own class list. */
.rx-marketing__media-card-category {
  position: absolute;
  top: var(--rx-space-4);
  right: var(--rx-space-4);
  z-index: 1;
}
/* Byline/date row for a content card -- sits above the title, muted per
   this design system's existing meta-text convention (matches
   .rx-driver-card__meta / .rx-customer-card__meta in patterns.css:
   text-xs, color-text-muted). Not a new visual language, the existing
   one applied to a new card. */
.rx-marketing__media-card-meta {
  display: flex;
  align-items: center;
  gap: var(--rx-space-2);
  font-size: var(--rx-text-xs);
  color: var(--rx-color-text-muted);
  margin: 0 0 var(--rx-space-2);
}
.rx-marketing__media-card-body { padding: var(--rx-space-5) var(--rx-space-5) var(--rx-space-6); }
.rx-marketing__media-card-body h3 {
  font-size: var(--rx-text-lg);
  color: var(--rx-color-text);
  margin: 0 0 var(--rx-space-2);
}
.rx-marketing__media-card-body p {
  color: var(--rx-color-text-muted);
  font-size: var(--rx-text-sm);
  margin: 0 0 var(--rx-space-4);
}
.rx-marketing__media-card-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--rx-space-1);
  /* Wave 42 Track E: see the accent-strong note in the FAQ block above.
     Measured 2.70:1 in dark mode on /about's four service cards. */
  color: var(--rx-color-accent-strong);
  font-weight: var(--rx-weight-semibold);
  font-size: var(--rx-text-sm);
}
.rx-marketing__media-card-cta svg { transition: transform var(--rx-motion-fast) var(--rx-ease-standard); }
.rx-marketing__media-card:hover .rx-marketing__media-card-cta svg,
.rx-marketing__media-card:focus-visible .rx-marketing__media-card-cta svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .rx-marketing__media-card-cta svg { transition: none; }
  .rx-marketing__media-card:hover .rx-marketing__media-card-cta svg,
  .rx-marketing__media-card:focus-visible .rx-marketing__media-card-cta svg { transform: none; }
}

/* ---------- Airport spotlight (large two-column feature) ---------- */
.rx-marketing__spotlight {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--rx-space-16) var(--rx-space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rx-space-10);
  align-items: center;
}
@media (min-width: 900px) {
  .rx-marketing__spotlight { grid-template-columns: 1fr 1fr; }
  .rx-marketing__spotlight--reverse { direction: rtl; }
  .rx-marketing__spotlight--reverse > * { direction: ltr; }
}
.rx-marketing__spotlight-figure {
  border-radius: var(--rx-radius-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  box-shadow: var(--rx-shadow-lg);
}
.rx-marketing__spotlight-figure img { width: 100%; height: 100%; object-fit: cover; }
.rx-marketing__spotlight-eyebrow {
  /* Wave 42 Track E: see the accent-strong note in the FAQ block above. */
  color: var(--rx-color-accent-strong);
  font-weight: var(--rx-weight-semibold);
  font-size: var(--rx-text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--rx-space-2);
}
.rx-marketing__spotlight h2 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-3xl);
  color: var(--rx-color-text);
  margin: 0 0 var(--rx-space-4);
}
.rx-marketing__spotlight p { color: var(--rx-color-text); max-width: 52ch; margin: 0 0 var(--rx-space-6); }
.rx-marketing__spotlight-points {
  list-style: none;
  margin: 0 0 var(--rx-space-6);
  padding: 0;
  display: grid;
  gap: var(--rx-space-3);
}
.rx-marketing__spotlight-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--rx-space-2);
  color: var(--rx-color-text);
  font-size: var(--rx-text-sm);
}
.rx-marketing__spotlight-points svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--rx-color-accent-strong);
}

/* ---------- Vehicle cards ---------- */
.rx-marketing__vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--rx-space-6);
  margin-top: var(--rx-space-8);
}
.rx-marketing__vehicle-card {
  border-radius: var(--rx-radius-lg);
  overflow: hidden;
  background: var(--rx-color-surface);
  border: 1px solid var(--rx-color-border);
  transition: border-color var(--rx-motion-fast) var(--rx-ease-standard),
              box-shadow var(--rx-motion-fast) var(--rx-ease-standard),
              transform var(--rx-motion-fast) var(--rx-ease-standard);
}
.rx-marketing__vehicle-card:hover {
  border-color: var(--rx-color-border-strong);
  box-shadow: var(--rx-shadow-md);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .rx-marketing__vehicle-card { transition: none; }
  .rx-marketing__vehicle-card:hover { transform: none; }
}
.rx-marketing__vehicle-card-figure {
  aspect-ratio: 16 / 10;
  background: var(--rx-color-surface-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--rx-space-4);
}
.rx-marketing__vehicle-card-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 400ms var(--rx-ease-standard);
}
.rx-marketing__vehicle-card:hover .rx-marketing__vehicle-card-figure img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
  .rx-marketing__vehicle-card-figure img { transition: none; }
  .rx-marketing__vehicle-card:hover .rx-marketing__vehicle-card-figure img { transform: none; }
}
.rx-marketing__vehicle-card-body { padding: var(--rx-space-4) var(--rx-space-5) var(--rx-space-5); text-align: center; }
.rx-marketing__vehicle-card-name { font-weight: var(--rx-weight-semibold); color: var(--rx-color-text); margin: 0 0 2px; }
.rx-marketing__vehicle-card-seats { font-size: var(--rx-text-xs); color: var(--rx-color-text-muted); margin: 0 0 var(--rx-space-2); }
.rx-marketing__vehicle-card-price { font-weight: var(--rx-weight-bold); color: var(--rx-color-text); font-variant-numeric: tabular-nums; }
.rx-marketing__vehicle-card-price span { font-weight: var(--rx-weight-regular); color: var(--rx-color-text-muted); font-size: var(--rx-text-xs); }

/* ---------- Destination cards (large photo, gradient label) ---------- */
.rx-marketing__destination-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--rx-space-6);
  margin-top: var(--rx-space-8);
}
.rx-marketing__destination-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--rx-radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--rx-shadow-sm);
  transition: box-shadow var(--rx-motion-fast) var(--rx-ease-standard),
              transform var(--rx-motion-fast) var(--rx-ease-standard);
}
.rx-marketing__destination-card:hover,
.rx-marketing__destination-card:focus-visible {
  box-shadow: var(--rx-shadow-lg);
  transform: translateY(-3px);
}
.rx-marketing__destination-card:focus-visible {
  outline: 2px solid var(--rx-color-focus-ring, var(--rx-color-brand-strong));
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .rx-marketing__destination-card { transition: none; }
  .rx-marketing__destination-card:hover, .rx-marketing__destination-card:focus-visible { transform: none; }
}
.rx-marketing__destination-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--rx-ease-standard);
}
.rx-marketing__destination-card:hover img,
.rx-marketing__destination-card:focus-visible img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .rx-marketing__destination-card img { transition: none; }
  .rx-marketing__destination-card:hover img, .rx-marketing__destination-card:focus-visible img { transform: none; }
}
.rx-marketing__destination-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19,36,53,0) 40%, rgba(19,36,53,0.85) 100%);
}
.rx-marketing__destination-card-label {
  position: absolute;
  left: var(--rx-space-4);
  right: var(--rx-space-4);
  bottom: var(--rx-space-4);
  z-index: 1;
  color: var(--rx-color-text-on-dark);
}
.rx-marketing__destination-card-label strong {
  display: block;
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-lg);
  color: inherit;
}
.rx-marketing__destination-card-label span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--rx-text-xs);
  color: var(--rx-color-text-on-dark-muted);
  margin-top: 2px;
}

/* ---------- Story rows ("Why RideXpress", alternating image+text) ---------- */
.rx-marketing__story-row {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--rx-space-10) var(--rx-space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rx-space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .rx-marketing__story-row { grid-template-columns: 5fr 7fr; }
  .rx-marketing__story-row--reverse { grid-template-columns: 7fr 5fr; }
  .rx-marketing__story-row--reverse .rx-marketing__story-row-figure { order: 2; }
}
.rx-marketing__story-row-figure {
  border-radius: var(--rx-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.rx-marketing__story-row-figure img { width: 100%; height: 100%; object-fit: cover; }
.rx-marketing__story-row h3 {
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-2xl);
  color: var(--rx-color-text);
  margin: 0 0 var(--rx-space-3);
}
.rx-marketing__story-row p { color: var(--rx-color-text); margin: 0; max-width: 50ch; }

/* ---------- How it works (static process stepper) ---------- */
.rx-marketing__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rx-space-6);
  margin-top: var(--rx-space-10);
  counter-reset: rx-step;
}
@media (min-width: 768px) {
  .rx-marketing__steps { grid-template-columns: repeat(4, 1fr); gap: var(--rx-space-4); }
}
.rx-marketing__step {
  position: relative;
  text-align: center;
  padding: 0 var(--rx-space-2);
}
.rx-marketing__step-index {
  counter-increment: rx-step;
  width: 48px;
  height: 48px;
  margin: 0 auto var(--rx-space-3);
  border-radius: var(--rx-radius-full);
  background: var(--rx-color-brand-soft);
  color: var(--rx-color-brand-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rx-font-display);
  font-size: var(--rx-text-lg);
  position: relative;
  z-index: 1;
}
.rx-marketing__step-index::before { content: counter(rx-step); }
/* Connecting line between steps -- desktop only, matches
   patterns.css's own rx-lifecycle-stepper::after convention. */
@media (min-width: 768px) {
  .rx-marketing__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 24px;
    left: calc(50% + 34px);
    right: calc(-50% + 34px);
    height: 1px;
    background: var(--rx-color-border);
  }
}
.rx-marketing__step h3 { font-size: var(--rx-text-base); color: var(--rx-color-text); margin: 0 0 var(--rx-space-1); }
.rx-marketing__step p { font-size: var(--rx-text-sm); color: var(--rx-color-text-muted); margin: 0; }

/* ---------- FAQ: smooth open/close (Wave 37 Track A reset) ---------- */
/* The grid-rows 0fr->1fr technique: animates a native <details> open/
   close smoothly without JS and without the height:auto animation
   limitation (CSS can't transition to/from 'auto' directly). Content
   sits in a 1-cell grid whose row-track animates; overflow:hidden
   clips it mid-transition. Falls back to instant show/hide under
   reduced-motion (grid-template-rows jumps straight to 1fr/0fr). */
.rx-marketing__faq-item p {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--rx-ease-standard);
  margin: 0;
}
.rx-marketing__faq-item p > span { overflow: hidden; display: block; }
.rx-marketing__faq-item[open] p { grid-template-rows: 1fr; margin-top: var(--rx-space-2); }
@media (prefers-reduced-motion: reduce) {
  .rx-marketing__faq-item p { transition: none; }
}

/* ---------- Footer (expanded) ---------- */
.rx-marketing__footer-inner--expanded {
  grid-template-columns: 1.4fr repeat(3, 1fr);
}
/* Wave 41 Track F fix: the 4-column --expanded grid above had no
   narrow-viewport override at all (unlike the base .rx-marketing__footer-inner,
   which safely reflows via auto-fit/minmax). Below the same 640px breakpoint
   this file already uses for the mobile nav toggle, 4 fixed columns
   (1.4fr + 3x1fr) don't fit a ~360-600px phone viewport -- confirmed via
   real rendering: the Contact column was pushed off-screen and the whole
   page gained horizontal scroll. Single column, matching what auto-fit
   would already do here without the modifier. */
@media (max-width: 640px) {
  .rx-marketing__footer-inner--expanded {
    grid-template-columns: 1fr;
  }
}
/* Wave 41 Track F: was a bare h4 (footer-links/marketing_base.html) with no
   h3 anywhere above it in the footer landmark -- a real H2->H4 heading-level
   skip (confirmed via a full document heading-order dump: ...H2,H2,H4,H4,H4
   at end of page), flagged by this pass's accessibility check. Promoted the
   markup to h3; renaming the selector here to match keeps the exact same
   visual style, zero layout change. */
.rx-marketing__footer-inner h3 {
  color: var(--rx-color-white);
  font-size: var(--rx-text-sm);
  font-weight: var(--rx-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--rx-space-3);
}
.rx-marketing__footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--rx-space-2);
}

/* ---------- Newsletter signup (Wave 41 Track I: net-new) ----------
   Genuinely missing before this pass: legacy's real footer
   (templates/website/footer.html) has a working newsletter form
   (POST to the `subscribe` view); Design 2.0's marketing_base.html
   footer had no equivalent component at all -- not a page-specific
   one-off, a reusable pattern any track can drop into a footer or
   section. Single-row input+button, distinct from the multi-field
   .rx-form-section pattern (patterns.css) built for full forms (that
   pattern already covers a longer contact form -- .rx-field +
   .rx-input/.rx-textarea + .rx-btn compose directly, no new CSS
   needed there, see the design-system report for the usage snippet).
   Built for this footer's fixed-dark background specifically (not
   theme-aware surface tokens) -- same reasoning as
   .rx-marketing__footer-inner a:focus-visible just above.
   Markup:
     <form class="rx-marketing__newsletter-form" method="post" action="...">
       {% csrf_token %}
       <label class="rx-sr-only" for="id">Email address</label>
       <input class="rx-marketing__newsletter-input" type="email" name="..." placeholder="Your email" required>
       <button class="rx-btn rx-btn--primary rx-btn--sm" type="submit">Subscribe</button>
     </form>
   Not wired into marketing_base.html's live footer by this pass --
   see the design-system report for why (a working subscription form is
   customer-facing feature parity with legacy, flagged for explicit
   sign-off rather than silently added to every marketing page). */
.rx-marketing__newsletter-form {
  display: flex;
  gap: var(--rx-space-2);
  flex-wrap: wrap;
}
.rx-marketing__newsletter-input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 9px var(--rx-space-3);
  border-radius: var(--rx-radius-md);
  border: 1px solid var(--rx-color-border-strong);
  background: var(--rx-color-dark-surface-2);
  color: var(--rx-color-text-on-dark);
  font-family: var(--rx-font-body);
  font-size: var(--rx-text-sm);
}
.rx-marketing__newsletter-input::placeholder { color: var(--rx-color-text-on-dark-muted); }
.rx-marketing__newsletter-input:focus-visible {
  outline: 2px solid var(--rx-color-brand);
  outline-offset: 1px;
}

/* ---------- Section heading helpers ---------- */
.rx-marketing__section-eyebrow {
  display: block;
  /* Wave 42 Track E: see the accent-strong note in the FAQ block above.
     Measured 2.70:1 (--rx-color-surface) / 2.39:1 (--rx-color-surface-alt)
     in dark mode across /about's four section kickers. */
  color: var(--rx-color-accent-strong);
  font-weight: var(--rx-weight-semibold);
  font-size: var(--rx-text-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 var(--rx-space-2);
}
.rx-marketing__section-head {
  max-width: 640px;
  margin: 0 auto var(--rx-space-2);
  text-align: center;
}
.rx-marketing__section--centered-head h2 { margin-left: auto; margin-right: auto; }

/* ============================================================
 * Wave 41 Track E -- interaction polish (motion audit pass)
 * Two genuine, verified gaps closed below: (1) bare in-content links
 * (FAQ answer prose, Terms' table of contents, Contact's info cards)
 * had no interactive class at all, so no hover/focus feedback --
 * confirmed by grep, every other interactive element in this system
 * already has one; (2) .rx-btn/.rx-marketing__cta had :hover but no
 * :active/press feedback -- real for a tap-driven mobile audience (most
 * marketing-page traffic), since :hover barely fires on touch. Everything
 * here is transform/opacity/color only (no layout-triggering property),
 * and every transform is reduced-motion-guarded.
 * ============================================================ */

/* ---------- Bare in-content links ----------
   Scoped to .rx-marketing__section/.rx-marketing__faq (the two content
   containers that hold prose with inline links: FAQ answers on the
   homepage/Contact/FAQ pages, Terms' table-of-contents, Contact's
   mailto/tel info cards) -- excludes the card/button/nav components that
   already define their own link treatment, so this only ever fills a
   real gap, never overrides an existing one. Matches
   .rx-breadcrumb__link's own established convention (muted->brand-strong
   on hover) rather than inventing a new link language. */
/* Wave 42 Track E: see the accent-strong note in the FAQ block above.
   This rule in particular silently UNDID an earlier accessibility fix.
   Wave 41 Track F (75a7a615) added `.rx-terms-toc a { color:
   var(--rx-color-accent-strong) }` as a page-scoped <style> in
   marketing_terms.html precisely to get the Terms table of contents off
   the fixed dark gold in dark mode. Wave 41 Track E (0d705c28) then added
   THIS rule to this file. Its specificity is (0,5,1) -- one class plus
   four :not() class arguments -- against the page rule's (0,1,1), so it
   wins regardless of source order, and the Terms TOC went straight back
   to 2.70:1. Confirmed live via the CSSOM: both rules matched the
   element, this one supplied the computed colour.

   The page-scoped rule in marketing_terms.html is left in place. It is
   inert while this rule exists, but it is a narrower, correct guarantee
   and removing it would be a silent regression risk if this rule ever
   changes again. */
.rx-marketing__section a:not(.rx-marketing__cta):not(.rx-marketing__media-card):not(.rx-nav-item):not(.rx-btn),
.rx-marketing__faq a {
  color: var(--rx-color-accent-strong);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color var(--rx-motion-fast) var(--rx-ease-standard),
              color var(--rx-motion-fast) var(--rx-ease-standard);
}
.rx-marketing__section a:not(.rx-marketing__cta):not(.rx-marketing__media-card):not(.rx-nav-item):not(.rx-btn):hover,
.rx-marketing__faq a:hover {
  text-decoration-color: currentColor;
}
.rx-marketing__section a:not(.rx-marketing__cta):not(.rx-marketing__media-card):not(.rx-nav-item):not(.rx-btn):focus-visible,
.rx-marketing__faq a:focus-visible {
  outline: 2px solid var(--rx-color-focus-ring, var(--rx-color-brand-strong));
  outline-offset: 2px;
  border-radius: var(--rx-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .rx-marketing__section a, .rx-marketing__faq a { transition: none; }
}

/* ---------- CTA / button press feedback ----------
   .rx-marketing__cta is this file's own component, safe to target
   directly everywhere it's used (also reused as-is by the blog templates
   -- blog-patterns.css loads this file too). .rx-btn is components.css's
   shared primitive, used by the booking flow and every staff portal as
   well as marketing pages -- scoped under body.rx-marketing (only
   marketing_base.html's <body> carries that class) so this stays a
   marketing-surface-only change, not a sitewide components.css edit.
   translateY(0)+scale is a "settle back down" press, not a new lift --
   pairs with the existing hover lift already on .rx-marketing__cta's
   sibling components rather than fighting it. */
.rx-marketing__cta:active,
body.rx-marketing .rx-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
  .rx-marketing__cta:active,
  body.rx-marketing .rx-btn:active:not(:disabled) { transform: none; }
}