/* ===================================================================
   Reduced-motion safety net — applies to every animated property on
   the rentals side. Honours the OS-level setting (System Preferences /
   Settings → Display → Reduce Motion). Without this, the rentals UI
   would inflict 9-second Ken Burns scaling, infinite verification
   pulses, drawer slides, and 820ms floating-bar tucks on visitors who
   have asked the OS to dampen motion. Single rule covers everything
   in this file; specific overrides further down can opt back in
   selectively if a transition is essential to the interaction.
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================================================================
   RENTALS PAGE — LIGHT THEME
   Wrapped in `.rentals-light` so the page can sit inside the
   normally-dark site without leaking. CTA + footer at the bottom keep
   their dark theming for visual rhythm.
   =================================================================== */

.rentals-light {
  background: var(--vf-bg);
  color: var(--vf-ink);
}

/* Headings & body resets within light context */
.rentals-light h1,
.rentals-light h2,
.rentals-light h3,
.rentals-light h4 { color: var(--vf-ink); }
.rentals-light em { color: var(--vf-blue); font-style: italic; font-weight: 500; }

/* Eyebrow override */
.rentals-light .eyebrow {
  color: var(--vf-ink-2);
}
.rentals-light .eyebrow .idx {
  color: var(--vf-blue);
  background: var(--vf-blue-100);
  border-color: rgba(9,94,223,0.15);
}

/* SectionHead title em */
.rentals-light .section-head h2 em { color: var(--vf-blue); }

/* Hero */
.rentals-hero {
  position: relative;
  padding: 160px 0 100px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--vf-bg) 0%, white 100%);
}
.rentals-hero-blob {
  position: absolute;
  width: 1100px; height: 1100px;
  border-radius: 50%;
  /* 80px is enough perceived softness on a 1100px element; the prior
     140px was paying ~3× the GPU cost for an indistinguishable result. */
  filter: blur(80px);
  background: radial-gradient(circle, rgba(9,94,223,0.18) 0%, transparent 65%);
  right: -300px; top: -400px;
  pointer-events: none;
}
.rentals-hero h1 {
  font-size: clamp(64px, 9vw, 140px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-top: 24px;
  text-wrap: balance;
  max-width: 1100px;
  color: var(--vf-ink);
}
.rentals-hero h1 em {
  font-style: italic;
  color: var(--vf-blue);
  font-weight: 500;
}
.rentals-hero .lead {
  font-size: 19px;
  color: var(--vf-ink-2);
  margin-top: 28px;
  max-width: 620px;
  line-height: 1.5;
}
.rentals-hero-stats {
  display: flex; gap: 48px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--vf-line);
  max-width: 600px;
}
.rentals-hero-stats .stat .num {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vf-blue);
  line-height: 1;
}
.rentals-hero-stats .stat .lbl {
  font-size: 12px;
  color: var(--vf-ink-3);
  margin-top: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

/* Slim per-page hero — used on every rentals sub-page (Equipment / FAQs /
   Contact / Open Account). Smaller than the landing hero so the page-
   specific content gets the visual weight. */
.rentals-subhero {
  padding: 140px 0 48px;
  position: relative;
}
.rentals-subhero h1 {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--vf-ink);
  text-wrap: balance;
  max-width: 18ch;
  margin: 12px 0 0;
}
.rentals-subhero h1 em {
  color: var(--vf-blue);
  font-style: italic;
  font-weight: 500;
}
.rentals-subhero .lead {
  margin-top: 20px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--vf-ink-2);
  max-width: 60ch;
}
.rentals-subhero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
}
.rentals-subhero .eyebrow .idx {
  color: var(--vf-blue);
  background: var(--vf-blue-100, rgba(74, 124, 255, 0.16));
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 700;
}
@media (max-width: 760px) {
  .rentals-subhero { padding: 110px 0 32px; }
  .rentals-subhero h1 { font-size: clamp(36px, 9vw, 56px); }
  .rentals-subhero .lead { font-size: 15.5px; }
}

/* Landing cards — four big tap-targets that link out to the sub-pages. */
.rentals-landing-cards {
  padding: 24px 0 96px;
}
.rentals-landing-cards .rl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.rentals-landing-cards .rl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: white;
  border: 1px solid var(--vf-line);
  border-radius: 24px;
  padding: 32px 32px 36px;
  transition: transform 240ms var(--ease-out, ease), border-color 240ms var(--ease-out, ease), box-shadow 240ms var(--ease-out, ease);
}
.rentals-landing-cards .rl-card:hover {
  transform: translateY(-2px);
  border-color: var(--vf-blue);
  box-shadow: 0 12px 32px rgba(10, 15, 26, 0.06);
}
.rentals-landing-cards .rl-card-label {
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vf-ink);
  line-height: 1.05;
}
.rentals-landing-cards .rl-card-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--vf-ink-2);
  max-width: 40ch;
}
.rentals-landing-cards .rl-card-arrow {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--vf-bg, #F7F8FA);
  border: 1px solid var(--vf-line);
  color: var(--vf-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 220ms var(--ease-out, ease), color 220ms var(--ease-out, ease), border-color 220ms var(--ease-out, ease);
}
.rentals-landing-cards .rl-card:hover .rl-card-arrow {
  background: var(--vf-blue);
  border-color: var(--vf-blue);
  color: white;
}
@media (max-width: 760px) {
  .rentals-landing-cards .rl-grid { grid-template-columns: 1fr; }
  .rentals-landing-cards .rl-card { padding: 24px 22px 28px; }
}

/* Reviews — Google reviews surfaced on the rentals home page. Editorial
   header (eyebrow + heading + summary stars) above a 3-up grid of
   clickable review cards, with a "see all on Google" CTA below. Cards
   are <a> elements so the whole tile is clickable. */
.rentals-reviews {
  padding: 120px 0;
  background: white;
  border-top: 1px solid var(--vf-line);
  border-bottom: 1px solid var(--vf-line);
}
.rentals-reviews .rr-head {
  margin-bottom: 56px;
}
.rentals-reviews .rr-head h2 {
  font-size: clamp(40px, 5.2vw, 80px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.0;
  text-wrap: balance;
  margin-top: 14px;
  color: var(--vf-ink);
  max-width: 14ch;
}
.rentals-reviews .rr-head h2 em {
  font-style: italic;
  color: var(--vf-blue);
  font-weight: 500;
}
.rr-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--vf-ink-2);
}
.rr-summary-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--vf-ink);
  font-family: var(--font-display, inherit);
  letter-spacing: -0.01em;
}
.rr-summary-source {
  text-transform: uppercase;
}
.rr-stars-row {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: rgba(10, 15, 26, 0.18);
}
.rr-star.filled { color: #FFB800; }
.rr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}
/* Slot wrapper for each card. Provides a position:relative box so a
   truncated card can switch to position:absolute on hover and grow
   downward without dragging the grid row taller (which would stretch
   the sibling cards). */
.rr-slot {
  position: relative;
  display: flex;
}
.rr-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 28px 32px;
  background: var(--vf-bg, #F7F8FA);
  border: 1px solid var(--vf-line);
  border-radius: 20px;
  width: 100%;
  transition: transform 240ms var(--ease-out, ease), border-color 240ms var(--ease-out, ease), box-shadow 240ms var(--ease-out, ease);
}
.rr-card:hover {
  transform: translateY(-2px);
  border-color: var(--vf-blue);
  box-shadow: 0 12px 32px rgba(10, 15, 26, 0.06);
}
.rr-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--vf-ink-2);
  flex: 1;
  text-wrap: pretty;
  position: relative;
}
/* Long reviews use the `is-truncated` class. Collapsed they fill
   their slot (which is grid-stretched to the tallest sibling).
   `flex: 1` on .rr-text lets the body absorb the slot's extra
   height with the author row pinned to the bottom. `overflow:
   hidden` clips any text that runs past the slot's bottom edge,
   and a fade gradient hints there's more.
   On hover the card *promotes* itself to absolute positioning
   inside its slot, so it can grow taller than the slot without
   pushing the grid row down. Siblings stay exactly where they were. */
/* Long reviews use the `is-truncated` class. The collapsed text
   max-height is set inline from React (measured to match the tallest
   non-truncated sibling's text), so Lucas's visible text equals
   Mark's natural length. On hover the inline max-height bumps up and
   the card grows; we promote the card to position:absolute so the
   grid row stays put and siblings don't stretch. */
.rr-card.is-truncated .rr-text {
  position: relative;
  overflow: hidden;
  /* Collapsed Lucas shows ~6 lines — close to Mark's natural length.
     The animated max-height + soft fade bottom signals "more here". */
  max-height: calc(1.6em * 6);
  transition: max-height 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.rr-card.is-truncated.is-expanded .rr-text {
  max-height: 1200px;
}
.rr-card.is-truncated .rr-text::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2.4em;
  background: linear-gradient(180deg, rgba(247,248,250,0), var(--vf-bg, #F7F8FA) 92%);
  pointer-events: none;
  opacity: 1;
  transition: opacity 500ms ease;
}
/* Both .is-expanded AND .is-collapsing keep the card promoted to
   position: absolute. .is-collapsing is held by the React component
   for ~700ms after un-hover (matches the .rr-text max-height
   transition) so the card stays out of the flex layout while its
   text shrinks back — without it the grid row + sibling slots
   briefly stretch to accommodate the still-tall card, causing a
   visible "jump out". See ReviewCard in components-rentals.jsx for
   the timer that drives is-collapsing. */
.rr-card.is-truncated.is-expanded,
.rr-card.is-truncated.is-collapsing {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 12;
  box-shadow: 0 18px 48px rgba(10, 15, 26, 0.14);
}
.rr-card.is-truncated.is-expanded .rr-text::after { opacity: 0; }
@media (hover: none) {
  .rr-card.is-truncated .rr-text { max-height: none !important; }
  .rr-card.is-truncated .rr-text::after { display: none; }
}
.rr-author-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.rr-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  /* PNGs include a Google-style verified badge that pokes outside the
     circular crop — render the source untouched. */
  object-fit: contain;
}
.rr-author {
  font-size: 13px;
  font-weight: 600;
  color: var(--vf-ink);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.rr-cta {
  margin-top: 36px;
  text-align: center;
}
.rr-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: transparent;
  border: 1px solid var(--vf-line-strong, rgba(10, 15, 26, 0.14));
  border-radius: 999px;
  color: var(--vf-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: all 220ms var(--ease-out, ease);
}
.rr-cta-link:hover {
  background: var(--vf-ink);
  color: white;
  border-color: var(--vf-ink);
}
@media (max-width: 900px) {
  .rentals-reviews { padding: 80px 0; }
  .rr-grid { grid-template-columns: 1fr; }
  .rentals-reviews .rr-head h2 { max-width: 18ch; }
}

/* Studio hours block — used on the rentals contact page next to the
   contact info column. */
.rentals-hours {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--vf-line);
}
.rentals-hours h3 {
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  font-weight: 700;
  margin-bottom: 6px;
}
.rentals-hours-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--vf-ink-3);
  margin: 0 0 14px;
  max-width: 44ch;
}
/* Both hour blocks (staffed hours card + collection/delivery
   logistics card) share the same two-column dl treatment — without
   this the logistics card's <dl> falls back to default browser
   styling and dt/dd stack onto separate lines. */
.rentals-hours dl,
.rentals-logistics-card dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 24px;
  row-gap: 6px;
  margin: 0;
}
.rentals-hours dl > div,
.rentals-logistics-card dl > div {
  display: contents;
}
.rentals-hours dt,
.rentals-logistics-card dt {
  font-size: 14px;
  font-weight: 600;
  color: var(--vf-ink);
}
.rentals-hours dd,
.rentals-logistics-card dd {
  font-size: 14px;
  color: var(--vf-ink-2);
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.rentals-hours-note {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--vf-ink-3);
  max-width: 44ch;
}
/* Asterisk superscript on the "After hours" dt — pairs with the
   formal footnote at the bottom of the section. Brand blue so the
   eye picks up the cross-reference without it screaming. */
.rentals-hours-asterisk {
  color: var(--vf-blue);
  font-weight: 700;
  margin-left: 1px;
}
/* Footnote sits flush with the page container, beneath both the
   hours/logistics column and the contact form. Slightly more muted
   than .rentals-hours-note since it's legal-toned small print, not
   conversational guidance. */
.rentals-hours-footnote {
  margin: 28px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--vf-ink-3);
  max-width: 70ch;
}
.rentals-hours-footnote sup {
  color: var(--vf-blue);
  font-weight: 700;
  margin-right: 4px;
}

/* Rentals contact page — the slim subhero already provides the page-
   level intro, so the .contact section's stock 140px top padding plus
   the meta-block's 48px margin-top stack into a 200px+ dead zone
   between the hero copy and the first contact row. Tighten both. */
.contact.rentals-contact { padding-top: 32px; }
.contact.rentals-contact .meta-block { margin-top: 0; }

/* Enquiry-type toggle — segmented pill control at the top of the
   rentals contact form. Switches the form between a Rental order
   (date/time fields) and a General enquiry (brief-only) layout. */
.kind-toggle {
  display: flex;
  margin: 16px 0 20px;
  padding: 4px;
  gap: 4px;
  background: var(--vf-bg-tint);
  border: 1px solid var(--vf-line);
  border-radius: 999px;
}
.kind-toggle button {
  flex: 1;
  padding: 10px 14px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--vf-ink-3);
  cursor: pointer;
  transition: background 180ms var(--ease-out), color 180ms, box-shadow 180ms;
}
.kind-toggle button:hover { color: var(--vf-ink); }
.kind-toggle button.is-active {
  background: #FFFFFF;
  color: var(--vf-blue);
  box-shadow: 0 1px 2px rgba(9, 15, 26, 0.06), 0 2px 8px -4px rgba(9, 94, 223, 0.18);
}
.kind-toggle button:focus-visible {
  outline: 2px solid var(--vf-blue);
  outline-offset: 2px;
}

/* Schematic map card — sits under Collection & returns. SVG-only so it
   stays light, no iframes or cookie banners. The whole card is one
   tappable link to the Street View vantage outside the main entrance. */
.rentals-map-card {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--vf-line);
}
.rentals-map-card h3 {
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  font-weight: 700;
  margin-bottom: 6px;
}
.rentals-map-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--vf-ink-3);
  margin: 0 0 14px;
  max-width: 44ch;
}
.rentals-map-frame { position: relative; }
.rentals-map-swivel {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--vf-line);
  color: var(--vf-blue);
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 2px rgba(9, 15, 26, 0.05);
  transition: background 180ms var(--ease-out), border-color 180ms, transform 180ms;
}
.rentals-map-swivel:hover {
  background: var(--vf-blue-50);
  border-color: rgba(9, 94, 223, 0.35);
}
.rentals-map-swivel:active { transform: rotate(-60deg); }
.rentals-map-swivel:focus-visible {
  outline: 2px solid var(--vf-blue);
  outline-offset: 2px;
}

.rentals-map-svg-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--vf-line);
  background: #fff;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms, transform 200ms;
}
.rentals-map-svg-link:hover,
.rentals-map-svg-link:focus-visible {
  border-color: rgba(9, 94, 223, 0.35);
  box-shadow: 0 8px 24px -16px rgba(9, 94, 223, 0.35);
  transform: translateY(-2px);
}
.rentals-map-svg-link:focus-visible {
  outline: 2px solid var(--vf-blue);
  outline-offset: 2px;
}
.rentals-map-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}
.rentals-map-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--vf-line);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-blue);
  background: var(--vf-blue-50);
}
.rentals-map-cta svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

@media (max-width: 760px) {
  .rentals-map-card { margin-top: 28px; padding-top: 20px; }
  .rentals-map-cta { font-size: 11px; padding: 11px 14px; }
}

/* Categories grid */
.rentals-categories { padding: 96px 0; background: white; }
.kit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
.kit-card {
  background: var(--vf-bg);
  border: 1px solid var(--vf-line);
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 220ms var(--ease-out), border-color 220ms, box-shadow 220ms;
}
.kit-card:hover {
  transform: translateY(-4px);
  border-color: rgba(9,94,223,0.3);
  box-shadow: 0 24px 48px rgba(10,15,26,0.06);
}
.kit-card.is-featured {
  border-color: rgba(9,94,223,0.3);
  background: linear-gradient(180deg, var(--vf-blue-100) 0%, white 60%);
}
.kit-card-img {
  aspect-ratio: 16/10;
  background-size: cover;
  background-position: center;
  background-color: var(--vf-blue-900);
  position: relative;
}
.kit-card-corner {
  position: absolute;
  left: 16px; top: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: white;
  background: rgba(7,8,12,0.55);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 4px 8px;
  border-radius: 999px;
}
.kit-featured-tag {
  position: absolute;
  right: 16px; top: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: white;
  background: var(--vf-blue);
  padding: 5px 10px;
  border-radius: 999px;
}
.kit-card-body { padding: 22px 22px 26px; flex: 1; display: flex; flex-direction: column; }
.kit-card-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-bottom: 10px;
}
.kit-card-head h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--vf-ink);
}
.kit-card-rate {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--vf-blue);
  white-space: nowrap;
}
.kit-card-body p {
  font-size: 14px;
  color: var(--vf-ink-2);
  line-height: 1.55;
  margin-bottom: 16px;
}
.kit-card-body ul {
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--vf-line);
  margin-top: auto;
}
.kit-card-body ul li {
  font-size: 13px;
  color: var(--vf-ink-2);
  display: flex; align-items: center; gap: 10px;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px dashed var(--vf-line);
}
.kit-card-body ul li:first-child { border-top: none; }
.kit-item-label { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.kit-item-cta { flex: 0 0 auto; }
.kit-item-cta:empty::before {
  content: 'Reserve \\2192';
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(0,0,0,0.45));
  padding: 4px 8px;
  border: 1px solid var(--vf-line);
  border-radius: 999px;
}
.kit-card-body ul li .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--vf-blue);
  flex-shrink: 0;
}

/* Booqable widget frame */
.rentals-shop {
  padding: 96px 0;
  background: var(--vf-bg);
}
.booqable-frame {
  margin-top: 32px;
  background: white;
  border: 1px solid var(--vf-line);
  border-radius: 32px;
  padding: 36px;
  box-shadow: 0 1px 0 rgba(10,15,26,0.04), 0 24px 48px rgba(10,15,26,0.04);
}
.booqable-frame-head {
  display: flex; align-items: center; gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.bf-step { display: flex; align-items: center; gap: 14px; }
.bf-step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--vf-blue);
  background: var(--vf-blue-100);
  border: 1px solid rgba(9,94,223,0.2);
  padding: 6px 10px;
  border-radius: 999px;
}
.bf-step-label {
  font-size: 16px;
  font-weight: 600;
  color: var(--vf-ink);
  letter-spacing: -0.01em;
}
.booqable-datepicker { min-height: 60px; flex: 1; }
.booqable-product-list {
  margin-top: 12px;
  padding: 8px 0;
  min-height: 200px;
}
.booqable-frame-spotlight {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--vf-line);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
}
.bf-spot-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  margin-bottom: 12px;
}
.bf-spot-meta h4 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vf-ink);
  margin-bottom: 12px;
}
.bf-spot-meta p {
  font-size: 15px;
  color: var(--vf-ink-2);
  line-height: 1.55;
  margin-bottom: 18px;
  max-width: 460px;
}
.bf-spot-product {
  background: var(--vf-bg);
  border: 1px solid var(--vf-line);
  border-radius: 20px;
  padding: 20px;
  min-height: 160px;
}
.booqable-fallback {
  margin-top: 24px;
  font-size: 13px;
  color: var(--vf-ink-3);
  text-align: center;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
.booqable-fallback a { color: var(--vf-blue); text-decoration: underline; text-underline-offset: 3px; }

/* Prominent error variant — used when the Booqable script fails to
   load (`bqStatus === 'error'`). Reads as a real alert rather than
   editorial fine-print: framed card, amber accent, mixed-case copy. */
.booqable-fallback.booqable-error {
  margin: 32px auto 0;
  max-width: 640px;
  text-align: left;
  font-family: inherit;
  letter-spacing: normal;
  font-size: 15px;
  line-height: 1.6;
  color: var(--vf-ink);
  background: #FFF8EB;
  border: 1px solid #F4B940;
  border-left: 4px solid #F4B940;
  border-radius: 12px;
  padding: 20px 22px;
}
.booqable-fallback.booqable-error .bf-error-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  margin-bottom: 8px;
}
.booqable-fallback.booqable-error .bf-error-head svg {
  color: #C77F00;
  stroke-width: 2;
}
.booqable-fallback.booqable-error p { margin: 6px 0 0; }
.booqable-fallback.booqable-error a {
  color: var(--vf-blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.booqable-fallback.booqable-error .bf-retry { font-size: 13.5px; color: var(--vf-ink-2); }
.bf-retry-link {
  background: none;
  border: 0;
  padding: 0;
  color: var(--vf-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  font: inherit;
  cursor: pointer;
}
.bf-retry-link:hover { opacity: 0.8; }

/* Per-category iframe panels on the equipment page. Hosted shop fits
   tall — give it real estate so users can scroll inside without
   double-scrollbars. The wrapper inherits `.rentals-shop-full` for the
   full-width band; the iframe fills it. */
.rentals-shop-iframe {
  padding-top: 0;
}
.rentals-shop-iframe iframe {
  width: 100%;
  height: 1400px;
  border: 0;
  display: block;
  background: white;
}
@media (max-width: 760px) {
  .rentals-shop-iframe iframe { height: 1100px; }
}

/* Category tabs — flat row of pills above the Booqable product list. Visual
   echo of the home page's work filter chips, retoned for the light page.
   All 8 panels are mounted at once so the Booqable script picks them up in
   one pass; switching tabs just toggles which panel is `display: block`. */
.rentals-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--vf-line);
}
.rentals-tab {
  background: transparent;
  color: var(--vf-ink-2, rgba(10, 15, 26, 0.7));
  border: 1px solid var(--vf-line-strong, rgba(10, 15, 26, 0.14));
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  font-family: inherit;
  transition: all 200ms;
}
.rentals-tab:hover:not(.active) {
  color: var(--vf-ink);
  border-color: rgba(10, 15, 26, 0.32);
}
.rentals-tab.active {
  background: var(--vf-ink);
  color: white;
  border-color: var(--vf-ink);
}
/* Equipment full-width wrapper — escapes the 1280px container so the
   Booqable product grid uses the full viewport width with edge padding. */
.rentals-shop-full {
  padding: 24px 32px 0;
  margin-top: 24px;
}
@media (max-width: 760px) {
  .rentals-shop-full { padding: 16px 16px 0; }
}

/* Equipment page now embeds the hosted Booqable shop in a near-full-
   screen iframe. The Valley nav stays pinned via position: fixed; we
   reserve room for it with margin-top so the shop's own header isn't
   clipped underneath, then let the iframe fill the rest of the viewport
   so visitors get the real booking flow without leaving valley.film. */
.rentals-shop-embed {
  padding: 0;
  background: var(--vf-cream, #f7f8fa);
}
.rentals-shop-embed iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 76px);
  margin-top: 76px;
  border: 0;
}
/* Below-iframe utility row: "View in new window" link on the left, the
   email/WhatsApp fallback hint on the right. Stacks on narrow screens. */
.rentals-shop-utility {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 10px 24px 14px;
  background: var(--vf-cream, #f7f8fa);
  border-top: 1px solid var(--vf-line);
}
.rentals-shop-pop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--vf-ink);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--vf-line-strong, rgba(10,15,26,0.14));
  transition: background 220ms var(--ease-out, ease), border-color 220ms var(--ease-out, ease), color 220ms var(--ease-out, ease);
}
.rentals-shop-pop:hover {
  background: var(--vf-ink);
  color: white;
  border-color: var(--vf-ink);
}
.rentals-shop-embed .booqable-fallback {
  text-align: right;
  font-size: 12px;
  color: rgba(10, 15, 26, 0.5);
  margin: 0;
  flex: 1 1 320px;
}
@media (max-width: 760px) {
  .rentals-shop-embed iframe {
    height: calc(100vh - 64px);
    margin-top: 64px;
  }
  .rentals-shop-utility { flex-direction: column; align-items: flex-start; padding: 12px 16px 14px; }
  .rentals-shop-embed .booqable-fallback { text-align: left; }
}

/* ===================================================================
   RENTALS LANDING — light-mode additions
   Hero gets a cycling photo behind a cream/white veil so each shot reads
   as soft ambient texture instead of a backdrop demanding attention.
   The shelf section is a stacked layout (headline above, photo strip
   below) rather than the films home's 50/50 split — keeps the rentals
   landing on its own visual rhythm.
   =================================================================== */

/* Photo-cycle hero — two-layer cross-fade. All slides are mounted; only
   the slide with .is-current sits at opacity 1, the rest fade to 0 with
   a long ease so transitions feel gentle, not chopped. */
.rentals-hero-cycle .rentals-hero-photos {
  position: absolute; inset: 0;
  overflow: hidden;
}
.rentals-hero-cycle .rhp-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1400ms ease, transform 9000ms ease-out;
}
.rentals-hero-cycle .rhp-slide.is-current {
  opacity: 0.78;
  transform: scale(1);
}
/* Cream veil — keeps text contrast on the left where the headline sits,
   but the right side stays clearer so the photo reads as a real photo,
   not just texture. Bottom fades all the way to the *next* section's
   colour (vf-bg-tint) over the final 18%, so the hard line where the
   photo would otherwise butt against the next section disappears. */
.rentals-hero-cycle .rentals-hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(247,248,250,0.0) 0%, rgba(247,248,250,0.0) 38%, rgba(239,241,245,0.78) 82%, rgba(239,241,245,1) 100%),
    linear-gradient(90deg, rgba(247,248,250,0.92) 0%, rgba(247,248,250,0.78) 36%, rgba(247,248,250,0.32) 65%, rgba(247,248,250,0.05) 100%);
}
.rentals-hero-cycle .container { position: relative; }

/* Brand strip — light-page marquee that sits between the hero and the
   shelf section. Text-only v1; swap individual spans for `<img>` once
   logo PNGs are available. Motion is driven by a rAF loop in
   RentalsBrandStrip (components-rentals.jsx) — see ClientStrip in
   components-hero.jsx for the matching pattern; both share the same
   base speed and hover-slowdown timings. */
.rentals-brand-strip {
  position: relative;
  background: var(--vf-bg, #F7F8FA);
  border-top: 1px solid var(--vf-line);
  border-bottom: 1px solid var(--vf-line);
  padding: 22px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.rentals-brand-strip .rbs-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.rentals-brand-strip .rbs-set {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: 36px;
}
.rentals-brand-strip .rbs-item {
  font-family: var(--font-display, "Acumin Pro", sans-serif);
  font-size: clamp(16px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--vf-ink);
  padding: 0 18px;
  white-space: nowrap;
  transition: color 200ms;
}
.rentals-brand-strip .rbs-item:hover { color: var(--vf-blue); }
/* Every item (text or logo) wraps an <a href="/rentals/equipment"> so a
   click on any brand jumps straight to the shop. Anchor defaults are
   reset; .rbs-link tightens the box around the img so the click target
   matches the logo's painted area rather than a baseline-aligned line
   box. Pointer cursor is implicit from <a href>. */
.rentals-brand-strip a { text-decoration: none; color: inherit; }
.rentals-brand-strip .rbs-link { display: inline-flex; align-items: center; }
/* Logo variant — set on .rbs-logo when a brand has a PNG in
   assets/vr-logos/. Height drives the rendered size (PNGs are
   transparent, varying widths); the surrounding flexbox centers
   them with the remaining text spans. Tune --rbs-logo-h to push
   towards 80–120px once every brand has a logo and the text
   fallback is gone. */
.rentals-brand-strip { --rbs-logo-h: 44px; }
.rentals-brand-strip .rbs-logo {
  height: var(--rbs-logo-h);
  width: auto;
  padding: 0 22px;
  object-fit: contain;
  opacity: 0.78;
  transition: opacity 200ms;
}
.rentals-brand-strip .rbs-logo:hover { opacity: 1; }
.rentals-brand-strip .rbs-sep {
  color: var(--vf-ink-3, rgba(10,15,26,0.4));
  font-size: 16px;
}
@media (max-width: 760px) {
  .rentals-brand-strip { padding: 16px 0; --rbs-logo-h: 32px; }
  .rentals-brand-strip .rbs-logo { padding: 0 16px; }
}

/* Shelf section — stacked, magazine-style. Headline+copy at the top sit
   on a two-column grid (eyebrow + h2 on the left, copy + CTA on the
   right) for a more editorial feel. Below that, a full-width photo strip
   that breaks out of the container to bleed to the page edges. Sits on
   vf-bg-tint so the boundary with the hero reads as an intentional band
   rather than an accidental seam. */
.rentals-shelf {
  padding: 120px 0 80px;
  background: var(--vf-bg-tint, #EFF1F5);
}
.rentals-shelf-head { margin-bottom: 64px; }
.rentals-shelf-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: end;
  margin-top: 20px;
}
.rentals-shelf-grid > * { min-width: 0; }
.rentals-shelf-grid h2 {
  font-size: clamp(40px, 5.2vw, 80px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--vf-ink);
  text-wrap: balance;
}
.rentals-shelf-grid h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--vf-blue);
}
.rentals-shelf-body p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--vf-ink-2);
  margin-bottom: 16px;
  max-width: 460px;
}
.rentals-shelf-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 14px 22px;
  background: var(--vf-ink);
  color: white;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background 220ms var(--ease-out, ease), transform 220ms var(--ease-out, ease);
}
.rentals-shelf-cta:hover { background: var(--vf-blue); transform: translateY(-1px); }

/* Photo strip — four thumbnails in a row, centred and constrained so the
   shelf section reads as "supporting visuals", not a gallery. Click any
   photo to open the lightbox (see .rentals-lightbox below). */
