/* Runna Media "open shoot dates" email capture card (assets/capture/capture-2026-10-28.css)
   Pairs with capture-2026-10-28.js. Loaded on every page that loads the chat assistant (never /go/, never 404).
   Same frosted glass, League Spartan headings and white button as the chat assistant (assets/assist/).
   Every class starts with rmcap- so nothing here touches the site's own styles.
   Stacking: z-index 91, like the chat teaser (below the nav 100, the video modal 1000, the open chat panel 99990 and
   the cookie banner 100000).
   Desktop: bottom right, above the chat launcher (the launcher is 56px at bottom 24px, so the card starts at 94px).
   Phones (below 768px): full width minus 16px gutters, above the Call / Text / Book / Chat bar. */

.rmcap {
  --rmcap-ink: #F5F5F7;
  --rmcap-ink-2: #C9C9CF;
  --rmcap-dim: #A1A1A8;
  --rmcap-line: rgba(255, 255, 255, 0.14);
  --rmcap-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --rmcap-display: 'League Spartan', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --rmcap-text: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --rmcap-blur: blur(22px) saturate(170%);
  position: fixed; right: 24px; bottom: 94px; z-index: 91;
  width: 340px; max-width: calc(100vw - 48px);
  padding: 14px; border-radius: 20px;
  background: rgba(16, 16, 18, 0.78);
  -webkit-backdrop-filter: var(--rmcap-blur); backdrop-filter: var(--rmcap-blur);
  border: 1px solid var(--rmcap-line);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.8);
  font-family: var(--rmcap-text); color: var(--rmcap-ink); text-align: left;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 0.45s var(--rmcap-ease), transform 0.45s var(--rmcap-ease), visibility 0s linear 0.45s;
}
.rmcap.rmcap-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.rmcap[hidden] { display: none !important; }
.rmcap *, .rmcap *::before, .rmcap *::after { box-sizing: border-box; }
.rmcap p { margin: 0; }
.rmcap button, .rmcap input {
  font: inherit; color: inherit; margin: 0; text-transform: none; letter-spacing: normal;
  -webkit-appearance: none; appearance: none;
}
.rmcap button { background: none; border: 0; padding: 0; cursor: pointer; }
.rmcap a { color: inherit; }
.rmcap svg { display: block; flex: none; }
.rmcap:focus { outline: none; }
.rmcap :focus { outline: none; }
.rmcap :focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
.rmcap-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.rmcap-x {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--rmcap-dim);
  transition: background 0.2s ease, color 0.2s ease;
}
.rmcap-x:hover { color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
.rmcap-x svg { width: 14px; height: 14px; }

.rmcap-row { display: flex; gap: 12px; align-items: center; padding-right: 22px; }
.rmcap-loop {
  width: 84px; height: 84px; flex: none; border-radius: 12px; overflow: hidden; background: #000;
}
.rmcap-loop video, .rmcap-loop img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; }
.rmcap-title { font: 700 20px/1.1 var(--rmcap-display); letter-spacing: -0.005em; color: var(--rmcap-ink); text-wrap: balance; }
.rmcap-body { font-size: 13px; line-height: 1.45; color: var(--rmcap-ink-2); margin-top: 6px !important; }

.rmcap-form { display: flex; gap: 6px; margin-top: 12px; }
.rmcap-input {
  flex: 1; min-width: 0; min-height: 42px; padding: 10px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.28);
  color: #FFFFFF; font-size: 14px; line-height: 1.3;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.rmcap .rmcap-input:focus-visible { outline: none; border-color: #FFFFFF; background: rgba(255, 255, 255, 0.12); }
.rmcap-input::placeholder { color: #8D8D94; opacity: 1; }
.rmcap-input[aria-invalid="true"] { border-color: #FFB4AB; }
.rmcap .rmcap-go {
  min-height: 42px; padding: 0 16px; border-radius: 999px; white-space: nowrap;
  background: #FFFFFF !important; color: #0A0A0B !important;
  font: 700 13.5px/1 var(--rmcap-display) !important; letter-spacing: 0.01em;
  transition: background 0.2s ease;
}
.rmcap .rmcap-go:hover { background: #E5E5E5 !important; }
.rmcap .rmcap-go[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
.rmcap-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.rmcap-msg { font-size: 12.5px; line-height: 1.4; color: #FFB4AB; margin-top: 8px !important; }
.rmcap-msg:empty { display: none; }
.rmcap-fine { font-size: 11.5px; line-height: 1.4; color: var(--rmcap-dim); margin-top: 8px !important; }
.rmcap-fine a { text-decoration: underline; text-underline-offset: 2px; }
.rmcap-fine a:hover { color: #FFFFFF; }
.rmcap-done { font: 600 15px/1.35 var(--rmcap-display); color: var(--rmcap-ink); margin-top: 12px !important; }
.rmcap-done:empty { display: none; }
.rmcap.rmcap-sent .rmcap-form, .rmcap.rmcap-sent .rmcap-msg { display: none; }

/* ------------------------------------------------------------------ tablet: the launcher is 52px at 20px */
@media (min-width: 768px) and (max-width: 1023px) {
  .rmcap { right: 20px; bottom: 86px; }
}

/* ------------------------------------------------------------------ phones: above the contact bar, never a cover */
@media (max-width: 767px) {
  .rmcap {
    left: 16px; right: 16px; width: auto; max-width: none;
    bottom: calc(16px + env(safe-area-inset-bottom));
    padding: 12px; border-radius: 18px;
    background: rgba(12, 12, 14, 0.88);
  }
  html.rmc-has-bar .rmcap { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .rmcap-loop { width: 64px; height: 64px; border-radius: 10px; }
  .rmcap-title { font-size: 18px; }
  .rmcap-body { font-size: 13px; margin-top: 4px !important; }
  .rmcap-form { margin-top: 10px; }
  .rmcap-input { font-size: 16px; min-height: 44px; }
  .rmcap .rmcap-go { min-height: 44px; }
}

/* ------------------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rmcap { transition: opacity 0.01s linear, visibility 0s !important; transform: none !important; }
}

/* Windows high contrast */
@media (forced-colors: active) {
  .rmcap, .rmcap-input, .rmcap-go { border: 1px solid CanvasText !important; }
}

@media print { .rmcap { display: none !important; } }