/* SnapFlow additions on top of the (untouched) Luminary template stylesheet.
   Reuses the Luminary CSS custom properties — no values are redefined here. */

/* BYOK / SnapFlow Managed pricing toggle — reuses .toggle-switch's knob
   animation (templatemo-621-luminary-style.css), just a second state class
   since "annual" doesn't apply to this toggle. */
.toggle-switch.managed::after { transform: translateX(22px); }

/* ── Embedded Stripe checkout modal (Home + Pricing pages) ──
   Subscribe buttons mount Stripe's own payment form in here instead of
   navigating to checkout.stripe.com — see snapflow.v3.js. */
.checkout-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.checkout-modal.open { display: flex; }
.checkout-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 11, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* ── Custom SnapFlow-branded checkout modal (Home + Pricing pages) ──
   Our own UI around Stripe's Payment Element (the only Stripe-owned pixels
   are the card fields themselves, styled via the appearance API to match
   this site's Night Brass palette) — see snapflow.v5.js.

   Styled to match the Luminary template's own design language: the same
   glass panel treatment as .pricing-card (panel-bg + blur + 36px radius +
   top sheen), the same pill button as .btn-primary (silver gradient,
   uppercase, letterspaced), and the same ivory/slate typography. */
.checkout-modal-panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: auto;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 36px;
  padding: 8px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  /* Sleek scrollbar — thin, subtle, matches the palette. */
  scrollbar-width: thin;
  scrollbar-color: rgba(176, 184, 196, 0.25) transparent;
}
.checkout-modal-panel::-webkit-scrollbar { width: 6px; }
.checkout-modal-panel::-webkit-scrollbar-track { background: transparent; }
.checkout-modal-panel::-webkit-scrollbar-thumb {
  background: rgba(176, 184, 196, 0.25);
  border-radius: 999px;
}
.checkout-modal-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(176, 184, 196, 0.4);
}
.checkout-modal-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(210, 215, 220, 0.03) 0%, transparent 40%);
  pointer-events: none;
}
.checkout-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--panel-border);
  color: var(--slate-warm);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.6s var(--silk-ease), border-color 0.6s var(--silk-ease);
}
.checkout-modal-close:hover { color: var(--ivory); border-color: rgba(156, 163, 175, 0.2); }
.checkout-modal-loading {
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-light);
  font-size: 0.85rem;
}
#checkout-embed:not(:empty) { min-height: 400px; }

/* Luminary's .testimonial-avatar was designed to hold initials text;
   these two rules make it behave correctly now that it holds an <img>. */
.testimonial-avatar { overflow: hidden; }
img.testimonial-avatar { object-fit: cover; }

/* ── Hero product screenshot ── */
.hero-visual {
  max-width: 900px;
  width: 100%;
  margin: 56px auto 0;
  border-radius: 28px;
  overflow: hidden;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(20px);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 1.4s var(--silk-ease) 0.9s forwards;
}
@media (max-width: 768px) {
  .hero-visual { margin-top: 40px; border-radius: 20px; }
}

/* ── App-screen mockups: a browser-chrome frame around a CSS-recreated
   screen (mockups.css), instead of a real screenshot. Same component kit
   and "Night Brass" palette as the docs site, so both properties match. ── */
.mockup-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.mockup-chrome .dots { display: flex; gap: 5px; flex-shrink: 0; }
.mockup-chrome .dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.12); }
.mockup-chrome .route {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 10.5px;
  color: var(--slate-warm);
  margin-left: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mockup-chrome .illustrative {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-warm);
  opacity: 0.55;
}

.feature-visual { display: flex; flex-direction: column; }
.feature-visual .mock { flex: 1; overflow: hidden; }
.hero-visual .mock { padding: 0; }