.rentals-shelf-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 32px;
}
.rss-card {
  margin: 0;
  background: none;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  font-family: inherit;
}
.rss-photo {
  aspect-ratio: 4 / 5;
  background-size: cover;
  background-position: center;
  border-radius: 14px;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 280ms ease;
}
.rss-card:hover .rss-photo,
.rss-card:focus-visible .rss-photo {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 10px 28px rgba(10, 15, 26, 0.12);
}
.rss-card:focus-visible { outline: none; }
.rss-card:focus-visible .rss-photo {
  outline: 2px solid var(--vf-blue);
  outline-offset: 3px;
}
@media (max-width: 1100px) {
  .rentals-shelf-grid { grid-template-columns: 1fr; gap: 28px; }
  .rentals-shelf-strip { grid-template-columns: repeat(4, 1fr); padding: 0 24px; }
}
@media (max-width: 760px) {
  .rentals-shelf { padding: 80px 0 56px; }
  .rentals-shelf-head { margin-bottom: 40px; }
  .rentals-shelf-strip { grid-template-columns: repeat(2, 1fr); padding: 0 16px; gap: 10px; }
  .rss-photo { border-radius: 12px; }
}

/* Lightbox — appears when a shelf thumbnail is clicked. Centered image
   over a dark scrim; click anywhere on the scrim (or Escape) to dismiss.
   Image is `object-fit: contain` so the full frame is always visible. */
.rentals-lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(7, 8, 12, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 4vw;
  cursor: zoom-out;
  animation: rl-fade 200ms ease;
}
@keyframes rl-fade { from { opacity: 0; } to { opacity: 1; } }
.rentals-lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.rentals-lightbox-close {
  position: absolute; top: 24px; right: 24px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  transition: background 200ms ease, border-color 200ms ease;
}
.rentals-lightbox-close:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.32); }

/* Featured camera kits — three-card row of curated complete packages,
   sitting between the shelf section and the reviews. Each card is a full
   link to the Booqable shop's matching collection so visitors can move
   from "browse" → "book" in one click. Manually curated in
   FEATURED_PACKAGES; not auto-generated. */
.rentals-featured {
  padding: 96px 0 80px;
  background: white;
}
.rentals-featured-head { margin-bottom: 48px; }
.rentals-featured-head h2 {
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin-top: 14px;
  color: var(--vf-ink);
  text-wrap: balance;
}
.rentals-featured-head h2 em {
  font-style: italic;
  font-weight: 500;
  color: var(--vf-blue);
}
.rentals-featured-head p {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--vf-ink-2);
  max-width: 620px;
}
.rentals-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 0 32px;
}
.rfp-card {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: var(--vf-bg, #F7F8FA);
  border: 1px solid var(--vf-line);
  text-decoration: none;
  color: inherit;
  transition: transform 280ms var(--ease-out, ease), box-shadow 280ms var(--ease-out, ease), border-color 280ms var(--ease-out, ease);
}
.rfp-card:hover {
  transform: translateY(-3px);
  border-color: var(--vf-blue);
  box-shadow: 0 14px 38px rgba(10, 15, 26, 0.10);
}
.rfp-photo {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #efefef;
}
.rfp-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
  flex: 1;
}
.rfp-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
  text-transform: uppercase;
}
.rfp-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rfp-card h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--vf-ink);
  margin: 0;
  line-height: 1.2;
}
.rfp-price {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--vf-blue);
  white-space: nowrap;
}
.rfp-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--vf-ink-2);
  margin: 0;
  flex: 1;
}
.rfp-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--vf-blue);
  text-transform: uppercase;
  margin-top: 4px;
}
.rentals-featured-foot {
  margin-top: 36px;
  display: flex;
  justify-content: center;
}
.rentals-featured-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--vf-line-strong, rgba(10,15,26,0.14));
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--vf-ink);
  transition: all 220ms var(--ease-out, ease);
}
.rentals-featured-all:hover {
  background: var(--vf-ink);
  color: white;
  border-color: var(--vf-ink);
}
@media (max-width: 1100px) {
  .rentals-featured-grid { grid-template-columns: 1fr 1fr; padding: 0 24px; }
}
@media (max-width: 760px) {
  .rentals-featured { padding: 64px 0 56px; }
  .rentals-featured-head { margin-bottom: 32px; }
  .rentals-featured-grid { grid-template-columns: 1fr; padding: 0 16px; gap: 14px; }
}

/* Featured kits — marquee variant (replaces the 3-card grid since
   May 2026). The strip clips at the container edges with a soft mask
   so cards fade in/out rather than hard-clipping. Track holds 3 sets
   of the catalog for a seamless loop. */
.rentals-featured-marquee .rentals-featured-head { margin-bottom: 36px; }
.rfk-strip {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 32px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.rfk-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.rfk-set {
  display: flex;
  flex-shrink: 0;
  gap: 16px;
  padding-right: 16px;
}
.rfk-card {
  display: block;
  flex-shrink: 0;
  width: 240px;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  background: white;
  border: 1px solid var(--vf-line);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 220ms ease,
              box-shadow 220ms ease;
}
.rfk-card:hover {
  transform: translateY(-3px);
  border-color: var(--vf-blue);
  box-shadow: 0 12px 28px rgba(31, 96, 255, 0.10);
}
.rfk-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #F0F1F4;
  background-repeat: no-repeat;
}
.rfk-meta {
  padding: 12px 14px 14px;
}
.rfk-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vf-ink);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.rfk-price {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--vf-blue);
}
@media (max-width: 760px) {
  .rfk-card { width: 180px; }
  .rfk-set { gap: 10px; padding-right: 10px; }
  .rfk-photo { aspect-ratio: 4 / 3; }
  .rfk-meta { padding: 10px 12px 12px; }
  .rfk-name { font-size: 12.5px; }
}

/* FAQ — controlled accordion (open state lives in JS, not <details>) so
   the reveal can use the same grid-template-rows: 0fr → 1fr pattern as
   the films home services accordion. Animates to the actual content
   height with no max-height clipping or overshoot. */
.rentals-faq { padding: 96px 0 120px; background: white; }
.faq-grid {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--vf-line);
}
.faq-item {
  border-bottom: 1px solid var(--vf-line);
  transition: background 320ms;
}
.faq-item.is-open { background: rgba(74, 124, 255, 0.04); }
.faq-head {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 24px 8px;
  text-align: left;
  font-family: inherit;
  color: inherit;
  transition: background 220ms;
}
.faq-item:hover .faq-head { background: rgba(10,15,26,0.02); }
.faq-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--vf-ink-3);
}
.faq-q {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--vf-ink);
}
.faq-toggle {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--vf-bg);
  border: 1px solid var(--vf-line-strong);
  color: var(--vf-ink);
  display: flex; align-items: center; justify-content: center;
  /* Match the body reveal curve so the +/× rotation lands in sync. */
  transition: background 640ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 640ms cubic-bezier(0.22, 1, 0.36, 1),
              color 640ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color 640ms cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.is-open .faq-toggle {
  background: var(--vf-blue);
  border-color: var(--vf-blue);
  color: white;
  transform: rotate(45deg);
}
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 640ms cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-body > .faq-body-inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity 280ms ease 120ms;
}
.faq-item.is-open .faq-body { grid-template-rows: 1fr; }
.faq-item.is-open .faq-body > .faq-body-inner { opacity: 1; }
.faq-a {
  padding: 0 8px 28px 8px;
  margin-left: 56px;
  font-size: 16px;
  color: var(--vf-ink-2);
  line-height: 1.65;
  max-width: 760px;
}
.faq-link {
  color: var(--vf-blue);
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 200ms;
}
.faq-link:hover { opacity: 0.7; }

/* Rich FAQ content — bullet list and cancellation table styling.
   List is plain (not the default disc) so it reads as a compact set of
   facts rather than a marketing bullet-list. Table is borderless inside
   with a subtle hairline between rows. */
.faq-a > p + p { margin-top: 10px; }
.faq-a .faq-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.faq-a .faq-list li {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--vf-ink-2);
}
.faq-a .faq-table {
  width: 100%;
  max-width: 520px;
  margin: 10px 0 0;
  border-collapse: collapse;
  font-size: 14px;
  color: var(--vf-ink);
}
.faq-a .faq-table th,
.faq-a .faq-table td {
  text-align: left;
  padding: 10px 0;
  border-bottom: 1px solid var(--vf-line);
  vertical-align: top;
}
.faq-a .faq-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  padding-bottom: 6px;
}
.faq-a .faq-table tbody tr:last-child td { border-bottom: 0; }
.faq-a .faq-table td:last-child {
  white-space: nowrap;
  font-weight: 600;
}

@media (max-width: 760px) {
  /* Expand accordion toggle to 44px so it meets the WCAG touch-target minimum */
  .faq-toggle { width: 44px; height: 44px; }
}

/* Open Account — sits between FAQ and footer. Stacked: intro + checklist
   above, embedded Notion application form below in a card. The embed is
   an interim solution — long-term we'll replace it with a native form
   that mirrors the contact-page design and writes to the same Notion
   database via API. */
.rentals-open-account {
  padding: 96px 0 120px;
  background: var(--vf-bg, #F7F8FA);
  border-top: 1px solid var(--vf-line);
}
.rentals-open-account .oa-intro {
  margin-top: 32px;
  max-width: 720px;
}
.rentals-open-account .oa-intro p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--vf-ink-2);
}
.rentals-open-account .oa-intro h3 {
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  font-weight: 700;
  margin: 36px 0 14px;
}
.rentals-open-account .oa-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rentals-open-account .oa-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--vf-ink-2);
}
/* Each line gets its own small Veridyne-blue tile with the relevant
   Icon inside. Reads as "thing you'll bring" — file = documents,
   mail = references, arrow-up-right = link. */
.rentals-open-account .oa-checklist-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--vf-blue-100, rgba(74, 124, 255, 0.16));
  color: var(--vf-blue, #095EDF);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Trust line beneath the welcome checklist — small, grey, calm.
   Puts a human face on the review without overpromising. */
.rentals-open-account .oa-trust-line {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--vf-ink-3);
  line-height: 1.55;
}
/* Honeypot — visually invisible to humans but still in the DOM so
   bots that fill every <input> they crawl will trip the trap.
   Avoids display:none / hidden because some bot kits skip those.
   tabindex=-1 + aria-hidden on the wrapper keep keyboard + screen
   readers away. */
.rentals-open-account .oa-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.rentals-open-account .oa-time {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--vf-ink-3);
}
/* Form embed — full-width band that breaks out of the .container so the
   Notion form fills the viewport edge-to-edge with light side padding.
   Tall enough that the form doesn't scroll inside its own iframe; the
   page itself does the scrolling. */
.rentals-open-account .oa-form-full {
  margin-top: 40px;
  padding: 0 32px;
  background: var(--vf-bg, #F7F8FA);
}
.rentals-open-account .oa-form-iframe {
  display: block;
  width: 100%;
  height: 3500px;
  border: 0;
  background: white;
  border-radius: 16px;
}
.rentals-open-account .oa-alt {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--vf-line);
  font-size: 13.5px;
  color: var(--vf-ink-3);
  line-height: 1.55;
  text-align: left;
}
.rentals-open-account .oa-alt a {
  color: var(--vf-blue);
  font-weight: 600;
}
.rentals-open-account .oa-alt a:hover { opacity: 0.75; }

@media (max-width: 900px) {
  .rentals-open-account { padding: 72px 0 96px; }
  .rentals-open-account .oa-form-full { padding: 0 16px; }
  .rentals-open-account .oa-form-iframe { height: 4000px; }
}

/* ===== Mobile pass for the wizard (≤760px, canonical Valley breakpoint) ===== */
@media (max-width: 760px) {
  /* Page padding cooperatives — give the card more room */
  .rentals-open-account { padding: 56px 0 72px; }
  .rentals-open-account > .container,
  .rentals-open-account .oa-grid {
    padding-left: 16px;
    padding-right: 16px;
  }
  /* Form-card breathes more on mobile, with smaller radius for proportion */
  .rentals-open-account .form-card {
    padding: 22px 18px;
    border-radius: 22px;
  }
  /* Tighter h3 + desc inside the form-card on mobile — the welcome state
     was using a lot of vertical real estate without much payoff. */
  .rentals-open-account .form-card h3 { font-size: 20px; }
  .rentals-open-account .form-card .desc { font-size: 13.5px; margin-bottom: 14px; }

  /* Welcome stats — stack each "num + lbl" as a row with the label aligned
     opposite the number. Drops the hard-to-justify intrinsic min-width that
     was forcing horizontal overflow at narrow widths. Tightened vertical
     padding so the three rows don't sprawl half the viewport. */
  .rentals-open-account .oa-welcome-meta {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 2px 0 12px;
    margin-top: 4px;
  }
  .rentals-open-account .oa-welcome-meta > div:not(.sep) {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--vf-line);
  }
  .rentals-open-account .oa-welcome-meta > div:not(.sep):last-child {
    border-bottom: none;
  }
  .rentals-open-account .oa-welcome-meta .num { font-size: 17px; line-height: 1; }
  .rentals-open-account .oa-welcome-meta .lbl {
    margin-top: 0;
    text-align: right;
    font-size: 9.5px;
    letter-spacing: 0.08em;
  }
  .rentals-open-account .oa-welcome-meta .sep { display: none; }

  /* Privacy paragraph and CTA tighter on mobile */
  .rentals-open-account .oa-priv {
    margin: 14px 0 16px;
    font-size: 12.5px;
  }
  .rentals-open-account .form-card .submit { margin-top: 4px; }
  /* "Already an account holder?" footer line */
  .rentals-open-account .oa-alt {
    margin-top: 18px;
    padding-top: 14px;
    font-size: 12.5px;
  }

  /* Step-indicator tooltips — narrower; right-anchor on the last segment so
     the tooltip doesn't shoot off the screen edge. */
  .rentals-open-account .form-card .step-indicator .dot .dot-tooltip {
    max-width: 240px;
    font-size: 12px;
  }
  .rentals-open-account .form-card .step-indicator .dot:last-child .dot-tooltip {
    left: auto;
    right: 0;
  }

  /* Inline (i) help tooltip — anchor to the right side when the icon is
     near the right edge (which it isn't yet, but defensive). Narrower. */
  .oa-help-pop {
    width: min(260px, calc(100vw - 56px));
  }

  /* File preview — tighter padding, smaller thumb. Keep the remove button
     visible without truncating the filename's tail. */
  .rentals-open-account .oa-file-preview {
    gap: 10px;
    padding: 10px 12px;
  }
  .rentals-open-account .oa-file-thumb { width: 36px; height: 36px; }
  .rentals-open-account .oa-file-name { font-size: 13.5px; }
  .rentals-open-account .oa-file-meta { font-size: 10.5px; }
  .rentals-open-account .oa-file-remove {
    font-size: 12px; padding: 4px 8px;
  }

  /* Drop zone — a touch less padding on mobile */
  .rentals-open-account .oa-file-drop { padding: 18px 14px; }

  /* OaOpenNotice — slightly tighter */
  .oa-open-notice { padding: 12px 14px; }
  .oa-open-text { font-size: 13.5px; }

  /* Hero (rentals-sub-hero already scales via clamp), tighten the gap
     between hero and form section so it doesn't feel disconnected on
     small screens. */
  .rentals-open-account .oa-grid { gap: 28px; }
}

/* Extra-narrow phones */
@media (max-width: 380px) {
  .rentals-open-account .form-card { padding: 20px 14px; }
  .rentals-open-account .oa-welcome-meta .num { font-size: 17px; }
}

/* ===== Open Account wizard (native, replaces iframe) ===== */
.rentals-open-account .oa-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 72px;
  align-items: start;
  margin: 0 auto;
  /* Animate the collapse on "Let's begin": gap closes, max-width tightens,
     intro fades. Browsers that don't support grid-template-columns
     interpolation just snap — but the intro fade still reads as motion. */
  transition: gap 600ms cubic-bezier(0.22, 1, 0.36, 1),
              max-width 600ms cubic-bezier(0.22, 1, 0.36, 1),
              grid-template-columns 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rentals-open-account .oa-grid .oa-intro {
  margin-top: 0;
  opacity: 1;
  /* Intro wipes out from right-to-left rather than sliding sideways, so
     reflow inside the shrinking grid column is masked instead of visible.
     Combined with the opacity fade this reads as the form-card gliding
     over the intro rather than the text scattering away. */
  clip-path: inset(0);
  transition: opacity 240ms ease, clip-path 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Past the welcome step the form-card takes over the full section so the
   applicant stays focused on the active step rather than re-reading the
   sidebar copy. */
.rentals-open-account .oa-grid.is-focused {
  grid-template-columns: 0fr 1fr;
  gap: 0;
  max-width: 720px;
}
.rentals-open-account .oa-grid.is-focused .oa-intro {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  pointer-events: none;
  overflow: hidden;
}
@media (max-width: 900px) {
  .rentals-open-account .oa-grid { grid-template-columns: 1fr; gap: 40px; }
  .rentals-open-account .oa-grid.is-focused { grid-template-columns: 1fr; }
  .rentals-open-account .oa-grid.is-focused .oa-intro { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rentals-open-account .oa-grid,
  .rentals-open-account .oa-grid .oa-intro { transition: none; }
}

/* Welcome panel — three stats inside the form-card */
.rentals-open-account .oa-welcome-meta {
  display: flex; align-items: center; gap: 18px;
  padding: 12px 0 24px;
  margin-top: 8px;
  border-bottom: 1px solid var(--vf-line);
}
.rentals-open-account .oa-welcome-meta > div { flex: 1; }
.rentals-open-account .oa-welcome-meta .num {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.05; color: var(--vf-ink);
}
.rentals-open-account .oa-welcome-meta .lbl {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vf-ink-3); margin-top: 8px; line-height: 1.3;
}
/* The dynamic open-status text ("We're open", "We open in 2 hours",
   "We're closed for the day") is longer than the static "2 mins"
   stat next to it. Drop the number-size in that one cell so the two
   stats stay visually balanced. */
.rentals-open-account .oa-welcome-meta .oa-verify-stat .num {
  font-size: 19px;
  font-weight: 700;
}
.rentals-open-account .oa-welcome-meta .oa-verify-stat.is-open .num {
  color: #1c9d54;
}
.rentals-open-account .oa-welcome-meta .oa-verify-stat.is-closed .num {
  color: var(--vf-ink-2);
}
.rentals-open-account .oa-welcome-meta .sep {
  width: 1px; height: 36px; background: var(--vf-line); flex: 0 0 auto;
}
.rentals-open-account .oa-priv {
  font-size: 13px; color: var(--vf-ink-3); line-height: 1.55;
  margin: 18px 0 20px;
}

/* Pre-fill banner — shown on step 2 when OCR has filled in name/
   address from the uploaded documents. Reminds the applicant to
   double-check rather than tap through blind. */
.rentals-open-account .oa-prefill-banner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 10px 0 18px;
  padding: 12px 14px;
  background: rgba(34, 167, 95, 0.06);
  border: 1px solid rgba(34, 167, 95, 0.22);
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--vf-ink);
}
.rentals-open-account .oa-prefill-banner strong { color: var(--vf-ink); font-weight: 600; }
.rentals-open-account .oa-prefill-banner span { color: var(--vf-ink-3); }
.rentals-open-account .oa-prefill-banner--pending {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  background: rgba(9, 94, 223, 0.05);
  border-color: rgba(9, 94, 223, 0.18);
  color: var(--vf-ink-2);
}

/* Resume prompt — appears on the welcome step if there's saved
   progress from a previous session. EE save & resume. */
.rentals-open-account .oa-resume-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 12px 0 18px;
  padding: 14px 16px;
  background: rgba(9, 94, 223, 0.05);
  border: 1px solid rgba(9, 94, 223, 0.18);
  border-radius: 10px;
}
.rentals-open-account .oa-resume-prompt-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.rentals-open-account .oa-resume-prompt-body strong {
  font-size: 14px;
  color: var(--vf-ink);
}
.rentals-open-account .oa-resume-prompt-body span {
  font-size: 12.5px;
  color: var(--vf-ink-3);
  line-height: 1.45;
}
.rentals-open-account .oa-resume-prompt-actions {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}
.rentals-open-account .oa-resume-yes,
.rentals-open-account .oa-resume-no {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 160ms, border-color 160ms;
}
.rentals-open-account .oa-resume-yes {
  background: var(--vf-blue);
  color: white;
  border-color: var(--vf-blue);
}
.rentals-open-account .oa-resume-yes:hover { opacity: 0.92; }
.rentals-open-account .oa-resume-no {
  background: transparent;
  color: var(--vf-ink-2);
  border-color: var(--vf-line);
}
.rentals-open-account .oa-resume-no:hover { background: rgba(0, 0, 0, 0.04); }
@media (max-width: 540px) {
  .rentals-open-account .oa-resume-prompt {
    flex-direction: column;
    align-items: stretch;
  }
  .rentals-open-account .oa-resume-prompt-actions { justify-content: flex-end; }
}

/* Double-opt-in email verification banner (VERIFICATION.md B + §1).
   Shown above the Submit button on the Review step when /start
   fired the verification email but the applicant hasn't yet clicked
   the link. The submit button is also disabled until the storage
   event from the verify-email landing page flips the state. */
.rentals-open-account .oa-verify-banner {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  margin-bottom: 12px;
  background: rgba(232, 174, 60, 0.10);
  border: 1px solid rgba(232, 174, 60, 0.35);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--vf-ink-2);
}
.rentals-open-account .oa-verify-banner strong { color: rgb(140, 100, 20); font-weight: 700; }
.rentals-open-account .oa-verify-banner code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: rgba(10, 15, 26, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--vf-ink);
}

/* /rentals/account-update — magic-link customer update page. Reuses
   the .rentals-open-account scope for the form-card chrome but
   adds its own pieces for the read-only header + saved-state UI. */
.oa-update-page-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  color: var(--vf-ink-3);
  font-size: 14px;
}
.oa-update-page-error h3 { margin: 0 0 12px; font-size: 18px; }
.oa-update-page-error p  { margin: 0 0 18px; color: var(--vf-ink-2); font-size: 14px; line-height: 1.55; }
.oa-update-page-readonly {
  padding: 14px 16px;
  background: rgba(10, 15, 26, 0.03);
  border: 1px solid rgba(10, 15, 26, 0.06);
  border-radius: 10px;
  margin: 0 0 18px;
  font-size: 14px;
}
.oa-update-page-readonly strong { color: var(--vf-ink); font-weight: 700; }
.oa-update-page-readonly-email {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--vf-ink-3);
  margin-top: 2px;
}
.oa-update-page-readonly-status {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-blue);
  background: rgba(9, 94, 223, 0.10);
  padding: 3px 8px;
  border-radius: 999px;
}
.oa-update-page-form { display: flex; flex-direction: column; gap: 14px; }
.oa-update-page-form h3 { margin: 0; font-size: 18px; }
.oa-update-page-form .desc { margin: 0 0 8px; color: var(--vf-ink-2); font-size: 13px; line-height: 1.55; }
.oa-update-page-form .desc a { color: var(--vf-blue); }
.oa-update-page-field { display: flex; flex-direction: column; gap: 6px; }
.oa-update-page-field span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
}
.oa-update-page-field span em { font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--vf-ink-3); }
.oa-update-page-field input,
.oa-update-page-field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--vf-line);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  color: var(--vf-ink);
  background: white;
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  resize: vertical;
}
.oa-update-page-field input:focus,
.oa-update-page-field textarea:focus {
  border-color: var(--vf-blue);
  box-shadow: 0 0 0 3px rgba(46, 91, 255, 0.10);
}
.oa-update-page-save-error {
  margin: 0;
  padding: 10px 12px;
  background: rgba(196, 54, 54, 0.08);
  border: 1px solid rgba(196, 54, 54, 0.30);
  border-radius: 8px;
  color: #8c2828;
  font-size: 13px;
}
.oa-update-page-saved {
  text-align: center;
  padding: 24px 0;
}
.oa-update-page-saved .check {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--vf-blue);
  color: white;
  display: flex; align-items: center; justify-content: center;
}
.oa-update-page-saved h3 { margin: 0 0 8px; font-size: 22px; }
.oa-update-page-saved p { margin: 0 0 20px; color: var(--vf-ink-2); font-size: 14px; }

/* "Already have an account? Update your details" — secondary action
   on the Open Account welcome step. Collapsed: a small text link
   under the primary CTA. Expanded: a tiny email form that posts to
   the magic-link endpoint (stubbed in Phase 1; live in Phase 2). */
.rentals-open-account .oa-update-stub {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(10, 15, 26, 0.10);
}
.rentals-open-account .oa-update-stub-toggle {
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--vf-ink-3);
  text-align: left;
  transition: color 140ms ease;
}
.rentals-open-account .oa-update-stub-toggle span {
  color: var(--vf-blue);
  font-weight: 600;
}
.rentals-open-account .oa-update-stub-toggle:hover { color: var(--vf-ink); }
.rentals-open-account .oa-update-stub-toggle:hover span { text-decoration: underline; }
.rentals-open-account .oa-update-stub-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rentals-open-account .oa-update-stub-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rentals-open-account .oa-update-stub-form label span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  font-weight: 600;
}
.rentals-open-account .oa-update-stub-form input {
  padding: 11px 14px;
  border: 1px solid var(--vf-line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--vf-ink);
  background: white;
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.rentals-open-account .oa-update-stub-form input:focus {
  border-color: var(--vf-blue);
  box-shadow: 0 0 0 3px rgba(46, 91, 255, 0.10);
}
.rentals-open-account .oa-update-stub-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.rentals-open-account .oa-update-stub-cancel,
.rentals-open-account .oa-update-stub-send {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.rentals-open-account .oa-update-stub-cancel {
  background: transparent;
  color: var(--vf-ink-2);
  border-color: var(--vf-line);
}
.rentals-open-account .oa-update-stub-cancel:hover { background: rgba(0, 0, 0, 0.04); }
.rentals-open-account .oa-update-stub-send {
  background: var(--vf-blue);
  color: white;
  border-color: var(--vf-blue);
}
.rentals-open-account .oa-update-stub-send:hover:not(:disabled) { opacity: 0.92; }
.rentals-open-account .oa-update-stub-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.rentals-open-account .oa-update-stub-sent {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(9, 94, 223, 0.05);
  border: 1px solid rgba(9, 94, 223, 0.18);
  font-size: 13px;
  line-height: 1.5;
  color: var(--vf-ink-2);
}
.rentals-open-account .oa-update-stub-sent strong { color: var(--vf-ink); font-weight: 600; }
.rentals-open-account .oa-update-stub-sent a { color: var(--vf-blue); }

/* Top step indicator — status colours + hover tooltips. The fill gradient
   defaults to brand blue (in-progress / completed), shifts to green when
   the step has passed automated checks, red when it's failed and needs
   resubmission. Hover/focus reveals a small tooltip with the detail. */
.rentals-open-account .form-card .step-indicator { gap: 6px; }
.rentals-open-account .form-card .step-indicator .dot {
  position: relative;
  height: 4px;
  cursor: help;
  /* Expand the hit area vertically without changing the visual height */
}
.rentals-open-account .form-card .step-indicator .dot::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -10px; bottom: -10px;
}
/* Jump-clickable steps get a pointer cursor and a subtle vertical
   nudge on hover to hint at the affordance. Steps the applicant
   hasn't reached yet stay non-clickable. */
.rentals-open-account .form-card .step-indicator .dot.is-jumpable {
  cursor: pointer;
}
.rentals-open-account .form-card .step-indicator .dot.is-jumpable:hover {
  transform: translateY(-1px);
}
.rentals-open-account .form-card .step-indicator .dot.is-passed .fill {
  background: #1c9d54;
}
.rentals-open-account .form-card .step-indicator .dot.is-failed { background: rgba(231, 76, 60, 0.18); }
.rentals-open-account .form-card .step-indicator .dot.is-failed .fill {
  background: #d23a2a;
  transform: scaleX(1) !important;
}
.rentals-open-account .form-card .step-indicator .dot.is-in-progress .fill {
  /* Subtle pulse while files are being processed */
  animation: oa-pulse 1.6s ease-in-out infinite;
}
@keyframes oa-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
/* Prefill-pending — a future step that has background work in flight
   (e.g. OCR on the uploaded documents to pre-fill Your Details). The
   dot itself gets a blue tint + pulses, signalling that we're working
   on something the applicant will see when they reach this step. */
.rentals-open-account .form-card .step-indicator .dot.is-prefill-pending {
  background: rgba(9, 94, 223, 0.35);
  animation: oa-pulse 1.4s ease-in-out infinite;
}
.rentals-open-account .form-card .step-indicator .dot.is-prefill-pending .fill {
  transform: scaleX(0) !important;
}
.rentals-open-account .form-card .step-indicator .dot .dot-tooltip {
  position: absolute;
  top: 18px;
  left: 0;
  width: max-content;
  max-width: 320px;
  padding: 10px 12px;
  background: var(--vf-ink);
  color: white;
  font-size: 12.5px; font-weight: 500; line-height: 1.4;
  letter-spacing: normal; text-transform: none;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 4;
  white-space: normal;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* Section title sits on its own line above the status detail —
   uppercase, brand mono, so the dot's purpose reads first. */
.rentals-open-account .form-card .step-indicator .dot .dot-tooltip-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}
.rentals-open-account .form-card .step-indicator .dot .dot-tooltip-detail {
  font-size: 12.5px;
  font-weight: 500;
  color: white;
  line-height: 1.4;
}
.rentals-open-account .form-card .step-indicator .dot:hover .dot-tooltip,
.rentals-open-account .form-card .step-indicator .dot:focus-visible .dot-tooltip {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.rentals-open-account .form-card .step-indicator .dot:focus-visible {
  outline: 2px solid var(--vf-blue);
  outline-offset: 4px;
  border-radius: 2px;
}
@media (max-width: 540px) {
  .rentals-open-account .form-card .step-indicator .dot .dot-tooltip { max-width: 240px; }
}

/* Photo-ID secondary camera link — quiet text-link below the upload zone
   so upload stays the primary CTA but applicants without a digital ID
   scan can still capture via their phone/webcam. */
.rentals-open-account .oa-secondary-camera-link {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 10px;
  background: none; border: none;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: var(--vf-ink-3);
  padding: 6px 4px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 180ms;
}
.rentals-open-account .oa-secondary-camera-link:hover {
  color: var(--vf-blue);
}
.rentals-open-account .oa-secondary-camera-link svg {
  width: 14px; height: 14px;
}

/* ===== Selfie camera capture ===== */
.oa-selfie-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.oa-camera-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--vf-blue);
  color: white;
  border: none;
  border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all 200ms;
}
.oa-camera-btn:hover {
  background: var(--vf-blue-600);
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px);
}
.oa-camera-btn svg { width: 18px; height: 18px; }
.oa-selfie-upload-link {
  position: relative;
  font-size: 13.5px;
  color: var(--vf-ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.oa-selfie-upload-link input[type="file"] {
  position: absolute; inset: 0;
  opacity: 0; cursor: pointer;
}
.oa-selfie-upload-link:hover { color: var(--vf-blue); }

/* Camera modal — full-viewport overlay with live preview */
.oa-camera-modal {
  position: fixed; inset: 0;
  background: rgba(7, 8, 12, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: oa-fade-in 220ms ease;
}
@keyframes oa-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.oa-camera-modal-inner {
  width: 100%; max-width: 520px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.oa-camera-video {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
  border-radius: 22px;
  object-fit: cover;
  /* Mirror the preview so it feels like a mirror; capture is unmirrored. */
  transform: scaleX(-1);
}
/* Photo-ID capture uses the back camera and should NOT mirror — the
   document needs to read in its actual orientation. */
.oa-camera-video.oa-camera-video--unflipped { transform: none; }
.oa-camera-hint {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin: 0;
}
.oa-camera-actions {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  margin-top: 4px;
}
.oa-camera-cancel {
  justify-self: start;
  background: none; border: none;
  color: white;
  font-family: inherit; font-size: 15px; font-weight: 500;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 180ms;
}
.oa-camera-cancel:hover { background: rgba(255, 255, 255, 0.1); }
.oa-camera-shutter {
  justify-self: center;
  position: relative;
  width: 72px; height: 72px;
  border-radius: 999px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 100ms;
}
.oa-camera-shutter:active { transform: scale(0.94); }
.oa-camera-shutter-ring {
  position: absolute; inset: 0;
  border: 3px solid white;
  border-radius: 999px;
}
.oa-camera-shutter-dot {
  width: 58px; height: 58px;
  background: white;
  border-radius: 999px;
  transition: background 180ms;
}
.oa-camera-shutter:hover .oa-camera-shutter-dot { background: #eee; }
.oa-camera-shutter[disabled],
.oa-camera-shutter[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.42;
}
.oa-camera-shutter[disabled] .oa-camera-shutter-dot {
  background: #888;
}
.oa-camera-actions-spacer { justify-self: end; }

/* Live face-check feedback on the selfie video. A coloured outline
   around the preview gives the user immediate, glanceable status
   while the hint text below explains exactly what to do. Outline
   colour eases in over 400ms — slow enough to feel calm rather
   than reactive, paired with the 3fps detection + 2-frame stability
   gate so state changes don't whip across the screen. */
.oa-camera-video {
  outline: 4px solid transparent;
  outline-offset: -4px;
  transition: outline-color 400ms ease;
}
/* Hint text gets a matching gentle fade. Pure-text changes are
   inherently sharp in HTML, but a transition on opacity at least
   softens the visual edge. */
.oa-camera-hint {
  transition: color 400ms ease;
}
.oa-camera-video--face-loading,
.oa-camera-video--face-searching,
.oa-camera-video--face-framing,
.oa-camera-video--face-features {
  outline-color: rgba(241, 145, 0, 0.85);   /* amber — actionable */
}
.oa-camera-video--face-multiple {
  outline-color: rgba(220, 38, 38, 0.9);    /* red — clear problem */
}
.oa-camera-video--face-ready {
  outline-color: rgba(34, 167, 95, 0.9);    /* green — go */
}
.oa-camera-video--face-unavailable {
  outline-color: rgba(150, 150, 150, 0.45); /* faded — check unavailable */
}

/* 7-second selfie-camera fallback link. Appears below the shutter
   when the live face check has had time to settle but the shutter
   is still disabled — gives the applicant an escape hatch if their
   camera setup or MediaPipe is misbehaving. */
.oa-camera-fallback {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.oa-camera-fallback input[type="file"] {
  display: none;
}
.oa-camera-fallback-link {
  color: white;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.oa-camera-fallback:hover .oa-camera-fallback-link {
  opacity: 0.85;
}

.oa-camera-hint--ready { color: rgba(180, 255, 215, 0.95); }

/* Progressive-disclosure reveal animation for the trade-reference
   first-name field. Appears as the applicant starts typing an email.
   Slides + fades in over 240ms for a calmer transition than the
   default "pop into the layout". */
.rentals-open-account .oa-ref-name-reveal,
.rentals-open-account .oa-billing-reveal {
  animation: oa-ref-name-fade 240ms ease-out both;
}
@keyframes oa-ref-name-fade {
  from { opacity: 0; transform: translateY(-4px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0);    max-height: 200px; }
}

/* Step 3 heads-up notice: small banner reminding the applicant
   that clicking Continue will trigger the selfie capture. Only
   shows when no selfie has been taken yet. */
.rentals-open-account .oa-step3-selfie-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 10px 14px;
  background: rgba(9, 94, 223, 0.06);
  border: 1px solid rgba(9, 94, 223, 0.16);
  border-radius: 10px;
  font-size: 13px;
  color: var(--vf-ink-2);
  line-height: 1.45;
}
.rentals-open-account .oa-step3-selfie-notice svg {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  color: var(--vf-blue);
}

/* Required-field asterisk marker. Sits inline next to the label
   text. Subtle red so it's noticeable without shouting. */
.rentals-open-account .oa-required-mark {
  color: #d23a2a;
  font-weight: 600;
  margin-left: 4px;
}

/* Reference-check badges next to the "Reference 1 / 2" title. Green
   tick for verified, spinner for in-flight. */
.rentals-open-account .oa-ref-check-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 8px;
  vertical-align: middle;
}
.rentals-open-account .oa-ref-check-badge--ok {
  color: #1c9d54;
}
.rentals-open-account .oa-ref-check-badge--checking {
  color: var(--vf-blue);
}

/* Combined proof-of-address upload — single drop zone in the same
   visual style as the Photo ID slot, plus a small status line below.
   Restyled per user request: no dashed-bordered wrapper card, just
   the upload affordance + (optional) tiles + status. */
.rentals-open-account .oa-proof-combined {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rentals-open-account .oa-proof-combined-tile {
  /* Already styled by renderOaFileSlot — just sits as a row in the flex */
}
/* Small status line beneath the proof-of-address drop tile. */
.rentals-open-account .oa-proof-progress {
  font-size: 12.5px;
  color: var(--vf-ink-3);
  margin-top: 2px;
}
.rentals-open-account .oa-proof-progress.is-complete {
  color: #1c9d54;
  font-weight: 600;
}

/* REVIEW STEP — Profile hero (avatar + name) */
.rentals-open-account .oa-review-profile {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px;
  margin: 0 0 20px;
  background: rgba(9, 94, 223, 0.04);
  border: 1px solid rgba(9, 94, 223, 0.14);
  border-radius: 14px;
}
.rentals-open-account .oa-review-avatar {
  flex: 0 0 auto;
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 999px;
  background: var(--vf-blue);
  color: white;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center;
}
.rentals-open-account .oa-review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 999px;
}
/* Small camera-icon button on the bottom-right of the avatar. Click
   reopens the camera modal (or file picker if no camera) so the
   applicant can retake without leaving the Review step. */
.rentals-open-account .oa-review-avatar-retake {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--vf-blue);
  color: white;
  border: 2px solid white;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 120ms, background 160ms;
}
.rentals-open-account .oa-review-avatar-retake svg {
  width: 14px; height: 14px;
}
.rentals-open-account .oa-review-avatar-retake:hover {
  transform: scale(1.08);
  background: #074db5;
}
.rentals-open-account .oa-review-avatar-retake:focus-visible {
  outline: 2px solid rgba(9, 94, 223, 0.5);
  outline-offset: 2px;
}
.rentals-open-account .oa-review-identity {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}
.rentals-open-account .oa-review-firstname {
  font-size: 22px;
  font-weight: 700;
  color: var(--vf-ink);
  line-height: 1.15;
}
.rentals-open-account .oa-review-surname {
  font-size: 18px;
  font-weight: 500;
  color: var(--vf-ink-2);
  line-height: 1.2;
}
.rentals-open-account .oa-review-firstname.is-missing,
.rentals-open-account .oa-review-surname.is-missing {
  color: #d23a2a;
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
}
.rentals-open-account .oa-review-edit--profile {
  position: absolute;
  top: 0;
  right: 0;
}
.rentals-open-account .oa-review-identity-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rentals-open-account .oa-review-identity-edit input {
  font-family: inherit;
  font-size: 15px;
  padding: 8px 12px;
  border: 1px solid var(--vf-line);
  border-radius: 8px;
  background: white;
}
.rentals-open-account .oa-review-done {
  align-self: flex-start;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  border: none;
  background: var(--vf-blue);
  color: white;
  cursor: pointer;
}

/* Review block edit-mode container — wraps field-rows when the
   section flips to editable. Just a wrapper with vertical spacing. */
.rentals-open-account .oa-review-fields {
  padding: 6px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Red "Please add" prompt for missing required values on review */
.rentals-open-account .oa-review .oa-review-block dd.is-missing {
  color: #d23a2a;
  font-style: italic;
  font-weight: 500;
}

/* Billing-address toggle button under the Address row on review.
   Looks like a quiet inline action (no border, just blue underlined
   text) so it doesn't compete with the section's main Edit button. */
.rentals-open-account .oa-review-billing-toggle {
  margin-top: 8px;
  background: none;
  border: none;
  padding: 4px 0;
  color: var(--vf-blue);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rentals-open-account .oa-review-billing-toggle:hover {
  opacity: 0.78;
}
.rentals-open-account .oa-review-billing-toggle.is-on {
  color: var(--vf-ink-3);
}

@media (max-width: 540px) {
  .rentals-open-account .oa-review-profile {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .rentals-open-account .oa-review-identity {
    align-items: center;
    text-align: center;
  }
  .rentals-open-account .oa-review-edit--profile {
    position: static;
    margin-top: 8px;
  }
}

/* Pre-filled summary card on step 3 — lives at the bottom of the
   Your Details step, shows fields that the AI populated from the
   uploaded documents. Default state is collapsed: a glanceable
   summary so the applicant can verify at a glance. Click anywhere
   on the card to expand into the editable fields. */
.rentals-open-account .oa-prefilled {
  margin-top: 20px;
  border-radius: 12px;
  border: 1px solid rgba(34, 167, 95, 0.28);
  background: rgba(34, 167, 95, 0.05);
  overflow: hidden;
}
.rentals-open-account .oa-prefilled-card {
  display: block;
  padding: 14px 18px;
  cursor: pointer;
  transition: background 160ms;
}
.rentals-open-account .oa-prefilled-card:hover {
  background: rgba(34, 167, 95, 0.08);
}
.rentals-open-account .oa-prefilled-card:focus-visible {
  outline: 2px solid rgba(34, 167, 95, 0.5);
  outline-offset: -2px;
}
.rentals-open-account .oa-prefilled-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.rentals-open-account .oa-prefilled-eyebrow {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1c9d54;
}
.rentals-open-account .oa-prefilled-action {
  font-size: 12.5px;
  color: var(--vf-ink-3);
}
.rentals-open-account .oa-prefilled-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rentals-open-account .oa-prefilled-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.45;
}
.rentals-open-account .oa-prefilled-key {
  color: var(--vf-ink-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.rentals-open-account .oa-prefilled-val {
  color: var(--vf-ink);
  font-weight: 500;
}
.rentals-open-account .oa-prefilled.is-expanded {
  background: white;
}
.rentals-open-account .oa-prefilled-fields {
  padding: 14px 18px 18px;
  animation: oa-prefill-expand 220ms ease-out both;
}
.rentals-open-account .oa-prefilled-fields .oa-prefilled-head {
  margin-bottom: 14px;
}
.rentals-open-account .oa-prefilled-collapse {
  background: none;
  border: 1px solid var(--vf-line);
  color: var(--vf-ink-2);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms;
}
.rentals-open-account .oa-prefilled-collapse:hover {
  background: rgba(0, 0, 0, 0.04);
}
@keyframes oa-prefill-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 540px) {
  .rentals-open-account .oa-prefilled-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Inline checkbox + label row — used for "My billing address is
   different from above". Sits flush in the field-row grid like a
   normal field would, but with the checkbox + label inline rather
   than a label-over-input pair. */
.rentals-open-account .oa-inline-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: var(--vf-ink-2);
  padding: 6px 0;
}
.rentals-open-account .oa-inline-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--vf-blue);
  cursor: pointer;
}
.rentals-open-account .oa-inline-check:hover {
  color: var(--vf-ink);
}
.oa-camera-hint--multiple { color: rgba(255, 200, 200, 0.95); }
.oa-camera-hint--searching,
.oa-camera-hint--framing,
.oa-camera-hint--features { color: rgba(255, 220, 175, 0.95); }

@media (max-width: 540px) {
  .oa-camera-modal { padding: 16px; }
  .oa-camera-video { aspect-ratio: 3 / 4; }
}

/* Inline "still verifying" status above the Submit button on Review,
   plus a tiny spinner that doubles as the button's own waiting state.
   Keeps the applicant on the page rather than letting them submit while
   the background pdf.js extract + address-match is still running. */
.rentals-open-account .oa-verify-status {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 14px;
  padding: 12px 14px;
  background: rgba(9, 94, 223, 0.06);
  border: 1px solid rgba(9, 94, 223, 0.18);
  border-radius: 12px;
  color: var(--vf-ink-2);
  font-size: 13.5px;
  line-height: 1.5;
}
/* Red variant — shown when the background reference send failed so the
   applicant can see why Submit is locked and jump back to References. */
.rentals-open-account .oa-verify-status.oa-verify-status--bad {
  background: rgba(204, 0, 0, 0.06);
  border-color: rgba(204, 0, 0, 0.22);
  color: #7d1b1b;
}
.rentals-open-account .oa-verify-status .oa-verify-link {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.rentals-open-account .oa-verify-status .oa-verify-link:hover { opacity: 0.78; }
.oa-spinner-inline {
  width: 14px; height: 14px;
  border: 2px solid rgba(9, 94, 223, 0.25);
  border-top-color: var(--vf-blue);
  border-radius: 999px;
  animation: oa-spinner-spin 700ms linear infinite;
  flex-shrink: 0;
  display: inline-block;
}
.oa-spinner-inline--on-button {
  border-color: rgba(255, 255, 255, 0.45);
  border-top-color: white;
  margin-right: 8px;
  vertical-align: -2px;
}
@keyframes oa-spinner-spin {
  to { transform: rotate(360deg); }
}

/* Proof-of-address auto-check states. The file preview tile shows a
   coloured border that reflects what the client-side analysis has found:
   - pending: pulsing blue while pdf.js extracts text in the background.
   - matched: green border + check badge — address found on the document.
   - unmatched: red border + alert badge — address NOT found.
   - inconclusive: neutral (e.g. image files we don't OCR client-side).
   These are advisory: server-side verification (Chunk B) is the gate. */
.rentals-open-account .oa-file-preview.oa-proof-pending {
  border-color: var(--vf-blue) !important;
  animation: oa-proof-pulse 1.6s ease-in-out infinite;
}
.rentals-open-account .oa-file-preview.oa-proof-matched {
  border-color: #1c9d54 !important;
  background: rgba(28, 157, 84, 0.04);
}
.rentals-open-account .oa-file-preview.oa-proof-unmatched {
  border-color: #d23a2a !important;
  background: rgba(210, 58, 42, 0.04);
}
@keyframes oa-proof-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(9, 94, 223, 0.32); }
  50%      { box-shadow: 0 0 0 6px rgba(9, 94, 223, 0); }
}
.rentals-open-account .oa-proof-badge {
  width: 22px; height: 22px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 8px;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
}
.rentals-open-account .oa-proof-badge--ok {
  background: #1c9d54; color: white;
}
.rentals-open-account .oa-proof-badge--ok svg {
  width: 12px; height: 12px; stroke-width: 3;
}
.rentals-open-account .oa-proof-badge--bad {
  background: #d23a2a; color: white;
}
.rentals-open-account .oa-proof-badge--pending {
  background: transparent;
  border: 2px solid var(--vf-blue);
  border-top-color: transparent;
  animation: oa-proof-spin 800ms linear infinite;
}
@keyframes oa-proof-spin {
  to { transform: rotate(360deg); }
}

/* Inline field warning (e.g. free-email reference) */
.rentals-open-account .oa-input-warn {
  border-color: #d27a18 !important;
  background: #fff8ee;
}
.rentals-open-account .oa-input-warn:focus {
  border-color: #d27a18 !important;
  box-shadow: 0 0 0 4px rgba(210, 122, 24, 0.15) !important;
}
.rentals-open-account .oa-field-warn {
  margin-top: 6px;
  padding: 8px 12px;
  background: #fff8ee;
  border: 1px solid #f4d3a3;
  border-radius: 8px;
  font-size: 12.5px;
  color: #6a4500;
  line-height: 1.45;
}

/* Success-screen "View what you submitted" toggle + summary */
.rentals-open-account .oa-summary-toggle {
  background: none;
  border: 1px solid var(--vf-line-strong);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vf-ink-2);
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 24px;
  transition: all 180ms;
}
.rentals-open-account .oa-summary-toggle:hover {
  background: var(--vf-bg-tint);
  border-color: var(--vf-ink-3);
}
.rentals-open-account .oa-summary {
  margin-top: 24px;
  padding: 20px;
  background: var(--vf-bg);
  border: 1px solid var(--vf-line);
  border-radius: 14px;
  text-align: left;
}
.rentals-open-account .oa-summary-section {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--vf-line);
}
.rentals-open-account .oa-summary-section:last-of-type {
  margin-bottom: 12px;
  padding-bottom: 0;
  border-bottom: none;
}
.rentals-open-account .oa-summary-section h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  font-weight: 700;
  margin: 0 0 12px;
}
.rentals-open-account .oa-summary dl {
  display: grid;
  gap: 8px;
  margin: 0;
}
.rentals-open-account .oa-summary dl > div {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  font-size: 14px;
}
.rentals-open-account .oa-summary dt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  padding-top: 3px;
  margin: 0;
}
.rentals-open-account .oa-summary dd {
  margin: 0;
  color: var(--vf-ink);
  font-weight: 500;
  word-break: break-word;
}
.rentals-open-account .oa-summary dd em {
  color: var(--vf-ink-4);
  font-style: italic;
  font-weight: 400;
}
.rentals-open-account .oa-summary-ref {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--vf-line);
}
.rentals-open-account .oa-summary-ref:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.rentals-open-account .oa-summary-ref-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vf-blue);
  margin-bottom: 6px;
}
.rentals-open-account .oa-summary-tip {
  margin: 16px 0 0;
  padding: 10px 12px;
  background: var(--vf-blue-100, rgba(74, 124, 255, 0.10));
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--vf-ink-3);
  line-height: 1.5;
  text-align: left;
}
/* Small reminder beneath the reference list on the summary: explains
   why NAME / COMPANY / RELATIONSHIP rows aren't there yet (the
   referee fills those in when they respond). */
.rentals-open-account .oa-summary-ref-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--vf-ink-3);
  line-height: 1.5;
  font-style: italic;
  text-align: left;
}
@media (max-width: 540px) {
  .rentals-open-account .oa-summary dl > div { grid-template-columns: 1fr; gap: 2px; }
}

/* 4-stage progress track on the success screen. Each <li> is a stage:
   stage 1 ('is-done') already filled green; stages 2-4 ('is-pending')
   sit grey with their numeric markers. The vertical guide line between
   stages is the ::after pseudo on each item except the last. */
.rentals-open-account .oa-status-track {
  list-style: none;
  margin: 22px 0 8px;
  padding: 0;
  text-align: left;
}
.rentals-open-account .oa-status-track li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 0 0 18px;
}
.rentals-open-account .oa-status-track li:last-child {
  padding-bottom: 0;
}
.rentals-open-account .oa-status-track li:not(:last-child)::after {
  /* Vertical connector between stage dots */
  content: '';
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: 6px;
  width: 2px;
  background: var(--vf-line);
}
.rentals-open-account .oa-status-track .oa-status-track-dot {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: 999px;
  background: var(--vf-line);
  color: var(--vf-ink-3);
  font-weight: 700;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
.rentals-open-account .oa-status-track .oa-status-track-dot svg {
  width: 14px; height: 14px;
  color: white;
}
.rentals-open-account .oa-status-track .is-done .oa-status-track-dot {
  background: #1c9d54;
  color: white;
}
.rentals-open-account .oa-status-track .is-active .oa-status-track-dot {
  background: var(--vf-blue);
  color: white;
  box-shadow: 0 0 0 4px rgba(9, 94, 223, 0.12);
}
.rentals-open-account .oa-status-track .oa-status-track-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 2px;
}
.rentals-open-account .oa-status-track .oa-status-track-label strong {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--vf-ink-3);
  line-height: 1.35;
}
.rentals-open-account .oa-status-track .oa-status-track-label span {
  font-size: 13px;
  color: var(--vf-ink-3);
  line-height: 1.5;
}
.rentals-open-account .oa-status-track .is-done .oa-status-track-label strong {
  color: #1c9d54;
}
.rentals-open-account .oa-status-track .is-active .oa-status-track-label strong {
  color: var(--vf-ink);
}

/* "Security by Veridyne" badge. Pure UI deterrent — sits in the wizard
   footer below every step's action row and on the success screen
   under the summary. Looks like a third-party verification mark but
   the brand is internal/fictitious. Designed to be visually quiet
   enough not to distract real applicants but present enough that a
   would-be fraudster sees it. */
.rentals-open-account .oa-security-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 24px auto 0;
  padding: 8px 14px;
  border: 1px solid var(--vf-line);
  border-radius: 999px;
  background: white;
  color: var(--vf-ink-3);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  width: fit-content;
}
.rentals-open-account form.oa-wizard-form > .oa-security-badge {
  margin: 18px auto 4px;
}
.rentals-open-account .contact-sent .oa-security-badge {
  margin: 26px auto 0;
}
.rentals-open-account .oa-security-badge-shield {
  flex: 0 0 auto;
  color: var(--vf-ink-2);
}
.rentals-open-account .oa-security-badge-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}
.rentals-open-account .oa-security-badge-text strong {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--vf-ink);
}
.rentals-open-account .oa-security-badge-text span {
  font-size: 10.5px;
  color: var(--vf-ink-3);
  letter-spacing: 0.02em;
}

/* Stroke-draw animation for the shield + tick. Both paths start hidden
   (dashoffset = full dasharray); when the badge enters the viewport,
   React adds .is-visible and the shield outline traces in (~700ms)
   followed by the tick (~400ms, starts at 700ms). On pointer devices
   the tick re-traces on hover for a quiet "verifying" micro-interaction.
   prefers-reduced-motion users get the static badge. */
.rentals-open-account .oa-security-badge .oa-shield-path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.rentals-open-account .oa-security-badge .oa-check-path {
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
}
.rentals-open-account .oa-security-badge.is-visible .oa-shield-path {
  animation: oa-shield-draw 700ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.rentals-open-account .oa-security-badge.is-visible .oa-check-path {
  animation: oa-check-draw 400ms cubic-bezier(0.4, 0, 0.2, 1) 700ms forwards;
}
@keyframes oa-shield-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes oa-check-draw {
  to { stroke-dashoffset: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .rentals-open-account .oa-security-badge.is-visible:hover .oa-check-path {
    animation: oa-check-redraw 500ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}
@keyframes oa-check-redraw {
  0%   { stroke-dashoffset: 14; }
  100% { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rentals-open-account .oa-security-badge .oa-shield-path,
  .rentals-open-account .oa-security-badge .oa-check-path {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    animation: none !important;
  }
}

/* Inline field "looks good" — green border + check badge next to label */
.rentals-open-account .oa-input-ok {
  border-color: #1c9d54 !important;
  background: rgba(28, 157, 84, 0.04);
}
.rentals-open-account .oa-input-ok:focus {
  border-color: #1c9d54 !important;
  box-shadow: 0 0 0 4px rgba(28, 157, 84, 0.15) !important;
}
.rentals-open-account .oa-input-ok-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  background: #1c9d54;
  color: white;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}
.rentals-open-account .oa-input-ok-badge svg {
  width: 10px; height: 10px;
  stroke-width: 3;
}
.rentals-open-account .oa-field-ok {
  margin-top: 6px;
  font-size: 12.5px;
  color: #1c9d54;
  font-weight: 500;
}

/* OaVerifyStat — third welcome stat, plain num/lbl. The live open/closed
   indicator (OaOpenNotice) lives in the left column on the welcome step. */
.oa-verify-stat { display: flex; flex-direction: column; }

/* Welcome stats now carry the unit on the big line ("5 mins", "4 sections",
   "1-2 hours") so the number font is smaller than the original digit-only
   layout to keep the row balanced. */
.rentals-open-account .oa-welcome-meta .num {
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.1; white-space: nowrap;
}
.rentals-open-account .oa-welcome-meta .lbl {
  font-size: 10.5px; letter-spacing: 0.1em;
}

/* Mobile overrides — placed LAST so they win the cascade against the
   default desktop rules above. Tightens font sizes + label letter-spacing
   so the stacked stat rows don't feel oversized on phone widths. */
@media (max-width: 760px) {
  .rentals-open-account .oa-welcome-meta .num { font-size: 17px; line-height: 1; }
  .rentals-open-account .oa-welcome-meta .lbl { font-size: 9.5px; letter-spacing: 0.08em; margin-top: 0; }
}
@media (max-width: 380px) {
  .rentals-open-account .oa-welcome-meta .num { font-size: 16px; }
}

/* OaOpenNotice — green/red dot + one-line copy under the checklist */
.oa-open-notice {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 24px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--vf-line);
  border-radius: 14px;
}
.oa-open-dot {
  width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; margin-top: 6px;
  background: #2ecc71;
  box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.18);
}
.oa-open-notice.is-closed .oa-open-dot {
  background: #e74c3c;
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.18);
}
.oa-open-text { font-size: 14px; color: var(--vf-ink-2); line-height: 1.5; }

/* Privacy notice link inside the welcome card */
.rentals-open-account .oa-priv a { color: var(--vf-blue); font-weight: 600; }
.rentals-open-account .oa-priv a:hover { opacity: 0.75; }

/* File upload — drop zone */
.rentals-open-account .oa-file-field { margin-bottom: 14px; position: relative; }