.mockup-frame {
  max-width: 620px;
  width: 100%;
  margin: 48px auto 0;
  border-radius: 28px;
  overflow: hidden;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.mockup-frame.wide { max-width: 760px; }

/* ── Mission receipt (ported from the pre-Luminary site, restyled to match) ── */
.receipt {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 28px;
  padding: 28px 28px 24px;
  max-width: 400px;
  width: 100%;
  margin: 0 auto 56px;
  backdrop-filter: blur(20px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  text-align: left;
}
.receipt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--panel-border);
}
.receipt-head-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate-warm);
}
.receipt-stamp {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #30d158;
  border: 1px solid rgba(48, 209, 88, 0.35);
  background: rgba(48, 209, 88, 0.1);
  padding: 4px 12px;
  border-radius: 999px;
}
.receipt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  padding: 7px 0;
  color: var(--slate-light);
}
.receipt-row strong { color: var(--ivory); font-weight: 600; }
.receipt-row.refund strong { color: #30d158; }
.receipt-divider { height: 1px; background: var(--panel-border); margin: 14px 0; }
.receipt-resources {
  font-size: 12px;
  color: var(--slate-warm);
  line-height: 1.9;
  margin: 10px 0 14px;
}
.receipt-resources span { color: var(--slate-light); }
.receipt-hash {
  font-size: 11px;
  color: var(--slate-warm);
  word-break: break-all;
  padding-top: 12px;
  border-top: 1px dashed var(--panel-border);
}
.receipt-hash strong { color: var(--slate-light); font-weight: 600; }

/* ── Self-serve checkout error banner (Pricing page) ── */
.ss-error-banner {
  display: none;
  max-width: 640px;
  margin: 24px auto 0;
  padding: 12px 20px;
  border-radius: 14px;
  background: rgba(224, 141, 77, 0.08);
  border: 1px solid rgba(224, 141, 77, 0.2);
  color: var(--slate-light);
  font-size: 0.82rem;
  text-align: center;
}
.ss-error-banner.visible { display: block; }

/* ── Custom SnapFlow-branded checkout modal (Home + Pricing pages) ──
   Our own UI around Stripe's Payment Element (the only Stripe-owned pixels
   are the card fields themselves, styled via the appearance API to match
   this site's Night Brass palette) — see snapflow.v5.js. */
.sf-checkout-body { padding: 28px 28px 24px; }
.sf-checkout-brand {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate-warm);
  margin-bottom: 8px;
}
.sf-checkout-title {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--ivory);
}
.sf-checkout-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: 20px;
  background: rgba(22, 26, 32, 0.6);
  border: 1px solid var(--panel-border);
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.sf-checkout-summary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(210, 215, 220, 0.03) 0%, transparent 40%);
  pointer-events: none;
}
.sf-checkout-plan {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ivory-muted);
}
.sf-checkout-detail { font-size: 12px; color: var(--slate-warm); margin-top: 4px; }
.sf-checkout-price {
  font-size: 24px;
  font-weight: 300;
  letter-spacing: -0.03em;
  color: var(--ivory);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sf-checkout-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate-warm);
  margin-bottom: 8px;
}
.sf-checkout-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: rgba(22, 26, 32, 0.6);
  color: var(--ivory);
  font-size: 14px;
  font-weight: 300;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 18px;
  transition: border-color 0.6s var(--silk-ease);
}
.sf-checkout-input::placeholder { color: var(--slate-warm); }
.sf-checkout-input:focus { border-color: rgba(176, 184, 196, 0.3); }
.sf-checkout-element { min-height: 120px; }
.sf-checkout-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 69, 58, 0.06);
  border: 1px solid rgba(255, 69, 58, 0.15);
  color: #ff6b61;
  font-size: 12px;
  margin-top: 12px;
}
.sf-checkout-error[hidden] { display: none; }
.sf-checkout-submit {
  width: 100%;
  margin-top: 18px;
  padding: 15px 0;
  border-radius: 100px;
  border: none;
  background: linear-gradient(135deg, var(--silver), var(--slate-light));
  color: var(--base-deep);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.8s var(--silk-ease), box-shadow 0.8s var(--silk-ease);
}
.sf-checkout-submit:hover:not(:disabled) {
  transform: scale(1.02);
  box-shadow: 0 8px 40px rgba(176, 184, 196, 0.18);
}
.sf-checkout-submit:disabled { opacity: 0.5; cursor: wait; }
.sf-checkout-secure {
  margin-top: 16px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--slate-warm);
  opacity: 0.7;
}