/* Inline help icon (i) — sits next to a label, reveals tooltip on hover or focus */
.oa-help {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  position: relative;
  vertical-align: middle;
}
.oa-help-btn {
  width: 16px; height: 16px; border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(14, 15, 26, 0.25);
  font-family: var(--font-mono, ui-monospace, serif);
  font-size: 9px; font-weight: 700;
  font-style: italic;
  color: var(--vf-ink-4, rgba(14, 15, 26, 0.45));
  display: inline-flex; align-items: center; justify-content: center;
  cursor: help;
  padding: 0;
  line-height: 1;
  transition: all 160ms;
}
.oa-help-btn:hover,
.oa-help-btn:focus-visible {
  background: var(--vf-blue);
  border-color: var(--vf-blue);
  color: white;
  outline: none;
}
.oa-help-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: -8px;
  width: 280px;
  padding: 12px 14px;
  background: var(--vf-ink);
  color: white;
  font-size: 13px; font-weight: 400; line-height: 1.5;
  letter-spacing: normal; text-transform: none;
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 5;
}
.oa-help-pop::before {
  content: ''; position: absolute;
  top: -5px; left: 12px;
  width: 10px; height: 10px;
  background: var(--vf-ink);
  transform: rotate(45deg);
}
.oa-help:hover .oa-help-pop,
.oa-help:focus-within .oa-help-pop {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
@media (max-width: 540px) {
  .oa-help-pop { width: 220px; }
}

/* Grouped Proof of address: one header, two upload zones side-by-side */
.rentals-open-account .oa-proof-group > label {
  display: block;
  margin-bottom: 12px;
}
.rentals-open-account .oa-proof-grid {
  display: grid;
  /* minmax(0, 1fr) forces each cell to obey the 1fr share even when its
     content has an unbreakable string (long PDF filename). Plain 1fr lets
     the cell expand past the share, pushing the row outside the card. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
@media (max-width: 540px) {
  .rentals-open-account .oa-proof-grid { grid-template-columns: minmax(0, 1fr); }
}
.rentals-open-account .oa-file-field--compact { margin-bottom: 0; }
/* Compact drop zones get a tighter padding so two fit nicely in the row */
.rentals-open-account .oa-file-field--compact .oa-file-drop {
  padding: 18px 14px;
}
.rentals-open-account .oa-file-field--compact .oa-file-drop-hint {
  font-size: 12px;
}
.rentals-open-account .oa-file-drop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 22px 18px;
  background: white;
  border: 1.5px dashed var(--vf-line-strong);
  border-radius: 14px;
  cursor: pointer;
  transition: all 200ms;
  gap: 6px;
}
.rentals-open-account .oa-file-drop:hover {
  border-color: var(--vf-blue);
  background: var(--vf-blue-50, #F1F6FE);
}
.rentals-open-account .oa-file-drop svg {
  width: 22px; height: 22px;
  color: var(--vf-blue); margin-bottom: 4px;
}
.rentals-open-account .oa-file-drop-lbl {
  font-size: 14px; font-weight: 600; color: var(--vf-ink);
}
.rentals-open-account .oa-file-drop-hint {
  font-size: 12.5px; color: var(--vf-ink-3); line-height: 1.4; max-width: 360px;
}
.rentals-open-account .oa-file-drop input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}

/* File preview row after a file has been picked */
.rentals-open-account .oa-file-preview {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: white;
  border: 1px solid var(--vf-line-strong);
  border-radius: 14px;
}
.rentals-open-account .oa-file-thumb {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden;
  background: var(--vf-bg-tint);
  display: flex; align-items: center; justify-content: center;
  color: var(--vf-ink-3);
}
.rentals-open-account .oa-file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rentals-open-account .oa-file-info { flex: 1; min-width: 0; }
.rentals-open-account .oa-file-name {
  font-size: 14px; font-weight: 600; color: var(--vf-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rentals-open-account .oa-file-meta {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.04em; color: var(--vf-ink-3); margin-top: 2px;
}
.rentals-open-account .oa-file-remove {
  background: none; border: none;
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--vf-ink-3); padding: 6px 10px; border-radius: 8px; cursor: pointer;
  transition: background 150ms, color 150ms;
}
.rentals-open-account .oa-file-remove:hover { background: #FFF1F1; color: #8A1A1A; }

.rentals-open-account .oa-file-warn {
  margin-top: 8px;
  padding: 10px 12px;
  background: #FFF7E6;
  border: 1px solid #F4D3A3;
  color: #6A4500;
  border-radius: 10px;
  font-size: 13px; line-height: 1.5;
}

/* References — group blocks */
.rentals-open-account .oa-ref {
  padding-top: 18px; margin-top: 18px;
  border-top: 1px solid var(--vf-line);
}
.rentals-open-account .oa-ref:first-of-type {
  padding-top: 0; margin-top: 0; border-top: none;
}
.rentals-open-account .oa-ref-title {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vf-blue); font-weight: 700; margin-bottom: 12px;
}

/* Small "We'll ask them" note sitting between the step description and
   the two reference cards. Calmer than the inline warnings — neutral
   ink colour, slimmer typography, no border. Exists so the applicant
   can see exactly what their referees will see without having to open
   the (i) tooltip. */
.rentals-open-account .oa-ref-aside {
  margin: -4px 0 18px;
  padding: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--vf-ink-3);
}
.rentals-open-account .oa-ref-aside-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--vf-ink-2);
  margin-bottom: 6px;
}
.rentals-open-account .oa-ref-aside ul {
  margin: 0;
  padding-left: 18px;
}
.rentals-open-account .oa-ref-aside li {
  margin: 2px 0;
}

/* Review step */
.rentals-open-account .oa-review { margin-top: 4px; }
.rentals-open-account .oa-review-block {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--vf-line);
}
.rentals-open-account .oa-review-block:last-child { border-bottom: none; }
.rentals-open-account .oa-review-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.rentals-open-account .oa-review-head span {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vf-ink-3); font-weight: 700;
}
.rentals-open-account .oa-review-edit {
  background: none; border: none;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--vf-blue); cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.rentals-open-account .oa-review-edit:hover { background: var(--vf-blue-100); }
.rentals-open-account .oa-review-block dl {
  display: grid; gap: 8px; margin: 0;
}
.rentals-open-account .oa-review-block dl > div {
  display: grid; grid-template-columns: 120px 1fr; gap: 12px;
  font-size: 14px;
}
@media (max-width: 540px) {
  .rentals-open-account .oa-review-block dl > div { grid-template-columns: 1fr; gap: 2px; }
}
.rentals-open-account .oa-review-block dt {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--vf-ink-3); padding-top: 3px;
}
.rentals-open-account .oa-review-block dd { margin: 0; color: var(--vf-ink); font-weight: 500; word-break: break-word; }
.rentals-open-account .oa-missing { color: #8A1A1A; font-style: normal; font-weight: 600; }

/* Consent checkboxes */
.rentals-open-account .oa-check {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px;
  background: var(--vf-bg);
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  margin-top: 10px;
  cursor: pointer;
  transition: border-color 200ms, background 200ms;
}
.rentals-open-account .oa-check:hover { border-color: var(--vf-line-strong); }
.rentals-open-account .oa-check input[type="checkbox"] {
  appearance: none;
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
  border: 1.5px solid var(--vf-line-strong);
  border-radius: 5px;
  background: white; cursor: pointer; position: relative;
  transition: background 150ms, border-color 150ms;
}
.rentals-open-account .oa-check input[type="checkbox"]:checked {
  background: var(--vf-blue); border-color: var(--vf-blue);
}
.rentals-open-account .oa-check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid white; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.rentals-open-account .oa-check strong { display: block; font-size: 14px; font-weight: 600; color: var(--vf-ink); }
.rentals-open-account .oa-check .oa-check-sub {
  display: block; font-size: 12.5px; color: var(--vf-ink-3); line-height: 1.5; margin-top: 3px;
}

/* Actions row */
.rentals-open-account .oa-actions {
  display: flex; gap: 10px; align-items: center;
  margin-top: 22px;
}
.rentals-open-account .oa-actions .submit { flex: 1; justify-content: center; margin-top: 0; }
.rentals-open-account .oa-back {
  background: transparent; border: 1px solid var(--vf-line-strong);
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--vf-ink); padding: 14px 22px; border-radius: 999px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.rentals-open-account .oa-back:hover { background: var(--vf-bg-tint); border-color: var(--vf-ink-3); }

.rentals-open-account .oa-opt {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--vf-ink-4); font-weight: 500; text-transform: none;
}

/* ===== Reference response form (/reference/:token) ===== */
.rentals-reference .ref-info-side .meta-block { margin-top: 0; }
.rentals-reference .meta-row {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vf-line);
}
.rentals-reference .meta-row:last-child { border-bottom: none; }
.rentals-reference .meta-row .lbl {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--vf-ink-3); font-weight: 700;
}
.rentals-reference .meta-row .val { font-size: 15px; color: var(--vf-ink); }

.ref-radio-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 2px;
}
.ref-radio {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--vf-line-strong);
  background: white;
  cursor: pointer;
  font-size: 14px; font-weight: 600;
  color: var(--vf-ink-2);
  transition: all 180ms;
}
.ref-radio input[type="radio"] {
  appearance: none;
  width: 14px; height: 14px;
  border: 1.5px solid var(--vf-line-strong);
  border-radius: 999px;
  background: white;
  position: relative;
  margin: 0; cursor: pointer;
  transition: all 180ms;
}
.ref-radio:hover {
  border-color: var(--vf-blue); color: var(--vf-blue);
}
.ref-radio:hover input[type="radio"] {
  border-color: var(--vf-blue);
}
.ref-radio.active {
  background: var(--vf-blue); color: white; border-color: var(--vf-blue);
}
.ref-radio.active input[type="radio"] {
  border-color: white; background: white;
}
.ref-radio.active input[type="radio"]::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 999px; background: var(--vf-blue);
}

.booqable-error {
  background: #fff7e6;
  border: 1px solid #f4d3a3;
  color: #6a4500;
  padding: 14px 18px;
  border-radius: 12px;
  margin-top: 24px;
  font-size: 14px;
  line-height: 1.55;
}
.booqable-error a { color: #6a4500; text-decoration: underline; font-weight: 600; }

/* Section head color overrides on light bg */
.rentals-light .section-head h2 { color: var(--vf-ink); }
.rentals-light .section-head h2 em { color: var(--vf-blue); }

/* ===================================================================
   RENTALS — MOBILE RESPONSIVE OVERRIDES
   =================================================================== */
@media (max-width: 900px) {
  .rentals-hero { padding: 110px 0 56px; }
  .rentals-hero h1 { font-size: clamp(40px, 9vw, 72px); }
  .rentals-hero .lead { font-size: 16px; }
  .rentals-hero-stats { gap: 28px; margin-top: 36px; flex-wrap: wrap; }
  .kit-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .booqable-frame-spotlight { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 560px) {
  .kit-grid { grid-template-columns: 1fr; }
  .rentals-hero-stats { gap: 20px; }
}

/* ===================================================================
 * Native equipment catalog — /rentals/equipment
 * Replaces the old Booqable iframe. Grid + search + filter sidebar +
 * item detail drawer. CSS-only, no JS-driven layout.
 * =================================================================== */

.rcat-page {
  background: #FAFAFA;
  min-height: calc(100vh - 88px);
  /* Top padding matches .rentals-subhero (140px) so the title sits at
     the same vertical position as About / Contact / Open Account. */
  padding: 140px 32px 96px;
}

.rcat-head {
  /* Single-column now that the inline search is gone. The header
     reads as a normal page title + subhead, not a half-filled
     two-column grid with empty right space. Max-width matches
     .container (1280px) so head + grid align with other rentals
     pages instead of running wider. */
  max-width: 1280px;
  margin: 0 auto 36px;
}
.rcat-head h1 {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  /* line-height history:
     - 1.0  → clipped cap-height of the 700-weight upright glyphs
     - 1.1  → fixed upright clipping but italic <em>shelf</em> still
              had its ascenders shaved at the top
     - 1.2  → clears both. The italic 'f', 'h' and 'l' have ascenders
              that sit higher than upright cap-height, so the line-box
              needs more vertical room than the upright text alone
              would suggest. */
  line-height: 1.2;
  margin: 8px 0 14px;
  color: var(--vf-ink);
  /* Belt-and-braces: italic glyphs lean right, and the rightmost
     pixel can sit outside the geometric bounding box. Tiny top
     padding gives the line-box a hair of extra room above the
     baseline. Costs nothing visually because the eyebrow above
     already has its own margin. */
  padding-top: 4px;
}
.rcat-head h1 em {
  color: var(--vf-blue);
  font-style: italic;
  font-weight: 500;
}
.rcat-head p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--vf-ink-2);
  max-width: 560px;
}

.rcat-search {
  position: relative;
  display: flex;
  align-items: center;
  background: white;
  border: 1px solid var(--vf-line);
  border-radius: 999px;
  padding: 10px 18px;
  gap: 10px;
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.rcat-search:focus-within {
  border-color: var(--vf-blue);
  box-shadow: 0 0 0 3px rgba(46, 91, 255, 0.10);
}
.rcat-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  font-family: inherit;
  color: var(--vf-ink);
}
.rcat-search input::placeholder { color: var(--vf-ink-3, rgba(10,15,26,0.45)); }
.rcat-search svg { color: var(--vf-ink-3, rgba(10,15,26,0.55)); flex-shrink: 0; }

.rcat-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  max-width: 1320px;
  margin: 0 auto;
  align-items: start;
}

.rcat-filters {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px 22px;
  background: white;
  border: 1px solid var(--vf-line);
  border-radius: 16px;
}
.rcat-filter-block h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
  margin: 0 0 12px;
  font-weight: 600;
}

.rcat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rcat-chip {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--vf-line);
  background: white;
  color: var(--vf-ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 160ms ease;
}
.rcat-chip span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
}
.rcat-chip:hover { border-color: var(--vf-ink); }
.rcat-chip.is-on {
  background: var(--vf-ink);
  border-color: var(--vf-ink);
  color: white;
}
.rcat-chip.is-on span { color: rgba(255,255,255,0.65); }

.rcat-filter-block input[type=range] {
  width: 100%;
  accent-color: var(--vf-blue);
  margin-bottom: 6px;
}
.rcat-range-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
}

.rcat-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  cursor: pointer;
  color: var(--vf-ink);
}
.rcat-toggle input { accent-color: var(--vf-blue); }
.rcat-toggle-help {
  font-size: 11px;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
  margin: 6px 0 0;
  line-height: 1.4;
}

.rcat-clear {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: none;
  border: 0;
  padding: 0;
  color: var(--vf-blue);
  cursor: pointer;
  text-align: left;
}
.rcat-clear:hover { text-decoration: underline; }

.rcat-filter-foot {
  font-size: 11px;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--vf-line);
  line-height: 1.5;
}
.rcat-filter-foot a { color: var(--vf-ink); text-decoration: underline; text-underline-offset: 2px; }

.rcat-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
}

.rcat-empty {
  background: white;
  border: 1px dashed var(--vf-line);
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center;
  color: var(--vf-ink-2);
}
.rcat-empty a { color: var(--vf-blue); }

/* Shared-cart banner — one-shot status row at the top of the catalog
   after a ?cart=… URL is opened. Confirms how many items were loaded
   and gives a dismiss button. Dies on close + on next nav. */
.rcat-shared-banner {
  margin: 0 24px 16px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(31, 96, 255, 0.08);
  color: var(--vf-ink);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(31, 96, 255, 0.20);
}
.rcat-shared-banner b { color: var(--vf-blue); font-weight: 700; }
.rcat-shared-banner-close {
  width: 22px; height: 22px;
  border-radius: 50%; border: 0;
  background: rgba(10,15,26,0.08);
  color: var(--vf-ink);
  font-size: 14px; line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.rcat-shared-banner-close:hover { background: rgba(10,15,26,0.15); }

/* Share-cart button — sits in the cart drawer header, just before the
   close X. Pill style, neutral by default; flashes a "✓ Link copied"
   green for ~1.8s after a successful copy. */
.rcart-share {
  margin-right: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--vf-line);
  background: white;
  color: var(--vf-ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.rcart-share:hover { border-color: var(--vf-ink); }
.rcart-share.is-copied {
  background: #157a4a;
  color: white;
  border-color: #157a4a;
}

/* Prominent empty state — used when a search query returns 0 results.
   Bigger heading, friendly blurb, and a primary "email us" CTA so we
   convert the dead-end into a quote request instead of a bounce.   */
.rcat-empty-prominent {
  padding: 64px 32px;
  border: 1.5px solid var(--vf-line);
  background: linear-gradient(180deg, white 0%, var(--vf-paper, #FAFBFD) 100%);
}
.rcat-empty-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
  margin-bottom: 14px;
}
.rcat-empty-title {
  font-size: 26px;
  line-height: 1.2;
  color: var(--vf-ink);
  margin: 0 0 14px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.rcat-empty-blurb {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--vf-ink-2, rgba(10,15,26,0.65));
  max-width: 480px;
  margin: 0 auto 24px;
}
.rcat-empty-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.rcat-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--vf-ink);
  color: white !important;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background 220ms var(--ease-out, ease), transform 220ms var(--ease-out, ease);
  text-decoration: none;
}
.rcat-empty-cta:hover { background: var(--vf-blue); transform: translateY(-1px); }
.rcat-empty-clear {
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid var(--vf-line);
  background: white;
  color: var(--vf-ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 220ms ease;
}
.rcat-empty-clear:hover { border-color: var(--vf-ink); }

.rcat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}

/* Card wrapper — positioning context for the quick-add (+) button,
   AND the element that owns the hover lift. Without the wrap the +
   would have to live as a child of the card button (nested <button>s
   are invalid HTML). Putting the lift on the wrap means card + button
   move together on hover — they feel like one unit instead of the
   button hanging in place as the card slides up under it. */
.rcat-card-wrap {
  position: relative;
  display: flex;
  transition: transform 240ms var(--ease-out, ease);
}
.rcat-card-wrap > .rcat-card { flex: 1; }
.rcat-card-wrap:hover { transform: translateY(-3px); }
/* Card border + shadow react to wrap hover too, so the whole unit
   tints in unison — including when only the + button is hovered. */
.rcat-card-wrap:hover .rcat-card {
  border-color: var(--vf-blue);
  box-shadow: 0 14px 38px rgba(10, 15, 26, 0.08);
}

.rcat-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: white;
  border: 1px solid var(--vf-line);
  text-align: left;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  color: inherit;
  transition: box-shadow 240ms var(--ease-out, ease), border-color 240ms var(--ease-out, ease);
}

/* Quick-add (+) button — anchored to the wrap (not the card) so the
   card's hover lift doesn't carry the button off-anchor. Bottom-right
   corner, soft outlined chip: white background, hairline border, muted
   ink glyph. On hover the icon tilts 22° and the border / glyph tint
   to brand blue — subtle "interactive" cue without rotating fully to
   an × (which would read as "close/cancel"). On success (~900ms) the
   chip swaps to a green tick with a small scale pop, then resets. The
   icon itself owns the rotation so the button stays square — keeps
   the focus ring tidy. */
.rcat-quick-add {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(10, 15, 26, 0.16);
  background: rgba(255, 255, 255, 0.95);
  color: rgba(10, 15, 26, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 220ms ease, color 220ms ease, background-color 220ms ease, transform 160ms var(--ease-out, ease);
  z-index: 2;
}
.rcat-quick-add svg {
  transition: transform 260ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rcat-quick-add:hover {
  border-color: var(--vf-blue);
  color: var(--vf-blue);
  background: white;
}
/* Partial rotation only — a full 45° would land at an ×, which
   conventionally reads as "close/cancel" and undermines the
   "add" intent of the button. 22° is clearly rotated (so the
   button feels interactive) but still reads as a tilted +. */
.rcat-quick-add:hover svg { transform: rotate(22deg); }
.rcat-quick-add:active { transform: scale(0.94); }
.rcat-quick-add:focus-visible {
  outline: 2px solid rgba(46, 91, 255, 0.45);
  outline-offset: 2px;
}
.rcat-quick-add.is-added {
  border-color: #1b9c5f;
  color: #1b9c5f;
  background: white;
  cursor: default;
  animation: rcat-quick-add-pop 340ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Tick state: hold the icon upright even on hover so the success cue
   isn't accidentally rotated mid-confirmation. */
.rcat-quick-add.is-added svg,
.rcat-quick-add.is-added:hover svg { transform: none; }

/* In-cart resting state — chip stays brand-blue while the item has
   a qty in the cart. The count number sits centred by default; on
   hover, the count fades out and a + fades in (and rotates 45° via
   the existing :hover svg rule). Click bumps the qty by 1 and runs
   the .is-added tick animation. */
.rcat-quick-add.has-qty {
  border-color: var(--vf-blue);
  color: var(--vf-blue);
  background: rgba(46, 91, 255, 0.08);
}
.rcat-quick-add.has-qty:hover { background: white; }
.rcat-quick-add-count,
.rcat-quick-add-plus {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  /* Simple opacity cross-fade — no rotate, no scale, no spring.
     Earlier version shrunk the count and rotated the + on hover; on
     the already-in-cart chip the extra motion read as "something's
     happening" without a clear meaning. A plain "+1" hint is enough. */
  transition: opacity 160ms ease;
}
.rcat-quick-add-plus { opacity: 0; }
.rcat-quick-add.has-qty:hover .rcat-quick-add-count { opacity: 0; }
.rcat-quick-add.has-qty:hover .rcat-quick-add-plus { opacity: 1; }
@keyframes rcat-quick-add-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .rcat-quick-add,
  .rcat-quick-add.is-added,
  .rcat-quick-add svg { animation: none; transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease; transform: none; }
  .rcat-quick-add:hover svg { transform: none; }
}

/* ─────────────────────────────────────────────────────────────────
   Hidden review mode — Cmd+Opt+Shift+R toggles this on. Designed
   for internal use (Max), not public discovery. The card wrap gets
   .is-review-mode while active; flagged cards also get .is-flagged
   for an outline cue.
   ───────────────────────────────────────────────────────────────── */

/* Flagged-card outline — soft amber accent so the eye reads "yes,
   I've flagged this" without overpowering the card content. */
.rcat-card-wrap.is-flagged > .rcat-card {
  border-color: #d6991a;
  box-shadow: 0 0 0 1px #d6991a inset, 0 6px 22px rgba(214, 153, 26, 0.10);
}

/* Flag button — top-right corner of the card. Sits opposite the
   quick-add (bottom-right) so the two never collide. Square with
   slightly rounded corners — distinct shape from the round add
   chip so the affordances aren't confusable. */
.rcat-review-flag {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(10, 15, 26, 0.18);
  background: rgba(255, 255, 255, 0.96);
  color: rgba(10, 15, 26, 0.6);
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease, transform 160ms var(--ease-out, ease);
}
.rcat-review-flag:hover {
  border-color: #d6991a;
  color: #d6991a;
  background: white;
}
.rcat-review-flag:active { transform: scale(0.94); }
.rcat-review-flag.is-flagged.is-flagged-edit {
  background: #d6991a;
  border-color: #d6991a;
  color: white;
}
.rcat-review-flag.is-flagged.is-flagged-edit:hover {
  background: #b87f0e;
  border-color: #b87f0e;
  color: white;
}
.rcat-review-flag.is-flagged.is-flagged-remove {
  background: #b33a3a;
  border-color: #b33a3a;
  color: white;
}
.rcat-review-flag.is-flagged.is-flagged-remove:hover {
  background: #8e2828;
  border-color: #8e2828;
  color: white;
}
.rcat-card-wrap.is-flagged-remove > .rcat-card {
  border-color: #b33a3a;
  box-shadow: 0 0 0 1px #b33a3a inset, 0 6px 22px rgba(179, 58, 58, 0.10);
}
.rcat-review-flag:focus-visible {
  outline: 2px solid rgba(214, 153, 26, 0.55);
  outline-offset: 2px;
}

/* Inline note popover — anchored to the card wrap (same positioning
   context as the flag button). Drops down from the top-right corner
   so it doesn't cover the card's name + price. */
.rcat-review-popover {
  position: absolute;
  top: 44px;
  right: 10px;
  width: min(320px, calc(100% - 20px));
  background: white;
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  padding: 12px 12px 10px;
  box-shadow: 0 14px 40px rgba(10, 15, 26, 0.18);
  z-index: 10;
  cursor: default;
  text-align: left;
}
.rcat-review-popover-head {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcat-review-popover-input {
  width: 100%;
  min-height: 80px;
  padding: 8px 10px;
  border: 1px solid var(--vf-line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.45;
  color: var(--vf-ink);
  resize: vertical;
  outline: 0;
  background: white;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.rcat-review-popover-input:focus {
  border-color: #d6991a;
  box-shadow: 0 0 0 3px rgba(214, 153, 26, 0.15);
}
.rcat-review-popover-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.rcat-review-popover-spacer { flex: 1; }

/* Two-button choice grid shown in the popover's first stage. Each
   button is a vertical card with a glyph + label + sub-copy so the
   user can pick at a glance. */
.rcat-review-popover-prompt {
  margin: 0 0 10px;
  font-size: 12px;
  color: var(--vf-ink-2);
  line-height: 1.5;
}
.rcat-review-popover-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d6991a;
  margin-right: 4px;
}
.rcat-review-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
.rcat-review-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 11px;
  border-radius: 10px;
  border: 1px solid var(--vf-line);
  background: white;
  cursor: pointer;
  text-align: left;
  transition: border-color 160ms ease, background-color 160ms ease, transform 120ms ease;
}
.rcat-review-choice:hover { background: rgba(46, 91, 255, 0.04); border-color: var(--vf-ink); }
.rcat-review-choice:active { transform: scale(0.98); }
.rcat-review-choice.is-active {
  border-color: #d6991a;
  background: rgba(214, 153, 26, 0.06);
}
.rcat-review-choice-glyph {
  font-size: 16px;
  line-height: 1;
  color: var(--vf-ink-2);
}
.rcat-review-choice:nth-child(1) .rcat-review-choice-glyph { color: #b33a3a; }
.rcat-review-choice:nth-child(2) .rcat-review-choice-glyph { color: #d6991a; }
.rcat-review-choice-label {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--vf-ink);
}
.rcat-review-choice-sub {
  font-size: 11px;
  color: var(--vf-ink-3);
  line-height: 1.35;
}

/* Toolbar breakdown chips — small action tags rendered next to the
   total count. */
.rcat-review-toolbar-breakdown {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rcat-review-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.rcat-review-tag.is-remove { color: #ff8a8a; border-color: rgba(255, 138, 138, 0.4); }
.rcat-review-tag.is-edit   { color: #ffc964; border-color: rgba(255, 201, 100, 0.4); }
.rcat-review-tag.is-add    { color: #7be3a8; border-color: rgba(123, 227, 168, 0.4); }

/* Add-listing modal — centered overlay (not anchored to a card). */
.rcat-review-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 26, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  padding: 20px;
  animation: rcart-verify-fade-in 140ms ease-out;
}
.rcat-review-modal {
  background: white;
  border-radius: 14px;
  padding: 22px 22px 18px;
  width: min(480px, 100%);
  box-shadow: 0 20px 60px rgba(10, 15, 26, 0.30);
}
.rcat-review-modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #1b9c5f;
  margin-bottom: 6px;
}
.rcat-review-modal-h {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  color: var(--vf-ink);
}
.rcat-review-modal-field {
  display: block;
  margin-bottom: 12px;
}
.rcat-review-modal-field > span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  margin-bottom: 4px;
}
.rcat-review-modal-field input,
.rcat-review-modal-field select,
.rcat-review-modal-field textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--vf-line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--vf-ink);
  outline: 0;
  background: white;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.rcat-review-modal-field textarea { resize: vertical; line-height: 1.45; }
.rcat-review-modal-field input:focus,
.rcat-review-modal-field select:focus,
.rcat-review-modal-field textarea:focus {
  border-color: #1b9c5f;
  box-shadow: 0 0 0 3px rgba(27, 156, 95, 0.15);
}
.rcat-review-modal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

/* Shared review-mode buttons — used in both the popover and the
   floating toolbar. Compact, professional, three intent variants. */
.rcat-review-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.rcat-review-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.rcat-review-btn-primary {
  background: var(--vf-ink);
  color: white;
}
.rcat-review-btn-primary:not(:disabled):hover { background: #000; }
.rcat-review-btn-secondary {
  background: transparent;
  border-color: var(--vf-line);
  color: var(--vf-ink-2);
}
.rcat-review-btn-secondary:not(:disabled):hover {
  border-color: var(--vf-ink);
  color: var(--vf-ink);
}
.rcat-review-btn-ghost {
  background: transparent;
  color: var(--vf-ink-3);
}
.rcat-review-btn-ghost:hover { color: var(--vf-ink); }
.rcat-review-btn-danger {
  background: transparent;
  border-color: rgba(179, 58, 58, 0.35);
  color: #b33a3a;
}
.rcat-review-btn-danger:hover {
  background: #b33a3a;
  border-color: #b33a3a;
  color: white;
}

/* Floating toolbar — fixed top-right of the viewport, well clear of
   the bottom-centred search bar. Mono-uppercase label keeps the
   surface visibly "internal" rather than masquerading as a user
   feature. */
.rcat-review-toolbar {
  position: fixed;
  top: 90px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(10, 15, 26, 0.96);
  color: white;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(10, 15, 26, 0.22);
  z-index: 90;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.rcat-review-toolbar-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.rcat-review-toolbar-count {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: white;
  background: rgba(255, 255, 255, 0.10);
  padding: 4px 10px;
  border-radius: 999px;
}
.rcat-review-toolbar-spacer { width: 8px; }
/* Variants of the shared review-btn that read against the dark
   toolbar background. */
.rcat-review-toolbar .rcat-review-btn-primary {
  background: white;
  color: var(--vf-ink);
}
.rcat-review-toolbar .rcat-review-btn-primary:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.92);
}
.rcat-review-toolbar .rcat-review-btn-secondary {
  border-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
}
.rcat-review-toolbar .rcat-review-btn-secondary:not(:disabled):hover {
  border-color: white;
  color: white;
}
.rcat-review-toolbar .rcat-review-btn-ghost {
  color: rgba(255, 255, 255, 0.6);
}
.rcat-review-toolbar .rcat-review-btn-ghost:hover { color: white; }

@media (max-width: 760px) {
  .rcat-review-toolbar { top: auto; bottom: 90px; right: 12px; left: 12px; flex-wrap: wrap; }
  .rcat-review-toolbar-spacer { display: none; }
}

.rcat-photo {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-color: #eaeaea;
  position: relative;
}
.rcat-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #e5e7eb 0%, #cbd5e1 100%);
  color: var(--vf-ink-2);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.rcat-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.rcat-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
}
.rcat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.rcat-card h3 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--vf-ink);
  margin: 0;
  line-height: 1.2;
}
.rcat-price {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--vf-blue);
  white-space: nowrap;
}
.rcat-card p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--vf-ink-2);
  margin: 0;
  flex: 1;
}
.rcat-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;
  min-height: 22px;
}
.rcat-cta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--vf-blue);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.rcat-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(10,15,26,0.06);
  color: var(--vf-ink-2);
}
.rcat-tag-consignment { background: rgba(46, 91, 255, 0.10); color: var(--vf-blue); }
.rcat-tag-cross-hire { background: rgba(245, 158, 11, 0.14); color: #b45309; }

/* ── Drawer ── */
.rcat-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 26, 0.48);
  z-index: 90;
  display: flex;
  /* Centre-peek modal sheet — kit detail floats in the middle of the
     viewport with visible scrim around all four edges. Click anywhere
     on the dim area to dismiss (handler already on the scrim div).
     Mirrors the cart drawer's centre-peek treatment for consistency. */
  justify-content: center;
  align-items: center;
  padding: 32px;
  animation: rcat-scrim-in 200ms ease;
}
@keyframes rcat-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.rcat-drawer {
  /* Bumped from 640/820 → 720/940 so the modal fills more of the
     viewport and most kit pages fit without scroll on a typical
     1440×900 laptop. Still leaves visible scrim around all four
     edges (centre-peek aesthetic). */
  width: min(720px, 100%);
  max-width: 100%;
  height: min(940px, 100%);
  max-height: 100%;
  background: white;
  overflow-y: auto;
  position: relative;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(10, 15, 26, 0.32);
  animation: rcat-drawer-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
}
@keyframes rcat-drawer-in {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Mobile (<=760px): collapse to a full-viewport sheet — the centre-
   peek padding wastes too much space on narrow screens. Matches the
   cart drawer's mobile override. */
@media (max-width: 760px) {
  .rcat-drawer-scrim { padding: 0; }
  .rcat-drawer {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
}
.rcat-drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.94);
  font-size: 22px;
  line-height: 1;
  color: var(--vf-ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(10,15,26,0.10);
}
/* Drawer image: show the FULL product photo (background-size: contain
   instead of cover) so square / portrait / odd-aspect product shots
   aren't cropped. The height ranges between a hero-ish 220px on
   narrow viewports and 360px on wide ones; the background-color
   provides a clean letterbox for any aspect mismatch. */
/* Drawer photo — uses the grid card's background-image approach but
   with a wider aspect-ratio and `cover` sizing so the photo fills the
   full modal width. Reverted from the inline-<img> approach because
   that approach yielded blank/zero-height photos in some cases. */
.rcat-drawer .rcat-photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  /* `contain` keeps the whole product visible — Booqable photos often
     pack several items into one frame, so cropping (cover) chopped the
     corners. Side/top letterboxing on tall photos is the price of
     showing the full product. */
  background-size: contain;
  background-position: center;
  background-color: #FAFAFA;
  background-repeat: no-repeat;
  /* Cap the photo height so the description + CTAs stay in view on a
     typical laptop without scrolling. */
  max-height: 340px;
}

/* Discreet admin-only ownership code top-right of the drawer
   (C-XX for consignment, X-XX for cross-hire). Sits just left of the
   close button — small, mono, low-contrast grey. Visible to admins
   who know the code system but functionally opaque to anyone else. */
.rcat-drawer-admin-code {
  position: absolute;
  top: 22px;
  right: 62px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(10, 15, 26, 0.42);
  background: rgba(255, 255, 255, 0.85);
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(10, 15, 26, 0.08);
  user-select: text;
}

/* Drawer action row: share button on the LEFT at ~20% width, Add to
   request on the RIGHT at ~80%. Share keeps the same pill shape as
   the primary CTA so the two read as a paired control rather than
   a primary+text-link combo. Primary dominance comes from width
   ratio + fill colour, not typography. */
.rcat-drawer-actions {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: stretch;
}
.rcat-drawer-share {
  flex: 0 0 22%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  /* Padding + font-size deliberately match .rcat-add-btn so both
     pills sit at the same height and baseline. The border on the
     share pill is 1px so we subtract 1px from the vertical padding
     here to keep the total outer height identical to the borderless
     primary CTA. */
  font-size: 14px;
  font-weight: 600;
  color: var(--vf-ink);
  background: white;
  border: 1px solid var(--vf-line);
  border-radius: 999px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.rcat-drawer-share:hover {
  background: rgba(31, 96, 255, 0.06);
  border-color: var(--vf-blue);
  color: var(--vf-blue);
}
.rcat-drawer-share.is-copied {
  background: rgba(31, 96, 255, 0.10);
  border-color: var(--vf-blue);
  color: var(--vf-blue);
}
.rcat-drawer-share svg { stroke: currentColor; flex-shrink: 0; }
/* The primary "Add to request" button absorbs all remaining row
   space — Add to request stays the dominant CTA. Zero out the stale
   margin-top from .rcat-add-btn's standalone styling (that 8px top
   margin was for the old vertical stack and now misaligns the row
   by pushing Add to request 8px below Share's top edge). */
.rcat-drawer-actions .rcat-add-btn {
  flex: 1 1 auto;
  margin-top: 0;
}
/* On narrow viewports the 20/80 split is too cramped for the share
   pill's icon + label; stack them. */
@media (max-width: 480px) {
  .rcat-drawer-actions { flex-direction: column-reverse; }
  .rcat-drawer-share { flex: 1 1 auto; }
}
.rcat-drawer-body { padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 14px; }
.rcat-drawer-body h2 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--vf-ink);
}
.rcat-drawer-price {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--vf-blue);
}
.rcat-drawer-price span {
  font-size: 12px;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
  letter-spacing: 0.05em;
  margin-left: 6px;
}
.rcat-drawer-desc { font-size: 14px; line-height: 1.6; color: var(--vf-ink-2); margin: 0; }

.rcat-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  padding: 16px 0;
  border-top: 1px solid var(--vf-line);
  border-bottom: 1px solid var(--vf-line);
  margin: 6px 0 0;
}
.rcat-specs > div { display: flex; flex-direction: column; gap: 2px; }
.rcat-specs dt {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
  font-weight: 600;
}
.rcat-specs dd { margin: 0; font-size: 13px; color: var(--vf-ink); font-weight: 500; }

.rcat-qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 6px;
}
.rcat-qty-row label { font-size: 13px; font-weight: 600; color: var(--vf-ink); }
.rcat-qty-stepper { display: inline-flex; align-items: center; gap: 0; }
.rcat-qty-stepper button {
  width: 32px;
  height: 32px;
  border: 1px solid var(--vf-line);
  background: white;
  color: var(--vf-ink);
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
}
.rcat-qty-stepper button:first-child { border-radius: 8px 0 0 8px; }
.rcat-qty-stepper button:last-child { border-radius: 0 8px 8px 0; }
.rcat-qty-stepper input {
  width: 48px;
  height: 32px;
  border: 1px solid var(--vf-line);
  border-left: 0;
  border-right: 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  -moz-appearance: textfield;
}
.rcat-qty-stepper input::-webkit-outer-spin-button,
.rcat-qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.rcat-note {
  font-size: 12px;
  line-height: 1.5;
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
}
.rcat-note-shelf { background: rgba(34, 197, 94, 0.08); color: #166534; }
.rcat-note-xhire { background: rgba(245, 158, 11, 0.10); color: #92400e; }

.rcat-add-btn {
  margin-top: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  border: 0;
  background: var(--vf-ink);
  color: white;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 180ms ease, transform 180ms ease;
}
.rcat-add-btn:hover { background: var(--vf-blue); transform: translateY(-1px); }
.rcat-drawer-fine {
  font-size: 11px;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
  text-align: center;
  margin: 4px 0 0;
}

@media (max-width: 960px) {
  .rcat-layout { grid-template-columns: 1fr; }
  .rcat-filters { position: static; }
}
@media (max-width: 760px) {
  /* Top padding bumped 56→110px to match .rentals-subhero mobile rhythm
     so the title lands in the same place as other rentals sub-pages. */
  .rcat-page { padding: 110px 16px 72px; }
  .rcat-head { margin-bottom: 24px; }
  .rcat-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .rcat-drawer-body { padding: 22px 22px 32px; }
}
@media (max-width: 480px) {
  .rcat-grid { grid-template-columns: 1fr; }
}

/* Insurance recommendation card — used in the Insurance FAQ entry
   and in the Open Account welcome step. Restrained, contextual,
   uses the rentals blue accent rather than a high-contrast surface
   so it sits naturally inside both a FAQ answer and a wizard step. */
.rentals-insurance-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid var(--vf-line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(46, 91, 255, 0.04), rgba(46, 91, 255, 0.02));
  margin: 8px 0;
}
.rentals-insurance-card .ri-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(46, 91, 255, 0.10);
  color: var(--vf-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rentals-insurance-card .ri-body { flex: 1; min-width: 0; }
.rentals-insurance-card h4 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--vf-ink);
  line-height: 1.25;
}
.rentals-insurance-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--vf-ink-2);
}
.rentals-insurance-card .ri-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--vf-blue);
  color: white;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}
.rentals-insurance-card .ri-cta:hover {
  background: var(--vf-ink);
  transform: translateY(-1px);
}
.rentals-insurance-card .ri-fine {
  margin-top: 8px;
  font-size: 12px;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
  line-height: 1.5;
}
.rentals-insurance-card.is-compact { padding: 14px 16px; }
.rentals-insurance-card.is-compact h4 { font-size: 14px; }
.rentals-insurance-card.is-compact p { font-size: 12.5px; }
.rentals-insurance-card.is-compact .ri-cta { margin-top: 8px; }

@media (max-width: 480px) {
  .rentals-insurance-card { flex-direction: column; gap: 10px; padding: 16px; }
}

/* Hours toggle on /rentals/about — Staffed | Collection & returns.
   Mirrors the .kind-toggle pattern used on the form. */
.rentals-hours-card { padding: 22px 22px 18px; border: 1px solid var(--vf-line); border-radius: 14px; background: white; }
.rentals-hours-toggle {
  display: inline-flex;
  background: #F2F4F8;
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 14px;
}
.rentals-hours-toggle button {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border: 0;
  background: transparent;
  color: var(--vf-ink-2);
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.rentals-hours-toggle button:hover { color: var(--vf-ink); }
.rentals-hours-toggle button.is-active {
  background: white;
  color: var(--vf-ink);
  box-shadow: 0 1px 3px rgba(10,15,26,0.10);
}

/* Delivery rate card */
.rentals-delivery-card {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--vf-line);
  border-radius: 14px;
  background: white;
}
.rentals-delivery-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  font-weight: 700;
}
.rentals-delivery-sub {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--vf-ink-2);
}
/* Orphan: .rentals-delivery-rates / .rentals-delivery-note were removed
   when the Delivery dl was unified with the Staffed Hours / Collection
   table treatment (May 2026 — same .rentals-hours dl rules apply now,
   inherited via .rentals-logistics-card dl). */

/* Hide the Booqable cart bubble — its slot is taken by our own
   FloatingRentalsSearch widget. Booqable still loads (we use it for
   date-picker widgets on the equipment page) but its UI is suppressed
   site-wide. */
body.is-rentals-page #booqable-launcher,
body.is-rentals-page #booqable-sidebar {
  display: none !important;
}

/* Floating search + cart — full-width fixed strip. The cluster is
   centred by flex, then transformed to its target X position. On
   Equipment we leave it centred; everywhere else it shifts right via
   transform to park 24px from the viewport edge. Animating the
   cluster's transform (rather than the wrapper's anchor) lets it
   smoothly "tuck" between bottom-centre and bottom-right as the user
   moves in and out of /rentals/equipment. */
/* Floor-fade — soft dark gradient + light backdrop blur fading in
   from the bottom of the equipment page, providing clarity for the
   floating search bar (z-index 85) and the chip strip (z-index 84)
   sitting above it. mask-image on the gradient gives a clean fade-in
   for the blur at the top edge instead of a hard line. Visibility
   (and the blur strength) is toggled via body.is-rentals-equipment
   so the transition runs both ways on route change.
   Tuning history:
     v1: blur(10px) + gradient max 0.14 — blur too dominant
     v2: blur(4px)  + gradient max 0.22 — current. Dark wash carries
         more of the contrast; blur is a subtle softening rather
         than the headline effect. */
.rcat-floor-fade {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  z-index: 78;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom,
    rgba(10, 15, 26, 0) 0%,
    rgba(10, 15, 26, 0.06) 30%,
    rgba(10, 15, 26, 0.14) 65%,
    rgba(10, 15, 26, 0.22) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 38%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 38%);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: opacity 420ms ease, backdrop-filter 420ms ease, -webkit-backdrop-filter 420ms ease;
}
body.is-rentals-equipment .rcat-floor-fade {
  opacity: 1;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
@media (prefers-reduced-motion: reduce) {
  .rcat-floor-fade { transition: opacity 200ms ease; }
}

.rentals-floating-search {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  z-index: 85;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
/* Two layers of transform so the page-mode tuck and the hover lift
   don't share a transition duration. OUTER .rfs-cluster handles the
   X-shift; INNER .rfs-lift handles hover Y/scale.
   May 2026: tuck duration retimed from 820ms ease-out-expo to 720ms
   Material standard ease-in-out — matches the bar's width/padding/
   gap transitions exactly, so all properties land at the same
   moment. Previously the cluster's front-loaded easing finished
   sweeping into place while the bar was still leisurely expanding
   to full width, which read as a "jump" mid-transition. */
.rfs-cluster {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
  --rfs-x: calc(50vw - 24px - 50%);  /* park at viewport-right - 24px */
  transform: translate3d(var(--rfs-x), 0, 0);
  transform-origin: bottom right;
  transition:
    transform 720ms cubic-bezier(0.4, 0, 0.2, 1),
    gap 720ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  backface-visibility: hidden;
  isolation: isolate;
}
/* Inner lift wrapper — receives the fast hover scale/Y without the
   820ms page-tuck duration baked in. Children (.rfs-bar-wrap and
   .rfs-cart-wrap) sit inside this. */
.rfs-lift {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  --rfs-y: 0px;
  --rfs-scale: 1;
  transform: translate3d(0, var(--rfs-y), 0) scale(var(--rfs-scale));
  transform-origin: bottom right;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rfs-cluster:hover .rfs-lift { --rfs-y: -6px; --rfs-scale: 1.04; }
.rfs-cluster:has(.rfs-cart:hover) { gap: 22px; }
/* Equipment page: cluster centres in the viewport (transform-x → 0). */
body.is-rentals-equipment .rfs-cluster { --rfs-x: 0px; }
.rentals-floating-search .rfs-mini { pointer-events: auto; }

/* Wrap around just the search bar — provides the anchor (position:
   relative) for the search-results .rfs-mini panel, and scopes the
   search hover trigger to this side only so cart-hover doesn't open
   both popups. */
.rfs-bar-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

/* Liquid-glass search bar — Apple-style frost with strong saturation,
   barely-there fill, specular top highlight, soft bottom shading.
   The pill is the surface; the ::before and ::after pseudos layer
   on the "wet glass" specular gradients. */
.rfs-bar {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 22px;
  width: 420px;
  max-width: calc(100vw - 32px);
  border-radius: 999px;
  /* Near-zero fill — almost all of the colour comes from the blurred
     backdrop, saturated and brightened so the page beneath glows
     through cleanly. */
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(34px) saturate(220%) brightness(108%);
  backdrop-filter: blur(34px) saturate(220%) brightness(108%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    /* Inner top highlight — the specular line that says "convex" */
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    /* Inner bottom shadow — gives the surface a slight bulge */
    0 -1px 0 rgba(10, 15, 26, 0.06) inset,
    /* Outer drop shadow — lifts the pill off the page */
    0 18px 50px rgba(10, 15, 26, 0.14),
    0 4px 10px rgba(10, 15, 26, 0.06);
  transition:
    box-shadow 220ms var(--ease-out, ease),
    background 220ms ease,
    border-color 220ms ease,
    color 220ms ease,
    transform 220ms var(--ease-out, ease),
    /* Width / padding / gap animate when `is-rentals-compact` toggles
       on About and Open Account, so the bar can collapse to icon-only
       and re-expand on hover without a snap. 720ms with Material's
       standard ease-in-out — gentle acceleration at both ends, so
       the morph reads as one slow, deliberate breath rather than a
       snappy ease-out that lunges out of the resting state. */
    width 720ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 720ms cubic-bezier(0.4, 0, 0.2, 1),
    gap 720ms cubic-bezier(0.4, 0, 0.2, 1);
  isolation: isolate;
  overflow: hidden;
}
/* Top specular highlight — a soft white sheen across the upper
   third of the pill, the way light catches a glass dome. */
.rfs-bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.30) 0%,
    rgba(255, 255, 255, 0.06) 38%,
    rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
  z-index: -1;
}
/* Faint bottom-edge gleam — picks up "ground" colour for that
   underwater shimmer feeling. */
.rfs-bar::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 35%;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 100%);
  pointer-events: none;
  z-index: -1;
}
.rfs-bar:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.50);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 -1px 0 rgba(10, 15, 26, 0.06) inset,
    0 24px 60px rgba(10, 15, 26, 0.18),
    0 6px 14px rgba(10, 15, 26, 0.08);
}
.rfs-bar:focus-within {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(46, 91, 255, 0.45);
}
.rfs-icon {
  flex-shrink: 0;
  color: rgba(10, 15, 26, 0.65);
}
.rfs-bar input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--vf-ink);
  /* Explicit line-height gives the caret vertical breathing room
     inside the bar's overflow:hidden pill — without it the browser
     uses font-metrics derived line-height (~17px) and the caret
     can render right at the top/bottom edges, where the pill's
     rounded clipping shaves a pixel off. 1.6 ≈ 24px, comfortably
     inside the bar's 50px interior. */
  line-height: 1.6;
  /* Fades in/out when the cluster collapses to compact mode (the bar's
     overflow:hidden already clips the box, this just keeps the text
     from snapping). 480ms with the same gentle ease-in-out as the
     bar morph so the input quietly comes into / out of view in step
     with the surrounding pill resize. */
  transition: opacity 480ms cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: -0.005em;
}
.rfs-bar input::placeholder { color: rgba(10, 15, 26, 0.55); }
.rfs-bar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* Mini panels — centre-anchored above the SEARCH BAR specifically
   (the bar is the first flex item at left: 0 of the cluster, 420px
   wide, so its centre is at 210px). Always in the DOM; visibility is
   toggled by the `is-open` class so the panel can cross-fade with
   the cart preview if the user sweeps from one side to the other. */
.rfs-mini {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 210px;
  background: white;
  border: 1px solid var(--vf-line);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(10, 15, 26, 0.14);
  padding: 10px;
  min-width: 280px;
  /* Default — hidden. is-open transitions opacity + Y for a smooth
     reveal. visibility coordinates with opacity so the hidden panel
     doesn't steal hover events. translateZ(0) promotes to its own
     compositor layer so the cross-fade with .rfs-cart-preview runs
     on the GPU. */
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(6px) translateZ(0);
  pointer-events: none;
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 280ms;
}
.rfs-mini.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) translateZ(0);
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}
.rfs-mini::after {
  /* Centre peak — small triangle pointing down at the bar. */
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-top-color: white;
  border-bottom: 0;
  filter: drop-shadow(0 2px 1px rgba(10, 15, 26, 0.06));
}
.rfs-mini-head {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
  padding: 4px 10px 6px;
  font-weight: 700;
}
.rfs-mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--vf-ink);
  cursor: pointer;
  border-radius: 8px;
  text-align: left;
}
.rfs-mini-row:hover { background: rgba(46, 91, 255, 0.06); }
.rfs-mini-icon {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--vf-ink-3, rgba(10,15,26,0.45));
  width: 12px;
  text-align: center;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .rentals-floating-search { bottom: 16px; }
  /* On mobile, drop the page-mode X shift so the cluster sits
     centred at the bottom of the viewport regardless of route. */
  .rfs-cluster { --rfs-x: 0px; }
  /* Reserve room for the cart (56px) + gap (8px) + 16px buffer so the
     cluster total stays within the viewport on all pages. */
  .rfs-bar { padding: 11px 16px; max-width: calc(100vw - 96px); }
}

/* Combined Collection / Delivery logistics card on /rentals/about.
   Shares the toggle look with the .rentals-hours-card above. */
.rentals-logistics-card {
  margin-top: 22px;
  padding: 22px;
  border: 1px solid var(--vf-line);
  border-radius: 14px;
  background: white;
}
.rentals-logistics-card .rentals-hours-toggle { margin-bottom: 14px; }
.rentals-logistics-card dl { margin-bottom: 14px; }
.rentals-logistics-card .rentals-hours-note { margin-bottom: 18px; }

/* Map card embedded inside the logistics block — strip the outer
   border-radius/padding that the standalone version uses so the map
   reads as a continuation of the same card. */
.rentals-logistics-card .rentals-map-card {
  margin: 18px -22px -22px;
  border-radius: 0 0 14px 14px;
  border-top: 1px solid var(--vf-line);
  padding: 18px 22px 0;
}
.rentals-logistics-card .rentals-map-card h3,
.rentals-logistics-card .rentals-map-card .rentals-map-sub {
  padding-left: 0;
  padding-right: 0;
}
/* The SVG should still span flush to the card edges — pull only the
   frame back out from the padded text container. */
.rentals-logistics-card .rentals-map-card .rentals-map-frame {
  margin: 0 -22px -22px;
}

/* Staffed-hours h3 — was previously implicit when the toggle wrapped
   both states. Now an explicit title. */
.rentals-hours-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  font-weight: 700;
}

/* Cart pill — sibling to the search bar inside the cluster. Same
   liquid-glass treatment as the bar so the two read as a pair.
   On its own hover it bumps up, gains weight, and lets the cluster
   gap-transition pull it away from the bar. */
.rfs-cart {
  position: relative;
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  /* 999px renders as a perfect circle at 56×56 (same as 50% would)
     but transitions cleanly into a horizontal pill when the cart
     widens on /rentals/equipment to reveal the "Cart" label. */
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(34px) saturate(220%) brightness(108%);
  backdrop-filter: blur(34px) saturate(220%) brightness(108%);
  color: rgba(10, 15, 26, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 -1px 0 rgba(10, 15, 26, 0.06) inset,
    0 18px 50px rgba(10, 15, 26, 0.14),
    0 4px 10px rgba(10, 15, 26, 0.06);
  /* Match the cluster's transform/gap easing so the bubble-out
     feels like a single fluid motion. No overshoot — the cart
     glides into its expanded size rather than bouncing. */
  transition:
    background 560ms cubic-bezier(0.32, 0.72, 0.24, 1),
    border-color 560ms cubic-bezier(0.32, 0.72, 0.24, 1),
    box-shadow 560ms cubic-bezier(0.32, 0.72, 0.24, 1),
    color 280ms ease,
    transform 560ms cubic-bezier(0.32, 0.72, 0.24, 1),
    /* Sizing transitions slowed to 720ms with Material's standard
       ease-in-out (matching the bar's morph above) so the whole
       cluster — bar, cart, and label — resizes as one continuous
       motion with gentle acceleration at both ends. */
    width 720ms cubic-bezier(0.4, 0, 0.2, 1),
    height 720ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 720ms cubic-bezier(0.4, 0, 0.2, 1),
    gap 720ms cubic-bezier(0.4, 0, 0.2, 1);
  isolation: isolate;
  /* No `overflow: hidden` here — the badge sits outside the button's
     bounds, and the specular ::before pseudo is already clipped to a
     circle via its own border-radius:inherit. Removing overflow:hidden
     stops the badge being chopped at the top-right corner. */
  will-change: transform;
}
/* Cart text label — rendered on every page but only revealed on
   /rentals/equipment via the body-class rule below. The pair of
   max-width + opacity transitions cleanly collapses the label out
   of flow on non-equipment pages without the layout snap that a
   `display: none` would cause. White-space: nowrap keeps it on
   one line during the max-width sweep. */
.rfs-cart-label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: rgba(10, 15, 26, 0.85);
  /* Both properties unified at 720ms with the same gentle ease-in-out
     as the cart's width / padding / gap above, so the label growing
     in width and fading in reads as one continuous motion perfectly
     synchronised with the pill expansion — no part of the morph
     leads or lags. Colour fades in step with the bar/cart for the
     over-dark scroll swap. */
  transition:
    max-width 720ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 720ms cubic-bezier(0.4, 0, 0.2, 1),
    color 280ms ease;
}
.rfs-cart::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0) 70%);
  pointer-events: none;
  z-index: -1;
}
.rfs-cart:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.60);
  /* Slightly bigger expansion than before — reads as a deliberate
     "pop" without overshooting. */
  transform: scale(1.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 -1px 0 rgba(10, 15, 26, 0.06) inset,
    0 28px 64px rgba(10, 15, 26, 0.20),
    0 8px 18px rgba(10, 15, 26, 0.10);
}
.rfs-cart:focus-visible { outline: 3px solid rgba(46, 91, 255, 0.45); outline-offset: 3px; }
.rfs-cart-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--vf-blue);
  color: white;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: rfs-badge-in 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes rfs-badge-in { from { transform: scale(0); } to { transform: scale(1); } }

/* Pulse the cart icon when the line-count goes up — fires for ~480ms
   after `cart.add()` and gives a clear "yes, that landed" cue once the
   catalog drawer has auto-closed. The badge gets a slightly punchier
   pulse so it reads from across the page. Respects reduced motion. */
.rfs-cart.is-bump {
  animation: rfs-cart-bump 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rfs-cart.is-bump .rfs-cart-badge {
  animation: rfs-badge-bump 480ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes rfs-cart-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.14); }
  70%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
@keyframes rfs-badge-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  70%  { transform: scale(0.92); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .rfs-cart.is-bump,
  .rfs-cart.is-bump .rfs-cart-badge { animation: none; }
}

/* === Cart drawer — slide-from-right wizard === */
.rcart-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 26, 0.48);
  z-index: 95;
  display: flex;
  /* Centre-peek modal sheet — the panel sits in the middle with a
     visible scrim around all four edges so the user can dismiss by
     clicking the dim area. align-items lets the drawer's own
     max-height drive its vertical size; padding gives the minimum
     gap from the viewport edge so the panel never touches the edge
     even at smaller viewports. */
  justify-content: center;
  align-items: center;
  padding: 32px;
  animation: rcart-scrim-in 240ms ease;
}
@keyframes rcart-scrim-in { from { opacity: 0; } to { opacity: 1; } }

.rcart-drawer {
  width: min(1200px, 100%);
  max-width: 100%;
  height: min(900px, 100%);
  max-height: 100%;
  background: white;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  box-shadow: 0 18px 60px rgba(10, 15, 26, 0.32);
  overflow: hidden;
  /* position:relative anchors .rcart-modal-backdrop (the email-prompt
     modal). The backdrop covers the drawer aside, not the whole
     viewport — we want it scoped to the cart so it doesn't darken
     the rest of the page (which is already dimmed by .rcart-scrim). */
  position: relative;
  animation: rcart-drawer-in 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes rcart-drawer-in {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* The drawer's inner head + body normally have 32px horizontal
   padding; on wider screens they get extra padding so the content
   column doesn't stretch too far. The 540 here gives a content max
   of 1080px which matches the modal's 1200px outer width minus
   60px of side comfort. Floor stays at 32px so narrow viewports
   keep their original margins. */
.rcart-head,
.rcart-body {
  padding-left: max(32px, calc(50% - 540px));
  padding-right: max(32px, calc(50% - 540px));
}

/* Mobile (<= 760px): the peek behaviour wastes precious screen
   space — collapse the modal back to filling its viewport area.
   The scrim's outer padding shrinks too so the modal touches the
   edges (no double margins on small screens). */
@media (max-width: 760px) {
  .rcart-scrim { padding: 0; }
  .rcart-drawer {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    box-shadow: none;
  }
}

.rcart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 28px 32px 18px;
  border-bottom: 1px solid var(--vf-line);
  flex-shrink: 0;
}
.rcart-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  font-weight: 700;
  margin-bottom: 6px;
}
.rcart-head h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vf-ink);
  line-height: 1.1;
}
.rcart-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: rgba(10, 15, 26, 0.06);
  color: var(--vf-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 160ms ease;
}
.rcart-close:hover { background: rgba(10, 15, 26, 0.10); }

/* Title block sits in the middle of the head row, with the head-back
   pinned left (when present) and close pinned right. Without an
   explicit flex:1 on the title, the row collapses to fit-content and
   the close button hugs the title instead of the right edge. */
.rcart-head-titleblock { flex: 1; min-width: 0; }
.rcart-head-back {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--vf-line);
  background: white;
  color: var(--vf-ink-2);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}
.rcart-head-back:hover {
  border-color: var(--vf-blue);
  color: var(--vf-blue);
}

/* Email modal — overlays the drawer body. Backdrop covers the entire
   drawer aside (position: absolute relative to .rcart-drawer). The
   modal card itself centres in that backdrop. Used for Send / Download
   email capture — the user has chosen an action and we ask for the
   email contextually, rather than as an inline form field. */
.rcart-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 26, 0.42);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: rcart-modal-fade 200ms ease;
}
.rcart-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: 16px;
  padding: 28px 28px 24px;
  box-shadow: 0 22px 60px rgba(10, 15, 26, 0.28);
  animation: rcart-modal-rise 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rcart-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: rgba(10, 15, 26, 0.06);
  color: var(--vf-ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease;
}
.rcart-modal-close:hover { background: rgba(10, 15, 26, 0.12); }
.rcart-modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-blue);
  font-weight: 700;
  margin-bottom: 6px;
}
.rcart-modal h3 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vf-ink);
  line-height: 1.15;
}
.rcart-modal-desc {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--vf-ink-2);
}
.rcart-modal-input {
  width: 100%;
  margin-bottom: 14px;
  font-size: 15px;
}
.rcart-modal-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.rcart-modal-error { margin-top: 12px; }
@keyframes rcart-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rcart-modal-rise {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .rcart-modal-backdrop, .rcart-modal { animation: none; }
}

.rcart-steps {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 14px 32px;
  border-bottom: 1px solid var(--vf-line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}
.rcart-steps li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--vf-ink-3);
}
.rcart-steps li:not(:last-child)::after {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--vf-line);
  margin-left: 6px;
}
.rcart-step-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(10, 15, 26, 0.06);
  color: var(--vf-ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.rcart-steps li.is-on { color: var(--vf-ink); }
.rcart-steps li.is-on .rcart-step-dot { background: var(--vf-blue); color: white; }
.rcart-steps li.is-done .rcart-step-dot { background: rgba(34, 197, 94, 0.18); color: #166534; }

.rcart-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}

.rcart-empty {
  text-align: center;
  padding: 36px 0;
  color: var(--vf-ink-2);
}
.rcart-fine {
  font-size: 12px;
  color: var(--vf-ink-3);
  line-height: 1.55;
  margin: 12px 0 0;
}

.rcart-lines {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rcart-line {
  display: grid;
  grid-template-columns: 56px 1fr auto 24px;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  background: #FAFBFC;
}
/* Staff mode adds a leading drag-handle column AND a trailing
   Booqable-deep-link column (between qty and ×). Without this
   override, the drag <span> would take the thumb's grid cell and
   shove qty into the × column. */
.rcart-line-staff {
  grid-template-columns: 18px 56px 1fr auto 22px 24px;
  gap: 10px;
}
/* Synth lines (after-hours, delivery legs) stay in the original 4-col
   grid (they only have thumb/body/total — no drag, no qty, no remove)
   but need a matching left indent in staff mode so their thumb visually
   lines up with the kit-line thumb (which sits 18px + 10px gap = 28px
   right of where it would normally start). */
.rcart-lines.is-staff .rcart-line-synth {
  padding-left: 42px;
}
.rcart-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background-color: #eaeaea;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--vf-line);
}
.rcart-thumb-fallback { background: linear-gradient(135deg, #e5e7eb, #cbd5e1); }
.rcart-line-body { min-width: 0; }
.rcart-line-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--vf-ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcart-line-rate {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--vf-blue);
  margin-top: 2px;
}
/* Per-line discount badge — slim green pill next to the rate when a
   coupon hits this item. Hover reveals a small floating tooltip
   ("Full discount · Valley Rentals kit" or "Partial discount ·
   Consignment kit") via a ::after pseudo-element driven by data-tip. */
.rcart-line-discount {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(27, 156, 95, 0.12);
  color: #157a4a;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: default;
  transition: background-color 200ms ease;
}
.rcart-line-discount:hover { background: rgba(27, 156, 95, 0.20); }
/* Floating tooltip — fades + slides up subtly on hover. Pointer
   events disabled so the tip itself doesn't trap the cursor. */
.rcart-line-discount::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translate(-50%, 4px);
  background: var(--vf-ink);
  color: white;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 5;
  box-shadow: 0 4px 12px rgba(10, 15, 26, 0.18);
}
.rcart-line-discount:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 60ms;
}
/* Discount summary row — sits between the line items and the
   day-rate subtotal so the customer sees the savings explicitly. */
.rcart-discount-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0 0;
  font-size: 13px;
  color: var(--vf-ink-2);
}
.rcart-discount-code {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(27, 156, 95, 0.10);
  color: #157a4a;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rcart-discount-amount {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: #157a4a;
}
.rcart-subtotal-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--vf-ink-3);
  margin-left: 4px;
}

/* Custom items — off-catalog lines added via the "Add custom item"
   form below the order list. Visually distinct so they're clearly
   user-entered rather than catalog kit. */
.rcart-line-custom { background: rgba(46, 91, 255, 0.025); }
.rcart-thumb-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(46, 91, 255, 0.08);
  color: var(--vf-blue);
  font-size: 18px;
}
.rcart-line-custom-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(46, 91, 255, 0.10);
  color: var(--vf-blue);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: middle;
}
.rcart-line-custom-notes {
  margin-top: 4px;
  font-size: 11.5px;
  font-style: italic;
  color: var(--vf-ink-3);
  line-height: 1.4;
}

/* Trigger button — flat, dashed, sits as a row beneath the items
   list. Subtle by design — most users won't need it. */
.rcart-custom-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 9px 14px;
  border: 1px dashed var(--vf-line);
  border-radius: 10px;
  background: transparent;
  color: var(--vf-ink-3);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.rcart-custom-trigger:hover {
  border-color: var(--vf-blue);
  color: var(--vf-blue);
  background: rgba(46, 91, 255, 0.03);
}
.rcart-custom-trigger.is-staff {
  border-color: rgba(214, 153, 26, 0.4);
  color: #b87f0e;
}
.rcart-custom-trigger.is-staff:hover {
  border-color: #d6991a;
  background: rgba(214, 153, 26, 0.05);
}
.rcart-custom-trigger-staff {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(214, 153, 26, 0.12);
  color: #b87f0e;
}

/* Expanded form — appears in place of the trigger button. */
.rcart-custom-form {
  margin-top: 10px;
  padding: 14px;
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  background: rgba(46, 91, 255, 0.025);
}
.rcart-custom-form.is-staff {
  border-color: rgba(214, 153, 26, 0.45);
  background: rgba(214, 153, 26, 0.04);
}
.rcart-custom-form-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink);
  margin-bottom: 10px;
}
.rcart-custom-form-staff {
  font-size: 9.5px;
  color: #b87f0e;
  letter-spacing: 0.06em;
}
.rcart-custom-field {
  display: block;
  margin-bottom: 9px;
}
.rcart-custom-field > span {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  margin-bottom: 3px;
}
.rcart-custom-field input {
  width: 100%;
  padding: 8px 11px;
  border: 1px solid var(--vf-line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--vf-ink);
  background: white;
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.rcart-custom-field input:focus {
  border-color: var(--vf-blue);
  box-shadow: 0 0 0 3px rgba(46, 91, 255, 0.12);
}
.rcart-custom-form.is-staff .rcart-custom-field input:focus {
  border-color: #d6991a;
  box-shadow: 0 0 0 3px rgba(214, 153, 26, 0.15);
}
.rcart-custom-row {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 10px;
}
.rcart-custom-field-qty input { text-align: center; }
.rcart-custom-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.rcart-custom-cancel,
.rcart-custom-save {
  padding: 7px 13px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.rcart-custom-cancel {
  background: transparent;
  border-color: var(--vf-line);
  color: var(--vf-ink-2);
}
.rcart-custom-cancel:hover { border-color: var(--vf-ink); color: var(--vf-ink); }
.rcart-custom-save {
  background: var(--vf-blue);
  color: white;
}
.rcart-custom-save:disabled { opacity: 0.45; cursor: not-allowed; }
.rcart-custom-save:not(:disabled):hover { background: var(--vf-blue-700, #063F96); }
.rcart-custom-form.is-staff .rcart-custom-save {
  background: #d6991a;
}
.rcart-custom-form.is-staff .rcart-custom-save:not(:disabled):hover {
  background: #b87f0e;
}
.rcart-line-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--vf-line);
  border-radius: 8px;
  overflow: hidden;
  background: white;
}
.rcart-line-qty button {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  color: var(--vf-ink);
  font-family: inherit;
}
.rcart-line-qty input {
  width: 36px;
  height: 28px;
  text-align: center;
  border: 0;
  border-left: 1px solid var(--vf-line);
  border-right: 1px solid var(--vf-line);
  font-family: var(--font-mono);
  font-size: 12px;
  -moz-appearance: textfield;
  background: transparent;
}
.rcart-line-qty input::-webkit-outer-spin-button,
.rcart-line-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rcart-line-remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--vf-ink-3);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, color 160ms ease;
}
.rcart-line-remove:hover { background: rgba(220, 38, 38, 0.10); color: #b91c1c; }

.rcart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0 0;
  border-top: 1px solid var(--vf-line);
  font-size: 13px;
  color: var(--vf-ink-2);
}
.rcart-subtotal-num {
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--vf-blue);
  text-align: right;
}

/* Estimated grand total — appears below the day-rate subtotal when
   there's any reason to multiply out (multi-day, after-hours, or
   delivery). Visually heavier than the subtotal so the eye lands
   there for actual decision-making, while the subtotal stays as the
   per-day reference figure above. */
.rcart-grandtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0 4px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--vf-ink);
}
.rcart-grandtotal-note {
  font-size: 11px;
  color: var(--vf-ink-3);
  font-weight: 500;
}
.rcart-grandtotal-num {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--vf-ink);
}

/* Synthetic line items (after-hours + delivery legs) — same row chrome
   as user-curated kit lines but with a softer treatment so the eye
   reads them as derived-from-other-state. No qty stepper, no remove
   × — modified by toggling After-hours times or the Logistics block. */
.rcart-line-synth {
  background: rgba(74, 124, 255, 0.04);
}
.rcart-line-synth .rcart-line-name {
  color: var(--vf-ink);
}
.rcart-line-synth-total {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--vf-blue);
  margin-left: auto;
  padding-left: 12px;
}
.rcart-line-synth-quote .rcart-line-synth-total {
  color: var(--vf-ink-3);
}
.rcart-thumb-synth {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(74, 124, 255, 0.08) !important;
  color: var(--vf-blue);
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-mono);
}

/* Discreet admin-only ownership code inline with the line name
   (e.g. "Aputure 1200X  X-SB"). Same visual treatment as the drawer
   code — small, mono, low-contrast — so it reads as metadata, not
   a public-facing label. */
.rcart-line-admin-code {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--vf-ink-3);
  background: rgba(10, 15, 26, 0.05);
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
}

/* === Logistics block: collection ↔ delivery toggle, per leg ===
   Two stacked legs (Out + Back); each leg has a Collection/Delivery
   radio pair. Delivery expands to show address + zone picker, with
   the chosen zone driving the price that lands as a synthetic line
   item above. Collection collapses to a compact "from Valley Rentals
   · W3 7QS" reminder with the full address as a hover tooltip. */
.rcart-logistics {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rcart-leg {
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  padding: 12px 14px;
  background: white;
  transition: border-color 160ms ease, background 160ms ease;
}
.rcart-leg.is-delivery {
  border-color: rgba(74, 124, 255, 0.35);
  background: rgba(74, 124, 255, 0.03);
}
.rcart-leg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rcart-leg-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  min-width: 36px;
}
.rcart-leg-toggle {
  display: inline-flex;
  background: rgba(10, 15, 26, 0.05);
  border-radius: 999px;
  padding: 2px;
}
.rcart-leg-toggle-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  color: var(--vf-ink-2);
  transition: background 160ms ease, color 160ms ease;
}
.rcart-leg-toggle-btn:hover { color: var(--vf-ink); }
.rcart-leg-toggle-btn.is-on {
  background: white;
  color: var(--vf-blue);
  box-shadow: 0 1px 4px rgba(10, 15, 26, 0.06);
}
.rcart-leg-collection {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--vf-ink-3);
}
.rcart-leg-collection-pin { display: inline-flex; color: var(--vf-ink-3); }
.rcart-leg-collection-text strong { color: var(--vf-ink); font-weight: 600; }
.rcart-leg-collection-full {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: none;
  padding: 8px 12px;
  background: var(--vf-ink);
  color: white;
  font-size: 11px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(10, 15, 26, 0.18);
}
.rcart-leg-collection:hover .rcart-leg-collection-full,
.rcart-leg-collection:focus-within .rcart-leg-collection-full {
  display: block;
}
.rcart-leg-delivery {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.rcart-leg-row {
  display: grid;
  grid-template-columns: 1fr 100px;
  gap: 8px;
}
@media (max-width: 480px) {
  .rcart-leg-row { grid-template-columns: 1fr; }
}
.rcart-leg-input {
  padding: 9px 12px;
  border: 1px solid var(--vf-line);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--vf-ink);
  background: white;
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.rcart-leg-input-postcode {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rcart-leg-input-postcode::placeholder {
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
}
.rcart-leg-input:focus {
  border-color: var(--vf-blue);
  box-shadow: 0 0 0 3px rgba(46, 91, 255, 0.10);
}
/* Zone is now auto-classified from the postcode (see classifyDeliveryZone)
   so the user no longer picks chips manually. The auto-classified
   result lands in this status row instead. */
.rcart-leg-zone-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--vf-ink-2);
  background: rgba(74, 124, 255, 0.06);
  border: 1px solid rgba(74, 124, 255, 0.18);
}
.rcart-leg-zone-status.is-pending {
  background: rgba(10, 15, 26, 0.04);
  border-color: rgba(10, 15, 26, 0.08);
  color: var(--vf-ink-3);
  font-style: italic;
}
.rcart-leg-zone-status.is-quote {
  background: rgba(232, 174, 60, 0.10);
  border-color: rgba(232, 174, 60, 0.35);
  color: rgb(140, 100, 20);
}
.rcart-leg-travel {
  color: var(--vf-ink-3);
  font-size: 11.5px;
}

/* Collapsed-state summary for the Location block — single row per
   leg with "OUT / BACK" eyebrow and a one-line description. Wears
   the same card chrome as .rcart-dates-summary so the two sections
   read as a coherent pair when collapsed. */
.rcart-loc-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  background: rgba(46, 91, 255, 0.03);
}
.rcart-loc-summary-leg {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 14px;
  color: var(--vf-ink-2);
}
.rcart-loc-summary-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  min-width: 36px;
}
.rcart-loc-summary-text {
  color: var(--vf-ink);
  font-weight: 600;
  flex: 1;
}

/* Total driver-time hint at the bottom of the expanded Location
   block when either leg is delivery. Sums the rounded billed hours
   so the user sees what's going on their invoice. */
.rcart-loc-travel-total {
  margin: 4px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(10, 15, 26, 0.03);
  font-size: 12px;
  color: var(--vf-ink-2);
}
.rcart-loc-travel-total strong { color: var(--vf-ink); font-weight: 700; }

/* Step 0 (Request) composer — items list sits in its own block, then
   a hairline divider, then the dates picker as a labelled sub-section.
   Keeps both pieces visible on the first screen so the wizard feels
   like one form rather than three. */
.rcart-dates-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(10, 15, 26, 0.08);
}
.rcart-section-h {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--vf-ink-2);
}

/* Step form fields */
.rcart-fields { display: flex; flex-direction: column; gap: 16px; }
.rcart-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rcart-fields label,
.rcart-field-full {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rcart-fields label span,
.rcart-field-full span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  font-weight: 600;
}
.rcart-fields label em { text-transform: none; letter-spacing: 0; font-style: normal; color: rgba(10,15,26,0.40); font-weight: 500; }
.rcart-fields input,
.rcart-field-full textarea {
  padding: 11px 14px;
  border: 1px solid var(--vf-line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--vf-ink);
  background: white;
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.rcart-fields input:focus,
.rcart-field-full textarea:focus {
  border-color: var(--vf-blue);
  box-shadow: 0 0 0 3px rgba(46, 91, 255, 0.10);
}
.rcart-field-full textarea { resize: vertical; min-height: 96px; }

/* Review step */
.rcart-review { display: flex; flex-direction: column; gap: 20px; }
.rcart-review section {
  padding: 16px 18px;
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  background: #FAFBFC;
}
.rcart-review h4 {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  font-weight: 700;
}
.rcart-review ul {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rcart-review li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--vf-ink);
}
.rcart-review-rate {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--vf-blue);
  flex-shrink: 0;
}
.rcart-review-total {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  padding-top: 10px;
  border-top: 1px solid var(--vf-line);
  color: var(--vf-ink);
}
/* After-hours surcharge sub-line — second total row, no top border
   so it sits as a continuation of the main subtotal block. */
.rcart-review-total-extra {
  padding-top: 6px;
  border-top: 0;
}
.rcart-review-extra {
  /* Slightly muted vs kit lines so it reads as "additional charge"
     not "another piece of kit". */
  color: var(--vf-ink-2);
}
/* "no VAT" — small footnote rendered UNDERNEATH the bottom-most
   total (grand total when shown, otherwise day-rate subtotal). Block
   element so it drops to its own line; right-aligned to match the
   numbers above it. */
.rcart-novat {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--vf-ink-3, rgba(10, 15, 26, 0.55));
  text-align: right;
  text-transform: none;
}
/* Inline callout used on the dates step to flag that the user has
   selected after-hours times — keeps the rest of .rcart-fine subtle. */
.rcart-fine-callout {
  color: var(--vf-blue);
  font-weight: 500;
}

/* === Single-page cart layout (May 2026 reshape) ===
   Drops the wizard; everything renders in one scroll. Each section
   is a .rcart-block — heading + content, separated from neighbours
   by margin (no dividing lines, which made the drawer feel boxy). */
.rcart-block { margin-bottom: 22px; }
.rcart-block:last-child { margin-bottom: 0; }
.rcart-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.rcart-block-head .rcart-section-h { margin: 0; }
.rcart-mini-edit {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vf-blue);
  background: transparent;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  transition: color 160ms ease;
}
.rcart-mini-edit:hover { color: var(--vf-blue-700, #063F96); }
.rcart-mini-edit:disabled {
  color: var(--vf-ink-3);
  cursor: not-allowed;
  opacity: 0.55;
}
.rcart-mini-edit:disabled:hover { color: var(--vf-ink-3); }

/* Destructive variant for the "Clear" button next to "Your kit".
   Subtle red shift on hover so the destructive intent is hinted at
   without making the resting state alarming. */
.rcart-mini-edit-destructive { color: var(--vf-ink-3); }
.rcart-mini-edit-destructive:hover { color: #B33A3A; }

/* Email field as a block-level input (in the new layout, not the
   removed footer/modal). Same chrome as the rest of the form. */
.rcart-email-input-block {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--vf-line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--vf-ink);
  background: white;
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.rcart-email-input-block:focus {
  border-color: var(--vf-blue);
  box-shadow: 0 0 0 3px rgba(46, 91, 255, 0.10);
}

/* Notes + Code merged into a two-pill row. Sibling pills sit at equal
   width by default; hovering / focusing one expands it via a grid-
   template-columns transition while the other shrinks. Pills that
   already carry a value bias slightly wider when idle so the value
   isn't cut off. The label sits above the input — a small mono
   "Notes" / "Code" caption rather than placeholder-only, so the
   purpose stays visible even after typing. */
.rcart-meta-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  transition: grid-template-columns 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.rcart-meta-pills:has(.rcart-pill-wrap:nth-child(1):hover),
.rcart-meta-pills:has(.rcart-pill-wrap:nth-child(1):focus-within) {
  grid-template-columns: 2fr 1fr;
}
.rcart-meta-pills:has(.rcart-pill-wrap:nth-child(2):hover),
.rcart-meta-pills:has(.rcart-pill-wrap:nth-child(2):focus-within) {
  grid-template-columns: 1fr 2fr;
}
.rcart-meta-pills.has-notes:not(:has(.rcart-pill-wrap:hover)):not(:has(.rcart-pill-wrap:focus-within)) {
  grid-template-columns: 1.6fr 1fr;
}
.rcart-meta-pills.has-code:not(.has-notes):not(:has(.rcart-pill-wrap:hover)):not(:has(.rcart-pill-wrap:focus-within)) {
  grid-template-columns: 1fr 1.4fr;
}
.rcart-pill-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;  /* allow the input to shrink inside the grid */
}
.rcart-pill-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--vf-ink-3);
}
.rcart-pill {
  display: block;
  min-width: 0;
  position: relative;
}
.rcart-pill input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--vf-line);
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  color: var(--vf-ink);
  background: white;
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  text-overflow: ellipsis;
}
/* Clear (×) button — sits at the right edge of the Code pill when a
   code is applied. Pads the input on the right so the value doesn't
   overlap the button. Mirrors the small rounded close buttons used
   elsewhere in the cart. */
.rcart-pill-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: rgba(10, 15, 26, 0.06);
  color: var(--vf-ink-2);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 160ms ease, color 160ms ease;
}
.rcart-pill-clear:hover {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}
.rcart-pill:has(.rcart-pill-clear) input {
  padding-right: 34px;
}
.rcart-pill input:focus {
  border-color: var(--vf-blue);
  box-shadow: 0 0 0 3px rgba(46, 91, 255, 0.10);
}
.rcart-pill-wrap:nth-child(2) .rcart-pill input {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.rcart-pill-wrap:nth-child(2) .rcart-pill input::placeholder {
  text-transform: none;
  font-family: inherit;
  letter-spacing: 0;
}
@media (max-width: 540px) {
  /* On narrow phones, stack the pills so neither feels cramped. The
     hover/focus expansion behaviour stops being useful when both
     pills already occupy a full row. */
  .rcart-meta-pills,
  .rcart-meta-pills:has(.rcart-pill-wrap:hover),
  .rcart-meta-pills:has(.rcart-pill-wrap:focus-within),
  .rcart-meta-pills.has-notes,
  .rcart-meta-pills.has-code {
    grid-template-columns: 1fr;
  }
}

/* Account-status inline hint under the email field. The ok variant
   uses brand-blue text + a tick before the message via ::before; the
   other variants stay neutral (default .rcart-fine colour). */
.rcart-account-hint { margin: 8px 0 0; }
.rcart-account-hint-ok {
  color: var(--vf-blue);
  font-weight: 500;
}
.rcart-account-hint-ok::before {
  content: '✓ ';
  font-weight: 700;
}

/* Verified-account badge — top-right of the cart header. Small
   circular avatar (photo or initials) with a brand-blue tick
   overlay, name to the right. Sized to sit between the title block
   and the close button without crowding either. */
.rcart-account {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  background: rgba(9, 94, 223, 0.06);
  border: 1px solid rgba(9, 94, 223, 0.18);
  max-width: 200px;
}
/* Avatar = outer relative wrapper (no overflow clip) + inner circle
   (overflow:hidden for the photo crop) + tick positioned absolutely
   on the wrapper so it can extend past the avatar bounds without
   being clipped. Previous one-layer version cropped the tick. */
.rcart-account-avatar {
  position: relative;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.rcart-account-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--vf-blue);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0;
  overflow: hidden;
}
.rcart-account-avatar-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rcart-account-initials {
  z-index: 1;
}
.rcart-account-tick {
  position: absolute;
  bottom: -2px;
  right: -3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--vf-blue);
  color: white;
  border: 1.5px solid white;
  font-size: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  /* z-index lifts the tick over the badge container so the white
     ring stays crisp regardless of stacking. */
  z-index: 1;
}
.rcart-account-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--vf-blue);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dates collapsed-summary card — single line of pickup → return
   with billed-as meta underneath. Replaces the full date picker
   once all four fields are valid; user clicks Edit (rendered by
   the block heading) to re-expand. */
.rcart-dates-summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  background: rgba(46, 91, 255, 0.03);
}
.rcart-dates-summary-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--vf-ink);
  font-variant-numeric: tabular-nums;
}
.rcart-dates-summary-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
  text-transform: uppercase;
}

/* Verified-account confirmation popup — surfaces when an unverified
   user hits Send / Download. Sits above the cart drawer's own scrim
   (z-index 100 vs the drawer's ~80) so the dialog steals focus until
   the user picks Continue or Cancel. */
.rcart-verify-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 26, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  animation: rcart-verify-fade-in 140ms ease-out;
}
@keyframes rcart-verify-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.rcart-verify-card {
  background: #fff;
  border: 1px solid var(--vf-line);
  border-radius: 14px;
  padding: 22px 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 18px 60px rgba(10, 15, 26, 0.22);
}
.rcart-verify-h {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--vf-ink);
}
.rcart-verify-p {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--vf-ink-2);
}
.rcart-verify-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.rcart-verify-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.rcart-verify-btn-secondary {
  background: transparent;
  border-color: var(--vf-line);
  color: var(--vf-ink);
}
.rcart-verify-btn-secondary:hover {
  border-color: var(--vf-blue);
  color: var(--vf-blue);
}
.rcart-verify-btn-primary {
  background: var(--vf-blue);
  color: #fff;
}
.rcart-verify-btn-primary:hover {
  background: var(--vf-blue-700, #063F96);
}

/* Footer "actions" mode — always-visible Download + Send. Replaces
   the old continue / review-ctas / email-prompt mode tree since
   the cart is no longer a wizard. */
.rcart-foot-actions {
  /* base .rcart-foot already lays out as flex row with center align;
     this just exists as a hook for any future targeting. */
}

/* === Internal Order mode — staff-only cart flow ============================
   Toggled via Cmd+/ → Staff Tools → "Internal order mode". Customer form
   hides; an account picker (Max / Pete / Valley Films) takes its place; the
   bottom CTAs collapse into a single "Generate Comet instruction" button
   that opens a modal with the prompt + a Copy button. Visual cue: header
   gets a thin orange top accent so staff can tell at a glance the cart is
   no longer in customer-request mode. */
.rcart-head.is-internal { border-top: 3px solid #E87C0E; }
.rcart-head.is-internal .rcart-eyebrow { color: #b35c00; letter-spacing: 0.10em; }
.rcart-internal-pick { padding-top: 4px; }
.rcart-internal-pills {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 8px;
}
@media (min-width: 760px) {
  .rcart-internal-pills { grid-template-columns: repeat(3, 1fr); }
}
.rcart-internal-pill {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--vf-line, rgba(10,15,26,0.10));
  background: white;
  cursor: pointer;
  text-align: left;
  transition: border-color 140ms ease, background 140ms ease, transform 100ms ease;
}
.rcart-internal-pill:hover { border-color: #E87C0E; transform: translateY(-1px); }
.rcart-internal-pill.is-on {
  border-color: #E87C0E;
  background: rgba(232, 124, 14, 0.06);
}
.rcart-internal-pill-name { font-weight: 600; font-size: 13px; color: var(--vf-ink); }
.rcart-internal-pill-email { font-family: var(--font-mono); font-size: 11px; color: var(--vf-ink-2, rgba(10,15,26,0.60)); }
.rcart-internal-hint {
  font-size: 11.5px;
  color: var(--vf-ink-2, rgba(10,15,26,0.60));
  line-height: 1.5;
  margin-top: 8px;
}
.rcart-internal-hint code {
  font-family: var(--font-mono);
  background: rgba(232, 124, 14, 0.10);
  color: #b35c00;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* Comet-instruction modal — centred overlay with the prompt in a
   monospace pre block and a Copy CTA. Same z-index family as the
   cart drawer's own scrim. */
.rcart-comet-modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 26, 0.55);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.rcart-comet-modal {
  width: min(720px, 100%);
  max-height: min(820px, 100%);
  background: white;
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(10, 15, 26, 0.30);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.rcart-comet-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--vf-line, rgba(10,15,26,0.08));
}
.rcart-comet-modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  color: #b35c00;
  text-transform: uppercase;
}
.rcart-comet-modal-head h3 {
  margin: 4px 0 0;
  font-size: 17px;
  color: var(--vf-ink);
}
.rcart-comet-modal-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(10,15,26,0.06);
  color: var(--vf-ink);
  font-size: 20px; line-height: 1;
  cursor: pointer;
}
.rcart-comet-modal-close:hover { background: rgba(10,15,26,0.12); }
.rcart-comet-modal-body {
  flex: 1 1 auto;
  overflow: auto;
  margin: 0;
  padding: 18px 22px;
  background: #FAFBFC;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--vf-ink);
  white-space: pre-wrap;
  word-break: break-word;
}
.rcart-comet-modal-foot {
  padding: 14px 22px 18px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid var(--vf-line, rgba(10,15,26,0.08));
  background: white;
}
.rcart-comet-modal-foot .rcart-cta.is-copied {
  background: #157a4a;
  color: white;
}
.rcart-review dl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}
.rcart-review dl > div {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  font-size: 13px;
}
.rcart-review dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  font-weight: 600;
}
.rcart-review dd { margin: 0; color: var(--vf-ink); }
.rcart-review-notes { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--vf-line); }
.rcart-review-notes-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  font-weight: 600;
  margin-bottom: 4px;
}
.rcart-review-notes p { margin: 0; font-size: 13px; color: var(--vf-ink-2); line-height: 1.5; white-space: pre-wrap; }

/* Sent state */
.rcart-sent {
  text-align: center;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.rcart-sent-tick {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.18);
  color: #166534;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rcart-sent p { margin: 0; color: var(--vf-ink-2); line-height: 1.5; max-width: 360px; }

/* Footer */
.rcart-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 32px;
  border-top: 1px solid var(--vf-line);
  flex-shrink: 0;
  background: white;
}
.rcart-foot-spacer { flex: 1; }
.rcart-back {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border: 1px solid var(--vf-line);
  border-radius: 999px;
  background: white;
  color: var(--vf-ink-2);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.rcart-back:hover { border-color: var(--vf-ink); color: var(--vf-ink); }
.rcart-cta {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--vf-ink);
  color: white;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}
.rcart-cta:hover:not(:disabled) { background: var(--vf-blue); transform: translateY(-1px); }
.rcart-cta:disabled { opacity: 0.45; cursor: not-allowed; }
.rcart-error { color: #b91c1c; font-size: 12px; margin: 8px 0 0; flex-basis: 100%; }

/* Secondary CTA — "Download quote" sits next to the primary "Send
   request". Outlined treatment so the visual weight reads "this is
   also an action, but not the headline one." Same shape + size so
   the two read as a pair. */
.rcart-cta-secondary {
  background: white;
  color: var(--vf-ink);
  border: 1px solid var(--vf-line);
  font-weight: 600;
}
.rcart-cta-secondary:hover:not(:disabled) {
  background: white;
  border-color: var(--vf-blue);
  color: var(--vf-blue);
  transform: translateY(-1px);
}

/* Footer layouts. Step 0 (continue) and review-ctas keep the
   flex-row default. email-prompt swaps to column so the input row
   + fine print stack cleanly. */
.rcart-foot-email-prompt {
  flex-direction: column;
  align-items: stretch;
  padding-top: 14px;
  padding-bottom: 16px;
}
.rcart-email-prompt-h {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink-2);
  margin-bottom: 8px;
}
.rcart-email-prompt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.rcart-email-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--vf-line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--vf-ink);
  background: white;
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.rcart-email-input:focus {
  border-color: var(--vf-blue);
  box-shadow: 0 0 0 3px rgba(46, 91, 255, 0.10);
}
.rcart-email-cancel { /* same shape as .rcart-back but uses its own slot */ }
.rcart-email-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #b91c1c;
}
.rcart-email-fine { margin-top: 8px; }

/* When the review CTAs wrap on a narrow drawer, give them a sensible
   stack order: Send (primary) above, Download below. */
@media (max-width: 460px) {
  .rcart-foot-review-ctas { flex-wrap: wrap; }
  .rcart-foot-review-ctas .rcart-back { order: 1; }
  .rcart-foot-review-ctas .rcart-foot-spacer { display: none; }
  .rcart-foot-review-ctas .rcart-cta { order: 2; flex: 1 1 100%; }
  .rcart-foot-review-ctas .rcart-cta-secondary { order: 3; flex: 1 1 100%; }
}

/* Added state on the catalog drawer's "Add to request" button */
.rcat-add-btn.is-added { background: #16a34a; }
.rcat-add-btn:disabled { opacity: 0.9; cursor: default; }

/* Mobile */
@media (max-width: 560px) {
  .rcart-drawer { width: 100%; }
  .rcart-head { padding: 22px 22px 14px; }
  .rcart-steps { padding: 12px 22px; }
  .rcart-body { padding: 20px 22px; }
  .rcart-foot { padding: 14px 22px; }
  .rcart-field-row { grid-template-columns: 1fr; }
}

/* Live-results — 3-column grid of stacked mini cards (image on top,
   name + rate centered below). Centre-peak design rather than the
   previous side-anchored horizontal rows. */
.rfs-mini-live {
  width: 460px;
  max-width: calc(100vw - 32px);
  padding: 12px;
}
.rfs-live-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.rfs-live-results li button {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 12px 8px;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  border-radius: 12px;
  cursor: pointer;
  color: var(--vf-ink);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.rfs-live-results li.is-on button,
.rfs-live-results li button:hover {
  background: rgba(46, 91, 255, 0.06);
  border-color: rgba(46, 91, 255, 0.18);
  transform: translateY(-1px);
}
.rfs-live-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background-color: #eaeaea;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--vf-line);
}
.rfs-live-name {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.rfs-live-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--vf-blue);
  font-weight: 700;
}
.rfs-live-all {
  margin-top: 10px;
  width: 100%;
  padding: 10px 12px;
  background: var(--vf-ink);
  color: white;
  border: 0;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease;
}
.rfs-live-all:hover { background: var(--vf-blue); }

/* === Equipment page: wide grid + bottom-centre floating search ===
   When the user is on /rentals/equipment, the layout shifts:
   - Catalog grid runs full-width (sidebar dropped — chips moved out)
   - Floating search/cart pill centres at the bottom of the viewport
   - A category-chip strip sits just above the bar
   - Generous padding-bottom on the page so the grid doesn't disappear
     under the fixed UI */
.rcat-results-wide {
  /* Matches .rcat-head and .container (1280px) so the grid lines up
     vertically with the title above and with content on other pages. */
  max-width: 1280px;
  margin: 0 auto;
}
body.is-rentals-equipment .rcat-page { padding-bottom: 200px; }

/* Cluster's bottom-centre vs bottom-right tuck is driven by the
   --rfs-x variable in the base .rfs-cluster rule (set to 0 here for
   Equipment). The wrapper itself is already a full-width centring
   strip, so all that's needed is the transform-origin tweak so the
   hover scale grows symmetrically from the centre rather than the
   right edge. */
body.is-rentals-equipment .rfs-cluster {
  transform-origin: bottom center;
}

/* On the Equipment page the cart morphs from a circular icon into
   a horizontal pill that also shows a "Cart" label — gives the call
   to action a touch more prominence where it actually matters
   (the page where the user is adding items). The width / padding /
   gap transitions are already in the base .rfs-cart transition
   list, and the label fades in via max-width + opacity. */
body.is-rentals-equipment .rfs-cart {
  width: 110px;
  padding: 0 22px 0 18px;
  gap: 8px;
}
body.is-rentals-equipment .rfs-cart-label {
  max-width: 60px;
  opacity: 1;
}

/* Narrow screens: the 110px cart pill overflows alongside the bar.
   Revert to a 56px circle; the badge count still signals cart state. */
@media (max-width: 480px) {
  body.is-rentals-equipment .rfs-cart { width: 56px; padding: 0; gap: 0; }
  body.is-rentals-equipment .rfs-cart-label { max-width: 0; opacity: 0; }
}

/* ===================================================================
   Compact mode — /rentals/about + /rentals/open-account
   ===================================================================
   The search affordance isn't useful on these pages, so the floating
   cluster collapses to a tight icon-only pair anchored to the right
   edge of the viewport. Hovering (or focusing into) the cluster
   expands it back to the regular full-width form, identical to the
   home-screen look. The base .rfs-cluster transform is right-anchored
   so the right edge stays put while the bar grows leftward into its
   expanded state. */
body.is-rentals-compact .rfs-cluster {
  gap: 6px;
  /* Lock the cluster's bounding box to the fully-expanded footprint
     (420 bar + 6 gap + 56 cart = 482px). The base .rfs-cluster
     transform uses calc(50vw - 24px - 50%), and that `50%` re-resolves
     every frame as children resize during hover-expand — combined
     with the base 820ms transform transition (designed for the slow
     page-mode sweep), the right-edge anchor visibly drifts behind
     the bar's 380ms resize. Pinning the width means `50%` resolves
     to a constant 241px, the transform stops chasing a moving
     target, and the bar grows leftward inside a stable box.
     Flush-right alignment keeps the bar+cart pair pinned to the
     right edge while the inner .rfs-lift shrinks/grows. */
  width: 482px;
  max-width: calc(100vw - 48px);
  justify-content: flex-end;
}
/* The base rule expands the cluster gap on cart-hover (`:has`) to
   22px for the bubble-out effect; in compact mode the locked 482px
   width can't accommodate that, so neutralise it. The cart's own
   transform: scale(1.14) hover still gives a clear "pop". */
body.is-rentals-compact .rfs-cluster:has(.rfs-cart:hover) { gap: 6px; }
body.is-rentals-compact .rfs-bar {
  /* 52×~50 icon-only pill — matches the cart's optical weight so the
     pair reads as one merged module rather than a shrunken bar next
     to a normal cart. Equal padding centres the icon. */
  width: 52px;
  padding: 16px;
  gap: 0;
}
body.is-rentals-compact .rfs-bar input {
  opacity: 0;
  /* Keep the input hit-testable so a touch tap (no `:hover`) still
     reaches it and triggers the focus-within rule below, expanding
     the bar. Mouse users get the same behaviour via :hover before
     they can land a click on the invisible field. */
}
body.is-rentals-compact .rfs-cart {
  width: 48px;
  height: 48px;
}
/* Hover, focus, OR an active query (text in the input) restores the
   regular dimensions (home-screen look). The `.has-query` branch is
   driven by FloatingRentalsSearch — when the user has typed
   something and then navigates from Equipment to About / Open
   Account, the bar stays expanded so their query stays visible
   instead of being hidden behind the icon-only collapsed state.
   Clearing the field drops the class and the bar collapses again. */
body.is-rentals-compact .rfs-cluster:hover .rfs-bar,
body.is-rentals-compact .rfs-cluster:focus-within .rfs-bar,
body.is-rentals-compact .rfs-cluster.has-query .rfs-bar {
  width: 420px;
  padding: 15px 22px;
  gap: 12px;
}
body.is-rentals-compact .rfs-cluster:hover .rfs-bar input,
body.is-rentals-compact .rfs-cluster:focus-within .rfs-bar input,
body.is-rentals-compact .rfs-cluster.has-query .rfs-bar input {
  opacity: 1;
}
body.is-rentals-compact .rfs-cluster:hover .rfs-cart,
body.is-rentals-compact .rfs-cluster:focus-within .rfs-cart,
body.is-rentals-compact .rfs-cluster.has-query .rfs-cart {
  width: 56px;
  height: 56px;
}

/* ===================================================================
   Over-dark mode — bar + cart sitting over the black mega-footer
   ===================================================================
   FloatingRentalsSearch toggles `.over-dark` on the cluster when
   the footer scrolls into the bar's resting area. Without this,
   the dark-on-dark text/icons render as a muddy patch — the
   liquid-glass aesthetic is built around a light backdrop. These
   rules invert the foreground colours, lift the fill, and brighten
   the border so the pill reads cleanly against #000-ish footer.
   Transitions on background / border / colour are already in the
   base rules, so the swap fades in smoothly on scroll.            */
.rfs-cluster.over-dark .rfs-bar,
.rfs-cluster.over-dark .rfs-cart {
  /* Slightly more opaque white fill so the backdrop blur composites
     to a milky pane instead of a near-black tint. */
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 -1px 0 rgba(255, 255, 255, 0.08) inset,
    0 18px 50px rgba(0, 0, 0, 0.40),
    0 4px 10px rgba(0, 0, 0, 0.20);
}
/* Foreground colour — icons, label, input text, placeholder. */
.rfs-cluster.over-dark .rfs-icon,
.rfs-cluster.over-dark .rfs-cart,
.rfs-cluster.over-dark .rfs-cart-label {
  color: rgba(255, 255, 255, 0.95);
}
.rfs-cluster.over-dark .rfs-bar input {
  color: rgba(255, 255, 255, 0.95);
}
.rfs-cluster.over-dark .rfs-bar input::placeholder {
  color: rgba(255, 255, 255, 0.65);
}
/* Hover state — bump fill / border a touch further for hover lift. */
.rfs-cluster.over-dark .rfs-bar:hover,
.rfs-cluster.over-dark .rfs-cart:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.70);
}
/* Focused input — keep the blue accent on focus, but on a darker
   base so the field clearly signals "active text entry". */
.rfs-cluster.over-dark .rfs-bar:focus-within {
  background: rgba(255, 255, 255, 0.30);
  border-color: rgba(120, 160, 255, 0.70);
}

/* Category chip strip — fixed, centred just above the floating bar.
   Frosted glass panel matching the bar's liquid-glass aesthetic.
   Two stacked rows when a parent has sub-categories visible
   (.has-subs-row): sub-chips on top, main chips on bottom, sharing
   one glass panel + one rounded outline. */
.rcat-floating-chips {
  display: none;  /* hidden by default; only shown on Equipment page */
  position: fixed;
  bottom: 102px;
  left: 24px;
  right: 24px;
  z-index: 84;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  /* Pill when one row; rounded-rect (still soft) when two rows.
     999px gets clamped to half the box height by the browser, so
     this looks like a pill at 1 row and a soft-rect at 2 rows. */
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65) inset,
    0 14px 36px rgba(10, 15, 26, 0.10),
    0 3px 8px rgba(10, 15, 26, 0.05);
  max-width: max-content;
  margin: 0 auto;
  pointer-events: auto;
  animation: rcat-chips-in 380ms cubic-bezier(0.22, 1, 0.36, 1);
  transition: border-radius 220ms ease;
}
/* Smooth the radius change between pill (1-row) and rounded-rect
   (2-row) so the corner shape doesn't snap when sub-row mounts /
   unmounts. Pairs with the .rcat-chips-row-subs max-height collapse
   below — together they make the open/close feel like one motion. */
.rcat-floating-chips {
  transition: border-radius 700ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rcat-floating-chips:not(.has-subs-row) { border-radius: 999px; }
@keyframes rcat-chips-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.is-rentals-equipment .rcat-floating-chips { display: flex; }

/* Each row inside the strip — flex-row wrapping, centred. */
.rcat-chips-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
/* Sub-chips row sits above the main row with a subtle hairline
   divider — reinforces "drill-down inside the active parent".
   Animation-driven (rather than transition-driven) because React
   mounts the element with the .is-open class already applied, which
   suppresses transitions (no "before" state to interpolate from).
   The keyframes stagger height vs opacity so the panel reads as
   "open the room, then reveal the contents" on entry, and "fade the
   contents, then close the room" on exit — gives the close a more
   confident finish than animating both at once. translateY removed
   (was a third moving variable that read as jumpy when stacked on
   the height + opacity changes). */
.rcat-chips-row-subs {
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(10, 15, 26, 0.08);
  overflow: hidden;
  /* Initial state — kept matched to the keyframes' starting frame so
     a freshly-mounted row with .is-open begins from the collapsed
     state and animates outward. */
  opacity: 0;
  max-height: 0;
  will-change: opacity, max-height;
}
.rcat-chips-row-subs.is-open {
  animation: rcat-subs-in 1200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.rcat-chips-row-subs.is-leaving {
  animation: rcat-subs-out 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
}
/* Entry: height expands across the full duration; opacity is held at
   0 for the first 30% (panel widens/grows first) then fades in over
   the back ~70%. max-height generous (220px) so a wrapping sub-list
   never clips. */
@keyframes rcat-subs-in {
  0%   { opacity: 0; max-height: 0;     }
  30%  { opacity: 0; max-height: 60px;  }
  100% { opacity: 1; max-height: 220px; }
}
/* Exit: chips fade out first (over the first ~50%) while the height
   is still full, then the panel collapses. Reading order: contents
   gone, room shut. */
@keyframes rcat-subs-out {
  0%   { opacity: 1; max-height: 220px; }
  55%  { opacity: 0; max-height: 220px; }
  100% { opacity: 0; max-height: 0;     }
}

/* Individual chips inside the sub-row fade/scale in slightly staggered
   to feel less like a wall-of-text materialising. Combined with the
   row-level transition this gives the popover a layered settling-in. */
.rcat-chips-row-subs .rcat-subchip {
  transition: background-color 240ms ease, border-color 240ms ease,
              color 240ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Re-style the chips themselves so they feel at home on the glass
   panel. Slightly smaller than the sidebar version. */
.rcat-floating-chips .rcat-chip {
  font-size: 11.5px;
  padding: 5px 11px;
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.65);
  color: var(--vf-ink);
}
.rcat-floating-chips .rcat-chip:hover { border-color: var(--vf-ink); }
.rcat-floating-chips .rcat-chip.is-on {
  background: var(--vf-ink);
  border-color: var(--vf-ink);
  color: white;
}

/* Sub-chip = a chip in the top row. Same chrome as main chips per
   Max's "same style" direction, with a subtly darker resting fill
   so the eye reads them as the drilled-in selection (matching the
   reference layout). */
.rcat-floating-chips .rcat-subchip {
  background: rgba(10, 15, 26, 0.07);
  border-color: rgba(10, 15, 26, 0.08);
  color: var(--vf-ink-2);
}
.rcat-floating-chips .rcat-subchip:hover {
  border-color: var(--vf-ink);
  color: var(--vf-ink);
}
.rcat-floating-chips .rcat-subchip.is-on {
  background: var(--vf-blue);
  border-color: var(--vf-blue);
  color: white;
}
.rcat-floating-chips .rcat-subchip.is-on span { color: rgba(255, 255, 255, 0.75); }

/* Mobile — each row scrolls horizontally on narrow viewports rather
   than wrapping (wrapping would push the cart bar offscreen). */
@media (max-width: 760px) {
  .rcat-floating-chips {
    bottom: 86px;
    left: 12px; right: 12px;
    max-width: calc(100vw - 24px);
  }
  .rcat-chips-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }
  .rcat-floating-chips .rcat-subchip { font-size: 10.5px; padding: 4px 9px; }
}

/* === Kit / bundle styling ===
   `isBundle: true` items get a small KIT badge in the top-left of
   the card and an "Includes" list in the detail drawer so customers
   can see what's in the bundle before adding to their request. */
.rcat-card.is-bundle { position: relative; }
.rcat-kit-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--vf-ink);
  color: white;
  padding: 4px 9px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(10, 15, 26, 0.15);
}

/* Admin-only ownership code badge — top-left of card image, gated by
   the staff-tools "Show ownership codes" toggle. Same position as the
   KIT badge; when both render on the same card (a kit AND a non-owned
   item), the ownership badge takes top-left and the KIT badge slides
   down a row. Off-white pill with a thin border so it reads as
   "internal metadata" rather than a hero marker like KIT (which is
   solid ink for visual punch). */
.rcat-owner-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--vf-ink);
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid rgba(10, 15, 26, 0.14);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  z-index: 3;
  box-shadow: 0 2px 6px rgba(10, 15, 26, 0.08);
  /* Type-specific accent — bare colour hint so staff can eyeball owned
     vs consignment vs cross-hire at a glance without reading the code. */
  border-left-width: 3px;
}
.rcat-owner-badge.is-owned       { border-left-color: var(--vf-blue, #1F60FF); }
.rcat-owner-badge.is-consignment { border-left-color: #E87C0E; }
.rcat-owner-badge.is-cross-hire  { border-left-color: #785AC8; }
/* When both badges render on the same kit card, the KIT badge slides
   down one row so they stack neatly instead of overlapping. */
.rcat-card.is-bundle .rcat-owner-badge ~ .rcat-kit-badge {
  top: 40px;
}
.rcat-kit-inline {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  background: var(--vf-ink);
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  vertical-align: 6px;
}

.rcat-bundle-includes {
  margin-top: 8px;
  padding: 16px 18px;
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  background: #FAFBFC;
}
.rcat-bundle-includes-h {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  font-weight: 700;
  margin-bottom: 10px;
}
.rcat-bundle-includes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rcat-bundle-includes li {
  font-size: 13px;
  line-height: 1.45;
  color: var(--vf-ink);
  padding-left: 18px;
  position: relative;
}
.rcat-bundle-includes li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--vf-blue);
}

/* === Cart hover preview ===
   Small popover above the cart button on hover. Empty state nudges
   the visitor to add kit; full state shows the first 4 lines with
   a single-tap remove and an "Open cart" CTA. */
.rfs-cart-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.rfs-cart-preview {
  position: absolute;
  bottom: calc(100% + 16px);
  right: 0;
  width: 320px;
  background: white;
  border: 1px solid var(--vf-line);
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(10, 15, 26, 0.16);
  padding: 12px;
  /* Always rendered; visibility toggled via is-open. Same easing &
     duration as .rfs-mini so a sweep from search to cart cross-fades
     instead of pop-then-pop. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) translateZ(0);
  pointer-events: none;
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 280ms;
}
.rfs-cart-preview.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) translateZ(0);
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}
.rfs-cart-preview::after {
  content: '';
  position: absolute;
  top: 100%;
  /* Anchor the peak below the cart button. The button is 56px wide
     and sits at the popup's right edge — its centre is 28px from
     the right. */
  right: 28px;
  transform: translateX(50%);
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-top-color: white;
  border-bottom: 0;
  filter: drop-shadow(0 2px 1px rgba(10, 15, 26, 0.06));
}
.rfs-cart-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 8px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  font-weight: 700;
  border-bottom: 1px solid var(--vf-line);
  margin-bottom: 8px;
}
.rfs-cart-preview-total {
  color: var(--vf-blue);
  font-size: 12px;
}
.rfs-cart-preview-total em {
  font-style: normal;
  font-weight: 500;
  color: var(--vf-ink-3);
  margin-left: 4px;
  text-transform: lowercase;
  letter-spacing: 0;
}

.rfs-cart-preview-empty {
  text-align: center;
  padding: 20px 12px;
}
.rfs-cart-preview-empty-icon {
  width: 48px; height: 48px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: rgba(10, 15, 26, 0.05);
  color: var(--vf-ink-3);
  display: flex; align-items: center; justify-content: center;
}
.rfs-cart-preview-empty p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--vf-ink-2);
  margin: 0;
}

.rfs-cart-preview-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rfs-cart-preview-list li {
  display: grid;
  grid-template-columns: 36px 1fr 22px;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 160ms ease;
}
.rfs-cart-preview-list li:hover { background: rgba(10, 15, 26, 0.03); }
.rfs-cart-preview-thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background-color: #eaeaea;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--vf-line);
}
.rfs-cart-preview-thumb-fallback {
  background: linear-gradient(135deg, #e5e7eb, #cbd5e1);
}
.rfs-cart-preview-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.rfs-cart-preview-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--vf-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rfs-cart-preview-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--vf-ink-3);
  letter-spacing: 0.02em;
}
.rfs-cart-preview-remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--vf-ink-3);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 140ms ease, color 140ms ease;
}
.rfs-cart-preview-remove:hover { background: rgba(220, 38, 38, 0.10); color: #b91c1c; }
.rfs-cart-preview-more {
  font-size: 11px;
  color: var(--vf-ink-3);
  margin: 0 0 8px;
  padding: 0 8px;
}
.rfs-cart-preview-cta {
  width: 100%;
  padding: 10px 14px;
  border: 0;
  background: var(--vf-ink);
  color: white;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease;
}
.rfs-cart-preview-cta:hover { background: var(--vf-blue); }

@media (max-width: 480px) {
  .rfs-cart-preview { width: calc(100vw - 32px); right: -8px; }
}

/* === Cart dates step — single-row "Collection / Return" with the
   year masked. The native date input is hidden behind a stylised
   display button; clicking it triggers the system picker via the
   underlying input. */
.rcart-datetime {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 8px;
  align-items: stretch;
  position: relative;
}
.rcart-datetime input[type="date"] {
  /* Stack the native date input behind our pretty display button. */
  position: absolute;
  inset: 0 calc(110px + 8px) 0 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.rcart-date-display {
  pointer-events: none;
  padding: 11px 14px;
  border: 1px solid var(--vf-line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--vf-ink);
  background: white;
  display: flex;
  align-items: center;
  letter-spacing: -0.005em;
  z-index: 1;
}
.rcart-datetime input[type="date"]:focus + .rcart-date-display,
.rcart-datetime input[type="date"]:hover + .rcart-date-display {
  border-color: var(--vf-blue);
  box-shadow: 0 0 0 3px rgba(46, 91, 255, 0.10);
}
.rcart-datetime input[type="time"],
.rcart-datetime select {
  /* The time picker stays interactive — most browsers render this
     compactly enough that the year stripping isn't an issue. The
     <select> variant (after the May 2026 cart rewrite) shares the
     same chrome so the row stays visually consistent regardless of
     which control the page renders. */
  padding: 11px 14px;
  border: 1px solid var(--vf-line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--vf-ink);
  background: white;
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.rcart-datetime select {
  -webkit-appearance: none;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--vf-ink-2) 50%),
                    linear-gradient(135deg, var(--vf-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
  cursor: pointer;
}
.rcart-datetime input[type="time"]:focus,
.rcart-datetime select:focus {
  border-color: var(--vf-blue);
  box-shadow: 0 0 0 3px rgba(46, 91, 255, 0.10);
}

/* "Include after-hours" toggle row sits beneath the two date/time
   rows. Checkbox + label on one line, fine-print help text below. */
.rcart-afterhours {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0 4px;
  border-top: 1px dashed rgba(10, 15, 26, 0.10);
  margin-top: 4px;
}
.rcart-afterhours-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--vf-ink);
  cursor: pointer;
  user-select: none;
}
.rcart-afterhours-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--vf-blue);
  cursor: pointer;
}
.rcart-afterhours-help {
  font-size: 12px;
  color: var(--vf-ink-3, rgba(10,15,26,0.55));
  padding-left: 26px;
}

/* Orphan: .rcart-code-block / .rcart-section-h-opt / .rcart-code-input
   were removed when the separate Code and Notes blocks were merged
   into the .rcart-meta-pills hover-expand pair (see above). */

/* === Rentals hero CTAs ===
   Pair of buttons inserted between the H1 and the stats row so the
   visitor's next action is obvious without scrolling. Primary leads
   to the catalog; secondary leads to the open-account wizard. */
.rentals-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 36px;
}
.rentals-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: transform 180ms var(--ease-out, ease), background 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.rentals-hero-cta:hover { transform: translateY(-2px); }
.rentals-hero-cta-primary {
  background: var(--vf-ink);
  color: white;
  border: 1px solid var(--vf-ink);
  box-shadow: 0 10px 28px rgba(10, 15, 26, 0.18);
}
.rentals-hero-cta-primary:hover {
  background: var(--vf-blue);
  border-color: var(--vf-blue);
  box-shadow: 0 14px 36px rgba(46, 91, 255, 0.30);
}
.rentals-hero-cta-secondary {
  background: white;
  color: var(--vf-ink);
  border: 1px solid var(--vf-line-strong, rgba(10, 15, 26, 0.14));
}
.rentals-hero-cta-secondary:hover {
  border-color: var(--vf-ink);
}
@media (max-width: 480px) {
  .rentals-hero-ctas { flex-direction: column; align-items: stretch; }
  .rentals-hero-cta { justify-content: center; }
}

/* About page — one-line intro disambiguating the two hours windows. */
.rentals-hours-intro {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--vf-ink-3);
  margin: 0 0 16px;
  max-width: 50ch;
}

/* Relative-day chip ("today" / "tomorrow") in the cart Dates step.
   Reads as a softer suffix inside the date display so the visitor
   knows whether the autofilled date is in the past or coming up. */
.rcat-date-rel {
  font-style: normal;
  font-weight: 500;
  color: var(--vf-blue);
  letter-spacing: 0;
  margin-left: 4px;
  text-transform: lowercase;
}

/* Inline hint next to the disabled Continue / Send button on the
   cart wizard footer — explains WHY the button is greyed out. */
.rcart-foot-hint {
  font-size: 11.5px;
  color: var(--vf-ink-3);
  font-style: italic;
  margin-right: 12px;
  text-align: right;
}

/* ===================================================================
   Kit Prep Tech application — /rentals/careers
   Mounts inside the .rentals-open-account section to inherit chrome
   (form-card, step indicator, container grid). Scoped under
   .rentals-kit-prep are the bits the OA wizard doesn't have:
   form-row layout primitives, radio cards, file inputs, review table,
   and upload-status surface.
   =================================================================== */
.rentals-kit-prep .form-row {
  display: block;
  margin: 0 0 14px;
}
.rentals-kit-prep .form-row.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rentals-kit-prep .form-row label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--vf-ink-2);
  text-transform: uppercase;
}
.rentals-kit-prep .form-row input[type="text"],
.rentals-kit-prep .form-row input[type="email"],
.rentals-kit-prep .form-row input[type="tel"],
.rentals-kit-prep .form-row textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 8px;
  font: inherit;
  font-size: 14.5px;
  color: var(--vf-ink, #0A0F1A);
  background: #fff;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.rentals-kit-prep .form-row textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}
.rentals-kit-prep .form-row input:focus,
.rentals-kit-prep .form-row textarea:focus {
  outline: none;
  border-color: var(--vf-blue, #095EDF);
  box-shadow: 0 0 0 4px rgba(9, 94, 223, 0.12);
}

/* Drivers Licence Yes/No — two pill radios side by side. */
.rentals-kit-prep .kp-radio-group {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.rentals-kit-prep .kp-radio-group legend {
  grid-column: 1 / -1;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--vf-ink-2);
  text-transform: uppercase;
  margin: 0 0 6px;
  padding: 0;
}
.rentals-kit-prep .kp-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  font-size: 14.5px;
  font-weight: 500;
  background: #fff;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  position: relative;
}
.rentals-kit-prep .kp-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.rentals-kit-prep .kp-radio.is-selected {
  border-color: var(--vf-blue, #095EDF);
  background: rgba(9, 94, 223, 0.06);
  color: var(--vf-blue, #095EDF);
}

/* CV + photo upload — reuses Open Account's .oa-file-drop /
   .oa-file-preview chrome, no Kit Prep-specific styles needed. */

/* Review step — table-like summary, label left, value right. */
.rentals-kit-prep .kp-review {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--vf-line, #E6E8EE);
  border: 1px solid var(--vf-line, #E6E8EE);
  border-radius: 10px;
  overflow: hidden;
  margin: 0 0 16px;
}
.rentals-kit-prep .kp-review-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  font-size: 13.5px;
}
.rentals-kit-prep .kp-review-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vf-ink-3, #8892A6);
  font-weight: 600;
}
.rentals-kit-prep .kp-review-value {
  color: var(--vf-ink, #0A0F1A);
  white-space: pre-wrap;
  word-break: break-word;
}
.rentals-kit-prep .kp-review-empty {
  color: var(--vf-ink-3, #8892A6);
  font-style: italic;
}

/* Error + upload-status surfaces — small inline messages above the
   action row on the review step. */
.rentals-kit-prep .kp-error {
  background: #fdecec;
  color: #8a1f1f;
  border: 1px solid #f5cdcd;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
}
.rentals-kit-prep .kp-upload-status {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--vf-ink-3, #8892A6);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}

/* Postcode validation feedback — sits under the postcode input on
   step 1. Colour shifts based on the state-machine variant. */
.rentals-kit-prep .kp-postcode-status {
  font-size: 12.5px;
  line-height: 1.45;
  margin: 6px 0 0;
  padding: 7px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rentals-kit-prep .kp-postcode-status::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--vf-ink-3, #8892A6);
}
.rentals-kit-prep .kp-postcode-pending {
  background: #f5f6f8;
  color: var(--vf-ink-3, #8892A6);
}
.rentals-kit-prep .kp-postcode-pending::before {
  background: var(--vf-ink-3, #8892A6);
  animation: kp-pulse 1.1s ease-in-out infinite;
}
.rentals-kit-prep .kp-postcode-valid {
  background: #e9f5ec;
  color: #1c6b3d;
}
.rentals-kit-prep .kp-postcode-valid::before {
  background: #1c9d54;
}
.rentals-kit-prep .kp-postcode-too_far {
  background: #fff4dc;
  color: #7a4f00;
}
.rentals-kit-prep .kp-postcode-too_far::before {
  background: #d97706;
}
.rentals-kit-prep .kp-postcode-invalid,
.rentals-kit-prep .kp-postcode-network_error {
  background: #fdecec;
  color: #8a1f1f;
}
.rentals-kit-prep .kp-postcode-invalid::before,
.rentals-kit-prep .kp-postcode-network_error::before {
  background: #c63030;
}
@keyframes kp-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* "Locals only" modal — fired when a postcode resolves outside the
   ~45-minute commute radius. Click-outside or Esc dismisses. */
.kp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 26, 0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: kp-modal-fade 160ms ease-out;
}
.kp-modal {
  background: #fff;
  border-radius: 14px;
  padding: 32px 28px 26px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 24px 64px -12px rgba(10, 15, 26, 0.4);
  animation: kp-modal-rise 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.kp-modal h3 {
  font-size: 22px;
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--vf-ink, #0A0F1A);
}
.kp-modal p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--vf-ink-2, #4B5468);
  margin: 0 0 12px;
}
.kp-modal .kp-modal-fineprint {
  font-size: 13px;
  color: var(--vf-ink-3, #8892A6);
  margin-top: 16px;
  margin-bottom: 22px;
}
.kp-modal .kp-modal-fineprint a {
  color: var(--vf-blue, #095EDF);
  text-decoration: underline;
}
.kp-modal .submit {
  display: block;
  width: 100%;
  margin-top: 4px;
}
body.vf-modal-open {
  overflow: hidden;
}
@keyframes kp-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kp-modal-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .rentals-kit-prep .form-row.two-col {
    grid-template-columns: 1fr;
  }
  .rentals-kit-prep .kp-review-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .rentals-kit-prep .kp-upload-status {
    grid-template-columns: 1fr;
  }
  .kp-modal {
    padding: 24px 20px 20px;
  }
  .kp-modal h3 {
    font-size: 20px;
  }
}

/* =========================================================================
   /rentals/consignments — admin dashboard + /consignments/<token> portal
   ========================================================================= */

.rentals-consignments-admin,
.rentals-consignor-portal {
  background: var(--vf-bg);
}

.cn-section {
  padding: 32px 0 80px;
}
.cn-section .container {
  max-width: 1200px;
}

.rentals-consignor-portal .cn-section .container {
  max-width: 880px;
}

.cn-loading {
  color: var(--vf-ink-4);
  font-size: 15px;
}
.cn-muted { color: var(--vf-ink-4); }
.cn-notes { white-space: pre-wrap; }

.cn-error {
  background: #FEEBEC;
  border: 1px solid #F5C6CB;
  color: #7A1A22;
  padding: 12px 16px;
  border-radius: 10px;
  margin: 12px 0;
  font-size: 14px;
}

/* Buttons */
.cn-btn-primary {
  background: var(--vf-blue);
  color: #fff;
  border: 1px solid var(--vf-blue);
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.cn-btn-primary:hover { background: var(--vf-blue-600); }
.cn-btn-primary:disabled { background: var(--vf-ink-4); border-color: var(--vf-ink-4); cursor: not-allowed; }

.cn-btn-secondary {
  background: var(--vf-surface);
  color: var(--vf-ink);
  border: 1px solid var(--vf-line-strong);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.cn-btn-secondary:hover { border-color: var(--vf-blue); color: var(--vf-blue); }
.cn-btn-secondary:disabled { color: var(--vf-ink-4); cursor: not-allowed; }

.cn-link-btn {
  background: none;
  border: none;
  color: var(--vf-blue);
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  font-size: 13px;
}
.cn-link-btn:hover { text-decoration: underline; }

/* Admin status strip in the hero */
.cn-admin-status {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  font-size: 14px;
  color: var(--vf-ink-3);
}

/* Login form */
.cn-login-container {
  max-width: 460px;
}
.cn-login-container .lead {
  font-size: 17px;
  color: var(--vf-ink-2);
  margin-bottom: 16px;
}
.cn-login-form {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}
.cn-login-form label { display: block; }
.cn-login-form input {
  display: block;
  width: 100%;
  border: 1px solid var(--vf-line-strong);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  background: var(--vf-surface);
  color: var(--vf-ink);
}
.cn-login-form input:focus {
  outline: none;
  border-color: var(--vf-blue);
  box-shadow: 0 0 0 3px rgba(9, 94, 223, 0.12);
}
.cn-login-form .cn-btn-primary { justify-self: start; }
.cn-label {
  display: block;
  font-size: 12px;
  color: var(--vf-ink-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

/* Dashboard grid */
.cn-dashboard {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  align-items: start;
}

.cn-sidebar {
  background: var(--vf-surface);
  border: 1px solid var(--vf-line);
  border-radius: 14px;
  padding: 18px;
  position: sticky;
  top: 100px;
}
.cn-sidebar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.cn-sidebar-head h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vf-ink-3);
  margin: 0;
  font-weight: 700;
}
.cn-consignor-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cn-consignor-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease;
  margin: 2px 0;
}
.cn-consignor-row:hover { background: var(--vf-bg-tint); }
.cn-consignor-row.is-selected {
  background: var(--vf-blue-50);
  outline: 1px solid var(--vf-blue-200);
}
.cn-consignor-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--vf-ink);
}
.cn-consignor-bal {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 13px;
  font-weight: 600;
}
.cn-consignor-bal.is-pos { color: #1c9d54; }
.cn-consignor-bal.is-neg { color: #c62828; }

/* Main panel */
.cn-main { min-width: 0; /* allow shrink on small viewports */ }

.cn-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 18px;
}
.cn-detail-name {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--vf-ink);
}
.cn-detail-sub {
  font-size: 14px;
  color: var(--vf-ink-3);
}
.cn-detail-sub a { color: var(--vf-blue); text-decoration: none; }
.cn-detail-sub a:hover { text-decoration: underline; }
.cn-detail-balance {
  text-align: right;
  background: var(--vf-surface);
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  padding: 12px 18px;
  min-width: 180px;
}
.cn-bal-label {
  font-size: 11px;
  color: var(--vf-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  margin-bottom: 4px;
}
.cn-bal-value {
  font-size: 26px;
  font-weight: 700;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.cn-bal-value.is-pos { color: #1c9d54; }
.cn-bal-value.is-neg { color: #c62828; }

/* Card */
.cn-card {
  background: var(--vf-surface);
  border: 1px solid var(--vf-line);
  border-radius: 14px;
  padding: 22px;
  margin-bottom: 18px;
}
.cn-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.cn-card-head h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--vf-ink);
}
.cn-card-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Profile key-value list */
.cn-kv {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 10px 16px;
  margin: 0;
  font-size: 14px;
}
.cn-kv dt {
  color: var(--vf-ink-3);
  font-size: 13px;
}
.cn-kv dd {
  color: var(--vf-ink);
  margin: 0;
}

/* Link display */
.cn-link-display {
  background: var(--vf-bg-tint);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
  font-size: 13px;
  word-break: break-all;
}
.cn-link-display a {
  color: var(--vf-blue);
  text-decoration: none;
}
.cn-link-display a:hover { text-decoration: underline; }

/* Form */
.cn-form { display: grid; gap: 14px; }
.cn-form-row label { display: block; }
.cn-form-row input,
.cn-form-row select,
.cn-form-row textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--vf-line-strong);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  background: var(--vf-surface);
  color: var(--vf-ink);
  font-family: inherit;
}
.cn-form-row input:focus,
.cn-form-row select:focus,
.cn-form-row textarea:focus {
  outline: none;
  border-color: var(--vf-blue);
  box-shadow: 0 0 0 3px rgba(9, 94, 223, 0.10);
}
.cn-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cn-form-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.cn-form-inline { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cn-form-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 6px;
}

/* Ledger table */
.cn-table-wrap {
  overflow-x: auto;
  border-radius: 10px;
}
.cn-ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cn-ledger-table th,
.cn-ledger-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--vf-line);
  vertical-align: top;
}
.cn-ledger-table th {
  color: var(--vf-ink-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.cn-ledger-table tr.is-editing td {
  background: var(--vf-blue-50);
}
.cn-ledger-table tr.cn-ledger-meta-row td {
  border-top: none;
  padding-top: 0;
  font-size: 13px;
}
.cn-ledger-entry { font-weight: 600; color: var(--vf-ink); }
.cn-ledger-notes {
  color: var(--vf-ink-3);
  font-size: 13px;
  margin-top: 4px;
  white-space: pre-wrap;
}
.cn-ledger-files {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.cn-file-chip {
  display: inline-block;
  font-size: 12px;
  background: var(--vf-bg-tint);
  border: 1px solid var(--vf-line);
  border-radius: 999px;
  padding: 2px 10px;
  color: var(--vf-ink-3);
}
.cn-file-chip a { color: var(--vf-blue); text-decoration: none; }
.cn-file-chip a:hover { text-decoration: underline; }

.cn-amount {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  text-align: right;
  font-weight: 600;
  white-space: nowrap;
}
.cn-amount.is-pos { color: #1c9d54; }
.cn-amount.is-neg { color: #c62828; }

/* Pill (type chip) */
.cn-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: var(--vf-bg-tint);
  color: var(--vf-ink-3);
}
.cn-pill-small { font-size: 10px; padding: 2px 8px; }
.cn-pill-earnings        { background: #DCF5E5; color: #1A6F3B; }
.cn-pill-opening-balance { background: #E7EBF1; color: #3A4054; }
.cn-pill-payout          { background: #FFECD9; color: #8C4A14; }
.cn-pill-purchase        { background: #FDE3E5; color: #8B2127; }
.cn-pill-admin-fee       { background: #FDE3E5; color: #8B2127; }
.cn-pill-adjustment      { background: var(--vf-blue-100); color: var(--vf-blue-700); }

/* Inline ledger inputs */
.cn-ledger-table input,
.cn-ledger-table select {
  width: 100%;
  padding: 6px 8px;
  font-size: 13px;
  border: 1px solid var(--vf-line-strong);
  border-radius: 6px;
  background: var(--vf-surface);
  color: var(--vf-ink);
  font-family: inherit;
}

/* Modal */
.cn-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 26, 0.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  overflow-y: auto;
}
.cn-modal {
  background: var(--vf-surface);
  border-radius: 16px;
  max-width: 880px;
  width: 100%;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(10, 15, 26, 0.30);
}
.cn-modal-small { max-width: 560px; }
.cn-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--vf-line);
}
.cn-modal-head h3 { margin: 0; font-size: 17px; font-weight: 700; }
.cn-modal-body { padding: 22px 24px 24px; }

.cn-upload-row { margin: 16px 0; }
.cn-upload-row input[type="file"] {
  font-size: 14px;
  padding: 10px;
  border: 2px dashed var(--vf-line-strong);
  border-radius: 10px;
  width: 100%;
  background: var(--vf-bg-tint);
  cursor: pointer;
}
.cn-upload-row input[type="file"]:hover {
  border-color: var(--vf-blue);
}

/* CSV preview */
.cn-preview { margin-top: 8px; }
.cn-preview-totals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 18px;
  background: var(--vf-bg-tint);
  border-radius: 12px;
  margin-bottom: 18px;
}
.cn-preview-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cn-preview-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.cn-preview-stat strong { font-size: 22px; font-weight: 700; font-family: "JetBrains Mono", ui-monospace, monospace; }
.cn-preview-stat.is-payout strong { color: var(--vf-blue); }
.cn-preview-rows summary {
  cursor: pointer;
  color: var(--vf-blue);
  font-weight: 600;
  font-size: 13px;
  margin: 8px 0;
}
.cn-csv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 10px;
}
.cn-csv-table th,
.cn-csv-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--vf-line);
}
.cn-csv-table th {
  color: var(--vf-ink-3);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}

/* ---------- Consignor public portal ---------- */

.cn-portal-balance-card {
  background: linear-gradient(135deg, var(--vf-blue-50) 0%, var(--vf-blue-100) 100%);
  border: 1px solid var(--vf-blue-200);
  border-radius: 18px;
  padding: 32px 30px;
  margin-bottom: 20px;
  text-align: left;
}
.cn-portal-balance-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--vf-blue-700);
  margin-bottom: 8px;
}
.cn-portal-balance-value {
  font-size: 56px;
  font-weight: 700;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  line-height: 1.05;
}
.cn-portal-balance-value.is-pos { color: #1A6F3B; }
.cn-portal-balance-value.is-neg { color: #8B2127; }
.cn-portal-balance-sub {
  margin-top: 12px;
  font-size: 14px;
  color: var(--vf-ink-2);
  max-width: 540px;
}
.cn-portal-balance-sub a { color: var(--vf-blue); text-decoration: none; }
.cn-portal-balance-sub a:hover { text-decoration: underline; }

.cn-portal-split {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 36px;
}
.cn-portal-split-stat {
  background: var(--vf-surface);
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cn-portal-split-stat span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.cn-portal-split-stat strong { font-size: 22px; font-weight: 700; }

.cn-portal-h2 {
  font-size: 22px;
  font-weight: 700;
  margin: 28px 0 14px;
  color: var(--vf-ink);
}

.cn-portal-ledger { background: var(--vf-surface); border: 1px solid var(--vf-line); border-radius: 12px; }
.cn-portal-ledger th { background: var(--vf-bg-tint); }
.cn-portal-ledger th:first-child,
.cn-portal-ledger td:first-child { padding-left: 18px; }
.cn-portal-ledger th:last-child,
.cn-portal-ledger td:last-child  { padding-right: 18px; }

/* Legacy basic-card layout kept for any old callers; the equipment
   section below replaces it for the consignor portal. */
.cn-portal-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.cn-portal-item {
  background: var(--vf-surface);
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  padding: 14px 16px;
}
.cn-portal-item-name {
  font-weight: 700;
  color: var(--vf-ink);
  font-size: 14px;
  margin-bottom: 6px;
}
.cn-portal-item-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
}
.cn-portal-item-desc {
  font-size: 13px;
  margin-top: 6px;
  line-height: 1.5;
}

/* Consignor portal — Your equipment section. Image-led cards grouped
   by category so it reads like the public Booqable shop the kit is
   listed on. */
.cn-portal-equipment-group { margin: 0 0 32px; }
.cn-portal-equipment-group:last-child { margin-bottom: 0; }
.cn-portal-equipment-cat {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-ink-2);
  margin: 0 0 14px;
}
.cn-portal-equipment-cat .cn-muted {
  font-weight: 500;
  color: var(--vf-ink-4);
  letter-spacing: 0.08em;
}
.cn-portal-equipment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.cn-portal-equipment-card {
  background: #fff;
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.cn-portal-equipment-card:hover {
  border-color: var(--vf-line-strong);
  box-shadow: 0 4px 14px rgba(10, 15, 26, 0.06);
}
.cn-portal-equipment-thumb {
  aspect-ratio: 4 / 3;
  background: var(--vf-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cn-portal-equipment-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cn-portal-equipment-thumb-empty {
  color: var(--vf-ink-4);
  opacity: 0.5;
}
.cn-portal-equipment-thumb-empty svg { width: 32px; height: 32px; }
.cn-portal-equipment-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cn-portal-equipment-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--vf-ink);
  line-height: 1.35;
}
.cn-portal-equipment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.cn-portal-equipment-rate {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--vf-ink);
  letter-spacing: 0.02em;
}
@media (max-width: 560px) {
  .cn-portal-equipment-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cn-portal-equipment-body { padding: 10px 12px 12px; }
  .cn-portal-equipment-name { font-size: 13px; }
}

.cn-portal-help {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--vf-line);
  font-size: 14px;
  color: var(--vf-ink-3);
}
.cn-portal-help a { color: var(--vf-blue); text-decoration: none; }
.cn-portal-help a:hover { text-decoration: underline; }

/* Issues banner (admin) */
.cn-issues-banner {
  background: var(--vf-surface);
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  padding: 12px 18px;
  margin-bottom: 16px;
  font-size: 13px;
}
.cn-issues-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cn-issues-summary strong { color: var(--vf-ink); font-weight: 600; }
.cn-issues-bad { color: #c62828; }
.cn-issues-meta { display: flex; gap: 14px; align-items: center; }
.cn-issues-table {
  width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  font-size: 13px;
}
.cn-issues-table th, .cn-issues-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--vf-line);
  text-align: left;
}
.cn-issues-table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--vf-ink-3); }
.cn-issues-table code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: var(--vf-ink-2); background: var(--vf-bg-tint); padding: 1px 6px; border-radius: 4px; }

/* Booqable items list (admin consignor detail) */
.cn-booqable-items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}
.cn-booqable-items li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--vf-bg-tint);
  border-radius: 8px;
}
.cn-booqable-item-name { font-weight: 600; color: var(--vf-ink); font-size: 14px; }
.cn-booqable-items code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; }

/* Mobile */
@media (max-width: 900px) {
  .cn-dashboard {
    grid-template-columns: 1fr;
  }
  .cn-sidebar {
    position: static;
    top: auto;
  }
  .cn-preview-totals {
    grid-template-columns: repeat(2, 1fr);
  }
  .cn-portal-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .cn-section { padding: 20px 0 60px; }
  .cn-detail-head {
    flex-direction: column;
    gap: 14px;
  }
  .cn-detail-balance { width: 100%; text-align: left; }
  .cn-card { padding: 18px; }
  .cn-kv {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .cn-kv dt { margin-top: 8px; }
  .cn-form-2col, .cn-form-3col {
    grid-template-columns: 1fr;
  }
  .cn-modal-body { padding: 18px 18px 20px; }
  .cn-portal-balance-value { font-size: 42px; }
  .cn-portal-balance-card { padding: 24px 22px; }
  .cn-ledger-table { font-size: 13px; }
  .cn-ledger-table th, .cn-ledger-table td { padding: 8px 10px; }
}

/* ───────────────────────────────────────────────────────────────────
   Cart — category headers + staff-mode controls
   ─────────────────────────────────────────────────────────────────── */
/* Slim header sitting above each category group when the cart contains
   2+ main categories. Styled like a section eyebrow — mono, uppercase,
   blue — to read as a structural label rather than another line item.
   Renders as <li> (so it sits inside .rcart-lines without breaking
   list semantics) but visually flush left with no row chrome. */
.rcart-cat-header {
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0 6px;
  margin: 0;
  border-top: 1px solid rgba(10, 15, 26, 0.06);
}
.rcart-cat-header:first-child { border-top: none; padding-top: 4px; }
.rcart-cat-header-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-blue);
}
.rcart-cat-header-count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: #8892A6;
}

/* Custom-order banner — only visible to staff, only when they've
   dragged the cart into a manual order. Gives them a one-click way
   to revert to the auto-sort, mirroring how the equipment-page Staff
   Tools toggle works. */
.rcart-order-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  margin: 0 0 8px;
  background: rgba(31, 96, 255, 0.06);
  border: 1px solid rgba(31, 96, 255, 0.18);
  border-radius: 8px;
}
.rcart-order-meta-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-blue);
}
.rcart-order-meta-reset {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(31, 96, 255, 0.32);
  color: var(--vf-blue);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.rcart-order-meta-reset:hover {
  background: rgba(31, 96, 255, 0.10);
  border-color: rgba(31, 96, 255, 0.55);
}

/* Customer quick-pick typeahead (staff-mode email field). Wraps the
   email input; the dropdown sits absolutely positioned beneath it. */
.rcart-customer-pick {
  position: relative;
}
.rcart-customer-pick .rcart-email-input {
  width: 100%;
}
.rcart-customer-pick-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: white;
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(10, 15, 26, 0.18);
  max-height: 280px;
  overflow-y: auto;
  animation: rcart-bulk-pop-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.rcart-customer-pick-row {
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 120ms ease;
}
.rcart-customer-pick-row.is-active,
.rcart-customer-pick-row:hover {
  background: rgba(31, 96, 255, 0.08);
}
.rcart-customer-pick-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--vf-ink);
  line-height: 1.3;
}
.rcart-customer-pick-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--vf-ink-2);
  line-height: 1.4;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rcart-customer-pick-status-tag {
  color: var(--vf-blue);
  font-weight: 600;
}
.rcart-customer-pick-status,
.rcart-customer-pick-empty {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9;
  padding: 8px 12px;
  background: white;
  border: 1px solid var(--vf-line);
  border-radius: 10px;
  font-size: 12px;
  color: var(--vf-ink-3);
  box-shadow: 0 8px 24px rgba(10, 15, 26, 0.12);
}

/* Staff-only chip variant (e.g. the "Owned only" filter on
   /rentals/equipment). Subtly differentiated from the standard cat
   chips so staff scans it as a different tier of control. */
.rcat-floating-chips .rcat-chip-staff {
  background: rgba(31, 96, 255, 0.06);
  border-color: rgba(31, 96, 255, 0.30);
  color: var(--vf-blue);
}
.rcat-floating-chips .rcat-chip-staff:hover {
  border-color: rgba(31, 96, 255, 0.55);
  background: rgba(31, 96, 255, 0.10);
}
.rcat-floating-chips .rcat-chip-staff.is-on {
  background: var(--vf-blue);
  border-color: var(--vf-blue);
  color: white;
}
.rcat-floating-chips .rcat-chip-staff.is-on span { color: rgba(255, 255, 255, 0.78); }

/* Bulk-discount bar (staff mode). Sits above the cart items list.
   Just a small button that pops open a dialog with the % input + a
   row of "apply to X" buttons. */
.rcart-bulk-bar {
  position: relative;
  margin: 0 0 8px;
  display: flex;
  justify-content: flex-end;
}
.rcart-bulk-trigger {
  appearance: none;
  background: rgba(31, 96, 255, 0.06);
  border: 1px solid rgba(31, 96, 255, 0.22);
  color: var(--vf-blue);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.rcart-bulk-trigger:hover {
  background: rgba(31, 96, 255, 0.12);
  border-color: rgba(31, 96, 255, 0.45);
}
.rcart-bulk-trigger.is-on {
  background: var(--vf-blue);
  border-color: var(--vf-blue);
  color: white;
}
.rcart-bulk-pop {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: white;
  border: 1px solid var(--vf-line);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(10, 15, 26, 0.18);
  padding: 14px 16px;
  width: 280px;
  z-index: 6;
  animation: rcart-bulk-pop-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes rcart-bulk-pop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rcart-bulk-row { margin: 0 0 10px; }
.rcart-bulk-field { display: block; }
.rcart-bulk-field > span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--vf-ink-3);
  margin-bottom: 4px;
}
.rcart-bulk-field input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--vf-line);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  outline: 0;
  -moz-appearance: textfield;
}
.rcart-bulk-field input::-webkit-outer-spin-button,
.rcart-bulk-field input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.rcart-bulk-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rcart-bulk-apply,
.rcart-bulk-reset {
  appearance: none;
  background: transparent;
  border: 1px solid var(--vf-line);
  color: var(--vf-ink);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.rcart-bulk-apply:hover {
  background: rgba(31, 96, 255, 0.06);
  border-color: rgba(31, 96, 255, 0.40);
  color: var(--vf-blue);
}
.rcart-bulk-reset {
  margin-top: 6px;
  font-size: 11px;
  color: var(--vf-ink-3);
}
.rcart-bulk-reset:hover {
  background: rgba(220, 38, 38, 0.06);
  border-color: rgba(220, 38, 38, 0.40);
  color: #b91c1c;
}

/* Per-line internal note (staff mode). Three states: edit textarea
   (when active), read-only badge (note exists, not editing), or a
   small "+ Add internal note" prompt. All staff-only — never rendered
   for customers; only echoed in the Comet appendix server-side. */
.rcart-line-internal-note-add {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 4px 0 0;
  margin-top: 4px;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--vf-ink-3);
  cursor: pointer;
  text-align: left;
  opacity: 0.6;
  transition: opacity 140ms ease, color 140ms ease;
}
.rcart-line-internal-note-add:hover {
  opacity: 1;
  color: var(--vf-blue);
}
.rcart-line-internal-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 8px 4px 7px;
  background: rgba(31, 96, 255, 0.07);
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--vf-ink);
  cursor: pointer;
  max-width: 100%;
  transition: background 140ms ease;
}
.rcart-line-internal-note:hover { background: rgba(31, 96, 255, 0.12); }
.rcart-line-internal-note-icon { color: var(--vf-blue); flex-shrink: 0; line-height: 1.4; }
.rcart-line-internal-note-text {
  white-space: pre-wrap;
  word-break: break-word;
}
.rcart-line-internal-note-edit {
  margin-top: 6px;
}
.rcart-line-internal-note-edit textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid rgba(31, 96, 255, 0.40);
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  color: var(--vf-ink);
  background: white;
  outline: 0;
  resize: vertical;
  min-height: 48px;
  box-shadow: 0 0 0 3px rgba(31, 96, 255, 0.08);
}
.rcart-line-internal-note-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 4px;
}
.rcart-line-internal-note-actions button {
  appearance: none;
  background: transparent;
  border: 1px solid var(--vf-line);
  color: var(--vf-ink-2);
  font: inherit;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.rcart-line-internal-note-actions button:hover {
  background: rgba(31, 96, 255, 0.08);
  border-color: rgba(31, 96, 255, 0.40);
  color: var(--vf-blue);
}
.rcart-line-internal-note-clear:hover {
  background: rgba(220, 38, 38, 0.08) !important;
  border-color: rgba(220, 38, 38, 0.40) !important;
  color: #b91c1c !important;
}

/* Booqable admin deep-link icon (staff mode). Small ↗ button between
   the qty stepper and the × remove. Opens admin inventory filtered
   to this item's name in a new tab. */
.rcart-line-bq-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  color: var(--vf-ink-3);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}
.rcart-line-bq-link:hover {
  background: rgba(31, 96, 255, 0.10);
  color: var(--vf-blue);
}

/* Drag handle — only rendered in staff mode. Subtle, on the left edge,
   inherits the line's spacing so it doesn't push other elements
   around. Cursor flips to grab/grabbing for affordance. */
.rcart-line-drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  margin-right: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(10, 15, 26, 0.35);
  cursor: grab;
  user-select: none;
  transition: color 140ms ease;
}
.rcart-line-staff .rcart-line-drag:hover { color: var(--vf-blue); }
.rcart-line-staff[draggable="true"]:active .rcart-line-drag { cursor: grabbing; }
/* Drop indicator — a thin blue line on top of the hovered target row
   makes the insertion point obvious. */
.rcart-line-drop-target {
  box-shadow: inset 0 2px 0 0 var(--vf-blue);
}

/* Inline discount editor — staff-mode replacement for the static
   percent pill. Number input is borderless, monospaced, sized for 2–3
   digits; the ↺ reset button only appears when the line has an
   override (auto-routed values keep the input empty so the placeholder
   shows the would-be value). */
.rcart-line-discount-edit {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 6px 1px 5px;
  border-radius: 999px;
  background: rgba(31, 96, 255, 0.08);
  color: var(--vf-blue);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  gap: 1px;
}
.rcart-line-override .rcart-line-discount-edit {
  background: rgba(232, 124, 14, 0.10);
  color: #b35c00;
}
.rcart-line-discount-edit-minus { opacity: 0.7; }
.rcart-line-discount-edit-pct   { opacity: 0.7; margin-left: 1px; }
.rcart-line-discount-edit input {
  appearance: none;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  color: inherit;
  width: 28px;
  text-align: right;
  padding: 0;
  -moz-appearance: textfield;
}
.rcart-line-discount-edit input::-webkit-outer-spin-button,
.rcart-line-discount-edit input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.rcart-line-discount-reset {
  appearance: none;
  background: transparent;
  border: none;
  margin-left: 4px;
  padding: 0 2px;
  font: inherit;
  font-size: 12px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 140ms ease;
}
.rcart-line-discount-reset:hover { opacity: 1; }

/* Custom-item ownership selector (staff mode only). Three pill buttons
   mirroring the Collection/Courier toggle pattern used elsewhere in
   the cart so it reads as a familiar radio control. */
.rcart-custom-field-ownership > span {
  /* The wrapper is a label, so its <span> reuses the same eyebrow
     styling the rate / qty labels above it get. No extra rules
     needed — inherit from .rcart-custom-field > span. */
}
.rcart-custom-ownership {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  background: rgba(10, 15, 26, 0.05);
  border-radius: 999px;
  margin-top: 6px;
}
.rcart-custom-ownership-btn {
  appearance: none;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #4B5468;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}
.rcart-custom-ownership-btn:hover { color: var(--vf-ink); }
.rcart-custom-ownership-btn.is-on {
  background: var(--vf-blue);
  color: white;
}
.rcart-custom-ownership-btn.is-on:hover { color: white; }

/* ───────────────────────────────────────────────────────────────────
   /prep-tech — Prep Tech HUB landing page
   Two-card layout: Apply (new techs) and Portal (existing techs).
   ─────────────────────────────────────────────────────────────────── */
.prep-tech-hub-page {
  min-height: calc(100vh - 200px);
  /* Background comes from body.is-rentals-page (set in app.jsx when
     the prep-tech hub is the active page). No explicit fill needed
     here. */
}
.prep-tech-hub-hero {
  max-width: 960px;
  margin: 0 auto;
  padding: 120px 32px 96px;
}
.prep-tech-hub-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.prep-tech-hub-eyebrow-code {
  color: var(--vf-blue);
  background: rgba(31, 96, 255, 0.08);
  padding: 3px 8px;
  border-radius: 999px;
}
.prep-tech-hub-eyebrow-label {
  color: var(--vf-ink-3);
}
.prep-tech-hub-h {
  font-size: clamp(48px, 6vw, 92px);
  line-height: 1.0;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--vf-ink);
}
.prep-tech-hub-h em {
  font-style: italic;
  color: var(--vf-blue);
}
.prep-tech-hub-sub {
  font-size: 18px;
  color: var(--vf-ink-2);
  max-width: 640px;
  margin: 0 0 56px;
  line-height: 1.55;
}
.prep-tech-hub-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}
.prep-tech-hub-card {
  display: flex;
  flex-direction: column;
  padding: 32px 32px 36px;
  background: white;
  border: 1px solid var(--vf-line);
  border-radius: 16px;
  text-decoration: none;
  color: var(--vf-ink);
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.prep-tech-hub-card:hover {
  border-color: var(--vf-blue);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(31, 96, 255, 0.10);
}
.prep-tech-hub-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vf-blue);
  margin-bottom: 10px;
}
.prep-tech-hub-card-h {
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--vf-ink);
}
.prep-tech-hub-card-body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--vf-ink-2);
  margin: 0 0 22px;
  flex: 1;
}
.prep-tech-hub-card-cta {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--vf-blue);
  align-self: flex-start;
}

@media (max-width: 760px) {
  .prep-tech-hub-hero { padding: 64px 20px 48px; }
  .prep-tech-hub-cards { grid-template-columns: 1fr; }
}

/* Click-feedback press animation for the Prep Tech hub cards.
   Earlier version tried a shared-element morph via the View
   Transitions API but the snapshot-the-whole-page cost felt laggy
   on this content-heavy chrome. Replaced with a CSS-only press
   feedback — the card scales down a hair on :active so the click
   has tactile confirmation, then plain navigation kicks in.
   Hover already lifts via the .prep-tech-hub-card:hover rule
   above. */
.prep-tech-hub-card:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 90ms;
}